:root{--paper:#edf4f8;--ink:#25495e;--muted:#607f92;--line:#cbdae4;--accent:#276f96;--panel:#f2f8fc;--field:#155b83;--field-deep:#10486d;--theme-color:#edf4f8;--player:#c5f4ff;--hostile:#ffc5a3;--drop:#b7efd8}
[data-theme="dark"]{--paper:#102330;--ink:#d9eaf4;--muted:#8daabd;--line:#294453;--accent:#8ec8e4;--panel:#172e3c;--field:#103c5b;--field-deep:#0b2c46;--theme-color:#102330;--player:#bceaff;--hostile:#ffb593;--drop:#a7dfc8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:var(--ink);border:1px solid var(--line);background:var(--panel);border-radius:5px;min-height:44px;min-width:44px;padding:8px 14px;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.55;cursor:default}.primary{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:650}[hidden]{display:none!important}.page{max-width:1000px;margin:0 auto;padding:18px 24px max(18px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}.back-link{display:flex;min-height:44px;min-width:66px;align-items:center;text-decoration:none;color:var(--muted);font:600 11px ui-monospace,monospace;letter-spacing:.04em}.brand{flex:1;min-width:0}.brand h1{font-size:18px;line-height:1.3;margin:0;font-weight:650;letter-spacing:.02em}.brand span{font:9px ui-monospace,monospace;letter-spacing:.2em;color:var(--muted)}.topbar button{padding:8px 10px;font-size:11px}.theme-toggle{position:static;transform:none;z-index:auto;min-height:44px;min-width:54px;background:var(--panel);font-size:9px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:5px;padding:8px 9px}.theme-toggle[data-mode]::before{display:none}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px auto 0;max-width:680px}.hud div{display:flex;justify-content:space-between;gap:5px;align-items:baseline}.hud span{font-size:11px;color:var(--muted)}.hud b{font:600 16px ui-monospace,monospace}.field-meta{max-width:680px;margin:10px auto 7px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:.025em}.arena-shell{width:min(100%,calc(100dvh - 302px));max-width:680px;min-width:240px;margin-inline:auto}.arena{position:relative;width:100%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--field),var(--line) 25%);border-radius:7px;overflow:hidden;background:var(--field)}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.panel{position:absolute;inset:2px;background:color-mix(in srgb,var(--panel) 97%,transparent);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;gap:10px;overflow-y:auto;color:var(--ink)}.panel h2{font-size:27px;font-weight:650;letter-spacing:.01em;margin:0}.panel p{max-width:330px;font-size:13px;color:var(--muted);margin:0 0 6px}.panel button,.panel select{width:min(100%,300px)}.hero-mark{width:70px;height:60px;color:var(--accent)}.eyebrow{font:600 9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}.chassis-label{font-size:11px;color:var(--muted)}.title-panel select{font-size:12px}.upgrade-panel{gap:9px;justify-content:center}.upgrade-panel h2{font-size:23px}.upgrade-panel .upgrade-note{font-size:11px}.upgrade-choices{display:grid;gap:9px;width:min(100%,420px)}.upgrade-choice{width:100%!important;display:grid;grid-template-columns:46px 1fr;text-align:left;align-items:center;gap:10px;min-height:83px;padding:10px 12px}.upgrade-choice svg{width:42px;height:42px;color:var(--accent)}.upgrade-choice b{font-size:14px;font-weight:650;display:block}.upgrade-choice span span{font-size:11px;color:var(--muted);display:block;line-height:1.45;margin-top:3px}.growth-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:10px;color:var(--muted);white-space:nowrap}.growth-track{height:3px;background:var(--line);flex:1;border-radius:2px;overflow:hidden}.growth-track i{height:100%;display:block;background:var(--accent);width:0;transition:width .2s}.build-row{max-width:680px;display:flex;align-items:center;gap:12px;margin:10px auto;min-height:28px}.build-chips{display:flex;gap:5px;flex-wrap:wrap;font-size:10px}.build-chips span{border:1px solid var(--line);border-radius:4px;padding:2px 7px}.build-chips .dormant{opacity:.55;border-style:dashed}.build-chips .synergy{color:var(--accent);border-color:var(--accent)}.control-strip{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:14px}.control-copy{flex:1;min-width:0}.control-copy>b{display:block;font-size:11px;font-weight:600;letter-spacing:.035em}.control-copy>span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.control-copy>.mobile-copy{display:none}.action-buttons{display:flex;gap:8px;margin-top:8px}.action-buttons button{min-width:104px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px}.action-buttons small{font:9px ui-monospace,monospace;color:var(--muted)}.joystick{display:none;position:relative;border:1px solid var(--line);background:var(--panel);border-radius:50%;width:108px;height:108px;flex:0 0 108px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.stick-cross{position:absolute;inset:0;display:grid;place-content:center;color:var(--line);font-size:38px;font-weight:200}.joystick i{position:absolute;left:50%;top:50%;width:43px;height:43px;transform:translate(-50%,-50%);border:1px solid var(--accent);border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,var(--panel));pointer-events:none}.joystick.active{border-color:var(--accent)}footer{text-align:center;color:var(--muted);font-size:9px;line-height:1.6;margin-top:14px}
@media(max-width:680px),(pointer:coarse){.page{padding:10px 12px max(14px,env(safe-area-inset-bottom))}.topbar{gap:6px;padding-bottom:8px}.back-link{min-width:49px;font-size:10px}.brand h1{font-size:15px}.brand span{font-size:7px;letter-spacing:.1em}.topbar button{padding:6px 7px;font-size:10px}.theme-toggle{min-width:44px;min-height:44px}.hud{gap:10px;margin-top:10px}.hud div{display:block}.hud span{display:block;font-size:9px}.hud b{font-size:16px}.field-meta{margin-top:8px;font-size:9px}.arena-shell{width:min(100%,calc(100dvh - 330px));min-width:240px}.panel{padding:14px;gap:7px}.panel h2{font-size:23px}.panel p{font-size:11px;margin-bottom:1px}.hero-mark{width:56px;height:44px}.eyebrow{font-size:8px;letter-spacing:.07em}.title-panel select{font-size:11px}.upgrade-panel h2{font-size:19px}.upgrade-panel .upgrade-note{font-size:10px}.upgrade-choices{gap:6px}.upgrade-panel .upgrade-choice{min-height:64px}.upgrade-choice{min-height:74px;padding:8px 9px;grid-template-columns:35px 1fr;gap:8px}.upgrade-choice svg{width:34px;height:34px}.upgrade-choice b{font-size:12px}.upgrade-choice span span{font-size:10px}.growth-row{gap:7px;font-size:9px}.build-row{margin:8px auto;gap:8px}.build-chips{font-size:9px}.build-chips span{padding:2px 5px}.control-strip{gap:12px}.joystick{display:block}.control-copy>.desktop-copy{display:none}.control-copy>.mobile-copy{display:block;font-size:10px}.control-copy>b{font-size:10px}.action-buttons{gap:7px;margin-top:8px}.action-buttons button{flex:1;min-width:0;padding:7px 8px;font-size:10px;gap:5px;min-height:44px}.action-buttons small{font-size:8px}footer{font-size:8px;margin-top:10px}}
@media(min-width:901px) and (min-height:521px){
  .page{display:grid;grid-template-columns:minmax(0,640px) minmax(200px,260px);gap:8px 24px;align-items:start}
  .topbar{grid-column:1/-1;grid-row:1}
  .hud{grid-column:1;grid-row:2;margin:0;width:min(100%,calc(100dvh - 216px));max-width:none}
  .field-meta{grid-column:1;grid-row:3;margin:0;width:min(100%,calc(100dvh - 216px));max-width:none}
  .arena-shell{grid-column:1;grid-row:4;width:min(100%,calc(100dvh - 216px));margin:0;max-width:none}
  .build-row{grid-column:2;grid-row:4;align-self:start;display:block;margin:0;max-width:none}
  .build-chips{margin-top:8px;gap:7px;font-size:11px}
  .control-strip{grid-column:2;grid-row:4;align-self:end;margin:0;max-width:none;align-items:start;padding-top:4px}
  .control-copy>b{font-size:12px;line-height:1.8}.control-copy>span{font-size:11px;line-height:1.9;margin-top:8px}
  .action-buttons{flex-direction:column;margin-top:18px}.action-buttons button{width:100%;font-size:12px;min-height:48px}
  footer{grid-column:1/-1;grid-row:5;margin:0}
}
@media(max-width:680px),(pointer:coarse){
  #dashClock[data-ready="true"],#skillClock[data-ready="true"]{display:none}
  .action-buttons{gap:10px}.action-buttons button{min-height:48px;font-size:11px}
  .hud span,.field-meta{font-size:10px}.control-copy>.mobile-copy{font-size:11px}
}
.brand h1,.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand span{display:block}
.topbar .clear-data-toggle{position:static;transform:none;min-height:44px;min-width:44px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;letter-spacing:0;padding:6px;font-size:8px}
.panel,.upgrade-panel{justify-content:safe center}
.field-meta{display:grid;grid-template-columns:minmax(0,1fr) auto 44px 56px;align-items:center;gap:6px}.field-meta>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-meta button{padding:5px;font-size:10px;min-height:44px}.detail-panel{justify-content:flex-start;overflow:auto}.save-status:empty{display:none}.panel-button-row{display:flex;gap:8px;width:100%}.panel-button-row button{flex:1}.map-grid{display:grid;grid-template-columns:repeat(9,1fr);width:100%;max-width:300px;gap:3px}.map-cell{display:flex;min-height:22px;align-items:center;justify-content:center;font:12px ui-monospace,monospace;color:var(--muted);border-radius:3px}.map-cell.cleared{color:var(--accent)}.map-cell.current{background:var(--accent);color:var(--paper)}.assembly-preview{display:block;width:100%;max-width:280px;min-height:140px;height:auto;border:1px solid var(--line);border-radius:4px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.assembly-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%}.assembly-tools button{padding:6px;font-size:11px}.codex-entries{display:flex;flex-direction:column;gap:12px;text-align:left}.codex-entries div{display:flex;flex-direction:column;gap:3px}.codex-entries b{font-size:12px}.codex-entries span{font-size:11px;color:var(--muted)}
.control-strip .aim-joystick{width:82px;height:82px;flex-basis:82px}.aim-joystick i{position:absolute;width:32px;height:32px;border:1px solid var(--accent);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel)}[data-hand="left"] .control-strip{flex-direction:row-reverse}.build-chips{max-height:140px;overflow:auto}
@media(max-width:680px){.build-chips{max-height:32px;flex-wrap:nowrap;overflow:auto}.build-chips span{white-space:nowrap}.control-strip{gap:8px}.control-strip .aim-joystick{width:70px;height:70px;flex-basis:70px}.control-strip:has(.aim-joystick:not([hidden])) .joystick{width:80px;height:80px;flex-basis:80px}.control-strip:has(.aim-joystick:not([hidden])) .control-copy>span{display:none}.control-strip:has(.aim-joystick:not([hidden])) .action-buttons{flex-direction:column;gap:5px;margin-top:0}.control-strip:has(.aim-joystick:not([hidden])) .control-copy>b{display:none}}
.assembly-movement{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%}.assembly-movement button{padding:6px}.panel-button-row select{min-width:0;flex:2}.panel>*{flex-shrink:0}
@media(max-width:680px){.title-panel .hero-mark,.title-panel>.eyebrow{display:none}.title-panel h2{font-size:20px}}
@media(min-width:901px) and (min-height:521px){.hud,.field-meta,.arena-shell{width:min(100%,calc(100dvh - 245px))}.build-chips{max-height:max(48px,calc(100dvh - 570px))}}
.workshop-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;position:sticky;top:0;background:var(--panel);z-index:1}.workshop-heading h2{font-size:22px}.workshop-heading button{flex-shrink:0;width:auto;min-width:64px}.detail-panel{overscroll-behavior:contain}
@media(max-height:520px) and (orientation:landscape){.field-meta{grid-template-columns:1fr 1fr}.field-meta>span{grid-column:1/-1}}
@media(max-width:680px) and (max-height:700px) and (orientation:portrait){
  .page{padding:4px 10px max(4px,env(safe-area-inset-bottom))}.topbar{padding-bottom:4px}
  .hud{margin-top:6px}.hud span{font-size:9px}.field-meta{margin-top:5px;margin-bottom:4px}
  .arena-shell{min-width:224px}.page:has(.aim-joystick:not([hidden])) .arena-shell{width:min(100%,calc(100dvh - 350px))}.build-row{margin:5px auto;min-height:24px}
  .control-copy>b{display:none}.joystick{width:92px;height:92px;flex-basis:92px}
  footer{display:none}
}
@media(max-height:520px) and (orientation:landscape){.page{display:grid;grid-template-columns:1fr min(70dvh,360px) 1fr;gap:8px;align-items:start;max-width:1100px}.topbar{grid-column:1/-1;padding-bottom:2px}.hud{grid-column:1;grid-row:2;grid-template-columns:repeat(2,1fr);margin:0}.field-meta{grid-column:1;grid-row:3;margin:0;flex-direction:column;gap:8px}.arena-shell{grid-column:2;grid-row:2/6;width:100%;min-width:0}.build-row{grid-column:1;grid-row:4;display:block;margin:0}.build-chips{margin-top:5px}.control-strip{grid-column:3;grid-row:2/5;flex-direction:column;margin:0;gap:6px;align-items:center}.control-copy{text-align:center}.control-copy>b{display:none}.joystick{width:92px;height:92px;flex-basis:92px}.action-buttons{flex-direction:column}.action-buttons button{min-width:120px}.panel{padding:8px;gap:5px}.hero-mark,.chassis-label,.title-panel p,.upgrade-note{display:none!important}.panel h2{font-size:18px}.panel select,.panel button{min-height:44px}.upgrade-choice{min-height:59px;padding:4px 6px}.upgrade-choice span span{font-size:9px}.upgrade-choice svg{width:28px;height:28px}.upgrade-choices{gap:4px}footer{grid-column:1/-1;margin:0}}

