/* ============================================================
   ROOT & RESET
   ============================================================ */
:root {
    --bg: #1a1a2e;
    --panel: #16213e;
    --gold: #e8c547;
    --text: #f0e6d3;
    --btn: #e8c547;
    --btn-hover: #f0d860;
    --danger: #e74c3c;
    --success: #2ecc71;
    --wood-light: #d4b896;
    --wood-dark: #8b5e3c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
}

#gameCanvas,
#gameCanvas canvas {
    touch-action: none;
}

body {
    /* ★ Suez One (Latin) → Chiron Hei HK (繁體中文) → system fallbacks */
    font-family: 'Suez One', 'Chiron Hei HK',
        'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#gameCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

/* ============================================================
   OVERLAYS & PANELS
   ============================================================ */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

#restartConfirmOverlay:not(.hidden) .panel {
    animation: modalPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.check-warning.hidden,
.game-top-bar.hidden,
.no-target-tip.hidden,
.ai-thinking.hidden {
    display: none;
}

.panel {
    background: var(--panel);
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 520px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
}

.panel h1 {
    font-size: 2.4rem;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.4);
}

.panel h2 {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.panel p {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    padding: 14px 32px;
    margin: 8px;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.25s ease;
    font-family: inherit;
    color: #1a1a2e;
    background: var(--btn);
    box-shadow: 0 4px 15px rgba(232, 197, 71, 0.3);
    position: relative;
    overflow: hidden;
}

.btn:hover:not(:disabled) {
    background: var(--btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 197, 71, 0.45);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-secondary {
    background: #3a3a5c;
    color: var(--text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover:not(:disabled) {
    background: #4a4a6c;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-danger {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.btn-danger:hover:not(:disabled) {
    background: #ff6b5e;
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.45);
}

.btn-success {
    background: var(--success);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

.btn-success:hover:not(:disabled) {
    background: #55ef9a;
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.45);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

/* ============================================================
   MAIN MENU
   ============================================================ */
.main-menu-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 380px;
    margin: 0 auto;
    justify-content: stretch;
}

.main-menu-buttons .btn {
    margin: 0;
    width: 100%;
    padding: 14px 12px;
    font-size: 1rem;
}

@media (max-width: 480px) {
    .main-menu-buttons .btn {
        padding: 12px 8px;
        font-size: 0.92rem;
        letter-spacing: 0;
    }
}

.difficulty-btn {
    padding: 12px 24px;
    font-size: 1rem;
    min-width: 100px;
}

.code-input {
    font-size: 2rem;
    padding: 12px;
    text-align: center;
    width: 160px;
    border: 3px solid var(--gold);
    border-radius: 12px;
    background: #1a1a2e;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 8px;
    font-family: 'Courier New', monospace;
    outline: none;
    margin: 12px auto;
}

.code-input:focus {
    border-color: #fff;
    box-shadow: 0 0 25px rgba(232, 197, 71, 0.5);
}

.code-display {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 12px;
    font-family: 'Courier New', monospace;
    margin: 16px 0;
    text-shadow: 0 0 30px rgba(232, 197, 71, 0.6);
    background: #1a1a2e;
    padding: 16px 24px;
    border-radius: 12px;
    border: 2px dashed var(--gold);
}

.status-text {
    font-size: 1rem;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
    display: inline-block;
}

/* ============================================================
   GAME TOP BAR
   ============================================================ */
.game-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    flex-wrap: wrap;
    gap: 4px;
}

.game-top-bar>* {
    pointer-events: auto;
}

.turn-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
}

.turn-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 12px currentColor;
}

.turn-dot.white {
    background: #f0e6d3;
    color: #f0e6d3;
}

.turn-dot.black {
    background: #2a2a2a;
    color: #888;
    border: 2px solid #888;
}

.check-warning {
    color: #e8c547;
    font-weight: 900;
    font-size: 1.1rem;
    animation: pulse 0.8s infinite;
}

.ai-thinking {
    color: #7ac8ff;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 1px;
    animation: pulse 0.7s infinite;
    text-shadow: 0 0 12px rgba(122, 200, 255, 0.5);
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ============================================================
   TIMER
   ============================================================ */
.timer-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.timer-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 12px;
    transition: all 0.3s;
}

.timer-item.active {
    background: rgba(232, 197, 71, 0.25);
    box-shadow: 0 0 20px rgba(232, 197, 71, 0.15);
}

.timer-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.timer-item .dot.white {
    background: #f0e6d3;
}

.timer-item .dot.black {
    background: #2a2a2a;
    border: 1px solid #888;
}

.timer-item .time {
    min-width: 42px;
    text-align: center;
}

.timer-item .time.warning {
    color: #ff6b5e;
    animation: pulse 0.5s infinite;
}

.timer-item .time.infinity {
    min-width: 28px;
    font-size: 1.2rem;
}

.timer-sep {
    opacity: 0.3;
    padding: 0 2px;
}

/* ============================================================
   PROMOTION / GAME OVER
   ============================================================ */
.promotion-choices {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.promotion-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: #1a1a2e;
    color: var(--gold);
    font-size: 2.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-family: inherit;
}

.promotion-btn:hover {
    background: var(--gold);
    color: #1a1a2e;
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(232, 197, 71, 0.6);
}

.game-over-text {
    font-size: 2rem;
    font-weight: 900;
    margin: 16px 0;
    letter-spacing: 2px;
}

.game-over-text.win {
    color: #2ecc71;
}

.game-over-text.lose {
    color: #e74c3c;
}

.game-over-text.draw {
    color: #f39c12;
}

/* ============================================================
   ACTION BAR
   ============================================================ */
#actionBar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 20px;
    z-index: 100;
    gap: 12px;
    background: rgba(22, 33, 62, 0.92);
    border: 2px solid var(--gold);
    padding: 10px 20px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

#actionBar.visible {
    display: flex;
}

#actionBar .btn {
    padding: 10px 24px;
    font-size: 0.95rem;
    margin: 2px 4px;
    min-width: 100px;
}

#actionBar .btn-action-move,
#actionBar .btn-action-attack {
    background: #3a3a5c;
    color: var(--text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

#actionBar .btn-action-move.active,
#actionBar .btn-action-attack.active {
    background: var(--gold);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(232, 197, 71, 0.4);
}

#actionBar .btn-action-move.active:hover:not(:disabled),
#actionBar .btn-action-attack.active:hover:not(:disabled) {
    background: var(--btn-hover);
    box-shadow: 0 8px 25px rgba(232, 197, 71, 0.5);
}

#actionBar .btn-action-move:not(.active):hover:not(:disabled),
#actionBar .btn-action-attack:not(.active):hover:not(:disabled) {
    background: #4a4a6c;
}

#actionBar .btn-action-attack:disabled {
    background: #2a2a3a !important;
    color: #666 !important;
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

#actionBar .btn-action-attack.cooldown {
    background: #2a2a3a !important;
    color: #7ac8ff !important;
    opacity: 0.9;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.action-label {
    color: var(--text);
    font-size: 0.75rem;
    opacity: 0.6;
    padding: 0 4px;
    letter-spacing: 1px;
}

/* ============================================================
   AIM HINT / REMOTE AIM
   ============================================================ */
#aimHint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    padding: 12px 24px;
    border-radius: 14px;
    border: 2px solid var(--gold);
    color: var(--text);
    font-size: 0.95rem;
    pointer-events: none;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
}

#aimHint.visible {
    display: block;
}

.no-target-tip {
    font-size: 0.75rem;
    color: #ff6b5e;
    opacity: 0.8;
    margin-left: 6px;
}

.remote-aim-indicator {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    border: 3px solid #ff8800;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 136, 0, 0.6);
    animation: aimPulse 0.8s infinite alternate;
    display: none;
}

@keyframes aimPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.remote-aim-line {
    position: fixed;
    z-index: 49;
    pointer-events: none;
    height: 3px;
    background: linear-gradient(90deg, #ff8800, #ffcc00);
    box-shadow: 0 0 20px rgba(255, 136, 0, 0.5);
    transform-origin: left center;
    display: none;
}

/* ============================================================
   ROOM SETTINGS UI
   ============================================================ */
.settings-group {
    text-align: left;
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: var(--gold);
}

.settings-group .desc {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 8px;
}

.mode-btn,
.time-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-width: 80px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #2a2a4a;
    color: var(--text);
    cursor: pointer;
    transition: all 0.25s;
    font-family: inherit;
    font-weight: 600;
}

.mode-btn:hover,
.time-btn:hover {
    background: #3a3a5c;
}

.mode-btn.active,
.time-btn.active {
    border-color: var(--gold);
    background: var(--gold);
    color: #1a1a2e;
}

.mode-btn .icon {
    font-size: 1.2rem;
    margin-right: 4px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    padding: 4px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-group .color-tag {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.checkbox-group .color-tag.white-tag {
    background: #f0e6d3;
}

.checkbox-group .color-tag.black-tag {
    background: #2a2a2a;
    border-color: #888;
}

.ability-disabled-hint {
    font-size: 0.8rem;
    opacity: 0.5;
    padding: 4px 0;
    font-style: italic;
}

/* ============================================================
   READY STATUS
   ============================================================ */
.ready-status-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.ready-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
}

.ready-status-item .ready-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s;
}

