:root{color-scheme:dark;--bg:#101215;--panel:#171a1e;--panel2:#1c2025;--border:#2b2e33;--muted:#92969f;--text:#edeef0;--accent:#eeb87b;--green:#88bba3;--blue:#86aabd;--side:220px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button{color:inherit}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{vertical-align:middle}h1,h2,h3,p{margin:0}button{border:0;background:none}button:hover{filter:brightness(1.12)}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:#131518;border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:30}.brand{height:88px;display:flex;align-items:center;gap:12px;padding:0 27px}.brand-symbol{width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;position:relative;overflow:hidden;transform:rotate(-25deg)}.brand-symbol:before{content:'';position:absolute;width:30px;height:35px;background:var(--accent);border-radius:50%;left:-12px;top:-4px}.brand-symbol:after{content:'';position:absolute;width:28px;height:30px;background:#131518;border-radius:50%;left:1px;top:-4px}.brand strong{font-size:22px;letter-spacing:5px;font-weight:600}.brand small{display:block;font-size:8px;letter-spacing:3.5px;color:var(--muted)}.nav-section{padding:25px 25px 9px;color:#696d76;text-transform:uppercase;font-size:9px;font-weight:600;letter-spacing:1.8px}.nav-section:first-of-type{padding-top:15px}.nav{padding:0 13px;display:grid;gap:5px}.nav button{display:flex;align-items:center;gap:13px;min-height:43px;border:1px solid transparent;border-radius:5px;color:#a0a4ac;text-align:left;font-size:12px;padding:10px 13px}.nav button svg{width:18px;height:18px}.nav button.active{color:var(--accent);background:#2b251f;border-color:#46382b}.nav button.active:after{content:'';height:5px;width:5px;border-radius:50%;background:var(--accent);margin-left:auto}.nav button:not(.active):hover{background:#202328;color:white}.badge{font-size:9px;background:#3c3025;color:var(--accent);padding:1px 5px;border-radius:3px;margin-left:auto}.side-bottom{margin-top:auto;padding:22px 23px}.world-status{border:1px solid var(--border);padding:12px;border-radius:6px;font-size:10px;color:var(--muted)}.world-status b{display:block;color:#b7bdc4;font-size:11px;font-weight:500;margin-bottom:4px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 8px #88bba32b}.side-help{display:flex;gap:9px;align-items:center;margin-top:22px;font-size:11px;color:var(--muted)}.shell{margin-left:var(--side)}.topbar{height:72px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 33px;gap:15px}.crumb{display:flex;align-items:center;gap:13px;font-size:11px;color:var(--muted)}.crumb strong{color:#d4d5d8;font-weight:500}.crumb svg{width:15px}.top-right{display:flex;align-items:center;gap:23px}.server-time{color:#8b8f98;font:10px monospace;letter-spacing:.5px}.notification{position:relative;padding:5px;color:#9c9fa7}.notification i{width:5px;height:5px;background:var(--accent);border-radius:50%;position:absolute;right:7px;top:4px}.profile{display:flex;gap:10px;align-items:center;border-left:1px solid var(--border);padding-left:22px;font-size:11px}.avatar{height:32px;width:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#c7b29a,#373b40);border:2px solid #5b5146;color:#16191d;font-weight:700;font-size:11px}.profile small{display:block;color:var(--muted);font-size:9px}.profile>svg{width:13px;margin-left:10px}.content{padding:29px 33px 25px;max-width:1750px;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:15px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--accent);font-weight:600;text-transform:uppercase}.heading h1{font-size:26px;letter-spacing:-.6px;font-weight:550;margin-bottom:5px}.subtitle{color:var(--muted);font-size:11px}.outline,.primary,.quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border:1px solid var(--border);border-radius:5px;font-size:11px;font-weight:500;min-height:36px}.outline{background:#191c20}.outline svg,.primary svg,.quiet svg{width:15px;height:15px}.primary{background:var(--accent);color:#282018;border-color:var(--accent)}.quiet{background:none;border:0;color:var(--muted)}.text-button{font-size:10px;color:var(--accent);padding:5px 0;display:flex;align-items:center;gap:7px}.text-button svg{width:13px;height:13px}.resources{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:22px}.resource{padding:15px 16px 12px;border:1px solid var(--border);border-radius:6px;background:linear-gradient(110deg,#1c2024,#171a1e)}.resource-top{display:flex;align-items:center;gap:7px;color:#b7bbc2;font-size:9px;letter-spacing:1px;text-transform:uppercase}.resource-top svg{width:15px;height:15px;color:var(--rcolor)}.resource-top span:last-child{margin-left:auto;font-size:8px;color:#727984}.resource-number{font-size:23px;margin-top:9px;letter-spacing:-.6px;font-weight:500}.resource-number small{font-size:10px;color:#737881;letter-spacing:0;font-weight:400}.resource-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:9px;color:var(--green)}.resource-bottom span:last-child{color:#737881;font-size:8px}.bar{height:3px;background:#30333a;border-radius:3px;overflow:hidden}.bar>i{height:100%;display:block;background:var(--accent);border-radius:3px}.resource .bar{margin-top:11px;height:2px}.resource .bar i{background:var(--rcolor);opacity:.65}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:22px}.left-col,.right-col{min-width:0;display:flex;flex-direction:column;gap:21px}.hero{min-height:300px;position:relative;border:1px solid #35373b;border-radius:7px;overflow:hidden;background:#23272b url('/static/mars-colony.jpg') center 49%/cover}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0c0e11ed 0%,#10121555 43%,#10121500 70%)}.hero-top,.hero-content{position:absolute;z-index:1;left:23px;right:23px}.hero-top{top:21px;display:flex;justify-content:space-between;align-items:center}.hero-tag{background:#181b21bb;border:1px solid #60636b5c;font-size:8px;letter-spacing:1.2px;padding:5px 9px;border-radius:3px;backdrop-filter:blur(5px)}.hero-tag svg{width:10px;height:10px;margin-right:4px}.hero-content{bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.hero-content .eyebrow{font-size:8px;color:#bec1c5;letter-spacing:2px}.hero h2{font-size:32px;line-height:1.25;font-weight:500;letter-spacing:-.8px;margin:8px 0 9px}.hero-meta{display:flex;gap:16px;color:#bcc0c6;font-size:9px}.hero-meta span{display:flex;align-items:center;gap:5px}.hero-meta svg{width:12px;height:12px}.hero .primary{font-size:10px;padding:9px 12px;white-space:nowrap}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title h2{font-size:13px;font-weight:550;display:flex;align-items:center;gap:8px}.section-title h2 svg{width:16px;height:16px;color:var(--muted)}.section-title small{font-size:9px;color:var(--muted);font-weight:400;margin-left:7px}.building-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.building-card{border:1px solid var(--border);background:var(--panel);border-radius:6px;padding:0;text-align:left;overflow:hidden;transition:transform .2s,border-color .2s;position:relative}.building-card:hover{border-color:#847057;transform:translateY(-2px)}.building-art{height:111px;background:radial-gradient(ellipse at 50% 80%,#47423855,transparent 70%),linear-gradient(135deg,#1b2026,#16191d);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.building-art:after{content:'';position:absolute;bottom:8px;left:0;right:0;height:45px;background:linear-gradient(25deg,transparent 48%,#72757b13 49%,transparent 50%),linear-gradient(-25deg,transparent 48%,#72757b13 49%,transparent 50%);background-size:35px 20px;transform:perspective(100px) rotateX(30deg)}.building-art>svg{width:100px;height:88px;stroke-width:.8;filter:drop-shadow(0 8px 5px #0007);z-index:1}.building-level{position:absolute;top:9px;left:10px;color:#a6a9b0;font-size:8px;background:#13161b88;border:1px solid #343a4080;padding:2px 5px;border-radius:3px;z-index:2}.building-info{padding:12px 11px}.building-info h3{font-size:10px;font-weight:500;white-space:nowrap}.building-info p{font-size:8px;color:var(--green);margin-top:5px;display:flex;align-items:center;gap:4px}.building-info p .dot{height:4px;width:4px;margin:0 2px 0 0}.panel{border:1px solid var(--border);border-radius:6px;background:var(--panel)}.panel-head{padding:15px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:9px}.panel-head h2{font-size:12px;font-weight:550;display:flex;align-items:center;gap:8px}.panel-head h2 svg{width:16px;height:16px;color:#a4a7ae}.panel-head small{font-size:9px;color:var(--muted)}.queue-content{padding:15px 17px}.queue-item{padding:0 0 15px;margin-bottom:14px;border-bottom:1px solid var(--border)}.queue-item:last-child{border-bottom:0;margin:0;padding:0}.queue-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.queue-icon{width:33px;height:33px;background:#302a22;border:1px solid #51402e80;border-radius:5px;display:grid;place-items:center;color:var(--accent)}.queue-icon svg{width:17px;height:17px}.queue-name{font-size:10px;font-weight:500;flex:1}.queue-name small{display:block;color:var(--muted);font-size:8px;font-weight:400;margin-top:3px}.queue-top>small{font:9px monospace;color:var(--accent)}.queue-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:6px}.empty-queue{display:flex;align-items:center;gap:11px;color:#727984;font-size:10px;min-height:49px}.empty-queue svg{width:23px;height:23px;color:#626b74}.empty-queue b{display:block;color:#bcc0c7;font-weight:400;margin-bottom:3px}.queue-add{width:100%;margin-top:15px;border:1px dashed #404248;padding:9px;border-radius:4px;color:#9da1a8;font-size:9px}.queue-add svg{width:12px;height:12px;margin-right:5px}.objective{border-color:#594631;background:linear-gradient(110deg,#26221d,#1b1c1e);padding:17px}.objective .eyebrow{font-size:8px;display:flex;gap:6px;align-items:center}.objective .eyebrow svg{height:13px;width:13px}.objective h3{font-size:13px;font-weight:500;margin-top:13px}.objective p{font-size:10px;line-height:1.8;color:#a3a09b;margin:8px 0 15px}.objective .reward{font-size:9px;color:#c8ad8c;display:flex;gap:12px;margin:12px 0}.objective .outline{width:100%;border-color:#56422e;color:var(--accent);background:#33291f;font-size:10px}.activity{padding:0 17px}.activity-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}.activity-row:last-child{border:0}.activity-row>span{height:27px;width:27px;display:grid;place-items:center;border-radius:50%;background:#252a2d;color:var(--green)}.activity-row svg{height:13px;width:13px}.activity-row p{font-size:10px}.activity-row small{font-size:8px;color:var(--muted);display:block;margin-top:4px}.activity-row time{margin-left:auto;font-size:8px;white-space:nowrap;color:var(--muted);padding-top:3px}.fleet-empty{text-align:center;padding:22px 14px;color:#7e848d;font-size:9px}.fleet-empty svg{display:block;margin:0 auto 9px;width:25px;height:25px;color:#606b75}.fleet-empty strong{display:block;color:#b0b6bf;font-weight:400;font-size:10px;margin-bottom:4px}.status-strip{display:flex;gap:24px;padding:13px 17px;border:1px solid var(--border);border-radius:5px;background:#14171a;color:var(--muted);font-size:9px;margin-top:22px;align-items:center}.status-strip>span:last-child{margin-left:auto}.status-strip b{font-weight:400;color:#b8bec5;margin-left:4px}.footer{display:flex;justify-content:space-between;color:#565d66;font-size:8px;margin-top:17px}.view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.detail-card{padding:22px}.detail-card h3{font-size:15px;font-weight:500;margin:10px 0}.detail-card p{font-size:11px;color:var(--muted);min-height:35px}.detail-card .row{margin-top:17px}.detail-card .building-art{margin:-22px -22px 15px}.tag{display:inline-block;border:1px solid #3b4047;border-radius:4px;color:#a8b4c0;font-size:8px;padding:3px 6px;letter-spacing:.4px}.row{display:flex;justify-content:space-between;gap:12px;align-items:center}.muted{color:var(--muted)}.costs{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.cost{font-size:10px;background:#21262c;border:1px solid #353a42;border-radius:4px;padding:5px 8px;color:#b8c1cc}.cost.bad{color:#e99989;border-color:#6a3e34}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:20px 0}.stat{background:#13171b;border:1px solid var(--border);border-radius:5px;padding:12px}.stat small{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}.stat b{font-size:18px;font-weight:500}.form-row{display:flex;gap:9px;align-items:end;margin:15px 0}.form-row>*{flex:1;min-width:0}label{display:block;font-size:10px;color:#adb3bc;margin-top:14px}input,select{display:block;width:100%;padding:11px 12px;margin-top:7px;border:1px solid #3a4048;border-radius:5px;background:#111519;color:#e4e7eb;font-size:12px}input:focus,select:focus{outline:1px solid var(--accent);border-color:var(--accent)}.unit-count{font-size:29px;color:var(--accent)}.modal-overlay{position:fixed;inset:0;background:#000b;backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal{width:490px;max-width:100%;max-height:90vh;overflow:auto;background:#1a1e23;border:1px solid #444a52;border-radius:10px;box-shadow:0 20px 100px #000a;padding:26px}.modal h2{font-size:22px;font-weight:500}.modal .close{float:right;color:var(--muted);padding:3px}.modal p{font-size:12px;color:var(--muted);line-height:1.8;margin:15px 0}.modal .primary.full{width:100%;margin-top:16px}.modal .building-art{height:140px;margin:16px 0}.modal .building-art svg{width:160px;height:125px}.modal pre{white-space:pre-wrap;word-break:break-word;color:#b8c7d0;background:#12171b;padding:15px;border-radius:4px;font:11px/1.8 monospace}.inline-error{background:#482a25;border:1px solid #795042;padding:10px;color:#f5b19e;border-radius:4px;margin-top:12px;font-size:11px}.map-container{height:560px;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,#2e3439,transparent 25%),radial-gradient(ellipse at 80% 70%,#292e32,transparent 40%),#161b20;border:1px solid var(--border);border-radius:8px;touch-action:none;cursor:grab}.map-container:active{cursor:grabbing}.map-space{position:absolute;inset:-200px;transform-origin:center;background-image:linear-gradient(#879eac13 1px,transparent 1px),linear-gradient(90deg,#879eac13 1px,transparent 1px);background-size:60px 60px}.map-space:after{pointer-events:none;content:'';position:absolute;inset:0;background:url('/static/mars-colony.jpg') center/cover;opacity:.06;filter:grayscale(1)}.map-marker{position:absolute;text-align:center;transform:translate(-50%,-50%) scale(var(--inv,1));z-index:2;font-size:10px;padding:6px;line-height:1.35;text-shadow:0 1px 3px #000d;pointer-events:none;box-sizing:content-box}
/* Only the plate is a target. A marker's box also contains its label, and if that label were
   clickable it would sit over a neighbour's plate — the map would respond to a marker that is not
   the one under the pointer. The label is decoration; the plate is the control. */
.map-marker svg{pointer-events:auto}
/* The label is taken out of flow so that showing it never moves the plate it belongs to. In flow, the
   marker box grows when a label appears, `translate(-50%,-50%)` re-centres the taller box, the plate
   slides out from under the cursor, pointerout hides the label again — a hover that flickers and then
   settles on hidden. The anchor is the plate, always. */
.map-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:max-content;max-width:170px;
  display:block;pointer-events:none;white-space:nowrap}
