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

:root {
    --wood-dark: #3a2610;
    --wood-mid: #5e3e1a;
    --wood-highlight: #a07840;
    --cream: #f5e6c8;
    --cream-dim: #c0a878;
    --green-dark: #1e3a20;
    --green-mid: #2d5a32;
    --p1-color: #d14a6a;
    --p2-color: #e8a820;
    --pixel-font: 'Press Start 2P', monospace;
}

html, body {
    width:100%; height:100%; overflow:hidden;
    background:#1a2e1c; font-family:var(--pixel-font);
    touch-action:none; -webkit-tap-highlight-color:transparent;
    user-select:none; image-rendering:pixelated;
}

/* ══════════════════════════════════════
   SCREEN SYSTEM
   ══════════════════════════════════════ */
.screen {
    position:fixed; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
}
.screen-hidden { display:none !important; }
.screen-active { display:flex !important; }

/* ══════════════════════════════════════
   MENU SCREEN
   ══════════════════════════════════════ */
#screen-menu {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(80,168,72,0.15) 0%, transparent 70%),
        #1a2e1c;
}

.menu-container {
    width:100%; max-width:380px;
    padding:24px 20px;
    display:flex; flex-direction:column;
    align-items:center; gap:20px;
}

.menu-header {
    text-align:center;
}

.menu-title {
    font-size:28px; color:var(--cream);
    text-shadow: 0 3px 0 var(--wood-dark), 0 5px 12px rgba(0,0,0,0.5);
    line-height:1.3;
}

.menu-subtitle {
    font-size:8px; color:var(--cream-dim);
    letter-spacing:3px; text-transform:uppercase;
    margin-top:8px;
}

.menu-profile {
    width:100%;
    background:var(--wood-mid);
    border:2px solid var(--wood-dark);
    border-radius:6px; padding:12px 16px;
    text-align:center;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
    box-shadow: inset 0 1px 0 rgba(255,200,120,0.15), 0 3px 8px rgba(0,0,0,0.3);
}

.profile-row {
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-bottom:4px;
}

.profile-name {
    font-size:12px; color:var(--cream);
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

.profile-rank {
    font-size:8px; color:#e8a820;
    background:rgba(0,0,0,0.2);
    padding:3px 8px; border-radius:3px;
}

.profile-elo {
    font-size:9px; color:var(--cream-dim);
}
.profile-elo b {
    color:var(--cream); font-weight:normal;
}

.menu-buttons {
    width:100%; display:flex; flex-direction:column; gap:10px;
}

.menu-btn {
    width:100%; padding:16px 20px;
    font-family:var(--pixel-font); font-size:12px;
    color:var(--cream);
    background:var(--wood-mid);
    border:2px solid var(--wood-dark);
    border-radius:6px; cursor:pointer;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
    box-shadow: inset 0 1px 0 rgba(255,200,120,0.15), 0 2px 0 var(--wood-dark);
    transition:border-color 0.15s, transform 0.1s;
    min-height:48px;
}
.menu-btn:hover { border-color:var(--cream-dim); transform:scale(1.02); }
.menu-btn:active { transform:scale(0.97); box-shadow:none; }

.menu-btn-primary {
    background:var(--green-mid);
    border-color:var(--green-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 0 var(--green-dark);
    font-size:14px;
}

.menu-logo {
    width:80px; height:auto;
    margin-top:16px; opacity:0.3;
}

/* ══════════════════════════════════════
   QUEUE SCREEN
   ══════════════════════════════════════ */
#screen-queue {
    background:#1a2e1c;
}

.queue-container {
    text-align:center;
    padding:24px;
}

.queue-title {
    font-size:14px; color:var(--cream);
    text-shadow:0 2px 0 rgba(0,0,0,0.4);
    margin-bottom:24px;
}

.queue-spinner {
    width:48px; height:48px;
    border:4px solid var(--wood-dark);
    border-top-color:var(--cream);
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 20px;
}
@keyframes spin { to { transform:rotate(360deg); } }

.queue-status {
    font-size:9px; color:var(--cream-dim);
    margin-bottom:24px;
}

/* ══════════════════════════════════════
   GAME SCREEN
   ══════════════════════════════════════ */
#screen-game {
    background:#1a2e1c;
}

#game-container {
    width:100%; height:100%; display:flex; flex-direction:column;
    align-items:center; background:#1a2e1c;
}