.ready-status-item .ready-dot.waiting {
    background: #888;
}

.ready-status-item .ready-dot.ready {
    background: #2ecc71;
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.5);
}

/* ============================================================
   FLOATING TOP-LEFT BUTTONS (☰ / ⛶)
   ============================================================ */
#topBarReopenBtn,
#globalFullscreenBtn {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid var(--gold);
    background: rgba(22, 33, 62, 0.92);
    color: var(--gold);
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition:
        top 0.25s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

#topBarReopenBtn:hover,
#globalFullscreenBtn:hover {
    background: var(--gold);
    color: #1a1a2e;
    transform: scale(1.06);
}

#topBarReopenBtn:active,
#globalFullscreenBtn:active {
    transform: scale(0.93);
}

#topBarReopenBtn {
    z-index: 301;
}

#globalFullscreenBtn {
    z-index: 300;
}

#topBarReopenBtn.hidden {
    display: none;
}

#globalFullscreenBtn.below-topbar {
    top: 90px;
}

#globalFullscreenBtn.below-reopen {
    top: 60px;
}

@media (max-height: 500px) {

    #topBarReopenBtn,
    #globalFullscreenBtn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
        top: 8px;
        left: 8px;
    }

    #globalFullscreenBtn.below-topbar {
        top: 52px;
    }

    #globalFullscreenBtn.below-reopen {
        top: 52px;
    }
}

@media (orientation: landscape) and (pointer: coarse) {

    #topBarReopenBtn,
    #globalFullscreenBtn {
        top: max(10px, env(safe-area-inset-top));
        left: max(10px, env(safe-area-inset-left));
        right: auto;
    }

    #globalFullscreenBtn.below-topbar {
        top: calc(max(10px, env(safe-area-inset-top)) + 50px);
    }

    #globalFullscreenBtn.below-reopen {
        top: calc(max(10px, env(safe-area-inset-top)) + 44px + 6px);
    }
}

/* ============================================================
   MOBILE CANNON CONTROLS (JOYSTICK + FIRE)
   ============================================================ */
#mobileCannonControls {
    position: fixed;
    inset: 0;
    z-index: 250;
    pointer-events: none;
    display: none;
}

#mobileCannonControls.active {
    display: block;
}

#joystickBase {
    position: absolute;
    bottom: 40px;
    left: 30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 197, 71, 0.18), rgba(232, 197, 71, 0.05));
    border: 3px solid rgba(232, 197, 71, 0.55);
    pointer-events: auto;
    touch-action: none;
    box-shadow: inset 0 0 40px rgba(232, 197, 71, 0.2), 0 8px 30px rgba(0, 0, 0, 0.4);
}

#joystickKnob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f7e07a, #d8b22e);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px rgba(232, 197, 71, 0.7), inset 0 -4px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    will-change: transform;
}

#fireBtn {
    position: absolute;
    bottom: 50px;
    right: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff7c70, #d63d2e);
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.55);
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
    box-shadow: 0 0 40px rgba(231, 76, 60, 0.75), inset 0 -5px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: inherit;
    font-weight: 900;
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

#fireBtn:active,
#fireBtn.pressed {
    transform: scale(0.93);
    box-shadow: 0 0 70px rgba(231, 76, 60, 1);
}

#cancelCannonBtn {
    position: absolute;
    top: 70px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    font-weight: 900;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cancelCannonBtn:active {
    transform: scale(0.92);
}

@media (max-height: 500px) {
    #joystickBase {
        width: 120px;
        height: 120px;
        bottom: 20px;
        left: 20px;
    }

    #joystickKnob {
        width: 52px;
        height: 52px;
    }

    #fireBtn {
        width: 100px;
        height: 100px;
        bottom: 20px;
        right: 20px;
    }

    #fireBtn span:first-child {
        font-size: 1.5rem;
    }

    #fireBtn span:last-child {
        font-size: 0.7rem;
    }

    #cancelCannonBtn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        top: 55px;
    }
}

/* ============================================================
   ANIMATED CHESS BACKGROUND (MENU)
   — optimized for mobile: GPU-only transforms, vendor prefixes,
     fewer layers on small screens, no expensive filter/blur.
   ============================================================ */
.overlay {
    overflow: hidden;
}

.chess-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Force a GPU compositing layer so children animate smoothly */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── Grid ─────────────────────────────────────────────────── */
.bg-grid {
    position: absolute;
    inset: -25%;
    background-image:
        linear-gradient(45deg, rgba(232, 197, 71, 0.06) 25%, transparent 25%,
            transparent 75%, rgba(232, 197, 71, 0.06) 75%),
        linear-gradient(45deg, rgba(232, 197, 71, 0.06) 25%, transparent 25%,
            transparent 75%, rgba(232, 197, 71, 0.06) 75%);
    background-size: 140px 140px;
    background-position: 0 0, 70px 70px;
    -webkit-animation: bgGridDrift 80s linear infinite;
    animation: bgGridDrift 80s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
    opacity: 0.9;
    /* Pre-declare so the browser promotes it immediately */
    will-change: transform;
}

@-webkit-keyframes bgGridDrift {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(140px, 140px, 0);
    }
}

@keyframes bgGridDrift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(140px, 140px, 0);
    }
}

/* ── Center glow ──────────────────────────────────────────── */
.bg-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140vmax;
    height: 140vmax;
    background: radial-gradient(circle,
            rgba(232, 197, 71, 0.16) 0%,
            rgba(232, 197, 71, 0.06) 22%,
            rgba(232, 197, 71, 0.02) 42%,
            transparent 62%);
    -webkit-animation: bgGlowPulse 9s ease-in-out infinite;
    animation: bgGlowPulse 9s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

