:root{color-scheme:light;--ink:#192d40;--paper:#f3f7fa;--pink:#d2e6f5;--lime:#466f94;--muted:#5f7181;--line:#ccd9e3;--soft:#e3edf4}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.4 system-ui,sans-serif}
main{max-width:1240px;margin:auto;padding:20px clamp(12px,3vw,40px) 52px}
a{color:inherit;text-underline-offset:.2em}
.mast,.intro,.hud,.controls{display:flex;align-items:center;gap:10px}
.mast{justify-content:space-between;border-bottom:2px solid;padding-bottom:14px;font-weight:800;font-size:.8rem}
.mast span,.stamp,.hud small{font:800 .75rem/1.25 ui-monospace,monospace;letter-spacing:.08em}
.intro{justify-content:space-between;align-items:end;margin:24px 0;gap:20px}
.intro p{max-width:31ch;margin:0}
.stamp{display:inline-block;transform:rotate(-3deg);background:var(--pink);border:2px solid;padding:6px 9px}
h1{font-size:clamp(2.35rem,6vw,5.6rem);line-height:.92;letter-spacing:-.075em;margin:12px 0 0}
h1 em{font-style:normal;display:inline-block;color:#466f94}
h2{margin:0;font-size:1.3rem;letter-spacing:-.035em}
p{margin:.45rem 0 .8rem}
.game,.records{border:2px solid;background:var(--paper);box-shadow:5px 5px #dce7ef}
.hud{padding:8px 12px;background:#192d40;color:#f3f7fa;justify-content:space-between}
.hud strong,.hud small{display:block}.hud strong{font-size:1.25rem}
.map{position:relative;background:#e3edf4;border:2px solid;overflow:hidden}
canvas{display:block;width:100%;height:auto}
#desks{position:absolute;inset:0;pointer-events:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:2px solid var(--ink);background:#ffffff;font-weight:800;border-radius:5px;padding:6px 10px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #466f94;outline-offset:2px}
button:disabled{cursor:default;opacity:.54}
button:not(:disabled):hover{background:#d2e6f5}
.primary{background:var(--lime);color:#fff;border-color:var(--lime);box-shadow:2px 2px #dce7ef}
.primary:not(:disabled):hover{background:#3d6587;border-color:#3d6587}
.hud .quiet{color:var(--ink)}
.desk{pointer-events:auto;position:absolute;translate:-50% -50%;width:clamp(26px,5vw,44px);height:clamp(26px,5vw,38px);padding:0;border-style:dashed;background:#ffffffdf;line-height:1;font-size:clamp(.85rem,2vw,1.15rem)}
.desk.filled{border:2px solid transparent;background:transparent}.desk.filled[aria-pressed=true]{border-color:#466f94;background:transparent}.desk.filled:hover{background:transparent}.desk.fighting:not(.filled){visibility:hidden}
.desk[aria-pressed=true],.tower[aria-pressed=true]{border-color:#466f94;background:#d2e6f5}
.desk.fighting{opacity:1;pointer-events:none}
.controls{flex-wrap:wrap;margin-top:10px}
.brief,.notice{font-size:.875rem;margin:.55rem 0 0}
.notice{min-height:1.3em;color:#466f94;font-weight:800}
.bench{background:#e3edf4;border-top:2px solid;padding:12px}
.bench p,.records p{color:var(--muted);font-size:.875rem}
#towers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:8px}
.tower{display:grid;grid-template-columns:56px minmax(0,1fr);gap:2px 5px;text-align:left;align-items:start;font-size:.82rem;padding:5px;overflow-wrap:anywhere}.portrait{width:56px;height:auto;grid-row:span 3;align-self:center}
.tower small,.tower b{grid-column:2;font-weight:700}.tower small{font-weight:500}
.tower b{white-space:nowrap}
.records{margin-top:23px}
.records>div{padding:15px}
.records table{width:100%;border-collapse:collapse;text-align:left}
.records th,.records td{padding:8px 0;border-bottom:1px solid var(--ink);overflow-wrap:anywhere}
.records th:last-child,.records td:last-child{text-align:right;padding-left:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
label{display:grid;gap:2px;margin:6px 0;font-size:.85rem;font-weight:700}
input{border:2px solid;border-radius:4px;background:#fff;padding:5px 8px;width:100%;max-width:28em}
[hidden]{display:none!important}

main{padding-top:0}
.arena{
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:6px;
  padding:8px 0;
}
.mast{padding-bottom:5px}
.intro{align-items:center;margin:0;gap:14px}
.intro>div{display:flex;align-items:center;gap:10px}
.intro p{font-size:.8rem;line-height:1.2;max-width:38ch}
.stamp{padding:3px 6px;white-space:nowrap}
h1{font-size:clamp(1.55rem,3.1vw,3rem);line-height:1;margin:0}
.game{min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}
.hud{padding:4px 10px}
.hud strong{font-size:1.05rem}
.bench{padding:5px 8px}
.bench h2{font-size:.95rem}
.bench p{margin:0 0 4px;line-height:1.15;font-size:.75rem}
#towers{margin-bottom:4px;gap:5px}
.tower{grid-template-columns:56px minmax(0,1fr);font-size:.75rem;line-height:1.13}
.portrait{width:56px}
.game-actions{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;padding:4px 8px}
.game-actions .controls{margin:0}
.game-actions button{padding:3px 7px}
.brief,.notice{margin:0;font-size:.8rem}
.notice:empty{display:none}
.map-slot{
  container-type:size;
  min-height:0;
  min-width:0;
  display:grid;
  place-items:center;
  padding:3px 6px 6px;
}
.map{
  width:min(100cqw, calc(100cqh * 16 / 11));
  aspect-ratio:16 / 11;
  border:0;
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
.desk{width:clamp(22px,4.8cqw,44px);height:clamp(22px,5.8cqh,38px)}
@media(max-width:800px){
  .intro p,.stamp{display:none}
  .tower{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;text-align:center;padding:4px 2px}
  .portrait{grid-row:auto;justify-self:center}
  .tower b{grid-column:1}
  .tower small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-width:480px){
  .mast span{display:none}
  .tower{font-size:.65rem}
}

.tower.unaffordable{
  background:#e5e3df;
  color:#565450;
  border-color:#898781;
  filter:grayscale(1);
  opacity:1;
}

.result-dialog{
  width:min(360px,calc(100% - 24px));
  padding:14px;
  border:3px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  text-align:center;
  box-shadow:6px 6px var(--ink);
}
.result-dialog::backdrop{background:#192d40b8}
.result-dialog h2{font-size:clamp(1.45rem,5vw,2.2rem)}
#result-caption{margin:0;font-weight:800;color:#466f94}
#result-art{max-width:240px;margin:0 auto}
#result-score{margin:0}
.result-dialog .controls{justify-content:center}

.game-actions .brief{
  order:1;
  flex:0 0 100%;
  padding:5px 10px;
  border:2px solid var(--ink);
  border-radius:5px;
  background:#d2e6f5;
  color:var(--ink);
  font-size:clamp(1rem,2vw,1.4rem);
  font-weight:800;
  line-height:1.2;
}

.auth-dialog{text-align:left}
.auth-dialog h2{font-size:1.4rem}
#auth-status:empty{display:none}
#auth-close{float:right;padding:0 7px;margin-left:6px}

.mast #logout{margin-left:auto;padding:3px 8px}


.battlefield{
  min-height:0;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(118px,1fr) minmax(0,5fr) minmax(118px,1fr);
  align-items:stretch;
  gap:6px;
  padding:4px 8px 6px;
}
.character-card{
  align-self:center;
  min-width:0;
  max-height:100%;
  overflow:auto;
  padding:7px;
  border:2px solid var(--ink);
  border-radius:5px;
  background:#e3edf4;
  text-align:center;
}
.enemy-card{background:#dce9f3}
.character-card canvas{width:min(100%,156px);margin:0 auto}
.character-card h2{font-size:clamp(.9rem,1.45vw,1.15rem);line-height:1.1;overflow-wrap:anywhere}
.character-label,.character-stats{margin:0;font-size:.72rem;font-weight:800}
.character-description{margin:4px 0;font-size:.77rem;line-height:1.2}
.battlefield .map-slot{padding:0}
@media(max-width:820px){
  .battlefield{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
  }
  .battlefield .map-slot{grid-column:1 / -1;grid-row:2}
  .character-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:0 5px;
    align-self:stretch;
    padding:4px;
    text-align:left;
  }
  .character-card canvas{grid-row:1 / 3;grid-column:1;align-self:center}
  .character-card .character-label{grid-column:2}
  .character-description{font-size:.7rem}
}


/* Match the main site's slate blue palette and keep the account action above play. */
.intro{flex-wrap:wrap}
.intro>div{min-width:0;flex-wrap:wrap}
.intro #auth-open{margin-left:auto;flex-shrink:0;font-size:.8rem;padding:7px 12px}
@media(max-width:800px){
  .tower{grid-template-columns:minmax(0,1fr)}
  .portrait{width:42px}
}


.upgrade-panel{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid var(--line);background:var(--soft);font-size:.8rem}
.upgrade-panel small{display:block;color:var(--muted)}
#upgrade:disabled{background:#e5e3df;color:#565450;border-color:#898781;opacity:1;box-shadow:none}
@media(max-width:480px){.upgrade-panel{flex-wrap:wrap}.upgrade-panel button{margin-left:auto}}


.tower-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex-shrink:0}
.sell-dialog{position:fixed;inset:0;margin:auto;width:min(380px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px;border:2px solid var(--ink);border-radius:8px;box-shadow:6px 6px #466f9455}
.sell-dialog h2{margin:8px 0 14px;font-size:1.65rem}
#sell-name{font-weight:800}
.sell-dialog .sell-refund{font-size:2.2rem;font-weight:900;color:#466f94;margin:12px 0}
#sell-description{font-size:.85rem;color:var(--muted)}
.sell-dialog .controls{margin-top:20px;gap:10px}
.sell-dialog button{padding:9px 14px}


/* Reserve one stable account slot for either signed-out or signed-in state. */
.intro .account-actions{display:grid;flex:0 0 230px;width:230px;min-height:36px;margin-left:auto;align-items:stretch}
.intro .account-actions #auth-open,.intro .account-actions #logout{grid-area:1 / 1;width:100%;min-height:36px;margin:0;padding:7px 12px;font-size:.8rem;border-width:2px;white-space:nowrap}
.intro .account-actions #logout{background:#fff;border-color:var(--ink)}


/* Matte waiting screen; it is removed as soon as preparation starts. */
.map.is-locked #board{filter:blur(5px) saturate(.65);opacity:.65}
.map.is-locked #desks{visibility:hidden}
.map-gate{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:18px;background:#e3edf4a6;text-align:center}
.map-gate>div{width:min(100%,360px);padding:20px 16px;border:1px solid #ffffffc9;border-radius:10px;background:#f3f7faed;box-shadow:0 8px 32px #192d4014}
.map-gate h2{margin:9px 0;font-size:clamp(1.1rem,2.4vw,1.65rem)}
.map-gate p:not(.character-label){font-size:.85rem;color:var(--muted);margin:8px 0 14px}
.map-gate button{min-height:44px;max-width:100%;font-size:.85rem}
button{touch-action:manipulation}
.result-dialog{max-height:calc(100dvh - 24px);overflow-y:auto}
.auth-dialog input{min-height:44px;font-size:16px}
.auth-dialog #signin{min-height:44px}

/* Phones use the width of the screen for the map, rather than stretching empty rows. */
@media(max-width:820px){
  main{padding:0 10px 28px}
  .arena{height:auto;min-height:100svh;display:flex;flex-direction:column;gap:8px;padding:8px 0}
  .mast{font-size:.73rem;min-height:27px}
  .mast span{font-size:.6rem;letter-spacing:.02em}
  .intro{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;flex:none}
  .intro>div:not(.account-actions){display:block}
  h1{font-size:clamp(1.45rem,5.5vw,2rem);letter-spacing:-.055em;line-height:1.1}
  .intro .account-actions{width:230px;max-width:100%;min-height:44px;justify-self:end;margin:0}
  .intro .account-actions #auth-open,.intro .account-actions #logout{min-height:44px}
  .game{display:flex;flex-direction:column;flex:none;min-width:0;box-shadow:3px 3px #dce7ef}
  .hud{min-height:48px;padding:5px 8px;gap:8px}
  .hud small{font-size:.63rem;letter-spacing:.03em}
  .hud strong{font-size:.95rem}
  .hud #speed{min-width:44px;min-height:38px}
  .bench{padding:6px}
  #towers{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:0;padding-bottom:3px;scrollbar-width:thin}
  .tower{flex:0 0 100px;display:grid;grid-template-columns:1fr;grid-template-rows:46px minmax(30px,auto) auto;align-items:center;justify-items:center;scroll-snap-align:start;text-align:center;font-size:.75rem;line-height:1.15;padding:5px 4px}
  .tower .portrait{width:46px;height:46px;grid-column:1;grid-row:1}
  .tower strong{grid-column:1;grid-row:2;overflow-wrap:normal;hyphens:none}
  .tower b{grid-column:1;grid-row:3}
  .tower small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .game-actions{padding:6px;gap:6px}
  .game-actions .controls{gap:6px}
  .game-actions .controls button{min-height:44px;padding:7px 12px;font-size:.82rem}
  .game-actions .brief{font-size:.9rem;padding:7px 9px;line-height:1.25}
  .notice{font-size:.78rem;line-height:1.3}
  .battlefield{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:stretch;padding:0 6px 6px;gap:7px}
  .battlefield .map-slot{grid-column:1 / -1;grid-row:1;container-type:inline-size;display:block;padding:0;width:100%}
  .map{width:100%;height:auto;aspect-ratio:16 / 11}
  .desk{width:32px;height:32px;font-size:1rem}
  .defender-card{grid-column:1;grid-row:2}
  .enemy-card{grid-column:2;grid-row:2}
  .character-card{display:flex;align-items:center;gap:5px;align-self:stretch;max-height:none;overflow:visible;padding:6px;text-align:left;border-width:1px}
  .character-card canvas{flex:0 0 42px;width:42px;height:42px;object-fit:contain;margin:0;order:0}
  .defender-card .character-label{order:1}
  .enemy-card{display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto}
  .enemy-card #enemy-label{grid-column:1 / -1;font-size:.63rem}
  .enemy-card canvas{grid-column:1;grid-row:2}
  .enemy-card>div{grid-column:2;grid-row:2;min-width:0}
  .character-card h2{font-size:.78rem;line-height:1.15}
  .character-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.65rem;line-height:1.2;margin:3px 0}
  .character-stats{font-size:.6rem;line-height:1.2}
  .upgrade-panel{padding:7px;gap:7px}
  .upgrade-panel>div:first-child{min-width:0}
  .tower-actions{width:100%;justify-content:stretch;gap:6px}
  .tower-actions button{flex:1;min-height:44px;font-size:.78rem;padding:6px}
  .map-gate{padding:10px}
  .map-gate>div{padding:12px 10px}
  .map-gate .character-label{font-size:.6rem}
  .map-gate h2{font-size:1.1rem;margin:5px 0}
  .map-gate p:not(.character-label){font-size:.75rem;margin:6px 0 10px}
  .map-gate button{font-size:.78rem;padding:7px 10px}
  .records{margin-top:16px}
  .records>div{padding:12px}
  .records td{font-size:.9rem}
  .result-dialog{width:min(360px,calc(100% - 24px));padding:18px}
}
@media(min-width:600px) and (max-width:820px){
  .intro{grid-template-columns:minmax(0,1fr) 230px;align-items:center}
  #towers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .tower{width:auto}
}
@media(max-width:380px){.tower{flex-basis:94px}.desk{width:28px;height:28px}.character-card{padding:4px;gap:3px}.character-card canvas{width:36px;flex-basis:36px}.enemy-card{grid-template-columns:36px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.map.is-locked #board{filter:blur(4px)}}

/* Keep visually hidden shop hints inside each scrollable card. */
.tower{position:relative}
@media(max-width:820px){.arena{min-height:0}.tower{min-width:0}.tower strong{font-size:.7rem;letter-spacing:-.02em}}


/* A short landscape screen needs controls beside the board. */
@media(max-width:1024px) and (max-height:500px){
  main{padding:0 8px 18px}
  .arena{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;padding:4px 0}
  .mast{display:none}
  .intro{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:8px;align-items:center}
  .intro>div:not(.account-actions){display:block}
  .stamp{display:none}
  h1{font-size:1.3rem;line-height:1.1}
  .intro .account-actions{min-height:36px}
  .intro .account-actions #auth-open,.intro .account-actions #logout{min-height:36px}
  .game{display:grid;grid-template-columns:160px minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) auto;min-height:0;overflow:hidden}
  .hud{grid-column:1 / -1;grid-row:1;min-height:0;padding:3px 8px}
  .hud strong{font-size:.9rem}
  .hud small{font-size:.6rem}
  .hud #speed{min-height:32px;padding:3px 8px}
  .bench{grid-column:1;grid-row:2;min-height:0;overflow:auto;padding:4px;border-top:0;border-right:1px solid var(--line)}
  #towers{display:flex;flex-direction:column;gap:4px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .tower{min-width:0;flex:none;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;text-align:left;gap:2px 5px;align-items:center;justify-items:start;padding:3px 4px;font-size:.7rem}
  .tower .portrait{grid-column:1;grid-row:1 / 3;width:36px;height:36px}
  .tower strong{grid-column:2;grid-row:1;font-size:.7rem;overflow-wrap:normal}
  .tower b{grid-column:2;grid-row:2}
  .tower small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .game-actions{grid-column:1;grid-row:3;display:flex;min-width:0;max-height:175px;overflow:auto;padding:4px;gap:4px;border-right:1px solid var(--line)}
  .game-actions .controls{display:flex;flex-wrap:nowrap;width:100%;gap:3px}
  .game-actions .controls button{flex:1;min-width:0;min-height:36px;padding:3px;font-size:.65rem;overflow-wrap:anywhere}
  .game-actions .brief{font-size:.72rem;padding:4px;line-height:1.2}
  .notice{font-size:.65rem;line-height:1.2}
  .upgrade-panel{padding:4px;font-size:.68rem;gap:4px;flex-wrap:wrap}
  .upgrade-panel small{font-size:.6rem}
  .tower-actions{width:100%;gap:3px;flex-wrap:nowrap}
  .tower-actions button{min-width:0;min-height:36px;padding:3px;font-size:.65rem;flex:1}
  .battlefield{grid-column:2;grid-row:2 / 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;min-height:0;gap:4px;padding:4px}
  .battlefield .map-slot{grid-column:1 / -1;grid-row:1;container-type:size;display:grid;place-items:center;min-height:0;padding:0}
  .map{width:min(100cqw,calc(100cqh * 16 / 11));height:auto;aspect-ratio:16 / 11}
  .desk{width:30px;height:30px}
  .character-card{display:flex;align-items:center;gap:5px;padding:4px;border-width:1px;text-align:left;align-self:stretch;max-height:none;overflow:hidden}
  .defender-card{grid-row:2;grid-column:1}
  .enemy-card{grid-row:2;grid-column:2;position:relative;padding-top:14px}
  .character-card canvas{flex:0 0 32px;width:32px;height:32px;margin:0;order:0}
  .defender-card .character-label{order:1}
  .character-card h2{font-size:.7rem;line-height:1.1}
  #enemy-label{position:absolute;top:2px;left:4px;font-size:.55rem;line-height:1}
  .character-description{display:none}
  .character-stats{font-size:.55rem;line-height:1.1}
  .map-gate{padding:6px}
  .map-gate>div{padding:8px}
  .map-gate .character-label{font-size:.55rem}
  .map-gate h2{font-size:1rem;margin:4px 0}
  .map-gate p:not(.character-label){font-size:.68rem;margin:4px 0 7px}
  .map-gate button{min-height:36px;font-size:.75rem;padding:5px 8px}
}
@media(min-width:600px) and (max-width:820px) and (min-height:501px){.tower strong{font-size:.85rem}}