@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&display=swap');

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

body {
    background:#0a0a14; color:#d0d0e0;
    font-family:'Share Tech Mono','Courier New',monospace;
    min-height:100vh; display:flex; justify-content:center; align-items:flex-start; padding:10px;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(0,255,200,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,0,100,0.03) 0%, transparent 50%);
}

/* Scanline overlay */
body::after {
    content:''; position:fixed; top:0; left:0; width:100%; height:100%;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
    );
    pointer-events:none; z-index:9999;
}

.hidden { display:none !important; }

/* ===== MENU SCREEN ===== */
#menu-screen {
    display:flex; justify-content:center; align-items:center;
    min-height:100vh; width:100%;
}
.menu-box {
    background:linear-gradient(135deg, rgba(10,10,30,0.95), rgba(15,20,50,0.95));
    border:1px solid rgba(0,255,200,0.15);
    border-radius:4px; padding:40px 50px;
    text-align:center; max-width:420px; width:100%;
    box-shadow: 0 0 30px rgba(0,255,200,0.05), inset 0 0 60px rgba(0,0,0,0.3);
    position:relative;
}
/* Corner accents */
.menu-box::before, .menu-box::after {
    content:''; position:absolute; width:20px; height:20px;
    border-color:rgba(0,255,200,0.4); border-style:solid;
}
.menu-box::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.menu-box::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

.menu-title {
    font-family:'Orbitron',sans-serif; font-weight:900;
    font-size:2.4em; letter-spacing:3px; text-transform:uppercase;
    background:linear-gradient(135deg,#00ffc8,#ff0066);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-shadow:none;
    filter: drop-shadow(0 0 8px rgba(0,255,200,0.3));
}
.menu-sub {
    color:rgba(0,255,200,0.5); font-style:normal; margin-bottom:24px;
    font-size:.75em; line-height:1.4; letter-spacing:1px; text-transform:uppercase;
}
.menu-page { }
.menu-section { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.menu-back-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:none; border:none; color:rgba(0,255,200,0.5); cursor:pointer;
    font-family:'Share Tech Mono',monospace;
    font-size:.85em; padding:4px 0; margin-bottom:4px;
    transition:color .2s;
}
.menu-back-btn:hover { color:#00ffc8; }
.menu-btn {
    padding:12px 24px; border:1px solid rgba(255,255,255,0.1); border-radius:2px; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-size:.8em; font-weight:600;
    letter-spacing:1px; text-transform:uppercase;
    transition:all .2s;
    background:rgba(255,255,255,0.03); color:#8899aa;
    position:relative; overflow:hidden;
}
.menu-btn::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition:left .4s;
}
.menu-btn:hover::before { left:100%; }
.menu-btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); color:#ccc; }

.menu-btn.primary {
    background:linear-gradient(135deg, rgba(0,255,200,0.15), rgba(0,200,255,0.1));
    border-color:rgba(0,255,200,0.4); color:#00ffc8;
}
.menu-btn.primary:hover {
    background:linear-gradient(135deg, rgba(0,255,200,0.25), rgba(0,200,255,0.15));
    box-shadow:0 0 15px rgba(0,255,200,0.15); color:#00ffdc;
}
.menu-btn.tutorial {
    background:rgba(180,0,255,0.12); border-color:rgba(180,0,255,0.35); color:#c77dff;
}
.menu-btn.tutorial:hover {
    background:rgba(180,0,255,0.2); box-shadow:0 0 15px rgba(180,0,255,0.15);
}
.menu-btn.multiplayer {
    background:rgba(255,0,100,0.1); border-color:rgba(255,0,100,0.3); color:#ff6690;
}
.menu-btn.multiplayer:hover {
    background:rgba(255,0,100,0.18); box-shadow:0 0 15px rgba(255,0,100,0.12);
}
.menu-btn.coming-soon {
    background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.05);
    color:#445; cursor:not-allowed; opacity:.6; font-size:.7em;
}
.menu-btn.coming-soon:hover { background:rgba(255,255,255,0.02); box-shadow:none; }
.menu-btn.small { padding:8px 16px; font-size:.7em; }

