/* Layout: a single reading column like a paperback CYOA, with a gauge strip pinned above the page like a board dashboard. */
:root{
  --bg:#f3f1ea; --paper:#fbfaf6; --ink:#1b1f22; --ink-2:#4e565c; --rule:#d6d2c4;
  --accent:#e8c800; --accent-ink:#1b1f22; --good:#2a7f4f; --bad:#b4372c;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15181b; --paper:#1d2125; --ink:#ece8dc; --ink-2:#a8a398; --rule:#333940;
  --accent:#f0d419; --accent-ink:#15181b; --good:#5fc08a; --bad:#e2695b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15181b; --paper:#1d2125; --ink:#ece8dc; --ink-2:#a8a398; --rule:#333940;
  --accent:#f0d419; --accent-ink:#15181b; --good:#5fc08a; --bad:#e2695b; color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
/* one frame for every page, so moving between the thesis, a company and its game never shifts the layout */
.wrap{max-width:880px;margin:0 auto}
header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-block:22px 10px;border-bottom:2px solid var(--ink)}
header h1{font-family:var(--display);font-weight:800;font-size:clamp(22px,4vw,30px);margin:0;letter-spacing:-.02em;text-wrap:balance}
header .sub{font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.gauges{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px 22px;align-items:center;padding-block:14px;border-bottom:1px solid var(--rule)}
.minis{display:grid;gap:10px}
@media (max-width:640px){.gauges{grid-template-columns:1fr}.minis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.minis .g .v{font-size:20px}.minis .g label{font-size:10px;line-height:1.25;min-height:2.5em}}
/* ticker: the share price as a stat tile that grows into a line over the turns */
.ticker{position:relative;display:grid;gap:8px;min-width:0}
.tk-head label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tk-val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--display);font-weight:700;font-size:38px;line-height:1.05;letter-spacing:-.02em}
.tk-val .d{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0}
.tk-cap{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-top:2px}
.tk-cap b{color:var(--ink);font-weight:600}
.tk-chart{position:relative;min-width:0;outline:none}
.tk-chart:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.tk-chart svg{display:block;overflow:visible}
.tk-line{fill:none;stroke:var(--accent-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tk-area{fill:var(--accent-line);opacity:.1}
.tk-base{stroke:var(--rule);stroke-width:1}
.tk-years text,.tk-baselabel{fill:var(--ink-2);font-family:var(--mono);font-size:11px}
.tk-dot{fill:var(--accent-line);stroke:var(--bg);stroke-width:2}
.tk-end{fill:var(--ink);font-family:var(--mono);font-size:12px;font-weight:600}
.tk-cross{stroke:var(--ink-2);stroke-width:1}
.tk-tip{position:absolute;top:-6px;background:var(--paper);border:1px solid var(--rule);padding:3px 8px;font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.tk-tip b{color:var(--ink);font-weight:600}
.g{min-width:0}
.g label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.g .v{font-family:var(--display);font-weight:700;font-size:28px;flex-wrap:wrap;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:baseline;gap:6px}
.g .d{font-family:var(--mono);font-size:14px;font-weight:600}
.d.up{color:var(--good)} .d.dn{color:var(--bad)}
.bar{height:5px;background:var(--rule);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);transition:width .5s ease}
.year{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 6px}
.year b{background:var(--accent);color:var(--on-accent);padding:2px 7px;font-weight:600;margin-right:8px}
.scene h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.4vw,34px);letter-spacing:-.02em;line-height:1.1;margin:0 0 14px;text-wrap:balance}
.scene p{margin:0 0 14px;max-width:62ch}
.scene .memo{background:var(--paper);border-left:3px solid var(--accent);padding:12px 16px;margin:16px 0;font-style:italic;color:var(--ink-2)}
.scene .memo b{font-style:normal;color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px}
.choices{display:grid;gap:10px;margin-top:22px}
.choice{all:unset;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;cursor:pointer;background:var(--paper);border:1px solid var(--rule);padding:14px 16px;font-family:var(--body);line-height:1.4}
.choice:hover,.choice:focus-visible{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:-2px}
.choice .k{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);width:1.4em}
.choice .t{font-weight:600;display:block}
.choice .s{display:block;color:var(--ink-2);font-size:17px;margin-top:2px}
.ending{margin-top:22px;padding:18px 20px;background:var(--ink);color:var(--bg)}
.ending .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:1px 6px}
.ending h3{font-family:var(--display);font-weight:800;font-size:clamp(22px,4vw,30px);margin:6px 0 10px;letter-spacing:-.02em;line-height:1.1}
.ending p{margin:0 0 10px;max-width:62ch}
.layers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
@media (max-width:520px){.layers{grid-template-columns:1fr}}
.layer{border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);padding:10px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:color-mix(in srgb,var(--bg) 70%,transparent)}
.layer.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.path{margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--ink-2);line-height:1.9}
.path span{display:inline-block;background:var(--paper);border:1px solid var(--rule);padding:0 7px;margin:0 6px 4px 0}
.again{all:unset;cursor:pointer;display:inline-block;margin-top:16px;font-family:var(--display);font-weight:700;background:var(--accent);color:var(--on-accent);padding:10px 16px}
.again:focus-visible{outline:2px solid var(--ink)}
footer{margin-top:40px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2);max-width:62ch}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.bar i{transition:none}}