@-webkit-keyframes bgGlowPulse {

    0%,
    100% {
        opacity: 0.75;
        -webkit-transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes bgGlowPulse {

    0%,
    100% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* ── Floating chess pieces ────────────────────────────────── */
.piece {
    position: absolute;
    top: 0;
    color: rgba(232, 197, 71, 0.10);
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", serif;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    filter: blur(0.5px);
    text-shadow: 0 0 32px rgba(232, 197, 71, 0.25);
    -webkit-animation: pieceFloat linear infinite;
    animation: pieceFloat linear infinite;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Start off-screen so nothing flashes before the animation begins */
    -webkit-transform: translate3d(0, 110vh, 0);
    transform: translate3d(0, 110vh, 0);
}

.piece.p1 {
    left: 4%;
    font-size: 130px;
    -webkit-animation-duration: 44s;
    animation-duration: 44s;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

.piece.p2 {
    left: 18%;
    font-size: 70px;
    -webkit-animation-duration: 58s;
    animation-duration: 58s;
    -webkit-animation-delay: -18s;
    animation-delay: -18s;
}

.piece.p3 {
    left: 32%;
    font-size: 100px;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
    -webkit-animation-delay: -30s;
    animation-delay: -30s;
}

.piece.p4 {
    left: 46%;
    font-size: 60px;
    -webkit-animation-duration: 64s;
    animation-duration: 64s;
    -webkit-animation-delay: -10s;
    animation-delay: -10s;
}

.piece.p5 {
    left: 60%;
    font-size: 110px;
    -webkit-animation-duration: 46s;
    animation-duration: 46s;
    -webkit-animation-delay: -40s;
    animation-delay: -40s;
}

.piece.p6 {
    left: 74%;
    font-size: 75px;
    -webkit-animation-duration: 56s;
    animation-duration: 56s;
    -webkit-animation-delay: -24s;
    animation-delay: -24s;
}

.piece.p7 {
    left: 86%;
    font-size: 95px;
    -webkit-animation-duration: 52s;
    animation-duration: 52s;
    -webkit-animation-delay: -6s;
    animation-delay: -6s;
}

.piece.p8 {
    left: 94%;
    font-size: 55px;
    -webkit-animation-duration: 62s;
    animation-duration: 62s;
    -webkit-animation-delay: -36s;
    animation-delay: -36s;
}

@-webkit-keyframes pieceFloat {
    0% {
        -webkit-transform: translate3d(0, 110vh, 0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(30px, -25vh, 0) rotate(28deg);
        opacity: 0;
    }
}

@keyframes pieceFloat {
    0% {
        transform: translate3d(0, 110vh, 0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        transform: translate3d(30px, -25vh, 0) rotate(28deg);
        opacity: 0;
    }
}

.overlay .panel {
    position: relative;
    z-index: 1;
}

/* ── Accessibility: still respect reduced-motion ──────────── */
@media (prefers-reduced-motion: reduce) {

    .bg-grid,
    .bg-glow,
    .piece {
        -webkit-animation: none !important;
        animation: none !important;
    }

    .piece {
        opacity: 0.08;
        -webkit-transform: translateY(50vh);
        transform: translateY(50vh);
    }
}

/* ============================================================
   Mobile / touch devices
   — KEEP the animations running, but lighter:
     • fewer layers  (hide 4 of the 8 pieces)
     • bigger tiles  (less overdraw in the grid)
     • no blur/text-shadow  (biggest mobile GPU cost)
     • no backdrop-filter   (perf + iOS Safari flicker bug)
   ============================================================ */
@media (pointer: coarse),
(max-width: 900px) {
    .overlay {
        background: rgba(0, 0, 0, 0.88);
        /* backdrop-filter intentionally omitted on mobile */
    }

    /* Grid: same drift, just slower + coarser */
    .bg-grid {
        background-size: 100px 100px;
        background-position: 0 0, 50px 50px;
        -webkit-animation-duration: 60s;
        animation-duration: 60s;
        opacity: 0.75;
    }

    /* Glow: still pulses, just a bit slower and smaller */
    .bg-glow {
        width: 100vmax;
        height: 100vmax;
        -webkit-animation-duration: 12s;
        animation-duration: 12s;
    }

    /* Pieces: keep floating, kill the expensive effects */
    .piece {
        filter: none;
        text-shadow: none;
        opacity: 0.08;
    }

    /* Hide half the pieces on small screens.
       Animations still run for the remaining 4. */
    .piece.p2,
    .piece.p4,
    .piece.p6,
    .piece.p8 {
        display: none;
    }

    #gameCanvas canvas {
        max-width: 100%;
        max-height: 100%;
    }
}

/* ============================================================
   AI MODE TOGGLE SWITCH
   ============================================================ */
.game-mode-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 22px auto 8px;
    flex-wrap: wrap;
}

.game-mode-toggle-row .mode-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    opacity: 0.55;
    transition: opacity 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.panel[data-mode="normal"] .mode-label:first-child,
.panel[data-mode="totally"] .mode-label:last-child {
    opacity: 1;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(232, 197, 71, 0.35);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 68px;
    height: 34px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #3a3a5c;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 34px;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 35% 35%, #f7e07a, #d8b22e);
    border-radius: 50%;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.25s ease,
        box-shadow 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.toggle-switch input:checked+.toggle-slider {
    background: linear-gradient(90deg, #b8941f, #e8c547);
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(232, 197, 71, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.toggle-switch input:checked+.toggle-slider::before {
    transform: translate(34px, -50%);
    background: radial-gradient(circle at 35% 35%, #fff6c9, #f0d860);
    box-shadow: 0 0 14px rgba(255, 240, 160, 0.9), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.toggle-switch:active .toggle-slider::before {
    width: 28px;
}

.mode-hint {
    font-size: 0.82rem;
    opacity: 0.75;
    margin: 4px 0 0;
    letter-spacing: 0.3px;
}

.mode-hint strong {
    color: var(--gold);
}

@media (max-width: 480px) {
    .game-mode-toggle-row {
        gap: 10px;
        margin-top: 18px;
    }

    .game-mode-toggle-row .mode-label {
        font-size: 0.8rem;
    }

    .toggle-switch {
        width: 58px;
        height: 30px;
    }

    .toggle-slider::before {
        height: 20px;
        width: 20px;
    }

    .toggle-switch input:checked+.toggle-slider::before {
        transform: translate(28px, -50%);
    }
}

/* ============================================================
   QUEEN REVIVE CHOOSER + SPEECH BUBBLE
   ============================================================ */
#reviveChoices .promotion-btn {
    flex-direction: column;
    gap: 2px;
    font-size: 1.9rem;
    position: relative;
}

#reviveChoices .promotion-btn .revive-count {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.65;
    letter-spacing: 0.5px;
}

#reviveChoices .promotion-btn.heal-tinted {
    border-color: #2ecc71;
}

.queen-speech-bubble {
    position: fixed;
    z-index: 150;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(22, 33, 62, 0.96), rgba(10, 15, 35, 0.96));
    color: #e8c547;
    font-family: 'Suez One', 'Chiron Hei HK',
        'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 10px 18px;
    border-radius: 14px;
    border: 2px solid #e8c547;
    box-shadow:
        0 0 26px rgba(232, 197, 71, 0.55),
        0 8px 26px rgba(0, 0, 0, 0.65),
        inset 0 0 14px rgba(232, 197, 71, 0.12);
    white-space: nowrap;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(232, 197, 71, 0.65);
    transform: translate(-50%, -100%) scale(0.85);
    opacity: 0;
    transition:
        opacity 0.32s ease,
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}

.queen-speech-bubble::before,
.queen-speech-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

.queen-speech-bubble::before {
    bottom: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid #e8c547;
    filter: drop-shadow(0 0 6px rgba(232, 197, 71, 0.55));
}

.queen-speech-bubble::after {
    bottom: -8px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid #16213e;
    z-index: 1;
}

.queen-speech-bubble.visible {
    opacity: 1;
    transform: translate(-50%, -120%) scale(1);
}

.queen-speech-bubble.fading {
    opacity: 0;
    transform: translate(-50%, -135%) scale(0.95);
}

/* ============================================================
   DOMAIN EXPANSION — prompt + pre-battle animation
   ============================================================ */
#domainPromptOverlay {
    z-index: 400;
    background: rgba(0, 0, 0, 0.9);
}

#domainPromptOverlay .panel {
    border-color: #d9a6ff;
    box-shadow: 0 0 60px rgba(217, 166, 255, 0.35), 0 20px 60px rgba(0, 0, 0, 0.65);
}

#domainPromptOverlay h2 {
    color: #d9a6ff;
    text-shadow: 0 0 20px rgba(217, 166, 255, 0.55);
}

.domain-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #000;
    overflow: hidden;
    pointer-events: none;
}

.domain-overlay.hidden {
    display: none;
}

.domain-circle {
    --domain-color: #e8c547;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--domain-color) 0%, rgba(0, 0, 0, 0) 72%);
    border: 4px solid var(--domain-color);
    box-shadow: 0 0 90px var(--domain-color), inset 0 0 70px var(--domain-color);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
    animation: domainCircleExpand 1.5s cubic-bezier(0.5, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

@keyframes domainCircleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.9;
    }

    65% {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0.75;
    }

    100% {
        transform: translate(-50%, -50%) scale(34);
        opacity: 1;
    }
}

.domain-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    animation: domainFlash 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes domainFlash {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    62% {
        opacity: 0.92;
    }

    78% {
        opacity: 0.18;
    }

    100% {
        opacity: 0;
    }
}

.domain-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    animation: domainTextPop 0.7s ease-out 0.45s both;
    text-shadow: 0 0 30px currentColor;
    color: #fff;
}

@keyframes domainTextPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
        letter-spacing: 4px;
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        letter-spacing: 14px;
    }
}

.domain-title {
    font-size: 3.6rem;
    font-weight: 900;
    letter-spacing: 14px;
    color: #e8c547;
    text-shadow: 0 0 40px #e8c547, 0 0 90px #e8c547;
}

.domain-subtitle {
    font-size: 0.95rem;
    letter-spacing: 8px;
    opacity: 0.75;
    margin-top: 8px;
    color: #fff;
}

/* ============================================================
   VS SCREEN — cinematic pre-battle intro
   ============================================================ */
.vs-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    overflow: hidden;
    perspective: 1000px;
    animation: vsCameraShake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    animation-play-state: paused;
}

.vs-overlay.hidden {
    display: none;
}

.vs-overlay.animate {
    animation-play-state: running;
}

@keyframes vsCameraShake {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    10% {
        transform: translate3d(-8px, 4px, 0);
    }

    20% {
        transform: translate3d(7px, -3px, 0);
    }

    30% {
        transform: translate3d(-6px, -2px, 0);
    }

    40% {
        transform: translate3d(5px, 3px, 0);
    }

    55% {
        transform: translate3d(-4px, 2px, 0);
    }

    70% {
        transform: translate3d(3px, -2px, 0);
    }

    85% {
        transform: translate3d(-2px, 1px, 0);
    }
}

.vs-bg-split {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60%;
    z-index: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}

.vs-bg-red {
    left: 0;
    background:
        radial-gradient(circle at 0% 50%, #000 0%, rgba(60, 0, 20, 0.9) 30%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(255, 40, 80, 0.35) 0%, transparent 55%),
        repeating-linear-gradient(45deg, transparent, transparent 22px,
            rgba(255, 80, 80, 0.06) 22px, rgba(255, 80, 80, 0.06) 44px);
    transform-origin: left center;
}

.vs-bg-blue {
    right: 0;
    background:
        radial-gradient(circle at 100% 50%, #fff 0%, rgba(255, 255, 255, 0.9) 30%, transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(122, 200, 255, 0.4) 0%, transparent 55%),
        repeating-linear-gradient(45deg, transparent, transparent 22px,
            rgba(0, 0, 0, 0.06) 22px, rgba(0, 0, 0, 0.06) 44px);
    transform-origin: right center;
}

.vs-overlay.animate .vs-bg-split {
    opacity: 1;
    transform: scaleX(1);
}

.vs-vignette {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
            transparent 30%,
            rgba(0, 0, 0, 0.55) 72%,
            rgba(0, 0, 0, 0.95) 100%);
    opacity: 0;
}

.vs-overlay.animate .vs-vignette {
    animation: vsVignettePulse 3.2s ease-in-out infinite;
}

@keyframes vsVignettePulse {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.vs-speedlines {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%) rotate(0deg);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: repeating-conic-gradient(from 0deg,
            transparent 0deg, transparent 3deg,
            rgba(232, 197, 71, 0.14) 3deg, rgba(232, 197, 71, 0.14) 3.4deg,
            transparent 3.4deg, transparent 12deg);
    -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 45%, transparent 78%);
    mask-image: radial-gradient(circle, transparent 18%, #000 45%, transparent 78%);
}

.vs-overlay.animate .vs-speedlines {
    animation: vsSpeedlineSweep 5s linear infinite,
        vsSpeedlineFadeIn 0.6s ease-out 0.2s forwards;
}

@keyframes vsSpeedlineSweep {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes vsSpeedlineFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.9;
    }
}

