/* -------- Theme tokens -------- */
/* Primary accent (blue) tracks cellagents.dev brand palette. Chat line
   colors stay semantic: red=you, green=friend, orange=admin, purple=system.
   The chrome accent is blue so it doesn't collide with the friend-chat
   green. */
:root,
html.theme-light {
    --bg: #fafaf7;
    --bg-game: rgba(0, 0, 0, 0.06);
    --panel-bg: rgba(255, 255, 255, 0.8);
    --panel-text: #1f2328;
    --panel-border: #d0d7de;
    --chat-input-border: #d0d7de;
    --menu-card-bg: #ffffff;
    --menu-card-text: #1f2328;
    --menu-input-border: #d0d7de;
    --menu-input-border-focus: #2f6feb;
    --title-color: #1f2328;
    --title-me: #ea6153;
    --accent: #2f6feb;
    --accent-dark: #1f58c7;
    --accent-hover: #4a85f0;
    --chat-system: #7a4ea2;
    --chat-admin: #d99400;
    --chat-friend: #2ecc71;
    --chat-me: #ea6153;
    --status-bg: rgba(47, 111, 235, 0.08);
    --status-text: #1f2328;
    --status-error-bg: #f8d6d6;
    --status-error-text: #8a1f1f;
    --code-bg: #f4f4f4;
    --code-text: #333;
}
html.theme-dark {
    --bg: #0f1419;
    --bg-game: rgba(0, 0, 0, 0.4);
    --panel-bg: rgba(22, 26, 32, 0.7);
    --panel-text: #e6e8eb;
    --panel-border: rgba(255, 255, 255, 0.08);
    --chat-input-border: #30363d;
    --menu-card-bg: #1a1f26;
    --menu-card-text: #e6e8eb;
    --menu-input-border: #30363d;
    --menu-input-border-focus: #4a85f0;
    --title-color: #ffffff;
    --title-me: #ff8888;
    --accent: #4a85f0;
    --accent-dark: #2f6feb;
    --accent-hover: #6b9eff;
    --chat-system: #c58fff;
    --chat-admin: #ffb84d;
    --chat-friend: #2ecc71;
    --chat-me: #ea6153;
    --status-bg: rgba(74, 133, 240, 0.12);
    --status-text: #e6e8eb;
    --status-error-bg: #4a1f1f;
    --status-error-text: #ffdada;
    --code-bg: #0b0f14;
    --code-text: #9eff6a;
}

/* -------- Base -------- */
* { font-family: sans-serif; font-size: 14px; box-sizing: border-box; }
html, body { background: var(--bg); overflow: hidden; margin: 0; padding: 0; color: var(--panel-text); }
html, body, canvas { width: 100%; height: 100%; }
canvas { background: var(--bg-game); display: block; }
[hidden] { display: none !important; }

div {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* -------- Floating icon buttons (theme toggle, exit, lock) --------
   Sized at roughly half the diameter of the mobile .control-btn so the
   top-right stack reads as secondary chrome next to the primary touch
   controls. Spacing follows the same clamp, keeping gaps proportional. */
:root {
    --floating-btn-size: clamp(32px, 6vmin, 64px);
    --floating-btn-gap: clamp(4px, 1.5vmin, 10px);
    --floating-btn-edge: clamp(6px, 1.5vmin, 12px);
}
.floating-btn {
    position: fixed;
    width: var(--floating-btn-size); height: var(--floating-btn-size);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg); color: var(--panel-text);
    font-size: clamp(14px, 3vmin, 28px); line-height: 1; cursor: pointer;
    z-index: 20;
    /* Normalize so glyphs with uneven baselines sit truly centered. */
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-align: center;
    /* Some floating buttons are <a> elements (e.g. exit on /spectator);
       the UA stylesheet underlines anchors by default. */
    text-decoration: none;
}
.floating-btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }

/* Right-anchored vertical stack of floating buttons. Positions are
   computed from --floating-btn-size + --floating-btn-gap so the stack
   stays snug at every viewport. Order from top to bottom:
   exit/lock, theme, chat, leaderboard. */
.floating-btn { right: var(--floating-btn-edge); }
.floating-btn.exit-btn,
.floating-btn.lock-btn { top: var(--floating-btn-edge); }
.floating-btn.theme-toggle {
    top: calc(var(--floating-btn-edge) + (var(--floating-btn-size) + var(--floating-btn-gap)));
}
.floating-btn.chat-btn {
    top: calc(var(--floating-btn-edge) + 2 * (var(--floating-btn-size) + var(--floating-btn-gap)));
}
.floating-btn.leaderboard-btn {
    top: calc(var(--floating-btn-edge) + 3 * (var(--floating-btn-size) + var(--floating-btn-gap)));
}
.floating-btn.minimap-btn {
    top: calc(var(--floating-btn-edge) + 4 * (var(--floating-btn-size) + var(--floating-btn-gap)));
}