/* Top bar */
#hud {
    width:100%; max-width:600px; height:60px;
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:0 12px;
    background:var(--wood-mid); border-bottom:3px solid var(--wood-dark);
    box-shadow: inset 0 1px 0 rgba(255,200,120,0.15), 0 3px 8px rgba(0,0,0,0.4);
    flex-shrink:0;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
    background-color:var(--wood-mid);
}

#pause-btn {
    position:absolute; left:10px;
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; letter-spacing:-2px;
    color:var(--cream-dim); background:rgba(0,0,0,0.25);
    border:2px solid var(--wood-dark); border-radius:6px;
    cursor:pointer; text-shadow:0 1px 0 rgba(0,0,0,0.4);
    transition:border-color 0.15s;
    font-family:sans-serif; font-weight:bold;
    padding-right:2px;
}
#pause-btn:hover { border-color:var(--cream-dim); }
#pause-btn:active { transform:scale(0.93); }

#turn-indicator {
    display:flex; align-items:center; gap:8px;
}

.turn-icon {
    width:22px; height:22px; image-rendering:pixelated;
}

#turn-text {
    font-size:12px; color:var(--cream);
    text-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#mode-label {
    position:absolute; right:12px;
    font-size:7px; color:rgba(192,168,120,0.35);
    text-transform:uppercase; letter-spacing:1.5px;
}

/* Online bar */
#online-bar {
    width:100%; max-width:600px;
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 16px;
    background:rgba(0,0,0,0.3);
    font-size:9px; color:var(--cream-dim);
}
#online-timer {
    font-size:12px; color:var(--cream);
    font-weight:bold;
}

/* Canvas */
#game-canvas {
    flex:1; width:100%; max-width:600px;
    cursor:pointer; image-rendering:pixelated;
}

/* Bottom bar */
#bottom-bar {
    width:100%; max-width:600px;
    background:var(--wood-mid); border-top:3px solid var(--wood-dark);
    box-shadow: inset 0 1px 0 rgba(255,200,120,0.12), 0 -3px 8px rgba(0,0,0,0.3);
    flex-shrink:0; display:flex; flex-direction:column;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
    background-color:var(--wood-mid);
}

#bar-body {
    display:flex; align-items:center;
    padding:8px 10px 10px; gap:8px;
}

.player-panel {
    display:flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:6px;
    background:rgba(0,0,0,0.2); border:2px solid rgba(0,0,0,0.15);
    transition:border-color 0.3s, box-shadow 0.3s, background 0.3s;
    min-width:68px; justify-content:center;
}

.player-panel.active {
    border-color:var(--cream-dim);
    background:rgba(0,0,0,0.3);
    box-shadow:0 0 12px rgba(255,230,150,0.3);
}

.player-icon {
    width:32px; height:32px; image-rendering:pixelated; flex-shrink:0;
}

.score-value {
    font-size:20px; color:var(--cream); line-height:1;
    text-shadow:0 2px 0 rgba(0,0,0,0.5);
    min-width:20px; text-align:center;
}

#bar-center {
    flex:1; min-width:0;
    display:flex; flex-direction:column; gap:4px; align-items:center;
}

.territory-bar {
    width:100%; max-width:180px; height:8px;
    background:rgba(0,0,0,0.25); border-radius:4px;
    display:flex; overflow:hidden;
    border:1px solid rgba(0,0,0,0.15);
}
.terr-fill { height:100%; transition:width 0.3s ease; }
.terr-p1 { background:var(--p1-color); border-radius:4px 0 0 4px; }
.terr-p2 { background:var(--p2-color); margin-left:auto; border-radius:0 4px 4px 0; }

#stat-row {
    display:flex; gap:12px; justify-content:center;
    margin-top:4px;
}

.stat-chip {
    font-size:10px; color:rgba(192,168,120,0.55);
    text-transform:uppercase;
}
.stat-chip b {
    font-size:13px; color:var(--cream-dim);
    font-weight:normal;
}

/* ══════════════════════════════════════
   POPUPS (shared)
   ══════════════════════════════════════ */
#skip-overlay, #seed-overlay, #pause-overlay, #game-over-overlay {
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center; z-index:10;
}
#skip-overlay { background:rgba(0,0,0,0.5); }
#seed-overlay { background:rgba(0,0,0,0.55); }
#pause-overlay { background:rgba(0,0,0,0.6); }
#game-over-overlay { background:rgba(0,0,0,0.7); }
.hidden { display:none !important; }

