/* base.css — reset, layout, shared components */
/* Resets default browser spacing and keeps sizing predictable across all elements. */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Defines shared warm-toned theme variables used by the shell UI. */
:root {
  --paper: #e6d2b1;
  --ink: #24140e;
}

/* Makes the root page fill the full viewport so the game shell can stretch edge to edge. */
html,
body {
  width: 100%;
  height: 100%;
}

/* Paints the overall page backdrop and locks the browser page itself from scrolling or text selection. */
body {
  background:
    radial-gradient(circle at top, rgba(135, 88, 51, 0.45), transparent 34%),
    radial-gradient(circle at bottom, rgba(39, 15, 16, 0.78), transparent 42%),
    linear-gradient(180deg, #41261d 0%, #160d0b 100%);
  font-family: Verdana, Geneva, sans-serif;
  overflow: hidden;
  user-select: none;
  color: #fff7ef;
}

/* Holds the canvas and all overlays as the full-screen game container. */
#gc {
  position: relative;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background:
    linear-gradient(180deg, rgba(25, 15, 12, 0.05), rgba(25, 15, 12, 0.45)),
    #120b09;
  overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255, 243, 214, 0.08);
}
/* Expands the gameplay canvas to the full size of its container. */
#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Overlay screens (lobby, discussion, voting, end) */
/* Centers overlay screens and dims the game behind lobby, meeting, and end states. */
.screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at center, rgba(160, 123, 79, 0.14), transparent 36%),
    rgba(16, 8, 6, 0.9);
  color: white; z-index: 10;
}
/* Hides elements regardless of their normal display mode. */
.hidden { display: none !important; }

/* Typography */
/* Styles the main game title with a large glowing heading treatment. */
h1 {
  font-size: 52px;
  color: #fff0d6;
  text-shadow: 0 4px 0 rgba(42, 19, 8, 0.9), 0 0 26px rgba(255, 215, 153, 0.16);
  margin-bottom: 6px;
  letter-spacing: 3px;
}
/* Styles secondary headings used across overlays and panels. */
h2 { font-size: 28px; color: #ffe1ba; margin-bottom: 15px; }

/* Shared button */
/* Gives shared buttons the warm beveled treatment used across overlays. */
.btn {
  padding: 11px 28px; font-size: 17px; font-family: inherit;
  background: linear-gradient(180deg, #68422d 0%, #4a2d20 100%);
  color: #fff6e7; border: 2px solid #c79f6f;
  border-radius: 12px; cursor: pointer; margin: 6px; transition: all 0.15s;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}
/* Brightens and lifts shared buttons on hover. */
.btn:hover { background: linear-gradient(180deg, #7b5038 0%, #563425 100%); transform: translateY(-1px); }
/* Recolors shared buttons for dangerous or destructive actions. */
.btn.danger { background: linear-gradient(180deg, #9f4133 0%, #78271f 100%); border-color: #e58d73; }
/* Adds the hover state for danger-styled buttons. */
.btn.danger:hover { background: linear-gradient(180deg, #b1493a 0%, #8c2d23 100%); }

/* Anchors network feedback near the top-center without blocking gameplay. */
.network-status {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 236, 205, 0.18);
  background: rgba(28, 18, 13, 0.84);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #fff4df;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

/* Distinguishes offline mode from normal informational notices. */
.network-status-offline {
  background: rgba(92, 45, 16, 0.9);
  border-color: rgba(255, 202, 133, 0.28);
  color: #fff1d6;
}

/* Highlights successful offline readiness after the service worker caches the shell. */
.network-status-ready {
  background: rgba(19, 63, 33, 0.88);
  border-color: rgba(171, 255, 190, 0.24);
  color: #effff2;
}

/* Blocks gameplay with a lightweight confirmation layer above the HUD. */
#pauseOverlay {
  position: absolute;
  inset: 0;
  z-index: 17;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(115, 136, 174, 0.18), transparent 34%),
    rgba(11, 8, 12, 0.44);
  pointer-events: auto;
}

/* Styles the pause state as a compact floating status card. */
#pauseOverlayPanel {
  width: min(100%, 360px);
  padding: 22px 24px 18px;
  border-radius: 20px;
  border: 1px solid rgba(209, 228, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(35, 38, 58, 0.94) 0%, rgba(17, 18, 31, 0.98) 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32);
  text-align: center;
}

/* Gives the pause title a cool highlight distinct from danger overlays. */
#pauseOverlayTitle {
  margin-bottom: 10px;
  color: #e8f1ff;
  letter-spacing: 0.04em;
}

/* Keeps the pause instructions readable over the dimmed playfield. */
#pauseOverlayMessage {
  color: #d4deef;
  font-size: 15px;
  line-height: 1.45;
}

/* Lays out the pause actions with the default path first and most prominent. */
#pauseOverlayActions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: nowrap;
}

/* Keeps the pause actions balanced in a single horizontal row. */
#pauseOverlayActions .btn {
  min-width: 132px;
}

/* Brightens the resume action so it reads as the preferred way back into play. */
.pause-overlay-primary {
  background: linear-gradient(180deg, #56a86e 0%, #2d6f41 100%);
  border-color: #d1f2db;
  box-shadow:
    0 0 0 2px rgba(117, 209, 145, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

/* Keeps keyboard focus visibly anchored on the preferred paused-state action. */
.pause-overlay-primary:focus-visible {
  outline: 3px solid rgba(220, 255, 229, 0.96);
  outline-offset: 3px;
}

/* Blocks gameplay with a death follow-up layer until the player picks the next step. */
#deathPopup {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(149, 77, 67, 0.18), transparent 34%),
    rgba(14, 8, 8, 0.74);
}

/* Styles the death popup as a danger-tinted modal card above the playfield. */
#deathPopupPanel {
  width: min(100%, 420px);
  padding: 24px 24px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 217, 206, 0.22);
  background:
    linear-gradient(180deg, rgba(67, 31, 29, 0.96) 0%, rgba(27, 12, 12, 0.98) 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38);
  text-align: center;
}

/* Keeps the death title prominent without competing with the button actions. */
#deathPopupTitle {
  margin-bottom: 10px;
  color: #ffe8e0;
  letter-spacing: 0.04em;
}

