/* ═══════════════════════════════════════════════════════════════════════════
   MATCH SCREEN LAYOUT — all screen sizes (v3.2.43)
   Moved out of mobile.css, where it only applied to phones and tablets
   (max-height 500 / max-width 600 / coarse pointer). Desktop browsers got an
   older layout from game.css: hand in the bottom-left corner, opponent's hand
   in the top corner, BATTLE PHASE on top of the player bar. Now every device
   gets the same rails layout:
     left rail  : your strip, crew synergy, LEAVE / AUTO
     centre     : opponent row, turf strip, your row, fanned hand
     right rail : opponent strip + hand backs, timer, log, phase button
   The board and hand are sized to the space actually available by
   js/board-fit.js (--bf-scale, --row-h, --hand-scale, --p/opp-strip-h).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GAMEPLAY SCREEN — the fixed fullscreen container ── */
#game-screen {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    height: 100dvh !important;
    background: radial-gradient(ellipse at 50% 50%, #1a1a22 0%, #050508 100%);
}

/* The old game header (#hdr) is hidden in css/screens.css. */

/* #board is NOT fixed — fixed children need a non-fixed ancestor */
#board {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    pointer-events: none !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
}

/* Territory strip — trap zones flank territory card */
#territory-strip {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    /* Scaled with the board (js/board-fit.js): compact on phones, readable on
       a monitor. Width is divided back so the scaled strip still spans the board. */
    width: calc(100% / var(--terr-scale, 1)) !important;
    transform: scale(var(--terr-scale, 1));
    transform-origin: center center;
    box-sizing: border-box !important;
    margin: calc((var(--terr-scale, 1) - 1) * var(--terr-h, 0px) / 2) 0 !important;
    padding: 2px 16px !important;
    gap: 6px !important;
    flex-shrink: 0;
}
#territory-strip::before {
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    box-shadow: 0 0 10px rgba(0, 255, 135, 0.2);
}
#territory-center-wrap {
    transform: scale(0.88);
    transform-origin: center center;
    flex-shrink: 0;
}
.territory-card { width: 260px !important; height: 72px !important; }
.territory-card.empty { width: 260px !important; height: 72px !important; }

/* Show terr-sides as trap zone columns */
.terr-side {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
}

/* Trap zones inside territory strip — NOT fixed positioned, flow inline */
#territory-strip .trap-zone-wrap {
    position: relative !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    pointer-events: auto !important;
}
/* Use IDs to beat #game-screen #opp-trap-zone (specificity 200) */
#territory-strip #opp-trap-zone,
#territory-strip #p-trap-zone {
    width: 52px !important;
    height: 64px !important;
    border-radius: 5px !important;
}
#territory-strip .trap-zone-label {
    font-size: .38rem !important;
    letter-spacing: 1px !important;
    opacity: .55 !important;
}
#territory-strip .face-down-card {
    width: 36px !important;
    height: 50px !important;
    font-size: .85rem !important;
}
#territory-strip .face-down-card::after {
    font-size: .38rem !important;
    letter-spacing: 0.5px !important;
}

/* Territory environment glows on #game-screen (safe to use bg on fixed element) */
#game-screen.env-trappers  { background: radial-gradient(ellipse at 50% 50%, rgba(255,59,59,0.14) 0%, #050508 70%); }
#game-screen.env-hustlers  { background: radial-gradient(ellipse at 50% 50%, rgba(0,255,135,0.12) 0%, #050508 70%); }
#game-screen.env-cartel    { background: radial-gradient(ellipse at 50% 50%, rgba(206,147,216,0.14) 0%, #050508 70%); }
#game-screen.env-ogs       { background: radial-gradient(ellipse at 50% 50%, rgba(212,175,55,0.14) 0%, #050508 70%); }
#game-screen.env-jakuza    { background: radial-gradient(ellipse at 50% 50%, rgba(220,20,60,0.14) 0%, #050508 70%); }
#game-screen.env-mang      { background: radial-gradient(ellipse at 50% 50%, rgba(123,45,139,0.14) 0%, #050508 70%); }
#game-screen.env-vercetti  { background: radial-gradient(ellipse at 50% 50%, rgba(74,144,217,0.14) 0%, #050508 70%); }
#game-screen.env-sadboyz   { background: radial-gradient(ellipse at 50% 50%, rgba(196,166,184,0.14) 0%, #050508 70%); }
#game-screen.env-earth     { background: radial-gradient(ellipse at 50% 50%, rgba(46,139,122,0.14) 0%, #050508 70%); }
#game-screen.env-yonkers   { background: radial-gradient(ellipse at 50% 50%, rgba(232,117,42,0.14) 0%, #050508 70%); }
#game-screen.env-tweaker   { background: radial-gradient(ellipse at 50% 50%, rgba(173,190,24,0.14) 0%, #050508 70%); }

