/* The playfield: one physical mat on a tilted table. Recessed card wells, metal Zone plaques, a lit centre seam.
   Cards on it are alive: the art drifts, rare characters play their loop, and they lunge, charge, take hits and shatter. */

/* ---------- the mat ---------- */
.board { position: relative; gap: 0 !important; padding: 12px; border-radius: 8px;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(24,191,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,122,89,.10), transparent 38%, transparent 62%, rgba(24,191,255,.10)),
    linear-gradient(rgba(6,10,14,.8), rgba(6,10,14,.8)),
    url(scene/tex/dark_rock_diff.webp) center / 360px,
    #0a1016;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.06), inset 0 0 70px rgba(0,0,0,.85),
    0 0 0 5px #151f28, 0 0 0 6px #33444f, 0 0 0 7px rgba(114,220,255,.45), 0 0 34px 4px rgba(24,191,255,.18),
    0 50px 70px -20px rgba(0,0,0,.9); }
/* the centre seam the plaques sit on */
.board::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, #18BFFF 15%, #72DCFF 50%, #18BFFF 85%, transparent); box-shadow: 0 0 14px 2px rgba(24,191,255,.45); opacity: .7; }
/* engraved side marks */
.board::after { content: "OPPONENT"; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font: 700 9px var(--hud); letter-spacing: .5em; color: rgba(255,122,89,.45); pointer-events: none; }

