/* Three playable arenas. No rules, ownership or stats are changed here. */
.findaway-embedded .arena-style-label{flex:1;min-width:0}.findaway-embedded .arena-style-label select{width:100%;min-width:0}.findaway-embedded #arenaMember{flex:0 0 40px}
body[data-arena] { --p2:#ff706d; --gold:#e9c17e; --panel:#17201fe8; --line:#b68a4b70; --muted:#c0b7a4; overflow:hidden; height:100dvh; min-height:0; background:radial-gradient(ellipse at 12% 60%,#76442180,transparent 42%),radial-gradient(ellipse at 84% 14%,#5a714680,transparent 44%),linear-gradient(155deg,#152322,#22251d 55%,#141918); }
body[data-arena]::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.32; background:repeating-linear-gradient(92deg,transparent 0 11%,#060d0b 11.2% 12%,transparent 13% 21%),radial-gradient(ellipse at 50% 100%,#ad712b,transparent 60%); filter:blur(12px); }
body[data-arena] .ambient { opacity:.08; }
body[data-arena] .app-shell { width:min(640px,100%); height:100dvh; padding:calc(6px + env(safe-area-inset-top)) 10px calc(6px + env(safe-area-inset-bottom)); display:grid; grid-template-rows:42px 90px minmax(0,1fr) auto; gap:8px; }
.arena-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
.arena-brand { font-size:10px; letter-spacing:.14em; color:var(--gold); font-weight:900; flex:1; }
.arena-style-label { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.arena-style-label>span { display:none; }
.arena-toolbar select { max-width:190px; background:#101916; color:var(--text); border:1px solid var(--line); padding:8px; border-radius:7px; font-size:12px; }
.arena-toolbar button,.hand-pager button { min-width:40px; min-height:40px; border:1px solid var(--line); color:var(--gold); background:linear-gradient(#36403b,#141b19); border-radius:8px; font-size:22px; }
.arena-toolbar button:hover,.hand-pager button:hover:enabled { border-color:var(--gold); filter:brightness(1.2); }
body[data-arena] .status-row { margin:0; gap:6px; grid-template-columns:1fr 1fr; grid-template-rows:45px 39px; }
body[data-arena] .player-chip { padding:4px 9px; min-height:0; border-radius:10px; font-size:12px; background:linear-gradient(130deg,#303b36,#121916); box-shadow:inset 0 1px 2px #ffffff18,0 3px 10px #0008; }
body[data-arena] .player-chip>span:not(.owner-dot) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-arena] .player-chip strong { font-size:27px; color:var(--p1); }
body[data-arena] .player-two strong { color:var(--p2); }
body[data-arena] .owner-dot { width:28px; height:28px; flex:0 0 28px; border:3px solid currentColor; color:var(--p1); background:radial-gradient(circle,#a6efff33,#0a3449); box-shadow:0 0 9px #39d6ff66,inset 0 0 0 2px #070a11; position:relative; }
body[data-arena] .owner-dot::after { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; font-size:16px; }
body[data-arena] .player-two .owner-dot { color:var(--p2); background:radial-gradient(circle,#ffa59044,#481d27); box-shadow:0 0 9px #ff706d66,inset 0 0 0 2px #070a11; }
body[data-arena] .turn-panel { grid-row:2; grid-column:1/-1; min-height:0; padding:2px 8px; border:1px solid var(--gold); border-radius:6px; background:linear-gradient(100deg,#382715,#5b4122,#382715); }
body[data-arena] #turnKicker { font-size:10px; letter-spacing:.16em; }
body[data-arena] #turnMessage { font-size:11px; font-weight:600; }
body[data-arena] #roomBadge { display:none; }
body[data-arena] .game-layout { position:relative; display:flex; min-height:0; align-items:center; justify-content:center; width:100%; }
body[data-arena] .board-wrap { width:var(--board-edge,300px); height:var(--board-edge,300px); margin:0; max-width:100%; }
body[data-arena] .board { width:100%; height:100%; gap:5px; padding:9px; border-radius:15px; border:3px solid #c19a57; background:linear-gradient(135deg,#b5a17b,#38433b 12%,#1b2826 75%,#9c7d4a); box-shadow:inset 0 0 0 2px #35271e,0 8px 26px #000a; }
body[data-arena] .cell { border-radius:5px; background:repeating-linear-gradient(140deg,#ffffff02 0 2px,transparent 3px 9px),linear-gradient(145deg,#37423e,#1b2424); border-color:#a1936c7a; }
body[data-arena] .cell.empty::after { content:"✧"; position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(16px,3vw,32px); color:#a3987240; pointer-events:none; }
body[data-arena] .cell.occupied { border-width:2px; }
body[data-arena] .creature-card { border-radius:4px; border-width:1px; container-type:inline-size; }
body[data-arena] .stat { font-size:clamp(8px,15cqw,23px); width:19%; border-color:#ebd9b9c7; line-height:1; }
body[data-arena] .card-shade { background:linear-gradient(#0005,transparent 25%,transparent 75%,#0005); }
body[data-arena] .card-name,body[data-arena] .card-meta,body[data-arena] .deck-card span { display:none; }
body[data-arena] .hand-section { margin:0; padding:6px 8px; border:2px solid #907343; border-radius:12px; background:linear-gradient(125deg,#303c35f2,#121d1bf5); box-shadow:0 7px 25px #0008; min-width:0; }
body[data-arena] .hand-heading { align-items:center; min-height:19px; gap:5px; }
body[data-arena] #handKicker { margin:0; font-size:9px; letter-spacing:.12em; }
body[data-arena] #handTitle { display:none; }
body[data-arena] #handHelp { font-size:9px; }
body[data-arena] #handCount { font-size:11px; white-space:nowrap; }
body[data-arena] .hand { overflow-x:auto; overflow-y:hidden; min-height:0; display:flex; gap:6px; padding:6px 2px 10px; scrollbar-width:thin; overscroll-behavior-x:contain; touch-action:pan-x; }
body[data-arena] .hand .creature-card { width:clamp(52px,calc((100vw - 64px)/5),112px); flex:0 0 auto; aspect-ratio:1; margin:0; touch-action:none; }
body[data-arena] .hand .creature-card:hover { transform:translateY(-3px); }
.hand-pager { display:flex; justify-content:center; align-items:center; gap:18px; height:34px; font-size:12px; color:var(--gold); }
.hand-pager button { min-height:32px; height:32px; min-width:44px; font-size:25px; }
.hand-pager button:disabled { opacity:.3; cursor:default; }
.arena-lobby { display:none; position:absolute; inset:5%; z-index:12; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:#10221feb; box-shadow:0 10px 50px #0009; }
.arena-lobby h2 { font-family:Georgia,serif; font-size:clamp(22px,4vw,36px); margin:5px 0; }
.arena-lobby p { font-size:12px; line-height:1.5; color:var(--muted); }
.lobby-rune { font-size:38px; color:var(--gold); text-shadow:0 0 25px var(--gold); }
.arena-in-lobby .arena-lobby { display:flex; }
.arena-in-lobby .hand-section { opacity:.6; }
#arenaSettingsDialog .hero { display:block; padding:16px 0 0; margin-top:12px; }
#arenaSettingsDialog .hero>div:first-child { display:none; }
#arenaSettingsDialog .hero-actions { max-width:none; justify-content:flex-start; }
#arenaSettingsDialog .hero-actions .ghost-button { display:block; }
#arenaSettingsDialog .control-bar { padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#arenaSettingsDialog #newGameButton { grid-column:1/-1; min-height:44px; }
#arenaSettingsDialog select { width:100%; min-width:0; }
#arenaInfoDialog .side-panel { display:block; margin-bottom:10px; }
body[data-arena="neon"] { --panel:#05152bef; --line:#25b7e46b; --gold:#7febff; --muted:#a3c7e0; background:radial-gradient(ellipse at 50% 0,#094785,transparent 60%),radial-gradient(ellipse at 100% 80%,#4c173d,transparent 60%),#020917; }
body[data-arena="neon"]::before { background:repeating-linear-gradient(120deg,transparent 0 9%,#2ac9ff33 9.2% 9.5%,transparent 10% 20%),linear-gradient(0deg,#007eff20,transparent); filter:none; }
body[data-arena="neon"] .hand-section,body[data-arena="neon"] .board { border-color:#26caff; border-radius:3px; background:linear-gradient(140deg,#153047,#06111e); box-shadow:0 0 15px #009aff40,inset 0 0 9px #0bbaff33; }
body[data-arena="neon"] .cell { border-color:#5384a3; border-radius:3px; background:linear-gradient(140deg,#1c3346,#0b1a28); }
body[data-arena="neon"] .turn-panel { background:linear-gradient(90deg,#061223,#073d60,#061223); border-color:#29d2ff; box-shadow:0 0 12px #29d2ff55; text-transform:uppercase; }
body[data-arena="neon"] .player-chip { background:linear-gradient(125deg,#0c2740,#040d1b); border-color:#177196; border-radius:3px; }
body[data-arena="neon"] .player-two { border-color:#c64873; }
body[data-arena="neon"] .arena-toolbar button,body[data-arena="neon"] .hand-pager button { background:#061e33; border-color:#26b8de; border-radius:3px; }
body[data-arena="neon"] .arena-toolbar select { background:#041326; }
body[data-arena="neon"] .arena-lobby { background:#041326ee; }
body[data-arena="cockpit"] { background:radial-gradient(ellipse at 80% 80%,#235f6480,transparent 60%),radial-gradient(ellipse at 8% 0,#56713680,transparent 50%),#101b1d; }
body[data-arena="cockpit"] .stat { border-radius:3px; background:#151c21ed; border-color:#cfb477; }
body.arena-landscape .app-shell { width:min(1500px,100%); grid-template-columns:minmax(150px,.65fr) minmax(0,2fr) minmax(210px,1.1fr); grid-template-rows:42px minmax(0,1fr); grid-template-areas:"toolbar toolbar toolbar" "hud board hand"; gap:12px; padding-inline:max(10px,env(safe-area-inset-left)); }
body.arena-landscape .arena-toolbar { grid-area:toolbar; }
body.arena-landscape .status-row { grid-area:hud; display:flex; flex-direction:column; justify-content:flex-start; gap:12px; }
body.arena-landscape .player-chip { width:100%; min-height:74px; font-size:14px; padding:10px; }
body.arena-landscape .owner-dot { width:38px; height:38px; flex-basis:38px; }
body.arena-landscape .player-chip strong { font-size:38px; }
body.arena-landscape .turn-panel { order:3; min-height:70px; width:100%; }
body.arena-landscape #roomBadge { display:block; font-size:10px; }
body.arena-landscape .game-layout { grid-area:board; height:100%; }
body.arena-landscape .hand-section { grid-area:hand; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:10px; }
body.arena-landscape .hand { display:flex; justify-content:flex-start; gap:8px; }
body.arena-landscape .hand .creature-card { width:clamp(60px,14vh,112px); }
body.arena-landscape .hand-heading { flex-direction:column; align-items:center; }
body.arena-landscape .hand-heading>div { text-align:center; }
body.arena-landscape #handHelp { font-size:10px; }
body.arena-landscape #handKicker { font-size:12px; }
@media(max-width:380px) { .arena-brand { display:none; } .arena-style-label { flex:1; } body[data-arena] .app-shell { padding-inline:5px; gap:5px; } body[data-arena] #handHelp { display:none; } }
@media(max-height:600px) and (orientation:portrait) { body[data-arena] .app-shell { grid-template-rows:38px 72px minmax(0,1fr) auto; gap:4px; } body[data-arena] .status-row { grid-template-rows:38px 30px; } body[data-arena] #turnMessage,body[data-arena] #handHelp { display:none; } body[data-arena] .hand .creature-card { max-height:68px; width:auto; justify-self:center; } }
@media(prefers-reduced-motion:reduce) { body[data-arena] *,body[data-arena] *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
/* Dedicated environment art; gameplay stays sharp and independent of the backdrop. */
body[data-arena="fantasy"],body[data-arena="cockpit"] { background:linear-gradient(#07141155,#07141170),url("assets/arena-fantasy-v1.png") center/cover no-repeat fixed; }
body[data-arena="neon"] { background:linear-gradient(#020b1933,#020b1966),url("assets/arena-neon-v1.png") center/cover no-repeat fixed; }
body[data-arena]::before { opacity:.08; }
body[data-arena] .cell { box-shadow:inset 0 1px 1px #e4d5b128,inset 0 -2px 3px #0008; }
body[data-arena] .cell.controlled-p1,body[data-arena] .cell.controlled-p2 { box-shadow:inset 0 0 16px var(--owner-glow),0 0 13px var(--owner-glow); }
body[data-arena] .cell.wall { border-color:#9d987c; background:#262c29; }
body[data-arena] .wall-art { inset:0; border:0; border-radius:0; background:url("assets/terrain-wall-v1.png") center/cover; font-size:0; filter:none; }
body[data-arena] .terrain-glyph { inset:0; border:0; border-radius:0; background-position:center; background-size:cover; opacity:1; box-shadow:none; }
body[data-arena] .cell.occupied .terrain-glyph { inset:64% auto auto 41%; width:18%; border-radius:50%; border:1px solid var(--terrain); box-shadow:0 0 5px var(--terrain); }
body[data-arena] .cell.empty:has(.terrain-glyph)::after { display:none; }
.opponent-hand-button { border:1px solid var(--line); border-radius:6px; background:#071b24; color:var(--gold); font-size:10px; min-height:32px; padding:3px 7px; }
.opponent-hand-button:disabled { opacity:.45; cursor:default; }
#opponentHandCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:10px; }
.opponent-card { position:relative; aspect-ratio:1; padding:0; border:0; background:transparent; max-width:160px; width:100%; }
.hidden-card-back { display:grid; place-items:center; aspect-ratio:1; max-width:160px; border:2px solid var(--gold); border-radius:8px; background:repeating-linear-gradient(45deg,#122b35 0 8px,#0a1822 8px 16px); color:var(--gold); font-size:36px; }
body[data-arena] .hand-heading { flex-wrap:wrap; }
body[data-arena] #handHelp { display:none; }
.turn-panel { position:relative; }
body[data-arena] .turn-panel.has-turn-clock { padding-right:83px; }
.turn-clock { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:65px; color:var(--p2); }
.turn-clock[hidden] { display:none; }
.turn-clock.is-mine { color:var(--p1); }
.turn-clock output { display:block; font-size:16px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.05; }
.turn-clock .turn-clock-rail { display:block; height:4px; width:100%; margin-top:3px; background:#ffffff20; border-radius:3px; overflow:hidden; }
#turnClockFill { display:block; height:100%; background:currentColor; }
.turn-clock.is-urgent { color:#ff675b; animation:clock-warning .8s ease-in-out infinite alternate; }
@keyframes clock-warning { to { text-shadow:0 0 9px #ff675b; } }
/* A full-width time gauge, separate from player ownership colors. */
body[data-arena] .app-shell { grid-template-rows:42px 105px minmax(0,1fr) auto; }
body[data-arena] .status-row { grid-template-rows:45px 54px; }
body[data-arena] .turn-panel.has-turn-clock { padding:4px 83px 15px 8px; }
.turn-clock,.turn-clock.is-mine,.turn-clock.is-urgent { color:var(--clock-color,#65f475); position:absolute; inset:0; width:auto; transform:none; pointer-events:none; }
.turn-clock output { position:absolute; right:10px; top:35%; transform:translateY(-50%); font-size:20px; }
.turn-clock .turn-clock-rail { position:absolute; left:8px; right:8px; bottom:5px; width:auto; height:8px; margin:0; border:1px solid #ffffff38; border-radius:5px; background:#030b16a8; }
#turnClockFill { background:var(--clock-color,#65f475); box-shadow:0 0 9px var(--clock-color); }
body.arena-landscape .app-shell { grid-template-rows:42px minmax(0,1fr); }
body.arena-landscape .status-row { display:flex; }
.online-timer-note { grid-column:1/-1; margin:0; padding:10px; border:1px solid var(--line); border-radius:8px; font-size:12px; line-height:1.5; color:var(--gold); }
.result-deck { display:flex; gap:6px; max-width:100%; overflow-x:auto; margin:16px 0; }
.result-deck img { width:56px; height:56px; flex:0 0 auto; object-fit:cover; border-radius:8px; }
#resultDialog .ghost-button { margin:8px 4px 0 0; }
@media(max-height:600px) and (orientation:portrait) { body[data-arena] .app-shell { grid-template-rows:38px 94px minmax(0,1fr) auto; } body[data-arena] .status-row { grid-template-rows:38px 50px; } }