/* ═══════════════════════════════════════════════════════════════ FILAMENT FURY — chrome The UI is a machine, not a website. Panels are bent metal with screws in the corners, meters are real meters, buttons have a travel, and the screen glass has a reflection in it. Everything is driven by --era-* tokens plus [data-era] on , so 1989 is an amber terminal bolted to a plywood wall and 2077 is backlit glass. sim/era.js swaps the tokens; the [data-era] hooks below change the physical construction. ═══════════════════════════════════════════════════════════════ */ @font-face{font-family:"FFPixel";src:url("./assets/fonts/kenney-mini-square.ttf") format("truetype");font-display:swap} @font-face{font-family:"FFProse";src:url("./assets/fonts/kenney-mini.ttf") format("truetype");font-display:swap} @font-face{font-family:"FFDisplay";src:url("./assets/fonts/kenney-future.ttf") format("truetype");font-display:swap} :root{ /* ── the four brand colours. Functional, not decorative. ── */ --teal:#04D9C4; /* ready · complete · the collective */ --orange:#FF6A00; /* heat · printing · manufacturing */ --magenta:#FF2D92; /* money · market · software */ --green:#18E36B; /* success · growth · pass */ --red:#FF3B30; /* failure · danger */ --amber:#FFB020; /* warning · attention */ /* The chrome does NOT change colour per era. Only the accent does. A brown UI made everything hard to read; a neutral slate keeps text contrast constant and lets the room carry the period instead. */ --era-bg:#0e1114; --era-panel:#171b20; --era-panel-2:#1e242a; --era-panel-3:#273038; --era-line:#333d46; --era-line-hi:#465360; --era-ink:#EAF0F5; --era-ink-dim:#93A3AF; --era-accent:#FFB020; /* era 1's accent; era.js swaps this one */ --era-accent-2:#FF6A00; --era-good:#18E36B; --era-bad:#FF3B30; --era-warn:#FFB020; --era-scan:0.16; --era-glow:0 0 14px rgba(255,176,32,.28); --era-metal:linear-gradient(180deg,#2b333b 0%,#1a1f25 46%,#12161a 100%); --era-face:linear-gradient(180deg,#232a31 0%,#1a2026 100%); /* ── structure, never themed ── */ --gap:9px; --r:4px; /* Read this before changing it: the pixel face is for SHORT, LARGE text only — headings, the HUD, era titles. Body copy in a 5x7 bitmap font at 12px is unreadable, which is exactly the note this build got. */ --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --prose:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --num:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --display:"FFDisplay",system-ui,sans-serif; --pixel:"FFPixel",ui-monospace,monospace; /* the skeuomorphic kit */ --bevel: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(0,0,0,.35); --bevel-deep: inset 0 2px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.45); --inset: inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.06); --grain:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 2px); color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--era-bg); color:var(--era-ink); font-family:var(--ui); font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased; overflow:hidden; transition:background .9s ease,color .9s ease; } button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select{font:inherit;color:inherit} kbd{ display:inline-block;font:inherit;font-size:.82em;min-width:1.6em;text-align:center; padding:1px 5px;border-radius:3px; background:var(--era-metal); box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.5); color:var(--era-ink); } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:rgba(0,0,0,.4);box-shadow:var(--inset)} ::-webkit-scrollbar-thumb{background:var(--era-metal);border-radius:5px;box-shadow:var(--bevel)} ::-webkit-scrollbar-thumb:hover{background:var(--era-accent)} /* screws — four to a panel, because a panel has four screws */ .screws::before,.screws::after{ content:'';position:absolute;width:5px;height:5px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#8a8a92,#3a3a42 60%,#1a1a1e); box-shadow:0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(0,0,0,.5); pointer-events:none; } .screws::before{left:5px;top:5px} .screws::after{right:5px;top:5px} /* ── boot ───────────────────────────────────────────────────── */ #boot{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--era-bg)} #boot::after{ content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 1px,transparent 1px 3px); } .boot-inner{text-align:center;width:min(440px,82vw);position:relative;z-index:2} .boot-logo{ font-family:var(--display);font-size:40px;letter-spacing:.06em; color:var(--era-ink); text-shadow:0 0 18px rgba(255,176,32,.45),0 2px 0 rgba(0,0,0,.7); } .boot-logo span{color:var(--era-accent);text-shadow:0 0 22px var(--era-accent)} .boot-sub{font-size:11px;letter-spacing:.36em;color:var(--era-ink-dim);margin:8px 0 28px} .boot-bar{height:10px;border-radius:5px;background:#000;box-shadow:var(--inset);overflow:hidden;padding:2px} .boot-bar i{ display:block;height:100%;width:0;border-radius:3px; background:linear-gradient(180deg,var(--era-accent),var(--era-accent-2)); box-shadow:0 0 10px var(--era-accent); transition:width .25s; } .boot-status{margin-top:12px;font-size:11px;color:var(--era-ink-dim);min-height:1.4em;letter-spacing:.1em} #boot.gone{opacity:0;pointer-events:none;transition:opacity .5s} /* ── layout ─────────────────────────────────────────────────── */ #app{ height:100%;height:100dvh;width:100%;max-width:100vw;min-width:0; display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr); background:var(--era-bg);overflow:hidden; } /* ── top bar — the instrument cluster ───────────────────────── */ #topbar{ position:relative;min-width:0;overflow:hidden; display:flex;align-items:center;gap:var(--gap); padding:7px 12px; background:var(--era-metal),var(--grain); box-shadow:0 2px 0 rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.5),var(--bevel); border-bottom:1px solid rgba(0,0,0,.7); z-index:5; } .tb-left{display:flex;align-items:center;gap:11px;min-width:0} .tb-menu{ width:34px;height:28px;border-radius:var(--r); background:var(--era-face); box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.5); transition:.08s; } .tb-menu:hover{color:var(--era-accent);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.5),0 0 12px var(--era-accent)} .tb-menu:active{transform:translateY(2px);box-shadow:var(--bevel)} .tb-brand{ font-family:var(--display);font-size:16px;letter-spacing:.04em;white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.8); } .tb-brand span{color:var(--era-accent);text-shadow:0 0 12px var(--era-accent)} .tb-stats{display:flex;gap:7px;flex:1;justify-content:center;flex-wrap:wrap;min-width:0} .stat{ position:relative; display:flex;align-items:center;gap:8px; padding:4px 11px;border-radius:var(--r); background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.28)); box-shadow:var(--inset),0 1px 0 rgba(255,255,255,.07); white-space:nowrap; } .stat-k{font-size:10px;letter-spacing:.12em;color:var(--era-ink-dim);font-weight:600} .stat-v{font-family:var(--num);font-size:15px;font-weight:600;color:var(--era-ink);font-variant-numeric:tabular-nums} #stat-cash .stat-v{color:var(--green);text-shadow:0 0 10px rgba(24,227,107,.5)} #stat-cash.bad .stat-v{color:var(--red);text-shadow:0 0 10px rgba(255,59,48,.6)} #stat-power .stat-v{color:var(--amber)} #stat-power.bad .stat-v{color:var(--red);animation:pulse 1s infinite} #stat-rep .stat-v{color:var(--magenta)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}} .stat.flash{animation:flashstat .55s ease} @keyframes flashstat{ 0%,100%{box-shadow:var(--inset),0 1px 0 rgba(255,255,255,.07)} 35%{box-shadow:var(--inset),0 0 16px var(--green),0 1px 0 rgba(255,255,255,.07)} } /* meter — a real backlit bar behind glass */ .meter{ display:inline-block;width:74px;height:11px;border-radius:2px;padding:1px; background:#000;box-shadow:var(--inset);vertical-align:middle; } .meter b{ display:block;height:100%;border-radius:1px; background:linear-gradient(180deg,var(--green),#0e9c48); box-shadow:0 0 8px rgba(24,227,107,.6); transition:width .3s; } .meter b.low{background:linear-gradient(180deg,var(--amber),#b87a10);box-shadow:0 0 8px rgba(255,176,32,.6)} .meter b.crit{background:linear-gradient(180deg,var(--red),#a01c14);box-shadow:0 0 10px rgba(255,59,48,.7);animation:pulse .9s infinite} .tb-era{ font-size:10px;letter-spacing:.2em;color:var(--era-accent); padding:5px 12px;border-radius:var(--r); background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2)); box-shadow:var(--inset),0 0 0 1px var(--era-accent) inset; text-shadow:0 0 10px var(--era-accent); white-space:nowrap; } /* ── main ───────────────────────────────────────────────────── */ #main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0;min-width:0;overflow:hidden} /* the stage is a CRT bolted into a bezel */ #stage{ position:relative;display:grid;place-items:center; background: radial-gradient(ellipse at 50% 45%,#151a1e 0%,#07090b 70%), var(--grain); overflow:hidden;min-height:0; box-shadow:inset 0 0 80px rgba(0,0,0,.9); } #screen{ image-rendering:pixelated;display:block;position:relative;z-index:1; border-radius:3px; box-shadow: 0 0 0 3px #0a0c0e, 0 0 0 5px #23282d, 0 0 0 6px rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.9), 0 0 90px rgba(255,176,32,.06); } #scanlines{ position:absolute;inset:0;pointer-events:none;z-index:3; background: repeating-linear-gradient(to bottom,rgba(0,0,0,var(--era-scan)) 0 1px,rgba(0,0,0,0) 1px 3px), radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 55%); mix-blend-mode:multiply; } #scanlines.off{display:none} #stage::after{ /* the glass reflection — a soft diagonal sheen */ content:'';position:absolute;inset:0;pointer-events:none;z-index:4; background:linear-gradient(118deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 34%); } #interact-prompt{ font-weight:600; position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:6; display:flex;align-items:center;gap:9px; padding:7px 15px;border-radius:20px; background:linear-gradient(180deg,rgba(12,14,16,.94),rgba(4,6,8,.94)); box-shadow:0 0 0 1px var(--era-accent),0 0 20px rgba(255,176,32,.3),0 4px 14px rgba(0,0,0,.7); font-size:14px;color:var(--era-ink); animation:rise .18s ease; } @keyframes rise{from{opacity:0;transform:translate(-50%,8px)}} #toasts{position:absolute;top:12px;right:12px;z-index:7;display:flex;flex-direction:column;gap:7px;pointer-events:none;max-width:300px} .toast{ padding:10px 14px;font-size:14px;border-radius:var(--r); background:linear-gradient(180deg,rgba(14,16,19,.95),rgba(6,8,10,.95)); box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.7),inset 3px 0 0 var(--teal); animation:toastin .24s cubic-bezier(.2,1.2,.4,1); } .toast.good{box-shadow:0 0 0 1px rgba(24,227,107,.3),0 6px 18px rgba(0,0,0,.7),inset 3px 0 0 var(--green),0 0 22px rgba(24,227,107,.18)} .toast.bad{box-shadow:0 0 0 1px rgba(255,59,48,.35),0 6px 18px rgba(0,0,0,.7),inset 3px 0 0 var(--red),0 0 22px rgba(255,59,48,.2)} .toast.warn{box-shadow:0 0 0 1px rgba(255,176,32,.3),0 6px 18px rgba(0,0,0,.7),inset 3px 0 0 var(--amber)} .toast.fade{opacity:0;transform:translateX(10px);transition:.42s} @keyframes toastin{from{opacity:0;transform:translateX(20px) scale(.96)}} /* ── side panel — a rack-mounted unit ───────────────────────── */ #side{ position:relative; display:flex;flex-direction:column;min-height:0; background:var(--era-metal),var(--grain); box-shadow:-2px 0 0 rgba(0,0,0,.6),-8px 0 24px rgba(0,0,0,.5),var(--bevel); } #tabs{ display:flex;padding:5px 5px 0;gap:3px; background:linear-gradient(180deg,rgba(0,0,0,.4),transparent); } .tab{ flex:1;padding:10px 4px 9px;font-size:12px;font-weight:600;letter-spacing:.06em; color:var(--era-ink-dim);border-radius:var(--r) var(--r) 0 0; background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:.1s; } .tab:hover{color:var(--era-ink)} .tab.is-on{ color:var(--era-accent); background:var(--era-face); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 var(--era-accent); text-shadow:0 0 10px var(--era-accent); } .tab .badge{ display:inline-block;min-width:16px;margin-left:5px;padding:0 4px; font-size:9px;line-height:14px;border-radius:8px; background:linear-gradient(180deg,var(--magenta),#c41f6f); color:#fff;box-shadow:0 0 8px rgba(255,45,146,.6),inset 0 1px 0 rgba(255,255,255,.35); } .tabpanes{flex:1;overflow-y:auto;min-height:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15));box-shadow:var(--inset)} .tabpane{display:none;padding:9px} .tabpane.is-on{display:block} .empty{padding:30px 14px;text-align:center;color:var(--era-ink-dim);font-size:14px;line-height:1.8} /* card — the workhorse. A pressed-steel tray. */ .card{ position:relative; background:var(--era-face); border-radius:var(--r); box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.35); padding:9px 11px;margin-bottom:8px; transition:.12s; } .card.act{cursor:pointer} .card.act:hover{transform:translateY(-1px);box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.45),0 0 0 1px var(--era-accent)} .card.act:active{transform:translateY(1px);box-shadow:var(--bevel)} .card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .card-name{font-size:14px;font-weight:600;color:var(--era-ink)} .card-tag{font-size:10px;letter-spacing:.1em;font-weight:600;color:var(--era-ink-dim)} .card-sub{font-size:12px;color:var(--era-ink-dim);margin-top:3px;line-height:1.5} .card-row{display:flex;justify-content:space-between;font-size:13px;margin-top:6px;gap:8px} .card-row.good span,.card-row .good{color:var(--green)} .card-row.bad span,.card-row .bad{color:var(--red)} /* state stripes carry the four brand colours */ .card::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0} .card.state-printing::before{background:var(--orange);box-shadow:0 0 12px var(--orange)} .card.state-heating::before{background:var(--amber);box-shadow:0 0 12px var(--amber)} .card.state-idle::before{background:rgba(255,255,255,.12)} .card.state-broken::before,.card.state-failed::before{background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 1.4s infinite} .card.state-done::before{background:var(--teal);box-shadow:0 0 14px var(--teal)} /* bar — glass tube with a lit fill */ .bar{ height:9px;border-radius:5px;padding:1px;margin-top:7px; background:#000;box-shadow:var(--inset);overflow:hidden; } .bar i{ display:block;height:100%;border-radius:4px; background:linear-gradient(180deg,var(--orange),#b34700); box-shadow:0 0 10px rgba(255,106,0,.55); transition:width .4s linear; } .bar.good i{background:linear-gradient(180deg,var(--green),#0e9c48);box-shadow:0 0 10px rgba(24,227,107,.55)} .bar.bad i{background:linear-gradient(180deg,var(--red),#a01c14);box-shadow:0 0 10px rgba(255,59,48,.6)} .bar.teal i{background:linear-gradient(180deg,var(--teal),#02897b);box-shadow:0 0 10px rgba(4,217,196,.55)} .bar.stripe i{ background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px); animation:crawl .8s linear infinite; } @keyframes crawl{to{background-position:14px 0}} .pill{ display:inline-block;padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.04em;border-radius:10px; background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--era-ink-dim); } .pill.on{box-shadow:inset 0 0 0 1px var(--era-accent),0 0 10px rgba(255,176,32,.3);color:var(--era-accent)} .pill.bad{box-shadow:inset 0 0 0 1px var(--red);color:var(--red)} .pill.good{box-shadow:inset 0 0 0 1px var(--green);color:var(--green)} /* a real LED */ .led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1a1a1e;box-shadow:inset 0 1px 2px rgba(0,0,0,.9)} .led.on{background:var(--green);box-shadow:0 0 8px var(--green),inset 0 1px 0 rgba(255,255,255,.5)} .led.hot{background:var(--orange);box-shadow:0 0 8px var(--orange),inset 0 1px 0 rgba(255,255,255,.5)} .led.err{background:var(--red);box-shadow:0 0 9px var(--red),inset 0 1px 0 rgba(255,255,255,.5);animation:pulse .8s infinite} /* ── ticker ─────────────────────────────────────────────────── */ #ticker{ display:flex;align-items:center;gap:14px;padding:6px 12px; background:var(--era-metal),var(--grain); box-shadow:0 -2px 0 rgba(0,0,0,.6),0 -6px 18px rgba(0,0,0,.4),var(--bevel); font-size:11px;z-index:5; } #log{ flex:1;min-height:1.7em;overflow:hidden;position:relative; padding:2px 10px;border-radius:3px; background:rgba(0,0,0,.5);box-shadow:var(--inset); } #log .line{color:var(--era-ink-dim);font-size:13px;line-height:1.4;animation:logline .32s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #log .line b{color:var(--era-ink);font-weight:400} #log .line.good{color:var(--green)} #log .line.good b{color:var(--green);text-shadow:0 0 8px rgba(24,227,107,.5)} #log .line.bad{color:#ff8a80} #log .line.bad b{color:var(--red);text-shadow:0 0 8px rgba(255,59,48,.5)} @keyframes logline{from{opacity:0;transform:translateY(8px)}} #hotkeys{color:var(--era-ink-dim);font-size:12px;white-space:nowrap} /* ── modal — a hinged panel that swings open ────────────────── */ #modal-host{position:fixed;inset:0;z-index:200;display:grid;place-items:center} #modal-host[hidden],#interact-prompt[hidden]{display:none!important} #modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(3px) saturate(.7)} #modal{ position:relative;width:min(880px,94vw); max-height:min(88vh,88dvh); display:flex;flex-direction:column;border-radius:6px; background:var(--era-metal),var(--grain); box-shadow: var(--bevel-deep), 0 0 0 1px var(--era-accent), 0 0 40px rgba(255,176,32,.14), 0 30px 90px rgba(0,0,0,.85); animation:modalin .2s cubic-bezier(.2,1.1,.35,1); } @keyframes modalin{from{opacity:0;transform:translateY(16px) scale(.985) rotateX(4deg)}} #modal.wide{width:min(1180px,97vw)} #modal-head{ flex:0 0 auto;position:relative; display:flex;align-items:center;justify-content:space-between; padding:12px 16px;border-radius:6px 6px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.3)); box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12); } #modal-head::after{ /* the accent rail under the title */ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--era-accent),transparent 60%); opacity:.7; } #modal-title{font-family:var(--display);font-size:16px;letter-spacing:.06em;font-weight:400;text-shadow:0 1px 0 rgba(0,0,0,.8)} #modal-close{ width:26px;height:22px;border-radius:3px;font-size:14px;color:var(--era-ink-dim); background:var(--era-face);box-shadow:var(--bevel); } #modal-close:hover{color:var(--red);box-shadow:var(--bevel),0 0 10px rgba(255,59,48,.4)} #modal-body{padding:18px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.12))} #modal-foot{ flex:0 0 auto;padding:12px 16px;border-radius:0 0 6px 6px; display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(0,0,0,.6); } #modal-foot:empty{display:none} /* ── buttons with travel ────────────────────────────────────── */ .btn{ position:relative; padding:10px 18px;font-size:13px;font-weight:600;letter-spacing:.02em;border-radius:var(--r); background:var(--era-face); box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35); transition:transform .07s,box-shadow .07s,color .12s; top:0; } .btn:hover:not(:disabled){color:var(--era-accent);box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4),0 0 14px rgba(255,176,32,.22)} .btn:active:not(:disabled){top:3px;box-shadow:var(--bevel)} .btn:disabled{opacity:.34;cursor:not-allowed;box-shadow:var(--inset)} .btn.primary{ background:linear-gradient(180deg,var(--era-accent),var(--era-accent-2)); color:#14100a;text-shadow:0 1px 0 rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.55),0 5px 16px rgba(255,106,0,.35); } .btn.primary:hover:not(:disabled){color:#14100a;filter:brightness(1.12)} .btn.danger{color:#ff9a92;box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,59,48,.4)} .btn.danger:hover:not(:disabled){background:linear-gradient(180deg,var(--red),#a01c14);color:#fff} .btn.teal{box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(4,217,196,.45);color:var(--teal)} .btn.sm{padding:4px 11px;font-size:11px;box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.5)} .btn.sm:active:not(:disabled){top:2px} .btn.block{width:100%;display:block;margin-top:7px} /* ── modal furniture ────────────────────────────────────────── */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:780px){.grid2,.grid3{grid-template-columns:1fr}} .sect{margin-bottom:18px} .sect-h{ font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--era-accent); padding:0 0 6px;margin-bottom:10px; box-shadow:0 1px 0 rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06); text-shadow:0 0 10px rgba(255,176,32,.3); } .kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;gap:12px;line-height:1.5} .kv span:last-child{color:var(--era-ink);text-align:right} .kv span:first-child{color:var(--era-ink-dim)} .muted{color:var(--era-ink-dim)} .good{color:var(--green)} .bad{color:var(--red)} .warn{color:var(--amber)} .teal{color:var(--teal)} .big{font-size:22px;font-family:var(--display);text-shadow:0 2px 0 rgba(0,0,0,.6)} .mono{font-family:var(--num);font-variant-numeric:tabular-nums} .quote{ padding:9px 12px;margin:10px 0;border-radius:3px; background:rgba(0,0,0,.35);box-shadow:var(--inset),inset 3px 0 0 var(--teal); color:var(--era-ink-dim);font-family:var(--prose);font-size:13px;line-height:1.7; } .quote b{color:var(--teal)} /* option rows */ .opt{ display:flex;align-items:center;gap:11px; padding:9px 11px;margin-bottom:6px;border-radius:var(--r); background:var(--era-face); box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.4); cursor:pointer;transition:.1s; } .opt:hover{box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.4),0 0 0 1px var(--era-accent)} .opt.on{ box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.4),0 0 0 1px var(--era-accent),0 0 16px rgba(255,176,32,.22),inset 3px 0 0 var(--era-accent); } .opt.off{opacity:.38;cursor:not-allowed;box-shadow:var(--inset)} .opt-sw{ width:14px;height:14px;border-radius:3px;flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.4),0 0 8px currentColor; } .opt-main{flex:1;min-width:0} .opt-name{display:block;font-size:14px;font-weight:600} .opt-sub{display:block;font-size:12px;color:var(--era-ink-dim);margin-top:3px;line-height:1.5} .opt-right{text-align:right;font-size:13px;font-family:var(--num);white-space:nowrap;color:var(--era-ink)} /* sliders — a real fader in a slot */ .slider{margin:12px 0} .slider label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px} .slider label span:last-child{color:var(--era-accent);text-shadow:0 0 8px var(--era-accent)} input[type=range]{ width:100%;height:18px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer; } input[type=range]::-webkit-slider-runnable-track{ height:8px;border-radius:4px;background:#000;box-shadow:var(--inset) } input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#000;box-shadow:var(--inset)} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;margin-top:-5px; width:12px;height:18px;border-radius:3px; background:linear-gradient(180deg,#c9cdd4,#6f757e); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 2px 5px rgba(0,0,0,.6),0 0 10px var(--era-accent); } input[type=range]::-moz-range-thumb{ width:12px;height:18px;border:0;border-radius:3px; background:linear-gradient(180deg,#c9cdd4,#6f757e); box-shadow:0 2px 5px rgba(0,0,0,.6),0 0 10px var(--era-accent); } input[type=checkbox]{ width:16px;height:16px;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:3px; background:var(--era-face);box-shadow:var(--bevel);position:relative; } input[type=checkbox]:checked{background:linear-gradient(180deg,var(--teal),#02897b);box-shadow:var(--bevel),0 0 10px rgba(4,217,196,.5)} input[type=checkbox]:checked::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#05231f;font-size:11px} /* dialogue */ .dlg-who{font-family:var(--display);font-size:15px;color:var(--era-accent);letter-spacing:.07em;margin-bottom:8px;text-shadow:0 0 12px var(--era-accent)} .dlg-text{font-family:var(--prose);font-size:15px;line-height:1.8;min-height:4.5em;max-width:64ch} .dlg-choices{margin-top:16px;display:flex;flex-direction:column;gap:7px} /* tables */ table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12px} table.t th{ text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--era-accent); padding:7px 9px;font-weight:400; background:rgba(0,0,0,.35);box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06); } table.t td{padding:8px 10px;font-size:13px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)} table.t tr:hover td{background:rgba(255,255,255,.045)} table.t td.num{text-align:right;font-variant-numeric:tabular-nums} /* minigame host */ .mg{display:grid;place-items:center;gap:14px} .mg canvas{ image-rendering:pixelated;border-radius:4px;background:#000; box-shadow:0 0 0 3px #0a0c0e,0 0 0 5px #262b31,0 10px 30px rgba(0,0,0,.8),inset 0 0 40px rgba(0,0,0,.9); } .mg-help{font-family:var(--prose);font-size:14px;color:var(--era-ink);text-align:center;max-width:58ch;line-height:1.75} /* tech tree */ .tt-era{margin-bottom:22px} .tt-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px} .tt{ padding:10px 12px;border-radius:var(--r);font-size:11px;cursor:pointer;transition:.12s; background:var(--era-face);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.45); } .tt:hover{transform:translateY(-1px);box-shadow:var(--bevel),0 3px 0 rgba(0,0,0,.45),0 0 0 1px var(--era-accent),0 0 16px rgba(255,176,32,.2)} .tt.owned{box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.45),inset 3px 0 0 var(--green);opacity:.78;cursor:default} .tt.locked{opacity:.3;cursor:not-allowed;box-shadow:var(--inset)} .tt-name{font-size:14px;font-weight:600;color:var(--era-ink);margin-bottom:3px} .tt-cost{color:var(--magenta);font-size:13px;font-family:var(--num);font-weight:600} .tt-desc{color:var(--era-ink-dim);font-size:12px;margin-top:6px;line-height:1.55} /* era transition takeover */ #era-card{ position:fixed;inset:0;z-index:400;display:grid;place-items:center;text-align:center; background:radial-gradient(ellipse at 50% 45%,var(--era-panel) 0%,var(--era-bg) 70%); } #era-card::after{ content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); } #era-card .yr{ font-family:var(--display);font-size:76px;color:var(--era-accent);letter-spacing:.12em; text-shadow:0 0 40px var(--era-accent),0 4px 0 rgba(0,0,0,.6); animation:yearin 1.1s cubic-bezier(.2,1,.3,1); } @keyframes yearin{from{opacity:0;letter-spacing:.5em;filter:blur(10px)}} #era-card .nm{font-size:22px;letter-spacing:.34em;margin-top:10px;color:var(--era-ink)} #era-card .bl{max-width:48ch;margin:24px auto 0;color:var(--era-ink-dim);font-family:var(--prose);font-size:13px;line-height:1.9} /* ── phone hotbar: hidden until the keyboard is gone ── */ #hotbar{display:none;gap:6px;padding:6px 8px;overflow-x:auto;overflow-y:hidden;white-space:nowrap; background:var(--era-metal),var(--grain);box-shadow:0 -2px 0 rgba(0,0,0,.6),var(--bevel);-webkit-overflow-scrolling:touch} #hotbar button{flex:0 0 auto;min-height:40px;padding:8px 13px;font-size:13px;font-weight:600;border-radius:var(--r); background:var(--era-face);box-shadow:var(--bevel),0 2px 0 rgba(0,0,0,.5);color:var(--era-ink)} #hotbar button:active{transform:translateY(2px);box-shadow:var(--bevel);color:var(--era-accent)} @media(max-width:960px),(max-height:520px){ #main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto} #hotbar{display:flex} #side{max-height:34vh} #modal{width:100vw;max-width:100vw;max-height:min(92vh,92dvh);border-radius:0} #modal.wide{width:100vw} #modal-body{padding:12px} #modal-foot{padding:10px 12px;gap:6px} .btn{padding:10px 12px;font-size:13px} #interact-prompt{bottom:10px;font-size:13px;padding:6px 12px} #ticker{padding:4px 8px} } @media(max-width:960px){ #main{grid-template-columns:minmax(0,1fr)} #side{min-width:0} #topbar{padding:5px 8px;gap:6px} .tb-stats{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:5px;scrollbar-width:none} .tb-stats::-webkit-scrollbar{display:none} .stat{padding:3px 8px;gap:5px} .stat-v{font-size:13px} .meter{width:52px} .tb-right{display:none} .tb-brand{font-size:13px} #toasts{max-width:min(300px,80vw)} #side{box-shadow:0 -2px 0 rgba(0,0,0,.6),0 -8px 24px rgba(0,0,0,.5);max-height:40vh} .tb-stats{gap:5px} .stat-k{display:none} #hotkeys{display:none} .tb-era{font-size:9px;padding:4px 8px} }