/* Private game UI */
.mode-desc { font-size:.82em; color:rgba(0,255,200,0.4); margin:4px 0; }
.room-code-label { color:rgba(0,255,200,0.6); font-weight:600; margin-bottom:4px; font-size:.85em; }
.room-code {
    font-size:2em; font-weight:bold; letter-spacing:8px; color:#00ffc8;
    background:rgba(0,255,200,0.05); border:1px solid rgba(0,255,200,0.2);
    padding:10px 20px; border-radius:2px; margin:8px auto;
    display:inline-block; font-family:'Share Tech Mono',monospace; user-select:all;
    text-shadow:0 0 10px rgba(0,255,200,0.4);
}
.waiting-text { color:#ff6690; font-style:italic; }
.join-divider {
    display:flex; align-items:center; margin:12px 0; gap:12px;
    color:rgba(255,255,255,0.15); font-size:.82em;
}
.join-divider::before, .join-divider::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,255,200,0.15), transparent);
}
.code-input {
    width:100%; padding:10px; border:1px solid rgba(0,255,200,0.2); border-radius:2px;
    background:rgba(0,255,200,0.03); color:#00ffc8; font-size:1.4em; text-align:center;
    letter-spacing:6px; font-family:'Share Tech Mono',monospace; text-transform:uppercase;
}
.code-input::placeholder { color:rgba(0,255,200,0.15); letter-spacing:2px; font-size:.7em; }
.code-input:focus { border-color:#00ffc8; outline:none; box-shadow:0 0 10px rgba(0,255,200,0.15); }

.difficulty-row { display:flex; justify-content:center; gap:8px; margin:8px 0; }
.diff-btn {
    width:40px; height:40px; border-radius:2px; border:1px solid rgba(0,255,200,0.3);
    background:transparent; color:rgba(0,255,200,0.6); font-weight:bold; font-size:1.1em;
    cursor:pointer; transition:all .2s; font-family:'Orbitron',sans-serif;
}
.diff-btn:hover { background:rgba(0,255,200,.1); border-color:rgba(0,255,200,0.5); }
.diff-btn.selected { background:rgba(0,255,200,0.2); color:#00ffc8; border-color:#00ffc8; box-shadow:0 0 10px rgba(0,255,200,0.2); }
.diff-desc { font-size:.85em; color:rgba(0,255,200,0.35); min-height:20px; }
label { color:rgba(0,255,200,0.5); font-weight:600; font-family:'Orbitron',sans-serif; font-size:.75em; letter-spacing:1px; text-transform:uppercase; }

/* ===== TUTORIAL ===== */
#tutorial-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(5,5,15,.92); z-index:200;
    display:flex; justify-content:center; align-items:center;
}
#tutorial-box {
    background:linear-gradient(135deg, rgba(10,10,30,0.98), rgba(15,15,40,0.98));
    border:1px solid rgba(0,255,200,0.15);
    border-radius:4px; padding:30px; max-width:600px; width:92%;
    max-height:80vh; overflow-y:auto;
}
#tutorial-text { min-height:200px; }
#tutorial-text h2 { color:#00ffc8; margin-bottom:12px; font-family:'Orbitron',sans-serif; font-size:1.2em; letter-spacing:1px; }
#tutorial-text h3 { color:#ff6690; margin:14px 0 6px; font-family:'Orbitron',sans-serif; font-size:.9em; letter-spacing:1px; }
#tutorial-text p, #tutorial-text li { line-height:1.6; margin:4px 0; font-size:.92em; }
#tutorial-text ul { padding-left:20px; }
#tutorial-text .highlight { color:#00ffc8; font-weight:bold; }
#tutorial-text .warn { color:#ff0066; font-weight:bold; }
#tutorial-text table { width:100%; border-collapse:collapse; margin:8px 0; font-size:.85em; }
#tutorial-text th, #tutorial-text td { padding:6px 8px; border:1px solid rgba(0,255,200,0.1); text-align:center; }
#tutorial-text th { background:rgba(0,255,200,0.05); color:#00ffc8; }
#tutorial-controls {
    display:flex; justify-content:space-between; align-items:center; margin-top:16px;
}
#tut-progress { color:rgba(0,255,200,0.4); font-size:.85em; }