#skip-box, #seed-box, #pause-box, #game-over-box {
    background:var(--wood-mid); color:var(--cream);
    padding:24px 28px; border-radius:6px; text-align:center;
    border:3px solid var(--wood-dark);
    box-shadow: inset 0 1px 0 rgba(255,200,120,0.15), 0 12px 40px rgba(0,0,0,0.5);
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
    background-color:var(--wood-mid);
    min-width:240px; max-width:320px;
}

#skip-box h2, #seed-box h2, #pause-box h2, #game-over-box h2 {
    font-size:14px; margin-bottom:8px;
    text-shadow:0 2px 0 rgba(0,0,0,0.5);
}

#skip-text {
    font-size:11px; margin-bottom:16px; line-height:1.6;
}

#seed-box {
    min-width:300px; max-width:380px;
}

#seed-title-row {
    display:flex; align-items:center; justify-content:center;
    gap:10px; margin-bottom:16px;
}
#seed-title-row canvas {
    width:22px; height:22px; image-rendering:pixelated; flex-shrink:0;
}
#seed-title-row h2 {
    font-size:12px; margin:0; white-space:nowrap;
    text-shadow:0 2px 0 rgba(0,0,0,0.5);
}

#game-over-box p {
    font-size:12px; margin-bottom:16px; color:var(--cream-dim);
}

.popup-btn {
    display:block; width:100%;
    font-family:var(--pixel-font); font-size:10px;
    background:rgba(0,0,0,0.2); color:var(--cream);
    border:2px solid var(--wood-dark); padding:12px 16px;
    border-radius:4px; cursor:pointer; margin-bottom:8px;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
    transition:border-color 0.15s, transform 0.1s;
    min-height:44px;
}
.popup-btn:last-child { margin-bottom:0; }
.popup-btn:hover { border-color:var(--cream-dim); transform:scale(1.02); }
.popup-btn:active { transform:scale(0.97); }

#play-again-btn {
    background:var(--green-mid);
    border-color:var(--green-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 0 var(--green-dark);
}

#seed-options { display:flex; flex-direction:column; gap:10px; }
.seed-btn {
    display:flex; flex-direction:column; align-items:center;
    gap:5px; padding:14px 16px; width:100%;
    background:rgba(0,0,0,0.2); border:2px solid var(--wood-dark);
    border-radius:6px; cursor:pointer;
    transition:border-color 0.15s, transform 0.1s;
    color:var(--cream); font-family:var(--pixel-font);
    min-height:48px;
}
.seed-btn:hover { border-color:var(--cream-dim); transform:scale(1.02); }
.seed-btn:active { transform:scale(0.97); }
.seed-name { font-size:12px; text-shadow:0 1px 0 rgba(0,0,0,0.4); }
.seed-desc { font-size:7px; color:var(--cream-dim); text-align:center; line-height:1.5; }

/* ══════════════════════════════════════
   RESULTS SCREEN
   ══════════════════════════════════════ */
#screen-results {
    background:#1a2e1c;
}

.results-container {
    text-align:center; padding:24px;
    max-width:380px; width:100%;
}

.results-title {
    font-size:24px; color:var(--cream);
    text-shadow: 0 3px 0 var(--wood-dark), 0 5px 12px rgba(0,0,0,0.5);
    margin-bottom:16px;
}

.results-score {
    font-size:28px; color:var(--cream);
    text-shadow:0 2px 0 rgba(0,0,0,0.4);
    margin-bottom:20px;
}

.results-elo-row {
    display:flex; align-items:center; justify-content:center; gap:16px;
    padding:12px 16px;
    background:var(--wood-mid);
    border:2px solid var(--wood-dark);
    border-radius:6px;
    font-size:10px; color:var(--cream-dim);
    margin-bottom:20px;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
}
.results-elo-row b {
    color:var(--cream); font-weight:normal; font-size:12px;
}

.results-rank {
    font-size:8px; color:#e8a820;
    background:rgba(0,0,0,0.2);
    padding:3px 8px; border-radius:3px;
}

.results-buttons {
    display:flex; flex-direction:column; gap:10px;
}

/* ══════════════════════════════════════
   FRIENDS SCREEN
   ══════════════════════════════════════ */
#screen-friends {
    background:#1a2e1c;
}

.friends-container {
    width:100%; max-width:380px;
    padding:16px 20px;
    display:flex; flex-direction:column; gap:12px;
    max-height:100%; overflow-y:auto;
}

