:root {
    --sab: env(safe-area-inset-bottom, 0px);
}

html {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

body {
    margin: 0;
    padding: 0;
    background-color: #111;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: none;
}

#game-container {
    position: fixed;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    border: 2px solid #333;
    transform-origin: 0 0;
    touch-action: none;
    pointer-events: none;
}
#game-container > * {
    pointer-events: auto;
}

canvas {
    display: block;
    background-color: #000;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#score-board {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #0ff;
    text-shadow: 0 0 5px #0ff;
    text-align: right;
    line-height: 1.6;
}

#high-score-board {
    font-size: 16px;
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
}

#start-screen, #game-over-screen {
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    pointer-events: auto;
    border: 1px solid #444;
}

h1 {
    margin: 0 0 20px 0;
    color: #0ff;
    text-shadow: 0 0 10px #0ff;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

p {
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.5;
}

button {
    background: #f0f;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 10px #f0f;
    transition: transform 0.1s;
}

button:hover {
    transform: scale(1.05);
    background: #ff00e6;
}

.hidden {
    display: none !important;
}

#name-screen, #main-menu, #mp-screen, #create-room-screen, #settings-screen,
#lobby-screen, #results-screen, #leaderboard-screen {
    background: rgba(0,0,0,0.88); padding: 36px 40px;
    border-radius: 10px; text-align: center;
    pointer-events: auto; border: 1px solid #444; min-width: 320px;
}