/* site additions */
:root{--accent-light:#e8c800;--accent-dark:#f0d419;--on-accent:#1b1f22}
:root{--accent:var(--accent-light);--accent-line:var(--accent-line-light,var(--accent-light));--accent-on-dark:var(--accent-line-dark,var(--accent-dark))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:var(--accent-dark);--accent-line:var(--accent-line-dark,var(--accent-dark))}}
:root[data-theme="dark"]{--accent:var(--accent-dark);--accent-line:var(--accent-line-dark,var(--accent-dark))}
.g .real{flex-basis:100%;font-family:var(--mono);font-size:14px;color:var(--ink-2);font-weight:400}
.g .real b{color:var(--ink);font-weight:600}
.ending .permalink{margin-top:12px;font-family:var(--mono);font-size:12px}
.ending .permalink a{color:inherit}
.err{background:var(--paper);border:1px solid var(--bad);padding:12px;color:var(--bad);font-family:var(--mono);font-size:12px;white-space:pre-wrap}
.article{margin:0}
.article h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5.5vw,46px);letter-spacing:-.025em;line-height:1.05;margin:28px 0 8px;text-wrap:balance}
.article .dek{font-style:italic;color:var(--ink-2);font-size:19px;margin:0 0 6px}
.article .byline{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:0 0 28px}
.article h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.6vw,28px);letter-spacing:-.02em;margin:36px 0 10px;text-wrap:balance}
.article p{max-width:64ch;margin:0 0 16px}
.article ol{padding-left:1.2em;max-width:64ch}
.article li{margin-bottom:12px}
.article code{font-family:var(--mono);font-size:.9em;background:var(--paper);padding:0 4px}
.article figure{margin:20px 0}
.article figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:6px}
.article .stack{max-width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.card{display:block;background:var(--paper);border:1px solid var(--rule);padding:16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--ink)}
.card .co{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.card .m{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:4px}
.card .b{margin-top:10px;font-size:15px}
.cta{all:unset;cursor:pointer;display:inline-block;font-family:var(--display);font-weight:700;background:var(--accent);color:var(--on-accent);padding:12px 18px;margin:8px 0 20px}
.cta:focus-visible{outline:2px solid var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0 22px;font-family:var(--mono);font-size:13px}
.facts div{background:var(--paper);border:1px solid var(--rule);padding:10px}
.facts b{display:block;font-family:var(--display);font-size:24px;color:var(--ink)}
.facts a{color:var(--ink-2)}
.ending-list{display:grid;gap:10px;margin:14px 0}
.ending-list a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;background:var(--paper);border:1px solid var(--rule);padding:12px 14px;text-decoration:none;color:var(--ink)}
.ending-list a:hover{border-color:var(--ink)}
.ending-list .lay{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);min-width:7em}
.ending-list .lay.relationship{color:var(--good)} .ending-list .lay.tower{color:var(--bad)}
.ending-page .verdict{background:var(--ink);color:var(--bg);padding:16px 18px;margin:16px 0}
.ending-page .verdict .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:1px 6px}
.ending-page .route{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.9}
.ending-page .route span{display:inline-block;background:var(--paper);border:1px solid var(--rule);padding:0 7px;margin:0 6px 4px 0}
.card span{display:block}
.scene h2:focus{outline:none}
.news{list-style:none;padding:0;margin:0 0 12px;max-width:64ch}
.news li{margin-bottom:6px;font-size:15px}
.news .m,.facts a{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.facts div a{display:block;margin-top:4px}
a{color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px}
footer a{color:var(--ink-2)}

/* ---------- boardroom style: a visual novel stage, a dialogue box, shouts and an outcome stamp ---------- */
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
table.sr{display:block}
.toolbar{display:flex;gap:8px;margin-left:auto}
.toolbar button{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);background:var(--paper);padding:6px 10px}
.toolbar button:hover,.toolbar button:focus-visible{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:-2px}
.court{margin-top:18px;position:relative}
.stage{position:relative;aspect-ratio:16/9;min-height:230px;background:#2a3040 center/cover no-repeat;border:3px solid #10141c;overflow:hidden;isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,18,.55),transparent 45%);z-index:1;pointer-events:none}
.shout{position:absolute;left:50%;top:50%;z-index:5;padding:.35em .7em .45em;background:#fff;color:#d7261e;font-family:var(--display);font-weight:800;font-size:clamp(38px,9vw,92px);letter-spacing:-.02em;line-height:1;white-space:nowrap;text-transform:uppercase;
  -webkit-text-stroke:3px #10141c;paint-order:stroke fill;text-shadow:4px 4px 0 #10141c;
  clip-path:polygon(0% 12%,8% 0%,20% 10%,34% 2%,48% 12%,62% 0%,76% 10%,90% 1%,100% 14%,94% 34%,100% 52%,93% 70%,100% 90%,84% 86%,70% 100%,56% 88%,40% 100%,26% 88%,10% 99%,6% 80%,0% 66%,6% 46%,0% 30%);
  transform:translate(-50%,-50%) rotate(-7deg) scale(0);opacity:0;pointer-events:none}
.shout.you{color:#1f5fd6}
.shout.on{animation:slam .95s cubic-bezier(.2,1.4,.4,1) forwards}
.shout.on.stay{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.4)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1.1)}}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
.shout.stamp{clip-path:none;background:rgba(255,255,255,.92);border:6px solid currentColor;font-size:clamp(34px,8vw,80px);-webkit-text-stroke:0;text-shadow:none;padding:.15em .5em}
.shout.stamp.relationship{color:#1f8a4c}.shout.stamp.plumbing{color:#b7791f}.shout.stamp.tower{color:#c0281f}
.flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
.stage.flashing .flash{animation:flash .3s ease-out}
.stage.hurt .flash{background:#e2463a;animation:flash .6s ease-out}
.stage.boost .flash{background:var(--accent);animation:flash .6s ease-out}
@keyframes flash{from{opacity:.75}to{opacity:0}}
.stage.shake{animation:shake .45s linear}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-9px,4px)}30%{transform:translate(8px,-5px)}45%{transform:translate(-6px,-3px)}60%{transform:translate(5px,4px)}75%{transform:translate(-3px,2px)}}
.dialog{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;min-height:7.6em;margin-top:-3px;padding:22px 22px 26px;background:#10141c;color:#f4f1e8;border:3px solid #10141c;border-top:3px solid var(--accent);font-family:var(--display);font-weight:500;font-size:24px;line-height:1.35;letter-spacing:-.005em;cursor:pointer}
.dialog:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dialog .nameplate{position:absolute;top:-16px;left:14px;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border:2px solid #10141c}
.dialog.narration .line{color:#a9c8ff}
.dialog .more{position:absolute;right:14px;bottom:8px;color:var(--accent-on-dark);font-size:13px;opacity:0}
.dialog.ready:not(.done) .more{opacity:1;animation:bob .8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.court-skip{text-align:right;margin-top:6px}
.court-skip .skip{all:unset;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.court-skip .skip:hover,.court-skip .skip:focus-visible{color:var(--ink);text-decoration:underline}
.court .choice .cry{display:block;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.08em;color:#d7261e;margin-bottom:2px}
.court .choice.loud{border-left:4px solid #d7261e}
.court .choice .present{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;border:1px solid var(--accent);padding:1px 6px;color:var(--ink-2)}
.court .choice:disabled{opacity:.55;cursor:default}
.transcript{margin-top:16px;font-size:15px;color:var(--ink-2)}
.transcript summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.transcript p{margin:8px 0}
dialog#record{max-width:min(640px,calc(100vw - 32px));width:100%;border:3px solid var(--ink);background:var(--bg);color:var(--ink);padding:0}
dialog#record::backdrop{background:rgba(10,12,18,.6)}
.record{padding:18px 20px}
.record h2{font-family:var(--display);font-weight:800;margin:0 0 4px}
.record .hint{font-size:14px;color:var(--ink-2);margin:0 0 12px}
.record ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.record li{background:var(--paper);border:1px solid var(--rule);padding:10px 12px;display:grid;gap:3px;font-size:15px}
.record li b{font-family:var(--display)}
.record .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;justify-self:start;padding:1px 6px;border:1px solid}
.record .tag.fact{color:var(--good)}.record .tag.fiction{color:var(--ink-2)}
.record a{font-family:var(--mono);font-size:12px}
@media (max-width:560px){.stage{aspect-ratio:4/3}.dialog{font-size:20px;padding:22px 16px 26px}.g .v{font-size:24px}}
@media (prefers-reduced-motion:reduce){.shout.on,.stage.shake,.stage .flash,.dialog .more{animation:none!important}.shout.on{opacity:1;transform:translate(-50%,-50%) rotate(-7deg)}}
.court .after:focus{outline:none}
/* touch targets: at least ~44px tall on the links people tap with a thumb */
.facts div a,.news a{display:inline-block;padding:8px 0}
.facts .long b{font-size:17px;line-height:1.25}
/* phones: get the stage onto the first screen */
@media (max-width:640px){
  header{padding-block:8px 6px;gap:8px;align-items:center;flex-wrap:nowrap}
  header h1{font-size:20px;white-space:nowrap}
  header h1 .pre,header .sub{display:none}
  .toolbar button{padding:8px 9px;font-size:11px}
  .gauges{padding-block:8px;gap:6px}
  .tk-val{font-size:30px}
  .tk-cap,.tk-val .d{font-size:12px}
  .minis .g .v{font-size:18px}
  .minis .g label{min-height:0}
  .court{margin-top:10px}
}
.tk-real{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tk-realdot{fill:var(--ink-2);stroke:var(--bg);stroke-width:2}
.tk-today{stroke:var(--ink-2);stroke-width:1}
.tk-todaylabel{fill:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
/* agent stance: the company's real posture toward agents on day one */
.stance{margin:16px 0;padding:14px 16px;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--accent)}
.stance h2,.stance h3{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;margin:0 0 4px}
.stance .stance-sum{margin:0 0 10px;font-size:17px;color:var(--ink)}
.stance ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.stance li{display:grid;grid-template-columns:1.2em 8.5em 1fr;gap:8px;align-items:baseline;font-size:16px}
.stance .st-mark{font-size:14px;color:var(--ink)}
.stance .st-label{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.stance .st-val a{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.stance.compact{margin:12px 0 0}
.stance.compact li{font-size:15px}
@media (max-width:640px){.stance li{grid-template-columns:1.2em 1fr}.stance .st-val{grid-column:2}.stance h2,.stance h3{font-size:17px}}
.card .chip{display:inline-block;background:var(--accent);color:var(--on-accent);padding:0 6px;margin-right:4px}
.record .stance{margin:0 0 14px}
.card .chip{display:block;width:fit-content;margin-bottom:4px}
.stance.compact .stance-sum{font-size:16px}
.st-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.st-chip{font-family:var(--mono);font-size:12px;background:var(--bg);border:1px solid var(--rule);padding:3px 8px;white-space:nowrap}
.st-chip b{font-weight:600}
.stance details summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);padding:6px 0}
.stance details ul{margin-top:6px}
/* top bar: site logo left, company switcher (logos) right */
nav.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 6px;text-transform:none;letter-spacing:0}
.site-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.site-logo .mark{width:28px;height:28px;flex:none}
.site-logo .wordmark{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.switch{position:relative}
.switch summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;width:164px;box-sizing:border-box;padding:0 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);transition:border-color .15s}
.switch summary::-webkit-details-marker{display:none}
.switch summary:hover{border-color:var(--ink-2)}
.switch summary:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.switch .cur img{display:block;width:auto;max-width:112px}
.switch .cur-text{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.switch .caret{flex:none;transition:transform .15s}
.switch[open] .caret{transform:rotate(180deg)}
/* the menu: a neutral surface of its own, so each company's logo shows in its real colors */
.switch .menu{--m-bg:#ffffff;--m-ink:#1b1f22;--m-ink2:#5d636a;--m-rule:#e4e1d8;--m-hover:#f5f3ee;
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:max-content;min-width:100%;box-sizing:border-box;padding:6px;background:var(--m-bg);color:var(--m-ink);border:1px solid var(--m-rule);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.08);transform-origin:top right;animation:menu-in .14s ease-out}
@media (prefers-color-scheme: dark){.switch .menu{--m-bg:#1b1f24;--m-ink:#f1eee6;--m-ink2:#a9a59b;--m-rule:#30353c;--m-hover:#252a30}}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.switch .menu{animation:none}}
.switch .menu-label{margin:4px 18px 4px 10px;white-space:nowrap;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-ink2)}
.switch ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.switch li a{display:flex;align-items:center;justify-content:flex-end;min-height:48px;padding:6px 18px 6px 12px;border-radius:7px;text-decoration:none;color:var(--m-ink)}
.switch li a:hover,.switch li a:focus-visible{background:var(--m-hover);outline:none}
.switch li a{position:relative}
.switch li a[aria-current]{background:var(--m-hover)}
.switch li a[aria-current]::after{content:"";position:absolute;right:4px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--accent)}
.switch .opt img{display:block;width:auto}
.card .card-logo img{display:block;height:30px;width:auto;max-width:100%;margin-bottom:6px}
@media (max-width:640px){.site-logo .wordmark{font-size:16px}.site-logo .mark{width:24px;height:24px}.switch summary{padding:0 10px}.switch .cur img{transform:scale(.85);transform-origin:right center}}
@media (max-width:360px){.site-logo .wordmark{display:none}}
@media (max-width:640px){.switch summary{width:132px}}
/* footer: who made it, then what it is */
footer p{margin:0 0 8px}
footer .made{font-size:15px;line-height:2;color:var(--ink)}
footer .made a{display:inline-flex;align-items:center;vertical-align:middle;margin-left:2px}
footer .made img{display:block;height:24px;width:auto}
footer .made a.appy{border-radius:6px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) footer .made a.appy{background:#FAF9F6;padding:3px 8px}}
:root[data-theme="dark"] footer .made a.appy{background:#FAF9F6;padding:3px 8px}
/* nav right: sound toggle (game pages) then the company switcher */
.nav-right{display:flex;align-items:center;gap:8px}
.sound{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule);background:var(--paper);font-size:18px;line-height:1}
.sound:hover{border-color:var(--ink-2)}
.sound:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* ---------- battle staging: your side in the foreground, the other side in the background ---------- */
.slot{position:absolute;z-index:2;pointer-events:none}
.slot .who{position:absolute;bottom:0;left:50%;height:100%;max-width:100%;object-fit:contain;object-position:bottom;transform:translateX(-50%);filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)) brightness(.78) saturate(.85);transition:filter .2s,transform .2s}
.slot.speaking .who{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.slot .plat{position:absolute;left:8%;right:8%;bottom:-3%;height:13%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.55),rgba(255,255,255,.12) 62%,transparent 72%)}
.slot.rival{right:5%;top:9%;width:34%;height:58%}
.slot.ally{left:2%;bottom:-2%;width:42%;height:76%}
/* name boxes, like a battle screen */
.hud{position:absolute;z-index:4;min-width:170px;max-width:42%;padding:6px 10px 7px;background:rgba(248,246,240,.95);color:#15181b;border:3px solid #15181b;border-radius:10px 10px 10px 2px;box-shadow:4px 4px 0 rgba(0,0,0,.35);font-family:var(--mono);font-size:12px}
.hud .nm{display:inline-block;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;margin-right:8px}
.hud .lv{font-size:11px;letter-spacing:.04em}
.hud .hp{display:flex;align-items:center;gap:6px;margin-top:4px}
.hud .hpl{font-weight:700;font-size:10px;color:#c0281f}
.hud .hp .bar{flex:1;height:7px;margin:0;background:#cfd4d8;border:1px solid #15181b;border-radius:4px;overflow:hidden}
.hud .hp .bar i{display:block;height:100%;background:#2fb35e;transition:width .6s}
.hud .hp .bar i.mid{background:#e0b020}.hud .hp .bar i.low{background:#d6432f}
.hud .hpn{display:block;margin-top:2px;font-size:10px;color:#4e565c}
/* a news clipping held up by whoever is speaking about it */
.clip{position:absolute;z-index:3;bottom:22%;width:min(230px,70%);padding:8px 10px 9px;background:#f6f1e3;color:#141414;border:1px solid #c9bfa6;box-shadow:0 6px 18px rgba(0,0,0,.35);font-family:"Source Serif 4",Georgia,serif;font-size:12px;line-height:1.3;transform:rotate(-5deg)}
.slot.ally .clip{right:-6%}.slot.rival .clip{left:-30%;transform:rotate(4deg)}
.clip .ck{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#7a6d52;border-bottom:1px solid #c9bfa6;margin-bottom:4px;padding-bottom:2px}
.clip b{display:block;font-family:var(--display);font-weight:800;font-size:15px;line-height:1.1;margin-bottom:3px}
.clip.pop{animation:clip-in .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes clip-in{from{opacity:0;transform:translateY(16px) rotate(-12deg) scale(.9)}}
@media (max-width:640px){.hud{min-width:0;padding:4px 7px 5px;font-size:10px}.hud .nm{font-size:13px}.hud .hpn{display:none}.slot.rival{width:38%;height:54%}.slot.ally{width:50%}.clip{width:58%;font-size:10px}.clip b{font-size:12px}}

/* ---------- your hand: choices as fanned cards ---------- */
.hand{display:flex;justify-content:center;align-items:flex-end;padding:34px 8px 10px;margin:8px 0 4px;min-height:300px}
.court .cardx{all:unset;box-sizing:border-box;position:relative;flex:0 0 auto;width:178px;margin:0 -14px;cursor:pointer;display:flex;flex-direction:column;background:#fbf9f3;color:#15181b;border:3px solid #15181b;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.28);
  transform:translateY(calc(var(--ao) * 14px)) rotate(calc(var(--o) * 6deg));transform-origin:50% 120%;transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s;z-index:1}
.court .cardx .c-art{position:relative;display:block;height:150px;margin:6px 6px 0;border-radius:7px;background:#2a3040 center/cover no-repeat;border:2px solid #15181b}
.court .cardx .k{position:absolute;left:6px;top:6px;width:24px;height:24px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border:2px solid #15181b;border-radius:50%;font-family:var(--display);font-weight:800;font-size:13px}
.court .cardx .cry{position:absolute;left:-2px;right:-2px;bottom:8px;text-align:center;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;color:#fff;background:#d7261e;border-top:2px solid #15181b;border-bottom:2px solid #15181b;padding:2px 0;transform:rotate(-4deg)}
.court .cardx .c-body{display:block;padding:8px 10px 11px}
.court .cardx .t{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2}
.court .cardx .s{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;line-height:1.35;color:#4e565c}
.court .cardx .present{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:10px;border:1px solid #15181b;padding:1px 5px;color:#15181b}
.court .cardx:hover,.court .cardx:focus-visible,.court .cardx.lifted{transform:translateY(-34px) rotate(0) scale(1.12);z-index:5;box-shadow:0 22px 40px rgba(0,0,0,.38);outline:none}
.court .cardx:focus-visible{border-color:var(--accent-line)}
.court .cardx.played{transform:translateY(-160px) scale(1.25);opacity:0;transition:transform .32s ease-in,opacity .32s ease-in;z-index:6}
.hand:has(.cardx:disabled) .cardx:not(.played){opacity:.45}
@media (max-width:640px){.hand{min-height:250px;padding-top:28px} .court .cardx{width:min(170px,calc((100vw - 32px) / var(--n) + 20px));margin:0 -14px} .court .cardx .c-art{height:96px} .court .cardx .t{font-size:12px} .court .cardx .s{font-size:10px} .court .cardx .cry{font-size:11px} .court .cardx .present{display:none} .court .cardx:hover{transform:translateY(calc(var(--ao) * 10px)) rotate(calc(var(--o) * 6deg))} .court .cardx.lifted{transform:translateY(-30px) rotate(0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.court .cardx,.court .cardx.played,.slot .who.swap,.clip.pop{transition:none;animation:none}}

.court .cardx.loud{border-left:3px solid #15181b}
@media (max-width:640px){.slot.ally{height:66%;width:46%}}
/* the fan's outer corners mustn't widen the page; lifting still overflows upward */
.hand{overflow-x:clip;overflow-y:visible}
@media (max-width:640px){.court .cardx{transform:translateY(calc(var(--ao) * 8px)) rotate(calc(var(--o) * 3.5deg))}.court .cardx:hover{transform:translateY(calc(var(--ao) * 8px)) rotate(calc(var(--o) * 3.5deg))}.court .cardx.lifted{transform:translateY(-30px) rotate(0) scale(1.1)}}
/* prerendered scene (what search engines and no-JS readers see; the engine replaces it on load) */
.static-scene h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,4vw,30px);margin:6px 0 12px}
.static-scene p{max-width:64ch}
.static-choices{padding-left:1.2em;display:grid;gap:8px}
.static-choices span{display:block;font-size:15px;color:var(--ink-2)}
/* the facts, stance and endings that used to be a page before the game, now a quiet panel under it */
.about{margin-top:28px;border-top:1px solid var(--rule);padding-top:12px}
.about>summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:10px 0}
.about[open]>summary{color:var(--ink)}
/* Start: one tap on a fresh page load, so audio may play from the first line */
.court{position:relative}
.start-gate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(10,12,18,.42);backdrop-filter:blur(2px)}
.start-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:16px 34px;background:var(--accent);color:var(--on-accent);border:3px solid #10141c;border-radius:12px;box-shadow:6px 6px 0 #10141c;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.01em;transition:transform .12s,box-shadow .12s}
.start-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #10141c}
.start-btn:active{transform:translate(3px,3px);box-shadow:3px 3px 0 #10141c}
.start-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.start-play{font-size:22px}
.start-gate p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#f4f1e8;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media (max-width:640px){.start-btn{font-size:22px;padding:13px 26px}}
/* the game comes first; everything else follows it */
#stage .court{margin-top:6px}
.below-game{margin-top:22px}
.below-game header{border-top:2px solid var(--ink);border-bottom:0;padding-block:14px 6px}
.below-game .gauges{border-bottom:1px solid var(--rule)}

/* ---------- teams: each side shows up to two; the speaker rotates to the front of their side ---------- */
.slot .who{transition:transform .5s cubic-bezier(.3,.9,.3,1.1),filter .35s,opacity .35s}
.slot.rival .who.front{transform:translateX(-50%);z-index:2}
.slot.rival .who.back{transform:translateX(-102%) translateY(-7%) scale(.76);filter:brightness(.45) saturate(.6);z-index:1}
.slot.ally .who.front{transform:translateX(-50%) scaleX(-1);z-index:2}
.slot.ally .who.back{transform:translateX(6%) translateY(-7%) scale(.76) scaleX(-1);filter:brightness(.45) saturate(.6);z-index:1}
.slot.speaking .who.front{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.slot.rival .who.enter{animation:enter-r .45s cubic-bezier(.2,.9,.3,1.15)}
.slot.ally .who.enter{animation:enter-a .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes enter-r{from{opacity:0;translate:60% 0}}
@keyframes enter-a{from{opacity:0;translate:-60% 0}}
/* the name box rides with its side, right beside the front member */
.slot .hud{position:absolute;z-index:4}
.slot.rival .hud{top:2%;right:74%}
.slot.ally .hud{top:6%;left:72%;border-radius:10px 10px 10px 2px}
.slot .hud.swap{animation:hud-in .3s ease-out}
@keyframes hud-in{from{opacity:0;transform:translateY(-6px)}}
/* ---------- title card: slams across the stage as the scene opens, then docks into a corner caption ---------- */
.titlecard{position:absolute;z-index:7;left:0;right:0;top:50%;padding:16px 24px 18px;text-align:center;pointer-events:none;color:#f4f1e8;
  background:linear-gradient(90deg,transparent,rgba(16,20,28,.94) 10%,rgba(16,20,28,.94) 90%,transparent);border-top:4px solid var(--accent);border-bottom:4px solid var(--accent);
  transform:translateY(-50%) scaleY(0);opacity:0;transition:all .45s cubic-bezier(.3,.9,.3,1.1)}
.titlecard.on{transform:translateY(-50%) scaleY(1);opacity:1}
.titlecard .tc-kick{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.titlecard .tc-kick b{color:var(--accent-on-dark)}
.titlecard h2{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(24px,4.6vw,46px);letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.titlecard h2:focus{outline:none}
.titlecard.docked{left:12px;right:auto;top:12px;padding:6px 12px;text-align:left;transform:none;opacity:1;background:rgba(16,20,28,.86);border:0;border-left:4px solid var(--accent)}
.titlecard.docked .tc-kick{font-size:11px}
.titlecard.docked h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){.titlecard{padding:12px 14px}.titlecard h2{font-size:24px}.slot.rival .hud{right:62%}.slot.ally .hud{left:64%;top:2%}}
@media (prefers-reduced-motion:reduce){.hand-dock .hand{animation:none}.titlecard,.slot .who{transition:none}.slot .who.enter{animation:none}}
/* phones: compact name boxes, one line each */
@media (max-width:640px){
  .slot .hud{padding:3px 7px 4px;border-width:2px;box-shadow:2px 2px 0 rgba(0,0,0,.35)}
  .slot .hud .nm{font-size:12px;white-space:nowrap;margin-right:0}
  .slot .hud .lv{display:none}
  .slot .hud .hp{margin-top:2px}
  .slot .hud .hp .bar{height:5px;min-width:56px}
  .slot.rival .hud{right:64%;top:4%}
  .slot.ally .hud{left:60%;top:4%}
  .titlecard.docked{top:8px;left:8px;padding:4px 8px}
}
@media (max-width:640px){.slot.ally .hud{min-width:112px}.slot .hud .hp .bar{min-width:0}}
/* name boxes float just under their character: under the opponent's platform, across your side's lower body */
.slot.rival .hud{top:auto;right:auto;bottom:-15%;left:50%;transform:translateX(-50%);white-space:nowrap}
.slot.ally .hud{top:auto;left:50%;bottom:9%;transform:translateX(-50%);white-space:nowrap}
.slot .hud.swap{animation:hud-under .3s ease-out}
@keyframes hud-under{from{opacity:0;translate:0 6px}}
@media (max-width:640px){.slot.rival .hud{right:auto;top:auto;bottom:-14%}.slot.ally .hud{left:50%;top:auto;bottom:8%}}
/* the outcome stamp is the outcome card: verdict word, the ending's sentence, its permalink */
.shout.stamp{white-space:normal;pointer-events:auto;max-width:min(560px,86%);padding:.35em .9em .5em;text-align:center;transform:translate(-50%,-50%) rotate(-3deg);text-transform:none;letter-spacing:0;line-height:1.2;font-size:16px;box-shadow:8px 8px 0 rgba(16,20,28,.55)}
.shout.on.stay{animation:stamp-card .5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp-card{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(2)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}
.shout.stamp .st-word{display:block;font-family:var(--display);font-weight:800;font-size:clamp(38px,8vw,78px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.shout.stamp .st-text{margin:8px auto 8px;max-width:38ch;font-family:var(--body);font-weight:500;font-size:clamp(13px,1.8vw,17px);color:#15181b;text-wrap:pretty}
.shout.stamp .st-link{font-family:var(--mono);font-size:12px;color:#15181b;text-decoration-color:currentColor}
@media (max-width:640px){.shout.stamp{max-width:92%;padding:.3em .6em .45em;border-width:4px}.shout.stamp .st-word{font-size:34px}.shout.stamp .st-text{font-size:12.5px;margin:4px auto 6px}.shout.stamp .st-link{font-size:11px}}
/* who each character represents: a small logo on their name box */
.slot .hud .org{display:inline-block;vertical-align:-2px;height:15px;width:auto;max-width:78px;margin-right:7px;object-fit:contain}
@media (max-width:640px){.slot .hud .org{height:11px;max-width:56px;margin-right:5px}}
/* outcome card actions */
.shout.stamp .st-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.shout.stamp .st-actions button{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#15181b;border:2px solid currentColor;border-radius:6px;padding:5px 10px;background:#fff}
.shout.stamp .st-actions .st-again{background:currentColor}
.shout.stamp.tower .st-again{background:#c0281f;color:#fff;border-color:#c0281f}
.shout.stamp.plumbing .st-again{background:#b7791f;color:#fff;border-color:#b7791f}
.shout.stamp.relationship .st-again{background:#1f8a4c;color:#fff;border-color:#1f8a4c}
.shout.stamp .st-actions button:hover,.shout.stamp .st-actions button:focus-visible{transform:translateY(-1px);outline:2px solid #15181b;outline-offset:2px}
@media (max-width:640px){.shout.stamp .st-actions button{font-size:11px;padding:4px 8px}}
.slot .hud{max-width:none;width:max-content}
/* name boxes: no levels; your side's carries the share price, year by year */
.slot .hud .lv{display:none}
.slot .hud .hs{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 8px;margin-top:3px}
.slot .hud .hs svg{grid-row:span 2;display:block;overflow:visible}
.hs-real{fill:none;stroke:#8a9096;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hs-game{fill:none;stroke:var(--accent-line);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hs-dot{fill:var(--accent-line);stroke:#fff;stroke-width:1.5}
.hs-v{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.1;white-space:nowrap}
.hs-v .up{color:#1f8a4c;font-family:var(--mono);font-size:11px}.hs-v .dn{color:#c0281f;font-family:var(--mono);font-size:11px}
.hs-y{font-family:var(--mono);font-size:10px;color:#4e565c}
@media (max-width:640px){.slot.ally .hud{min-width:0}.slot .hud .hs svg{width:88px;height:24px}.hs-v{font-size:12px}.hs-y{display:none}}
/* the hand is dealt onto the stage, over the right two-thirds, beside your character */
.hand-dock{position:absolute;z-index:8;right:0;top:0;bottom:0;width:66%;display:flex;align-items:flex-end;justify-content:center;padding:0 6px 10px;
  background:linear-gradient(90deg,transparent,rgba(10,12,18,.55) 18%,rgba(10,12,18,.7))}
/* cards slide up as they're dealt (transform only: never fade the hand, so it can't get stuck half-transparent) */
.hand-dock .hand{animation:deal-up .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes deal-up{from{transform:translateY(40px)}}
.stage.dealt .slot.rival{opacity:.35;transition:opacity .3s}
.hand-dock .hand{margin:0;padding:0;min-height:0;width:100%}
.court .hand-dock .cardx{width:min(158px,calc(100% / var(--n) + 22px));margin:0 -11px}
.court .hand-dock .cardx .c-art{height:112px}
.court .hand-dock .cardx .t{font-size:13.5px}
.court .hand-dock .cardx .s{font-size:10.5px}
.court .hand-dock .cardx .cry{font-size:13px}
.court .hand-dock .cardx:hover,.court .hand-dock .cardx:focus-visible,.court .hand-dock .cardx.lifted{transform:translateY(-22px) rotate(0) scale(1.1)}
/* phones: the stage is too small to hold a hand, so it's dealt in the page, just below it */
.hand-dock.below{position:relative;width:auto;background:none;padding:22px 0 4px}
@media (max-width:640px){
  .court .hand-dock .cardx{width:min(170px,calc((100vw - 32px) / var(--n) + 20px));margin:0 -14px}
  .court .hand-dock .cardx .c-art{height:96px}
  .stage.dealt .slot.rival{opacity:1}
}
}
.hand-dock{width:61%}

/* ---------- tighter text box with game-style controls ---------- */
.dialog{min-height:0;padding:16px 20px 14px;font-size:21px;line-height:1.32;cursor:pointer;display:flex;flex-direction:column}
.dialog:focus-visible{outline:3px solid var(--accent-on-dark);outline-offset:2px}
.dialog .line{display:block;min-height:2.64em}
.dialog .more{display:none}
.dialog-ctl{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px}
.dialog .next{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--accent);color:var(--on-accent);border:2px solid #000;border-radius:8px;box-shadow:3px 3px 0 #000;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.01em;opacity:.35;transition:opacity .15s,transform .1s}
.dialog.ready:not(.done) .next{opacity:1;animation:next-pulse 1.1s ease-in-out infinite}
.dialog.done .next{display:none}
.dialog:active .next{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
@keyframes next-pulse{50%{transform:translateX(3px)}}
.court-skip{display:inline}
.court-skip[hidden]{display:none}
.court-skip .skip{all:unset;cursor:pointer;display:inline-flex;align-items:center;padding:6px 12px;border:2px solid rgba(244,241,232,.55);border-radius:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#f4f1e8}
.court-skip .skip:hover,.court-skip .skip:focus-visible{border-color:#f4f1e8;background:rgba(255,255,255,.08)}
@media (max-width:640px){.dialog{font-size:17px;padding:14px 14px 12px}.dialog .next{font-size:13px;padding:5px 11px}.court-skip .skip{font-size:11px;padding:5px 9px}}
@media (prefers-reduced-motion:reduce){.dialog.ready .next{animation:none}}

/* ---------- the hand: on top of everything, raised; your character steps aside ---------- */
.hand-dock{z-index:20;align-items:center;padding:0 6px 6%}
.slot.ally{transition:transform .45s cubic-bezier(.3,.9,.3,1.1)}
.stage.dealt .slot.ally{transform:translateX(-14%) scale(.82);transform-origin:bottom left}
@media (max-width:640px){.stage.dealt .slot.ally{transform:none}}
.court .hand-dock:not(.below) .cardx{width:min(158px,calc((100% - 24px) / var(--n) + 12px));margin:0 -6px}
.hand-dock:not(.below){padding:0 54px 7% 0}.hand-dock:not(.below) .hand{overflow:visible}
/* playing a card: the chosen one slams down; the rest pixelate away (engine); no fade of the hand */
.court .cardx.slam{z-index:9;animation:card-slam .72s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes card-slam{0%{transform:translateY(-22px) scale(1.1) rotate(0)}35%{transform:translateY(-60px) scale(1.32) rotate(-2deg)}62%{transform:translateY(0) scale(.98) rotate(0);box-shadow:0 4px 8px rgba(0,0,0,.5)}100%{transform:translateY(0) scale(1.04) rotate(0)}}
.hand:has(.cardx:disabled) .cardx:not(.played){opacity:1}
.court .choice:disabled{opacity:1}
/* no Skip for now; Next sits still */
.court-skip{display:none!important}
.dialog.ready:not(.done) .next{animation:none}
/* wider, shorter cards */
.hand-dock:not(.below){width:68%}
.court .hand-dock:not(.below) .cardx{width:min(196px,calc((100% - 30px) / var(--n) + 14px))}
.court .hand-dock .cardx .c-art{height:86px}
.court .hand-dock .cardx .c-body{padding:7px 10px 9px}
@media (max-width:640px){.court .hand-dock .cardx .c-art{height:72px}}
@media (prefers-reduced-motion:reduce){.court .cardx.slam{animation:none}}
/* title over the hand */
.hand-dock{flex-direction:column;justify-content:center}
.hand-head{align-self:center;text-align:center;margin:0 0 14px;color:#f4f1e8;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hand-head .hh-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark)}
.hand-head b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,28px);letter-spacing:-.01em}
.hand-dock.below .hand-head{color:var(--ink);text-shadow:none;margin-bottom:10px}
.hand-dock.below .hand-head .hh-k{color:var(--ink-2)}
/* wider cards */
.court .hand-dock:not(.below) .cardx{width:min(220px,calc((100% - 30px) / var(--n) + 32px));margin:0 -14px}
@media (max-width:640px){.court .hand-dock .cardx{width:min(170px,calc((100vw - 32px) / var(--n) + 20px));margin:0 -14px}}
.hand-dock:not(.below) .hand-head{margin-bottom:40px}.hand-dock:not(.below){padding-bottom:4%}
.hand-dock:not(.below) .hand-head{margin-bottom:54px}
/* every card in a hand is as tall as the tallest one */
.hand-dock .hand{align-items:stretch}
.court .hand-dock .cardx{display:flex;flex-direction:column}
.court .hand-dock .cardx .c-body{flex:1}
/* a lifted card keeps the spot it rose from under the pointer, so it doesn't drop and re-lift (jitter) */
.court .cardx::after{content:"";position:absolute;left:-4px;right:-4px;top:100%;height:0}
.court .cardx:hover::after,.court .cardx.lifted::after,.court .cardx:focus-visible::after{height:56px}
.court .hand-dock:not(.below) .cardx{min-height:240px}@media (max-width:640px){.court .hand-dock .cardx{min-height:200px}}
/* portraits fade in when their image has loaded */
.slot .who{opacity:0}
.slot .who.loaded{opacity:1}
/* footer: full width of the page column, no rule above it */
footer{max-width:none;border-top:0;padding-top:0}
footer p{max-width:none}
/* the Start / Continue screen is the scene's title card with the button under it */
.start-gate{gap:22px;background:rgba(10,12,18,.55)}
.gate-card{width:100%;padding:16px 24px 18px;text-align:center;color:#f4f1e8;background:linear-gradient(90deg,transparent,rgba(16,20,28,.94) 10%,rgba(16,20,28,.94) 90%,transparent);border-top:4px solid var(--accent);border-bottom:4px solid var(--accent)}
.gate-card .tc-kick{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.gate-card .tc-kick b{color:var(--accent-on-dark)}
.gate-card h2{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(24px,4.6vw,46px);letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
@media (max-width:640px){.gate-card{padding:12px 14px}.gate-card h2{font-size:24px}.start-gate{gap:14px}}
/* Start / Continue sits inside the title card, no white ring */
.gate-card .start-btn{margin-top:16px;box-shadow:4px 4px 0 #000;border:0;font-size:22px;padding:11px 26px}
.gate-card .start-btn:hover{box-shadow:6px 6px 0 #000}
.gate-card .start-btn:active{box-shadow:2px 2px 0 #000}
.gate-card .start-btn:focus-visible{outline:3px solid var(--accent-on-dark);outline-offset:3px}
@media (max-width:640px){.gate-card .start-btn{font-size:18px;padding:9px 20px;margin-top:12px}}
.gate-card .start-btn:focus,.gate-card .start-btn:focus-visible{outline:none}

/* ---------- who's talking ---------- */
/* spotlight: the speaker full color and forward; everyone else clearly dimmed */
.stage.someone-speaking .slot .who{filter:brightness(.42) saturate(.45);transition:filter .25s,transform .45s cubic-bezier(.3,.9,.3,1.1)}
.stage.someone-speaking .slot.speaking .who.front{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)) brightness(1.05) saturate(1.1)}
.stage.someone-speaking .slot.speaking .who.back{filter:brightness(.42) saturate(.45)}
.slot.speaking .hud{box-shadow:0 0 0 3px var(--accent),4px 4px 0 rgba(0,0,0,.35)}
.stage.someone-speaking .slot:not(.speaking) .hud{opacity:.6}
/* hop when a line starts; bob while the voice plays */
.slot .who.front.hop{animation:hop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{translate:0 0}40%{translate:0 -14px}100%{translate:0 0}}
.slot.talking .who.front{animation:bob-talk .42s ease-in-out infinite}
@keyframes bob-talk{50%{translate:0 -4px}}
/* the text box points at the speaker: tail and name tab on their side */
.dialog{position:relative}
.dialog::before{content:"";position:absolute;top:-17px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid var(--accent);display:none}
.dialog[data-side="ally"]::before{display:block;left:22%}
.dialog[data-side="rival"]::before{display:block;right:22%}
.dialog[data-side="rival"] .nameplate{left:auto;right:14px}
/* narration: no tail, no name, its own voice on the page */
.dialog.narration .line{font-style:italic;color:#c9d3e6;font-family:var(--body);font-weight:400}
.dialog.narration{border-top-color:rgba(244,241,232,.25)}
@media (prefers-reduced-motion:reduce){.slot .who.front.hop,.slot.talking .who.front{animation:none}}
.dialog{z-index:3}.dialog::before{top:-19px;border-left-width:18px;border-right-width:18px;border-bottom-width:18px}
/* the name tab is the pointer: a notch on top of it aims up at the speaker */
.dialog::before{display:none!important}
.dialog .nameplate::after{content:"";position:absolute;bottom:100%;left:22px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:12px solid var(--accent)}
.dialog[data-side="rival"] .nameplate::after{left:auto;right:22px}
/* ---------- organic motion ---------- */
/* no constant talk-bob */
.slot.talking .who.front{animation:none}
/* idle breathing, staggered per side so nobody moves in sync */
.slot .who.front,.slot .who.back{animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 100%}
.slot.rival .who{animation-duration:4.8s;animation-delay:-1.7s}
@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.008 1.016}}
/* a weighted hop: dip, rise, settle with a small overshoot */
.slot .who.front.hop{animation:hop-weighted .42s cubic-bezier(.3,.7,.4,1),breathe 4.2s ease-in-out infinite .42s}
@keyframes hop-weighted{0%{translate:0 0;scale:1 1}18%{translate:0 2px;scale:1.03 .97}55%{translate:0 -12px;scale:.98 1.03}80%{translate:0 1px;scale:1.01 .99}100%{translate:0 0;scale:1 1}}
@media (prefers-reduced-motion:reduce){.slot .who.front,.slot .who.back,.slot .who.front.hop{animation:none}}
.slot.rival .who.enter{animation:enter-r .45s cubic-bezier(.2,.9,.3,1.15),breathe 4.8s ease-in-out infinite .45s}
.slot.ally .who.enter{animation:enter-a .45s cubic-bezier(.2,.9,.3,1.15),breathe 4.2s ease-in-out infinite .45s}
/* a win you can play on from: the stamp shrinks away before the hand is dealt */
.shout.stamp.away{animation:none;transition:transform .4s ease-in,opacity .4s ease-in;transform:translate(-50%,-80%) scale(.6) rotate(-3deg);opacity:0}
/* wordmark: "Survive the" quiet, "SaaSpocalypse" loud */
.site-logo .wordmark{font-weight:600}
.site-logo .wordmark b{font-weight:800}
@media (max-width:640px){.site-logo .wordmark{font-size:15px;line-height:1.05;white-space:normal;max-width:130px}}
nav.site{position:relative;z-index:50}

/* ---------- home: comic panels ---------- */
.comic{margin-top:10px}
.cp-row{display:grid;gap:12px;margin-bottom:12px}
.cp-two{grid-template-columns:1fr 1fr}
.cp{position:relative;margin:0;border:4px solid #0d0f14;background:#0d0f14;box-shadow:6px 6px 0 rgba(0,0,0,.55);overflow:hidden}
.cp img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.cp-wide img{aspect-ratio:5/2}
/* The crash panel: caption bottom-left, the burst at the falling arrow's tip, both clear of faces. */
.cp-wide .cp-cap{top:auto;bottom:12px;max-width:min(44%,520px)}
/* narration boxes, comic style */
.cp-cap{position:absolute;left:12px;top:12px;max-width:min(78%,520px);padding:8px 12px 9px;background:#fff4c9;color:#14161a;border:3px solid #0d0f14;box-shadow:3px 3px 0 #0d0f14;font-family:var(--display);font-weight:800;font-size:clamp(15px,2vw,22px);line-height:1.15;letter-spacing:-.01em;text-transform:uppercase}
.cp-cap-q{left:auto;right:12px;top:auto;bottom:12px;background:#ffd23f}
.cp-cap b{display:block;font-size:1.25em;color:#c0281f}
/* the pick panel */
.cp-pick{padding:18px 18px 22px;background:radial-gradient(circle at 20% 0%,#2a3350,#0d0f14 70%)}
.cp-findout{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,64px);letter-spacing:-.02em;line-height:1;color:#fff;text-shadow:4px 4px 0 #c0281f;transform:rotate(-2deg);display:inline-block}
.cp-cos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cp-co{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-height:190px;padding:14px;border:3px solid #0d0f14;background:#1b1f26;text-decoration:none;color:#fff;overflow:hidden;box-shadow:4px 4px 0 #000;transition:transform .15s,box-shadow .15s}
.cp-co:hover,.cp-co:focus-visible{transform:translate(-2px,-3px);box-shadow:7px 8px 0 #000;outline:none}
.cp-co-art{position:absolute;inset:0;background:center/cover no-repeat;filter:brightness(.5) saturate(1.1);transition:filter .2s}
.cp-co:hover .cp-co-art{filter:brightness(.7) saturate(1.2)}
.cp-co-logo{position:relative;background:#fff;border:3px solid #0d0f14;border-radius:8px;padding:8px 14px}
.cp-co-logo img{display:block;height:30px;width:auto;max-width:160px}
.cp-co-stance{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:rgba(13,15,20,.75);padding:2px 8px}
.cp-co-go{position:relative;background:var(--accent);color:var(--on-accent);border:2px solid #0d0f14;border-radius:8px;box-shadow:3px 3px 0 #000;padding:6px 14px;font-family:var(--display);font-weight:800;font-size:16px}
.cp-thesis{margin:16px 0 0;font-family:var(--display);font-weight:700;font-size:17px}
.cp-thesis a{color:var(--ink)}
@media (max-width:640px){.cp-two{grid-template-columns:1fr}.cp img{aspect-ratio:4/3}.cp-wide img{aspect-ratio:16/9;object-position:30% 50%}.cp-wide .cp-cap{top:12px;bottom:auto;max-width:78%}.cp-cap{font-size:15px}.cp-co{min-height:150px}}
.cp-co-logo{flex:none;display:block}.cp-co-logo img{height:30px;width:auto;max-width:none}@media (max-width:640px){.cp-co-logo img{height:26px}}
.cp .cp-co-logo img{aspect-ratio:auto;object-fit:contain;width:auto;height:30px}@media (max-width:640px){.cp .cp-co-logo img{height:26px}}
/* caption moved off OMNI's face */
.cp-cap-br{left:auto;top:auto;right:12px;bottom:12px}
/* comic SFX burst: the market-cap collapse */
.cp-sfx{position:absolute;right:17%;top:2%;transform:rotate(-8deg);padding:.15em .5em .2em;background:#ffd23f;color:#c0281f;border:4px solid #0d0f14;box-shadow:5px 5px 0 #0d0f14;font-family:var(--display);font-weight:800;font-size:clamp(22px,3.6vw,40px);letter-spacing:-.02em;line-height:1;clip-path:polygon(0 8%,6% 0,20% 6%,36% 0,52% 6%,68% 0,84% 6%,100% 2%,96% 30%,100% 55%,95% 80%,100% 100%,82% 94%,66% 100%,50% 94%,34% 100%,18% 94%,2% 100%,5% 72%,0 48%,4% 26%);animation:sfx-pop 2.6s ease-in-out infinite}
@keyframes sfx-pop{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-6deg) scale(1.05)}}
@media (max-width:640px){.cp-sfx{top:auto;bottom:10px;right:10px;font-size:22px;border-width:3px}}
@media (prefers-reduced-motion:reduce){.cp-sfx{animation:none}}