.vs-lightning {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 100vh;
    z-index: 6;
    pointer-events: none;
}

.vs-lightning span {
    position: absolute;
    left: 50%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg,
            transparent 0%,
            #ffffff 20%,
            #ffe27a 50%,
            #ff88ff 80%,
            transparent 100%);
    box-shadow:
        0 0 18px #fff,
        0 0 40px #ffe27a,
        0 0 70px #ff66cc;
    opacity: 0;
    transform-origin: center;
}

.vs-lightning span:nth-child(1) {
    height: 42vh;
    top: 20vh;
    transform: translate(-50%, 0) rotate(8deg);
}

.vs-lightning span:nth-child(2) {
    height: 55vh;
    top: 15vh;
    transform: translate(-50%, 0) rotate(-5deg);
}

.vs-lightning span:nth-child(3) {
    height: 35vh;
    top: 30vh;
    transform: translate(-50%, 0) rotate(14deg);
}

.vs-lightning span:nth-child(4) {
    height: 65vh;
    top: 10vh;
    transform: translate(-50%, 0) rotate(-12deg);
}

.vs-overlay.animate .vs-lightning span {
    animation: vsLightningFlicker 0.4s ease-out 0.55s 4,
        vsLightningDeath 0.5s ease-in 2.3s forwards;
}

.vs-lightning span:nth-child(1) {
    animation-delay: 0.55s, 2.3s;
}

.vs-lightning span:nth-child(2) {
    animation-delay: 0.62s, 2.3s;
}

.vs-lightning span:nth-child(3) {
    animation-delay: 0.48s, 2.3s;
}

.vs-lightning span:nth-child(4) {
    animation-delay: 0.70s, 2.3s;
}

@keyframes vsLightningFlicker {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 0.25;
    }

    45% {
        opacity: 1;
    }

    70% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}

@keyframes vsLightningDeath {
    to {
        opacity: 0;
    }
}

.vs-shard-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 5;
    pointer-events: none;
}

.vs-shard-burst span {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    background: linear-gradient(45deg, #ffe27a, #ff4488);
    box-shadow: 0 0 18px #ffe27a, 0 0 30px #ff4488;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
}

.vs-overlay.animate .vs-shard-burst span {
    animation: vsShardFly 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.vs-shard-burst span:nth-child(1) {
    --sx: 0px;
    --sy: -420px;
    animation-delay: 0.50s;
}

.vs-shard-burst span:nth-child(2) {
    --sx: 210px;
    --sy: -360px;
    animation-delay: 0.52s;
}

.vs-shard-burst span:nth-child(3) {
    --sx: 380px;
    --sy: -180px;
    animation-delay: 0.48s;
}

.vs-shard-burst span:nth-child(4) {
    --sx: 420px;
    --sy: 0px;
    animation-delay: 0.51s;
}

.vs-shard-burst span:nth-child(5) {
    --sx: 380px;
    --sy: 180px;
    animation-delay: 0.49s;
}

.vs-shard-burst span:nth-child(6) {
    --sx: 210px;
    --sy: 360px;
    animation-delay: 0.53s;
}

.vs-shard-burst span:nth-child(7) {
    --sx: 0px;
    --sy: 420px;
    animation-delay: 0.50s;
}

.vs-shard-burst span:nth-child(8) {
    --sx: -210px;
    --sy: 360px;
    animation-delay: 0.52s;
}

.vs-shard-burst span:nth-child(9) {
    --sx: -380px;
    --sy: 180px;
    animation-delay: 0.48s;
}

.vs-shard-burst span:nth-child(10) {
    --sx: -420px;
    --sy: 0px;
    animation-delay: 0.51s;
}

.vs-shard-burst span:nth-child(11) {
    --sx: -380px;
    --sy: -180px;
    animation-delay: 0.49s;
}

.vs-shard-burst span:nth-child(12) {
    --sx: -210px;
    --sy: -360px;
    animation-delay: 0.53s;
}

@keyframes vsShardFly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(45deg) scale(0.3);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(720deg) scale(0.4);
    }
}

.vs-chromatic {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 6.5rem;
    font-weight: 900;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    letter-spacing: 6px;
    font-family: inherit;
}

.vs-chromatic-r {
    color: #ff2d55;
    text-shadow: 0 0 24px #ff2d55;
    mix-blend-mode: screen;
}

.vs-chromatic-b {
    color: #00e0ff;
    text-shadow: 0 0 24px #00e0ff;
    mix-blend-mode: screen;
}

.vs-overlay.animate .vs-chromatic-r {
    animation: vsChromaR 0.7s ease-out 0.5s forwards;
}

.vs-overlay.animate .vs-chromatic-b {
    animation: vsChromaB 0.7s ease-out 0.5s forwards;
}