/* -------- Game: on-screen touch controls --------
   Circular, semi-transparent, sized against the smaller viewport
   dimension so they feel right in both portrait and landscape. */
.control-btn {
    position: absolute;
    width: clamp(64px, 12vmin, 128px);
    aspect-ratio: 1 / 1;
    bottom: clamp(10px, 3vmin, 24px);
    padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg); color: var(--panel-text);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: clamp(11px, 2.2vmin, 18px);
    letter-spacing: 0.05em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* The canvas sits behind these; prevent taps from steering the cell
       and prevent iOS from treating a double-tap as zoom. */
    touch-action: manipulation;
    user-select: none;
    z-index: 15;
}
.control-btn:active {
    background: var(--accent-hover);
    color: #fff;
    border-color: var(--accent);
}
#split { left: clamp(10px, 3vmin, 24px); }
#feed  { right: clamp(10px, 3vmin, 24px); }

/* Only show the touch controls to an active player on a coarse-pointer
   device (phones, tablets). Spectators never see them (no actions to
   take), and desktop mouse users have keyboard shortcuts (space / w). */
#touch-controls { display: none; }
@media (pointer: coarse) {
    body.player-mode #touch-controls { display: block; }
}

/* -------- Game: leaderboard widget -------- */
body.player-mode #leaderboard {
    position: absolute;
    top: var(--floating-btn-edge);
    /* Clear the floating-btn column (edge + button width + gap). */
    right: calc(var(--floating-btn-edge) + var(--floating-btn-size) + var(--floating-btn-gap));
    padding: 10px;
    background: var(--panel-bg); color: var(--panel-text);
    font-size: 16.1px; font-weight: bold; text-align: center;
    border-radius: 6px; border: 1px solid var(--panel-border);
    z-index: 10;
}
body.player-mode #leaderboard .title { font-size: 22px; }
body.player-mode #leaderboard .me { color: var(--title-me); font-size: 16.1px; }

/* -------- Shared chatbox -------- */
.chatbox {
    background: var(--panel-bg); color: var(--panel-text);
    border-radius: 6px; border: 1px solid var(--panel-border);
    display: flex; flex-direction: column;
    pointer-events: none;
}
.chatbox .chat-list {
    padding: 6px; margin: 0; list-style: none;
    flex: 1 1 auto; overflow: auto;
    min-height: 0;
}
.chatbox .chat-list li { padding: 2px; margin: 3px; }
.chatbox .chat-list li.me b { color: var(--chat-me); }
.chatbox .chat-list li.friend b { color: var(--chat-friend); }
.chatbox .chat-list li.admin b { color: var(--chat-admin); font-weight: 900; }
.chatbox .chat-list li.system {
    color: var(--chat-system); font-style: italic;
}
.chatbox .chat-list li.system:before { content: "» "; }

.chatbox .chat-input {
    pointer-events: all;
    width: 100%; padding: 8px;
    background: transparent; color: var(--panel-text);
    border: none; border-top: 1px solid var(--chat-input-border);
    outline: none; font-size: 14px;
}

/* Game-page chatbox positioning (admin reuses .chatbox inside its own panel) */
/* Player page: chatbox is a direct child of <body> (no SPA wrapper). */
body.player-mode > #chatbox {
    position: absolute; width: 300px; height: 320px;
    bottom: 5px; left: 5px;
}

