:root{--font-display:'Little Grandad Fat',Impact,sans-serif;--font-title:'GCNorthSans-Regular',Arial,sans-serif;--font-hud:'GCNorthSans-Regular',Arial,sans-serif;--font-body:'GCNorthSans-Regular',Arial,sans-serif;--font-label:'GCNorthSans-SemiBold',Arial,sans-serif;--font-mono:'Overbit-Regular',monospace;--font-strong:'GCNorthSans-SemiBold',Arial,sans-serif;--bg:#0d0d16;--panel:#15151f;--panel2:#1c1c29;--ink:#f0eff5;--mute:#bebdce;--line:#2a2a3a;--gold:#ffd24a;--red:#ff6a6a;--green:#5cd65c;--blue:#7ab0ff;--purple:#b48ad8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font-body)}
body.busy .act,body.busy #wait,body.busy .opt{opacity:.55;pointer-events:none}
header{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
header h1{font:400 26px/1 var(--font-display);letter-spacing:.04em;margin:0;color:var(--gold)}
header h1 small{display:block;font:400 12px/1.4 var(--font-body);letter-spacing:0;color:var(--mute);margin-top:4px;text-transform:none}
.stat{display:flex;align-items:center;gap:6px}.stat b{color:var(--mute);font:700 11px/1 var(--font-label);text-transform:uppercase;letter-spacing:.08em}
.stat .v{font:400 17px/1 var(--font-hud);letter-spacing:.04em}
.bar{display:flex;gap:2px}.bar i{display:block;width:9px;height:12px;background:#2a2a3a;border-radius:2px}#heat i.on{background:#e06a3a}#heat i.on.hot{background:var(--red)}
main{display:grid;grid-template-columns:minmax(0,960px) minmax(280px,1fr);gap:12px;padding:12px 16px;max-width:1500px;margin:0 auto}
#scene{line-height:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#000;aspect-ratio:960/336}
#scene canvas{width:100%!important;height:auto!important;image-rendering:pixelated;display:block}
#side{display:flex;flex-direction:column;gap:8px;max-height:336px}
#objective{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 12px}#objective b{display:block;color:var(--gold);font:400 16px/1.2 var(--font-title)}#objective p{margin:4px 0 0;color:#c8c8d8;font-size:13px}
#dialogue{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;flex:1;overflow-y:auto;font-size:13px;min-height:60px}
#dialogue .line{margin:0 0 7px;padding-left:4px;border-left:2px solid transparent}#dialogue .line b{font-weight:700;margin-right:5px}
#dialogue .line.sys{color:var(--mute)}#dialogue .line.enemy{border-left-color:var(--red)}#dialogue .line.roll{border-left-color:var(--gold)}
.lower{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr) minmax(280px,1fr);gap:12px;padding:0 16px 24px;max-width:1500px;margin:0 auto}
section.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
section.panel h2{margin:0 0 8px;font:700 12px/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between}section.panel h2 small{font:400 12px/1.2 var(--font-body);text-transform:none;letter-spacing:0}section.panel h2 small{font-weight:400;letter-spacing:0;text-transform:none}
section.panel h3{margin:12px 0 6px;font:700 11px/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.act{display:block;width:100%;text-align:left;background:var(--panel2);color:var(--ink);border:1px solid #33334a;border-left:4px solid #666;border-radius:6px;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.act:hover{border-color:#55557a}.act.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,74,.3)}.act.no{opacity:.6;cursor:help}.act.pay{border-left-color:#d0a060}.act.sure{border-left-color:var(--green)}.act.hard{border-left-color:var(--red)}
.act .nm{font:400 15px/1.2 var(--font-title)}.act .meta{font:400 12px/1 var(--font-hud);color:var(--gold);margin-left:6px;letter-spacing:.04em}.act .why{display:block;font-size:12px;color:var(--mute)}
.hint{color:var(--mute);font-size:13px;margin:4px 0}
#inspect{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}#inspect.empty{display:none}#inspect h3{margin:0 0 6px;font:400 16px/1.2 var(--font-title);text-transform:none;letter-spacing:0;color:var(--ink)}
.preview{margin:0 0 6px;padding-left:18px;font-size:13px}.preview li{margin-bottom:2px}
.row{display:flex;gap:8px;flex-wrap:wrap}
button{font:400 14px/1.2 var(--font-title);background:#26263a;color:var(--ink);border:1px solid #3a3a55;border-radius:5px;padding:7px 12px;cursor:pointer}button:hover:not(:disabled){background:#30304a}button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:#3a5a2a;border-color:#5cd65c}button.primary:hover:not(:disabled){background:#48702f}
.msg{background:#2a2435;border:1px solid #4a3a5a;border-radius:6px;padding:8px 10px;margin-bottom:8px}.msg .from{font:400 15px/1.2 var(--font-title);color:var(--purple)}.msg p{margin:4px 0 8px;font-size:13px}
.opt{display:block;width:100%;text-align:left;margin-bottom:4px;background:#1c1c29;border:1px solid #3a3a55;border-radius:5px;padding:6px 8px;cursor:pointer;font-size:13px}.opt:hover:not(:disabled){border-color:var(--gold)}.opt small{display:block;color:var(--mute);font-size:12px}
#arrangements,#people,#enemy{list-style:none;margin:0;padding:0;font-size:13px}#arrangements li,#people li{padding:5px 0;border-bottom:1px solid var(--line)}#arrangements li b{color:var(--gold)}#arrangements li .st{color:#c8c8d8}#arrangements li.done b{color:var(--green)}#arrangements li .pend{color:#ffb060;font-size:12px}
#people li.turned{color:var(--red)}#people li.trust{color:var(--green)}#people li .terms{display:block;color:var(--mute);font-size:12px}
#enemy li{padding:4px 0;border-bottom:1px solid var(--line);color:#e0a0a0;font-size:12px}
.card{display:block;background:var(--panel2);border:1px solid #33334a;border-top:4px solid var(--blue);border-radius:6px;padding:8px 10px;margin-bottom:6px}.card .cn{font:400 15px/1.2 var(--font-title)}.card .tag{font:400 12px/1 var(--font-hud);color:var(--gold);margin-left:6px;letter-spacing:.04em}.card .from{font-size:12px;color:var(--mute)}.card p{margin:4px 0 0;font-size:12px;color:#c8c8d8}
#over{position:fixed;inset:auto 0 24px 0;margin:auto;width:min(620px,92vw);background:#15151f;border:2px solid var(--gold);border-radius:8px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.6);z-index:10}#over.lose{border-color:var(--red)}#over h2{margin:0 0 6px;font:400 28px/1 var(--font-display);color:var(--gold)}#over.lose h2{color:var(--red)}#over p{margin:0 0 12px}
#start[hidden]{display:none}
#start{position:fixed;inset:0;background:rgba(8,8,14,.92);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}
.startbox{max-width:760px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px 24px}.startbox h2{margin:0 0 10px;font:400 34px/1 var(--font-display);letter-spacing:.04em;color:var(--gold)}
#start-chars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.who{text-align:left;background:var(--panel2);border:1px solid #33334a;border-radius:6px;padding:12px;cursor:pointer}.who:hover{border-color:var(--gold)}.who b{display:block;font:400 18px/1.2 var(--font-title)}.who span{display:block;color:var(--mute);font-size:12px;margin-bottom:6px}.who p{margin:0;font-size:13px}
#helpbox{font-size:13px;color:#c8c8d8;margin-top:10px}#helpbox p{margin:4px 0}
.small{font-size:12px;color:var(--mute)}
@media (max-width:1100px){main,.lower{grid-template-columns:1fr}#side{max-height:none}#dialogue{max-height:220px}#start-chars{grid-template-columns:1fr}}

/* the coach (guided first run) */
#coach{background:#1d1a0f;border:1px solid var(--gold);border-radius:6px;padding:10px 12px;font-size:13px;display:flex;flex-direction:column;min-height:0;max-height:240px}#coach-body{overflow-y:auto;min-height:0}#coach[hidden]{display:none}
#coach .step{font:400 11px/1 var(--font-label);letter-spacing:.08em;color:var(--gold)}#coach h3{margin:4px 0 6px;font:400 17px/1.2 var(--font-title);color:var(--ink)}
#coach p{margin:0 0 7px}#coach p:last-child{margin-bottom:0}#coach .row{margin:0 0 8px;align-items:center;flex-wrap:wrap}#coach-do{color:#ffb060}#coach-leave{margin-left:auto;font-size:12px;padding:5px 9px}
.tut-hi{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;animation:tutpulse 1.6s ease-in-out infinite}@keyframes tutpulse{0%,100%{outline-color:var(--gold)}50%{outline-color:rgba(255,210,74,.25)}}
.act.off,.opt.off{opacity:.3;pointer-events:none}
#start-demo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 6px;padding:12px;background:#1d1a0f;border:1px solid var(--gold);border-radius:6px}#start-demo .small{flex:1;min-width:220px}
#start-free{margin:14px 0 0;font:400 15px/1.2 var(--font-title);color:var(--mute)}

/* the title screen: a still from a later level, the title, one green button */
#title{position:fixed;inset:0;z-index:30;background:#0a0a12 center/cover no-repeat;image-rendering:pixelated;display:flex;align-items:center;justify-content:center;text-align:center}#title[hidden]{display:none}
.title-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,18,.15) 0%,rgba(10,10,18,.35) 45%,rgba(10,10,18,.9) 100%)}
.title-box{position:relative;padding:24px;max-width:820px}
.title-kicker{font:400 13px/1 var(--font-label);letter-spacing:.14em;color:#ffb060;text-transform:uppercase;margin-bottom:14px}
.title-word{margin:0;font:400 clamp(72px,14vw,168px)/.9 var(--font-display);color:var(--gold);letter-spacing:.02em;text-shadow:0 4px 0 #6a4a10,0 10px 40px rgba(0,0,0,.8)}
.title-line{margin:18px auto 28px;max-width:520px;font-size:17px;color:#e8e6f0;text-shadow:0 2px 8px #000}
#title-start{font:400 26px/1 var(--font-title);letter-spacing:.12em;text-transform:uppercase;background:#2fa84a;color:#06120a;border:3px solid #7cf07c;border-radius:8px;padding:16px 64px;box-shadow:0 0 0 4px rgba(124,240,124,.18),0 10px 30px rgba(0,0,0,.6);animation:startpulse 1.4s ease-in-out infinite}#title-start:hover{background:#3fc45c}
@keyframes startpulse{0%,100%{box-shadow:0 0 0 4px rgba(124,240,124,.18),0 10px 30px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 10px rgba(124,240,124,.05),0 10px 30px rgba(0,0,0,.6)}}
.title-foot{margin:26px 0 0;font-size:12px;color:var(--mute)}

/* Readability: display faces stay in titles; all reading uses GC North Sans.
   Arial/sans-serif supplies macrons missing from the licensed GC kit. */
html,body{font-size:17px;line-height:1.6}
b,strong{font-family:var(--font-strong);font-weight:400}
header{padding:16px 20px;gap:14px 24px}
header h1{font-size:30px}header h1 small{font-size:14px;line-height:1.5}
.stat{gap:9px}.stat b{font:400 13px/1.4 var(--font-label);letter-spacing:.02em}
.stat .v{font:400 18px/1.4 var(--font-hud);letter-spacing:0;font-variant-numeric:tabular-nums}
main,.lower{max-width:1600px;gap:18px;padding-inline:20px}
main{grid-template-columns:minmax(0,1.8fr) minmax(340px,1fr)}
#world{min-width:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
#scene{border:0;border-radius:0}
#route-map{padding:14px 12px 12px;border-bottom:1px solid var(--line);background:#20202e}
#route-map ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
#route-map li{border-top:3px solid #56566b;padding-top:8px;color:var(--mute);font:400 14px/1.4 var(--font-body);overflow-wrap:anywhere}
#route-map li.current{border-color:var(--gold);color:var(--ink)}#route-map li.passed{border-color:#8add8a}
#route-map li.watched{box-shadow:inset 0 2px #ff9696}
#route-map .route-label{display:block}
#route-map .route-marker{display:block;margin-top:4px;font:400 12px/1.4 var(--font-body);color:var(--gold)}
#route-map .route-marker.enemy{color:#ffacac}
#side{max-height:480px;min-width:0}
#objective{padding:14px 16px}#objective b{font-size:20px;line-height:1.4}#objective p{font-size:16px;line-height:1.6;margin-top:6px}
#dialogue{font-size:16px;line-height:1.65;padding:14px 16px}#dialogue .line{margin-bottom:12px;padding-left:8px}
.lower{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
section.panel{padding:16px;min-width:0}
section.panel h2,section.panel h3{font:400 15px/1.5 var(--font-label);letter-spacing:.03em;color:#dbd9e8}
section.panel h2{margin-bottom:14px}section.panel h3{margin:20px 0 10px}
.act{padding:12px 14px;margin-bottom:10px}
.act .nm,.card .cn,.msg .from{font:400 17px/1.5 var(--font-title)}
.act .meta{display:block;margin:5px 0 0;font:400 14px/1.4 var(--font-hud);letter-spacing:0}
.act .why,.hint,.preview,.msg p,.opt,#arrangements,#people,#enemy,#helpbox{font-size:16px;line-height:1.6}
.act.no{opacity:1;color:#cfcedc}.act.no .nm{color:#cfcedc}.act .why{color:#bebdce}
button{font:400 16px/1.45 var(--font-body);padding:10px 14px;min-height:44px}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.opt{padding:12px}.opt small,.small,.card .from,.card p,#people li .terms,#arrangements li .pend,#enemy li{font-size:14px;line-height:1.6}
#arrangements li,#people li{padding:10px 0}#people li.trust{color:#a2e49b}#people li.turned{color:#ffacac}
#arrangements li .st,.card p,#helpbox,#objective p{color:#dedce8}
.card{padding:12px 14px;margin-bottom:10px}.card .tag{font:400 13px/1.5 var(--font-hud);letter-spacing:0}
#coach{font-size:16px;line-height:1.6;max-height:340px;padding:14px 16px}
#coach .step{font:400 13px/1.4 var(--font-body);letter-spacing:0}#coach h3{font-size:19px;line-height:1.4}
#coach-leave{font-size:14px;min-height:44px}#coach .row{flex-shrink:0}#coach p{margin-bottom:10px}
.startbox{max-width:860px;max-height:calc(100dvh - 40px);overflow-y:auto;padding:28px}
.startbox p{line-height:1.65}.who b{font-size:20px;line-height:1.4}.who span,.who p{font-size:15px;line-height:1.6}
#start-free{font-size:17px;line-height:1.4}
.title-line{font-size:20px;line-height:1.6}.title-kicker{font-size:15px;line-height:1.4}.title-foot{font-size:14px}
#over{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px}
#over p{font-size:17px;line-height:1.6}
@media(max-width:1100px){main,.lower{grid-template-columns:1fr}#side{max-height:none}#dialogue{max-height:300px}#coach{max-height:none}#start-chars{grid-template-columns:1fr}}
@media(max-width:600px){main,.lower{padding-inline:12px;gap:14px}header{padding:14px 12px}#route-map ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.startbox{padding:20px}#start{padding:12px}#scene{aspect-ratio:960/336}.title-word{font-size:clamp(54px,16vw,100px)}#over{bottom:12px}}
@media(prefers-reduced-motion:reduce){.tut-hi,#title-start{animation:none}}

/* Owner font mapping: GC North Sans headings; Little Grandad only for the title. */
#objective b,#coach h3,#inspect h3,#start-free{font-family:var(--font-label)}
#over h2{font-family:var(--font-label);line-height:1.25}

/* Overbit is limited to compact numeric displays, never headings or reading text. */
.stat .v,.act .meta{font-family:var(--font-mono)}
section.panel h2,section.panel h3{text-transform:none;letter-spacing:0}