/* ── Base TV canvas ─────────────────────────────────────── */
html, body { overflow: hidden; height: 100%; }

#tv {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vh;   /* landscape width = viewport height */
    height: 100vw;  /* landscape height = viewport width */
    transform: translate(-50%, -50%) rotate(90deg);
    background: #0d0d15;
    overflow: hidden;
}

/* ── Map area ───────────────────────────────────────────── */
#map-area {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#map-placeholder {
    color: #333;
    font-size: 1.5rem;
    font-family: var(--font);
    user-select: none;
}

/* Natural size, flex-centered; Panzoom scales from element center (50% 50%) */
#map-img {
    display: block;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    transition: opacity 4s ease;
}
#map-img:active { cursor: grabbing; }

/* ── Stat boxes container ───────────────────────────────── */

#stat-boxes-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

/* Hide stat boxes while seat-picker mode is active */
#tv.seats-mode #stat-boxes-container { display: none; }

/* ── Individual stat box ────────────────────────────────── */

/*
 * Display size: 400×160px. Side boxes (seats 1–6) are rotated so they
 * appear 160px wide × 400px tall flush to the screen edge.
 * transform-origin on left/right center keeps the pivot at the edge.
 */
.stat-box {
    position: absolute;
    width: 400px;
    height: 140px;
    background-color: rgba(20, 12, 5, 0.88);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ── Seat positions ─────────────────────────────────────── */
/*
 * Pattern for 400×140px side boxes:
 *   transform-origin: 70px 70px  (height/2 in both axes)
 *   top: calc(X% - 70px)         centers the rotated visual box at X%
 * Left seats rotate 90° CW  → 140px wide × 400px tall, flush to left edge.
 * Right seats rotate -90°   → flush to right edge; origin x = W−70 = 330px.
 * Bottom seats rotate 180°  → same footprint, flipped, centered horizontally.
 */

/* Left seats */
.stat-box[data-seat="1"] { left: 0; top: calc(20% - 70px); transform: rotate(90deg);  transform-origin: 70px 70px; }
.stat-box[data-seat="2"] { left: 0; top: calc(47% - 70px); transform: rotate(90deg);  transform-origin: 70px 70px; }
.stat-box[data-seat="3"] { left: 0; top: calc(74% - 70px); transform: rotate(90deg);  transform-origin: 70px 70px; }

/* Right seats */
.stat-box[data-seat="4"] { right: 0; top: calc(20% - 70px); transform: rotate(-90deg); transform-origin: 330px 70px; }
.stat-box[data-seat="5"] { right: 0; top: calc(47% - 70px); transform: rotate(-90deg); transform-origin: 330px 70px; }
.stat-box[data-seat="6"] { right: 0; top: calc(74% - 70px); transform: rotate(-90deg); transform-origin: 330px 70px; }

/* Bottom seats — centered at 30% and 57% of screen width */
.stat-box[data-seat="7"] { bottom: 0; left: calc(30% - 200px); transform: rotate(0deg); }
.stat-box[data-seat="8"] { bottom: 0; left: calc(57% - 200px); transform: rotate(0deg); }

/* ── Top row: Avatar + Name ─────────────────────────────── */

.stat-box-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.stat-box-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.stat-box-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(201, 168, 76, 0.8);
    background: #333;
    transition: box-shadow 0.4s ease, opacity 0.4s ease;
}

/* Companion pips — 11, 9, 7 o'clock positions */
.companion-pip {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    background: #333;
}
.companion-pip:nth-child(2) { top:  -8px; left:   2px; } /* 11 o'clock */
.companion-pip:nth-child(3) { top:  16px; left: -12px; } /* 9  o'clock */
.companion-pip:nth-child(4) { top:  40px; left:   2px; } /* 7  o'clock */

/* ── Condition glow animations ──────────────────────────── */

@keyframes glowPulse {
    0%   { box-shadow: 0 0 8px 3px var(--glow-color); }
    50%  { box-shadow: 0 0 22px 8px var(--glow-color); }
    100% { box-shadow: 0 0 8px 3px var(--glow-color); }
}

@keyframes glowFlicker {
    0%   { box-shadow: 0 0 10px 4px var(--glow-color); }
    20%  { box-shadow: 0 0 20px 8px var(--glow-color); }
    35%  { box-shadow: 0 0 6px 2px var(--glow-color); }
    55%  { box-shadow: 0 0 24px 10px var(--glow-color); }
    75%  { box-shadow: 0 0 8px 3px var(--glow-color); }
    90%  { box-shadow: 0 0 18px 7px var(--glow-color); }
    100% { box-shadow: 0 0 10px 4px var(--glow-color); }
}

.stat-box-avatar.condition-invisible  { opacity: 0.5; }