@keyframes vsChromaR {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }

    45% {
        opacity: 0.9;
        transform: translate(calc(-50% - 14px), calc(-50% + 4px)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes vsChromaB {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }

    45% {
        opacity: 0.9;
        transform: translate(calc(-50% + 14px), calc(-50% - 4px)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

.vs-side {
    flex: 1;
    height: 82vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 2;
    position: relative;
}

.vs-overlay.animate .vs-side.vs-left {
    animation: vsSideInLeft 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.vs-overlay.animate .vs-side.vs-right {
    animation: vsSideInRight 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes vsSideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-260px) scale(0.6) rotate(-6deg);
    }

    60% {
        opacity: 1;
        transform: translateX(14px) scale(1.04) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0);
    }
}

@keyframes vsSideInRight {
    0% {
        opacity: 0;
        transform: translateX(260px) scale(0.6) rotate(6deg);
    }

    60% {
        opacity: 1;
        transform: translateX(-14px) scale(1.04) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0);
    }
}

.vs-canvas {
    width: 92%;
    max-width: 420px;
    height: 62%;
    display: block;
    filter: drop-shadow(0 0 30px rgba(232, 197, 71, 0.45));
}

.vs-overlay.animate .vs-canvas {
    animation: vsCanvasBreath 2.8s ease-in-out 1s infinite;
}

@keyframes vsCanvasBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.vs-label {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 6px;
    margin-top: 10px;
    padding: 6px 24px;
    border-radius: 12px;
    text-shadow: 0 0 22px currentColor;
    background: rgba(0, 0, 0, 0.65);
    transform: scale(0);
    opacity: 0;
}

.vs-overlay.animate .vs-label {
    animation: labelPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards;
}

@keyframes labelPop {
    0% {
        transform: scale(0) rotate(-12deg);
        opacity: 0;
    }

    70% {
        transform: scale(1.18) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.vs-label-black {
    color: #7ac8ff;
    border: 2px solid rgba(122, 200, 255, 0.7);
    box-shadow: 0 0 30px rgba(122, 200, 255, 0.55),
        inset 0 0 14px rgba(122, 200, 255, 0.25);
}

.vs-label-white {
    color: #f5f0e1;
    border: 2px solid rgba(245, 240, 225, 0.7);
    box-shadow: 0 0 30px rgba(245, 240, 225, 0.55),
        inset 0 0 14px rgba(245, 240, 225, 0.25);
}

.vs-divider {
    position: relative;
    flex: 0 0 auto;
    width: 10vw;
    height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.vs-vs {
    font-size: 6.5rem;
    font-weight: 900;
    color: #ffffff;
    -webkit-text-stroke: 4px #000;
    paint-order: stroke fill;
    text-shadow:
        0 0 30px #fff,
        0 0 60px #ffe27a,
        0 0 100px #ff4488,
        0 0 140px #000;
    letter-spacing: 6px;
    z-index: 5;
    transform: scale(5);
    opacity: 0;
    position: relative;
}

.vs-overlay.animate .vs-vs {
    animation: vsTextSlam 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

@keyframes vsTextSlam {
    0% {
        transform: scale(5);
        opacity: 0;
        filter: blur(14px);
    }

    35% {
        transform: scale(0.82);
        opacity: 1;
        filter: blur(0px);
    }

    55% {
        transform: scale(1.25);
        opacity: 1;
    }

    75% {
        transform: scale(0.95);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.vs-clash-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 227, 122, 0.7) 22%,
            rgba(255, 68, 136, 0.3) 45%,
            rgba(255, 255, 255, 0) 65%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.vs-overlay.animate .vs-clash-flash {
    animation: clashShockwave 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes clashShockwave {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    40% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.6);
        opacity: 0;
    }
}

.vs-vs-flash {
    position: absolute;
    inset: -80%;
    background: radial-gradient(circle,
            #ffffff 0%,
            rgba(232, 197, 71, 0.95) 20%,
            rgba(255, 68, 136, 0.4) 42%,
            transparent 65%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.vs-overlay.animate .vs-vs-flash {
    animation: vsFlash 1s ease-out 0.5s forwards;
}

@keyframes vsFlash {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    35% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@media (max-width: 768px) {
    .vs-vs {
        font-size: 4rem;
    }

    .vs-chromatic {
        font-size: 4rem;
    }

    .vs-label {
        font-size: 1.2rem;
        padding: 4px 16px;
    }

    .vs-side {
        height: 70vh;
    }

    .vs-lightning {
        width: 40vw;
    }
}

/* ============================================================
   RPS BATTLE ARENA — CLEAN SINGLE IMPLEMENTATION
   ------------------------------------------------------------
   This is the only battle arena style block. All earlier
   "ARENA 2.0 / 3.0 / 4.0" duplicates have been removed.
   HTML references: .battle-overlay, .battle-bg-layer,
   .battle-grid-floor, .battle-speed-lines, .battle-vignette,
   .battle-flash, .battle-shockwave, .battle-hud-top,
   .battle-round-badge, .battle-combo-badge, .battle-vs-center,
   .battle-stage, .battle-combatant, .battle-sprite-container,
   .battle-aura, .battle-stats, .battle-health-bar, .battle-hearts,
   .battle-choice-bubble, .battle-bottom, .battle-message-box,
   .battle-menu, .battle-menu-btn, .battle-damage-layer,
   .battle-damage-num.
   ============================================================ */

.battle-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: #05050a;
    overflow: hidden;
    font-family: 'Suez One', 'Chiron Hei HK',
        'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
    perspective: 1000px;
}

.battle-overlay.hidden {
    display: none;
}

/* Screen-wide shake (triggered by JS on impact) */
.battle-overlay.screen-shake {
    animation: battleScreenShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes battleScreenShake {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(-12px, 5px, 0);
    }

    30% {
        transform: translate3d(11px, -4px, 0);
    }

    45% {
        transform: translate3d(-8px, -3px, 0);
    }

    60% {
        transform: translate3d(6px, 4px, 0);
    }

    80% {
        transform: translate3d(-4px, 2px, 0);
    }
}

/* ── Background layers ── */
.battle-bg-layer {
    position: absolute;
    inset: -50%;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 50, 80, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(50, 150, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(200, 50, 255, 0.2) 0%, transparent 60%);
    animation: battleBgPulse 4s ease-in-out infinite alternate;
}

@keyframes battleBgPulse {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    100% {
        transform: scale(1.1) rotate(5deg);
        filter: brightness(1.3);
    }
}

.battle-grid-floor {
    position: absolute;
    bottom: -20vh;
    left: -20vw;
    right: -20vw;
    height: 60vh;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(500px) rotateX(75deg);
    transform-origin: bottom center;
    animation: battleGridScroll 2s linear infinite;
    z-index: 0;
}

/* ============================================================
   BATTLE ARENA — DOMAIN COLOR THEMES
   ------------------------------------------------------------
   .domain-white  → radiant / warm gold arena (White King)
   .domain-black  → abyssal / violet arena  (Black King)
   ============================================================ */

/* ───────────────────────── WHITE KING ───────────────────────── */
#battleOverlay.domain-white .battle-bg-layer {
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 200, 90, 0.55) 0%, transparent 44%),
        radial-gradient(circle at 80% 50%, rgba(255, 240, 200, 0.35) 0%, transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(180, 130, 30, 0.35) 0%, transparent 68%);
}

#battleOverlay.domain-white .battle-grid-floor {
    background-image:
        linear-gradient(rgba(255, 200, 100, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 200, 100, 0.16) 1px, transparent 1px);
}

#battleOverlay.domain-white .battle-speed-lines {
    background: repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, transparent 5deg,
            rgba(255, 220, 140, 0.07) 5.5deg,
            transparent 6deg);
}

#battleOverlay.domain-white .battle-vignette {
    background: radial-gradient(circle at 50% 50%,
            transparent 30%,
            rgba(40, 20, 0, 0.75) 80%,
            #000 100%);
}

#battleOverlay.domain-white .battle-vs-center {
    text-shadow: 0 0 40px #fff,
        0 0 80px #ffd766,
        0 0 120px #ffa040;
}

#battleOverlay.domain-white .battle-message-box {
    border-color: #e8c547;
    background: #fff8e0;
}

#battleOverlay.domain-white .battle-bottom {
    border-top-color: #e8c547;
    background: linear-gradient(0deg,
            rgba(40, 24, 0, 0.95),
            rgba(60, 40, 8, 0.75));
}

/* ───────────────────────── BLACK KING ───────────────────────── */
#battleOverlay.domain-black .battle-bg-layer {
    background:
        radial-gradient(circle at 20% 50%, rgba(180, 40, 255, 0.5) 0%, transparent 44%),
        radial-gradient(circle at 80% 50%, rgba(90, 20, 160, 0.55) 0%, transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(255, 40, 130, 0.28) 0%, transparent 68%);
}

#battleOverlay.domain-black .battle-grid-floor {
    background-image:
        linear-gradient(rgba(190, 90, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190, 90, 255, 0.16) 1px, transparent 1px);
}

#battleOverlay.domain-black .battle-speed-lines {
    background: repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, transparent 5deg,
            rgba(200, 120, 255, 0.09) 5.5deg,
            transparent 6deg);
}

#battleOverlay.domain-black .battle-vignette {
    background: radial-gradient(circle at 50% 50%,
            transparent 30%,
            rgba(15, 0, 30, 0.8) 80%,
            #000 100%);
}

#battleOverlay.domain-black .battle-vs-center {
    text-shadow: 0 0 40px #fff,
        0 0 80px #c44dff,
        0 0 120px #ff2d80;
}

#battleOverlay.domain-black .battle-message-box {
    border-color: #c44dff;
    background: #f6e6ff;
}

#battleOverlay.domain-black .battle-bottom {
    border-top-color: #c44dff;
    background: linear-gradient(0deg,
            rgba(15, 0, 30, 0.95),
            rgba(40, 10, 70, 0.75));
}

@keyframes battleGridScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 60px;
    }
}

.battle-speed-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, transparent 5deg,
            rgba(255, 255, 255, 0.05) 5.5deg,
            transparent 6deg);
    animation: battleSpeedLinesSpin 10s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

@keyframes battleSpeedLinesSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Screen effect layers ── */
.battle-vignette {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.8) 80%, #000 100%);
    opacity: 0.8;
    transition: opacity 0.3s;
}

.battle-flash {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    mix-blend-mode: overlay;
}

.battle-flash.trigger {
    animation: battleFlashAnim 0.4s ease-out;
}

@keyframes battleFlashAnim {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.battle-shockwave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 8px solid #fff;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 14;
    pointer-events: none;
    box-shadow: 0 0 40px #fff, inset 0 0 40px #fff;
}

.battle-shockwave.trigger {
    animation: battleShockwaveAnim 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes battleShockwaveAnim {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        border-width: 20px;
    }

    100% {
        transform: translate(-50%, -50%) scale(50);
        opacity: 0;
        border-width: 1px;
    }
}

/* ── Top HUD ── */
.battle-hud-top {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 30px;
    z-index: 20;
    pointer-events: none;
}