/* Explains the player's available post-death choices in compact copy. */
#deathPopupMessage {
  color: #f2d8d0;
  font-size: 15px;
  line-height: 1.45;
}

/* Lays out the post-death actions in a single clear row. */
#deathPopupActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* Keeps the spectate action visually preferred over the exit path. */
.death-popup-primary {
  background: linear-gradient(180deg, #6d8dc5 0%, #375285 100%);
  border-color: #d7e6ff;
  box-shadow:
    0 0 0 2px rgba(124, 162, 235, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

/* Maintains a clear focus ring on the default post-death option. */
.death-popup-primary:focus-visible {
  outline: 3px solid rgba(229, 240, 255, 0.96);
  outline-offset: 3px;
}

/* Blocks gameplay with a lightweight confirmation layer above the HUD. */
#exitGamePopup {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(152, 90, 68, 0.14), transparent 34%),
    rgba(12, 7, 6, 0.78);
}

/* Styles the exit confirmation panel as a compact modal card. */
#exitGamePopupPanel {
  width: min(100%, 420px);
  padding: 24px 24px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 223, 198, 0.18);
  background:
    linear-gradient(180deg, rgba(56, 31, 24, 0.96) 0%, rgba(23, 12, 10, 0.98) 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.36);
  text-align: center;
}

/* Spaces the confirmation copy below the title. */
#exitGameMessage {
  margin-top: 10px;
  color: #f2ddcf;
  font-size: 15px;
  line-height: 1.45;
}

/* Lays out the confirmation actions in a centered row. */
#exitGameActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Highlights cancel as the safe default action on the exit confirmation popup. */
.exit-game-cancel-btn {
  background: linear-gradient(180deg, #56a86e 0%, #2d6f41 100%);
  border-color: #d1f2db;
  box-shadow:
    0 0 0 2px rgba(117, 209, 145, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.24);
}

/* Keeps keyboard focus obvious on the safe exit-popup action. */
.exit-game-cancel-btn:focus-visible {
  outline: 3px solid rgba(220, 255, 229, 0.96);
  outline-offset: 3px;
}