@media(max-height:520px) and (orientation:landscape){.control-strip:has(.aim-joystick:not([hidden])){display:grid;grid-template-columns:1fr 1fr;gap:6px;justify-items:center}.control-strip:has(.aim-joystick:not([hidden])) #joystick{grid-column:1;grid-row:1}.control-strip:has(.aim-joystick:not([hidden])) #aimJoystick{grid-column:2;grid-row:1}.control-strip:has(.aim-joystick:not([hidden])) .control-copy{grid-column:1/3;grid-row:2}.control-strip:has(.aim-joystick:not([hidden])) .control-copy>span{display:none}.control-strip:has(.aim-joystick:not([hidden])) .action-buttons{flex-direction:row}.control-strip:has(.aim-joystick:not([hidden])) .action-buttons button{min-width:0;max-width:110px}[data-hand="left"] .control-strip:has(.aim-joystick:not([hidden])) #joystick{grid-column:2}[data-hand="left"] .control-strip:has(.aim-joystick:not([hidden])) #aimJoystick{grid-column:1}}

/* Readable screen-space feedback; the world and touch geometry stay square. */
.battle-hud{position:absolute;inset:6px 8px auto;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;line-height:1.45;color:#f0f8ff;text-align:left}
.battle-hud span:empty{display:none}.battle-hud span{max-width:74%;padding:3px 6px;background:color-mix(in srgb,var(--field-deep) 92%,transparent);border-radius:3px}
#combatNotice{color:#ffe1bd}.confirm-panel{z-index:5}.settings-group{width:100%;text-align:left;border-top:1px solid var(--line)}.settings-group summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-size:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.settings-grid button,.settings-grid select{width:100%;min-width:0;font-size:11px;padding:6px}.restart-action{margin-top:12px;border-style:dashed}.pause-panel #pauseDetail{font-size:11px}.pause-panel .workshop-heading h2{font-size:19px}
.upgrade-insight{display:block;color:var(--accent);font-size:11px;line-height:1.4;margin-top:3px}.upgrade-panel #upgradeChoices{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-auto-rows:min-content}.upgrade-panel .panel-button-row{flex-shrink:0}.upgrade-panel .upgrade-choice{flex-shrink:0}.upgrade-panel{justify-content:flex-start}.upgrade-panel>.eyebrow{display:none}.upgrade-panel .upgrade-note{display:none}
#assemblyForecast{font-size:11px;text-align:left;max-width:none}.boss-health{width:74%;height:4px;background:#704b45}.boss-health i{display:block;height:100%;background:var(--hostile)}
@media(max-width:680px){.upgrade-panel{padding:10px;gap:6px}.upgrade-panel .upgrade-choice{padding:6px;gap:6px;grid-template-columns:30px 1fr}.upgrade-choice svg{width:28px;height:28px}.upgrade-insight{font-size:11px}.upgrade-choice span span{margin-top:1px;font-size:11px}.action-buttons small{font-size:10px}.pause-panel{padding:10px}.hud>div:nth-child(n+3){display:none}.hud{grid-template-columns:1fr 1fr}.control-strip:has(.aim-joystick:not([hidden])){display:grid;grid-template-columns:80px minmax(0,1fr) 76px;grid-template-rows:76px 48px;gap:5px 10px;width:100%}.control-strip:has(.aim-joystick:not([hidden])) #joystick{grid-column:1;grid-row:1/3;align-self:center}.control-strip:has(.aim-joystick:not([hidden])) #aimJoystick{grid-column:3;grid-row:1;width:76px;height:76px}.control-strip:has(.aim-joystick:not([hidden])) .control-copy{grid-column:2/4;grid-row:2}.control-strip:has(.aim-joystick:not([hidden])) .action-buttons{flex-direction:row;gap:5px}.control-strip:has(.aim-joystick:not([hidden])) .action-buttons button{padding:5px;min-height:44px}.control-strip:has(.aim-joystick:not([hidden])) .control-copy>span{display:none}[data-hand="left"] .control-strip:has(.aim-joystick:not([hidden])) #joystick{grid-column:3}[data-hand="left"] .control-strip:has(.aim-joystick:not([hidden])) #aimJoystick{grid-column:1}[data-hand="left"] .control-strip:has(.aim-joystick:not([hidden])) .control-copy{grid-column:1/3}}
