:root{--color-bg-app:#062b45;--color-bg-board:#0e4c6e;--color-bg-bay:#1b7fa8;--color-bg-surface:#0e4c6e;--color-bg-modal:#062b45;--color-cell-open:#0e4c6e;--color-cell-locked:#6e8794;--color-border-card:#e8d9b5;--color-text-primary:#f2f8fb;--color-text-secondary:#6e8794;--color-text-on-primary:#062b45;--color-text-disabled:#7e9aab;--color-coins:#ffc64a;--color-amber:#b9a7f0;--color-sun:#3fc1e0;--color-xp:#2fae7e;--color-success:#2fae7e;--color-error:#e4574c;--color-warning:#f2a93b;--color-disabled-fill:#28536b;--color-locked:#6e8794;--color-action-primary:#ff6b4a;--color-action-secondary:transparent;--color-focus-ring:#7fe3ff;--color-overlay-modal:#062b4599;--color-overlay-ftue:#04263bb3;--ftue-breathe:1.2s;--shadow-card:0 2px 6px #062b454d;--shadow-modal:0 8px 24px #062b4573;--font-display:700 32px/36px system-ui, sans-serif;--font-title:700 24px/28px system-ui, sans-serif;--font-modal-title:700 20px/24px system-ui, sans-serif;--font-hud-number:700 18px/24px system-ui, sans-serif;--font-body:400 15px/20px system-ui, sans-serif;--font-label:600 15px/20px system-ui, sans-serif;--font-caption:400 13px/16px system-ui, sans-serif;--font-timer:600 13px/16px system-ui, sans-serif;--font-micro:500 11px/16px system-ui, sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-chip:4px;--radius-cell:8px;--radius-card:12px;--radius-modal:20px;--stroke-hairline:1px;--stroke-card:2px;--frame-width:375px;--frame-height:812px;--safe-top:44px;--safe-bottom:34px;--hud-height:92px;--orders-strip-height:162px;--ftue-bar-height:96px;--board-cell:47px;--board-gap:3px;--btn-primary-height:52px;--btn-secondary-height:44px;--touch-min:44px}[data-surface=orders]{--color-bg-app:#04263b;--color-bg-surface:#0b4f6c;--color-bg-modal:#04263b;--color-border-card:#1b98c4;--color-text-primary:#e8f4f8;--color-text-secondary:#8aa5b4;--color-text-on-primary:#04263b;--color-coins:#f2b33d;--color-amber:#b07ce8;--color-sun:#5ac8fa;--color-success:#3fd0a6;--color-error:#e5624a;--color-locked:#8aa5b4;--color-action-primary:#f2b33d}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--color-text-primary);font:var(--font-body);background:#101418}.frame{width:var(--frame-width);height:var(--frame-height);background:var(--color-bg-app);color:var(--color-text-primary);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow:hidden}.btn{min-height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--radius-cell);font:var(--font-label);cursor:pointer;padding:0 var(--space-4);border:none}.btn-primary{min-height:var(--btn-primary-height);min-width:var(--touch-min);border-radius:var(--radius-cell);font:var(--font-label);background:var(--color-action-primary);color:var(--color-text-on-primary);cursor:pointer;padding:0 var(--space-4);border:none}.btn-primary:disabled{background:var(--color-disabled-fill);color:var(--color-text-disabled);cursor:default}.btn-secondary{min-height:var(--touch-min);min-width:var(--touch-min);border:var(--stroke-card) solid var(--color-text-primary);border-radius:var(--radius-cell);color:var(--color-text-primary);font:var(--font-label);cursor:pointer;padding:0 var(--space-4);background:0 0}.scrim{background:var(--color-overlay-modal);z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ftue-overlay-root{z-index:40;pointer-events:none;position:absolute;inset:0}.ftue-scrim{background:var(--color-overlay-ftue);pointer-events:auto;position:absolute;inset:0}.ftue-rim{border:2px solid var(--color-sun);border-radius:var(--radius-card);box-shadow:0 0 8px var(--color-sun);pointer-events:none;animation:ftue-breathe var(--ftue-breathe) ease-in-out infinite;position:absolute}@keyframes ftue-breathe{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}.ftue-hand{pointer-events:none;animation:ftue-hand-bob var(--ftue-breathe) ease-in-out infinite;font-size:28px;line-height:1;position:absolute}@keyframes ftue-hand-bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-8px)}}.ftue-hand-drag{animation:ftue-hand-drag var(--ftue-breathe) ease-in-out infinite}@keyframes ftue-hand-drag{0%{transform:translate(-50%,-50%)}to{transform:translate(calc(-50% + var(--ftue-drag-dx)), calc(-50% + var(--ftue-drag-dy)))}}.ftue-ripple{border:2px solid var(--color-sun);pointer-events:none;border-radius:50%;width:12px;height:12px;margin:-6px 0 0 -6px;animation:.6s ease-out forwards ftue-ripple;position:absolute}@keyframes ftue-ripple{0%{opacity:.8;transform:scale(.4)}to{opacity:0;transform:scale(3)}}.ftue-dialog{min-height:var(--ftue-bar-height);padding:var(--space-2) var(--space-3);padding-bottom:calc(var(--space-2) + var(--safe-bottom));background:var(--color-bg-modal);color:var(--color-text-primary);border-top:var(--stroke-card) solid var(--color-border-card);box-shadow:var(--shadow-modal);pointer-events:auto;align-items:center;gap:var(--space-3);animation:.6s ease-in-out ftue-dialog-blink;display:flex;position:absolute;left:0;right:0}.ftue-dialog-bottom{bottom:0}.ftue-dialog-top{top:var(--hud-height);border-top:none;border-bottom:var(--stroke-card) solid var(--color-border-card)}@keyframes ftue-dialog-blink{0%,to{box-shadow:var(--shadow-modal)}50%{box-shadow:var(--shadow-modal), 0 0 0 3px var(--color-focus-ring)}}.ftue-dialog button{pointer-events:auto}.ftue-dialog-portrait{border-radius:var(--radius-card);border:var(--stroke-card) solid var(--color-border-card);background:var(--color-bg-surface);width:56px;height:56px;color:var(--color-text-primary);font:var(--font-caption);flex:none;justify-content:center;align-items:center;display:flex}.ftue-dialog-body{gap:var(--space-2);flex-direction:column;flex:auto;min-width:0;display:flex}.ftue-dialog-text{font:var(--font-body);color:var(--color-text-primary);overflow-wrap:anywhere;word-break:break-word;margin:0}.ftue-dialog-footer{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.ftue-dialog-skip-slot{min-width:0;display:inline-flex}.ftue-dialog-skip{padding:var(--space-1) 0;color:var(--color-text-secondary);font:var(--font-caption);cursor:pointer;background:0 0;border:none;text-decoration:underline}.ftue-dialog-continue{min-height:var(--btn-secondary-height)}.ftue-dialog-counter{color:var(--color-text-secondary);font:var(--font-caption);flex:none}.btn-locked{opacity:.5;color:var(--color-locked)}.btn-shake{animation:.3s ease-in-out ftue-shake}@keyframes ftue-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.modal{background:var(--color-bg-modal);border-radius:var(--radius-modal);width:335px;padding:var(--space-4)}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.hud{min-height:var(--hud-height);padding:var(--space-2) var(--space-3);background:var(--color-bg-app);border-bottom:var(--stroke-hairline) solid var(--color-border-card)}.hud-row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.hud-currencies{font:var(--font-hud-number);margin-bottom:var(--space-2)}.hud-cur .coins{color:var(--color-coins)}.xp-bar{border-radius:var(--radius-pill);background:var(--color-disabled-fill);flex:1;min-width:60px;height:12px;overflow:hidden}.xp-fill{background:var(--color-xp);height:100%;display:block}.hud-rail{gap:var(--space-1);display:flex}.board{padding:var(--space-3);background:var(--color-bg-board);flex:1;overflow:auto}.board-grid{grid-template-columns:repeat(var(--board-cols,7), var(--board-cell));gap:var(--board-gap);justify-content:center;display:grid}.cell{width:var(--board-cell);height:var(--board-cell);border-radius:var(--radius-cell);font:var(--font-caption);justify-content:center;align-items:center;padding:0;display:flex}.cell-open{background:var(--color-cell-open);border:var(--stroke-hairline) solid #ffffff0f}.cell-locked{background:var(--color-cell-locked);opacity:.5}.cell-item{background:var(--color-bg-surface);border:var(--stroke-card) solid var(--color-border-card);color:var(--color-text-primary);cursor:grab;touch-action:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:2px;display:flex;overflow:hidden}.cell-item .item-name{font:var(--font-micro);text-overflow:ellipsis;max-width:100%;line-height:1.05;overflow:hidden}.cell-item .item-tier{font:var(--font-micro);opacity:.7}.cell-generator{background:var(--color-action-primary);color:var(--color-text-on-primary);font:var(--font-micro);cursor:grab;touch-action:none;line-height:1.1}.board-feedback{min-height:16px;color:var(--color-error);font:var(--font-caption)}.cell-dragging{opacity:.35}.cell-drop-target{outline:var(--stroke-card) solid var(--color-action-primary);outline-offset:-2px}.drag-ghost{width:var(--board-cell);height:var(--board-cell);border-radius:var(--radius-cell);background:var(--color-bg-surface);border:var(--stroke-card) solid var(--color-border-card);color:var(--color-text-primary);text-align:center;pointer-events:none;z-index:60;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:2px;display:flex;position:fixed;overflow:hidden;transform:translate(-50%,-50%)}.drag-ghost-return{transition:left .25s ease-out,top .25s ease-out}.work-strip{margin-top:var(--space-3)}.work-strip-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.work-strip-card{border-radius:var(--radius-card);border:var(--stroke-card) solid var(--color-border-card);background:var(--color-bg-surface);min-width:92px;color:var(--color-text-primary);padding:var(--space-2);touch-action:none;flex-direction:column;flex:none;gap:2px;display:flex}.work-strip-target{outline:var(--stroke-card) solid var(--color-action-primary);outline-offset:-2px}.work-strip-name{font:var(--font-micro);line-height:1.05}.work-strip-need{font:var(--font-micro);opacity:.7}.orders-strip{min-height:var(--orders-strip-height);gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-app);border-top:var(--stroke-hairline) solid var(--color-border-card);display:flex;overflow-x:auto}.order-card{background:var(--color-bg-surface);border:var(--stroke-card) solid var(--color-border-card);border-radius:var(--radius-card);min-width:128px;padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.order-open{color:inherit;text-align:left;cursor:pointer;background:0 0;border:none}.order-reqs{margin:0;padding:0;list-style:none}.camp-map{padding:var(--space-3);background:var(--color-bg-bay);flex:1;overflow:auto}.camp-strips{gap:var(--space-2);flex-direction:column;display:flex}.region-strip{padding:var(--space-3);border-radius:var(--radius-card);color:var(--color-text-primary);font:var(--font-label);cursor:pointer;border:none;justify-content:space-between;display:flex}.region-state-0{background:#2a4a63}.region-state-1{background:#1b7fa8}.region-state-2{background:var(--color-success);color:var(--color-text-on-primary)}.camp-buildings{gap:var(--space-2);margin:var(--space-3) 0;flex-wrap:wrap;display:flex}.toast{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);background:var(--color-bg-surface);color:var(--color-text-primary);font:var(--font-caption)}.loading-screen{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-4);text-align:center;background:var(--color-bg-app);flex-direction:column;flex:1;display:flex}