:root {
  --concrete: #cfcac0;
  --asphalt: #2b2d30;
  --asphalt-2: #3a3d41;
  --paint: #f6f4ee;
  --paint-dim: rgba(246, 244, 238, .62);
  --yellow: #f5c400;
  --red: #d23a2b;
  --font: "Barlow Condensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --edge: 16px;
  --r: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--asphalt); }
body { font: 500 16px/1.25 var(--font); font-stretch: condensed; color: var(--paint);
       -webkit-font-smoothing: antialiased; user-select: none; }
#arena { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair;
         touch-action: none; }  /* no pinch/double-tap page zoom over the game */

/* HUD plates */
.plate { position: fixed; background: var(--asphalt); border-radius: var(--r); padding: 10px 12px;
         font-variant-numeric: tabular-nums; pointer-events: none; }
body[data-phase="menu"] .hud, body[data-phase="dead"] #score { display: none; }

#score { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); min-width: 172px; }
#score .n { font-size: 44px; font-weight: 600; line-height: 1; }
#score .unit { margin-left: 6px; color: var(--paint-dim); }
#egg { height: 6px; margin-top: 10px; background: rgba(246, 244, 238, .16); border-radius: 3px; overflow: hidden; }
#egg i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .12s linear; }
#score .next { margin-top: 5px; font-size: 13px; color: var(--paint-dim); }

#board { right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); width: 208px; }
#board h2 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--paint-dim); }
#board ol { list-style: none; margin: 0; padding: 0; }
#board li { display: grid; grid-template-columns: 16px 8px 1fr auto; gap: 7px; align-items: center; height: 22px; }
#board .rank { color: var(--paint-dim); text-align: right; }
#board .chip { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(246, 244, 238, .3); }
#board .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#board .me, #board .me .rank { color: var(--yellow); font-weight: 600; }
#board .apart { height: 28px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(246, 244, 238, .16); }

#map { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); padding: 8px; line-height: 0; }
#map canvas { width: 152px; height: 152px; display: block; border-radius: 2px; }

/* overlays */
.overlay { position: fixed; inset: 0; display: flex; align-items: flex-end; padding: 0 max(24px, 8vw) 14vh; }
.overlay[hidden] { display: none; }
.overlay.scrim { background: rgba(43, 45, 48, .58); }
/* the death card sits on the live, faded spectate view: its backdrop stays lighter than
   a normal scrim (the world itself is dimmed on the canvas) so the action stays
   readable behind it */
#dead { background: rgba(43, 45, 48, .28); }
.card { width: min(420px, 100%); background: var(--asphalt); border-radius: var(--r);
        padding: 22px 24px 24px; user-select: text; }
.card h1 { margin: 0 0 8px; font-size: 34px; font-weight: 600; line-height: 1.05; }
.card p { margin: 0 0 18px; font-size: 18px; line-height: 1.35; color: var(--paint-dim); max-width: 38ch; }
.card .note { margin: 12px 0 0; font-size: 16px; }
.row { display: flex; gap: 8px; }
#name { flex: 1; min-width: 0; height: 46px; padding: 0 12px; font: inherit; font-size: 20px; color: var(--paint);
         background: var(--asphalt-2); border: 1px solid rgba(246, 244, 238, .2); border-radius: var(--r); outline: none; }
#name::placeholder { color: rgba(246, 244, 238, .42); }
#name:focus { border-color: var(--yellow); }

/* death-card round feedback: under Play again, one divider up from it */
#fb { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(246, 244, 238, .16); }
.fb-q { font-size: 16px; color: var(--paint-dim); margin-bottom: 8px; }
#fb-stars { gap: 2px; margin-bottom: 8px; }
#fb-stars .star { width: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1;
                   background: transparent; color: rgba(246, 244, 238, .35); }
#fb-stars .star:hover { background: rgba(246, 244, 238, .08); }
#fb-stars .star.on { color: var(--yellow); }
#fb .row input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--paint);
                  background: var(--asphalt-2); border: 1px solid rgba(246, 244, 238, .2); border-radius: var(--r); outline: none; }
#fb .row input::placeholder { color: rgba(246, 244, 238, .42); }
#fb .row input:focus { border-color: var(--yellow); }
#fb-send { flex: none; height: 40px; padding: 0 16px; font-size: 16px; }
#fb-send:disabled { background: rgba(246, 244, 238, .22); color: var(--asphalt-2); cursor: default; }
button { height: 46px; padding: 0 22px; font: inherit; font-size: 20px; font-weight: 600; color: var(--asphalt);
           background: var(--yellow); border: 0; border-radius: var(--r); cursor: pointer; }
button:hover { background: #ffd83a; }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--paint); outline-offset: 2px; }

/* red glow at the screen edge while the player's queen is being bitten */
#hurt { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(210, 58, 43, 0);
         transition: box-shadow .6s ease-out; }
