/* Alpha 0.1.5: arena presentation only; all positions remain the original 4 × 8. */
.match-shell{--line:#37505e;--panel:#0b1924;min-height:100svh;background:radial-gradient(ellipse at 38% 18%,#23566a44,transparent 50%),radial-gradient(ellipse at 82% 25%,#8b42352a,transparent 48%),repeating-linear-gradient(125deg,#a7b8bc03 0 1px,transparent 1px 19px),#080f18}
.match-header{padding:12px 22px;background:linear-gradient(90deg,#08111de8,#102331aa,#08111de8);border-bottom:1px solid #94734c80}
.match-header h1{font-size:clamp(1.05rem,1.6vw,1.7rem);color:#edd4a0;text-transform:uppercase;letter-spacing:.055em}.match-header .brand p{font-size:.72rem}.match-header .sigil{font-size:32px}.match-header .version{font-size:.65rem}.match-header .quiet{font-size:.8rem;padding:7px 12px;min-height:35px}
.match-shell .workspace{max-width:2500px;padding:14px 20px;margin:auto}
.match-shell .ribbon{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:0 0 14px 198px}
.match-shell .round-info{gap:18px;justify-content:center;flex-wrap:nowrap}.match-shell .phase-name{font-size:1.2rem;margin-top:4px}.match-shell .round-info .eyebrow{font-size:.67rem;letter-spacing:.09em}.match-shell .metrics{gap:20px;padding:10px 16px;background:#06111cd9;border:1px solid #324e61;border-radius:5px}.match-shell .metric b{font-size:1.15rem}.match-shell .metric span{font-size:.64rem}.match-shell .xp{width:100%}
.match-shell .preparation-controls{padding:3px;gap:5px;background:#0b1d29;border-color:#687355}.match-shell .prep-timer{min-width:128px;min-height:61px;padding:5px 10px;border:1px solid #57778a;background:#102b3c;color:#cff4ff}.match-shell .timer-value{font-size:1.9rem}.match-shell .timer-caption{font-size:.62rem;letter-spacing:.025em}.match-shell .ready-button{min-height:49px;padding:9px 14px;font-size:.82rem;background:linear-gradient(135deg,#ffe5a0,#c6933e);border:1px solid #f9dfa2;box-shadow:inset 0 0 0 3px #4a351440,0 3px 10px #0005}.match-shell .prep-timer.urgent{background:#a62726;border-color:#ffb48f;color:#fff4df}
.match-shell .layout{display:grid;grid-template-columns:180px minmax(0,1fr) 260px;gap:18px;align-items:start}.left-column{min-width:0;display:flex;flex-direction:column;gap:14px}.match-shell .panel{border-radius:6px;border-color:#34556a;box-shadow:inset 0 0 14px #458ba408,0 6px 16px #0003;background:linear-gradient(150deg,#112331ed,#07121df2)}
.match-shell .standings{display:block;width:100%}.match-shell .standing{padding:11px 10px;grid-template-columns:18px 1fr auto;font-size:.8rem;gap:5px;border-bottom-color:#2a455455}.match-shell .standing.me{background:linear-gradient(90deg,#1f536caa,#15314355);box-shadow:inset 3px 0 #73dfff,inset 0 0 14px #6acfff25}.match-shell .standing .health{height:4px;border-radius:4px;overflow:hidden}.match-shell .stand-footer{font-size:.7rem;padding:12px;line-height:1.7}.match-shell .panel-head{padding:11px 12px}.match-shell .panel-head h2{font-size:.78rem}.quick-controls{padding:12px}.quick-controls>.eyebrow{font-size:.65rem;margin-bottom:10px}.quick-controls .shop-controls{display:flex;flex-direction:column;gap:9px}.quick-controls button{text-align:left;background:linear-gradient(135deg,#19394b,#0b1b29);border-color:#4b6c7d;min-height:51px;font-size:.83rem;padding:10px 12px}.quick-controls button:first-child{color:#f2d594;border-color:#9c8355}.quick-controls button:disabled{opacity:.45}
.match-shell .arena-column{min-width:0}.match-shell .arena-header{padding:0 7px;margin-bottom:8px;font-size:.72rem}.match-shell .arena-header strong{font-size:.83rem}.match-shell .banner{padding:9px 14px;margin-bottom:10px;font-size:.8rem}.match-shell .banner .small{font-size:.72rem}
/* The plane, pieces and feedback share one projection, preserving tile hit areas. */
.match-shell #board-surface{perspective:1800px;padding:8px 3px 14px}
.match-shell .board-frame{position:relative;padding:10px 12px 12px;overflow:visible;border:2px solid #8b7957;border-radius:9px;background:linear-gradient(135deg,#6e7975,#202e38 10%,#344552 48%,#1a2028 85%,#887657);box-shadow:0 9px 0 #111d27,0 11px 0 #74634b,0 24px 35px #000b,inset 0 0 0 2px #131f28;transform:rotateX(7deg) rotateY(2deg);transform-origin:50% 55%}
.match-shell .board-frame::before,.match-shell .board-frame::after{content:'◆';position:absolute;top:47%;z-index:10;color:#ffe0a0;font-size:21px;text-shadow:0 0 12px #e3b874;background:#242e33;border:1px solid #927d57;border-radius:50%;width:30px;height:34px;display:grid;place-items:center;pointer-events:none}.match-shell .board-frame::before{left:-17px}.match-shell .board-frame::after{right:-17px}
.match-shell .board-stage{min-width:0;position:relative;border:2px solid #101a24;border-radius:5px;box-shadow:0 0 0 1px #a0c2c33b,inset 0 0 25px #0009}
.match-shell .board{min-width:0;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;background:linear-gradient(90deg,#3184ac88 49.5%,#e5c68a 50%,#ac4b4588 50.5%);border-radius:4px;overflow:visible}
.match-shell .board .tile{aspect-ratio:1;min-width:0;padding:3px;border-radius:3px;border:1px solid #5eaccc66;background:radial-gradient(ellipse at 50% 40%,#31597055,transparent 75%),repeating-linear-gradient(145deg,#b8dbe707 0 1px,transparent 1px 13px),linear-gradient(145deg,#1b4258,#112b40);box-shadow:inset 0 0 16px #05112050}
.match-shell .board .tile.home.alt{background:radial-gradient(ellipse at 40% 60%,#4a89a933,transparent 70%),repeating-linear-gradient(30deg,#c2e3eb06 0 1px,transparent 1px 17px),linear-gradient(150deg,#204c65,#16344c)}
.match-shell .board .tile.enemy{border-color:#c9786166;background:radial-gradient(ellipse at 50% 40%,#934c4555,transparent 75%),repeating-linear-gradient(145deg,#e9cbb507 0 1px,transparent 1px 13px),linear-gradient(145deg,#513234,#36242d)}
.match-shell .board .tile.enemy.alt{background:radial-gradient(ellipse at 40% 60%,#b66d5933,transparent 70%),repeating-linear-gradient(30deg,#f4c0b206 0 1px,transparent 1px 17px),linear-gradient(150deg,#5b3737,#402931)}
.match-shell .board .tile.home.partner{border-color:#5ce0b177;background:repeating-linear-gradient(145deg,#bfefcf07 0 1px,transparent 1px 13px),linear-gradient(145deg,#234d49,#16362f)}
.match-shell .board .tile.mid{border-right:3px solid #f2d69b;box-shadow:inset -6px 0 12px #f1c8861a}.match-shell .board .tile.target{outline:1px solid #e4d4a84a}.match-shell .board .tile.target:hover{outline:2px solid #ffe3a1;outline-offset:-3px;background-color:#426a78;box-shadow:inset 0 0 25px #e4ce8944}.match-shell .tile-coord{position:absolute;bottom:7px;left:10px;font-size:clamp(.6rem,.7vw,.8rem);color:#92cfef70;pointer-events:none}.match-shell .tile.enemy .tile-coord{color:#eaa79970}
.match-shell .team-legend,.match-shell .board-labels{min-width:0;font-size:.7rem;letter-spacing:.06em}.match-shell .team-legend{padding:0 3px 8px}.match-shell .legend-own b{font-size:.63rem}.match-shell .board-labels{margin-top:10px;text-shadow:0 2px 3px #000}
/* Physical bases and contact shadows; source images and cutout filters are untouched. */
.match-shell .board .field-piece{height:100%;border:0;background:transparent;border-radius:5px;padding:0;box-shadow:none;isolation:isolate}
.match-shell .board .field-piece::before{content:'';position:absolute;bottom:15%;left:14%;width:72%;height:24%;border-radius:50%;background:radial-gradient(ellipse,#314454 40%,#152633 58%,#7d887c 62%,#263845 67%,#091522 73%);border:1px solid var(--team);box-shadow:0 5px 0 #0a1420,0 7px 2px #000a,0 11px 10px #0009,0 0 9px color-mix(in srgb,var(--team) 50%,transparent);z-index:0;pointer-events:none}
.match-shell .field-piece .token-art{position:absolute;inset:15% 0 13%;height:auto;padding:0;isolation:auto;z-index:1;overflow:visible}
.match-shell .field-piece .miniature-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.match-shell .board .field-piece.team-own{box-shadow:inset 0 0 0 1px #6bd5ff40}.match-shell .board .field-piece.team-own::before{border:2px solid #72dfff;box-shadow:0 5px 0 #0b2234,0 9px 10px #000b,0 0 13px #65cfff88}.match-shell .board .field-piece.team-ally::before{border:2px dashed #66edbc}.match-shell .board .field-piece.team-foe::before{border-color:#ff8a71}
.match-shell .board .field-piece.selected{outline:2px solid #fff0b1;outline-offset:0;box-shadow:inset 0 0 25px #fce7a222,0 0 12px #ffdb7266}
.match-shell .board .token-name{position:absolute;bottom:0;left:3%;width:94%;background:linear-gradient(90deg,transparent,#061522e6 20%,#061522e6 80%,transparent);font-size:clamp(.62rem,.72vw,.86rem);padding:3px 0 1px;line-height:1.15;pointer-events:none}
.match-shell .board .token>.bar{position:absolute;top:1px;left:15%;width:70%;height:5px;margin:0;border-radius:3px;box-shadow:0 0 0 1px #020c15,0 2px 3px #0009;z-index:4}.match-shell .board .token>.bar.energy{top:8px;height:2px}.match-shell .board .token>.bar.shield{top:12px;height:2px}
.match-shell .field-piece .token-top{top:0;left:0;right:0;align-items:center;transform:translateY(-1px)}.match-shell .board .ownership{font-size:.55rem;letter-spacing:.025em;padding:2px 3px;opacity:.95}.match-shell .board .token.team-ally .ownership{font-size:.5rem;max-width:none}.match-shell .board .element-marker{font-size:.58rem;padding:1px;border-radius:50%;background:#091625ed}.match-shell .board .token .stars{bottom:0;right:4%;font-size:.66rem;padding:1px 2px}.match-shell .board .token .trace{bottom:0;left:3%;font-size:.68rem;padding:1px;border-color:#839fb55e;background:#07121ecf}
.match-shell .board .boss-token .miniature-art{inset:auto auto 0 -15%;width:130%;height:135%;max-width:none}.match-shell .board .boss-token::before{left:8%;width:84%;height:27%;border:2px solid #eecf8e;box-shadow:0 7px 0 #151323,0 11px 14px #000c,0 0 16px #d299f288}.match-shell .boss-info{padding:9px 14px;margin-bottom:8px;background:linear-gradient(90deg,#261e30,#392235,#231b2b);border-color:#937456}.match-shell .boss-info strong{font-size:.85rem}.match-shell .boss-info .small{font-size:.73rem}
/* Compact bottom roster and horizontal shop preserve every original action. */
.match-shell .bench-bar{margin:17px 0 6px;font-size:.77rem}.match-shell .sell-zone{min-height:33px;min-width:135px;font-size:.8rem;padding:6px 10px}.match-shell .bench{grid-template-columns:repeat(var(--bench-slots,6),minmax(0,1fr));gap:6px;min-height:85px}.match-shell .bench-slot{min-height:85px;background:linear-gradient(145deg,#142b3d,#091723);border-style:solid;border-color:#385967}.match-shell .bench-slot .token{height:90px;max-width:100%;border-width:1px;box-shadow:none}.match-shell .bench .token-art{min-height:0;border-bottom-width:2px}.match-shell .bench .token-name{font-size:.67rem;padding:2px 0}.match-shell .bench .token-top{top:3px}.match-shell .bench .ownership{font-size:.56rem}.match-shell .bench .element-marker{font-size:.7rem}.match-shell .bench .token .bar{height:3px;margin-top:2px}.match-shell .bench .token .bar.energy{height:2px}
.match-shell .shop{margin-top:12px}.match-shell .shop-cards{padding:9px;gap:9px;grid-template-columns:repeat(var(--slots),minmax(0,1fr))}.match-shell .shop-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:6px;border-width:1px;border-top-width:2px;border-color:color-mix(in srgb,var(--el) 65%,#192d3a);background:linear-gradient(150deg,color-mix(in srgb,var(--el) 15%,#112330),#0b1926);overflow:hidden}.match-shell .shop-card .card-art{grid-row:1;width:100%;height:clamp(74px,7.5vw,135px);aspect-ratio:auto;border:0;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--el) 22%,#0b1723),#091521);border-radius:3px}.match-shell .shop-card .card-meta{position:absolute;top:9px;left:8px;right:8px;min-height:0;justify-content:space-between;flex-wrap:nowrap;z-index:2;pointer-events:none}.match-shell .shop-card .element-name{min-height:0;padding:3px;background:#071420df;border:1px solid var(--el);border-radius:50%;font-size:.68rem}.match-shell .shop-card .price-tag{font-size:.8rem;padding:4px;background:#08141fe8;border-color:#a48a55}.match-shell .shop-card h3{font-size:.86rem;margin-top:3px;letter-spacing:0}.match-shell .shop-card .role{font-size:.65rem;min-height:0;line-height:1.3}.match-shell .card-pair{font-size:.66rem}.match-shell .shop-card button{margin-top:3px;font-size:.76rem;min-height:33px;padding:5px 3px}.match-shell .shop-card.empty-card{min-height:180px;display:flex;font-size:.8rem}.match-shell .shop-note{font-size:.68rem;padding:0 10px 9px;line-height:1.5}
/* Right-hand detail stays in its column; long combo copy is secondary. */
.match-shell .details-column{display:flex;flex-direction:column;grid-column:auto;gap:12px;min-width:0}.match-shell .inspect{padding:12px;line-height:1.45;max-height:730px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526875 #0b1824}.match-shell .inspect-art{width:100%;max-width:none;max-height:155px;aspect-ratio:1.55;border-width:1px;margin-bottom:10px;background:radial-gradient(ellipse,color-mix(in srgb,var(--el,#b095de) 20%,#0b1824),#0b1824)}.match-shell .supreme-art{border-color:#b59668}.match-shell .inspect h3{font-size:1.27rem}.match-shell .inspect p{font-size:.75rem;margin-top:8px}.match-shell .inspect .stat-grid{grid-template-columns:1fr 1fr;gap:5px;margin:10px 0;font-size:.8rem}.match-shell .inspect .stat-grid div{padding:6px;background:#1930407a;border:1px solid #304a5966}.match-shell .inspect .stat-grid span{font-size:.64rem}.match-shell .inspect .eyebrow{font-size:.68rem}.match-shell .inspect hr{margin:12px 0}.match-shell .log{margin:0;min-height:0;padding:12px}.match-shell .log-line{font-size:.68rem}.match-shell .footnote{margin-top:18px;font-size:.65rem;letter-spacing:.035em}
.status-badges{position:absolute;top:21%;right:0;display:flex;gap:2px;z-index:5;align-items:center;max-width:100%}.status-badge{display:inline-grid;place-items:center;width:20px;height:20px;flex-shrink:0;background:#071320ed;border:1px solid #cbb98b;border-radius:50%;font-size:12px;color:#ffe4a6;line-height:1}.effect-stun{color:#ede0ff;border-color:#c39beb}.effect-dot{color:#ffac65;border-color:#ea7b46}.effect-slow{color:#adebff;border-color:#6bcee8}.effect-vulnerability,.effect-antiheal,.effect-weaken{color:#ff9ba5;border-color:#c2697d}.effect-shield,.effect-reduction{color:#c3edff;border-color:#8dd0dd}.effect-haste{color:#91efd3;border-color:#58bb9f}.status-overflow{font-size:.58rem;background:#071320e8;border-radius:3px;padding:2px;color:#e9e3d3}.active-effects{border-top:1px solid #365166;margin-top:12px;padding-top:10px}.active-effects h4{font-size:.76rem;margin:0 0 7px;font-weight:600;color:#dce6e8}.effect-row{display:flex;gap:7px;align-items:center;border:1px solid #34505d88;border-radius:4px;background:#0b1b27;padding:6px;margin-top:4px}.effect-row>span:nth-child(2){flex:1;min-width:0}.effect-row strong{font-size:.7rem;font-weight:600;display:block;overflow-wrap:anywhere}.effect-row small{display:block;font-size:.63rem;color:#adc5ce}.effect-row time{font-size:.66rem;white-space:nowrap;color:#e1d2a5;font-variant-numeric:tabular-nums}
/* Replay-time positions avoid restarting animations when a frame is refreshed. */
.numeric-overlays{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}.combat-number{position:absolute;font-size:clamp(.7rem,1.1vw,1.2rem);font-weight:850;font-variant-numeric:tabular-nums;line-height:1;color:#fff1e7;text-shadow:0 2px 2px #000,1px 0 #341512,-1px 0 #341512;white-space:nowrap;will-change:transform,opacity}.combat-number.heal{color:#7ff1ad}.combat-number.absorb{color:#b3dafa;font-size:clamp(.62rem,.9vw,1rem)}.combat-number.shield{color:#94eaff}.combat-number.boss-number{font-size:clamp(.9rem,1.35vw,1.4rem)}.match-shell .combo-callout{font-size:.68rem;padding:5px 9px;max-width:220px;background:#081724ef;border-color:#75b2c7;box-shadow:0 4px 10px #0009}.match-shell .combo-callout.triple{font-size:.8rem}.match-shell .combo-callout.final{font-size:.92rem}.match-shell .combo-callout small{font-size:.57rem}.match-shell .board .field-piece.combo-source{outline:2px solid #b5efff;outline-offset:-1px}.match-shell .board .field-piece.combo-source-triple{outline-color:#67f0bf;box-shadow:inset 0 0 14px #67f0bf44}.match-shell .board .field-piece.combo-source-final{outline-color:#ffe591;box-shadow:inset 0 0 18px #ffe59155}
/* Five-second introduction uses the existing, recognizable boss miniature. */
.raid-cinematic{position:fixed;inset:0;z-index:40;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 42%,#3c2953 0,#121724 42%,#04080e 80%);animation:raid-scene 5s linear both;text-align:center;padding:25px}
.raid-halo{position:absolute;top:10%;left:25%;width:50%;height:64%;border:1px solid #c9a87577;border-radius:50%;background:radial-gradient(ellipse,#dfb17d16,transparent 65%);box-shadow:0 0 80px #af7add25,inset 0 0 60px #d0a26915;transform:rotateX(30deg);pointer-events:none}.raid-halo::after{content:'◆';position:absolute;left:50%;top:-13px;font-size:24px;color:#efd7a2;text-shadow:0 0 15px #d79c6f}.raid-intro-art{position:relative;width:min(60vw,680px);height:58vh;max-height:650px;animation:raid-approach 5s ease-out both}.raid-intro-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 18px #000c) drop-shadow(0 0 22px #aa7de54d)}.raid-intro-copy{position:relative;z-index:2;margin-top:-15px;animation:raid-title 5s ease both;text-shadow:0 3px 15px #000}.raid-intro-copy .eyebrow{font-size:.7rem;letter-spacing:.3em;color:#c0a8d1}.raid-intro-copy h1{font-family:Georgia,serif;font-size:clamp(1.6rem,3.6vw,4rem);letter-spacing:.09em;color:#f7dca2;margin:15px 0}.raid-intro-copy>p:last-child{font-size:clamp(.9rem,1.4vw,1.4rem);color:#d9d5e3;letter-spacing:.06em}.raid-intro-progress{position:absolute;bottom:8%;height:2px;width:120px;background:#f4d292;transform-origin:left;animation:raid-progress 5s linear forwards;box-shadow:0 0 9px #f8d196}
@keyframes raid-scene{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}@keyframes raid-approach{from{transform:scale(.9);opacity:0}18%{opacity:1}to{transform:scale(1.04);opacity:1}}@keyframes raid-title{0%,15%{opacity:0;transform:translateY(10px)}30%,100%{opacity:1;transform:translateY(0)}}@keyframes raid-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:2000px){.match-shell .layout{grid-template-columns:205px minmax(0,1fr) 285px;gap:22px}.match-shell .ribbon{padding-left:227px}.match-shell .inspect{max-height:900px}.match-shell .inspect-art{max-height:200px}.match-shell .bench-slot .token{height:105px}.match-shell .shop-card h3{font-size:1rem}.match-shell .shop-card .role,.match-shell .card-pair{font-size:.76rem}}
@media(max-width:1350px){.match-shell .workspace{padding:12px}.match-shell .layout{grid-template-columns:155px minmax(0,1fr) 225px;gap:12px}.match-shell .ribbon{padding-left:167px;gap:10px}.match-shell .round-info{gap:10px}.match-shell .metrics{gap:12px;padding:9px}.match-shell .metric b{font-size:1rem}.match-shell .metric span{font-size:.57rem}.match-shell .phase-name{font-size:1rem}.match-shell .prep-timer{min-width:110px}.match-shell .ready-button{padding:8px}.match-shell .standing{padding:10px 7px;font-size:.73rem}.match-shell .board-frame{padding:8px}.match-shell .board .ownership{font-size:.47rem}.match-shell .board .element-marker{font-size:.5rem}.match-shell .status-badge{width:16px;height:16px;font-size:10px}.match-shell .status-badges{gap:1px}.match-shell .shop-cards{gap:6px;padding:7px}.match-shell .shop-card h3{font-size:.76rem}.match-shell .shop-card .role,.match-shell .card-pair{font-size:.61rem}}
@media(max-width:1100px){.match-shell .layout{grid-template-columns:145px minmax(0,1fr);gap:14px}.match-shell .details-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.match-shell .inspect{max-height:420px}.match-shell .inspect-art{float:left;width:145px;max-height:145px;aspect-ratio:1;margin:0 14px 10px 0}.match-shell .active-effects{clear:both}.match-shell .ribbon{padding-left:0;grid-template-columns:1fr auto}.match-shell .round-info{justify-content:flex-start}.match-shell .board-frame{transform:rotateX(6deg) rotateY(1deg)}.match-shell .board .token-name{font-size:.68rem}.match-shell .shop-card .card-art{height:100px}}
@media(max-width:760px){.match-header{padding:10px 12px}.match-shell .workspace{padding:10px}.match-shell .ribbon{display:flex;flex-wrap:wrap}.match-shell .round-info{width:100%;justify-content:space-between;flex-wrap:nowrap}.match-shell .metrics{width:100%;justify-content:space-between}.match-shell .layout{display:flex;flex-direction:column;gap:14px}.match-shell .left-column{order:2;width:100%;display:grid;grid-template-columns:1fr 1fr}.match-shell .arena-column{order:1;width:100%}.match-shell .details-column{order:3;width:100%;display:block}.match-shell .details-column .log{margin-top:12px}.match-shell #board-surface{overflow-x:auto;padding:8px 10px 20px;perspective:none}.match-shell .board-frame{min-width:580px;transform:none}.match-shell .team-legend,.match-shell .board-labels{font-size:.6rem}.match-shell .board .token .stars{font-size:.6rem}.match-shell .bench{grid-template-columns:repeat(var(--bench-slots,6),minmax(62px,1fr));overflow-x:auto;padding-bottom:3px}.match-shell .bench-slot .token{height:90px}.match-shell .shop-cards{grid-template-columns:repeat(var(--slots),minmax(116px,1fr));overflow-x:auto}.match-shell .shop-card h3{font-size:.83rem}.match-shell .shop-card .role,.match-shell .card-pair{font-size:.66rem}.match-shell .shop-card .card-art{height:90px}.match-shell .shop-card button{font-size:.75rem}.match-shell .inspect .stat-grid{grid-template-columns:1fr 1fr}.match-shell .inspect-art{float:none;width:100%;max-height:180px;aspect-ratio:1.6;margin:0 0 10px}.raid-intro-art{width:90vw;height:52vh}.raid-halo{left:10%;width:80%}.raid-intro-copy h1{font-size:1.8rem}.raid-intro-copy .eyebrow{letter-spacing:.12em;font-size:.58rem}}
@media(prefers-reduced-motion:reduce){.raid-cinematic,.raid-intro-art,.raid-intro-copy,.raid-intro-progress{animation:none!important}.raid-intro-progress{width:120px}.combat-number{will-change:auto}.match-shell .board-frame{transform:none}}

/* 0.1.6 — illustrated citadel. Scoped to the battle screen; game/menu rules untouched. */
.battle-screen{--rail-left:220px;--rail-right:310px;--rail-gap:14px;--gold:#e8c580;--text:#eff7ff;--muted:#bbceda;background:linear-gradient(#06122165,#06121ada),url('art/arena-citadel.png') center top/cover fixed;min-height:100svh}
.battle-screen .workspace{max-width:3100px;padding:0 14px 18px}
.battle-screen .match-header{position:relative;max-width:3100px;margin:auto;height:90px;padding:13px 20px;align-items:flex-start;background:linear-gradient(90deg,#04101de8,#06131a30 40%,#06131a30 70%,#04101ddd);border-bottom:1px solid #bda27160}
.battle-screen .brand{max-width:310px;gap:10px}.battle-screen .sigil{display:grid;place-items:center;flex-shrink:0;width:44px;height:49px;border:1px solid #cfad62;border-radius:50%;font-size:32px;background:#06141ddd;box-shadow:inset 0 0 0 4px #091d25,0 0 14px #dfb96625}.battle-screen .brand h1{font-size:19px;line-height:1.24;letter-spacing:.025em;text-shadow:0 2px 5px #000}.battle-screen .brand p{font-size:12px;color:#c3cfd4}.battle-screen .header-right{align-items:flex-end;gap:7px;flex-direction:column}.battle-screen .version{font-size:11px;background:#091823b8;border-color:#826f4d;padding:4px 7px}.battle-screen .header-right button{font-size:13px;padding:5px 9px;min-height:30px}
.battle-screen .ribbon{position:relative;margin-top:-83px;min-height:83px;padding:0 110px 10px 335px;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;pointer-events:none}.battle-screen .round-info,.battle-screen .metrics{pointer-events:auto}.battle-screen .round-info{justify-content:center;gap:14px;padding:6px 13px;background:linear-gradient(145deg,#0d2738f5,#04121fed);border:1px solid #bfa064;box-shadow:inset 0 0 0 3px #071522,0 5px 15px #0005;border-radius:4px;min-height:67px}.battle-screen .round-info .eyebrow{font-size:12px;letter-spacing:.07em;white-space:nowrap}.battle-screen .phase-name{font-family:inherit;font-size:15px;margin-top:6px;color:#dcebf6;white-space:nowrap}.battle-screen .preparation-controls{border:0;padding:0;background:none;gap:12px;margin-left:0}.battle-screen .prep-timer{border:0;border-left:1px solid #887953;border-radius:0;background:none;box-shadow:none;min-height:52px;min-width:86px;padding:2px 8px}.battle-screen .timer-value{font-size:29px}.battle-screen .timer-caption{font-size:11px;letter-spacing:0}.battle-screen .ready-button{font-size:15px;min-height:46px;padding:9px 12px;letter-spacing:.045em;background:linear-gradient(135deg,#ffeba3,#e9bc5e 60%,#bc8332);color:#1a1b18;border:1px solid #ffe7a8;border-radius:3px;box-shadow:0 0 0 3px #1b241e,inset 0 0 0 2px #674e3155;text-shadow:0 1px #ffe6a0}.battle-screen .prep-timer.urgent{background:#992523;border:1px solid #ffb58a;border-radius:4px}
.battle-screen .metrics{gap:20px;border:0;border-radius:0;padding:8px 12px;background:#03111ce8;min-height:67px}.battle-screen .metric b{font-size:21px}.battle-screen .metric span{font-size:12px}.battle-screen .xp{height:5px}.battle-screen .metric:last-child{min-width:53px}
.battle-screen .layout{grid-template-columns:var(--rail-left) minmax(0,1fr) var(--rail-right);gap:var(--rail-gap);align-items:start}.battle-screen .panel{background:linear-gradient(135deg,#0c2639f5,#04131ff5 65%);border:1px solid #518399;border-radius:6px;box-shadow:inset 0 0 0 3px #031321,inset 0 0 18px #4c9ba21a,0 6px 18px #0007}.battle-screen .panel-head{padding:13px 14px;border-bottom:1px solid #47718780;background:linear-gradient(90deg,#29475a40,transparent)}.battle-screen .panel-head h2{font-size:15px;letter-spacing:.025em}
.battle-screen .left-column{gap:17px;padding-top:9px}.battle-screen .standing{padding:13px 11px;font-size:16px;grid-template-columns:20px minmax(0,1fr) auto;gap:7px;border-color:#49647755}.battle-screen .standing>span:nth-child(2){white-space:nowrap}.battle-screen .standing strong{font-size:18px}.battle-screen .standing.me{background:linear-gradient(90deg,#20618580,#0b2d4780);box-shadow:inset 0 0 0 1px #8be3ff,inset 0 0 13px #65c9fb40,0 0 13px #61c8ff40;border-radius:5px}.battle-screen .standing .health{height:5px;background:#03101b}.battle-screen .standing .health i{background:linear-gradient(90deg,#45aeac,#75ffe0)}.battle-screen .stand-footer{padding:16px 12px;font-size:14px;line-height:1.7}.battle-screen .quick-controls{padding:13px}.battle-screen .quick-controls>.eyebrow{font-size:12px;letter-spacing:.08em}.battle-screen .shop-controls{gap:11px}.battle-screen .quick-controls button{position:relative;min-height:61px;font-size:17px;padding:12px 10px 12px 49px;line-height:1.25;border-color:#647f86;background:linear-gradient(135deg,#163a50,#051522);box-shadow:inset 0 0 0 3px #03131f,0 3px 6px #0004}.battle-screen .quick-controls button::before{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:36px;border:1px solid #859d9f;border-radius:50%;font-size:24px;line-height:1;color:#d6edf5;background:#0b2639}.battle-screen .quick-controls button[data-action=roll]::before{content:'↻';color:#efc879;border-color:#c19c5a}.battle-screen .quick-controls button[data-action=level]::before{content:'⇧'}.battle-screen .quick-controls button:disabled{opacity:.6}
.battle-screen .arena-column{min-width:0}.battle-screen .arena-header{display:flex;align-items:center;gap:10px;margin:5px 0 0;padding:8px 13px;border:1px solid #54809a77;border-radius:4px;background:#061626d9;font-size:14px}.battle-screen .arena-header strong{font-size:15px}.battle-screen .banner{padding:12px 15px;font-size:15px}.battle-screen .banner .small{font-size:14px}
.battle-screen #board-surface{padding:0;perspective:none;overflow:visible}.battle-screen .board-frame{padding:0;border:0;border-radius:0;background:none;transform:none!important;box-shadow:none;overflow:visible;position:relative}.battle-screen .board-frame::before,.battle-screen .board-frame::after{display:none}.battle-screen .team-legend{position:absolute;top:13px;left:13px;right:13px;padding:0;min-width:0;font-size:14px;z-index:30;text-shadow:0 2px 5px #000;pointer-events:none}.battle-screen .legend-own,.battle-screen .legend-foe,.battle-screen .legend-ally{background:#061521cb;padding:5px 9px;border:1px solid #79a3b16b;border-radius:3px}.battle-screen .legend-own b{font-size:12px}.battle-screen .board-labels{position:absolute;bottom:4px;left:11%;right:11%;margin:0;padding:5px 8px;background:#051423d9;border:1px solid #657f845c;border-radius:3px;font-size:12px;letter-spacing:.04em;z-index:30;pointer-events:none}
/* Art and grid share one normalized space. Units are upright billboards on its floor. */
.battle-screen .board-stage{height:clamp(530px,calc(100svh - 330px),1050px);min-width:0;width:100%;position:relative;container-type:size;border:0;border-radius:0;box-shadow:none;background:url('art/arena-citadel.png') center/100% 100% no-repeat;isolation:isolate}
.battle-screen .board{position:absolute;inset:0;width:100%;height:100%;min-width:0;display:block;background:none;border:0;gap:0;overflow:visible;z-index:1}
.battle-screen .board .tile{position:absolute;aspect-ratio:auto;min-width:0;min-height:0;display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;cursor:pointer}.battle-screen .board .tile svg{width:100%;height:100%;position:absolute;inset:0;pointer-events:none;overflow:visible}.battle-screen .board .tile polygon{fill:#339dda13;stroke:#6ed8ffb0;stroke-width:1.35px;stroke-linejoin:round}.battle-screen .board .tile.home.alt polygon{fill:#50b4e221}.battle-screen .board .tile.enemy polygon{fill:#bc4d3318;stroke:#ef9a7ca6}.battle-screen .board .tile.enemy.alt polygon{fill:#ea644a20}.battle-screen .board .tile.partner polygon{fill:#32be7c25;stroke:#a1f3d0bd}.battle-screen .board .tile:hover polygon,.battle-screen .board .tile:focus-visible polygon{fill:#b3e6ee40;stroke:#f9e3a4;stroke-width:3px}.battle-screen .board .tile.target polygon{stroke:#ddd7aa9a}.battle-screen .board .tile:focus-visible{outline:0}.battle-screen .board .tile-coord{position:absolute;left:auto;right:10%;bottom:7%;color:#b4e5ffc2;font-size:13px;font-weight:500;text-shadow:0 1px 3px #000a}.battle-screen .board .tile.enemy .tile-coord{color:#ffc3b1bf}
.battle-screen .board-pieces{position:absolute;inset:0;pointer-events:none;z-index:3}.battle-screen .piece-anchor{position:absolute;width:calc(var(--piece-width)*1%);width:min(calc(var(--piece-width)*1cqw),calc(var(--piece-height)*1cqh));aspect-ratio:1;transform:translate(-50%,-87%);pointer-events:none}
.battle-screen .board-stage .field-piece{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;border-radius:0;padding:0;background:none;box-shadow:none;overflow:visible;isolation:isolate;pointer-events:auto;cursor:grab}.battle-screen .board-stage .field-piece:active{cursor:grabbing}.battle-screen .board-stage .field-piece::before{content:'';position:absolute;z-index:0;left:14%;right:14%;bottom:8%;height:17%;border:1px solid color-mix(in srgb,var(--team) 65%,transparent);border-radius:50%;background:radial-gradient(ellipse,#02060ec9 20%,#0009 55%,#0000 75%);box-shadow:0 4px 5px #000b,0 0 9px color-mix(in srgb,var(--team) 30%,transparent);transform:scaleX(1.08);pointer-events:none}.battle-screen .board-stage .field-piece::after{display:none}.battle-screen .board-stage .field-piece.team-own::before{border-color:#76e4ff;box-shadow:0 4px 6px #000b,0 0 0 1px #69d7fa60,0 0 12px #61d6ff66}.battle-screen .board-stage .field-piece.team-ally::before{border:2px dashed #83ffd0}.battle-screen .board-stage .field-piece.team-foe::before{border-color:#fc9279}
.battle-screen .board-stage .field-piece .token-art{position:absolute;inset:3% 0 8%;height:auto;padding:0;border:0;background:none;overflow:visible;isolation:auto;z-index:1}.battle-screen .board-stage .miniature-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;image-rendering:auto;pointer-events:none}.battle-screen .board-stage .field-piece.team-foe .miniature-art{transform:scaleX(-1)}.battle-screen .board-stage .boss-token .miniature-art{inset:auto auto 0 -15%;width:130%;height:140%;object-fit:contain}.battle-screen .board-stage .boss-token::before{left:6%;right:6%;border:2px solid #ffe0a2;box-shadow:0 5px 8px #000a,0 0 13px #d4a1ef80}
.battle-screen .board-stage .field-piece .token-name{position:absolute;z-index:6;bottom:-10px;left:50%;transform:translateX(-50%);width:max-content;max-width:125%;padding:3px 7px;border:1px solid #6a879a77;border-radius:3px;background:linear-gradient(90deg,#051422c9,#091c2bee,#051422c9);color:#f3f8ff;text-shadow:0 2px 2px #000;font-size:14px;line-height:1.1;font-weight:650;letter-spacing:.01em;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.battle-screen .board-stage .field-piece>.bar{position:absolute;top:-5%;left:17%;width:66%;height:6px;margin:0;border:1px solid #04101e;border-radius:4px;box-shadow:0 0 0 1px #526679,0 2px 4px #000c;z-index:7}.battle-screen .board-stage .field-piece>.bar i{background:linear-gradient(90deg,var(--team),#ddffee)}.battle-screen .board-stage .field-piece.team-foe>.bar i{background:linear-gradient(90deg,#e95447,#ffb294)}.battle-screen .board-stage .field-piece>.bar.energy{top:0;left:20%;width:60%;height:3px;border:0;box-shadow:0 0 0 1px #04101e}.battle-screen .board-stage .field-piece>.bar.energy i{background:#e7c672}.battle-screen .board-stage .field-piece>.bar.shield{top:4%;height:3px;border:0}.battle-screen .board-stage .field-piece>.bar.shield i{background:#f0feff}
.battle-screen .board-stage .token-top{position:absolute;top:4%;left:0;right:0;width:100%;display:flex;align-items:flex-start;justify-content:space-between;z-index:4;transform:none}.battle-screen .board-stage .ownership{font-size:10px;padding:3px 4px;line-height:1;background:var(--team);color:#061320;border-radius:3px;box-shadow:0 2px 5px #0008;max-width:none}.battle-screen .board-stage .team-ally .ownership{font-size:9px;max-width:none}.battle-screen .board-stage .element-marker{background:#051625e8;border:1px solid var(--el);border-radius:50%;padding:2px;font-size:13px;box-shadow:0 2px 5px #000b}.battle-screen .board-stage .stars{position:absolute;bottom:0;right:2%;left:auto;background:#071420e8;font-size:13px;letter-spacing:0;line-height:1.1;padding:2px 3px;border:1px solid #90774970;z-index:4}.battle-screen .board-stage .trace{position:absolute;bottom:0;left:0;background:#051625ed;border:1px solid #638ea49f;border-radius:3px;font-size:12px;padding:2px;z-index:4}.battle-screen .board-stage .status-badges{top:18%;right:-6%;gap:2px;z-index:6}.battle-screen .board-stage .status-badge{width:21px;height:21px;font-size:13px;box-shadow:0 2px 4px #0008}.battle-screen .board-stage .status-overflow{font-size:11px}.battle-screen .board-stage .field-piece.selected{outline:0;box-shadow:none}.battle-screen .board-stage .field-piece.selected::before{border:2px solid #ffe4a0;box-shadow:0 0 0 2px #a67637,0 0 18px #f9d58a}.battle-screen .board-stage .field-piece:focus-visible{outline:2px solid #ffe7a6;outline-offset:4px}.battle-screen .board-stage .field-piece.combo-source{outline:0;box-shadow:none}.battle-screen .board-stage .field-piece.combo-source::before{border:2px solid #a9efff;box-shadow:0 0 17px #b5efff}.battle-screen .board-stage .field-piece.combo-source-final::before{border-color:#ffe591;box-shadow:0 0 23px #ffe591}
.battle-screen .numeric-overlays{z-index:25}.battle-screen .combo-overlays{z-index:26}.battle-screen .combat-number{font-size:18px}.battle-screen .combat-number.absorb{font-size:15px}.battle-screen .combat-number.boss-number{font-size:22px}.battle-screen .combo-callout{font-size:13px;padding:7px 11px;max-width:275px}.battle-screen .combo-callout.triple{font-size:15px}.battle-screen .combo-callout.final{font-size:17px}.battle-screen .combo-callout small{font-size:11px}
/* Readability takes precedence over squeezing panels into a fixed height. */
.battle-screen .details-column{padding-top:9px;display:flex;flex-direction:column;grid-column:auto;gap:15px;min-width:0}.battle-screen .inspect{padding:15px;max-height:none;overflow:visible;line-height:1.5}.battle-screen .inspect-art{width:100%;max-width:none;max-height:none;height:200px;aspect-ratio:auto;margin:0 0 13px;border:1px solid var(--el,#bc9a65);background:radial-gradient(ellipse,color-mix(in srgb,var(--el,#b39ad9) 21%,#091722),#07141f);box-shadow:inset 0 0 20px #0008;float:none}.battle-screen .inspect-art .dragon-portrait{object-fit:contain}.battle-screen .inspect h3{font-family:inherit;font-size:23px;line-height:1.25;color:#f0f7ff}.battle-screen .inspect .eyebrow{font-size:13px;letter-spacing:.06em}.battle-screen .inspect p{font-size:15px;margin-top:11px;line-height:1.55}.battle-screen .inspect .stat-grid{grid-template-columns:1fr 1fr;gap:8px;font-size:17px;margin:14px 0}.battle-screen .inspect .stat-grid div{background:#17334680;padding:8px;border:1px solid #4366796b}.battle-screen .inspect .stat-grid span{font-size:13px;color:#c0d0dd;margin-bottom:3px}.battle-screen .inspect .ability-copy{padding:12px;border:1px solid #4c708486;border-radius:4px;background:linear-gradient(135deg,#102e3f,#061726)}.battle-screen .ability-copy strong{font-size:17px;color:#f1e4c5}.battle-screen .inspect .energy-copy{font-size:14px;padding-bottom:8px;border-bottom:3px solid #4bcbed}.battle-screen .inspect .small{font-size:14px}.battle-screen .active-effects h4{font-size:15px}.battle-screen .effect-row{padding:8px;gap:9px}.battle-screen .effect-row strong{font-size:14px}.battle-screen .effect-row small{font-size:12px}.battle-screen .effect-row time{font-size:13px}.battle-screen .log{padding:15px}.battle-screen .log h3{font-size:13px;letter-spacing:.065em;line-height:1.5}.battle-screen .log-line{font-size:14px;line-height:1.6;margin:7px 0}.battle-screen .log .small{font-size:14px}
.battle-screen .bench-bar{font-size:15px;margin:12px 0 7px;padding:0 4px}.battle-screen .sell-zone{font-size:15px;min-height:38px;min-width:150px;padding:7px 11px}.battle-screen .bench{grid-template-columns:repeat(var(--bench-slots,6),minmax(0,1fr));gap:7px;min-height:104px;padding:8px;background:#031521e8;border:1px solid #426a80;border-radius:5px;box-shadow:inset 0 0 0 3px #04121d}.battle-screen .bench-slot{min-height:100px;background:linear-gradient(145deg,#163448,#071722);border:1px solid #4a718b}.battle-screen .bench-slot .token{height:106px;border-width:1px;max-width:100%;box-shadow:none}.battle-screen .bench .token-name{font-size:13px;line-height:1.2;padding:3px 1px}.battle-screen .bench .ownership{font-size:10px}.battle-screen .bench .element-marker{font-size:12px}.battle-screen .bench .token .stars{font-size:12px}.battle-screen .bench .token-art{min-height:0}
.battle-screen .shop{margin-top:12px;background:linear-gradient(180deg,#0b2738ed,#03111cef);box-shadow:inset 0 0 0 3px #061a28,0 0 15px #2183a72b}.battle-screen .shop-cards{padding:12px;gap:11px;grid-template-columns:repeat(var(--slots),minmax(0,1fr))}.battle-screen .shop-card{display:flex;flex-direction:column;padding:7px;gap:5px;border:1px solid color-mix(in srgb,var(--el) 65%,#203b4b);border-top:2px solid var(--el);border-radius:4px;background:linear-gradient(150deg,color-mix(in srgb,var(--el) 15%,#0c2435),#04131e);position:relative;box-shadow:inset 0 0 15px #0004}.battle-screen .shop-card .card-art{height:clamp(95px,7vw,150px);width:100%;aspect-ratio:auto;border:0;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--el) 23%,#091724),#05121d);order:0}.battle-screen .shop-card .card-meta{position:absolute;top:9px;left:9px;right:9px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;min-height:0;gap:3px}.battle-screen .shop-card .element-name{font-size:13px;background:#041521ed;border:1px solid var(--el);padding:3px;border-radius:50%;min-height:0}.battle-screen .shop-card .price-tag{font-size:16px;padding:5px;color:#ffe39d;border-color:#8d794b;background:#071522f0;line-height:1}.battle-screen .shop-card h3{font-size:17px;line-height:1.2;letter-spacing:0;margin:3px 0 1px;overflow-wrap:normal}.battle-screen .shop-card .role{font-size:13px;line-height:1.3;min-height:0;color:#c9d8e3}.battle-screen .card-pair{font-size:14px;line-height:1.3}.battle-screen .shop-card button{min-height:38px;font-size:15px;padding:6px 4px;margin-top:auto}.battle-screen .shop-card.empty-card{min-height:235px;font-size:15px;display:flex}.battle-screen .shop-card.empty-card .small{font-size:13px}.battle-screen .shop-note{font-size:13px;line-height:1.5;padding:0 12px 12px}.battle-screen .arena-column>p.small{font-size:14px!important;line-height:1.5;padding:6px 3px}.battle-screen .footnote{font-size:12px;letter-spacing:.025em;margin-top:18px;text-shadow:0 2px 4px #000}.battle-screen .raid-pick,.battle-screen .raid-roster p,.battle-screen .combo-strip,.battle-screen .boss-info .small{font-size:15px}.battle-screen .boss-info strong{font-size:17px}.battle-screen .recap table{font-size:15px}
@media(min-width:2100px){.battle-screen{--rail-left:260px;--rail-right:360px;--rail-gap:18px}.battle-screen .standing{font-size:18px;padding:16px 14px}.battle-screen .stand-footer{font-size:16px}.battle-screen .inspect p{font-size:17px}.battle-screen .inspect-art{height:245px}.battle-screen .shop-card h3{font-size:20px}.battle-screen .shop-card .role,.battle-screen .shop-note{font-size:15px}.battle-screen .card-pair,.battle-screen .shop-card button{font-size:17px}.battle-screen .board-stage .field-piece .token-name{font-size:17px}.battle-screen .bench .token-name{font-size:16px}.battle-screen .bench-slot .token{height:125px}.battle-screen .log-line{font-size:16px}.battle-screen .metrics{gap:28px}.battle-screen .metric b{font-size:24px}.battle-screen .metric span{font-size:14px}}
@media(max-width:1500px){.battle-screen{--rail-left:190px;--rail-right:280px;--rail-gap:10px}.battle-screen .workspace{padding-inline:10px}.battle-screen .ribbon{margin-top:0;padding:10px 0;min-height:0;gap:10px}.battle-screen .match-header{height:76px}.battle-screen .header-right{flex-direction:row;align-items:center}.battle-screen .brand{max-width:440px}.battle-screen .round-info{padding:6px 12px;justify-content:flex-start}.battle-screen .metrics{gap:17px}.battle-screen .board-stage{height:clamp(510px,calc(100svh - 300px),780px)}.battle-screen .standing{font-size:15px;padding:12px 8px;gap:5px}.battle-screen .quick-controls button{font-size:16px}.battle-screen .inspect{padding:12px}.battle-screen .shop-cards{gap:7px;padding:9px}.battle-screen .shop-card h3{font-size:15px}.battle-screen .shop-card .role{font-size:13px}.battle-screen .shop-card button{font-size:14px}.battle-screen .shop-card .price-tag{font-size:15px}.battle-screen .board-stage .field-piece .token-name{font-size:13px}.battle-screen .board-stage .ownership{font-size:9px}.battle-screen .board-stage .element-marker{font-size:11px}}
@media(max-width:1180px){.battle-screen{--rail-left:190px}.battle-screen .layout{grid-template-columns:var(--rail-left) minmax(0,1fr);gap:13px}.battle-screen .details-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.battle-screen .inspect-art{height:220px}.battle-screen .shop-card h3{font-size:16px}.battle-screen .board-stage{height:600px}.battle-screen .shop-cards{grid-template-columns:repeat(var(--slots),minmax(128px,1fr));overflow-x:auto}.battle-screen .shop-card .card-art{height:105px}.battle-screen .metrics{gap:14px}.battle-screen .ribbon .round-info{gap:9px}.battle-screen .ready-button{padding:8px}.battle-screen .metric b{font-size:20px}}
@media(max-width:760px){.battle-screen .match-header{height:auto;min-height:79px;padding:10px}.battle-screen .brand h1{font-size:17px}.battle-screen .brand{max-width:260px}.battle-screen .sigil{display:none}.battle-screen .header-right{flex-direction:column}.battle-screen .workspace{padding:0 8px 14px}.battle-screen .ribbon{flex-direction:column;align-items:stretch;margin:0;padding:9px 0;gap:8px}.battle-screen .round-info{justify-content:space-between;min-height:64px;gap:5px}.battle-screen .phase-name{font-size:14px}.battle-screen .round-info .eyebrow{font-size:11px}.battle-screen .preparation-controls{margin:0;gap:5px}.battle-screen .prep-timer{min-width:75px;padding:2px 4px}.battle-screen .timer-value{font-size:25px}.battle-screen .timer-caption{font-size:10px}.battle-screen .ready-button{font-size:13px;padding:8px}.battle-screen .metrics{width:100%;min-height:60px;gap:8px;justify-content:space-between;padding:8px}.battle-screen .metric b{font-size:19px}.battle-screen .metric span{font-size:11px}.battle-screen .layout{display:flex;flex-direction:column}.battle-screen .arena-column{order:0;width:100%}.battle-screen .left-column{order:1;display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}.battle-screen .details-column{order:2;display:block;width:100%}.battle-screen .details-column .log{margin-top:14px}.battle-screen #board-surface{overflow-x:auto;overflow-y:hidden}.battle-screen .board-frame{min-width:730px}.battle-screen .board-stage{height:540px;min-width:730px}.battle-screen .team-legend{font-size:13px}.battle-screen .board-labels{font-size:12px}.battle-screen .bench{grid-template-columns:repeat(var(--bench-slots,6),minmax(86px,1fr));overflow-x:auto}.battle-screen .shop-cards{grid-template-columns:repeat(var(--slots),minmax(150px,1fr))}.battle-screen .shop-card h3{font-size:17px}.battle-screen .shop-card button{font-size:15px}.battle-screen .inspect p{font-size:16px}.battle-screen .inspect-art{height:235px}.battle-screen .log-line{font-size:15px}.battle-screen .arena-header{font-size:13px}.battle-screen .arena-header strong{font-size:14px}}
.battle-screen .board-stage::after{content:'◇';position:absolute;left:50%;top:48.3%;transform:translate(-50%,-50%);color:#ffe0ed;font-size:30px;text-shadow:0 0 7px #d980d8,0 0 18px #cc74cd;z-index:2;pointer-events:none}
.battle-screen .board-stage .field-piece .token-name{font-size:16px}.battle-screen .bench .token-name{font-size:14px}.battle-screen .inspect p{font-size:16px}.battle-screen .log-line{font-size:15px}.battle-screen .shop-card .role,.battle-screen .shop-note{font-size:14px}
@media(min-width:2100px){.battle-screen .board-stage .field-piece .token-name{font-size:18px}.battle-screen .inspect p{font-size:17px}.battle-screen .log-line{font-size:16px}}
@media(max-width:1500px){.battle-screen .board-stage .field-piece .token-name{font-size:15px}}
@media(max-width:760px){.battle-screen .board-stage .field-piece .token-name{font-size:14px}}

/* 0.1.7 — finishing pass: original scene, geometry and artwork preserved. */
.battle-screen .prep-resources{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #af945d80}
.battle-screen .prep-resources .metric{min-width:0;min-height:68px;padding:12px 13px;border:1px solid #587280;border-radius:4px;background:linear-gradient(135deg,#1b3949b5,#061722);box-shadow:inset 0 1px #b1d5df19,inset 0 -3px #010b13a0,0 3px 7px #0004;gap:6px}
.battle-screen .prep-resources .metric b{font-size:25px;line-height:1.15;font-variant-numeric:tabular-nums}
.battle-screen .prep-resources .metric span{font-size:14px;line-height:1.4;color:#d0dfe7}
.battle-screen .prep-resources .xp{height:7px;width:100%;margin-top:3px;border:1px solid #527889;border-radius:4px;overflow:hidden;background:#020e17;box-shadow:0 1px #a1c4d21a}
.battle-screen .prep-resources .xp i{background:linear-gradient(90deg,#3398bc,#83f0ff);box-shadow:0 0 8px #6ee5fa70}
.battle-screen .ribbon>.metrics{gap:25px;min-width:180px;justify-content:space-evenly;background:#041320d9;border:1px solid #5d788766;border-radius:4px}
.battle-screen .quick-controls button{font-size:18px;line-height:1.35;min-height:65px;padding-top:13px;padding-bottom:13px}
.battle-screen .quick-controls>.eyebrow{font-size:13px}.battle-screen .stand-footer{font-size:15px;line-height:1.7}.battle-screen .header-right button{font-size:14px;min-height:34px}.battle-screen .panel-head h2{font-size:16px}
.battle-screen .board-stage .field-piece .token-name{font-size:17px;font-weight:700;padding:4px 8px;max-width:135%;border-color:#7fa0b19a;background:linear-gradient(90deg,#04101de8,#102a3bf5,#04101de8);box-shadow:0 3px 5px #0008,inset 0 1px #b6d6e21c;letter-spacing:0}
.battle-screen .board-stage .field-piece::before{bottom:7%;height:18%;background:radial-gradient(ellipse at 50% 42%,#02060ff0 0 38%,#000b 60%,#0000 76%);box-shadow:0 5px 5px #000d,0 9px 9px #0008,inset 0 1px #dce2d332;transform:scaleX(1.07)}
.battle-screen .board-stage .field-piece.team-own::before{border-color:#94ddec;box-shadow:0 5px 5px #000d,0 9px 10px #0008,0 0 0 1px #62b6cd70,0 0 9px #6bbdd047,inset 0 1px #edfbff55}
.battle-screen .board-stage .field-piece.team-foe::before{border-color:#e0a18b;box-shadow:0 5px 5px #000d,0 9px 10px #0008,0 0 8px #bc63563b,inset 0 1px #ffe4c633}
.battle-screen .board-stage .field-piece.team-ally::before{box-shadow:0 5px 5px #000d,0 9px 10px #0008,0 0 9px #7af2c544}
.battle-screen .board-stage .field-piece .token-art{filter:drop-shadow(2px 4px 2px #02060a70)}
.battle-screen .board-stage .field-piece.selected::before{border:2px solid #ffe4a0;box-shadow:0 4px 7px #000b,0 0 0 2px #a67637,0 0 18px #f9d58a}
.battle-screen .board-stage .field-piece.combo-source::before{border:2px solid #a9efff;box-shadow:0 4px 7px #000b,0 0 17px #b5efff}.battle-screen .board-stage .field-piece.combo-source-final::before{border-color:#ffe591;box-shadow:0 4px 7px #000b,0 0 23px #ffe591}
.battle-screen .shop,.battle-screen .bench{border-color:#9b8b64;box-shadow:inset 0 0 0 3px #071826,inset 0 5px 12px #5596ab18,0 5px 0 #020c15,0 7px 0 #7d6b444b,0 11px 17px #0007;background:linear-gradient(165deg,#18374bf2,#061523f5 45%,#0b2432f5)}
.battle-screen .shop .panel-head{border-bottom-color:#aa94634a;background:linear-gradient(90deg,#cba86e1c,#1a3c4f40 48%,transparent)}
.battle-screen .shop-card{border-color:color-mix(in srgb,var(--el) 65%,#858474);box-shadow:inset 0 1px #edf8e92b,inset 0 0 0 2px #08121d,0 3px 0 #020a12,0 5px 9px #0007;background:linear-gradient(155deg,color-mix(in srgb,var(--el) 18%,#173545),#091c2b 65%,#19333d);gap:7px}
.battle-screen .shop-card .card-art{border:1px solid color-mix(in srgb,var(--el) 35%,#2c4a59);box-shadow:inset 0 0 20px #0007,0 1px #bfdce518;background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--el) 30%,#172b36),#05121e 75%)}
.battle-screen .shop-card h3{font-size:18px;line-height:1.25;text-shadow:0 2px 3px #0009}.battle-screen .shop-card .role{font-size:15px;line-height:1.4;color:#d0e0e9}.battle-screen .card-pair{font-size:15px}.battle-screen .shop-card .price-tag{font-size:18px;border-color:#c4a360;box-shadow:0 2px 5px #0008,inset 0 1px #f9e0aa2b}
.battle-screen .shop-card button{font-size:16px;min-height:43px;font-weight:700;background:linear-gradient(160deg,color-mix(in srgb,var(--el) 24%,#213d4b),#102332);box-shadow:inset 0 1px #d4e4ed26,0 2px 0 #030c14}
.battle-screen .shop-card button:disabled{background:linear-gradient(#24323b,#121e28);box-shadow:inset 0 1px #d4e4ed14;opacity:.65}
.battle-screen .shop-card:hover,.battle-screen .shop-card:focus-visible{border-color:var(--el);box-shadow:inset 0 1px #edf8e92b,0 0 0 1px color-mix(in srgb,var(--el) 45%,transparent),0 5px 12px #0008}
.battle-screen .shop-card.empty-card{border-color:#527185;background:radial-gradient(ellipse at 50% 65%,#1d425470,#061521 75%);box-shadow:inset 0 3px 13px #0009,inset 0 0 0 2px #071522;font-size:16px;color:#b7cdd9}.battle-screen .shop-card.empty-card .small{font-size:14px}
.battle-screen .bench-slot{border:1px solid #608092;box-shadow:inset 0 3px 12px #000a,0 1px #cad4b632;background:radial-gradient(ellipse at 50% 75%,#28516770,#0a1c2b 76%);font-size:24px;color:#819dab}
.battle-screen .bench-slot .token{box-shadow:inset 0 0 0 1px #d3e6de19,0 3px 6px #0006;background:linear-gradient(140deg,#244554,#0b1d2a);border-bottom:2px solid var(--el)}
.battle-screen .bench .token-art{background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--el) 32%,#192c39),#091724 80%)}
.battle-screen .bench .token-name{font-size:15px;font-weight:700;padding:4px 2px;text-shadow:0 1px 2px #0009}.battle-screen .bench-bar{font-size:16px}.battle-screen .sell-zone{font-size:16px;min-height:42px}.battle-screen .shop-note{font-size:14px;color:#c1d3dd}
.battle-screen .inspect p{font-size:17px;line-height:1.6}.battle-screen .inspect .stat-grid{font-size:19px;gap:9px}.battle-screen .inspect .stat-grid span{font-size:14px}.battle-screen .inspect .ability-copy{padding:13px;box-shadow:inset 0 1px #b2c8d31a,0 3px 8px #0004;border-color:#628493}.battle-screen .ability-copy strong{font-size:19px}.battle-screen .inspect .small,.battle-screen .inspect .energy-copy{font-size:15px}.battle-screen .inspect .eyebrow{font-size:14px}.battle-screen .log-line{font-size:16px}.battle-screen .log h3{font-size:14px}.battle-screen .effect-row strong{font-size:15px}.battle-screen .effect-row small,.battle-screen .effect-row time{font-size:14px}.battle-screen .active-effects h4{font-size:16px}
@media(min-width:2100px){.battle-screen .board-stage .field-piece .token-name{font-size:19px}.battle-screen .shop-card h3{font-size:21px}.battle-screen .shop-card button{font-size:18px}.battle-screen .bench .token-name{font-size:17px}.battle-screen .inspect p{font-size:18px}}
@media(max-width:1500px){.battle-screen .quick-controls button{font-size:17px;padding-left:45px}.battle-screen .shop-card h3{font-size:17px}.battle-screen .shop-card .role{font-size:14px}.battle-screen .board-stage .field-piece .token-name{font-size:16px}.battle-screen .prep-resources .metric{padding:11px}.battle-screen .ribbon>.metrics{min-width:170px}}
@media(max-width:760px){.battle-screen .ribbon>.metrics{min-width:0;min-height:56px;justify-content:space-around}.battle-screen .board-stage .field-piece .token-name{font-size:16px}.battle-screen .shop-card h3{font-size:18px}.battle-screen .left-column{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.battle-screen .quick-controls{padding:10px}.battle-screen .quick-controls button{font-size:16px;padding-left:41px}.battle-screen .quick-controls button::before{left:6px;width:29px}.battle-screen .prep-resources .metric b{font-size:23px}}
.battle-screen .board-stage .field-piece.boss-token::before{border-color:#ffe0a2;box-shadow:0 6px 8px #000d,0 10px 12px #0008,0 0 13px #d4a1ef80,inset 0 1px #fff0cd55}

/* 0.1.8 — replay-only motion and readable battle feedback. The scene, cells,
   hit targets and source art are unchanged. Only the inner artwork moves. */
/* Static art is the safe fallback. Flight is a jointed texture mesh, never a
   globally scaled CSS statue. The UI/hit targets remain above all visual layers. */
.battle-screen .board-stage .flight-art{position:absolute;inset:0;pointer-events:none}
.battle-screen .board-stage .flight-art .miniature-art{animation:none}
.battle-screen .board-stage .flight-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;contain:strict}
.battle-screen .board-stage .flight-shadow{z-index:2}
.battle-screen .board-stage .flight-creatures{z-index:2}
.battle-screen .board-stage .flight-effects{z-index:2}
.battle-screen .board-stage.flight-rendered .flight-art{visibility:hidden}
.battle-screen .board-stage.flight-rendered .field-piece::before{background:none;box-shadow:none;height:12%;bottom:5%;opacity:.4}
.battle-screen .board-feedback{position:absolute;inset:0;pointer-events:none;z-index:25}
.battle-screen .board-stage .stars{bottom:1%;left:50%;right:auto;transform:translateX(-50%);font-size:19px;line-height:1.1;letter-spacing:2px;white-space:nowrap;padding:3px 5px;background:linear-gradient(#293044f5,#080f1df5);border:1px solid #d3b76e;color:#ffe59a;text-shadow:0 1px 2px #000,0 0 5px #e5b04466;box-shadow:0 2px 5px #000a,inset 0 1px #ffe9a64d;border-radius:4px;opacity:1}
.battle-screen .board-stage [data-star="3"] .stars{color:#fff1bc;border-color:#fff0b4;box-shadow:0 2px 5px #000b,0 0 8px #ffdb6655}
.battle-screen .board-stage .trace{bottom:30%;left:-5%;font-size:16px;line-height:1.25;padding:3px 5px;background:#04101df5;border-color:#8cbad0;box-shadow:0 2px 5px #000b}
.battle-screen .board-stage .status-badges{top:-37px;left:50%;right:auto;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:3px;width:max-content;max-width:none;pointer-events:none}
.battle-screen .board-stage .status-badge{width:29px;height:31px;flex:0 0 29px;font-size:18px;line-height:1;display:flex;flex-direction:column;justify-content:center;gap:1px;border:1px solid currentColor;background:#051321f5;border-radius:5px;box-shadow:0 2px 5px #000c,inset 0 1px #ddf4ff26}
.battle-screen .board-stage .status-badge small{font-size:10px;line-height:1;color:#fff;font-weight:750;font-variant-numeric:tabular-nums}
.battle-screen .board-stage .status-overflow{font-size:13px;padding:5px 3px;background:#071320f5;border:1px solid #afc9d8;border-radius:4px;color:#fff}
.battle-screen .effect-dot{color:#ffb16b}.battle-screen .effect-stun,.battle-screen .effect-vulnerability,.battle-screen .effect-antiheal{color:#ffa8b6}
.battle-screen .effect-shield,.battle-screen .effect-haste,.battle-screen .effect-reduction{color:#a3f5e2}
.battle-screen .effect-row .status-badge{width:29px;height:29px;flex:0 0 29px;font-size:19px;border:1px solid currentColor;background:#061625}
.battle-screen .effect-row time{font-size:15px;white-space:nowrap}.battle-screen .effect-row strong{font-size:16px}
.battle-screen .combo-callout{font-size:17px;line-height:1.35;max-width:320px;border-color:#b9edff;background:linear-gradient(145deg,#173c50f7,#041220f7);box-shadow:0 4px 12px #000b,inset 3px 0 #a4e2ff;padding:9px 13px;text-shadow:0 1px 2px #000}
.battle-screen .combo-callout.triple{font-size:19px;border-color:#9fffdb;box-shadow:0 4px 12px #000b,inset 3px 0 #84f9cb,0 0 14px #68e1b74d}
.battle-screen .combo-callout.final{font-size:21px;border-color:#ffe3a0;background:linear-gradient(145deg,#382942f7,#111725f7);box-shadow:0 4px 12px #000b,inset 3px 0 #ffe199,0 0 18px #ffe09960}
.battle-screen .combo-callout small{font-size:13px;letter-spacing:.08em}
.battle-screen .board-stage .field-piece.combo-source .stars{border-color:#a9efff;box-shadow:0 0 12px #abedffa0}
.battle-screen .board-stage .field-piece.combo-source-final .stars{border-color:#fff0b4;box-shadow:0 0 16px #ffdc87b0}
.battle-screen .combat-number{font-size:20px;font-weight:850;text-shadow:-1px -1px 1px #04101d,1px -1px 1px #04101d,-1px 1px 1px #04101d,1px 2px 2px #04101d}
.battle-screen .number-sum{font-size:12px;vertical-align:super;margin-left:3px;color:#ffdfa0}
.battle-screen .attack-overlays{position:absolute;inset:0;pointer-events:none;z-index:24;overflow:hidden}
.battle-screen .attack-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.battle-screen .attack-trail line{stroke-width:3px;stroke-linecap:round;opacity:.8}
.battle-screen .attack-bolt,.battle-screen .attack-impact{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff5d7 5%,var(--bolt) 55%,transparent 75%);box-shadow:0 0 7px var(--bolt);pointer-events:none}
.battle-screen .attack-impact{width:23px;height:23px;background:radial-gradient(circle,#fff6d7 0 8%,var(--bolt) 15%,transparent 63%);box-shadow:none}
.battle-screen .prep-resources{gap:8px}.battle-screen .prep-resources .metric{min-width:0;gap:5px}.battle-screen .prep-resources .metric b{font-size:25px;line-height:1.2;font-variant-numeric:tabular-nums}.battle-screen .prep-resources .metric span{font-size:13px;letter-spacing:.035em}.battle-screen .prep-resources .metric small{font-size:14px;line-height:1.3;color:#b9cdd9}
.battle-screen .prep-resources .field-full b{color:#edf3f8}.battle-screen .prep-resources .field-incomplete{border-color:#e87572;background:linear-gradient(125deg,#52272ee8,#191d2df0);box-shadow:inset 3px 0 #ff8c86,0 0 9px #ff65651a}
.battle-screen .prep-resources .field-incomplete b,.battle-screen .prep-resources .field-incomplete small{color:#ff9c96}
@media(min-width:2100px){.battle-screen .board-stage .stars{font-size:23px}.battle-screen .board-stage .status-badge{width:33px;height:35px;flex-basis:33px;font-size:21px}.battle-screen .board-stage .status-badges{top:-42px}.battle-screen .board-stage .status-badge small{font-size:11px}}
@media(max-width:760px){.battle-screen .prep-resources .metric{padding:10px}.battle-screen .prep-resources .metric b{font-size:23px}.battle-screen .prep-resources .metric span{font-size:12px}.battle-screen .board-stage .stars{font-size:18px}.battle-screen .combo-callout{max-width:270px}}
@media(prefers-reduced-motion:reduce){.battle-screen .board-stage .flight-art,.battle-screen .board-stage .flight-art .miniature-art{animation:none!important}.battle-screen .board-stage .flight-art{transform:translateY(-7px)}.battle-screen .board-stage .flight-art .miniature-art{transform:scaleX(var(--facing))}.battle-screen .attack-trail,.battle-screen .attack-bolt{display:none}}

/* 0.1.12: spaced physical pads. Same scenery, camera azimuth and dragon art. */
.battle-screen .board-stage{height:clamp(650px,calc(100svh - 260px),1100px);min-width:980px}
.battle-screen #board-surface{overflow-x:auto;overflow-y:hidden}
.battle-screen .board .tile .pad-shadow{fill:#0009;stroke:none;filter:blur(1px)}
.battle-screen .board .tile .pad-base{fill:#101c24;stroke:#8f8261;stroke-width:2px}
.battle-screen .board .tile .pad-face{stroke:#568da8;stroke-width:1.8px;filter:drop-shadow(0 1px 1px #a7dafa55)}
.battle-screen .board .tile.enemy .pad-face{stroke:#bd725f}
.battle-screen .board .tile.partner .pad-face{stroke:#7ccaad}
.battle-screen .board .tile.unavailable{cursor:not-allowed}
.battle-screen .board .tile.drop-valid .pad-face{stroke:#8ed7ff;stroke-width:2.4px;filter:drop-shadow(0 0 3px #47baff88)}
.battle-screen .board .tile.drop-current .pad-face,.battle-screen .board .tile:focus-visible .pad-face{stroke:#ffe59b;stroke-width:4px;filter:drop-shadow(0 0 6px #ffe077);fill:#50766a!important}
.battle-screen .board .tile.drop-current .pad-base{stroke:#ffe59b;stroke-width:3px}
.battle-screen .board .tile-coord{right:14%;bottom:2%;font-size:12px}
.battle-screen .board-stage .field-piece .miniature-art{filter:drop-shadow(0 7px 3px #000c) drop-shadow(0 0 2px var(--el))}
.battle-screen [data-unit]{touch-action:none;user-select:none;-webkit-user-select:none}
.battle-screen .convergence{padding:14px;background:linear-gradient(155deg,#112b39ed,#07141eef);border-color:#9f875b}
.convergence h3{font-size:15px;color:#f7daa0;letter-spacing:.04em;margin-bottom:8px}
.convergence .tracker-hint{font-size:13px;line-height:1.45;color:#b7cbd4;margin:0 0 10px}
.convergence-list{display:grid;gap:8px;max-height:520px;overflow:auto;scrollbar-width:thin}
.convergence-row{padding:9px;border:1px solid #3c505b;border-radius:5px;background:#07131e;color:#a7b8c1}
.convergence-row header{display:grid;grid-template-columns:1fr auto;padding:0;background:none;gap:4px}
.convergence-row header small{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.convergence-row header b{font-size:14px;line-height:1.3}.convergence-row header strong{font-size:16px}
.convergence-elements{display:flex;flex-wrap:wrap;gap:3px;font-size:12px;margin-top:7px}.convergence-elements i{font-style:normal}
.convergence-row p{font-size:12px;margin:7px 0 0}.convergence-row.available{border-color:#8aab86;background:linear-gradient(130deg,#173d3d,#10212d);color:#e9f3ea;box-shadow:inset 2px 0 #b2d88b}
.convergence-row.cooldown{border-color:#9c7951}.convergence-row progress{display:block;width:100%;height:5px;margin-top:8px;accent-color:#dfb778}.target-cooldowns{display:block;font-size:11px;margin-top:6px}
.convergence-row.recharged{box-shadow:0 0 12px #e8cd8888,inset 0 0 10px #e8cd8833}
@media(min-aspect-ratio:2/1) and (min-width:1600px){.battle-screen .layout{grid-template-columns:210px minmax(1080px,1fr) 310px}.battle-screen .board-stage{height:clamp(740px,72svh,1120px)}}
@media(max-width:760px){.battle-screen .board-stage{height:660px;min-width:980px}.convergence-list{max-height:430px}}

.drag-preview{position:fixed!important;z-index:10000!important;pointer-events:none!important;transform:translate(-50%,-75%)!important;opacity:.95;filter:drop-shadow(0 12px 10px #0009);max-width:160px}

/* Pointer preview and exact bench destinations — no authoritative unit moved locally. */
.drag-preview{width:120px;height:120px;user-select:none}.drag-preview *{pointer-events:none!important}.drag-preview img{width:100%;height:100%;object-fit:contain;display:block}

/* Read-only, unambiguous combat values on the same replay used by every mode. */
.battle-screen .board-stage .combat-vitals{position:absolute;z-index:7;left:50%;bottom:100%;transform:translateX(-50%);width:110%;max-width:126px;display:grid;gap:3px;pointer-events:none}
.battle-screen .board-stage .combat-vitals .bar{position:relative;margin:0;height:18px;border:1px solid #728ba4;border-radius:4px;background:#04101ef2;overflow:hidden;box-shadow:0 2px 4px #0009}
.battle-screen .board-stage .combat-vitals .bar i{display:block;height:100%;background:#207750}
.battle-screen .board-stage .team-foe .combat-vitals .hp i{background:#a63d39}
.battle-screen .board-stage .combat-vitals .shield i{background:#356e93}
.battle-screen .board-stage .combat-vitals .energy i{background:#7e631f}
.battle-screen .board-stage .combat-vitals .bar-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;line-height:16px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 1px 2px #000,1px 0 2px #000}
.battle-screen .board-stage .status-badges{top:auto;bottom:calc(100% + 64px)}
.battle-screen .bench-slot.drop-valid{border-color:#77b7cf;box-shadow:inset 0 0 12px #54c8ef22}
.battle-screen .bench-slot.drop-current{border:2px solid #ffe59b;background:linear-gradient(#355058,#102934);box-shadow:0 0 14px #ffd77999,inset 0 0 20px #ffe59b33}
.phase-confirmation{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:125px}.confirmation-count{text-align:center;color:#cfdeeb;font-size:14px;line-height:1.3}
.match-shell button.confirmation-accepted:disabled{opacity:1;color:#a2ffc2;border-color:#5ada92;background:linear-gradient(#194535,#0b2b21);box-shadow:0 0 13px #5ada9230}
.phase-confirmation button[aria-busy="true"]{opacity:1;color:#ffe5a3;cursor:progress}
/* 0.1.21 — cell-contained readouts. Floor light has no transform or hit target.
   Sprite size, pointer surface and the shared floor projection stay untouched. */
.battle-screen .board .board-depth{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.battle-screen .board-stage .board-unit-hud{position:absolute;z-index:8;left:calc(50% + var(--hud-x)*1cqw);top:calc(87% + var(--hud-y)*1cqh);width:calc(var(--hud-width)*1cqw);height:calc(var(--hud-height)*1cqh);transform:translateX(-50%);display:flex;flex-direction:column;justify-content:flex-end;gap:2px;box-sizing:border-box;pointer-events:none}
.battle-screen .board-stage .board-unit-hud .unit-indicators{display:flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;height:12px}
.battle-screen .board-stage .board-unit-hud .stars{position:static;transform:none;flex:0 0 auto;max-width:100%;font-size:11px;line-height:10px;letter-spacing:0;padding:0 2px;border-radius:2px;box-shadow:none}
.battle-screen .board-stage .board-unit-hud .status-badges{position:static;transform:none;width:auto;min-width:0;max-width:100%;height:12px;gap:1px}
.battle-screen .board-stage .board-unit-hud .status-badge{width:11px;height:12px;flex:0 0 11px;font-size:11px;line-height:10px;padding:0;border-radius:2px;box-shadow:none}
.battle-screen .board-stage .board-unit-hud .status-overflow{font-size:9px;line-height:10px;padding:0 1px;border-radius:2px}
.battle-screen .board-stage .board-unit-hud .combat-vitals{position:static;transform:none;width:100%;max-width:none;gap:1px;box-sizing:border-box}
.battle-screen .board-stage .board-unit-hud .combat-vitals .bar{height:13px;border-radius:2px;border-color:#05101c;box-shadow:0 0 0 1px #718a9959;margin:0;box-sizing:border-box}
.battle-screen .board-stage .board-unit-hud .combat-vitals .hp{border-left:2px solid var(--team)}
.battle-screen .board-stage .board-unit-hud .combat-vitals .bar-value{font-size:10px;line-height:11px;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
.battle-screen .board-stage .board-unit-hud .combat-vitals .energy{height:4px}
.battle-screen .board-stage .board-unit-hud .combat-vitals .shield{height:3px}
.battle-screen .board-stage .board-unit-hud .combat-vitals .energy .bar-value,.battle-screen .board-stage .board-unit-hud .combat-vitals .shield .bar-value{display:none}
.battle-screen .board-stage .field-piece.combo-source .board-unit-hud .stars{box-shadow:inset 0 0 3px #a9efff}
.battle-screen .board-stage .field-piece.combo-source-final .board-unit-hud .stars{box-shadow:inset 0 0 3px #ffe591}

/* 0.1.22 — vertical gauges and a separate, read-only combat roster. */
.battle-screen .board .tile .pad-shadow{fill:#05101818;filter:none}
.battle-screen .board .tile .pad-base{fill:transparent;stroke:#7399a3;stroke-width:1px;opacity:.25}
.battle-screen .board .tile .pad-face{opacity:.38;stroke-width:1.25px;filter:none}
.battle-screen .board[data-preparing="true"] .tile .pad-face{opacity:.68}
.battle-screen .board .tile.occupied .pad-face{opacity:.18}
.battle-screen .board .tile.occupied .pad-base{opacity:.12}
.battle-screen .board .tile:hover .pad-face,.battle-screen .board .tile:focus-visible .pad-face{opacity:.9;stroke:#d6e8ce;stroke-width:2px}
.battle-screen .board .tile.drop-valid .pad-face{opacity:.86;stroke:#9de8fb;stroke-width:2.4px;filter:drop-shadow(0 0 2px #78d9e966)}
.battle-screen .board:has(.drop-valid) .tile:not(.drop-valid) .pad-face{opacity:.34;stroke:#b67578;stroke-dasharray:3 5}
.battle-screen .board .tile.drop-current .pad-face{opacity:1;stroke:#fff0af;stroke-width:4px;filter:drop-shadow(0 0 5px #ffe39b);fill:#99d5ce55!important}
.battle-screen .board .tile-coord{opacity:.55;font-size:12px}
.battle-screen .board .tile.occupied .tile-coord{opacity:.15}
.battle-screen .board-stage .board-unit-hud{align-items:flex-start;gap:0}
.battle-screen .board-stage .team-foe .board-unit-hud{align-items:flex-end}
.battle-screen .vertical-readout{width:22px;height:min(62px,100%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.battle-screen .rank-star{display:block;width:22px;height:22px;flex:0 0 22px;overflow:visible}
.battle-screen .rank-star path{fill:#eef5fb;stroke:#6f8d9e;stroke-width:1.25;stroke-linejoin:round}
.battle-screen [data-rarity="2"] .rank-star path{fill:#ed596d;stroke:#ffd0d5}
.battle-screen [data-rarity="3"] .rank-star path{fill:#ffd05d;stroke:#fff0b5}
.battle-screen [data-rarity="3"] .rank-star{filter:drop-shadow(0 0 2px #ffd77366)}
.battle-screen .vertical-vitals{display:flex;justify-content:center;gap:2px;flex:1;min-height:0;width:22px}
.battle-screen .vertical-bar{position:relative;display:block;width:7px;height:100%;overflow:hidden;border:1px solid #07151fe6;border-radius:2px;background:#112433b8;box-shadow:0 0 0 1px #99bfcb24}
.battle-screen .vertical-bar i{position:absolute;inset:0;transform-origin:bottom;display:block;background:linear-gradient(90deg,#4aaf7a,#a0f4b1)}
.battle-screen .vertical-bar.shield,.battle-screen .vertical-bar.energy{width:3px;border-inline:0}
.battle-screen .vertical-bar.shield{background:#b9c7d210}
.battle-screen .vertical-bar.shield i{background:linear-gradient(90deg,#afbfc9,#f3f8fa)}
.battle-screen .vertical-bar.energy i{background:linear-gradient(90deg,#d8a63c,#ffe68b)}
.battle-screen .energy-ready .vertical-bar.energy{box-shadow:0 0 3px #ffe57aa6}
.battle-screen .selected-sale{padding:13px;display:grid;gap:9px}
.battle-screen .selected-sale>span{font-size:14px;color:#c6d6de}
.battle-screen .selected-sale .sell-zone{width:100%;min-height:54px;padding:13px 18px;font-size:18px;font-weight:750;border-color:#b39663;background:linear-gradient(150deg,#493a27,#182735)}
.battle-screen .selected-sale .sell-zone:hover:not(:disabled){border-color:#ffe0a0;background:linear-gradient(150deg,#675033,#243847)}
.battle-screen .selected-sale .sell-zone:active:not(:disabled){transform:translateY(1px);background:#14232e}
.battle-screen .selected-sale .sell-zone:disabled{opacity:.5;background:#192630;cursor:not-allowed}
@media(min-width:1181px){.battle-screen{--rail-right:360px}}
@media(min-width:2100px){.battle-screen{--rail-right:400px}}

/* 0.1.23 — larger shared scene, cropped scenery and selected-unit sidebars. */
.battle-screen{--rail-left:250px;--rail-right:330px;--rail-gap:16px}
.battle-screen .workspace{padding:14px 16px}
.battle-screen .board-stage{height:clamp(820px,calc(100svh - 120px),1320px);min-width:1120px}
.battle-screen .board-frame{margin-top:-90px;margin-bottom:-100px}
.battle-screen #board-surface{overflow-x:auto;overflow-y:hidden}
.battle-screen .team-legend{top:102px;font-size:14px}
.battle-screen .board-labels{bottom:108px;font-size:14px}
.battle-screen .board-stage .board-unit-hud{left:50%;top:0;width:100%;height:min(100%,calc(var(--piece-height)*.75cqh));justify-content:flex-start}
.battle-screen .vertical-readout{width:28px;height:100%;gap:3px}
.battle-screen .rank-star{width:28px;height:28px;flex-basis:28px}
.battle-screen .vertical-vitals{width:28px;gap:3px}
.battle-screen .vertical-bar{width:10px;border-radius:3px}
.battle-screen .vertical-bar.shield,.battle-screen .vertical-bar.energy{width:4px}
.battle-screen .left-column{display:flex;flex-direction:column;gap:12px}
.battle-screen .left-column .ribbon{display:block;padding:0;margin:0;min-height:0}
.battle-screen .left-column .round-info{display:flex;flex-direction:column;align-items:stretch;padding:12px;gap:9px}
.battle-screen .left-column .preparation-controls{justify-content:space-between;margin:0;gap:5px}
.battle-screen .left-column .phase-name{font-size:19px;line-height:1.3}
.battle-screen .left-column .round-info .eyebrow{font-size:14px;letter-spacing:.02em}
.battle-screen .left-column .ready-button{font-size:15px;padding:9px;min-height:46px}
.battle-screen .left-column .timer-caption{font-size:12px}
.battle-screen .left-column .timer-value{font-size:30px}
.battle-screen .standing{font-size:14px;padding:7px 9px;line-height:1.2;gap:4px}
.battle-screen .stand-footer{font-size:13px;padding:10px;line-height:1.5}
.battle-screen .quick-controls{margin:0;padding:12px}
.battle-screen .quick-controls button{font-size:17px;min-height:48px;padding-block:9px}
.battle-screen .prep-resources{margin-top:12px;padding-top:12px;gap:8px}
.battle-screen .prep-resources .metric{padding:10px;min-height:62px}
.battle-screen .prep-resources .metric b{font-size:30px;line-height:1.1}
.battle-screen .prep-resources .metric span,.battle-screen .prep-resources .metric small{font-size:14px;line-height:1.4;letter-spacing:0}
.battle-screen .left-column .convergence{padding:12px}
.battle-screen .left-column .convergence h3{font-size:15px;letter-spacing:.02em;line-height:1.4}
.battle-screen .left-column .tracker-hint{font-size:13px;margin-bottom:8px}
.battle-screen .left-column .convergence-list{max-height:280px;overflow:auto;scrollbar-width:thin;gap:6px}
.battle-screen .left-column .convergence-row{padding:8px}
.battle-screen .left-column .convergence-row header{display:grid;grid-template-columns:1fr auto;gap:3px;padding:0}
.battle-screen .left-column .convergence-row header small{grid-column:1/-1;font-size:12px}
.battle-screen .left-column .convergence-row header b{font-size:14px;line-height:1.3}
.battle-screen .left-column .convergence-row header strong{font-size:16px}
.battle-screen .left-column .convergence-elements{flex-wrap:wrap;font-size:13px;gap:3px}
.battle-screen .left-column .convergence-row p,.battle-screen .left-column .target-cooldowns{font-size:13px;line-height:1.4}
.battle-screen .details-column{display:block;padding:0;min-width:0}
.battle-screen .selected-details .panel-head h2{font-size:18px;letter-spacing:.02em}
.battle-screen .selected-details:has(.empty-inspect){background:transparent;border-color:transparent}
.battle-screen .empty-inspect{font-size:16px!important;color:#b3c8d3;line-height:1.5}
.battle-screen .inspect{padding:14px;max-height:calc(100svh - 170px);overflow:auto;scrollbar-width:thin}
.battle-screen .inspect-art{height:180px}
.battle-screen .inspect h3{font-size:27px}
.battle-screen .inspect p{font-size:16px;line-height:1.5}
.battle-screen .inspect .stat-grid{font-size:22px;gap:8px}
.battle-screen .inspect .stat-grid span{font-size:14px;line-height:1.3}
.battle-screen .inspect .stat-grid div{padding:9px;overflow-wrap:anywhere}
.battle-screen .inspect .small,.battle-screen .inspect .energy-copy{font-size:15px}
.battle-screen .inspect .ability-copy strong{font-size:19px}
.battle-screen .effect-row strong{font-size:16px}
.battle-screen .effect-row small,.battle-screen .effect-row time{font-size:14px;line-height:1.4}
.battle-screen .effect-row .status-badge{width:32px;height:32px;flex-basis:32px;font-size:21px}
.battle-screen .arena-column>.selected-sale{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:8px 0;background:none;border:0}
.battle-screen .arena-column>.selected-sale>span{font-size:16px}
.battle-screen .arena-column>.selected-sale .sell-zone{width:auto;min-width:220px;min-height:58px;font-size:20px;padding:14px 24px}
.battle-screen .battle-notes{margin-top:14px;border-top:1px solid #597080;padding-top:10px}
.battle-screen .battle-notes summary{font-size:15px;color:#b6cbd7;cursor:pointer}
.battle-screen .panel-head h2{font-size:16px}
@media(min-width:2100px){.battle-screen{--rail-left:270px;--rail-right:360px}.battle-screen .inspect p{font-size:18px}.battle-screen .inspect .stat-grid{font-size:24px}.battle-screen .inspect .stat-grid span{font-size:16px}}
@media(max-width:1180px){.battle-screen .details-column{grid-column:1/-1}.battle-screen .inspect{max-height:650px}.battle-screen .left-column{display:flex}.battle-screen .arena-column{min-width:0}}
@media(max-width:760px){.battle-screen .workspace{padding:10px 8px}.battle-screen .left-column{display:flex}.battle-screen .board-stage{height:820px;min-width:1120px}.battle-screen .arena-column>.selected-sale{flex-wrap:wrap}.battle-screen .arena-column>.selected-sale .sell-zone{min-width:180px;flex:1}.battle-screen .inspect{max-height:none}.battle-screen .left-column .convergence-list{max-height:280px}}

/* 0.1.24 — phase spacing and gold Sell; presentation only. */
.battle-screen .left-column .round-info{padding:16px;gap:14px;min-width:0}
.battle-screen .left-column .round-info .eyebrow,.battle-screen .left-column .phase-name{white-space:normal;overflow-wrap:anywhere}
.battle-screen .left-column .preparation-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;min-width:0;align-items:stretch}
.battle-screen .left-column .prep-timer{min-width:0;width:100%;padding:8px 10px;border-left:0;text-align:center}
.battle-screen .left-column .timer-value{font-size:32px;line-height:1.15}
.battle-screen .left-column .timer-caption{white-space:normal;overflow-wrap:anywhere}
.battle-screen .left-column .phase-confirmation{min-width:0;width:100%;gap:10px}
.battle-screen .left-column .ready-button{width:100%;min-width:0;min-height:48px;white-space:normal;overflow-wrap:anywhere}
.battle-screen .left-column .confirmation-count{display:block;position:static;font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;padding:0 2px 2px}
.battle-screen .selected-sale .sell-zone{color:#211b10;background:linear-gradient(135deg,#ffe8a0,#e8bd61);border-color:#ffe4a0;text-shadow:none;box-shadow:inset 0 1px 0 #fff3c8,0 2px 5px #0003}
.battle-screen .selected-sale .sell-zone:hover:not(:disabled){color:#211b10;background:linear-gradient(135deg,#fff1bd,#f5cf78);border-color:#fff0bb}
.battle-screen .selected-sale .sell-zone:active:not(:disabled){color:#211b10;background:linear-gradient(135deg,#e6bc60,#d5a448);border-color:#f1cb79;box-shadow:inset 0 2px 4px #75511c40}
.battle-screen .selected-sale .sell-zone:disabled{opacity:1;color:#493d26;background:linear-gradient(135deg,#d5c397,#bdaa79);border-color:#cebb8b;box-shadow:none}

/* 0.1.25 — Obsidian Citadel. Same stage, projection, cells and hit regions. */
.battle-screen{background-image:linear-gradient(#0309128c,#030913ec),url('art/arena-obsidian.webp'),url('art/arena-citadel.png')}
.battle-screen .board-stage{background-image:url('art/arena-obsidian.webp'),url('art/arena-citadel.png');background-size:100% 100%;background-repeat:no-repeat}
.battle-screen .board .tile .pad-base{stroke:#b9b496;opacity:.20}
.battle-screen .board .tile .pad-face{stroke:#a9c5c5;opacity:.38}
.battle-screen .board .tile.enemy .pad-face{stroke:#d9a094}
.battle-screen .board .tile.drop-valid .pad-face{opacity:.94;stroke:#c3edee}
.battle-screen .board .tile.drop-current .pad-face{stroke:#fff1b5;opacity:1}
.battle-screen .board-stage.flight-rendered .field-piece.selected::before{border:2px solid #fff0b4;opacity:.95;box-shadow:0 0 0 2px #112333aa}
.battle-screen .board-stage .flight-canvas{pointer-events:none}
.battle-screen .board-stage .flight-shadow{z-index:2}
.battle-screen .board-stage .flight-creatures{z-index:3}
.battle-screen .board-stage .flight-effects{z-index:4}
.battle-screen .board-stage .board-pieces{z-index:5}
.battle-screen .bench{background:linear-gradient(165deg,#23313af2,#0a131cf5 48%,#15202df5);border-color:#9e8b60}
.battle-screen .bench-slot{background:linear-gradient(150deg,#1c2a35,#09131d);border-color:#5d6968}
@media(prefers-reduced-motion:reduce){.battle-screen .board .tile .pad-face{transition:none}}

/* 0.1.26 — wider left rail; recover exterior space, keep the scene/shop width. */
.battle-screen{--rail-left:298px;--rail-gap:4px}
.battle-screen .workspace{padding-inline:4px}
.battle-screen .layout{column-gap:4px;row-gap:12px}
.battle-screen .left-column{min-width:0;gap:12px}
.battle-screen .left-column>section,.battle-screen .left-column>.ribbon{flex-shrink:0}
.battle-screen .left-column .panel-head h2{font-size:18px}
.battle-screen .left-column .standing{font-size:16px;padding:8px 10px;gap:5px}
.battle-screen .left-column .standing>span:nth-child(2){min-width:0;white-space:normal;overflow-wrap:anywhere}
.battle-screen .left-column .standing strong{font-size:20px}
.battle-screen .left-column .stand-footer{font-size:14.5px}
.battle-screen .left-column .round-info{width:100%;padding:18px;gap:15px}
.battle-screen .left-column .phase-name{font-size:21px}
.battle-screen .left-column .round-info .eyebrow{font-size:16px}
.battle-screen .left-column .timer-value{font-size:36px}
.battle-screen .left-column .timer-caption{font-size:13.5px}
.battle-screen .left-column .ready-button{font-size:17px;min-height:54px}
.battle-screen .left-column .confirmation-count{font-size:14.5px}
.battle-screen .left-column .quick-controls{min-width:0;padding:14px}
.battle-screen .left-column .quick-controls>.eyebrow{font-size:14.5px}
.battle-screen .left-column .prep-resources{margin-top:0;padding-top:0;border-top:0;gap:9px}
.battle-screen .left-column .prep-resources .metric b{font-size:34px}
.battle-screen .left-column .prep-resources .metric span,.battle-screen .left-column .prep-resources .metric small{font-size:15.5px;overflow-wrap:anywhere}
.battle-screen .left-column .prep-resources .xp{height:8px}
.battle-screen .left-column .shop-controls{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #af945d80}
.battle-screen .left-column .shop-controls button{width:100%;min-width:0;min-height:54px;font-size:19px;white-space:normal;overflow-wrap:anywhere;padding-block:11px;line-height:1.35}
.battle-screen .left-column .shop-controls button small{display:block;font-size:15.5px;color:inherit;line-height:1.4}
.battle-screen .left-column .shop-controls button:hover:not(:disabled){background:linear-gradient(135deg,#24536a,#0c2739);border-color:#d5c58e}
.battle-screen .left-column .shop-controls button:active:not(:disabled){background:linear-gradient(#0a2030,#173f50);box-shadow:inset 0 2px 5px #0007}
.battle-screen .left-column .shop-controls button:disabled{opacity:.65;color:#c8d3da;cursor:not-allowed}
.battle-screen .left-column .shop-controls button[aria-busy="true"]{opacity:1;color:#ffe5a3;cursor:progress}
.battle-screen .left-column #convergence-tracker{min-width:0}
.battle-screen .left-column .convergence h3{font-size:17px;overflow-wrap:anywhere}
.battle-screen .left-column .tracker-hint{font-size:14.5px}
.battle-screen .left-column .convergence-list{max-height:clamp(140px,18svh,280px);overflow:auto;overscroll-behavior:contain}
.battle-screen .left-column .convergence-row header{grid-template-columns:minmax(0,1fr) auto}
.battle-screen .left-column .convergence-row header b{font-size:16px;overflow-wrap:anywhere}
.battle-screen .left-column .convergence-row header strong{font-size:18px}
.battle-screen .left-column .convergence-row header small{font-size:13.5px}
.battle-screen .left-column .convergence-elements,.battle-screen .left-column .convergence-row p,.battle-screen .left-column .target-cooldowns{font-size:14.5px;overflow-wrap:anywhere}
@media(min-width:2100px){.battle-screen{--rail-left:318px}}
/* This breakpoint previously used a narrower 210px rail, independently of the variables. */
@media(min-aspect-ratio:2/1) and (min-width:1600px){.battle-screen{--rail-left:252px;--rail-right:310px}.battle-screen .layout{grid-template-columns:var(--rail-left) minmax(1080px,1fr) var(--rail-right)}}
@media(min-aspect-ratio:2/1) and (min-width:1600px) and (max-width:1657px){.battle-screen .layout{grid-template-columns:var(--rail-left) minmax(0,1fr)}.battle-screen .details-column{grid-column:1/-1}}
@media(max-width:1180px){.battle-screen .layout{display:flex;flex-direction:column}.battle-screen .arena-column{order:0;width:100%}.battle-screen .left-column{order:1;width:100%}.battle-screen .details-column{order:2;width:100%}}

/* Old team-cell gradients had higher specificity than the transparent floor.
   Both teams now reveal the same stone; team color stays in the shared SVG wash and pads. */
.battle-screen .board-stage .board .tile:is(.home,.enemy){background:transparent;box-shadow:none}

/* Network echo indicator: isolated updates, no layout-wide refresh. */
.connection-status,.account-nav>.connection-status{display:inline-flex;align-items:center;gap:6px;min-width:60px;white-space:nowrap;font:600 11px/1.3 system-ui,sans-serif;color:#aab7c6;padding:4px 7px;border:1px solid #8da3b12e;border-radius:6px;background:#10232d70}
.connection-status::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.connection-status.good{color:#8acfb0}.connection-status.fair{color:#ead18c}.connection-status.bad{color:#efa197}
@media(max-width:600px){.connection-status{font-size:10px;padding:3px 5px}}

.version .connection-status{margin-left:6px;padding:0;border:0;background:none}

/* 0.1.29: card-only role badges. Inline SVG, no event handlers or asset fetches. */
.dragon-traits{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap;line-height:1;letter-spacing:normal;text-transform:none}
.dragon-traits>.element-icon{flex:none}
.dragon-role{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.625rem;height:1.625rem;border:1px solid #d6bc7d99;border-radius:5px;color:#f5dda2;background:#0b1a26;box-shadow:inset 0 1px #ffebbb26;pointer-events:none;user-select:none}
.dragon-role svg{display:block;width:1.375rem;height:1.375rem;pointer-events:none}
.match-shell .shop-card .element-name{border-radius:6px}
.match-shell .shop-card .card-meta{flex-wrap:wrap;column-gap:6px;row-gap:4px}
.match-shell .shop-card .dragon-traits{pointer-events:auto}
.match-shell .shop-card .price-tag{flex:none}
.match-shell .bench .token-top{flex-wrap:wrap;column-gap:4px;row-gap:3px}
.match-shell .bench .element-marker{margin-left:auto;flex:none}
.match-shell .bench .dragon-traits{gap:4px}
.match-shell .bench .dragon-role{width:1.5rem;height:1.5rem}
.match-shell .bench .dragon-role svg{width:1.25rem;height:1.25rem}

/* 0.1.33: explicit per-combat Mythic decision; never covers board/shop. */
.finale-selector{margin:8px 0;padding:16px}.finale-selector h2{font-size:1.05rem;color:var(--gold);margin:0 0 8px}.finale-selector>p{font-size:.9rem;color:var(--muted)}
.finale-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.finale-option{display:flex;flex-direction:column;gap:10px;text-align:left;white-space:normal;padding:16px;min-width:0}.finale-option strong{font-size:1.1rem;color:var(--gold)}.finale-option span{font-size:.95rem;line-height:1.45}.finale-option b{font-size:.9rem}.finale-option.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:linear-gradient(140deg,#4e3b1c,#211c1a)}
@media(max-width:700px){.finale-options{grid-template-columns:1fr}.finale-option{padding:14px}}
/* Raid ladder: one compact objective area; board geometry stays unchanged. */
.boss-objectives{border-top:1px solid color-mix(in srgb,var(--boss-color),transparent 55%);padding-top:8px;margin-top:8px;font-size:13px;line-height:1.4;color:#e6edf1;min-width:0}.boss-objectives>strong{color:var(--boss-color);letter-spacing:.04em}.boss-objectives p{margin:4px 0;overflow-wrap:anywhere}.dual-finale{padding:8px 10px;border:1px solid #aa956052;border-radius:6px;background:#141722;margin-top:7px}.dual-finale>strong{font-size:12px;color:#ffe7a1}.dual-finale>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.dual-finale span{font-size:10px;line-height:1.5}.dual-finale b{display:block;font-size:13px}.dual-finale>div>strong{font-size:12px;white-space:nowrap;color:#ffe7a1}.raid-cinematic[data-boss]:not([data-boss="azharyon"]) .raid-halo{background:radial-gradient(ellipse,color-mix(in srgb,var(--boss-color),transparent 65%),transparent 65%)}.raid-cinematic[data-boss]:not([data-boss="azharyon"]) h1{color:var(--boss-color)}
@media(max-width:600px){.dual-finale>div{flex-wrap:wrap;gap:4px}.boss-objectives{font-size:12px}.dual-finale b{font-size:12px}}
.battle-screen .board-stage .boss-token .miniature-art{width:calc(130% * var(--boss-scale,1));height:calc(140% * var(--boss-scale,1));left:calc(50% - 65% * var(--boss-scale,1))}
.raid-intro-art .flight-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.raid-intro-art.flight-rendered>img{visibility:hidden}

.perfect-convergence{border:1px solid #dac57b88;background:#c4a64b0a;padding:.6rem;margin:.5rem 0;color:#f6e7bd}.eight-elements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin:.45rem 0;font-size:.75rem}.eight-elements span{opacity:.55}.eight-elements .covered{opacity:1;color:#fff0bc}.perfect-convergence p{line-height:1.45}@media(max-width:600px){.eight-elements{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v3 uses the same cinematic surface and server duration for each distinct scene. */
.raid-cinematic[data-rules="3"],.raid-cinematic[data-rules="3"] .raid-intro-art,.raid-cinematic[data-rules="3"] .raid-intro-copy,.raid-cinematic[data-rules="3"] .raid-intro-progress{animation-duration:var(--cinematic-duration,5s)}
.raid-cinematic[data-rules="3"]:not([data-boss="azharyon"]) .raid-intro-art{animation-name:raid-creature-reveal;transform:none;will-change:opacity}
@keyframes raid-creature-reveal{0%{opacity:0}12%,100%{opacity:1}}
.raid-cinematic[data-rules="3"][data-boss="vaelryx"]{background:radial-gradient(ellipse at 50% 38%,#3d1215,#100d13 55%,#020307)}
.raid-cinematic[data-rules="3"][data-boss="vaelryx"] .raid-halo{border-radius:50%;border:3px solid #e1492866;background:radial-gradient(ellipse,#020204 45%,#5f1c1377 47%,#f8502522 50%,transparent 61%);box-shadow:0 0 90px #c535241e}
.raid-cinematic[data-rules="3"][data-boss="nythrakar"]{background:radial-gradient(ellipse at 34% 40%,#171443,#060912 65%,#03030a)}
.raid-cinematic[data-rules="3"][data-boss="nythrakar"] .raid-halo{border-radius:0;transform:rotate(45deg);border-color:#b1bcfc44;background:linear-gradient(135deg,#625cd018,transparent 40%,#2b70a226);box-shadow:0 0 90px #675cf52b}
.raid-cinematic[data-rules="3"][data-boss="elyndrax"]{background:radial-gradient(ellipse at 50% 40%,#504735,#171925 52%,#070911 80%)}
.raid-cinematic[data-rules="3"][data-boss="elyndrax"] .raid-halo{border:1px solid #fff1bb88;box-shadow:0 0 100px #ecd99124,inset 0 0 80px #e6d59c22}
.raid-cinematic[data-rules="3"].eclipse-cinematic{background:radial-gradient(ellipse at 50% 38%,#272033,#070810 62%,#010307);animation:none;opacity:1}
.eclipse-cinematic .raid-halo{visibility:hidden}.eclipse-cinematic .raid-intro-art{animation:none!important}.eclipse-cinematic .raid-intro-copy{animation:none!important}.raid-intro-copy .cinematic-power{font-size:clamp(.85rem,1.2vw,1.1rem);letter-spacing:.14em;color:#f8e8b2}
@media(prefers-reduced-motion:reduce){.raid-cinematic[data-rules="3"] .raid-halo{transform:none}.raid-cinematic[data-rules="3"] .raid-intro-art{will-change:auto}}

/* Boss combat sprites never carry their display plinth. Hitbox/HUD stay fixed. */
.battle-screen .board-stage .boss-combat-token::before{background:none!important;box-shadow:none!important;border:0!important;opacity:0}
.battle-screen .board-stage.boss-canvas-rendered .boss-token .flight-art{visibility:hidden}
.raid-intro-art{position:relative}
.raid-intro-art .flight-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.raid-intro-art.boss-canvas-rendered>img{visibility:hidden}

/* Scouting reuses one board and the normal roster components. */
.standings button.standing{width:100%;text-align:left;color:inherit;font:inherit;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer}
.standings button.standing:disabled{opacity:1;cursor:default}
.standings button.standing.me{background:#25425666}
.standings button.standing.out{opacity:.43}
.standings button.standing.observed{border-color:var(--teal);background:#153b3e;box-shadow:inset 3px 0 var(--teal)}
.standings button.standing:not(:disabled):hover{background:#173341}
.scouting-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin-bottom:12px;border:1px solid var(--teal);border-radius:8px;background:#102c35}
.scouting-banner strong{font-size:1rem;color:var(--teal)}
.scouting-banner p{margin:6px 0 0}.scouting-banner button{flex-shrink:0}
.scouting-view .token{cursor:help}.pool-counts{line-height:1.5}
@media(max-width:750px){.scouting-banner{flex-wrap:wrap}.scouting-banner button{width:100%}}