.battle-combo-badge {
    background: linear-gradient(180deg, #b71c1c, #5a0a0a);
    border: 3px solid #ff4488;
    color: #ffcc00;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    padding: 8px 24px;
    border-radius: 8px;
    box-shadow: 0 0 30px #ff4488;
    transform: scale(0) skewX(10deg);
    opacity: 0;
}

.battle-combo-badge.show {
    animation: battleComboPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes battleComboPop {
    0% {
        transform: scale(0.5) skewX(10deg);
        opacity: 0;
    }

    30% {
        transform: scale(1.2) skewX(10deg);
        opacity: 1;
    }

    80% {
        transform: scale(1) skewX(10deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) skewX(10deg) translateY(-30px);
        opacity: 0;
    }
}

/* ── Center VS text ── */
.battle-vs-center {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) scale(0) rotate(-20deg);
    font-size: 10rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 40px #fff, 0 0 80px #ff4488, 0 0 120px #00e0ff;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
}

.battle-vs-center.slam {
    animation: battleVsSlam 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes battleVsSlam {
    0% {
        transform: translate(-50%, -50%) scale(5) rotate(-20deg);
        opacity: 0;
        filter: blur(20px);
    }

    40% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }

    60% {
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* ── Combatant stage ── */
.battle-stage {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.battle-combatant {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.battle-opponent {
    top: 15vh;
    right: 10vw;
    align-items: flex-end;
}

.battle-player {
    bottom: 25vh;
    left: 10vw;
    align-items: flex-start;
}

.battle-combatant.hit-shake {
    animation: battleCombatantHit 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes battleCombatantHit {
    0% {
        transform: translateX(0);
        filter: brightness(1);
    }

    10% {
        transform: translateX(-30px) rotate(-5deg);
        filter: brightness(3) saturate(0);
    }

    20% {
        transform: translateX(25px) rotate(4deg);
        filter: brightness(2);
    }

    30% {
        transform: translateX(-15px) rotate(-2deg);
    }

    40% {
        transform: translateX(10px) rotate(1deg);
    }

    50% {
        transform: translateX(-5px) rotate(-1deg);
    }

    100% {
        transform: translateX(0);
        filter: brightness(1);
    }
}

.battle-combatant.victory-zoom {
    animation: battleVictoryZoom 1.5s ease-in-out forwards;
}

@keyframes battleVictoryZoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        filter: brightness(1.5) drop-shadow(0 0 50px #fff);
    }

    100% {
        transform: scale(1);
    }
}

/* ── Sprite + aura ── */
.battle-sprite-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.battle-opponent .battle-sprite-container {
    width: 220px;
    height: 220px;
}

.battle-sprite-container canvas {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

.battle-aura {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    z-index: 1;
    animation: battleAuraPulse 2s ease-in-out infinite;
}

.player-aura {
    background: radial-gradient(circle, rgba(232, 197, 71, 0.6) 0%, transparent 70%);
    box-shadow: 0 0 60px rgba(232, 197, 71, 0.8);
}

.opponent-aura {
    background: radial-gradient(circle, rgba(255, 80, 80, 0.6) 0%, transparent 70%);
    box-shadow: 0 0 60px rgba(255, 80, 80, 0.8);
    animation-delay: 0.5s;
}

@keyframes battleAuraPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* ── Stats panel ── */
.battle-stats {
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #e8c547;
    border-radius: 10px;
    padding: 10px 20px;
    min-width: 250px;
    box-shadow: 0 0 30px rgba(232, 197, 71, 0.3);
    position: relative;
    z-index: 5;
    margin-top: -20px;
}

.battle-stats-left {
    border-color: #e8c547;
    box-shadow: 0 0 30px rgba(232, 197, 71, 0.4);
}

.battle-stats-right {
    border-color: #ff5050;
    box-shadow: 0 0 30px rgba(255, 80, 80, 0.4);
}

.battle-name {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
    text-align: center;
}

.battle-stats-left .battle-name {
    color: #e8c547;
    text-shadow: 0 0 10px #e8c547;
}

.battle-stats-right .battle-name {
    color: #ff5050;
    text-shadow: 0 0 10px #ff5050;
}

.battle-health-bar {
    width: 100%;
    height: 12px;
    background: #222;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid #444;
}

.battle-health-fill {
    height: 100%;
    width: 100%;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.battle-stats-left .battle-health-fill {
    background: linear-gradient(90deg, #e8c547, #f0d860);
    box-shadow: 0 0 10px #e8c547;
}

.battle-stats-right .battle-health-fill {
    background: linear-gradient(90deg, #ff5050, #ff8080);
    box-shadow: 0 0 10px #ff5050;
}

.battle-hearts {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.heart {
    font-size: 1.8rem;
    line-height: 1;
    transition: all 0.3s;
    display: inline-block;
}

.heart.full {
    color: #ff4466;
    text-shadow: 0 0 15px #ff4466, 0 0 30px #ff4466;
    animation: battleHeartBeat 1s ease-in-out infinite;
}

.heart.empty {
    color: #444;
    opacity: 0.4;
    text-shadow: none;
}

.heart.shatter {
    animation: battleHeartShatter 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px #ff3366);
}

@keyframes battleHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

@keyframes battleHeartShatter {
    0% {
        transform: scale(1);
        opacity: 1;
        color: #ff4466;
        text-shadow: 0 0 15px #ff4466;
    }

    20% {
        transform: scale(2.6);
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 0 40px #fff, 0 0 80px #ff3366, 0 0 120px #ffcc00;
    }

    45% {
        transform: scale(1.4) rotate(80deg);
        opacity: 0.85;
        color: #ffcc00;
    }

    70% {
        transform: scale(0.6) rotate(160deg);
        opacity: 0.5;
        color: #ff3366;
    }

    100% {
        transform: scale(0) rotate(220deg);
        opacity: 0;
    }
}

/* ── Choice bubbles (opponent / player) ── */
.battle-choice-bubble {
    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%) scale(0) rotate(-45deg);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 30% 30%, #fff, #e8c547);
    border: 4px solid #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 0 30px #e8c547, 0 0 60px #e8c547;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.battle-choice-bubble.show {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
}

.battle-choice-bubble-player {
    left: auto;
    right: -80px;
    background: radial-gradient(circle at 30% 30%, #fff, #7ac8ff);
    box-shadow: 0 0 30px #7ac8ff, 0 0 60px #7ac8ff;
}

/* ── Bottom control deck ── */
.battle-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22vh;
    min-height: 140px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7));
    border-top: 4px solid #e8c547;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    z-index: 20;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
}

.battle-message-box {
    flex: 1;
    max-width: 50%;
    background: #fefefe;
    border: 4px solid #1a1a2e;
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.battle-message-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: battleMessageShine 3s infinite;
}

@keyframes battleMessageShine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.battle-message {
    color: #1a1a2e;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

/* ── RPS buttons ── */
.battle-menu {
    display: flex;
    gap: 15px;
}

.battle-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 90px;
    background: linear-gradient(180deg, #3a3a5c, #1a1a2e);
    border: 3px solid #7ac8ff;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 0 #111, 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(122, 200, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.battle-menu-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.battle-menu-btn:hover:not(:disabled) {
    transform: translateY(-5px);
    box-shadow: 0 11px 0 #111, 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(122, 200, 255, 0.6);
    border-color: #fff;
}

.battle-menu-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.battle-menu-btn:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #111, 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(122, 200, 255, 0.8);
}

.battle-menu-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: translateY(4px);
    box-shadow: 0 2px 0 #111;
}

/* Surrender button — red/danger themed, clearly separate from RPS */
.battle-menu-btn-surrender {
    background: linear-gradient(180deg, #4a2020, #1a0a0a);
    border-color: #ff6666;
    box-shadow: 0 6px 0 #111, 0 10px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 102, 102, 0.3);
}

.battle-menu-btn-surrender::before {
    background: linear-gradient(180deg, rgba(255, 200, 200, 0.2), transparent);
}

.battle-menu-btn-surrender .battle-menu-icon {
    font-size: 1.9rem;
}

.battle-menu-btn-surrender .battle-menu-label {
    color: #ff9999;
    text-shadow: 0 0 10px rgba(255, 102, 102, 0.55);
}

.battle-menu-btn-surrender:hover:not(:disabled) {
    transform: translateY(-5px);
    border-color: #ff9999;
    box-shadow: 0 11px 0 #111, 0 15px 30px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 102, 102, 0.6);
}

.battle-menu-btn-surrender:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #111, 0 5px 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 102, 102, 0.8);
}

@media (max-width: 900px) {
    .battle-menu-btn-surrender {
        flex: 0 0 auto;
        padding: 0 10px;
        min-width: 56px;
    }

    .battle-menu-btn-surrender .battle-menu-icon {
        font-size: 1.1rem;
    }
}

.battle-menu-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.battle-menu-label {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #7ac8ff;
    text-shadow: 0 0 10px rgba(122, 200, 255, 0.5);
}

/* ── Floating damage numbers ── */
.battle-damage-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.battle-damage-num {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 3.4rem;
    color: #ffcc00;
    letter-spacing: 2px;
    text-shadow:
        0 0 24px #ff4488,
        0 0 48px #ffe27a,
        4px 4px 0 #000,
        -4px -4px 0 #000,
        4px -4px 0 #000,
        -4px 4px 0 #000;
    animation: battleDamageFloat 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes battleDamageFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) rotate(-22deg);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -85%) scale(1.7) rotate(8deg);
    }

    55% {
        opacity: 1;
        transform: translate(-50%, -150%) scale(1.15) rotate(-2deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -260%) scale(0.9) rotate(0deg);
    }
}

/* ── Battle arena mobile — COMPACT VERSION ── */
@media (max-width: 900px) {
    .battle-vs-center {
        font-size: 6rem;
    }

    /* 1. Make sprites smaller so they don't take up the whole screen */
    .battle-sprite-container {
        width: 120px;
        height: 120px;
    }

    .battle-opponent .battle-sprite-container {
        width: 100px;
        height: 100px;
    }

    .battle-stats {
        min-width: 130px;
        padding: 4px 8px;
        margin-top: -10px;
        /* Pull it closer to the sprite */
    }

    .battle-name {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .heart {
        font-size: 1.1rem;
    }

    /* 2. Position combatants away from the bottom bar */
    .battle-player {
        bottom: 75px;
        /* Sits just above the new 60px bar + margin */
        left: 5vw;
    }

    .battle-opponent {
        top: 75px;
        right: 5vw;
    }

    /* 3. Compact Bottom Control Deck */
    .battle-bottom {
        flex-direction: row;
        /* Keep everything in ONE line */
        height: 60px;
        /* Shorter height */
        min-height: 0;
        /* IMPORTANT: Removes the default 140px minimum */
        padding: 0 10px;
        align-items: center;
    }

    .battle-message-box {
        flex: 0 0 35%;
        /* Take up 35% of width */
        max-width: 35%;
        width: auto;
        margin-bottom: 0;
        margin-right: 10px;
        padding: 4px 8px;
    }

    .battle-message {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .battle-menu {
        flex: 1;
        /* Take the remaining 65% */
        width: auto;
        justify-content: center;
        gap: 8px;
    }

    .battle-menu-btn {
        flex: 1;
        /* Distribute evenly */
        width: auto;
        height: 46px;
        /* Shorter button */
        flex-direction: row;
        /* Icon and text side-by-side */
        gap: 6px;
        padding: 0 4px;
    }

    .battle-menu-icon {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    .battle-menu-label {
        font-size: 0.75rem;
    }

    /* Adjust floating choice bubbles to match smaller sprites */
    .battle-choice-bubble {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        left: -50px;
    }

    .battle-choice-bubble-player {
        /* Push it further right so it sits clearly beside the piece */
        right: -75px;
    }
}

/* ── Reduce heavy motion on low-end / mobile ── */
@media (pointer: coarse),
(max-width: 900px),
(prefers-reduced-motion: reduce) {

    .battle-bg-layer,
    .battle-speed-lines,
    .battle-grid-floor {
        animation: none;
    }

    .battle-aura {
        animation-duration: 3s;
    }
}

/* ============================================================
   FORCE LANDSCAPE OVERLAY
   ============================================================ */
#rotateDeviceOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0d0d1a;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--gold);
    font-family: 'Suez One', 'Chiron Hei HK',
        'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
    text-align: center;
    padding: 24px;
    user-select: none;
    -webkit-user-select: none;
}

#rotateDeviceOverlay .rotate-icon {
    font-size: 4.5rem;
    line-height: 1;
    animation: rotatePhone 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(232, 197, 71, 0.6));
}

#rotateDeviceOverlay .rotate-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.5);
}

#rotateDeviceOverlay .rotate-subtitle {
    font-size: 0.9rem;
    opacity: 0.65;
    letter-spacing: 1px;
}

#rotateDeviceOverlay .rotate-arrow {
    font-size: 2rem;
    margin-top: 10px;
    opacity: 0.55;
    animation: spinArrow 1.6s linear infinite;
}