#hurt.on { box-shadow: inset 0 0 72px 0 rgba(210, 58, 43, .42); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) { #hurt, #egg i { transition: none; } }
@media (max-width: 720px) { #board { display: none; } }

/* ==== menu, branding & hints (agent C) ==== */
/* The start card grows with the customizer; on short viewports it scrolls instead of
   running off the top of the screen. */
#start .card { max-height: 84vh; overflow-y: auto; }

/* Customizer inside the menu card: wrapping rows, 36 px+ tap targets, ring on the pick.
   Swatches and skin buttons are exact squares (width = height) that never flex-stretch or
   shrink - border-radius 50% on a non-square box would draw an oval. */
#custom { margin-bottom: 4px; }
.c-h { font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
       color: var(--paint-dim); margin: 10px 0 6px; }
.swatches, .skins { display: flex; flex-wrap: wrap; gap: 6px; }
#custom .swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; min-width: 0;
                  aspect-ratio: 1 / 1; flex: 0 0 auto;
                  border: 2px solid rgba(246, 244, 238, .35); }
#custom .swatch.sel { border-color: transparent;
                      box-shadow: 0 0 0 2px var(--asphalt), 0 0 0 4px var(--paint); }
#custom .skin { width: 52px; height: 52px; padding: 0; background: transparent; overflow: hidden;
                border: 2px solid rgba(246, 244, 238, .18); border-radius: 50%; min-width: 0;
                aspect-ratio: 1 / 1; flex: 0 0 auto; }
#custom .skin canvas { display: block; width: 48px; height: 48px; border-radius: 50%; }
#custom .skin.sel { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
#custom .skin:hover { background: rgba(246, 244, 238, .06); }
/* 17 skins in one compact row: wraps on wide screens, scrolls on phones */
.skins { flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.skins::-webkit-scrollbar { height: 6px; }
.skins::-webkit-scrollbar-thumb { background: rgba(246, 244, 238, .25); border-radius: 3px; }
.c-note { margin: 8px 0 0; font-size: 14px; color: var(--paint-dim); }

/* First-life hint toasts: top-centre, out of the way of the bottom-right buttons;
   the container never intercepts input, only the dismiss button does. */
#hints { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%;
         transform: translateX(-50%); width: min(400px, calc(100vw - 24px));
         display: flex; flex-direction: column; gap: 8px; align-items: center;
         pointer-events: none; z-index: 10; }
.hint { display: flex; align-items: center; gap: 4px; box-sizing: border-box;
        background: var(--asphalt); border-radius: var(--r); padding: 8px 4px 8px 14px;
        font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        animation: hint-in .25s ease-out; }
@keyframes hint-in { from { opacity: 0; transform: translateY(-8px); } }
#hints .hint-x { pointer-events: auto; flex: none; width: 36px; height: 36px; margin: 0;
                 padding: 0; background: transparent; color: var(--paint-dim);
                 font-size: 22px; line-height: 1; }
#hints .hint-x:hover { background: rgba(246, 244, 238, .08); color: var(--paint); }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }
/* ==== end agent C ==== */

/* ==== controls & connection (agent B) ==== */
/* Touch hold buttons (FEED / ATTACK), built in JS by main.js: bottom-right, above the
   minimap (#map is 152 px canvas + 8 px padding, at var(--edge) from both edges). Each
   declaration is repeated without env() first so the position survives browsers without
   safe-area support. 84 px targets, semi-transparent dark plate to match the game. */
#touchbtns { position: fixed; z-index: 5; display: flex; gap: 14px; pointer-events: auto;
             right: calc(var(--edge) + 8px); bottom: calc(var(--edge) + 182px); }
#touchbtns { right: calc(var(--edge) + 8px + env(safe-area-inset-right));
             bottom: calc(var(--edge) + 182px + env(safe-area-inset-bottom)); }
#touchbtns[hidden] { display: none; }
#touchbtns button { width: 84px; height: 84px; padding: 0; border-radius: 50%;
                    font-size: 17px; letter-spacing: .03em; color: var(--paint);
                    background: rgba(43, 45, 48, .55); border: 1px solid rgba(246, 244, 238, .28);
                    touch-action: none; user-select: none; -webkit-user-select: none;
                    -webkit-tap-highlight-color: transparent; }
#touchbtns button.down { background: rgba(245, 196, 0, .30); border-color: var(--yellow); color: #fff; }
#btn-attack.down { background: rgba(210, 58, 43, .30); border-color: var(--red); }

/* Reconnect card, built in JS by main.js and shown by net.js (reuses .overlay/.scrim/.card). */
#reconnect { z-index: 6; }
#reconnect p { margin-bottom: 14px; }
#reconnect-btn[hidden] { display: none; }

/* "Colony lost" line in the start card after a reconnect (JS-built), yellow like #name:focus. */
#lost-note { color: var(--yellow); }

/* Pause / quit card, built in JS by main.js (reuses .overlay/.scrim/.card). z-index 7:
   above the reconnect card (6) so it can sit over a dropping connection, below the
   hint toasts (10). Full-width stacked buttons for a small, tappable menu. */
#pause { z-index: 7; }
#pause .card button { display: block; width: 100%; }
#pause .card button + button { margin-top: 8px; }
/* ==== end controls & connection (agent B) ==== */