/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0e1a;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* === App Layout === */
#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* === HUD (top 8%) === */
#hud {
  position: relative;
  z-index: 200;
  height: 8%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #0d1225;
  border-bottom: 1px solid #1e2744;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

#hud-phase {
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
}

#hud-timer {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}

#hud-timer.warning {
  color: #ff4444;
  animation: pulse 0.5s ease-in-out infinite alternate;
}

#hud-tiles {
  color: #ffc107;
  font-variant-numeric: tabular-nums;
}

#hud-round {
  color: #ffc107;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#hud-target {
  color: #ff6b6b;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#hud-players {
  color: #44ddff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* === Field (middle area — shrinks when tray is visible) === */
#field {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #121830;
  min-height: 0;
}

#field canvas {
  display: block;
}

/* === Tray (build phase — takes most vertical space, centered content) === */
#tray {
  flex: 3;
  background: #121830;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 8px 16px;
  gap: 10px;
  border-top: 1px solid #1e2744;
}

#tray.hidden {
  display: none;
}

/* === Tray Threshold (SP mode target display) === */
#tray-threshold {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffc107;
  padding: 4px 0;
  letter-spacing: 1px;
  flex-shrink: 0;
}

#tray-threshold.hidden {
  display: none;
}

/* === Tray Actions Row (trash + lock-in) === */
#tray-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-shrink: 0;
}

/* === Lock-In Button === */
#lock-in-btn {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  background: #1a2040;
  color: #ffc107;
  border: 2px solid #ffc107;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 28px;
}

#lock-in-btn.hidden {
  display: none;
}

#lock-in-btn:active {
  transform: scale(0.95);
  background: #2a2510;
}

/* Build area (hidden during scavenge) */
#build-area {
  display: none;
  position: relative;
  min-height: 64px;
}

#build-area.active {
  display: block;
}

#build-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  background: #1a2040;
  border-radius: 10px;
  border: 2px dashed #2a3560;
  padding: 6px 12px;
}

#build-area.active #build-row {
  border-color: #ffc107;
  border-style: solid;
}

/* Large build timer above build row */
#build-timer {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  display: none;
  margin-bottom: 4px;
  line-height: 1.1;
}
#build-area.active #build-timer { display: block; }
#build-timer:empty { display: none; }
#build-timer.warning {
  color: #ff4444;
  animation: pulse 0.5s ease-in-out infinite alternate;
}

#build-target {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #ff6b6b;
  margin-top: 4px;
  min-height: 18px;
  display: none;
}
#build-area.active #build-target { display: block; }
#build-target:empty { display: none; }
#build-target.met { color: #4caf50; }

#build-action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 4px;
}

#build-validity {
  font-size: 20px;
  line-height: 1;
}

#build-clear {
  width: 32px;
  height: 32px;
  border: 2px solid #4a5580;
  border-radius: 50%;
  background: #1e2744;
  color: #8899bb;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  padding: 0;
  flex-shrink: 0;
}

#build-clear.visible {
  display: flex;
}

#build-clear:active {
  transform: scale(0.9);
  border-color: #ff5555;
  color: #ff5555;
}

/* Submit button (multi-submit / untimed / early-advance) */
#build-submit {
  min-width: 40px;
  height: 40px;
  border: 2px solid #4caf50;
  border-radius: 20px;
  background: #1a3025;
  color: #4caf50;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  padding: 0 12px;
  z-index: 1;
  white-space: nowrap;
}

#build-submit.visible {
  display: flex;
}

#build-submit:active {
  transform: scale(0.9);
  background: #2a5040;
}

/* Give-up / pass button */
#build-give-up {
  display: none;
  position: relative;
  margin: 10px auto 0;
  padding: 8px 20px;
  border: 1px solid #6678a066;
  border-radius: 16px;
  background: transparent;
  color: #6678a0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}
#build-give-up.visible {
  display: block;
}
#build-give-up.prominent {
  border-color: #f0b429;
  color: #f0b429;
  font-size: clamp(16px, 4vw, 20px);
  padding: 14px 36px;
  background: #1a1a3022;
  animation: give-up-pulse 2s ease-in-out infinite;
}
#build-give-up:hover {
  background: #ffffff0a;
}
@keyframes give-up-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #f0b42944; }
  50% { box-shadow: 0 0 12px 4px #f0b42944; }
}

/* Take 5 (concede) button — utility footer below tiles */
#build-take-five {
  display: none;
  padding: 4px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #4a5a78;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s;
  opacity: 0.5;
}
#build-take-five.visible { display: inline-block; }
#build-take-five:hover {
  opacity: 1;
  color: #e63946;
}
#build-take-five.take5-pulse {
  opacity: 1;
  color: #f0b429;
  animation: take5-pulse 2s ease-in-out infinite;
}
@keyframes take5-pulse {
  0%, 100% { transform: scale(1); color: #f0b429; }
  50% { transform: scale(1.08); color: #4ecdc4; }
}

/* Take 5 confirmation overlay */
#take-five-confirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(10, 22, 40, 0.85);
  align-items: center;
  justify-content: center;
}
#take-five-confirm.visible {
  display: flex;
}
.take-five-card {
  background: #1a2340;
  border: 2px solid #e6394666;
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 320px;
  text-align: center;
}
.take-five-title {
  font-size: 22px;
  font-weight: 800;
  color: #e63946;
  margin-bottom: 10px;
}
.take-five-msg {
  font-size: 14px;
  color: #8899b4;
  line-height: 1.5;
  margin-bottom: 20px;
}
.take-five-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.take-five-cancel, .take-five-accept {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: transform 0.1s;
}
.take-five-cancel {
  background: #2a3456;
  color: #f5f0e8;
}
.take-five-accept {
  background: #e63946;
  color: #fff;
}
.take-five-cancel:hover, .take-five-accept:hover {
  transform: scale(1.04);
}

/* Take 5 / NoBop result screen */
.take-five-result {
  text-align: center;
  padding: 16px 0;
}
.take-five-result-title {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 900;
  color: #e63946;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.take-five-result-letters {
  font-size: clamp(16px, 4vw, 20px);
  color: #6678a0;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.take-five-result-message {
  font-size: clamp(14px, 3.5vw, 16px);
  color: #8899b4;
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto 20px;
}
.take-five-score {
  color: #e63946 !important;
}

/* No-words message */
#no-words-message {
  text-align: center;
  padding: 16px 12px 8px;
  animation: no-words-appear 0.5s ease-out;
}
#no-words-message.hidden { display: none; }
.no-words-icon { font-size: 40px; margin-bottom: 8px; }
.no-words-title {
  font-size: clamp(22px, 5.5vw, 28px);
  font-weight: 800;
  color: #f5f0e8;
  margin-bottom: 6px;
}
.no-words-text {
  font-size: clamp(14px, 3.5vw, 17px);
  color: #8899b4;
  line-height: 1.4;
  max-width: 320px;
  margin: 0 auto;
}
@keyframes no-words-appear {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Give-up result screen */
.give-up-result {
  text-align: center;
  padding: 20px 16px;
}
.give-up-icon { font-size: 48px; margin-bottom: 8px; }
.give-up-title {
  font-size: 28px;
  font-weight: 900;
  color: #f5f0e8;
  margin-bottom: 12px;
}
.give-up-letters {
  font-size: 18px;
  font-weight: 700;
  color: #6678a0;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.give-up-message {
  font-size: 15px;
  color: #8899b4;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto 20px;
}
.give-up-score {
  color: #6678a0 !important;
  font-size: 32px !important;
}

/* Tray slots */
#tray-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 10px);
  touch-action: none;
  max-width: 100%;
}

.tray-slot {
  width: clamp(40px, 11vw, 56px);
  min-width: 36px;
  height: clamp(52px, 14vw, 72px);
  border: 2px solid #2a3560;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1e2744;
  cursor: default;
  transition: transform 0.1s, border-color 0.15s;
  flex-shrink: 1;
  touch-action: none;
}

.tray-slot.filled {
  border-color: #4a5580;
  background: #232b4a;
}

.tray-slot.filled.clickable {
  cursor: pointer;
}

.tray-slot.filled.clickable:active {
  transform: scale(0.93);
}

.tray-slot .letter {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.tray-slot .value {
  font-size: clamp(10px, 2.8vw, 13px);
  color: #ffc107;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
}

.tray-slot.in-build {
  opacity: 0.25;
  border-style: dashed;
}

/* Build row tiles */
.build-tile {
  width: clamp(40px, 11vw, 56px);
  min-width: 36px;
  height: clamp(48px, 13vw, 66px);
  border: 2px solid #ffc107;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2a3050;
  cursor: pointer;
  transition: transform 0.1s;
  flex-shrink: 1;
}

.build-tile:active {
  transform: scale(0.93);
}

.build-tile .letter {
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.build-tile .value {
  font-size: clamp(10px, 2.8vw, 13px);
  color: #ffc107;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
}

/* === Drag Ghost === */
.drag-ghost {
  position: fixed;
  width: 52px;
  height: 66px;
  border: 2px solid #ffc107;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #232b4a;
  pointer-events: none;
  z-index: 500;
  opacity: 0.85;
  transform: translate(-50%, -50%);
}

.drag-ghost .letter {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.drag-ghost .value {
  font-size: 12px;
  color: #ffc107;
  font-weight: 600;
  line-height: 1;
  margin-top: 2px;
}

/* Tray slot while being dragged */
.tray-slot.dragging {
  opacity: 0.25;
}

/* Reorder target highlight */
.tray-slot.reorder-target {
  border-color: #ffc107;
  box-shadow: 0 0 8px #ffc10755;
}

/* Merge target highlight — teal glow when dragging onto matching letter */
.tray-slot.merge-target {
  border-color: #4ecdc4;
  box-shadow: 0 0 12px #4ecdc4aa, inset 0 0 8px #4ecdc422;
  transform: scale(1.08);
  transition: transform 0.15s, box-shadow 0.15s;
}

.build-tile.reorder-target {
  border-color: #ffffff;
  box-shadow: 0 0 8px #ffffff55;
}

.build-tile.dragging {
  opacity: 0.25;
}

/* === Specials — Wild Tile === */
.tray-slot.wild {
  border-color: #ffc107;
  background: #2a2510;
}

.tray-slot.wild .letter {
  color: #ffc107;
  font-size: 20px;
}

.tray-slot.wild .value {
  color: #99881a;
}

.build-tile.wild {
  border-color: #ffc107;
  background: #2a2510;
}

.build-tile.wild .letter {
  color: #ffc107;
  font-size: 18px;
}

.drag-ghost.wild .letter {
  color: #ffc107;
}

/* === On-Letter Bonuses === */
.tray-slot.has-bonus {
  border-color: var(--bonus-color, #4ecdc4);
  box-shadow: 0 0 6px color-mix(in srgb, var(--bonus-color, #4ecdc4) 40%, transparent);
}

.build-tile.has-bonus {
  border-color: var(--bonus-color, #4ecdc4);
  box-shadow: 0 0 6px color-mix(in srgb, var(--bonus-color, #4ecdc4) 40%, transparent);
}

.build-tile.bonus-active {
  box-shadow: 0 0 10px var(--bonus-color, #4ecdc4), 0 0 20px color-mix(in srgb, var(--bonus-color, #4ecdc4) 30%, transparent);
  animation: bonus-glow 1s ease-in-out infinite alternate;
}

@keyframes bonus-glow {
  from { box-shadow: 0 0 6px var(--bonus-color, #4ecdc4); }
  to   { box-shadow: 0 0 14px var(--bonus-color, #4ecdc4), 0 0 24px color-mix(in srgb, var(--bonus-color, #4ecdc4) 30%, transparent); }
}

.bonus-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.tray-slot { position: relative; }
.build-tile { position: relative; }

/* Tray effect tooltips (#141) */
.tray-effect-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2444;
  border: 1px solid #4ecdc4;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #c0cce0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.tray-effect-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #4ecdc4;
}

.tray-slot.has-tooltip:hover .tray-effect-tooltip {
  opacity: 1;
}

@media (hover: none) {
  .tray-slot.has-tooltip:active .tray-effect-tooltip {
    opacity: 1;
  }
}

/* Score screen letter bonus line */
.score-line.letter-bonus span:last-child {
  color: #4ecdc4;
}
.score-line.crown-bonus span:last-child {
  color: #ffc107;
}

/* === HUD Effects === */
#hud-effects {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hud-effect {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: effect-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes effect-pulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* === Score Screen === */
#score-screen {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#score-screen.hidden {
  display: none;
}

#score-card {
  background: #1a2040;
  border: 2px solid #2a3560;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  width: 90%;
}

#score-card h2 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #ffc107;
}

.result-row {
  margin: 16px 0;
}

.result-label {
  font-size: 12px;
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.result-word {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
}

.result-score {
  font-size: 16px;
  color: #ffc107;
  margin-top: 4px;
}

/* Score breakdown (#98) */
.score-breakdown {
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(42, 53, 96, 0.4);
  border-radius: 8px;
}

.score-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 14px;
  color: #ccd;
}

.score-line.bonus span:last-child {
  color: #4caf50;
}

.score-line.total {
  font-weight: 700;
  font-size: 16px;
  color: #ffc107;
}

.score-detail {
  font-size: 11px;
  color: #6678a0;
  text-align: right;
  margin-top: -2px;
  margin-bottom: 2px;
}

.score-divider {
  border-top: 1px solid #2a3560;
  margin: 6px 0;
}

/* Optimal result row */
.optimal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #6678a0;
}

.optimal-word {
  font-weight: 600;
  color: #8899bb;
  letter-spacing: 1px;
}

.optimal-score {
  color: #6678a0;
}

/* Target pass/fail */
.target-pass {
  color: #4caf50;
  font-weight: 700;
}

.target-fail {
  color: #ff5555;
  font-weight: 700;
}

/* Submissions list (multi-submit score screen) */
.submissions-list {
  margin: 8px 0 12px;
}

.submission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 6px;
  margin: 4px 0;
  background: #1e2744;
}

.submission-row.best {
  background: #2a2510;
  border: 1px solid #ffc107;
}

.submission-word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}

.submission-row.best .submission-word {
  color: #ffc107;
}

.submission-score {
  font-size: 14px;
  font-weight: 600;
  color: #8899bb;
}

.submission-row.best .submission-score {
  color: #ffc107;
}

.score-target {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  color: #4caf50;
}

#play-again {
  margin-top: 20px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  background: #ffc107;
  color: #0a0e1a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

#play-again:hover {
  background: #ffcd38;
}

#play-again:active {
  transform: scale(0.97);
}

/* === Match Summary Screen === */
#match-summary {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#match-summary.hidden {
  display: none;
}

#summary-card {
  background: #1a2040;
  border: 2px solid #2a3560;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

#summary-card h2 {
  font-size: 22px;
  margin-bottom: 16px;
  color: #ffc107;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 4px 0;
  background: #1e2744;
  font-size: 14px;
}

.summary-round {
  color: #8899bb;
  font-weight: 600;
  min-width: 28px;
  text-align: left;
}

.summary-word {
  font-weight: 700;
  letter-spacing: 2px;
  flex: 1;
  text-align: center;
}

.summary-score {
  color: #8899bb;
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

.summary-row.best {
  background: #2a2510;
  border: 1px solid #ffc107;
}

.summary-row.best .summary-word,
.summary-row.best .summary-score {
  color: #ffc107;
}

.summary-row.failed {
  background: #2a1515;
  border: 1px solid #ff5555;
}
.summary-row.failed .summary-word,
.summary-row.failed .summary-score { color: #ff5555; }

.summary-total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2a3560;
  font-size: 18px;
  font-weight: 700;
}

.summary-total-label {
  color: #8899bb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.summary-total-score {
  color: #ffc107;
  font-size: 28px;
  font-weight: 700;
}

/* === Personal Best (match summary) === */
.summary-pb { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a3560; }
.summary-pb.hidden { display: none; }
.summary-pb-title { font-size: 12px; color: #8899bb; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.summary-pb-title.new-best { color: #ffc107; animation: pulse 0.8s ease-in-out infinite alternate; }

.pb-entry { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 4px; font-size: 13px; margin: 2px 0; }
.pb-rank { min-width: 24px; color: #8899bb; font-weight: 600; }
.pb-score { min-width: 40px; text-align: right; font-weight: 600; color: #8899bb; }
.pb-word { font-weight: 700; letter-spacing: 1px; flex: 1; text-align: center; color: #ccd; }
.pb-rounds { font-size: 11px; color: #6678a0; min-width: 28px; text-align: right; }
.pb-date { font-size: 10px; color: #4a5580; min-width: 50px; text-align: right; }

.pb-entry.current { background: rgba(255,193,7,0.12); border: 1px solid #ffc107; }
.pb-entry.current .pb-score, .pb-entry.current .pb-word { color: #ffc107; }

#summary-play-again {
  margin-top: 20px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  background: #ffc107;
  color: #0a0e1a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

#summary-play-again:hover {
  background: #ffcd38;
}

#summary-play-again:active {
  transform: scale(0.97);
}

/* === Round Start Card === */
#round-start-card {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#round-start-card.hidden {
  display: none;
}

#rsc-card {
  background: #1a2040;
  border: 2px solid #2a3560;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  max-width: 340px;
  width: 90%;
}

#rsc-card h2 {
  font-size: 26px;
  margin-bottom: 20px;
  color: #ffc107;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.rsc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 4px 0;
  background: #1e2744;
  font-size: 14px;
}

.rsc-label {
  color: #8899bb;
  font-weight: 600;
}

.rsc-value {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rsc-countdown {
  text-align: center;
  color: #6678a0;
  font-size: 13px;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.rsc-countdown-urgent {
  color: #e63946;
  animation: rsc-pulse 1s ease-in-out infinite;
}

@keyframes rsc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#rsc-start:disabled {
  background: #3a4060;
  color: #6678a0;
  cursor: default;
}

#rsc-start {
  margin-top: 20px;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 700;
  background: #ffc107;
  color: #0a0e1a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

#rsc-start:hover {
  background: #ffcd38;
}

#rsc-start:active {
  transform: scale(0.97);
}

#rsc-quit {
  margin-top: 8px;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: #6678a0;
  border: 1px solid #2a3560;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

#rsc-quit:hover {
  color: #ff5555;
  border-color: #ff5555;
}

/* Specials chips on round start card */
.rsc-specials-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.rsc-specials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.rsc-specials-list .rsc-none {
  color: #6678a0;
  font-size: 13px;
  text-align: center;
  width: 100%;
}

.rsc-special-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc((100% - 16px) / 3);
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid var(--chip-color, #4ecdc4);
  box-sizing: border-box;
}

.rsc-special-icon {
  font-size: 28px;
  line-height: 1;
  color: var(--chip-color, #4ecdc4);
  margin-bottom: 4px;
}

.rsc-special-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--chip-color, #fff);
  text-align: center;
  line-height: 1.2;
}

.rsc-special-desc {
  font-size: 10px;
  color: #8899bb;
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
}

/* Bonus header on round start card */
.rsc-bonus-header {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #8899bb;
  padding: 2px 0 4px;
}

/* Quit confirm dialog */
#quit-confirm {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

#quit-confirm.hidden { display: none; }

#quit-confirm-card {
  background: #1a2040;
  border: 2px solid #2a3560;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  max-width: 300px;
  width: 85%;
}

#quit-confirm-text {
  font-size: 15px;
  color: #ccd;
  margin-bottom: 20px;
  line-height: 1.4;
}

#quit-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#quit-confirm-yes {
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  background: #ff5555;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#quit-confirm-no {
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  background: #2a3560;
  color: #ccd;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* === Loading Screen === */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: opacity 0.4s;
}

#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-text {
  font-size: 16px;
  color: #8899bb;
}

/* === Title Screen === */
#title-screen {
  position: fixed;
  inset: 0;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
}