/* ===== GAME CONTAINER ===== */
#game-container { max-width:1280px; width:100%; }

#game-info {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 20px; background:rgba(10,10,30,0.8);
    border:1px solid rgba(0,255,200,0.08); border-radius:2px; margin:8px 0;
}
.player-info { display:flex; flex-direction:column; gap:3px; }
.player-name { font-weight:bold; font-size:1.05em; font-family:'Orbitron',sans-serif; letter-spacing:1px; }
#player1-info .player-name { color:#00ffc8; text-shadow:0 0 8px rgba(0,255,200,0.3); }
#player2-info .player-name { color:#ff0066; text-shadow:0 0 8px rgba(255,0,100,0.3); }
.pieces-count { font-size:.82em; color:rgba(255,255,255,0.35); }

#turn-indicator { text-align:center; display:flex; flex-direction:column; gap:3px; }
#current-turn { font-size:1.15em; font-weight:bold; font-family:'Orbitron',sans-serif; letter-spacing:1px; }
#turn-number { font-size:.82em; color:rgba(0,255,200,0.35); }

#main-area { display:flex; gap:12px; justify-content:center; align-items:flex-start; }
.side-panel {
    width:190px; background:rgba(10,10,30,0.8);
    border:1px solid rgba(0,255,200,0.08);
    border-radius:2px; padding:10px; flex-shrink:0;
}
.side-panel h3 {
    font-family:'Orbitron',sans-serif; font-size:.7em; letter-spacing:1px; text-transform:uppercase;
    margin-bottom:6px; margin-top:8px; color:rgba(0,255,200,0.45);
    border-bottom:1px solid rgba(0,255,200,0.08); padding-bottom:3px;
}
.side-panel h3:first-child { margin-top:0; }