.stat-box-avatar.condition-poisoned   { --glow-color: rgba(46,204,113,0.85);  animation: glowPulse 2s ease-in-out infinite; }
.stat-box-avatar.condition-paralyzed  { --glow-color: rgba(241,196,15,0.85);  animation: glowPulse 1.5s ease-in-out infinite; }
.stat-box-avatar.condition-petrified  { --glow-color: rgba(149,165,166,0.85); animation: glowPulse 3s ease-in-out infinite; }
.stat-box-avatar.condition-stunned    { --glow-color: rgba(230,126,34,0.85);  animation: glowPulse 0.8s ease-in-out infinite; }
.stat-box-avatar.condition-unconscious{ --glow-color: rgba(146,43,33,0.85);   animation: glowPulse 3.5s ease-in-out infinite; }
.stat-box-avatar.condition-charmed    { --glow-color: rgba(233,30,140,0.85);  animation: glowPulse 2.5s ease-in-out infinite; }
.stat-box-avatar.condition-frightened { --glow-color: rgba(142,68,173,0.85);  animation: glowPulse 1.2s ease-in-out infinite; }
.stat-box-avatar.condition-burning    { --glow-color: rgba(231,76,60,0.85);   animation: glowFlicker 1.1s ease-in-out infinite; }

.stat-box-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
}

.stat-box-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    line-height: 1.2;
}

.stat-box-race-class {
    font-size: 15px;
    font-weight: bold;
    color: #c9a84c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    margin-top: 4px;
}

/* ── Weapon icon + attack bonus (top row additions) ─────── */