#title-screen.hidden {
  display: none;
}

#title-user-bar {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 13px;
  color: #8899bb;
  font-weight: 600;
}

#title-user-bar:empty {
  display: none;
}

#title-card {
  text-align: center;
  width: 92%;
  max-width: 380px;
}

#title-name {
  font-size: 48px;
  font-weight: 900;
  color: #ffc107;
  letter-spacing: 6px;
  margin-bottom: 4px;
}

#title-subtitle {
  font-size: 14px;
  color: #6678a0;
  letter-spacing: 2px;
  margin-bottom: 36px;
}

#title-modes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.title-mode-btn {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 18px 20px;
  background: #1a2040;
  border: 2px solid #2a3560;
  border-radius: 12px;
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.title-mode-btn:hover {
  background: #1e2550;
  border-color: #4a5580;
}

.title-mode-btn:active {
  transform: scale(0.98);
}

.title-mode-btn.last-played {
  border-color: #ffc107;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.15);
}

.title-mode-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.title-mode-desc {
  font-size: 13px;
  color: #8899bb;
}

#title-gear {
  background: none;
  border: none;
  color: #6678a0;
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  transition: color 0.15s;
}

#title-gear:hover { color: #ffc107; }
#title-gear:active { transform: scale(0.9); }

/* === Phase Flash Overlay === */
#phase-flash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.75);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

#phase-flash.visible {
  opacity: 1;
}

#phase-flash-text {
  font-size: 48px;
  font-weight: 900;
  color: #ffc107;
  text-transform: uppercase;
  letter-spacing: 4px;
}

/* === Urgency Vignette === */
#urgency-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  transition: opacity 0.6s ease-in;
  box-shadow: inset 0 0 80px 30px rgba(255, 30, 30, 0.35);
}

#urgency-vignette.active {
  opacity: 1;
  animation: vignette-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes vignette-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* === Animations === */
@keyframes pulse {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
  0% { border-color: #ffc107; box-shadow: 0 0 6px #ffc10755; }
  50% { border-color: #ffe082; box-shadow: 0 0 12px #ffe08255; }
  100% { border-color: #ffc107; box-shadow: 0 0 6px #ffc10755; }
}

@keyframes reject-flash {
  0% { border-color: #ff4444; background: #3a1a1a; }
  100% { border-color: #2a3560; background: #1e2744; }
}

.tray-slot.pop-in {
  animation: pop-in 0.25s ease-out;
}

.tray-slot.shimmer {
  animation: shimmer 0.5s ease-in-out 2;
}

.tray-slot.reject {
  animation: reject-flash 0.35s ease-out;
}

/* === Gear Button === */
.hud-back-btn {
  background: rgba(230, 57, 70, 0.15);
  border: 1px solid rgba(230, 57, 70, 0.4);
  color: #e63946;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.hud-back-btn:hover,
.hud-back-btn:active {
  background: rgba(230, 57, 70, 0.3);
}
.hud-back-btn.hidden {
  display: none;
}

#hud-gear {
  background: none;
  border: none;
  color: #6678a0;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  transition: color 0.15s;
  flex-shrink: 0;
}

#hud-gear:hover { color: #ffc107; }
#hud-gear:active { transform: scale(0.9); }

/* === Settings Panel === */
#settings-panel {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.88);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

#settings-panel.open {
  pointer-events: auto;
  opacity: 1;
}

.sp-panel {
  background: #151b33;
  border: 1px solid #2a3560;
  border-radius: 12px;
  max-width: 400px;
  width: 92%;
  margin: 24px 0;
  padding: 0 0 16px;
}

.sp-header {
  padding: 14px 16px;
  border-bottom: 1px solid #1e2744;
}

.sp-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffc107;
}

.sp-body {
  padding: 8px 16px;
}

.sp-section {
  font-size: 11px;
  font-weight: 700;
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 8px;
}

.sp-section:first-child { margin-top: 8px; }

.sp-row {
  margin-bottom: 10px;
}

.sp-label {
  font-size: 13px;
  color: #ccd;
  display: block;
  margin-bottom: 2px;
}

.sp-val {
  float: right;
  font-size: 13px;
  font-weight: 600;
  color: #ffc107;
  font-variant-numeric: tabular-nums;
}

.sp-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #1e2744;
  border-radius: 3px;
  outline: none;
  margin-top: 4px;
}

.sp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffc107;
  border-radius: 50%;
  cursor: pointer;
}

.sp-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #ffc107;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.sp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-toggle-row .sp-label {
  margin-bottom: 0;
}

.sp-toggle {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #4a5580;
  border-radius: 6px;
  background: #1e2744;
  color: #8899bb;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.sp-toggle.on {
  background: #2a4030;
  border-color: #4caf50;
  color: #4caf50;
}

.sp-select {
  background: #1a2238;
  border: 1px solid #3a4a6a;
  border-radius: 4px;
  color: #ddd;
  font-size: 12px;
  padding: 4px 8px;
  margin-left: auto;
  cursor: pointer;
}

/* Mode section (prominent toggle at top of panel) */
.sp-mode-section {
  padding: 12px 16px 14px;
  border-bottom: 1px solid #1e2744;
}

/* Mode toggle (segmented control) */
.sp-mode-toggle-row {
  display: flex;
  gap: 0;
}
.sp-mode-btn {
  flex: 1;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #4a5580;
  background: #1e2744;
  color: #8899bb;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}
.sp-mode-btn:first-child {
  border-radius: 8px 0 0 8px;
  border-right: 1px solid #4a5580;
}
.sp-mode-btn:last-child {
  border-radius: 0 8px 8px 0;
  border-left: 1px solid #4a5580;
}
.sp-mode-btn.active {
  background: #1a3050;
  border-color: #42a5f5;
  color: #42a5f5;
}

.sp-derived {
  font-size: 12px;
  color: #6678a0;
  margin-top: -4px;
  margin-bottom: 8px;
}

.sp-mode-desc {
  font-size: 12px;
  color: #6678a0;
  margin-top: -4px;
  margin-bottom: 8px;
}

.sp-buttons {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  border-top: 1px solid #1e2744;
}

.sp-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.sp-btn:active { transform: scale(0.97); }

.sp-btn-apply {
  background: #ffc107;
  color: #0a0e1a;
}

.sp-btn-apply:hover { background: #ffcd38; }

.sp-btn-reset {
  background: #2a3560;
  color: #ccd;
}

.sp-btn-reset:hover { background: #354070; }

.sp-btn-cancel {
  background: #1e2744;
  color: #8899bb;
}

.sp-btn-cancel:hover { background: #253050; }

.sp-btn-push {
  background: #1a3a2a;
  color: #4ecdc4;
  border: 1px solid #4ecdc4;
}
.sp-btn-push:hover { background: #254a3a; }
.sp-btn-push:disabled { opacity: 0.5; cursor: wait; }

.sp-signout {
  background: transparent;
  border: 1px solid #6678a033;
  color: #6678a0;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  transition: all 0.15s;
}
.sp-signout:hover {
  color: #e63946;
  border-color: #e6394666;
}

/* === Sheet Import Status === */
.sp-sheet-status {
  font-size: 12px;
  color: #6678a0;
  margin: 4px 0 8px;
  min-height: 16px;
}
.sp-sheet-status.ok { color: #4caf50; }
.sp-sheet-status.error { color: #ff5555; }

/* === Tab Bar (admin panel) === */
.sp-tab-bar {
  display: flex;
  border-bottom: 2px solid #1e2744;
}
.sp-tab-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #6678a0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  letter-spacing: 0.5px;
}
.sp-tab-btn:hover {
  color: #aabbdd;
}
.sp-tab-btn.active {
  color: #ffc107;
  border-bottom-color: #ffc107;
}
.sp-tab-page {
  display: none;
}
.sp-tab-page[style*="display: none"] { display: none !important; }

/* === Push Server Defaults === */
.sp-btn-push {
  width: 100%;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background: #e65100;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin: 4px 0 8px;
}
.sp-btn-push:hover { background: #ff6d00; }
.sp-btn-push:active { transform: scale(0.97); }
.sp-btn-push:disabled { opacity: 0.6; cursor: not-allowed; }

/* === Admin Tab === */
.sp-admin-tab .sp-body { padding-bottom: 8px; }

.sp-admin-stats {
  font-size: 13px;
  color: #ccd;
  margin-bottom: 8px;
}
.sp-admin-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #1a2040;
}
.sp-admin-stat-row span:last-child {
  font-weight: 600;
  color: #ffc107;
  font-variant-numeric: tabular-nums;
}

.sp-admin-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.sp-admin-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #2a3560;
  border-radius: 6px;
  background: #1e2744;
  color: #dde;
  outline: none;
  min-width: 0;
}
.sp-admin-input:focus { border-color: #42a5f5; }
.sp-admin-input[type="number"] { max-width: 80px; }

.sp-admin-checkbox-label {
  font-size: 12px;
  color: #8899bb;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.sp-admin-result {
  font-size: 12px;
  color: #8899bb;
  margin-bottom: 8px;
  min-height: 16px;
}
.sp-admin-result.ok { color: #4caf50; }
.sp-admin-result.error { color: #ff5555; }
.sp-admin-result code {
  background: #1e2744;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  color: #ffc107;
}

.sp-admin-codes {
  font-size: 12px;
  color: #ccd;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sp-admin-code {
  background: #1e2744;
  border: 1px solid #2a3560;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 11px;
  color: #ffc107;
  user-select: all;
  -webkit-user-select: all;
  cursor: pointer;
}

.sp-admin-invite-text {
  background: #0d1a2e;
  border: 1px solid #4ecdc4;
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  font-family: monospace;
  font-size: 12px;
  color: #f5f0e8;
  white-space: pre-wrap;
  user-select: all;
  -webkit-user-select: all;
  line-height: 1.5;
}
.sp-admin-invite-text.hidden { display: none; }

.sp-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 8px;
}
.sp-admin-table th {
  text-align: left;
  padding: 4px 6px;
  color: #6678a0;
  font-weight: 600;
  border-bottom: 1px solid #2a3560;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sp-admin-table td {
  padding: 4px 6px;
  color: #ccd;
  border-bottom: 1px solid #1a2040;
}
.sp-admin-table tr:hover td { background: #1a2040; }

.sp-admin-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}
.sp-admin-page-info {
  font-size: 12px;
  color: #6678a0;
  text-align: center;
  margin: 4px 0;
}

.sp-admin-user-list {
  font-size: 13px;
  color: #ccd;
}

/* === Storage Toast === */
.storage-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 400;
  pointer-events: none;
  transition: opacity 0.4s;
  max-width: 90%;
  text-align: center;
}

.storage-toast.ok {
  background: #1a3025;
  border: 1px solid #4caf50;
  color: #4caf50;
}

.storage-toast.error {
  background: #3a1a1a;
  border: 1px solid #ff5555;
  color: #ff5555;
}

.storage-toast.fade {
  opacity: 0;
}

/* === Mini-Leaderboard (Phantom Players) === */
.mini-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 12px 0;
  width: 100%;
}

.lb-row {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
  gap: 6px;
}

.lb-rank {
  min-width: 28px;
  color: #8899bb;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ccd;
}

.lb-word {
  font-weight: 700;
  letter-spacing: 1px;
  color: #8899bb;
  text-transform: uppercase;
  font-size: 12px;
  min-width: 50px;
  text-align: center;
}

.lb-score {
  min-width: 36px;
  text-align: right;
  font-weight: 600;
  color: #8899bb;
  font-variant-numeric: tabular-nums;
}

.lb-row.you {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid #ffc107;
}

.lb-row.you .lb-name,
.lb-row.you .lb-word,
.lb-row.you .lb-score {
  color: #ffc107;
}

.lb-row.you .lb-rank {
  color: #ffc107;
}

.lb-row.eliminated {
  opacity: 0.45;
}

.lb-elim-line {
  text-align: center;
  font-size: 11px;
  color: #ff5555;
  font-weight: 600;
  padding: 3px 0;
  border-top: 1px dashed #ff555555;
  margin: 2px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lb-gap {
  text-align: center;
  font-size: 11px;
  color: #4a5580;
  padding: 1px 0;
}

.lb-placement {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Summary row rank badge (phantom mode) */
.summary-rank {
  color: #44ddff;
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* === Juice Layer (overlay for effects) === */
#juice-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

/* === Score Fly-Up === */
.score-fly {
  position: absolute;
  font-size: 20px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  animation: score-fly 0.8s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes score-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-60px); }
}

/* === Callout ("Bop!", "Nice Bop!", etc.) === */
.callout {
  position: absolute;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.callout-sm {
  font-size: 18px;
  color: #ffffff;
  animation: callout-pop 0.6s ease-out forwards;
}

.callout-md {
  font-size: 24px;
  color: #ffd700;
  animation: callout-pop 0.7s ease-out forwards;
}

.callout-lg {
  font-size: 30px;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.5), 0 2px 8px rgba(0,0,0,0.6);
  animation: callout-pop 0.8s ease-out forwards;
}

.callout-xl {
  font-size: 38px;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 40px rgba(255,215,0,0.3), 0 2px 8px rgba(0,0,0,0.6);
  animation: callout-pop 0.9s ease-out forwards;
}

.callout-victory {
  font-size: 48px;
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4), 0 3px 10px rgba(0,0,0,0.7);
  animation: callout-pop 1.2s ease-out forwards;
}

@keyframes callout-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  50%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-20px); }
}

/* === Screen Flash === */
.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 89;
  animation: flash-fade 0.15s ease-out forwards;
}

.screen-flash.elim-flash {
  background: rgba(255, 30, 30, 0.3);
  animation: none;
  transition: opacity 0.4s;
  opacity: 1;
}

.screen-flash.elim-flash.fade {
  opacity: 0;
}

@keyframes flash-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* === Timer pulse at <=3s === */
#hud-timer.countdown-pulse {
  animation: timer-pulse 0.3s ease-out;
}

@keyframes timer-pulse {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* === Fade-in for overlay screens === */
.overlay-fadein {
  animation: overlay-fadein 0.25s ease-out;
}

@keyframes overlay-fadein {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === Responsive === */
@media (min-width: 768px) {
  #app {
    max-width: 600px;
    margin: 0 auto;
    border-left: 1px solid #1e2744;
    border-right: 1px solid #1e2744;
  }

  #hud-timer { font-size: 28px; }
}

/* === Lobby Overlay === */
#lobby-overlay {
  position: fixed;
  inset: 0;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
}

#lobby-overlay.hidden {
  display: none;
}

#lobby-card {
  background: #151b33;
  border: 1px solid #2a3560;
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 380px;
  width: 92%;
  text-align: center;
}

.lobby-title {
  font-size: 36px;
  font-weight: 900;
  color: #ffc107;
  letter-spacing: 4px;
  margin-bottom: 4px;
}

.lobby-subtitle {
  font-size: 13px;
  color: #6678a0;
  margin-bottom: 24px;
}

.lobby-section {
  margin-bottom: 16px;
}

.lobby-section.hidden {
  display: none;
}

/* Auth tabs */
#lobby-auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.lobby-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #2a3560;
  border-radius: 6px;
  background: #1a2040;
  color: #6678a0;
  cursor: pointer;
  transition: all 0.15s;
}

