/* Living battlefield prototype. Scenery cannot obscure or receive game input. */
body:has(.game-layout){background:radial-gradient(ellipse at 50% 45%,#28303a,#060910 75%)}
main:has(.game-layout){max-width:1920px;padding:10px 18px}
.game-layout{grid-template-columns:minmax(0,1fr) 245px;gap:16px;--battle-art:clamp(110px,calc((100dvh - 450px)/3),230px)}
.arena{position:relative;isolation:isolate;padding:36px 65px 20px;border:1px solid #6e6254;border-radius:22px;background:#0a1019;box-shadow:0 24px 70px #000c,inset 0 0 0 5px #11151c,inset 0 0 0 7px #55515b,inset 0 0 60px #000}
.arena::before,.arena::after{display:none}
.battle-scenery{position:absolute;inset:8px;z-index:-1;overflow:hidden;border-radius:16px;pointer-events:none;background:#0c1018}
.territory{position:absolute;left:0;right:0;height:50%;overflow:hidden;color:var(--territory);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--territory) 12%,transparent),transparent 70%),repeating-linear-gradient(100deg,transparent 0 90px,#ffffff02 91px 92px),#0a1018}
.territory-enemy{top:0}.territory-player{bottom:0;transform:rotate(180deg)}
.territory svg{width:100%;height:100%;position:absolute;inset:0}
.territory[data-faction=solari]{background:radial-gradient(ellipse at 50% 0%,#a77c242b,transparent 70%),linear-gradient(140deg,#231d1b,#11151c 60%)}
.territory[data-faction=synthari]{background:radial-gradient(ellipse at 50% 0%,#c9193920,transparent 65%),repeating-linear-gradient(120deg,transparent 0 54px,#ff667704 55px 56px),#101019}
.territory-horizon{position:absolute;inset:4% 13% auto;height:2px;background:linear-gradient(90deg,transparent,var(--territory),transparent);box-shadow:0 0 22px var(--territory);opacity:.45;animation:territory-breathe 7s ease-in-out infinite}
.rift-core{position:absolute;left:5%;right:5%;top:50%;height:1px;background:linear-gradient(90deg,#ff416900,#ba617a,#b3d5ff,#ecc474,#ffd36300);box-shadow:0 0 22px 3px #a6c7ff29}
.theater-label{position:absolute;top:13px;left:80px;right:80px;text-align:center;color:#b1a79b;font-size:9px;text-transform:uppercase;letter-spacing:2.5px;pointer-events:none}.theater-label span{color:#e2ca93;padding:0 10px}
.arena>.commander{border-radius:6px 18px 6px 18px;background:linear-gradient(115deg,color-mix(in srgb,var(--power-color) 13%,#121722),#101722 70%);border:1px solid color-mix(in srgb,var(--power-color) 45%,#26313e);border-left:5px solid var(--power-color);box-shadow:0 8px 18px #0007,inset 0 1px #ffffff15;min-height:60px}
.commander>img{width:44px;height:44px;padding:6px;border:1px solid var(--power-color);border-radius:50%;background:#090e17;box-shadow:0 0 18px color-mix(in srgb,var(--power-color) 18%,transparent)}
.commander .health{padding:4px 9px;background:#200d1670;border:1px solid #b86c7155;border-radius:7px;font-variant-numeric:tabular-nums}
.commander .flux{color:#9de8ff;padding:5px 9px;background:#071c2a;border:1px solid #5abbd45c;border-radius:7px}
.commander-power{background:linear-gradient(#2a303b,#11141c);box-shadow:0 3px 0 #02050a,inset 0 1px #ffffff24}
.board-row{position:relative;gap:10px;padding:12px 2px;background:linear-gradient(90deg,transparent,#03081170 12%,#03081170 88%,transparent);border-radius:12px}
.slot{border:0;background:linear-gradient(180deg,transparent,#ffffff02);box-shadow:none;opacity:.4}.slot::after{inset:75% 25% 10%;border-color:#8da4bc44}
.unit{box-shadow:0 10px 12px #0009,0 2px 0 #7d84915c;border-color:#6d798b;transition:transform .16s,box-shadow .16s}
.unit:hover{transform:translateY(-3px);box-shadow:0 14px 20px #000b}
.unit.selected{transform:translateY(-4px)}
.unit .unit-stats{background:linear-gradient(#252b36,#0b111d);border-top:1px solid #69768955}
.arena .hand{padding-top:16px;overflow-y:visible;align-items:flex-end}.arena .hand-card{border-color:#637184;box-shadow:0 8px 15px #000a,inset 0 1px #ffffff22;transition:transform .16s}
.arena .hand-card:hover{transform:translateY(-5px);z-index:2}
.midline{height:32px;margin:2px -12px;background:linear-gradient(90deg,transparent,#111321ed 25%,#111321ed 75%,transparent);border:0;color:#ddd4c5;font-size:9px;letter-spacing:2px}
.midline::before,.midline::after{height:1px;background:linear-gradient(90deg,transparent,#9ba9c4,transparent)}
.side-panel .panel{background:linear-gradient(150deg,#1b202b,#0c121c);border:1px solid #404957;box-shadow:0 6px 18px #0005}
.turn-button{background:linear-gradient(#f8dfa2,#bd9860);color:#21190f;border:1px solid #ffdf9f;box-shadow:0 4px 0 #644623,0 8px 16px #0008!important;text-transform:uppercase;letter-spacing:2px!important}
.turn-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #644623!important}
@keyframes territory-breathe{50%{opacity:.7}}
@media(max-width:1400px){.arena{padding:32px 42px 14px}.game-layout{--battle-art:clamp(100px,calc((100dvh - 480px)/3),195px);grid-template-columns:minmax(0,1fr) 225px}.commander .name{font-size:12px}.commander>img{width:34px;height:34px}}
@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr)}.arena{padding:32px 22px 12px}.territory svg{opacity:.55}.side-panel{max-height:none}.theater-label{left:25px;right:25px;letter-spacing:1px}.board-row{grid-template-columns:repeat(7,minmax(120px,1fr))}}
@media(max-width:600px){main:has(.game-layout){padding:6px}.arena{padding:30px 9px 10px}.territory svg{opacity:.25}.theater-label{font-size:8px;letter-spacing:.5px}.commander>img{width:28px;height:28px}.board-row{grid-template-columns:repeat(7,120px)}.arena .hand{overflow-x:auto}.commander .flux{padding:3px}.midline{margin:0;font-size:8px;gap:6px}}
@media(prefers-reduced-motion:reduce){.territory-horizon{animation:none}.unit,.arena .hand-card{transition:none}.unit:hover,.arena .hand-card:hover{transform:none}}
.territory[data-faction=solari]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-solari.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=synthari]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-synthari.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=hegemony]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-hegemony.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=nereid]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-nereid.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=fungus]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-fungus.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=spacers]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-spacers.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory[data-faction=veilborn]{background-image:linear-gradient(#060a1226,#060a1226),url('/assets/board-veilborn.png');background-size:100% 100%,100% 200%;background-repeat:no-repeat;transform:none}
.territory.territory-enemy{background-position:center,top}.territory.territory-player{background-position:center,bottom}.territory svg{display:none}
.territory-horizon{opacity:.15}.rift-core{display:none}
@media(min-width:1051px) and (max-height:820px){.game-layout{--battle-art:100px}.arena{padding-top:32px;padding-bottom:10px}.board-row{padding:5px 2px}.arena>.commander{min-height:46px;padding:5px 10px}.arena .hand{padding-top:8px}.arena .hand-card .hand-text{font-size:10px;max-height:28px}.arena .hand-card .hand-name{min-height:24px}.commander-power{min-width:120px}}
@media(min-width:1051px){.game-layout{--battle-art:clamp(80px,calc((100dvh - 560px)/3),200px)}}

.board-motion-layer{position:absolute;inset:0;pointer-events:none;background:#0a1018}.board-motion-layer video{display:block;width:100%;height:100%;object-fit:fill;filter:brightness(.85)}.board-motion-layer.reverse-seats{transform:rotate(180deg)}.board-motion-layer[hidden]{display:none}.board-motion-toggle{position:absolute;right:14px;top:10px;z-index:3;font-size:10px;padding:3px 7px;background:#111925de;color:#e3d3b7;border-color:#75634c}.theater-label{right:160px}

/* Cost affordance is independent of target availability; legal plays retain stronger glow. */
.arena .hand-card.affordable{border:2px solid #66e0ca;box-shadow:0 0 0 1px #66e0ca44,0 0 14px #30d3aa35,0 8px 15px #000a}.arena .hand-card.affordable .mana{background:#174a44;color:#d4fff1;border-color:#8bffe0}.arena .hand-card.playable{box-shadow:0 0 0 1px #8bffe0,0 0 22px #30d3aa60,0 8px 15px #000a}
#player-board.drop-ready>.slot{opacity:1;border:1px dashed #8af6dc77;background:#174c3b33}#player-board[data-inserting]>.insert-here{outline:2px solid #a0ffe2;outline-offset:2px}#player-board[data-inserting]>.insert-here::before{content:'Deploy here';position:absolute;top:35%;left:0;right:0;padding:8px 2px;background:#08281fee;color:#b9ffe7;font-size:11px;z-index:5;text-align:center;pointer-events:none}#player-board .insert-shift{translate:12px 0;transition:translate .1s}#player-board>.slot{position:relative}#player-board .insert-here{opacity:1}

/* Playmat v1: one complete environment belonging to the local player. */
.territory.territory-full{inset:0;height:100%;background-size:100% 100%,100% 100%;background-position:center,center;transform:none}
.theater-label{left:25px;right:25px}

.territory[data-faction=gobbos]{background:radial-gradient(ellipse at 50% 20%,#b952182b,transparent 70%),repeating-linear-gradient(110deg,#1b171400 0 80px,#b9521809 81px 83px),#141416;background-size:cover}.trap-zone{position:relative;padding:6px 10px;margin:4px 0;border:1px solid #b9521866;border-radius:8px;background:#16100dde;color:#ecc4a9;font-size:12px}.trap-zone>div{display:inline-block;vertical-align:top;max-width:48%;padding:4px 8px}.trap-zone small{display:block;font-size:11px;line-height:1.3}.patent-cards img{width:100%;max-height:160px;object-fit:contain}.patent-cards p{font-size:12px}

@media(max-width:600px){.trap-zone>div{display:block;max-width:none;padding:5px 0}.trap-zone small{font-size:12px}}
