/* Shared with the homepage look: serif body, sans labels, black on white. */
:root { --ink:#111; --muted:#555; --line:#ddd; --soft:#f5f5f5; --softer:#fafafa; }
* { box-sizing:border-box; }
body { margin:0; font-family: Georgia, "Times New Roman", serif; color:var(--ink); background:#fff; line-height:1.6; font-size:17px; }
a { color:var(--ink); text-underline-offset:3px; }
.wrap { max-width:760px; margin:0 auto; padding:0 24px; }
header { border-bottom:1px solid var(--line); }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px 16px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap; }
.name { font-weight:bold; text-decoration:none; font-size:18px; }
nav a { font-family: Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; margin-left:18px; color:var(--muted); }
nav a:hover, nav a[aria-current] { color:var(--ink); text-decoration:underline; }
nav a:first-child { margin-left:0; }
footer { border-top:1px solid var(--line); margin-top:56px; padding:20px 0 40px; font-family: Arial, Helvetica, sans-serif; font-size:13px; color:var(--muted); }
@media (max-width:600px) { nav a { margin:0 14px 0 0; display:inline-block; padding:4px 0; } }

/* Game shell */
.sans, .sim-label, .meters, .btn, .opt, .alloc, .steps, .chip, .kicker, .points, .about-sim summary { font-family: Arial, Helvetica, sans-serif; }
.sim-label { margin:28px 0 18px; font-size:13px; color:var(--muted); border:1px dashed #bbb; padding:8px 12px; border-radius:8px; background:var(--softer); }
.game-root { min-height:420px; }
.screen { animation: rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
h1 { font-size:32px; line-height:1.2; font-weight:normal; margin:8px 0 10px; outline:none; }
h2 { font-size:24px; line-height:1.25; font-weight:normal; margin:4px 0 10px; outline:none; }
.kicker { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0; }
.lead { color:var(--muted); margin:0 0 18px; }
.ico { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Intro illustration */
.hero-art { display:block; width:100%; max-width:360px; height:auto; margin:6px 0 14px; }
.hero-art .bob { animation: bob 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.hero-art .twinkle { animation: twinkle 2.4s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes bob { 50% { transform:translateY(-4px); } }
@keyframes twinkle { 50% { transform:scale(1.25) rotate(15deg); opacity:.6; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:bold; border:1.5px solid var(--ink); background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; cursor:pointer; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 3px 0 var(--ink); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn.ghost { background:#fff; color:var(--ink); }
.btn:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.btn .ico { width:18px; height:18px; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; align-items:center; }

/* Progress steps */
.steps { display:flex; gap:6px; list-style:none; padding:0; margin:0 0 16px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.steps li { display:flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line); border-radius:999px; }
.steps li.done { color:var(--ink); }
.steps li.now { background:var(--ink); color:#fff; border-color:var(--ink); }
.steps .ico { width:14px; height:14px; }

/* Meters */
.meters { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin:0 0 22px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--softer); }
.meter { font-size:12px; min-width:0; }
.meter-top { display:flex; align-items:center; gap:5px; color:var(--muted); white-space:nowrap; }
.meter-top .ico { width:15px; height:15px; color:var(--ink); }
.meter-val { font-size:17px; font-weight:bold; color:var(--ink); display:flex; align-items:baseline; gap:6px; margin:2px 0 4px; }
.track { height:7px; border-radius:99px; background:#e6e6e6; overflow:hidden; }
.fill { height:100%; background:var(--ink); border-radius:99px; width:0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.meter.warn .fill { background: repeating-linear-gradient(45deg, #111 0 4px, #777 4px 8px); }
.meter.warn .meter-val { text-decoration: underline wavy; text-underline-offset:3px; }
.chip { font-size:11px; font-weight:bold; padding:1px 6px; border-radius:99px; border:1px solid var(--ink); animation: pop .5s ease both; }
.chip.neg { background:#fff; color:var(--ink); border-style:dashed; }
.chip.pos { background:var(--ink); color:#fff; }
@keyframes pop { 0% { transform:scale(.4); opacity:0; } 70% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
@media (max-width:640px) { .meters { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:380px) { .meters { grid-template-columns:repeat(2, 1fr); } }

/* Option cards */
.opts { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.opts.three { grid-template-columns:repeat(3, 1fr); }
.opt { text-align:left; display:flex; flex-direction:column; gap:6px; padding:16px; border:1.5px solid var(--ink); background:#fff; color:var(--ink); border-radius:14px; cursor:pointer; font-size:15px; transition: transform .15s ease, box-shadow .15s ease; }
.opt:hover { transform:translateY(-2px); box-shadow:0 4px 0 var(--ink); }
.opt:active { transform:translateY(0); box-shadow:none; }
.opt .opt-art { width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; background:var(--soft); }
.opt > div { display:flex; flex-direction:column; gap:4px; }
.opt strong { font-size:16px; line-height:1.3; }
.opt span { color:var(--muted); font-size:13px; line-height:1.4; }
.opt .tag { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
@media (max-width:640px) { .opts, .opts.three { grid-template-columns:1fr; } .opt { flex-direction:row; align-items:center; gap:12px; } }

/* Allocation rows */
.points { display:inline-flex; align-items:center; gap:8px; font-size:14px; margin:0 0 12px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--ink); }
.points b { font-size:18px; }
.alloc { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.alloc li { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.alloc .opt-art { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; background:var(--soft); }
.alloc .label strong { display:block; font-size:15px; }
.alloc .label span { font-size:12.5px; color:var(--muted); }
.pips { display:flex; gap:4px; margin-top:6px; }
.pip { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--ink); transition: background .2s, transform .2s; }
.pip.on { background:var(--ink); transform:scale(1.08); }
.stepper { display:flex; align-items:center; gap:8px; }
.stepper button { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; font-size:20px; line-height:1; cursor:pointer; color:var(--ink); }
.stepper button:hover:not(:disabled) { background:var(--ink); color:#fff; }
.stepper button:disabled { opacity:.3; cursor:not-allowed; }
.stepper output { min-width:16px; text-align:center; font-weight:bold; font-size:17px; }
@media (max-width:480px) { .alloc li { grid-template-columns:auto 1fr; } .stepper { grid-column: 1 / -1; justify-content:flex-end; } }

/* What happened */
.events { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.events li { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid var(--line); animation: rise .4s ease both; }
.events li:nth-child(2) { animation-delay:.08s; } .events li:nth-child(3) { animation-delay:.16s; } .events li:nth-child(4) { animation-delay:.24s; }
.events .badge { font-family: Arial, sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; }
.events li.risk { border-style:dashed; border-color:#888; }
.events li.ai .ico, .events li.human .ico { color:var(--ink); }

/* Problem card */
.problem { display:flex; gap:14px; padding:16px; border:2px dashed var(--ink); border-radius:14px; margin:4px 0 18px; animation: shake .5s ease both; }
.problem .ico { width:32px; height:32px; }
@keyframes shake { 20% { transform:translateX(-4px); } 40% { transform:translateX(4px); } 60% { transform:translateX(-2px); } 80% { transform:translateX(2px); } }

/* Result */
.result-head { display:flex; gap:18px; align-items:center; margin-bottom:14px; }
.medal { width:92px; height:92px; border-radius:50%; border:2px solid var(--ink); display:grid; place-items:center; flex-shrink:0; animation: medal .7s cubic-bezier(.2,1.4,.4,1) both; background:var(--soft); position:relative; }
.medal .ico { width:44px; height:44px; }
@keyframes medal { from { transform:scale(.3) rotate(-20deg); opacity:0; } to { transform:none; opacity:1; } }
.score { font-family: Arial, sans-serif; font-size:13px; color:var(--muted); }
.score b { font-size:22px; color:var(--ink); }
.debrief { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.debrief section { border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.debrief h3 { font-family: Arial, sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px; display:flex; gap:8px; align-items:center; }
.debrief h3 .ico { width:18px; height:18px; }
.debrief ul { margin:0; padding-left:18px; font-size:15px; }
.debrief li { margin-bottom:6px; }
@media (max-width:640px) { .debrief { grid-template-columns:1fr; } .result-head { flex-direction:column; align-items:flex-start; } }
.confetti { position:absolute; inset:0; pointer-events:none; }
.confetti i { position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--ink); border-radius:2px; animation: burst 1s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity:0; } }

.about-sim { margin-top:30px; border-top:1px solid var(--line); padding-top:14px; font-size:15px; color:var(--muted); }
.about-sim summary { cursor:pointer; font-size:14px; color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* Headings receive focus between screens for screen readers; no visible ring needed. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline:none; }