.lobby-tab.active {
  background: #2a3560;
  color: #ffffff;
  border-color: #4a5580;
}

/* Forms */
.lobby-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby-form.hidden {
  display: none;
}

.lobby-form input {
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  background: #1a2040;
  border: 1px solid #2a3560;
  border-radius: 8px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.15s;
}

.lobby-form input:focus {
  border-color: #ffc107;
}

.lobby-form input::placeholder {
  color: #4a5580;
}

.input-hint {
  font-size: 11px;
  color: #4a5580;
  margin-top: -6px;
  padding-left: 4px;
}

/* Buttons */
.lobby-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: block;
  width: 100%;
}

.lobby-btn:active {
  transform: scale(0.97);
}

.lobby-btn.primary {
  background: #ffc107;
  color: #0a0e1a;
}

.lobby-btn.primary:hover {
  background: #ffcd38;
}

.lobby-btn.secondary {
  background: #1e2744;
  color: #8899bb;
  border: 1px solid #2a3560;
}

.lobby-btn.secondary:hover {
  background: #253050;
}

.lobby-btn.large {
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
}

.lobby-btn-small {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: #1e2744;
  color: #8899bb;
  border: 1px solid #2a3560;
  border-radius: 6px;
  cursor: pointer;
}

/* User bar */
.lobby-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #1a2040;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}

#lobby-username {
  font-weight: 700;
  color: #ffffff;
}

.lobby-crowns {
  color: #ffc107;
  font-weight: 600;
}

.lobby-energy {
  color: #44ddff;
  font-weight: 600;
}

.lobby-play-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.lobby-bottom-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  margin-top: 4px;
}

/* Divider */
.lobby-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: #4a5580;
  font-size: 12px;
}

.lobby-divider::before,
.lobby-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2a3560;
}

/* Error */
.lobby-error {
  padding: 8px 12px;
  font-size: 13px;
  color: #ff5555;
  background: #2a1515;
  border: 1px solid #ff5555;
  border-radius: 6px;
  margin-top: 10px;
}

.lobby-error.hidden,
.lobby-error:empty {
  display: none;
}

/* Queue */
.lobby-queue-status {
  padding: 24px 0;
}

.lobby-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #2a3560;
  border-top-color: #ffc107;
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#lobby-queue-text {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

#lobby-queue-count {
  font-size: 13px;
  color: #8899bb;
}

/* Connection status */
.lobby-status {
  font-size: 12px;
  color: #4a5580;
  margin-top: 12px;
  min-height: 18px;
}

.lobby-status.connected {
  color: #4caf50;
}

.lobby-status.connecting {
  color: #ffc107;
}

.lobby-status.disconnected {
  color: #ff5555;
}

.lobby-status.error {
  color: #ff5555;
}

/* === Private Room UI === */

.lobby-section-heading {
  color: #f5f0e8;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 16px;
}

.lobby-private-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.private-join-row {
  display: flex;
  gap: 8px;
}

.private-code-input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #2a3a5c;
  border-radius: 8px;
  background: #0d1f3c;
  color: #f5f0e8;
  font-size: 18px;
  font-family: 'Courier New', monospace;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.private-code-input::placeholder {
  color: #556;
  letter-spacing: 1px;
}

.private-code-input:focus {
  outline: none;
  border-color: #4ecdc4;
}

#private-error {
  margin-bottom: 12px;
}

/* Room Lobby */
.room-code-display {
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.room-code-label {
  display: block;
  font-size: 12px;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.room-code-value {
  display: block;
  font-size: 36px;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: #4ecdc4;
  letter-spacing: 8px;
  user-select: all;
}

.room-code-hint {
  display: block;
  font-size: 11px;
  color: #556;
  margin-top: 2px;
}

.room-player-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid #1a2a4c;
  border-radius: 8px;
  padding: 8px;
}

.room-player-row {
  padding: 6px 8px;
  font-size: 14px;
  color: #f5f0e8;
  border-bottom: 1px solid #1a2a4c;
}

.room-player-row:last-child {
  border-bottom: none;
}

.room-host-badge {
  background: #f0b429;
  color: #0a1628;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-right: 4px;
}

.room-status {
  text-align: center;
  color: #8892a4;
  font-size: 13px;
  margin-bottom: 12px;
}

.room-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Cumulative Leaderboard === */

.cumulative-leaderboard {
  margin-top: 12px;
  border-top: 1px solid #1a2a4c;
  padding-top: 10px;
}

.cum-lb-title {
  font-size: 13px;
  font-weight: 700;
  color: #8892a4;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}

.cum-lb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: #c5cad4;
  border-bottom: 1px solid #0d1f3c;
}

.cum-lb-row:last-child {
  border-bottom: none;
}

.cum-lb-row.you {
  background: rgba(240, 180, 41, 0.12);
  border-radius: 4px;
}

.cum-lb-row.you .cum-lb-name,
.cum-lb-row.you .cum-lb-total {
  color: #f0b429;
  font-weight: 700;
}

.cum-lb-row.you .cum-lb-rank {
  color: #f0b429;
}

.cum-lb-rank {
  width: 28px;
  font-weight: 700;
  color: #6a7a96;
}

.cum-lb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cum-lb-round-word {
  font-size: 11px;
  color: #6a7a96;
  min-width: 50px;
  text-align: right;
}

.cum-lb-round-score {
  font-size: 11px;
  color: #4ecdc4;
  min-width: 30px;
  text-align: right;
}

.cum-lb-total {
  font-weight: 700;
  min-width: 36px;
  text-align: right;
  color: #f5f0e8;
}

/* === Title Screen — Daily Quests === */
#title-quests {
  margin-top: 20px;
  width: 100%;
}

#title-crowns {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 8px;
}

.quest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #1e2744;
  margin: 4px 0;
  font-size: 13px;
}

.quest-status {
  flex-shrink: 0;
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.quest-desc {
  flex: 1;
  color: #ccd;
  min-width: 0;
}

.quest-progress {
  font-size: 12px;
  font-weight: 600;
  color: #8899bb;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.quest-reward {
  font-size: 11px;
  font-weight: 700;
  color: #0a0e1a;
  background: #ffc107;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.quest-row.completed {
  opacity: 0.55;
}

.quest-row.completed .quest-desc {
  text-decoration: line-through;
  color: #6678a0;
}

.quest-row.completed .quest-reward {
  background: #4caf50;
  color: #ffffff;
}

/* === Crown Toast === */
.storage-toast.crown-toast {
  background: rgba(40, 30, 10, 0.95);
  border: 1px solid #ffc107;
  color: #ffd700;
}

/* === Energy Empty Card === */
.energy-empty-card {
  padding: 8px 0;
  text-align: center;
}

.energy-empty-heading {
  font-size: 22px;
  font-weight: 800;
  color: #ff6b6b;
  margin-bottom: 8px;
}

.energy-empty-msg {
  font-size: 14px;
  color: #8899bb;
  margin-bottom: 16px;
}

.energy-regen-timer {
  font-size: 14px;
  font-weight: 600;
  color: #44ddff;
  margin-bottom: 16px;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
}

.energy-refill-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.energy-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === Energy State Indicators (lobby user bar) === */
.lobby-energy.energy-low {
  color: #ffaa00;
}

.lobby-energy.energy-empty {
  color: #ff5555;
}

/* === Crown Earnings in Match Summary === */
.summary-crowns-earned {
  font-size: 15px;
  font-weight: 700;
  color: #ffd700;
  text-align: center;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: 8px;
}

.summary-crowns-icon {
  font-weight: 800;
}

/* === Match Summary — Quest Results === */
.summary-quests {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #2a3560;
}

.summary-quests.hidden {
  display: none;
}

.summary-quests-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffc107;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  animation: pulse 0.8s ease-in-out infinite alternate;
}

.quest-complete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.25);
  margin: 4px 0;
  font-size: 13px;
}

.quest-complete-desc {
  color: #dde;
  flex: 1;
  text-align: left;
}

.quest-complete-reward {
  font-weight: 700;
  color: #ffc107;
  flex-shrink: 0;
  margin-left: 8px;
}

.quest-crowns-earned {
  font-size: 14px;
  font-weight: 700;
  color: #ffc107;
  margin-top: 8px;
  text-align: center;
}

/* === Account Panel === */
#account-panel {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.88);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#account-panel.open {
  pointer-events: auto;
  opacity: 1;
}

.ap-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: #1a2040;
  border: 1px solid #2a3560;
  border-radius: 6px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  margin-top: 4px;
}
.ap-input:focus {
  outline: none;
  border-color: #ffc107;
}

.ap-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ap-info-value {
  color: #ccd;
  font-size: 14px;
}

.ap-pw-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ap-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ap-btn-save,
.ap-btn-pw {
  background: #ffc107;
  color: #0a0e1a;
}
.ap-btn-save:hover,
.ap-btn-pw:hover {
  background: #ffcd38;
}
.ap-btn-close {
  background: #2a3560;
  color: #ccd;
  flex: 1;
}
.ap-btn-close:hover {
  background: #354070;
}
.ap-btn-logout {
  background: #ff4444;
  color: #fff;
}
.ap-btn-logout:hover {
  background: #ff6666;
}

.ap-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #1e2744;
}

.ap-msg {
  font-size: 12px;
}
.ap-msg-ok {
  color: #4caf50;
}
.ap-msg-error {
  color: #ff5555;
}

/* --- Icon Picker --- */
.account-icon-section {
  margin-bottom: 12px;
}
.account-section-label {
  font-size: 13px;
  font-weight: 600;
  color: #8899bb;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.account-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.icon-option {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #2a3560;
  background: #1a2040;
  cursor: pointer;
  padding: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, opacity 0.15s;
}
.icon-option img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0) invert(0.92) sepia(0.08) saturate(0.3);
}
.icon-option:hover {
  border-color: #4ecdc4;
}
.icon-option.selected {
  border-color: #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.4);
}
.icon-option.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
.icon-option.locked:hover {
  border-color: #2a3560;
}
.icon-lock-overlay {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
.ap-icon-toast {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2040;
  color: #ccd;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #2a3560;
  pointer-events: none;
  z-index: 10;
  animation: ap-toast-in 0.15s ease-out;
}
@keyframes ap-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* === Signup Prompt === */
.signup-prompt-card {
  text-align: center;
  padding: 16px 0;
}
.signup-prompt-heading {
  font-size: 20px;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 8px;
}
.signup-prompt-msg {
  font-size: 14px;
  color: #8899bb;
  margin-bottom: 16px;
  line-height: 1.4;
}
#signup-prompt-create {
  margin-bottom: 8px;
}

/* === Landing Page (unauthenticated) === */
#landing-page {
  position: fixed;
  inset: 0;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 160;
}

#landing-page.hidden {
  display: none;
}

#landing-card {
  text-align: center;
  width: 92%;
  max-width: 380px;
}

#landing-name {
  font-size: 48px;
  font-weight: 900;
  color: #ffc107;
  letter-spacing: 6px;
  margin-bottom: 4px;
}

#landing-subtitle {
  font-size: 14px;
  color: #6678a0;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

#landing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
}

#landing-features li {
  font-size: 14px;
  color: #8899bb;
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}

#landing-features li::before {
  content: '\2022';
  color: #ffc107;
  position: absolute;
  left: 0;
  font-weight: 700;
}

#landing-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.landing-btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.landing-btn.primary {
  background: #ffc107;
  color: #0a0e1a;
}

.landing-btn.primary:hover {
  background: #ffcd38;
}

.landing-btn.secondary {
  background: #1a2040;
  color: #8899bb;
  border: 1px solid #2a3560;
}

.landing-btn.secondary:hover {
  background: #222b50;
}

.landing-btn.guest {
  margin-top: 12px;
  background: transparent;
  color: #4ecdc4;
  border: 1px solid #4ecdc4;
  padding: 12px 20px;
  width: 100%;
}
.landing-btn.guest:hover {
  background: rgba(78, 205, 196, 0.1);
}

#landing-badge {
  display: inline-block;
  padding: 4px 16px;
  background: #1a2040;
  border: 1px solid #2a3560;
  border-radius: 20px;
  font-size: 12px;
  color: #6678a0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Hide energy display in lobby during closed beta */
.lobby-energy {
  display: none !important;
}

/* === Lobby Waitlist === */
.lobby-waitlist-link {
  margin-top: 8px;
  text-align: center;
}

.lobby-waitlist-link a {
  color: #6678a0;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.lobby-waitlist-link a:hover {
  color: #8899bb;
}

.waitlist-card {
  padding: 16px 0;
}

.waitlist-heading {
  font-size: 20px;
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 8px;
}

.waitlist-msg {
  font-size: 14px;
  color: #8899bb;
  margin-bottom: 16px;
  line-height: 1.4;
}

.waitlist-confirmation {
  padding: 16px 0;
  text-align: center;
}

.waitlist-confirmation.hidden {
  display: none;
}

#lobby-waitlist textarea {
  width: 100%;
  padding: 10px 14px;
  background: #1a2040;
  border: 1px solid #2a3560;
  border-radius: 8px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 10px;
}

#lobby-waitlist textarea:focus {
  outline: none;
  border-color: #ffc107;
}

/* === Draft Screen === */
#draft-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0a1628;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#draft-screen.hidden {
  display: none;
}

#draft-header {
  margin-bottom: clamp(16px, 4vh, 32px);
}

#draft-progress {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#draft-options {
  display: flex;
  gap: clamp(6px, 2vw, 14px);
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: clamp(20px, 5vh, 40px);
  padding: 0 8px;
}

.draft-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 17vw, 100px);
  min-height: clamp(88px, 24vw, 136px);
  padding: clamp(8px, 2.5vw, 16px) clamp(6px, 2vw, 12px);
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, opacity 0.3s;
  font-family: inherit;
  color: #ffffff;
}

@media (hover: hover) {
  .draft-card:hover {
    border-color: #4ecdc4;
    transform: scale(1.05);
  }
}

.draft-card:active {
  transform: scale(0.97);
}

.draft-card.has-effect {
  border-color: #f0b429;
}

.draft-card.draft-picked {
  border-color: #4ecdc4;
  background: #1a3040;
  transform: scale(1.08);
  animation: draft-pick-pop 0.3s ease-out;
}

.draft-card.draft-fade {
  opacity: 0.3;
  transform: scale(0.95);
  pointer-events: none;
}

@keyframes draft-pick-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1.08); }
}

.draft-card-letter {
  font-size: clamp(24px, 7vw, 40px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.draft-card-value {
  font-size: clamp(13px, 3.5vw, 18px);
  font-weight: 700;
  color: #ffc107;
  margin-bottom: 4px;
}

.draft-card-effect {
  font-size: clamp(9px, 2.5vw, 12px);
  font-weight: 600;
  padding: 3px 6px;
  border: 1px solid;
  border-radius: 6px;
  text-align: center;
  line-height: 1.2;
}

/* Draft rack (below options) */
#draft-rack {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  justify-content: center;
  min-height: 56px;
  touch-action: none;
}

.draft-rack-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 11vw, 56px);
  height: clamp(52px, 14vw, 66px);
  background: #1a2444;
  border: 1px solid #2a3560;
  border-radius: 10px;
  animation: draft-rack-pop 0.25s ease-out;
  touch-action: none;
  cursor: grab;
  transition: transform 0.15s, border-color 0.15s, opacity 0.15s;
}

.draft-rack-tile .letter {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
}

.draft-rack-tile .value {
  font-size: clamp(11px, 2.8vw, 13px);
  color: #ffc107;
}

