/* ===== QUBIT — Blue & Yellow theme ===== */

/* ===== NAV BAR (site-wide green re-themed to Qubit's blue/yellow) =====
   This file loads after nav.css/main.css, so same-specificity selectors here
   win the cascade — scoped to this page only, the shared files (and every
   other game) are untouched. */
header {
  background: #0a1528;
  border-bottom: 3px solid #facc15;
  box-shadow: 0 2px 16px rgba(37,99,235,0.3);
}
.logo-text { color: #60a5fa; }
.logo-text-accent { color: #facc15; }
.logo-sub { color: #93c5fd; }

nav a { color: #93c5fd; }
nav a:hover { background: rgba(37,99,235,0.15); color: #facc15; }
nav a.active { color: #facc15; background: rgba(37,99,235,0.15); }
nav a.nav-cta-buy { background: #2563eb; color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.4); }
nav a.nav-cta-buy:hover { background: #1d4ed8; color: #facc15; }

.nav-dropdown-trigger { color: #93c5fd; }
.nav-dropdown-trigger.open { background: rgba(37,99,235,0.15); color: #facc15; }
.nav-dropdown-menu {
  background: #0d1a35;
  border: 1.5px solid rgba(37,99,235,0.3);
  border-top: 2px solid rgba(37,99,235,0.2);
  border-bottom: 3px solid #facc15;
  box-shadow: 0 8px 24px rgba(37,99,235,0.3);
}
.nav-dropdown-menu a { color: #93c5fd; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: rgba(37,99,235,0.15); color: #facc15; }
.nav-dropdown-menu a.nav-all-products { background: rgba(250,204,21,0.18); }

.nav-sub-trigger { color: #93c5fd; }
.nav-sub-trigger:hover, .nav-sub-dropdown:hover .nav-sub-trigger { background: rgba(37,99,235,0.15); color: #facc15; }

.nav-hamburger:hover { background: rgba(37,99,235,0.15); }
.nav-hamburger span { background: #93c5fd; }

@media (max-width: 768px) {
  nav { border-top: 1px solid rgba(37,99,235,0.25); }
  .nav-dropdown-menu { border-left: 3px solid #facc15; }
  .nav-sub-menu { border-left: 3px solid rgba(37,99,235,0.25); }
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: #ffffff;
  color: #1e293b;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== SCREENS ===== */
.screen { display: none; }
body.rejoin-pending .screen.active { visibility: hidden; }

/* ===== LOBBY ===== */
#lobby {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 0 20px 40px;
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, rgba(37,99,235,0.12) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 800px 500px at 100% 120px, rgba(250,204,21,0.14) 0%, rgba(255,255,255,0) 70%),
    #ffffff url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%232563eb' stroke-opacity='0.10' stroke-width='1' fill='none'%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cline x1='22' y1='40' x2='0' y2='40'/%3E%3Cline x1='58' y1='40' x2='80' y2='40'/%3E%3Cline x1='40' y1='22' x2='40' y2='0'/%3E%3Cline x1='40' y1='58' x2='40' y2='80'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: auto, auto, 80px 80px;
}
#lobby h1 {
  font-size: 32px;
  color: #1d4ed8;
  letter-spacing: 1.5px;
  font-weight: 800;
  font-family: 'Share Tech Mono', monospace;
  line-height: 1;
  margin: 0;
  width: fit-content;
  white-space: nowrap;
  padding-bottom: 6px;
  border-bottom: 5px solid #facc15;
}
#lobby .subtitle { font-size: 15px; color: #475569; margin: 0; line-height: 1.5; }
.lobby-meta { gap: 14px; font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
.lobby-meta-item { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.lobby-section-head::before, .lobby-section-head::after { background: linear-gradient(to right, transparent, rgba(37,99,235,0.35), transparent); }
.lobby-section-label { color: #1d4ed8; }
.lo-strip { border: 1px solid #dbeafe; background: #ffffff; box-shadow: 0 2px 14px rgba(37,99,235,0.08); }
.lo-item { background: #ffffff; border-right: 1px solid #eef2fb; }
.lo-item-icon { background: #eff6ff; border: 1px solid #bfdbfe; }
.lo-item-title { color: #1e293b; }
.lo-item-desc { color: #64748b; }
.lobby-card { background: #ffffff; border: 1px solid #dbeafe; box-shadow: 0 2px 14px rgba(37,99,235,0.10); }
.lobby-card h3 { color: #1d4ed8; margin-bottom: 14px; }
.lobby-card.lobby-card-focus { border-color: #2563eb; }
.lobby-card.lobby-card-focus h3 { color: #1e40af; }
.color-btn.selected { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,0.3); }
.player-role-box { border-color: #cbd5e1; }
.player-role-box.active { border-color: #2563eb; }
/* Observer role button has no selected-state colour of its own by default —
   give it the same blue/yellow accent as everything else once picked. */
.observer-role-btn.selected {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.3), inset 0 0 12px rgba(37,99,235,0.08);
}
.observer-role-btn.selected .obs-role-sub { color: #2563eb; }
.observer-role-btn.selected .obs-role-check {
  border-color: #facc15;
  background: #facc15;
  box-shadow: 0 0 8px rgba(250,204,21,0.5);
}
.btn-create { background: #2563eb; color: #fff; }
.btn-join { background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; }
.btn-join:hover:not(:disabled) { background: #e2e8f0; }
.lobby-input { background: #f8fafc; border-color: #bfdbfe; color: #1e293b; font-family: 'Share Tech Mono', monospace; }
.lobby-input::placeholder { color: #94a3b8; }
.lobby-tutorial-cta { display: inline-flex; flex-direction: row; align-items: center; padding: 10px 20px; border-radius: 10px; background: #2563eb; color: #fff; font-family: inherit; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 700; transition: all 0.15s; }
.lobby-tutorial-cta:hover { background: #1d4ed8; filter: brightness(1.08); }
.lobby-buy-btn { display: inline-flex; flex-direction: row; align-items: center; padding: 10px 20px; border-radius: 10px; cursor: default; background: transparent; border: 2px solid #eab308; color: #a16207; font-family: inherit; gap: 12px; }
.lobby-buy-btn:hover { border-color: #facc15; background: #fefce8; }
.lobby-buy-label { font-size: 14px; font-weight: 700; letter-spacing: 0.4px; line-height: 1; }
.lobby-hero-img-wrap { position: relative; width: 280px; max-width: 100%; flex-shrink: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(37,99,235,0.18), 0 0 0 1px rgba(37,99,235,0.12); }
.lobby-hero-img-wrap svg { display: block; width: 100%; height: auto; }
@media (min-width: 781px) {
  .lobby-hero { flex-direction: row; align-items: stretch; text-align: left; gap: 32px; }
  .lobby-hero-text { align-items: flex-start; flex: 1; }
  .lobby-hero-img-wrap { align-self: stretch; height: auto; }
  .lobby-hero-ctas { margin-top: auto; flex-direction: column; align-items: stretch; }
  .lobby-tutorial-cta { justify-content: center; align-self: auto; min-height: 46px; }
  .lobby-buy-btn { justify-content: center; min-height: 46px; }
}
@media (max-width: 780px) {
  .lobby-hero-img-wrap { margin: 0 auto; }
  #lobby h1 { font-size: 24px; letter-spacing: 1px; white-space: normal; }
}

/* ===== "HOW TO PLAY" (lobby, full-rules popup) ===== */
.qb-htp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.qb-htp-btn:hover { background: #dbeafe; border-color: #1d4ed8; }

/* ===== "ALL POSSIBLE CLUES" reference (in-panel button + mini boards) ===== */
.qb-ref-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0 10px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.qb-ref-btn svg { flex-shrink: 0; }
.qb-ref-btn:hover { background: #dbeafe; border-color: #1d4ed8; }
.qb-htp-modal.qb-allclues-modal { max-width: 960px; }
.qb-clueref-count { color: #64748b; font-weight: 600; text-transform: none; letter-spacing: 0; }
.qb-clueref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin: 6px 0 14px;
}
.qb-clueref-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}
.qb-clueref-tile svg { border: 1px solid #cbd5e1; border-radius: 2px; flex-shrink: 0; }
.qb-clueref-tile-text { font-size: 8.5px; color: #475569; line-height: 1.25; text-align: center; }
.qb-htp-modal { max-width: 620px; width: 100%; text-align: left; max-height: 82vh; overflow-y: auto; }
.qb-htp-modal h3 { margin-bottom: 4px; }
.qb-htp-body { font-size: 13.5px; color: #334155; line-height: 1.65; }
.qb-htp-body h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #1d4ed8; margin: 18px 0 6px; }
.qb-htp-body h4:first-child { margin-top: 0; }
.qb-htp-body ul, .qb-htp-body ol { padding-left: 20px; margin: 6px 0; }
.qb-htp-body li { margin-bottom: 4px; }
.qb-htp-highlight { background: #fefce8; border: 1px solid #fde047; border-radius: 8px; padding: 8px 12px; margin: 8px 0; color: #854d0e; font-weight: 600; font-size: 13px; }
.qb-htp-close { margin-top: 18px; width: 100%; }

#play-now-mobile-notice { display: none; }
@media (max-width: 640px) {
  #play-now-section .invited-banner, #play-now-section .lobby-play-grid { display: none; }
  #play-now-mobile-notice { display: block; text-align: center; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 20px; font-size: 14px; line-height: 1.5; max-width: 480px; margin: 0 auto; }
}

/* Game action buttons (Cancel Game) */
#nav-game-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
#nav-game-btns button {
  font-size: 12px; font-weight: 700;
  color: #60a5fa;
  background: none;
  border: 1px solid #2563eb;
  padding: 4px 10px; border-radius: 7px;
  cursor: pointer; font-family: inherit; line-height: 1.4;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
#nav-game-btns button:hover { background: rgba(37,99,235,0.12); }
#nav-game-btns #btn-cancel-game { color: #f87171; border-color: rgba(248,113,113,0.35); }
#nav-game-btns #btn-cancel-game:hover { background: rgba(248,113,113,0.1); }

/* ===== WAITING ROOM ===== */
#waiting {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 44px);
  gap: 18px;
  padding: 32px 20px;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(37,99,235,0.12) 0%, rgba(255,255,255,0) 70%),
    #ffffff;
}
.room-code-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: #64748b;
}
.room-code-display {
  font-size: 48px; font-weight: 800; letter-spacing: 12px;
  color: #1d4ed8; background: #fef9c3;
  padding: 14px 32px; border-radius: 14px;
  border: 2px solid #2563eb;
  user-select: all; font-family: 'Share Tech Mono', monospace;
}
.room-share { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.copy-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border: 1px solid #bfdbfe; border-radius: 8px;
  background: #ffffff; color: #1d4ed8; cursor: pointer; transition: all 0.15s;
}
.copy-btn:hover  { background: #eff6ff; }
.copy-btn.copied { background: #2563eb; color: #fff; border-color: #2563eb; }
.room-hint { font-size: 13px; color: #64748b; margin-bottom: 4px; }

.player-list { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.waiting-player {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #ffffff;
  border-radius: 10px; border: 1px solid #e2e8f0;
}
.waiting-player-me { border-color: #facc15 !important; background: #fefce8 !important; }
.waiting-player-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.waiting-player-name { font-weight: 700; font-size: 15px; }
.you-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #a16207; background: rgba(250,204,21,0.18);
  border: 1px solid #eab308; border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.host-badge {
  font-size: 11px; background: #facc15; color: #111;
  padding: 2px 8px; border-radius: 20px; font-weight: 700; margin-left: auto;
}
.waiting-observer-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: #64748b;
  display: flex; align-items: center; gap: 6px; padding: 0 4px 6px;
}

/* Game mode selector (waiting room) — host sees two toggle buttons, everyone
   else sees a plain readonly label reflecting the host's current choice. */
.mode-select-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: #64748b;
}
.mode-select-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mode-info-btn {
  width: 16px; height: 16px; border-radius: 50%; padding: 0;
  border: 1.5px solid #94a3b8; background: transparent; color: #64748b;
  font-size: 11px; font-weight: 700; font-style: italic; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; transition: all 0.15s;
}
.mode-info-btn:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.mode-info-box {
  max-width: 340px; margin-bottom: 10px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 12px; color: #475569; line-height: 1.5;
}
.mode-info-row + .mode-info-row { margin-top: 6px; }
.mode-toggle-group { display: flex; gap: 8px; margin-bottom: 4px; }
.mode-toggle-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 700;
  border: 2px solid #cbd5e1; border-radius: 8px;
  background: transparent; color: #64748b; cursor: pointer;
  transition: all 0.15s; font-family: inherit;
}
.mode-toggle-btn:hover  { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.mode-toggle-btn.active { border-color: #2563eb; background: #2563eb; color: #fff; }
.mode-readonly {
  display: inline-block; padding: 8px 18px; font-size: 13px; font-weight: 700;
  border: 2px solid #e2e8f0; border-radius: 8px; color: #475569; margin-bottom: 4px;
}

/* Bot toggle (dashed-border secondary button, cycles 0 -> 1 -> 2 -> 0 bots) */
.bot-toggle {
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  border: 2px dashed #cbd5e1; border-radius: 8px;
  background: transparent; color: #64748b; cursor: pointer;
  transition: all 0.15s; min-width: 240px; font-family: inherit;
}
.bot-toggle:hover  { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.bot-toggle.active { border-color: #2563eb; border-style: solid; color: #1d4ed8; background: #eff6ff; }

.waiting-actions { display: flex; gap: 10px; }
.waiting-actions button {
  padding: 14px 40px; border-radius: 10px; border: none;
  cursor: pointer; font-size: 18px; font-weight: 800;
  font-family: inherit; transition: all 0.15s;
}
#btn-start-game { background: #2563eb; color: #fff; }
#btn-start-game:hover:not(:disabled) { filter: brightness(1.12); transform: scale(1.02); }
#btn-start-game:disabled { opacity: 0.4; cursor: not-allowed; }
#btn-leave { background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; }
#btn-leave:hover { background: #f1f5f9; color: #1e293b; }

@media (max-width: 640px) {
  .room-code-display { font-size: 34px; letter-spacing: 7px; padding: 10px 20px; }
  .waiting-actions button { padding: 12px 26px; font-size: 16px; }
}

/* ===== GAME LAYOUT ===== */
#game.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
  background: #ffffff;
}
@media (min-width: 641px) {
  html:has(#game.active), body:has(#game.active) { overflow: hidden; height: 100%; }
  #game.active { height: calc(100vh - 44px); overflow: hidden; }
}

/* ===== PLAYERS BAR ===== */
.qb-players-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.qb-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #dbe4f5;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.qb-player-chip.qb-player-active {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}
.qb-player-chip.qb-player-me { font-style: italic; }
.qb-player-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.qb-player-name { color: #1e293b; }
.qb-player-dc { color: #dc2626; font-size: 8px; }

/* ===== MAIN LAYOUT ===== */
.qb-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  .qb-main { flex-direction: column; overflow: auto; }
}

/* ===== BOARD SECTION ===== */
.qb-board-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: auto;
}
.qb-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.qb-board-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #64748b; }
.qb-board-hint  { font-size: 11px; color: #a16207; font-style: italic; }

/* The board is a perfect square that fills whichever of width/height of this
   wrap is the tighter constraint (set as inline px by sizeBoard() in JS —
   plain CSS can't size one axis off the other's available space). Centering
   here is what keeps it centered as the wrap grows past the square. */
.qb-board-wrap { overflow: auto; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* ===== BOARD AXIS HEADERS ===== */
/* corner / colheads / rowheads / board arranged as a 2x2 grid so the header
   strips stay pixel-aligned with the board's own columns/rows (sizeBoard()
   sets matching explicit widths/heights on colheads and rowheads). */
.qb-board-grid-wrap {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 3px;
}
.qb-board-corner { grid-column: 1; grid-row: 1; }
.qb-board-colheads {
  grid-column: 2; grid-row: 1;
  display: flex;
  height: 22px;
}
.qb-board-rowheads {
  grid-column: 1; grid-row: 2;
  display: flex;
  flex-direction: column;
  width: 30px;
}
#qb-board { grid-column: 2; grid-row: 2; }

.qb-axis-head {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  color: #64748b;
  user-select: none;
}
.qb-axis-nibble { font-family: 'Share Tech Mono', monospace; font-size: 6px; letter-spacing: 0.5px; }
.qb-axis-dec    { font-family: 'Share Tech Mono', monospace; font-size: 8px; font-weight: 700; color: #334155; }
@media (min-width: 700px) {
  .qb-axis-nibble { font-size: 8px; }
  .qb-axis-dec    { font-size: 10px; }
}

.qb-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  /* No per-cell gap/grid lines — those would read as a second, finer
     checkerboard competing with the big 4x4-block pattern below. Cells sit
     flush; only the block-to-block colour step and the region-divider
     borders provide visual structure. */
  gap: 0;
  border: 2px solid #2563eb;
  border-radius: 6px;
  overflow: hidden;
  width: 480px;
  height: 480px;
  min-width: 280px;
  min-height: 280px;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* ===== CELLS ===== */
.qb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  cursor: default;
  transition: background 0.1s, box-shadow 0.1s;
  overflow: hidden;
  min-width: 0;
}
/* Hover highlight — applies to every cell regardless of clickability, so
   players can point at a cell to a teammate and it's obvious which one. The
   more specific clickable/measure-mode hover states below layer a coloured
   fill on top of this same outline. */
.qb-cell:hover { outline: 2px solid rgba(30,41,59,0.6); outline-offset: -2px; z-index: 2; }
.qb-cell.qb-clickable { cursor: pointer; }
.qb-cell.qb-clickable:hover { background: rgba(37,99,235,0.35) !important; z-index: 2; }
.qb-cell.qb-measure-mode { cursor: crosshair; }
.qb-cell.qb-measure-mode:hover { background: rgba(234,179,8,0.4) !important; z-index: 2; }

/* Big 4x4-block checkerboard: soft yellow block against a soft blue block —
   the page's two strong accent hues carried straight onto the board itself.
   Uses background-color (not the `background` shorthand) so the fine
   per-cell checkerboard below can layer on top via box-shadow without
   conflict. */
.qb-dark  { background-color: #fde68a; }
.qb-light { background-color: #bfdbfe; }

/* Small checkerboard: alternates every single cell (not just every 4x4
   block) — decimal 0 light, 1 dark, 2 light, 3 dark, ... i.e. (row+col) odd
   or even. A translucent inset wash lightens/darkens the block colour above
   without needing a second literal colour per cell. */
.qb-fine-a { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.45); }
.qb-fine-b { box-shadow: inset 0 0 0 999px rgba(0,0,0,0.08); }

/* region borders */
.qb-cell.qb-rb { border-bottom: 2px solid rgba(30,41,59,0.35); }
.qb-cell.qb-rr { border-right: 2px solid rgba(30,41,59,0.35); }

.qb-cell.qb-selected { outline: 3px solid #a16207; outline-offset: -2px; z-index: 3; }
.qb-cell.qb-proposed { outline: 3px solid #1d4ed8; outline-offset: -2px; z-index: 2; }
/* Matches this one clue, but hasn't been confirmed valid against every
   clue — greyscale so it reads as "partial", not a real candidate. Declared
   before qb-valid-all so a cell that's also fully valid renders green. */
.qb-cell.qb-match    { background: rgba(100,116,139,0.45) !important; filter: grayscale(1); }
/* "Highlight valid cells": only the cells consistent with EVERY clue at once. */
.qb-cell.qb-valid-all  { background: rgba(34,197,94,0.75)  !important; filter: none; }
.qb-cell.qb-answer-cell { background: rgba(34,197,94,0.35) !important; outline: 3px solid #16a34a; outline-offset: -2px; }

.qb-bin { font-family: 'Share Tech Mono', monospace; font-size: 4px; color: rgba(30,41,59,0.4); line-height: 1; user-select: none; }
.qb-dec { font-family: 'Share Tech Mono', monospace; font-size: 5px; color: rgba(30,41,59,0.65); line-height: 1; user-select: none; }
@media (min-width: 700px) {
  .qb-bin { font-size: 5.5px; }
  .qb-dec { font-size: 6.5px; }
}

/* ===== TOKENS ===== */
.qb-toks {
  position: absolute;
  bottom: 1px; left: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  z-index: 2;
}
/* A match (✓) and a no-match (✗) need to read as good/bad at a glance even
   at cell scale — a big bold glyph does that far better than shape alone. */
.qb-tok {
  width: 9px; height: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.qb-tok-circle { border-radius: 50%; }
.qb-tok-square { border-radius: 2px; }
@media (min-width: 700px) {
  .qb-tok { width: 13px; height: 13px; font-size: 10px; }
}

/* Beginner mode: no bits, nibbles, or kets on the board — decimal + plain
   row/column numbers only. */
body.qb-mode-beginner .qb-bin { display: none; }
body.qb-mode-beginner .qb-axis-nibble { display: none; }
body.qb-mode-beginner #qb-ket-layer { display: none; }

/* ===== KETS (Advance mode) ===== */
/* A SIBLING of #qb-board (not a child) sharing its grid cell (grid-column:2,
   grid-row:2 in .qb-board-grid-wrap) so it's exactly the same size/position
   as the board, but isn't subject to #qb-board's own overflow:hidden — a ket
   sitting on an edge vertex (row/col 0 or 16) needs to visibly hang half
   outside the board's blue border frame, not get clipped at the edge.
   pointer-events:none lets clicks pass through to the cell underneath. */
.qb-ket-layer {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 4;
  pointer-events: none;
}
.qb-ket {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.35);
  color: #1e293b;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  white-space: nowrap;
}
/* High-contrast black/white pair instead of amber/blue hues — easier to read
   at a glance against the board's yellow/blue checkerboard. */
.qb-ket-amber { color: #fff; border-color: #000; background: rgba(0,0,0,0.92); }
.qb-ket-blue  { color: #000; border-color: #000; background: rgba(255,255,255,0.96); }
@media (min-width: 700px) {
  .qb-ket { font-size: 10px; padding: 1px 3px; }
}

/* ===== BOARD LEGEND ===== */
/* ===== CELL HOVER ZOOM ===== */
.qb-cell-zoom {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
  padding: 12px 16px;
  background: #ffffff;
  border: 2px solid #2563eb;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(37,99,235,0.25);
}
.qb-zoom-bin { font-family: 'Share Tech Mono', monospace; font-size: 20px; font-weight: 700; color: #1e293b; letter-spacing: 2px; }
.qb-zoom-dec { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #64748b; }
.qb-zoom-toks { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 160px; }
.qb-zoom-tok {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid;
  font-size: 13px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.qb-zoom-tok.qb-tok-circle { border-radius: 50%; }
.qb-zoom-tok.qb-tok-square { border-radius: 3px; }
.qb-zoom-match { font-size: 11px; font-weight: 700; color: #16a34a; }

.qb-board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}
.qb-legend-item { display: flex; align-items: center; gap: 5px; }
.qb-leg-circle, .qb-leg-square {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; font-size: 9px; font-weight: 900; color: #fff;
}
.qb-leg-circle { border-radius: 50%; border: 2px solid #2563eb; background: rgba(37,99,235,0.25); }
.qb-leg-square { border-radius: 2px; border: 2px solid #64748b; background: rgba(100,116,139,0.2); }

/* ===== CONTROL PANEL ===== */
/* Two-column layout on wide screens: How to Play / Team Clue / Environment
   stack in a narrow left column, My Wavelength Clue takes a tall right
   column alongside them (it's the section most likely to grow, now that
   each clue shows a mini board thumbnail), and Turn spans full width
   underneath both — it needs the room for however many action buttons
   (e.g. one per teammate to choose as Verifier) a given turn requires.
   This fits the whole panel in the viewport instead of stacking all 5
   sections vertically and scrolling. Falls back to the original single
   stacked column (assigned via the same grid-area rules degrading to one
   column) below 900px, alongside the board reflowing above/below it. */
.qb-panel {
  width: 680px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(230px, 320px) 1fr;
  grid-template-areas:
    "htp    clue"
    "public clue"
    "env    clue"
    "turn   turn"
    "log    log";
  align-content: start;
  gap: 0;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  background: #f8fafc;
}
#qb-htp-section          { grid-area: htp; }
#qb-public-clue-section  { grid-area: public; }
#qb-clue-section         { grid-area: clue; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; min-height: 0; }
#qb-env-section          { grid-area: env; }
#qb-turn-section         { grid-area: turn; }
/* History (the activity log) gets its own full-width row below Turn —
   spanning both columns gives its entries the room to actually read as
   sentences instead of wrapping awkwardly in the narrow left column. It's
   also the one section with genuinely unbounded content (a long game keeps
   adding entries), so it still gets an internal scroll capped by height —
   the same trick Byte Club's Activity feed uses — rather than letting it
   grow and push the whole panel taller. */
#qb-log-section          { grid-area: log; display: flex; flex-direction: column; min-height: 0; border-bottom: none; }
@media (max-width: 900px) {
  .qb-panel {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "htp" "public" "clue" "env" "turn" "log";
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }
  #qb-clue-section { border-left: none; }
}

.qb-panel-section {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.qb-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #64748b;
  margin-bottom: 10px;
}

/* ===== CLUE PANEL ===== */
.qb-clue-color {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.qb-color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ===== PUBLIC ENTANGLEMENT CLUE ===== */
/* Shared team knowledge, not part of anyone's private hand — a distinct
   amber accent (vs. the blue used everywhere else) keeps it visually
   separate from "My Wavelength Clue" so it doesn't read as one more clue in
   that private list. */
.qb-public-clue-section { border-bottom: 1px solid rgba(234,179,8,0.25); }
.qb-public-clue-item {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 6px;
  padding: 7px 10px;
}
.qb-public-clue-item .qb-clue-text { color: #854d0e; }
.qb-public-clue-note { font-size: 10px; color: #64748b; margin-top: 6px; font-style: italic; }

.qb-clue-list { display: flex; flex-direction: column; gap: 6px; }
.qb-clue-placeholder { font-size: 12px; color: #64748b; font-style: italic; }
.qb-clue-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 7px 10px;
}
.qb-clue-id { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #64748b; flex-shrink: 0; }
.qb-clue-text { font-size: 11px; color: #334155; line-height: 1.45; }
.qb-clue-highlight-toggle { flex-shrink: 0; padding-top: 1px; cursor: pointer; }
.qb-clue-highlight-toggle input { accent-color: #16a34a; cursor: pointer; }

.qb-match-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}
.qb-match-toggle input { accent-color: #16a34a; cursor: pointer; }

.qb-valid-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: #64748b;
}
.qb-valid-legend .qb-legend-item { display: flex; align-items: center; gap: 6px; }
.qb-leg-match {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(100,116,139,0.45);
  border: 1px solid rgba(71,85,105,0.6);
  filter: grayscale(1);
}
.qb-leg-valid-all {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  background: rgba(34,197,94,0.85);
  border: 1px solid rgba(22,163,74,1);
}

/* ===== ENV PANEL ===== */
.qb-noise-row, .qb-deck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.qb-noise-label { color: #64748b; }
.qb-noise-dots { display: flex; gap: 5px; }
.qb-noise-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  transition: background 0.2s, border-color 0.2s;
}
.qb-noise-dot.qb-noise-active { background: #ef4444; border-color: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.5); }

.qb-card-display {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}
.qb-card-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1e293b; margin-bottom: 3px; }
.qb-card-effect { font-size: 11px; color: #64748b; line-height: 1.4; }
.qb-card-cascade { border-color: #93c5fd; background: #eff6ff; }
.qb-card-cascade .qb-card-type { color: #1d4ed8; }
.qb-card-noise { border-color: rgba(239,68,68,0.4); background: #fef2f2; }
.qb-card-noise .qb-card-type { color: #b91c1c; }
.qb-card-maintained { border-color: #e2e8f0; }

/* ===== HISTORY (ACTIVITY LOG) ===== */
/* Newest entry first and most prominent, fading down in size/weight for
   older ones — same idea as Byte Club's Activity feed, so returning players
   get a familiar pattern. Capped height + internal scroll keeps this section
   from pushing the rest of the panel (or the whole page) taller. */
.qb-log-body {
  flex: 1;
  min-height: 60px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qb-log-entry {
  border-left: 3px solid #cbd5e1;
  border-radius: 0 6px 6px 0;
  padding: 5px 9px;
  color: #64748b;
  font-size: 10.5px;
  line-height: 1.4;
  background: #ffffff;
}
.qb-log-entry:first-child {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  padding: 8px 11px;
  border-left-color: #2563eb;
  background: #eff6ff;
}
.qb-log-entry:nth-child(2) {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  border-left-color: #93c5fd;
}
.qb-log-placeholder { font-size: 11px; color: #94a3b8; font-style: italic; }

/* ===== TURN PANEL ===== */
.qb-turn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}
.qb-turn-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.qb-turn-tip { font-size: 11px; color: #64748b; line-height: 1.45; }

/* ===== VERIFY STEP ===== */
.qb-verify-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.qb-verify-choice {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start;
  border-width: 2px;
  background: #ffffff;
}
.qb-verify-choice:hover { background: #eff6ff; }

/* ===== BUTTONS ===== */
.qb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}
.qb-btn:hover { background: #f1f5f9; }
.qb-btn-measure {
  background: #fef9c3;
  border-color: #eab308;
  color: #854d0e;
}
.qb-btn-measure:hover { background: #fef08a; }
.qb-btn-danger  { background: #fef2f2; border-color: rgba(239,68,68,0.5); color: #b91c1c; }
.qb-btn-danger:hover { background: #fee2e2; }
.qb-btn-back    { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; margin-top: 16px; }
.qb-btn-back:hover { background: #dbeafe; }

/* ===== MODALS ===== */
.qb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.qb-modal {
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 28px 28px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(37,99,235,0.25);
  text-align: left;
}
.qb-modal h3 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.qb-modal p  { font-size: 13px; color: #64748b; margin: 0 0 16px; line-height: 1.5; }
.qb-modal-icon { font-size: 32px; margin-bottom: 10px; text-align: center; }
.qb-modal-btns { display: flex; flex-direction: column; gap: 8px; }

/* Decoherence alert — every player has to see and dismiss this themselves,
   so it reads as more urgent than the routine modals above: red accent,
   bigger, no way to click outside to dismiss (it's an overlay with its own
   button, same pattern as the others, but visually louder). */
.qb-noise-alert-modal { border-color: rgba(239,68,68,0.5); max-width: 440px; }
.qb-noise-alert-icon { font-size: 44px; color: #ef4444; filter: drop-shadow(0 0 14px rgba(239,68,68,0.4)); }
.qb-noise-alert-modal h3 { color: #b91c1c; font-size: 20px; }
#qb-noise-alert-count { font-size: 14px; color: #1e293b; }
.qb-noise-alert-urgent {
  background: #fef2f2;
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  color: #b91c1c !important;
  font-weight: 700;
  font-size: 13px !important;
}
.qb-measure-cell-display {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.qb-measure-binary {
  font-family: 'Share Tech Mono', monospace;
  font-size: 22px;
  letter-spacing: 4px;
  color: #a16207;
  font-weight: 700;
}
.qb-measure-decimal {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
}
/* Normal mode never shows bits on the board, so the Measurement confirm
   step and the final answer reveal shouldn't show one either — just the
   decimal number, promoted to the size/weight the binary used to have. */
body.qb-mode-beginner .qb-measure-binary,
body.qb-mode-beginner .qb-answer-binary { display: none; }
body.qb-mode-beginner .qb-measure-decimal {
  font-size: 28px; font-weight: 700; color: #a16207; margin-top: 0;
}
body.qb-mode-beginner .qb-answer-decimal {
  font-size: 22px; font-weight: 700; color: #a16207; margin-top: 0;
}

/* ===== GAME OVER OVERLAY ===== */
.qb-gameover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.qb-gameover-card {
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  padding: 36px 32px 28px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(37,99,235,0.25);
}
.qb-gameover-icon { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.qb-gameover-title { font-size: 26px; font-weight: 800; color: #1e293b; margin-bottom: 8px; letter-spacing: 0.5px; }
.qb-gameover-sub { font-size: 14px; color: #64748b; line-height: 1.5; margin-bottom: 16px; }
.qb-gameover-win  .qb-gameover-title { color: #16a34a; }
.qb-gameover-win  .qb-gameover-icon  { filter: drop-shadow(0 0 16px rgba(34,197,94,0.6)); }
.qb-gameover-lose .qb-gameover-title { color: #dc2626; }
.qb-gameover-lose .qb-gameover-icon  { filter: drop-shadow(0 0 16px rgba(239,68,68,0.5)); }
.qb-gameover-answer {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 4px;
}
.qb-answer-label { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.qb-answer-binary {
  font-family: 'Share Tech Mono', monospace;
  font-size: 22px;
  letter-spacing: 4px;
  color: #a16207;
  font-weight: 700;
}
.qb-answer-decimal { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: #64748b; margin-top: 3px; }

/* ===== TOAST ===== */
.qb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #ffffff;
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  color: #1e293b;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(37,99,235,0.25);
}
.qb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== OBSERVER BANNER ===== */
/* hub.css's shared default pins this at top:44px, but this page's real
   <header> is 68px tall (see main.css) — at 44px the banner's top ~24px sit
   underneath the header, which also sits at a higher z-index, so the banner
   reads as "covered" by the nav bar. Match the actual header height here. */
#observer-banner {
  display: none;
  top: 68px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: #fefce8;
  border-bottom: 1px solid #eab308;
  font-size: 13px;
  font-weight: 600;
  color: #854d0e;
  flex-shrink: 0;
}
body.observer-active #observer-banner { display: flex; }
.obs-pill {
  background: rgba(37,99,235,0.12);
  border: 1px solid #93c5fd;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #1d4ed8;
}

/* =====================================================================
   INTERACTIVE TUTORIAL — TWO-PHASE SYSTEM (blue/yellow Qubit theme)
   Phase 1: Full-screen concept intro overlay  (#qti-intro)
   Phase 2: Fixed sidebar during game          (#qbt-panel)
   ===================================================================== */
html.tutorial-loading body { visibility: hidden; }
html.tutorial-loading #qti-intro, html.tutorial-loading #qti-intro * { visibility: visible; }
html.tutorial-loading { background: #0a1528; }

/* ---------- PHASE 1: INTRO OVERLAY ---------- */
#qti-intro {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5,10,25,0.97);
  z-index: 500;
  align-items: center; justify-content: center;
  padding: 24px;
}
body.qti-intro-active #qti-intro { display: flex; }
#qti-intro-card {
  background: #0a1528;
  border: 1.5px solid rgba(37,99,235,0.5);
  border-radius: 16px;
  padding: 36px 40px 28px;
  max-width: 860px; width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.92);
}
.qti-header { display: flex; flex-direction: column; gap: 8px; }
.qti-label { font-size: 10px; font-weight: 700; color: #60a5fa; text-transform: uppercase; letter-spacing: 1.2px; }
.qti-progress { width: 100%; height: 4px; background: rgba(37,99,235,0.2); border-radius: 4px; overflow: hidden; }
#qti-prog-fill { height: 100%; background: #facc15; border-radius: 4px; transition: width 0.35s; }
#qti-title { font-size: 24px; font-weight: 900; color: #93c5fd; line-height: 1.2; margin-top: 2px; }
#qti-body { font-size: 14px; color: #cbd5e1; line-height: 1.75; flex: 1; }
#qti-body strong { color: #f1f5f9; }
#qti-body em { color: #93c5fd; font-style: normal; font-weight: 700; }
#qti-body p { margin-bottom: 12px; }
#qti-body p:last-child { margin-bottom: 0; }
.qti-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
#qti-exit { padding: 7px 16px; border: 1px solid rgba(37,99,235,0.3); border-radius: 7px; background: transparent; color: #60a5fa; font-size: 12px; cursor: pointer; font-family: inherit; transition: all 0.12s; }
#qti-exit:hover { color: #93c5fd; border-color: rgba(37,99,235,0.6); }
#qti-next { padding: 12px 32px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; transition: filter 0.12s; box-shadow: 0 4px 16px rgba(37,99,235,0.4); }
#qti-next:hover { filter: brightness(1.12); }

/* Grover narrator quote (concept intro slides) */
.qti-grover-quote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.3);
  border-left: 3px solid #facc15;
  border-radius: 8px;
  font-size: 13px;
  font-style: italic;
  color: #f1f5f9;
}
.qti-grover-quote .qti-grover-paw { font-style: normal; font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.qti-grover-quote strong { font-style: normal; color: #facc15; }

/* Concept mapping table */
.qti-map { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.qti-map-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.25); border-radius: 8px; font-size: 13px; }
.qti-map-left { font-weight: 800; color: #facc15; min-width: 150px; flex-shrink: 0; }
.qti-map-arrow { color: #3b5a8a; flex-shrink: 0; }
.qti-map-right { color: #cbd5e1; }

/* Classical vs quantum-approach compare box */
.qti-compare-box { display: flex; gap: 14px; margin: 14px 0; }
.qti-compare-side { flex: 1; border-radius: 10px; padding: 14px 16px; }
.qti-compare-side.classical { background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.3); }
.qti-compare-side.quantum { background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.4); }
.qti-compare-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.qti-compare-side.classical .qti-compare-label { color: #94a3b8; }
.qti-compare-side.quantum .qti-compare-label { color: #facc15; }
.qti-compare-text { font-size: 12px; color: #cbd5e1; line-height: 1.6; }
.qti-compare-text strong { color: #f1f5f9; }

.qti-highlight { background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.4); border-radius: 8px; padding: 8px 12px; margin: 8px 0; color: #fde68a; font-weight: 600; font-size: 13px; }

/* Interference wave visuals (constructive vs destructive) */
.qti-wave-row { display: flex; gap: 14px; margin: 14px 0; }
.qti-wave-box { flex: 1; border-radius: 10px; padding: 12px 14px 14px; text-align: center; }
.qti-wave-row .qti-wave-box:first-child { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.35); }
.qti-wave-row .qti-wave-box:last-child { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.35); }
.qti-wave-box svg { display: block; width: 100%; }
.qti-wave-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 6px; }
.qti-wave-label.good { color: #4ade80; }
.qti-wave-label.bad { color: #f87171; }
.qti-wave-text { font-size: 12px; color: #cbd5e1; line-height: 1.5; margin-top: 4px; }

/* ---------- TUTORIAL LOADING OVERLAY ---------- */
#qbt-loading {
  display: none;
  position: fixed; inset: 0;
  background: rgba(5,10,25,0.97);
  z-index: 490;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; text-align: center;
}
body.qbt-loading-active #qbt-loading { display: flex; }
.qbt-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(37,99,235,0.2); border-top-color: #2563eb; border-radius: 50%; animation: qbt-spin 0.8s linear infinite; }
@keyframes qbt-spin { to { transform: rotate(360deg); } }
.qbt-loading-text { color: #facc15; font-size: 18px; font-weight: 800; margin-top: 4px; }
.qbt-loading-sub { color: #93c5fd; font-size: 13px; }

/* ---------- PHASE 2: GAME SIDEBAR ---------- */
#qbt-panel {
  display: none;
  position: fixed; top: 68px; left: 0; bottom: 0; width: 280px;
  z-index: 310;
  background: #0a1528;
  border-right: 2px solid #2563eb;
  padding: 14px 16px 16px;
  flex-direction: column; gap: 12px;
  box-shadow: 4px 0 28px rgba(0,0,0,0.7);
  overflow-y: auto;
}
body.qbt-panel-active #qbt-panel { display: flex; }
body.qbt-panel-active .qb-main { padding-left: 280px; }
@media (max-width: 900px) {
  body.qbt-panel-active .qb-main { padding-left: 0; }
}

#qbt-panel .tut-header { display: flex; flex-direction: column; gap: 6px; }
#qbt-panel #tut-step { font-size: 10px; font-weight: 700; color: #60a5fa; text-transform: uppercase; letter-spacing: 1px; }
#qbt-panel .tut-progress { width: 100%; height: 4px; background: rgba(37,99,235,0.2); border-radius: 4px; overflow: hidden; }
#qbt-panel #tut-progress-fill { height: 100%; background: #facc15; border-radius: 4px; transition: width 0.3s; }
#qbt-panel #tut-title { font-size: 14px; font-weight: 800; color: #93c5fd; line-height: 1.3; }
#qbt-panel #tut-body { font-size: 12px; color: #cbd5e1; line-height: 1.6; flex: 1; overflow-y: auto; }
#qbt-panel #tut-body strong { color: #f1f5f9; }
#qbt-panel #tut-body em { color: #93c5fd; font-style: normal; font-weight: 700; }
#qbt-panel #tut-body p { margin-bottom: 8px; }
#qbt-panel #tut-body p:last-child { margin-bottom: 0; }
#qbt-panel #tut-body ul { padding-left: 14px; margin: 4px 0; }
#qbt-panel #tut-body li { margin-bottom: 4px; }
#qbt-panel .tut-footer { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
#qbt-panel #tut-hint { font-size: 11px; color: #3b5a8a; line-height: 1.4; min-height: 16px; }
#qbt-panel #tut-hint em { color: #facc15; }
#qbt-panel #tut-exit { padding: 6px 12px; border: 1px solid rgba(37,99,235,0.3); border-radius: 7px; background: transparent; color: #3b5a8a; font-size: 11px; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.12s; }
#qbt-panel #tut-exit:hover { background: rgba(37,99,235,0.1); color: #93c5fd; }
#qbt-panel #tut-next { padding: 9px 18px; background: #2563eb; color: #fff; border: none; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; width: 100%; text-align: center; box-shadow: 0 3px 12px rgba(37,99,235,0.35); }
#qbt-panel #tut-next:hover { filter: brightness(1.1); }

/* Tutorial glow highlight */
@keyframes qbt-pulse {
  0%,100% { outline-color: #facc15; box-shadow: 0 0 0 2px #facc15, 0 0 12px 4px rgba(37,99,235,0.45); }
  50% { outline-color: #2563eb; box-shadow: 0 0 0 3px #2563eb, 0 0 22px 8px rgba(250,204,21,0.5); }
}
.qbt-glow { outline: 2px solid #facc15 !important; outline-offset: 3px; animation: qbt-pulse 1.1s ease-in-out infinite !important; border-radius: 6px; }

@media (max-width: 900px) {
  #qbt-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto; max-height: 46vh; border-right: none; border-top: 2px solid #2563eb; box-shadow: 0 -4px 24px rgba(0,0,0,0.65); }
  body.qbt-panel-active .qb-board-section { padding-bottom: 46vh; }
}