:root {
      --room-bg: #05070d;
      --room-panel: rgba(10, 14, 25, .88);
      --room-panel-2: rgba(255,255,255,.07);
      --room-line: rgba(255,255,255,.14);
      --room-text: #f5f7ff;
      --room-muted: #9aa7c2;
      --room-blue: #77adff;
      --room-green: #77f2b4;
      --room-red: #ff7b88;
      --mat-paper: #fbfbf7;
      --mat-paper-2: #eeeeea;
      --mat-ink: #141414;
      --mat-line: rgba(0,0,0,.55);
      --status-h: 28px;
      --gap: 3px;
      /* v31: keep 0.87 scale, restore sane left/right padding and sidebar gap. */
      --viewport-render-scale: .87;
      --sidebar-w: clamp(292px, 19.4vw, 382px);
      --room-edge-pad: 8px;
      --board-visual-shift-x: -10px;
      /* v64: wider real board frame again for 6 rested Link Units + Pilots. */
      --play-frame-w: min(100%, calc((100svh - var(--status-h) - 8px) * 4 / 3 * 1.06));
      /* v27: stronger shared P1 table camera, but give the far/opponent side its own real space. */
      --table-perspective: 1100px;
      --table-tilt: 9.25deg;
      --table-camera-scale: 1.245;
      --table-lift: -1px;
      /* Real DOM height, not child-only height. More height is split so opponent board is not clipped. */
      --board-real-extra-h: clamp(96px, 11svh, 150px);
      --board-card-w: clamp(72px, 5.65vw, 107px);
      --board-card-h: calc(var(--board-card-w) * 1.4);
      --hand-card-w: clamp(50px, 3.55vw, 68px);
      --own-hand-card-w: clamp(98px, 6.25vw, 128px);
      --opponent-hand-h: clamp(36px, 4.5svh, 52px);
      --own-hand-h: clamp(138px, 16.9svh, 178px);
      --zone-title-h: 10px;
      --room-text-scale: 1.25;
      /* Resource Area uses one same-line walkway; JS gives each card a percent slot. */
      --resource-edge-pad: 8%;
    }

    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow-x: hidden; }

    body.gundam-room-zero {
      position: relative;
      isolation: isolate;
      height: 100svh;
      min-height: 620px;
      overflow: hidden;
      color: var(--room-text);
      background:
        radial-gradient(circle at 50% -18%, rgba(65, 158, 255, .28), transparent 32rem),
        radial-gradient(circle at 18% 38%, rgba(0, 240, 255, .14), transparent 28rem),
        radial-gradient(circle at 82% 62%, rgba(169, 92, 255, .16), transparent 30rem),
        linear-gradient(180deg, #01030a 0%, #050817 42%, #010106 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body.gundam-room-zero::before,
    body.gundam-room-zero::after {
      content: "";
      position: fixed;
      inset: -14%;
      pointer-events: none;
      z-index: 0;
      will-change: transform, background-position, opacity;
    }
    body.gundam-room-zero::before {
      background:
        radial-gradient(ellipse at 18% 24%, rgba(51, 133, 255, .42), transparent 0 26rem),
        radial-gradient(ellipse at 86% 18%, rgba(26, 255, 237, .22), transparent 0 20rem),
        radial-gradient(ellipse at 70% 76%, rgba(179, 71, 255, .32), transparent 0 30rem),
        radial-gradient(ellipse at 28% 82%, rgba(255, 74, 160, .20), transparent 0 22rem),
        conic-gradient(from 225deg at 52% 48%, rgba(255,255,255,0), rgba(83,159,255,.13), rgba(255,255,255,0), rgba(167,75,255,.11), rgba(255,255,255,0));
      filter: blur(1.5px) saturate(1.35);
      opacity: 1;
      mix-blend-mode: screen;
      animation: gundamSpaceNebulaZero 44s ease-in-out infinite alternate;
    }
    body.gundam-room-zero::after {
      background:
        radial-gradient(circle, rgba(255,255,255,.98) 0 1px, transparent 1.45px) 0 0 / 118px 118px,
        radial-gradient(circle, rgba(188,218,255,.95) 0 1.15px, transparent 1.55px) 42px 26px / 174px 174px,
        radial-gradient(circle, rgba(255,255,255,.72) 0 .85px, transparent 1.25px) 86px 70px / 92px 92px,
        radial-gradient(circle, rgba(104,174,255,.42) 0 1.8px, transparent 2.35px) 0 0 / 300px 300px,
        linear-gradient(112deg, transparent 0 35%, rgba(120,190,255,.08) 44%, transparent 54% 100%);
      opacity: .95;
      animation: gundamStarDriftZero 60s linear infinite;
    }
    body.gundam-room-zero.space-animate-off::before,
    body.gundam-room-zero.space-animate-off::after {
      animation: none !important;
    }
    body.gundam-room-zero.space-animate-off::after {
      background-position: 0 0, 42px 26px, 86px 70px, 0 0, 0 0;
    }
    @keyframes gundamSpaceNebulaZero {
      0% { transform: translate3d(-2.5%, -1%, 0) scale(1.02) rotate(-1deg); opacity: .84; }
      50% { transform: translate3d(1.5%, 1.2%, 0) scale(1.08) rotate(.6deg); opacity: 1; }
      100% { transform: translate3d(3%, -1.5%, 0) scale(1.05) rotate(1.2deg); opacity: .92; }
    }
    @keyframes gundamStarDriftZero {
      0% { background-position: 0 0, 42px 26px, 86px 70px, 0 0, 0 0; transform: translate3d(0, 0, 0); }
      100% { background-position: 360px 240px, -210px 250px, 180px -120px, 90px 160px, 0 0; transform: translate3d(-1.5%, 1%, 0); }
    }

    button, input, select, textarea { font: inherit; }

    .room-shell-zero {
      position: relative;
      z-index: 1;
      width: min(2400px, calc((100vw - (var(--room-edge-pad) * 2)) / var(--viewport-render-scale)));
      height: calc(100svh / var(--viewport-render-scale));
      margin: 0 0 0 var(--room-edge-pad);
      padding: 1px 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      transform: scale(var(--viewport-render-scale));
      transform-origin: top left;
    }

    .room-topbar-zero {
      min-height: 0;
      height: 0;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 5px 9px;
      border: 1px solid var(--room-line);
      border-radius: 15px;
      background: rgba(7,10,18,.78);
      box-shadow: 0 18px 48px rgba(0,0,0,.26);
      overflow: hidden;
    }

    .room-brand-zero { display: flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
    .room-brand-zero img { height: 28px; width: auto; max-width: 170px; object-fit: contain; }
    .room-title-zero { min-width: 0; flex: 1; }
    .room-title-zero strong, .room-title-zero span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .room-title-zero strong { font-size: 14.77px; line-height: 1.05; letter-spacing: -.02em; }
    .room-title-zero span { color: var(--room-muted); font-size: 11.93px; line-height: 1.05; }
    .room-actions-zero { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }

    .room-btn-zero {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 9px;
      border: 1px solid var(--room-line);
      border-radius: 999px;
      color: var(--room-text);
      background: rgba(255,255,255,.075);
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }
    .room-btn-zero:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); }
    .room-btn-zero.primary { color: #06111f; border-color: rgba(255,255,255,.32); background: linear-gradient(135deg, #b9d4ff, #78ffb2); }
    .room-btn-zero.danger { color: #210408; background: linear-gradient(135deg, #ffc6cb, #ff7b88); }
    .room-btn-zero:disabled,
    .room-btn-zero[disabled] {
      cursor: not-allowed;
      opacity: .52;
      filter: grayscale(.25);
      transform: none !important;
    }
    .room-btn-zero.end-turn-zero {
      color: #fff;
      border-color: rgba(255,255,255,.58);
      background: linear-gradient(135deg, #26100f, #8d1f2d 52%, #ff5c73);
      box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.24);
    }
    .room-btn-zero.end-turn-zero.guarded {
      color: rgba(255,255,255,.78);
      background: rgba(255,255,255,.08);
      border-style: dashed;
      box-shadow: none;
    }

    .room-grid-zero {
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
      gap: 6px;
      align-items: stretch;
      overflow: hidden;
    }

    .table-zero {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: 0 auto auto auto minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      padding-right: 2px;
    }

    .status-zero {
      min-height: 0;
      height: var(--status-h);
      display: grid;
      grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
      align-items: center;
      justify-content: stretch;
      gap: 6px;
      padding: 3px 6px;
      border: 1px solid var(--room-line);
      border-radius: 14px;
      background: var(--room-panel);
      overflow: hidden;
    }

    .phase-row-zero, .control-row-zero { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
    .phase-row-zero { grid-column: 2; justify-content: center; }
    .control-row-zero { grid-column: 3; justify-content: flex-end; }
    .settings-gear-zero {
      width: 32px;
      min-width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 999px;
      font-size: 20px;
      line-height: 1;
    }
    .pill-zero {
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border: 1px solid var(--room-line);
      border-radius: 999px;
      color: var(--room-muted);
      background: rgba(255,255,255,.055);
      font-size: 10.23px;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .pill-zero.active { color: #06111f; border-color: rgba(255,255,255,.35); background: linear-gradient(135deg, #b9d4ff, #7cffb5); }
    .pill-zero.warn { color: #1a1203; background: #ffd76b; }

    .target-banner-zero, .battle-banner-zero, .toast-zero { display: none; }
    .target-banner-zero.show, .battle-banner-zero.show, .toast-zero.show {
      min-height: 28px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px;
      border: 1px solid var(--room-line);
      border-radius: 13px;
      background: rgba(9,13,23,.94);
      color: var(--room-text);
      overflow: hidden;
    }
    .target-banner-zero strong, .battle-banner-zero strong, .toast-zero strong { font-size: 12.5px; white-space: nowrap; }
    .target-banner-zero span, .battle-banner-zero span, .toast-zero span { font-size: 12.5px; color: var(--room-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    #boardZero {
      min-height: 0;
      /* v26: this is the real fix. The board DOM box is taller than before,
         so each player's playmat receives more actual layout height.
         Earlier versions only made the shield child ask for more height inside
         the same small parent box. */
      height: calc(100% + var(--board-real-extra-h));
      /* v27: v26 pushed the oversized board too far upward, so P2 got clipped.
         Keep the extra real height, but shift less upward and give top seat more row share. */
      margin-top: calc(var(--board-real-extra-h) * -0.18);
      width: var(--play-frame-w);
      max-width: 100%;
      justify-self: center;
      display: grid;
      /* v28: opponent board was getting too much of the real board height;
         give that space back to the P1 seat/hand while keeping P2 visible. */
      grid-template-rows: minmax(0, 1.04fr) minmax(0, 1.20fr);
      gap: 2px;
      overflow: hidden;
      /* Single real-table camera: both playmats and both hands are on one shared plane. */
      transform-origin: 50% 100%;
      transform-style: preserve-3d;
      transform: translateX(var(--board-visual-shift-x)) translateY(var(--table-lift)) perspective(var(--table-perspective)) rotateX(var(--table-tilt)) scale(var(--table-camera-scale));
      will-change: transform;
      backface-visibility: hidden;
    }

    .seat-zero {
      min-width: 0;
      min-height: 0;
      display: grid;
      gap: 1px;
      padding: 0;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(9,13,24,.92), rgba(5,8,14,.96));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.22);
      overflow: hidden;
    }
    .seat-zero.opponent { grid-template-rows: var(--opponent-hand-h) minmax(0, 1fr) 16px; }
    .seat-zero.own { grid-template-rows: 16px minmax(0, 1fr) var(--own-hand-h); }
    /* P2 is the far side in the shared perspective. Give its playmat more actual row height. */
    .seat-zero.opponent .playmat-scroll-zero { min-height: calc(var(--board-card-h) * 2.22); }
    .seat-zero.own .playmat-scroll-zero { min-height: calc(var(--board-card-h) * 2.25); }
    .seat-zero.active-player { border-color: rgba(124,255,181,.45); box-shadow: 0 0 0 1px rgba(124,255,181,.18), 0 12px 32px rgba(0,0,0,.22); }

    .seat-head-zero {
      height: auto;
      min-height: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 2px 5px;
      border-radius: 6px;
      background: rgba(255,255,255,.055);
      overflow: hidden;
    }
    .seat-name-zero { min-width: 0; display: flex; align-items: baseline; gap: 5px; overflow: hidden; }
    .seat-name-zero strong { font-size: 9.09px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .seat-name-zero span { color: var(--room-muted); font-size: 7.95px; line-height: 1; white-space: nowrap; }
    .seat-counts-zero { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; overflow: hidden; }
    .seat-counts-zero span { padding: 1px 3px; border-radius: 999px; color: var(--room-muted); background: rgba(255,255,255,.08); font-size: 7.95px; font-weight: 850; white-space: nowrap; }

    .hand-zone-zero {
      min-height: 0;
      position: relative;
      display: flex;
      align-items: stretch;
      padding: 0 2px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px;
      background: rgba(255,255,255,.035);
      overflow: visible;
    }
    .hand-title-zero {
      position: absolute;
      left: 6px;
      right: 6px;
      top: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      color: #b8c8ea;
      font-size: 7.39px;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .06em;
      pointer-events: none;
      opacity: .78;
    }
    .hand-row-zero {
      min-height: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 2px;
      overflow: visible;
    }
    .seat-zero.opponent .hand-row-zero { align-items: center; }
    .seat-zero.own .hand-row-zero { align-items: center; }
    .seat-zero.opponent .hand-zone-zero { z-index: 24; }
    .hand-row-zero .hand-card-zero { flex-shrink: 1; min-width: 36px; }
    .seat-zero.own .hand-card-zero { flex-basis: var(--own-hand-card-w); width: var(--own-hand-card-w); min-width: 54px; }
    .hand-card-zero .card-art-zero img { object-fit: contain; background: #0b1020; }

    .playmat-scroll-zero { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
    .playmat-zero {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      display: grid;
      gap: 2px;
      padding: 2px;
      border: 1px solid rgba(0,0,0,.52);
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(180deg, rgba(0,0,0,.03) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(180deg, var(--mat-paper), var(--mat-paper-2));
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.62), inset 0 0 0 4px rgba(0,0,0,.18);
      overflow: hidden;
      /* No separate per-board perspective; the whole #boardZero is the one shared table plane. */
      transform: none !important;
      perspective: none !important;
    }
    .playmat-zero.own-mat-zero {
      /* v60: side zones stay close to previous size; the extra board width goes to Battle/Resource. */
      grid-template-columns:
        minmax(calc(var(--board-card-h) + 18px), calc(var(--board-card-h) + 34px))
        minmax(84px, 106px)
        minmax(0, 1fr)
        minmax(90px, 116px);
      /* Battle is about 10% taller; resource row gives that space back. */
      grid-template-rows: minmax(0, .55fr) minmax(0, .45fr);
      grid-template-areas:
        "shield battle battle piles"
        "shield resdeck resource piles";
    }
    .playmat-zero.opponent-mat-zero {
      /* Opponent board is mirrored. Side zones stay fixed, center lanes absorb the new width. */
      grid-template-columns:
        minmax(90px, 116px)
        minmax(0, 1fr)
        minmax(84px, 106px)
        minmax(calc(var(--board-card-h) + 18px), calc(var(--board-card-h) + 34px));
      /* v29: opponent battle row should match the deck/trash pile slot height. */
      grid-template-rows: minmax(0, .50fr) minmax(0, .50fr);
      grid-template-areas:
        "piles resource resdeck shield"
        "piles battle battle shield";
    }

    .layout-test-watermark-zero {
      position: absolute;
      left: 50%; top: 50%; transform: translate(-50%, -50%);
      z-index: 1;
      pointer-events: none;
      padding: 5px 10px;
      border: 1px solid rgba(0,0,0,.16);
      border-radius: 999px;
      color: rgba(0,0,0,.28);
      background: rgba(255,255,255,.45);
      font-size: 11.36px;
      font-weight: 950;
      letter-spacing: .06em;
      white-space: nowrap;
    }

    .shield-area-zero { grid-area: shield; }
    .shield-area-zero > .zone-title-zero { display: none !important; }
    .battle-area-zero { grid-area: battle; }
    .resource-deck-area-zero { grid-area: resdeck; }
    .resource-area-zero { grid-area: resource; }
    .piles-zero { grid-area: piles; }

    .zone-zero, .pile-zone-zero {
      min-width: 0;
      min-height: 0;
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 0;
      padding: 2px;
      border: 1.5px solid var(--mat-line);
      border-radius: 12px;
      color: var(--mat-ink);
      background: rgba(255,255,255,.72);
      overflow: hidden;
    }
    .zone-title-zero, .pile-title-zero, .sub-label-zero {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 2px;
      z-index: 12;
      min-height: 0;
      height: var(--zone-title-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
      color: #111;
      font-size: 7.95px;
      font-weight: 950;
      line-height: .95;
      text-transform: uppercase;
      letter-spacing: .015em;
      overflow: hidden;
      pointer-events: none;
    }
    .zone-title-zero span, .pile-title-zero, .sub-label-zero { overflow: hidden; text-overflow: ellipsis; }
    .zone-title-zero span:last-child { flex: 0 0 auto; min-width: 15px; text-align: right; }
    .resource-deck-area-zero .zone-title-zero {
      left: 3px;
      right: 3px;
      top: 2px;
      height: 12px;
      font-size: 7.05px;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .resource-deck-area-zero .zone-title-zero span:first-child { white-space: nowrap; }

    /* Resource title and counters must not sit on top of each other.
       P1: label on left, counters on right. P2: label on right, counters on left. */
    .resource-area-zero > .zone-title-zero {
      left: 5px;
      right: auto;
      top: 2px;
      width: 64px;
      justify-content: flex-start;
      gap: 2px;
      font-size: 8.75px;
      z-index: 16;
    }
    .resource-area-zero > .zone-title-zero span:first-child { white-space: nowrap; }
    .resource-area-zero > .zone-title-zero span:last-child { min-width: 12px; text-align: left; }
    .seat-zero.opponent .resource-area-zero > .zone-title-zero {
      left: auto;
      right: 5px;
      justify-content: flex-end;
    }
    .seat-zero.opponent .resource-area-zero > .zone-title-zero span:last-child { text-align: right; }

    .resource-counts-zero {
      position: absolute;
      left: 76px;
      right: 6px;
      top: 2px;
      z-index: 18;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      pointer-events: none;
      overflow: visible;
    }
    .seat-zero.opponent .resource-counts-zero {
      left: 6px;
      right: 76px;
      justify-content: flex-start;
    }
    .resource-count-pill-zero {
      min-width: 42px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 7px;
      border: 1px solid rgba(0,0,0,.28);
      border-radius: 999px;
      color: #111;
      background: rgba(255,255,255,.72);
      box-shadow: 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(0,0,0,.14);
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .01em;
      white-space: nowrap;
    }
    .resource-count-pill-zero.active { background: rgba(122,255,181,.78); }
    .resource-count-pill-zero.rested { background: rgba(196,207,225,.82); }
    .resource-count-pill-zero.ex { background: rgba(255,220,93,.86); }

    .card-row-zero, .base-row-zero, .resource-row-zero {
      min-width: 0;
      min-height: calc(var(--board-card-h) + 10px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      gap: 5px;
      flex-wrap: wrap;
      padding: 2px;
      overflow: visible;
    }
    .battle-row-zero {
      min-width:0;
      min-height: calc(var(--board-card-h) + 10px);
      height:100%;
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      align-items:center;
      justify-items:center;
      gap:4px;
      padding:2px;
      overflow:visible;
    }
    .battle-row-zero .card-zero{
      width:min(100%,var(--board-card-w));
      margin:0 !important;
    }
    .battle-row-zero {
      flex-wrap: nowrap;
      gap: clamp(1px, .20vw, 4px);
      padding-inline: clamp(1px, .20vw, 4px);
    }
    .resource-row-zero { justify-content: center; align-items: center; padding-block: 4px; }

    /* Resource Area: one compact overlap line.
       EX resources come first, then a small visual gap, then the normal resource line.
       Normal resources still sort paid/rested first, then active:
       EX,EX,EX  gap  R,R,R,A,A,A
       IMPORTANT: the whole line starts next to the Resource Deck, not in the middle. */
    .resource-area-zero .resource-row-zero {
      --res-count: 1;
      --res-step: calc(var(--board-card-w) * .34); /* about 66% overlap / 34% visible */
      --res-start-x: calc((var(--board-card-h) - var(--board-card-w)) / 2 + 12px);
      --res-group-gap: calc(var(--board-card-w) * .20);
      position: relative;
      display: block;
      min-height: calc(var(--board-card-h) * 1.35);
      height: 100%;
      padding: 2px calc((var(--board-card-h) - var(--board-card-w)) / 2 + 4px);
      overflow: visible;
    }
    .resource-area-zero .resource-row-zero .empty-zone-zero {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .resource-line-zero {
      --line-count: 1;
      --line-top: 52%;
      position: absolute;
      left: 0;
      right: 0;
      top: var(--line-top);
      height: 0;
      overflow: visible;
      pointer-events: none;
    }
    .resource-line-label-zero { display: none !important; }
    .resource-area-zero .resource-stack-slot-zero {
      position: absolute;
      top: 0;
      left: calc(var(--res-start-x) + var(--res-extra-offset, 0px) + (var(--res-index, 0) * var(--res-step)) + (var(--board-card-w) / 2));
      width: var(--board-card-w);
      height: var(--board-card-h);
      transform: translate(-50%, -50%);
      transform-origin: center center;
      z-index: calc(10 + var(--res-z, 0));
      pointer-events: none;
    }
    .seat-zero.opponent .resource-area-zero .resource-stack-slot-zero {
      left: auto;
      right: calc(var(--res-start-x) + var(--res-extra-offset, 0px) + (var(--res-index, 0) * var(--res-step)) + (var(--board-card-w) / 2));
      transform: translate(50%, -50%);
    }
    .resource-area-zero .resource-card-zero {
      position: absolute;
      inset: 0;
      width: var(--board-card-w);
      flex-basis: var(--board-card-w);
      margin: 0 !important;
      transform-origin: center center;
      transform: none;
      z-index: 1;
      pointer-events: auto;
    }
    .resource-area-zero .resource-card-zero:hover { transform: translateY(-1px) scale(1.025); }
    .resource-area-zero .resource-card-zero.rested { transform: rotate(90deg); }
    .resource-area-zero .resource-card-zero.ex-resource-zero {
      box-shadow: 0 0 0 2px rgba(255,216,105,.95), 0 5px 16px rgba(255,216,105,.20), 0 5px 13px rgba(0,0,0,.25);
    }
    .resource-area-zero .resource-card-zero.ex-resource-zero::after {
      content: 'EX';
      position: absolute;
      right: 3px;
      top: 3px;
      z-index: 8;
      min-width: 18px;
      height: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 999px;
      color: #201300;
      background: linear-gradient(135deg, #ffe98e, #ffb92e);
      font-size: 9.09px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .02em;
      pointer-events: none;
    }
    .resource-area-zero .resource-card-zero.rested:hover { transform: rotate(90deg) translateY(-1px) scale(1.025); }
    .seat-zero.opponent .resource-area-zero .resource-card-zero { transform: rotate(180deg); }
    .seat-zero.opponent .resource-area-zero .resource-card-zero:hover { transform: rotate(180deg) translateY(-1px) scale(1.025); }
    .seat-zero.opponent .resource-area-zero .resource-card-zero.rested { transform: rotate(270deg); }
    .seat-zero.opponent .resource-area-zero .resource-card-zero.rested:hover { transform: rotate(270deg) translateY(-1px) scale(1.025); }

    /* Battle Area single Unit stat wrapper. Same card dimension; stat bar remains horizontal. */
    .battle-single-unit-zero {
      --single-stat-h: 20px;
      flex: 0 0 var(--board-card-w);
      width: var(--board-card-w);
      height: calc(var(--board-card-h) + var(--single-stat-h) + 3px);
      min-width: var(--board-card-w);
      min-height: calc(var(--board-card-h) + var(--single-stat-h) + 3px);
      position: relative;
      display: block;
      overflow: visible;
      z-index: 5;
    }
    .battle-single-unit-zero.rested {
      flex-basis: var(--board-card-h);
      width: var(--board-card-h);
      height: calc(var(--board-card-w) + var(--single-stat-h) + 3px);
      min-width: var(--board-card-h);
      min-height: calc(var(--board-card-w) + var(--single-stat-h) + 3px);
    }
    .battle-single-stage-zero {
      position: absolute;
      left: 50%;
      top: calc((100% - var(--single-stat-h)) / 2);
      width: var(--board-card-w);
      height: var(--board-card-h);
      transform: translate(-50%, -50%);
      transform-origin: center center;
      z-index: 2;
    }
    .battle-single-unit-zero.rested .battle-single-stage-zero {
      top: calc((100% - var(--single-stat-h)) / 2);
      width: var(--board-card-w);
      height: var(--board-card-h);
    }
    .battle-single-stage-zero .card-zero {
      position: absolute;
      inset: 0;
      margin: 0 !important;
      width: var(--board-card-w);
      height: var(--board-card-h);
      flex-basis: var(--board-card-w);
    }
    .battle-unit-stat-zero {
      position: absolute;
      left: 50%;
      bottom: 0;
      z-index: 20;
      width: var(--board-card-w);
      min-width: var(--board-card-w);
      max-width: var(--board-card-w);
      min-height: var(--single-stat-h);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      border: 1px solid rgba(255,255,255,.48);
      border-radius: 999px;
      color: #071019;
      background: rgba(238,246,255,.92);
      box-shadow: 0 4px 12px rgba(0,0,0,.22);
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
      transform: translateX(-50%);
      pointer-events: none;
    }
    .battle-single-unit-zero.targetable-zero .battle-single-stage-zero { outline: 3px solid rgba(119,242,180,.95); outline-offset: 3px; border-radius: 8px; }

    /* Battle Area linked Unit + Pilot stack. The wrapper reserves the real table space.
       The inner stage rotates as one object so Unit and Pilot rest/active together.
       The AP/HP stat bar stays outside the rotating stage, so humans can always read it horizontally. */
    .linked-unit-zero {
      --pilot-peek: calc(var(--board-card-h) * .25);
      --link-stat-h: 20px;
      --linked-active-w: var(--board-card-w);
      --linked-stage-h: calc(var(--board-card-h) + var(--pilot-peek));
      --linked-active-h: calc(var(--linked-stage-h) + var(--link-stat-h) + 3px);
      --linked-rested-w: var(--linked-stage-h);
      --linked-rested-h: calc(var(--board-card-w) + var(--link-stat-h) + 3px);
      position: relative;
      flex: 0 0 var(--linked-active-w);
      width: var(--linked-active-w);
      height: var(--linked-active-h);
      min-width: var(--linked-active-w);
      min-height: var(--linked-active-h);
      cursor: pointer;
      overflow: visible;
      z-index: 3;
    }
    .linked-unit-zero.rested {
      flex-basis: var(--linked-rested-w);
      width: var(--linked-rested-w);
      height: var(--linked-rested-h);
      min-width: var(--linked-rested-w);
      min-height: var(--linked-rested-h);
    }
    .linked-unit-stage-zero {
      position: absolute;
      left: 50%;
      top: calc((var(--linked-active-h) - var(--link-stat-h)) / 2);
      width: var(--linked-active-w);
      height: var(--linked-stage-h);
      transform: translate(-50%, -50%);
      transform-origin: center center;
      transition: transform .12s ease, filter .12s ease;
    }
    .linked-unit-zero.rested .linked-unit-stage-zero { top: calc((var(--linked-rested-h) - var(--link-stat-h)) / 2); }
    .linked-unit-zero:hover .linked-unit-stage-zero { transform: translate(-50%, -50%) translateY(-1px) scale(1.025); filter: drop-shadow(0 12px 20px rgba(0,0,0,.30)); }
    .linked-unit-zero.rested .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(90deg); }
    .linked-unit-zero.rested:hover .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(90deg) translateY(-1px) scale(1.025); }
    .seat-zero.opponent .linked-unit-zero:not(.rested) .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(180deg); }
    .seat-zero.opponent .linked-unit-zero:not(.rested):hover .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(180deg) translateY(1px) scale(1.025); }
    .seat-zero.opponent .linked-unit-zero.rested .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(270deg); }
    .seat-zero.opponent .linked-unit-zero.rested:hover .linked-unit-stage-zero { transform: translate(-50%, -50%) rotate(270deg) translateY(1px) scale(1.025); }
    .linked-card-face-zero {
      position: absolute;
      width: var(--board-card-w);
      height: var(--board-card-h);
      aspect-ratio: 5 / 7;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,.45);
      background: #142033;
      overflow: hidden;
      box-shadow: 0 5px 13px rgba(0,0,0,.25);
    }
    .linked-pilot-face-zero {
      left: 0;
      top: var(--pilot-peek);
      z-index: 1;
      opacity: .98;
      box-shadow: 0 0 0 2px rgba(255,216,105,.40), 0 5px 13px rgba(0,0,0,.25);
    }
    .linked-unit-face-zero {
      left: 0;
      top: 0;
      z-index: 2;
    }
    .linked-pilot-stat-strip-zero { display: none !important; }
    .linked-unit-total-stat-zero {
      position: absolute;
      left: 50%;
      bottom: 0;
      z-index: 20;
      width: var(--board-card-w);
      min-width: var(--board-card-w);
      max-width: var(--board-card-w);
      min-height: var(--single-stat-h);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      border: 1px solid rgba(255,255,255,.48);
      border-radius: 999px;
      color: #071019;
      background: rgba(238,246,255,.92);
      box-shadow: 0 4px 12px rgba(0,0,0,.22);
      font-size: 10.5px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      transform: translateX(-50%);
      text-shadow: none;
    }
    .linked-unit-zero.rested .linked-unit-total-stat-zero {
      width: var(--board-card-w);
      min-width: var(--board-card-w);
      max-width: var(--board-card-w);
    }
    .linked-unit-zero.targetable-zero .linked-unit-stage-zero { outline: 3px solid rgba(119,242,180,.95); outline-offset: 3px; border-radius: 8px; }
    .linked-unit-badge-zero {
      position: absolute;
      right: -5px;
      top: -5px;
      z-index: 6;
      min-width: 22px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 999px;
      color: #101500;
      background: linear-gradient(135deg, #f7ff8c, #76ffbd);
      border: 1px solid rgba(255,255,255,.75);
      font-size: 9px;
      font-weight: 950;
      pointer-events: none;
      box-shadow: 0 4px 10px rgba(0,0,0,.22);
    }
    .linked-unit-badge-zero.pair-state-zero {
      color: #07101d;
      background: linear-gradient(135deg, #e6ecff, #9fb0ce);
      box-shadow: 0 4px 10px rgba(0,0,0,.22);
    }
    .linked-unit-badge-zero.link-state-zero {
      color: #101500;
      background: linear-gradient(135deg, #f7ff8c, #76ffbd);
      box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(118,255,189,.24);
    }

    .card-zero {
      flex: 0 0 var(--board-card-w);
      width: var(--board-card-w);
      height: var(--board-card-h);
      aspect-ratio: 5 / 7;
      position: relative;
      display: block;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,.45);
      background: #142033;
      color: white;
      overflow: hidden;
      box-shadow: 0 5px 13px rgba(0,0,0,.25);
      cursor: pointer;
      transform-origin: center center;
      transition: transform .12s ease, box-shadow .12s ease;
      z-index: 2;
    }
    .card-zero:hover { transform: translateY(-1px) scale(1.025); z-index: 30; box-shadow: 0 12px 28px rgba(0,0,0,.35); }
    .card-zero.rested { transform: rotate(90deg); margin-left: calc(var(--board-card-w) * .22); margin-right: calc(var(--board-card-w) * .22); }
    .card-zero.rested:hover { transform: rotate(90deg) translateY(-1px) scale(1.025); }
    /* Opponent side sits across the table: cards face the opposite player, not the same direction as P1. */
    .seat-zero.opponent .card-zero:not(.rested) { transform: rotate(180deg); }
    .seat-zero.opponent .card-zero:not(.rested):hover { transform: rotate(180deg) translateY(1px) scale(1.025); }
    .seat-zero.opponent .card-zero.rested { transform: rotate(270deg); }
    .seat-zero.opponent .card-zero.rested:hover { transform: rotate(270deg) translateY(1px) scale(1.025); }
    .hand-card-zero { flex-basis: var(--hand-card-w); width: var(--hand-card-w); }
    .hand-card-zero { height: calc(var(--hand-card-w) * 1.4); }
    .seat-zero.own .hand-card-zero { height: calc(var(--own-hand-card-w) * 1.4); }
    .small-card-zero { flex-basis: var(--board-card-w); width: var(--board-card-w); }
    .card-zero.targetable-zero { outline: 3px solid rgba(119,242,180,.95); outline-offset: 2px; }

    .card-art-zero, .card-back-zero {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }
    .card-art-zero img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; image-rendering: auto; }
    .card-img-fullres-zero, .shield-real-card-zero img, .detail-card-zero img { image-rendering: auto; backface-visibility: hidden; transform: translateZ(0); }
    .card-art-zero .fallback-zero {
      position: absolute;
      left: 4px; right: 4px; bottom: 4px;
      padding: 2px 3px;
      border-radius: 4px;
      color: white;
      background: rgba(0,0,0,.55);
      font-size: 7.95px;
      font-weight: 900;
      line-height: 1.05;
      pointer-events: none;
    }
    .card-art-zero img + .fallback-zero { display: none; }
    .card-back-zero, .shield-back-zero {
      color: #f1f6ff;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 12px),
        linear-gradient(135deg, #162b45, #0c1728);
      font-size: 10.23px;
      font-weight: 950;
      letter-spacing: .05em;
    }
    .card-caption-zero { display: none; }

    .shield-layout-zero {
      min-height: 0;
      height: 100%;
      display: grid;
      /* v29: P1 shield -5%, base +5%. Base gets real row height, not just padding. */
      grid-template-rows: calc(var(--board-card-h) + (var(--board-card-w) * .11)) minmax(calc(var(--board-card-w) * 2.07), 1fr);
      gap: 2px;
      overflow: hidden;
    }
    .playmat-zero.opponent-mat-zero .shield-layout-zero {
      /* v29: P2 shield -10%, base +10%. */
      grid-template-rows: minmax(calc(var(--board-card-w) * 1.96), 1fr) calc(var(--board-card-h) + (var(--board-card-w) * .22));
    }
    .base-box-zero, .shield-box-zero {
      min-height: 0;
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      gap: 0;
      padding: 1px;
      border: 1px solid rgba(0,0,0,.34);
      border-radius: 8px;
      background: rgba(255,255,255,.55);
      overflow: hidden;
    }
    .base-box-zero .sub-label-zero, .shield-box-zero .sub-label-zero {
      left: 4px;
      right: auto;
      top: 2px;
      max-width: calc(100% - 10px);
      padding: 0 2px;
      border-radius: 5px;
      background: rgba(255,255,255,.54);
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
    }
    .base-row-zero { padding: 2px 0 0; min-height: var(--board-card-h); align-items: center; }
    .base-row-zero .card-zero { flex-basis: var(--board-card-w); width: var(--board-card-w); }
    .shield-slots-zero {
      min-height: 0;
      height: 100%;
      position: relative;
      display: block;
      padding: 0;
      overflow: hidden;
      /* Same size as every board card, only rotated. Do not shrink to the shield box width. */
      --shield-landscape-w: var(--board-card-h);
      --shield-landscape-h: var(--board-card-w);
      --shield-stack-step: calc(var(--shield-landscape-h) * .24);
    }
    .shield-line-zero {
      min-height: 0;
      position: absolute;
      left: 50%;
      width: var(--shield-landscape-w);
      height: var(--shield-landscape-h);
      display: block;
      overflow: visible;
      cursor: pointer;
      transform: translateX(-50%);
      z-index: var(--shield-z, 1);
    }
    /* Opponent shield #1 starts nearest to opponent/top. */
    .playmat-zero.opponent-mat-zero .shield-line-zero { top: calc(var(--shield-offset, 0) * var(--shield-stack-step)); bottom: auto; }
    /* P1 shield #1 starts nearest to P1/bottom, so it must be anchored from the bottom. */
    .playmat-zero.own-mat-zero .shield-line-zero { top: auto; bottom: calc(var(--shield-offset, 0) * var(--shield-stack-step)); }
    .shield-num-zero {
      position: absolute;
      left: 1px;
      top: 1px;
      z-index: 4;
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,0,0,.68);
      font-size: 7.95px;
      font-weight: 950;
      pointer-events: none;
    }
    .shield-card-landscape-zero {
      width: 100%;
      height: 100%;
      position: relative;
      border: 0;
      border-radius: 8px;
      background: transparent;
      overflow: visible;
    }
    .shield-real-card-zero, .shield-back-zero {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--board-card-w);
      height: var(--board-card-h);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(0,0,0,.52);
      border-radius: 7px;
      box-shadow: 0 3px 8px rgba(0,0,0,.24);
      transform: translate(-50%, -50%) rotate(90deg);
      transform-origin: center center;
      background: #142033;
    }
    .shield-real-card-zero img {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center center;
      display: block;
      background: #142033;
      transform: none;
    }
    .playmat-zero.opponent-mat-zero .shield-real-card-zero,
    .playmat-zero.opponent-mat-zero .shield-back-zero {
      transform: translate(-50%, -50%) rotate(-90deg);
    }
    .shield-back-zero { color: #f1f6ff; }
    .shield-label-zero { display: none !important; }
    .empty-shield-line-zero .shield-card-landscape-zero { border-style: dashed; background: rgba(255,255,255,.5); }

    .no-shields-zero {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
      max-width: 94%;
      padding: 4px 7px;
      border: 1px dashed rgba(0,0,0,.20);
      background: rgba(255,255,255,.34);
      color: rgba(15,23,42,.62);
      font-size: 10px;
      font-weight: 850;
      text-align: center;
      pointer-events: none;
    }

    .piles-zero {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 3px;
      overflow: hidden;
    }
    .pile-zone-zero { grid-template-rows: minmax(0, 1fr); }
    .pile-title-zero { white-space: nowrap; }
    .pile-body-zero { min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .pile-body-zero .card-zero { width: var(--board-card-w); flex-basis: var(--board-card-w); }
    .pile-count-zero {
      position: absolute;
      right: 2px; bottom: 2px;
      min-width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: white;
      background: rgba(0,0,0,.78);
      font-size: 11.36px;
      font-weight: 950;
      pointer-events: none;
    }

    .empty-zone-zero, .detail-empty-zero {
      color: rgba(0,0,0,.56);
      font-size: 11.36px;
      font-weight: 800;
      text-align: center;
      align-self: center;
      justify-self: center;
    }

    .sidebar-zero {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) minmax(145px, .36fr);
      gap: 4px;
      overflow: hidden;
    }
    .side-panel-zero {
      min-height: 0;
      display: grid;
      grid-template-rows: 28px minmax(0, 1fr);
      gap: 4px;
      padding: 5px;
      border: 1px solid var(--room-line);
      border-radius: 16px;
      background: rgba(8,11,21,.9);
      overflow: hidden;
    }
    .side-panel-zero h2 { margin: 0; color: #c5d6f8; font-size: 13.64px; line-height: 1.2; text-transform: uppercase; letter-spacing: .05em; }
    .detail-zero, .log-zero { min-height: 0; overflow: auto; scrollbar-width: thin; }
    .detail-card-zero img { width: 100%; max-height: 43svh; object-fit: contain; border-radius: 10px; background: #101827; }
    .detail-card-zero h3 { margin: 7px 0 2px; font-size: 17.05px; line-height: 1.15; }
    .detail-code-zero { color: var(--room-muted); font-size: 12.5px; font-weight: 800; }
    .detail-stats-zero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 7px 0; }
    .detail-stats-zero span { padding: 5px; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--room-muted); font-size: 11.36px; text-align: center; }
    .detail-stats-zero b { display: block; color: white; font-size: 13.64px; }
    .detail-textbox-zero { margin-top: 7px; padding: 7px; border-radius: 12px; background: rgba(255,255,255,.06); }
    .detail-textbox-zero b { font-size: 12.5px; color: #cfe0ff; }
    .detail-textbox-zero p { margin: 4px 0 0; color: #d8e0ef; font-size: 12.5px; line-height: 1.35; white-space: pre-wrap; }
    .detail-empty-zero { color: var(--room-muted); }

    .log-zero { display: grid; align-content: start; gap: 5px; }
    .log-row-zero { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 6px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.055); color: #dfe7f7; font-size: 12.5px; line-height: 1.25; }
    .log-row-zero b { color: #aebdd8; font-size: 11.36px; }

    .menu-zero {
      position: fixed;
      left: 8px;
      top: 50%;
      z-index: 2400;
      width: 148px;
      min-width: 0;
      max-height: min(78svh, 620px);
      padding: 7px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 0 16px 16px 0;
      background: linear-gradient(180deg, rgba(5,8,15,.96), rgba(10,16,31,.94));
      box-shadow: 0 18px 52px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
      transform: translateY(-50%);
      transition: transform .18s ease, opacity .18s ease;
      backdrop-filter: blur(14px);
    }
    .menu-zero.collapsed {
      transform: translate(calc(-100% + 29px), -50%);
      opacity: .82;
    }
    .action-drawer-toggle-zero {
      position: absolute;
      top: 50%;
      right: -16px;
      width: 24px !important;
      height: 48px;
      margin: 0 !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.18) !important;
      border-left: 0 !important;
      border-radius: 0 999px 999px 0 !important;
      color: #fff !important;
      background: rgba(8,13,25,.96) !important;
      font-size: 18px !important;
      font-weight: 950 !important;
      line-height: 1;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .menu-zero:not(.collapsed) .action-drawer-toggle-zero { transform: translateY(-50%) rotate(180deg); }
    .action-drawer-body-zero { display: grid; gap: 7px; min-width: 0; }
    .menu-zero.collapsed .action-drawer-body-zero { visibility: hidden; pointer-events: none; }
    .action-drawer-title-zero {
      color: #cfe0ff;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .08em;
      opacity: .9;
    }
    .action-drawer-card-zero {
      min-width: 0;
      padding: 6px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 10px;
      color: #eaf1ff;
      background: rgba(255,255,255,.055);
      font-size: 10px;
      font-weight: 850;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .action-drawer-buttons-zero { display: grid; gap: 5px; min-width: 0; }
    .menu-zero button[data-menu-action] {
      width: 100%;
      display: block;
      margin: 0;
      padding: 7px 7px;
      border: 0;
      border-radius: 10px;
      color: white;
      background: rgba(255,255,255,.085);
      text-align: left;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.05;
      cursor: pointer;
    }
    .menu-zero button[data-menu-action]:hover { background: rgba(119,173,255,.24); }
    .menu-zero button[data-menu-action="move_to_trash"],
    .menu-zero button[data-menu-action="move_to_trash_test"] { background: rgba(255,123,136,.14); color: #ffd9dd; }
    .panel-danger-zero { padding: 18px; border: 1px solid rgba(255,123,136,.35); border-radius: 18px; background: rgba(255,123,136,.10); }



    .openable-pile-zero { cursor: pointer; }
    .openable-pile-zero:hover {
      border-color: rgba(119,173,255,.8);
      box-shadow: inset 0 0 0 1px rgba(119,173,255,.25), 0 0 18px rgba(119,173,255,.20);
    }

    .zone-modal-backdrop-zero {
      position: fixed;
      inset: 0;
      z-index: 5200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,.66);
      backdrop-filter: blur(14px);
    }
    .zone-modal-backdrop-zero.show { display: flex; }
    .zone-modal-zero {
      width: min(1120px, calc(100vw - 34px));
      height: min(760px, calc(100svh - 34px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(13,18,32,.98), rgba(5,8,16,.98));
      box-shadow: 0 34px 110px rgba(0,0,0,.62);
      overflow: hidden;
    }
    .zone-modal-head-zero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .zone-modal-head-zero h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
    .zone-modal-head-zero p { margin: 4px 0 0; color: var(--room-muted); font-size: 13px; }
    .zone-modal-grid-zero {
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(calc(var(--own-hand-card-w) + 22px), 1fr));
      align-content: start;
      gap: 14px;
      padding: 8px;
      overflow: auto;
      scrollbar-width: thin;
    }
    .zone-modal-card-wrap-zero {
      min-height: calc(var(--own-hand-card-w) * 1.4 + 14px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.045);
      overflow: visible;
    }
    .zone-modal-card-wrap-zero .card-zero {
      width: var(--own-hand-card-w);
      flex-basis: var(--own-hand-card-w);
    }
    .zone-modal-empty-zero { grid-column: 1 / -1; min-height: 140px; }


    .settings-backdrop-zero {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(12px);
    }
    .settings-backdrop-zero.show { display: flex; }
    .settings-modal-zero {
      width: min(480px, calc(100vw - 28px));
      max-height: calc(100svh - 36px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(15,20,35,.98), rgba(6,9,18,.98));
      box-shadow: 0 30px 100px rgba(0,0,0,.58);
      overflow: hidden;
    }
    .settings-head-zero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .settings-head-zero h2 { margin: 0; font-size: 20.45px; letter-spacing: -.03em; }
    .settings-head-zero p { margin: 3px 0 0; color: var(--room-muted); font-size: 13.64px; }
    .settings-close-zero {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      color: white;
      background: rgba(255,255,255,.08);
      cursor: pointer;
      font-size: 22.73px;
      line-height: 1;
    }
    .settings-body-zero { min-height: 0; overflow: auto; scrollbar-width: thin; }
    .settings-grid-zero {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .settings-grid-zero .room-btn-zero {
      min-height: 42px;
      width: 100%;
      border-radius: 14px;
      font-size: 13.64px;
    }
    .settings-grid-zero .wide-zero { grid-column: 1 / -1; }


    /* v50: text readability pass, roughly +10% on room labels/buttons/detail/log. */
    .room-btn-zero { font-size: 13.75px; }
    .settings-gear-zero { font-size: 22px; }
    .pill-zero { font-size: 11.25px; }
    .target-banner-zero strong, .battle-banner-zero strong, .toast-zero strong { font-size: 13.75px; }
    .target-banner-zero span, .battle-banner-zero span, .toast-zero span { font-size: 13.75px; }
    .seat-name-zero strong { font-size: 10px; }
    .seat-name-zero span { font-size: 8.75px; }
    .seat-counts-zero span { font-size: 8.75px; }
    .hand-title-zero { font-size: 8.18px; }
    .zone-title-zero, .pile-title-zero, .sub-label-zero { font-size: 8.75px; }
    .resource-deck-area-zero .zone-title-zero { font-size: 7.84px; height: 13px; }
    .empty-zone-zero, .detail-empty-zero { font-size: 12.5px; }
    .shield-num-zero { font-size: 8.75px; }
    .card-back-zero, .shield-back-zero { font-size: 11.25px; }
    .pile-count-zero { font-size: 12.5px; }
    .side-panel-zero h2 { font-size: 15px; }
    .detail-card-zero h3 { font-size: 18.75px; }
    .detail-code-zero { font-size: 13.75px; }
    .detail-stats-zero span { font-size: 12.5px; }
    .detail-stats-zero b { font-size: 15px; }
    .detail-textbox-zero b { font-size: 13.75px; }
    .detail-textbox-zero p { font-size: 13.75px; }
    .log-row-zero { font-size: 13.75px; }
    .log-row-zero b { font-size: 12.5px; }
    .menu-zero button[data-menu-action] { font-size: 13px; }
    .settings-head-zero h2 { font-size: 22.5px; }
    .settings-head-zero p { font-size: 15px; }
    .settings-grid-zero .room-btn-zero { font-size: 15px; }

    
/* v81: lift P1 hand visually so the bottom edge is not clipped.
   It may overlap the resource row slightly, intentionally. */
.seat-zero.own .hand-zone-zero {
  z-index: 80;
  overflow: visible !important;
  transform: translateY(-12px);
}
.seat-zero.own .hand-row-zero {
  align-items: flex-start;
  padding-top: 2px;
  overflow: visible !important;
}

@media (max-height: 760px) {
      :root {
        --status-h: 26px;
        --play-frame-w: min(100%, calc((100svh - var(--status-h) - 8px) * 4 / 3 * 1.03));
        --board-card-w: clamp(67px, 5.27vw, 97px);
        --hand-card-w: clamp(46px, 3.25vw, 62px);
        --own-hand-card-w: clamp(90px, 5.85vw, 116px);
        --opponent-hand-h: clamp(32px, 4.2svh, 46px);
        --own-hand-h: clamp(126px, 15.9svh, 162px);
        --gap: 2px;
        --table-perspective: 980px;
        --table-tilt: 7.9deg;
        --table-camera-scale: 1.17;
        --table-lift: 0px;
        --board-real-extra-h: clamp(76px, 9svh, 118px);
      }
      .seat-zero.opponent { grid-template-rows: var(--opponent-hand-h) minmax(0, 1fr) 12px; }
      .seat-zero.own { grid-template-rows: 12px minmax(0, 1fr) var(--own-hand-h); }
      .seat-zero.opponent .hand-zone-zero { transform: none; }
      .seat-zero.opponent .playmat-scroll-zero { min-height: calc(var(--board-card-h) * 2.10); }
      .seat-zero.own .playmat-scroll-zero { min-height: calc(var(--board-card-h) * 2.10); }
      .room-btn-zero { min-height: 24px; padding: 3px 7px; font-size: 11.36px; }
      .settings-gear-zero { width: 26px; min-width: 26px; height: 26px; font-size: 17px; }
      .seat-head-zero { min-height: 12px; padding: 1px 5px; }
      .shield-layout-zero { grid-template-rows: calc(var(--board-card-h) + (var(--board-card-w) * .11)) minmax(calc(var(--board-card-w) * 2.07), 1fr); }
      .playmat-zero.opponent-mat-zero .shield-layout-zero { grid-template-rows: minmax(calc(var(--board-card-w) * 1.96), 1fr) calc(var(--board-card-h) + (var(--board-card-w) * .22)); }
      .shield-slots-zero { --shield-landscape-w: var(--board-card-h); --shield-landscape-h: var(--board-card-w); --shield-stack-step: calc(var(--shield-landscape-h) * .24); }
    }

    @media (max-width: 1150px) {
      :root { --board-visual-shift-x: 0px; }
      .room-grid-zero { grid-template-columns: minmax(0, 1fr); }
      .sidebar-zero { display: none; }
      .room-title-zero span { display: none; }
    }

    @media (max-width: 820px) {
      body.gundam-room-zero { overflow: auto; }
      .room-shell-zero { height: auto; min-height: 100svh; width: 100%; margin: 0 auto; padding: 2px; transform: none; overflow: visible; }
      .room-grid-zero, .table-zero, #boardZero { overflow: visible; }
      #boardZero { height: auto; margin-top: 0; width: 100%; grid-template-rows: auto auto; transform: none; }
      .seat-zero { min-height: 310px; }
      .playmat-zero { min-height: 190px; }
    }

/* Room external asset card faces */
.asset-card-face-zero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #142033;
}
.card-back-zero.asset-card-face-zero,
.shield-back-zero.asset-card-face-zero {
  padding: 0;
  overflow: hidden;
}

/* EX Base default asset face */
.ex-base-zero {
  box-shadow: 0 0 0 2px rgba(120, 185, 255, .95), 0 5px 16px rgba(120, 185, 255, .18), 0 5px 13px rgba(0,0,0,.25);
}
.ex-base-zero::after {
  content: 'EX BASE';
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 8;
  min-width: 34px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #001324;
  background: linear-gradient(135deg, #d9f0ff, #75b8ff);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}


/* =========================================================
   Board Style Themes
   These change only color/effect styling. Layout dimensions stay the same.
   Default is the current playmat style.
   ========================================================= */
.settings-section-zero {
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.settings-section-title-zero {
  margin: 0 0 7px;
  color: #cfe0ff;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.board-style-grid-zero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.board-style-btn-zero.active-style-zero {
  color: #06111f;
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(135deg, #b9d4ff, #78ffb2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 18px rgba(119,173,255,.28);
}



/* v166: Gundam battle attack indicator overlay.
   It sits above the board/cards but below modal UI; JS hides it while any modal is open. */
.attack-indicator-overlay-zero {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3950;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  mix-blend-mode: screen;
}
.attack-indicator-overlay-zero.show {
  opacity: 1;
  visibility: visible;
}
.attack-indicator-svg-zero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.attack-path-shadow-zero,
.attack-path-glow-zero,
.attack-path-core-zero,
.attack-path-edge-zero,
.attack-reticle-ring-zero,
.attack-reticle-ring-two-zero,
.attack-reticle-cross-zero,
.attack-impact-rays-zero {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attack-source-flare-zero,
.attack-target-reticle-zero,
.attack-impact-zero {
  transform-box: fill-box;
  transform-origin: center;
}
.attack-path-shadow-zero {
  stroke: rgba(0,0,0,.72);
  stroke-width: 14;
  opacity: .74;
}
.attack-path-glow-zero {
  stroke-width: 12;
  filter: url(#attackSoftGlowFilterZero);
  opacity: .9;
}
.attack-path-core-zero {
  stroke-width: 5.6;
  filter: url(#attackGlowFilterZero);
  stroke-dasharray: 18 12;
  animation: attackBeamDashZero .72s linear infinite;
}
.attack-path-edge-zero {
  stroke-width: 2.2;
  opacity: .96;
}
.attack-flare-outer-zero,
.attack-flare-inner-zero,
.attack-impact-core-zero {
  filter: url(#attackGlowFilterZero);
}
.attack-target-reticle-zero {
  animation: attackReticlePulseZero .95s ease-in-out infinite alternate;
}
.attack-reticle-ring-zero,
.attack-reticle-ring-two-zero,
.attack-reticle-cross-zero,
.attack-impact-rays-zero {
  stroke-width: 2.2;
  filter: url(#attackGlowFilterZero);
}
.attack-impact-zero {
  animation: attackImpactPulseZero .48s ease-out infinite alternate;
}

.attack-indicator-overlay-zero.style-arrow { mix-blend-mode: normal; }
.attack-indicator-overlay-zero.style-arrow .attack-path-shadow-zero {
  stroke: rgba(255,255,255,.98);
  stroke-width: 10.5;
  opacity: 1;
}
.attack-indicator-overlay-zero.style-arrow .attack-path-glow-zero {
  stroke: rgba(255,38,58,.42);
  stroke-width: 13;
  opacity: .50;
}
.attack-indicator-overlay-zero.style-arrow .attack-path-core-zero {
  stroke: #f41830;
  stroke-width: 6.4;
  stroke-dasharray: none;
  animation: attackArrowPulseZero .8s ease-in-out infinite alternate;
}
.attack-indicator-overlay-zero.style-arrow .attack-path-edge-zero {
  stroke: rgba(255,255,255,.88);
  stroke-width: 2.1;
}
.attack-indicator-overlay-zero.style-arrow .attack-reticle-ring-zero,
.attack-indicator-overlay-zero.style-arrow .attack-reticle-ring-two-zero,
.attack-indicator-overlay-zero.style-arrow .attack-reticle-cross-zero,
.attack-indicator-overlay-zero.style-arrow .attack-impact-rays-zero {
  stroke: rgba(255,255,255,.96);
}
.attack-indicator-overlay-zero.style-arrow .attack-flare-outer-zero,
.attack-indicator-overlay-zero.style-arrow .attack-impact-core-zero {
  fill: rgba(255,35,50,.42);
}
.attack-indicator-overlay-zero.style-arrow .attack-flare-inner-zero {
  fill: #fff;
}

.attack-indicator-overlay-zero.style-beam .attack-path-glow-zero {
  stroke: rgba(255,63,196,.9);
  stroke-width: 20;
}
.attack-indicator-overlay-zero.style-beam .attack-path-core-zero {
  stroke: rgba(255,250,255,.98);
  stroke-width: 7.4;
  stroke-dasharray: 26 10;
}
.attack-indicator-overlay-zero.style-beam .attack-path-edge-zero {
  stroke: rgba(255,138,231,.94);
  stroke-width: 3.4;
}
.attack-indicator-overlay-zero.style-beam .attack-reticle-ring-zero,
.attack-indicator-overlay-zero.style-beam .attack-reticle-ring-two-zero,
.attack-indicator-overlay-zero.style-beam .attack-reticle-cross-zero,
.attack-indicator-overlay-zero.style-beam .attack-impact-rays-zero {
  stroke: rgba(255,143,229,.98);
}
.attack-indicator-overlay-zero.style-beam .attack-flare-outer-zero,
.attack-indicator-overlay-zero.style-beam .attack-impact-core-zero {
  fill: rgba(255,62,190,.5);
}
.attack-indicator-overlay-zero.style-beam .attack-flare-inner-zero {
  fill: #fff4ff;
}

.attack-indicator-overlay-zero.style-saber .attack-path-glow-zero {
  stroke: rgba(255,63,196,.9);
  stroke-width: 20;
}
.attack-indicator-overlay-zero.style-saber .attack-path-core-zero {
  stroke: rgba(255,250,255,.98);
  stroke-width: 7.4;
  stroke-dasharray: 26 10;
}
.attack-indicator-overlay-zero.style-saber .attack-path-edge-zero {
  stroke: rgba(255,138,231,.94);
  stroke-width: 3.4;
}
.attack-indicator-overlay-zero.style-saber .attack-reticle-ring-zero,
.attack-indicator-overlay-zero.style-saber .attack-reticle-ring-two-zero,
.attack-indicator-overlay-zero.style-saber .attack-reticle-cross-zero,
.attack-indicator-overlay-zero.style-saber .attack-impact-rays-zero {
  stroke: rgba(255,143,229,.98);
}
.attack-indicator-overlay-zero.style-saber .attack-flare-outer-zero,
.attack-indicator-overlay-zero.style-saber .attack-impact-core-zero {
  fill: rgba(255,62,190,.5);
}
.attack-indicator-overlay-zero.style-saber .attack-flare-inner-zero {
  fill: #fff4ff;
}

.attack-indicator-grid-zero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.attack-indicator-btn-zero.active-style-zero {
  color: #06111f;
  border-color: rgba(255,255,255,.78);
  background: linear-gradient(135deg, #fff, #ff5d70 42%, #7df4ff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 18px rgba(255,64,96,.30);
}

@keyframes attackBeamDashZero {
  to { stroke-dashoffset: -30; }
}
@keyframes attackArrowPulseZero {
  from { opacity: .84; }
  to { opacity: 1; }
}
@keyframes attackReticlePulseZero {
  from { opacity: .7; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.06); }
}
@keyframes attackImpactPulseZero {
  from { opacity: .64; transform: scale(.82); }
  to { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 760px), (max-height: 620px) {
  .attack-path-shadow-zero { stroke-width: 10; }
  .attack-indicator-overlay-zero.style-arrow .attack-path-core-zero { stroke-width: 5.4; }
  .attack-path-core-zero { stroke-width: 4.6; }
  .attack-reticle-ring-zero { r: 20; }
  .attack-reticle-ring-two-zero { r: 11; }
  .attack-indicator-grid-zero { grid-template-columns: 1fr; }
}

body.board-theme-default .playmat-zero {
  filter: none;
}

/* 1) Federation Blue: clean military HUD / EFSF hangar feeling. */
body.board-theme-federation {
  --room-panel: rgba(8, 18, 36, .9);
  --room-line: rgba(122, 183, 255, .24);
  --room-blue: #8fc8ff;
  --room-green: #7fffd4;
  --mat-paper: #eaf5ff;
  --mat-paper-2: #cbdced;
  --mat-ink: #061726;
  --mat-line: rgba(11, 70, 128, .62);
}
body.board-theme-federation .playmat-zero {
  background:
    linear-gradient(90deg, rgba(38,113,189,.12) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(38,113,189,.10) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(192,216,238,.94));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.78),
    inset 0 0 0 4px rgba(42,109,176,.32),
    0 0 22px rgba(85,160,255,.18);
}
body.board-theme-federation .zone-zero,
body.board-theme-federation .pile-zone-zero,
body.board-theme-federation .base-box-zero,
body.board-theme-federation .shield-box-zero {
  background: rgba(237,247,255,.76);
  border-color: rgba(35,97,164,.58);
}
body.board-theme-federation .status-zero,
body.board-theme-federation .side-panel-zero,
body.board-theme-federation .settings-modal-zero {
  background: rgba(7, 18, 38, .92);
  border-color: rgba(122,183,255,.24);
}
body.board-theme-federation .card-zero {
  box-shadow: 0 5px 13px rgba(0,0,0,.22), 0 0 0 1px rgba(135,202,255,.12);
}

/* 2) Zeon Red Alert: darker, red warning lines, enemy-ship bridge mood. */
body.board-theme-zeon {
  --room-panel: rgba(28, 6, 9, .9);
  --room-line: rgba(255, 80, 92, .25);
  --room-blue: #ff6f7d;
  --room-green: #ffce73;
  --mat-paper: #241012;
  --mat-paper-2: #3a171b;
  --mat-ink: #ffe6e7;
  --mat-line: rgba(255, 102, 110, .55);
}
body.board-theme-zeon .playmat-zero {
  background:
    linear-gradient(90deg, rgba(255,67,78,.12) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, rgba(255,67,78,.09) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 18% 18%, rgba(255,70,80,.24), transparent 28%),
    linear-gradient(160deg, rgba(28,10,13,.96), rgba(70,18,23,.94));
  box-shadow:
    inset 0 0 0 2px rgba(255,120,130,.22),
    inset 0 0 0 4px rgba(0,0,0,.38),
    0 0 26px rgba(255,50,70,.18);
}
body.board-theme-zeon .zone-zero,
body.board-theme-zeon .pile-zone-zero,
body.board-theme-zeon .base-box-zero,
body.board-theme-zeon .shield-box-zero {
  color: #ffe6e7;
  background: rgba(34,10,14,.72);
  border-color: rgba(255,93,105,.55);
}
body.board-theme-zeon .zone-title-zero,
body.board-theme-zeon .pile-title-zero,
body.board-theme-zeon .sub-label-zero,
body.board-theme-zeon .empty-zone-zero {
  color: #ffe6e7;
}
body.board-theme-zeon .status-zero,
body.board-theme-zeon .side-panel-zero,
body.board-theme-zeon .settings-modal-zero {
  background: rgba(25,6,10,.94);
  border-color: rgba(255,80,92,.24);
}
body.board-theme-zeon .resource-count-pill-zero.active { background: rgba(255,205,115,.82); }
body.board-theme-zeon .resource-count-pill-zero.rested { background: rgba(255,112,124,.72); }
body.board-theme-zeon .resource-count-pill-zero.ex { background: rgba(255,226,111,.9); }
body.board-theme-zeon .card-zero {
  box-shadow: 0 6px 15px rgba(0,0,0,.38), 0 0 0 1px rgba(255,96,110,.16);
}

/* 3) Psycho Frame: premium neon green/cyan NT-D / psychoframe glow. */
body.board-theme-psycho {
  --room-panel: rgba(3, 18, 21, .9);
  --room-line: rgba(90,255,210,.25);
  --room-blue: #77fff0;
  --room-green: #7dff98;
  --mat-paper: #061b1b;
  --mat-paper-2: #0b2d2b;
  --mat-ink: #dffff7;
  --mat-line: rgba(103, 255, 218, .62);
}
body.board-theme-psycho .playmat-zero {
  background:
    linear-gradient(90deg, rgba(91,255,220,.12) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(180deg, rgba(91,255,220,.10) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(circle at 70% 20%, rgba(80,255,170,.24), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(80,170,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(2,14,18,.96), rgba(4,44,39,.94));
  box-shadow:
    inset 0 0 0 2px rgba(124,255,217,.32),
    inset 0 0 0 4px rgba(0,0,0,.36),
    0 0 30px rgba(95,255,196,.22);
}
body.board-theme-psycho .zone-zero,
body.board-theme-psycho .pile-zone-zero,
body.board-theme-psycho .base-box-zero,
body.board-theme-psycho .shield-box-zero {
  color: #e8fff9;
  background: rgba(4,25,28,.72);
  border-color: rgba(101,255,218,.55);
  box-shadow: inset 0 0 14px rgba(88,255,210,.07);
}
body.board-theme-psycho .zone-title-zero,
body.board-theme-psycho .pile-title-zero,
body.board-theme-psycho .sub-label-zero,
body.board-theme-psycho .empty-zone-zero {
  color: #dffff7;
}
body.board-theme-psycho .status-zero,
body.board-theme-psycho .side-panel-zero,
body.board-theme-psycho .settings-modal-zero {
  background: rgba(2,12,18,.94);
  border-color: rgba(101,255,218,.24);
}
body.board-theme-psycho .room-btn-zero.primary,
body.board-theme-psycho .board-style-btn-zero.active-style-zero {
  background: linear-gradient(135deg, #8dfff0, #82ff93);
}
body.board-theme-psycho .card-zero {
  box-shadow: 0 5px 13px rgba(0,0,0,.30), 0 0 0 1px rgba(112,255,220,.14), 0 0 16px rgba(92,255,190,.08);
}


/* v72 real-game testing fixes */
.zone-modal-card-wrap-zero .card-zero {
  width: var(--own-hand-card-w) !important;
  flex: 0 0 var(--own-hand-card-w) !important;
}
.zone-modal-card-wrap-zero .linked-unit-zero {
  width: calc(var(--own-hand-card-w) * 1.18) !important;
  flex: 0 0 calc(var(--own-hand-card-w) * 1.18) !important;
}
.openable-pile-zero,
.openable-pile-zero * {
  cursor: pointer;
}

/* v75: tall left auto-phase rail. Layout is one real vertical column using the full viewport height. */
.status-zero {
  grid-template-columns: 1fr !important;
}
.phase-row-zero {
  grid-column: 1 !important;
  justify-content: center !important;
}
.phase-menu-zero {
  position: fixed;
  left: 6px;
  top: 6px;
  bottom: 6px;
  z-index: 2600;
  width: 92px;
  transform: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 8px 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5,8,15,.90), rgba(5,8,15,.76));
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .18s ease, width .18s ease, opacity .18s ease;
}
.phase-menu-zero.collapsed {
  width: 30px;
  padding-left: 3px;
  padding-right: 3px;
  transform: translateX(calc(-100% + 30px));
}
.phase-menu-toggle-zero {
  position: absolute;
  right: -14px;
  top: 50%;
  width: 24px;
  height: 54px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(9,13,23,.96);
  cursor: pointer;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}
.phase-menu-zero.collapsed .phase-menu-toggle-zero { transform: translateY(-50%) rotate(180deg); }
.phase-menu-body-zero {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}
.phase-menu-zero.collapsed .phase-menu-body-zero { opacity: 0; pointer-events: none; }
.phase-menu-title-zero {
  color: #d9e6ff;
  font-size: 11.5px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.phase-menu-zero .control-row-zero {
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-column: auto !important;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-content: stretch;
  gap: 6px;
  width: 100%;
  justify-content: stretch !important;
  overflow: hidden !important;
}
.phase-menu-section-zero {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.phase-menu-state-zero {
  align-content: start;
}
.phase-menu-actions-zero {
  margin-top: auto;
  align-content: end;
}
.phase-menu-heading-zero {
  min-height: 14px;
  color: rgba(207,224,255,.72);
  font-size: 8.8px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.phase-chip-zero {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 3px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  color: rgba(218,229,250,.78);
  background: rgba(255,255,255,.055);
  font-size: 10.8px;
  font-weight: 950;
  line-height: 1.02;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
}
.phase-chip-zero.active {
  color: #06111f;
  border-color: rgba(255,255,255,.36);
  background: linear-gradient(135deg, #b9d4ff, #7cffb5);
  box-shadow: 0 0 16px rgba(124,255,181,.20);
}
.turn-chip-zero {
  min-height: 30px;
  color: #1a1203;
  background: #ffd76b;
}
.player-chip-zero.active {
  background: linear-gradient(135deg, #d9ecff, #87bfff);
}
.setup-chip-zero.active {
  background: linear-gradient(135deg, #ffe08a, #ffb35c);
}
.phase-menu-zero .room-btn-zero,
.phase-menu-zero .pill-zero {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 5px 4px;
  border-radius: 11px;
  font-size: 10.8px;
  line-height: 1.05;
  white-space: normal;
  text-align: center;
}
.phase-menu-zero .settings-gear-zero {
  min-width: 0;
  width: 100%;
  height: 31px;
}

.phase-menu-zero .action-skip-cycle-zero {
  border-color: rgba(125, 211, 252, .24);
  background: rgba(255,255,255,.055);
  font-weight: 950;
}
.phase-menu-zero .action-skip-cycle-zero.is-empty {
  border-color: rgba(96, 165, 250, .52);
  background: linear-gradient(135deg, rgba(37, 99, 235, .28), rgba(14, 165, 233, .14));
}
.phase-menu-zero .action-skip-cycle-zero.is-all {
  border-color: rgba(251, 146, 60, .58);
  background: linear-gradient(135deg, rgba(234, 88, 12, .32), rgba(250, 204, 21, .12));
}
.phase-menu-zero .action-skip-cycle-zero.is-off {
  color: rgba(226, 232, 240, .74);
}

.menu-zero.action-drawer-zero {
  position: fixed;
  z-index: 9000;
  width: 170px;
  min-width: 170px;
  max-width: 190px;
  padding: 6px;
  border-radius: 14px;
  transform: none !important;
  background: rgba(5,8,15,.96);
}
.menu-zero.action-drawer-zero.collapsed {
  display: none !important;
}
.menu-zero.action-drawer-zero .action-drawer-toggle-zero {
  display: none !important;
}
.menu-zero.action-drawer-zero .action-drawer-body-zero {
  visibility: visible !important;
  pointer-events: auto !important;
}
.menu-zero.action-drawer-zero.hand-action-menu-zero {
  width: 220px;
  max-width: 240px;
}
.menu-zero.action-drawer-zero.hand-action-menu-zero .action-drawer-buttons-zero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.menu-zero.action-drawer-zero.hand-action-menu-zero button[data-menu-action] {
  text-align: center;
  padding: 7px 5px;
}

@media (max-width: 820px) {
  .phase-menu-zero {
    left: 4px;
    top: 54px;
    transform: none;
  }
  .phase-menu-zero.collapsed {
    transform: translateX(calc(-100% + 30px));
  }
}


/* v76: phase rail only. Remove the duplicate top phase/status pill row. */
.status-zero {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.phase-row-zero { display: none !important; }
.phase-menu-hover-zone-zero {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  z-index: 2550;
  pointer-events: auto;
  background: transparent;
}
.phase-menu-zero {
  top: 4px !important;
  bottom: 4px !important;
  width: 104px;
  z-index: 2650;
}
.phase-menu-zero.collapsed {
  width: 30px;
  transform: translateX(calc(-100% + 30px));
}
.phase-menu-zero:not(.collapsed) { transform: translateX(0); }
.phase-menu-toggle-zero { right: -13px; }
.phase-chip-zero { min-height: 32px; }
.phase-menu-zero .room-btn-zero,
.phase-menu-zero .pill-zero { min-height: 34px; }

/* v76: Conan-style setup dice choose-order modal. */
.dice-modal-backdrop-zero {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(10px);
}
.dice-modal-backdrop-zero.show { display: flex; }
.dice-modal-zero {
  width: min(560px, calc(100vw - 34px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(180deg, rgba(14,20,36,.98), rgba(4,7,15,.98));
  box-shadow: 0 30px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}
.dice-modal-head-zero h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }
.dice-modal-head-zero p { margin: 4px 0 0; color: var(--room-muted); font-size: 13px; }
.dice-modal-body-zero { display: grid; gap: 14px; }
.dice-grid-zero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dice-box-zero {
  min-height: 132px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.07);
}
.dice-box-zero.winner {
  border-color: rgba(124,255,181,.72);
  background: linear-gradient(180deg, rgba(124,255,181,.18), rgba(255,255,255,.06));
  box-shadow: 0 0 26px rgba(124,255,181,.18);
}
.dice-player-zero { color: #cfe0ff; font-size: 13px; font-weight: 950; text-transform: uppercase; }
.dice-face-zero {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #06111f;
  background: linear-gradient(135deg, #f8fbff, #9ec9ff);
  font-size: 34px;
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.dice-state-zero { color: var(--room-muted); font-size: 12px; font-weight: 850; text-align: center; }
.dice-choice-zero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dice-choice-zero .room-btn-zero { min-height: 44px; border-radius: 16px; font-size: 13px; }
.dice-note-zero {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  color: #dfe8fb;
  background: rgba(255,255,255,.06);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
@media (max-width: 820px) {
  .phase-menu-hover-zone-zero { width: 44px; }
  .dice-grid-zero, .dice-choice-zero { grid-template-columns: 1fr; }
}

/* v77: board visibility safety after moving phase controls fully to the left rail. */
.table-zero {
  grid-template-rows: 0 auto auto auto minmax(0, 1fr) !important;
  overflow: hidden;
}
.status-zero,
.phase-row-zero {
  display: none !important;
}
#boardZero {
  max-height: none !important;
}
.phase-menu-zero {
  z-index: 2650;
}


/* v78: hard fix after removing top phase bar.
   The hidden status row used display:none, so CSS grid auto-placement was putting #boardZero
   into the first explicit grid row, which had 0 height. That made only a tiny top slice
   of the board visible and the rest looked like only the space background.
   Use a single real table row and explicitly place the board in it. */
.table-zero {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.status-zero,
.phase-row-zero {
  display: none !important;
}
.target-banner-zero,
.battle-banner-zero,
.toast-zero {
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: stretch !important;
  z-index: 2100 !important;
}
#boardZero {
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-self: stretch !important;
  height: calc(100% + var(--board-real-extra-h)) !important;
  max-height: none !important;
}


/* v79: P1 hand bottom clipping fix.
   v78 restored board visibility by making #boardZero taller, but the extra height
   was mostly extending below the table. Because .table-zero clips overflow, the
   bottom/P1 hand was cut. Anchor the extra height upward instead, so the bottom
   edge of P1 hand stays inside the viewport. Also give the hand just enough
   reserved height for the 0.87 scaled view. */
:root {
  --own-hand-h: clamp(150px, 18.2svh, 196px);
}
#boardZero {
  margin-top: calc(var(--board-real-extra-h) * -0.92) !important;
  height: calc(100% + var(--board-real-extra-h)) !important;
}
.seat-zero.own {
  grid-template-rows: 8px minmax(0, 1fr) var(--own-hand-h) !important;
}
.seat-zero.own .hand-zone-zero {
  min-height: var(--own-hand-h);
  overflow: visible !important;
}
.seat-zero.own .hand-row-zero {
  overflow: visible !important;
  align-items: center !important;
}
@media (max-height: 760px) {
  :root {
    --own-hand-h: clamp(138px, 17.2svh, 178px);
  }
  #boardZero {
    margin-top: calc(var(--board-real-extra-h) * -0.94) !important;
  }
}

/* v80: rebalance after v79.
   v79 protected P1 hand by pushing the oversized board upward, but that clipped the
   opponent hand. Reduce the real oversized board frame, trim high-empty zones, and
   reserve a real visible opponent hand row. */
:root {
  --board-real-extra-h: clamp(30px, 4.2svh, 68px);
  --opponent-hand-h: clamp(54px, 6.9svh, 78px);
  --own-hand-h: clamp(140px, 17.4svh, 184px);
}
#boardZero {
  height: calc(100% + var(--board-real-extra-h)) !important;
  margin-top: calc(var(--board-real-extra-h) * -0.42) !important;
  grid-template-rows: minmax(0, .98fr) auto minmax(0, 1.08fr) !important;
}
.seat-zero.opponent {
  grid-template-rows: var(--opponent-hand-h) minmax(0, 1fr) 14px !important;
}
.seat-zero.own {
  grid-template-rows: 14px minmax(0, 1fr) var(--own-hand-h) !important;
}
.seat-zero.opponent .hand-zone-zero {
  min-height: var(--opponent-hand-h);
  overflow: visible !important;
  transform: none !important;
}
.seat-zero.opponent .hand-row-zero {
  overflow: visible !important;
}
.seat-zero.opponent .playmat-scroll-zero,
.seat-zero.own .playmat-scroll-zero {
  min-height: 0 !important;
}
.playmat-zero.own-mat-zero {
  grid-template-rows: minmax(0, .52fr) minmax(0, .48fr) !important;
}
.playmat-zero.opponent-mat-zero {
  grid-template-rows: minmax(0, .48fr) minmax(0, .52fr) !important;
}
.card-row-zero,
.base-row-zero,
.resource-row-zero,
.battle-row-zero {
  min-height: calc(var(--board-card-h) + 2px) !important;
  padding-block: 1px !important;
}
.battle-row-zero {
  align-content: center !important;
  padding-block: 0 !important;
}
.shield-layout-zero {
  grid-template-rows: calc(var(--board-card-h) + (var(--board-card-w) * .06)) minmax(calc(var(--board-card-w) * 1.78), 1fr) !important;
}
.playmat-zero.opponent-mat-zero .shield-layout-zero {
  grid-template-rows: minmax(calc(var(--board-card-w) * 1.74), 1fr) calc(var(--board-card-h) + (var(--board-card-w) * .12)) !important;
}
.base-box-zero,
.shield-box-zero,
.zone-zero,
.pile-zone-zero {
  padding: 1px !important;
}
@media (max-height: 760px) {
  :root {
    --board-real-extra-h: clamp(22px, 3.5svh, 52px);
    --opponent-hand-h: clamp(48px, 6.2svh, 68px);
    --own-hand-h: clamp(132px, 16.4svh, 172px);
  }
  #boardZero {
    margin-top: calc(var(--board-real-extra-h) * -0.38) !important;
  }
  .shield-layout-zero {
    grid-template-rows: calc(var(--board-card-h) + (var(--board-card-w) * .05)) minmax(calc(var(--board-card-w) * 1.66), 1fr) !important;
  }
  .playmat-zero.opponent-mat-zero .shield-layout-zero {
    grid-template-rows: minmax(calc(var(--board-card-w) * 1.62), 1fr) calc(var(--board-card-h) + (var(--board-card-w) * .10)) !important;
  }
}


/* v85: Base AP/HP stat label, same visual language as Battle Area Units. */
.shield-layout-zero {
  grid-template-rows: calc(var(--board-card-h) + 25px) minmax(0, 1fr) !important;
}
.playmat-zero.opponent-mat-zero .shield-layout-zero {
  grid-template-rows: minmax(0, 1fr) calc(var(--board-card-h) + 25px) !important;
}
.base-row-zero {
  min-height: calc(var(--board-card-h) + 23px) !important;
  height: 100% !important;
  padding: 4px 0 2px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.base-stat-card-zero {
  --base-stat-h: 20px;
  flex: 0 0 var(--board-card-w);
  width: var(--board-card-w);
  height: calc(var(--board-card-h) + var(--base-stat-h) + 3px);
  min-width: var(--board-card-w);
  min-height: calc(var(--board-card-h) + var(--base-stat-h) + 3px);
  position: relative;
  display: block;
  overflow: visible;
  z-index: 8;
}
.base-stat-stage-zero {
  position: absolute;
  left: 50%;
  top: calc((100% - var(--base-stat-h)) / 2);
  width: var(--board-card-w);
  height: var(--board-card-h);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 2;
}
.base-stat-stage-zero .card-zero {
  position: absolute;
  inset: 0;
  width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  flex-basis: var(--board-card-w) !important;
  margin: 0 !important;
}
.base-card-stat-zero {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: var(--board-card-w);
  min-width: var(--board-card-w);
  max-width: var(--board-card-w);
  min-height: var(--base-stat-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  color: #071019;
  background: rgba(238,246,255,.92);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.seat-zero.opponent .base-stat-stage-zero .card-zero:not(.rested) {
  transform: rotate(180deg);
}
.seat-zero.opponent .base-stat-stage-zero .card-zero:not(.rested):hover {
  transform: rotate(180deg) translateY(1px) scale(1.025);
}
@media (max-height: 760px) {
  .shield-layout-zero { grid-template-rows: calc(var(--board-card-h) + 23px) minmax(0, 1fr) !important; }
  .playmat-zero.opponent-mat-zero .shield-layout-zero { grid-template-rows: minmax(0, 1fr) calc(var(--board-card-h) + 23px) !important; }
}

/* v86: global rule patch — clean trash/zone modal with readable in-popup detail panel. */
.zone-modal-backdrop-zero {
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.zone-modal-zero {
  width: min(1480px, calc(100vw - 28px)) !important;
  height: min(820px, calc(100svh - 28px)) !important;
  background: rgba(5, 8, 16, .98) !important;
}
.zone-modal-body-zero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 12px;
}
.zone-modal-grid-zero {
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--own-hand-card-w) + 8px), max-content)) !important;
  justify-content: start;
  align-content: start;
  gap: 10px !important;
  padding: 6px !important;
}
.zone-modal-card-wrap-zero {
  min-height: calc(var(--own-hand-card-w) * 1.4 + 8px) !important;
  width: calc(var(--own-hand-card-w) + 8px);
  padding: 4px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.zone-modal-card-wrap-zero:hover {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.055) !important;
}
.zone-modal-card-wrap-zero .card-zero {
  width: var(--own-hand-card-w) !important;
  height: calc(var(--own-hand-card-w) * 1.4) !important;
  flex: 0 0 var(--own-hand-card-w) !important;
  max-width: var(--own-hand-card-w) !important;
  margin: 0 !important;
}
.zone-modal-card-wrap-zero .card-art-zero img {
  object-fit: contain !important;
  background: #050812 !important;
}
.zone-modal-detail-zero {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.34);
  scrollbar-width: thin;
}
.zone-modal-detail-zero .detail-card-zero img {
  max-height: 47svh;
  object-fit: contain;
}
.zone-modal-detail-zero .detail-empty-zero {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
}
@media (max-width: 920px) {
  .zone-modal-body-zero {
    grid-template-columns: 1fr;
  }
  .zone-modal-detail-zero {
    max-height: 34svh;
  }
}


/* v88 live stat badges: AP/HP numbers compare current value vs original printed total. */
.live-stat-badge-zero {
  gap: 4px;
  color: #071019;
}
.stat-part-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.stat-number-zero {
  color: #071019;
  font-weight: 1000;
  transition: color .16s ease, text-shadow .16s ease, transform .16s ease;
}
.stat-tone-normal-zero { color: #071019 !important; text-shadow: none; }
.stat-tone-down-zero { color: #d71920 !important; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.stat-tone-up-zero { color: #008a3d !important; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
.stat-dot-zero { opacity: .55; font-weight: 900; }
.detail-stats-zero .stat-tone-normal-zero { color: #f7fbff !important; }
.detail-stats-zero .stat-tone-down-zero { color: #ff6969 !important; }
.detail-stats-zero .stat-tone-up-zero { color: #5dff9d !important; }


/* v89: center the top action/status banners and keep action-blocked text readable. */
.target-banner-zero.show,
.battle-banner-zero.show,
.toast-zero.show {
  justify-content: center !important;
  text-align: center !important;
}
.target-banner-zero span,
.battle-banner-zero span,
.toast-zero span {
  flex: 1 1 auto !important;
  text-align: center !important;
}
.target-banner-zero strong,
.battle-banner-zero strong,
.toast-zero strong {
  text-align: center !important;
}

/* v91: in-room confirmation modal. Replaces raw browser confirm dialogs. */
.confirm-modal-backdrop-zero {
  position: fixed;
  inset: 0;
  z-index: 5600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.confirm-modal-backdrop-zero.show { display: flex; }
.confirm-modal-zero {
  width: min(420px, calc(100vw - 34px));
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(14,20,36,.98), rgba(4,7,15,.98));
  box-shadow: 0 30px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}
.confirm-modal-head-zero {
  display: grid;
  gap: 4px;
  text-align: center;
}
.confirm-modal-head-zero h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.confirm-modal-head-zero p {
  margin: 0;
  color: var(--room-muted);
  font-size: 14px;
  line-height: 1.35;
}
.confirm-modal-actions-zero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.confirm-modal-actions-zero .room-btn-zero {
  min-height: 44px;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
}
.confirm-ok-zero {
  color: #06111f;
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(135deg, #b9d4ff, #78ffb2);
}
.confirm-ok-zero.danger {
  color: #210408;
  background: linear-gradient(135deg, #ffc6cb, #ff7b88);
}
.confirm-cancel-zero {
  background: rgba(255,255,255,.075);
}
@media (max-width: 520px) {
  .confirm-modal-actions-zero { grid-template-columns: 1fr; }
}

/* v93: center horizontal phase/action menu between both player boards. */
.phase-menu-hover-zone-zero {
  display: none !important;
  pointer-events: none !important;
}
.phase-menu-zero,
.phase-menu-zero.collapsed,
.phase-menu-zero:not(.collapsed) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(820px, calc(100% - 28px)) !important;
  max-width: calc(100% - 28px) !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2800 !important;
  display: block !important;
  background: linear-gradient(135deg, rgba(5, 8, 15, .92), rgba(9, 17, 34, .84)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px) !important;
}
.phase-menu-toggle-zero {
  display: none !important;
}
.phase-menu-body-zero,
.phase-menu-zero.collapsed .phase-menu-body-zero {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.phase-menu-title-zero,
.phase-menu-heading-zero {
  display: none !important;
}
.phase-menu-zero .control-row-zero {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
.phase-menu-section-zero,
.phase-menu-state-zero,
.phase-menu-actions-zero {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
}
.phase-menu-state-zero {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.phase-menu-actions-zero {
  flex: 0 0 auto !important;
  padding-left: 7px !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}
.phase-chip-zero {
  width: auto !important;
  min-width: 48px !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}
.phase-chip-zero.active,
.phase-step-chip-zero.active {
  color: #06111f !important;
  border-color: rgba(255,255,255,.55) !important;
  background: linear-gradient(135deg, #dcecff, #7cffb5) !important;
  box-shadow: 0 0 0 1px rgba(124,255,181,.26), 0 0 18px rgba(124,255,181,.28) !important;
}
.turn-chip-zero {
  min-width: 58px !important;
  color: #1a1203 !important;
  background: #ffd76b !important;
}
.phase-menu-zero .room-btn-zero,
.phase-menu-zero .pill-zero {
  width: auto !important;
  min-width: 54px !important;
  min-height: 30px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}
.phase-menu-zero .settings-gear-zero {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  .phase-menu-zero,
  .phase-menu-zero.collapsed,
  .phase-menu-zero:not(.collapsed) {
    width: min(96vw, 760px) !important;
    padding: 5px 6px !important;
    border-radius: 18px !important;
  }
  .phase-menu-zero .control-row-zero {
    gap: 5px !important;
  }
  .phase-menu-state-zero,
  .phase-menu-actions-zero {
    gap: 4px !important;
  }
  .phase-chip-zero {
    min-width: 38px !important;
    padding: 5px 6px !important;
    font-size: 9.2px !important;
  }
  .phase-menu-zero .room-btn-zero,
  .phase-menu-zero .pill-zero {
    min-width: 44px !important;
    padding: 6px 8px !important;
    font-size: 9.3px !important;
  }
}
@media (max-width: 640px) {
  .phase-menu-zero,
  .phase-menu-zero.collapsed,
  .phase-menu-zero:not(.collapsed) {
    top: 49.5% !important;
    width: calc(100% - 14px) !important;
  }
  .phase-menu-zero .control-row-zero {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .phase-menu-actions-zero {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .phase-chip-zero {
    min-width: 34px !important;
    min-height: 25px !important;
    padding: 4px 5px !important;
    font-size: 8.5px !important;
  }
  .turn-chip-zero,
  .setup-chip-zero {
    min-width: 44px !important;
  }
}


/* v94: true phase/action divider between opponent board and player board.
   This is not a floating overlay and not inside P1/P2. JS now renders:
   opponent seat -> center phase slot -> own seat. */
.phase-menu-hover-zone-zero {
  display: none !important;
  pointer-events: none !important;
}
#boardZero {
  grid-template-rows: minmax(0, .98fr) auto minmax(0, 1.08fr) !important;
  gap: 3px !important;
}
.board-center-phase-slot-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 4px !important;
  z-index: 1900 !important;
  pointer-events: none !important;
}
.board-center-phase-slot-zero .phase-menu-zero,
.board-center-phase-slot-zero .phase-menu-zero.collapsed,
.board-center-phase-slot-zero .phase-menu-zero:not(.collapsed),
.phase-menu-zero.center-divider-zero {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(880px, 100%) !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  display: block !important;
  background: linear-gradient(135deg, rgba(5, 8, 15, .94), rgba(9, 17, 34, .88)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
}
.board-center-phase-slot-zero .phase-menu-toggle-zero {
  display: none !important;
}
.board-center-phase-slot-zero .phase-menu-body-zero,
.board-center-phase-slot-zero .phase-menu-zero.collapsed .phase-menu-body-zero {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.board-center-phase-slot-zero .phase-menu-title-zero,
.board-center-phase-slot-zero .phase-menu-heading-zero {
  display: none !important;
}
.board-center-phase-slot-zero .control-row-zero {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}
.board-center-phase-slot-zero .phase-menu-section-zero,
.board-center-phase-slot-zero .phase-menu-state-zero,
.board-center-phase-slot-zero .phase-menu-actions-zero {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
}
.board-center-phase-slot-zero .phase-menu-state-zero {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.board-center-phase-slot-zero .phase-menu-actions-zero {
  flex: 0 0 auto !important;
  padding-left: 7px !important;
  border-left: 1px solid rgba(255,255,255,.14) !important;
}
.board-center-phase-slot-zero .phase-chip-zero {
  width: auto !important;
  min-width: 42px !important;
  min-height: 22px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.board-center-phase-slot-zero .phase-chip-zero.active,
.board-center-phase-slot-zero .phase-step-chip-zero.active {
  color: #06111f !important;
  border-color: rgba(255,255,255,.55) !important;
  background: linear-gradient(135deg, #dcecff, #7cffb5) !important;
  box-shadow: 0 0 0 1px rgba(124,255,181,.26), 0 0 14px rgba(124,255,181,.28) !important;
}
.board-center-phase-slot-zero .turn-chip-zero {
  min-width: 56px !important;
  color: #1a1203 !important;
  background: #ffd76b !important;
}
.board-center-phase-slot-zero .room-btn-zero,
.board-center-phase-slot-zero .pill-zero {
  width: auto !important;
  min-width: 46px !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.board-center-phase-slot-zero .settings-gear-zero {
  width: 32px !important;
  min-width: 32px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 20px !important;
}
@media (max-width: 900px) {
  .board-center-phase-slot-zero { min-height: 56px !important; }
  .board-center-phase-slot-zero .phase-menu-zero,
  .board-center-phase-slot-zero .phase-menu-zero.collapsed,
  .board-center-phase-slot-zero .phase-menu-zero:not(.collapsed) {
    border-radius: 18px !important;
    padding: 5px 6px !important;
  }
  .board-center-phase-slot-zero .control-row-zero {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .board-center-phase-slot-zero .phase-menu-actions-zero {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .board-center-phase-slot-zero .phase-chip-zero {
    min-width: 34px !important;
    min-height: 24px !important;
    padding: 4px 5px !important;
    font-size: 8.4px !important;
  }
  .board-center-phase-slot-zero .turn-chip-zero,
  .board-center-phase-slot-zero .setup-chip-zero {
    min-width: 42px !important;
  }
  .board-center-phase-slot-zero .room-btn-zero,
  .board-center-phase-slot-zero .pill-zero {
    min-width: 42px !important;
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 8.8px !important;
  }
}

/* v95: center divider turn label simplification */
.compact-turn-state-zero {
  min-width: 180px;
}
.turn-status-zero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .58);
  color: rgba(248, 250, 252, .96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(15,23,42,.18);
  white-space: nowrap;
}
.turn-status-zero .turn-no-zero {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, .72);
}
.turn-status-zero strong {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}
.turn-status-zero.is-your-turn {
  border-color: rgba(34, 197, 94, .42);
  background: linear-gradient(135deg, rgba(22, 163, 74, .30), rgba(15, 23, 42, .72));
}
.turn-status-zero.is-opponent-turn {
  border-color: rgba(251, 146, 60, .38);
  background: linear-gradient(135deg, rgba(234, 88, 12, .24), rgba(15, 23, 42, .72));
}
.turn-status-zero.is-setup {
  border-color: rgba(96, 165, 250, .40);
  background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(15, 23, 42, .72));
}
.turn-status-zero.is-finished {
  border-color: rgba(250, 204, 21, .48);
  background: linear-gradient(135deg, rgba(202, 138, 4, .28), rgba(15, 23, 42, .72));
}

@media (max-width: 720px) {
  .compact-turn-state-zero { min-width: 100%; }
  .turn-status-zero { width: 100%; }
}


/* v96: show real playable timing label without restoring old phase buttons */
.board-center-phase-slot-zero .compact-turn-state-zero {
  gap: 7px !important;
  flex-wrap: nowrap !important;
}
.timing-status-zero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .30);
  background: rgba(15, 23, 42, .50);
  color: rgba(248, 250, 252, .94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(15,23,42,.16);
  white-space: nowrap;
}
.timing-status-zero span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, .66);
}
.timing-status-zero strong {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}
.timing-status-zero.is-main {
  border-color: rgba(34, 197, 94, .42);
  background: linear-gradient(135deg, rgba(22, 163, 74, .22), rgba(15, 23, 42, .70));
}
.timing-status-zero.is-action-step {
  border-color: rgba(168, 85, 247, .46);
  background: linear-gradient(135deg, rgba(126, 34, 206, .24), rgba(15, 23, 42, .70));
}
.timing-status-zero.is-block-step {
  border-color: rgba(59, 130, 246, .46);
  background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(15, 23, 42, .70));
}
.timing-status-zero.is-damage-step,
.timing-status-zero.is-battle {
  border-color: rgba(239, 68, 68, .42);
  background: linear-gradient(135deg, rgba(185, 28, 28, .22), rgba(15, 23, 42, .70));
}
.timing-status-zero.is-auto,
.timing-status-zero.is-end {
  border-color: rgba(245, 158, 11, .38);
  background: linear-gradient(135deg, rgba(217, 119, 6, .18), rgba(15, 23, 42, .70));
}
.timing-status-zero.is-setup {
  border-color: rgba(96, 165, 250, .40);
  background: linear-gradient(135deg, rgba(37, 99, 235, .22), rgba(15, 23, 42, .70));
}
@media (max-width: 900px) {
  .board-center-phase-slot-zero .compact-turn-state-zero { flex-wrap: wrap !important; }
  .timing-status-zero { min-height: 31px; padding: 6px 10px; }
  .timing-status-zero span { font-size: 9px; }
  .timing-status-zero strong { font-size: 11px; }
}
@media (max-width: 720px) {
  .timing-status-zero { width: 100%; }
}

/* v100: Action Step auto-pass settings */
.action-skip-settings-zero {
  border-color: rgba(96, 165, 250, .20);
}
.action-skip-mode-grid-zero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.action-skip-choice-zero {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: rgba(236, 244, 255, .92);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
}
.action-skip-choice-zero input {
  width: 16px;
  height: 16px;
  accent-color: #8dd7ff;
}
.action-skip-choice-zero.active {
  border-color: rgba(125, 211, 252, .62);
  background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(16, 185, 129, .14));
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .12), 0 0 18px rgba(14, 165, 233, .18);
}

/* v105: Board-local space animation fix.
   Restore all original board themes by removing the failed transparent/global overrides.
   The space effect now lives ONLY inside each playmat board, not on body/background.
   It does not override theme backgrounds; it is a subtle star layer above the mat
   and behind zones/cards. */
.playmat-zero {
  isolation: isolate;
}
.playmat-zero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .34;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.92) 0 1px, transparent 1.7px),
    radial-gradient(circle at 28% 72%, rgba(150,205,255,.70) 0 1px, transparent 1.8px),
    radial-gradient(circle at 52% 34%, rgba(255,255,255,.82) 0 .9px, transparent 1.55px),
    radial-gradient(circle at 76% 64%, rgba(170,130,255,.62) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 88% 22%, rgba(130,245,255,.66) 0 .95px, transparent 1.7px),
    radial-gradient(ellipse at 34% 24%, rgba(55,126,255,.16), transparent 35%),
    radial-gradient(ellipse at 82% 78%, rgba(170,83,255,.12), transparent 38%);
  background-size:
    180px 110px,
    220px 140px,
    260px 180px,
    210px 160px,
    300px 190px,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    36px 18px,
    88px 54px,
    12px 72px,
    120px 24px,
    0 0,
    0 0;
  animation: boardLocalStarsZero 34s linear infinite;
}
.playmat-zero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .22;
  background:
    radial-gradient(ellipse at 18% 48%, rgba(0,220,255,.16), transparent 42%),
    radial-gradient(ellipse at 78% 34%, rgba(110,88,255,.13), transparent 46%);
  animation: boardLocalNebulaZero 18s ease-in-out infinite alternate;
}
.playmat-zero > * {
  position: relative;
  z-index: 1;
}
/* Keep theme identity. The local space layer is slightly more subtle on bright Federation. */
body.board-theme-federation .playmat-zero::before { opacity: .24; }
body.board-theme-federation .playmat-zero::after { opacity: .14; }
body.board-theme-zeon .playmat-zero::before { opacity: .30; }
body.board-theme-psycho .playmat-zero::before { opacity: .38; }
body.board-theme-psycho .playmat-zero::after { opacity: .25; }

@keyframes boardLocalStarsZero {
  from { background-position: 0 0, 36px 18px, 88px 54px, 12px 72px, 120px 24px, 0 0, 0 0; }
  to   { background-position: 180px 110px, 256px 158px, 348px 234px, 222px 232px, 420px 214px, 0 0, 0 0; }
}
@keyframes boardLocalNebulaZero {
  from { transform: scale(1); opacity: .16; }
  to   { transform: scale(1.05); opacity: .25; }
}

/* v105 shield badge readability: no theme override, just keep the count small and readable. */
.shield-num-zero {
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
  transform: none !important;
  z-index: 40 !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(0,0,0,.82) !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.62) !important;
}
.playmat-zero.opponent-mat-zero .shield-num-zero,
.playmat-zero.own-mat-zero .shield-num-zero {
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
  transform: none !important;
}

/* Shield number overlay: rendered at shield-slots level so it's above ALL shield-line stacking contexts. */
.shield-num-overlay-zero {
  position: absolute;
  z-index: 999;
  width: 15px;
  height: 15px;
  min-width: 15px;
  /* Right edge of the landscape card: center(50%) + half landscape width - badge width - 2px margin */
  left: calc(50% + var(--shield-landscape-w, var(--board-card-h)) / 2 - 17px);
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.88);
  color: #fff;
  background: rgba(0,0,0,.82);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 1px 5px rgba(0,0,0,.62);
  pointer-events: none;
}
.playmat-zero.own-mat-zero .shield-num-overlay-zero {
  top: auto;
  bottom: calc(var(--shield-offset, 0) * var(--shield-stack-step) + 2px);
}
.playmat-zero.opponent-mat-zero .shield-num-overlay-zero {
  top: calc(var(--shield-offset, 0) * var(--shield-stack-step) + 2px);
}

/* Burst pending Shield: rendered Shield stays face-up in Shield area until Activate/Skip resolves. */
.shield-line-zero.pending-burst-shield-zero .shield-card-landscape-zero{
  box-shadow:0 0 0 2px rgba(250,204,21,.78),0 0 18px rgba(250,204,21,.35),0 12px 30px rgba(0,0,0,.34);
}
.shield-pending-burst-badge-zero{
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(250,204,21,.76);
  background:rgba(15,23,42,.9);
  color:#fef3c7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.shield-line-zero.pending-burst-shield-zero .shield-real-card-zero::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(250,204,21,.2),transparent 40%,rgba(59,130,246,.12));
}

/* v114: Burst pending reveal + copy-log utility. */
.log-head-zero{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.log-head-zero h2{margin:0}
.log-copy-btn-zero{min-height:30px;padding:6px 10px;font-size:.76rem}
.shield-line-zero.pending-burst-shield-zero .hidden-shield-zero .shield-real-card-zero,
.shield-line-zero.pending-burst-shield-zero .shield-real-card-zero{display:block}

/* v129: split persistent prompts from temporary feedback.
   Target/Battle banners remain persistent game-state prompts; toast messages are short-lived feedback. */
.toast-zero.show {
  justify-self: center !important;
  align-self: start !important;
  width: auto !important;
  max-width: min(620px, calc(100vw - 34px)) !important;
  min-height: 26px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  gap: 7px !important;
  pointer-events: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.04) inset !important;
  animation: toast-pop-zero .16s ease-out both;
}
.toast-zero.show span {
  flex: 0 1 auto !important;
  max-width: min(470px, calc(100vw - 170px)) !important;
  color: rgba(242,247,255,.88) !important;
}
.toast-zero.show strong {
  font-size: 12px !important;
  letter-spacing: .01em;
}
.toast-zero.toast-error-zero {
  border-color: rgba(255,111,111,.46) !important;
  background: linear-gradient(135deg, rgba(84,12,20,.96), rgba(22,7,12,.94)) !important;
}
.toast-zero.toast-warn-zero {
  border-color: rgba(255,211,112,.46) !important;
  background: linear-gradient(135deg, rgba(89,58,12,.96), rgba(18,13,6,.94)) !important;
}
.toast-zero.toast-success-zero {
  border-color: rgba(117,255,178,.42) !important;
  background: linear-gradient(135deg, rgba(11,76,45,.96), rgba(6,20,15,.94)) !important;
}
.toast-zero.toast-info-zero {
  border-color: rgba(139,190,255,.38) !important;
  background: linear-gradient(135deg, rgba(20,45,91,.96), rgba(7,12,26,.94)) !important;
}
@keyframes toast-pop-zero {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 760px) {
  .toast-zero.show {
    max-width: calc(100vw - 18px) !important;
    padding-inline: 9px !important;
  }
  .toast-zero.show span {
    max-width: calc(100vw - 145px) !important;
  }
}


/* Generic private deck-choice modal: card-image selection + confirm resolve. */
.deck-choice-help-zero,
.deck-choice-confirm-zero {
  grid-column: 1 / -1;
  width: min(100%, 980px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(15,23,42,.78);
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.deck-choice-help-zero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  color: var(--room-text);
}
.deck-choice-help-zero strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
.deck-choice-help-zero span {
  grid-column: 1 / -1;
  color: var(--room-muted);
  font-size: 12px;
  line-height: 1.3;
}
.deck-choice-help-zero em {
  justify-self: end;
  color: rgba(191,219,254,.96);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.deck-choice-card-wrap-zero {
  position: relative;
  padding: 4px !important;
  border-radius: 16px;
}
.deck-choice-card-wrap-zero.selected {
  background: rgba(37,99,235,.18) !important;
  border-color: rgba(147,197,253,.5) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25), 0 16px 34px rgba(37,99,235,.18) !important;
}
.deck-choice-card-button-zero {
  display: block;
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
.zone-modal-card-wrap-zero.deck-choice-card-wrap-zero .card-zero {
  cursor: pointer;
}
.deck-choice-rank-zero {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(2,6,23,.9);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  pointer-events: none;
}
.deck-choice-card-wrap-zero.selected .deck-choice-rank-zero {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: rgba(255,255,255,.48);
}
.deck-choice-role-zero {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 54px);
  min-height: 26px;
  display: inline-grid;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
  padding: 0 9px;
  border: 1px solid rgba(147,197,253,.72);
  box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 0 2px rgba(37,99,235,.18);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-choice-confirm-zero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  bottom: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.deck-choice-order-preview-zero {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--room-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-choice-confirm-btn-zero {
  flex: 0 0 auto;
  min-width: 160px;
  justify-content: center;
}
.deck-choice-confirm-btn-zero:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.3);
}
@media (max-width: 720px) {
  .deck-choice-confirm-zero {
    align-items: stretch;
    flex-direction: column;
  }
  .deck-choice-order-preview-zero {
    white-space: normal;
  }
  .deck-choice-confirm-btn-zero {
    width: 100%;
  }
}

/* v139: mobile responsive playmat support.
   Desktop/tablet desktop layout stays unchanged; these rules only apply to narrow touch screens. */
@media (max-width: 820px) {
  :root {
    --viewport-render-scale: 1;
    --room-edge-pad: 0px;
    --status-h: 0px;
    --gap: 4px;
    --board-visual-shift-x: 0px;
    --table-perspective: none;
    --table-tilt: 0deg;
    --table-camera-scale: 1;
    --table-lift: 0px;
    --board-real-extra-h: 0px;
    --play-frame-w: 100%;
    --board-card-w: clamp(52px, 13.2vw, 68px);
    --hand-card-w: clamp(34px, 8.5vw, 48px);
    --own-hand-card-w: clamp(74px, 20vw, 104px);
    --opponent-hand-h: clamp(40px, 7svh, 58px);
    --own-hand-h: clamp(118px, 25svh, 160px);
    --zone-title-h: 12px;
    --resource-edge-pad: 4%;
  }

  html,
  body.gundam-room-zero {
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
  }

  body.gundam-room-zero {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .room-shell-zero {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 4px !important;
    transform: none !important;
    overflow: visible !important;
  }

  .room-grid-zero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .table-zero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .target-banner-zero.show,
  .battle-banner-zero.show,
  .toast-zero.show {
    position: sticky;
    top: 4px;
    z-index: 4200;
    max-width: calc(100vw - 10px);
    margin: 0 auto 4px;
    padding: 6px 9px;
    border-radius: 14px;
  }

  .target-banner-zero span,
  .battle-banner-zero span,
  .toast-zero span {
    white-space: normal !important;
    line-height: 1.22;
  }

  #boardZero {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 5px !important;
    overflow: visible !important;
    transform: none !important;
    transform-origin: center top !important;
    perspective: none !important;
  }

  .seat-zero {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  .seat-zero.opponent {
    grid-template-rows: var(--opponent-hand-h) auto 14px !important;
  }

  .seat-zero.own {
    grid-template-rows: 14px auto var(--own-hand-h) !important;
  }

  .seat-head-zero {
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 6px !important;
  }

  .seat-name-zero strong,
  .seat-counts-zero span {
    font-size: 9px !important;
  }

  .seat-zero.opponent .playmat-scroll-zero,
  .seat-zero.own .playmat-scroll-zero,
  .playmat-scroll-zero {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .playmat-zero {
    min-height: 285px !important;
    height: auto !important;
    gap: 3px !important;
    padding: 3px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .playmat-zero.own-mat-zero {
    grid-template-columns: minmax(78px, 24vw) minmax(0, 1fr) minmax(66px, 19vw) !important;
    grid-template-rows: minmax(105px, auto) minmax(92px, auto) minmax(70px, auto) !important;
    grid-template-areas:
      "shield battle piles"
      "shield resource piles"
      "resdeck resource piles" !important;
  }

  .playmat-zero.opponent-mat-zero {
    grid-template-columns: minmax(66px, 19vw) minmax(0, 1fr) minmax(78px, 24vw) !important;
    grid-template-rows: minmax(105px, auto) minmax(92px, auto) minmax(70px, auto) !important;
    grid-template-areas:
      "piles battle shield"
      "piles resource shield"
      "piles resource resdeck" !important;
  }

  .zone-zero,
  .pile-zone-zero,
  .base-box-zero,
  .shield-box-zero {
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .zone-title-zero,
  .pile-title-zero,
  .sub-label-zero {
    font-size: 7.8px !important;
    height: 12px !important;
    line-height: 1 !important;
  }

  .battle-row-zero {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-height: calc(var(--board-card-h) + 26px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 18px 5px 5px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .battle-row-zero .card-zero,
  .battle-single-unit-zero,
  .linked-unit-zero {
    flex-shrink: 0 !important;
  }

  .card-row-zero,
  .base-row-zero {
    min-height: calc(var(--board-card-h) + 14px) !important;
    gap: 3px !important;
    padding: 16px 3px 3px !important;
    overflow: visible !important;
  }

  .base-row-zero .card-zero,
  .pile-body-zero .card-zero,
  .small-card-zero {
    width: min(var(--board-card-w), 100%) !important;
    flex-basis: min(var(--board-card-w), 100%) !important;
  }

  .shield-layout-zero,
  .playmat-zero.opponent-mat-zero .shield-layout-zero {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(calc(var(--board-card-h) + 14px), .46fr) minmax(112px, .54fr) !important;
    gap: 2px !important;
  }

  .shield-slots-zero {
    --shield-landscape-w: calc(var(--board-card-h) * .96);
    --shield-landscape-h: calc(var(--board-card-w) * .96);
    --shield-stack-step: calc(var(--shield-landscape-h) * .22);
  }

  .resource-area-zero .resource-row-zero {
    min-height: calc(var(--board-card-h) + 34px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .resource-area-zero > .zone-title-zero {
    width: 48px !important;
    font-size: 7.6px !important;
  }

  .resource-counts-zero {
    left: 54px !important;
    right: 4px !important;
    gap: 2px !important;
  }

  .seat-zero.opponent .resource-counts-zero {
    left: 4px !important;
    right: 54px !important;
  }

  .resource-count-pill-zero {
    min-width: 36px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
  }

  .hand-zone-zero {
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .seat-zero.own .hand-zone-zero {
    transform: none !important;
  }

  .seat-zero.opponent .hand-zone-zero {
    transform: none !important;
    z-index: 24;
  }

  .hand-row-zero {
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 12px 6px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .hand-row-zero .hand-card-zero,
  .seat-zero.own .hand-card-zero {
    flex-shrink: 0 !important;
  }

  .seat-zero.opponent .hand-card-zero {
    flex-basis: var(--hand-card-w) !important;
    width: var(--hand-card-w) !important;
    min-width: var(--hand-card-w) !important;
  }

  .board-center-phase-slot-zero {
    min-height: auto !important;
    padding: 2px !important;
    position: sticky !important;
    top: 4px !important;
    z-index: 3900 !important;
  }

  .board-center-phase-slot-zero .phase-menu-zero,
  .board-center-phase-slot-zero .phase-menu-zero.collapsed,
  .board-center-phase-slot-zero .phase-menu-zero:not(.collapsed),
  .phase-menu-zero.center-divider-zero {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 5px !important;
  }

  .board-center-phase-slot-zero .control-row-zero {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .board-center-phase-slot-zero .phase-menu-state-zero,
  .board-center-phase-slot-zero .phase-menu-actions-zero,
  .board-center-phase-slot-zero .compact-turn-state-zero {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 4px !important;
  }

  .board-center-phase-slot-zero .phase-menu-actions-zero {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  .turn-status-zero,
  .timing-status-zero {
    min-height: 26px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    flex: 1 1 130px !important;
    width: auto !important;
  }

  .turn-status-zero strong,
  .timing-status-zero strong {
    font-size: 10.5px !important;
  }

  .turn-status-zero .turn-no-zero,
  .timing-status-zero span {
    font-size: 8px !important;
  }

  .board-center-phase-slot-zero .room-btn-zero,
  .board-center-phase-slot-zero .pill-zero,
  .board-center-phase-slot-zero .phase-chip-zero {
    min-height: 26px !important;
    min-width: 38px !important;
    padding: 5px 7px !important;
    font-size: 8.7px !important;
  }

  .board-center-phase-slot-zero .action-skip-cycle-zero {
    flex: 1 1 92px !important;
  }

  .menu-zero.action-drawer-zero {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: min(420px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 42svh !important;
    padding: 8px !important;
    border-radius: 18px !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  .menu-zero.action-drawer-zero.collapsed {
    transform: translateX(-50%) translateY(calc(100% - 38px)) !important;
    opacity: .92 !important;
  }

  .menu-zero.action-drawer-zero .action-drawer-toggle-zero {
    top: -18px !important;
    right: 14px !important;
    width: 64px !important;
    height: 30px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(8,13,25,.98) !important;
    transform: none !important;
  }

  .menu-zero.action-drawer-zero:not(.collapsed) .action-drawer-toggle-zero {
    transform: rotate(180deg) !important;
  }

  .action-drawer-body-zero {
    max-height: calc(42svh - 18px) !important;
    overflow: auto !important;
  }

  .action-drawer-buttons-zero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .menu-zero button[data-menu-action] {
    min-height: 38px !important;
    text-align: center !important;
    font-size: 11px !important;
    padding: 8px 6px !important;
  }

  .sidebar-zero {
    display: grid !important;
    grid-template-rows: minmax(160px, auto) minmax(160px, auto) !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .side-panel-zero {
    min-height: 180px !important;
    max-height: 42svh !important;
    overflow: hidden !important;
  }

  .detail-zero,
  .log-zero {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .zone-modal-backdrop-zero,
  .settings-backdrop-zero,
  .confirm-modal-backdrop-zero,
  .dice-modal-backdrop-zero {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  .zone-modal-zero,
  .settings-modal-zero,
  .confirm-modal-zero,
  .dice-modal-zero {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px) !important;
    border-radius: 18px !important;
  }

  .zone-modal-body-zero {
    grid-template-columns: 1fr !important;
  }

  .zone-modal-grid-zero {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
    gap: 8px !important;
    padding: 4px !important;
  }

  .zone-modal-card-wrap-zero .card-zero {
    width: min(var(--own-hand-card-w), 96px) !important;
    flex-basis: min(var(--own-hand-card-w), 96px) !important;
  }

  .zone-modal-detail-zero {
    max-height: 30svh !important;
  }
}

@media (max-width: 480px) {
  :root {
    --board-card-w: clamp(46px, 12.5vw, 58px);
    --hand-card-w: clamp(30px, 8vw, 42px);
    --own-hand-card-w: clamp(66px, 19vw, 88px);
    --own-hand-h: clamp(104px, 23svh, 142px);
  }

  .room-shell-zero { padding: 3px !important; }

  .playmat-zero {
    min-height: 268px !important;
  }

  .playmat-zero.own-mat-zero {
    grid-template-columns: minmax(70px, 23vw) minmax(0, 1fr) minmax(58px, 18vw) !important;
  }

  .playmat-zero.opponent-mat-zero {
    grid-template-columns: minmax(58px, 18vw) minmax(0, 1fr) minmax(70px, 23vw) !important;
  }

  .battle-row-zero {
    min-height: calc(var(--board-card-h) + 20px) !important;
  }

  .action-drawer-buttons-zero {
    grid-template-columns: 1fr !important;
  }

  .side-panel-zero {
    max-height: 36svh !important;
  }
}

@media (max-width: 820px) and (orientation: landscape) {
  :root {
    --board-card-w: clamp(46px, 8svh, 62px);
    --own-hand-card-w: clamp(70px, 13svh, 92px);
    --own-hand-h: clamp(98px, 23svh, 132px);
    --opponent-hand-h: clamp(34px, 9svh, 48px);
  }

  .room-shell-zero {
    min-height: 100svh !important;
  }

  .sidebar-zero {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(130px, 32svh) !important;
  }

  .side-panel-zero {
    min-height: 130px !important;
    max-height: 32svh !important;
  }
}



/* v140: phone duel-board correction.
   Keep desktop unchanged, but on phones the two boards must face the center line:
   opponent Battle Area sits nearest the center menu, own Battle Area also sits nearest the center menu.
   Also clamp every mobile playmat to the viewport so P1 cannot drift off-screen. */
@media (max-width: 860px), (max-height: 560px) and (orientation: landscape) {
  :root {
    --room-mobile-pad: 4px;
    --board-card-w: clamp(46px, 12.2vw, 66px);
    --hand-card-w: clamp(30px, 7.8vw, 44px);
    --own-hand-card-w: clamp(64px, 18vw, 98px);
  }

  html,
  body.gundam-room-zero {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.gundam-room-zero,
  body.gundam-room-zero * {
    box-sizing: border-box;
  }

  .room-shell-zero,
  .room-grid-zero,
  .table-zero,
  #boardZero,
  .seat-zero,
  .playmat-scroll-zero,
  .playmat-zero,
  .hand-zone-zero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-shell-zero {
    padding-left: var(--room-mobile-pad) !important;
    padding-right: var(--room-mobile-pad) !important;
    overflow-x: hidden !important;
  }

  #boardZero {
    justify-items: stretch !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }

  .seat-zero {
    overflow: hidden !important;
  }

  .playmat-scroll-zero {
    overflow: hidden !important;
  }

  .playmat-zero {
    overflow: hidden !important;
    contain: layout paint;
  }

  /* Own board: Battle row is at the TOP, closest to the center divider. */
  .playmat-zero.own-mat-zero {
    grid-template-columns: minmax(64px, 22%) minmax(0, 1fr) minmax(56px, 18%) !important;
    grid-template-rows: minmax(98px, auto) minmax(86px, auto) minmax(66px, auto) !important;
    grid-template-areas:
      "shield battle piles"
      "shield resource piles"
      "resdeck resource piles" !important;
  }

  /* Opponent board: mirror own board vertically. Battle row is at the BOTTOM,
     closest to the center divider, so the two players are facing each other. */
  .playmat-zero.opponent-mat-zero {
    grid-template-columns: minmax(56px, 18%) minmax(0, 1fr) minmax(64px, 22%) !important;
    grid-template-rows: minmax(66px, auto) minmax(86px, auto) minmax(98px, auto) !important;
    grid-template-areas:
      "piles resource shield"
      "piles resource shield"
      "resdeck battle shield" !important;
  }

  .battle-area-zero,
  .resource-area-zero,
  .shield-area-zero,
  .resource-deck-area-zero,
  .pile-column-zero {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .battle-row-zero,
  .resource-row-zero,
  .hand-row-zero {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .battle-row-zero {
    justify-content: flex-start !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .battle-row-zero .empty-zone-zero,
  .resource-row-zero .empty-zone-zero,
  .hand-row-zero .detail-empty-zero {
    min-width: 0 !important;
    width: 100% !important;
  }

  .board-center-phase-slot-zero {
    max-width: 100% !important;
    overflow: visible !important;
  }

  .phase-menu-zero.center-divider-zero {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* v140: real phone landscape mode.
   Many phones are wider than 820px in landscape, so width-only media queries miss them.
   Keep the center menu in normal document flow and shrink hand/board heights so the board remains playable. */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --room-mobile-pad: 3px;
    --board-card-w: clamp(38px, 8.8svh, 54px);
    --hand-card-w: clamp(26px, 6.5svh, 38px);
    --own-hand-card-w: clamp(54px, 13svh, 76px);
    --own-hand-h: clamp(74px, 21svh, 104px);
    --opponent-hand-h: clamp(26px, 8svh, 40px);
    --gap: 3px;
  }

  body.gundam-room-zero {
    overflow-y: auto !important;
  }

  .room-topbar-zero {
    min-height: 0 !important;
    padding: 3px 5px !important;
    gap: 5px !important;
    position: static !important;
  }

  .room-brand-zero img {
    height: 24px !important;
    max-width: 96px !important;
  }

  .room-title-zero strong { font-size: 10px !important; }
  .room-title-zero span { display: none !important; }

  .room-actions-zero {
    gap: 3px !important;
  }

  .room-actions-zero .room-btn-zero {
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
  }

  .room-shell-zero {
    min-height: 100svh !important;
    padding-top: 2px !important;
  }

  #boardZero {
    gap: 3px !important;
  }

  .seat-head-zero {
    height: 12px !important;
    min-height: 12px !important;
  }

  .seat-name-zero strong,
  .seat-counts-zero span {
    font-size: 7.8px !important;
  }

  .seat-zero.opponent {
    grid-template-rows: var(--opponent-hand-h) auto 12px !important;
  }

  .seat-zero.own {
    grid-template-rows: 12px auto var(--own-hand-h) !important;
  }

  .playmat-zero {
    min-height: 206px !important;
    padding: 2px !important;
    gap: 2px !important;
    border-radius: 12px !important;
  }

  .playmat-zero.own-mat-zero {
    grid-template-rows: minmax(76px, auto) minmax(64px, auto) minmax(48px, auto) !important;
  }

  .playmat-zero.opponent-mat-zero {
    grid-template-rows: minmax(48px, auto) minmax(64px, auto) minmax(76px, auto) !important;
  }

  .battle-row-zero {
    min-height: calc(var(--board-card-h) + 14px) !important;
    padding-top: 13px !important;
    padding-bottom: 3px !important;
    gap: 3px !important;
  }

  .resource-area-zero .resource-row-zero,
  .card-row-zero,
  .base-row-zero {
    min-height: calc(var(--board-card-h) + 12px) !important;
    padding-top: 13px !important;
    padding-bottom: 2px !important;
  }

  .hand-zone-zero {
    min-height: 0 !important;
  }

  .hand-title-zero {
    height: 13px !important;
    min-height: 13px !important;
    font-size: 7.5px !important;
  }

  .hand-row-zero {
    padding: 9px 4px 4px !important;
    gap: 3px !important;
  }

  .board-center-phase-slot-zero {
    position: static !important;
    top: auto !important;
    z-index: 5 !important;
    padding: 1px !important;
  }

  .board-center-phase-slot-zero .phase-menu-zero,
  .phase-menu-zero.center-divider-zero {
    padding: 3px !important;
    border-radius: 12px !important;
  }

  .turn-status-zero,
  .timing-status-zero {
    min-height: 21px !important;
    padding: 3px 6px !important;
    flex: 1 1 92px !important;
  }

  .turn-status-zero strong,
  .timing-status-zero strong { font-size: 8.8px !important; }
  .turn-status-zero .turn-no-zero,
  .timing-status-zero span { font-size: 7px !important; }

  .board-center-phase-slot-zero .room-btn-zero,
  .board-center-phase-slot-zero .pill-zero,
  .board-center-phase-slot-zero .phase-chip-zero {
    min-height: 22px !important;
    padding: 3px 5px !important;
    font-size: 7.8px !important;
  }

  .target-banner-zero.show,
  .battle-banner-zero.show,
  .toast-zero.show {
    position: static !important;
    margin-bottom: 3px !important;
    padding: 4px 7px !important;
    border-radius: 10px !important;
  }

  .sidebar-zero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: minmax(96px, 26svh) !important;
    gap: 4px !important;
  }

  .side-panel-zero {
    min-height: 96px !important;
    max-height: 26svh !important;
  }
}


/* v141: mobile hand overflow + full-height card detail polish.
   Keep desktop unchanged. On phone layouts the hand row must scroll inside the
   viewport instead of widening the page, and Card Detail should be a real
   full-height inspection panel below the duel board. */
@media (max-width: 860px), (max-height: 560px) and (orientation: landscape) {
  html,
  body.gundam-room-zero,
  .room-shell-zero,
  .room-grid-zero,
  .table-zero,
  #boardZero,
  .seat-zero,
  .hand-zone-zero {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .hand-zone-zero,
  .seat-zero.own .hand-zone-zero,
  .seat-zero.opponent .hand-zone-zero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    contain: layout paint;
  }

  .hand-row-zero,
  .seat-zero.own .hand-row-zero,
  .seat-zero.opponent .hand-row-zero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-left: 6px !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
    scroll-padding-inline: 8px;
  }

  .hand-row-zero .hand-card-zero,
  .seat-zero.own .hand-card-zero,
  .seat-zero.opponent .hand-card-zero {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
  }

  .seat-zero.own .hand-card-zero {
    width: var(--own-hand-card-w) !important;
    min-width: var(--own-hand-card-w) !important;
    max-width: var(--own-hand-card-w) !important;
    flex-basis: var(--own-hand-card-w) !important;
  }

  .seat-zero.opponent .hand-card-zero {
    width: var(--hand-card-w) !important;
    min-width: var(--hand-card-w) !important;
    max-width: var(--hand-card-w) !important;
    flex-basis: var(--hand-card-w) !important;
  }

  .hand-row-zero::after {
    content: "";
    flex: 0 0 max(10px, env(safe-area-inset-right));
    width: max(10px, env(safe-area-inset-right));
    height: 1px;
  }

  .sidebar-zero {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .side-panel-zero.detail-panel-zero {
    height: calc(100svh - 12px) !important;
    min-height: calc(100svh - 12px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .side-panel-zero.detail-panel-zero > h2 {
    flex: 0 0 auto !important;
  }

  .detail-panel-zero .detail-zero {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .detail-panel-zero .detail-card-zero img {
    max-height: 58svh !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .side-panel-zero.log-panel-zero {
    min-height: 180px !important;
    max-height: 46svh !important;
    overflow: hidden !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .sidebar-zero {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  .side-panel-zero.detail-panel-zero {
    height: calc(100svh - 8px) !important;
    min-height: calc(100svh - 8px) !important;
  }

  .detail-panel-zero .detail-card-zero img {
    max-height: 52svh !important;
  }

  .side-panel-zero.log-panel-zero {
    min-height: 150px !important;
    max-height: 50svh !important;
  }
}

/* v142: high-contrast BASE/SHIELD zone badges across all themes/devices. */
.base-box-zero > .sub-label-zero,
.shield-box-zero > .sub-label-zero,
.playmat-zero .base-box-zero > .sub-label-zero,
.playmat-zero .shield-box-zero > .sub-label-zero,
body[class*="board-theme-"] .base-box-zero > .sub-label-zero,
body[class*="board-theme-"] .shield-box-zero > .sub-label-zero {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  left: 4px !important;
  right: auto !important;
  top: 3px !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  height: auto !important;
  min-height: 13px !important;
  padding: 1px 5px 2px !important;
  border: 1.5px solid #fff !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: rgba(0,0,0,.92) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.95) !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  pointer-events: none !important;
  z-index: 80 !important;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .base-box-zero > .sub-label-zero,
  .shield-box-zero > .sub-label-zero,
  body[class*="board-theme-"] .base-box-zero > .sub-label-zero,
  body[class*="board-theme-"] .shield-box-zero > .sub-label-zero {
    top: 3px !important;
    min-height: 12px !important;
    padding: 1px 4px 2px !important;
    border-radius: 5px !important;
    font-size: 7.6px !important;
  }
}

/* v165: visual token/card pending-choice modal for effects like ST04-012 Striker Pack. */
.pending-choice-help-zero {
  grid-column: 1 / -1;
  width: min(100%, 980px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15,23,42,.86), rgba(2,6,23,.78));
  padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: grid;
  gap: 4px;
  color: var(--room-text);
}
.pending-choice-help-zero strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
.pending-choice-help-zero span {
  color: var(--room-muted);
  font-size: 12px;
  line-height: 1.35;
}
.pending-choice-card-wrap-zero {
  position: relative;
  padding: 4px !important;
  border-radius: 18px;
  border-color: rgba(147,197,253,.16) !important;
  background: radial-gradient(circle at 50% 10%, rgba(96,165,250,.13), rgba(15,23,42,.58) 54%, rgba(2,6,23,.72)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.24);
}
.pending-choice-card-wrap-zero:hover {
  border-color: rgba(191,219,254,.55) !important;
  box-shadow: inset 0 0 0 1px rgba(147,197,253,.18), 0 22px 52px rgba(37,99,235,.24), 0 0 32px rgba(59,130,246,.18) !important;
}
.pending-choice-card-button-zero {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 0 10px;
  margin: 0;
  cursor: pointer;
  text-align: center;
}
.pending-choice-card-button-zero .card-zero {
  cursor: pointer;
}
.pending-choice-pick-zero {
  position: absolute;
  right: 8px;
  top: 8px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 10px;
  color: #06111f;
  background: linear-gradient(135deg, #dbeafe, #86efac);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 18px rgba(125,211,252,.25);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
  pointer-events: none;
}
.pending-choice-title-zero {
  width: calc(100% - 14px);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.18;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.pending-choice-desc-zero {
  width: calc(100% - 18px);
  color: rgba(226,232,240,.78);
  font-size: 11px;
  line-height: 1.25;
}
.pending-choice-fallback-zero {
  min-height: 220px;
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.22);
  color: var(--room-muted);
  padding: 16px;
}

/* v265 minimal room report tools */
.bug-report-section-zero {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
}
.bug-report-summary-zero {
  cursor: pointer;
  list-style: none;
}
.bug-report-summary-zero::-webkit-details-marker { display: none; }
.bug-report-summary-zero::after {
  content: ' +';
  color: rgba(234, 242, 255, .55);
}
.bug-report-section-zero[open] .bug-report-summary-zero::after { content: ' -'; }
.bug-report-grid-zero {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.bug-report-grid-zero label {
  display: grid;
  gap: 6px;
  color: rgba(234, 242, 255, .72);
  font-size: 11px;
  font-weight: 700;
}
.bug-report-grid-zero select,
.bug-report-grid-zero textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(3, 8, 18, .72);
  color: #f7fbff;
  border-radius: 12px;
  padding: 9px 10px;
  font: inherit;
  outline: none;
}
.bug-report-grid-zero textarea {
  min-height: 86px;
  resize: vertical;
}
.bug-report-wide-zero {
  grid-column: auto;
}
.bug-report-status-zero {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(234, 242, 255, .72);
}
.bug-report-status-zero.success { color: #9effc2; }
.bug-report-status-zero.error { color: #ffb2b2; }
.bug-report-status-zero.info { color: #b9d4ff; }
@media (max-width: 700px) {
  .bug-report-grid-zero { grid-template-columns: 1fr; }
}


/* v270 emergency rollback for v268/v269 board-fit wrapper.
   The transformed wrapper broke attack target selection and made the SVG line draw from bad coordinates.
   Keep the old stable #boardZero DOM/attack math. Only use normal CSS constraints here. */
.board-viewport-zero,
.board-fit-zero {
  display: contents !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  transform: none !important;
}
#boardZero {
  pointer-events: auto;
}
.attack-indicator-overlay-zero {
  pointer-events: none !important;
}

@media (min-width: 901px) {
  .table-zero {
    /* Do not add an extra clipping wrapper around the playmat; the room shell is the only crop boundary. */
    overflow: hidden;
  }
}

/* v279: clear top/bottom choice layout for one-card deck look effects such as Shuji Ito. */
.pending-choice-topbottom-zero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.pending-choice-topbottom-actions-zero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 210px;
}
.pending-choice-topbottom-btn-zero {
  width: 100%;
}
.topbottom-preview-zero {
  max-width: 180px;
}

/* v280 multi-target UX: selected effect targets are distinct from merely legal targets. */
.card-zero.selected-target-zero,
.battle-single-unit-zero.selected-target-zero .battle-single-stage-zero,
.linked-unit-zero.selected-target-zero .linked-unit-stage-zero {
    outline: 4px solid rgba(255, 213, 74, .98);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.75), 0 0 18px rgba(255,213,74,.75);
}
.card-zero.selected-target-zero::after {
    content: "SELECTED";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.82);
    border: 1px solid rgba(255,255,255,.65);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    pointer-events: none;
    z-index: 20;
}

/* v283 deck-search UX: one selected card, other checked cards auto-bottom. */
.deck-choice-card-wrap-zero.disabled {
  opacity: .62;
  filter: grayscale(.18);
}
.deck-choice-card-wrap-zero.disabled .deck-choice-card-button-zero {
  cursor: not-allowed;
}
.deck-choice-card-wrap-zero.disabled .deck-choice-rank-zero {
  background: rgba(71,85,105,.92);
  color: rgba(226,232,240,.92);
}
.deck-choice-card-wrap-zero.single-pick:not(.selected):not(.disabled) .deck-choice-rank-zero {
  min-width: 44px;
  font-size: 11px;
}

/* v337 pending Trash/zone target picker clarity */
.zone-modal-card-wrap-zero.selectable-target-zero {
  position: relative;
  border-color: rgba(98, 235, 255, .58) !important;
  background: rgba(42, 205, 255, .08) !important;
  box-shadow: 0 0 0 1px rgba(98, 235, 255, .22), 0 0 16px rgba(58, 201, 255, .18) !important;
}
.zone-modal-card-wrap-zero.selectable-target-zero:hover {
  border-color: rgba(122, 255, 198, .92) !important;
  background: rgba(74, 255, 177, .12) !important;
  box-shadow: 0 0 0 1px rgba(122, 255, 198, .35), 0 0 24px rgba(74, 255, 177, .28) !important;
}
.zone-modal-card-wrap-zero.not-selectable-target-zero {
  position: relative;
  opacity: .36;
  filter: grayscale(.62) saturate(.55);
}
.zone-modal-card-wrap-zero.not-selectable-target-zero .card-zero {
  cursor: not-allowed;
}
.zone-modal-card-wrap-zero.selected-target-wrap-zero {
  opacity: 1;
  filter: none;
  border-color: rgba(255, 213, 74, .98) !important;
  background: rgba(255, 213, 74, .14) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 28px rgba(255, 213, 74, .62) !important;
}
.zone-target-state-zero {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  z-index: 35;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .06em;
  color: #041018;
  background: rgba(98, 235, 255, .95);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
  pointer-events: none;
}
.zone-target-state-zero.selected {
  background: rgba(255, 213, 74, .98);
  color: #201400;
}
.zone-target-state-zero.disabled {
  background: rgba(20, 24, 34, .9);
  color: rgba(220,230,245,.72);
  border-color: rgba(255,255,255,.2);
}

/* v360 Battle Royale board UI foundation.
   Normal 1v1 layout is untouched. These rules only apply when JS marks body.battle-royale-room-zero. */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
}

body.battle-royale-room-zero #boardZero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

.br-turn-strip-zero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(120, 220, 255, .25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(12, 22, 42, .92), rgba(7, 10, 24, .88));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 0 24px rgba(60, 160, 255, .06);
}

.br-turn-title-zero {
  color: rgba(226, 246, 255, .9);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.br-turn-order-zero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.br-turn-chip-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 5px 8px;
  border: 1px solid rgba(160, 210, 255, .24);
  border-radius: 999px;
  color: rgba(218, 237, 255, .82);
  background: rgba(10, 20, 40, .74);
  font-weight: 850;
}

.br-turn-chip-zero.active {
  color: #07111d;
  border-color: rgba(150, 245, 255, .95);
  background: linear-gradient(135deg, #76f7ff, #93ffbd);
  box-shadow: 0 0 20px rgba(96, 235, 255, .35);
}

.br-turn-chip-zero.me {
  border-color: rgba(255, 224, 118, .95);
}

.br-turn-arrow-zero,
.br-turn-direction-zero {
  color: rgba(196, 220, 255, .58);
  font-weight: 800;
  text-transform: capitalize;
}

.br-board-zero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  height: min(72vh, 760px);
}

.br-board-zero.br-count-3-zero .br-seat-index-0-zero {
  grid-column: 1 / -1;
}

.br-seat-zero {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(130, 210, 255, .18);
  border-radius: 16px;
  background: rgba(3, 8, 20, .34);
  box-shadow: inset 0 0 24px rgba(64, 160, 255, .035);
}

.br-seat-zero .seat-head-zero {
  padding: 5px 7px;
  min-height: 0;
}

.br-seat-zero .seat-name-zero strong {
  font-size: clamp(10px, .9vw, 13px);
}

.br-seat-zero .seat-name-zero span,
.br-seat-zero .seat-counts-zero span {
  font-size: clamp(9px, .72vw, 11px);
}

.br-seat-zero .hand-zone-zero {
  margin: 0 6px 5px;
  padding: 4px;
}

.br-seat-zero .hand-row-zero {
  min-height: 48px;
  max-height: 72px;
  overflow: hidden;
}

.br-seat-zero .hand-card-zero {
  width: clamp(28px, 3.2vw, 44px);
}

.br-seat-zero .playmat-scroll-zero {
  height: calc(100% - 102px);
  min-height: 150px;
  overflow: hidden;
}

.br-seat-zero .playmat-zero {
  --board-card-w: clamp(30px, 3.15vw, 46px);
  --board-card-h: calc(var(--board-card-w) * 1.40);
  min-height: 100%;
  padding: 5px;
  gap: 4px;
}

.br-seat-zero .zone-title-zero,
.br-seat-zero .sub-label-zero,
.br-seat-zero .hand-title-zero {
  font-size: clamp(8px, .65vw, 10px);
}

.br-seat-zero .card-caption-zero {
  display: none;
}

.br-seat-zero .live-stat-badge-zero {
  font-size: clamp(8px, .62vw, 10px);
  padding: 1px 4px;
}

.br-seat-placeholder-zero {
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px dashed rgba(150, 210, 255, .2);
  border-radius: 16px;
  color: rgba(210, 235, 255, .42);
  background: rgba(255, 255, 255, .025);
  font-weight: 800;
}

body.battle-royale-room-zero .board-center-phase-slot-zero {
  min-height: auto;
}

body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  min-height: auto;
  padding: 7px 10px;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr;
  }
  .br-board-zero { height: auto; min-height: 720px; }
  .br-seat-zero .playmat-scroll-zero { min-height: 190px; height: auto; }
}

@media (max-width: 760px) {
  .br-board-zero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .br-board-zero.br-count-3-zero .br-seat-index-0-zero { grid-column: auto; }
  .br-seat-zero .playmat-scroll-zero { min-height: 210px; }
  .br-seat-zero .playmat-zero {
    --board-card-w: clamp(34px, 9vw, 54px);
  }
  .br-turn-strip-zero {
    align-items: stretch;
    flex-direction: column;
  }
  .br-turn-order-zero { justify-content: flex-start; }
}

/* v361 Battle Royale attack opponent chooser */
.br-attack-opponents-zero{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:8px 0 0;
}
.br-attack-opponents-zero .room-btn-zero{
  min-width:110px;
}

/* v365 Battle Royale eliminated-player clarity */
.battle-royale-room-zero .br-seat-zero.eliminated-player {
  opacity: 0.62;
  filter: grayscale(0.8);
  position: relative;
}
.battle-royale-room-zero .br-seat-zero.eliminated-player .card-zero {
  pointer-events: none;
}
.battle-royale-room-zero .br-eliminated-badge-zero {
  border: 1px solid rgba(255, 92, 92, 0.85);
  color: #ffd9d9;
  background: rgba(150, 0, 0, 0.35);
  box-shadow: 0 0 12px rgba(255, 48, 48, 0.2);
}
.battle-royale-room-zero .br-eliminated-overlay-zero {
  position: absolute;
  top: 52px;
  right: 14px;
  z-index: 12;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 92, 92, 0.78);
  color: #fff1f1;
  background: rgba(90, 0, 0, 0.58);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.battle-royale-room-zero .br-turn-chip-zero.eliminated {
  opacity: 0.48;
  text-decoration: line-through;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}

/* v367 Battle Royale final foundation polish */
.battle-royale-room-zero .br-seat-zero.winner-player {
  border-color: rgba(255, 215, 92, .9);
  box-shadow: 0 0 0 1px rgba(255, 215, 92, .35), 0 0 28px rgba(255, 215, 92, .18);
}
.battle-royale-room-zero .br-winner-badge-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #1b1200;
  background: linear-gradient(135deg, #fff3a8, #ffd44f);
  box-shadow: 0 0 16px rgba(255, 212, 79, .35);
}
.battle-royale-room-zero .br-turn-title-zero {
  white-space: nowrap;
}
.battle-royale-room-zero .br-seat-zero.eliminated-player .hand-row-zero,
.battle-royale-room-zero .br-seat-zero.eliminated-player .playmat-zero {
  pointer-events: none;
}

/* v374 Battle Royale layout readability fix.
   Use a BR-specific compact board instead of shrinking the full 1v1 board into equal tiny cells. */
body.battle-royale-room-zero #boardZero {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.br-board-zero {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 10px;
  height: auto;
  min-height: min(68vh, 720px);
}

.br-board-zero.br-opponents-1-zero { grid-template-columns: minmax(0, 1fr); }
.br-board-zero.br-opponents-2-zero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-board-zero.br-opponents-3-zero { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.br-board-zero .br-seat-zero.own {
  grid-column: 1 / -1;
  min-height: clamp(300px, 39vh, 460px);
  order: 10;
}

.br-board-zero .br-seat-zero.opponent {
  min-height: clamp(210px, 25vh, 310px);
}

.br-seat-zero {
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.br-seat-zero .seat-head-zero {
  flex: 0 0 auto;
  padding: 7px 9px;
}

.br-seat-zero .playmat-scroll-zero {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.br-seat-zero.own .playmat-scroll-zero {
  min-height: 210px;
}

.br-seat-zero.opponent .playmat-scroll-zero {
  min-height: 150px;
}

.br-seat-zero .playmat-zero {
  min-height: 100%;
}

.br-seat-zero.own .playmat-zero {
  --board-card-w: clamp(42px, 4.6vw, 72px);
  padding: 8px;
  gap: 6px;
}

.br-seat-zero.opponent .playmat-zero {
  --board-card-w: clamp(30px, 3vw, 46px);
  padding: 6px;
  gap: 4px;
}

.br-seat-zero.own .hand-zone-zero {
  flex: 0 0 auto;
  margin: 6px 8px 8px;
  padding: 7px;
  border-color: rgba(255, 221, 112, .25);
  background: rgba(9, 13, 28, .78);
}

.br-seat-zero.own .hand-row-zero {
  min-height: clamp(88px, 13vh, 150px);
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: center;
}

.br-seat-zero.own .hand-card-zero {
  width: clamp(54px, 6.2vw, 92px);
}

.br-hidden-hand-zero {
  flex: 0 0 auto;
  margin: 5px 8px 8px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(160, 190, 255, .16);
  border-radius: 12px;
  color: rgba(220, 234, 255, .68);
  background: rgba(3, 7, 18, .54);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.br-hidden-hand-zero strong {
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #07111d;
  background: linear-gradient(135deg, #76f7ff, #93ffbd);
  box-shadow: 0 0 14px rgba(100, 240, 255, .24);
}

.br-seat-placeholder-zero { display: none; }

@media (max-width: 1180px) {
  .br-board-zero,
  .br-board-zero.br-opponents-2-zero,
  .br-board-zero.br-opponents-3-zero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .br-board-zero .br-seat-zero.own { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .br-board-zero,
  .br-board-zero.br-opponents-1-zero,
  .br-board-zero.br-opponents-2-zero,
  .br-board-zero.br-opponents-3-zero {
    grid-template-columns: 1fr;
  }
  .br-board-zero .br-seat-zero.own { min-height: 430px; }
  .br-seat-zero.own .hand-row-zero { justify-content: flex-start; }
  .br-seat-zero.own .hand-card-zero { width: clamp(58px, 17vw, 82px); }
}

/* v376 Battle Royale 2x2 couch-grid layout restore.
   Reverts the bad full-width compact v375 direction and keeps the normal right card detail/log sidebar.
   BR only: normal 1v1 layout is untouched. */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
}

body.battle-royale-room-zero #boardZero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
}

body.battle-royale-room-zero .detail-panel-zero {
  display: flex;
}

body.battle-royale-room-zero .board-center-phase-slot-zero {
  display: flex;
  min-height: auto;
}

body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  min-height: auto;
  padding: 7px 10px;
}

.br-board-zero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 10px;
  height: min(74vh, 790px);
  min-height: 620px;
  overflow: hidden;
}

.br-board-zero.br-count-3-zero {
  grid-template-rows: minmax(250px, 1fr) minmax(300px, 1.08fr);
}

.br-board-zero.br-count-3-zero .br-seat-index-2-zero {
  grid-column: 1 / -1;
}

.br-seat-zero {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(130, 210, 255, .2);
  background: rgba(3, 8, 20, .42);
  box-shadow: inset 0 0 24px rgba(64, 160, 255, .04), 0 12px 30px rgba(0,0,0,.18);
}

.br-seat-zero .seat-head-zero {
  padding: 5px 7px;
  min-height: 26px;
}

.br-seat-zero .seat-name-zero strong {
  font-size: clamp(10px, .78vw, 12px);
}

.br-seat-zero .seat-name-zero span,
.br-seat-zero .seat-counts-zero span {
  font-size: clamp(8px, .62vw, 10px);
}

.br-seat-zero .playmat-scroll-zero {
  height: calc(100% - 86px);
  min-height: 152px;
  overflow: hidden;
}

.br-seat-zero .playmat-zero {
  --board-card-w: clamp(26px, 2.35vw, 40px);
  --board-card-h: calc(var(--board-card-w) * 1.40);
  min-height: 100%;
  padding: 5px;
  gap: 3px;
  transform-origin: center center;
}

.br-seat-zero .zone-title-zero,
.br-seat-zero .sub-label-zero,
.br-seat-zero .hand-title-zero {
  font-size: clamp(7px, .56vw, 9px);
}

.br-seat-zero .card-caption-zero {
  display: none;
}

.br-seat-zero .live-stat-badge-zero {
  font-size: clamp(7px, .55vw, 9px);
  padding: 1px 4px;
}

.br-seat-zero .hand-zone-zero {
  margin: 0 6px 5px;
  padding: 4px;
}

.br-seat-zero .hand-row-zero {
  min-height: 42px;
  max-height: 62px;
  overflow: hidden;
}

.br-seat-zero .hand-card-zero {
  width: clamp(24px, 2.45vw, 38px);
}

/* Couch/party layout orientation: top seats face down toward center; bottom seats face up.
   Only the board zones rotate, not the player name/status bar, so controls remain readable. */
.br-seat-zero.br-pos-top-left-zero .playmat-zero,
.br-seat-zero.br-pos-top-right-zero .playmat-zero {
  transform: rotate(180deg);
}
.br-seat-zero.br-pos-top-left-zero .playmat-zero .card-zero,
.br-seat-zero.br-pos-top-right-zero .playmat-zero .card-zero,
.br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-title-zero,
.br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-title-zero,
.br-seat-zero.br-pos-top-left-zero .playmat-zero .sub-label-zero,
.br-seat-zero.br-pos-top-right-zero .playmat-zero .sub-label-zero,
.br-seat-zero.br-pos-top-left-zero .playmat-zero .live-stat-badge-zero,
.br-seat-zero.br-pos-top-right-zero .playmat-zero .live-stat-badge-zero {
  transform: rotate(180deg);
}

/* Keep own visible hand readable even if the owner is placed in the top row by viewer/turn order. */
.br-seat-zero.own .hand-row-zero,
.br-seat-zero.own .hand-zone-zero {
  transform: none;
}

/* Opponent hands stay compact, not giant card-back rows. */
.br-hidden-hand-zero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  margin: 0 6px 6px;
  padding: 7px 10px;
  border: 1px solid rgba(120,210,255,.16);
  border-radius: 12px;
  color: rgba(220,238,255,.76);
  background: rgba(4, 12, 24, .74);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.br-hidden-hand-zero strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #06121a;
  background: #80fff2;
  box-shadow: 0 0 18px rgba(128,255,242,.28);
}

@media (max-width: 1260px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr;
  }
  body.battle-royale-room-zero .detail-panel-zero {
    display: none;
  }
  .br-board-zero {
    height: auto;
    min-height: 760px;
  }
}

@media (max-width: 760px) {
  .br-board-zero {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    min-height: 0;
  }
  .br-board-zero.br-count-3-zero .br-seat-index-2-zero { grid-column: auto; }
  .br-seat-zero .playmat-scroll-zero { min-height: 220px; height: auto; }
  .br-seat-zero .playmat-zero { --board-card-w: clamp(32px, 8vw, 48px); }
  .br-seat-zero.br-pos-top-left-zero .playmat-zero,
  .br-seat-zero.br-pos-top-right-zero .playmat-zero { transform: none; }
  .br-seat-zero.br-pos-top-left-zero .playmat-zero .card-zero,
  .br-seat-zero.br-pos-top-right-zero .playmat-zero .card-zero,
  .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-title-zero,
  .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-title-zero,
  .br-seat-zero.br-pos-top-left-zero .playmat-zero .sub-label-zero,
  .br-seat-zero.br-pos-top-right-zero .playmat-zero .sub-label-zero,
  .br-seat-zero.br-pos-top-left-zero .playmat-zero .live-stat-badge-zero,
  .br-seat-zero.br-pos-top-right-zero .playmat-zero .live-stat-badge-zero { transform: none; }
}

/* v377 Battle Royale couch-grid correction.
   Board area = fixed 2x2 table (P3/P4 top, P1/P2 bottom) with detail/log panel outside right.
   Cards/hands are scaled down so each player board stays inside its frame. */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) clamp(270px, 22vw, 340px) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.battle-royale-room-zero #boardZero {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .detail-panel-zero {
  display: flex !important;
  min-width: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .board-center-phase-slot-zero {
  display: flex !important;
  min-height: 0 !important;
  padding: 0 !important;
}
body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  min-height: 0 !important;
  padding: 6px 10px !important;
}

body.battle-royale-room-zero .br-turn-strip-zero {
  margin: 0 !important;
  padding: 8px 12px !important;
  min-height: 42px !important;
}

body.battle-royale-room-zero .br-board-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  height: clamp(560px, calc(100dvh - 132px), 820px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 2px !important;
}

body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-2-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-3-zero {
  grid-column: auto !important;
}

body.battle-royale-room-zero .br-seat-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) auto !important;
  background: rgba(3, 9, 20, .50) !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-head-zero {
  min-height: 0 !important;
  height: 24px !important;
  padding: 3px 6px !important;
  gap: 4px !important;
}
body.battle-royale-room-zero .br-seat-zero .seat-name-zero strong {
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1 !important;
}
body.battle-royale-room-zero .br-seat-zero .seat-name-zero span,
body.battle-royale-room-zero .br-seat-zero .seat-counts-zero span {
  font-size: clamp(7px, .58vw, 9px) !important;
  line-height: 1 !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-scroll-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-zero {
  --board-card-w: clamp(22px, 1.55vw, 34px) !important;
  --board-card-h: calc(var(--board-card-w) * 1.40) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 3px !important;
  gap: 2px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-seat-zero .zone-zero,
body.battle-royale-room-zero .br-seat-zero .pile-zone-zero {
  padding: 1px !important;
  border-width: 1px !important;
  border-radius: 9px !important;
}
body.battle-royale-room-zero .br-seat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero .hand-title-zero {
  font-size: clamp(6px, .50vw, 8px) !important;
  line-height: 1 !important;
}
body.battle-royale-room-zero .br-seat-zero .card-zero {
  max-width: var(--board-card-w) !important;
}
body.battle-royale-room-zero .br-seat-zero .card-caption-zero { display: none !important; }
body.battle-royale-room-zero .br-seat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero .zone-count-badge-zero {
  font-size: clamp(6px, .48vw, 8px) !important;
  padding: 0 3px !important;
}

/* Top row faces toward the center of the 2x2 table. Counter-rotate card/text only. */
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero {
  transform: rotate(180deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-count-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-count-badge-zero {
  transform: rotate(180deg) !important;
}

/* Hand rows are always readable; own hand can be smaller in BR so it stays inside panel. */
body.battle-royale-room-zero .br-seat-zero .hand-zone-zero {
  margin: 2px 5px 5px !important;
  padding: 3px !important;
  min-height: 0 !important;
  max-height: 54px !important;
  overflow: hidden !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-row-zero {
  min-height: 38px !important;
  max-height: 48px !important;
  height: 48px !important;
  overflow: hidden !important;
  gap: 2px !important;
  justify-content: center !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-card-zero {
  width: clamp(28px, 2.3vw, 42px) !important;
  min-width: 24px !important;
  flex: 0 1 auto !important;
}
body.battle-royale-room-zero .br-seat-zero.own .hand-card-zero {
  width: clamp(34px, 3.1vw, 54px) !important;
  min-width: 30px !important;
}
body.battle-royale-room-zero .br-hidden-hand-zero {
  min-height: 34px !important;
  margin: 2px 5px 5px !important;
  padding: 6px 8px !important;
  font-size: 9px !important;
}
body.battle-royale-room-zero .br-hidden-hand-zero strong {
  width: 22px !important;
  height: 22px !important;
}

body.battle-royale-room-zero .br-empty-seat-zero {
  opacity: .42 !important;
  border-style: dashed !important;
}
body.battle-royale-room-zero .br-empty-seat-inner-zero {
  display: grid !important;
  place-items: center !important;
  height: 100% !important;
  color: rgba(220,238,255,.55) !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr !important;
  }
  body.battle-royale-room-zero .detail-panel-zero { display: none !important; }
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    height: auto !important;
    min-height: 760px !important;
  }
}

@media (max-width: 760px) {
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.battle-royale-room-zero .br-seat-zero { min-height: 320px !important; }
  body.battle-royale-room-zero .br-seat-zero .playmat-zero { --board-card-w: clamp(32px, 8vw, 48px) !important; }
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero { transform: none !important; }
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .card-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .card-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-title-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-title-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .sub-label-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .sub-label-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .live-stat-badge-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .live-stat-badge-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-count-badge-zero,
  body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-count-badge-zero { transform: none !important; }
}

/* ============================================================================
   v378 Battle Royale fixed 2x2 grid + own-perspective mini boards
   --------------------------------------------------------------------------
   User direction: the Battle Royale table must match the drawn format:
   P3 | P4 above P1 | P2, with a right-side Detail Panel. Each player cell is
   a fixed bordered frame and renders as its own P1-style board. No top-row
   180deg rotation, no shared compressed table, and cards/hands are scaled and
   contained inside each player frame.
   ========================================================================== */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 360px) !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.battle-royale-room-zero .table-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero #boardZero {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .sidebar-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .detail-panel-zero {
  min-width: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-board-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  height: clamp(590px, calc(100dvh - 136px), 850px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 4px !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55) !important;
}

body.battle-royale-room-zero .br-seat-zero {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 28px minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.70) !important;
  border-radius: 14px !important;
  background: rgba(4, 10, 22, .62) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.64), 0 8px 22px rgba(0,0,0,.18) !important;
}

body.battle-royale-room-zero .br-seat-zero::after {
  content: attr(data-player);
  position: absolute;
  right: 6px;
  top: 31px;
  z-index: 15;
  width: 28px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .03em;
  pointer-events: none;
}

body.battle-royale-room-zero .br-seat-zero[data-player="1"]::after { content: 'P1'; }
body.battle-royale-room-zero .br-seat-zero[data-player="2"]::after { content: 'P2'; }
body.battle-royale-room-zero .br-seat-zero[data-player="3"]::after { content: 'P3'; }
body.battle-royale-room-zero .br-seat-zero[data-player="4"]::after { content: 'P4'; }

body.battle-royale-room-zero .br-seat-zero .seat-head-zero {
  height: 28px !important;
  min-height: 0 !important;
  padding: 4px 7px !important;
  gap: 5px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-name-zero strong {
  font-size: clamp(9px, .74vw, 11px) !important;
  line-height: 1 !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-name-zero span,
body.battle-royale-room-zero .br-seat-zero .seat-counts-zero span {
  font-size: clamp(7px, .56vw, 9px) !important;
  line-height: 1 !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-scroll-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.own-mat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.opponent-mat-zero {
  --board-card-w: clamp(28px, 2.05vw, 42px) !important;
  --board-card-h: calc(var(--board-card-w) * 1.40) !important;
  --res-card-w: clamp(20px, 1.38vw, 30px) !important;
  --res-step: clamp(7px, .58vw, 11px) !important;
  --res-group-gap: clamp(5px, .42vw, 8px) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns:
    minmax(calc(var(--board-card-h) + 12px), calc(var(--board-card-h) + 24px))
    minmax(58px, 82px)
    minmax(0, 1fr)
    minmax(62px, 88px) !important;
  grid-template-rows: minmax(0, .56fr) minmax(0, .44fr) !important;
  grid-template-areas:
    "shield battle battle piles"
    "shield resdeck resource piles" !important;
  gap: 2px !important;
  padding: 3px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  transform: none !important;
  perspective: none !important;
}

/* v378: no whole-board rotation. Every player gets a readable P1-style board. */
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero .zone-count-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero .zone-count-badge-zero {
  transform: none !important;
}

body.battle-royale-room-zero .br-seat-zero .zone-zero,
body.battle-royale-room-zero .br-seat-zero .pile-zone-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 1px !important;
  border-width: 1px !important;
  border-radius: 9px !important;
}

body.battle-royale-room-zero .br-seat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero .hand-title-zero {
  font-size: clamp(6px, .48vw, 8px) !important;
  line-height: 1 !important;
}

body.battle-royale-room-zero .br-seat-zero .card-row-zero,
body.battle-royale-room-zero .br-seat-zero .battle-row-zero,
body.battle-royale-room-zero .br-seat-zero .base-row-zero,
body.battle-royale-room-zero .br-seat-zero .shield-slots-zero,
body.battle-royale-room-zero .br-seat-zero .pile-row-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  gap: 2px !important;
}

body.battle-royale-room-zero .br-seat-zero .card-zero {
  width: var(--board-card-w) !important;
  max-width: var(--board-card-w) !important;
  min-width: 0 !important;
}

body.battle-royale-room-zero .br-seat-zero .card-caption-zero {
  display: none !important;
}

body.battle-royale-room-zero .br-seat-zero .battle-single-unit-zero {
  min-width: 0 !important;
  max-width: calc(var(--board-card-w) + 8px) !important;
}

body.battle-royale-room-zero .br-seat-zero .battle-single-stage-zero .card-zero {
  width: var(--board-card-w) !important;
  max-width: var(--board-card-w) !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-card-zero,
body.battle-royale-room-zero .br-seat-zero .resource-stack-slot-zero .card-zero {
  width: var(--res-card-w) !important;
  max-width: var(--res-card-w) !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-area-zero,
body.battle-royale-room-zero .br-seat-zero .resource-line-zero,
body.battle-royale-room-zero .br-seat-zero .resource-combined-line-zero {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-zone-zero,
body.battle-royale-room-zero .br-hidden-hand-zero {
  margin: 2px 5px 5px !important;
  padding: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100% - 10px) !important;
  max-height: 58px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-row-zero {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 40px !important;
  height: 46px !important;
  max-height: 46px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 2px !important;
  scrollbar-width: thin !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-card-zero,
body.battle-royale-room-zero .br-seat-zero.own .hand-card-zero {
  flex: 0 0 auto !important;
  width: clamp(30px, 2.35vw, 46px) !important;
  max-width: clamp(30px, 2.35vw, 46px) !important;
  min-width: clamp(30px, 2.35vw, 46px) !important;
}

body.battle-royale-room-zero .br-hidden-hand-zero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 9px !important;
}

body.battle-royale-room-zero .board-center-phase-slot-zero {
  min-height: 0 !important;
  padding: 0 !important;
}

body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  min-height: 0 !important;
  padding: 6px 10px !important;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr !important;
  }
  body.battle-royale-room-zero .sidebar-zero {
    display: none !important;
  }
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    height: auto !important;
    min-height: 760px !important;
  }
}

@media (max-width: 760px) {
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.battle-royale-room-zero .br-seat-zero {
    min-height: 340px !important;
  }
  body.battle-royale-room-zero .br-seat-zero .playmat-zero,
  body.battle-royale-room-zero .br-seat-zero .playmat-zero.own-mat-zero,
  body.battle-royale-room-zero .br-seat-zero .playmat-zero.opponent-mat-zero {
    --board-card-w: clamp(32px, 8vw, 48px) !important;
    --res-card-w: clamp(24px, 6vw, 36px) !important;
  }
}


/* ============================================================================
   v379 Battle Royale fixed-seat + top-row perspective correction
   --------------------------------------------------------------------------
   Fixes 3-player rooms that were still affected by older v360/v374 rules:
   - no player may span full-width just because only 3 players joined
   - own/opponent classes must not change seat size/order
   - fixed seats are always P3|P4 above P1|P2
   - top row uses P2/opponent-style playmat perspective facing down
   - bottom row uses P1/own-style playmat perspective facing up
   - hand rows stay clickable and above the playmat layer
   ========================================================================== */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 370px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  height: calc(100dvh - 14px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .table-zero,
body.battle-royale-room-zero #boardZero {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero #boardZero {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100% !important;
  max-height: calc(100dvh - 14px) !important;
}

body.battle-royale-room-zero .br-board-zero,
body.battle-royale-room-zero .br-board-zero.br-count-1-zero,
body.battle-royale-room-zero .br-board-zero.br-count-2-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
body.battle-royale-room-zero .br-board-zero.br-count-4-zero,
body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-4-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-1-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-2-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-3-zero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 9px !important;
  width: 100% !important;
  height: clamp(540px, calc(100dvh - 150px), 790px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 4px !important;
}

/* Hard-reset all older span/order rules from v360/v374. */
body.battle-royale-room-zero .br-board-zero .br-seat-zero,
body.battle-royale-room-zero .br-board-zero .br-seat-zero.own,
body.battle-royale-room-zero .br-board-zero .br-seat-zero.opponent,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-0-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-1-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-2-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-3-zero {
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  min-height: 0 !important;
}

/* Seat placement is fixed by index from JS: 0=P3, 1=P4, 2=P1, 3=P2. */
body.battle-royale-room-zero .br-seat-index-0-zero { grid-column: 1 !important; grid-row: 1 !important; }
body.battle-royale-room-zero .br-seat-index-1-zero { grid-column: 2 !important; grid-row: 1 !important; }
body.battle-royale-room-zero .br-seat-index-2-zero { grid-column: 1 !important; grid-row: 2 !important; }
body.battle-royale-room-zero .br-seat-index-3-zero { grid-column: 2 !important; grid-row: 2 !important; }

body.battle-royale-room-zero .br-seat-zero {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  border-radius: 14px !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-head-zero {
  flex: 0 0 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-scroll-zero {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-zone-zero,
body.battle-royale-room-zero .br-seat-zero .br-hidden-hand-zero,
body.battle-royale-room-zero .br-hidden-hand-zero {
  flex: 0 0 56px !important;
  min-height: 50px !important;
  max-height: 58px !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

/* Top row: hand/hidden hand above playmat, playmat faces downward like 1v1 P2. */
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .hand-zone-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .br-hidden-hand-zero {
  order: 1 !important;
}
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-scroll-zero {
  order: 2 !important;
}

/* Bottom row: playmat first, hand at bottom like 1v1 P1. */
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-scroll-zero {
  order: 1 !important;
}
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .hand-zone-zero,
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .br-hidden-hand-zero {
  order: 2 !important;
}

/* Restore real top-row opponent/P2 perspective that v378 flattened. */
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero.opponent-mat-zero {
  grid-template-columns:
    minmax(54px, 78px)
    minmax(0, 1fr)
    minmax(52px, 76px)
    minmax(calc(var(--board-card-h) + 8px), calc(var(--board-card-h) + 20px)) !important;
  grid-template-rows: minmax(0, .45fr) minmax(0, .55fr) !important;
  grid-template-areas:
    "piles resource resdeck shield"
    "piles battle battle shield" !important;
}

/* Bottom-row P1 perspective. */
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-zero.own-mat-zero {
  grid-template-columns:
    minmax(calc(var(--board-card-h) + 8px), calc(var(--board-card-h) + 20px))
    minmax(52px, 76px)
    minmax(0, 1fr)
    minmax(54px, 78px) !important;
  grid-template-rows: minmax(0, .55fr) minmax(0, .45fr) !important;
  grid-template-areas:
    "shield battle battle piles"
    "shield resdeck resource piles" !important;
}

/* Do not rotate the whole board. Perspective comes from zone order, so text/cards stay readable. */
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero .zone-count-badge-zero {
  transform: none !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.own-mat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.opponent-mat-zero {
  --board-card-w: clamp(24px, 1.72vw, 38px) !important;
  --board-card-h: calc(var(--board-card-w) * 1.40) !important;
  --res-card-w: clamp(18px, 1.18vw, 28px) !important;
  --res-step: clamp(6px, .45vw, 10px) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-row-zero {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 6 !important;
  scrollbar-width: thin !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-card-zero,
body.battle-royale-room-zero .br-seat-zero.own .hand-card-zero {
  pointer-events: auto !important;
  flex: 0 0 auto !important;
  width: clamp(34px, 2.45vw, 48px) !important;
  min-width: clamp(34px, 2.45vw, 48px) !important;
  max-width: clamp(34px, 2.45vw, 48px) !important;
}

body.battle-royale-room-zero .board-center-phase-slot-zero {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
body.battle-royale-room-zero .board-center-phase-slot-zero .phase-menu-zero,
body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  pointer-events: auto !important;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    height: auto !important;
    min-height: 760px !important;
  }
}

/* ============================================================================
   v380 Battle Royale hotfix: viewer-relative fixed table, safe click layers,
   visible resources, and seat-facing orientation rules.
   ============================================================================ */
body.battle-royale-room-zero .br-board-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  height: min(76vh, 820px) !important;
  min-height: 640px !important;
  overflow: hidden !important;
}

/* 3-player rooms must keep the missing player as a fixed empty seat. */
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-0-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-1-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-2-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero .br-seat-index-3-zero {
  grid-column: auto !important;
  grid-row: auto !important;
}

body.battle-royale-room-zero .br-seat-zero {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(235, 248, 255, .58) !important;
  border-radius: 16px !important;
  isolation: isolate !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-head-zero {
  position: relative !important;
  z-index: 15 !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-scroll-zero {
  position: relative !important;
  z-index: 2 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-zero {
  --board-card-w: clamp(34px, 2.70vw, 48px) !important;
  --board-card-h: calc(var(--board-card-w) * 1.40) !important;
  min-width: 0 !important;
  min-height: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  gap: 4px !important;
  pointer-events: auto !important;
}

/* Hand is always above the playmat layer so the mat can never block hand clicks. */
body.battle-royale-room-zero .br-seat-zero .hand-zone-zero,
body.battle-royale-room-zero .br-seat-zero .br-hidden-hand-zero {
  position: relative !important;
  z-index: 30 !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-row-zero {
  position: relative !important;
  z-index: 31 !important;
  min-width: 0 !important;
  min-height: 52px !important;
  max-height: 72px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  pointer-events: auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-card-zero {
  width: clamp(38px, 2.95vw, 54px) !important;
  min-width: clamp(38px, 2.95vw, 54px) !important;
  height: calc(clamp(38px, 2.95vw, 54px) * 1.40) !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

/* Resource cards must be visible and clickable in Battle Royale. The normal compact
   overlap line was too absolute-positioned for the mini-board and could render offscreen. */
body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-row-zero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: calc(var(--board-card-h) + 10px) !important;
  height: 100% !important;
  padding: 17px 5px 3px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-line-zero {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  height: var(--board-card-h) !important;
  min-width: max-content !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-stack-slot-zero,
body.battle-royale-room-zero .br-seat-zero.opponent .resource-area-zero .resource-stack-slot-zero {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  transform: none !important;
  flex: 0 0 var(--board-card-w) !important;
  pointer-events: auto !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-card-zero,
body.battle-royale-room-zero .br-seat-zero.opponent .resource-area-zero .resource-card-zero {
  position: relative !important;
  inset: auto !important;
  width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  flex: 0 0 var(--board-card-w) !important;
  pointer-events: auto !important;
}

/* Seat-facing card direction. Every client sees their own player in the bottom-left
   self seat. Top seats face down toward center; the right seat faces left toward center. */
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .card-zero:not(.rested),
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .card-zero:not(.rested),
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .resource-card-zero:not(.rested),
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .resource-card-zero:not(.rested) {
  transform: rotate(180deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .card-zero.rested,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .card-zero.rested,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .resource-card-zero.rested,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .resource-card-zero.rested {
  transform: rotate(270deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .card-zero:not(.rested),
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .resource-card-zero:not(.rested) {
  transform: none !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .card-zero.rested,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .resource-card-zero.rested {
  transform: rotate(90deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .card-zero:not(.rested),
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .resource-card-zero:not(.rested) {
  transform: rotate(270deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .card-zero.rested,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .resource-card-zero.rested {
  transform: rotate(180deg) !important;
}

/* Do not rotate the whole mini-board; rotate cards by seat only. Whole-board rotation
   was the reason zones and click layers fought each other. */
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .playmat-zero {
  transform: none !important;
}

/* Keep labels/stat badges readable even when the cards themselves face a table direction. */
body.battle-royale-room-zero .br-seat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero .live-stat-badge-zero,
body.battle-royale-room-zero .br-seat-zero .zone-count-badge-zero {
  transform: none !important;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    min-height: 760px !important;
  }
}

/* v380 linked/single battle wrapper orientation parity. The older opponent rule rotates
   wrapper stages; make it seat-based too so linked Units face the same direction as
   normal cards. */
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .battle-single-unit-zero:not(.rested) .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .battle-single-unit-zero:not(.rested) .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .linked-unit-zero:not(.rested) .linked-unit-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .linked-unit-zero:not(.rested) .linked-unit-stage-zero {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .battle-single-unit-zero.rested .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .battle-single-unit-zero.rested .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-left-zero .linked-unit-zero.rested .linked-unit-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-top-right-zero .linked-unit-zero.rested .linked-unit-stage-zero {
  transform: translate(-50%, -50%) rotate(270deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .battle-single-unit-zero:not(.rested) .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .linked-unit-zero:not(.rested) .linked-unit-stage-zero {
  transform: translate(-50%, -50%) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .battle-single-unit-zero.rested .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-left-zero .linked-unit-zero.rested .linked-unit-stage-zero {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .battle-single-unit-zero:not(.rested) .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .linked-unit-zero:not(.rested) .linked-unit-stage-zero {
  transform: translate(-50%, -50%) rotate(270deg) !important;
}
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .battle-single-unit-zero.rested .battle-single-stage-zero,
body.battle-royale-room-zero .br-seat-zero.br-pos-bottom-right-zero .linked-unit-zero.rested .linked-unit-stage-zero {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}


/* ============================================================================
   v381 Battle Royale compact-cell flex fix
   --------------------------------------------------------------------------
   Root cause after v380: the BR player cell was changed to CSS grid with
   rows auto / 1fr / auto. For top-row seats the hidden hand was ordered before
   the playmat, so that hidden-hand strip consumed the 1fr row and squeezed the
   real playmat into the final auto row. This made the board look compressed and
   made some clickable areas unreliable.

   Fix: every BR seat is a flex column again. Header and hand strips are fixed
   height; the playmat owns the remaining space. The 2x2 table remains fixed,
   empty seats remain fixed, detail/log sidebar remains outside, resources stay
   visible, and hand cards stay above the mat click layer.
   ========================================================================== */
body.battle-royale-room-zero .room-grid-zero {
  grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 370px) !important;
  height: calc(100dvh - 8px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero #boardZero {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 6px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 8px) !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-turn-strip-zero {
  min-height: 24px !important;
  padding: 3px 7px !important;
}

body.battle-royale-room-zero .br-board-zero,
body.battle-royale-room-zero .br-board-zero.br-count-1-zero,
body.battle-royale-room-zero .br-board-zero.br-count-2-zero,
body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
body.battle-royale-room-zero .br-board-zero.br-count-4-zero,
body.battle-royale-room-zero .br-board-zero.br-max-3-zero,
body.battle-royale-room-zero .br-board-zero.br-max-4-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-1-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-2-zero,
body.battle-royale-room-zero .br-board-zero.br-opponents-3-zero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 3px !important;
}

body.battle-royale-room-zero .br-seat-index-0-zero { grid-column: 1 !important; grid-row: 1 !important; }
body.battle-royale-room-zero .br-seat-index-1-zero { grid-column: 2 !important; grid-row: 1 !important; }
body.battle-royale-room-zero .br-seat-index-2-zero { grid-column: 1 !important; grid-row: 2 !important; }
body.battle-royale-room-zero .br-seat-index-3-zero { grid-column: 2 !important; grid-row: 2 !important; }

body.battle-royale-room-zero .br-seat-zero,
body.battle-royale-room-zero .br-board-zero .br-seat-zero,
body.battle-royale-room-zero .br-board-zero .br-seat-zero.own,
body.battle-royale-room-zero .br-board-zero .br-seat-zero.opponent {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(235, 248, 255, .66) !important;
  border-radius: 15px !important;
  isolation: isolate !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-head-zero {
  order: 0 !important;
  flex: 0 0 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 3px 6px !important;
  position: relative !important;
  z-index: 40 !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-name-zero strong,
body.battle-royale-room-zero .br-seat-zero .seat-name-zero span,
body.battle-royale-room-zero .br-seat-zero .seat-counts-zero span {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

body.battle-royale-room-zero .br-seat-zero .seat-counts-zero {
  gap: 5px !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-scroll-zero {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 3 !important;
}

body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .br-hidden-hand-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .hand-zone-zero {
  order: 1 !important;
  flex: 0 0 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-scroll-zero {
  order: 2 !important;
}

body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-scroll-zero {
  order: 1 !important;
}
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .hand-zone-zero,
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .br-hidden-hand-zero {
  order: 2 !important;
  flex: 0 0 58px !important;
  min-height: 56px !important;
  max-height: 62px !important;
}

body.battle-royale-room-zero .br-hidden-hand-zero {
  margin: 2px 5px 3px !important;
  padding: 3px 7px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 9px !important;
}
body.battle-royale-room-zero .br-hidden-hand-zero strong {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

body.battle-royale-room-zero .br-seat-zero .hand-zone-zero {
  margin: 2px 5px 4px !important;
  padding: 3px !important;
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-title-zero {
  display: none !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-row-zero {
  min-height: 50px !important;
  max-height: 58px !important;
  height: 52px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 61 !important;
}
body.battle-royale-room-zero .br-seat-zero .hand-card-zero,
body.battle-royale-room-zero .br-seat-zero.own .hand-card-zero {
  width: clamp(34px, 2.25vw, 46px) !important;
  min-width: clamp(34px, 2.25vw, 46px) !important;
  height: calc(clamp(34px, 2.25vw, 46px) * 1.40) !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

body.battle-royale-room-zero .br-seat-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.own-mat-zero,
body.battle-royale-room-zero .br-seat-zero .playmat-zero.opponent-mat-zero {
  --board-card-w: clamp(22px, 1.45vw, 34px) !important;
  --board-card-h: calc(var(--board-card-w) * 1.40) !important;
  --res-card-w: clamp(18px, 1.15vw, 26px) !important;
  --res-step: clamp(5px, .36vw, 8px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 4px !important;
  gap: 3px !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Compact internal mini-board: keep the normal zone meanings, but use a cell-sized
   template instead of a full 1v1 board forced into a quadrant. */
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-top-row-zero .playmat-zero.opponent-mat-zero {
  grid-template-columns:
    minmax(42px, 58px)
    minmax(0, 1fr)
    minmax(38px, 52px)
    minmax(42px, 58px) !important;
  grid-template-rows: minmax(0, .44fr) minmax(0, .56fr) !important;
  grid-template-areas:
    "piles resource resdeck shield"
    "piles battle battle shield" !important;
}

body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-zero,
body.battle-royale-room-zero .br-seat-zero.br-bottom-row-zero .playmat-zero.own-mat-zero {
  grid-template-columns:
    minmax(42px, 58px)
    minmax(38px, 52px)
    minmax(0, 1fr)
    minmax(42px, 58px) !important;
  grid-template-rows: minmax(0, .56fr) minmax(0, .44fr) !important;
  grid-template-areas:
    "shield battle battle piles"
    "shield resdeck resource piles" !important;
}

body.battle-royale-room-zero .br-seat-zero .zone-zero,
body.battle-royale-room-zero .br-seat-zero .pile-zone-zero,
body.battle-royale-room-zero .br-seat-zero .base-box-zero,
body.battle-royale-room-zero .br-seat-zero .shield-box-zero {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.battle-royale-room-zero .br-seat-zero .zone-title-zero,
body.battle-royale-room-zero .br-seat-zero .sub-label-zero,
body.battle-royale-room-zero .br-seat-zero .pile-title-zero {
  font-size: 7px !important;
  line-height: 1 !important;
  padding: 1px 3px !important;
  max-height: 12px !important;
  overflow: hidden !important;
  transform: none !important;
}

body.battle-royale-room-zero .br-seat-zero .battle-row-zero {
  min-height: 0 !important;
  height: 100% !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 3px !important;
  overflow: auto !important;
  padding: 13px 3px 3px !important;
}
body.battle-royale-room-zero .br-seat-zero .battle-row-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero .battle-single-unit-zero,
body.battle-royale-room-zero .br-seat-zero .linked-unit-zero {
  flex: 0 0 auto !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-row-zero {
  min-height: 0 !important;
  height: 100% !important;
  padding: 13px 4px 3px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: flex-start !important;
}
body.battle-royale-room-zero .br-seat-zero .resource-line-zero {
  height: var(--board-card-h) !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-stack-slot-zero,
body.battle-royale-room-zero .br-seat-zero.opponent .resource-area-zero .resource-stack-slot-zero,
body.battle-royale-room-zero .br-seat-zero .resource-area-zero .resource-card-zero,
body.battle-royale-room-zero .br-seat-zero.opponent .resource-area-zero .resource-card-zero {
  width: var(--board-card-w) !important;
  min-width: var(--board-card-w) !important;
  height: var(--board-card-h) !important;
  flex: 0 0 var(--board-card-w) !important;
}

body.battle-royale-room-zero .br-seat-zero .resource-counts-zero {
  top: 1px !important;
  right: 3px !important;
  gap: 2px !important;
  transform: none !important;
}
body.battle-royale-room-zero .br-seat-zero .resource-count-pill-zero {
  font-size: 7px !important;
  padding: 1px 4px !important;
}

body.battle-royale-room-zero .br-seat-zero .shield-layout-zero,
body.battle-royale-room-zero .br-seat-zero .base-row-zero,
body.battle-royale-room-zero .br-seat-zero .shield-slots-zero,
body.battle-royale-room-zero .br-seat-zero .pile-body-zero,
body.battle-royale-room-zero .br-seat-zero .resource-deck-area-zero .card-row-zero {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.battle-royale-room-zero .br-seat-zero .piles-zero {
  gap: 3px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.battle-royale-room-zero .br-seat-zero .pile-body-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero .resource-deck-area-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero .base-row-zero .card-zero,
body.battle-royale-room-zero .br-seat-zero .shield-real-card-zero,
body.battle-royale-room-zero .br-seat-zero .shield-back-zero {
  max-width: var(--board-card-w) !important;
  max-height: var(--board-card-h) !important;
}

body.battle-royale-room-zero .phase-menu-zero.center-divider-zero {
  min-height: 40px !important;
  padding: 5px 9px !important;
}

@media (max-width: 1180px) {
  body.battle-royale-room-zero .room-grid-zero {
    grid-template-columns: 1fr !important;
  }
  body.battle-royale-room-zero .sidebar-zero {
    display: none !important;
  }
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    min-height: 620px !important;
    height: calc(100dvh - 90px) !important;
  }
}

@media (max-width: 760px) {
  body.battle-royale-room-zero .br-board-zero,
  body.battle-royale-room-zero .br-board-zero.br-count-3-zero,
  body.battle-royale-room-zero .br-board-zero.br-max-4-zero {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.battle-royale-room-zero .br-seat-zero {
    min-height: 300px !important;
  }
  body.battle-royale-room-zero #boardZero,
  body.battle-royale-room-zero .room-grid-zero {
    height: auto !important;
    overflow: visible !important;
  }
}

/* v108: action in-flight lock — visual feedback while a server action is being processed */
body.action-in-flight-zero .playmat-zero,
body.action-in-flight-zero .board-center-phase-slot-zero {
  cursor: wait !important;
}
body.action-in-flight-zero .playmat-zero * {
  pointer-events: none !important;
}
body.action-in-flight-zero .board-center-phase-slot-zero .ctrl-btn-zero,
body.action-in-flight-zero .board-center-phase-slot-zero .phase-chip-zero {
  pointer-events: none !important;
  opacity: 0.55 !important;
}

/* v200: portrait orientation overlay — only shown on touch phones in portrait */
.portrait-warn-zero {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #010817;
  color: #f5f7ff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 32px 24px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.portrait-warn-icon-zero {
  font-size: 72px;
  line-height: 1;
  animation: portraitRotateHintZero 2.8s ease-in-out infinite;
  display: block;
}
.portrait-warn-zero h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.portrait-warn-zero p {
  font-size: 15px;
  color: #9aa7c2;
  margin: 0;
  max-width: 300px;
  line-height: 1.5;
}
@keyframes portraitRotateHintZero {
  0%, 25% { transform: rotate(0deg); }
  55%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
/* Portrait overlay never shown — portrait is now a supported play orientation */

/* v200: landscape phone board reset.
   Phones wider than 820px in landscape (e.g. iPhone 15 Pro Max: 932×430) are NOT caught by the
   max-width:820px flat-layout block, so the 3D perspective and 0.87 viewport-scale wrapper would
   remain active on a 430px-tall screen — completely unusable. This block resets all of that for
   any touch device in landscape with phone-range height (≤ 560px). */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 560px) {
  :root {
    --viewport-render-scale: 1;
    --room-edge-pad: 0px;
    --status-h: 0px;
    --gap: 3px;
    --board-visual-shift-x: 0px;
    --table-perspective: none;
    --table-tilt: 0deg;
    --table-camera-scale: 1;
    --table-lift: 0px;
    --board-real-extra-h: 0px;
    --play-frame-w: 100%;
    --board-card-w: clamp(36px, 8.5svh, 54px);
    --hand-card-w: clamp(24px, 6svh, 38px);
    --own-hand-card-w: clamp(52px, 13svh, 76px);
    --own-hand-h: clamp(56px, 15svh, 82px);
    --opponent-hand-h: clamp(20px, 6svh, 34px);
    --zone-title-h: 9px;
    --resource-edge-pad: 4%;
  }

  html,
  body.gundam-room-zero {
    width: 100% !important;
    height: -webkit-fill-available !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body.gundam-room-zero {
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left) !important;
  }

  .room-shell-zero {
    width: 100% !important;
    max-width: 100% !important;
    height: -webkit-fill-available !important;
    height: 100svh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .room-grid-zero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  /* Topbar wastes precious landscape height — hide it */
  .room-topbar-zero {
    display: none !important;
  }

  /* table-zero stays as the base v78 CSS grid (grid-row overlapping children).
     Only fix overflow and padding — height:100% resolves against room-grid-zero's 100svh. */
  .table-zero {
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .status-zero {
    display: none !important;
  }

  /* Banners: pull out of grid flow so they float over the board */
  .target-banner-zero.show,
  .battle-banner-zero.show {
    position: fixed !important;
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 4250 !important;
    max-width: 92vw !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }

  .toast-zero.show {
    position: fixed !important;
    top: 2px !important;
    right: 6px !important;
    left: auto !important;
    transform: none !important;
    z-index: 4260 !important;
    max-width: 55vw !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }

  /* boardZero: keep as a grid item (grid-row:1/grid-column:1 set by base CSS).
     height:100% resolves against table-zero's grid row = 100svh.
     grid-template-rows 1fr/auto/1fr then splits that height between the two seats. */
  #boardZero {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto 1fr !important;
    gap: 1px !important;
    overflow: hidden !important;
    transform: none !important;
    perspective: none !important;
    margin: 0 !important;
  }

  .seat-zero {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .seat-zero.opponent {
    grid-template-rows: var(--opponent-hand-h) auto 10px !important;
  }

  .seat-zero.own {
    grid-template-rows: 10px auto var(--own-hand-h) !important;
  }

  .seat-head-zero {
    height: 10px !important;
    min-height: 10px !important;
    padding: 0 4px !important;
  }

  .seat-name-zero strong,
  .seat-counts-zero span {
    font-size: 7px !important;
  }

  .playmat-scroll-zero {
    overflow: hidden !important;
    height: 100% !important;
  }

  .playmat-zero {
    min-height: 0 !important;
    height: 100% !important;
    padding: 1px !important;
    gap: 1px !important;
    border-radius: 7px !important;
    contain: layout paint;
  }

  /* Playmat: 2 rows only (resdeck hidden on mobile — count shown in name bar). */
  .playmat-zero.own-mat-zero {
    grid-template-columns: minmax(40px, 15%) minmax(0, 1fr) minmax(36px, 13%) !important;
    grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "shield battle piles"
      "shield resource piles" !important;
  }

  .playmat-zero.opponent-mat-zero {
    grid-template-columns: minmax(36px, 13%) minmax(0, 1fr) minmax(40px, 15%) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.6fr) !important;
    grid-template-areas:
      "piles resource shield"
      "resdeck battle shield" !important;
  }

  .resource-deck-area-zero { display: none !important; }

  /* Battle area: 3-column grid that wraps to a 2nd row — no horizontal scroll */
  .battle-area-zero {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .battle-row-zero {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Battle units: let the grid column control width; card internals stay centred */
  .battle-single-unit-zero,
  .linked-unit-zero {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: center !important;
  }

  /* Resource area: override the absolute-positioned fan layout → simple flex wrap */
  .resource-area-zero {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .resource-area-zero .resource-row-zero {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 2px 4px !important;
    gap: 3px !important;
  }

  /* Resource line: override the absolute strip → flow inline */
  .resource-line-zero {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  /* Resource stack slots: override absolute fan positioning → inline block */
  .resource-area-zero .resource-stack-slot-zero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: var(--board-card-w) !important;
    height: var(--board-card-h) !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* Resource cards inside: fill their slot */
  .resource-area-zero .resource-card-zero {
    position: relative !important;
    inset: auto !important;
    width: var(--board-card-w) !important;
    height: var(--board-card-h) !important;
  }

  /* Base/resdeck row: also no horizontal scroll */
  .card-row-zero,
  .base-row-zero {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Hand: one row, cards shrink to fit, no scroll */
  .hand-zone-zero {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hand-title-zero {
    height: 10px !important;
    min-height: 10px !important;
    font-size: 7px !important;
  }

  .hand-row-zero {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 2px 4px !important;
  }

  .hand-card-zero {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .seat-zero.own .hand-card-zero {
    flex-basis: var(--own-hand-card-w) !important;
    width: auto !important;
    max-width: var(--own-hand-card-w) !important;
  }

  .seat-zero.opponent .hand-card-zero {
    flex-basis: var(--hand-card-w) !important;
    width: auto !important;
    max-width: var(--hand-card-w) !important;
  }

  .board-center-phase-slot-zero {
    position: static !important;
    top: auto !important;
    z-index: 5 !important;
    padding: 0 2px !important;
    overflow: visible !important;
  }

  .phase-menu-zero.center-divider-zero {
    padding: 2px 4px !important;
    border-radius: 8px !important;
    gap: 3px !important;
  }

  .turn-status-zero,
  .timing-status-zero {
    min-height: 18px !important;
    padding: 2px 5px !important;
    flex: 1 1 80px !important;
  }

  .turn-status-zero strong,
  .timing-status-zero strong { font-size: 7.5px !important; }
  .turn-status-zero .turn-no-zero,
  .timing-status-zero span { font-size: 6.5px !important; }

  .board-center-phase-slot-zero .room-btn-zero,
  .board-center-phase-slot-zero .pill-zero,
  .board-center-phase-slot-zero .phase-chip-zero {
    min-height: 20px !important;
    padding: 2px 5px !important;
    font-size: 7.5px !important;
  }

  /* Sidebar hidden in phone landscape — card detail shown via action drawer on tap */
  .sidebar-zero {
    display: none !important;
  }

  /* Action drawer stays usable */
  .menu-zero.action-drawer-zero {
    max-height: 55svh !important;
  }

  .zone-tile-h { font-size: 7px !important; }

  /* Missing nowrap/width overrides for the center menu in the v200 phone landscape block.
     max-width:900px and max-width:720px both add flex-wrap:wrap and width:100% earlier. */
  .board-center-phase-slot-zero {
    min-height: 0 !important;
  }
  .board-center-phase-slot-zero .control-row-zero {
    flex-wrap: nowrap !important;
  }
  .board-center-phase-slot-zero .compact-turn-state-zero {
    flex-wrap: nowrap !important;
    gap: 2px !important;
  }
  .turn-status-zero,
  .timing-status-zero {
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
  }
  .timing-status-zero > span:first-child {
    display: none !important;
  }
  .board-center-phase-slot-zero .phase-menu-actions-zero {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    padding-left: 4px !important;
  }
}

/* v203: portrait phone game layout.
   The max-width:820px block already gives a flat/scrollable layout. This block overrides it
   to be fixed-height (no scroll) with both player sections visible simultaneously, using the
   same 1fr/auto/1fr board grid as the landscape block. Card sizes are width-based (vw). */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 768px) {
  :root {
    --viewport-render-scale: 1;
    --room-edge-pad: 0px;
    --status-h: 0px;
    --gap: 3px;
    --board-visual-shift-x: 0px;
    --table-perspective: none;
    --table-tilt: 0deg;
    --table-camera-scale: 1;
    --table-lift: 0px;
    --board-real-extra-h: 0px;
    --play-frame-w: 100%;
    --board-card-w: clamp(42px, 10.5vw, 62px);
    --hand-card-w: clamp(26px, 6.5vw, 40px);
    --own-hand-card-w: clamp(60px, 15vw, 90px);
    --own-hand-h: clamp(88px, 12svh, 130px);
    --opponent-hand-h: clamp(26px, 3.5svh, 42px);
    --zone-title-h: 11px;
    --resource-edge-pad: 4%;
  }

  html,
  body.gundam-room-zero {
    width: 100% !important;
    height: -webkit-fill-available !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  body.gundam-room-zero {
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left) !important;
  }

  .room-shell-zero {
    width: 100% !important;
    max-width: 100% !important;
    height: -webkit-fill-available !important;
    height: 100svh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .room-grid-zero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .room-topbar-zero { display: none !important; }

  .table-zero {
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .status-zero { display: none !important; }

  .target-banner-zero.show,
  .battle-banner-zero.show {
    position: fixed !important;
    top: env(safe-area-inset-top, 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 4250 !important;
    max-width: 92vw !important;
    padding: 4px 12px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  .toast-zero.show {
    position: fixed !important;
    top: env(safe-area-inset-top, 4px) !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    z-index: 4260 !important;
    max-width: 72vw !important;
    padding: 4px 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  #boardZero {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto 1fr !important;
    gap: 2px !important;
    overflow: hidden !important;
    transform: none !important;
    perspective: none !important;
    margin: 0 !important;
  }

  .seat-zero {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .seat-zero.opponent {
    grid-template-rows: var(--opponent-hand-h) auto 14px !important;
  }

  .seat-zero.own {
    grid-template-rows: 14px auto var(--own-hand-h) !important;
  }

  .seat-head-zero {
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 6px !important;
  }

  .seat-name-zero strong,
  .seat-counts-zero span {
    font-size: 8.5px !important;
  }

  .playmat-scroll-zero {
    overflow: hidden !important;
    height: 100% !important;
  }

  .playmat-zero {
    min-height: 0 !important;
    height: 100% !important;
    padding: 2px !important;
    gap: 2px !important;
    border-radius: 9px !important;
    contain: layout paint;
  }

  /* 2 rows — resdeck hidden, count visible in name bar */
  .playmat-zero.own-mat-zero {
    grid-template-columns: minmax(44px, 15%) minmax(0, 1fr) minmax(40px, 13%) !important;
    grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "shield battle piles"
      "shield resource piles" !important;
  }

  .playmat-zero.opponent-mat-zero {
    grid-template-columns: minmax(40px, 13%) minmax(0, 1fr) minmax(44px, 15%) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.6fr) !important;
    grid-template-areas:
      "piles resource shield"
      "resdeck battle shield" !important;
  }

  .resource-deck-area-zero { display: none !important; }

  .battle-area-zero {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .battle-row-zero {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 2px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .battle-single-unit-zero,
  .linked-unit-zero {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .resource-area-zero {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .resource-area-zero .resource-row-zero {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 3px 5px !important;
    gap: 4px !important;
  }

  .resource-line-zero {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  .resource-area-zero .resource-stack-slot-zero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: var(--board-card-w) !important;
    height: var(--board-card-h) !important;
    pointer-events: auto !important;
  }

  .resource-area-zero .resource-card-zero {
    position: relative !important;
    inset: auto !important;
    width: var(--board-card-w) !important;
    height: var(--board-card-h) !important;
  }

  .card-row-zero,
  .base-row-zero {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  .hand-zone-zero {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .hand-row-zero {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 3px 6px !important;
  }

  .hand-card-zero {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .seat-zero.own .hand-card-zero {
    flex-basis: var(--own-hand-card-w) !important;
    width: auto !important;
    max-width: var(--own-hand-card-w) !important;
  }

  .seat-zero.opponent .hand-card-zero {
    flex-basis: var(--hand-card-w) !important;
    width: auto !important;
    max-width: var(--hand-card-w) !important;
  }

  .board-center-phase-slot-zero {
    position: static !important;
    top: auto !important;
    z-index: 5 !important;
    padding: 0 3px !important;
    overflow: visible !important;
  }

  .sidebar-zero { display: none !important; }
}

/* v201: compact center action bar for all touch phones (portrait AND landscape).
   Forces single row, no wrapping, kills the min-height:56px from max-width:900px block. */
@media (hover: none) and (pointer: coarse) {
  .board-center-phase-slot-zero {
    min-height: 0 !important;
    padding: 1px 3px !important;
  }
  .board-center-phase-slot-zero .phase-menu-zero,
  .board-center-phase-slot-zero .phase-menu-zero.collapsed,
  .board-center-phase-slot-zero .phase-menu-zero:not(.collapsed),
  .phase-menu-zero.center-divider-zero {
    padding: 4px 8px !important;
    border-radius: 14px !important;
  }
  .board-center-phase-slot-zero .control-row-zero {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    justify-content: space-between !important;
  }
  .board-center-phase-slot-zero .compact-turn-state-zero {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .board-center-phase-slot-zero .turn-status-zero,
  .board-center-phase-slot-zero .timing-status-zero,
  .turn-status-zero,
  .timing-status-zero {
    width: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
  }
  .turn-status-zero strong,
  .timing-status-zero strong {
    font-size: 10px !important;
  }
  .turn-status-zero .turn-no-zero {
    font-size: 8.5px !important;
  }
  /* Hide verbose "Timing" label span — just show the phase name value */
  .timing-status-zero > span:first-child {
    display: none !important;
  }
  .board-center-phase-slot-zero .phase-menu-actions-zero {
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    padding-left: 6px !important;
  }
  .board-center-phase-slot-zero .room-btn-zero,
  .board-center-phase-slot-zero .pill-zero {
    min-height: 26px !important;
    padding: 3px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .board-center-phase-slot-zero .settings-gear-zero {
    width: 28px !important;
    min-width: 28px !important;
    height: 26px !important;
    font-size: 17px !important;
  }
}

/* v202: collapsible center bar for touch landscape.
   The full phase menu is hidden by default; a thin toggle strip takes its place.
   Tapping the strip reveals the menu and collapses it again.
   On desktop / non-touch / portrait this block has no effect. */

/* Toggle button — always hidden on desktop/portrait */
.center-bar-toggle-btn-zero {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  /* The slot itself must allow pointer events so the toggle button inside can be tapped.
     Base CSS sets pointer-events:none on this element; iOS Safari (unlike Chrome) blocks
     tap events on children when the parent is none, so we must explicitly restore it. */
  .board-center-phase-slot-zero {
    pointer-events: auto !important;
  }

  /* Toggle strip: always visible in landscape touch, sits at the board divider */
  .center-bar-toggle-btn-zero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 5px 14px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(5,8,15,.92), rgba(9,17,34,.84)) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
    color: rgba(218,232,255,.92) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(100,150,255,.18) !important;
    touch-action: manipulation !important;
    transition: background .15s ease, box-shadow .15s ease !important;
  }
  .center-bar-toggle-btn-zero:active {
    background: linear-gradient(135deg, rgba(30,50,90,.96), rgba(9,17,34,.90)) !important;
  }
  .center-bar-mini-info-zero {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    letter-spacing: .02em !important;
  }
  .center-bar-toggle-arrow-zero {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: rgba(180,210,255,.75) !important;
  }

  /* Full menu: hidden by default on touch landscape */
  .board-center-phase-slot-zero .phase-menu-zero.center-divider-zero,
  .board-center-phase-slot-zero .phase-menu-zero {
    display: none !important;
    pointer-events: none !important;
  }

  /* Hand cards: center-align so they sit under the battle area, not the shield column */
  .seat-zero.own .hand-row-zero,
  .seat-zero.opponent .hand-row-zero {
    justify-content: center !important;
  }

  /* #boardZero grid: when bar is collapsed, centre row = just the toggle strip */
  #boardZero {
    grid-template-rows: 1fr auto 1fr !important;
  }
}

/* Bar open state — triggered by body.center-bar-open-zero */
body.center-bar-open-zero .board-center-phase-slot-zero .phase-menu-zero.center-divider-zero,
body.center-bar-open-zero .board-center-phase-slot-zero .phase-menu-zero {
  display: block !important;
  pointer-events: auto !important;
}
/* When open, toggle strip sits above the menu — give it a bottom gap */
@media (hover: none) and (pointer: coarse) {
  body.center-bar-open-zero .center-bar-toggle-btn-zero {
    border-radius: 12px 12px 0 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
    margin-bottom: 0 !important;
  }
  body.center-bar-open-zero .board-center-phase-slot-zero .phase-menu-zero.center-divider-zero,
  body.center-bar-open-zero .board-center-phase-slot-zero .phase-menu-zero {
    border-radius: 0 0 14px 14px !important;
    border-top: none !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
}

/* v204: mobile action popup — game actions (Pass Action, Choose Target, Resolve Effect, etc.)
   appear as a fixed pill at the top of the screen instead of inside the center bar.
   Desktop: always hidden (popup element is [hidden]). Mobile: shown via JS when actions exist. */
.mobile-action-popup-zero {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px), 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4500;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6,10,20,.96), rgba(12,22,42,.92));
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10);
  max-width: calc(100vw - 24px);
  pointer-events: auto;
}
.mobile-action-popup-zero[hidden] { display: none !important; }

/* Buttons inside the popup */
.mobile-action-popup-zero .room-btn-zero,
.mobile-action-popup-zero .pill-zero {
  min-height: 30px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Only show popup on touch devices */
@media (hover: hover) {
  .mobile-action-popup-zero { display: none !important; }
}