:root{color-scheme:dark;--void:#02040d;--panel:rgba(7,15,34,.88);--line:rgba(104,197,255,.28);--line-hot:#75e8ff;--cyan:#59e8ff;--violet:#b46cff;--silver:#eafcff;--gold:#ffe483;--danger:#ff668c;--success:#65f6c6;--text:#f2f8ff;--muted:#9fb5cf}
*{box-sizing:border-box}html{background:var(--void)}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 14% 12%,rgba(28,96,184,.2),transparent 32rem),radial-gradient(circle at 82% 25%,rgba(137,54,210,.18),transparent 35rem),linear-gradient(180deg,#040916,#01030a 70%);overflow-x:hidden}button,a{font:inherit}.cosmos,.cosmos::before,.cosmos::after{position:fixed;inset:0;z-index:-3;pointer-events:none;content:""}.cosmos{background-image:radial-gradient(circle,#fff 0 1px,transparent 1.2px),radial-gradient(circle,#80dcff 0 1px,transparent 1.3px);background-size:127px 127px,211px 211px;background-position:7px 13px,61px 83px;opacity:.38}.cosmos::before{background:linear-gradient(114deg,transparent 20%,rgba(91,225,255,.07) 47%,transparent 64%);animation:drift 18s linear infinite}.cosmos::after{background:radial-gradient(ellipse at center,transparent 0 46%,rgba(0,0,0,.62) 100%)}.cosmos span{position:absolute;border:1px solid rgba(98,221,255,.12);border-radius:50%}.cosmos span:nth-child(1){width:420px;height:420px;left:-190px;top:20%}.cosmos span:nth-child(2){width:260px;height:260px;right:-100px;top:12%}.cosmos span:nth-child(3){width:620px;height:210px;left:28%;bottom:-150px}@keyframes drift{to{transform:translateX(36%)}}
.command-bar{min-height:70px;padding:10px max(18px,calc((100vw - 1540px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);background:rgba(2,6,16,.83);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand-mark{width:43px;height:43px;border:1px solid var(--line-hot);border-radius:50%;display:grid;place-items:center;font-weight:950;color:var(--cyan);background:radial-gradient(circle,rgba(89,232,255,.25),rgba(13,35,69,.8));box-shadow:0 0 22px rgba(89,232,255,.22)}.brand strong,.brand small{display:block}.brand strong{letter-spacing:.12em;text-transform:uppercase;font-size:.88rem}.brand small{color:var(--muted);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;margin-top:2px}.command-bar nav{display:flex;gap:8px}.command-bar nav a,.command-bar nav button{min-height:38px;padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(13,31,61,.75);color:var(--text);text-decoration:none;font-weight:800;font-size:.72rem;cursor:pointer}.command-bar nav a:hover,.command-bar nav button:hover{border-color:var(--line-hot);background:rgba(27,73,119,.7)}
.game-shell{width:min(1540px,calc(100% - 28px));margin:auto;padding:26px 0 48px}.hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:22px;margin-bottom:16px;padding:20px 22px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(105deg,rgba(9,22,49,.88),rgba(16,19,56,.6));box-shadow:0 20px 60px rgba(0,0,0,.32)}.eyebrow{margin:0 0 6px;color:var(--cyan);font-size:.63rem;font-weight:900;letter-spacing:.2em}.hero h1{margin:0 0 8px;font-size:clamp(1.75rem,4vw,3.75rem);line-height:1;letter-spacing:-.035em;background:linear-gradient(90deg,#fff,#8eeeff 48%,#cba4ff);background-clip:text;color:transparent}.hero p:not(.eyebrow){margin:0;max-width:820px;color:#b9cce2;line-height:1.5;font-size:.86rem}.turn-beacon{min-width:250px;display:grid;grid-template-columns:13px 1fr;align-items:center;column-gap:10px;padding:12px 14px;border:1px solid rgba(101,246,198,.34);border-radius:13px;background:rgba(2,9,22,.64)}.turn-beacon>span{grid-row:1/3;width:12px;height:12px;border-radius:50%;background:var(--success);box-shadow:0 0 16px var(--success)}.turn-beacon strong,.turn-beacon small{display:block}.turn-beacon strong{font-size:.79rem}.turn-beacon small{color:var(--muted);font-size:.64rem;margin-top:2px}
.mission-layout{display:grid;grid-template-columns:minmax(215px,260px) minmax(400px,1fr) minmax(210px,270px);gap:15px;align-items:start}.panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(8,18,40,.9),rgba(3,9,22,.92));box-shadow:0 22px 58px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.hud,.telemetry{padding:15px;position:sticky;top:87px}.panel-title{padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid rgba(112,182,255,.18)}.panel-title span,.panel-title strong{display:block}.panel-title span{font-size:.56rem;color:var(--cyan);letter-spacing:.17em;font-weight:900}.panel-title strong{font-size:.95rem;margin-top:3px}.fleet-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;margin:8px 0;padding:9px;border:1px solid rgba(112,174,244,.2);border-radius:11px;background:rgba(4,11,25,.55)}.fleet-card.active{border-color:rgba(89,232,255,.68);box-shadow:0 0 20px rgba(89,232,255,.11)}.fleet-card small,.fleet-card strong{display:block}.fleet-card small{font-size:.52rem;color:var(--muted);letter-spacing:.11em}.fleet-card strong{font-size:.71rem;margin-top:2px}.fleet-card b{color:var(--cyan);font-size:.85rem}.fleet-orb{width:34px;height:34px;border-radius:50%;display:block}.fleet-orb.silver{background:radial-gradient(circle at 34% 27%,#fff,#a7e8f5 35%,#37799b 70%,#071a2c);box-shadow:0 0 15px rgba(200,250,255,.3)}.fleet-orb.void{background:radial-gradient(circle at 34% 27%,#f6dfff,#a763e0 32%,#411272 68%,#0b0319);box-shadow:0 0 15px rgba(190,104,255,.35)}.action-stack{display:grid;gap:7px;margin:13px 0}.action-stack button,.primary{min-height:41px;border:1px solid rgba(110,198,255,.42);border-radius:10px;background:#112e54;color:#fff;font-weight:850;font-size:.72rem;cursor:pointer}.action-stack .primary,.primary{background:linear-gradient(90deg,#267cd2,#7254df 58%,#b34fc8);border-color:#83eaff}.readout{margin-top:8px;padding:9px 10px;border:1px solid rgba(105,170,242,.16);border-radius:9px;background:rgba(2,9,22,.55)}.readout span,.readout strong{display:block}.readout span{font-size:.52rem;color:var(--muted);letter-spacing:.11em;text-transform:uppercase}.readout strong{font-size:.68rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tip{margin:12px 0 0;color:#9fb4ca;font-size:.66rem;line-height:1.5}.tip strong{color:var(--cyan)}
.board-panel{padding:clamp(8px,1.4vw,17px);min-width:0}.board-frame{--frame-pad:clamp(28px,4vw,48px);position:relative;width:min(100%,820px);aspect-ratio:1;margin:auto;padding:var(--frame-pad);border:1px solid rgba(117,232,255,.55);border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(44,125,188,.13),transparent 62%),linear-gradient(145deg,rgba(12,31,61,.96),rgba(3,9,23,.98));box-shadow:inset 0 0 0 5px rgba(89,232,255,.04),inset 0 0 42px rgba(89,232,255,.1),0 24px 60px rgba(0,0,0,.5),0 0 34px rgba(64,184,255,.12);isolation:isolate}.board-frame::before{content:"";position:absolute;inset:13px;border:1px solid rgba(183,245,255,.18);border-radius:16px;pointer-events:none}.board-frame::after{content:"ASTRALIS // INNER GRID LOCKED";position:absolute;top:8px;left:50%;transform:translateX(-50%);color:rgba(160,227,255,.6);font-size:clamp(.42rem,.7vw,.58rem);font-weight:900;letter-spacing:.14em;white-space:nowrap}.frame-corner{position:absolute;width:30px;height:30px;border-color:var(--line-hot);opacity:.76;pointer-events:none}.corner-nw{left:18px;top:18px;border-left:3px solid;border-top:3px solid}.corner-ne{right:18px;top:18px;border-right:3px solid;border-top:3px solid}.corner-sw{left:18px;bottom:18px;border-left:3px solid;border-bottom:3px solid}.corner-se{right:18px;bottom:18px;border-right:3px solid;border-bottom:3px solid}
.playable-grid{position:absolute;inset:var(--frame-pad);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:0;aspect-ratio:1;border:2px solid rgba(202,248,255,.88);background:#07182a;overflow:hidden;box-shadow:0 0 0 5px rgba(2,9,22,.96),0 0 0 7px rgba(82,214,255,.28),0 0 34px rgba(82,214,255,.23);touch-action:none;user-select:none}.board-square{appearance:none;position:relative;display:grid;place-items:center;min-width:0;min-height:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;cursor:pointer;background:rgba(183,231,240,.78);color:#082036}.board-square.dark{background:rgba(17,65,102,.88);color:#e9fbff}.board-square::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}.board-square:hover::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}.board-square.selected::after{box-shadow:inset 0 0 0 4px var(--gold),inset 0 0 25px rgba(255,228,131,.5)}.board-square.legal::before{content:"";position:absolute;z-index:3;width:22%;aspect-ratio:1;border-radius:50%;background:var(--success);box-shadow:0 0 16px rgba(101,246,198,.85)}.board-square.capture::before{content:"";position:absolute;z-index:3;inset:8%;border:4px solid var(--danger);border-radius:50%;box-shadow:inset 0 0 18px rgba(255,102,140,.2),0 0 16px rgba(255,102,140,.4)}.board-square.last::after{background:rgba(255,218,82,.22)}.board-square.check::after{box-shadow:inset 0 0 0 4px #ff4a72,inset 0 0 28px rgba(255,55,96,.55);animation:pulse-check 1s ease-in-out infinite}@keyframes pulse-check{50%{filter:brightness(1.45)}}.coord{position:absolute;left:3px;top:2px;z-index:2;font-size:clamp(.4rem,.75vw,.62rem);font-weight:950;opacity:.82;pointer-events:none}.piece{position:relative;z-index:4;display:grid;place-items:center;width:82%;height:82%;max-width:82%;max-height:82%;pointer-events:none;filter:drop-shadow(0 6px 4px rgba(0,0,0,.56));transition:transform .16s ease}.board-square:hover .piece{transform:translateY(-2px) scale(1.04)}.piece svg{display:block;width:100%;height:100%;overflow:visible}.piece.white{--piece-highlight:#fff;--piece-main:#e5fbff;--piece-mid:#85cfe2;--piece-edge:#337a9b;--piece-shadow:#08283d;--piece-accent:#fff2a0;--piece-outline:#efffff;--piece-glow:#61eaff;--piece-shell-opacity:.92;--piece-deep-opacity:.72;--piece-accent-opacity:.82}.piece.black{--piece-highlight:#fff;--piece-main:#e7c9ff;--piece-mid:#9b60d1;--piece-edge:#4b187e;--piece-shadow:#110622;--piece-accent:#ffb6f2;--piece-outline:#f6e8ff;--piece-glow:#be72ff;--piece-shell-opacity:.92;--piece-deep-opacity:.8;--piece-accent-opacity:.76}.coordinate-strip{position:absolute;color:rgba(183,226,249,.76);font-size:clamp(.45rem,.75vw,.65rem);font-weight:900;text-transform:uppercase;pointer-events:none}.coordinate-strip.ranks{left:9px;top:var(--frame-pad);bottom:var(--frame-pad);width:calc(var(--frame-pad) - 16px);display:grid;grid-template-rows:repeat(8,1fr);place-items:center}.coordinate-strip.files{left:var(--frame-pad);right:var(--frame-pad);bottom:8px;height:calc(var(--frame-pad) - 16px);display:grid;grid-template-columns:repeat(8,1fr);place-items:center}.board-caption{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding-top:12px;color:var(--muted);font-size:.62rem}.board-caption span{display:flex;align-items:center;gap:6px}.legend{width:12px;height:12px;border-radius:50%;display:inline-block}.legend.selected{border:2px solid var(--gold)}.legend.route{background:var(--success)}.legend.capture{border:2px solid var(--danger)}
#battleLog{margin:0;padding:0;list-style:none;max-height:420px;overflow:auto;border:1px solid rgba(104,170,242,.16);border-radius:10px;background:rgba(2,8,20,.5)}#battleLog li{padding:9px 10px;border-bottom:1px solid rgba(104,170,242,.12);font-size:.66rem;line-height:1.38;color:#c6d8e9}#battleLog li:last-child{border-bottom:0}.system-line{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(104,170,242,.12);font-size:.61rem}.system-line span{color:var(--muted)}.system-line strong{color:var(--success)}
.duel-layer{position:fixed;inset:0;z-index:100;background:rgba(0,3,12,.9);backdrop-filter:blur(11px);padding:clamp(8px,2vw,24px);overflow:auto}.duel-layer[hidden]{display:none}.duel-shell{width:min(1120px,100%);min-height:min(760px,calc(100vh - 32px));margin:auto;padding:clamp(12px,2vw,22px);border:1px solid rgba(105,231,255,.65);border-radius:22px;background:linear-gradient(145deg,rgba(7,23,50,.98),rgba(19,7,42,.98));box-shadow:0 30px 100px rgba(0,0,0,.8),0 0 50px rgba(65,194,255,.14)}.duel-header{display:flex;justify-content:space-between;align-items:end;gap:16px}.duel-header p{margin:0 0 4px;color:var(--danger);font-size:.6rem;letter-spacing:.2em;font-weight:950}.duel-header h2{margin:0;font-size:clamp(1.35rem,3vw,2.35rem)}.duel-objective{padding:7px 10px;border:1px solid rgba(105,231,255,.3);border-radius:999px;color:var(--muted);font-size:.65rem}.health-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin:15px 0 10px}.health-row>strong{font-size:.72rem;color:var(--muted)}.health-block span{display:block;margin-bottom:5px;font-size:.64rem;font-weight:850}.health-block.defender span{text-align:right}.health-block>div{height:13px;border:1px solid rgba(223,252,255,.38);border-radius:999px;background:#050914;overflow:hidden}.health-block i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#27b5e6,#86f9ff);box-shadow:0 0 12px rgba(89,232,255,.55);transition:width .16s}.health-block.defender i{margin-left:auto;background:linear-gradient(90deg,#9c4dd6,#ef9cff);box-shadow:0 0 12px rgba(190,114,255,.55)}.arena-wrap{position:relative;width:100%;aspect-ratio:16/9;min-height:300px;border:1px solid rgba(135,225,255,.55);border-radius:15px;overflow:hidden;background:#020611;box-shadow:inset 0 0 40px rgba(61,169,255,.12)}#combatCanvas{display:block;width:100%;height:100%}.countdown,.duel-result{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:clamp(4rem,13vw,9rem);font-weight:950;color:#fff;text-shadow:0 0 30px var(--cyan);pointer-events:none}.countdown[hidden],.duel-result[hidden]{display:none}.duel-result{font-size:clamp(1.8rem,6vw,4.6rem);background:rgba(2,5,15,.44)}.duel-controls{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;margin-top:11px}.control-copy strong,.control-copy small{display:block}.control-copy strong{font-size:.75rem}.control-copy small{color:var(--muted);font-size:.62rem;margin-top:3px}.touch-pad{display:flex;gap:6px;align-items:center}.touch-pad button{width:44px;height:42px;border:1px solid rgba(110,222,255,.52);border-radius:9px;background:#102b50;color:#fff;font-weight:900;touch-action:none;cursor:pointer}.touch-pad .fire{width:68px;background:linear-gradient(180deg,#ff87a5,#d72f63);border-color:#ffbed0;color:#24030c}
dialog{width:min(760px,calc(100% - 24px));padding:0;border:1px solid var(--line-hot);border-radius:18px;background:linear-gradient(180deg,#0c1b38,#050b19);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.75)}dialog::backdrop{background:rgba(0,3,12,.78);backdrop-filter:blur(7px)}dialog form{padding:20px}dialog header{display:flex;justify-content:space-between;gap:15px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:13px}dialog h2{margin:0;font-size:1.3rem}dialog header button{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:#112541;color:#fff;font-size:1.25rem}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rules-grid article{padding:12px;border:1px solid rgba(110,182,255,.2);border-radius:11px;background:rgba(3,10,24,.58)}.rules-grid strong{color:var(--cyan);font-size:.76rem}.rules-grid p{margin:6px 0 0;color:#b3c8dd;font-size:.69rem;line-height:1.48}.close-rules{width:100%;margin-top:13px}
/* All 64 coordinates stay in one rules grid. Opposing 4x4 quadrants rise as clear-glass tactical platforms. */
.playable-grid{gap:0;overflow:visible;isolation:isolate;background:radial-gradient(circle at 48% 40%,rgba(79,193,255,.28),transparent 42%),radial-gradient(circle at 72% 68%,rgba(169,83,255,.18),transparent 42%),linear-gradient(145deg,rgba(4,21,39,.88),rgba(2,7,19,.94))}
.playable-grid::before,.playable-grid::after{content:"";position:absolute;width:50%;height:50%;z-index:2;pointer-events:none;transform:translateY(-14px);border:2px solid rgba(187,246,255,.78);background:rgba(133,226,255,.025);box-shadow:0 14px 0 rgba(34,107,148,.66),0 19px 24px rgba(0,0,0,.52),0 0 22px rgba(91,225,255,.24)}
.playable-grid::before{right:0;top:0}.playable-grid::after{left:0;bottom:0}
.board-square{--level-glow:rgba(112,222,255,.06);z-index:1;border:1px solid rgba(220,251,255,.24);background:linear-gradient(145deg,rgba(229,251,255,.095),rgba(104,194,218,.018));color:#eafcff;backdrop-filter:blur(1px) saturate(1.15);box-shadow:inset 1px 1px 0 rgba(255,255,255,.24),inset -1px -1px 0 rgba(25,88,127,.12),inset 0 0 14px var(--level-glow);transition:filter .16s ease,background .16s ease,transform .2s ease,box-shadow .2s ease}
.board-square.dark{background:linear-gradient(145deg,rgba(46,126,177,.065),rgba(4,31,65,.012));color:#e9fbff}.board-square[data-level="upper"]{--level-glow:rgba(104,238,255,.1);border-color:rgba(215,252,255,.28)}.board-square[data-level="mid"]{--level-glow:rgba(133,128,255,.06)}.board-square[data-level="lower"]{--level-glow:rgba(151,80,255,.08);border-color:rgba(196,168,255,.24)}
.board-square[data-platform="raised"]{z-index:3;transform:translateY(-14px);animation:platform-rise .65s cubic-bezier(.2,.8,.2,1) both;background:linear-gradient(145deg,rgba(225,251,255,.12),rgba(80,174,216,.025));border-color:rgba(211,250,255,.52);box-shadow:inset 1px 1px 0 rgba(255,255,255,.42),inset -1px -1px 0 rgba(28,90,128,.18),inset 0 0 18px rgba(91,218,255,.11)}
.board-square.dark[data-platform="raised"]{background:linear-gradient(145deg,rgba(74,162,204,.085),rgba(7,38,72,.018))}
@keyframes platform-rise{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.board-square:hover{filter:brightness(1.18)}.board-square:hover::after{box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}.board-square.legal{background:linear-gradient(145deg,rgba(104,255,211,.35),rgba(12,79,81,.28))}.board-square.capture{background:linear-gradient(145deg,rgba(255,110,152,.32),rgba(80,18,70,.3))}
.route-label{position:absolute;z-index:6;left:50%;bottom:5%;transform:translateX(-50%);padding:2px 5px;border:1px solid rgba(218,255,247,.74);border-radius:999px;background:rgba(3,23,29,.86);color:#baffeb;font-size:clamp(.36rem,.58vw,.52rem);font-weight:950;letter-spacing:.08em;line-height:1.1;pointer-events:none;box-shadow:0 0 10px rgba(101,246,198,.28)}.board-square.capture .route-label{border-color:rgba(255,194,210,.8);background:rgba(43,4,17,.9);color:#ffd9e3;box-shadow:0 0 10px rgba(255,102,140,.3)}
@media(max-width:1120px){.mission-layout{grid-template-columns:minmax(190px,230px) 1fr}.telemetry{grid-column:1/-1;position:static}.telemetry #battleLog{max-height:150px}.board-frame{max-width:760px}.hero{grid-template-columns:1fr}}
@media(max-width:760px){.command-bar{align-items:flex-start}.command-bar nav a{display:none}.game-shell{width:min(100% - 12px,720px);padding-top:8px}.hero{padding:15px;margin-bottom:8px}.turn-beacon{min-width:0}.mission-layout{grid-template-columns:1fr}.board-panel{order:1}.hud{order:2;position:static}.telemetry{order:3}.board-frame{--frame-pad:clamp(22px,8vw,36px);border-radius:15px}.board-frame::after{font-size:.38rem}.piece{width:88%;height:88%;max-width:88%;max-height:88%}.coordinate-strip.ranks{left:4px}.coordinate-strip.files{bottom:3px}.duel-shell{min-height:0}.duel-controls{grid-template-columns:1fr}.touch-pad{justify-content:center;flex-wrap:wrap}.touch-pad button{width:48px;height:46px}.rules-grid{grid-template-columns:1fr}.playable-grid::before,.playable-grid::after,.board-square[data-platform="raised"]{transform:translateY(-10px)}.playable-grid::before,.playable-grid::after{box-shadow:0 10px 0 rgba(34,107,148,.66),0 15px 18px rgba(0,0,0,.48),0 0 18px rgba(91,225,255,.2)}.board-square[data-platform="raised"]{animation-name:platform-rise-mobile}@keyframes platform-rise-mobile{from{transform:translateY(0)}to{transform:translateY(-10px)}}}
@media(max-width:430px){.brand small{display:none}.brand-mark{width:36px;height:36px}.command-bar nav button{padding:7px 9px}.hero h1{font-size:1.65rem}.hero p:not(.eyebrow){font-size:.74rem}.turn-beacon{padding:9px 10px}.duel-header{align-items:start}.duel-objective{display:none}.health-row{gap:8px}.arena-wrap{min-height:330px;aspect-ratio:4/5}.board-frame{--frame-pad:26px}.frame-corner{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}