/* Site frame uses the same arcade tokens and cabinet artwork as the homepage. */
:root{--night:#07060b;--gold:#ffd23f;--muted:#b9b0a3}
html,body{background:#07060b;color:#f6efe4;font-family:var(--body)}
main{max-width:1480px;margin:auto;padding:0 24px 32px}
.topbar{position:relative;padding:8px 24px;background:#07060bf2;border-bottom:1px solid #ffffff1f}
.topbar .col{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1432px;margin:auto}
.site-nav[hidden]{display:none!important}.site-nav [aria-current=page]{color:#37e28a}
.city-page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 18px}
.city-page-intro h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,3vw,32px);line-height:1.15;margin:6px 0 0}
.city-page-intro .kicker,.site-section .kicker{font:13px var(--mono);letter-spacing:.16em;color:#19e6ff}
.city-page-intro nav{display:flex;gap:20px;flex-wrap:wrap}.city-page-intro nav a{font-size:15px;min-height:44px;display:flex;align-items:center;color:#d8d0e0}
.game-bezel{background:linear-gradient(160deg,#282039,#120f1a);border:1px solid #6c537c;border-radius:18px;padding:10px;box-shadow:0 20px 50px #0007,inset 0 1px 0 #ffffff20}
.bezel-label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:2px solid #ffd23f;border-bottom:2px solid #ffd23f;border-radius:10px 10px 0 0;background:linear-gradient(#223a8a,#101d4a);font-family:var(--display);font-size:18px;color:#fff4db}
.bezel-label span:last-child{font:12px var(--mono);letter-spacing:.14em;color:#ffd23f}
#builder{padding:0 12px 8px;font-family:Inter,system-ui,sans-serif;background:#0d191e;border-radius:0 0 10px 10px;--gold:#edc66f;--muted:#a9c0b9}
#builder h1,#builder h2,#builder h3,.city-dialog h2,.city-dialog h3{font-family:inherit;font-weight:750;line-height:1.2}
#builder p{margin-top:0}.city-dialog{font-family:Inter,system-ui,sans-serif;--muted:#a9c0b9;--gold:#edc66f}
.city-dialog h3{line-height:1.3}.city-dialog p{margin:12px 0}
.welcome{font-family:var(--body)}.welcome h2{font-family:var(--display);line-height:1.2}.welcome p{margin:16px 0}
.site-section{padding:42px 0 8px;margin:0;max-width:none;background:none;border:0;font:16px/1.5 var(--body)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.site-section h2{font:400 clamp(26px,3.2vw,42px)/1.15 var(--display);letter-spacing:0;margin:8px 0 0}
.site-section h2 em{font-style:normal;color:#37e28a;text-shadow:0 0 24px #37e28a22}
.section-title>p{max-width:43ch;color:#c5bdcc;font-size:17px}
.city-engine{position:relative;isolation:isolate}
.city-engine::before{content:"";position:absolute;inset:10px -24px 0;z-index:-1;background:radial-gradient(ellipse at 40% 40%,#38204666,transparent 65%),linear-gradient(#07060bd9,#07060bf5),url('/art/web/rally-1600.webp') center/cover}
.engine-status{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:12px 16px;background:#181322;border:1px solid #4d405c;border-radius:10px}
.engine-status p{font-size:15px;color:#b5f2ce}
.cab-art{position:relative;display:block;width:100%;padding:0;border:0;background:none}
.cab-art .screenwrap{position:relative;display:block;width:100%;line-height:0}
.cab-art .screenwrap>img{position:relative;display:block;width:100%;height:auto;margin:0}
.cab-art .cab-screen{position:absolute;left:0;top:0;width:480px;height:480px;transform-origin:0 0;z-index:1;pointer-events:none;isolation:isolate;overflow:hidden;border-radius:26px 20px 22px 24px;background:#10151d}
.cab-art .cab-screen>*{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;max-height:none;margin:0;padding:0;transform:none}
.cab-art .screenvid{display:block;object-fit:cover;background:#10151d;opacity:1}
.machine h3{font-family:var(--display);font-weight:400;letter-spacing:0;margin:0}
.machine-outcome{display:flex;gap:8px;align-items:center;padding:10px 0;border-top:1px solid #ffffff20;margin-top:3px}
.machine-outcome img{width:52px;height:50px;object-fit:contain;flex:none}
.machine-outcome div{display:grid;gap:4px}.machine-outcome .resource-name{font:600 12px/1.3 var(--body);color:#37e28a}.machine-outcome strong{font:600 13px/1.3 var(--body);color:#eee5d9}
.machine.recommended .machine-link{border-color:#37e28a;box-shadow:0 0 22px #37e28a15}
.machine.recommended .play-label{color:#37e28a}
.growth-path{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:0;margin:0}
.growth-path li{position:relative;min-width:0;background:linear-gradient(#1d172a,#110d18);border:1px solid #51405f;border-radius:14px;overflow:hidden;padding:0 18px 22px}
.growth-path li:not(:last-child)::after{content:"→";position:absolute;right:6px;top:250px;color:#19e6ff;font:28px var(--mono)}
.growth-picture{position:relative;display:flex;align-items:center;justify-content:center;height:210px;margin:0 -18px 18px;background:radial-gradient(ellipse at bottom,#39675255,transparent 80%),#12111a;overflow:hidden;border-bottom:1px solid #51405f}
.growth-picture>img{height:165px;width:90%;object-fit:contain;margin-bottom:25px}
.play-picture{background:radial-gradient(ellipse at bottom,#662c6355,transparent),#12111a}.play-picture>img{height:200px;width:auto;margin-bottom:0}
.flow-chip{position:absolute;left:0;right:0;bottom:0;padding:8px;background:#12101dea;text-align:center;font:13px var(--mono);color:#b7ecd0;z-index:2}
.step-number{display:inline-block;color:#ffd23f;font:18px var(--mono);margin-bottom:10px}
.growth-path h3{font:400 18px/1.2 var(--display);margin:0 0 12px;color:#fff0d4}
.growth-path p{font:16px/1.5 var(--body);color:#c5bdcc}
.life-picture canvas{position:absolute;inset:0;width:100%;height:100%}
.expand-picture{gap:8px;flex-wrap:nowrap;padding:16px 8px 38px;background:radial-gradient(ellipse at bottom,#28725366,transparent),#12111a}
.mini-block{width:43%;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0;background:#344b3755;border:1px solid #80ba9950;border-radius:10px;padding:8px 0}
.mini-block img{width:100%;height:95px;object-fit:contain}.block-bridge{color:#19e6ff;font:22px var(--mono)}
.growth-note{display:flex;align-items:center;gap:18px;margin:22px 0 12px;padding:18px;border:1px solid #37e28a50;border-radius:12px;background:#122521}
.growth-note strong{color:#b5f2ce;white-space:nowrap}.growth-note span{color:#cad6cd;font-size:15px}.growth-note a{font-size:15px;flex-shrink:0;color:#ffd23f}
.fiction-note{font-size:14px;color:#b9b0a3;margin-top:18px}
.city-site-footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #ffffff20;padding:26px 0;margin-top:36px;font:14px var(--body);color:#b9b0a3;background:none}
.city-site-footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}.city-site-footer a{color:#e7d2a2}
@media(max-width:1000px){.growth-path{grid-template-columns:repeat(2,minmax(0,1fr))}.section-title{align-items:start;flex-direction:column;gap:14px}.section-title>p{max-width:60ch}.growth-note{flex-wrap:wrap}.city-site-footer nav{margin-left:0}}
@media(max-width:760px){main{padding:0 10px 24px}.topbar{padding:6px 14px}.city-page-intro{padding:16px 4px 12px;align-items:start;flex-direction:column;gap:8px}.city-page-intro .kicker{font-size:11px}.city-page-intro nav{gap:18px}.city-page-intro nav a{font-size:14px;min-height:36px}.game-bezel{padding:5px;border-radius:12px}.bezel-label{padding:10px;font-size:14px}.bezel-label span:last-child{font-size:10px;letter-spacing:.05em}#builder{padding:0 7px 6px}.site-section{padding:30px 4px 0}.site-section h2{font-size:25px}.section-title>p{font-size:16px}.engine-status{flex-wrap:wrap;gap:10px;padding:12px}.engine-status .preview-toggle{font:13px var(--body)}.city-engine::before{inset:0 -10px}.growth-path{gap:12px}.growth-path li{padding:0 12px 18px}.growth-picture{height:160px;margin:0 -12px 14px}.growth-picture>img{height:125px}.play-picture>img{height:160px}.flow-chip{font-size:11px}.growth-path h3{font-size:16px;line-height:1.3}.growth-path p{font-size:15px}.growth-path li::after{display:none}.mini-block{padding:4px 0}.mini-block img{height:60px}.growth-note{padding:16px;gap:10px}.machine-outcome img{width:40px;height:42px}.machine-outcome strong{font-size:12px}.city-site-footer{padding:24px 4px;gap:12px}.city-site-footer nav{gap:12px 20px}}
@media(max-width:360px){.growth-path{grid-template-columns:1fr}.growth-picture{height:200px}.growth-picture>img{height:165px}.machines{grid-template-columns:1fr}}

@media(min-width:761px){.growth-path li:not(:last-child)::after{top:85px;right:8px;padding:2px 7px;border-radius:50%;background:#0d0b14d9;line-height:1.2}}