:root {
    --ink: #12140f;
    --paper: #eeeadf;
    --ember: #c8552d;
    --pine: #4a7a5e;
    --line: rgba(238,234,223,0.15);
    --muted: rgba(238,234,223,0.55);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--ink); color: var(--paper);
  }
  .screen {
    max-width: 420px; margin: 0 auto; padding: 24px 18px 60px;
    display: none;
  }
  .screen.active { display: block; }

  h1 {
    font-size: 22px; font-weight: 700; margin: 8px 0 4px; letter-spacing: -0.01em;
  }
  .subtitle { color: var(--muted); font-size: 16px; margin-bottom: 28px; }

  label {
    display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin-bottom: 6px; margin-top: 18px;
  }
  input {
    width: 100%; background: rgba(238,234,223,0.06); border: 1px solid var(--line);
    color: var(--paper); border-radius: 8px; padding: 12px 14px; font-size: 16px;
  }
  input:focus { outline: none; border-color: var(--ember); }
  input.code-input {
    text-transform: uppercase; letter-spacing: 0.2em; font-size: 22px; text-align: center;
    font-weight: 700;
  }

  button {
    font-family: inherit; cursor: pointer; border: none; border-radius: 8px;
    font-weight: 600; font-size: 15px; padding: 13px 16px;
  }
  .btn-primary { background: var(--ember); color: var(--paper); width: 100%; margin-top: 22px; }
  .btn-primary:disabled { background: #4a4a44; color: var(--muted); cursor: default; }
  .btn-secondary {
    background: transparent; color: var(--paper); width: 100%; margin-top: 10px;
    border: 1px solid var(--line);
  }
  .entry-actions { display: flex; gap: 12px; margin-top: 12px; }
  .entry-actions .btn-primary { width: auto; flex: 1; margin-top: 0; padding: 13px 8px; font-size: 14px; }
  .entry-actions-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .entry-actions-grid .btn-primary { flex: none; }
  .label-hint { text-transform: none; letter-spacing: normal; font-weight: 400; opacity: 0.75; }
  /* Tighter vertical rhythm on the entry screen specifically — keeps the
     whole form (title through both buttons) visible above a phone's
     virtual keyboard, which otherwise covers roughly the bottom 35-45%
     of the viewport. Scoped here rather than changing the shared .screen/
     .subtitle/label rules, since those are also used on other screens
     this change isn't meant to touch. */
  #screenEntry { padding-top: 10px; }
  #screenEntry .subtitle { margin-bottom: 6px; }
  #screenEntry label { margin-top: 10px; }

  .error-text { color: var(--ember); font-size: 14px; margin-top: 10px; min-height: 16px; }

  /* Lobby screen */
  .code-banner {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(238,234,223,0.06); border: 1px solid var(--line);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 22px;
  }
  .code-banner .label { margin: 0; }
  .code-banner .code { font-size: 24px; font-weight: 700; letter-spacing: 0.15em; }

  .audio-toggle-btn {
    background: rgba(238,234,223,0.06); border: 1px solid var(--line); color: var(--paper);
    border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  }
  .audio-toggle-btn.muted { opacity: 0.6; border-color: var(--muted); }

  .team-picker { display: flex; gap: 10px; margin-top: 8px; }
  .team-btn {
    flex: 1; padding: 10px 8px 12px; border-radius: 10px; border: 2px solid var(--line);
    background: rgba(238,234,223,0.04); color: var(--paper); text-align: center;
  }
  .team-btn-img { width: 100%; height: 130px; object-fit: contain; display: block; margin-bottom: 6px; }
  .team-btn .name { font-size: 13px; font-weight: 600; }
  .team-btn.selected.hunters { border-color: var(--pine); background: rgba(74,122,94,0.18); }
  .team-btn.selected.squatch { border-color: var(--ember); background: rgba(200,85,45,0.18); }

  .team-section { margin-top: 26px; }
  .team-heading {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .team-heading .dot { width: 8px; height: 8px; border-radius: 50%; }
  .team-heading.hunters .dot { background: var(--pine); }
  .team-heading.squatch .dot { background: var(--ember); }
  .team-heading.unassigned .dot { background: var(--muted); }

  .player-card {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px;
    background: rgba(238,234,223,0.03);
  }
  .player-card .pname { font-size: 14px; }
  .player-card .pname .you { color: var(--muted); font-weight: 400; }
  .host-badge { margin-left: 2px; }
  .player-remove-btn {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0; line-height: 1;
    border: 1px solid var(--line); border-radius: 50%; background: transparent;
    color: var(--muted); font-size: 12px; cursor: pointer;
  }
  .player-remove-btn:hover { color: var(--ember); border-color: var(--ember); }
  .ready-pill {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 3px 9px; border-radius: 20px;
  }
  .ready-pill.ready { background: rgba(74,122,94,0.3); color: #8ecfa8; }
  .ready-pill.waiting { background: rgba(238,234,223,0.1); color: var(--muted); }
  .empty-note { color: var(--muted); font-size: 13px; padding: 6px 2px; }

  .ready-btn {
    width: 100%; margin-top: 24px; background: transparent; color: var(--paper);
    border: 2px solid var(--pine);
  }
  .ready-btn.is-ready { background: var(--pine); }

  .start-btn { width: 100%; margin-top: 14px; background: var(--ember); color: var(--paper); }
  .start-btn:disabled { background: #4a4a44; color: var(--muted); }
  .start-note { color: var(--muted); font-size: 12px; text-align: center; margin-top: 8px; }

  .leave-link {
    display: block; text-align: center; color: var(--muted); font-size: 15px;
    margin-top: 26px; background: none; border: none; text-decoration: underline;
    width: 100%;
  }
  /* First page a player sees — an important navigation option, not an
     incidental link, so it gets a much larger, more prominent size than
     the general .leave-link bump above. */
  #entryGuideLink {
    font-size: 19px; font-weight: 600;
  }

  .checkbox-row {
    display: flex; align-items: center; gap: 10px; margin: 8px 0 4px;
    cursor: pointer; text-transform: none; letter-spacing: normal;
    font-size: 15px; color: var(--paper);
  }
  .checkbox-row input[type="checkbox"] {
    width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--ember); cursor: pointer;
  }

  /* Campfire placement screen */
  .campfire-map {
    height: 340px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); margin-top: 14px;
  }
  .campfire-hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
  #campfireBtn { margin-top: 12px; }
  .building-check-status { font-size: 12px; margin-top: 8px; min-height: 16px; color: var(--muted); }
  .building-check-status.warn { color: var(--ember); font-weight: 700; }

  /* Game screen — full-bleed map, breaks out of the centered column.
     height:100dvh (in addition to inset:0) keeps this correctly sized as
     Safari's address bar shows/hides on scroll, instead of jumping — dvh
     tracks the actual visible viewport; unsupported browsers just ignore
     it and fall back to the inset:0-derived height. */
  /* ==========================================================
     GAME SCREEN LAYOUT REDESIGN (v1.13+) begins here. To revert:
     restore the single block that was here before (#screenGame.active
     as position:fixed/block with #gameMap as inset:0, .game-hud-top
     as an absolute top bar, .roar-btn as absolute bottom-right) and
     delete everything down to the matching "ends here" comment below.
     ========================================================== */
  #screenGame.active {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; height: 100dvh; max-width: none; padding: 0;
  }
  .game-map-wrap {
    position: relative; flex: 0 0 85%; overflow: hidden; box-sizing: border-box;
    border: 3px solid var(--ember); touch-action: none;
  }
  #gameMap { position: absolute; inset: 0; }
  .leave-corner-btn {
    position: absolute; top: 10px; right: 10px; z-index: 1000;
    background: rgba(18,20,15,0.9); border: 1px solid var(--line); color: var(--muted);
    border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 500;
    backdrop-filter: blur(6px);
  }
  .game-status-box {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 12px 16px; background: var(--ink); border-top: 1px solid var(--line);
  }
  .status-box-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .hud-pill {
    background: rgba(238,234,223,0.06); border: 1px solid var(--line);
    border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  }
  .roar-btn {
    background: var(--ember); color: var(--paper); border: none;
    font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 24px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4); width: 100%; max-width: 320px;
  }
  .roar-btn:disabled { background: #4a4a44; color: var(--muted); }
  .alert-banner {
    position: absolute; bottom: 14px; left: 12px; right: 12px; z-index: 1000;
    background: rgba(200,85,45,0.97); border-radius: 12px; padding: 14px 16px;
    display: none; flex-direction: column; gap: 10px; align-items: center; text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .alert-banner #alertText { font-weight: 700; font-size: 14px; }
  .alert-banner button {
    width: 100%; background: var(--ink); color: var(--paper);
  }
  .win-banner {
    position: absolute; inset: 0; z-index: 2000; background: rgba(18,20,15,0.97);
    display: none; flex-direction: column; align-items: stretch; text-align: center;
    padding: 50px 20px 40px; overflow-y: auto;
  }
  /* ========== GAME SCREEN LAYOUT REDESIGN ends here ========== */
  .win-banner .win-text { font-size: 26px; font-weight: 800; }
  .stats-inner { max-width: 380px; margin: 0 auto; width: 100%; }
  .stats-duration { color: var(--muted); font-size: 16px; margin: 10px 0 26px; }
  .stats-section { margin-top: 22px; text-align: left; }
  .stats-heading {
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  }
  .stats-heading-img { height: 26px; width: auto; object-fit: contain; }
  .winner-pose-img { display: block; max-height: 140px; width: auto; margin: 4px auto 6px; object-fit: contain; }
  .stats-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
    margin-bottom: 6px; font-size: 16px; background: rgba(238,234,223,0.03);
  }
  .stats-row .stats-name { font-weight: 600; }
  .stats-row .stats-value { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 15px; }
  #statsLeaveBtn { margin-top: 30px; }

  .host-settings { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
  .host-settings input[type=range] { width: 100%; accent-color: var(--ember); margin-bottom: 14px; }
  .host-settings .label { font-size: 17px; }
  .host-settings details {
    background: rgba(200,85,45,0.08); border: 1px solid var(--ember); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 4px;
  }
  .host-settings summary {
    cursor: pointer; font-weight: 700; font-size: 18px; color: var(--ember);
    list-style: none; display: flex; align-items: center; gap: 10px; padding: 2px 0;
  }
  .host-settings summary::-webkit-details-marker { display: none; }
  .host-settings summary::before {
    content: '▶'; font-size: 13px; color: var(--ember); transition: transform 0.2s ease; flex-shrink: 0;
  }
  .host-settings details[open] summary::before { transform: rotate(90deg); }
  .advanced-settings-body { margin-top: 16px; }
  .settings-help { color: var(--muted); font-size: 14px; margin: 4px 0 10px; line-height: 1.45; }
  .settings-section {
    background: rgba(238,234,223,0.04); border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
  }
  .settings-section:last-child { margin-bottom: 0; }
  .settings-section-title {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  }
  .settings-section-title img { width: 16px; height: 16px; object-fit: contain; }
  .settings-summary { color: var(--muted); font-size: 14px; margin-top: 18px; text-align: center; line-height: 1.5; }

  .countdown-overlay {
    position: fixed; inset: 0; height: 100dvh; z-index: 3000; background: rgba(18,20,15,0.97);
    display: none; align-items: center; justify-content: center; flex-direction: column;
  }
  /* Slightly smaller than before so mm:ss (e.g. "1:45") comfortably fits
     alongside the dramatic single-digit 3/2/1/GO! display in the final
     stretch — both use the same element. */
  @keyframes countdownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }
  .countdown-number {
    font-size: 84px; font-weight: 800; color: var(--paper); line-height: 1;
    transition: color 0.3s ease; animation: countdownPulse 1s ease-in-out infinite;
  }
  .countdown-number.phase-green { color: #4caf50; }
  .countdown-number.phase-yellow { color: #f2c94c; }
  .countdown-number.phase-red { color: #e74c3c; }
  .countdown-label { font-size: 14px; color: var(--muted); margin-top: 10px; text-transform: uppercase; letter-spacing: 0.1em; }

  .location-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 4000;
    background: #5c1f16; color: var(--paper); text-align: center;
    font-size: 13px; font-weight: 600; padding: 10px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  .geofence-banner { top: 40px; background: #6b4a1a; z-index: 3999; }
  .location-dropped-overlay {
    position: fixed; inset: 0; height: 100dvh; z-index: 4500; background: rgba(18,20,15,0.98);
    display: none; align-items: center; justify-content: center; padding: 24px;
  }

  .version-footer {
    position: fixed; bottom: 4px; left: 0; right: 0; z-index: 5000;
    text-align: center; font-size: 13px; color: rgba(238,234,223,0.35);
    pointer-events: none; letter-spacing: 0.03em;
  }

  .danger-flash-overlay {
    position: fixed; inset: 0; height: 100dvh; z-index: 900; pointer-events: none;
    background: #ff1a1a; opacity: 0; display: none;
  }
  .danger-flash-overlay.active {
    display: block;
    animation: dangerPulse 0.9s ease-in-out infinite;
  }
  @keyframes dangerPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.32; }
  }
  @keyframes campfireAttackPulse {
    0%, 100% { filter: drop-shadow(0 0 2px #ff1a1a); transform: scale(1); }
    50% { filter: drop-shadow(0 0 9px #ff1a1a) drop-shadow(0 0 4px #ff1a1a); transform: scale(1.18); }
  }
  .campfire-pulse-wrap { display: block; animation: campfireAttackPulse 0.8s ease-in-out infinite; }

  @keyframes captureRingExpand {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
  }
  .capture-marker-ring {
    position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
    border-radius: 50%; border: 3px solid #ff1a1a;
    animation: captureRingExpand 1.3s ease-out forwards;
  }

  /* Player marker "walking" animation — a subtle bob + tilt cycle, purely
     CSS so it needs no extra art. Stopped for a caught player (still body). */
  @keyframes playerWalkBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-3deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(3deg); }
  }
  .player-walk-img { animation: playerWalkBob 0.6s ease-in-out infinite; }
  .player-walk-img.facing-left { animation-name: playerWalkBobFlipped; }
  @keyframes playerWalkBobFlipped {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    25% { transform: scaleX(-1) translateY(-2px) rotate(3deg); }
    50% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    75% { transform: scaleX(-1) translateY(-2px) rotate(-3deg); }
  }