@font-face{font-family:Scale;src:url(./assets/cartridge-pixel.ttf) format("truetype");font-display:swap}
:root{color-scheme:dark;--sea:#102732;--deep:#12232c;--panel:#1c3540;--line:#527573;--gold:#ffcd8d;--text:#fff0d3;--muted:#c5dfd5;--lime:#c9e59a;--pixel:Scale,"Courier New",monospace;--type:"Courier New",monospace}
*{box-sizing:border-box}
html{background:var(--sea)}
body{margin:0;min-height:100dvh;color:var(--text);background:radial-gradient(ellipse at 75% 5%,#31504b,#19333d 45%,#102732 82%);font:14px/1.34 var(--type)}
img{display:block;image-rendering:pixelated}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{min-width:44px;min-height:44px;border:1px solid #5d8480;border-radius:0;padding:5px 8px;background:#294750;color:var(--text);font:700 13px/1.15 var(--type);touch-action:manipulation;cursor:pointer}
button:disabled{background:#213942;color:#adc1b8;border-color:#45615f;cursor:default}
button:not(:disabled):active{background:#3f6864}
button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
button.primary{background:var(--gold);color:#24313a;border-color:#ffe6a9;box-shadow:inset 0 -4px #be8d65}
button.primary:active{background:#ffb775}
button small{display:block;margin-top:3px;font:500 11px/1.14 var(--type)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font:400 17px/1.13 var(--pixel)}
h3{font-size:12px}
p{color:var(--muted)}
.wrap{width:min(100%,1060px);margin:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.site{display:flex;align-items:center;justify-content:space-between;gap:8px}
.site a{display:flex;align-items:center;gap:8px;min-height:44px;font:14px var(--pixel)}
.site a img{border:1px solid var(--line)}
.site>span{font-size:12px;color:var(--muted);display:none}
.foot{padding:8px 0}
.foot>span{display:block;font:9px var(--pixel)}
#cabinet{background:var(--panel);border:1px solid var(--line);margin-top:5px;box-shadow:0 0 0 2px #0b222d,0 15px 35px #071b25a0}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding-left:9px;background:#294c51;border-bottom:1px solid var(--line);font:11px var(--pixel);color:var(--gold)}
.bar button{padding:0;border-width:0 0 0 1px;background:#244047}
.bar svg{fill:none;stroke:currentColor;stroke-width:2;width:20px;height:20px;vertical-align:middle}
#screen{outline:none;min-height:0}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);background:#263f48}
.tools button{border-width:0 1px 0 0;background:#263f48}
.tools button:last-child{border-right:0}
.tools button[aria-pressed=false]{color:#ffc1a3}
.cover{position:relative;isolation:isolate;min-height:166px;aspect-ratio:1.59;overflow:hidden;background:#132e44}
.cover img,.cover canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101c36ba,transparent 70%),linear-gradient(0deg,#13243b 0%,transparent 50%);pointer-events:none}
.title-copy{position:absolute;z-index:1;left:11px;bottom:10px}
.title-copy h1{font-size:clamp(33px,10vw,60px);line-height:.95;color:#fff0b9;text-shadow:3px 3px #467976,5px 4px #132539}
.title-copy p{margin-top:8px;color:#ffedc0;font-weight:700;font-size:13px}
.menu{display:grid;gap:5px;padding:7px;border-top:1px solid var(--line);background:#213d48}
.menu>.primary{min-height:49px}
.row{display:flex;gap:5px;flex-wrap:wrap}
.row>button{flex:1}
.panel,.field{display:grid;gap:7px;padding:8px}
.panel>p,.record-list p{font-size:13px}
.survey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.survey{text-align:left;padding:4px;min-width:0}
.survey span,.survey small{padding:2px 3px}
.thumbnail{height:55px;margin-bottom:4px;border:1px solid #507c79;background:var(--art) center/cover;image-rendering:pixelated}
.survey:disabled .thumbnail{filter:saturate(.45) brightness(.66)}
.look,.orders{display:grid;gap:5px;min-width:0;align-content:start}
.weather{min-height:54px;padding:5px 7px;border:1px solid var(--line);background-image:linear-gradient(90deg,#102732ea,#122a3690 65%,#122a3625),var(--art);background-position:center;background-size:cover;image-rendering:pixelated}
.weather h2{color:#ffdf9e;margin:2px 0}
.weather p{font-size:11px;color:#f6e3be}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.stats>div{background:#243f49;border:1px solid #486e71;min-width:0;text-align:center;display:grid;padding:3px 1px;line-height:1.1}
.stats span,.colonies small,.prediction span{font-size:10px;color:#d1e3da}
.stats strong{font-size:15px;color:var(--gold)}
.colonies{display:grid;gap:3px}
.colonies article{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:4px;padding:3px 4px;border:1px solid #43686c;background:#203741;min-height:48px}
.colonies h3{color:#fbe2b7;font-size:11px}
.colonies p{font-size:12px;color:#f6eedb}
.specimen{overflow:hidden;height:39px;display:grid;place-items:center;background:#172e38}
.specimen img{width:calc(30px * var(--size) / 100);height:auto;max-height:38px;object-fit:contain}
.prediction{display:grid;text-align:right;color:var(--lime);font-size:12px;white-space:nowrap}
.orders>h3{margin-top:2px}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.action{min-height:45px;padding:4px}
.action[aria-pressed=true]{background:#39625d;border-color:#c0db9a;box-shadow:inset 0 -3px #9bbd82}
.action[aria-pressed=true] small{color:#e1f2ca}
.forecast{min-height:31px;color:#e2eccf;font:600 11px/1.2 var(--type)}
.forecast span{color:var(--gold)}
.report-art{min-height:109px;display:grid;align-content:end}
.results{grid-template-columns:repeat(3,minmax(0,1fr))}
.result-list{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.result-list li{padding:5px;border:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:11px;color:var(--muted)}
.result-list strong{color:var(--gold)}
.record-list{display:grid;gap:5px}
.record{text-align:left}
dialog{color:var(--text);background:#27474c;border:1px solid #8ead96;box-shadow:0 0 0 3px #10242f;padding:12px;width:min(500px,calc(100vw - 22px));max-height:calc(100dvh - 22px);overflow:auto}
dialog::backdrop{background:#071922cc}
dialog h2,dialog p{margin-bottom:8px}
.journal{margin:3px 0 8px;display:grid;gap:4px}
.journal article{padding:5px 0;border-top:1px solid var(--line);font-size:12px}
.journal p{margin:2px 0}
body.lock{overflow:hidden}
#cabinet.expanded,#cabinet:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;margin:0;z-index:10;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:env(safe-area-inset-top) max(2px,env(safe-area-inset-right)) env(safe-area-inset-bottom) env(safe-area-inset-left);border:0}
.expanded #screen,#cabinet:fullscreen #screen{overflow:auto;overscroll-behavior:contain}
.expanded .cover{min-height:0;max-height:calc(100dvh - 240px)}
@media(min-width:550px){
 .site>span{display:block}
 .title-layout{display:grid;grid-template-columns:minmax(0,1.64fr) minmax(165px,1fr)}
 .menu{align-content:center;border-top:0;border-left:1px solid var(--line);padding:12px}
 .title-copy{left:17px;bottom:15px}
 .field{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:9px;padding:10px}
}
@media(min-width:780px){
 .wrap{padding-top:16px}
 .title-copy h1{font-size:74px}
 .title-copy p{font-size:15px}
 .field{padding:13px}
 .weather{min-height:116px;padding:9px}
 .colonies article{min-height:57px}
}
@media(max-width:420px) and (orientation:portrait){
 #cabinet:has(.field){height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 49px);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 #cabinet:has(.field) #screen{overflow:auto}
 #cabinet.expanded:has(.field){height:100dvh}
 .field{padding:5px;gap:4px}
 .look,.orders{gap:3px}
 .weather{min-height:47px;padding:3px 5px}
 .weather h2{font-size:14px}
 .colonies article{min-height:42px}
 .specimen{height:34px}
 .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
 .action{min-height:44px}
}
@media(orientation:landscape) and (max-height:445px){
 .site{display:none}
 .wrap{padding-top:max(4px,env(safe-area-inset-top))}
 #cabinet{margin:0;height:calc(100dvh - max(4px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 #screen{overflow:auto;overscroll-behavior:contain}
 .title-layout{min-height:100%}
 .cover,.expanded .cover{aspect-ratio:auto;min-height:0;max-height:none}
 .title-copy h1{font-size:clamp(29px,7vw,56px)}
 .field,.panel{padding:4px;gap:4px}
 .look,.orders{gap:3px}
 .weather{min-height:43px;padding:3px 6px}
 .weather h2{font-size:14px}
 .colonies article{min-height:37px;padding:2px 4px}
 .specimen{height:30px}
 .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
 .action{min-height:44px;font-size:11px}
 .forecast{min-height:25px}
}

.action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.forecast-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center}
.forecast{min-height:0}
@media(max-width:420px) and (orientation:portrait){
 .action-grid button{font-size:11px}
 .action-grid button small{font-size:10px}
 .colonies article{min-height:40px;padding-block:2px}
}

#screen.committed .specimen img{animation:arrive .32s steps(4,end) both}
#screen.committed .prediction{animation:settle .35s steps(4,end) both}
#cabinet.quiet #screen.committed .specimen img{animation:none}
#cabinet.quiet #screen.committed .prediction{animation:none}
@keyframes arrive{from{transform:translateY(4px) scale(.86)}to{transform:translateY(0) scale(1)}}
@keyframes settle{from{opacity:.45}to{opacity:1}}