.draft-rack-tile.has-bonus {
  border-color: var(--bonus-color, #ffc107);
}

@keyframes draft-rack-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* === Cluster Tiles (draft rack + tray) === */
.draft-rack-tile.cluster-tile {
  background: linear-gradient(135deg, #1a2844, #1e2c50);
  border: 2px solid #f0b429;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.25);
  width: auto;
  min-width: 52px;
  padding: 0 10px;
}

.tray-slot.cluster-tile {
  border: 2px solid #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.2);
  width: auto;
  min-width: 44px;
  padding: 0 6px;
  flex-shrink: 0;
}

.tray-slot.cluster-tile .letter {
  letter-spacing: 3px;
  font-size: clamp(16px, 4.5vw, 22px);
}

.tray-slot.cluster-tile .value {
  font-size: clamp(9px, 2.5vw, 12px);
  letter-spacing: 1px;
}

/* Cluster tiles in build row — connected appearance */
.build-tile.cluster-tile {
  border-color: #f0b429;
  box-shadow: 0 0 4px rgba(240, 180, 41, 0.3);
}

.build-tile.cluster-start {
  border-right: none;
  border-radius: 8px 0 0 8px;
}

.build-tile.cluster-cont {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.build-tile.cluster-end {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.build-tile.cluster-start.cluster-end {
  border: 2px solid #f0b429;
  border-radius: 8px;
}

/* === Cluster Banner (draft screen header) === */
.cluster-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  margin: 8px 16px;
  background: rgba(240, 180, 41, 0.08);
  border: 1px solid rgba(240, 180, 41, 0.25);
  border-radius: 12px;
}

.cluster-banner-label {
  font-size: clamp(10px, 2.5vw, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #f0b429;
}

.cluster-banner-letters {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  letter-spacing: 6px;
  color: #f0b429;
  text-shadow: 0 0 8px rgba(240, 180, 41, 0.4);
}

.cluster-banner-hint {
  font-size: clamp(11px, 2.8vw, 14px);
  color: #8a94a8;
}

/* Cluster tiles in build row */
.build-tile.cluster-tile {
  border-color: #f0b429;
  box-shadow: 0 0 4px rgba(240, 180, 41, 0.3);
}

/* Cluster hint in build phase */
.cluster-hint {
  text-align: center;
  font-size: 12px;
  color: #8a94a8;
  padding: 6px 0;
}

.cluster-hint-letters {
  font-weight: 800;
  color: #f0b429;
  letter-spacing: 2px;
}

/* === Result Screen === */
#result-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 22, 40, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#result-screen.hidden {
  display: none;
}

#result-card {
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 20px;
  padding: clamp(28px, 6vw, 48px) clamp(24px, 5vw, 40px);
  max-width: 480px;
  width: 100%;
  text-align: center;
}

#result-card h2 {
  font-size: clamp(18px, 4.5vw, 24px);
  color: #8899bb;
  margin-bottom: clamp(16px, 4vh, 28px);
  text-transform: uppercase;
  letter-spacing: 3px;
}

.result-word {
  font-size: clamp(40px, 10vw, 64px);
  font-weight: 800;
  letter-spacing: clamp(4px, 1.5vw, 8px);
  margin-bottom: 12px;
  color: #4ecdc4;
}

.result-score-total {
  font-size: clamp(48px, 12vw, 72px);
  font-weight: 900;
  color: #ffc107;
  margin-bottom: 10px;
  line-height: 1;
}

.result-pts-label {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 600;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* === Score Tier Callout === */
.result-tier-callout {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 6px;
  color: #a0aec0;
  animation: tier-pop 0.6s ease-out;
}

.result-tier-callout.tier-bop { color: #a0aec0; font-size: clamp(16px, 4vw, 20px); }
.result-tier-callout.tier-megabop { color: #4ecdc4; font-size: clamp(18px, 4.5vw, 24px); }
.result-tier-callout.tier-nitrobop { color: #00e676; font-size: clamp(20px, 5vw, 28px); text-shadow: 0 0 10px rgba(0, 230, 118, 0.4); }
.result-tier-callout.tier-bippitybop { color: #f0b429; font-size: clamp(22px, 5.5vw, 32px); text-shadow: 0 0 15px rgba(240, 180, 41, 0.5); }
.result-tier-callout.tier-lexibop { color: #ff6bff; font-size: clamp(24px, 6vw, 36px); text-shadow: 0 0 20px rgba(255, 107, 255, 0.5); }
.result-tier-callout.tier-letterbop {
  font-size: clamp(28px, 7vw, 42px);
  background: linear-gradient(90deg, #f0b429, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  animation: tier-pop 0.6s ease-out, tier-glow 1.5s ease-in-out infinite;
}

/* Tier color on total score */
.result-score-total.tier-megabop { color: #4ecdc4; }
.result-score-total.tier-nitrobop { color: #00e676; }
.result-score-total.tier-bippitybop { color: #f0b429; }
.result-score-total.tier-lexibop { color: #ff6bff; }
.result-score-total.tier-letterbop { color: #f0b429; }

@keyframes tier-pop {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes tier-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.result-breakdown {
  text-align: left;
  margin-bottom: 24px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #1e2744;
  font-size: clamp(15px, 4vw, 18px);
}

.result-row span:last-child {
  font-weight: 800;
  font-size: clamp(18px, 4.5vw, 22px);
  color: #ffc107;
}

.result-row.letterbop-row {
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.15), rgba(78, 205, 196, 0.15));
  border: 1px solid #f0b429;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  animation: letterbop-glow 1.5s ease-in-out infinite;
}

.result-row.letterbop-row span:first-child {
  color: #f0b429;
  font-weight: 800;
  font-size: clamp(16px, 4.5vw, 20px);
  letter-spacing: 2px;
}

.result-row.letterbop-row span:last-child {
  color: #4ecdc4;
  font-size: clamp(16px, 4.5vw, 20px);
}

@keyframes letterbop-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(240, 180, 41, 0.3); }
  50% { box-shadow: 0 0 16px rgba(240, 180, 41, 0.5); }
}

.result-row.superbop-row {
  background: linear-gradient(90deg, rgba(78, 205, 196, 0.15), rgba(240, 180, 41, 0.15));
  border: 1px solid #4ecdc4;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  animation: superbop-glow 1.5s ease-in-out infinite;
}

.result-row.superbop-row span:first-child {
  color: #4ecdc4;
  font-weight: 800;
  font-size: clamp(16px, 4.5vw, 20px);
  letter-spacing: 2px;
}

.result-row.superbop-row span:last-child {
  color: #f0b429;
  font-size: clamp(16px, 4.5vw, 20px);
}

@keyframes superbop-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(78, 205, 196, 0.3); }
  50% { box-shadow: 0 0 16px rgba(78, 205, 196, 0.5); }
}

/* Subtotal row — thin separator line above */
.result-row.subtotal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 8px;
  margin-top: 4px;
}
.result-row.subtotal-row span:first-child {
  color: #8899bb;
  font-size: clamp(13px, 3.5vw, 16px);
  font-style: italic;
}
.result-row.subtotal-row.multiplied span:last-child {
  color: #f0b429;
  transition: color 0.3s;
}

/* Multiplier row — dramatic styling */
.result-row.multiplier-row {
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.1), rgba(230, 57, 70, 0.1));
  border: 1px solid #f0b429;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
}
.result-row.multiplier-row span:first-child {
  color: #f0b429;
  font-weight: 800;
  font-size: clamp(16px, 4.5vw, 22px);
  letter-spacing: 1px;
}
.result-row.multiplier-row span:last-child {
  color: #f0b429;
  font-weight: 900;
  font-size: clamp(22px, 5.5vw, 28px);
}

/* Multiplier reveal — scale + flash entrance */
.multiplier-reveal {
  animation: multiplier-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes multiplier-entrance {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.result-optimal {
  font-size: clamp(13px, 3.5vw, 16px);
  color: #8899bb;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #0d1628;
  border-radius: 10px;
}

.result-optimal.perfect {
  color: #4ecdc4;
  font-weight: 700;
}

.result-rank {
  text-align: center;
  margin: 16px 0 6px;
  font-size: clamp(14px, 3.5vw, 18px);
  color: #c0cce0;
}

.result-rank-position {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 700;
  color: #f0b429;
  margin-right: 8px;
}

.result-rank-detail {
  font-size: clamp(13px, 3.5vw, 16px);
  color: #8899bb;
}

.result-crowns {
  text-align: center;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  color: #f0b429;
  margin: 6px 0 14px;
}

#result-play-again {
  width: 100%;
  padding: clamp(14px, 3.5vw, 20px);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  background: #4ecdc4;
  color: #0a1628;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

#result-play-again:hover {
  background: #6ee0d8;
}

/* === Hub Play Button === */
.hub-play-btn {
  width: 100%;
  max-width: 280px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  background: #4ecdc4;
  color: #0a1628;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin: 20px auto;
  display: block;
  transition: background 0.15s, transform 0.1s;
}

.hub-play-btn:hover {
  background: #6ee0d8;
  transform: scale(1.02);
}

.hub-play-btn:active {
  transform: scale(0.98);
}

.hub-replay-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: #4ecdc4;
  border: 1px solid #4ecdc4;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.hub-replay-btn:hover {
  background: rgba(78, 205, 196, 0.15);
}

/* === Daily Hub === */
#daily-hub {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #0a1628;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#daily-hub.hidden {
  display: none;
}

.hub-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1e2744;
}

.hub-date {
  font-size: 14px;
  color: #6678a0;
  letter-spacing: 0.5px;
}

.hub-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.hub-username {
  font-size: 16px;
  font-weight: 700;
  color: #f5f0e8;
}

.hub-gear {
  background: none;
  border: none;
  color: #6678a0;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  transition: color 0.15s;
}

.hub-gear:hover { color: #ffc107; }

.hub-body {
  padding: 16px 20px 40px;
  max-width: 420px;
  margin: 0 auto;
}

.hub-puzzle-card {
  text-align: center;
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 16px;
  padding: 28px 20px;
  margin-bottom: 20px;
}

.hub-puzzle-label {
  font-size: 12px;
  font-weight: 700;
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.hub-title {
  font-size: 42px;
  font-weight: 900;
  color: #ffc107;
  letter-spacing: 6px;
  margin-bottom: 8px;
}

.hub-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.hub-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.25);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #f0b429;
}

.hub-completed {
  margin-top: 12px;
}

.hub-completed-word {
  font-size: 28px;
  font-weight: 800;
  color: #4ecdc4;
  letter-spacing: 3px;
}

.hub-completed-score {
  font-size: 20px;
  font-weight: 700;
  color: #ffc107;
  margin-top: 4px;
}

.hub-completed-label {
  font-size: 13px;
  color: #4caf50;
  margin-top: 4px;
  font-weight: 600;
}

/* Stats row */
.hub-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.hub-stat {
  flex: 1;
  text-align: center;
  background: #141e38;
  border: 1px solid #1e2744;
  border-radius: 10px;
  padding: 12px 8px;
}

.hub-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #f5f0e8;
  font-variant-numeric: tabular-nums;
}

.hub-streak-value {
  color: #ffc107;
}

.hub-stat-label {
  font-size: 11px;
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* History bars */
.hub-history {
  margin-bottom: 20px;
}

.hub-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.hub-history-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 100px;
}

.hub-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.hub-bar-value {
  font-size: 11px;
  font-weight: 700;
  color: #f5f0e8;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.hub-bar {
  width: 100%;
  min-height: 4px;
  background: linear-gradient(to top, #4ecdc4, #3ab5ad);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease-out;
}

.hub-bar-date {
  font-size: 10px;
  color: #6678a0;
  margin-top: 4px;
  white-space: nowrap;
}

/* Leaderboard */
.hub-leaderboard {
  margin-bottom: 20px;
}

.hub-lb-loading,
.hub-lb-empty {
  text-align: center;
  font-size: 13px;
  color: #4a5580;
  padding: 16px 0;
}

.hub-lb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #141e38;
  border-radius: 6px;
  font-size: 14px;
}

.hub-lb-row.me {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.hub-lb-rank {
  min-width: 24px;
  font-weight: 700;
  color: #6678a0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hub-lb-row.me .hub-lb-rank { color: #ffc107; }

.hub-lb-name {
  color: #c0cce0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-lb-row.me .hub-lb-name { color: #ffc107; font-weight: 700; }

.hub-lb-word {
  font-size: 12px;
  color: #4a5580;
  letter-spacing: 1px;
  min-width: 50px;
  text-align: center;
}

.hub-lb-score {
  min-width: 32px;
  text-align: right;
  font-weight: 700;
  color: #ffc107;
  font-variant-numeric: tabular-nums;
}

/* === Admin Hub Section === */
.hub-admin-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.hub-admin-section.hub-admin-top {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 12px;
  border-top: none;
}

.hub-weeksim-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.hub-weeksim-btn:hover {
  background: rgba(78, 205, 196, 0.25);
}

/* === Hub Leaderboard More Button === */
.hub-lb-more {
  display: block;
  margin: 10px auto 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(78, 205, 196, 0.12);
  color: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.hub-lb-more:hover {
  background: rgba(78, 205, 196, 0.22);
}

/* === Full Leaderboard Screen === */
#leaderboard-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
}
#leaderboard-screen.hidden {
  display: none;
}

.lb-overlay {
  width: 100%;
  height: 100%;
  background: rgba(10, 22, 40, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-panel {
  width: min(480px, 92vw);
  max-height: 85vh;
  background: #0f1d35;
  border: 1px solid rgba(78, 205, 196, 0.15);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
}

.lb-title {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  color: #f5f0e8;
  margin: 0;
}

.lb-close {
  background: none;
  border: none;
  color: #6678a0;
  font-size: 28px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.lb-close:hover {
  color: #f5f0e8;
}

.lb-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lb-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6678a0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lb-tab:hover {
  color: #a0b4d0;
}
.lb-tab.active {
  color: #4ecdc4;
  border-bottom-color: #4ecdc4;
}

.lb-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.lb-date {
  font-size: 13px;
  color: #6678a0;
  text-align: center;
  margin-bottom: 14px;
}

.lb-loading, .lb-empty {
  text-align: center;
  color: #6678a0;
  font-size: 14px;
  padding: 30px 0;
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-row {
  display: grid;
  grid-template-columns: 36px 24px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: clamp(13px, 3.2vw, 15px);
  color: #c0cde0;
}
.lb-row:nth-child(-n+3) {
  background: rgba(240, 180, 41, 0.06);
}

.lb-me {
  background: rgba(78, 205, 196, 0.12) !important;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

.lb-rank {
  font-weight: 700;
  color: #f0b429;
  text-align: center;
}
.lb-row:nth-child(n+4) .lb-rank {
  color: #6678a0;
}

.lb-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-word {
  font-weight: 500;
  color: #8899b8;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

.lb-weekly-detail {
  font-size: 0.85em;
  color: #6678a0;
}

.lb-score {
  font-weight: 700;
  color: #f0b429;
  text-align: right;
  min-width: 36px;
}

/* Leaderboard profile icons */
.lb-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #162040;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.lb-icon img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(0.92) sepia(0.08) saturate(0.3);
}
.lb-icon-letter {
  font-size: 12px;
  font-weight: 700;
  color: #f5f0e8;
  line-height: 1;
}
.lb-icon-me {
  background: rgba(255, 193, 7, 0.25);
  border: 1px solid rgba(255, 193, 7, 0.5);
}
.lb-icon-me .lb-icon-letter {
  color: #ffc107;
}

/* Leaderboard name column with slogan */
.lb-name-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.lb-slogan {
  font-size: 11px;
  color: #6678a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-weight: 400;
}

/* Hub mini-leaderboard icons & slogans */
.hub-lb-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #162040;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.hub-lb-icon img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(0.92) sepia(0.08) saturate(0.3);
}
.hub-lb-icon .hub-lb-icon-letter {
  font-size: 10px;
  font-weight: 700;
  color: #f5f0e8;
  line-height: 1;
}
.hub-lb-icon-me {
  background: rgba(255, 193, 7, 0.25);
  border: 1px solid rgba(255, 193, 7, 0.5);
}
.hub-lb-icon-me .hub-lb-icon-letter {
  color: #ffc107;
}
.hub-lb-name-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.hub-lb-slogan {
  font-size: 10px;
  color: #6678a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

/* === Player Identity: Frames === */
.frame-silver-ring {
  border: 2px solid #8899aa !important;
}
.frame-gold-glow {
  border: 2px solid #f0b429 !important;
  box-shadow: 0 0 6px rgba(240, 180, 41, 0.5);
}
.frame-teal-pulse {
  border: 2px solid #4ecdc4 !important;
  animation: frame-pulse-teal 2s ease-in-out infinite;
}
@keyframes frame-pulse-teal {
  0%, 100% { box-shadow: 0 0 4px rgba(78, 205, 196, 0.3); }
  50% { box-shadow: 0 0 10px rgba(78, 205, 196, 0.7); }
}
.frame-crimson-border {
  border: 2px solid #e63946 !important;
  box-shadow: 0 0 4px rgba(230, 57, 70, 0.4);
}
.frame-diamond-sparkle {
  border: 2px solid #a8d8ea !important;
  animation: frame-sparkle 3s ease-in-out infinite;
}
@keyframes frame-sparkle {
  0%, 100% { box-shadow: 0 0 8px rgba(168, 216, 234, 0.5); }
  33% { box-shadow: 0 0 12px rgba(240, 180, 41, 0.6); }
  66% { box-shadow: 0 0 12px rgba(78, 205, 196, 0.6); }
}
.frame-inferno {
  border: 2px solid #ff6b35 !important;
  animation: frame-inferno 2s ease-in-out infinite;
}
@keyframes frame-inferno {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 107, 53, 0.4); }
  50% { box-shadow: 0 0 14px rgba(230, 57, 70, 0.7); }
}
.frame-champion-crown {
  border: 2px solid #f0b429 !important;
  animation: frame-champion 2.5s ease-in-out infinite;
}
@keyframes frame-champion {
  0%, 100% { box-shadow: 0 0 8px rgba(240, 180, 41, 0.4); }
  50% { box-shadow: 0 0 16px rgba(240, 180, 41, 0.8), 0 0 4px rgba(78, 205, 196, 0.4); }
}

/* === Player Identity: Title Badges === */
.lb-title-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-block;
}
.title-default {
  background: rgba(96, 112, 140, 0.3);
  color: #8899aa;
}
.title-score {
  background: rgba(240, 180, 41, 0.15);
  color: #f0b429;
}
.title-streak {
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
}
.title-milestone {
  background: rgba(96, 140, 200, 0.15);
  color: #6e9ad0;
}
.title-mastery {
  background: rgba(168, 100, 230, 0.15);
  color: #b080e0;
}
.title-rare {
  background: rgba(240, 180, 41, 0.2);
  color: #f0b429;
  border: 1px solid rgba(240, 180, 41, 0.3);
}
.title-ultra {
  background: linear-gradient(90deg, rgba(240, 180, 41, 0.2), rgba(78, 205, 196, 0.2));
  color: #f5f0e8;
  border: 1px solid rgba(240, 180, 41, 0.4);
}

/* === Account Panel: Frame Picker === */
.account-frame-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.frame-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(20, 30, 60, 0.6);
  border: 2px solid #2a3560;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
  min-width: 60px;
}
.frame-option:hover { border-color: #4ecdc4; }
.frame-option.selected { border-color: #f0b429; box-shadow: 0 0 8px rgba(240, 180, 41, 0.4); }
.frame-option.locked { opacity: 0.4; cursor: not-allowed; }
.frame-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a1628;
  box-sizing: border-box;
}
.frame-option-label {
  font-size: 9px;
  color: #8899aa;
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Account Panel: Title Picker === */
.account-title-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.title-option {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(20, 30, 60, 0.6);
  border: 1px solid #2a3560;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 2px;
}
.title-option:hover { border-color: #4ecdc4; }
.title-option.selected { border-color: #f0b429; box-shadow: 0 0 6px rgba(240, 180, 41, 0.3); }
.title-option.locked { opacity: 0.4; cursor: not-allowed; }
.title-lock-overlay { font-size: 11px; }

/* === Result Screen Buttons === */
.result-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.result-btn-secondary {
  padding: 12px 20px;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 600;
  background: rgba(78, 205, 196, 0.12);
  color: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.result-btn-secondary:hover {
  background: rgba(78, 205, 196, 0.22);
}

/* === Personal Best on Result Screen === */
.result-pb {
  text-align: center;
  font-size: clamp(14px, 3.5vw, 16px);
  color: #6678a0;
  margin: 10px 0 14px;
  padding: 8px;
}

.result-pb.new-pb {
  color: #ffd700;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 20px);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  animation: pb-pop 0.5s ease-out;
}

.pb-prev {
  font-size: 12px;
  color: #6678a0;
  font-weight: 400;
}

@keyframes pb-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* === Result Screen Choreography === */

/* Hidden state for choreographed reveal */
.result-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* Word entrance — scale bounce */
.result-word-animate {
  animation: word-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes word-entrance {
  0% { opacity: 0; transform: scale(0.6) translateY(10px); }
  60% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Row entrance — slide from left with overshoot */
.result-row-reveal {
  animation: row-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes row-entrance {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Total score entrance — scale up */
.result-total-reveal {
  animation: total-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes total-entrance {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Number landing pulse */
.num-land {
  animation: num-land-pulse 0.3s ease-out;
}

@keyframes num-land-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Tier callout pop — bigger entrance than before */
.result-tier-pop {
  animation: tier-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tier-entrance {
  0% { opacity: 0; transform: scale(0) rotate(-5deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Generic fade in for PB, rank, optimal, button */
.result-fade-in {
  animation: result-fade 0.4s ease-out forwards;
}

@keyframes result-fade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Legacy (unused but kept for non-choreographed paths like _showAlreadySubmitted) */
@keyframes result-slide-in {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === Draft Card Entrance Animation (staggered) === */
.draft-card {
  animation: card-entrance 0.35s ease-out both;
}

.draft-card:nth-child(1) { animation-delay: 0s; }
.draft-card:nth-child(2) { animation-delay: 0.06s; }
.draft-card:nth-child(3) { animation-delay: 0.12s; }
.draft-card:nth-child(4) { animation-delay: 0.18s; }
.draft-card:nth-child(5) { animation-delay: 0.24s; }

@keyframes card-entrance {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* === Build Phase Score Preview === */
#build-score-preview {
  text-align: center;
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 800;
  color: #ffc107;
  min-height: 32px;
  margin-top: 10px;
  transition: opacity 0.2s;
  font-variant-numeric: tabular-nums;
}

#build-score-preview.invalid {
  color: #6678a0;
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 600;
}

/* === Landing Page Entrance === */
#landing-card {
  animation: landing-entrance 0.6s ease-out;
}

@keyframes landing-entrance {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

#landing-name {
  animation: landing-glow 3s ease-in-out infinite alternate;
}

@keyframes landing-glow {
  0% { text-shadow: 0 0 8px rgba(255, 193, 7, 0.2); }
  100% { text-shadow: 0 0 20px rgba(255, 193, 7, 0.4), 0 0 40px rgba(255, 193, 7, 0.1); }
}

/* === Hub Entrance Animations === */
.hub-puzzle-card {
  animation: card-entrance 0.4s ease-out;
}

.hub-stats-row {
  animation: result-slide-in 0.5s ease-out;
}

/* === Tool Selection Screen === */
#tool-select-screen {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10, 22, 40, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#tool-select-screen.hidden {
  display: none;
}

.tool-select-header {
  text-align: center;
  margin-bottom: 24px;
}

.tool-select-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  color: #f5f0e8;
  margin-bottom: 6px;
}

.tool-select-subtitle {
  font-size: clamp(13px, 3.5vw, 16px);
  color: #6678a0;
}

.tool-select-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 420px;
  margin-bottom: 20px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(110px, 28vw, 140px);
  padding: clamp(14px, 3.5vw, 20px) clamp(10px, 2.5vw, 16px);
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  animation: card-entrance 0.35s ease-out both;
}

.tool-card:nth-child(1) { animation-delay: 0s; }
.tool-card:nth-child(2) { animation-delay: 0.08s; }
.tool-card:nth-child(3) { animation-delay: 0.16s; }

.tool-card:hover {
  border-color: #4ecdc4;
  transform: scale(1.05);
}

.tool-card:active {
  transform: scale(0.97);
}

.tool-card.selected {
  border-color: #ffc107;
  background: #1a2444;
}

.tool-card-icon {
  font-size: clamp(28px, 7vw, 36px);
  margin-bottom: 10px;
}

.tool-card-name {
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 700;
  color: #f5f0e8;
  text-align: center;
  margin-bottom: 4px;
}

.tool-card-desc {
  font-size: clamp(11px, 2.8vw, 13px);
  color: #6678a0;
  text-align: center;
  line-height: 1.3;
}

.tool-cluster-preview {
  margin-top: 6px;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  letter-spacing: 4px;
  color: #f0b429;
  text-align: center;
  text-shadow: 0 0 8px rgba(240, 180, 41, 0.4);
  border: 2px solid #f0b429;
  border-radius: 6px;
  padding: 4px 10px;
  background: rgba(240, 180, 41, 0.08);
}

.tool-rarity-badge {
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 8px;
  margin-bottom: 8px;
}

.tool-card.tool-rarity-rare {
  border-color: rgba(240, 180, 41, 0.4);
}

.tool-card.tool-rarity-rare.selected {
  border-color: #f0b429;
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.4);
}

.tool-card.tool-rarity-uncommon {
  border-color: rgba(78, 205, 196, 0.3);
}

.tool-card.tool-rarity-uncommon.selected {
  border-color: #4ecdc4;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.3);
}

.tool-select-confirm {
  padding: clamp(14px, 3.5vw, 20px) clamp(32px, 8vw, 48px);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 700;
  background: #4ecdc4;
  color: #0a1628;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, opacity 0.2s;
}

.tool-select-confirm:disabled {
  opacity: 0.4;
  cursor: default;
}

.tool-select-skip {
  margin-top: 14px;
  padding: 10px 20px;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 600;
  background: none;
  border: 1px solid #2a3560;
  border-radius: 8px;
  color: #6678a0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}

.tool-select-skip:hover {
  color: #8899bb;
}

/* === Active Tool Cards (during draft) === */
.tool-indicator {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  max-width: 420px;
}

.tool-use-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: rgba(240, 180, 41, 0.1);
  border: 1px solid rgba(240, 180, 41, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
  color: #f0b429;
  min-width: 100px;
  max-width: 160px;
}

.tool-use-card:active {
  transform: scale(0.97);
  background: rgba(240, 180, 41, 0.2);
}

.tool-use-card.used {
  opacity: 0.35;
  cursor: default;
}

.tool-use-card.tool-active {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.15);
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.35);
  color: #4ecdc4;
  animation: tool-active-pulse 1.5s ease-in-out infinite;
}

@keyframes tool-active-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(78, 205, 196, 0.35); }
  50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.55); }
}

/* Vowel swap — eligible rack tiles glow teal */
.draft-rack-tile.vowel-swap-eligible {
  border-color: #4ecdc4;
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
  cursor: pointer;
  animation: vowel-eligible-pulse 1.5s ease-in-out infinite;
}

@keyframes vowel-eligible-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(78, 205, 196, 0.4); }
  50% { box-shadow: 0 0 16px rgba(78, 205, 196, 0.6); }
}

.draft-rack-tile.vowel-swap-selected {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.2);
  box-shadow: 0 0 14px rgba(78, 205, 196, 0.6);
  transform: scale(1.1);
}

/* Vowel picker popup */
.vowel-picker {
  text-align: center;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(78, 205, 196, 0.1);
  border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: 10px;
  animation: vowel-picker-in 0.2s ease-out;
}

@keyframes vowel-picker-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vowel-picker-label {
  font-size: 12px;
  color: #4ecdc4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.vowel-picker-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.vowel-picker-btn {
  width: 44px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid #4ecdc4;
  background: #1a2444;
  color: #f5f0e8;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.vowel-picker-letter {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.vowel-picker-value {
  font-size: 11px;
  color: #ffc107;
  line-height: 1;
}

@media (hover: hover) {
  .vowel-picker-btn:hover {
    background: rgba(78, 205, 196, 0.2);
  }
}

.vowel-picker-btn:active {
  transform: scale(0.93);
  background: rgba(78, 205, 196, 0.3);
}

/* Wild Fire — eligible rack tiles glow orange */
.draft-rack-tile.wild-fire-eligible {
  border-color: #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.4);
  cursor: pointer;
  animation: wild-eligible-pulse 1.5s ease-in-out infinite;
}

@keyframes wild-eligible-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(240, 180, 41, 0.4); }
  50% { box-shadow: 0 0 16px rgba(240, 180, 41, 0.6); }
}

.tool-use-card.wild-fire-active {
  border-color: #f0b429;
  background: rgba(240, 180, 41, 0.15);
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.35);
  color: #f0b429;
  animation: wild-active-pulse 1.5s ease-in-out infinite;
}

@keyframes wild-active-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(240, 180, 41, 0.35); }
  50% { box-shadow: 0 0 20px rgba(240, 180, 41, 0.55); }
}

/* Wild tile appearance (tray + draft rack + build row) */
.draft-rack-tile.wild-tile,
.tray-slot.wild {
  border-color: #e63946;
  background: linear-gradient(135deg, #2a1020, #301828);
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.3);
}

.draft-rack-tile.wild-tile .letter,
.tray-slot.wild .letter {
  color: #e63946;
  font-size: 22px;
}

.build-tile.wild-tile {
  border-color: #e63946;
  background: linear-gradient(135deg, #2a1020, #301828);
  box-shadow: 0 0 6px rgba(230, 57, 70, 0.3);
}

.build-tile.wild-tile .letter {
  color: #e63946;
}

.tool-use-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.tool-use-icon {
  font-size: 16px;
}

.tool-use-name {
  font-size: 13px;
  font-weight: 700;
}

.tool-use-desc {
  font-size: 11px;
  color: #8899bb;
  text-align: center;
  line-height: 1.3;
}

/* === Mode Rules Banner (shown above build area) === */
#mode-rules {
  background: linear-gradient(135deg, #162038 0%, #1a2848 100%);
  border: 1px solid #2a3a5c;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 8px 8px;
  text-align: center;
}
#mode-rules.hidden { display: none; }
#mode-rules .mode-rules-title {
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 700;
  color: #f0b429;
  margin-bottom: 4px;
}
#mode-rules .mode-rules-text {
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  color: #99aabb;
  line-height: 1.4;
}

/* === Effect Info Boxes (above tray during build) === */
#effects-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

#effects-info:empty { display: none; }

.effect-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(30, 39, 68, 0.8);
  border-left: 3px solid var(--effect-color, #4ecdc4);
  border-radius: 6px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: #8899bb;
  line-height: 1.3;
  transition: background 0.2s;
}

.effect-info-box.active {
  background: rgba(30, 39, 68, 1);
  color: #c0cce0;
}

.effect-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0a0e1a;
  flex-shrink: 0;
}

