.muted { color: var(--muted); }
h1, h2, h3 { font-family: var(--brand); font-weight: 700; letter-spacing: -.01em; text-transform: lowercase; margin: 0; }
.kicker { font-size: calc(10px * var(--fs)); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--paper-2); line-height: 1.55; max-width: 60ch; }

/* title */
.title-screen { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 0 7vw; gap: 4vw; }
.title-ring { margin: 0; font-size: calc(11px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); justify-self: center; filter: drop-shadow(0 0 18px rgba(139,92,246,.35)); order: 2; }
.title-ring .a1 { color: rgba(255,43,60,.45); }
.title-ring .a2 { color: var(--violet-hot); }
.title-ring .a3 { color: var(--paper); text-shadow: 0 0 10px var(--red-hot); }
/* the live ring of the title: five arcs, tasks, noise, clarity (titlering.js) */
.title-ring-wrap { margin: 0; order: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.title-ring.live { order: 0; font-family: var(--mono); font-size: calc(12.5px * var(--fs)); line-height: 1.02; color: var(--paper-2); filter: drop-shadow(0 0 22px rgba(139,92,246,.28)); cursor: default; user-select: none; }
.title-ring.live .s-signal { --c: var(--st-signal); } .title-ring.live .s-context { --c: var(--st-context); } .title-ring.live .s-decision { --c: var(--st-decision); }
.title-ring.live .s-delivery { --c: var(--st-delivery); } .title-ring.live .s-retro { --c: var(--st-retro); }
.title-ring.live [data-st] { color: var(--c); }
.title-ring.live .d0 { opacity: .28; } .title-ring.live .d1 { opacity: .5; } .title-ring.live .d2 { opacity: .75; } .title-ring.live .d3 { opacity: 1; }
.title-ring.live .lb { font-weight: 700; background: rgba(9,6,16,.88); text-shadow: 0 0 8px currentColor; }
.title-ring.live .lb.on { background: var(--c); color: #0b0812; text-shadow: none; }
.title-ring.live .lb.neck { box-shadow: inset 0 -2px var(--red-hot); } /* the narrow station of the week: a steady red line, no blinking */
.title-ring.live .lb.neck::after { content: none; }
.title-ring.live .sl { background: rgba(9,6,16,.88); opacity: .9; }
.title-ring.live .tk { color: var(--paper); text-shadow: 0 0 6px #fff, 0 0 14px var(--violet-hot); }
.title-ring.live .nz { color: var(--red-hot); text-shadow: 0 0 8px var(--red-hot); }
.title-ring.live .cl { color: var(--paper); text-shadow: 0 0 10px var(--st-signal); }
.title-ring.live .f1 { opacity: .35; } .title-ring.live .f2 { opacity: .7; }
.title-ring.live .ct { color: var(--paper-2); }
.title-ring.live .ct.cl { color: var(--st-signal); text-shadow: none; } .title-ring.live .ct.nz { text-shadow: none; }
/* the sign of AI Mindset at rest (logomask.js): the face in paper and violet, the rim in the stations' colours */
.title-ring.live.sign { cursor: default; } /* hover opens it; there is nothing to click */
.title-ring.live .fc { color: #d9cdf5; }
.title-ring.live .fc.tail { color: #b8a6e6; }
.title-ring.live .fc.eye { color: var(--st-signal); text-shadow: 0 0 10px var(--st-signal); }
.title-ring.live.sign { filter: drop-shadow(0 0 24px rgba(139,92,246,.3)) drop-shadow(0 0 2px rgba(255,43,60,.22)); } /* one glow for both states, so opening does not flash */
.title-ring-cap { max-width: 46ch; min-height: 3.2em; text-align: center; font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--muted); }
.title-ring-cap b { font-weight: 700; } .title-ring-cap .s-signal { color: var(--st-signal); } .title-ring-cap .s-context { color: var(--st-context); }
.title-ring-cap .s-decision { color: var(--st-decision); } .title-ring-cap .s-delivery { color: var(--st-delivery); } .title-ring-cap .s-retro { color: var(--st-retro); }
.title-block { order: 1; display: flex; flex-direction: column; gap: 18px; }
/* review ui-7: the sign keeps inside its column at 1280 and on short screens, the links leave the buttons' corner,
   a short window lets the block start at the top and scroll instead of cutting the foot */
.title-ring.live { font-size: min(calc(12.5px * var(--fs)), .9vw, 1.75vh); }
.title-screen .title-links { left: auto; right: 84px; }
@media (max-height: 940px) {
  .title-screen { align-items: start; padding-top: 3vh; padding-bottom: 3vh; overflow-y: auto; overflow-x: hidden; } /* 14.10: a trackpad slid the menu off the left edge */
  .title-ring-wrap { align-self: center; }
  .title-block { gap: 12px; }
  .title-block h1 { font-size: clamp(56px, min(9vw, 12vh), 132px); }
  .title-block .modes { margin: 2px 0 6px; }
}
.title-block h1 { font-size: clamp(64px, 9vw, 132px); line-height: .9; color: var(--paper); text-shadow: 0 0 40px rgba(191,9,9,.45), 3px 0 0 rgba(255,43,60,.6), -3px 0 0 rgba(31,182,209,.35); }
.title-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.title-foot { font-size: calc(11px * var(--fs)); color: var(--muted); display: flex; gap: 10px; align-items: center; }
.title-foot input { width: 110px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--paper); font: inherit; padding: 2px 0; outline: none; }
.title-logo { position: absolute; right: 28px; bottom: 24px; height: 34px; opacity: .8; }

/* map */
.map-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 220px 1fr 260px; gap: 24px; padding: 24px; }
.map-legend { display: flex; flex-direction: column; gap: 10px; font-size: calc(12px * var(--fs)); color: var(--paper-2); padding-top: 20px; }
.map-legend .lg b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1px solid var(--line-2); font-size: calc(12px * var(--fs)); }
.map-wrap { position: relative; min-height: 0; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines line { stroke: rgba(244,244,239,.14); stroke-dasharray: 3 6; stroke-width: 1.2; }
.map-lines line.hot { stroke: var(--violet-hot); stroke-dasharray: none; opacity: .8; }
.map-node { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--paper-2); cursor: default; padding: 0; }
.map-node b { font-size: calc(18px * var(--fs)); line-height: 1; }
.map-node span { position: absolute; top: 50px; font-size: calc(9px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .15s; }
.map-node:hover span, .map-node.avail span { opacity: 1; }
.map-node.t-boss { width: 64px; height: 64px; border-color: var(--red-hot); box-shadow: 0 0 24px rgba(255,43,60,.35); }
.map-node.visited { background: var(--violet-deep); border-color: var(--violet); color: var(--paper); opacity: .7; }
.map-node.current { outline: 2px solid var(--paper); outline-offset: 3px; opacity: 1; }
.map-node.avail { cursor: pointer; border-color: var(--paper); color: var(--paper); animation: avail 1.4s ease-in-out infinite; }
.map-node.avail:hover { background: var(--red); border-color: var(--red-hot); }
@keyframes avail { 50% { box-shadow: 0 0 0 6px rgba(244,244,239,.06), 0 0 22px rgba(167,123,255,.45); } }
.map-node:disabled:not(.visited) { opacity: .45; }
.map-side { padding-top: 20px; font-size: calc(12px * var(--fs)); line-height: 1.55; color: var(--paper-2); min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.map-side h3 { font-size: calc(14px * var(--fs)); color: var(--paper); margin-bottom: 8px; }

/* reward + review */
.reward-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: minmax(420px, 1fr) 1.3fr; gap: 32px; padding: 32px 40px; overflow: auto; }
.reward-screen h2 { font-size: calc(22px * var(--fs)); margin-bottom: 6px; }
.review { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fs)); margin-top: 14px; }
.review th { text-align: left; font-weight: 400; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.review td { padding: 8px; border-bottom: 1px solid var(--line); position: relative; }
.review td:first-child { color: var(--paper); }
.review td .st { color: var(--muted); font-size: calc(10px * var(--fs)); margin-right: 4px; }
.review td .spark { position: absolute; left: 8px; bottom: 2px; height: 2px; background: linear-gradient(90deg, var(--violet-hot), var(--red-hot)); }
.review td.barcell { min-width: 120px; }
.review td.barcell .spark { position: static; display: block; height: 6px; }
.review td.bad { color: var(--red-hot); }
.review td.clar { color: var(--violet-hot); font-weight: 700; }
.review td.clar .boost { margin-left: 4px; font-weight: 400; font-size: calc(10px * var(--fs)); color: var(--cyan, #1fb6d1); }
.review em { font-style: normal; font-size: calc(10px * var(--fs)); padding: 1px 5px; border: 1px solid currentColor; white-space: nowrap; }
.review em.good { color: var(--violet-hot); }
.review em.bad { color: var(--red-hot); }
.review .src { display: block; font-size: calc(9px * var(--fs)); color: var(--muted); }
.loot { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.loot-i { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line-2); background: var(--ink-1); font-size: calc(11px * var(--fs)); color: var(--muted); }
.loot-i b { color: var(--paper); font-size: calc(16px * var(--fs)); }
.loot-i small { color: var(--paper-2); max-width: 28ch; }
.relic-loot { border-color: var(--violet-hot); }
.choices { display: flex; gap: 22px; margin: 18px 0 24px; flex-wrap: wrap; }
.card.choice { cursor: pointer; }
.card.choice:hover { transform: translateY(-10px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 0 0 1px var(--accent), 0 0 40px -8px var(--accent), 0 30px 40px -20px #000; }

/* dilemma */
.event-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 1fr minmax(380px, 460px) 1fr; align-items: center; gap: 28px; padding: 30px; }
.dilemma { position: relative; padding: 26px 28px; background: var(--ink-1); border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px #000, inset 0 0 60px rgba(42,29,68,.6); cursor: grab; transition: transform .25s var(--ease), opacity .25s; touch-action: none; }
.dilemma .faction { font-size: calc(11px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.dilemma pre { margin: 14px 0; font-size: calc(8.5px * var(--fs)); line-height: 1; color: rgba(167,123,255,.4); text-align: center; }
.dilemma pre .a2 { color: var(--violet-hot); }
.dilemma pre .a3 { color: var(--paper); text-shadow: 0 0 8px var(--red-hot); }
.dilemma h2 { font-size: calc(22px * var(--fs)); margin-bottom: 10px; }
.dilemma p { color: var(--paper-2); line-height: 1.55; margin: 0; }
.swipe-hint { margin-top: 18px; font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dilemma.gone-left { transform: translateX(-60vw) rotate(-24deg); opacity: 0; }
.dilemma.gone-right { transform: translateX(60vw) rotate(24deg); opacity: 0; }
/* 15.10: the two answers are torn plates like the title's modes, pulled in to the card: violet on the left, cyan on the right */
.choice-side { --ch: 167,123,255; position: relative; isolation: isolate; justify-self: end; width: 100%; max-width: 340px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 22px; background: transparent; border: 0; color: var(--paper); text-align: left; cursor: pointer; filter: drop-shadow(5px 5px 0 rgba(191,9,9,.5)) drop-shadow(0 18px 24px rgba(0,0,0,.35)); transition: transform .22s var(--ease), filter .22s; }
.choice-side.right { --ch: 31,182,209; justify-self: start; text-align: right; align-items: flex-end; filter: drop-shadow(-5px 5px 0 rgba(191,9,9,.5)) drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.choice-side::before, .choice-side::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 5%, 7% 0, 19% 3%, 33% 0, 46% 2%, 61% 0, 75% 4%, 88% 0, 100% 3%, 99% 34%, 100% 66%, 98% 100%, 85% 96%, 71% 100%, 56% 97%, 42% 100%, 27% 96%, 13% 100%, 0 97%, 1% 62%, 0 30%); }
.choice-side::before { background: linear-gradient(160deg, rgba(var(--ch),.34), rgba(7,4,12,.9) 70%); transition: background .22s; }
.choice-side::after { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px); }
.choice-side.right::before, .choice-side.right::after { clip-path: polygon(0 2%, 12% 0, 26% 4%, 40% 0, 53% 3%, 67% 0, 80% 3%, 93% 0, 100% 6%, 98% 40%, 100% 74%, 100% 97%, 90% 100%, 76% 96%, 62% 100%, 49% 97%, 34% 100%, 20% 96%, 7% 100%, 0 94%, 2% 50%); }
.choice-side.right::before { background: linear-gradient(200deg, rgba(var(--ch),.3), rgba(7,4,12,.9) 70%); }
.choice-side .arrow { font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; color: rgb(var(--ch)); transition: transform .22s var(--ease); }
.choice-side b { font-family: var(--brand); font-size: calc(24px * var(--fs)); line-height: 1.05; text-transform: lowercase; text-wrap: balance; }
.choice-side .fx { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-side.right .fx { justify-content: flex-end; }
.choice-side .fx > span:not(.pchip) { font-size: calc(11px * var(--fs)); padding: 2px 6px; border: 1px solid currentColor; }
.choice-side .fx span.soft s { opacity: .55; text-decoration-color: var(--red-hot); margin-right: 4px; }
.choice-side .fx span.thread-chip { color: var(--violet-hot); border-style: dashed; }
.dilemma .where { font-size: calc(10px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.choice-side .fx .good { color: var(--violet-hot); }
.choice-side .fx .bad { color: var(--red-hot); }
.choice-side:hover::before, .choice-side.lean::before { background: linear-gradient(160deg, rgba(var(--ch),.55), rgba(7,4,12,.88) 75%); }
.choice-side.left:hover, .choice-side.left.lean { transform: translateX(-6px) rotate(-.6deg); }
.choice-side.right:hover, .choice-side.right.lean { transform: translateX(6px) rotate(.6deg); }
.choice-side.left:hover .arrow, .choice-side.left.lean .arrow { transform: translateX(-6px); }
.choice-side.right:hover .arrow, .choice-side.right.lean .arrow { transform: translateX(6px); }

/* shop */
.shop-screen { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 30px 40px; overflow: auto; }
.shop-main { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.shop-main h3 { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 6px; }
.shop-cards { flex: 1; display: flex; flex-wrap: wrap; gap: 26px 22px; justify-content: center; align-content: center; padding-bottom: 40px; }
.ware { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: transform .18s var(--ease); }
.ware:hover { transform: translateY(-6px); }
.ware .price { font-weight: 800; font-size: calc(15px * var(--fs)); padding: 3px 12px; border: 1px solid var(--line-2); background: var(--ink-1); }
.ware:hover .price { border-color: var(--violet-hot); }
.ware.poor .price { color: var(--red-hot); }
.ware.sold { opacity: .3; pointer-events: none; }
.shop-side { display: flex; flex-direction: column; gap: 10px; }
.shop-side h3 { font-size: calc(13px * var(--fs)); color: var(--muted); margin-top: 6px; }
.relic-ware { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; background: var(--ink-1); border: 1px solid rgba(167,123,255,.4); color: var(--paper); cursor: pointer; }
.relic-ware span { font-size: calc(11px * var(--fs)); color: var(--paper-2); }
.relic-ware em { font-style: normal; font-weight: 800; }
.relic-ware:disabled { opacity: .62; cursor: default; }

/* rest / workshop */
.rest-screen { position: absolute; inset: 64px 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.rest-art { margin: 0; font-size: calc(11px * var(--fs)); line-height: 1; color: rgba(167,123,255,.35); }
.rest-art .a2 { color: var(--violet-hot); }
.rest-art .a3 { color: var(--paper); }
.rest-actions { display: flex; gap: 16px; }
.btn.big { flex-direction: column; min-width: 220px; padding: 18px 22px; font-size: calc(16px * var(--fs)); }
.btn.big small { font-size: calc(11px * var(--fs)); opacity: .7; letter-spacing: 0; }

/* report + archive */
.report-screen { position: absolute; inset: 0; overflow: auto; padding: 56px 8vw; display: flex; flex-direction: column; gap: 28px; }
.report-head h1 { font-size: clamp(48px, 6vw, 88px); margin: 8px 0; text-shadow: 3px 0 0 rgba(255,43,60,.6), -3px 0 0 rgba(31,182,209,.35); }
.report-nums { display: flex; gap: 32px; margin-top: 18px; }
.report-nums span { display: flex; flex-direction: column; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.report-nums b { font-family: var(--brand); font-size: calc(34px * var(--fs)); color: var(--paper); letter-spacing: 0; }
.report-body h2 { font-size: calc(18px * var(--fs)); }
.report-actions { display: flex; gap: 10px; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 250; background: rgba(5,4,7,.78); backdrop-filter: blur(4px); display: grid; place-items: center; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; } }
.sheet { position: relative; width: min(560px, 92vw); max-height: 86vh; overflow: auto; padding: 28px 30px; background: var(--ink-1); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px #000; }
.sheet.wide { width: min(1100px, 94vw); }
.sheet h2 { font-size: calc(20px * var(--fs)); margin-bottom: 14px; }
.sheet h3 { font-size: calc(13px * var(--fs)); margin: 18px 0 8px; color: var(--paper-2); }
.sheet .close { position: absolute; right: 12px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: calc(24px * var(--fs)); cursor: pointer; }
.deck-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.how { padding-left: 20px; line-height: 1.6; color: var(--paper-2); }
.how li { margin-bottom: 8px; }
.how b { color: var(--paper); }
.kw-list { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: calc(12px * var(--fs)); }
.kw-list dt { color: var(--violet-hot); }
.kw-list dd { margin: 0; color: var(--paper-2); }
.menu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.toggle { display: flex; gap: 10px; align-items: center; font-size: calc(13px * var(--fs)); color: var(--paper-2); cursor: pointer; }
.toggle input { accent-color: var(--red); }

/* model verdict caveat, debrief, markdown export */
.model-note { margin-top: 12px; font-size: calc(11px * var(--fs)); color: var(--muted); letter-spacing: .02em; border-left: 2px solid var(--violet); padding-left: 10px; max-width: 70ch; }
.debrief { margin: 6px 0 0 18px; padding: 0; color: var(--paper-2); font-size: calc(13px * var(--fs)); line-height: 1.7; }
.debrief li::marker { color: var(--red-hot); }
.md-out { width: 100%; height: 46vh; background: var(--ink-0, #050407); color: var(--paper); border: 1px solid var(--line-2); font: 12px/1.5 'JetBrains Mono', monospace; padding: 14px; resize: vertical; }

/* card dossier */
.dossier { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
.dossier-text h2 { font-family: var(--brand); font-size: calc(30px * var(--fs)); margin: 6px 0 12px; }
.dossier-text p { color: var(--paper-2); line-height: 1.6; max-width: 56ch; }
.kw-list { list-style: none; padding: 0; margin: 14px 0; font-size: calc(12px * var(--fs)); color: var(--paper-2); line-height: 1.7; }
.kw-list b { color: var(--violet-hot); font-weight: 500; }
.src-line { font-size: calc(11px * var(--fs)); }
.src-line code { color: var(--paper); }

/* season ring in the report */
.season-ring { max-width: 760px; margin: 6px 0 18px; }
.season-ring svg { width: 100%; height: auto; display: block; }
.season-ring .sr-n { font-family: var(--brand); font-size: calc(15px * var(--fs)); fill: var(--paper); }
.season-ring .sr-l { font-family: var(--mono); font-size: calc(11px * var(--fs)); fill: var(--paper-2); }
.season-ring .neck .sr-l { fill: var(--red-hot); }
.season-ring p { font-size: calc(11px * var(--fs)); margin-top: 4px; }

/* dossier keyword list: one rule per line, full width (the help sheet keeps its two-column grid) */
.dossier ul.kw-list { display: block; padding: 0; margin: 10px 0; }
.dossier ul.kw-list li { list-style: none; margin: 4px 0; line-height: 1.5; color: var(--paper-2); }
.dossier ul.kw-list li b { color: var(--violet-hot); font-weight: 500; }

.season-ring .sr-m { font-family: var(--mono); font-size: calc(10px * var(--fs)); fill: var(--red-hot); }
.findings { margin: 8px 0 22px; padding-left: 18px; color: var(--paper); line-height: 1.7; font-size: calc(13px * var(--fs)); }
.findings li::marker { color: var(--violet-hot); content: '◇  '; }
.table-key { font-size: calc(11px * var(--fs)); margin-top: 8px; max-width: 110ch; }

/* workshop upgrade pick: cards are shown as they will become */
.deck-grid .card.will-up { box-shadow: 0 0 0 1px var(--violet-hot), 0 0 26px -8px var(--violet-hot); }
/* what the next level changes, under the card it will become */
.up-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.up-diff { max-width: calc(220px * .86); padding: 4px 8px; font-size: calc(11px * var(--fs)); line-height: 1.3; color: var(--paper); background: rgba(22, 18, 30, .94);
  border: 1px solid var(--violet-hot); text-align: center; animation: deal .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.up-diff i { display: block; font-style: normal; font-size: calc(9px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: #bfa6ff; }
.up-wrap:hover .up-diff { border-color: var(--paper); }
.plus.l3, .card .name .plus.l3, .ins-text .plus.l3 { color: #ffb02e; text-shadow: 0 0 8px #ffb02e; }

/* ---------- v0.2 ---------- */
/* title: seed with a dice, language switch */
.title-foot { flex-wrap: wrap; }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); }
.lang-switch button { background: transparent; border: 0; color: var(--muted); padding: 2px 8px; cursor: pointer; font-size: calc(11px * var(--fs)); letter-spacing: .08em; }
.lang-switch button.on { background: var(--paper); color: var(--ink-0); }
.seed-line code { color: var(--paper); }

/* map: chapters of the season along the left edge, lines draw in */
.map-chapters { position: absolute; inset: 0; pointer-events: none; }
.map-chapters .ch { position: absolute; left: -6px; transform: translate(-100%, -50%); font-size: calc(10px * var(--fs)); letter-spacing: .06em; color: var(--muted); white-space: nowrap; opacity: .55; transition: opacity var(--t-mid), color var(--t-mid); }
.map-chapters .ch i { font-style: normal; color: var(--ink-3); margin-right: 6px; }
.map-chapters .ch.done { opacity: .3; text-decoration: line-through; text-decoration-color: rgba(167,123,255,.4); }
.map-chapters .ch.now { opacity: 1; color: var(--paper); }
.map-chapters .ch.now i { color: var(--red-hot); }
.map-chapters .ch.now::after { content: ' ←'; color: var(--red-hot); }
.map-screen { grid-template-columns: 200px 1fr 260px; }
.map-wrap { margin-left: 150px; }
#app[data-fresh="1"] .map-lines line { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw-line .6s var(--ease) forwards; }
#app[data-fresh="1"] .map-lines line:not(.hot) { animation-name: draw-line-dim; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes draw-line-dim { to { stroke-dashoffset: 0; stroke-dasharray: 3 6; } }
#app[data-fresh="1"] .map-node { animation: node-in .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes node-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } }
#app[data-fresh="1"] .map-node.avail { animation: node-in .32s var(--ease) both, avail 1.4s ease-in-out .4s infinite; animation-delay: calc(var(--i, 0) * 35ms), .5s; }
.hero-badge { margin-top: 18px; padding: 12px; border: 1px solid rgba(167,123,255,.35); background: rgba(42,29,68,.25); }
.hero-badge b { display: block; font-family: var(--brand); font-size: calc(15px * var(--fs)); color: var(--paper); margin: 4px 0; text-transform: lowercase; }
.hero-badge p { margin: 4px 0 0; font-size: calc(11px * var(--fs)); }
.hero-badge em { font-style: normal; color: var(--red-hot); }

/* review as cards */
.fight-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 14px 0 16px; }
.fight-tiles div { background: var(--ink-1); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fight-tiles b { font-family: var(--brand); font-size: calc(26px * var(--fs)); color: var(--paper); line-height: 1; }
.fight-tiles span { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rv { position: relative; padding: 12px 14px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--stc) 10%, transparent), transparent 60%), var(--ink-1); border: 1px solid var(--line-2); border-top: 2px solid var(--stc); cursor: zoom-in; overflow: hidden; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
#app[data-fresh="1"] .rv { animation: deal .38s var(--ease) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
.rv:hover { transform: translateY(-3px); border-color: var(--paper-2); }
.rv.st-none { --stc: var(--paper-2); }
.rv header { display: flex; flex-direction: column; gap: 2px; padding-right: 86px; }
.rv-st { font-size: calc(10px * var(--fs)); color: var(--stc); letter-spacing: .04em; }
.rv header b { font-family: var(--brand); font-size: calc(15px * var(--fs)); line-height: 1.15; text-transform: lowercase; color: var(--paper); }
.rv header b sup { color: var(--red-hot); }
.rv header small { color: var(--muted); font-size: calc(11px * var(--fs)); }
.stamp { position: absolute; right: 10px; top: 12px; transform: rotate(-7deg); display: flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1.5px solid currentColor; font-size: calc(10px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; mix-blend-mode: screen; }
.stamp i { font-style: normal; font-size: calc(13px * var(--fs)); }
.stamp.good { color: var(--violet-hot); box-shadow: 0 0 14px -4px var(--violet-hot) inset; }
.stamp.bad { color: var(--red-hot); box-shadow: 0 0 14px -4px var(--red-hot) inset; }
#app[data-fresh="1"] .stamp { animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(360ms + var(--i, 0) * 55ms); }
.rv .stamp { animation-delay: calc(360ms + var(--i, 0) * 55ms); }
@keyframes stamp { from { opacity: 0; transform: rotate(-7deg) scale(2.2); } }
.rv-main { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 6px; }
.rv-big { font-family: var(--brand); font-size: calc(30px * var(--fs)); line-height: 1; color: var(--paper); }
.rv-unit { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rv-delta { margin-left: auto; font-size: calc(11px * var(--fs)); color: var(--muted); }
.rv-delta.up { color: var(--violet-hot); }
.rv-delta.down { color: var(--red-hot); }
.rv-bar { display: flex; gap: 2px; height: 6px; width: var(--w, 100%); min-width: 12px; }
#app[data-fresh="1"] .rv-bar { animation: bar-grow .6s var(--ease) both; animation-delay: calc(200ms + var(--i, 0) * 55ms); transform-origin: left; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.rv-bar i { display: block; min-width: 3px; }
.rv-bar .p, .rv-nums .p b { background: var(--stc); color: var(--stc); }
.rv.st-retro .rv-bar .p { background: var(--paper-2); }
.rv-bar .c { background: var(--violet-hot); } .rv-nums .c b { color: var(--violet-hot); }
.rv-bar .b { background: var(--cyan); } .rv-nums .b b { color: var(--cyan); }
.rv-bar .r { background: var(--paper); } .rv-nums .r b { color: var(--paper); }
.rv-bar .o { background: repeating-linear-gradient(135deg, var(--red-hot) 0 3px, transparent 3px 5px); } .rv-nums .o b { color: var(--red-hot); }
.rv-nums .p b { background: none; }
.rv-nums { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: calc(10px * var(--fs)); color: var(--muted); }
.rv-nums b { font-weight: 700; }
.rv-story { margin: 8px 0 0; font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--paper-2); text-wrap: pretty; }
.rv.v-bad { border-color: rgba(255,43,60,.45); }
.reward-screen { grid-template-columns: minmax(520px, 1.25fr) 1fr; }
.choices > .card { animation: deal .42s var(--ease) both; animation-delay: calc(300ms + var(--i, 0) * 90ms); }
.ware { animation: deal .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
#app[data-fresh="0"] .choices > .card, #app[data-fresh="0"] .ware { animation: none; }
.relic-ware .glyph { color: var(--violet-hot); }
.all-nums { margin: 16px 0; }
.all-nums summary { cursor: pointer; font-size: calc(12px * var(--fs)); color: var(--paper-2); }
.season-ring .sr-grow { animation: sr-grow .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sr-grow { from { transform: scaleY(0); } }
.dilemma.held { transition: none; cursor: grabbing; }
.dilemma { transition: transform .22s var(--ease), opacity .22s; }

/* ---------- v0.3 act map: a tilted board of chapter bands, places on nodes, the hero token, the story panel ---------- */
.map-screen { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; padding: 18px 24px 16px; }
.map-board { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 10px; perspective: 1500px; perspective-origin: 50% 20%; }
.map-plane { position: relative; flex: 1; min-height: 0; transform: rotateX(16deg); transform-origin: 50% 100%; transform-style: preserve-3d; border: 1px solid rgba(167,123,255,.18); background: linear-gradient(180deg, rgba(42,29,68,.18), rgba(7,4,12,.6)); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) inset; }
.map-bands { position: absolute; inset: 0; pointer-events: none; }
.band { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(244,244,239,.05); transition: background var(--t-mid), opacity var(--t-mid); }
.band:nth-child(odd) { background: rgba(255,255,255,.012); }
.band .bl { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; font-size: calc(10px * var(--fs)); letter-spacing: .05em; color: var(--muted); max-width: 180px; }
.band .bl i { font-style: normal; color: var(--ink-3); font-size: calc(9px * var(--fs)); }
.band .bl b { font-weight: 500; color: var(--paper-2); font-size: calc(11px * var(--fs)); text-transform: lowercase; }
.band .bl small { font-size: calc(9.5px * var(--fs)); color: var(--muted); opacity: .8; }
.band.done { opacity: .45; }
.band.done .bl b { text-decoration: line-through; text-decoration-color: rgba(167,123,255,.5); }
.band.now { background: linear-gradient(90deg, rgba(255,43,60,.13), rgba(123,85,173,.06) 50%, transparent); border-top-color: rgba(255,43,60,.35); }
.band.now .bl i { color: var(--red-hot); }
.band.now .bl b { color: var(--paper); }
.band.fog { opacity: .55; filter: blur(.3px); }
.band.mood-crunch:not(.done) { background-image: linear-gradient(90deg, rgba(255,43,60,.06), transparent 60%); }
.map-lines path { fill: none; stroke: rgba(244,244,239,.13); stroke-dasharray: 2 6; stroke-width: 1.2; }
.map-lines path.walked { stroke: var(--red-hot); stroke-dasharray: none; stroke-width: 2; opacity: .85; filter: drop-shadow(0 0 4px rgba(255,43,60,.6)); }
.map-lines path.open { stroke: var(--violet-hot); stroke-dasharray: 6 5; stroke-width: 1.6; animation: dash-run 1.2s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -22; } }
.map-node { width: 42px; height: 42px; border-radius: 2px; box-shadow: 0 6px 0 -1px rgba(0,0,0,.6), 0 10px 18px -6px #000; }
.map-node span { top: 47px; width: max-content; max-width: 132px; padding: 1px 6px 2px; background: rgba(9,6,16,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 4px 10px -4px #000; font-size: calc(9.5px * var(--fs)); line-height: 1.25; letter-spacing: .02em; text-transform: none; text-align: center; white-space: normal; opacity: .0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.map-node.avail span, .map-node.visited span, .map-node:hover span, .map-node.t-boss span { opacity: .9; }
.map-node.avail span { color: var(--paper); }
.map-node.near span { opacity: .72; color: var(--paper-2); }
.map-node.fog { opacity: .28 !important; }
.map-node.t-boss { width: 62px; height: 62px; }
/* 15.10 (Alex: «the act map just hangs»): every kind of node has its colour, a road from a hovered node lights up to
   the boss and the rest dims, a signal runs along the roads open from here, the open nodes breathe a ring */
.map-node { --tc: 244,244,239; border-color: rgba(var(--tc),.45); background: linear-gradient(160deg, rgba(var(--tc),.16), var(--ink-1) 70%); transition: opacity .18s, transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.map-node b { color: rgb(var(--tc)); }
.map-node.t-combat { --tc: 255,120,120; } .map-node.t-elite, .map-node.t-boss { --tc: 255,43,60; } .map-node.t-event { --tc: 31,182,209; }
.map-node.t-shop { --tc: 255,179,107; } .map-node.t-rest { --tc: 140,226,180; } .map-node.t-workshop { --tc: 167,123,255; }
.map-node.avail::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(var(--tc),.8); pointer-events: none; animation: node-ring 1.6s ease-out infinite; }
@keyframes node-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.map-node.avail:hover { transform: translate(-50%, -50%) scale(1.12); background: rgba(var(--tc),.85); color: var(--ink-0, #07040c); }
.map-node.avail:hover b { color: #07040c; }
.map-plane.tracing .map-node:not(.route):not(.hovered):not(.current):not(.visited) { opacity: .22; }
.map-plane.tracing .map-node.route { opacity: 1 !important; border-color: rgba(var(--tc),.9); box-shadow: 0 0 14px rgba(var(--tc),.35), 0 6px 0 -1px rgba(0,0,0,.6); }
.map-plane.tracing .map-node.route span { opacity: .85; }
.map-plane.tracing .map-lines path:not(.route):not(.walked) { opacity: .25; }
.map-lines path.route { stroke: var(--paper); stroke-width: 1.8; stroke-dasharray: 6 5; opacity: .9; animation: dash-run 1s linear infinite; }
.map-lines .spark { fill: var(--paper); filter: drop-shadow(0 0 4px var(--violet-hot)) drop-shadow(0 0 8px rgba(255,43,60,.6)); }
@media (prefers-reduced-motion: reduce) { .map-lines .spark, .map-node.avail::after { display: none; } .map-lines path.route { animation: none; } }
.map-side .ahead.t-elite, .map-side .ahead.t-boss, .map-side .ahead.t-combat { border-left-color: var(--red-hot); }
.map-side .ahead.t-event { border-left-color: var(--cyan); } .map-side .ahead.t-shop { border-left-color: #ffb36b; } .map-side .ahead.t-rest { border-left-color: #8ce2b4; }
.map-side .ahead .gives { color: var(--paper); margin-bottom: 4px; }
.map-side .ahead i { font-style: normal; font-size: calc(9.5px * var(--fs)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.map-side .ahead .crises { color: #ff9a9a; margin-bottom: 4px; }
.map-side .ahead .onward { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.map-side .ahead .onward span { font-size: calc(11.5px * var(--fs)); color: var(--paper-2); }
.map-side .ahead .onward span b { display: inline; margin: 0 3px 0 0; font-size: calc(12px * var(--fs)); }
.map-side .ahead .onward .t-combat b { color: #ff7878; } .map-side .ahead .onward .t-elite b { color: var(--red-hot); } .map-side .ahead .onward .t-event b { color: var(--cyan); }
.map-side .ahead .onward .t-shop b { color: #ffb36b; } .map-side .ahead .onward .t-rest b { color: #8ce2b4; } .map-side .ahead .onward .t-workshop b { color: var(--violet-hot); }
.map-hero { position: absolute; translate: 34px -62%; pointer-events: none; z-index: 3; padding: 3px; border: 1px solid var(--hc, var(--violet-hot)); background: rgba(7,4,12,.92); box-shadow: 0 0 16px color-mix(in srgb, var(--hc, #a77bff) 45%, transparent); animation: hero-bob 2.4s ease-in-out infinite; }
.map-hero::after { content: ''; position: absolute; left: -12px; top: 62%; width: 11px; height: 1px; background: var(--hc, var(--violet-hot)); }
.map-hero.waits { translate: -50% -62%; }
.map-hero.waits::after { display: none; }
@keyframes hero-bob { 50% { transform: translateX(4px); } }
.map-legend { flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 0 0 0 4px; font-size: calc(11px * var(--fs)); }
.map-legend .lg b { width: 18px; height: 18px; font-size: calc(11px * var(--fs)); margin-right: 6px; }
.map-side { padding: 18px 18px 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(42,29,68,.35), rgba(7,4,12,.7)); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.map-side .ch-title { margin: 0; font-family: var(--brand); font-size: calc(26px * var(--fs)); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 2px 0 0 rgba(255,43,60,.45); }
.map-side .ch-place { font-size: calc(11px * var(--fs)); color: var(--cyan); letter-spacing: .04em; }
.map-side .ch-intro { margin: 0; font-size: calc(12.5px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
.map-side .ahead { padding: 10px 12px; border-left: 2px solid var(--violet-hot); background: rgba(123,85,173,.1); animation: dossier-in .2s var(--ease) both; }
.map-side .ahead b { display: block; color: var(--paper); font-size: calc(13px * var(--fs)); margin: 3px 0; }
.map-side .ahead p { margin: 0; font-size: calc(11.5px * var(--fs)); line-height: 1.5; color: var(--paper-2); }
.threads { display: flex; flex-direction: column; gap: 6px; }
.thread { padding: 6px 10px; border: 1px solid rgba(31,182,209,.3); background: rgba(31,182,209,.05); }
.thread b { display: block; font-size: calc(11.5px * var(--fs)); color: var(--cyan); font-weight: 500; }
.thread small { font-size: calc(11px * var(--fs)); color: var(--paper-2); }
.thread.paid { opacity: .55; border-style: dashed; }
.hero-badge { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 4px; }
.hero-badge canvas { background: radial-gradient(circle at 50% 40%, rgba(42,29,68,.9), #07040c 75%); }
#app[data-fresh="1"] .map-lines path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw-line .6s var(--ease) forwards; }
#app[data-fresh="1"] .map-lines path:not(.walked):not(.open) { animation-name: draw-line-dim; }
@media (max-width: 1100px) { .map-screen { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; } .map-side { max-height: 26vh; } } /* 15.10: the plane keeps the height, the side panel scrolls under it */

/* ---------- v0.3 scene card before a fight ---------- */
.beat { position: absolute; inset: 64px 0 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 45%, rgba(18,10,32,.82), rgba(4,2,8,.94)); backdrop-filter: blur(3px); animation: beat-in .3s var(--ease) both; cursor: pointer; }
.beat.out { animation: beat-out .22s var(--ease) both; }
@keyframes beat-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes beat-out { to { opacity: 0; } }
.beat-card { width: min(560px, 90vw); padding: 28px 30px 24px; border: 1px solid rgba(167,123,255,.35); border-left: 3px solid var(--violet-hot); background: linear-gradient(160deg, rgba(42,29,68,.6), rgba(7,4,12,.95)); box-shadow: 0 40px 90px -30px #000; display: flex; flex-direction: column; gap: 12px; animation: dossier-in .4s var(--ease) .05s both; }
.beat.tier-elite .beat-card { border-left-color: var(--red-hot); }
.beat.tier-boss .beat-card { border-left-color: var(--red-hot); border-color: rgba(255,43,60,.45); box-shadow: 0 0 60px -10px rgba(255,43,60,.35), 0 40px 90px -30px #000; }
.beat-card h2 { margin: 0; font-family: var(--brand); font-size: clamp(28px, 3vw, 40px); line-height: 1; text-transform: lowercase; color: var(--paper); text-shadow: 3px 0 0 rgba(255,43,60,.45), -2px 0 0 rgba(31,182,209,.3); }
.beat-card p { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
.beat-card .beat-thread { font-size: calc(12.5px * var(--fs)); color: var(--cyan); }
.beat-card .beat-fx { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; font-weight: 400; font-size: calc(11px * var(--fs)); color: var(--paper); }
.beat-card blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--red-hot); font-style: italic; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.beat-card .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- v0.3 modes on the title and the one-fight setup ---------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; max-width: 760px; }
.mode.m-tutorial { border-style: dashed; }
.mode { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px; text-align: left; font: inherit; color: var(--paper-2); background: linear-gradient(160deg, rgba(42,29,68,.55), rgba(7,4,12,.85)); border: 1px solid rgba(167,123,255,.3); cursor: pointer; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); }
.mode .mk { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mode b { font-family: var(--brand); font-size: calc(22px * var(--fs)); line-height: 1; color: var(--paper); text-transform: lowercase; }
.mode small { font-size: calc(11px * var(--fs)); line-height: 1.4; color: var(--paper-2); }
.mode kbd { position: absolute; right: 10px; top: 10px; }
.mode:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--paper); box-shadow: 0 18px 30px -18px rgba(255,43,60,.6); }
.mode.m-season { border-color: rgba(255,43,60,.55); background: linear-gradient(160deg, rgba(191,9,9,.28), rgba(7,4,12,.85)); }
.mode.m-trial b { color: var(--cyan); }
.mode.m-fight b { color: var(--violet-hot); }
.mode.soon { opacity: .4; cursor: not-allowed; }
.fight-setup { width: min(1220px, 100%); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(7,4,12,.7); }
.fs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fs-row .fl { width: 64px; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fs-row .chip i { font-style: normal; color: var(--muted); font-size: calc(9.5px * var(--fs)); }
.fs-row .chip.tier-elite i, .fs-row .chip.tier-boss i { color: var(--red-hot); }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

/* ---------- v0.3 prologue: the hero's portrait in place of the dilemma art ---------- */
.prologue-screen .dilemma canvas { display: block; margin: 4px auto 8px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--hc, #7b55ad) 18%, #120a20), #05030a 78%); border: 1px solid var(--line); }
.prologue-screen .dilemma .logline { font-size: calc(11px * var(--fs)); color: var(--muted); margin: 0 0 6px; }
.prologue-screen .dilemma blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--hc, var(--violet-hot)); font-size: calc(12px * var(--fs)); font-style: italic; color: var(--muted); text-align: left; }
.prologue-screen .choice-side .fx span { color: var(--paper-2); }
.turn-screen .dilemma .faction { color: #ffb36b; }
.turn-screen .dilemma { border-color: rgba(255,179,107,.45); }
.turn-screen .turn-stake { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid #ffb36b; background: rgba(255,179,107,.07); font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--paper-2); text-align: left; }
.turn-screen .turn-stake i { display: block; font-style: normal; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: #ffb36b; }
.turn-screen .choice-side .after { display: block; margin-top: 8px; font-size: calc(11px * var(--fs)); line-height: 1.45; color: var(--muted); font-style: italic; }

/* ---------- v0.3 one fight over, the season's ending ---------- */
.fight-over .fo-verdict { font-family: var(--brand); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; margin: 6px 0 4px; text-transform: lowercase; color: var(--paper); }
.fight-over.lost .fo-verdict { color: var(--red-hot); }
.fight-over .fo-line { font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--paper-2); margin: 0 0 14px; }
.fo-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ending { margin: 14px 0 6px; padding: 14px 16px; border-left: 3px solid var(--red-hot); background: linear-gradient(90deg, rgba(191,9,9,.16), transparent); max-width: 720px; }
.ending b { display: block; font-family: var(--brand); font-size: calc(22px * var(--fs)); color: var(--paper); text-transform: lowercase; margin: 4px 0; }
.ending p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--paper-2); }
/* after the season: one line from the world, picked by debrief.js; the trace of the last season on the prologue */
.after-season { margin: 10px 0 6px; padding: 12px 16px; max-width: 720px; border: 1px solid rgba(31,182,209,.3); border-left: 3px solid var(--cyan); background: linear-gradient(90deg, rgba(31,182,209,.08), transparent); animation: after-in .9s var(--ease) both .5s; }
.after-season blockquote { margin: 6px 0 4px; font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--paper); }
.after-season figcaption { font-size: calc(11px * var(--fs)); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
@keyframes after-in { from { opacity: 0; transform: translateY(8px); } }
.prologue-screen .legacy { margin: 0 0 10px; padding: 8px 12px; font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--paper-2); border-left: 2px solid var(--violet-hot); background: rgba(123,85,173,.12); text-align: left; }
.prologue-screen .legacy b { display: block; font-size: calc(10px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); font-weight: 500; }
.prologue-screen .legacy small { display: block; margin-top: 4px; font-size: calc(11px * var(--fs)); color: var(--muted); }
.end-threads { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.end-threads li { font-size: calc(11.5px * var(--fs)); padding: 3px 8px; border: 1px solid var(--line-2); color: var(--paper-2); }
.end-threads li b { color: var(--violet-hot); font-weight: 500; }
.end-threads li.open { opacity: .6; border-style: dashed; }
.ending blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--violet-hot); font-style: italic; color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.ending.e-win, .ending.e-win-narrow { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(31,182,209,.12), transparent); }

/* ---------- v0.4 «Своя команда»: the reward improves the deck ---------- */
.fx-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
.fx-choice { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; text-align: left; font: inherit; color: var(--paper-2);
  background: linear-gradient(160deg, rgba(42, 29, 68, .7), rgba(10, 7, 16, .92)); border: 1px solid rgba(167, 123, 255, .35); cursor: pointer;
  transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); animation: deal .45s var(--ease) both; }
.fx-choice:nth-child(2) { animation-delay: .06s; } .fx-choice:nth-child(3) { animation-delay: .12s; }
.fx-choice:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--violet-hot); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 18px rgba(167, 123, 255, .3); }
.fx-choice:disabled { opacity: .45; cursor: not-allowed; }
.fx-choice .g { font-size: calc(26px * var(--fs)); line-height: 1; color: var(--violet-hot); text-shadow: 0 0 12px rgba(167, 123, 255, .6); }
.fx-choice[data-fx="remove"] .g { color: #ff8e98; text-shadow: 0 0 12px rgba(255, 43, 60, .5); }
.fx-choice[data-fx="relic"] .g { color: #f2d48f; text-shadow: 0 0 12px rgba(242, 212, 143, .5); }
.fx-choice b { font-family: var(--brand); font-size: calc(20px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.fx-choice small { font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--paper-2); }
@media (max-width: 900px) { .fx-choices { grid-template-columns: 1fr; } }
/* the archive's reference: the bot's measure of each card */
.report-body .bot-h { margin: 26px 0 4px; font-size: calc(13px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-hot); }
.review.archive.bot td:last-child { color: var(--muted); white-space: nowrap; }

/* pressure steps on the leader picker (ladder.js) */
.ladder-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.ladder-row .lk { letter-spacing: .14em; text-transform: uppercase; font-size: calc(10.5px * var(--fs)); }
.ladder-row .steps { display: inline-flex; gap: 4px; }
.ladder-row .step { width: 28px; height: 28px; border: 1px solid var(--line); background: rgba(12, 10, 17, .55); color: var(--paper); font-family: var(--brand); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ladder-row .step:hover:not(:disabled) { border-color: #ff9a3d; transform: translateY(-1px); }
.ladder-row .step.on { border-color: #ff9a3d; background: rgba(255, 154, 61, .16); color: #ffb26b; }
.ladder-row .step.locked { color: var(--muted); opacity: .5; cursor: not-allowed; }
.ladder-row .lt { max-width: 70ch; line-height: 1.45; }
.ladder-row .lt b { color: #ffb26b; font-weight: 500; margin-right: 4px; }

.deck-now .mode-press { color: var(--muted); }
.deck-now .mode-press.up { color: #ff9a3d; }
.deck-now .mode-press.down { color: var(--cyan, #1fb6d1); }
/* the reading of a tool in the market, the rewards and the «своя команда» choice */
.relic-ware .tool-help { margin: 4px 0 2px; }
.loot-i .tool-help, .fx-choice .tool-help { margin-top: 6px; max-width: 38ch; }
/* the process archive: the practice of each card over the seasons */
.review.archive.practice .pm { letter-spacing: 2px; color: var(--violet-hot); margin-right: 6px; }
.review.archive.practice .pm.ph-2 { color: var(--red-hot, #ff2b3c); text-shadow: 0 0 6px rgba(255, 43, 60, .45); }
.review.archive.practice td:last-child { white-space: nowrap; }
.review.archive.practice small { color: var(--muted); }
/* what grew: processes that changed phase, cards upgraded (after a fight, in the season report) */
.growth { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 10px 0 14px; font-size: 13px; }
.growth > b { color: var(--violet-hot); text-transform: lowercase; letter-spacing: .04em; }
.growth .gr { border: 1px solid var(--line); padding: 2px 8px; background: rgba(123, 85, 173, .12); }
.growth .gr.ph-2 { border-color: var(--red-hot); background: rgba(255, 43, 60, .1); }
.growth .gr.up { background: rgba(31, 182, 209, .1); border-color: rgba(31, 182, 209, .5); }
.growth .gr small { color: var(--muted); }

/* return cards on the title: what waits in each save (Л-11) */
/* saved games: small plates in the row style of «коротко», quieter than the modes */
.resumes { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; max-width: 900px; }
.resume { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 24px 7px 14px; font: inherit; text-align: left; color: var(--paper-2); cursor: pointer; border: 0; background: linear-gradient(90deg, rgba(15,10,24,.92), rgba(42,29,68,.7)); box-shadow: inset 2px 0 0 var(--violet-hot); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.resume.r-fight { box-shadow: inset 2px 0 0 var(--cyan); }
.resume .rk { display: flex; align-items: center; gap: 6px; font-family: var(--brand); font-weight: 700; font-size: calc(13px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.resume .rk kbd { font-size: calc(9px * var(--fs)); }
.resume small { font-size: calc(10px * var(--fs)); color: var(--muted); line-height: 1.35; }
.resume:hover, .resume:focus-visible { transform: translateX(3px); background: linear-gradient(90deg, rgba(167,123,255,.3), rgba(15,10,24,.92)); }
.resume:hover small, .resume:focus-visible small { color: var(--paper-2); }
@media (max-height: 760px) and (min-width: 900px) {
  .title-screen:has(.resumes) .title-block h1 { font-size: 64px; }
}
/* the journal of seasons in the archive */
.review.archive.season-log tr.more { display: none; }
.review.archive.season-log.all tr.more { display: table-row; }
.review.archive.season-log td { vertical-align: top; }
.review.archive.season-log small { color: var(--muted); }
.review.archive.season-log .res.won { color: var(--cyan); }
.review.archive.season-log .res.lost { color: var(--red-hot); }
.review.archive.season-log .res.left { color: var(--muted); text-decoration: line-through; }
.review.archive.season-log td:first-child, .review.archive.season-log td:last-child { white-space: nowrap; }

/* the leader speaks between fights and at the end of the season (Л-12) */
.hero-says { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.hero-says canvas { width: 92px; height: auto; border: 1px solid var(--line-2); background: var(--ink-0); }
.hero-says .who { display: block; font-style: normal; font-size: calc(10.5px * var(--fs)); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-hot); margin-bottom: 4px; }
.ending blockquote.hero-says { color: var(--paper-2); }
.hero-says.aside { margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--violet-hot); background: rgba(167, 123, 255, .07); font-style: italic; color: var(--paper-2); font-size: calc(12.5px * var(--fs)); line-height: 1.45; }
.hero-says.aside.hard { border-left-color: var(--red-hot); background: rgba(255, 43, 60, .07); }
.hero-says.aside.hard .who { color: var(--red-hot); }

/* ---------- incidents (Л-8): the mode tile, the list of cases, the case card before the first move, the lesson after ---------- */
.mode.m-incident { border-color: rgba(255,43,60,.45); background: linear-gradient(160deg, rgba(74,12,20,.5), rgba(7,4,12,.88)); }
.mode.m-incident .mk { color: var(--red-hot); }
.inc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.inc { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-align: left; font: inherit; color: var(--paper-2); background: linear-gradient(160deg, rgba(74,12,20,.35), rgba(7,4,12,.9)); border: 1px solid rgba(255,43,60,.35); cursor: pointer; transition: transform var(--t-mid) var(--ease), border-color var(--t-fast); }
.inc:hover, .inc:focus-visible { transform: translateY(-2px); border-color: var(--red-hot); outline: none; }
.inc .inc-k { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); }
.inc b { font-family: var(--brand); font-size: calc(20px * var(--fs)); line-height: 1.05; color: var(--paper); text-transform: lowercase; }
.inc .inc-t { font-size: calc(12px * var(--fs)); line-height: 1.5; }
.inc .inc-r { font-size: calc(11px * var(--fs)); line-height: 1.45; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 6px; }
.beat.incident .beat-card { border-color: rgba(255,43,60,.55); }
.beat.incident .beat-rule { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--red-hot); font-size: calc(13px * var(--fs)); color: var(--paper); background: rgba(255,43,60,.07); }
.beat.incident .beat-rule b { font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); margin-right: 6px; }
.fight-over .inc-lesson { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border-left: 2px solid var(--red-hot); font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--paper-2); background: rgba(255,43,60,.06); }
.fight-over .inc-lesson b { color: var(--paper); font-weight: 600; }
@media (max-width: 760px) { .inc-list { grid-template-columns: 1fr; } }
/* the title, 14.10: three torn plates for the long modes, a short line for a fight and an incident, light links below */
.modes { filter: drop-shadow(5px 5px 0 rgba(191, 9, 9, .55)) drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); gap: 16px; }
.mode { border: 0; padding: 20px 20px 18px; clip-path: polygon(0 5%, 7% 0, 19% 3%, 33% 0, 46% 2%, 61% 0, 75% 4%, 88% 0, 100% 3%, 99% 34%, 100% 66%, 98% 100%, 85% 96%, 71% 100%, 56% 97%, 42% 100%, 27% 96%, 13% 100%, 0 97%, 1% 62%, 0 30%); }
.mode.m-fixed { clip-path: polygon(2% 0, 16% 4%, 29% 0, 44% 3%, 57% 0, 70% 2%, 84% 0, 100% 4%, 98% 28%, 100% 57%, 99% 100%, 87% 97%, 74% 100%, 60% 96%, 45% 100%, 31% 97%, 17% 100%, 3% 96%, 0 70%, 2% 41%, 0 12%); }
.mode.m-trial { clip-path: polygon(0 2%, 12% 0, 26% 4%, 40% 0, 53% 3%, 67% 0, 80% 3%, 93% 0, 100% 6%, 98% 40%, 100% 74%, 100% 97%, 90% 100%, 76% 96%, 62% 100%, 49% 97%, 34% 100%, 20% 96%, 7% 100%, 0 94%, 2% 50%); }
.mode::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px); }
.mode:hover:not(:disabled) { transform: translateY(-4px) rotate(-.4deg); box-shadow: none; }
.mode.m-fixed:hover:not(:disabled) { transform: translateY(-4px) rotate(.4deg); }
.mode.m-fixed { background: linear-gradient(160deg, rgba(123,85,173,.42), rgba(7,4,12,.88)); }
.mode.m-trial { background: linear-gradient(160deg, rgba(31,182,209,.22), rgba(7,4,12,.88)); }
.mode b { font-size: calc(26px * var(--fs)); }
.modes-quick { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 2px; max-width: 900px; }
/* the label column is one width in both rows, so «коротко» and «сохранено» plates start on one line */
.modes-quick .mq-h, .resumes .mq-h { flex: 0 0 auto; width: 11.5ch; padding-top: 12px; font-size: calc(10px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mq-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-width: 0; }
.mode-q { display: flex; flex-direction: column; gap: 2px; padding: 9px 22px 9px 16px; font: inherit; text-align: left; color: var(--paper-2); cursor: pointer; border: 0; background: linear-gradient(90deg, rgba(42,29,68,.85), rgba(15,10,24,.92)); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 6px 50%); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.mode-q b { font-family: var(--brand); font-size: calc(15px * var(--fs)); color: var(--paper); text-transform: lowercase; }
.mode-q small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }
.mode-q.m-fight b { color: var(--violet-hot); }
.mode-q.m-incident { background: linear-gradient(90deg, rgba(74,12,20,.9), rgba(15,10,24,.92)); }
.mode-q.m-incident b { color: var(--red-hot); }
.mode-q:hover { transform: translateX(4px); background: linear-gradient(90deg, rgba(167,123,255,.35), rgba(15,10,24,.92)); }
.title-more { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.title-more button { background: none; border: 0; padding: 2px 0; font: inherit; font-size: calc(13px * var(--fs)); color: var(--paper-2); cursor: pointer; text-decoration: underline dotted rgba(167,123,255,.6); text-underline-offset: 4px; }
.title-more button:hover { color: var(--paper); text-decoration-color: var(--violet-hot); }
.title-more i { font-style: normal; margin-left: 4px; padding: 0 5px; color: var(--violet-hot); border: 1px solid rgba(167,123,255,.4); }
.title-foot .fs-btn { background: none; border: 1px solid var(--line-2); color: var(--paper-2); font: inherit; padding: 2px 8px; cursor: pointer; }
.title-foot .fs-btn:hover { color: var(--paper); border-color: var(--violet-hot); }
@media (max-width: 760px) { .mode, .mode.m-fixed, .mode.m-trial { clip-path: none; } }
/* A saved season adds a row; tighten its gaps before the title reaches the window's bottom. */
@media (max-height: 900px) and (min-width: 900px) {
  .title-screen:has(.resumes) .title-block { gap: 9px; }
}
/* 15.10: a window up to 860 px tall (800 px of game below the 60 px AIM header) shows the whole title without a scroll:
   a smaller sign, tighter tiles, the two short modes side by side */
@media (max-height: 860px) and (min-width: 900px) {
  .title-screen { padding-top: 2vh; padding-bottom: 2vh; }
  .title-block { gap: 9px; }
  .title-block h1 { font-size: clamp(48px, 11vh, 96px); }
  .title-block .lede { font-size: calc(12px * var(--fs)); line-height: 1.45; }
  .title-block .modes { margin: 0 0 2px; gap: 12px; }
  .title-block .mode { padding: 12px 16px; gap: 2px; }
  .title-block .mode b { font-size: calc(21px * var(--fs)); }
  .title-block .mode small { font-size: calc(10.5px * var(--fs)); line-height: 1.3; }
  .title-block .mq-list { flex-wrap: nowrap; }
  .title-block .mode-q { flex: 1 1 0; min-width: 0; padding: 6px 20px 6px 14px; }
  .modes-quick .mq-h, .resumes .mq-h { padding-top: 8px; }
  .title-more button { font-size: calc(12px * var(--fs)); }
}

/* the company plot on the leader screen (plots.json): a card per company with its scene; the picked one on a torn cyan plate */
.plot-pick { width: min(1220px, 100%); display: flex; flex-direction: column; gap: 8px; }
.pp-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pp-head .fl { font-size: calc(9.5px * var(--fs)); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pp-head small { font-size: calc(11px * var(--fs)); color: var(--muted); }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.plot-card { --pc: 167,123,255; position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 16px 12px 12px; font: inherit; text-align: left; color: var(--paper-2); background: rgba(14,9,24,.72); border: 1px solid var(--line); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s, filter .2s; animation: deal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.plot-card:hover, .plot-card:focus-visible { border-color: rgba(31,182,209,.6); background: rgba(20,14,34,.85); transform: translateY(-2px); outline: none; }
.plot-card::before, .plot-card::after { content: ''; position: absolute; inset: -3px; z-index: -1; opacity: 0; transition: opacity .22s; clip-path: polygon(0 6%, 8% 0, 21% 4%, 35% 0, 49% 3%, 63% 0, 77% 4%, 90% 0, 100% 5%, 99% 38%, 100% 70%, 98% 100%, 84% 95%, 69% 100%, 55% 96%, 40% 100%, 25% 95%, 11% 100%, 0 96%, 1% 60%, 0 28%); }
.plot-card::before { background: linear-gradient(120deg, rgba(31,182,209,.42), rgba(31,182,209,.12) 45%, rgba(7,4,12,.92) 85%); }
.plot-card::after { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px); }
.plot-card.on { border-color: transparent; background: transparent; color: var(--paper); filter: drop-shadow(5px 5px 0 rgba(191,9,9,.45)) drop-shadow(0 16px 22px rgba(0,0,0,.35)); }
.plot-card.on::before, .plot-card.on::after { opacity: 1; }
.plot-card .pc-art { grid-row: 1 / span 2; width: 118px; height: 76px; margin: 0; overflow: hidden; display: grid; place-items: center; background: rgba(4,2,8,.55); border: 1px solid rgba(255,255,255,.06); }
.plot-card .pc-art pre { font-size: 4.2px; line-height: 1.12; }
.plot-card.on .pc-art { border-color: rgba(31,182,209,.45); }
.pc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-title { font-family: var(--brand); font-size: calc(15px * var(--fs)); line-height: 1.15; color: var(--paper); text-transform: lowercase; }
.plot-card.on .pc-title { color: #c9f4fb; }
.pc-co { font-size: calc(10.5px * var(--fs)); line-height: 1.4; color: var(--cyan); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-log { font-size: calc(11.5px * var(--fs)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-meta { grid-column: 1 / -1; font-size: calc(9.5px * var(--fs)); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pc-tick { position: absolute; top: -9px; right: 12px; padding: 1px 7px; font-size: calc(9px * var(--fs)); letter-spacing: .14em; text-transform: uppercase; color: #07040c; background: var(--cyan); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s var(--ease); }
.plot-card.on .pc-tick { opacity: 1; transform: none; }
@media (max-width: 560px) { .plot-card { grid-template-columns: minmax(0, 1fr); } .plot-card .pc-art { grid-row: auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .plot-card { animation: none; transition: none; } }

/* Keep long prologues and their choices inside the app, including the site's header. */
.event-screen { grid-template-rows: minmax(0, 1fr); }
.event-screen .dilemma, .event-screen .choice-side { min-height: 0; max-height: 100%; overflow-y: auto; }
.map-more { position: absolute; transform: translate(23px, -18px); width: 30px; height: 30px; padding: 0; z-index: 5; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--cyan); cursor: zoom-in; }
.map-more:hover, .map-more:focus-visible { border-color: var(--cyan); outline: 1px solid var(--cyan); }
.map-side > * { flex-shrink: 0; }
.event-screen .dilemma { touch-action: pan-y; }