/* Territory name watermark — center divider */
#game-screen::after {
    content: attr(data-territory);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.05);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* Glowing center line */
#game-screen::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    pointer-events: none;
    z-index: 2;
}

/* ── 3-COLUMN LANDSCAPE GAMEPLAY HUD ──
   Height is scarce on landscape mobile (375px-430px).
   Converted from stacked bands to a 3-column layout:
   - Left rail: player strip, crew synergy, leave & auto-battle controls
   - Center: opponent field, territory strip, player field, fanned hand
   - Right rail: opponent strip, hand backs, timer, combat log, phase button
── */
:root {
    --hud-rail-w: clamp(140px, 18vw, 185px);
    /* The hand band. Cards are scaled to fit it (js/board-fit.js). */
    --hud-hand-h: clamp(96px, 30vh, 280px);
    --hud-bar-h:  clamp(34px, 7vh, 42px);
    --hud-safe-l: max(var(--safe-left, 0px), 8px);
    --hud-safe-r: max(var(--safe-right, 0px), 8px);
    --hud-safe-t: max(var(--safe-top, 0px), 6px);
    --hud-safe-b: max(var(--safe-bottom, 0px), 4px);
}

/* ── LEFT RAIL: PLAYER HUD & CONTROLS ── */
#p-strip {
    position: fixed !important;
    top: var(--hud-safe-t) !important;
    left: var(--hud-safe-l) !important;
    bottom: auto !important;
    right: auto !important;
    width: var(--hud-rail-w) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    background: rgba(12, 12, 18, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
    z-index: 200 !important;
}
#p-strip .avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.15rem !important;
}
#p-strip .pname {
    font-size: 0.82rem !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(var(--hud-rail-w) - 40px) !important;
}
#p-strip .deck-info {
    font-size: 0.64rem !important;
    opacity: 0.85 !important;
}
#p-strip .money-box {
    font-size: 1.2rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    align-self: stretch !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
#p-strip .income-badge,
#p-strip .income-tier {
    display: inline-block !important;
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    align-self: stretch !important;
    text-align: center !important;
}

/* Player crew synergy HUD on left rail below strip */
#game-screen #p-synergy {
    position: fixed !important;
    top: calc(var(--hud-safe-t) + var(--p-strip-h, 150px) + 6px) !important;
    left: var(--hud-safe-l) !important;
    bottom: auto !important;
    right: auto !important;
    width: var(--hud-rail-w) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 220 !important;
    pointer-events: none !important;
}

/* Left rail bottom utility buttons */
#btn-leave-game-bottom {
    position: fixed !important;
    left: var(--hud-safe-l) !important;
    bottom: var(--hud-safe-b) !important;
    width: calc(var(--hud-rail-w) * 0.47) !important;
    height: 32px !important;
    font-size: 0.62rem !important;
    padding: 0 4px !important;
    z-index: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(10, 10, 15, 0.85) !important;
    border: 1px solid rgba(255, 59, 59, 0.3) !important;
    color: var(--red) !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
}
#btn-auto-battle {
    position: fixed !important;
    left: calc(var(--hud-safe-l) + var(--hud-rail-w) * 0.53) !important;
    bottom: var(--hud-safe-b) !important;
    width: calc(var(--hud-rail-w) * 0.47) !important;
    height: 32px !important;
    font-size: 0.62rem !important;
    padding: 0 4px !important;
    z-index: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(10, 10, 15, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
}

