.story-screen{--cat:var(--sky);--take:40px}.story-screen.cat-sacrifice{--cat:var(--crimson)}.story-screen.cat-windfall{--cat:var(--gold)}.story-screen.cat-mentor{--cat:var(--leaf)}.story-screen.cat-gamble{--cat:var(--violet)}.story-screen.cat-pilgrimage{--cat:var(--rose)}.event-scrim>.screen.event-screen.story-screen{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:5px;row-gap:3px;padding:3px 4px 4px;background:linear-gradient(180deg,var(--void),color-mix(in srgb,var(--void) 60%,var(--ink)));box-shadow:none;animation:none}.story-screen>.hud{grid-column:1/-1}.story-head{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:0}.story-plate{position:relative;flex:0 1 auto;aspect-ratio:475/223;max-height:104px;min-height:36px;display:block;width:100%;overflow:hidden;border-radius:2px;background:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--cat) 35%,var(--stone)),0 2px 4px #0008}.story-plate img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}.story-words{flex:none}.story-words{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:0;padding:0 1px}.story-kicker{display:flex;align-items:center;gap:2px;font-size:5.5px;line-height:1.1;font-weight:650;color:color-mix(in srgb,var(--cat) 60%,var(--silver))}.story-kicker img{width:7px;height:7px;flex:none;object-fit:contain;image-rendering:auto}.story-words h2{margin:0;font:italic 650 11px/1.05 PipSignature,Georgia,var(--cjk),serif;font-variation-settings:"SOFT" 25,"WONK" 1;letter-spacing:-.1px;color:#e0d8b0;overflow-wrap:anywhere}.story-words p{margin:0;font-size:6.5px;line-height:1.32;color:color-mix(in srgb,var(--silver) 60%,var(--chalk));overflow-wrap:anywhere}.story-words p .type{width:6px;height:6px;vertical-align:-1px}.story-hint{color:color-mix(in srgb,var(--gold) 45%,var(--silver))!important}.story-opts{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;align-content:stretch;gap:3px;min-width:0;min-height:0}.story-opt{display:grid;grid-template-columns:18px minmax(0,1fr) var(--take);grid-template-rows:auto auto;grid-template-areas:"ic label take" "ic fx take";column-gap:4px;row-gap:1px;align-content:center;align-items:center;min-width:0;min-height:0;padding:2px 3px;text-align:left;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--cat) 12%,var(--void)),color-mix(in srgb,var(--void) 85%,var(--ink)));box-shadow:inset 0 1px #ffffff0d,0 1px 0 var(--ink)}.story-ic{grid-area:ic;align-self:center;display:grid;place-items:center;width:18px;height:18px;border-radius:2px;background:var(--ink);box-shadow:inset 0 0 0 1px #ffffff14}.story-ic img{max-width:14px;max-height:14px;object-fit:contain;image-rendering:auto}.story-ic.is-creature img{max-width:18px;max-height:18px}.story-label{grid-area:label;min-width:0;font-size:7px;line-height:1.1;font-weight:650;color:var(--chalk);overflow-wrap:anywhere}.story-fx{grid-area:fx;min-width:0;font-size:6px;line-height:1.2;color:#e0d8b0}.story-fx .rule-lines{justify-self:start;font-size:6px;line-height:1.25;color:inherit}.story-fx .type{width:6px;height:6px;vertical-align:-1px}.story-take{grid-area:take;align-self:center;width:var(--take);min-width:0;max-width:none;height:13px;min-height:13px;margin:0}.story-opt.off{background:linear-gradient(90deg,color-mix(in srgb,var(--slate) 55%,var(--void)),var(--void))}.story-opt.off :is(.story-ic,.story-label,.story-fx){opacity:var(--quiet,.45)}.story-opt.is-echo{grid-template-areas:"ic echo take" "ic label take" "ic fx take";grid-template-rows:auto auto auto;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 14%,var(--void)),color-mix(in srgb,var(--void) 85%,var(--ink)))}.story-echo{grid-area:echo;font-size:5.5px;line-height:1;font-style:normal;font-weight:650;color:color-mix(in srgb,var(--gold) 60%,var(--silver))}button.story-ic{padding:0;border:0;cursor:pointer;min-width:18px;min-height:18px}html.kb button.story-ic:focus-visible{outline:1px solid var(--sky);outline-offset:1px}.story-opt:has(.story-pick){grid-template-areas:"ic label take" "ic fx take" ". pick take";grid-template-rows:auto auto auto}.story-opt.is-echo:has(.story-pick){grid-template-areas:"ic echo take" "ic label take" "ic fx take" ". pick take";grid-template-rows:auto auto auto auto}.story-pick{grid-area:pick;justify-self:start;display:flex;align-items:center;gap:1px;min-height:12px}.story-step{display:grid;place-items:center;width:12px;min-width:12px;height:12px;min-height:12px;padding:0}.story-step img{width:6px;height:6px;object-fit:contain}.story-step.next img{transform:scaleX(-1)}.story-who{display:grid;place-items:center;width:12px;height:12px;padding:0;border:0;border-radius:2px;background:var(--ink);box-shadow:inset 0 0 0 1px #ffffff1a;cursor:pointer}.story-who img{width:11px;height:11px;object-fit:contain;image-rendering:auto}.story-who.on{box-shadow:inset 0 0 0 1px var(--action-honey)}@media(hover:hover){.story-who:not(.on):hover{box-shadow:inset 0 0 0 1px #ffffff4d}}.story-inspect{grid-column:2;grid-row:2;display:flex;align-items:flex-start;justify-content:center;gap:3px;min-width:0;min-height:0;padding-top:2px}.story-close{display:grid;place-items:center;width:12px;min-width:12px;height:12px;min-height:12px;padding:0}.story-close img{width:6px;height:6px}.slot.story-touched{position:relative}.slot.story-touched:after{content:"";position:absolute;left:50%;top:-1px;width:7px;height:7px;translate:-50% -50%;background:url(./art/ui/icons/star.png) center/contain no-repeat;pointer-events:none;animation:storyTouched 1.2s ease-out 3 both}@keyframes storyTouched{0%{opacity:0;transform:translateY(3px)}30%{opacity:1;transform:none}to{opacity:0;transform:translateY(-3px)}}.toast.story{border-color:color-mix(in srgb,var(--gold) 55%,var(--stone))}@media(prefers-reduced-motion:reduce){.story-screen *{animation:none!important}.slot.story-touched:after{animation:none;opacity:1}}#app .story-inspect #catch-detail .cc-drills{display:none}