/* -------- Start menu (game) -------- */
.menu-wrapper {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 2;
}
.menu-card {
    width: 100%; max-width: 400px;
    padding: 24px;
    background: var(--menu-card-bg); color: var(--menu-card-text);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.menu-title {
    margin: 0 0 16px; padding: 0;
    text-align: center; font-size: 22px; font-weight: bold;
}

.menu-card input[type=text],
.menu-card input[type=password] {
    width: 100%; padding: 10px;
    background: transparent; color: inherit;
    border: solid 1px var(--menu-input-border);
    border-radius: 5px; outline: none;
    text-align: center;
    margin-bottom: 12px;
    transition: box-shadow 0.3s, border 0.3s;
}
.menu-card input[type=text]:focus,
.menu-card input[type=password]:focus {
    border-color: var(--menu-input-border-focus);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
}
.menu-card .input-error { color: #c33; font-size: 12px; opacity: 0; display: block; margin-bottom: 8px; }

/* -------- Buttons (shape / size / color split, bootstrap-style) --------
   Shape lives on .btn; size modifiers (.btn-sm) override just the
   geometry; variant modifiers (.btn-primary, .btn-secondary) override
   just the colors. Combine as needed, e.g. `.btn .btn-sm .btn-primary`. */
.btn {
    display: block; width: 100%; height: 42px;
    padding: 0;
    font-size: 16px; text-align: center; line-height: 40px;
    border-radius: 5px; cursor: pointer;
    margin-bottom: 10px;
    border: 0;
}
/* Anchor-shaped buttons: strip the UA underline so an <a class="btn">
   is visually indistinguishable from the <button> variant. */
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }

/* Size modifier. */
.btn-sm {
    display: inline-block; width: auto; height: auto;
    padding: 4px 10px; font-size: 12px; line-height: normal;
    margin: 0;
}

/* Primary (brand accent). */
.btn-primary {
    color: #fff;
    background: var(--accent);
    border-bottom: 2px solid var(--accent-dark);
    box-shadow: inset 0 -2px var(--accent-dark);
}
.btn-primary:hover, .btn-primary:active {
    background: var(--accent-hover); box-shadow: none;
}

/* Secondary (neutral surface). Used for operator-configured lobby links
   so they don't compete visually with the primary Play/Spectate CTAs. */
.btn-secondary {
    color: var(--menu-card-text);
    background: var(--menu-card-bg);
    border: 1px solid var(--menu-input-border);
    border-bottom: 2px solid var(--menu-input-border);
    box-shadow: none;
}
.btn-secondary:hover, .btn-secondary:active {
    background: var(--panel-bg);
    color: var(--menu-card-text);
    box-shadow: none;
}

.lobby-extra-links:empty { display: none; }

/* -------- Lobby start-menu card -------- */
#start-menu-wrapper { position: absolute; inset: 0; z-index: 2; }
#start-menu-wrapper, #settings {
    overflow: hidden; transition: max-height 1s;
}
#start-menu {
    width: 100%; max-width: 400px;
    margin: 100px auto 0; padding: 24px;
    background: var(--menu-card-bg); color: var(--menu-card-text);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
#start-menu p {
    padding: 0; text-align: center; font-size: 22px; font-weight: bold;
    margin: 0 0 16px;
}
#player-name-input {
    width: 100%; padding: 10px;
    background: transparent; color: inherit;
    border: solid 1px var(--menu-input-border); border-radius: 5px;
    outline: none; text-align: center; margin-bottom: 10px;
    transition: box-shadow 0.3s, border 0.3s;
}
#player-name-input:focus { border-color: var(--menu-input-border-focus); box-shadow: 0 0 3px 1px rgba(0,0,0,0.1); }
#start-menu .input-error { color: #c33; opacity: 0; font-size: 12px; display: block; margin-bottom: 8px; }
#settings { max-height: 0; }
#start-menu h3 { padding-bottom: 0; margin-bottom: 0; }
#start-menu ul { margin: 10px; padding: 10px; margin-top: 0; }

/* -------- Admin dashboard -------- */
.admin-dashboard {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 60px 20px 20px; /* top padding leaves room for theme toggle */
    overflow: auto;
}
.admin-header {
    display: flex; align-items: baseline; gap: 16px;
    margin: 0 auto 20px;
    width: 100%; max-width: 1600px;
    color: var(--panel-text);
}
.admin-header .admin-title { font-size: 22px; font-weight: bold; }
.admin-header .session-meta { font-size: 12px; opacity: 0.7; }
.admin-header .btn-sm { margin-left: auto; }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1600px; margin: 0 auto; width: 100%;
    align-items: stretch;
}
.overlay-panel {
    background: var(--panel-bg); color: var(--panel-text);
    border: 1px solid var(--panel-border); border-radius: 6px;
    padding: 14px; min-width: 0;
    display: flex; flex-direction: column;
}
.overlay-panel .panel-title {
    font-weight: bold; font-size: 15px;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--panel-border);
    display: flex; align-items: center; justify-content: space-between;
}

/* Admin chat panel: let the chatbox fill the panel body. */
.overlay-panel #chatbox {
    flex: 1 1 auto; min-height: 320px;
    pointer-events: all;
}