.stat-box-weapon-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* SVG weapon icon — colored via CSS mask so it matches the theme name color */
.wicon {
    display: block;
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Per-theme icon colors — match .stat-box-name colors exactly */
.stat-box[data-theme="wood"]        .wicon { background-color: #2c1004; }
.stat-box[data-theme="stone"]       .wicon { background-color: #f0f0f0; }
.stat-box[data-theme="parchment"]   .wicon { background-color: #1a0f00; }
.stat-box[data-theme="iron"]        .wicon { background-color: #e8e8e8; }
.stat-box[data-theme="arcane"]      .wicon { background-color: #e8d4ff; }
.stat-box[data-theme="celestial"]   .wicon { background-color: #1a5f5f; }
.stat-box[data-theme="dragonscale"] .wicon { background-color: #c8f0c8; }
.stat-box[data-theme="fire"]        .wicon { background-color: #fff0c0; }
.stat-box[data-theme="water"]       .wicon { background-color: #d0f0ff; }
.stat-box[data-theme="forest"]      .wicon { background-color: #d8f0c0; }

.stat-box-bonus {
    width: 54px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 4px;
    flex-shrink: 0;
    gap: 2px;
}

.stat-box-bonus-label {
    font-size: 9px;
    color: #c9a84c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    text-align: center;
}

.stat-box-bonus-value {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

/* ── Stats row ──────────────────────────────────────────── */

.stat-box-stats {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 36px;
    flex-shrink: 0;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 4px;
    flex-shrink: 0;
}

/* 80 + 70 + 4×47 + 5×5 gaps = 363px ≤ 370px usable (padding 15px L/R) */
.stat-cell.hp  { width: 80px; }
.stat-cell.sm  { width: 47px; }
.stat-cell.dmg { width: 70px; }

.stat-cell-label {
    font-size: 9px;
    color: #c9a84c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.stat-cell-value {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    line-height: 1.1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

.stat-cell.hp .stat-cell-value { font-size: 16px; }

/* ── Health bar ─────────────────────────────────────────── */

.stat-box-healthbar-track {
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.stat-box-healthbar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.stat-box-healthbar-fill.hp-high   { background: #27ae60; }
.stat-box-healthbar-fill.hp-medium { background: #f39c12; }
.stat-box-healthbar-fill.hp-low    { background: #c0392b; }

/* ── Per-theme text colors ──────────────────────────────── */
/*
 * Default (no theme / PNG missing): white name, gold race-class
 * Each theme overrides to suit its graphic's background tones.
 */

.stat-box[data-theme="wood"] .stat-box-name       { color: #2c1004; text-shadow: 0 1px 2px rgba(255,255,255,0.2); }
.stat-box[data-theme="wood"] .stat-box-race-class  { color: #5c2a08; text-shadow: none; }

.stat-box[data-theme="stone"] .stat-box-name       { color: #f0f0f0; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.stat-box[data-theme="stone"] .stat-box-race-class  { color: #c0c0c0; text-shadow: none; }

.stat-box[data-theme="parchment"] .stat-box-name       { color: #1a0f00; text-shadow: none; }
.stat-box[data-theme="parchment"] .stat-box-race-class  { color: #4a2e00; text-shadow: none; }

.stat-box[data-theme="iron"] .stat-box-name       { color: #e8e8e8; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.stat-box[data-theme="iron"] .stat-box-race-class  { color: #b0a090; text-shadow: none; }

.stat-box[data-theme="arcane"] .stat-box-name       { color: #e8d4ff; text-shadow: 0 0 8px rgba(180,100,255,0.6); }
.stat-box[data-theme="arcane"] .stat-box-race-class  { color: #b084e8; text-shadow: none; }

.stat-box[data-theme="celestial"] .stat-box-name       { color: #1a5f5f; text-shadow: none; }
.stat-box[data-theme="celestial"] .stat-box-race-class  { color: #8b6420; text-shadow: none; }

.stat-box[data-theme="dragonscale"] .stat-box-name       { color: #c8f0c8; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.stat-box[data-theme="dragonscale"] .stat-box-race-class  { color: #70b870; text-shadow: none; }

.stat-box[data-theme="fire"] .stat-box-name       { color: #fff0c0; text-shadow: 0 0 8px rgba(255,100,0,0.7); }
.stat-box[data-theme="fire"] .stat-box-race-class  { color: #fff0a0; text-shadow: none; }

.stat-box[data-theme="water"] .stat-box-name       { color: #d0f0ff; text-shadow: 0 0 6px rgba(0,160,255,0.5); }
.stat-box[data-theme="water"] .stat-box-race-class  { color: #70c8f0; text-shadow: none; }

.stat-box[data-theme="forest"] .stat-box-name       { color: #d8f0c0; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
.stat-box[data-theme="forest"] .stat-box-race-class  { color: #88c860; text-shadow: none; }

/* ── Seat number markers (seats_visible mode) ───────────── */

#markers-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.seat-marker {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    border: 3px solid #c9a84c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    font-family: var(--font);
    box-shadow: 0 4px 24px rgba(0,0,0,.6);
    transform: translate(-50%, -50%) rotate(90deg);
}

.sm-number {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: #c9a84c;
}
.sm-name {
    font-size: 0.65rem;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .05em;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Marker positions */
.seat-marker[data-seat="1"] { left: 87px; top: 20%; }
.seat-marker[data-seat="2"] { left: 87px; top: 47%; }
.seat-marker[data-seat="3"] { left: 87px; top: 74%; }
.seat-marker[data-seat="4"] { right: 87px; left: auto; top: 20%; transform: translate(50%, -50%) rotate(-90deg); }
.seat-marker[data-seat="5"] { right: 87px; left: auto; top: 47%; transform: translate(50%, -50%) rotate(-90deg); }
.seat-marker[data-seat="6"] { right: 87px; left: auto; top: 74%; transform: translate(50%, -50%) rotate(-90deg); }
.seat-marker[data-seat="7"] { left: 30%; bottom: 87px; top: auto; transform: translate(-50%, 50%) rotate(180deg); }
.seat-marker[data-seat="8"] { left: 57%; bottom: 87px; top: auto; transform: translate(-50%, 50%) rotate(180deg); }

.seat-marker.claimed {
    background: rgba(46,125,50,.85);
    border-color: #6fcf76;
}
.seat-marker.claimed .sm-number { color: #fff; }
.seat-marker.claimed .sm-name   { color: rgba(255,255,255,.9); font-weight: 700; }

/* ── Fog of War overlay ─────────────────────────────────── */
/* ── Stat box visibility states ──────────────────────────── */
.stat-box {
    overflow: hidden;
    transition: height 0.38s ease, opacity 0.3s ease,
                padding-top 0.38s ease, padding-bottom 0.38s ease,
                row-gap 0.38s ease,
                margin-left 0.38s ease, margin-right 0.38s ease,
                transform 0.38s ease;
}
.stat-box-stats {
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.22s ease;
    max-height: 60px;
}
.stat-box-healthbar-track {
    display: none; /* hidden — restore by removing this line */
    transition: max-height 0.32s ease, opacity 0.22s ease;
    max-height: 20px;
}
/* Partial: avatar + name/class/weapon only, 10px padding top/bottom,
   row-gap:0 collapses flex gaps so total height = 10+56+10 = 76px */
.stat-box.box-partial {
    height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
    row-gap: 0;
}
.stat-box.box-partial .stat-box-stats,
.stat-box.box-partial .stat-box-healthbar-track {
    max-height: 0;
    opacity: 0;
}

/* Left seats: shift box left so the pivot stays at the screen edge */
/* Formula: -(full_half − partial_half) × 2 = -(70 − 38) × 2 = -64px */
.stat-box.box-partial[data-seat="1"],
.stat-box.box-partial[data-seat="2"],
.stat-box.box-partial[data-seat="3"] { margin-left: -64px; }

/* Right seats: mirror of left */
.stat-box.box-partial[data-seat="4"],
.stat-box.box-partial[data-seat="5"],
.stat-box.box-partial[data-seat="6"] { margin-right: -64px; }


.stat-box.box-hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

#fog-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s ease;
    display: none;
}

#grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#grid-overlay.grid-active {
    opacity: 1;
}