body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: radial-gradient(circle at 20% 0%, #202a3d 0%, #14181f 45%, #0d1015 100%);
  background-attachment: fixed;
  color: #eee;
  margin: 0;
  padding: 0;
}

.lobby-container {
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
}

h1 { font-size: 2.4em; margin-bottom: 0; }
.subtitle { color: #999; margin-top: 4px; }

.card {
  background: linear-gradient(160deg, #232a38, #1a1f29);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #444;
  background: #10141b;
  color: #eee;
  font-size: 1em;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(160deg, #e0503a, #b9331f);
  color: white;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
button:hover { background: linear-gradient(160deg, #f05a42, #c93b25); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
button:active { transform: translateY(0); }
button:disabled { background: #555; cursor: not-allowed; transform: none; box-shadow: none; }

.error { color: #ff6b6b; font-weight: bold; min-height: 1.2em; }

.pw-field { position: relative; }
.pw-field input { padding-right: 42px; }
.pw-toggle {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: auto; margin: 0; padding: 6px;
  background: none; border: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  color: #888;
  cursor: pointer;
}
.pw-toggle:hover { background: none; color: #eee; transform: translateY(-50%); }
.pw-toggle svg { width: 19px; height: 19px; }


/* --- Game page --- */
/* page-shell wraps the main game area + chat panel. In normal mode it's a
   single column (chat appears above the game content via flex `order`,
   matching where it used to sit in the DOM). In sidebar mode it becomes a
   real two-column flex row, so the chat reserves its own space instead of
   floating/overlapping on top of the game content. */
.page-shell {
  display: flex;
  flex-direction: column;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}
.page-shell .game-container { order: 2; max-width: none; margin: 20px 0; padding: 0; }
.page-shell .chat-panel { order: 1; }
.page-shell.sidebar-mode {
  flex-direction: row;
  align-items: flex-start;
  max-width: 1650px;
  gap: 20px;
}
.page-shell.sidebar-mode .game-container { flex: 1 1 auto; min-width: 0; }
.page-shell.sidebar-mode .chat-panel {
  flex: 0 0 300px;
  position: sticky;
  top: 20px;
  margin: 20px 0 0;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.page-shell.sidebar-mode .chat-panel .chat-log { flex: 1; height: auto; min-height: 200px; }
@media (max-width: 1100px) {
  /* Not enough side space on narrow/tablet screens - fall back to a
     normal single (chat-on-top) column even if sidebar mode is toggled on. */
  .page-shell.sidebar-mode { flex-direction: column; max-width: 1300px; }
  .page-shell.sidebar-mode .chat-panel {
    position: static; max-height: none; flex: none; margin: 10px 0 14px;
  }
  .page-shell.sidebar-mode .chat-panel .chat-log { height: 110px; min-height: 0; }
}

.game-container {
  max-width: 1300px;
  margin: 20px auto;
  padding: 0 16px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: linear-gradient(120deg, #232a38, #1a1f29);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.top-bar h2 { margin: 0; }
.back-to-lobby-btn {
  display: inline-block;
  width: auto;
  padding: 8px 14px;
  border-radius: 8px;
  color: white;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(160deg, #3a7bd5, #2856a3);
  transition: background 0.12s ease;
}
.back-to-lobby-btn:hover { background: linear-gradient(160deg, #4a8be5, #3866b3); }

.turn-banner {
  display: none;
  position: sticky;
  top: 8px;
  z-index: 40;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.05em;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: linear-gradient(120deg, #3a4049, #232a38);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.turn-banner.my-turn {
  background: linear-gradient(120deg, #ffd54f, #ffb300);
  color: #222;
  box-shadow: 0 0 16px rgba(255,213,79,0.6);
}

.turn-timer-display {
  display: none;
  font-size: 0.85em;
  font-weight: 600;
  color: #9fd0ff;
  background: rgba(16,20,27,0.6);
  border: 1px solid #2a3548;
  border-radius: 10px;
  padding: 2px 10px;
}
.turn-banner.my-turn .turn-timer-display { color: #6a4b00; background: rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.2); }
.turn-timer-display.urgent { color: #ff6b5c; animation: gauge-pulse 0.8s ease-in-out infinite; }

.dial {
  font-size: 1.3em;
  font-weight: bold;
}
.dial .exploded { color: #ff4d4d; }

.mission-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mission-select .card { flex: 1 1 220px; }
.member-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1b2028;
  border-radius: 6px;
  padding: 4px 10px;
}
.kick-btn {
  width: auto;
  margin: 0;
  padding: 3px 10px;
  font-size: 0.8em;
  background: #6b2222;
  border: 1px solid #a33;
}
.kick-btn:hover { background: #8a2c2c; }

.mission-editor {
  background: #10141b;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}
.mission-editor h4 { margin: 0 0 8px; color: #ccc; }
.mission-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}
.mission-editor-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
  color: #aaa;
}
.mission-editor-grid input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1b2230;
  color: #eee;
}
.mission-editor-grid textarea {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1b2230;
  color: #eee;
  font-family: inherit;
  resize: vertical;
}
.mission-editor-grid .full-row { grid-column: 1 / -1; }
.editor-label { display: block; font-size: 0.85em; color: #aaa; margin-bottom: 4px; }
.pair-input { display: flex; gap: 6px; align-items: center; }
.pair-input input { width: 50px; }
.blue-value-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bv-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  width: 40px;
  padding: 5px 0;
  justify-content: center;
  background: #1b2230;
  border: 1px solid #3a4356;
  border-radius: 6px;
  cursor: pointer;
  color: #ddd;
  font-size: 0.85em;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bv-check:has(input:checked) { background: #2a5d8f; border-color: #5aa6e0; color: #fff; }
.bv-check input { width: auto; padding: 0; }
.mission-editor-actions { display: flex; gap: 10px; margin-top: 10px; }
.mission-editor-actions button { margin-top: 0; }
.secondary-btn {
  background: linear-gradient(160deg, #3a7bd5, #2856a3) !important;
}
.secondary-btn:hover { background: linear-gradient(160deg, #4a8be5, #3866b3) !important; }
.danger-btn {
  background: linear-gradient(160deg, #555, #333) !important;
  margin-top: 8px;
}
.danger-btn:hover { background: linear-gradient(160deg, #d0453a, #a5271f) !important; }
.mission-editor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #b7bdc9;
  font-size: 0.8em;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.mission-editor-summary .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.mission-editor-summary .chip .ico svg, .mission-editor-summary .chip svg { width: 13px; height: 13px; }
.mission-editor-summary .chip-warning { background: rgba(255,138,101,0.18); color: #ff8a65; font-weight: 600; }
.mission-editor-summary.editor-warning { background: rgba(255,138,101,0.05); }

/* Modernized mission editor: grouped sections with icon headers instead of
   one big flat grid, plus small colored dots to mark red/yellow/blue. */
.editor-section {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(90,166,224,0.5);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  transition: border-color 0.15s ease;
}
.editor-section:hover { border-left-color: #5aa6e0; }
.editor-section h4 {
  margin: 0 0 12px;
  color: #eee;
  font-size: 0.95em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.wire-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.wire-dot-blue { background: #3a7bd5; }
.wire-dot-red { background: #d0453a; }
.wire-dot-yellow { background: #e0b83d; }
.mission-editor-grid label .wire-dot { margin-right: 4px; }

/* --- Equipment + mission galleries in the lobby --------------------------- */
.equipment-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.mission-gallery { display: block; }
.equipment-gallery .gallery-card { border-left: 3px solid rgba(224,166,61,0.4); }
.equipment-gallery .gallery-card:hover { border-left-color: #e0a63d; }
.equipment-gallery .gallery-card .gallery-icon { background: linear-gradient(145deg, rgba(224,166,61,0.25), rgba(224,166,61,0.05)); }
.gallery-package-title {
  margin: 18px 0 8px; color: #ffd83d; font-size: 1em;
  border-bottom: 1px solid rgba(255,216,61,0.25); padding-bottom: 4px;
}
.gallery-package-title:first-child { margin-top: 0; }
.gallery-package-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.gallery-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gallery-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.gallery-card h4 {
  margin: 0 0 6px;
  font-size: 0.98em;
  color: #eee;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gallery-card .gallery-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.gallery-card .gallery-icon svg { width: 16px; height: 16px; }
.gallery-card .gallery-badge {
  font-size: 0.72em;
  color: #9aa3b2;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: auto;
}
.gallery-card p { margin: 6px 0 0; font-size: 0.82em; color: #aab0bd; line-height: 1.45; }
.gallery-card .gallery-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.gallery-card .gallery-tag { font-size: 0.72em; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.05); color: #ccc; }
.gallery-card .gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.72em;
  color: #7d8494;
}
.gallery-card .gallery-creator { display: flex; align-items: center; gap: 5px; }
.gallery-card .gallery-creator .ico svg { width: 12px; height: 12px; }

/* --- Virtual table layout: your own stand on top, mission board in the
   center, opponents arranged left/right/bottom like seats around a table --- */
.table-layout {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(320px, 860px) minmax(160px, 1fr);
  grid-template-areas:
    "top    top    top"
    "left   board  right"
    "bottom bottom bottom";
  gap: 14px;
  align-items: start;
  margin: 14px 0;
}
.seat-top { grid-area: top; justify-self: center; width: 100%; max-width: 1180px; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.seat-bottom { grid-area: bottom; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mission-board-panel { grid-area: board; }
.seat-left, .seat-right { display: flex; flex-direction: column; gap: 14px; }

/* If nobody sits in the side seats (e.g. 3-player games, where both
   teammates now sit at the bottom instead), don't waste 2 empty gutters -
   collapse to a single centered column so the mission board gets the full
   width. */
.table-layout:has(.seat-left:empty):has(.seat-right:empty) {
  grid-template-columns: 1fr;
  grid-template-areas: "top" "board" "bottom";
}
@media (max-width: 860px) {
  .table-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "board" "left" "right" "bottom";
  }
  .board-body { flex-direction: column; align-items: stretch; }
  .bomb-gauge { flex-direction: row; justify-content: center; align-items: center; }
  /* Full width available when stacked - a horizontal scrolling row reads
     better here than a tall vertical column. */
  .player-stand.seat-vertical .stand-row {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    border-right: none;
    border-bottom: 6px solid #05070a;
    border-radius: 6px 6px 10px 10px;
    padding: 4px 4px 10px;
  }
  .player-stand.seat-vertical .wire { width: 32px; height: 58px; }
}

.player-stand {
  background: linear-gradient(160deg, #2b3446, #1f2632);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.player-stand.active-turn { outline: 2px solid #4caf50; box-shadow: 0 0 12px rgba(76,175,80,0.5); animation: active-turn-pulse 1.6s ease-in-out infinite; }
@keyframes active-turn-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(76,175,80,0.5); }
  50% { box-shadow: 0 0 20px rgba(76,175,80,0.9); }
}
.player-stand.is-you { outline: 2px solid #ffd54f; }
.player-stand h3 { margin: 0 0 8px; display: flex; justify-content: space-between; }

/* Players seated to the left/right of the table have their tile stands
   rotated into a vertical column - fits the narrow side seats much better
   than a wide horizontally-scrolling row, and reads like the physical
   stand turned 90° towards the table center. */
.player-stand.seat-vertical .stand-row {
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: visible;
  overflow-y: auto;
  max-height: 320px;
  border-bottom: none;
  border-right: 6px solid #05070a;
  border-radius: 6px 10px 10px 6px;
  padding: 4px 10px 4px 4px;
}
.player-stand.seat-vertical .wire { width: 100%; height: 30px; }

/* Compact layout for players with 2 tile stands sitting in a horizontal
   seat (top/bottom): instead of a full-width title above 2 stacked
   stand-rows, put the name as a slim vertical label on the side and stack
   the 2 stand-rows underneath each other next to it - saves the height a
   full-width title would otherwise take, while keeping stands stacked. */
.multi-stand-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}
.stand-name-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 0.95em;
  padding: 8px 4px;
  border-radius: 8px;
  background: linear-gradient(160deg, #323d52, #232b3a);
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  cursor: help;
}
.multi-stands-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
}
.stand-block { min-width: 0; }
.stand-block .stand-label { margin-bottom: 2px; font-size: 0.75em; }
/* Slightly shorter wire tiles + tighter row padding when a player has 2
   stacked stands, so the combined card doesn't get too tall. */
.multi-compact .stand-row { margin-bottom: 4px; padding: 8px 6px 10px; }
.multi-compact .wire { height: 48px; }

.stand-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  margin-bottom: 10px;
  overflow-x: auto;
  padding: 12px 6px 14px;
  background: #171d28;
  border-radius: 6px 6px 10px 10px;
  border-bottom: 6px solid #05070a; /* mimics the black physical tile-stand bar */
}

.wire {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 60px;
  border-radius: 5px 5px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.05em;
  cursor: default;
  border: 2px solid transparent;
  transition: transform 0.15s ease;
}
.wire.hidden { background: linear-gradient(160deg, #4a5468, #333c4c); color: #c3cbdb; border-color: #5a6478; }
.wire.blue { background: linear-gradient(160deg, #4a90e0, #2662bb); color: white; }
.wire.red { background: linear-gradient(160deg, #ec5c4c, #b1362a); color: white; }
.wire.yellow { background: linear-gradient(160deg, #ffd83d, #d9a90f); color: #221900; }
/* Red/yellow show their decimal sorting number (e.g. 6.5 red vs 6.1
   yellow) instead of a plain letter, so the same base number can appear
   in both colors without being ambiguous - color of the card still
   disambiguates which pile it belongs to, this is just a readable label. */
.wire.red, .wire.yellow { font-size: 0.95em; }
/* Cut wires stay fully legible (no more faint/struck-through text) - a
   diagonal "done" ribbon in the corner communicates the state instead. */
.wire.cut { filter: saturate(0.55) brightness(0.75); }
.wire.cut::after {
  content: '✂';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #05070a;
  border: 2px solid #9aa5b8;
  color: #fff;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.wire.selectable { cursor: pointer; border-color: #4caf50; }
.wire.selectable:hover { transform: translateY(-2px); }
.wire.selected { border-color: #ffd54f; box-shadow: 0 0 8px #ffd54f; }
.wire.label-eq, .wire.label-neq { border-width: 2px; }
.wire.label-eq { border-color: #d9b400; }   /* "=" token is a yellow square in the physical game */
.wire.label-neq { border-color: #2b6ecb; border-style: dashed; } /* "≠" token is a blue square in the physical game */
.wire.label-eq::before, .wire.label-neq::before {
  content: '=';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #05070a;
  border: 2px solid #d9b400;
  color: #ffd54f;
  font-size: 1.15em;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.8);
}
.wire.label-neq::before { content: '≠'; color: #7fb8ff; border-color: #2b6ecb; }
/* Wire whose true color was revealed to everyone (mistake, hint, equipment
   card) but isn't cut yet - a glowing gold ring makes this stand out from
   plain "?" tiles, both on your own board and on teammates' boards, so
   nobody misses that this specific wire is now publicly known. */
.wire.info-revealed { box-shadow: 0 0 0 2px #ffd54f, 0 0 8px rgba(255,213,79,0.7); }
.wire.info-revealed::after {
  content: '👁';
  position: absolute;
  top: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  font-size: 0.95em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reveal animation: briefly flips/flashes a wire tile the moment its true
   value becomes known (cut, hint, mistake, equipment reveal), so the team
   can visually follow what just happened instead of the tile silently
   changing. Triggered by JS toggling this class on for ~500ms. */
.wire.just-revealed { animation: wire-reveal 0.5s ease-out; }
@keyframes wire-reveal {
  0% { transform: rotateY(0deg) scale(1); }
  40% { transform: rotateY(90deg) scale(1.15); filter: brightness(2); }
  100% { transform: rotateY(0deg) scale(1); }
}

/* Cut animation: a quick "snip" wiggle + bright flash the instant a wire
   gets cut, so the whole team can visually follow what just happened
   instead of the tile silently dimming. */
.wire.just-cut { animation: wire-cut-snip 0.5s ease-out; }
@keyframes wire-cut-snip {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  20% { transform: scale(1.18, 0.82) rotate(-8deg); filter: brightness(2.4); }
  45% { transform: scale(0.88, 1.08) rotate(5deg); filter: brightness(1.7) saturate(0.55); }
  70% { transform: scale(1.05, 0.97) rotate(-2deg); filter: brightness(1.2) saturate(0.55); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(0.75) saturate(0.55); }
}

.actions-bar {
  background: linear-gradient(160deg, #232a38, #1a1f29);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.actions-bar h3 { margin-top: 0; }
.hint-text { color: #999; font-size: 0.85em; margin: 0 0 10px; }
.wire-choice-status {
  background: #3a3410;
  border: 1px solid #e0b83d;
  color: #f0d878;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9em;
}
/* Floating instead of inline: once the player has picked a value/targets,
   the confirm bar sticks to the bottom of the viewport so Solo/Dual Cut
   can be confirmed immediately without scrolling back up to find it. */
.cut-status {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  background: linear-gradient(160deg, #232a38, #171c26);
  border: 2px solid #ffd54f;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 0.9em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 14px rgba(255,213,79,0.35);
  max-width: calc(100vw - 24px);
  animation: cut-status-in 0.2s ease-out;
}
@keyframes cut-status-in {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.cut-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cut-status-actions button { width: auto; padding: 8px 14px; margin-top: 0; }
@media (max-width: 700px) {
  .cut-status { flex-direction: column; bottom: 8px; left: 8px; right: 8px; transform: none; max-width: none; }
  @keyframes cut-status-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}
.btn-primary, .btn-secondary {
  width: auto;
  padding: 8px 16px;
  border-radius: 8px;
}
.btn-primary { background: linear-gradient(160deg, #5cc760, #3d8b40); }
.btn-primary:hover { background: linear-gradient(160deg, #6bd870, #46a04a); }
.btn-secondary { background: linear-gradient(160deg, #565f6e, #3a4049); }
.btn-secondary:hover { background: linear-gradient(160deg, #656f80, #454b56); }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions-row input, .actions-row select {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #10141b;
  color: #eee;
}
.actions-row button {
  width: auto;
  padding: 8px 16px;
}

.equipment-list { display: flex; gap: 10px; flex-wrap: wrap; }
.equipment-card {
  background: #10141b;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85em;
  max-width: 220px;
}
.equipment-card.unlocked { border-color: #4caf50; }
.equipment-card.used { opacity: 0.4; }
.equipment-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.equipment-card-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #9ecbff; }
.equipment-card-icon svg { width: 18px; height: 18px; }
.equipment-card.unlocked .equipment-card-icon { color: #7fd88a; }
.equipment-card-desc { color: #bbb; }
.equipment-card button { margin-top: 6px; }

.detector-choice { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.detector-card {
  background: #10141b;
  border: 2px solid #444;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85em;
  cursor: pointer;
  text-align: center;
  flex: 0 0 auto;
}
.detector-card small { color: #999; }
.detector-card:hover { border-color: #777; }
.detector-card.selected { border-color: #ffd54f; box-shadow: 0 0 6px #ffd54f; }

.stand-label { color: #999; font-size: 0.75em; margin: 4px 0 2px; }

.board-track {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin: 4px 0 8px;
}
.board-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* Reserved above every number tile so the "solved" checkmark has its own
   row and never overlaps/obscures the number itself (previously an
   overlaid badge could clip two-digit numbers like 10-12). Fixed height
   keeps every column aligned regardless of whether it shows a check. */
.board-check-row {
  height: 13px;
  line-height: 13px;
  font-size: 0.75em;
  color: #6fd873;
  text-shadow: 0 0 4px rgba(76,175,80,0.8);
  animation: chip-pop 0.25s ease-out;
}
.board-gap-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 13px;
  height: 30px; /* aligned with the blue tile height, between two numbers */
  margin-top: 15px; /* offset by the check-row height+gap above the tiles */
}
.board-tile {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.88em;
  border: 2px solid #444;
  background: linear-gradient(160deg, #1b2230, #10141b);
  color: #eee;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.board-tile.blue { border-color: #2b6ecb; }
.board-tile.inactive { opacity: 0.3; border-color: #333; }
.board-tile.done { border-color: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,0.6); }
@keyframes chip-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.progress-dots { display: flex; gap: 2px; }
.progress-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #555;
}
.progress-dots .dot.filled { background: #2b6ecb; border-color: #5b9bea; }

.marker {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.marker.red { background: #d9432c; box-shadow: 0 0 4px rgba(217,67,44,0.8); }
.marker.yellow { background: #d9b400; box-shadow: 0 0 4px rgba(217,180,0,0.8); }
.marker.marker-off {
  background: #3a3a3a;
  box-shadow: none;
  opacity: 0.35;
}

.board-legend { display: flex; gap: 16px; font-size: 0.8em; color: #999; margin-top: 4px; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.legend-dot.red { background: #d9432c; }
.legend-dot.yellow { background: #d9b400; }
#board-wire-counts { color: #ccc; }

.mission-board-panel {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}
.mission-board-panel h3 { margin-bottom: 6px; }
.board-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.board-main { flex: 1; min-width: 0; overflow-x: auto; }

.bomb-gauge {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Compact circular "gauge chart" for the detonator - a conic-gradient donut
   that fills clockwise as the dial advances, much shorter than a vertical
   tube while staying easy to read at a glance. */
.gauge-radial {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--gauge-color, #4caf50) calc(var(--pct, 0) * 1%), #10141b 0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.45), inset 0 0 0 4px #1f2530;
  transition: background 0.4s ease;
}
.gauge-radial.critical { animation: gauge-pulse 0.8s infinite alternate; }
@keyframes gauge-pulse {
  from { box-shadow: 0 0 10px rgba(183,28,28,0.4), inset 0 0 0 4px #1f2530; }
  to { box-shadow: 0 0 22px rgba(255,87,34,0.9), inset 0 0 0 4px #1f2530; }
}
.gauge-radial-inner {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: #10141b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.gauge-icon { font-size: 1.1em; line-height: 1; }
.gauge-value { font-size: 0.72em; font-weight: bold; color: #eee; }
.gauge-label { font-size: 0.68em; color: #999; text-align: center; line-height: 1.15; }

.log-box {
  background: #10141b;
  border-radius: 8px;
  padding: 10px;
  height: 160px;
  overflow-y: auto;
  font-size: 0.85em;
  color: #bbb;
}

.banner {
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 14px;
}
.banner.won { background: #2e7d32; }
.banner.lost { background: #b22222; }

/* --- Toast notifications: "your turn" + "what just happened" popups --- */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}
.toast {
  background: #1f2530;
  border-left: 4px solid #4caf50;
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  font-size: 0.9em;
  color: #eee;
  animation: toast-in 0.25s ease-out, toast-out 0.4s ease-in 3.1s forwards;
}
.toast.turn { border-left-color: #ffd54f; font-weight: bold; }
.toast.action { border-left-color: #5b9bea; }
@keyframes toast-in {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(30px); }
}

/* --- Bomb explosion animation, triggered once when the mission fails --- */
#explosion-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #fff8e1 0%, #ffb300 25%, #ff5722 45%, #b71c1c 65%, transparent 78%);
}
#explosion-overlay.show { animation: explosion-flash 1.1s ease-out; }
@keyframes explosion-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
.boom-emoji {
  font-size: 8em;
  filter: drop-shadow(0 0 30px rgba(255,87,34,0.9));
  animation: boom-pop 1.1s ease-out;
}
@keyframes boom-pop {
  0% { transform: scale(0.2); opacity: 0; }
  25% { transform: scale(1.5); opacity: 1; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.shock-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.85);
  animation: shock-expand 0.9s ease-out;
}
@keyframes shock-expand {
  0% { width: 40px; height: 40px; opacity: 1; }
  100% { width: 1400px; height: 1400px; opacity: 0; }
}
.shake { animation: shake 0.5s; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-6px, -3px); }
  80% { transform: translate(6px, 4px); }
}

/* --- Confetti burst, triggered once when the mission is won --- */
#confetti-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  opacity: 0.95;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
}

/* --- More visible turn indicator in the top bar --- */
.dial.my-turn { color: #ffd54f; text-shadow: 0 0 8px rgba(255,213,79,0.6); }

/* --- Persistent chat, visible in both the lobby and the game view --- */
.chat-panel {
  background: linear-gradient(160deg, #232a38, #1a1f29);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 14px;
}
.chat-panel h3 {
  margin: 0 0 6px;
  font-size: 0.95em;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-toggle-btn {
  width: auto;
  padding: 2px 8px;
  font-size: 0.85em;
  background: #10141b;
  box-shadow: none;
}
.chat-toggle-btn:hover { background: #262e3c; transform: none; box-shadow: none; }
.chat-log {
  background: #10141b;
  border-radius: 6px;
  padding: 8px 10px;
  height: 110px;
  overflow-y: auto;
  font-size: 0.88em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-msg { line-height: 1.35; word-break: break-word; }
.chat-msg .chat-name { font-weight: bold; margin-right: 4px; }
.chat-msg.chat-system {
  color: #8fb3d9;
  font-size: 0.88em;
  font-family: 'Consolas', 'Menlo', monospace;
  background: rgba(143,179,217,0.07);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 2px 0;
}
.chat-msg.chat-cmd-echo { color: #777; background: none; padding: 2px 0; }
.chat-msg.chat-room-announce {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #a9d98f;
  background: rgba(76,175,80,0.09);
}
.chat-room-join-btn {
  width: auto;
  margin: 0;
  padding: 3px 12px;
  font-size: 0.85em;
  background: #2e7d32;
  border: 1px solid #4caf50;
}
.chat-room-join-btn:hover { background: #388e3c; }

/* --- Admin panel + moderation --------------------------------------------- */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72em;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, #e0b83d, #a5811f);
  color: #1a1a1a;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
}
.admin-badge svg { width: 12px; height: 12px; }
.admin-badge-locked { background: linear-gradient(160deg, #888, #555); color: #fff; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 10px 12px;
}
.admin-list-name { font-weight: 600; color: #eee; flex: 1 1 auto; }
.admin-list-meta { font-size: 0.8em; color: #9aa3b2; }
.admin-list-actions { display: flex; gap: 6px; }
.admin-list-actions button { margin-top: 0; padding: 6px 10px; font-size: 0.8em; display: inline-flex; align-items: center; gap: 4px; }
.admin-list-actions button svg { width: 13px; height: 13px; }
.chat-msg-delete {
  background: none;
  border: none;
  color: #7d8494;
  cursor: pointer;
  padding: 0 0 0 6px;
  vertical-align: middle;
  opacity: 0.6;
}
.chat-msg-delete:hover { opacity: 1; color: #d0453a; }
.chat-msg-delete svg { width: 12px; height: 12px; }
.chat-input-row { display: flex; gap: 8px; margin-top: 8px; }
.chat-input-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #10141b;
  color: #eee;
}

/* --- Landing page: modern hero + glass feature cards + chat sidebar --- */
.landing-body { position: relative; overflow-x: hidden; }
.private-banner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  max-width: 1180px; margin: 14px auto 0; padding: 10px 16px;
  background: rgba(255, 216, 61, 0.1);
  border: 1px solid rgba(255, 216, 61, 0.35);
  border-radius: 10px;
  color: #ffe9a8;
  font-size: 0.88em;
}
.private-banner .card-icon { flex: 0 0 auto; color: #ffd83d; }
.private-banner span:not(.card-icon) { flex: 1 1 auto; }
.private-banner button {
  width: auto; margin: 0; padding: 2px 8px;
  background: none; border: none; box-shadow: none;
  color: #ffe9a8; font-size: 1.3em; line-height: 1; cursor: pointer;
}
.private-banner button:hover { background: none; color: #fff; transform: none; }

.landing-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  animation: blob-float 18s ease-in-out infinite;
}
.blob-1 { width: 480px; height: 480px; background: #e0503a; top: -160px; left: -120px; }
.blob-2 { width: 420px; height: 420px; background: #3a6ea5; top: 200px; right: -140px; animation-delay: -6s; }
.blob-3 { width: 380px; height: 380px; background: #ffd83d; bottom: -180px; left: 30%; animation-delay: -12s; opacity: 0.18; }
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.08); }
}

.lobby-shell {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  max-width: 1180px;
  margin: 40px auto;
  padding: 0 20px 40px;
  align-items: flex-start;
}
.lobby-main { flex: 1 1 480px; max-width: 560px; text-align: center; }

.gate-shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-card {
  max-width: 380px; width: 100%;
  text-align: center;
  padding: 36px 30px;
}
.gate-card h1 { font-size: 2em; margin: 4px 0 6px; }
.gate-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  color: #ffd83d;
}
.gate-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.gate-form input { text-align: center; font-size: 1.05em; }


.hero { margin-bottom: 28px; }
.hero-badge {
  display: inline-block;
  background: linear-gradient(120deg, rgba(224,80,58,0.18), rgba(58,110,165,0.18));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85em;
  color: #ddd;
  margin-bottom: 14px;
  backdrop-filter: blur(6px);
}
.hero h1 {
  font-size: 3em;
  margin: 0;
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, #fff, #ffd83d 60%, #e0503a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-accent { -webkit-text-fill-color: initial; color: #fff; opacity: 0.85; font-weight: 400; }
.hero .subtitle { max-width: 520px; margin: 10px auto 0; font-size: 1.05em; line-height: 1.5; }

.glass-card {
  background: linear-gradient(160deg, rgba(35,42,56,0.85), rgba(26,31,41,0.85));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.glass-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.16); box-shadow: 0 12px 34px rgba(0,0,0,0.55); }

.menu-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.menu-btn {
  width: auto;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #aab0bd;
  box-shadow: none;
  font-size: 0.92em;
  padding: 10px 8px;
}
.menu-btn .card-icon { width: 26px; height: 26px; font-size: 1em; background: transparent; }
.menu-btn:hover { transform: none; background: rgba(255,255,255,0.08); }
.menu-btn.active {
  background: linear-gradient(160deg, #e0503a, #b9331f);
  color: #fff;
  border-color: transparent;
}

.menu-panel-host { padding: 24px; text-align: left; min-height: 340px; }
.menu-panel h2 {
  margin: 0 0 10px;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  font-size: 1.1em;
}
.card-desc { color: #9aa3b2; font-size: 0.88em; margin: 0 0 12px; line-height: 1.4; }

/* Inline SVG icon set (see static/js/icons.js). `.ico` sizes/aligns the
   <svg>; the SVGs themselves use stroke/fill="currentColor" so they pick
   up whatever text color surrounds them. */
.ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ico svg { width: 1em; height: 1em; display: block; }
.card-icon svg { width: 18px; height: 18px; }
.menu-btn .card-icon svg { width: 15px; height: 15px; }

.login-gate {
  text-align: center;
  padding: 30px 10px;
  color: #bbb;
}
.login-gate p { font-size: 1.05em; margin-bottom: 14px; }
.login-gate button { width: auto; padding: 8px 20px; }

.lobby-chat-sidebar {
  flex: 1 1 420px;
  position: sticky;
  top: 20px;
  padding: 18px;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.lobby-chat-sidebar h3 {
  margin: 0 0 12px;
  color: #eee;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05em;
  flex: 0 0 auto;
}
.online-count {
  margin-left: auto;
  font-size: 0.7em;
  font-weight: normal;
  color: #7cd992;
  background: rgba(124,217,146,0.12);
  border: 1px solid rgba(124,217,146,0.3);
  border-radius: 999px;
  padding: 3px 10px;
}
.online-count::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7cd992;
  margin-right: 5px;
}

.lobby-chat-sidebar .chat-log { flex: 1 1 auto; height: auto; min-height: 0; background: rgba(16,20,27,0.7); }
.lobby-chat-sidebar .chat-input-row { flex: 0 0 auto; }
.lobby-chat-sidebar .chat-input-row button {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 1.1em;
}
@media (max-width: 860px) {
  .lobby-shell { flex-direction: column; }
  .lobby-chat-sidebar { position: static; width: 100%; box-sizing: border-box; flex: none; height: auto; max-height: none; }
  .lobby-chat-sidebar .chat-log { height: 260px; flex: none; }
  .hero h1 { font-size: 2.2em; }
  .menu-nav { flex-wrap: wrap; }
  .menu-btn { flex: 1 1 40%; }
}

/* --- Account card: auth tabs + profile --- */
.auth-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.auth-tab-btn {
  flex: 1;
  width: auto;
  background: #10141b;
  color: #999;
  box-shadow: none;
}
.auth-tab-btn.active { background: linear-gradient(160deg, #4a90e0, #2662bb); color: #fff; }
.auth-tab-btn:hover { transform: none; }
#account-card { text-align: left; }
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
  font-size: 0.95em;
}
.profile-stats span {
  background: #10141b;
  border-radius: 6px;
  padding: 6px 10px;
}
.profile-stats span strong { color: #ffd83d; font-size: 1.05em; margin-right: 4px; }
.mission-stat-row {
  font-size: 0.85em;
  color: #bbb;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mission-stat-row.completed { color: #eee; }
.mission-stat-check { flex: 0 0 16px; color: #7cd992; display: flex; }
.mission-stat-check .ico svg { width: 14px; height: 14px; }
.mission-stat-name { flex: 1 1 auto; }
.mission-stat-count { flex: 0 0 auto; color: #888; font-variant-numeric: tabular-nums; }
.mission-stat-pkg {
  margin: 10px 0 2px; font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.04em; color: #777;
}
.mission-stat-pkg:first-child { margin-top: 4px; }
.change-pw-details {
  margin: 14px 0;
  background: #10141b;
  border-radius: 8px;
  padding: 8px 12px;
}
.change-pw-details summary { cursor: pointer; color: #ccc; }
.change-pw-details input { margin: 8px 0; }