@keyframes rotatePhone {

    0%,
    40%,
    100% {
        transform: rotate(0deg);
    }

    60%,
    90% {
        transform: rotate(-90deg);
    }
}

@keyframes spinArrow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

body.force-landscape #rotateDeviceOverlay {
    display: flex;
}

/* ============================================================
   TOP BAR CLOSE BUTTON
   ============================================================ */
.topbar-close-btn {
    padding: 8px 14px;
    font-size: 1rem;
    line-height: 1;
    font-family: inherit;
    font-weight: 900;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid rgba(232, 197, 71, 0.6);
    background: rgba(22, 33, 62, 0.9);
    color: var(--gold);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.topbar-close-btn:hover {
    background: var(--gold);
    color: #1a1a2e;
    border-color: var(--gold);
}

.topbar-close-btn:active {
    transform: scale(0.94);
}

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
.settings-panel {
    max-width: 460px;
    text-align: center;
}

.settings-block {
    text-align: left;
    margin: 12px 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-block>label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--gold);
}

.settings-block .desc {
    font-size: 0.78rem;
    opacity: 0.6;
    margin-top: 6px;
    line-height: 1.4;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-row input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    outline: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: 2px solid #1a1a2e;
    box-shadow: 0 0 12px rgba(232, 197, 71, 0.5);
}

.slider-row input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    border: 2px solid #1a1a2e;
}

.slider-row .value-display {
    min-width: 52px;
    text-align: right;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gold);
}

.toggle-row>span:first-child {
    flex: 1;
}

.toggle-switch.small-switch {
    width: 56px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch.small-switch .toggle-slider::before {
    height: 20px;
    width: 20px;
    left: 2px;
}

.toggle-switch.small-switch input:checked+.toggle-slider::before {
    transform: translate(28px, -50%);
}

.settings-block .mode-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.settings-block .mode-btn.active {
    border-color: var(--gold);
    background: var(--gold);
    color: #1a1a2e;
}

#settingsOverlay {
    z-index: 350;
}

#inGameSettingsBtn {
    white-space: nowrap;
}

/* ============================================================
   WIKI EFFECT LABEL (wiki.js uses this)
   ============================================================ */
.wiki-effect-label {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 5px 16px;
    border-radius: 20px;
    background: rgba(10, 15, 35, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    pointer-events: none;
    text-shadow: 0 0 10px currentColor;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.wiki-canvas-wrap {
    position: relative;
}

@keyframes wikiEffectLabelPop {
    0% {
        transform: translateX(-50%) translateY(-6px) scale(0.85);
        opacity: 0;
    }

    60% {
        transform: translateX(-50%) translateY(0) scale(1.06);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

/* ============================================================
   GAME OVER — floating "final board" status bar
   ============================================================ */
.game-over-status-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;

    padding: 10px 14px 10px 22px;
    max-width: calc(100vw - 32px);

    background: rgba(22, 33, 62, 0.95);
    border: 2px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65),
        0 0 24px rgba(232, 197, 71, 0.18);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    pointer-events: auto;
    animation: gameOverBarSlideIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-over-status-bar.hidden {
    display: none;
}

@keyframes gameOverBarSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, 24px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.game-over-status-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
}

.game-over-status-result {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.game-over-status-result.win {
    color: #2ecc71;
    text-shadow: 0 0 12px rgba(46, 204, 113, 0.45);
}

.game-over-status-result.lose {
    color: #e74c3c;
    text-shadow: 0 0 12px rgba(231, 76, 60, 0.45);
}

.game-over-status-result.draw {
    color: #f39c12;
    text-shadow: 0 0 12px rgba(243, 156, 18, 0.45);
}

.game-over-status-reason {
    font-size: 0.88rem;
    opacity: 0.78;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-over-status-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.game-over-status-actions .btn {
    margin: 0;
    padding: 8px 16px;
    font-size: 0.85rem;
    min-width: 0;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
}

@media (max-width: 480px) {
    .game-over-status-bar {
        bottom: 16px;
        padding: 10px 12px;
        gap: 10px;
        border-radius: 14px;
        width: calc(100vw - 24px);
    }

    .game-over-status-result {
        font-size: 1rem;
    }

    .game-over-status-reason {
        font-size: 0.8rem;
        white-space: normal;
    }

    .game-over-status-actions .btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   COMPACT TOP BAR — mobile landscape
   Scales the whole top bar down to ~70% while keeping the
   same visual proportions as desktop (same colors, same
   shapes, same shadows — just smaller).
   ============================================================ */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {

    .game-top-bar {
        padding: 4px 10px;
        gap: 3px;
    }

    /* ── Turn indicator ── */
    .turn-indicator {
        font-size: 0.72rem;
        gap: 5px;
    }

    .turn-dot {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 9px currentColor;
    }

    /* ── Warnings ── */
    .check-warning,
    .ai-thinking {
        font-size: 0.75rem;
    }

    /* ── Timer ── */
    .timer-display {
        font-size: 0.7rem;
        padding: 2px 8px;
        gap: 4px;
        border-radius: 14px;
    }

    .timer-item {
        padding: 1px 4px;
        gap: 3px;
        border-radius: 8px;
    }

    .timer-item .dot {
        width: 6px;
        height: 6px;
    }

    .timer-item .time {
        min-width: 28px;
    }

    .timer-item .time.infinity {
        min-width: 18px;
        font-size: 0.85rem;
    }

    .timer-sep {
        padding: 0;
        font-size: 0.7rem;
    }

    /* ── Top-bar action buttons (自由 / 重開 / 主選單 / 設定) ── */
    .game-top-bar .btn {
        padding: 5px 10px;
        margin: 2px;
        font-size: 0.72rem;
        letter-spacing: 0.3px;
        border-radius: 7px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .game-top-bar .btn-danger {
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    }

    .game-top-bar .btn-secondary {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* ── ✕ close button ── */
    .topbar-close-btn {
        padding: 4px 7px;
        min-width: 26px;
        height: 26px;
        font-size: 0.72rem;
        border-radius: 6px;
    }
}

/* ============================================================
   MOBILE — Compact "desktop-like" UI
   ------------------------------------------------------------
   Overrides the touch-optimized sizing so phones render the
   same compact layout as the web/desktop view.
   Tweak the `zoom` values below to taste:
     0.65 = very compact (like a shrunken desktop)
     0.80 = mild shrink
     1.00 = original (touch-optimized) sizing
   ============================================================ */
@media (pointer: coarse),
(max-width: 900px) {
    .overlay>.panel {
        zoom: 0.78;
        /* Blink / WebKit */
        /* Firefox fallback — visually equivalent */
        max-width: min(520px, 92vw);
        padding: 22px 26px;
        font-size: 0.92rem;
    }

    #settingsOverlay .panel {
        zoom: 0.78;
        max-width: min(460px, 92vw);
        padding: 22px 26px;
    }

    #wikiOverlay .wiki-layout {
        zoom: 0.72;
        max-height: 88vh;
    }

    #actionBar {
        zoom: 0.82;
        padding: 8px 14px;
    }

    #aimHint {
        zoom: 0.85;
        font-size: 0.85rem;
    }

    .game-over-status-bar {
        zoom: 0.85;
        padding: 8px 12px;
    }
}

/* ============================================================
   ★ GAME STATS / EXPORT MENU
   ============================================================ */
.export-panel {
    max-width: 640px;
    padding: 22px 26px;
    text-align: left;
}

.export-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 12px;
}

.export-name-row label {
    font-weight: 700;
    color: var(--gold);
    font-size: 0.95rem;
    white-space: nowrap;
}

.export-name-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid rgba(232, 197, 71, 0.4);
    background: #0d1528;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.export-name-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(232, 197, 71, 0.35);
}

/* ── Export card (this is what gets rendered to image) ── */
.export-card {
    position: relative;
    background: linear-gradient(160deg, #1c2848 0%, #121a35 55%, #080b1a 100%);
    border: 2px solid rgba(232, 197, 71, 0.55);
    border-radius: 16px;
    padding: 20px 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 60px rgba(232, 197, 71, 0.05);
}

.export-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(232, 197, 71, 0.18);
    border-radius: 12px;
    pointer-events: none;
}

.export-card-header {
    position: relative;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(232, 197, 71, 0.25);
    margin-bottom: 14px;
}

.export-card-glyph {
    position: absolute;
    color: rgba(232, 197, 71, 0.10);
    font-family: "Segoe UI Symbol", "Apple Symbols", serif;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.export-card-glyph.g1 {
    top: -12px;
    left: 4px;
    font-size: 68px;
}

.export-card-glyph.g2 {
    top: -18px;
    right: 4px;
    font-size: 54px;
}

.export-card-glyph.g3 {
    bottom: -22px;
    left: 12px;
    font-size: 60px;
}

.export-card-glyph.g4 {
    bottom: -18px;
    right: 14px;
    font-size: 50px;
}

.export-card-title {
    position: relative;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.5);
}

.export-card-subtitle {
    position: relative;
    font-size: 0.65rem;
    color: rgba(232, 197, 71, 0.55);
    letter-spacing: 3px;
    margin-top: 2px;
}

.export-player-plate {
    text-align: center;
    padding: 10px 0 14px;
}

.export-player-label {
    font-size: 0.75rem;
    color: rgba(232, 197, 71, 0.6);
    letter-spacing: 2px;
}

.export-card-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #f0e6d3;
    letter-spacing: 1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.export-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.export-stat {
    background: rgba(10, 15, 35, 0.75);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

.export-stat-value {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.5px;
}

.export-stat-label {
    font-size: 0.65rem;
    color: rgba(240, 230, 211, 0.55);
    letter-spacing: 1px;
    margin-top: 2px;
}

.export-moves-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.export-moves {
    max-height: 260px;
    overflow-y: auto;
    background: rgba(10, 15, 35, 0.75);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.export-move-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1.4;
}

.export-move-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}

.export-move-row.white-side {
    color: #f0e6d3;
}

.export-move-row.black-side {
    color: #c44dff;
}

.export-move-num {
    color: rgba(232, 197, 71, 0.6);
    min-width: 26px;
}

.export-move-glyph {
    font-size: 1.05rem;
}

.export-move-text {
    flex: 1;
    letter-spacing: 0.5px;
}

.export-move-coord {
    opacity: 0.65;
    font-size: 0.85em;
}

.export-move-cap {
    color: #ff6b6b;
    margin-left: 4px;
}

.export-move-empty {
    text-align: center;
    color: rgba(240, 230, 211, 0.45);
    font-style: italic;
    padding: 12px;
}

.export-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(232, 197, 71, 0.2);
    font-size: 0.75rem;
    color: rgba(240, 230, 211, 0.55);
    font-family: 'Courier New', monospace;
}