/* ── RIGHT RAIL: OPPONENT HUD, LOG & PHASE ACTION ── */
#game-screen .pstrip.opp {
    position: fixed !important;
    top: var(--hud-safe-t) !important;
    right: var(--hud-safe-r) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--hud-rail-w) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    background: rgba(12, 12, 18, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: 3px solid var(--red) !important;
    border-left: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
    z-index: 200 !important;
}
.pstrip.opp .avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.15rem !important;
}
.pstrip.opp .pname {
    font-size: 0.82rem !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(var(--hud-rail-w) - 40px) !important;
}
.pstrip.opp .deck-info {
    font-size: 0.64rem !important;
    opacity: 0.85 !important;
}
.pstrip.opp .money-box {
    font-size: 1.2rem !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    align-self: stretch !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.pstrip.opp .income-badge,
.pstrip.opp .income-tier {
    display: inline-block !important;
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    align-self: stretch !important;
    text-align: center !important;
}

#opp-hand-backs {
    position: fixed !important;
    top: calc(var(--hud-safe-t) + var(--opp-strip-h, 170px) + 4px) !important;
    right: var(--hud-safe-r) !important;
    display: flex !important;
    gap: -14px !important;
    z-index: 210 !important;
    pointer-events: none !important;
    transform: scale(0.35) !important;
    transform-origin: top right !important;
}

#game-screen #opp-synergy {
    position: fixed !important;
    top: calc(var(--hud-safe-t) + var(--opp-strip-h, 170px) + 44px) !important;
    right: var(--hud-safe-r) !important;
    left: auto !important;
    bottom: auto !important;
    width: var(--hud-rail-w) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 220 !important;
    pointer-events: none !important;
}

#game-screen #p-synergy .synergy-pill,
#game-screen #opp-synergy .synergy-pill {
    width: 34px !important;
    height: 34px !important;
    border-radius: 5px !important;
}
#game-screen #p-synergy .sp-count,
#game-screen #opp-synergy .sp-count {
    font-size: 0.68rem !important;
}
#game-screen #p-synergy .sp-crew,
#game-screen #opp-synergy .sp-crew {
    font-size: 0.42rem !important;
    max-width: 32px !important;
}

/* Turn timer on right rail */
#timer-wrap {
    position: fixed !important;
    right: var(--hud-safe-r) !important;
    bottom: calc(var(--hud-safe-b) + 98px) !important;
    top: auto !important;
    left: auto !important;
    z-index: 250 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
}

/* Combat / turn log on right rail */
#log-wrap {
    position: fixed !important;
    display: block !important;
    right: var(--hud-safe-r) !important;
    left: auto !important;
    bottom: calc(var(--hud-safe-b) + 48px) !important;
    width: var(--hud-rail-w) !important;
    max-width: var(--hud-rail-w) !important;
    box-sizing: border-box !important;
    background: rgba(8, 8, 12, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 3px 6px !important;
    z-index: 250 !important;
    pointer-events: auto !important;
}
#log {
    font-size: 0.64rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#log-history { display: none !important; }
#log-toggle-btn { display: none !important; }

/* Action bar & Phase button on right rail */
#actbar {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    pointer-events: none !important;
}
#phase-btn-wrap {
    position: fixed !important;
    right: var(--hud-safe-r) !important;
    bottom: var(--hud-safe-b) !important;
    width: var(--hud-rail-w) !important;
    z-index: 300 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    pointer-events: auto !important;
}
#phase-label { display: none !important; }
#phase-btn {
    width: 100% !important;
    height: 38px !important;
    font-size: 0.78rem !important;
    padding: 0 10px !important;
    background: linear-gradient(135deg, var(--gold) 0%, #ffe066 100%) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 1.5px !important;
}
#phase-btn:active { transform: scale(0.96) !important; }

/* ── CENTER AREA: BATTLEFIELD & HAND ── */
#bf {
    position: fixed !important;
    top: var(--hud-safe-t) !important;
    bottom: calc(var(--hud-safe-b) + var(--hud-hand-h) + 4px) !important;
    left: calc(var(--hud-rail-w) + var(--hud-safe-l) + 6px) !important;
    right: calc(var(--hud-rail-w) + var(--hud-safe-r) + 6px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    pointer-events: auto !important;
    overflow: visible !important;
    background: transparent !important;
    perspective: 1400px !important;
    z-index: 5 !important;
    padding: 0 !important;
}

/* Opponent field row */
.field-row.opp-row {
    display: flex !important;
    justify-content: center !important;
    gap: var(--field-gap) !important;
    padding: 0 4px !important;
    transform: scale(var(--bf-scale, .68)) perspective(900px) rotateX(-14deg) !important;
    margin: calc((var(--bf-scale, 1) - 1) * var(--row-h, 0px) / 2) 0 !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
}

/* Player field row */
.field-row.p-row {
    display: flex !important;
    justify-content: center !important;
    gap: var(--field-gap) !important;
    padding: 0 4px !important;
    transform: scale(var(--bf-scale, .68)) perspective(900px) rotateX(-10deg) !important;
    margin: calc((var(--bf-scale, 1) - 1) * var(--row-h, 0px) / 2) 0 !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
}