/* zones become lanes cut into the mat, not floating panels */
.board .zone { clip-path: none !important; background: none !important; border: 0 !important; box-shadow: none; backdrop-filter: none !important; padding: 6px 7px; border-radius: 0 !important; position: relative; }
.board .zone + .zone { box-shadow: inset 1px 0 0 rgba(0,0,0,.75), inset 2px 0 0 rgba(114,220,255,.07); }
.board .zone.hold-m { background: radial-gradient(80% 45% at 50% 100%, rgba(24,191,255,.2), transparent 70%) !important; }
.board .zone.hold-e { background: radial-gradient(80% 45% at 50% 0%, rgba(255,122,89,.18), transparent 70%) !important; }
.board .zone.target { background: linear-gradient(180deg, transparent 52%, rgba(24,191,255,.12)) !important; animation: none; }
.board .zone.target .slots:last-child .slot { border-color: rgba(114,220,255,.6) !important; box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 0 12px -2px #18BFFF; animation: well 1.3s ease-in-out infinite; }
@keyframes well { 50% { box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 0 18px 0 #18BFFF; } }
.board .zone.blocked { opacity: .5; }

/* recessed card wells */
.board .slot { position: relative; border: 1px solid rgba(0,0,0,.7) !important; border-radius: 6px;
  background: radial-gradient(70% 60% at 50% 40%, rgba(24,191,255,.05), rgba(0,0,0,.45)) !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.85), inset 0 -1px 0 rgba(114,220,255,.14); }
.board .slot::before { content: ""; position: absolute; inset: 30% 24%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0;
  background: radial-gradient(circle, transparent 52%, rgba(114,220,255,.12) 54%, rgba(114,220,255,.12) 60%, transparent 62%); }

/* metal Zone plaques with four screws */
.board .plate { z-index: 2; margin: 4px -2px; padding: 7px 6px !important;
  background:
    radial-gradient(circle at 7px 7px, #8a99a4 1.2px, #20292f 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) 7px, #8a99a4 1.2px, #20292f 2px, transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px), #8a99a4 1.2px, #20292f 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #8a99a4 1.2px, #20292f 2px, transparent 2.6px),
    linear-gradient(180deg, #34414c 0%, #1a232b 46%, #10171d 54%, #26313a 100%) !important;
  border: 1px solid #4a5a66 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.6); }
.board .plate .zn { color: #e9f3f8; text-shadow: 0 1px 0 #000, 0 0 10px rgba(114,220,255,.35); text-transform: uppercase; letter-spacing: .06em; }
.board .plate .zr { color: #9fb3c0; }
.board .score .m { text-shadow: 0 0 10px #18BFFF; }
.board .score .e { text-shadow: 0 0 10px #FF7A59; }

/* the table tilt in the arena */
@media (min-width: 701px) {
  body.arena .board { transform: perspective(1400px) rotateX(14deg); }
}

/* ---------- living cards ---------- */
.board .mc { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; transform-style: preserve-3d; }
.board .mc:not(.back) { box-shadow: 0 6px 10px -2px rgba(0,0,0,.8), 0 0 10px -4px var(--fc); }
.board .mc:not(.back):hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 18px -4px rgba(0,0,0,.85), 0 0 16px -2px var(--fc); z-index: 4; }
.board .mc:not(.back) .art { animation: idle 9s ease-in-out var(--d, 0s) infinite alternate; transform-origin: 50% 35%; }
@keyframes idle { 0% { transform: scale(1.05); } 50% { transform: scale(1.11) translate(-2%, -1.5%); } 100% { transform: scale(1.07) translate(1.5%, -.5%); } }
.mc video.live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; pointer-events: none; }

/* reveal: a 3D flip, then the character lunges toward the centre seam */
.mc.flip { animation: flipL 1s cubic-bezier(.2,.8,.2,1); z-index: 3; }
@keyframes flipL {
  0% { transform: perspective(500px) rotateY(180deg) scale(.85); filter: brightness(2.2); }
  40% { transform: perspective(500px) rotateY(0) scale(1); filter: brightness(1.4); }
  62% { transform: translateY(calc(var(--dir, -1) * 12px)) scale(1.14); filter: brightness(1.5) drop-shadow(0 0 10px var(--fc)); }
  100% { transform: none; filter: none; } }
/* after a hero moment the card slams into its well */
.mc.land { animation: landL .6s cubic-bezier(.3,1.5,.5,1); z-index: 3; }
@keyframes landL { 0% { transform: scale(1.35); filter: brightness(2.4) drop-shadow(0 0 16px var(--fc)); } 60% { transform: scale(.94); } 100% { transform: none; filter: none; } }
.mc.act-charge { animation: charge .9s ease-out; z-index: 3; }
@keyframes charge { 0%, 100% { transform: none; filter: none; } 25%, 65% { transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 12px #8FD0B8); } 45% { transform: scale(1.02); } }
.mc.act-hit { animation: hit .55s ease-out; }
@keyframes hit { 0%, 100% { transform: none; filter: none; } 15% { transform: translateX(-5px) rotate(-3deg); filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); } 35% { transform: translateX(5px) rotate(2deg); } 55% { transform: translateX(-3px); } }
.mc.act-shatter { animation: shatter .5s ease-in forwards; z-index: 3; }
@keyframes shatter { 0% { transform: none; filter: none; } 30% { transform: scale(1.12) rotate(-4deg); filter: brightness(2) drop-shadow(0 0 14px #FF7A59); }
  100% { transform: scale(1.4) rotate(8deg) translateY(calc(var(--dir, -1) * -20px)); opacity: 0; filter: blur(6px) brightness(3); } }
@media (prefers-reduced-motion: reduce) { .board .mc .art { animation: none !important; } }

/* ---------- desktop: standing over the table ----------
   Wide screens lay each side of a Zone out as one row (lanes). --cww is the card width the screen width affords;
   the hand scales with it (close to board-card size), the dock takes what the hand needs, and the board then gets
   the rest of the height: it sits on the dock like the near edge of a table. The camera looks down from above:
   a modest tilt on the board itself, a table slab with a lit rim, a warm lamp, contact shadows under the cards.
   Phones (portrait and sideways) never match this query. */
@media (min-width: 1100px) and (min-height: 700px) {
  body.arena { --cww: calc((100vw - 48px - 110px) / 13);
    --hc: clamp(96px, min(calc(var(--cww) * 1.12), calc(17vh - 20px)), 230px);
    --dock: calc(var(--hc) * 1.397 + 64px);
    --bh: calc(100vh - 56px - var(--dock) - 34px);
    --bwmax: calc((var(--bh) - 200px) / 2.79 * 13 + 110px);
    --dbw: min(calc(100vw - 48px), var(--bwmax)); --cw: calc((var(--dbw) - 110px) / 13); }
  body.arena .game { max-width: none; width: var(--dbw); height: calc(100vh - var(--dock)); box-sizing: border-box; margin: 0 auto; padding: 56px 0 26px; display: grid; align-content: end; }
  /* the room: a warm lamp over the middle of the table, falling off into the dark at the screen edges */
  body.arena .game::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(48% 42% at 50% 46%, rgba(255,214,160,.13), rgba(255,190,120,.04) 55%, transparent 75%),
      radial-gradient(120% 100% at 50% 45%, transparent 45%, rgba(0,0,0,.8) 100%); }
  body.arena #board { grid-template-columns: var(--cols, 1fr 1fr 1fr); padding: 22px 12px 16px; transform: perspective(2400px) rotateX(11deg); transform-origin: 50% 100%;
    background:
      radial-gradient(60% 70% at 50% 45%, rgba(255,220,170,.10), transparent 72%),
      radial-gradient(60% 40% at 50% 50%, rgba(24,191,255,.08), transparent 70%),
      linear-gradient(180deg, rgba(255,122,89,.09), transparent 38%, transparent 62%, rgba(24,191,255,.09)),
      linear-gradient(rgba(6,10,14,.78), rgba(6,10,14,.78)),
      url(scene/tex/dark_rock_diff.webp) center / 420px,
      #0a1016;
    /* the slab: a lit rim, the table's front edge (thickness) and its contact shadow on the floor */
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,235,200,.08), inset 0 0 90px rgba(0,0,0,.8),
      0 0 0 5px #18232c, 0 0 0 6px #3a4b57, 0 0 0 7px rgba(114,220,255,.4),
      0 14px 0 5px #121a21, 0 15px 0 6px #2c3a44, 0 16px 0 6px rgba(255,214,160,.18),
      0 0 40px 6px rgba(24,191,255,.14), 0 46px 50px 0 rgba(0,0,0,.85); }
  body.arena #board::after { font-size: clamp(10px, .6vw, 15px); top: 5px; color: rgba(255,140,110,.6); }
  body.arena #board .zone { grid-template-rows: auto auto auto; align-content: center; gap: clamp(10px, calc(var(--cw) * .1), 22px); padding: 8px 8px; }
  body.arena #board .slots { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(6px, calc(var(--cw) * .07), 14px); }
  body.arena #board .slot { box-shadow: inset 0 4px 10px rgba(0,0,0,.9), inset 0 -1px 0 rgba(114,220,255,.16), 0 1px 0 rgba(255,235,200,.05); }
  body.arena #board .slot::before { inset: 34% 28%; }
  /* cards stand on the table: a raised edge, a contact shadow, a little lamp light on the top edge */
  body.arena #board .mc:not(.back) { box-shadow: inset 0 1px 0 rgba(255,240,220,.35), inset 0 -2px 0 rgba(0,0,0,.55), 0 3px 0 -1px #06090c, 0 4px 0 -1px rgba(114,220,255,.18),
    0 14px 14px -6px rgba(0,0,0,.95), 0 0 12px -4px var(--fc); }
  body.arena #board .mc.back { box-shadow: 0 3px 0 -1px #06090c, 0 12px 12px -6px rgba(0,0,0,.9); }
  body.arena #board .plate { margin: 0 4px; padding: clamp(8px, calc(var(--cw) * .08), 18px) clamp(10px, calc(var(--cw) * .1), 22px) !important; }
  body.arena #board .plate .zn { font-size: clamp(14px, calc(var(--cw) * .16), 34px); }
  body.arena #board .plate .zr { font-size: clamp(12px, calc(var(--cw) * .12), 22px); margin-top: 4px; color: #c3d3de; }
  body.arena #board .score { font-size: clamp(16px, calc(var(--cw) * .21), 42px); margin-top: 6px; }
  body.arena #board .score .rc { font-size: clamp(11px, calc(var(--cw) * .11), 20px); letter-spacing: .08em; color: #a9bcc8; }
  body.arena #board .stamp { font-size: clamp(26px, calc(var(--cw) * .3), 56px); }
  /* a Zone that cannot take the selected card: its wells dim, its plate stays readable */
  body.arena #board .zone.blocked { opacity: 1; }
  body.arena #board .zone.blocked .slots { opacity: .4; }
  body.arena #board .zone.blocked .plate { filter: saturate(.5) brightness(.85); }
  /* the HUD grows with the screen */
  body.arena .ahud { padding-left: 24px; padding-right: 24px; }
  body.arena .ahud .who { font-size: clamp(14px, .78vw, 22px); }
  body.arena .ahud .pips { font-size: clamp(13px, .72vw, 20px); gap: clamp(6px, .4vw, 10px); }
  body.arena .ahud .pips i { width: clamp(16px, .9vw, 24px); height: clamp(18px, 1vw, 27px); }
  body.arena .ahud .iconbtn { font-size: clamp(11px, .62vw, 16px) !important; padding: clamp(5px, .35vw, 9px) clamp(9px, .7vw, 16px) !important; }
  body.arena .aclock { font-size: clamp(13px, .72vw, 20px); }
  body.arena .aclock i { width: clamp(18px, 1vw, 26px); height: clamp(18px, 1vw, 26px); }
  /* the dock: budget and hand on the left, the card text in the middle, the buttons on the right; a fixed height */
  body.arena .handbar { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 600px) auto; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "budget detail actions" "hand detail actions"; column-gap: 20px; row-gap: 6px; height: var(--dock); box-sizing: border-box; padding: 10px 24px 12px; align-items: start; overflow: hidden; }
  body.arena .handbar > * { max-width: none; margin: 0; }
  body.arena .handbar .budget { grid-area: budget; font-size: clamp(13px, .7vw, 18px); }
  body.arena .handbar .budget i { width: clamp(14px, .8vw, 22px); height: clamp(14px, .8vw, 22px); }
  body.arena .handbar .hand { grid-area: hand; gap: clamp(8px, .5vw, 14px); }
  body.arena .hand .mc { flex: 0 0 var(--hc); }
  /* hand names: two lines at a size that fits the longest word */
  body.arena .hand .mc .nm { font-size: 10.5cqw !important; line-height: 1.02 !important; right: 33cqw !important; }
  body.arena .handbar .detail { grid-area: detail; position: static; width: auto; height: 100%; max-height: none; overflow: auto; box-sizing: border-box; padding: 10px 14px; scrollbar-width: thin; }
  body.arena .handbar .detail h3 { font-size: clamp(18px, 1.05vw, 26px); }
  body.arena .handbar .detail p { font-size: clamp(13px, .75vw, 18px); }
  body.arena .handbar .detail .means { font-size: clamp(12.5px, .7vw, 17px); }
  /* Lisa's line: two lines, the rest on a tap */
  body.arena .handbar .detail .lisa { margin-top: 6px; padding: 6px 10px; }
  body.arena .handbar .detail .lisa p { font-size: clamp(12.5px, .68vw, 17px); }
  body.arena .handbar .detail .lisa-c[aria-expanded="false"] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.arena .handbar .detail .lisa-b:has(.lisa-c[aria-expanded="false"])::after { content: "Tap for more"; font: 600 10px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #72DCFF; }
  body.arena .handbar .actions { grid-area: actions; flex-direction: column; justify-content: center; align-self: stretch; }
  body.arena .handbar .actions .btn { font-size: clamp(13px, .72vw, 19px); padding: clamp(10px, .6vw, 16px) clamp(18px, 1.2vw, 30px); }
  /* the music chip would sit on the table: the HUD button takes over, as on phones */
  html body.arena .mus { display: none; }
  html body.arena .mus-btn { display: inline-block; }
}
/* short desktop screens: a smaller card text so the dock keeps its height */
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 820px) {
  body.arena { --hc: 96px; }
  body.arena .handbar .detail { padding: 8px 12px; }
  body.arena .handbar .detail .meta { font-size: 10px; }
  body.arena .handbar .detail h3 { font-size: 17px; }
  body.arena .handbar .detail p { font-size: 12.5px; margin-top: 1px; }
  body.arena .handbar .detail .means { display: none; }
}

/* ---------- Siege (SIEGE-SPEC.md): the Shield rows, the Base, retire to replace, the clash ----------
   The rows live inside the board (the sideways scale and the desktop tilt carry them) in extra padding at the top
   (the opponent) and the bottom (you). They never take taps: the Zones under them do. */
#board.siege { padding-top: 26px; padding-bottom: 26px; }
#board.siege::after { content: none; }
.sg { position: absolute; left: 8px; right: 8px; height: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 3;
  pointer-events: none; font: 700 10px var(--hud); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.sg-e { top: 4px; color: rgba(255,160,130,.9); }
.sg-m { bottom: 4px; color: rgba(150,220,255,.95); }
.sg-who { max-width: 8em; overflow: hidden; text-overflow: ellipsis; }
.sg-pips { display: flex; gap: 2px; filter: drop-shadow(0 0 4px currentColor); }
.sg .sh { width: 10px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .3s, opacity .3s; }
.sg-e .sh { background: linear-gradient(180deg, #FFB49C, #FF7A59); }
.sg-m .sh { background: linear-gradient(180deg, #9FE6FF, #18BFFF); }
.sg .sh.off { background: linear-gradient(135deg, #2a3843 45%, #0b1116 47% 53%, #2a3843 55%); opacity: .55; }
.sg-base { padding: 1px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 9px; letter-spacing: .14em; }
.sg.down .sg-base { background: #FF5A3C; border-color: #FF5A3C; color: #fff; box-shadow: 0 0 14px #FF5A3C; }
.sg-n { font-size: 12px; min-width: 1.3em; text-align: left; color: #E6F6FF; }
.sg-from { font-style: normal; font-size: 9px; letter-spacing: .04em; text-transform: none; opacity: .75; }
@media (max-width: 560px), (orientation: landscape) and (max-height: 560px) { .sg-from { display: none; } .sg { gap: 4px; } .sg-who { max-width: 5.5em; } }
@media (max-width: 360px) { .sg .sh { width: 8px; height: 10px; } .sg-who { max-width: 4.2em; } }
/* desktop: a bigger row on the table's near and far edge */
@media (min-width: 1100px) and (min-height: 700px) {
  body.arena #board.siege { padding-top: 38px; padding-bottom: 36px; }
  body.arena:has(#board.siege) { --bwmax: calc((var(--bh) - 236px) / 2.79 * 13 + 110px); }
  .sg { height: 26px; font-size: clamp(11px, .62vw, 15px); gap: 10px; }
  .sg-e { top: 8px; } .sg-m { bottom: 6px; }
  .sg .sh { width: clamp(14px, .8vw, 20px); height: clamp(16px, .92vw, 23px); }
  .sg-pips { gap: 3px; }
  .sg-n { font-size: clamp(14px, .8vw, 19px); }
  .sg-base { font-size: clamp(10px, .55vw, 13px); padding: 2px 8px; }
}
/* the turn number in the HUD: no "of 6", the match runs until a Base falls */
.ahud .pips .tnum { font: 700 14px var(--hud); letter-spacing: .14em; color: #E6F6FF; }
/* the end-of-turn clash: each Zone that hits flares in the hitter's colour */
.board .zone.clash-m .plate { animation: clashM .9s ease-out; }
.board .zone.clash-e .plate { animation: clashE .9s ease-out; }
@keyframes clashM { 0% { box-shadow: 0 0 0 0 rgba(24,191,255,0); } 30% { box-shadow: 0 0 26px 6px rgba(24,191,255,.8); } 100% { box-shadow: 0 0 0 0 rgba(24,191,255,0); } }
@keyframes clashE { 0% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } 30% { box-shadow: 0 0 26px 6px rgba(255,122,89,.8); } 100% { box-shadow: 0 0 0 0 rgba(255,122,89,0); } }
/* retire to replace: on a full side your face-up cards become targets; the replacement stands in the old card's slot */
.board .mc.retire-t { outline: 2px dashed #FFB14A; outline-offset: 1px; animation: rtPulse 1.1s ease-in-out infinite; cursor: pointer; }
.board .mc.rp { outline: 2px solid #FFB14A; outline-offset: 1px; }
/* the tag on a retire target and on its replacement: a real element at the top of the card, over the art */
.board .mc .rtag { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; white-space: nowrap;
  font: 700 clamp(8px, 1.6vw, 12px) var(--hud); letter-spacing: .08em; text-transform: uppercase; color: #05070A; background: #FFB14A; padding: 1px 5px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.board .zone.retire-z .slots:last-child .slot { animation: none; }
@keyframes rtPulse { 50% { outline-color: rgba(255,177,74,.35); } }
@media (prefers-reduced-motion: reduce) { .board .mc.retire-t { animation: none; } .board .zone.clash-m .plate, .board .zone.clash-e .plate { animation: none; } }
/* the result: how the match ended, and the Shields left */
.r-zones .r-how { background: rgba(24,191,255,.12); color: #E6F6FF; }
.r-zones .r-how span { white-space: normal; }
/* phones held upright: the hand dock covers the near edge of the board, so both Shield rows sit at the top, the
   opponent's first, yours right under it (colour and name tell them apart) */
@media (orientation: portrait) and (max-width: 700px) {
  #board.siege { padding-top: 46px; padding-bottom: 12px; }
  .sg-e { top: 4px; }
  .sg-m { top: 24px; bottom: auto; }
}
.ahud .pips .tnum { white-space: nowrap; }
/* the retire picker in the dock (a tap on a full Zone) */
.detail.rt-box p { margin: 4px 0 8px; }
.rt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-row .rt-pick { min-height: 36px; padding: 6px 10px; font-size: 12px; letter-spacing: .04em; border-color: #FFB14A; color: #FFE2B8; }