.export-brand {
    color: rgba(232, 197, 71, 0.85);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Compact on mobile */
@media (pointer: coarse),
(max-width: 900px) {
    .export-panel {
        zoom: 0.85;
    }

    .export-moves {
        max-height: 200px;
    }

    .export-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .export-stat-value {
        font-size: 1rem;
    }
}

/* ============================================================
   ★ EXPORT — "include moves" toggle row
   ============================================================ */
.export-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 12px;
}

.export-toggle-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 0.5px;
}

/* ============================================================
   ★ MOVE-PREVIEW BOARD — floating hover preview
   ============================================================ */
.move-preview-board {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 3px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a3a;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2000;
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.75),
        0 0 24px rgba(232, 197, 71, 0.35);
    will-change: opacity, transform, left, top;
}

.move-preview-board.visible {
    opacity: 1;
    transform: scale(1);
}

.move-preview-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", serif;
    line-height: 1;
    font-size: 22px;
    user-select: none;
    -webkit-user-select: none;
}

.move-preview-cell.light {
    background: #d4b896;
}

.move-preview-cell.dark {
    background: #8b5e3c;
}

/* Highlight the moving piece's origin square (blue) */
.move-preview-cell.from::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px #4a90ff;
    background: rgba(74, 144, 255, 0.22);
    pointer-events: none;
    z-index: 1;
}

/* Highlight the destination square (orange) */
.move-preview-cell.to::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px #ffaa00;
    background: rgba(255, 170, 0, 0.28);
    pointer-events: none;
    z-index: 1;
}

/* A move that lands on its own from-square should show both rings — nudge
   the "to" ring slightly inward so it's still visible. */
.move-preview-cell.from.to::before {
    inset: 0;
    box-shadow: inset 0 0 0 3px #ffaa00;
    background: rgba(255, 170, 0, 0.28);
}

.preview-piece {
    position: relative;
    z-index: 2;
    font-size: 26px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.preview-piece.white {
    color: #f5f0e1;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.9),
        0 0 2px rgba(0, 0, 0, 1);
}

.preview-piece.black {
    color: #1a1a1a;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.35),
        0 0 2px rgba(255, 255, 255, 0.5);
}

/* Subtle row highlight while hovering */
.export-move-row:hover {
    background: rgba(232, 197, 71, 0.15) !important;
    cursor: help;
}

/* Compact on mobile — slightly smaller preview board */
@media (pointer: coarse),
(max-width: 900px) {
    .move-preview-board {
        width: 200px;
        height: 200px;
    }

    .preview-piece {
        font-size: 20px;
    }
}

/* ============================================================
   ★ EXPORT CARD — AI difficulty line (under player name)
   ============================================================ */
.export-difficulty-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 16px;
    background: rgba(232, 197, 71, 0.10);
    border: 1px solid rgba(232, 197, 71, 0.45);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold);
}

.export-difficulty-label {
    opacity: 0.72;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.export-difficulty-sep {
    opacity: 0.45;
}

.export-difficulty-value {
    color: #f0e6d3;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(232, 197, 71, 0.35);
}

/* Compact on mobile */
@media (pointer: coarse),
(max-width: 900px) {
    .export-difficulty-line {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
}

/* ============================================================
   GAME OVER MENU — Align buttons in a clean 2x2 grid
   ============================================================ */
.game-over-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 12px;
    /* Even spacing between buttons */
    max-width: 400px;
    /* Prevents buttons from stretching too wide */
    margin: 16px auto 0;
    width: 100%;
}

.game-over-actions .btn {
    margin: 0;
    /* Removes the default 8px margin causing misalignment */
    width: 100%;
    /* Ensures both columns are exactly equal width */
    padding: 14px 10px;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Prevents text from breaking into two lines */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    /* Space between icon and text */
}

/* ============================================================
   ★ MULTIPLAYER ROOM CODE DISPLAY
   ============================================================ */
.room-code-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    background: rgba(232, 197, 71, 0.15);
    border: 2px solid rgba(232, 197, 71, 0.55);
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    margin: 0 4px;
    transition: all 0.2s ease;
    box-shadow: 0 0 12px rgba(232, 197, 71, 0.2);
}

.room-code-display.hidden {
    display: none;
}

.room-code-display .room-code-label {
    font-size: 0.8rem;
    opacity: 0.85;
    color: #e8c547;
    white-space: nowrap;
}

.room-code-display .room-code-value {
    font-size: 1rem;
    color: #e8c547;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(232, 197, 71, 0.55);
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
    .room-code-display {
        padding: 2px 8px;
    }

    .room-code-display .room-code-value {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }

    .room-code-display .room-code-label {
        font-size: 0.68rem;
    }
}

/* ============================================================
   ★ RECONNECT OVERLAY (dynamically created by main.js)
   ============================================================ */
#reconnectOverlay {
    z-index: 900;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#reconnectOverlay .panel {
    border-color: #7ac8ff;
    box-shadow: 0 0 60px rgba(122, 200, 255, 0.35),
        0 20px 60px rgba(0, 0, 0, 0.7);
}

#reconnectOverlay h2 {
    color: #7ac8ff;
    text-shadow: 0 0 20px rgba(122, 200, 255, 0.55);
    animation: pulse 1.4s infinite;
}

#reconnectOverlay .reconnect-spinner {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(122, 200, 255, 0.25);
    border-top-color: #7ac8ff;
    animation: reconnectSpin 0.9s linear infinite;
    vertical-align: middle;
    margin-right: 10px;
}

@keyframes reconnectSpin {
    to {
        transform: rotate(360deg);
    }
}

.battle-health-fill {
    transition: width 0.5s ease-out, background 0.3s, box-shadow 0.3s;
}