:root {
    --bg: #0a0a0a;
    --panel: #141414;
    --border: #2a2a2a;
    --fg: #e0e0e0;
    --muted: #888;
    --accent: #7cff7c;
    --error: #ff7c7c;
}

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

html, body {
    min-height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Landing / lobby can grow taller than the viewport (e.g. a long public-games
   list) -- let the page scroll so nothing is stranded below the fold. Gameplay
   locks scrolling so the canvas owns the viewport (rule just below). */
body {
    overflow-y: auto;
}
body[data-in-game="true"] {
    overflow: hidden;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `safe` keeps the top reachable when content is taller than the viewport
       (plain `center` would clip it above the scroll origin). */
    justify-content: safe center;
    min-height: 100vh;
    padding: 1rem;
    gap: 1.5rem;
}

/* In-game: zero out page padding/gap and float HUD + status over the
   canvas so the play area fills the entire viewport. The HUD is small
   chips and the status is a tiny connection-state label, so neither
   really needs vertical space of its own. */
body[data-in-game="true"] main {
    padding: 0;
    gap: 0;
}
body[data-in-game="true"] #hud {
    position: fixed;
    top: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: 0.25rem 0.5rem;
    background: rgba(10, 10, 10, 0.55);
    border-radius: 6px;
    z-index: 20;
    pointer-events: none;
}
body[data-in-game="true"] #status {
    position: fixed;
    bottom: 0.25rem;
    right: 0.5rem;
    margin-top: 0;
    font-size: 0.6rem;
    opacity: 0.6;
    pointer-events: none;
}

h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: 0.05em;
}

.muted {
    color: var(--muted);
    font-size: 0.9rem;
}

.hidden {
    display: none !important;
}

.screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 28rem;
}

#game-screen {
    max-width: 100%;
    gap: 0.5rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--muted);
}

input, select, button {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--fg);
    border-radius: 6px;
    font: inherit;
    min-height: 44px;
}

input:focus, select:focus, button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button {
    background: var(--accent);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    border-color: transparent;
}

button:hover {
    filter: brightness(1.1);
}

button[type="button"] {
    background: var(--panel);
    color: var(--fg);
    border-color: var(--border);
}

#share-link-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

#share-link-box input {
    flex: 1 1 100%;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8rem;
}

#share-link-box button {
    flex: 1 1 auto;
}

.divider {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    gap: 0.75rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

#manual-join-code {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

#player-list {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#player-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.color-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.player-name {
    flex: 1;
}

.host-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.team-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.32rem;
    border-radius: 4px;
    color: #000;
    background: #ff9f1c;          /* team A (warm) */
}

.team-badge[data-team="1"] {
    background: #2ec4ff;          /* team B (cool) */
}

#lobby-game-id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--accent);
    letter-spacing: 0.15em;
}

/* ----- Create form: private toggle ----- */

.checkbox-label {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg);
    font-size: 0.85rem;
}

.checkbox-label input {
    min-height: auto;
    width: auto;
    accent-color: var(--accent);
}

/* ----- Public game browser (landing page) ----- */

/* Landing page: forms and public games sit side by side on wide screens (so the
   list is visible without scrolling past the forms), and stack on narrow ones.
   Wider cap than the default .screen column to fit the two columns. */
#create-screen {
    max-width: 52rem;
}

#create-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    align-items: start;
}

#create-forms {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 40rem) {
    #create-screen { max-width: 28rem; }
    #create-layout { grid-template-columns: 1fr; }
}

#game-browser {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

#game-list {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 55vh;
    overflow-y: auto;
}

#game-list:empty {
    display: none;
}

.game-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: left;
}

button.game-row {
    cursor: pointer;
    color: var(--fg);
    font: inherit;
    min-height: 44px;
}

button.game-row:hover {
    border-color: var(--accent);
    filter: none;
}

.game-row.ongoing {
    opacity: 0.55;
}

.game-host {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-count {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.game-code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.game-state {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.game-row.joinable .game-state {
    color: var(--accent);
    font-weight: 700;
}

/* ----- Lobby chat (design 17) ----- */

.chat {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.chat-toggle {
    min-height: auto;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.3rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.chat-messages:empty::before {
    content: "Say hi while you wait…";
    margin: auto;
    color: var(--muted);
    font-size: 0.8rem;
}

.chat-msg {
    word-break: break-word;
}

.chat-msg .chat-name {
    font-weight: 700;
    margin-right: 0.35rem;
}

.chat-form {
    flex-direction: row;
    gap: 0.5rem;
}

.chat-form input {
    flex: 1;
    min-width: 0;
}

.chat-form button {
    flex: 0 0 auto;
}

.chat-form input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Per-player hide toggle (persisted in localStorage): collapse to just the
   header so the player can re-open it later. */
.chat.collapsed .chat-messages,
.chat.collapsed .chat-form {
    display: none;
}

#status {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: auto;
}

#status[data-state="error"] {
    color: var(--error);
}

/* ----- Countdown ----- */

#countdown-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100;
    pointer-events: none;
}

#countdown-number {
    font-size: clamp(6rem, 30vw, 16rem);
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 40px rgba(124, 255, 124, 0.5);
}

/* Reconnect overlay: covers the screen while the socket is dropped so the player
   sees a clear "reconnecting" state instead of a frozen countdown / game frame.
   Highest z-index so it sits over the countdown + results overlays. */
#reconnect-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    z-index: 300;
}