.effect-info-text {
  flex: 1;
}

.effect-info-text strong {
  color: #f5f0e8;
}

.effect-info-active {
  color: #4ecdc4;
  font-weight: 700;
  font-size: 11px;
}

/* === Draft Rack Drag === */
.draft-rack-tile.rack-dragging {
  opacity: 0.4;
}

.draft-rack-tile.rack-drop-target {
  border-color: #4ecdc4;
  transform: scale(1.1);
}

.draft-rack-effect {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* === Letter Swap Tool — rack tile discard highlight === */
.draft-rack-tile.letter-swap-eligible {
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.5), inset 0 0 6px rgba(78, 205, 196, 0.15);
  border-color: #4ecdc4;
  cursor: pointer;
}
.draft-rack-tile.letter-swap-ineligible {
  opacity: 0.3;
  pointer-events: none;
}
.letter-swap-tap-label {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  color: #4ecdc4;
  letter-spacing: 1px;
  animation: wild-fire-tap-bounce 0.8s ease-in-out infinite;
}

/* === Card Swap Animations === */
.draft-card.swap-out-up {
  animation: swap-slide-out-up 0.2s ease-in forwards;
}
.draft-card.swap-in-down {
  animation: swap-slide-in-down 0.3s ease-out;
}

@keyframes swap-slide-out-up {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-80px); opacity: 0; }
}
@keyframes swap-slide-in-down {
  0% { transform: translateY(80px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/* === #140 — Last Pick Indicator === */
#draft-progress.last-pick {
  color: #e63946;
  font-size: clamp(22px, 5.5vw, 28px);
  animation: last-pick-pulse 0.8s ease-in-out infinite alternate;
  text-shadow: 0 0 12px rgba(230, 57, 70, 0.5);
}

@keyframes last-pick-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

.tool-use-card.tool-last-chance {
  animation: tool-last-chance-pulse 0.6s ease-in-out infinite alternate;
  border-color: #e63946;
  box-shadow: 0 0 10px rgba(230, 57, 70, 0.4);
}

@keyframes tool-last-chance-pulse {
  0% { box-shadow: 0 0 10px rgba(230, 57, 70, 0.4); transform: scale(1); }
  100% { box-shadow: 0 0 18px rgba(230, 57, 70, 0.6); transform: scale(1.04); }
}

/* === #145 — Wild Fire Stronger Signalling === */
.draft-rack-tile.wild-fire-ineligible {
  opacity: 0.3;
  pointer-events: none;
}

.wild-fire-tap-label {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  color: #f0b429;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: wild-tap-bounce 0.8s ease-in-out infinite alternate;
}

@keyframes wild-tap-bounce {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-2px); }
}

/* === #141 — Rack Effect Tooltips === */
.draft-rack-tile.has-tooltip {
  position: relative;
}

.rack-effect-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2444;
  border: 1px solid #4ecdc4;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #c0cce0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.rack-effect-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #4ecdc4;
}

.draft-rack-tile.has-tooltip:hover .rack-effect-tooltip {
  opacity: 1;
}

/* Touch devices: show tooltip on active press */
@media (hover: none) {
  .draft-rack-tile.has-tooltip:active .rack-effect-tooltip {
    opacity: 1;
  }
}

/* === #142 — Sunday Rarity Badges === */
.sunday-rarity-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 6px;
}

.sunday-rarity-common { border-color: #a0aec0; }
.sunday-rarity-uncommon { border-color: #4ecdc4; }
.sunday-rarity-rare { border-color: #f0b429; }

.sunday-tool-card.selected {
  border-color: #f0b429;
  background: #1a2444;
  box-shadow: 0 0 16px rgba(240, 180, 41, 0.3);
  transform: scale(1.03);
}

.sunday-tool-selected-count {
  font-size: 11px;
  font-weight: 700;
  color: #f0b429;
  margin-top: 6px;
  min-height: 16px;
}

/* Debug tap zone — bottom-right corner of hub, invisible */
.hub-debug-tap {
  position: fixed;
  bottom: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  z-index: 151;
}

/* === Debug Panel === */
#debug-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(10, 14, 26, 0.97);
  border-top: 2px solid #f0b429;
  padding: 12px 16px 20px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#debug-panel.hidden { display: none; }

.dbg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dbg-title {
  font-size: 14px;
  font-weight: 700;
  color: #f0b429;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dbg-close {
  background: none;
  border: none;
  color: #6678a0;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.dbg-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1e2744;
}

.dbg-section:last-child { border-bottom: none; }

.dbg-label {
  font-size: 12px;
  color: #8899bb;
  margin-bottom: 8px;
  font-weight: 600;
}

.dbg-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.dbg-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  background: #1a2040;
  color: #c0cce0;
  border: 1px solid #2a3560;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
}

.dbg-btn:active { background: #222b50; }
.dbg-btn.gold { color: #f0b429; border-color: rgba(240, 180, 41, 0.4); }
.dbg-btn.teal { color: #4ecdc4; border-color: rgba(78, 205, 196, 0.4); }
.dbg-btn.red { color: #e63946; border-color: rgba(230, 57, 70, 0.3); }

/* === Weekly Progress (Hub) === */
.hub-weekly-progress {
  margin: 0 20px 16px;
  padding: 12px 16px;
  background: #111b32;
  border: 1px solid #1e2744;
  border-radius: 10px;
}

.hub-week-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.hub-day-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a2444;
  border: 2px solid #2a3560;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.hub-day-dot.completed {
  background: #4ecdc4;
  border-color: #4ecdc4;
}

.hub-day-dot.completed .hub-day-label {
  color: #0a1628;
}

.hub-day-dot.today {
  border-color: #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.3);
}

.hub-day-dot.sunday {
  border-radius: 6px;
}

.hub-day-dot.sunday.completed {
  background: #f0b429;
  border-color: #f0b429;
}

.hub-day-label {
  font-size: 11px;
  font-weight: 700;
  color: #6678a0;
}

.hub-week-tools {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  color: #f0b429;
  font-weight: 600;
}

.hub-participation-bonus {
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  color: #4ecdc4;
}
.hub-participation-bonus strong {
  color: #f0b429;
  font-size: 15px;
}
.hub-participation-bonus.muted {
  color: #556;
  font-style: italic;
}
.hub-participation-detail {
  color: #889;
  font-size: 11px;
}

.result-row.participation-row {
  color: #4ecdc4;
  font-weight: 700;
}

/* Participation modifier card (Mon-Sat result screen) */
.result-participation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px auto 8px;
  padding: clamp(10px, 3vw, 14px) clamp(16px, 5vw, 24px);
  background: rgba(78, 205, 196, 0.08);
  border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 10px;
  max-width: 260px;
}
.rpc-label {
  font-size: clamp(11px, 3vw, 13px);
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.rpc-value {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  color: #4ecdc4;
  line-height: 1.1;
}
.rpc-detail {
  font-size: clamp(11px, 2.8vw, 13px);
  color: #6678a0;
  margin-top: 2px;
}

/* === Sunday Tool Select === */
#sunday-tool-select {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(10, 22, 40, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#sunday-tool-select.hidden {
  display: none;
}

.sunday-select-header {
  text-align: center;
  margin-bottom: 24px;
}

.sunday-select-title {
  font-size: 22px;
  font-weight: 800;
  color: #f0b429;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sunday-select-subtitle {
  font-size: 14px;
  color: #6678a0;
}

.sunday-select-tools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
  margin-bottom: 20px;
}

.sunday-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  padding: 16px 12px;
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}

.sunday-tool-card:hover {
  border-color: #4ecdc4;
  transform: scale(1.05);
}

.sunday-tool-card.selected {
  border-color: #f0b429;
  background: #1a2444;
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.2);
}

.sunday-tool-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.sunday-tool-name {
  font-size: 13px;
  font-weight: 700;
  color: #f5f0e8;
  text-align: center;
  margin-bottom: 4px;
}

.sunday-tool-desc {
  font-size: 11px;
  color: #6678a0;
  text-align: center;
  line-height: 1.3;
}

.sunday-tool-count {
  font-size: 11px;
  font-weight: 700;
  color: #f0b429;
  margin-top: 4px;
}

.sunday-select-status {
  font-size: 13px;
  color: #6678a0;
  margin-bottom: 16px;
}

.sunday-confirm-btn {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  background: #f0b429;
  color: #0a1628;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.sunday-confirm-btn:hover {
  background: #f5c842;
  transform: scale(1.02);
}

.sunday-confirm-btn:active {
  transform: scale(0.98);
}

.sunday-confirm-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* === Week Summary === */
#week-summary {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.95);
}
#week-summary.hidden { display: none; }

