@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Fredoka:wght@500;600;700&display=swap');
:root{touch-action:pan-x pan-y;font-family:'DM Sans',system-ui,sans-serif;color:#ebf7ff;background:#071925;--card:#102e40;--line:#2b5669;--aqua:#59e2db;--sun:#ffd36b;--pink:#ff7898}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% -10%,#195478,transparent 40%),radial-gradient(circle at 0 60%,#103e45,transparent 40%),#071925;min-height:100vh}button,input,select{font:inherit}button{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;border:1px solid #488093;background:#1d4b60;color:#f4fbff;border-radius:12px;padding:11px 16px;min-height:44px;font-weight:800}button:hover{background:#286179}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}.primary{background:var(--sun);color:#173240;border-color:#ffecaa;box-shadow:0 3px 0 #ad8131}.primary:hover{background:#ffe39b}.small{font-size:.8rem;padding:7px 10px;min-height:36px;margin-left:12px}.shell{max-width:1520px;margin:auto;padding:22px max(16px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom))}.masthead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--aqua);margin:0 0 5px}h1,h2{font-family:Fredoka,system-ui,sans-serif;margin:0}h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1}h1 em{font-style:normal;color:var(--sun)}h2{font-size:1.55rem}.connection,.pill{border-radius:999px;padding:8px 12px;font-size:.8rem;font-weight:800;background:#23485a;white-space:nowrap}.connection.online{background:#1a695e}.card{background:linear-gradient(150deg,#123448,#0c2939);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 26px #00111b66}.entry{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:clamp(25px,5vw,70px);max-width:970px;margin:8vh auto}.intro h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;max-width:520px}.intro>p:last-child{max-width:480px;line-height:1.6;color:#b4ceda}form{display:grid;gap:10px;align-content:center}form label{font-weight:700;margin-top:8px}form small{font-weight:400;color:#9db8c6}input,select{width:100%;background:#06202e;color:#fff;border:1px solid #438097;border-radius:10px;padding:12px 14px;min-height:44px}form button{margin-top:15px}.room-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;margin-bottom:18px}.room-bar strong{font-size:1.3rem;letter-spacing:.13em}.lobby-title{display:flex;justify-content:space-between;gap:16px;align-items:end}.lobby-title>p{color:#afc8d4;margin:0}.setup{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0}.setup label{font-size:.82rem;font-weight:700;min-width:145px}.setup select{margin-top:5px}.seat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.seat{padding:14px;background:#0a2433;border:1px solid #31596a;border-radius:12px}.seat strong{display:block}.seat span{color:#b8d1dd;font-size:.78rem}.seat.empty{opacity:.55}.lobby-actions{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}#lobby-note{color:#b8d1dd;font-size:.85rem}#lobby{padding:24px}#game{display:grid;grid-template-columns:minmax(330px,1fr) minmax(320px,430px) minmax(250px,300px);gap:18px;align-items:start}.section-label{display:flex;justify-content:space-between;gap:12px;color:#a8c6d3;font-size:.7rem;font-weight:800;letter-spacing:.12em;margin:2px 2px 12px}.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.field{border:2px solid var(--team-color,#3d6778);border-radius:14px;background:#0b2736;padding:6px;min-height:44px;text-align:left;width:100%;transition:transform .1s,border-color .1s}.field:hover{transform:translateY(-2px)}.field.target{box-shadow:0 0 0 2px #ffffffb3}.field.self:not(.target){box-shadow:inset 0 0 0 1px #ffffff66}.field.out{opacity:.48}.field header{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;gap:2px;overflow:hidden}.field header b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.team-tag{border-radius:6px;padding:2px 5px;background:var(--team-color,#253f58);color:#082434;font-size:.64rem}.team-0,.field[data-team="0"],.play-panel[data-team="0"]{--team-color:#62ddac}.team-1,.field[data-team="1"],.play-panel[data-team="1"]{--team-color:#ff7587}.team-2,.field[data-team="2"],.play-panel[data-team="2"]{--team-color:#ffd667}.team-unassigned{color:#fff}.field canvas{width:100%;height:auto;display:block;background:#071923;border-radius:7px;margin-top:4px;aspect-ratio:384/530}.field .status{font-size:.65rem;color:#b0cdd9;display:block;margin:4px 1px 0}.play-panel{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#133d52;border:1px solid var(--team-color,#4e8295);border-radius:21px;padding:12px;box-shadow:0 13px 36px #00101bb0}.play-heading{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 10px}.play-heading h2{font-size:1.35rem}.timer{font-weight:800;color:var(--sun);font-size:1.2rem}.board-wrap{position:relative;max-width:384px;margin:auto}.board-wrap canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:12px;background:#082434;border:2px solid var(--team-color,#58a7ac)}#effect-cover{position:absolute;inset:0;border-radius:12px;background:repeating-radial-gradient(circle at 45% 45%,#07111eea 0 24px,#1a2d3eea 25px 48px);display:grid;place-items:center;font-family:Fredoka;font-size:2rem;color:#f2d481;pointer-events:none}.launcher-controls{display:flex;justify-content:center;gap:10px;margin:11px auto}.launcher-controls button{touch-action:none;min-width:60px}.launcher-controls #fire{flex:1;max-width:170px}.launcher-controls span{font-size:.65rem;opacity:.65;margin-left:7px}.side-panel{display:grid;gap:13px}.warehouse,.activity,.controls{padding:17px}.warehouse h2{margin-bottom:13px}.resource-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.resource-row button{font-size:.77rem;padding:8px 5px;min-height:50px}.resource-row button.selected{border-color:var(--sun);box-shadow:inset 0 0 0 2px var(--sun)}.resource-row strong{display:block;color:var(--sun);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.warehouse p:not(.eyebrow){font-size:.81rem;color:#c7dce6;line-height:1.4}.warehouse #target-label{font-weight:800;color:#fff}#send{width:100%;margin-top:7px}.hint{font-size:.7rem!important}.activity ol{padding-left:20px;margin:8px 0 0;max-height:300px;overflow:auto}.activity li{font-size:.8rem;color:#c9dce6;margin:8px 0}.controls p:last-child{font-size:.8rem;line-height:1.6;color:#bad2dd}.result{padding:clamp(24px,6vw,48px);text-align:center;margin:clamp(24px,8vh,90px) auto;max-width:600px}.result p{color:#b4ccd7}footer{text-align:center;color:#7296a7;font-size:.72rem;margin:30px auto 5px}#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#ffd36b;color:#213841;padding:9px 15px;border-radius:10px;font-weight:800;box-shadow:0 10px 25px #0009;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}#toast.show{opacity:1}[hidden]{display:none!important}
@media(max-width:1050px){#game{grid-template-columns:minmax(220px,1fr) minmax(280px,420px)}.side-panel{grid-column:1/-1;grid-template-columns:1.2fr 1fr}.controls{display:none}}
@media(max-width:720px){.shell{padding-top:12px}.masthead{margin-bottom:14px}.connection{font-size:.7rem}.entry{grid-template-columns:1fr;margin:12px auto;padding:24px;gap:12px}.intro h2{font-size:2rem}.room-bar{padding:12px}.room-bar .small{display:block;margin:5px 0 0}.lobby-title{display:block}.seat-list{grid-template-columns:repeat(2,1fr)}#game{display:flex;flex-direction:column}.play-panel{order:0;width:100%;max-width:450px;margin:auto}.overview{order:1;width:100%}.side-panel{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr}.fields{grid-template-columns:repeat(3,minmax(0,1fr))}.field canvas{display:none}.field{min-height:64px}.field .status{margin-top:6px}.section-label{margin-top:8px}.activity{display:none}.warehouse{grid-column:1/-1}.board-wrap{max-width:min(100%,330px)}.play-heading{padding:0 2px 4px}.launcher-controls{margin:7px auto}}
@media(max-width:390px){.field header{font-size:.64rem}.team-tag{font-size:.57rem}.fields{gap:5px}.field{padding:5px}.board-wrap{max-width:300px}}

.header-actions{display:flex;align-items:center;gap:10px}.header-actions button{font-size:.8rem;min-height:44px;padding:8px 12px}.how{margin-top:20px;max-width:500px;color:#c7dce6;font-size:.86rem;line-height:1.55}.how summary{cursor:pointer;color:var(--sun);font-weight:800}.how p{margin:8px 0}.effect-list{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:28px;margin:4px 0}.effect-list span,.item-queue span{border:1px solid #6598a7;border-radius:8px;background:#0b2b3c;padding:3px 7px;font-size:.72rem;font-weight:800}.effect-list .attack{border-color:#f58b9b;color:#ffb5c1}.item-queue{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;min-height:26px}.item-queue span:first-child{border-color:var(--sun);color:var(--sun)}@media(max-width:720px){.header-actions{gap:5px}.header-actions button{font-size:.68rem;padding:6px 8px}.connection{padding:7px 9px}.how{font-size:.8rem}}
.field .status.danger{color:#ffb5c1;font-weight:800}

.cpu-controls{display:grid;gap:8px;margin-top:12px}.cpu-controls label{font-size:.78rem}.seat.empty button{display:block;margin-top:12px}

.result h2{font-size:clamp(2.4rem,8vw,4rem);color:var(--sun)}#result-team{font-size:1.3rem;font-weight:800;color:var(--aqua)}

.room-actions{display:flex;align-items:center;gap:8px}#countdown{position:fixed;inset:20% 16px auto;z-index:20;margin:auto;box-shadow:0 0 0 100vmax #071925d9}#countdown-text{font-size:5rem;color:var(--sun)}

#spectator-panel{padding:20px;margin-bottom:20px}#game.spectating{display:block}#game.spectating .field canvas{display:block}

#game.spectating .field:disabled{opacity:1;cursor:default}#game.spectating .field.out:disabled{opacity:.48}

.cpu-controls summary{cursor:pointer;min-height:44px;padding:12px 0;font-size:.8rem;font-weight:800}@media(max-width:720px){.room-bar{gap:10px;flex-wrap:wrap}.room-actions{flex:1;min-width:0;flex-wrap:wrap;justify-content:flex-end}}

#result{--result-top:max(env(safe-area-inset-top),clamp(16px,6dvh,56px));position:fixed;inset:var(--result-top) 0 auto;width:min(420px,calc(100% - 32px));max-height:calc(100dvh - var(--result-top) - max(16px,env(safe-area-inset-bottom)));margin:0 auto;padding:24px;color:#ebf7ff;overflow:auto}#result::backdrop{background:#06152140}#result h2{font-size:clamp(2rem,7vw,3rem)}.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}#game.finished .field.out,#game.finished .field:disabled{opacity:1}#game.finished .field canvas{display:block}

.seat-list.grouped{display:flex;flex-direction:column;gap:16px}.lobby-team{min-width:0;margin:0;padding:14px;border:2px solid #488093;border-radius:14px}.lobby-team legend{padding:0 8px;color:#b8d1dd;font-weight:800;font-size:.9rem}.lobby-team-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lobby-team .seat{min-width:0}.lobby-team select{min-width:0}@media(max-width:720px){.lobby-team{padding:10px}.lobby-team-seats{grid-template-columns:1fr}}

.play-panel.danger{border-color:#ff163d}.play-panel.danger #board{border-color:#ff163d;animation:danger-pulse 1s ease-in-out infinite}
#danger-warning{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.deadline-warning{display:none;position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);z-index:2;pointer-events:none;overflow:visible;fill:none;stroke:#ff6575;stroke-width:2}
.danger .deadline-warning{display:block}.deadline-warning .electric{stroke:#ffe0e4;stroke-dasharray:32 16;filter:drop-shadow(0 0 3px #ff6575);animation:danger-electric 1.2s linear infinite}
@keyframes danger-pulse{0%,100%{border-color:#880022;box-shadow:0 0 0 2px #880022,0 0 6px #ff163d80}50%{border-color:#ff163d;box-shadow:0 0 0 5px #ff163d,0 0 30px 8px #ff163dcc}}
@keyframes danger-electric{to{stroke-dashoffset:-48}}
@media(prefers-reduced-motion:reduce){.play-panel.danger #board,.deadline-warning .electric{animation:none}.deadline-warning .electric{stroke-dasharray:none}}

.next-preview{position:absolute;right:3%;bottom:2%;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#d7edf5;font-size:.6rem;font-weight:800;letter-spacing:.08em;pointer-events:none}
#next-bubble{display:grid;place-items:center;width:clamp(24px,8vw,36px);height:clamp(24px,8vw,36px);border:2px solid #ffffff70;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,var(--bubble-color,#b4c5ce) 38%,#234554);color:#17303e;font-size:1rem;line-height:1;text-shadow:0 1px 1px #fff8}

#result[open]{animation:result-enter 600ms ease-out 400ms both}
@keyframes result-enter{from{opacity:0;transform:translateY(calc(-100% - var(--result-top)))}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#result[open]{animation-name:result-reveal;animation-duration:1ms}}
@keyframes result-reveal{from{opacity:0}to{opacity:1}}

.field-warehouse{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:6px;max-width:384px;margin:8px auto 0}.field-warehouse>*{min-width:0}.field-warehouse button{width:100%;padding:8px 3px;font-size:.7rem}.field-warehouse small{font-size:.65rem;color:#c7dce6}.field-warehouse .effect-list{margin:0;align-content:start}.field-warehouse .effect-list span{max-width:100%;overflow-wrap:anywhere;padding:3px 4px}.field-warehouse .item-queue{gap:4px;margin-top:5px;min-height:0}.field-warehouse .item-queue span{max-width:100%;overflow-wrap:anywhere;padding:3px 4px}

#send-trails{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9}

.field.attack-origin{position:relative;box-shadow:0 0 0 3px #b5eeff,0 0 20px #b5eeffb3}
.field.attack-origin::after{content:attr(data-attack-number);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:transparent;-webkit-text-stroke:2px white;font-size:clamp(3rem,7vw,6rem);font-weight:900;line-height:1;filter:drop-shadow(0 0 7px #041623);pointer-events:none;animation:attack-origin-blink .45s ease-in-out infinite alternate}
@keyframes attack-origin-blink{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.field.attack-origin::after{animation:none;opacity:1}}

.theme-picker{display:inline-flex;align-items:center;gap:8px;margin:0 14px 8px 0;color:#b8d1dd;font-weight:700}.theme-picker select{width:auto;min-height:36px;padding:5px 10px;font-size:.75rem}

/* Space: neon arcade panels over a starfield. */
:root[data-theme="space"]{--aqua:#35deff;--sun:#ffda32;--line:#1766ae;--pink:#ff437d;background:#020617;color:#e5f2ff}
[data-theme="space"] body{
  background:radial-gradient(ellipse at 78% 0,#18347788,transparent 45%),radial-gradient(ellipse at 0 65%,#061958,transparent 50%),
    radial-gradient(circle at 18px 31px,#62dfff 0 1px,transparent 2px) 0 0/137px 153px,
    radial-gradient(circle at 53px 83px,#ffd263 0 1px,transparent 2px) 0 0/229px 211px,
    radial-gradient(circle at 89px 21px,#b58aff 0 1px,transparent 2px) 0 0/311px 281px,#020617;
}
[data-theme="space"] .shell{
  max-width:1500px;width:calc(100% - 20px);margin:10px auto;padding:24px 20px 18px;border:6px solid transparent;border-radius:34px;
  background:linear-gradient(155deg,#030b23d9,#020a20e8) padding-box,linear-gradient(135deg,#ffd070,#a44123 8%,#ee3151 12%,#25334d 18%,#a4bdd4 33%,#102c59 45%,#2774c3 68%,#e3334a 87%,#ffba52) border-box;
  box-shadow:inset 0 0 0 2px #030615,inset 0 0 28px #0e72bb66,0 0 0 2px #07040c,0 0 35px #075cff33;
}
[data-theme="space"] .masthead{position:relative;isolation:isolate;padding:8px 14px 20px;border-bottom:2px solid #56bfff;box-shadow:0 5px 0 #020819,0 7px 0 #7196b4;margin-bottom:26px}
[data-theme="space"] .masthead::after{content:'';position:absolute;z-index:-1;right:30px;top:-12px;width:100px;height:100px;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 9px,#020a2555 10px 13px),radial-gradient(circle at 30% 25%,#ffc074,#8246b3 42%,#152355 70%);box-shadow:0 0 35px #00c8ff33;opacity:.65;pointer-events:none}
[data-theme="space"] .masthead::before{content:'';position:absolute;z-index:-1;right:9px;top:20px;width:143px;height:36px;border:3px solid #35d5ff;border-left-color:#ffc76c;border-bottom-color:#9d56fa;border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 9px #17bcff;pointer-events:none}
[data-theme="space"] h1{text-transform:uppercase;font-style:italic;font-weight:700;font-size:clamp(2.3rem,4.5vw,4.6rem);line-height:.93;letter-spacing:-.035em;color:#59dcff;-webkit-text-stroke:1px #a7f5ff;text-shadow:0 3px #056fb0,0 6px #012c66,3px 8px #020513,0 0 16px #00bfff80}
[data-theme="space"] h1 em{display:block;margin-left:30px;color:#ffda32;-webkit-text-stroke:1px #fff3a5;text-shadow:0 3px #f18a12,0 6px #c61c35,3px 9px #050517,0 0 16px #ff4c4c99}
[data-theme="space"] h2{letter-spacing:.02em}
[data-theme="space"] .eyebrow{text-transform:uppercase;color:#43dbff;text-shadow:0 0 9px #039cff99}
[data-theme="space"] .header-actions{align-self:flex-end;padding-bottom:4px}
[data-theme="space"] button{border-color:#2389d0;border-radius:10px;background:linear-gradient(#123f80,#031634 48%,#071b41);box-shadow:inset 0 1px 1px #9deaff77,inset 0 0 0 2px #020a26,0 0 7px #008dff44;color:#def6ff}
[data-theme="space"] button:hover{background:linear-gradient(#1b5ab4,#092b5b);border-color:#5de7ff}
[data-theme="space"] .primary{color:#171326;background:linear-gradient(#fff392,#ffdc29 25%,#ffc40a 80%,#d78a0b);border-color:#fff29d;text-shadow:0 1px #fff07b;box-shadow:inset 0 0 0 2px #e1a311,inset 0 3px 2px #fff8c2,0 3px 0 #7c390b,0 0 15px #ffd12c44}
[data-theme="space"] .primary:hover{background:linear-gradient(#fff8b9,#ffe658 40%,#ffd028)}
[data-theme="space"] input,[data-theme="space"] select{background:#04112d;border-color:#277bc3;color:#e7f7ff;box-shadow:inset 0 2px 6px #0009}
[data-theme="space"] .card,[data-theme="space"] .play-panel{background:linear-gradient(135deg,#155c9a66,transparent 25%),repeating-linear-gradient(0deg,#09447b0a 0 2px,transparent 2px 5px),linear-gradient(145deg,#081d4a,#020b23);border:2px solid #237bc2;box-shadow:inset 0 0 0 2px #02091e,inset 0 0 0 4px #1762a055,0 0 0 2px #030819,0 0 0 4px #637a92,0 0 0 6px #0b2040,0 0 18px #008cff44;border-radius:18px}
[data-theme="space"] .room-bar{background:linear-gradient(110deg,#09235d,#02123a 65%,#0c3161);border-color:#55d4fa}
[data-theme="space"] .room-bar .eyebrow{color:#ffdf35}
[data-theme="space"] .room-bar strong{color:#e0efff;text-shadow:0 0 10px #449dff}
[data-theme="space"] .connection,[data-theme="space"] .pill{border:1px solid #236eb2;border-radius:9px;background:#021735;box-shadow:inset 0 0 12px #1c64bb55;color:#53e4ff}
[data-theme="space"] .connection.online{border-color:#20d993;color:#43ffc0;box-shadow:inset 0 0 14px #0de48833,0 0 9px #14cb8b44}
[data-theme="space"] #leave-room{background:linear-gradient(#c63a54,#751329 55%,#340e25);border-color:#ff6d72;color:#fff0eb}
[data-theme="space"] .field{background:linear-gradient(120deg,#10447499,#030e26 65%);border-color:var(--team-color);box-shadow:inset 0 0 0 2px #031026,0 0 8px color-mix(in srgb,var(--team-color) 45%,transparent)}
[data-theme="space"] .field header{padding-bottom:4px;border-bottom:1px solid #1860a7}
[data-theme="space"] .field header b{color:#e2f4ff}
[data-theme="space"] .field canvas{background:#030e27}
[data-theme="space"] .field.target{box-shadow:0 0 0 2px #fff,0 0 18px var(--team-color)}
[data-theme="space"] .field.attack-origin{box-shadow:0 0 0 3px #b5eeff,0 0 20px #b5eeffb3}
[data-theme="space"] .play-panel{border-color:var(--team-color);padding:15px;box-shadow:inset 0 0 0 3px #05113b,inset 0 0 0 6px #0477d8,0 0 0 2px #071025,0 0 0 5px #466d97,0 0 0 7px #04112d,0 0 22px #008cff77}
[data-theme="space"] .play-heading{border-bottom:1px solid #267ed1;margin-bottom:9px}
[data-theme="space"] .play-heading h2{font-family:'DM Sans',system-ui,sans-serif;font-size:1.05rem}
[data-theme="space"] .board-wrap canvas{border-color:#1bc5ff;border-radius:14px;box-shadow:inset 0 0 10px #0863cc,0 0 10px #00baff77}
[data-theme="space"] .play-panel.danger{border-color:#ff163d}
[data-theme="space"] .play-panel.danger #board{border-color:#ff163d}
[data-theme="space"] .warehouse h2{color:#ffe33c}
[data-theme="space"] .activity .eyebrow{color:#ff6385}
[data-theme="space"] #target-label{color:#4ee7ff}
[data-theme="space"] .seat{background:linear-gradient(135deg,#0c2c60,#06132f);border-color:#2b6bad}
[data-theme="space"] .lobby-team{background:#04122c88;border-color:#6587a7}
[data-theme="space"] .lobby-team legend{color:#7aeaff}
[data-theme="space"] .launcher-controls{padding:10px 8px 7px;border:2px solid #6686a8;border-radius:13px;background:linear-gradient(135deg,#32628e,#051537 20%,#0c2b57 80%,#527590);box-shadow:inset 0 0 0 2px #02091f,0 3px 0 #010611}
[data-theme="space"] #aim-left,[data-theme="space"] #aim-right{color:#35dfff;font-size:1.2rem;text-shadow:0 0 10px #00d9ff}
[data-theme="space"] #fire{font-size:1.2rem;letter-spacing:.03em}
[data-theme="space"] .field-warehouse button{background:linear-gradient(#123664,#020c26);border-color:#278adb}
[data-theme="space"] .field-warehouse button.selected{border-color:#ffdc32;box-shadow:inset 0 0 0 1px #ffd530,0 0 8px #ffd53044}
[data-theme="space"] .next-preview{padding:5px;border:1px solid #2985c7;border-radius:8px;background:#02122cbb;color:#a4eaff}
[data-theme="space"] #next-bubble{box-shadow:0 0 10px var(--bubble-color);background:radial-gradient(circle at 32% 28%,#fff,var(--bubble-color,#b4c5ce) 38%,#071948);color:#06132f}
[data-theme="space"] .effect-list span,[data-theme="space"] .item-queue span{background:#061a3a;border-color:#286cad}
[data-theme="space"] footer{color:#8aaacb}
[data-theme="space"] .theme-picker{color:#78dfff}
@media(max-width:720px){
  [data-theme="space"] .shell{width:calc(100% - 10px);margin:5px auto;padding:14px 10px;border-width:3px;border-radius:20px}
  [data-theme="space"] .masthead{flex-wrap:wrap;gap:12px;padding:5px 4px 14px}
  [data-theme="space"] h1{font-size:clamp(2.1rem,9vw,3.5rem)}
  [data-theme="space"] h1 em{margin-left:14px}
  [data-theme="space"] .header-actions{margin-left:auto}
  [data-theme="space"] .masthead::after{right:5px;width:78px;height:78px}
  [data-theme="space"] .masthead::before{right:-5px;top:13px;width:108px;height:29px}
  [data-theme="space"] .play-panel{padding:11px}
  [data-theme="space"] .entry{padding:22px 18px}
  [data-theme="space"] .field{padding:5px}
}

/* The six channels flank the local field; DOM order remains lobby/keyboard order. */
.team-scoreboard{display:flex;gap:0;border:3px double #b8c6b9;border-radius:15px;background:#06222ce8;overflow:hidden}
.team-score{display:grid;justify-items:center;padding:8px 20px;min-width:100px;border-right:1px solid #6e8f89;color:var(--team-color,#ebf7ff)}
.team-score:last-child{border-right:0}.team-score span{font-weight:800;font-size:.9rem}.team-score strong{font-size:2rem;line-height:1.1}.team-score small{font-size:.6rem;color:#e6dfc9;white-space:nowrap}
.fleet-heading{display:none}.pilot-portrait,.console-gauges{display:none}.field-telemetry{display:contents}.field-timer{display:none}
@media(min-width:1051px){
  #game{grid-template-columns:minmax(250px,1fr) minmax(340px,440px) minmax(250px,1fr);grid-template-rows:48px repeat(3,minmax(0,1fr)) auto;gap:12px 18px}
  .overview,#fields{display:contents}.overview .section-label{display:none}
  .fleet-heading{display:flex;justify-content:space-between;align-items:center;padding:0 10px;min-width:0;grid-row:1;border-bottom:2px solid #488093}
  .fleet-heading span{font-family:Fredoka,sans-serif;font-size:1.7rem}.fleet-heading small{font-size:.6rem;font-weight:800}
  #fleet-left{grid-column:1}#fleet-right{grid-column:3}
  #fields>.field{display:grid;grid-template-columns:minmax(0,1fr) 65px;grid-template-rows:26px minmax(0,1fr);gap:7px;padding:8px;min-height:0}
  #fields>.field:nth-child(-n+3){grid-column:1}#fields>.field:nth-child(n+4){grid-column:3}
  #fields>.field:nth-child(3n+1){grid-row:2}#fields>.field:nth-child(3n+2){grid-row:3}#fields>.field:nth-child(3n){grid-row:4}
  #fields .field header{grid-column:1/-1;font-size:.8rem}#fields .field canvas{width:100%;height:190px;max-height:100%;min-height:0;object-fit:contain;aspect-ratio:auto;margin:0;background:#041c27}
  .field-telemetry{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-width:0}.field-timer{display:block;font-size:1.1rem;color:var(--sun)}
  .field .status{font-size:.65rem;white-space:normal;line-height:1.6}
  .play-panel{grid-column:2;grid-row:1/5;min-width:0}.side-panel{grid-column:1/-1;grid-row:5;grid-template-columns:1fr 1fr 1fr;gap:18px}
  #game.spectating{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:48px repeat(3,260px)}
  #game.spectating #fleet-right,#game.spectating #fields>.field:nth-child(n+4){grid-column:2}
}
@media(max-width:1050px){.team-scoreboard{display:none}.field-telemetry .status{display:block}}

/* SpaceAge: inked pulp scenery, enamel instruments, and a cream metal cockpit. */
:root[data-theme="spaceage"]{--aqua:#80e0cf;--sun:#f6cf60;--pink:#ef5859;--line:#b6b18a;background:#062831;color:#fff0d1}
[data-theme="spaceage"] body{background:linear-gradient(#04242b18,#041e2c22),url('/art/spaceage-backdrop.png') center top/cover fixed #062831}
[data-theme="spaceage"] .shell{width:calc(100% - 20px);max-width:1520px;margin:10px auto;padding:16px 18px;border:5px solid #d8c59b;border-radius:24px;background:#05293424;box-shadow:inset 0 0 0 2px #173c3b,0 0 0 3px #142b2f,0 0 0 6px #b14836}
[data-theme="spaceage"] .masthead{gap:18px;min-height:152px;padding:8px 10px 15px;align-items:center;margin-bottom:12px}
[data-theme="spaceage"] .masthead>div:first-child{position:relative;isolation:isolate;flex:1}
[data-theme="spaceage"] .masthead .eyebrow{font-size:.64rem;color:#fcf1d7;text-shadow:1px 1px #071f25;letter-spacing:.12em}
[data-theme="spaceage"] .header-actions{align-self:flex-start;margin-top:10px;flex-wrap:wrap;justify-content:flex-end;max-width:210px}
[data-theme="spaceage"] h2{font-family:Impact,'Arial Black',sans-serif;font-style:italic;text-transform:uppercase;letter-spacing:.025em;color:#f9d66a}
[data-theme="spaceage"] .eyebrow{color:#8edbd0;letter-spacing:.09em}
[data-theme="spaceage"] button{border:2px solid #cdbd91;border-radius:8px;background:linear-gradient(#21545b,#082a35);color:#fff2d2;box-shadow:inset 0 0 0 2px #0a2630,0 2px 0 #071a22}
[data-theme="spaceage"] button:hover{background:linear-gradient(#37777a,#16414c);border-color:#ffe29b}
[data-theme="spaceage"] .primary{color:#422521;background:linear-gradient(#ffe69c,#edc44f);border-color:#fff0b9;box-shadow:inset 0 0 0 2px #bd8c3d,0 3px 0 #723e2c}
[data-theme="spaceage"] .primary:hover{background:linear-gradient(#fff4b6,#ffda6d)}
[data-theme="spaceage"] input,[data-theme="spaceage"] select{background:#052934;color:#fff2d2;border:2px solid #9da68d;border-radius:7px;box-shadow:inset 0 2px 5px #01161e}
[data-theme="spaceage"] .card{border:3px solid #cbbb93;border-radius:14px;background:repeating-linear-gradient(0deg,#f8e5bd04 0 1px,transparent 1px 4px),linear-gradient(120deg,#174b55f5,#03232ff5);box-shadow:inset 0 0 0 2px #13383c,0 0 0 2px #123338,0 4px 0 #02171e}
[data-theme="spaceage"] .room-bar{padding:10px 16px;margin-bottom:14px;background:#062b34ed}
[data-theme="spaceage"] .room-bar strong{color:#f8e8be}.room-bar .eyebrow{margin-bottom:3px}
[data-theme="spaceage"] .connection,[data-theme="spaceage"] .pill{border:1px solid #d2bd91;border-radius:7px;background:#0a333ce8;color:#fff0d0}
[data-theme="spaceage"] .connection.online{background:#104e48;color:#9cf5ce}
[data-theme="spaceage"] #leave-room{background:linear-gradient(#b9423c,#61252b);border-color:#e8bb91}
[data-theme="spaceage"] .team-scoreboard{position:relative;border:5px ridge #d1c19c;border-radius:24px 24px 10px 10px;box-shadow:0 0 0 2px #08252d,0 4px 0 #aa4233;transform:rotate(-1deg);background:#052c37f5}
[data-theme="spaceage"] .team-score{padding:8px 18px}.team-scoreboard .team-score strong{font-family:Impact,'Arial Black',sans-serif;font-size:2.5rem}
[data-theme="spaceage"] .fleet-heading{background:#ead49ce8;color:#092b32;border:3px solid #122d32;border-radius:18px 7px 7px 7px;box-shadow:0 0 0 2px #d0bc91,3px 3px 0 #c74739}
[data-theme="spaceage"] .fleet-heading span{font-family:Impact,'Arial Black',sans-serif;font-style:italic;text-transform:uppercase;font-size:2rem;line-height:1}
[data-theme="spaceage"] .fleet-heading small{font-size:.58rem;max-width:80px;text-align:right}
[data-theme="spaceage"] .field{position:relative;border:3px solid var(--team-color);border-radius:15px;background:linear-gradient(115deg,#24636a,#052833 45%,#031f29);box-shadow:inset 0 0 0 2px #061e27,0 0 0 2px #c5b38b,0 3px 0 #172e31}
[data-theme="spaceage"] .field header{padding:1px 2px 5px;border-bottom:2px solid #819b86;color:#fff2d9}
[data-theme="spaceage"] .field .status{color:#d5e5d3}.field .status.danger{color:#ffb5c1}
[data-theme="spaceage"] .field.target{box-shadow:0 0 0 6px #fff2c4,0 0 18px var(--team-color)}
[data-theme="spaceage"] .field.attack-origin{box-shadow:0 0 0 3px #b5eeff,0 0 20px #b5eeffb3}
[data-theme="spaceage"] .field-timer{padding:8px 3px;width:100%;border:2px solid #e6cb83;border-radius:5px;background:#f5d06b;color:#102d33;font-family:Impact,'Arial Black',sans-serif;font-size:1.4rem;box-shadow:inset 0 0 0 1px #a97c3f}
[data-theme="spaceage"] .field.out .field-timer{background:#321d25;color:#ff8282}
[data-theme="spaceage"] .play-panel{position:relative;padding:0;border:0;border-radius:30px;background:none;box-shadow:none;outline:2px solid var(--team-color,#98c6b2)}
[data-theme="spaceage"] .cockpit-window{position:relative;padding:62px 7% 26px;background:url('/art/spaceage-frame.png') center/100% 100% no-repeat #062a32;border-radius:32px 32px 20px 20px}
[data-theme="spaceage"] .play-heading{position:absolute;top:1%;left:23%;right:23%;height:7%;padding:0;border:0;margin:0;gap:5px}
[data-theme="spaceage"] .play-heading .field-title{font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:1.1rem;color:#ffe182;letter-spacing:0;text-shadow:2px 2px #081f29}
[data-theme="spaceage"] .play-heading>div:first-child{min-width:0}
[data-theme="spaceage"] .play-heading .eyebrow{margin-bottom:1px}
[data-theme="spaceage"] .play-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'DM Sans',sans-serif;font-size:.6rem;line-height:1.2;text-transform:none;font-style:normal;color:#f4e6c5}
[data-theme="spaceage"] .timer{font-size:1rem;color:#ffe078;white-space:nowrap}
[data-theme="spaceage"] .board-wrap canvas{border:0;border-radius:18px 18px 22px 22px;box-shadow:none}
[data-theme="spaceage"] .play-panel.danger{outline-color:#ff163d;box-shadow:0 0 0 3px #ff163d,0 0 30px #e21c3c}
[data-theme="spaceage"] .play-panel.danger #board{border-color:#ff163d}
[data-theme="spaceage"] .cockpit-console{position:relative;aspect-ratio:2/1;margin:-18px -5% -4px;padding:0;border:0;border-radius:0;background:url('/art/spaceage-console.png') center/100% 100% no-repeat;box-shadow:none}
[data-theme="spaceage"] .console-gauges{display:none}
[data-theme="spaceage"] .launcher-controls{position:absolute;left:10%;right:10%;top:21%;height:24%;display:grid;grid-template-columns:18.75% 57.5% 18.75%;gap:2.5%;margin:0;padding:0;border:0;background:none;box-shadow:none}
[data-theme="spaceage"] .launcher-controls button{min-width:0;min-height:44px;width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;border-radius:8px}
[data-theme="spaceage"] #fire{max-width:none;font-family:'DM Sans',system-ui,sans-serif;font-weight:1000;font-style:italic;font-size:2.3rem;letter-spacing:-.05em;color:#bd2e25;background:none;border:0;box-shadow:none;text-shadow:1px 1px #e8a13e}
[data-theme="spaceage"] #fire span{font-family:'DM Sans',sans-serif;color:#30231b;font-size:.65rem;font-weight:900;opacity:1;letter-spacing:0}
[data-theme="spaceage"] #aim-left,[data-theme="spaceage"] #aim-right{font-size:1.65rem;color:#f8e6b5;background:none;box-shadow:none;text-shadow:1px 2px #071d25}
[data-theme="spaceage"] .field-warehouse{position:absolute;left:10%;right:10%;top:51%;height:27%;display:grid;grid-template-columns:47.5% 47.5%;gap:5%;margin:0;padding:0;max-width:none;align-items:stretch}
[data-theme="spaceage"] .field-warehouse .stored-items{height:100%;min-width:0}
[data-theme="spaceage"] .field-warehouse button{display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:2px;line-height:1.05;height:100%;min-height:44px;padding:0;border:0;border-radius:10px;background:none;box-shadow:none;font-size:.8rem}
[data-theme="spaceage"] .field-warehouse button.selected{border:0;box-shadow:inset 0 0 0 2px #f7d67d}
[data-theme="spaceage"] .field-warehouse strong{font-size:1.3rem}.field-warehouse .effect-list{min-width:0}
[data-theme="spaceage"] .next-preview{padding:6px;border:3px ridge #c8b98b;border-radius:12px;background:#062b34ed;color:#fff0c4;right:2%;bottom:2%}
[data-theme="spaceage"] #next-bubble{background:radial-gradient(circle at 32% 28%,#fff,var(--bubble-color,#b4c5ce) 38%,#123942);color:#08262c;border-color:#f3e5bc99}
[data-theme="spaceage"] .seat,[data-theme="spaceage"] .lobby-team{background:#062b35eb;border-color:#8eaa96}
[data-theme="spaceage"] .lobby-team legend{color:#ffe2a5}
[data-theme="spaceage"] .activity .eyebrow{color:#ffa688}
[data-theme="spaceage"] .effect-list span,[data-theme="spaceage"] .item-queue span{background:#082f39;border-color:#90b39b}
[data-theme="spaceage"] footer{color:#f1dfb8;background:#04212ade;border:1px solid #b3b392;border-radius:10px;padding:10px;margin-top:16px}
[data-theme="spaceage"] .theme-picker{color:#ffe1a1}
@media(min-width:1051px){
  [data-theme="spaceage"] #fields>.field{grid-template-columns:76px minmax(0,1fr) 66px;gap:7px}
  [data-theme="spaceage"] .pilot-portrait{display:block;align-self:center;height:128px;border:2px solid #cdbd8e;border-radius:38px 38px 8px 8px;background-image:url('/art/spaceage-pilots.png');background-size:300% 200%;background-position:0 0;background-repeat:no-repeat;min-height:0}
  [data-theme="spaceage"] [data-portrait="1"] .pilot-portrait{background-position:50% 0}
  [data-theme="spaceage"] [data-portrait="2"] .pilot-portrait{background-position:100% 0}
  [data-theme="spaceage"] [data-portrait="3"] .pilot-portrait{background-position:0 100%}
  [data-theme="spaceage"] [data-portrait="4"] .pilot-portrait{background-position:50% 100%}
  [data-theme="spaceage"] [data-portrait="5"] .pilot-portrait{background-position:100% 100%}
}
@media(max-width:1050px){
  [data-theme="spaceage"] .masthead{flex-wrap:wrap;min-height:0;padding-bottom:12px}
  [data-theme="spaceage"] .header-actions{max-width:none;align-self:center;margin:0}
}
@media(max-width:720px){
  [data-theme="spaceage"] body{background-attachment:scroll;background-position:center top;background-size:auto 1100px}
  [data-theme="spaceage"] .shell{width:calc(100% - 14px);margin:7px auto;padding:12px 9px;border-width:3px;border-radius:14px}
  [data-theme="spaceage"] .masthead{gap:22px;padding:8px 6px 6px;margin-bottom:14px}
  [data-theme="spaceage"] .masthead>div:first-child{flex-basis:100%}
  [data-theme="spaceage"] .header-actions{margin-left:auto}
  [data-theme="spaceage"] .play-panel{padding:0;border:0}
  [data-theme="spaceage"] .entry{padding:22px 18px}
  [data-theme="spaceage"] .cockpit-window{padding:52px 7% 22px}
  [data-theme="spaceage"] .play-heading h2{font-size:.55rem}
  [data-theme="spaceage"] .play-heading .field-title{font-size:.9rem}
  [data-theme="spaceage"] .timer{font-size:.85rem}
  [data-theme="spaceage"] .cockpit-console{margin:-12px -8px -4px;padding:0}
  [data-theme="spaceage"] #fire{font-size:1.7rem}
  [data-theme="spaceage"] #fire span{margin-left:3px;font-size:.5rem}
  [data-theme="spaceage"] .field{padding:5px;border-width:2px}
}
@media(min-width:1051px){
  [data-theme="spaceage"] .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  [data-theme="spaceage"] .masthead>div:first-child{grid-column:1}
  [data-theme="spaceage"] .team-scoreboard{grid-column:2}
  [data-theme="spaceage"] .header-actions{grid-column:3;justify-self:end}
}
@media(min-width:1051px){[data-theme="spaceage"] .board-wrap{max-width:360px}
  [data-theme="spaceage"] .masthead{min-height:140px}
}

.console-feedback{display:none}
[data-theme="spaceage"] .console-feedback:has(span){display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;background:#052b35;border:2px solid #c9b58c;border-radius:10px}
[data-theme="spaceage"] .console-feedback .item-queue{margin:0}
[data-theme="spaceage"] #next-bubble.painted-preview{background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;color:transparent;border:0;box-shadow:none;text-shadow:none}
[data-theme="spaceage"] .cockpit-console button:hover{background:#fff2c41c}
[data-theme="spaceage"] .cockpit-console button:active{background:#021c3440;transform:translateY(1px)}

@media(max-width:720px){
  [data-theme="spaceage"] .field-warehouse button{font-size:.68rem;gap:1px}
  [data-theme="spaceage"] .field-warehouse strong{font-size:1rem;max-width:100%}
}

/* Printed instrument surrounds share the cockpit's ink, enamel and paper wear. */
[data-theme="spaceage"] h1{position:relative;width:min(100%,390px);aspect-ratio:3/1;font-size:0;background:url('/art/spaceage-wordmark.png') left center/contain no-repeat;text-shadow:none;-webkit-text-stroke:0}
[data-theme="spaceage"] .wordmark-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-theme="spaceage"] .card,[data-theme="spaceage"] .team-scoreboard,[data-theme="spaceage"] .field{border:12px solid #c9ba92;border-image:url('/art/spaceage-instruments.png') 96 fill stretch;border-radius:0;background:none;box-shadow:none}
[data-theme="spaceage"] .card{padding:18px}
[data-theme="spaceage"] .room-bar{padding:7px 12px;margin-bottom:14px}
[data-theme="spaceage"] .entry{padding:clamp(24px,4vw,60px)}
[data-theme="spaceage"] .team-scoreboard{border-width:14px;transform:none;overflow:visible}
[data-theme="spaceage"] .team-score{padding:5px 10px;min-width:90px;border-right:2px solid #89947a}
[data-theme="spaceage"] .team-score:last-child{border-right:0}
[data-theme="spaceage"] .team-score strong{font-family:monospace;font-size:2rem;letter-spacing:.03em;padding:1px 5px;background:#031b26;border:1px solid #8b9f86;box-shadow:inset 0 2px 4px #010b12;margin:3px 0}
[data-theme="spaceage"] .fleet-heading{align-self:stretch;padding:0 12px 0 27%;border:0;border-radius:0;background:url('/art/spaceage-placards.png') left top/100% 200% no-repeat;box-shadow:none;color:#092b32}
[data-theme="spaceage"] .fleet-heading[data-team="1"]{background-position:left bottom}
[data-theme="spaceage"] .fleet-heading span{font-family:'DM Sans',system-ui,sans-serif;font-weight:1000;font-style:italic;font-size:1.6rem;letter-spacing:-.05em;text-shadow:1px 1px #ffe8ba;white-space:nowrap}
[data-theme="spaceage"] .fleet-heading small{font-size:.5rem;max-width:75px}
[data-theme="spaceage"] .field{border-width:10px;outline:3px solid var(--team-color,#3d6778);outline-offset:1px}
[data-theme="spaceage"] .field header{border:0;padding-bottom:4px;color:#fff1d1}
[data-theme="spaceage"] .field canvas{background:none}
[data-theme="spaceage"] .field.target{box-shadow:0 0 0 6px #fff2c4,0 0 18px var(--team-color)}
[data-theme="spaceage"] .field.attack-origin{box-shadow:0 0 0 3px #b5eeff,0 0 20px #b5eeffb3}
[data-theme="spaceage"] .pilot-portrait{border:5px solid #c9ba92;border-image:url('/art/spaceage-instruments.png') 96 stretch;border-radius:0}
[data-theme="spaceage"] .field-timer{border:5px solid #c9ba92;border-image:url('/art/spaceage-instruments.png') 96 stretch;border-radius:0;box-shadow:none;padding:4px 1px;font-family:monospace;font-size:1.1rem}
[data-theme="spaceage"] .next-preview{border:1px solid #b8aa86;border-image:none;border-radius:6px;padding:5px;background:url('/art/spaceage-instruments.png') center/700% 700% #062a32;box-shadow:none;right:2%;bottom:2%;color:#fff0c4}
[data-theme="spaceage"] footer{border:8px solid #c9ba92;border-image:url('/art/spaceage-instruments.png') 96 fill stretch;border-radius:0;background:none;padding:8px}
@media(min-width:1051px){
  [data-theme="spaceage"] #game{grid-template-rows:60px repeat(3,minmax(0,1fr)) auto}
  [data-theme="spaceage"] #fields>.field{padding:5px;grid-template-columns:70px minmax(0,1fr) 66px}
}
@media(max-width:720px){
  [data-theme="spaceage"] h1{width:min(100%,330px)}
  [data-theme="spaceage"] .card{border-width:9px;padding:14px}
  [data-theme="spaceage"] .room-bar{padding:8px}
  [data-theme="spaceage"] .field{border-width:7px;padding:3px}
}