/* Stadium Arc — curve to prevent edge clipping */
.field-row .slot { transition: transform 0.4s ease; transform-style: preserve-3d; flex-shrink: 0; }
.opp-row .slot:nth-child(1) { transform: rotateY(12deg) translateZ(-10px); }
.opp-row .slot:nth-child(2) { transform: rotateY(5deg)  translateZ(-4px); }
.opp-row .slot:nth-child(3) { transform: translateZ(6px); }
.opp-row .slot:nth-child(4) { transform: rotateY(-5deg) translateZ(-4px); }
.opp-row .slot:nth-child(5) { transform: rotateY(-12deg) translateZ(-10px); }
.p-row .slot:nth-child(1)   { transform: rotateY(12deg) translateZ(-10px); }
.p-row .slot:nth-child(2)   { transform: rotateY(5deg)  translateZ(-4px); }
.p-row .slot:nth-child(3)   { transform: translateZ(6px); }
.p-row .slot:nth-child(4)   { transform: rotateY(-5deg) translateZ(-4px); }
.p-row .slot:nth-child(5)   { transform: rotateY(-12deg) translateZ(-10px); }

/* Floating trap indicators on battlefield */
#game-screen .trap-zone-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
    margin: 0 !important;
    z-index: 210 !important;
}
#game-screen .trap-zone,
#game-screen #opp-trap-zone,
#game-screen #p-trap-zone {
    width: 32px !important;
    height: 44px !important;
    border-radius: 4px !important;
    border: 1px dashed rgba(255, 107, 53, .3) !important;
    background: rgba(10, 8, 6, 0.65) !important;
    backdrop-filter: blur(6px) !important;
}
#game-screen .trap-zone.has-trap,
#game-screen #opp-trap-zone.has-trap,
#game-screen #p-trap-zone.has-trap {
    border-color: rgba(255, 107, 53, .7) !important;
    border-style: solid !important;
    background: rgba(255, 107, 53, .08) !important;
    box-shadow: 0 0 10px rgba(255, 107, 53, .35) !important;
}
#game-screen .trap-zone-label {
    font-size: .4rem !important;
    letter-spacing: 1px !important;
    opacity: .45 !important;
}
#game-screen .face-down-card {
    width: 24px !important;
    height: 36px !important;
    font-size: .75rem !important;
}
#game-screen .face-down-card::after {
    font-size: .35rem !important;
    letter-spacing: 0.5px !important;
}

/* ── HAND AREA: BOTTOM CENTER ── */
#hand-area {
    position: fixed !important;
    bottom: var(--hud-safe-b) !important;
    left: calc(var(--hud-rail-w) + var(--hud-safe-l) + 6px) !important;
    right: calc(var(--hud-rail-w) + var(--hud-safe-r) + 6px) !important;
    width: auto !important;
    height: var(--hud-hand-h) !important;
    z-index: 200 !important;
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    background: linear-gradient(0deg, rgba(4, 4, 6, 0.92) 0%, rgba(4, 4, 6, 0.45) 60%, transparent 100%) !important;
    border-top: none !important;
    box-shadow: none !important;
}
#hand-lbl { display: none !important; }
#hand-cards {
    transform: scale(var(--hand-scale, 1));
    transform-origin: 50% 100%;
    pointer-events: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding-bottom: 4px !important;
    perspective: 1200px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
}
.card-fanned {
    transform-origin: center bottom !important;
    margin: 0 -14px !important;
    transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1) !important;
}
.card-fanned.scrub-active {
    transform: translateY(-45px) scale(1.15) rotate(0deg) !important;
    z-index: 1000 !important;
}

/* ── ASPECT RATIO SCALING TIERS ── */
/* Square / Fold Inner (aspect < 1.35, e.g. 1080x900 = 1.20) */
@media (max-aspect-ratio: 135/100) {
    :root {
        --hud-rail-w: clamp(130px, 15vw, 160px);
    }

}

/* Standard / Wide Landscape (aspect >= 1.75, e.g. 667x375 = 1.78, 852x393 = 2.17) */
@media (min-aspect-ratio: 7/4) {
    :root {
        --hud-rail-w: clamp(140px, 18vw, 180px);
    }

}