.week-summary-inner {
  background: #131a2e;
  border: 2px solid #f0b429;
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.week-summary-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #f0b429;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: tier-pop 0.6s ease-out;
}

.week-summary-scores {
  text-align: left;
  margin-bottom: 1rem;
}

.week-summary-scores .result-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.95rem;
}

.week-summary-scores .result-row span:first-child {
  color: #8899aa;
  min-width: 90px;
}

.week-summary-scores .result-row span:nth-child(2) {
  color: #f5f0e8;
  flex: 1;
  text-align: center;
}

.week-summary-scores .result-row span:last-child {
  color: #4ecdc4;
  min-width: 50px;
  text-align: right;
}

.week-summary-total {
  font-size: 2.2rem;
  font-weight: 900;
  color: #f0b429;
  margin: 1rem 0;
  line-height: 1;
}

.week-total-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.week-best-day {
  font-size: 0.85rem;
  color: #4ecdc4;
  margin-bottom: 1rem;
  font-weight: 600;
}

.week-row {
  animation: row-slide-in 0.35s ease-out both;
}

.week-summary-scores .result-row span:last-child {
  font-weight: 800;
  font-size: 1.05rem;
}

#week-summary .hub-play-btn {
  margin-top: 0.5rem;
}

/* === Sim Mode Banner === */
.sim-banner {
  background: linear-gradient(135deg, #1a2744, #0d1b30);
  border: 1px solid #f0b429;
  border-radius: 8px;
  color: #f0b429;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 1rem;
  margin: 0.5rem 1rem 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* === Tutorial === */
#tutorial-screen {
  position: fixed;
  inset: 0;
  z-index: 170;
  background: rgba(10, 22, 40, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#tutorial-screen.hidden { display: none; }

.tutorial-card {
  background: #141e38;
  border: 2px solid #2a3560;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.tutorial-slide {
  display: none;
  animation: tut-fade-in 0.3s ease-out;
}
.tutorial-slide-active { display: block; }

@keyframes tut-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tutorial-title {
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 800;
  color: #f0b429;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 12px 0 8px;
  line-height: 1.2;
}

.tutorial-body {
  font-size: clamp(14px, 3.5vw, 17px);
  color: #d0d8e8;
  line-height: 1.6;
  margin: 0 0 16px;
}

.tutorial-visual {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* Tutorial dots */
.tutorial-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 16px;
}
.tutorial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #2a3560;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.tutorial-dot.active {
  background: #4ecdc4;
  transform: scale(1.3);
}

/* Tutorial nav buttons */
.tutorial-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.tutorial-btn {
  padding: 12px 28px;
  border-radius: 10px;
  font-size: clamp(14px, 3.5vw, 16px);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, background 0.2s;
  min-width: 100px;
}
.tutorial-btn:active { transform: scale(0.95); }

.tutorial-btn-back {
  background: #1a2744;
  color: #8899bb;
  border: 1px solid #2a3560;
}
.tutorial-btn-next {
  background: linear-gradient(135deg, #f0b429, #d4a017);
  color: #0a1628;
}
.tutorial-btn-finish {
  background: linear-gradient(135deg, #4ecdc4, #36b3a8);
  color: #0a1628;
  font-size: clamp(15px, 4vw, 18px);
}

/* === Tutorial Visuals === */

/* Welcome */
.tut-vis-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tut-logo {
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 900;
  color: #f0b429;
  letter-spacing: 3px;
  text-shadow: 0 2px 12px rgba(240, 180, 41, 0.3);
}
.tut-vis-tagline {
  font-size: clamp(12px, 3vw, 15px);
  color: #8899bb;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Draft visual */
.tut-vis-draft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tut-vis-draft > div:not(.tut-vis-hint) {
  display: inline-flex;
}
.tut-vis-draft {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
}
.tut-draft-card {
  width: clamp(38px, 10vw, 50px);
  height: clamp(48px, 13vw, 62px);
  background: #1a2744;
  border: 2px solid #2a3560;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f5f0e8;
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 800;
  position: relative;
}
.tut-draft-card.tut-draft-picked {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.15);
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.3);
}
.tut-card-pts {
  font-size: clamp(9px, 2.5vw, 11px);
  color: #8899bb;
  font-weight: 600;
}
.tut-card-effect {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: clamp(10px, 2.8vw, 13px);
  animation: tut-sparkle 1.5s ease-in-out infinite;
}
@keyframes tut-sparkle {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.tut-vis-hint {
  width: 100%;
  font-size: clamp(10px, 2.5vw, 12px);
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Build visual */
.tut-vis-build {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tut-rack, .tut-word {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tut-tile {
  width: clamp(28px, 7vw, 36px);
  height: clamp(28px, 7vw, 36px);
  background: #1a2744;
  border: 2px solid #2a3560;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f0e8;
  font-size: clamp(13px, 3.5vw, 17px);
  font-weight: 800;
}
.tut-tile-placed {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.1);
}
.tut-arrow {
  font-size: 18px;
  color: #4ecdc4;
}
.tut-check {
  color: #4ecdc4;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 900;
  margin-left: 6px;
}

/* Score visual */
.tut-vis-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}
.tut-score-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: clamp(12px, 3vw, 14px);
  color: #d0d8e8;
  border-radius: 4px;
}
.tut-score-row span:last-child {
  color: #4ecdc4;
  font-weight: 700;
}
.tut-score-total {
  border-top: 1px solid #2a3560;
  margin-top: 2px;
  padding-top: 6px;
  font-weight: 800;
}
.tut-score-total span:last-child {
  color: #f0b429;
  font-size: clamp(14px, 3.5vw, 17px);
}

/* Tools visual */
.tut-vis-tools {
  display: flex;
  gap: clamp(12px, 4vw, 24px);
  justify-content: center;
}
.tut-tool-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: clamp(28px, 8vw, 38px);
}
.tut-tool-icon span {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #8899bb;
  font-weight: 600;
}

/* Weekly visual */
.tut-vis-weekly {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tut-week-dots {
  display: flex;
  gap: 6px;
}
.tut-week-dot {
  width: clamp(28px, 7vw, 36px);
  height: clamp(28px, 7vw, 36px);
  border-radius: 50%;
  background: #1a2744;
  border: 2px solid #2a3560;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.5vw, 12px);
  color: #6678a0;
  font-weight: 700;
}
.tut-dot-done {
  border-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
}
.tut-dot-sunday {
  border-color: #f0b429;
  color: #f0b429;
}

/* === Cheat Panel === */
#cheat-toggle {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #f0b429;
  background: #1a2444;
  color: #f0b429;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.15s;
}

#cheat-toggle:active {
  transform: scale(0.9);
}

#cheat-panel {
  position: fixed;
  bottom: 64px;
  right: 12px;
  width: 200px;
  background: #0f1a30;
  border: 1px solid #2a3560;
  border-radius: 10px;
  padding: 12px;
  z-index: 9998;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

#cheat-panel.hidden {
  display: none;
}

.cheat-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: #f0b429;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}

.cheat-tool-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cheat-tool-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(240, 180, 41, 0.08);
  border: 1px solid #2a3560;
  border-radius: 6px;
  color: #f5f0e8;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
  .cheat-tool-btn:hover {
    background: rgba(240, 180, 41, 0.15);
    border-color: #f0b429;
  }
}

.cheat-tool-btn:active {
  transform: scale(0.97);
}

.cheat-tool-btn.cheat-tool-added {
  background: rgba(78, 205, 196, 0.2);
  border-color: #4ecdc4;
}

.cheat-tool-icon {
  font-size: 18px;
}

.cheat-tool-name {
  font-size: 13px;
  font-weight: 600;
}

/* ==============================================
   Hub Achievement/Quest Progress Cards
   ============================================== */

.hub-progress-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.hub-progress-card {
  flex: 1;
  background: #141e38;
  border: 1px solid #1e2744;
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.hub-progress-card:active {
  background: #1a2848;
  border-color: #4ecdc4;
}

.hub-progress-title {
  font-size: 11px;
  font-weight: 700;
  color: #6678a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hub-progress-detail {
  font-size: clamp(12px, 3.2vw, 14px);
  color: #c0cce0;
  line-height: 1.4;
}

.hub-progress-bar {
  width: 100%;
  height: 4px;
  background: #1e2744;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.hub-progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #4ecdc4, #3ab5ad);
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

.hub-progress-bar-fill.gold {
  background: linear-gradient(to right, #ffc107, #f0b429);
}

.hub-progress-checkmarks {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
}

.hub-progress-check {
  color: #2a3560;
}

.hub-progress-check.done {
  color: #4ecdc4;
}

/* ==============================================
   Achievement Overlay
   ============================================== */

#achievements-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(5, 10, 20, 0.95);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#achievements-overlay.hidden {
  display: none;
}

.achievements-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.achievements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.achievements-title {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  color: #f5f0e8;
}

.achievements-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #6678a0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.achievements-close:active {
  color: #f5f0e8;
}

.achievements-summary {
  font-size: 13px;
  color: #6678a0;
  margin-bottom: 16px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  background: #141e38;
  border: 1px solid #1e2744;
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}

.achievement-item.completed {
  border-color: #4ecdc4;
}

.achievement-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2744;
  border-radius: 8px;
  flex-shrink: 0;
}

.achievement-item.completed .achievement-icon {
  background: rgba(78, 205, 196, 0.15);
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-name {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 700;
  color: #f5f0e8;
  margin-bottom: 2px;
}

.achievement-item.completed .achievement-name {
  color: #4ecdc4;
}

.achievement-desc {
  font-size: 12px;
  color: #6678a0;
  margin-bottom: 6px;
}

.achievement-progress-bar {
  width: 100%;
  height: 4px;
  background: #1e2744;
  border-radius: 2px;
  overflow: hidden;
}

.achievement-progress-fill {
  height: 100%;
  background: #4ecdc4;
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

.achievement-progress-text {
  font-size: 11px;
  color: #4a5580;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.achievement-check {
  font-size: 20px;
  color: #4ecdc4;
  flex-shrink: 0;
}

.achievement-reward {
  font-size: 11px;
  color: #ffc107;
  flex-shrink: 0;
  text-align: right;
}

/* ==============================================
   Quest Overlay
   ============================================== */

#quests-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(5, 10, 20, 0.95);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#quests-overlay.hidden {
  display: none;
}

.quests-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.quests-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.quests-title {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  color: #f5f0e8;
}

.quests-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #6678a0;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.quests-close:active {
  color: #f5f0e8;
}

.quests-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background: #141e38;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1e2744;
}

.quests-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #6678a0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quests-tab.active {
  color: #f5f0e8;
  background: #1e2744;
}

.quests-tab:active {
  background: #1e2744;
}

.quest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  background: #141e38;
  border: 1px solid #1e2744;
  border-radius: 10px;
  margin-bottom: 8px;
}

.quest-item.completed {
  border-color: #4ecdc4;
  opacity: 0.7;
}

.quest-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e2744;
  border-radius: 8px;
  flex-shrink: 0;
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-name {
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 700;
  color: #f5f0e8;
  margin-bottom: 2px;
}

.quest-item.completed .quest-name {
  text-decoration: line-through;
  color: #4ecdc4;
}

.quest-desc {
  font-size: 11px;
  color: #6678a0;
  margin-bottom: 4px;
}

.quest-progress-bar {
  width: 100%;
  height: 4px;
  background: #1e2744;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.quest-progress-fill {
  height: 100%;
  background: #4ecdc4;
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

.quest-progress-text {
  font-size: 11px;
  color: #4a5580;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.quest-reward {
  font-size: 12px;
  color: #ffc107;
  font-weight: 700;
  flex-shrink: 0;
}

.quest-claim-btn {
  background: #ffc107;
  color: #0a1628;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.quest-claim-btn:active {
  transform: scale(0.95);
}

.quest-claim-btn.claimed {
  background: #1e2744;
  color: #4ecdc4;
  cursor: default;
}

/* ==============================================
   Build-Phase Quest Tracker
   ============================================== */

#quest-tracker {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(10, 22, 40, 0.85);
  border-radius: 8px;
  border: 1px solid #1e2744;
  margin-bottom: 4px;
}

#quest-tracker.visible {
  display: flex;
}

.quest-tracker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: clamp(11px, 2.8vw, 12px);
}

.qt-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}


.qt-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.qt-label {
  color: #8899bb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-desc {
  color: #556688;
  font-size: clamp(9px, 2.2vw, 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-tracker-item.qt-complete .qt-label {
  text-decoration: line-through;
  color: #4ecdc4;
}

.qt-progress {
  width: 48px;
  height: 4px;
  background: #1e2744;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.qt-bar {
  height: 100%;
  background: #4ecdc4;
  border-radius: 2px;
  transition: width 0.25s ease-out;
}

.qt-value {
  font-size: 10px;
  color: #6678a0;
  font-variant-numeric: tabular-nums;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

.quest-tracker-item.qt-complete .qt-value {
  color: #4ecdc4;
}

@keyframes qt-flash {
  0% { background: rgba(78, 205, 196, 0); }
  30% { background: rgba(78, 205, 196, 0.2); }
  100% { background: rgba(78, 205, 196, 0); }
}

.quest-tracker-item.qt-just-completed {
  animation: qt-flash 0.6s ease-out;
  border-radius: 4px;
}

/* === Countdown Mode === */

#countdown-header {
  text-align: center;
  padding: clamp(12px, 3vh, 24px) 0;
}

#countdown-progress {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #f5f0e8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#countdown-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 32px);
  padding: clamp(16px, 4vh, 40px) clamp(12px, 3vw, 24px);
}

.countdown-btn {
  flex: 1;
  max-width: 200px;
  min-height: clamp(100px, 20vh, 180px);
  border: 3px solid;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, opacity 0.3s, box-shadow 0.3s;
  font-family: inherit;
}

.countdown-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.countdown-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.countdown-btn-vowel {
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2744 100%);
  border-color: #4ecdc4;
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.2);
}

.countdown-btn-vowel:hover:not(:disabled) {
  box-shadow: 0 0 30px rgba(78, 205, 196, 0.4);
}

.countdown-btn-consonant {
  background: linear-gradient(135deg, #3a1a1a 0%, #44200d 100%);
  border-color: #f0b429;
  box-shadow: 0 0 20px rgba(240, 180, 41, 0.2);
}

.countdown-btn-consonant:hover:not(:disabled) {
  box-shadow: 0 0 30px rgba(240, 180, 41, 0.4);
}

.countdown-btn-label {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #f5f0e8;
}

.countdown-btn-count {
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  font-weight: 600;
  opacity: 0.7;
  color: #f5f0e8;
}

.countdown-btn-maxed .countdown-btn-count {
  color: #e63946;
  opacity: 1;
  font-weight: 700;
}

#countdown-rack {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(12px, 3vh, 24px) 4px clamp(20px, 4vh, 32px);
  flex-wrap: wrap;
  overflow: visible;
}