#leaderboard-table {
    width: 100%; margin: 8px 0;
}
.lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; margin-bottom: 4px;
    border-left: 3px solid #333;
    font-family: 'Courier New', monospace; font-size: 13px;
}
.lb-row:nth-child(1) { border-color: #ffd700; }
.lb-row:nth-child(2) { border-color: #c0c0c0; }
.lb-row:nth-child(3) { border-color: #cd7f32; }
.lb-rank {
    width: 22px; text-align: right; color: #666; flex-shrink: 0;
}
.lb-row:nth-child(1) .lb-rank { color: #ffd700; }
.lb-row:nth-child(2) .lb-rank { color: #c0c0c0; }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; }
.lb-name { flex: 1; color: #fff; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #0ff; text-shadow: 0 0 5px #0ff; font-weight: bold; flex-shrink: 0; }
.lb-badges { display: flex; gap: 4px; flex-shrink: 0; }
.lb-badge {
    font-size: 10px; padding: 2px 5px; border-radius: 3px;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
}
.lb-badge-solo   { background: rgba(0,255,255,0.15); color: #0ff; border: 1px solid rgba(0,255,255,0.4); }
.lb-badge-multi  { background: rgba(255,0,255,0.15); color: #f0f; border: 1px solid rgba(255,0,255,0.4); }
.lb-badge-easy   { background: rgba(0,255,0,0.1);   color: #0f0; border: 1px solid rgba(0,255,0,0.3); }
.lb-badge-medium { background: rgba(255,165,0,0.1); color: #fa0; border: 1px solid rgba(255,165,0,0.3); }
.lb-badge-hard   { background: rgba(255,0,0,0.15);  color: #f55; border: 1px solid rgba(255,0,0,0.4); }
.lb-date { color: #444; font-size: 11px; flex-shrink: 0; }
.lb-empty { color: #555; font-size: 13px; font-family: 'Courier New', monospace; padding: 20px 0; }
#main-menu input, .code-input {
    background: #000; border: 1px solid #0ff; color: #0ff;
    padding: 10px 14px; font-size: 16px;
    font-family: 'Courier New', monospace;
    width: 200px; text-align: center;
    letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px;
    display: block; margin: 0 auto 12px;
    user-select: text; -webkit-user-select: text;
    touch-action: auto;
}
#name-input { letter-spacing: 1px; text-transform: none; }
.mp-btn {
    display: block; width: 100%; margin: 8px 0; padding: 14px;
    background: transparent; border: 2px solid #0ff; color: #0ff;
    font-size: 16px; cursor: pointer; font-family: 'Courier New', monospace;
    font-weight: bold; text-transform: uppercase; letter-spacing: 2px;
    box-shadow: 0 0 8px rgba(0,255,255,0.3); transition: all 0.15s;
}
.mp-btn:hover { background: #0ff; color: #000; }
.mp-btn.danger { border-color: #f00; color: #f00; }
.mp-btn.danger:hover { background: #f00; color: #000; }
.mp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sound-toggle.off { border-color: #555; color: #555; box-shadow: none; }
#room-code-display {
    font-size: 28px; color: #ff0; text-shadow: 0 0 12px #ff0;
    letter-spacing: 6px; margin: 12px 0; font-family: 'Courier New', monospace;
}
#player-list, #rankings-list { list-style: none; padding: 0; margin: 12px 0; text-align: left; }
#player-list li, #rankings-list li {
    padding: 6px 10px; color: #ccc; font-size: 14px;
    border-left: 3px solid #333; margin-bottom: 4px;
}
#player-list li.is-me, #rankings-list li.is-me { border-color: #0ff; color: #0ff; }
#player-list li.is-host::after { content: ' \2605'; color: #ff0; }
#rankings-list li:first-child { border-color: #ff0; color: #ff0; }
#limit-control { margin: 12px 0; color: #aaa; font-size: 14px; }
#limit-control input[type=range] { width: 180px; accent-color: #0ff; }
#difficulty-control, #solo-difficulty {
    margin: 12px 0; color: #aaa; font-size: 13px;
}
.diff-btn {
    display: inline-block; padding: 6px 14px; margin: 4px 3px 0;
    background: transparent; border: 1px solid #444; color: #666;
    font-size: 13px; cursor: pointer; font-family: 'Courier New', monospace;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.15s;
}
.diff-btn:hover { border-color: #0ff; color: #0ff; }
.diff-btn.active { border-color: #0ff; color: #0ff; box-shadow: 0 0 8px rgba(0,255,255,0.4); }
.room-type-btn {
    display: inline-block; padding: 7px 20px; margin: 0;
    background: transparent; border: 1px solid #444; color: #666;
    font-size: 13px; cursor: pointer; font-family: 'Courier New', monospace;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.15s;
}
.room-type-btn:first-child { border-radius: 3px 0 0 3px; border-right: none; }
.room-type-btn:last-child  { border-radius: 0 3px 3px 0; }
.room-type-btn:hover  { border-color: #0ff; color: #0ff; }
.room-type-btn.active { border-color: #0ff; color: #0ff; box-shadow: 0 0 8px rgba(0,255,255,0.4); }
#opponents-sidebar {
    display: none; position: absolute; top: 0; right: -210px;
    width: 200px; height: 100%; background: rgba(0,0,0,0.85);
    border-left: 1px solid #333; padding: 16px 12px; box-sizing: border-box;
}
#opponents-sidebar h3 {
    color: #0ff; font-size: 12px; letter-spacing: 2px; margin: 0 0 12px 0;
}
.opp-card {
    padding: 8px; margin-bottom: 8px; border: 1px solid #333;
    font-size: 12px; font-family: 'Courier New', monospace;
}
.opp-card.alive { border-color: #0f0; }
.opp-card.dead  { border-color: #333; opacity: 0.5; }
.opp-name { color: #fff; margin-bottom: 4px; }
.opp-score { color: #0ff; }
.opp-status { float: right; }
.opp-card.alive .opp-status { color: #0f0; }
.opp-card.dead  .opp-status { color: #f00; }
#sabotage-alert {
    display: none; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(180,0,0,0.9); color: #fff;
    padding: 12px 24px; font-size: 18px;
    font-family: 'Courier New', monospace; font-weight: bold;
    text-align: center; border: 2px solid #f00;
    box-shadow: 0 0 20px #f00; pointer-events: none; z-index: 10;
}
#sabotage-alert .ai-taunt {
    display: block; font-size: 13px; color: #ff8; margin-top: 6px;
    font-style: italic; font-weight: normal;
}
#ai-ticker {
    position: absolute; bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7); color: #0ff;
    padding: 6px 16px; font-size: 13px;
    font-family: 'Courier New', monospace;
    border: 1px solid rgba(0,255,255,0.3);
    box-shadow: 0 0 10px rgba(0,255,255,0.2);
    text-align: center; max-width: 80%;
    pointer-events: none; z-index: 8;
    opacity: 0; transition: opacity 0.3s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ai-ticker.visible { opacity: 1; }
.ai-recap-panel {
    margin-top: 14px; padding: 10px 14px;
    background: rgba(0,255,255,0.05);
    border: 1px solid rgba(0,255,255,0.25);
    border-radius: 6px; color: #8ef; font-size: 13px;
    font-family: 'Courier New', monospace;
    line-height: 1.5; text-align: left;
    min-height: 20px;
}
.ai-recap-panel:empty { display: none; }
.ai-recap-label {
    font-size: 10px; color: #0ff; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 4px;
}

#touch-controls {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    padding: 0 12px 20px;
    box-sizing: border-box;
}
#touch-controls button {
    pointer-events: auto;
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 28vw;
    max-width: 160px;
    height: 72px;
    background: rgba(0, 255, 255, 0.06);
    border: 2px solid rgba(0, 255, 255, 0.35);
    color: rgba(0, 255, 255, 0.5);
    font-size: 36px;
    line-height: 72px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.15);
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    padding: 0;
    cursor: pointer;
}
#touch-controls button:active,
#touch-controls button.pressed {
    background: rgba(0, 255, 255, 0.22);
    border-color: #0ff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.45);
    color: #0ff;
}
#touch-left { left: 12px; }
#touch-right { right: 12px; }

@media (min-width: 641px) and (max-width: 1024px) {
    #name-screen, #main-menu, #mp-screen, #create-room-screen, #settings-screen,
    #lobby-screen, #results-screen, #leaderboard-screen {
        padding: 28px 24px;
    }
    #opponents-sidebar {
        right: 0; width: 180px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 5;
    }
    #touch-controls button {
        height: 88px;
        width: 22vw;
    }
}

@media (max-width: 640px) {
    h1 { font-size: 28px; letter-spacing: 2px; }
    #name-screen, #main-menu, #mp-screen, #create-room-screen, #settings-screen,
    #lobby-screen, #results-screen, #leaderboard-screen {
        padding: 24px 20px; min-width: 0; width: 85vw;
        max-width: 340px; box-sizing: border-box;
    }
    #start-screen, #game-over-screen { padding: 24px 20px; }
    #score-board { font-size: 18px; right: 16px; top: 12px; }
    #high-score-board { font-size: 13px; }
    #room-code-display { font-size: 22px; letter-spacing: 4px; }
    .mp-btn { padding: 12px; font-size: 14px; min-height: 44px; }
    #main-menu input, .code-input { width: 160px; font-size: 14px; }
    #ai-ticker { font-size: 11px; bottom: 8px; padding: 4px 10px; }
    #opponents-sidebar {
        right: 0; width: 160px;
        background: rgba(0, 0, 0, 0.92);
        border-left: 1px solid rgba(0, 255, 255, 0.2);
        z-index: 5;
    }
}

@media (max-width: 400px) {
    h1 { font-size: 22px; }
    #name-screen, #main-menu, #mp-screen, #create-room-screen, #settings-screen,
    #lobby-screen, #results-screen, #leaderboard-screen {
        padding: 16px 14px; width: 92vw;
    }
    .mp-btn { font-size: 13px; padding: 10px; }
}