/* A label that would collide with a higher-priority one is suppressed, never discarded: it comes back
   on hover, on keyboard focus, and when the marker is tapped (uncharted signals reveal their
   coordinates that way). The icon, the click target and the accessible name are always present. */
.map-marker[data-collides] .map-label{display:none}
.map-marker[data-hover] .map-label,.map-marker[data-reveal] .map-label,
.map-marker[data-collides]:hover .map-label,.map-marker[data-collides]:focus-visible .map-label{display:block;background:#12161bf2;border:1px solid #4a5158;border-radius:4px;padding:5px 7px;z-index:8}
.map-marker[data-hover],.map-marker[data-reveal],.map-marker:hover,.map-marker:focus-visible{z-index:9}.map-marker svg{width:29px;height:29px;padding:5px;border:1px solid #566975;border-radius:6px;background:#222d35;color:#a6bbc5;display:block;margin:0 auto 7px}.map-marker.own svg{border-color:var(--accent);color:var(--accent);background:#352c21;box-shadow:0 0 30px #eeb87b22}.map-marker.unknown{opacity:.35}.map-marker small{display:block;color:var(--muted);font-size:8px}.map-controls{position:absolute;right:16px;bottom:16px;display:flex;gap:6px;z-index:4}.map-controls button{background:#20262e;border:1px solid #53616c;border-radius:4px;height:34px;width:34px}.map-legend{position:absolute;left:18px;bottom:18px;font-size:9px;z-index:4;color:var(--muted);background:#161a20db;padding:12px;border-radius:4px}.map-legend span{margin-right:12px}.list{display:grid;gap:11px}.list-item{padding:16px 19px;border:1px solid var(--border);background:var(--panel);border-radius:5px;display:flex;align-items:center;gap:15px;text-align:left;width:100%}.list-item h3{font-size:12px;font-weight:500}.list-item p{font-size:10px;color:var(--muted);margin-top:5px}.list-item .end{margin-left:auto}.list-item>svg{color:var(--accent)}.list-item.unread{border-left:2px solid var(--accent)}.tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.tabs button{padding:8px 15px;border:1px solid var(--border);border-radius:4px;font-size:10px;color:var(--muted)}.tabs button.active{color:var(--accent);border-color:#6b5138;background:#30271f}.empty-state{padding:55px 25px;text-align:center;border:1px dashed #3b434c;border-radius:6px;color:var(--muted)}.empty-state svg{width:36px;height:36px;margin-bottom:15px;color:#788b97}.empty-state h3{font-size:16px;color:#d9dfe6;font-weight:400;margin-bottom:9px}.empty-state p{font-size:12px;max-width:420px;margin:auto}.empty-state button{margin-top:20px}.message-meta{font-size:10px;color:var(--muted);margin-top:8px}.rank-number{font-size:19px;color:var(--accent);min-width:30px;font-family:monospace}.chat{max-height:320px;overflow:auto;display:flex;flex-direction:column-reverse;padding:18px;gap:16px}.chat p{font-size:11px;margin-top:4px;overflow-wrap:anywhere}.chat strong{font-size:10px;color:var(--accent);font-weight:400}.chat small{font-size:8px;color:var(--muted);margin-left:8px}#toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translate(-50%,15px);z-index:200;opacity:0;pointer-events:none;transition:all .2s;background:#273b33;border:1px solid #557d69;padding:13px 20px;border-radius:6px;color:#dfefe6;font-size:12px;max-width:450px;box-shadow:0 7px 35px #0009}#toast.visible{opacity:1;transform:translate(-50%,0)}#toast.error{background:#422c28;border-color:#8b5348}.boot{height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}.boot h1{font-size:25px;letter-spacing:8px;font-weight:400}.boot p{color:var(--muted);font-size:11px}.boot-orbit{width:55px;height:55px;border:1px solid #454039;border-top-color:var(--accent);border-radius:50%;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mobile-brand,.mobile-nav{display:none}.help-steps{display:grid;gap:15px;margin:20px 0}.help-steps div{display:flex;gap:14px;font-size:11px;color:var(--muted)}.help-steps b{color:var(--accent);font:13px monospace}.help-steps strong{display:block;color:var(--text);font-weight:500;margin-bottom:3px}.notice{border:1px solid #574933;background:#28241e;color:#c4b49d;border-radius:5px;padding:12px;font-size:11px;margin-bottom:18px}.wide-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(min-width:1600px){.hero{min-height:360px}.building-art{height:145px}.dashboard{grid-template-columns:minmax(0,1fr) 320px}.building-info h3{font-size:12px}.building-info p{font-size:10px}.queue-name{font-size:12px}.content{padding-top:35px}}@media(max-width:1200px){:root{--side:185px}.brand{padding:0 20px}.brand strong{font-size:19px}.brand-symbol{width:28px;height:28px}.brand small{font-size:7px;letter-spacing:2.5px}.content{padding:25px 23px}.topbar{padding:0 23px}.dashboard{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.resources{gap:9px}.resource{padding:12px 11px}.resource-number{font-size:20px}.building-grid{gap:8px}.building-info{padding:10px 7px}.building-info h3{font-size:9px}.hero{min-height:290px}.hero-content{left:18px;right:18px}.hero h2{font-size:29px}.hero-meta{gap:9px}.hero-content .primary{font-size:9px;padding:8px}.view-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.server-time{display:none}}@media(max-width:1020px){.dashboard{grid-template-columns:minmax(0,1fr)}.right-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.right-col .objective{grid-column:1/-1}.right-col .objective p{max-width:70%}.right-col .objective .outline{width:auto}.right-col .objective .reward{display:none}.hero{min-height:310px}.building-info h3{font-size:11px}.resource-number small{display:block;font-size:8px;margin-top:3px}.resource-top{font-size:8px;letter-spacing:.5px}.resource-top span:last-child{display:none}.hero-content .primary{font-size:11px;padding:10px 14px}.status-strip{gap:15px}.status-strip>span:last-child{display:none}}@media(max-width:760px){:root{--side:0px}.sidebar{display:none}.shell{margin:0}.topbar{height:62px;padding:0 18px}.crumb{display:none}.mobile-brand{display:flex;align-items:center;gap:9px;font-size:17px;letter-spacing:4px}.mobile-brand .brand-symbol{width:25px;height:25px}.profile{border:0;padding-left:0}.profile>span:not(.avatar),.profile>svg{display:none}.top-right{gap:14px}.content{padding:22px 16px 88px}.heading{margin-bottom:19px}.heading h1{font-size:23px}.heading .outline{font-size:9px;padding:8px 10px;min-height:32px}.subtitle{font-size:10px;max-width:245px}.resources{grid-template-columns:repeat(6,137px);overflow:auto;padding-bottom:8px;margin-bottom:13px;gap:9px;scrollbar-width:none}.resource{padding:12px}.resource-number{font-size:23px}.resource-number small{display:inline;font-size:8px;margin-left:3px}.resource-top{font-size:9px}.resource-bottom{font-size:8px}.resource-bottom span:last-child{display:none}.hero{min-height:285px}.hero-top{left:17px;right:17px;top:17px}.hero-content{bottom:18px;align-items:flex-start;flex-direction:column;gap:14px}.hero h2{font-size:30px}.hero-meta{gap:13px}.hero-content .primary{position:absolute;bottom:1px;right:0;padding:8px;font-size:0}.hero-content .primary svg{width:17px;height:17px}.hero-content .primary .button-label{display:none}.building-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.building-art{height:118px}.building-info{padding:12px}.building-info h3{font-size:12px}.building-info p{font-size:9px}.section-title h2{font-size:13px}.right-col{display:flex;flex-direction:column}.right-col .objective p{max-width:none}.right-col .objective .outline{width:100%}.activity-row{gap:9px}.activity-row time{font-size:8px}.activity-row p{font-size:9px}.status-strip{flex-wrap:wrap;gap:9px 20px;font-size:8px}.footer{font-size:7px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#161a1ff5;backdrop-filter:blur(15px);border-top:1px solid #3a4048;z-index:40;justify-content:space-around;padding:9px 4px max(9px,env(safe-area-inset-bottom))}.mobile-nav button{display:flex;align-items:center;flex-direction:column;gap:4px;color:#87929e;font-size:8px;min-height:39px;min-width:44px;padding:3px}.mobile-nav svg{height:19px;width:19px}.mobile-nav button.active{color:var(--accent)}.view-grid{grid-template-columns:1fr}.map-container{height:470px}.map-marker{font-size:8px}.map-legend{font-size:8px;bottom:62px}.list-item{padding:13px 12px;gap:9px}.list-item .outline{font-size:9px;padding:7px}.list-item h3{font-size:11px}.list-item p{font-size:9px}.modal-overlay{padding:13px}.modal{padding:20px;max-height:88vh}.modal h2{font-size:21px}#toast{bottom:80px;left:50%;width:calc(100% - 35px);font-size:11px}.tabs button{padding:9px 11px}.building-level{font-size:9px}.detail-card{padding:20px}.detail-card .building-art{margin:-20px -20px 15px}.heading .eyebrow{display:none}.form-row{flex-wrap:wrap}.form-row>*{min-width:100px}.topbar .avatar{height:30px;width:30px}}
/* Phase 1 (rewritten for balance 5.0.0): the storage & economy panel. Population, workforce and
   sustainability styling is gone with the mechanics; these same blocks now present the storage
   silo and per-resource stockpiles. Class names are kept so the rest of the theme is untouched. */
.population-panel{margin-bottom:22px}
.population-body{padding:17px 19px 15px}
.population-panel .stats{margin:0 0 14px}
.stat small{display:block;font-size:9px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.stat b{font-size:17px;font-weight:500;letter-spacing:-.3px}
.stat .staffing{margin-top:7px}
.pop-meter{margin:11px 0}
.pop-meter .row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin-bottom:6px;gap:10px}
.pop-meter .row b{color:var(--text);font-weight:500}
.pop-meter .bar{height:3px}
.bar>i.alt{background:var(--blue)}
.pop-foot{font-size:10px;color:var(--muted);line-height:1.7;margin:12px 0 0}
.staffing{display:block;font-size:9px;margin-top:6px;letter-spacing:.3px}
.stage-ok{color:var(--green)}
.stage-warn{color:var(--accent)}
.stage-bad{color:#e0918a}
.notice.bad{border-color:#795042;background:#2b201d;color:#f0c3b4}
.building-info .staffing{font-size:8px;margin-top:4px}
@media(max-width:760px){.population-body{padding:15px 14px 13px}.population-panel .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat b{font-size:15px}.pop-meter .row{font-size:9px}}

/* Phase 1b: resource production separated from crewed infrastructure */
.building-group{margin-bottom:26px}
.group-note{font-size:10px;color:var(--muted);margin:-3px 0 14px;max-width:820px;line-height:1.6}
.overview-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.overview-groups .building-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.group-label{display:block;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
@media(max-width:760px){.building-group{margin-bottom:20px}.overview-groups{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Server-earned progression and operator tools */
.mission-banner{padding:25px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:radial-gradient(ellipse at 90% 0,#48392755,transparent 65%),#191d21}.mission-banner h2{font-size:24px;font-weight:500;margin:10px 0}.mission-banner p{font-size:12px;color:var(--muted)}.mission-emblem{height:95px;width:95px;display:grid;place-items:center;border:1px solid #7d634440;border-radius:50%;color:var(--accent);flex-shrink:0;box-shadow:0 0 0 12px #b8935820}.mission-emblem svg{width:47px;height:47px;stroke-width:1}.mission-progress{font-size:10px;color:var(--muted);margin:18px 0 8px}.mission-status{display:block;font-size:10px;min-height:36px;padding-top:9px}.mission-card.claimed{opacity:.72}.mission-card.claimed .bar>i{background:var(--green)}.achievement-card{padding:20px;display:flex;gap:16px;align-items:center}.achievement-icon{height:43px;width:43px;background:#242930;color:#77848f;border:1px solid #3b454e;border-radius:9px;display:grid;place-items:center;flex-shrink:0}.achievement-card.unlocked .achievement-icon{color:var(--accent);border-color:#7d613d;background:#33291e}.achievement-card h3{font-size:12px;font-weight:500}.achievement-card p{font-size:10px;color:var(--muted);margin:5px 0}.achievement-card small{font-size:9px;color:var(--accent)}.admin-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.admin-grid code{font-size:9px;color:var(--muted);overflow-wrap:anywhere;display:block;max-width:100%;margin-top:5px}.admin-grid .list-item{min-width:0}.admin-grid .list-item>div{min-width:0}.audit-table{max-width:100%;overflow:auto}table{border-collapse:collapse;width:100%;font-size:10px}th,td{text-align:left;padding:12px 9px;border-bottom:1px solid var(--border);white-space:nowrap}th{color:var(--muted);font-weight:400}.compact-hud .resources{margin-bottom:24px}.compact-hud .resource{padding:10px 13px}.compact-hud .resource-number{font-size:19px;margin-top:5px}.compact-hud .resource .bar{margin-top:6px}.sidebar{overflow-y:auto}.side-bottom{min-height:165px}.resource-bottom span:last-child{color:#b89983}.mission-card .primary{min-height:42px}@media(max-width:760px){.mission-banner{padding:20px;gap:15px}.mission-banner h2{font-size:20px}.mission-banner p{font-size:10px}.mission-emblem{height:52px;width:52px;box-shadow:0 0 0 6px #b8935812}.mission-emblem svg{height:30px;width:30px}.admin-grid{grid-template-columns:1fr}.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-bottom span:last-child{display:inline;font-size:8px}.compact-hud .resource-number{font-size:18px}.compact-hud .resources{grid-template-columns:repeat(6,135px)}.mission-card p{min-height:0}.resource-top span:last-child{display:inline;font-size:7px}}

/* Milestone 3: the landing screen. Shown when a session has ended (signed out, expired, or a
   password change) so the player is offered a choice instead of being handed a new guest colony
   they did not ask for. A genuinely first visit still creates a guest colony directly. */
.landing{height:auto;min-height:100vh;padding:70px 18px 50px;gap:24px;justify-content:flex-start}
.landing h1{font-size:30px}
.landing-lead{max-width:520px;text-align:center;font-size:12px}
.landing-message{color:var(--accent);max-width:520px;text-align:center}
.landing-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(760px,100%)}
.landing-actions .panel{padding:22px;display:flex;flex-direction:column}
.landing-actions h2{font-size:15px;font-weight:550;margin-bottom:8px}
.landing-actions p{color:var(--muted);font-size:11px;line-height:1.7;margin-bottom:16px}
.landing-actions label{display:block;font-size:10px;color:var(--muted);margin-bottom:12px}
.landing-actions input{display:block;width:100%;margin-top:6px;padding:10px;background:#12161a;border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:12px}
.landing-actions button.full{width:100%;margin-top:auto}
.landing .inline-error{width:min(760px,100%)}
@media(max-width:760px){.landing{padding-top:46px}.landing-actions{grid-template-columns:1fr}}

/* Scouting intelligence (report briefing). The layout is a briefing, not a table dump: a header
   with the target and its intel quality, then one bordered section per intelligence category.
   Every row is a label/value pair, so nothing here depends on a payload's shape reaching the DOM
   and no row can be wider than its content: `minmax(0,1fr)` plus `overflow-wrap` is what keeps a
   long colony name from pushing the briefing sideways on a 360px phone. */
.intel{display:flex;flex-direction:column;gap:13px}
.intel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.intel-identity{min-width:0}
.intel-identity h3{font-size:19px;font-weight:550;margin:7px 0 4px;overflow-wrap:anywhere}
.intel-quality{min-width:148px;flex-shrink:0}
.intel-quality small{display:block;font-size:8px;letter-spacing:1.4px;color:var(--muted)}
.intel-quality b{font-size:22px;font-weight:550;display:inline-block;margin-right:6px;font-variant-numeric:tabular-nums}
.intel-quality .bar{margin-top:7px;height:3px}
.intel-section{border:1px solid var(--border);border-radius:6px;background:var(--panel);padding:12px 14px;min-width:0}
.intel-section h4{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:600}
.intel-section h4 svg{width:14px;height:14px}
.intel-note{font-size:9px;color:var(--muted);margin:-3px 0 9px;overflow-wrap:anywhere}
.intel-row{display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #23262b;font-size:11px;min-width:0}
.intel-row:last-child{border-bottom:0}
.intel-ico{color:var(--muted);display:flex}
.intel-ico svg{width:14px;height:14px}
.intel-label{color:#c3c7cd;min-width:0;overflow-wrap:anywhere}
.intel-value{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.intel-reason{grid-column:2/-1;font-size:9px;color:var(--muted)}
.intel-unknown .intel-value{color:var(--muted);font-weight:400}
.intel-chip{font-size:8px;letter-spacing:.6px;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.intel-chip-very-high,.intel-chip-high,.intel-chip-fresh,.intel-chip-strong,.intel-chip-light{color:#a8d5bd;border-color:#3f5c4c;background:#1d2a23}
.intel-chip-medium,.intel-chip-aging,.intel-chip-moderate{color:var(--accent);border-color:#5a4830;background:#2a2419}
.intel-chip-low,.intel-chip-very-low,.intel-chip-stale,.intel-chip-very-stale,.intel-chip-weak,.intel-chip-heavy{color:#e0a08a;border-color:#5d3b32;background:#2c201c}
.intel-chip-none,.intel-chip-unknown,.intel-chip-none-detected{color:var(--muted)}
.intel-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:9px;color:var(--muted);border-top:1px solid var(--border);padding-top:10px}
.intel-ref{margin-left:auto;font-family:monospace;letter-spacing:.4px}
.intel-loading{color:var(--muted);font-size:11px;padding:6px 0}
@media(max-width:760px){
 .intel-head{flex-direction:column;gap:10px}
 .intel-quality{width:100%}
 .intel-row{grid-template-columns:16px minmax(0,1fr) auto;row-gap:3px;font-size:12px}
 .intel-chip{grid-column:2/4;justify-self:start}
 .intel-value{white-space:normal;overflow-wrap:anywhere}
 .intel-reason{grid-column:2/4}
 .intel-ref{margin-left:0}
}
/* Found by the report's mobile audit: the dialog's close control was 26px of icon plus padding,
   which is below every touch-target guideline and is the one control a one-handed reader needs.
   The hit area grows; the glyph does not. Modal action buttons get the same treatment on phones,
   where the briefing's "Plan scout mission" and "Plan raid" are the primary controls. */
.close{float:right;color:var(--muted);padding:3px;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-8px -8px 0 0;border-radius:6px}
.close:hover{background:#252a30;color:var(--text)}
@media(max-width:760px){.modal .outline,.modal .primary{min-height:40px}}

/* Field manual: the counter matrix. Numbers are tabular so a column of multipliers lines up, and
   the strongest/weakest pairings carry a tone so the table can be read at a glance rather than
   decoded. Coloured cells never rely on colour alone: the ×N.NN value is always printed. */
.matrix{border-collapse:separate;border-spacing:3px;width:auto;min-width:min(100%,430px)}
.matrix th{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:4px 6px;font-weight:600}
.matrix thead th{text-align:center}
.matrix tbody th{text-align:left;color:#c3c7cd}
.matrix-cell{text-align:center;font-variant-numeric:tabular-nums;font-size:11px;padding:7px 10px;border-radius:4px;border:1px solid var(--border);white-space:nowrap}
.matrix-good{color:#a8d5bd;border-color:#3f5c4c;background:#1d2a23}
.matrix-bad{color:#e0a08a;border-color:#5d3b32;background:#2c201c}
.matrix-flat{color:var(--muted)}
.manual-class{padding:15px 17px}
.manual-class p{font-size:11px;color:#c3c7cd;margin-top:9px;overflow-wrap:anywhere}
.manual-class .row{align-items:center}
@media(max-width:760px){.matrix{min-width:0;width:100%}.matrix-cell{padding:6px 4px;font-size:10px}
 .matrix th{font-size:8px;padding:3px 2px}}
.guide-panel{padding:18px 20px;margin-bottom:18px}.guide-steps{display:grid;gap:12px;margin-top:4px}.guide-step{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--border);border-radius:6px;padding:12px;background:#15181c;min-width:0}.guide-step.current{border-color:#594631;background:linear-gradient(110deg,#26221d,#1b1c1e)}.guide-step.done{opacity:.72}.guide-step b{font-size:11px;font-weight:500;display:block}.guide-step p{font-size:10px;color:var(--muted);margin:4px 0 8px;overflow-wrap:anywhere}.guide-step small{font-size:9px;color:var(--muted)}.guide-step>div{min-width:0}.guide-index{height:24px;width:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:#242930;color:#a8b4c0;border:1px solid #3b454e}.guide-step.current .guide-index{background:#33291e;color:var(--accent);border-color:#7d613d}
.achievement-card{flex-wrap:wrap;align-items:flex-start}.achievement-card>div{min-width:0;flex:1}.achievement-card .costs{margin:10px 0}.achievement-card .cost{font-size:9px}.achievement-card .primary{width:100%;min-height:40px;margin-top:8px}.achievement-card .mission-status{padding-top:4px}.achievement-card.claimed small{color:var(--green)}
.outpost-card{line-height:1.65}.outpost-card small{font-size:10px;color:var(--muted)}.outpost-card b{font-size:12px}
@media(max-width:420px){.guide-step{grid-template-columns:22px minmax(0,1fr);gap:9px;padding:10px}.achievement-card{padding:16px;gap:12px}}

/* ===== Balance 5.0.0 economy display ===== */
/* The resource card shows the required detail (stored/capacity exact, production, consumption,
   net). Numbers are large and exact by design ("97,500,000 / 100,000,000"), so they wrap rather
   than shrink into ambiguity, and the compact form only appears in titles and tight chrome. */
.resource-flow{display:grid;gap:2px;margin-top:8px;font-size:9px;color:var(--muted)}
.resource-flow b{color:var(--text);font-weight:500;margin-left:3px;font-variant-numeric:tabular-nums}
.resource-flow .net-pos{color:var(--green)}
.resource-flow .net-neg{color:#d98d7c}
.resource-full{margin-top:6px;font-size:8px;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.resource-number{overflow-wrap:anywhere}
.resource-number small{letter-spacing:0}
.qty-presets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.qty-presets .outline{padding:7px 11px;font-size:10px;min-height:32px}
.pop-meter .row b{font-variant-numeric:tabular-nums}
@media(max-width:760px){
 .resources{grid-template-columns:repeat(6,158px)}
 .resource-number{font-size:17px}
 .resource-number small{font-size:9px}
 .resource-flow{font-size:8px}
}
@media(max-width:420px){
 .resources{grid-template-columns:repeat(6,148px)}
 .resource-number{font-size:15px}
}