#piece-reserve { display:flex; flex-direction:column; gap:5px; }
.reserve-piece {
    display:flex; align-items:center; gap:6px; padding:5px 7px;
    background:rgba(0,255,200,0.02); border-radius:2px; cursor:pointer;
    border:1px solid transparent; transition:all .2s; font-size:.82em;
}
.reserve-piece:hover { border-color:rgba(0,255,200,0.3); background:rgba(0,255,200,0.05); }
.reserve-piece.selected { border-color:#00ffc8; background:rgba(0,255,200,0.08); box-shadow:0 0 8px rgba(0,255,200,0.1); }
.reserve-piece.no-interact { cursor:default; }
.reserve-piece.no-interact:hover { border-color:transparent; background:rgba(0,255,200,0.02); }
.reserve-piece .piece-icon { font-size:1.2em; width:22px; text-align:center; }
.reserve-piece .piece-name { flex:1; }
.reserve-piece .piece-count { color:#00ffc8; font-weight:bold; }
.reserve-piece .piece-hp { color:#00ffc8; font-size:.8em; }

#game-board { border-radius:2px; cursor:pointer; flex-shrink:0; }
#selection-info { font-size:.82em; color:rgba(255,255,255,0.4); min-height:50px; }
#selection-info .piece-detail { margin:3px 0; }
#selection-info .piece-detail strong { color:#00ffc8; }

#move-points-display { margin-top:4px; }
#move-points-bar { display:flex; gap:5px; padding:4px 0; }
.move-pip {
    width:20px; height:20px; border-radius:2px; border:1px solid rgba(0,255,200,0.4);
    background:transparent; transition:all .3s;
}
.move-pip.spent { background:rgba(0,255,200,0.15); opacity:.3; }
.move-pip.available { background:rgba(0,255,200,0.4); box-shadow:0 0 8px rgba(0,255,200,0.3); }

/* Enemy Eliminated panel */
#enemy-eliminated { display:flex; flex-direction:column; gap:3px; max-height:120px; overflow-y:auto; }
.empty-hint { font-size:.75em; color:rgba(255,255,255,0.15); font-style:italic; }
.reserve-piece.eliminated { opacity:.85; border-left:2px solid #ff0066; }
.eliminated-count { color:#ff0066; font-weight:bold; }

#game-log { max-height:180px; overflow-y:auto; font-size:.72em; color:rgba(255,255,255,0.3); }
#game-log .log-entry { padding:2px 0; border-bottom:1px solid rgba(0,255,200,0.04); }
#game-log .log-entry.capture { color:#ff0066; }
#game-log .log-entry.territory { color:#00ffc8; }
#game-log .log-entry.reveal { color:#ffcc00; }
#game-log .log-entry.damage { color:#ff6600; }
#game-log .log-entry.heal { color:#00ccaa; }
#game-log .log-entry.info { color:rgba(0,200,255,0.6); }

#controls { display:flex; justify-content:center; gap:8px; margin:10px 0; flex-wrap:wrap; }
#controls button {
    padding:7px 16px; border:1px solid rgba(255,255,255,0.1); border-radius:2px; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-size:.7em; font-weight:600;
    letter-spacing:1px; text-transform:uppercase; transition:all .2s;
}
#btn-end-turn { background:rgba(0,255,200,0.08); color:rgba(0,255,200,0.6); border-color:rgba(0,255,200,0.2); }
#btn-end-turn:hover { background:rgba(0,255,200,0.15); color:#00ffc8; box-shadow:0 0 10px rgba(0,255,200,0.1); }
#btn-attack { background:rgba(255,0,100,0.15); color:#ff6690; border-color:rgba(255,0,100,0.3); }
#btn-attack:hover { background:rgba(255,0,100,0.25); box-shadow:0 0 10px rgba(255,0,100,0.15); }
#btn-pass-attack { background:rgba(255,255,255,0.04); color:#667; border-color:rgba(255,255,255,0.1); }
#btn-pass-attack:hover { background:rgba(255,255,255,0.08); color:#999; }
#btn-menu { background:rgba(255,255,255,0.04); color:#667; border-color:rgba(255,255,255,0.1); }
#btn-menu:hover { background:rgba(255,255,255,0.08); color:#999; }
#btn-help { background:rgba(180,0,255,0.1); color:rgba(180,100,255,0.7); border-color:rgba(180,0,255,0.2); }
#btn-help:hover { background:rgba(180,0,255,0.18); box-shadow:0 0 10px rgba(180,0,255,0.1); }

#btn-music { background:rgba(255,200,0,0.08); color:rgba(255,200,100,0.6); border-color:rgba(255,200,0,0.2); }
#btn-music:hover { background:rgba(255,200,0,0.15); color:#ffcc66; box-shadow:0 0 10px rgba(255,200,0,0.1); }
#btn-music.muted { opacity:0.4; color:#667; border-color:rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); }

#phase-indicator { text-align:center; padding:5px; }
#current-phase {
    background:linear-gradient(90deg, rgba(0,255,200,0.2), rgba(0,200,255,0.15));
    color:#00ffc8; padding:3px 14px; border-radius:2px;
    font-family:'Orbitron',sans-serif;
    font-weight:bold; font-size:.72em; letter-spacing:1px;
    border:1px solid rgba(0,255,200,0.2);
}

/* Modal */
.modal {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(5,5,15,.85); display:flex; justify-content:center;
    align-items:center; z-index:100;
    backdrop-filter:blur(3px);
}
.modal.hidden { display:none; }
.modal-content {
    background:linear-gradient(135deg, rgba(10,10,30,0.98), rgba(15,15,40,0.98));
    border:1px solid rgba(0,255,200,0.15);
    padding:28px; border-radius:4px;
    max-width:600px; width:92%; max-height:80vh; overflow-y:auto; position:relative;
}
.modal-small { max-width:400px; }
.modal-content h2 { margin-bottom:12px; color:#00ffc8; font-family:'Orbitron',sans-serif; letter-spacing:1px; }
.modal-content h3 { margin:14px 0 6px; color:#ff6690; font-family:'Orbitron',sans-serif; font-size:.85em; letter-spacing:1px; }
.modal-content p,.modal-content li { margin:4px 0; line-height:1.5; font-size:.88em; }
.modal-content ul,.modal-content ol { padding-left:18px; }
.rules-table { width:100%; border-collapse:collapse; margin:8px 0; font-size:.85em; }
.rules-table th,.rules-table td { padding:5px 7px; border:1px solid rgba(0,255,200,0.1); text-align:center; }
.rules-table th { background:rgba(0,255,200,0.05); color:#00ffc8; font-family:'Orbitron',sans-serif; font-size:.8em; }
.close-btn { position:absolute; top:8px; right:14px; font-size:1.4em; cursor:pointer; color:rgba(255,255,255,0.3); }
.close-btn:hover { color:#ff0066; }

#final-scores { margin:12px 0; font-size:1em; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background:rgba(0,255,200,0.15); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,255,200,0.3); }

/* AI thinking indicator */
#ai-thinking {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(10,10,30,.95); border:1px solid rgba(255,0,100,0.3);
    padding:20px 30px; border-radius:2px;
    font-family:'Orbitron',sans-serif; font-size:.9em; letter-spacing:1px;
    color:#ff6690; z-index:150; text-align:center;
    box-shadow:0 0 20px rgba(255,0,100,0.1);
    animation:pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%,100% { box-shadow:0 0 20px rgba(255,0,100,0.1); }
    50% { box-shadow:0 0 30px rgba(255,0,100,0.25); }
}

/* ===== MOBILE LANDSCAPE TAB SYSTEM ===== */
#mobile-panel-tabs { display:none; }

/* ===== MOBILE / SMALL SCREEN RESPONSIVE ===== */
@media (max-width: 900px), (max-height: 600px) {
    body { padding:2px; align-items:flex-start; overflow-x:hidden; }

    /* Menu screen */
    .menu-box { padding:20px 24px; max-width:360px; }
    .menu-title { font-size:1.8em; }
    .menu-sub { font-size:.62em; margin-bottom:14px; }
    .menu-btn { padding:10px 16px; font-size:.72em; }
    .menu-btn.coming-soon { font-size:.6em; }

    /* Game container: fill viewport, prevent overflow */
    #game-container {
        max-width:100vw; width:100vw; padding:0 2px;
        max-height:100vh; display:flex; flex-direction:column;
    }

    /* Info bar: compact single line */
    #game-info { padding:3px 8px; margin:1px 0; border-radius:2px; flex-shrink:0; }
    .player-name { font-size:.78em; }
    .pieces-count { font-size:.65em; }
    #current-turn { font-size:.82em; }
    #turn-number { font-size:.65em; }

    /* Main area: board on left, tabs+panel on right */
    #main-area {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
        align-items: flex-start;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Board stays left */
    #game-board { order: 0; flex-shrink: 0; }

    /* Side panels: hidden by default, shown via tab toggle */
    .side-panel {
        display: none;
        width: 0;
        min-width: 0;
        max-height: none;
        overflow-y: auto;
        padding: 4px 6px;
        font-size: .72em;
        order: 2;
    }
    .side-panel.mobile-active {
        display: block;
        width: auto;
        min-width: 110px;
        max-width: 180px;
        flex: 1;
    }

    /* Mobile tab buttons: vertical strip between board and panel */
    #mobile-panel-tabs {
        display: flex;
        flex-direction: column;
        gap: 3px;
        order: 1;
        width: auto;
        padding-top: 2px;
    }
    .mobile-tab {
        padding: 4px 8px;
        border: 1px solid rgba(0,255,200,0.15);
        border-radius: 2px;
        background: rgba(0,255,200,0.03);
        color: rgba(0,255,200,0.4);
        font-family:'Orbitron',sans-serif;
        font-size: .55em;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .2s;
    }
    .mobile-tab:hover { background: rgba(0,255,200,0.08); }
    .mobile-tab.active { background: rgba(0,255,200,0.15); color: #00ffc8; border-color:rgba(0,255,200,0.4); }

    /* Piece reserve: compact vertical on mobile */
    #piece-reserve { gap: 2px; }
    .reserve-piece { padding: 2px 4px; font-size: .68em; }
    .reserve-piece .piece-icon { font-size: .9em; width: 16px; }

    /* Controls + phase: compact row */
    #controls { margin: 2px 0; gap: 4px; flex-shrink: 0; }
    #controls button { padding: 4px 10px; font-size: .6em; }

    #phase-indicator { padding: 1px; flex-shrink: 0; }
    #current-phase { font-size: .58em; padding: 2px 10px; }

    /* Modals: tighter on mobile */
    .modal-content { padding: 16px; max-height: 90vh; }
    .modal-content h2 { font-size: 1.1em; }
    .modal-content p, .modal-content li { font-size: .8em; }

    /* Game log: shorter */
    #game-log { max-height: 70px; font-size: .62em; }

    /* Selection info */
    #selection-info { font-size: .7em; min-height: 24px; }

    /* Side panel headings */
    .side-panel h3 { font-size: .6em; margin-bottom: 2px; margin-top: 3px; }

    /* Move points */
    .move-pip { width: 12px; height: 12px; }

    /* Enemy eliminated */
    #enemy-eliminated { max-height: 50px; }
}

/* Portrait fallback: force-rotate the game container when orientation lock fails */
@media (orientation: portrait) and (max-width: 600px) {
    #game-container:not(.hidden) {
        position: fixed;
        top: 0; left: 0;
        width: 100vh;
        height: 100vw;
        transform: rotate(90deg);
        transform-origin: top left;
        left: 100vw;
        overflow: hidden;
    }

    #menu-screen::after {
        content: '↻ ROTATE DEVICE TO LANDSCAPE';
        display: block;
        text-align: center;
        padding: 8px 16px;
        background: linear-gradient(90deg, rgba(255,0,100,0.2), rgba(0,255,200,0.15));
        border:1px solid rgba(0,255,200,0.3);
        color: #00ffc8;
        font-family:'Orbitron',sans-serif;
        font-size: .6em;
        font-weight: bold;
        letter-spacing: 2px;
        border-radius: 2px;
        margin-top: 12px;
        position: fixed;
        bottom: 36px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 60;
    }
}

/* Fullscreen: maximize space and center content */
:fullscreen body, :-webkit-full-screen body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
:fullscreen #game-container, :-webkit-full-screen #game-container {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
}
:fullscreen #main-area, :-webkit-full-screen #main-area {
    flex: 1;
    align-items: flex-start;
    min-height: 0;
}
:fullscreen #controls, :-webkit-full-screen #controls {
    margin: 6px 0;
}
:fullscreen #phase-indicator, :-webkit-full-screen #phase-indicator {
    padding: 4px;
}

/* ============================================================
   FOOTER — SifSystemsMCRD branding
   ============================================================ */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
    padding: 8px 16px;
    background: linear-gradient(to top, rgba(2,8,24,0.95) 0%, rgba(2,8,24,0) 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: rgba(212,175,55,0.7);
    z-index: 50;
    pointer-events: none;
}
.site-footer a {
    color: #d4af37;
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.2s;
}
.site-footer a:hover {
    color: #f1d27a;
    text-decoration: underline;
}
.footer-brand { pointer-events: auto; }
.footer-copy { opacity: 0.6; }

/* Hide footer in fullscreen game mode */
:fullscreen .site-footer, :-webkit-full-screen .site-footer {
    display: none;
}