/* Tall / Ultra-wide Landscape (aspect >= 2.0, e.g. 932x430 = 2.17) */
@media (min-aspect-ratio: 2/1) {
    :root {
        --hud-rail-w: clamp(148px, 18vw, 195px);
    }

}

/* Large touch screens / Desktop (min-height: 750px) */
@media (min-height: 750px) {
    :root {
        --hud-rail-w: clamp(160px, 16vw, 210px);
    }

}


/* ── HUD SCALE FOR BIG SCREENS (v3.2.43) ─────────────────────────────────────
   The rails were sized for a phone; on a 1080p monitor the text was tiny and the
   board sat in empty space. js/board-fit.js sets --hud-zoom (1 on phones, up to
   1.6 on a large monitor). Each rail element scales from the corner it is pinned
   to, and everything laid out against the rails uses the scaled width, so the
   layout is the same shape at every size. Transforms (not zoom) so hit-testing
   and positions behave identically in every browser. */
#p-strip { transform: scale(var(--hud-zoom, 1)) !important; transform-origin: top left !important; }
#game-screen .pstrip.opp { transform: scale(var(--hud-zoom, 1)) !important; transform-origin: top right !important; }
#game-screen #p-synergy {
    transform: scale(var(--hud-zoom, 1)) !important; transform-origin: top left !important;
    top: calc(var(--hud-safe-t) + var(--p-strip-h, 150px) * var(--hud-zoom, 1) + 6px) !important;
}
#game-screen #opp-synergy {
    transform: scale(var(--hud-zoom, 1)) !important; transform-origin: top right !important;
    top: calc(var(--hud-safe-t) + (var(--opp-strip-h, 170px) + 44px) * var(--hud-zoom, 1)) !important;
}
#opp-hand-backs {
    transform: scale(calc(.35 * var(--hud-zoom, 1))) !important;
    top: calc(var(--hud-safe-t) + (var(--opp-strip-h, 170px) + 4px) * var(--hud-zoom, 1)) !important;
}
#timer-wrap {
    transform: scale(var(--hud-zoom, 1)) !important; transform-origin: bottom right !important;
    bottom: calc(var(--hud-safe-b) + 98px * var(--hud-zoom, 1)) !important;
}
#log-wrap {
    transform: scale(var(--hud-zoom, 1)) !important; transform-origin: bottom right !important;
    bottom: calc(var(--hud-safe-b) + 48px * var(--hud-zoom, 1)) !important;
}
#phase-btn-wrap { transform: scale(var(--hud-zoom, 1)) !important; transform-origin: bottom right !important; }
#btn-leave-game-bottom { transform: scale(var(--hud-zoom, 1)) !important; transform-origin: bottom left !important; }
#btn-auto-battle {
    transform: scale(var(--hud-zoom, 1)) !important; transform-origin: bottom left !important;
    left: calc(var(--hud-safe-l) + var(--hud-rail-w) * 0.53 * var(--hud-zoom, 1)) !important;
}
#bf {
    left: calc(var(--hud-rail-w) * var(--hud-zoom, 1) + var(--hud-safe-l) + 6px) !important;
    right: calc(var(--hud-rail-w) * var(--hud-zoom, 1) + var(--hud-safe-r) + 6px) !important;
}
#hand-area {
    left: calc(var(--hud-rail-w) * var(--hud-zoom, 1) + var(--hud-safe-l) + 6px) !important;
    right: calc(var(--hud-rail-w) * var(--hud-zoom, 1) + var(--hud-safe-r) + 6px) !important;
}

/* Short phones (≤ 400px tall): the right rail can't fit strip + hand backs +
   synergy + timer. The backs are decoration (the strip already says HAND: n),
   so drop them and lift the synergy counter into their place. */
@media (max-height: 400px) {
    #opp-hand-backs { display: none !important; }
    #game-screen #opp-synergy {
        top: calc(var(--hud-safe-t) + (var(--opp-strip-h, 170px) + 4px) * var(--hud-zoom, 1)) !important;
    }
}

/* Field rows never scroll (v3.2.48). game.css gave them overflow-x: auto from the
   old portrait layout; js/board-fit.js now sizes the rows to fit, but a hovered
   card grows a little, the row became 1px scrollable, and Chrome on Windows drew
   a scrollbar under it (player report, 27" monitor). Hidden, not visible: any
   value but visible keeps the row flattened, and a visible row renders its tilt
   in true 3D, where clicks on board cards land on the row instead (attacks break). */
.field-row { overflow: hidden !important; }