.countdown-rack-tile {
  position: relative;
  width: clamp(40px, 10vw, 48px);
  min-height: clamp(50px, 12vw, 64px);
  background: linear-gradient(135deg, #1a2a3e 0%, #0f1c2e 100%);
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  margin-bottom: 12px;
}

.countdown-tile-letter {
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  font-weight: 900;
  color: #f5f0e8;
}

.countdown-tile-value {
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  font-weight: 600;
  color: #f0b429;
}

.countdown-tile-has-effect {
  border-color: #f0b429;
  border-width: 3px;
  box-shadow: 0 0 14px rgba(240, 180, 41, 0.6);
}

.countdown-tile-effect {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.5rem, 1.8vw, 0.65rem);
  font-weight: 800;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--effect-color, #f0b429);
  color: #0a1628;
  letter-spacing: 0.02em;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.countdown-tile-new {
  animation: countdown-pop 0.3s ease-out;
}

.countdown-tile-dragging {
  opacity: 0.3;
}

.countdown-tile-drop-target {
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.7);
  transform: scale(1.08);
  transition: transform 0.15s, box-shadow 0.15s;
}

.countdown-drag-ghost {
  position: fixed;
  transform: translate(-50%, -50%);
  width: clamp(44px, 11vw, 52px);
  min-height: clamp(52px, 12vw, 64px);
  background: linear-gradient(135deg, #1a3a5e 0%, #0f2440 100%);
  border: 3px solid #4ecdc4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.5);
  opacity: 0.9;
}

.countdown-drag-ghost .countdown-tile-letter {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  color: #f5f0e8;
}

.countdown-drag-ghost .countdown-tile-value {
  font-size: clamp(0.6rem, 1.8vw, 0.75rem);
  font-weight: 600;
  color: #f0b429;
}

@keyframes countdown-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* === Chain Pick Mode === */

.chain-pick-rules {
  text-align: center;
  padding: clamp(8px, 2vh, 16px) clamp(12px, 3vw, 24px);
  margin: 0 auto clamp(8px, 2vh, 12px);
  max-width: 500px;
  background: rgba(78, 205, 196, 0.08);
  border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 10px;
}

.chain-pick-rules-title {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  color: #4ecdc4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.chain-pick-rules-text {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  color: #c0b8a8;
  line-height: 1.4;
}

.chain-pick-rules-text strong {
  color: #f0b429;
}

#chain-pick-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 3vw, 24px);
  padding: clamp(6px, 1.5vh, 12px) 0;
}

#chain-pick-progress {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  color: #f5f0e8;
  letter-spacing: 0.05em;
}

#chain-pick-bonus-summary {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  font-weight: 700;
  color: #f0b429;
}

#chain-pick-board {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(8px, 2vh, 16px) 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  touch-action: pan-y;
}

.chain-board-tile {
  position: relative;
  width: clamp(36px, 8.5vw, 52px);
  min-height: clamp(48px, 11vw, 68px);
  background: linear-gradient(135deg, #1a2a3e 0%, #0f1c2e 100%);
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
  flex-shrink: 0;
}

.chain-board-tile:active:not(.chain-tile-empty) {
  transform: scale(0.95);
}

.chain-tile-empty {
  opacity: 0.15;
  border-color: rgba(78, 205, 196, 0.1);
  cursor: default;
}

.chain-tile-selected {
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 16px rgba(78, 205, 196, 0.6), inset 0 0 8px rgba(78, 205, 196, 0.15);
  transform: scale(1.08);
  background: linear-gradient(135deg, #1a3a5c 0%, #0f2844 100%);
}

.chain-tile-letter {
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 900;
  color: #f5f0e8;
}

.chain-tile-value {
  font-size: clamp(0.6rem, 1.8vw, 0.8rem);
  font-weight: 600;
  color: #f0b429;
}

.chain-tile-has-effect {
  border-color: #f0b429;
  border-width: 3px;
  box-shadow: 0 0 14px rgba(240, 180, 41, 0.6);
}

.chain-tile-effect {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.5rem, 1.8vw, 0.6rem);
  font-weight: 800;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--effect-color, #f0b429);
  color: #0a1628;
  letter-spacing: 0.02em;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.chain-tile-spinning {
  border-color: #f0b429;
  animation: chain-spin-pulse 0.15s ease-in-out infinite alternate;
}

@keyframes chain-spin-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.chain-tile-landed {
  animation: chain-land-pop 0.25s ease-out;
}

@keyframes chain-land-pop {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#chain-pick-confirm-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: clamp(4px, 1vh, 8px) 0;
}

#chain-pick-confirm-row.hidden {
  display: none;
}

.chain-pick-btn {
  min-width: 100px;
  padding: clamp(8px, 2vh, 14px) clamp(16px, 4vw, 28px);
  border: 2px solid #4ecdc4;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2744 100%);
  color: #f5f0e8;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: transform 0.15s, box-shadow 0.15s;
}

.chain-pick-btn:hover {
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.4);
}

.chain-pick-btn:active {
  transform: scale(0.95);
}

.chain-pick-btn-cancel {
  border-color: #e63946;
  background: linear-gradient(135deg, #3a1a1a 0%, #2a0d0d 100%);
}

.chain-pick-btn-cancel:hover {
  box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
}

#chain-pick-rack-label {
  text-align: center;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 700;
  color: rgba(245, 240, 232, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-top: clamp(8px, 2vh, 12px);
}

#chain-pick-rack-label.hidden {
  display: none;
}

#chain-pick-rack {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  padding: clamp(6px, 1.5vh, 12px) 4px;
  flex-wrap: wrap;
  overflow: visible;
}

.chain-rack-tile {
  position: relative;
  width: clamp(38px, 9vw, 48px);
  min-height: clamp(48px, 11vw, 62px);
  background: linear-gradient(135deg, #1a2a3e 0%, #0f1c2e 100%);
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  margin-bottom: 12px;
  cursor: grab;
}

.chain-rack-cluster {
  display: flex;
  gap: 0;
  border: 2px solid #f0b429;
  border-radius: 10px;
  padding: 2px;
  margin-bottom: 12px;
  background: rgba(240, 180, 41, 0.08);
  box-shadow: 0 0 10px rgba(240, 180, 41, 0.3);
}

.chain-rack-cluster .chain-rack-cluster-tile {
  border: none;
  border-radius: 4px;
  margin-bottom: 0;
  width: clamp(32px, 8vw, 42px);
  min-height: clamp(42px, 10vw, 56px);
}

.chain-tile-dragging {
  opacity: 0.3;
}

.chain-tile-drop-target {
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.7);
  transform: scale(1.08);
  transition: transform 0.15s, box-shadow 0.15s;
}

.chain-drag-ghost {
  position: fixed;
  transform: translate(-50%, -50%);
  width: clamp(42px, 10vw, 52px);
  min-height: clamp(50px, 11vw, 64px);
  background: linear-gradient(135deg, #1a3a5e 0%, #0f2440 100%);
  border: 3px solid #4ecdc4;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.5);
  opacity: 0.9;
}

.chain-drag-ghost .chain-tile-letter {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  color: #f5f0e8;
}

.chain-drag-ghost .chain-tile-value {
  font-size: clamp(0.6rem, 1.8vw, 0.75rem);
  font-weight: 600;
  color: #f0b429;
}

/* ===== Wordsy Mode ===== */

.wordsy-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: clamp(16px, 4vh, 32px) 12px;
  gap: clamp(16px, 3vh, 28px);
}

.wordsy-screen.hidden { display: none; }

.wordsy-header {
  text-align: center;
}

.wordsy-title {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #f0b429;
  text-shadow: 0 0 20px rgba(240, 180, 41, 0.3);
}

.wordsy-subtitle {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #f5f0e8;
  opacity: 0.8;
  margin-top: 4px;
}

.wordsy-cluster-hint {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: #4ecdc4;
  margin-top: 8px;
}

.wordsy-consonants {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.5vw, 12px);
  flex-wrap: wrap;
  padding: 8px 0;
}

.wordsy-tile {
  width: clamp(48px, 11vw, 64px);
  height: clamp(60px, 14vw, 80px);
  background: linear-gradient(135deg, #1a2a3e 0%, #0f1c2e 100%);
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.3s ease;
}

.wordsy-tile.wordsy-cluster {
  border-color: #f0b429;
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.3);
}

.wordsy-tile.wordsy-matched {
  background: linear-gradient(135deg, #1a3a2a 0%, #0f2e1c 100%);
  border-color: #4ecdc4;
  box-shadow: 0 0 18px rgba(78, 205, 196, 0.5);
  transform: scale(1.08);
}

.wordsy-tile.wordsy-cluster.wordsy-matched {
  border-color: #f0b429;
  box-shadow: 0 0 22px rgba(240, 180, 41, 0.6), 0 0 12px rgba(78, 205, 196, 0.3);
}

.wordsy-tile-letter {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 900;
  color: #f5f0e8;
  text-transform: uppercase;
}

.wordsy-tile-value {
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  font-weight: 700;
  color: #f0b429;
}

.wordsy-cluster .wordsy-tile-value {
  color: #f0b429;
}

.wordsy-input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 16px);
  width: 100%;
  max-width: 400px;
}

.wordsy-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.wordsy-input {
  flex: 1;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 16px;
  background: rgba(15, 28, 46, 0.8);
  border: 2px solid rgba(78, 205, 196, 0.3);
  border-radius: 10px;
  color: #f5f0e8;
  outline: none;
  text-align: center;
  transition: border-color 0.2s;
}

.wordsy-input:focus {
  border-color: #4ecdc4;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.2);
}

.wordsy-input:disabled {
  opacity: 0.5;
}

.wordsy-validity {
  font-size: 1.6rem;
  width: 32px;
  text-align: center;
}

.wordsy-validity.valid { color: #4ecdc4; }
.wordsy-validity.invalid { color: #e63946; }

.wordsy-score-preview {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 700;
  color: #f5f0e8;
  min-height: 1.6em;
}

.wordsy-preview-score {
  color: #f0b429;
  text-shadow: 0 0 10px rgba(240, 180, 41, 0.3);
}

.wordsy-match-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 1.4em;
}

.wordsy-match-chip {
  background: rgba(78, 205, 196, 0.15);
  border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 600;
  color: #4ecdc4;
}

.wordsy-len-chip {
  background: rgba(240, 180, 41, 0.15);
  border-color: rgba(240, 180, 41, 0.3);
  color: #f0b429;
}

.wordsy-no-match {
  font-size: clamp(0.8rem, 2.2vw, 0.95rem);
  color: #e63946;
  opacity: 0.8;
}

.wordsy-submit-btn {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 12px 48px;
  background: linear-gradient(135deg, #4ecdc4 0%, #3ab5ad 100%);
  border: none;
  border-radius: 10px;
  color: #0a1628;
  cursor: pointer;
  transition: all 0.2s;
}

.wordsy-submit-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.4);
}

.wordsy-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.wordsy-tile.wordsy-dragging {
  opacity: 0.7;
  box-shadow: 0 0 24px rgba(78, 205, 196, 0.6);
  z-index: 10;
}

.wordsy-tile {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.wordsy-hint {
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  opacity: 0.5;
  font-style: italic;
}

/* === Word Flood Mode === */

/* When flood-screen is active, override #draft-screen to sit below the HUD and fill remaining space */
#draft-screen:has(.flood-screen:not(.hidden)) {
  justify-content: flex-start;
  top: max(8%, 40px);
}
#draft-screen:has(.flood-screen:not(.hidden)) #draft-progress {
  display: none;
}

.flood-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, 1.5vh, 12px);
  padding: clamp(4px, 1vh, 12px) 16px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.flood-screen.hidden { display: none; }

.flood-header {
  display: none; /* redundant with HUD bar */
}
.flood-title {
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: #4ecdc4;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(78, 205, 196, 0.3);
}
.flood-subtitle {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  color: #f5f0e8;
  opacity: 0.75;
  margin-top: 4px;
}

.flood-tiles {
  display: flex;
  gap: clamp(4px, 1vw, 10px);
  justify-content: center;
  flex-wrap: nowrap;
}

.flood-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 9vw, 62px);
  height: clamp(48px, 11vw, 74px);
  background: linear-gradient(135deg, #1e2d4a 0%, #162038 100%);
  border: 2px solid rgba(78, 205, 196, 0.3);
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: all 0.2s;
}
.flood-tile-letter {
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  color: #f5f0e8;
}
.flood-tile-value {
  font-size: clamp(0.65rem, 1.8vw, 0.85rem);
  color: #f0b429;
  font-weight: 700;
}

.flood-tile.flood-matched {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, #1a3a4a 0%, #163040 100%);
  box-shadow: 0 0 14px rgba(78, 205, 196, 0.4);
}
.flood-tile.flood-dragging {
  opacity: 0.7;
  box-shadow: 0 0 24px rgba(78, 205, 196, 0.6);
  z-index: 10;
}

.flood-input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.flood-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.flood-input {
  flex: 1;
  font-size: clamp(1rem, 3vw, 1.3rem);
  padding: 10px 16px;
  border: 2px solid rgba(78, 205, 196, 0.3);
  border-radius: 10px;
  background: #0d1b30;
  color: #f5f0e8;
  outline: none;
  font-family: inherit;
  letter-spacing: 0.1em;
}
.flood-input:focus {
  border-color: #4ecdc4;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.2);
}

