:root { color-scheme: dark; --ink:#dbe8d1; --muted:#a6baa3; --signal:#b8ee9d; --paper:#243029; --panel:#1c2d26; --inset:#12231c; --line:#61705a; --cream:#e4d9bb; --brass:#b6995e; font:15px/1.5 'Segoe UI',sans-serif; background:#202720; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; } button,input,textarea,select { font:inherit; } button { min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:4px; background:#314738; color:var(--ink); cursor:pointer; } button:hover:not(:disabled) { background:#405b43; } button:disabled { opacity:.5; cursor:default; } button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid #f1c779; outline-offset:3px; } [hidden] { display:none!important; } h1,h2,h3,h4,p { margin:0 0 12px; } h3 { font-size:25px; line-height:1.2; } h4 { font-size:19px; } .muted { color:var(--muted); } .eyebrow { font:11px/1.5 Consolas,monospace; letter-spacing:1.3px; color:var(--brass); } .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
.room-shell { min-height:100svh; position:relative; isolation:isolate; padding:14px 24px 108px; } .room-art,.room-shade { position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; } .room-art { object-fit:cover; object-position:center; } .room-shade { z-index:-1; background:#0a140d66; transition:background .18s; } .has-window .room-shade { background:#0a140db3; } .room-header { max-width:1440px; margin:auto; } .room-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 6px 8px; text-shadow:0 2px 4px #000; } .room-brand h1 { margin:0; color:#efe4c9; font-size:20px; letter-spacing:-.3px; } #mode-note { font:11px/1.4 Consolas,monospace; color:#d3d6bf; } .hud { display:flex; gap:10px; align-items:center; } .art { display:block; width:100%; height:100%; pointer-events:none; } .hud-stat { position:relative; width:230px; aspect-ratio:1974/355; flex:none; font-family:Consolas,monospace; } .hud-stat>.art:first-child { position:absolute; inset:0; } .stat-glyph { position:absolute; left:6%; top:21%; width:11%; height:58%; } .stat-label { position:absolute; left:23%; top:12%; font-size:9px; color:#a9c39b; } .hud-stat strong { position:absolute; left:23%; right:6%; top:36%; font-size:19px; line-height:1.2; color:#d4f6bd; overflow-wrap:anywhere; } .hud-vault { position:relative; width:340px; aspect-ratio:1973/413; padding:0; border:0; background:none!important; font-family:Consolas,monospace; } .hud-vault>.art { position:absolute; inset:0; } #vault-name { position:absolute; left:7%; top:16%; font-size:12px; font-weight:600; } #vault-work { position:absolute; right:7%; top:16%; font-size:10px; } #vault-progress { position:absolute; left:7.2%; top:51%; width:85%; height:20%; border:0; } progress { width:100%; height:12px; accent-color:var(--signal); border:1px solid #5d8663; background:#10221a; border-radius:3px; overflow:hidden; } progress::-webkit-progress-bar { background:#10221a; } progress::-webkit-progress-value { background:#a6d884; } .utilities { display:flex; gap:6px; margin-left:auto; } .icon-button { position:relative; width:46px; height:46px; min-width:44px; padding:0; background:none!important; border:0; } .housing { position:absolute; inset:0; } .glyph { position:absolute; width:53%; height:53%; left:23.5%; top:23.5%; } .session-strip { min-height:28px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:4px 6px; font:11px/1.4 Consolas,monospace; text-shadow:0 2px 3px #000; } #save-status { color:#f0d58a; } #writer { font-weight:400; color:#d4dcc9; }
.window-layer { display:flex; justify-content:center; padding-top:10px; } .station-window { width:min(1060px,100%); min-height:540px; position:relative; border:6px solid #a39c82; border-radius:14px; background:#1c2b24; box-shadow:0 22px 60px #0008,inset 0 0 0 2px #4b5546; } .window-header { min-height:70px; display:flex; justify-content:space-between; align-items:center; padding:10px 22px; color:var(--cream); border-bottom:1px solid #62705c; } .window-header h2 { font-size:23px; margin:0; } .pc-art { display:none; } .terminal-frame { border:0; border-radius:0; background:none; box-shadow:none; min-height:0; aspect-ratio:1226/804; container-type:inline-size; } .terminal-frame>.pc-art { display:block; position:absolute; inset:0; z-index:-1; } .terminal-frame>.window-header { position:absolute; left:4.5%; top:2.7%; width:91%; height:8%; min-height:0; padding:0; border:0; color:#243429; } .terminal-frame>.window-header h2 { font-size:clamp(18px,2.4cqw,28px); font-weight:700; } .terminal-frame .window-header .icon-button { width:44px; height:44px; } .pc-tabs { position:absolute; left:4.25%; top:19.9%; width:17.65%; display:grid; gap:1.8cqw; } .pc-tabs button { height:7.2cqw; min-height:44px; border:0; background:transparent; color:#cad3bc; padding:8px; font-size:clamp(13px,1.8cqw,20px); } .pc-tabs button[aria-pressed=true] { color:#c4f6a6; box-shadow:inset 3px 0 #a9d990; background:#9ee78c12; } .station-window:not(.terminal-frame)>.pc-tabs { position:static; width:auto; display:flex; gap:8px; padding:12px 24px; } .station-window:not(.terminal-frame)>.pc-tabs button { height:auto; padding:10px 18px; }
.terminal { position:absolute; inset:0; font-family:Consolas,monospace; } .terminal>.eyebrow { position:absolute; left:26.5%; top:17.3%; color:#aec7a8; font-size:clamp(8px,1.2cqw,13px); letter-spacing:.7px; } .target { position:absolute; left:32.95%; top:26.7%; width:55.3%; height:15%; display:flex; align-items:center; justify-content:center; color:#c8f8b0; font-size:clamp(24px,5.4cqw,58px); line-height:1.1; font-weight:700; letter-spacing:-1.5px; overflow-wrap:anywhere; text-shadow:0 0 18px #ace68b22; } #word { position:absolute; left:32.95%; top:43.9%; width:55.3%; height:9.8%; background:#13271cbb; border:1px solid #8bc493; border-radius:7px; padding:8px 18px; color:#d5f3bd; font:clamp(18px,2.8cqw,32px)/1.2 Consolas,monospace; } #word:disabled { opacity:.5; } .terminal-upcoming { position:absolute; left:37.35%; top:56.9%; width:46.65%; } .terminal-upcoming p { margin:0 0 7px; font-size:clamp(8px,1.1cqw,12px); color:#a0bd99; text-align:center; } .terminal-upcoming ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4cqw; margin:0; padding:0; list-style:none; } .terminal-upcoming li { text-align:center; padding:10px 2px; min-height:3.9cqw; font-size:clamp(10px,1.5cqw,16px); line-height:1.3; overflow-wrap:anywhere; color:#d1ddbe; } #typing-status { position:absolute; left:28%; top:67.8%; width:65%; text-align:center; font-size:clamp(9px,1.3cqw,14px); color:#d7e5b9; line-height:1.3; } .terminal-metrics { position:absolute; left:26.5%; top:74.4%; width:68.2%; display:grid; grid-template-columns:26% 38% 36%; text-align:center; gap:0; } .terminal-metrics p { margin:0; display:flex; flex-direction:column; gap:2px; } .terminal-metrics span { font-size:clamp(7px,1cqw,11px); color:#9ab599; } .terminal-metrics strong { font-size:clamp(9px,1.55cqw,17px); color:#cfe8b9; font-weight:600; } .terminal-work { position:absolute; left:36.9%; top:83.3%; width:39.6%; } .terminal-work p { font-size:clamp(8px,1.05cqw,12px); text-align:center; margin:0 0 6px; color:#a8c49f; } .terminal-work progress { height:2.7cqw; max-height:27px; } #typing-help { position:absolute; left:27%; top:92.5%; width:66%; text-align:center; font-size:clamp(8px,.9cqw,10px); line-height:1.2; color:#96ad90; }
.station-content { padding:28px 32px 36px; color:var(--ink); } .station-content h2 { font-size:26px; } .station-content>section { margin:20px 0; } .station-content p { max-width:75ch; } .machine { padding:20px 0; border-bottom:1px solid #4f604d; } .machine h3 { font-size:22px; margin-bottom:6px; } .machine p { color:var(--muted); } .machine button { margin-top:4px; } .vault-list { padding-left:24px; display:grid; gap:14px; } #stats-ledger { display:grid; grid-template-columns:1fr auto; gap:12px 24px; max-width:520px; margin:24px 0; } #stats-ledger dd { margin:0; color:var(--signal); font:600 20px Consolas,monospace; } .deferred { padding:20px 0; } .station-nav { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:16px; padding:8px 22px; background:#15241be8; border:1px solid #8c926e; border-radius:10px; z-index:2; box-shadow:0 8px 24px #0005; } .station-nav button { position:relative; width:68px; height:68px; min-height:44px; padding:0; background:none; border:0; } .station-nav .housing { width:46px; height:46px; left:11px; } .station-nav .glyph { width:25px; height:25px; left:21.5px; top:10px; } .station-nav span { position:absolute; left:0; right:0; bottom:0; font-size:12px; } .station-nav button[aria-pressed=true] { color:#d2f7b4; text-shadow:0 0 10px #b4ec9d88; } .station-nav button[aria-pressed=true] .housing { filter:brightness(1.25); } .room-hint { position:fixed; bottom:4px; left:0; right:0; text-align:center; font-size:10px; color:#c8d1bb; margin:0; text-shadow:0 1px 4px #000; }
dialog { color:var(--ink); background:#1d2d24; border:5px solid #a39c82; border-radius:12px; padding:24px; width:min(800px,calc(100% - 24px)); max-height:calc(100svh - 32px); overflow:auto; box-shadow:0 24px 80px #0009; } dialog::backdrop { background:#07140cc9; } .dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; } .dialog-heading h2 { margin:0; font-size:24px; color:var(--cream); } .saves { border:0; } .saves>summary { display:none; } .save-heading { margin-top:16px; } .save-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; } .controls { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } label { display:block; margin:0 0 8px; } textarea { width:100%; min-height:110px; background:var(--inset); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:10px; resize:vertical; font:12px/1.4 Consolas,monospace; } a { color:var(--signal); display:inline-block; padding:10px 0; } dialog form { display:flex; justify-content:flex-end; gap:12px; } #recovery { padding:16px; border:1px solid var(--brass); margin:16px 0; } #startup-status { padding:20px; } #playtest-help { border-bottom:1px solid var(--line); margin-bottom:20px; padding-bottom:12px; }
@media(min-width:1100px) and (min-height:800px) { .station-window.terminal-frame { width:min(1060px,calc((100svh - 245px) * 1.525)); } }
@media(max-width:1100px) { .room-shell { padding:12px 16px 112px; } .hud { flex-wrap:wrap; gap:8px; } .hud-stat { width:calc((100% - 170px)/2); max-width:250px; } .hud-vault { width:320px; order:4; } .utilities { margin-left:auto; } .session-strip { margin-top:2px; } .window-layer { padding-top:4px; } }
@media(max-width:700px) { .room-shell { padding:10px 10px 112px; } .room-brand { flex-direction:column; align-items:flex-start; gap:2px; } .room-brand h1 { font-size:18px; } #mode-note { font-size:9px; } .hud-stat { width:calc((100% - 8px)/2); max-width:none; } .hud-stat strong { font-size:17px; } .hud-vault { width:calc(100% - 116px); min-height:48px; order:3; } #vault-name { font-size:10px; } #vault-work { font-size:8px; top:34%; left:7%; right:auto; } #vault-progress { top:62%; height:14%; } .utilities { width:100%; justify-content:flex-end; margin-top:0; order:4; position:relative; } .session-strip { gap:8px; font-size:10px; } .station-window { min-height:450px; border-width:3px; } .window-header { min-height:60px; padding:8px 16px; } .terminal-frame { aspect-ratio:auto; min-height:540px; background:#172b20; border:5px solid #bab092; border-radius:12px; } .terminal-frame>.pc-art { width:100%; height:auto; aspect-ratio:1226/804; opacity:.55; } .terminal-frame>.window-header { position:relative; inset:auto; height:54px; width:100%; padding:6px 12px; background:#d8ceb2; } .pc-tabs,.station-window:not(.terminal-frame)>.pc-tabs { position:relative; inset:auto; width:100%; display:flex; gap:4px; padding:8px; background:#24312b; } .pc-tabs button,.station-window:not(.terminal-frame)>.pc-tabs button { flex:1; height:auto; min-height:44px; font-size:12px; padding:8px 4px; } .terminal { position:relative; inset:auto; min-height:410px; padding:18px 16px 20px; display:flex; flex-direction:column; } .terminal>.eyebrow,.target,#word,.terminal-upcoming,#typing-status,.terminal-metrics,.terminal-work,#typing-help { position:static; width:100%; height:auto; } .terminal>.eyebrow { font-size:9px; margin-bottom:16px; } .target { min-height:62px; font-size:clamp(23px,7vw,38px); letter-spacing:-.6px; margin-bottom:16px; } #word { min-height:54px; font-size:23px; padding:10px; margin-bottom:16px; } .terminal-upcoming { order:4; margin:0 0 10px; } .terminal-upcoming p { font-size:10px; margin-bottom:8px; } .terminal-upcoming ol { gap:8px; } .terminal-upcoming li { border:1px solid #62826b; padding:8px 4px; min-height:44px; font-size:13px; } #typing-status { order:5; font-size:12px; min-height:30px; margin:0 0 10px; } .terminal-metrics { order:6; margin-bottom:16px; padding-top:12px; border-top:1px solid var(--line); } .terminal-metrics span { font-size:8px; } .terminal-metrics strong { font-size:11px; } .terminal-work { order:7; } .terminal-work p { font-size:10px; } .terminal-work progress { height:14px; } #typing-help { order:8; font-size:10px; line-height:1.4; margin-top:12px; } .station-content { padding:22px 16px; } .station-nav { gap:2px; padding:6px 10px; width:calc(100% - 20px); justify-content:space-between; bottom:20px; } .station-nav button { width:62px; } .station-nav .housing { left:8px; } .station-nav .glyph { left:18.5px; } .save-columns { grid-template-columns:1fr; } dialog { padding:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.window-header,.pc-tabs { z-index:2; } .terminal { z-index:1; }
#console-state { font:11px/1.2 Consolas,monospace; color:var(--signal); } .terminal-frame #console-state { position:absolute; left:53%; width:37%; text-align:center; } #typing-help { top:92%; }
@media(max-width:700px) { .room-shell { display:flex; flex-direction:column; padding-bottom:20px; } .room-header { order:0; width:100%; } .station-nav { order:1; position:sticky; top:6px; bottom:auto; left:auto; transform:none; margin:8px 0 12px; width:100%; flex-shrink:0; } .window-layer { order:2; display:block; } .room-hint { order:3; position:static; margin:14px 0 0; } .terminal-frame #console-state { position:static; width:auto; margin-left:auto; margin-right:8px; font-size:8px; } .terminal-frame>.window-header h2 { font-size:18px; } .terminal-frame .window-header .icon-button { flex-shrink:0; } }
@media(min-width:701px) { .station-window.terminal-frame { width:min(1060px,100%,max(720px,calc((100svh - 350px) * 1.525))); } }
@media(min-width:1100px) { .station-window.terminal-frame { width:min(1060px,max(720px,calc((100svh - 310px) * 1.525))); } }
@media(min-width:701px) and (max-height:750px) { .station-nav { position:relative; left:auto; bottom:auto; transform:none; margin:16px auto 0; width:max-content; } .room-hint { position:static; margin-top:12px; } .room-shell { padding-bottom:20px; } }
@media(min-width:701px) { #typing-help { top:90.5%; } }
@media(max-width:700px) { .terminal-frame #console-state { color:#243d2a; font-size:9px; } #vault-name { font-size:12px; top:11%; } #vault-work { font-size:10px; top:37%; } #vault-progress { top:65%; height:17%; } }
/* UI-SCREENS-002: same original PNG pixels, conservative live inner wells. */
.generated-art { position:absolute; inset:0; pointer-events:none; z-index:-1; } .generated-art .screen-art { width:100%; height:100%; display:block; } .generated-frame { isolation:isolate; border:0; border-radius:0; background:none; box-shadow:none; width:min(1060px,100%,max(760px,calc((100svh - 300px)*1.5))); aspect-ratio:1.5; min-height:0; container-type:inline-size; } .generated-frame>.window-header { position:absolute; left:4%; top:3%; width:92%; height:9%; min-height:44px; border:0; padding:0 1%; color:#263c2b; } .generated-frame>.window-header h2 { font-size:clamp(18px,2.3cqw,27px); } .generated-frame #console-state { max-width:36%; color:#c8e5b3; font-size:10px; } .generated-frame .station-content { position:absolute; left:27.5%; top:19.5%; width:68.5%; height:73.5%; padding:18px 22px; overflow:auto; background:#14291ff2; border:1px solid #526d54; border-radius:5px; font-size:14px; } .generated-frame .station-content h2,.generated-frame .station-content h3 { font-size:23px; } .generated-frame .station-content h3:first-child { margin-top:0; } .generated-frame>.pc-tabs,.screen-tabs { position:absolute!important; left:3.5%!important; top:20%!important; width:19%!important; display:grid!important; gap:16px!important; padding:0!important; z-index:2; } .screen-tabs button,.generated-frame>.pc-tabs button { min-height:52px!important; height:auto!important; padding:12px 8px!important; font-size:15px!important; background:#26392ccc!important; border:1px solid #77806b!important; color:#d1dfc5; } .screen-tabs button[aria-pressed=true],.generated-frame>.pc-tabs button[aria-pressed=true] { background:#46613bcc!important; border-color:#a8cf8b!important; } .screen-tabs[hidden],.generated-frame>.pc-tabs[hidden] { display:none!important; }
.generated-frame[data-screen^="V-"] .station-content,.generated-frame[data-screen="END-01"] .station-content { left:7%; width:86%; } .vault-list { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; } .vault-list button { width:100%; text-align:left; font-size:13px; min-height:62px; } .station-content dl,.dialog-scroll dl { display:grid; grid-template-columns:1fr auto; gap:10px 20px; } .station-content dd,.dialog-scroll dd { margin:0; color:#c9eda9; text-align:right; overflow-wrap:anywhere; } .station-content dt { color:#a4b79c; } #component-list { padding-left:20px; } #component-list button { text-align:left; } #owned-parts-state { font-weight:600; }
.generated-dialog { position:relative; isolation:isolate; width:min(930px,calc(100vw - 24px)); height:min(680px,calc(100svh - 24px)); max-height:calc(100svh - 24px); border:0; border-radius:0; background:transparent; padding:0; overflow:hidden; box-shadow:none; } .dialog-art { position:absolute; inset:0; z-index:-1; pointer-events:none; } .dialog-art .screen-art { width:100%; height:100%; display:block; } .screen-dialog-heading { position:absolute; top:5%; left:6%; width:88%; height:9%; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#d6ebc4; background:#182c22; padding:5px 12px; border-radius:4px; } .screen-dialog-heading h2 { margin:0; font-size:23px; } .dialog-scroll { position:absolute; left:6%; top:17%; width:88%; height:76%; padding:20px; overflow:auto; background:#14271ff5; border:1px solid #647457; border-radius:5px; } .dialog-scroll .practice { margin:0; padding:0; border:0; } .dialog-scroll .practice-heading { flex-wrap:wrap; } .dialog-scroll .saves>summary { display:none; } .confirmation-content { position:absolute; inset:17% 7%; padding:24px; overflow:auto; background:#162b21f5; border:1px solid #6d785d; } .confirmation-content h2 { font-size:28px; } .confirmation-content form { margin-top:24px; } #home-screen { position:relative; min-height:100svh; background:#071b57; overflow:hidden; } .home-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .home-menu { position:relative; padding:0; margin-left:4%; padding-top:max(350px,54svh); width:285px; display:flex; flex-direction:column; gap:9px; padding-bottom:20px; } .home-menu button { background:#132c31e8; border:1px solid #e0c77f; color:#f4e9ca; box-shadow:0 3px 12px #0005; font-weight:600; } .home-menu button:disabled { opacity:.55; } .home-title-note,#home-state { font-size:12px; color:#fff2bf; text-shadow:0 1px 4px #000; margin:0; } .home-menu button:hover:not(:disabled) { background:#355148; } #hud-home { min-width:44px; font-size:11px; padding:6px; height:46px; }
@media(max-width:1100px) { .generated-frame { width:100%; min-height:570px; aspect-ratio:1.4; } .generated-frame .station-content { font-size:13px; padding:14px; } }
@media(max-width:700px) { .generated-frame { min-height:0; aspect-ratio:auto; border:4px solid #bbb18e; background:#182c21; border-radius:10px; } .generated-art { position:absolute; inset:0; opacity:.5; overflow:hidden; } .generated-art .screen-art { height:auto; aspect-ratio:1.5; } .generated-frame>.window-header { position:relative; inset:auto; width:100%; height:58px; padding:6px 12px; background:#d8cdae; } .generated-frame #console-state { color:#233d29; font-size:8px; } .generated-frame>.pc-tabs,.screen-tabs { position:relative!important; inset:auto!important; width:100%!important; display:flex!important; flex-wrap:wrap; gap:5px!important; padding:8px!important; background:#22382b; } .screen-tabs button,.generated-frame>.pc-tabs button { flex:1; min-height:44px!important; font-size:12px!important; padding:8px!important; } .generated-frame .station-content,.generated-frame[data-screen^="V-"] .station-content,.generated-frame[data-screen="END-01"] .station-content { position:relative; inset:auto; width:100%; height:auto; max-height:none; min-height:350px; border:0; border-radius:0; overflow:visible; background:#172b21f7; padding:20px 16px; font-size:14px; } .generated-dialog { height:calc(100svh - 24px); background:#172a20; border:4px solid #bbb18e; border-radius:8px; } .screen-dialog-heading { left:3%; top:1%; width:94%; height:8%; padding:6px; } .screen-dialog-heading h2 { font-size:20px; } .dialog-scroll { left:2%; top:11%; width:96%; height:87%; padding:14px; } .confirmation-content { inset:11% 2% 2%; padding:18px; } .home-cover { position:relative; width:100%; height:auto; display:block; object-fit:contain; } .home-menu { width:calc(100% - 40px); margin:18px 20px 0; padding:0 0 24px; } .home-menu button { min-height:48px; } .home-title-note { text-align:center; } .vault-list { grid-template-columns:1fr; } #hud-home { height:46px; } }
.home-cover { object-fit:contain; object-position:top center; } .generated-frame #console-state { position:absolute; left:55%; width:32%; max-width:none; text-align:center; } .generated-frame #automation-rack .machine { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; } .generated-frame #automation-rack .machine h3,.generated-frame #automation-rack .machine p { grid-column:1; } .generated-frame #automation-rack .machine button[data-machine] { grid-column:2; grid-row:1/3; max-width:230px; align-self:center; } .generated-frame #automation-rack .machine button[data-item-kind] { grid-column:2; justify-self:end; }
@media(max-width:700px) { .generated-frame #console-state { position:static; width:auto; } .generated-frame #automation-rack .machine { display:block; } .generated-frame #automation-rack .machine button { margin-right:6px; } }
.generated-dialog { width:min(930px,calc(100vw - 24px),calc((100svh - 24px)*var(--screen-ratio))); height:auto; aspect-ratio:var(--screen-ratio); } .save-overview { position:absolute; inset:0; pointer-events:none; } .save-overview button { pointer-events:auto; } .save-emblem { position:absolute; left:9%; top:19%; width:11%; height:15%; } .save-overview-summary { position:absolute; left:25%; top:19%; width:66%; font-size:15px; } .save-overview-summary p { margin-top:8px; color:var(--muted); } .save-row { position:absolute; left:7%; top:37.7%; width:86.8%; height:12.5%; } .save-row-2 { top:51.1%; } .save-row-3 { top:64.7%; } .save-row h3 { position:absolute; left:2%; top:14%; width:62%; margin:0; font-size:18px; } .save-row p { position:absolute; left:2%; top:47%; width:62%; margin:0; font-size:12px; color:#b0c5a6; } .save-row button { position:absolute; left:72.5%; top:17%; width:25%; height:62%; padding:4px; border-color:#789568; background:none; font-size:15px; } .save-overview-close { position:absolute; left:35.2%; top:84.8%; width:29.7%; height:7.45%; padding:4px; background:transparent; } #save-overview-back { margin-bottom:16px; }
@media(max-width:700px) { .generated-dialog { width:calc(100vw - 24px); height:calc(100svh - 24px); aspect-ratio:auto; } .save-overview { inset:11% 4% 3%; display:flex; flex-direction:column; gap:18px; overflow:auto; pointer-events:auto; } .save-emblem { display:none; } .save-overview-summary,.save-row,.save-row h3,.save-row p,.save-row button,.save-overview-close { position:static; width:100%; height:auto; } .save-overview-summary { padding:12px; background:#1c3428; } .save-row { padding:12px; border:1px solid #65765a; background:#162c22; } .save-row h3 { font-size:19px; margin-bottom:6px; } .save-row p { font-size:13px; margin-bottom:12px; } .save-row button { min-height:44px; background:#2c4532; } .save-overview-close { min-height:44px; } }
@media(max-width:700px) { .generated-dialog .dialog-art { display:none; } }
.long-vault-values #vault-name { top:10%; } .long-vault-values #vault-work { top:35%; left:7%; right:7%; font-size:9px; white-space:nowrap; } .long-vault-values #vault-progress { top:65%; height:16%; }
@media(min-width:701px) { .generated-frame { aspect-ratio:var(--frame-ratio); min-height:0; } }
.generated-frame[data-screen="END-01"] #console-state { color:#243d29; }
/* Current stays dominant; next is a real, smaller sibling, never part of #target. */
.target-pair { position:absolute; left:32.95%; top:26.7%; width:55.3%; height:15%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 18px; align-content:center; } .target-pair .target { position:static; width:auto; height:auto; max-width:100%; margin:0; } #inline-next { color:#9ebc91; font:clamp(12px,2cqw,23px)/1.15 Consolas,monospace; overflow-wrap:anywhere; max-width:100%; }
@media(max-width:700px) { .target-pair { position:static; width:100%; height:auto; min-height:78px; margin-bottom:16px; gap:6px 14px; } .target-pair .target { min-height:0; } #inline-next { font-size:16px; } }

.typing-boost { position:absolute; left:27%; top:70.4%; width:65%; margin:0; text-align:center; color:#b9ce9a; font:clamp(9px,1.15cqw,12px)/1.2 Consolas,monospace; }
@media(max-width:700px) { .typing-boost { position:static; width:100%; order:6; color:#b9ce9a; font-size:12px; line-height:1.5; margin:8px 0; } }

#typing-status { margin:0; }
.upgrade-list { display:grid; gap:16px; margin:16px 0; font-variant-numeric:tabular-nums; }
.upgrade-card { padding:16px; border:1px solid var(--line); background:var(--panel); border-radius:5px; }
.upgrade-card h4 { margin:0 0 8px; font-size:18px; color:var(--signal); }
.upgrade-card p { margin:8px 0; overflow-wrap:anywhere; }
.upgrade-card button { margin-top:8px; min-height:44px; }
#worker-roadmap { padding-left:20px; color:var(--muted); }