/* FORGE Robotics — a playable home page, not an inspector covering a scene. */
:root { --card:rgba(17,39,48,.91); --r:17px; --teal:#92dfc2; --muted:#bfd0cf; --faint:#9db6b5; }
header { padding:24px 32px; background:linear-gradient(#10252d70,transparent); }
header .brand { pointer-events:auto; }
header .brand b { letter-spacing:.18em; }
header .brand span { border-color:#b3dcc44d; color:#c4e7d3; }
.site-nav { display:flex; align-items:center; gap:24px; pointer-events:auto; }
.site-nav button { background:none; border:0; color:#f2f0db; font-size:12px; cursor:pointer; padding:8px 0; }
.site-nav button:hover { color:#b1f3d4; }
.site-nav .byline { font-size:11px; margin-left:18px; color:#c6d6cf; }
.site-nav .byline strong { display:block; margin-top:4px; color:#fff6df; }
#landing { position:fixed; top:50%; left:5.5vw; transform:translateY(-50%); width:min(440px,37vw); z-index:9; color:#f7f0d9; text-shadow:0 2px 18px #172a2f33; }
.landing-kicker { font:10px var(--mono); letter-spacing:.18em; color:#a8d4bd; display:flex; align-items:center; gap:10px; }
.landing-kicker>span { width:6px; height:6px; background:#c4f3b7; border-radius:50%; box-shadow:0 0 18px #b7f3ad88; }
#landing h1 { font-size:clamp(42px,5.4vw,84px); line-height:1.03; letter-spacing:-.065em; font-weight:600; margin:24px 0; }
#landing h1 em { font-style:normal; color:#d6c190; }
#landing p { font-size:14px; max-width:350px; line-height:1.8; color:#c3d5cc; margin:0 0 25px; }
#landing p strong { color:#f5e9cd; font-weight:500; }
.landing-actions { display:flex; gap:10px; }
.landing-actions button { padding:14px 20px; border-radius:10px; border:1px solid #bacab74d; color:#e2e9d7; background:#132e36aa; font:600 12px var(--font); cursor:pointer; transition:transform .2s,background .2s; }
.landing-actions button:hover { transform:translateY(-2px); }
.landing-actions #enter-world { background:#e8d8b0; border-color:#e8d8b0; color:#273e3a; }
#enter-world span { padding-left:18px; }
#tour-button { font:12px var(--font); color:#accbbf; background:none; border:0; padding:17px 0; cursor:pointer; }
#tour-button:hover { color:#ecedda; }
#tour-button span { margin-left:14px; }
.landing-facts { display:flex; gap:28px; margin-top:20px; padding-top:20px; border-top:1px solid #abc7b326; width:fit-content; }
.landing-facts span { font-size:10px; color:#a3bfb1; }
.landing-facts b { display:block; color:#e0e8cf; font-size:21px; font-weight:500; margin-bottom:5px; }
body[data-phase=landing]::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:2; background:linear-gradient(90deg,#102b32f5 0%,#122e37e6 24%,#17374066 43%,transparent 65%),linear-gradient(0deg,#112b34aa,transparent 25%); }
body[data-phase=landing] #bar,body[data-phase=landing] #hud,body[data-phase=landing] #mini-map-wrap,body[data-phase=landing] #drive-status,body[data-phase=landing] #drive-pad,body[data-phase=landing] #district-heading,body[data-phase=landing] #course-controls,body[data-phase=landing] #service-controls { display:none!important; }
#world-panel { top:78px; left:auto; right:28px; width:280px; max-height:calc(100vh - 110px); display:none; z-index:30; }
body[data-menu=open] #world-panel { display:block; }
#world-panel h1 { font-size:24px; margin:12px 0 6px; }
#world-panel p { font-size:12px; }
.worlds button { padding:9px; }
.world-data b { font-size:11px; }
#world-panel #talk { background:#b2dec5; }
#district-heading { position:fixed; top:99px; left:30px; z-index:9; max-width:300px; pointer-events:none; padding:14px 18px; background:#18323ba6; backdrop-filter:blur(12px); border:1px solid #b4cdb624; border-radius:13px; }
#district-heading>span { font:9px var(--mono); letter-spacing:.16em; color:#b4cdbd; }
#district-heading h2 { margin:7px 0 6px; color:#f3ecd3; font-size:22px; font-weight:550; letter-spacing:-.03em; }
#district-heading small { font-size:10px; color:#b4cdbd; }
#bar { bottom:22px; background:#132a33ed; box-shadow:0 8px 30px #10272d44; border-color:#a9c7b32b; gap:2px; }
#bar .pill { font-size:11px; padding:10px 12px; }
#bar .pill.on { background:#e9dfbd; color:#223d3e; }
#bar .pill.mod.on { background:#dfb56e; }
#bar .elbow { font-size:11px; }
#bar input[type=range] { width:70px; }
#hud { bottom:84px; font-size:10px; padding:9px 14px; background:#14323bc7; border-color:#a7c4b321; }
#credit { bottom:24px; left:28px; right:auto; max-width:230px; font-size:9px; padding:0; background:none; box-shadow:none; color:#bed0c2; }
#credit a { color:#e2e7cf; }
body[data-phase=play] #credit { display:none; }
#drive-status { position:fixed; left:28px; bottom:28px; z-index:12; display:flex; gap:9px; align-items:center; color:#eceddb; }
#drive-status>b { font:28px var(--mono); letter-spacing:-.06em; }
#drive-status>span { font:9px var(--font); line-height:1.5; color:#b1c9bd; }
#talk-quick { margin-left:14px; border:1px solid #a9c7b33b; border-radius:9px; padding:10px 12px; background:#16303be0; font:11px var(--font); color:#e0ebd7; cursor:pointer; }
#talk-quick kbd { margin-left:8px; color:#96b8aa; font-size:10px; }
#drive-pad { left:30px; bottom:88px; }
#drive-pad button { background:#17343dcf; width:36px; height:36px; font-size:15px; border-color:#9ebda634; }
#mini-map-wrap { position:fixed; right:28px; bottom:24px; width:178px; z-index:10; border-radius:12px; overflow:hidden; background:#162f38ec; border-color:#9ebda634; box-shadow:none; }
#mini-map-wrap>button { display:flex; width:100%; justify-content:space-between; align-items:center; padding:10px; background:none; border:0; cursor:pointer; font:8px var(--mono); letter-spacing:.04em; color:#c8dfce; }
#mini-map { display:block; width:100%; height:auto; opacity:.9; }
#mini-map-wrap>small { display:block; color:#a7c3b5; font-size:8px; padding:8px 10px; }
#service-controls,#course-controls { top:98px; right:28px; width:262px; border-color:#a7c4b333; box-shadow:0 12px 36px #10263033; }
#service-controls h2,#course-controls h2 { font-size:22px; color:#f2e6c9; }
#service-controls p,#course-controls p { font-size:11px; }
#service-controls .service-btn { font-size:11px; }
#lab { right:28px; top:98px; background:#152d36f2; }
#card { right:28px; top:98px; background:#132b35d9; border-color:#9ec4b34d; }
.site-nav a#get-forge { color:#0f2723; background:#e8d8a8; border-radius:9px; padding:9px 14px; font:600 12px var(--font); text-decoration:none; }
.site-nav a#get-forge:hover { background:#f2e6c4; }
#install-button { border:1px solid #a9c7b33b; border-radius:9px; padding:9px 12px; background:none; color:#d7e6d9; font:500 11px var(--font); cursor:pointer; }
#forge-cta { display:inline-flex; gap:8px; align-items:center; margin-top:22px; font-size:11px; color:#a9c7b6; text-decoration:none; }
#forge-cta b { color:#eadfc0; font-weight:600; }
#forge-cta span { color:#d8c793; }
#forge-cta:hover span { text-decoration:underline; }
#about-cta { display:block; margin:18px 0 6px; padding:15px 18px; border-radius:12px; background:#e8d8a8; color:#1c3a34; font:600 12px var(--font); text-decoration:none; }
#about-cta span { float:right; }
#caption { bottom:149px; background:#19333cef; border-color:#b9d2b54d; font-size:13px; max-width:420px; }
#npc-bubble { position:fixed; z-index:8; transform:translate(-50%,-100%); background:#f0e4c9; color:#25483f; padding:9px 14px; border-radius:14px 14px 14px 3px; font-size:12px; box-shadow:0 5px 24px #152c3444; pointer-events:none; white-space:nowrap; }
#dock-action { bottom:145px; font-size:12px; background:#e8d7ab; color:#1c3b36; }
#toast { bottom:198px; font-size:12px; background:#15303bee; color:#e4e9d3; }
#about-project { color:#e5e9d8; width:min(570px,90vw); max-height:85vh; overflow:auto; border:1px solid #7d9c8d66; border-radius:24px; padding:36px; background:#17323b; box-shadow:0 30px 140px #07181999; }
#about-project::backdrop { background:#09232bbd; backdrop-filter:blur(9px); }
#about-project h2 { font-size:34px; line-height:1.12; letter-spacing:-.045em; font-weight:550; margin:19px 0; }
#about-project p { color:#b7cfc3; font-size:13px; line-height:1.75; }
#about-project .disclaimer { font-size:11px; color:#9bb8aa; }
#about-project .x { float:right; border:0; background:none; color:#e2e6d5; font-size:24px; cursor:pointer; }
.about-facts { display:flex; gap:40px; border-block:1px solid #9dbb9e33; padding:18px 0; margin:22px 0; }
.about-facts b { font-weight:500; font-size:24px; }
.about-facts small { display:block; font-size:10px; color:#9abbaa; margin-top:6px; }
body[data-menu=open] #service-controls,body[data-menu=open] #course-controls { visibility:hidden; }
@media(max-width:1250px) { #bar .elbow,#bar .sep:last-of-type { display:none; } #mini-map-wrap { width:140px; right:16px; } #bar .pill { padding:10px 9px; font-size:10px; } .site-nav { gap:18px; } #drive-status>span { display:none; } #talk-quick { margin-left:0; } }
@media(max-width:1050px) { #landing { width:39vw; left:4vw; } #landing h1 { font-size:52px; } #landing p { font-size:12px; } .site-nav .byline { display:none; } #bar { bottom:16px; } #drive-status { bottom:78px; } #drive-pad { bottom:132px; } #mini-map-wrap { bottom:82px; width:120px; } #hud { bottom:72px; max-width:60vw; } header { padding:20px; } #service-controls,#course-controls,#card,#lab { width:240px; right:16px; } }
@media(max-height:750px) { #landing h1 { font-size:52px; margin:17px 0; } .landing-facts { margin-top:6px; padding-top:14px; } #landing p { margin-bottom:16px; font-size:12px; } #district-heading { top:77px; } #service-controls,#course-controls { top:77px; max-height:calc(100vh - 250px); } }
@media(prefers-reduced-motion:reduce) { .landing-actions button:hover { transform:none; } }