:root{color-scheme:dark;--bg:#10211f;--panel:#1a2c29;--line:#35413a;--ink:#efeadd;--muted:#9ea99d;--gold:#edb765;--mint:#8ed3bb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:8px;min-height:42px;padding:9px 14px}button:hover:not(:disabled){background:#ffffff0a;border-color:#95ad98}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.topbar{height:80px;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff0c}.brand{font-size:26px;font-weight:850;letter-spacing:-1.5px}.brand>span{color:var(--mint)}.brand small{font-size:10px;letter-spacing:2px;font-weight:500;margin-left:24px;color:var(--muted)}.top-actions{display:flex;gap:10px}.top-actions button:last-child{width:42px;border-radius:50%;font-weight:700}main{max-width:1370px;padding:40px 40px 0;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.6px;color:var(--gold);margin:0 0 12px}.eyebrow>span,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:8px}h1{font-size:clamp(40px,5.3vw,72px);font-weight:800;letter-spacing:-4px;line-height:1.08;margin:0}h1>span:not(.title-dot){font-weight:350}.title-dot{color:var(--gold)}.intro{color:var(--muted);font-size:14px;margin:13px 0 0}.rank{display:flex;gap:16px;align-items:center}.rank-symbol{font-size:35px;color:var(--gold);border:1px solid #edb76545;border-radius:50%;width:68px;height:68px;display:grid;place-items:center}.rank>div{display:grid;gap:6px}.rank small{font-size:9px;letter-spacing:2px;color:var(--muted)}.rank strong{font-size:15px}.rank div>span{font-size:11px;color:var(--muted)}.resource-bar{display:grid;grid-template-columns:repeat(4,1fr);padding:19px 10px;background:#1a2c29;border:1px solid var(--line);border-radius:12px;margin-bottom:20px}.resource-bar>div{display:flex;align-items:center;gap:14px;padding-left:24px;border-right:1px solid var(--line)}.resource-bar>div:last-child{border:0}.resource-bar small{font-size:11px;color:var(--muted);display:block;margin-bottom:3px}.resource-bar strong{font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.resource-icon{font-size:30px;width:35px;text-align:center}.credits{color:var(--gold)}.scrap{color:var(--mint)}.parts{color:#e4af6b}.chips{color:#b2a0de}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.workshop{border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0;background:#203430}.workshop-top,.workshop-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#1b2d29}.workshop-top strong{font-size:10px;letter-spacing:1.8px}.workshop-top button{font-size:11px;min-height:34px;padding:6px 10px}.workshop-sub{display:block;font-size:10px;color:var(--muted);margin:5px 0 0 15px}.scene{position:relative;background:radial-gradient(ellipse at 50% 45%,#3a5145 0%,#263c34 55%,#20332e 100%);overflow:hidden}.scene svg{width:100%;height:auto;display:block;position:relative;z-index:1}.scene-label{position:absolute;top:25px;left:24px;color:#bcc6a636;letter-spacing:3px;font-size:12px;line-height:1.6;font-weight:900}.scene-coordinate{position:absolute;bottom:22px;left:24px;font-size:8px;letter-spacing:2px;color:#9eb09880}.scene-key{position:absolute;right:20px;bottom:22px;font-size:9px;color:#bac3ac}.scene-key span{display:inline-block;width:5px;height:5px;background:var(--mint);border-radius:50%;margin-right:5px}.workshop-bottom{font-size:10px;gap:8px}.workshop-bottom>div{display:flex;gap:9px;align-items:center}.energy-symbol{color:var(--gold);font-size:20px}.muted,#save-status{color:var(--muted)}.sidebar{display:flex;flex-direction:column;gap:14px}.order-panel,.inspector{padding:21px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.order-panel{border-top:2px solid var(--gold)}.panel-label{display:flex;justify-content:space-between;gap:8px;font-size:9px;font-weight:700;letter-spacing:1.4px;color:var(--muted)}.order-panel .panel-label{color:var(--gold)}h2{font-size:19px;letter-spacing:-.5px;margin:15px 0 8px;line-height:1.2}.sidebar p{font-size:12px;color:var(--muted);line-height:1.65;margin:0 0 14px}.need{margin:13px 0;font-size:11px}.need>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px}.track{height:4px;background:#ffffff0a;border-radius:4px;overflow:hidden}.track>span{display:block;height:100%;background:var(--mint);transition:width .3s}.primary{background:var(--gold);color:#182723;border:0;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;font-size:12px;font-weight:750;min-height:46px;margin-top:20px}.primary:hover:not(:disabled){background:#f5c989}.primary:disabled{opacity:.6}.sidebar .tiny{font-size:10px;margin:10px 0 0}.inspector{flex:1}.inspector h2{font-size:17px}#selection-actions{display:flex;gap:7px;flex-wrap:wrap}#selection-actions button{font-size:10px;padding:7px 10px}.sell{display:flex;justify-content:space-between;font-size:11px;border:0;padding:5px 4px;min-height:30px;color:var(--muted)}.build-section{margin:25px 0 0}.build-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.build-heading h2{font-size:15px;letter-spacing:-.2px;margin:0}.build-heading>span{font-size:10px;color:var(--muted)}.build-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.build-card{text-align:left;padding:14px;position:relative;background:#192b27;display:grid;grid-template-columns:44px 1fr;column-gap:10px;min-height:102px;border-radius:10px}.build-card.active{border-color:var(--gold);background:#2c382b}.build-card svg{grid-row:1/4;width:44px;height:48px;align-self:center}.build-card strong{font-size:12px;margin:3px 0}.build-card small{font-size:9px;color:var(--muted);line-height:1.4}.build-card .price{font-size:11px;color:var(--gold);margin-top:7px}.game-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:9px;border-top:1px solid #ffffff10;margin-top:26px;padding:20px 0 28px;gap:14px}.game-footer>div{display:flex;gap:18px;align-items:center}.game-footer button{border:0;padding:0;min-height:32px;font-size:9px;color:var(--muted)}.tile{cursor:pointer;outline:none}.tile .tile-top{transition:fill .15s,stroke .15s}.tile:hover .tile-top,.tile:focus-visible .tile-top{stroke:var(--gold);stroke-width:2.5;fill:#617055}.tile.selected .tile-top{stroke:var(--gold);stroke-width:3}.tile.disconnected{opacity:.48}.machine-light{animation:glow 2.5s ease-in-out infinite}.is-paused .machine-light{animation:none;opacity:.3}@keyframes glow{50%{opacity:.35}}dialog{max-width:490px;width:calc(100% - 32px);background:#1b2e28;color:var(--ink);border:1px solid #55634b;border-radius:16px;padding:30px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#081512c9;backdrop-filter:blur(5px)}dialog h2{font-size:32px;letter-spacing:-1px;margin-top:14px}dialog p,dialog li{font-size:13px;line-height:1.7;color:#b9c4b6}dialog ol{padding-left:20px}dialog li{padding-left:5px;margin:14px 0}dialog li strong{color:var(--ink)}dialog .help-note{font-size:11px;padding-top:12px;border-top:1px solid var(--line)}.dialog-actions{display:flex;gap:10px;margin-top:20px}.danger{background:#693f35}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:var(--ink);color:#152923;padding:13px 20px;border-radius:10px;font-size:12px;box-shadow:0 6px 30px #0004;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:10;max-width:calc(100% - 32px);width:max-content}.toast.visible{opacity:1;transform:translate(-50%,0)}.noscript{position:fixed;inset:30% 20%;background:#20332e;padding:40px;z-index:20}.warning{color:var(--gold)!important}
@media(min-width:1500px){main{padding-top:48px}.heading{margin-bottom:38px}}
@media(max-width:1000px){main{padding:28px 22px 0}.game-layout{grid-template-columns:minmax(0,1fr) 260px;gap:14px}.order-panel,.inspector{padding:16px}.scene-key{display:none}.resource-bar>div{padding-left:16px}.workshop-bottom .muted{display:none}.build-card{grid-template-columns:34px 1fr;padding:11px;gap:6px}.build-card svg{width:34px}.rank-symbol{width:52px;height:52px}.rank{gap:10px}.rank strong{font-size:12px}.scene svg{min-height:350px}}
@media(max-width:760px){.topbar{height:65px;padding:0 20px}main{padding:26px 16px 0}.heading{margin-bottom:22px}.rank{display:none}h1{font-size:52px;letter-spacing:-2.8px}.intro{font-size:12px}.eyebrow{font-size:8px;letter-spacing:2px}.resource-bar{padding:13px 3px;border-radius:10px;margin-bottom:14px}.resource-bar>div{padding-left:10px;gap:7px}.resource-icon{font-size:22px;width:22px}.resource-bar small{font-size:9px}.resource-bar strong{font-size:19px}.game-layout{grid-template-columns:1fr}.scene svg{min-height:0}.scene-label{font-size:9px;top:18px;left:18px}.scene-coordinate{bottom:13px;font-size:6px;left:18px}.workshop-top{padding:12px 14px}.workshop-sub{font-size:9px}.workshop-bottom{padding:9px 12px;font-size:9px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.order-panel,.inspector{padding:15px}.order-panel{grid-row:span 2}.sidebar h2{font-size:16px}.sidebar p{font-size:11px}.panel-label{font-size:8px;letter-spacing:1px}.sell{font-size:10px;padding:0 8px;align-self:start;gap:6px}.primary{font-size:11px;padding:10px;margin-top:14px}.build-heading{align-items:start;gap:8px}.build-heading h2{font-size:14px}.build-heading>span{font-size:9px;max-width:125px;text-align:right}.build-menu{grid-template-columns:repeat(2,1fr);gap:10px}.build-card{min-height:96px;grid-template-columns:44px 1fr;padding:13px;gap:8px}.build-card svg{width:44px}.game-footer{align-items:start;flex-direction:column;gap:8px;font-size:9px}.game-footer>div{gap:20px;flex-wrap:wrap}.brand small{margin-left:17px;font-size:8px}.top-actions button{font-size:11px;min-height:36px}.top-actions button:last-child{width:36px}.build-section{margin-top:22px}}
@media(max-width:370px){main{padding-left:10px;padding-right:10px}.resource-bar>div{padding-left:6px;gap:4px}.resource-bar strong{font-size:17px}.resource-icon{font-size:18px}.sidebar{grid-template-columns:1fr}.order-panel{grid-row:auto}.build-card{grid-template-columns:30px 1fr}.build-card svg{width:30px}.scene-coordinate{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 🖥️ VOLLBILD AM RECHNER — Betreiberwunsch: „das eigentliche Spiel sollte die Browsergröße einnehmen", die Seite selbst darf nicht scrollen. Umgesetzt wird das NICHT mit festen Höhen, sondern mit EINEM Raster über `main`: `.game-layout{display:contents}` löst die alte Zwischenebene auf, damit Werkstatt, Seitenspalte und Baumenü direkt im selben Raster liegen. Erst dadurch kann die Werkstatt zwei Zeilen überspannen (3/5) und bekommt die ganze übrige Höhe; Auftrag/Inspektor und Baukarten wandern in die rechte Spalte und scrollen dort für sich — Menüs dürfen scrollen, die Seite nicht. ⚠️ Gescrollt wird INNERHALB des Inspektors, nicht über die ganze Spalte: Eine scrollende Spalte schnitt die untere Karte mittendurch, und ein halb abgeschnittenes Panel sieht nach kaputtem Layout aus, nicht nach Scrollbereich. Der Auftrag steht deshalb fest, der Inspektor nimmt den Rest und scrollt in sich. ⚠️ NUR am großen Zeigegerät (`pointer:fine`): Auf dem Handy ist die scrollende Seite richtig, dort ist Höhe knapp. ⚠️ `min-height:620px` ist Pflicht — ein niedriges Fenster (Laptop mit offener Konsole) quetschte die Werkstatt sonst auf Briefmarkenformat, was schlimmer ist als Scrollen. */
@media(min-width:1024px) and (min-height:620px) and (pointer:fine){
html,body{height:100%}
body{overflow:hidden;display:flex;flex-direction:column}
.topbar{flex:0 0 auto;height:64px}
main{flex:1 1 auto;min-height:0;width:100%;max-width:none;padding:14px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,23vw,360px);grid-template-rows:auto auto minmax(0,1fr) auto auto;column-gap:18px}
.heading{grid-column:1/-1;margin-bottom:10px}
h1{font-size:clamp(28px,2.3vw,40px);letter-spacing:-1.8px}
.intro{display:none}
.eyebrow{margin-bottom:6px}
.rank-symbol{width:50px;height:50px;font-size:26px}
.resource-bar{grid-column:1/-1;padding:11px 8px;margin-bottom:12px}
.resource-bar strong{font-size:20px}
.game-layout{display:contents}
.workshop{grid-column:1;grid-row:3/5;display:flex;flex-direction:column;min-height:0}
.scene{flex:1 1 auto;min-height:0}
.scene svg{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.sidebar{grid-column:2;grid-row:3;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.order-panel{flex:0 0 auto}
.inspector{flex:1 1 auto;min-height:0;overflow:auto}
.build-section{grid-column:2;grid-row:4;margin:12px 0 0;min-height:0;overflow:auto}
.build-heading{margin-bottom:9px}
.build-heading>span{display:none}
.build-menu{grid-template-columns:repeat(2,1fr);gap:9px}
.build-card{min-height:0;padding:10px;grid-template-columns:34px 1fr;column-gap:8px}
.build-card svg{width:34px;height:36px}
.game-footer{grid-column:1/-1;grid-row:5;margin-top:10px;padding:10px 0 12px}
}
/* 🖥️ FLACHE FENSTER (Laptop, 13–14 Zoll): Hier entscheidet jede Zeile darüber, wie groß die Werkstatt noch sein darf. Der große Schriftzug ist Schmuck und fliegt zuerst — der Name steht ohnehin in der Kopfzeile und im Tab. Der Rang bleibt: Er ist der einzige Ort, an dem der Spielfortschritt steht. Danach schrumpfen die Leisten um die Szene, nicht die Szene selbst. */
@media(min-width:1024px) and (min-height:620px) and (max-height:880px) and (pointer:fine){
.heading>div:first-child{display:none}
.heading{justify-content:flex-end;margin-bottom:8px}
.workshop-top,.workshop-bottom{padding:9px 14px}
.resource-bar{padding:9px 8px;margin-bottom:9px}
.game-footer{margin-top:7px;padding:8px 0 10px}
main{padding-top:10px}
}