.screen-header {
    display:flex; align-items:center; gap:12px;
}
.screen-header h2 {
    font-size:14px; color:var(--cream);
    text-shadow:0 2px 0 rgba(0,0,0,0.4);
}

.back-btn {
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--cream-dim);
    background:rgba(0,0,0,0.25); border:2px solid var(--wood-dark);
    border-radius:6px; cursor:pointer;
    font-family:var(--pixel-font);
}
.back-btn:hover { border-color:var(--cream-dim); }

.friends-code-section {
    font-size:10px; color:var(--cream-dim);
    padding:10px 14px;
    background:var(--wood-mid); border:2px solid var(--wood-dark);
    border-radius:6px;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
}
.friends-code-section b {
    color:var(--cream); font-weight:normal; font-size:12px;
}

.friends-add-section {
    display:flex; gap:8px;
}

.pixel-input {
    flex:1; padding:10px 12px;
    font-family:var(--pixel-font); font-size:10px;
    color:var(--cream); background:rgba(0,0,0,0.3);
    border:2px solid var(--wood-dark); border-radius:4px;
    outline:none;
}
.pixel-input::placeholder { color:rgba(192,168,120,0.35); }
.pixel-input:focus { border-color:var(--cream-dim); }

.friends-add-section .popup-btn {
    width:auto; min-width:60px; margin-bottom:0;
}

.friends-list {
    display:flex; flex-direction:column; gap:6px;
}

.friends-empty {
    font-size:9px; color:var(--cream-dim);
    text-align:center; padding:20px;
}

.friend-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px;
    background:rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.15);
    border-radius:4px;
}

.friend-name {
    font-size:10px; color:var(--cream);
}

.friend-status {
    font-size:8px; padding:2px 6px; border-radius:3px;
}
.friend-status.online { color:#50e868; background:rgba(80,232,104,0.15); }
.friend-status.offline { color:var(--cream-dim); }

.friend-pending {
    font-size:8px; color:#e8a820;
}

.friend-accept-btn, .friend-invite-btn {
    font-family:var(--pixel-font); font-size:8px;
    padding:4px 10px; margin-left:6px;
    color:var(--cream); background:var(--green-mid);
    border:1px solid var(--green-dark); border-radius:3px;
    cursor:pointer;
}
.friend-accept-btn:hover, .friend-invite-btn:hover {
    border-color:var(--cream-dim);
}

/* ══════════════════════════════════════
   LEADERBOARD SCREEN
   ══════════════════════════════════════ */
#screen-leaderboard {
    background:#1a2e1c;
}

.leaderboard-container {
    width:100%; max-width:380px;
    padding:16px 20px;
    display:flex; flex-direction:column; gap:12px;
    max-height:100%; overflow-y:auto;
}

.leaderboard-list {
    display:flex; flex-direction:column; gap:4px;
}

.lb-row {
    display:flex; align-items:center;
    padding:10px 14px;
    background:rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.15);
    border-radius:4px; gap:12px;
}

.lb-rank {
    font-size:10px; color:#e8a820;
    min-width:36px;
}

.lb-name {
    font-size:10px; color:var(--cream);
    flex:1;
}

.lb-elo {
    font-size:10px; color:var(--cream-dim);
}

/* ══════════════════════════════════════
   OPTIONS SCREEN
   ══════════════════════════════════════ */
#screen-options {
    background:#1a2e1c;
}

.options-container {
    width:100%; max-width:380px;
    padding:16px 20px;
    display:flex; flex-direction:column; gap:12px;
}

.options-list {
    display:flex; flex-direction:column; gap:6px;
}

.option-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px;
    background:var(--wood-mid);
    border:2px solid var(--wood-dark);
    border-radius:6px;
    background-image: repeating-linear-gradient(90deg,
        transparent 0px, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px);
}

.option-label {
    font-size:10px; color:var(--cream);
}

.option-toggle {
    font-family:var(--pixel-font); font-size:10px;
    padding:6px 16px;
    color:var(--cream); background:rgba(0,0,0,0.25);
    border:2px solid var(--wood-dark); border-radius:4px;
    cursor:pointer; min-width:60px; text-align:center;
    transition:border-color 0.15s;
}
.option-toggle:hover { border-color:var(--cream-dim); }

.options-footer {
    font-size:7px; color:rgba(192,168,120,0.25);
    text-align:center; margin-top:12px;
}