/* Players list inside a panel */
.players-list {
    overflow: auto; max-height: 60vh;
}
.player-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--panel-border);
}
.player-row:last-child { border-bottom: 0; }
.player-row button {
    padding: 4px 10px; background: #c33; color: #fff;
    border: 0; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.player-row button:hover { background: #e55; }

/* Raw state */
.overlay-panel pre {
    background: var(--code-bg); color: var(--code-text);
    padding: 10px; border-radius: 4px; overflow: auto;
    font-size: 12px; max-height: 60vh; margin: 0;
}

/* Status banner (shared) */
.status {
    padding: 8px 10px; margin: 8px 0; border-radius: 4px;
    background: var(--status-bg); color: var(--status-text);
}
.status.error { background: var(--status-error-bg); color: var(--status-error-text); }

/* -------- Spectator / follow surfaces --------
   The /spectator and /follow pages run a thin WebGL-less renderer on a
   full-viewport canvas with a leaderboard panel and an optional info
   overlay. Chat (when enabled) sits bottom-left at body level, outside
   any wrapper. */
body > #game-canvas {
    position: absolute; inset: 0; width: 100vw; height: 100vh;
    display: block; background: #111;
}
.leaderboard-panel {
    position: absolute;
    top: var(--floating-btn-edge);
    /* Clear the floating-btn column (edge + button width + gap). */
    right: calc(var(--floating-btn-edge) + var(--floating-btn-size) + var(--floating-btn-gap));
    width: 280px; max-height: 90vh; overflow: auto;
    background: var(--panel-bg); color: var(--panel-text);
    border: 1px solid var(--panel-border);
    padding: 12px; border-radius: 8px; font-size: 13px;
    z-index: 10;
}
.leaderboard-panel .title { font-weight: bold; margin-bottom: 6px; display: block; }
#follow-info {
    position: absolute; bottom: 10px; left: 10px;
    padding: 6px 10px;
    background: var(--panel-bg); color: var(--panel-text);
    border: 1px solid var(--panel-border);
    border-radius: 6px; font-size: 13px; z-index: 10;
}
/* Body-level chatbox (spectator/follow) sits bottom-left. Floating
   buttons keep their higher z-index and stay reachable on top. */
body > #chatbox {
    position: absolute; width: 300px; height: 320px;
    bottom: 10px; left: 10px;
    z-index: 10;
}

/* Status overlay on /spectator and /follow. Sits above chat (z-index
   10) but below the floating-btn stack (z-index 20) so the user can
   still toggle theme / exit while disconnected. */
.status-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 15;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.status-overlay .status-card {
    pointer-events: auto;
    width: 100%; max-width: 400px;
    padding: 24px;
    background: var(--menu-card-bg); color: var(--menu-card-text);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.status-overlay .status-card p { margin: 0 0 12px; font-size: 15px; }
.status-overlay .status-card a {
    display: inline-block; margin-top: 8px;
    padding: 8px 16px;
    background: var(--accent); color: #fff;
    border-radius: 5px; text-decoration: none;
    font-size: 14px; font-weight: 500;
}
.status-overlay .status-card a:hover { background: var(--accent-hover); }

/* -------- Chat visibility toggle (all canvas pages) -------- */
body.chat-hidden #chatbox { display: none; }

/* -------- Minimap (all three viewports) --------
   Top-left overlay sized to roughly match the chat window below it.
   Backed by its own <canvas id="minimap"> rendered through a thin
   Renderer with fullMapCamera; see thin/minimap.ts. The canvas is a
   direct body child so the z-index stacks the same way the chat
   overlay does. */
canvas.minimap {
    position: absolute;
    top: 10px; left: 10px;
    width: 300px; height: 300px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
}
body.minimap-hidden canvas.minimap { display: none; }

/* -------- Leaderboard visibility toggle (all canvas pages) --------
   Covers both mounts: #leaderboard (direct id on player page) and the
   .leaderboard-panel wrapper on spectator/follow/managed. */
body.leaderboard-hidden #leaderboard,
body.leaderboard-hidden .leaderboard-panel { display: none; }

/* -------- Mobile tweaks -------- */
@media (max-width: 800px) {
    /* Player page chatbox: hidden entirely on narrow viewports so it
       doesn't cover the player's own cell. The chat toggle button
       hides with it (nothing to toggle). */
    body.player-mode > #chatbox { display: none; }
    body.player-mode .floating-btn.chat-btn { display: none; }

    /* Spectator/follow chatbox: goes full-width overlay. Floating
       buttons keep their higher z-index and remain reachable on top. */
    body > #chatbox {
        left: 10px; right: 10px; width: auto;
    }
}

*:focus { outline: 1px solid transparent; border-style: none; }