#reconnect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem;
}

.reconnect-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: reconnect-spin 0.8s linear infinite;
}

@keyframes reconnect-spin { to { transform: rotate(360deg); } }

#reconnect-reload {
    max-width: 10rem;
}

/* ----- Game canvas + HUD ----- */

#canvas-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

canvas#game-canvas {
    /* --view-w / --view-h carry the active VIEW dims (what's visible at
       any one time, in game coords). client.js writes them whenever
       lobby_state arrives -- they reflect the view size, not the world
       size, so a bigger ARENA_SCALE doesn't widen the canvas aspect.
       They drive both aspect-ratio AND the max-width cap so the canvas
       can never grow wider than what max-height allows.

       --max-vh: how much vertical viewport the canvas claims. Default 100vh
       gives the play area room to dominate the screen on desktop. */
    --view-w: 1280;
    --view-h: 720;
    --max-vh: 100vh;
    display: block;
    width: 100%;
    max-width: min(100vw, calc(var(--max-vh) * var(--view-w) / var(--view-h)));
    max-height: var(--max-vh);
    aspect-ratio: var(--view-w) / var(--view-h);
    background: #000;
    border: 1px solid var(--border);
    /* Smooth upscaling -- the canvas backing buffer is rendered at
       devicePixelRatio resolution (see client.js arenaW/arenaH/dpr
       handling) so emoji glyphs and stroked snake shapes stay crisp
       on Retina / 4K / 120%-zoom monitors. */
    image-rendering: auto;
    touch-action: none;
}

/* ----- Virtual joysticks (touch devices only) ----- */

.joystick {
    display: none;  /* shown on touch devices via the media query below */
    position: absolute;
    /* Positioned ~1/3 up the canvas (still below the vertical midpoint)
       for comfortable thumb reach -- the bottom of the screen is too easy
       to clip with phone-case bezels and home-bar gestures. */
    bottom: 33%;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    touch-action: none;
    z-index: 10;
    pointer-events: auto;
}

#joystick-left { left: 1.5rem; }
#joystick-right { right: 1.5rem; }

.joystick-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    border-radius: 50%;
    background: rgba(124, 255, 124, 0.6);
    transition: transform 0.05s linear;
    pointer-events: none;
}

/* The .touch class on <body> is set by client.js using the same matchMedia
   query below -- having both keeps things working if JS is delayed or fails.
   `pointer: coarse AND hover: none` deliberately excludes touchscreen
   laptops (which have a trackpad as primary input). */
@media (pointer: coarse) and (hover: none) {
    .joystick { display: block; }
    canvas#game-canvas { --max-vh: 100vh; }
}
body.touch .joystick { display: block; }
body.touch canvas#game-canvas { --max-vh: 100vh; }

/* Compact desktop view (feature flag: ?compact=1). Canvas display size is
   unchanged -- the JS render pipeline switches on follow-cam zoom (the same
   one mobile uses), so each snake / fruit appears bigger on screen at the
   cost of seeing only a portion of the arena at a time. */

/* ----- Portrait rotation hint (touch + portrait only) ----- */

#rotate-hint {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 300;
    font-size: 1.1rem;
    color: var(--fg);
}

@media (pointer: coarse) and (hover: none) and (orientation: portrait) {
    body[data-in-game="true"] #rotate-hint:not(.dismissed) {
        display: flex !important;
    }
}
@media (orientation: portrait) {
    body.touch[data-in-game="true"] #rotate-hint:not(.dismissed) {
        display: flex !important;
    }
}

#hud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    max-width: 1280px;
    padding: 0.25rem 0.5rem;
}

.hud-player {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}

.hud-player[data-dead="true"] {
    opacity: 0.4;
    text-decoration: line-through;
}

#game-message {
    text-align: center;
}

/* ----- Results overlay ----- */

#results-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    padding: 1rem;
}

#results-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    max-width: 30rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

#results-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    color: var(--accent);
}

#results-list {
    list-style: none;
    counter-reset: place;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#results-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.place-num {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--accent);
    min-width: 2rem;
}

/* Multi-round match: accumulated points on the right of each standings row. */
.score-pts {
    margin-left: auto;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--accent);
}

/* Multi-round match: "Round X/N" pill leading the in-game HUD. */
.hud-round {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: var(--accent);
    color: #07131c;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ----- Fruit-dropping mode bar (dead players, design 18) ----- */

#drop-bar {
    position: fixed;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 96vw;
    padding: 0.4rem 0.6rem;
    background: rgba(10, 10, 10, 0.82);
    border: 1px solid var(--border);
    border-radius: 8px;
    z-index: 30;
}

.drop-charges {
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    min-width: 2.4rem;
    text-align: center;
}

.drop-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 40px;
    padding: 0.25rem 0.55rem;
    font-size: 1.2rem;
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--border);
}

.drop-tool small {
    font-size: 0.7rem;
    color: var(--muted);
}

.drop-tool.armed {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(124, 255, 124, 0.4);
}

.drop-tool:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.drop-fruit-type {
    min-height: 40px;
    max-width: 8rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}

.drop-hint {
    font-size: 0.72rem;
    color: var(--muted);
    flex-basis: 100%;
    text-align: center;
}

/* Dead players don't steer -> free the canvas for tap-to-place on touch. */
body.local-dead .joystick {
    display: none !important;
}