:root{--cream:#f5efe3;--paper:#fffdf8;--ink:#261f1a;--muted:#6d6259;--line:#cfc2b1;--accent:#7a2528;--accent-2:#c79a43;--success:#286047;--danger:#a13e32;--display:"Piazzolla",Georgia,serif;--body:"Karla",sans-serif;--utility:"Courier Prime",monospace;--pad:clamp(1rem,4vw,4rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.5}button,a{font:inherit;color:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
.top-stripe{height:9px;background:repeating-linear-gradient(90deg,#211b18 0 22px,var(--accent-2) 22px 35px,var(--accent) 35px 58px,#255a47 58px 80px,var(--accent-2) 80px 89px)}
.bar{min-height:72px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--line);background:rgba(245,239,227,.94);backdrop-filter:blur(9px);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}.brand svg{width:37px}.brand b{font-family:var(--display);font-size:1.05rem}.brand span{color:var(--accent)}.game-links{display:flex;align-items:center;gap:1rem;font:700 .7rem var(--utility);letter-spacing:.08em;text-transform:uppercase}.game-links a{text-decoration:none;border-bottom:1px solid transparent;padding:.25rem 0}.game-links a:hover,.game-links a:focus-visible{border-color:var(--accent)}
main{min-height:calc(100vh - 81px);padding:clamp(2rem,5vw,4.5rem) var(--pad) 5rem;position:relative;overflow:hidden}.shell{width:min(1160px,100%);margin:0 auto;position:relative}.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);align-items:end;gap:clamp(2rem,7vw,6rem);margin-bottom:clamp(2rem,5vw,4rem)}.eyebrow{font:700 .7rem var(--utility);letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem;display:flex;align-items:center;gap:.65rem}.eyebrow::before{content:"";width:36px;height:3px;background:var(--accent-2)}h1{font-family:var(--display);font-size:clamp(3rem,7.5vw,6.5rem);line-height:.86;letter-spacing:-.055em;margin:0;max-width:9ch}h1 em{color:var(--accent);font-weight:700}.intro-copy{border-left:1px solid var(--line);padding-left:clamp(1.25rem,3vw,2.5rem);font-size:1.03rem}.intro-copy p{margin:0 0 .9rem}.intro-copy small{color:var(--muted)}
.game-frame{display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid var(--ink);background:var(--paper);box-shadow:14px 14px 0 var(--accent-2);min-height:570px}.game-rail{background:var(--accent);color:var(--paper);padding:1.45rem 1.2rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.game-rail::after{content:"";position:absolute;width:240px;height:240px;border:2px solid rgba(255,255,255,.12);border-radius:50%;left:-130px;bottom:35px;box-shadow:0 0 0 14px rgba(255,255,255,.05),0 0 0 30px rgba(255,255,255,.035)}.rail-title{position:relative;z-index:1;font:700 .72rem var(--utility);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.55);padding:.7rem;text-align:center}.route{position:relative;z-index:1;display:grid;gap:.62rem;margin:1.5rem 0}.route-stop{display:grid;grid-template-columns:27px 1fr;align-items:center;gap:.6rem;font:700 .64rem var(--utility);letter-spacing:.07em;text-transform:uppercase;opacity:.46}.route-stop span{width:25px;height:25px;border:1px solid rgba(255,255,255,.62);border-radius:50%;display:grid;place-items:center}.route-stop.active,.route-stop.done{opacity:1}.route-stop.active span{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}.route-stop.done span{background:rgba(255,255,255,.18)}.rail-score{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.28);padding-top:1rem}.rail-score small{display:block;font:700 .62rem var(--utility);letter-spacing:.12em;text-transform:uppercase}.rail-score strong{font-family:var(--display);font-size:2rem;color:var(--accent-2)}
.game-panel{padding:clamp(1.4rem,5vw,4rem);display:flex;flex-direction:column;min-width:0}.screen{animation:arrive .4s ease both}.setup,.results{margin:auto 0}.setup h2,.results h2{font-family:var(--display);font-size:clamp(2rem,5vw,3.7rem);line-height:1.03;letter-spacing:-.03em;margin:0 0 .8rem;max-width:12ch}.setup>p,.results>p{max-width:52ch;color:var(--muted);margin:0 0 1.6rem}.briefing{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:0 0 1.6rem}.briefing div{padding:.9rem;border-right:1px solid var(--line)}.briefing div:last-child{border:0}.briefing b{display:block;font-family:var(--display);font-size:1.25rem}.briefing small{font:700 .61rem var(--utility);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.start-button,.next-button{border:1px solid var(--ink);background:var(--accent);color:var(--paper);font-weight:700;padding:.85rem 1.15rem;box-shadow:5px 5px 0 var(--accent-2);transition:transform .16s ease,box-shadow .16s ease}.start-button:hover,.next-button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent-2)}.start-button:active,.next-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--accent-2)}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.8rem,4vw,2.8rem)}.question-count{font:700 .7rem var(--utility);letter-spacing:.09em;text-transform:uppercase}.progress{width:min(320px,52%);height:7px;background:#e4d9c9;overflow:hidden}.progress span{display:block;height:100%;background:var(--success);transform-origin:left;transition:transform .35s ease}.category-tag{display:inline-flex;align-items:center;gap:.5rem;font:700 .67rem var(--utility);letter-spacing:.12em;text-transform:uppercase;color:var(--success);margin:0 0 1rem}.category-tag::before{content:"";width:9px;height:9px;background:var(--accent-2);transform:rotate(45deg)}.question h2{font-family:var(--display);font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.18;margin:0 0 1.65rem;max-width:24ch}.answers{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.answer{display:flex;align-items:center;gap:.8rem;text-align:left;border:1px solid var(--line);background:var(--paper);padding:1rem;min-height:72px;transition:transform .16s ease,border-color .16s ease,background .16s ease}.answer:hover:not(:disabled){border-color:var(--accent);transform:translateX(4px)}.answer span{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font:700 .72rem var(--utility)}.answer.correct{background:#e1eee5;border-color:var(--success);color:#174632}.answer.wrong{background:#f3e0dc;border-color:var(--danger);color:#702a22}.answer.correct span{background:var(--success);color:#fff;border-color:var(--success)}.answer.wrong span{background:var(--danger);color:#fff;border-color:var(--danger)}.answer:disabled{cursor:default}.feedback{margin-top:1.15rem;padding:1rem 1.05rem;border-left:4px solid var(--accent-2);background:var(--cream);animation:arrive .3s ease both}.feedback p{margin:0 0 1rem;color:#54483f}.feedback strong{color:var(--ink)}.feedback-row{display:flex;justify-content:flex-end}
.result-mark{width:132px;height:132px;border:4px double var(--accent);border-radius:50%;display:grid;place-items:center;text-align:center;font:700 .7rem var(--utility);letter-spacing:.08em;color:var(--accent);text-transform:uppercase;transform:rotate(-6deg);margin:0 0 1.5rem;line-height:1.05}.result-mark strong{font-family:var(--display);font-size:2rem;display:block;letter-spacing:-.03em}.result-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.text-link{border:0;background:none;color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent);padding:.4rem 0;text-decoration:none}.disclaimer{margin-top:1.4rem!important;font-size:.82rem!important;color:var(--muted)!important}
.life-game main::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath d='M0 30h180M0 90h180M0 150h180M30 0v180M90 0v180M150 0v180' stroke='%23cfc2b1' stroke-width='.7' stroke-dasharray='2 7'/%3E%3C/svg%3E")}.life-game .game-frame{transform:rotate(-.2deg)}
.road-game{--cream:#e7e9e4;--paper:#f8f8f4;--ink:#182027;--muted:#566067;--line:#b7c0c2;--accent:#174c68;--accent-2:#e3ad38;--success:#22734f;--danger:#a63d32}.road-game main{background:linear-gradient(112deg,transparent 0 62%,rgba(255,255,255,.38) 62% 64%,transparent 64% 72%,rgba(255,255,255,.28) 72% 74%,transparent 74%),var(--cream)}.road-game .game-frame{box-shadow:14px 14px 0 #27323a}.road-game .game-rail{background:#27323a}.road-game .game-rail::after{border-radius:0;transform:rotate(45deg);left:-160px;bottom:15px}.road-game .rail-title{border:2px solid var(--accent-2);color:var(--accent-2)}.road-game h1{max-width:10ch}.road-game .result-mark{border-radius:14px;transform:rotate(2deg);border-style:solid}.road-game .start-button,.road-game .next-button{box-shadow:5px 5px 0 #27323a}.road-game .start-button:hover,.road-game .next-button:hover{box-shadow:7px 7px 0 #27323a}
@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:760px){.bar{align-items:flex-start;padding-top:.85rem;padding-bottom:.85rem}.game-links{flex-direction:column;align-items:flex-end;gap:.25rem}.intro{grid-template-columns:1fr;gap:1.3rem}.intro-copy{max-width:44rem}.game-frame{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--accent-2)}.road-game .game-frame{box-shadow:8px 8px 0 #27323a}.game-rail{min-height:auto;padding:1rem}.rail-title{align-self:flex-start}.route{grid-template-columns:repeat(10,1fr);gap:.25rem;margin:1rem 0}.route-stop{display:block}.route-stop b{display:none}.route-stop span{width:100%;height:22px;border-radius:0;font-size:.58rem}.rail-score{position:absolute;right:1rem;top:.9rem;border:0;padding:0;text-align:right}.rail-score strong{font-size:1.4rem}.game-panel{min-height:510px}.answers{grid-template-columns:1fr}.briefing{grid-template-columns:1fr}.briefing div{border-right:0;border-bottom:1px solid var(--line)}.briefing div:last-child{border:0}}
@media(max-width:430px){h1{font-size:2.8rem}.bar{gap:.7rem}.brand b{font-size:.9rem}.game-links{font-size:.58rem}.game-panel{padding:1.2rem}.quiz-top{align-items:flex-start;flex-direction:column}.progress{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}