.flood-validity {
  font-size: 1.5rem;
  width: 28px;
  text-align: center;
}
.flood-validity.valid { color: #4ecdc4; }
.flood-validity.invalid { color: #e63946; }

.flood-add-btn {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 10px 20px;
  background: linear-gradient(135deg, #4ecdc4 0%, #3ab5ad 100%);
  border: none;
  border-radius: 10px;
  color: #0a1628;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.flood-add-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 16px rgba(78, 205, 196, 0.4);
}
.flood-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flood-score-preview {
  min-height: 1.4em;
  text-align: center;
}
.flood-preview-score {
  color: #f0b429;
  font-weight: 700;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.flood-feedback {
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  color: #e63946;
  min-height: 1.2em;
  text-align: center;
}

.flood-progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  padding: 0 4px;
}
.flood-counter {
  color: #f5f0e8;
  opacity: 0.8;
}
.flood-running-total {
  color: #f0b429;
  font-weight: 700;
}

/* Slot system */
.flood-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.flood-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(30, 45, 74, 0.5);
  border: 2px solid rgba(78, 205, 196, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.flood-slot:hover {
  border-color: rgba(78, 205, 196, 0.35);
}
.flood-slot-selected {
  border-color: #4ecdc4;
  background: rgba(30, 45, 74, 0.8);
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.2);
}
.flood-slot-filled {
  border-color: rgba(240, 180, 41, 0.3);
  background: rgba(40, 50, 70, 0.6);
}
.flood-slot-filled.flood-slot-selected {
  border-color: #f0b429;
}

.flood-slot-label {
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  color: #f5f0e8;
  opacity: 0.6;
  min-width: 56px;
  text-align: center;
}

.flood-slot-boxes {
  display: flex;
  gap: 3px;
  flex: 1;
}

.flood-slot-box {
  width: clamp(24px, 5vw, 34px);
  height: clamp(28px, 6vw, 38px);
  border: 1.5px solid rgba(78, 205, 196, 0.25);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  color: #f5f0e8;
  background: rgba(10, 22, 40, 0.5);
  transition: all 0.2s;
}
.flood-slot-box-filled {
  border-color: #f0b429;
  background: rgba(240, 180, 41, 0.12);
  color: #f0b429;
}

.flood-slot-score {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: #f0b429;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}

.flood-length-hint {
  color: #f5f0e8;
  opacity: 0.5;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
}

/* Build row (tile-tap word construction) */
.flood-build-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.flood-build-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: 48px;
  align-items: center;
}

.flood-build-tile {
  width: clamp(36px, 8vw, 48px);
  height: clamp(40px, 9vw, 52px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #f5f0e8;
  transition: all 0.15s;
}

.flood-build-tile-empty {
  border: 2px dashed rgba(78, 205, 196, 0.25);
  background: rgba(10, 22, 40, 0.3);
}

.flood-build-tile-filled {
  border: 2px solid #f0b429;
  background: rgba(240, 180, 41, 0.12);
  color: #f0b429;
  cursor: pointer;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.flood-build-tile-filled:hover {
  background: rgba(240, 180, 41, 0.2);
  transform: scale(1.05);
}

.flood-build-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.4em;
}

.flood-all-filled {
  color: #4ecdc4;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

/* Active tile state (when a slot is selected) */
.flood-tile-active {
  cursor: pointer;
}
.flood-tile-active:hover {
  border-color: #4ecdc4;
  transform: scale(1.06);
}

.flood-tile-used {
  opacity: 0.3;
  pointer-events: none;
}

/* Flood result screen */
.flood-result-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 12px 0;
}

.flood-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(30, 45, 74, 0.5);
  border-radius: 8px;
  flex-wrap: wrap;
}

.flood-result-len {
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  color: #f5f0e8;
  opacity: 0.5;
  min-width: 20px;
  text-align: center;
}

.flood-result-word {
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  color: #f5f0e8;
  letter-spacing: 0.06em;
  flex: 1;
}
.flood-result-word.flood-result-optimal {
  color: #f0b429;
}
.flood-result-word.flood-result-empty {
  color: #f5f0e8;
  opacity: 0.3;
}

.flood-result-pts {
  color: #f0b429;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  min-width: 40px;
  text-align: right;
}

.flood-result-badge {
  color: #f0b429;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.flood-result-better {
  width: 100%;
  padding-left: 28px;
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  color: #4ecdc4;
  opacity: 0.7;
}

.flood-result-summary {
  margin-top: 8px;
  width: 100%;
}

.flood-result-total {
  font-family: 'Lilita One', 'Impact', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: #f0b429;
  text-align: center;
  margin: 8px 0;
}
.flood-result-pts-label {
  font-size: 0.4em;
  color: #f5f0e8;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.flood-done-btn {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 12px 48px;
  background: linear-gradient(135deg, #f0b429 0%, #d4a017 100%);
  border: none;
  border-radius: 10px;
  color: #0a1628;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}
.flood-done-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(240, 180, 41, 0.4);
}
.flood-done-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flood-bonus-row {
  color: #4ecdc4 !important;
  font-weight: 700;
}

/* Build row wrapper with clear button */
.flood-build-row-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.flood-clear-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(230, 57, 70, 0.5);
  background: rgba(230, 57, 70, 0.1);
  color: #e63946;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.flood-clear-btn:hover {
  background: rgba(230, 57, 70, 0.25);
  border-color: #e63946;
  transform: scale(1.1);
}

/* Build tile letter + value layout */
.flood-build-letter {
  font-size: clamp(1rem, 2.8vw, 1.3rem);
}
.flood-build-value {
  font-size: clamp(0.55rem, 1.5vw, 0.7rem);
  opacity: 0.6;
  margin-top: -2px;
}

/* Slot modifier badges */
.flood-slot-modifier {
  font-size: clamp(0.6rem, 1.6vw, 0.75rem);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 2px;
}
.flood-mod-flat {
  color: #4ecdc4;
  background: rgba(78, 205, 196, 0.15);
  border: 1px solid rgba(78, 205, 196, 0.3);
}
.flood-mod-multiplier {
  color: #f0b429;
  background: rgba(240, 180, 41, 0.15);
  border: 1px solid rgba(240, 180, 41, 0.3);
}

/* Modifier preview in score */
.flood-mod-preview {
  font-size: 0.8em;
  opacity: 0.7;
  margin-left: 4px;
}

/* Result screen modifier badge */
.flood-result-mod {
  font-size: 0.7em;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.flood-result-mod.flood-mod-flat {
  color: #4ecdc4;
  background: rgba(78, 205, 196, 0.15);
}
.flood-result-mod.flood-mod-multiplier {
  color: #f0b429;
  background: rgba(240, 180, 41, 0.15);
}

/* ============================================================
   MULTIPLE RACKS MODE
   ============================================================ */

.multiracks-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 2vh, 14px);
  padding: clamp(8px, 2vh, 16px) 12px;
  min-height: 80vh;
}
.multiracks-screen.hidden { display: none; }

.multiracks-header { text-align: center; }
.multiracks-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  color: #f0b429;
  letter-spacing: 0.05em;
}
.multiracks-subtitle {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  color: #8899aa;
  margin-top: 2px;
}

/* Effect legend */
.multiracks-legend {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
}
.multiracks-legend.hidden { display: none; }
.multiracks-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(0.65rem, 1.8vw, 0.78rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a3a5c;
  border-radius: 6px;
  padding: 3px 8px;
}
.multiracks-legend-icon {
  font-weight: 800;
  font-size: 0.75rem;
}
.multiracks-legend-desc {
  color: #99aabb;
}

/* Tooltip */
.multiracks-tooltip {
  position: fixed;
  background: #0d1f3c;
  border: 1px solid #f0b429;
  color: #f5f0e8;
  font-size: clamp(0.72rem, 2vw, 0.85rem);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  z-index: 1001;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  max-width: 280px;
  white-space: normal;
  text-align: center;
}
.multiracks-tooltip.hidden { display: none; }

/* Pool (unassigned tiles) */
.multiracks-pool {
  width: 100%;
  max-width: 500px;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed #2a3a5c;
  border-radius: 10px;
  padding: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.multiracks-pool.multiracks-drop-hover {
  border-color: #8899aa;
  background: rgba(255, 255, 255, 0.06);
}
.multiracks-pool-label {
  font-size: 0.7rem;
  color: #667788;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-align: center;
}
.multiracks-pool-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
}

/* Rack zones — stacked full-width */
.multiracks-rack {
  width: 100%;
  max-width: 500px;
  min-height: 80px;
  border: 2px solid #2a3a5c;
  border-radius: 10px;
  padding: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.multiracks-rack-a { border-color: #4ecdc4; background: rgba(78, 205, 196, 0.05); }
.multiracks-rack-b { border-color: #f0b429; background: rgba(240, 180, 41, 0.05); }
.multiracks-rack.multiracks-drop-hover {
  background: rgba(255, 255, 255, 0.08);
}
.multiracks-rack-a.multiracks-drop-hover { border-color: #6ef0e8; }
.multiracks-rack-b.multiracks-drop-hover { border-color: #ffd060; }

.multiracks-rack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.multiracks-rack-label {
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.multiracks-rack-a .multiracks-rack-label { color: #4ecdc4; }
.multiracks-rack-b .multiracks-rack-label { color: #f0b429; }

.multiracks-rack-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.multiracks-rack-a .multiracks-rack-badge {
  background: rgba(78, 205, 196, 0.15);
  color: #4ecdc4;
}
.multiracks-bonus-badge {
  background: rgba(240, 180, 41, 0.2) !important;
  color: #f0b429 !important;
}

/* Inline feedback per rack */
.multiracks-rack-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
}
.multiracks-fb-hint {
  color: #556677;
  font-style: italic;
  font-size: 0.8rem;
}
.multiracks-fb-word {
  font-weight: 800;
  color: #f5f0e8;
  letter-spacing: 0.06em;
}
.multiracks-fb-valid {
  color: #4ecdc4;
  font-weight: 800;
  font-size: 1.1rem;
}
.multiracks-fb-invalid {
  color: #e63946;
  font-weight: 800;
  font-size: 1.1rem;
}
.multiracks-fb-score {
  color: #f0b429;
  font-weight: 800;
}

.multiracks-rack-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 50px;
}

/* Tiles */
.multiracks-tile {
  width: clamp(40px, 9vw, 52px);
  height: clamp(48px, 11vw, 60px);
  background: #1a2848;
  border: 2px solid #3a4a6c;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.1s, opacity 0.15s, border-color 0.15s;
}
.multiracks-tile:active { cursor: grabbing; }
.multiracks-tile-a { border-color: #4ecdc4; }
.multiracks-tile-b { border-color: #f0b429; }
.multiracks-tile-dragging { opacity: 0.3; }

.multiracks-tile-letter {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 800;
  color: #f5f0e8;
  line-height: 1;
}
.multiracks-tile-value {
  font-size: clamp(0.55rem, 1.5vw, 0.7rem);
  color: #f0b429;
  font-weight: 700;
}

.multiracks-tile-effect {
  font-size: clamp(0.5rem, 1.3vw, 0.6rem);
  font-weight: 800;
  position: absolute;
  top: 1px;
  right: 2px;
  line-height: 1;
}
.multiracks-tile-has-effect {
  position: relative;
  box-shadow: 0 0 6px rgba(240, 180, 41, 0.4);
}

.multiracks-drag-ghost {
  transform: scale(1.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border-color: #f0b429 !important;
}

/* Done button */
.multiracks-done-btn {
  background: #f0b429;
  color: #0a1628;
  border: none;
  padding: 14px 48px;
  border-radius: 12px;
  font-weight: 900;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 6px;
}
.multiracks-done-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Optimal result rows */
.multiracks-optimal-row {
  color: #4ecdc4 !important;
  font-weight: 800;
}
.multiracks-optimal-row span { color: #4ecdc4 !important; }
.multiracks-optimal-hint {
  font-size: 0.8rem;
  color: #667788;
  font-style: italic;
}
.multiracks-optimal-hint span { color: #667788; }

/* ---- Result screen ---- */
.multiracks-result { text-align: center; }
.multiracks-result-section {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a3a5c;
}
.multiracks-result-rack-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.multiracks-result-section:first-of-type .multiracks-result-rack-label { color: #4ecdc4; }
.multiracks-result-section:nth-of-type(2) .multiracks-result-rack-label { color: #f0b429; }

.multiracks-result-word {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 900;
  color: #f5f0e8;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.multiracks-result-empty { color: #556677; }

.multiracks-result-summary { margin-top: 8px; }
.multiracks-bonus-row span:first-child { color: #f0b429; }
.multiracks-bonus-row span:last-child { color: #f0b429; font-weight: 800; }

.result-row-total {
  font-size: 1.3rem;
  font-weight: 900;
  border-top: 2px solid #f0b429;
  padding-top: 8px;
  margin-top: 6px;
}
.result-row-total span:last-child { color: #f0b429; }

.result-personal-best {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f0b429;
  margin-top: 10px;
  animation: pulse 1s ease-in-out infinite;
}

.result-done-btn {
  background: #4ecdc4;
  color: #0a1628;
  border: none;
  padding: 12px 36px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 16px;
}

/* ===== Point Draft Mode ===== */

#pointdraft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 12px;
}

#pointdraft-budget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pointdraft-budget-label {
  font-size: clamp(0.65rem, 2vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8899aa;
  font-weight: 700;
}

.pointdraft-budget-value {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: #f0b429;
  text-shadow: 0 0 12px rgba(240, 180, 41, 0.4);
  transition: color 0.3s, text-shadow 0.3s;
}

.pointdraft-budget-low {
  color: #e63946;
  text-shadow: 0 0 12px rgba(230, 57, 70, 0.4);
}

.pointdraft-budget-zero {
  color: #666;
  text-shadow: none;
}

#pointdraft-status {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  color: #8899aa;
  font-weight: 600;
}

/* Pending effect indicator */
#pointdraft-pending-effect.hidden { display: none; }

#pointdraft-pending-effect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 0 16px 12px;
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.3);
  border-radius: 8px;
  font-size: clamp(0.75rem, 2vw, 0.85rem);
  color: #f0b429;
  animation: pointdraft-pending-pulse 1.5s ease-in-out infinite;
}

@keyframes pointdraft-pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.pointdraft-pending-icon {
  font-size: 1.2em;
}

/* Pool grid */
#pointdraft-pool {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 2vw, 10px);
  padding: 0 16px;
  margin-bottom: 16px;
}

.pointdraft-pool-done {
  display: none !important;
}

.pointdraft-pool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(10px, 3vw, 16px) 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
  min-height: clamp(80px, 20vw, 110px);
  position: relative;
}

.pointdraft-pool-card:active:not(.pointdraft-card-unaffordable) {
  transform: scale(0.95);
}

/* Letter cards */
.pointdraft-card-letter {
  background: linear-gradient(135deg, #1a2a44 0%, #0d1b2e 100%);
  border: 2px solid #4ecdc4;
  box-shadow: 0 2px 12px rgba(78, 205, 196, 0.2);
}

.pointdraft-card-letter:hover:not(.pointdraft-card-unaffordable) {
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.4);
  transform: translateY(-2px);
}

.pointdraft-card-letter-char {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 900;
  color: #f5f0e8;
}

/* Power cards */
.pointdraft-card-power {
  background: linear-gradient(135deg, #2a1a44 0%, #1b0d2e 100%);
  border: 2px solid #f0b429;
  box-shadow: 0 2px 12px rgba(240, 180, 41, 0.2);
}

.pointdraft-card-power:hover:not(.pointdraft-card-unaffordable) {
  box-shadow: 0 4px 20px rgba(240, 180, 41, 0.4);
  transform: translateY(-2px);
}

.pointdraft-card-wild {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, #1a3344 0%, #0d2b2e 100%);
}

.pointdraft-card-power-icon {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: #f0b429;
}

.pointdraft-card-power-label {
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  font-weight: 800;
  color: #f5f0e8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pointdraft-card-power-desc {
  font-size: clamp(0.5rem, 1.5vw, 0.6rem);
  color: #8899aa;
  text-align: center;
  line-height: 1.2;
}

/* Cost badge on all cards */
.pointdraft-card-cost {
  font-size: clamp(0.65rem, 2vw, 0.8rem);
  font-weight: 700;
  color: #f0b429;
  background: rgba(240, 180, 41, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Effect badge on letter cards */
.pointdraft-card-effect {
  font-size: clamp(0.5rem, 1.5vw, 0.6rem);
  font-weight: 700;
  color: var(--effect-color, #f0b429);
  background: rgba(240, 180, 41, 0.1);
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 2px;
}

/* Unaffordable cards */
.pointdraft-card-unaffordable {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Rack tiles */
#pointdraft-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 8px);
  padding: 8px 16px;
  min-height: 60px;
}

.pointdraft-rack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 10vw, 50px);
  height: clamp(48px, 13vw, 62px);
  background: linear-gradient(135deg, #1a2a44 0%, #0d1b2e 100%);
  border: 2px solid #334466;
  border-radius: 8px;
  cursor: grab;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
  touch-action: none;
}

.pointdraft-tile-has-effect {
  border-color: #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, 0.25);
}

.pointdraft-tile-wild {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, #1a3344 0%, #0d2b2e 100%);
}

.pointdraft-tile-letter {
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  font-weight: 900;
  color: #f5f0e8;
}

.pointdraft-tile-value {
  font-size: clamp(0.55rem, 1.8vw, 0.7rem);
  color: #8899aa;
  font-weight: 600;
}

.pointdraft-tile-effect {
  position: absolute;
  bottom: -6px;
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--effect-color, #f0b429);
  background: #0a1628;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--effect-color, #f0b429);
  white-space: nowrap;
}

/* New tile pop-in */
.pointdraft-tile-new {
  animation: pointdraft-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pointdraft-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Drag states */
.pointdraft-tile-dragging {
  opacity: 0.3;
}

.pointdraft-tile-drop-target {
  border-color: #4ecdc4;
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.5);
}

.pointdraft-drag-ghost {
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 62px;
  background: rgba(78, 205, 196, 0.25);
  border: 2px solid #4ecdc4;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.4);
}

.pointdraft-drag-ghost .pointdraft-tile-letter {
  font-size: 1.4rem;
  font-weight: 900;
  color: #f5f0e8;
}

.pointdraft-drag-ghost .pointdraft-tile-value {
  font-size: 0.7rem;
  color: #8899aa;
}

/* Done button */
.pointdraft-done-btn {
  display: block;
  margin: 12px auto 0;
  padding: 12px 32px;
  background: #4ecdc4;
  color: #0a1628;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.pointdraft-done-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pointdraft-done-btn:active:not(:disabled) {
  transform: scale(0.96);
}

/* === Mode Launcher Landing Button === */
.landing-mode-lab-btn {
  display: block;
  margin: 1.5rem auto 0;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: rgba(78, 205, 196, 0.45);
  border: 1px solid rgba(78, 205, 196, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.landing-mode-lab-btn:hover,
.landing-mode-lab-btn:active {
  background: rgba(78, 205, 196, 0.1);
  color: #4ecdc4;
  border-color: rgba(78, 205, 196, 0.3);
}

/* === Mode Launcher Hub Button === */
.hub-mode-launcher-btn {
  display: block;
  margin: 1.5rem auto 0;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(78, 205, 196, 0.1);
  color: rgba(78, 205, 196, 0.6);
  border: 1px solid rgba(78, 205, 196, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.hub-mode-launcher-btn:hover,
.hub-mode-launcher-btn:active {
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  border-color: rgba(78, 205, 196, 0.4);
}

/* === Mode Launcher Overlay === */
#mode-launcher-overlay.hidden {
  display: none;
}
.ml-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 22, 40, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}

.ml-password-card {
  background: #162038;
  border: 2px solid #2a3a5c;
  border-radius: 16px;
  padding: 2rem;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.ml-password-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f0b429;
  margin-bottom: 0.25rem;
}
.ml-password-subtitle {
  font-size: 0.85rem;
  color: #8899aa;
  margin-bottom: 1.25rem;
}
.ml-password-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  background: #0a1628;
  border: 1px solid #2a3a5c;
  border-radius: 8px;
  color: #f5f0e8;
  text-align: center;
  letter-spacing: 0.1em;
  outline: none;
}
.ml-password-input:focus {
  border-color: #4ecdc4;
}
.ml-password-error {
  color: #e63946;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.ml-password-error.hidden {
  display: none;
}
.ml-password-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.ml-btn {
  flex: 1;
  padding: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.ml-btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #8899aa;
}
.ml-btn-enter {
  background: #4ecdc4;
  color: #0a1628;
}
.ml-btn-enter:active {
  transform: scale(0.97);
}

/* Mode grid */
.ml-container {
  background: #0a1628;
  max-width: 500px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ml-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.ml-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f0b429;
}
.ml-close-btn {
  background: none;
  border: none;
  color: #8899aa;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}
.ml-close-btn:hover { color: #f5f0e8; }
.ml-seed-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ml-seed-row label {
  font-size: 0.85rem;
  color: #8899aa;
  white-space: nowrap;
}
.ml-seed-row input {
  flex: 1;
  background: #162038;
  border: 1px solid #2a3a5c;
  color: #f5f0e8;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.ml-btn-random {
  flex: none;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  background: #4ecdc4;
  color: #0a1628;
}

.ml-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.ml-mode-card {
  background: #162038;
  border: 2px solid #2a3a5c;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}
.ml-mode-card:hover {
  border-color: #4ecdc4;
  background: #1a2848;
  transform: translateY(-1px);
}
.ml-mode-card:active {
  transform: scale(0.98);
}
.ml-mode-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0b429;
}
.ml-mode-desc {
  font-size: 0.8rem;
  color: #99aabb;
  line-height: 1.3;
  margin-top: 0.2rem;
}