/* ==========================================================================
   Two-Tier CSS Architecture: Co-Located Feature Styles
   Canonical: GEMINI.md § 2.4 & ARCHITECTURE_SPEC.md § 10.6
   ========================================================================== */
/* Inlined: aperture.css */
/* -------------------------------------------------------------------------- */
/* Aperture Slat Puzzle Board Layout & Centering                              */
/* -------------------------------------------------------------------------- */
#board-grid.fww-game-aperture,
#board-grid.aperture-active,
#board-grid.shutter-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 860px;
  height: auto;
  max-height: 100%;
  aspect-ratio: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 8px;
  overflow-y: auto;
}

.fww-game-aperture .aperture-board-wrapper,
.aperture-board-wrapper,
.shutter-board-wrapper {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: system-ui, -apple-system, sans-serif;
}

.fww-game-aperture .aperture-target-strip,
.aperture-target-strip,
.shutter-target-strip {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.fww-game-aperture .aperture-grid-container,
.aperture-grid-container,
.shutter-grid-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Aperture / Shutter Slat Dragging, Animation & Track Guides */
.aperture-step-banner,
.shutter-step-banner {
  width: 100%;
  max-width: 680px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid #38bdf8;
  border-radius: 12px;
  padding: 8px 16px;
  color: #f8fafc;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(56, 189, 248, 0.25);
  animation: apertureBannerFadeIn 0.3s ease-out;
  box-sizing: border-box;
  text-align: center;
}

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

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

.fww-game-aperture .aperture-tile.aperture-slat-dragging,
.aperture-slat-dragging,
.shutter-slat-dragging {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.6);
  border-color: #38bdf8;
  cursor: grabbing;
  will-change: transform;
}

.fww-game-aperture .aperture-tile.aperture-drop-target,
.fww-game-aperture .aperture-track-tab.aperture-drop-target,
.aperture-drop-target,
.shutter-drop-target {
  box-shadow: inset 0 0 0 2px #06b6d4, 0 0 16px rgba(6, 182, 212, 0.6);
  border-color: #06b6d4;
  background-color: rgba(6, 182, 212, 0.15);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fww-game-aperture .aperture-tile.aperture-anim-source-slat,
.fww-game-aperture .aperture-track-tab.aperture-anim-source-slat,
.aperture-anim-source-slat,
.shutter-anim-source-slat {
  box-shadow: 0 0 0 2px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.7);
  border-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.2);
  will-change: transform;
}

.fww-game-aperture .aperture-tile.aperture-anim-target-track,
.fww-game-aperture .aperture-track-tab.aperture-anim-target-track,
.aperture-anim-target-track,
.shutter-anim-target-track {
  box-shadow: inset 0 0 0 2px #10b981, 0 0 20px rgba(16, 185, 129, 0.6);
  border-color: #10b981;
  background-color: rgba(16, 185, 129, 0.18);
}

.aperture-anim-latch,
.shutter-anim-latch {
  animation: apertureApertureFlash 0.45s ease-out forwards;
}

@keyframes apertureApertureFlash {
  0% {
    box-shadow: 0 0 0 3px #fbbf24, 0 0 25px rgba(251, 191, 36, 0.9);
    filter: brightness(1.4);
  }
  100% {
    box-shadow: none;
    filter: brightness(1);
  }
}

@keyframes shutterApertureFlash {
  0% {
    box-shadow: 0 0 0 3px #fbbf24, 0 0 25px rgba(251, 191, 36, 0.9);
    filter: brightness(1.4);
  }
  100% {
    box-shadow: none;
    filter: brightness(1);
  }
}

/* Canonical Over-Board Timer, Slides/Par & Compact Difficulty Pills */
.fww-game-aperture .aperture-board-top-stats,
.aperture-board-top-stats {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-size: 0.78rem;
  font-weight: 800;
  color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  flex-wrap: wrap;
}

.aperture-top-stats-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aperture-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(71, 85, 105, 0.5);
  white-space: nowrap;
}

.aperture-stat-timer-val {
  color: #10b981;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  font-weight: 900;
}

.aperture-stat-slides-val strong {
  color: #38bdf8;
  font-weight: 900;
}

.aperture-difficulty-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(71, 85, 105, 0.6);
  border-radius: 999px;
  padding: 2px;
}

.aperture-diff-pill-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aperture-diff-pill-btn:hover:not(:disabled) {
  color: #f8fafc;
}

.aperture-diff-pill-btn.active {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(14, 165, 233, 0.4);
}

.aperture-diff-pill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aperture-step-banner-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.aperture-step-banner-wrapper.is-docked-banner-host:empty {
  display: none;
}

/* Inline Edit Target Phrase Button & Compact Custom Phrase Drawer */
.btn-aperture-edit-phrase {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-aperture-edit-phrase:hover,
.btn-aperture-edit-phrase.is-active {
  background: rgba(56, 189, 248, 0.28);
  color: #e0f2fe;
}

.aperture-custom-phrase-drawer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-sizing: border-box;
  flex-wrap: nowrap;
}

.aperture-custom-phrase-drawer.is-open {
  display: flex;
}

.aperture-custom-phrase-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.aperture-word-input {
  flex: 1 1 0;
  width: 100%;
  min-width: 60px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 6px;
  color: #fef08a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  text-align: center;
  outline: none;
}

.aperture-word-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.btn-aperture-apply-phrase,
.btn-aperture-random-phrase {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.btn-aperture-apply-phrase {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  border: 1px solid #38bdf8;
  color: #ffffff;
}

.btn-aperture-random-phrase {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(100, 116, 139, 0.6);
  color: #cbd5e1;
}

/* Aperture HUD Controls & Panel Layout */
#panel-hud.panel-hud.aperture-hud-active {
  display: flex;
  flex-direction: column;
}

#panel-hud.panel-hud.aperture-hud-active .keyboard-tray-section {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#panel-hud.panel-hud.aperture-hud-active #keyboard-container {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Clue Overlay Suppression across all viewports for Aperture modes (Hub Tabs panel remains active) */
body[data-game-theme="aperture"] #hud-clue-overlay,
body[data-game-theme="aperture_daily"] #hud-clue-overlay,
body[data-game-theme="shutter"] #hud-clue-overlay,
body[data-game-theme="shutter_daily"] #hud-clue-overlay,
#panel-hud.panel-hud.aperture-hud-active #hud-clue-overlay,
#panel-hud.panel-hud.aperture-hud-active .hud-clue-overlay {
  display: none;
}

.aperture-track-tab,
.shutter-track-tab {
  font-size: 0.65rem;
  font-family: monospace;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.6);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: all 0.15s ease;
}

.aperture-track-tab:hover,
.shutter-track-tab:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.aperture-col-tab,
.shutter-col-tab {
  height: 22px;
  cursor: col-resize;
}

.aperture-row-tab,
.shutter-row-tab {
  width: 24px;
  cursor: row-resize;
}

/* Aperture Difficulty Transition Animations */
.fww-game-aperture .aperture-tile-morphing,
.aperture-tile-morphing {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fww-game-aperture .aperture-tile-fade-out,
.aperture-tile-fade-out {
  opacity: 0;
  transform: scale(0.65);
}

.fww-game-aperture .aperture-tile-fade-in,
.aperture-tile-fade-in {
  opacity: 1;
  transform: scale(1);
}

.fww-game-aperture .aperture-track-slide-out,
.aperture-track-slide-out {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0.75) translateY(-20px);
  pointer-events: none;
}

/* Touch-action and responsiveness for optical aperture slat dragging */
.aperture-tile,
.shutter-tile,
.aperture-track-tab,
.shutter-track-tab,
.aperture-grid-container,
.shutter-grid-container,
.aperture-grid-cells,
.shutter-grid-cells {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}


/* Inlined: avalanche.css */
/* ==========================================================================
   Avalanche: Collapsing Poker Dice Kinetic Board & Under-Board Controls
   ========================================================================== */

#board-grid.avalanche-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 4px 6px 2px 6px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  touch-action: none;
}

/*
 * Board wrapper framing (relocated from css/board.css per GEMINI.md §2.4).
 * Desktop .board-container-wrapper uses `container-type: size` (board.css @media min-width:769px)
 * so square boards can size via cq units. Size containment zeroes the wrapper's intrinsic height,
 * which collapsed this content-sized arena to 0px. Opt out, as Aperture and Elkraf do.
 * `avalanche-active` is applied for both casual and daily launches (app._performMountGameViews).
 */
.panel-board .board-container-wrapper:has(#board-grid.avalanche-active) {
  container-type: normal !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  width: 100% !important;
  margin: auto auto 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
}

.panel-board .board-container-wrapper:has(#board-grid.avalanche-active) #board-top-stats {
  display: none !important;
}

.avalanche-arena-wrapper,
.avalanche-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  margin: auto;
  box-sizing: border-box;
}

/* Weather window gradients on board wrapper */
.avalanche-wrapper.weather-bluebird {
  background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.16) 0%, rgba(14, 165, 233, 0.04) 60%, transparent 100%);
  box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.08);
}
.avalanche-wrapper.weather-clouds {
  background: radial-gradient(circle at 50% 30%, rgba(148, 163, 184, 0.14) 0%, rgba(71, 85, 105, 0.06) 65%, transparent 100%);
  box-shadow: inset 0 0 40px rgba(100, 116, 139, 0.1);
}
.avalanche-wrapper.weather-storm {
  background: radial-gradient(circle at 50% 40%, rgba(51, 65, 85, 0.28) 0%, rgba(15, 23, 42, 0.15) 70%, transparent 100%);
  box-shadow: inset 0 0 50px rgba(30, 41, 59, 0.35);
}

/* Avalanche Top Stats Bar */
.avalanche-top-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(4px, 1.2vmin, 6px);
  width: 100%;
  max-width: 360px;
  margin: 0 auto clamp(3px, 1vmin, 6px) auto;
  z-index: 5;
  user-select: none;
  box-sizing: border-box;
}

.avalanche-top-stats .board-mode-toggle-wrapper {
  position: static;
  transform: none;
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 410px) {
  .avalanche-top-stats .board-mode-toggle-wrapper {
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.avalanche-top-stats .stat-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(2px, 0.8vmin, 4px) clamp(6px, 1.8vmin, 8px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.avalanche-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) .stat-chip {
  flex: 0 1 auto;
}

.avalanche-top-stats .stat-chip-label {
  font-size: clamp(0.56rem, 1.6vmin, 0.62rem);
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.avalanche-top-stats .stat-chip-value {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: clamp(0.76rem, 2.2vmin, 0.88rem);
  color: #fff;
  white-space: nowrap;
}

#chip-multiplier {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.3) 0%, rgba(15, 23, 42, 0.85) 100%);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#chip-multiplier.combo-pulse {
  transform: scale(1.08);
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}
#chip-multiplier.weather-bluebird {
  border-color: rgba(56, 189, 248, 0.6);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%);
}
#chip-multiplier.weather-clouds {
  border-color: rgba(148, 163, 184, 0.5);
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%);
}
#chip-multiplier.weather-storm {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.35) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.multiplier-badge {
  color: #38bdf8;
  font-weight: 900;
}

/* Avalanche Board Tray Urgency Peripheral Glow (Tumble Alignment) */
#board-tray.urgency-warning,
.avalanche-arena-wrapper.urgency-warning #board-tray {
  animation: urgencyAmberPulse 1.5s ease-in-out infinite !important;
  border-color: #f59e0b !important;
}

#board-tray.urgency-critical,
.avalanche-arena-wrapper.urgency-critical #board-tray {
  animation: urgencyCrimsonPulse 0.65s ease-in-out infinite !important;
  border-color: #ef4444 !important;
}

#stat-val-timer.urgency-warning {
  color: #fbbf24 !important;
}

#stat-val-timer.urgency-critical {
  color: #ef4444 !important;
  animation: timerHeartbeat 0.65s ease-in-out infinite !important;
}

/* Multi-Stage Peripheral & Foveal Urgency (Dice Border Synchronization - CROSS_GAME_SPEC §22.4) */
#board-tray.urgency-warning .die-slot:not(.selected) .die-face,
.avalanche-arena-wrapper.urgency-warning .die-slot:not(.selected) .die-face {
  border-color: #f59e0b;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.4), 0 0 6px rgba(245, 158, 11, 0.3);
  animation: avalancheDieWarningPulse 1.5s ease-in-out infinite;
}

#board-tray.urgency-critical .die-slot:not(.selected) .die-face,
.avalanche-arena-wrapper.urgency-critical .die-slot:not(.selected) .die-face {
  border-color: #ef4444;
  box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.5), 0 0 10px rgba(239, 68, 68, 0.45);
  animation: avalancheDieCriticalPulse 0.65s ease-in-out infinite alternate;
}

@keyframes avalancheDieWarningPulse {
  0%, 100% { border-color: #f59e0b; }
  50% { border-color: #fbbf24; box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.55), 0 0 10px rgba(245, 158, 11, 0.4); }
}

@keyframes avalancheDieCriticalPulse {
  0% { border-color: #ef4444; }
  100% { border-color: #f87171; box-shadow: inset 0 0 16px rgba(239, 68, 68, 0.7), 0 0 14px rgba(239, 68, 68, 0.6); }
}

/* Avalanche Peak Hand Teaser Banner */
.avalanche-peak-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(3px, 1vmin, 5px) clamp(8px, 2vmin, 12px);
  margin: 2px auto clamp(3px, 1vmin, 6px) auto;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: clamp(0.70rem, 2vmin, 0.80rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}

.avalanche-peak-banner .peak-icon {
  font-size: 0.95rem;
}

.avalanche-peak-banner .peak-highlight {
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
}

.avalanche-peak-banner.peak-matched {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(15, 23, 42, 0.95));
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
}

.avalanche-peak-banner.peak-matched .peak-highlight {
  color: #34d399;
}

/* Inflow Indicator */
.inflow-indicator-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(0.58rem, 1.6vmin, 0.64rem);
  font-weight: 700;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: clamp(2px, 0.8vmin, 4px);
  opacity: 0.85;
  animation: pulseInflow 2.2s infinite ease-in-out;
}
@keyframes pulseInflow {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px); }
}

/* Board Arena Frame */
#board-grid.avalanche-active .board-arena-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

#board-tray {
  --avalanche-grid-size: clamp(160px, min(calc(100vw - 44px), calc(var(--app-height, 100dvh) - 425px), 278px), 278px);
  position: relative;
  background: linear-gradient(145deg, #111e33 0%, #0a1324 100%);
  border: 2px solid #1e3a5f;
  box-shadow:
    0 10px 25px -4px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(2, 132, 199, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: clamp(6px, 1.6vmin, 10px);
  display: inline-block;
  touch-action: none;
  box-sizing: border-box;
}

/* Snowpack Rail */
#snowpack-rail-container {
  position: absolute;
  left: -18px;
  top: 10px;
  bottom: 10px;
  width: 11px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  overflow: hidden;
  display: none;
  flex-direction: column-reverse;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 5;
}

#snowpack-fill-bar {
  width: 100%;
  height: 25%;
  background: linear-gradient(to top, #0284c7, #38bdf8, #f43f5e);
  transition: height 0.3s ease;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* Dice Grid & Sizing */
#dice-grid {
  width: var(--avalanche-grid-size);
  height: var(--avalanche-grid-size);
  aspect-ratio: 1 / 1;
  display: grid;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
#dice-grid.grid-3x3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.8vmin, 10px);
}
#dice-grid.grid-3x3 .die-pip {
  width: clamp(9px, 2.5vmin, 12px);
  height: clamp(9px, 2.5vmin, 12px);
}
#dice-grid.grid-4x4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 1.4vmin, 8px);
}
#dice-grid.grid-5x5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.1vmin, 6px);
}

/* SVG Trace Overlay Layer */
#trace-svg-layer {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
  z-index: 10;
}

.trace-line-glow {
  fill: none !important;
  stroke: rgba(56, 189, 248, 0.45);
  stroke-width: 12px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(4px);
}
.trace-line-core {
  fill: none !important;
  stroke: #7dd3fc;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3D Kinetic Die Tile */
.die-slot {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 600px;
  cursor: pointer;
}

.avalanche-board-frame .die-face,
.die-slot .die-face,
#dice-grid .die-face {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 70%, #cbd5e1 100%);
  border-radius: 10px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.35),
    0 2px 4px -2px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  padding: 6px;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  touch-action: none;
}

.die-slot.selected .die-face {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 60%, #7dd3fc 100%);
  border-color: #38bdf8;
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 8px 16px -2px rgba(2, 132, 199, 0.5),
    0 0 12px rgba(56, 189, 248, 0.7),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.die-slot.frozen .die-face {
  background: linear-gradient(135deg, #a5f3fc 0%, #67e8f9 50%, #06b6d4 100%) !important;
  opacity: 0.8;
  border: 2px dashed #0891b2;
  filter: saturate(0.6);
  cursor: not-allowed;
}
.die-slot.frozen::after {
  content: '❄️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  pointer-events: none;
  z-index: 5;
}

/* Die Pips */
.die-pip {
  width: 9px;
  height: 9px;
  background: #0f172a;
  border-radius: 50%;
  margin: auto;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  visibility: hidden;
}
.die-slot.selected .die-pip {
  background: #0369a1;
}

/* Pips Layout for Values 1 - 6 */
.die-face[data-val="1"] .pip-5 { visibility: visible; }
.die-face[data-val="2"] .pip-1, .die-face[data-val="2"] .pip-9 { visibility: visible; }
.die-face[data-val="3"] .pip-1, .die-face[data-val="3"] .pip-5, .die-face[data-val="3"] .pip-9 { visibility: visible; }
.die-face[data-val="4"] .pip-1, .die-face[data-val="4"] .pip-3, .die-face[data-val="4"] .pip-7, .die-face[data-val="4"] .pip-9 { visibility: visible; }
.die-face[data-val="5"] .pip-1, .die-face[data-val="5"] .pip-3, .die-face[data-val="5"] .pip-5, .die-face[data-val="5"] .pip-7, .die-face[data-val="5"] .pip-9 { visibility: visible; }
.die-face[data-val="6"] .pip-1, .die-face[data-val="6"] .pip-3, .die-face[data-val="6"] .pip-4, .die-face[data-val="6"] .pip-6, .die-face[data-val="6"] .pip-7, .die-face[data-val="6"] .pip-9 { visibility: visible; }

/* Path Order Indicator */
.path-order-tag {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: #0284c7;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 4;
  pointer-events: none;
}

/* Kinetic Burst & Fall Animations */
.dice-avalanche-burst {
  animation: avalancheShatter 0.28s forwards ease-out !important;
}
@keyframes avalancheShatter {
  0% { transform: scale(1.04); filter: brightness(1.5) drop-shadow(0 0 15px rgba(56, 189, 248, 1)); }
  50% { transform: scale(1.2) rotate(6deg); opacity: 0.8; }
  100% { transform: scale(0.1) rotate(-18deg); opacity: 0; }
}

/* Level-Aware Avalanche Kinetic Collapse & Staggered Inflow */
.diceGravityFall,
.dice-gravity-fall {
  animation: diceAvalancheTumble 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--anim-stagger, 0ms);
  will-change: transform, opacity, filter;
}
@keyframes diceAvalancheTumble {
  0% {
    transform: translateY(calc(-1 * var(--drop-rows, 1) * 100% - (var(--drop-rows, 1) * 10px))) rotate(calc(var(--tilt-dir, 1) * 4deg));
    opacity: 0.9;
  }
  65% {
    transform: translateY(5px) rotate(0deg) scaleX(1.05) scaleY(0.93);
    opacity: 1;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.45));
  }
  82% {
    transform: translateY(-2px) scaleX(0.99) scaleY(1.02);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

.diceInflowNew,
.dice-inflow-new {
  animation: diceAvalancheInflow 0.42s cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
  animation-delay: var(--anim-stagger, 120ms);
  will-change: transform, opacity, filter;
}
@keyframes diceAvalancheInflow {
  0% {
    transform: translateY(calc(-1 * (var(--drop-rows, 1) + 1.2) * 100% - 30px)) scale(0.68) rotate(calc(var(--tilt-dir, -1) * 7deg));
    opacity: 0;
  }
  60% {
    transform: translateY(6px) scale(1.06) scaleY(0.92);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.6));
  }
  80% {
    transform: translateY(-2px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

/* Avalanche Challenge Objective Header */
.avalanche-goal-banner,
.mountain-goal-banner {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 360px;
  margin: 0 auto 6px auto;
}
.goal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.70rem;
  font-weight: 700;
  color: #f8fafc;
}
.goal-par-badge {
  font-size: 0.62rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 800;
}
.goal-progress-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}
.goal-dot {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  transition: all 0.2s ease;
}
.goal-dot.done {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.goal-dot.active {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

/* Board Bottom Controls (Under-Board Submit Toolbar) */
.board-bottom-controls {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  gap: 6px;
  margin: 8px auto 0 auto;
}

/* Spotlight Bar */
.spotlight-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  min-height: 38px;
}

.spotlight-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.spotlight-hand-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.spotlight-hand-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-points-badge {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Actions Row */
.actions-row {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  align-items: center;
  justify-content: space-between;
}

.btn-action-enter {
  flex: 1.8;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #f59e0b;
  color: #ffffff;
  border-radius: var(--radius-action, 8px);
  font-size: 0.80rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  transition: all 0.12s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}
.btn-action-enter:hover:not(:disabled) {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}
.btn-action-enter:disabled {
  background: #334155;
  border-color: #475569;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-subtle-reset {
  flex: 1;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: var(--radius-action, 8px);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.btn-subtle-reset:hover {
  background: #283548;
  border-color: #475569;
  color: #ffffff;
}

/* Combo Countdown Decay Bar */
#combo-decay-container {
  width: 100%;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  height: 6px;
  overflow: hidden;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
}
#combo-decay-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #f59e0b);
  transition: width 0.1s linear;
}

/* Yesterday Projection SVG Traces */
.trace-line-player {
  stroke: #10b981; /* Green for User / Custom Route */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.8));
}
.trace-line-optimal {
  stroke: #fbbf24; /* Gold for Hardest Route */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 3;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8));
}
.trace-line-player.is-parallel,
.trace-line-optimal.is-parallel {
  stroke-width: 3.5;
  stroke-dasharray: none;
}




/* ==========================================================================
   Avalanche: Hub Tabs Drawer, Harvest Efficiency & Yesterday Compare Styling
   ========================================================================== */

/* Dual-State Harvest Efficiency Card */
.harvest-efficiency-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: fadeInHarvest 0.3s ease-out;
}
@keyframes fadeInHarvest {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.harvest-title {
  font-size: 0.70rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.harvest-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.harvest-percent {
  font-family: var(--font-mono, monospace);
  font-size: 1.4rem;
  font-weight: 900;
  color: #38bdf8;
}
.harvest-grade {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
}
.harvest-grade.grade-s { background: rgba(245, 158, 11, 0.25); color: #fbbf24; border: 1px solid #f59e0b; }
.harvest-grade.grade-a { background: rgba(16, 185, 129, 0.25); color: #34d399; border: 1px solid #10b981; }
.harvest-grade.grade-b { background: rgba(56, 189, 248, 0.25); color: #38bdf8; border: 1px solid #0284c7; }
.harvest-grade.grade-c { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; border: 1px solid #64748b; }
.harvest-detail {
  font-size: 0.68rem;
  color: #cbd5e1;
}

/* Avalanche Hand Cards */
.avalanche-hands-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hand-rank-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.15s ease;
}
.hand-rank-card.highlight {
  border-color: #38bdf8;
  background: rgba(14, 116, 144, 0.25);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.rank-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.rank-desc {
  font-size: 0.66rem;
  color: #94a3b8;
}
.rank-pts {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  color: #7dd3fc;
  background: rgba(15, 23, 42, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Dual-State Badges on Hand Cards */
.hand-card-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.badge-played {
  font-size: 0.64rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-potential {
  font-size: 0.64rem;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}

/* History / Activity Items */
.history-item {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}
.history-item-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.history-dice-tags {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.04em;
}

/* Personal Stats Top Streak Card */
.streak-banner-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 88, 12, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.streak-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.streak-fire-icon {
  font-size: 1.4rem;
}
.streak-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fde68a;
}
.streak-desc {
  font-size: 0.65rem;
  color: #cbd5e1;
}

/* Standing Chip & Podium in Stats Tab */
.standing-chip {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.72rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.podium-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.podium-row {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}
.podium-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.podium-rank {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  width: 18px;
}
.podium-name {
  font-weight: 700;
  color: #fff;
}
.podium-score {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #38bdf8;
}

/* Yesterday Tab Content */
.yesterday-tab-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yesterday-encouraging-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.yesterday-encouraging-icon {
  font-size: 2rem;
  line-height: 1;
}
.yesterday-encouraging-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}
.yesterday-encouraging-text {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
  max-width: 320px;
}
.btn-yesterday-play-today {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: all 0.15s ease;
}
.btn-yesterday-play-today:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.yesterday-summary-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yesterday-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yesterday-summary-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 5px;
}
.yesterday-scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 2px;
}
.score-block-label {
  font-size: 0.64rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 700;
}
.score-block-val {
  font-size: 0.95rem;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
}

.yesterday-dual-track-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px;
}
.yesterday-track-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.yesterday-track-btn:hover {
  color: #fff;
}
.yesterday-track-btn.is-active {
  background: #334155;
  color: #38bdf8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.yesterday-divergence-divider {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.1));
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  font-size: 0.66rem;
  color: #fbbf24;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0;
}

.yesterday-slide-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.70rem;
}
.yesterday-slide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.badge-synced {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.badge-diverged {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.btn-project-slide {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.64rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  align-self: flex-end;
}
.btn-project-slide:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #fff;
}
.btn-project-slide.is-projecting {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fbbf24;
  color: #fef08a;
}

/* =========================================================================
   Yesterday Side-by-Side Hands Board Compare View (Green User vs Gold Golden)
   ========================================================================= */
.yesterday-board-compare {
  display: none;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  flex-direction: column;
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  animation: fadeInCompare 0.25s ease-out;
}
.yesterday-board-compare.is-visible {
  display: flex;
}
@keyframes fadeInCompare {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.compare-headers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  position: sticky;
  top: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(8px);
  padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}
.compare-col-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.compare-col-header.header-user {
  background: rgba(16, 185, 129, 0.15);
  border: 1.5px solid #10b981;
  color: #34d399;
}
.compare-col-header.header-golden {
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid #f59e0b;
  color: #fbbf24;
}
.compare-col-header.is-highlighted {
  box-shadow: 0 0 10px currentColor;
}
.col-header-title {
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.col-header-score {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 900;
}

.compare-slides-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compare-slide-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
}
.compare-slide-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
}
.compare-hands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.compare-hand-card {
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  transition: all 0.2s ease;
}
/* Green Card for User / Custom Route */
.compare-hand-card.card-user {
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  color: #e2e8f0;
}
.compare-hand-card.card-user .hand-rank-title {
  color: #34d399;
  font-weight: 800;
}
.compare-hand-card.card-user .hand-pts-badge {
  color: #10b981;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
}
.compare-hand-card.card-user.is-active-track {
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.22);
}
.compare-hand-card.card-user.is-matched {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.5);
}
.compare-hand-card.card-user.is-matched .hand-rank-title {
  color: #fbbf24;
}
.compare-hand-card.card-user.is-matched .hand-pts-badge {
  color: #f59e0b;
}
.compare-hand-card.card-user.is-matched .compare-mini-die {
  background: #d97706;
  color: #fff;
}

/* Gold Card for Hardest Route / Golden Path */
.compare-hand-card.card-golden {
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  color: #e2e8f0;
}
.compare-hand-card.card-golden .hand-rank-title {
  color: #fbbf24;
  font-weight: 800;
}
.compare-hand-card.card-golden .hand-pts-badge {
  color: #f59e0b;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
}
.compare-hand-card.card-golden.is-active-track {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.22);
}

.compare-dice-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0;
  flex-wrap: wrap;
}
.compare-mini-die {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 800;
}
.card-user .compare-mini-die {
  background: #064e3b;
  border: 1px solid #10b981;
  color: #6ee7b7;
}
.card-golden .compare-mini-die {
  background: #78350f;
  border: 1px solid #f59e0b;
  color: #fef08a;
}

.btn-project-row {
  align-self: flex-end;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  transition: all 0.15s ease;
}
.btn-project-row:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #fff;
}

/* Inlined: branches.css */
/* =========================================================================
   Uncross: Branches - Dendrology & The Living Canopy Expedition
   ========================================================================= */

/* Mother Tree Heartwood Center Seed Tile */
.board-cell.seed-tile-mother-tree {
  background: linear-gradient(145deg, #78350f 0%, #92400e 55%, #b45309 100%) !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.5), inset 0 1px 0 rgba(254, 243, 199, 0.25) !important;
}

.board-cell.seed-tile-mother-tree .cell-letter {
  color: #fef3c7 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 6px rgba(251, 191, 36, 0.4);
}

.board-cell.seed-tile-mother-tree .cell-tile-value {
  color: #fde68a !important;
}

/* Camouflaged Secret Branch Nodes */
.game-branches .tile-placed.tile-mine {
  background: linear-gradient(135deg, #1e3a29, #14281d);
  border-bottom: 2px solid #059669;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.game-branches .tile-placed.tile-mine .cell-letter {
  color: #6ee7b7;
}

.game-branches .tile-placed.tile-masked {
  background: linear-gradient(135deg, #1c1917, #0f172a);
  border: 1px solid #15803d;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(34, 197, 94, 0.15);
}

.game-branches .tile-placed.tile-masked .cell-letter {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* Bioluminescent Spore Ghost Tiles */
.game-branches .ghost-tile {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.25), rgba(15, 23, 42, 0.85)) !important;
  border: 2px dashed #f59e0b !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45) !important;
  animation: sporeGlow 1.8s infinite alternate ease-in-out;
}

.game-branches .ghost-tile .cell-letter {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}

@keyframes sporeGlow {
  0% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.3); }
  100% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.7); }
}

/* Canopy Bloom Flowering Animation */
@keyframes canopyBloom {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 rgba(236, 72, 153, 0);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.85);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
  }
}

.tile-canopy-bloom {
  animation: canopyBloom 0.8s ease-out;
}

/* Pruning Mode: Eligible Rival Terminal Branches */
.board-cell.prune-eligible-cell {
  position: relative;
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
  cursor: pointer !important;
  animation: pruneEligiblePulse 1.8s infinite ease-in-out;
}

.board-cell.prune-eligible-cell:hover {
  outline: 2.5px solid #ef4444;
  background-color: rgba(239, 68, 68, 0.25) !important;
  transform: scale(1.04);
  z-index: 20;
}

.board-cell.prune-eligible-cell::after {
  content: '✂️';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.85rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation: shearsWiggle 2s infinite ease-in-out;
}

@keyframes pruneEligiblePulse {
  0%, 100% { outline-color: #f59e0b; box-shadow: inset 0 0 6px rgba(245, 158, 11, 0.4); }
  50% { outline-color: #ef4444; box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.6); }
}

@keyframes shearsWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}



/* =======================================================
   Uncross: Branches - Grafted Word Borders & Creator Pip
   ======================================================= */

.board-cell.cell-grafted-word {
  position: relative;
}

.board-cell.grafted-border-top {
  border-top: 2.5px solid var(--grafter-color, #38bdf8) !important;
}

.board-cell.grafted-border-bottom {
  border-bottom: 2.5px solid var(--grafter-color, #38bdf8) !important;
}

.board-cell.grafted-border-left {
  border-left: 2.5px solid var(--grafter-color, #38bdf8) !important;
}

.board-cell.grafted-border-right {
  border-right: 2.5px solid var(--grafter-color, #38bdf8) !important;
}

/* Creator Micro-Pip (shows planter color on anchor tile) */
.cell-creator-pip {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  z-index: 5;
  pointer-events: none;
}

/* Pruning Hover & Live Dulling Feedback */
.board-cell.prune-target-hover {
  outline: 3px solid #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.35) !important;
  cursor: pointer !important;
  transform: scale(1.04);
  z-index: 25;
}

.drag-ghost-shears-dulled,
.touch-drag-ghost.drag-ghost-shears-dulled,
.palette-tile-dragging.drag-ghost-shears-dulled {
  opacity: 0.35 !important;
  filter: grayscale(85%) !important;
  transform: scale(0.92) !important;
  transition: opacity 0.15s, transform 0.15s, filter 0.15s;
}

.drag-ghost-shears-valid,
.touch-drag-ghost.drag-ghost-shears-valid,
.palette-tile-dragging.drag-ghost-shears-valid {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 16px #f59e0b !important;
  transition: opacity 0.15s, transform 0.15s, filter 0.15s;
}



/* Branches Living Sprout Pulse */
@keyframes branchesPulse {
  0% {
    transform: scale(0.93);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.9), inset 0 0 10px rgba(22, 163, 74, 0.7);
    border-color: #4ade80;
  }
  45% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.8), inset 0 0 14px rgba(34, 197, 94, 0.8);
    border-color: #86efac;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px 1px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
  }
}
.board-cell.cell-bot-pulse-branches {
  animation: branchesPulse 1.8s ease-out forwards !important;
  z-index: 12 !important;
}



/* ==========================================================================
   Uncross: Branches UI Styling (Palette Tray, Seed Banner, Pangram Tracker)
   ========================================================================== */

.branches-seed-banner {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.branches-seed-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  color: #a7f3d0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.branches-seed-word-display {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
  margin-top: 4px;
}

.branches-pangram-card {
  background: linear-gradient(135deg, rgba(15, 35, 25, 0.9), rgba(20, 40, 30, 0.8));
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: var(--radius-md, 8px);
  padding: 9px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(110, 231, 183, 0.15);
}

.branches-pangram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #a7f3d0;
  font-weight: 700;
}

.branches-pangram-letters {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.pangram-letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.8);
  color: #64748b;
  border: 1px solid #334155;
  transition: all 0.2s ease;
}

.pangram-letter-badge.used {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
  transform: translateY(-1px);
}

/* Master Seed Palette in Bottom Inventory Area */
/* Seed Word Tile Rack (Uncross: Branches) */
.branches-tile-rack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  margin: 2px 0 4px 0;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md, 8px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --tray-tile-size: clamp(38px, min(var(--board-tile-size, 42px), 46px), 46px);
  min-height: calc(var(--tray-tile-size, 42px) + 8px);
  flex-wrap: nowrap;
  max-width: 100%;
}

.branches-palette-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  gap: 6px;
}

.palette-tile {
  position: relative;
  width: var(--tray-tile-size, 42px);
  height: var(--tray-tile-size, 42px);
  aspect-ratio: 1 / 1;
  min-width: 0;
  flex-shrink: 0;
  background: linear-gradient(145deg, #fef3c7, #fde68a);
  border: 1px solid #d97706;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.palette-tile:hover:not(.exhausted) {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
}

.palette-tile.exhausted {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.85);
  box-shadow: none;
  transform: none !important;
}

.palette-tile.tile-selected-for-place {
  border-color: #38bdf8 !important;
  transform: translateY(-4px);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4);
}

.palette-tile.palette-tile-dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.palette-tile-char {
  font-size: 1.25rem;
  font-weight: 900;
  color: #1e293b;
  line-height: 1;
}

.palette-tile-pts {
  font-size: 0.55rem;
  color: #78350f;
  font-weight: 800;
  position: absolute;
  bottom: 2px;
  right: 3px;
}

.palette-tile-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0284c7;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 9999px;
  min-width: 17px;
  height: 17px;
  font-size: 0.65rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

.palette-tile.exhausted .palette-tile-count-badge {
  background: #64748b;
  border-color: #94a3b8;
}

/* Private Hint Modal Styling */
.hint-modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.hint-tier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.hint-tier-card:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  transform: translateX(4px);
}

.hint-tier-info strong {
  display: block;
  font-size: 0.95rem;
  color: #fbbf24;
}

.hint-tier-info span {
  font-size: 0.8rem;
  color: #cbd5e1;
}

.hint-tier-cost {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
}



/* =======================================================
   Uncross: Branches - Arborist's Shears Tile in Seed Rack
   ======================================================= */

.tray-tile.palette-tile.tray-tile-shears {
  background: linear-gradient(135deg, #78350f, #92400e) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5), inset 0 0 4px rgba(245, 158, 11, 0.3) !important;
  cursor: grab !important;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tray-tile.palette-tile.tray-tile-shears:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.8) !important;
  transform: translateY(-2px);
}

.tray-tile.palette-tile.tray-tile-shears .tray-tile-char {
  font-size: clamp(1.2rem, 3.2vw, 1.7rem) !important;
  line-height: 1;
}

.tray-tile.palette-tile.tray-tile-shears .tray-tile-pts {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #fde68a !important;
  letter-spacing: 0.5px;
}

.tray-tile.palette-tile.tray-tile-shears.prune-active,
.tray-tile.palette-tile.tray-tile-shears.tile-selected-for-place {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.85) !important;
  animation: shearsPulse 1.4s infinite alternate ease-in-out;
}

@keyframes shearsPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }
  100% {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.95);
  }
}

/* Inlined: catchya.css */
/* CatchYa Arena and Tile Micro-Animations (Co-located) */


  /* CatchYa Micro-Animations (Desynchronized CSS Variables) */
  @keyframes tlRedCycle {
    0%, 33% { opacity: 1; filter: drop-shadow(0 0 6px #ef4444); }
    34%, 100% { opacity: 0.25; filter: none; }
  }
  @keyframes tlYellowCycle {
    0%, 33% { opacity: 0.25; filter: none; }
    34%, 66% { opacity: 1; filter: drop-shadow(0 0 6px #f59e0b); }
    67%, 100% { opacity: 0.25; filter: none; }
  }
  @keyframes tlGreenCycle {
    0%, 66% { opacity: 0.25; filter: none; }
    67%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #10b981); }
  }
  .catchya-tile-active-anim .anim-tl-red {
    animation: tlRedCycle var(--tl-dur, 3s) infinite var(--tl-delay, 0s);
  }
  .catchya-tile-active-anim .anim-tl-yellow {
    animation: tlYellowCycle var(--tl-dur, 3s) infinite var(--tl-delay, 0s);
  }
  .catchya-tile-active-anim .anim-tl-green {
    animation: tlGreenCycle var(--tl-dur, 3s) infinite var(--tl-delay, 0s);
  }

  @keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .catchya-tile-active-anim .anim-wheel-front {
    transform-origin: 18px 42px;
    animation: wheelSpin var(--wh-dur, 1.2s) linear infinite var(--wh-delay, 0s);
  }
  .catchya-tile-active-anim .anim-wheel-rear {
    transform-origin: 46px 42px;
    animation: wheelSpin var(--wh-dur, 1.2s) linear infinite var(--wh-delay, 0s);
  }

  @keyframes sprayPulse {
    0%, 100% { transform: scale(0.8) translate(0, 0); opacity: 0.3; }
    50% { transform: scale(1.2) translate(-2px, -1px); opacity: 1; filter: drop-shadow(0 0 4px #38bdf8); }
  }
  .catchya-tile-active-anim .anim-hydrant-spray {
    transform-origin: 10px 27px;
    animation: sprayPulse var(--sp-dur, 1.6s) ease-in-out infinite var(--sp-delay, 0s);
  }

  @keyframes wiperSweep {
    0%, 100% { transform: rotate(-25deg); }
    50% { transform: rotate(25deg); }
  }
  .catchya-tile-active-anim .anim-bus-wiper {
    transform-origin: 32px 32px;
    animation: wiperSweep var(--wp-dur, 1.1s) ease-in-out infinite var(--wp-delay, 0s);
  }

  @keyframes stripePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
  }
  .catchya-tile-active-anim .anim-crosswalk-stripe {
    animation: stripePulse var(--cs-dur, 2s) ease-in-out infinite var(--cs-delay, 0s);
  }

  @keyframes riverDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  .catchya-tile-active-anim .anim-bridge-wave {
    animation: riverDrift var(--rw-dur, 2.4s) ease-in-out infinite var(--rw-delay, 0s);
  }

  .catchya-tile-active-anim .anim-moto-front {
    transform-origin: 16px 42px;
    animation: wheelSpin var(--mf-dur, 0.9s) linear infinite var(--mf-delay, 0s);
  }
  .catchya-tile-active-anim .anim-moto-rear {
    transform-origin: 48px 42px;
    animation: wheelSpin var(--mf-dur, 0.9s) linear infinite var(--mf-delay, 0s);
  }

  @keyframes doorSwing {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.2); opacity: 0.7; }
  }
  .catchya-tile-active-anim .anim-store-door {
    transform-origin: 22px 38px;
    animation: doorSwing var(--dr-dur, 2.8s) ease-in-out infinite var(--dr-delay, 0s);
  }

  @keyframes fishTailWiggle {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(14deg); }
  }
  .catchya-tile-active-anim .anim-fish-tail {
    transform-origin: 14px 32px;
    animation: fishTailWiggle var(--fs-dur, 1.1s) ease-in-out infinite var(--fs-delay, 0s);
  }

  @keyframes fishBubbleDrift {
    0% { transform: translateY(0) scale(0.7); opacity: 0.2; }
    50% { opacity: 0.9; }
    100% { transform: translateY(-8px) scale(1.2); opacity: 0; }
  }
  .catchya-tile-active-anim .anim-fish-bubble {
    animation: fishBubbleDrift var(--fb-dur, 1.8s) ease-out infinite var(--fb-delay, 0s);
  }

  @keyframes botScanLine {
    0%, 100% { opacity: 0.25; transform: scaleX(0.4); }
    50% { opacity: 1; transform: scaleX(1); filter: drop-shadow(0 0 5px #22c55e); }
  }
  .catchya-tile-active-anim .anim-bot-scan {
    transform-origin: 32px 31px;
    animation: botScanLine var(--bt-dur, 1.2s) ease-in-out infinite var(--bt-delay, 0s);
  }

  @keyframes botBeaconPulse {
    0%, 100% { opacity: 0.25; filter: none; }
    50% { opacity: 1; filter: drop-shadow(0 0 6px #ef4444); }
  }
  .catchya-tile-active-anim .anim-bot-beacon {
    animation: botBeaconPulse var(--bb-dur, 1.5s) ease-in-out infinite var(--bb-delay, 0s);
  }

  /* 7 Composable Kinetic Micro-Animation Primitives for 500-Noun Pool */
  @keyframes catchyaBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3.5px); }
  }
  @keyframes catchyaSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
  }
  @keyframes catchyaPulseGlow {
    0%, 100% { transform: scale(0.94); opacity: 0.88; }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6)); }
  }
  @keyframes catchyaWiggle {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-6deg); }
    75% { transform: translateX(2px) rotate(6deg); }
  }
  @keyframes catchyaFlutter {
    0%, 100% { transform: scaleX(1) translateY(0); }
    50% { transform: scaleX(0.82) translateY(-2.5px); }
  }
  @keyframes catchyaWave {
    0%, 100% { transform: translateX(-2.5px) translateY(1px); }
    50% { transform: translateX(2.5px) translateY(-2px); }
  }
  @keyframes catchyaTwinkle {
    0%, 100% { opacity: 0.82; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.65)); }
  }

  .catchya-tile-active-anim .anim-spin,
  .catchya-tile-active-anim .anim-spin-slow {
    transform-origin: 32px 32px;
    animation: wheelSpin var(--wh-dur, 2.8s) linear infinite var(--wh-delay, 0s);
  }
  .catchya-tile-active-anim .anim-bob,
  .catchya-tile-active-anim .anim-float-bob {
    transform-origin: 32px 32px;
    animation: catchyaBob var(--sp-dur, 1.6s) ease-in-out infinite var(--sp-delay, 0s);
  }
  .catchya-tile-active-anim .anim-sway,
  .catchya-tile-active-anim .anim-sway-gentle {
    transform-origin: 32px 36px;
    animation: catchyaSway var(--wp-dur, 1.8s) ease-in-out infinite var(--wp-delay, 0s);
  }
  .catchya-tile-active-anim .anim-pulse-glow {
    transform-origin: 32px 32px;
    animation: catchyaPulseGlow var(--tl-dur, 1.9s) ease-in-out infinite var(--tl-delay, 0s);
  }
  .catchya-tile-active-anim .anim-wiggle {
    transform-origin: 32px 32px;
    animation: catchyaWiggle var(--fs-dur, 1.3s) ease-in-out infinite var(--fs-delay, 0s);
  }
  .catchya-tile-active-anim .anim-flutter {
    transform-origin: 32px 32px;
    animation: catchyaFlutter var(--fb-dur, 1.2s) ease-in-out infinite var(--fb-delay, 0s);
  }
  .catchya-tile-active-anim .anim-wave {
    transform-origin: 32px 32px;
    animation: catchyaWave var(--rw-dur, 2.1s) ease-in-out infinite var(--rw-delay, 0s);
  }
  .catchya-tile-active-anim .anim-twinkle {
    transform-origin: 32px 32px;
    animation: catchyaTwinkle var(--tl-dur, 1.8s) ease-in-out infinite var(--tl-delay, 0s);
  }

  .catchya-verify-hub .catchya-clue-tile-pic {
    --catchya-emoji-size: 1.35rem;
    overflow: hidden;
  }
  .catchya-verify-hub .catchya-clue-tile-pic svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .catchya-verify-hub .catchya-clue-tile-pic .catchya-emoji-glyph {
    font-size: 1.35rem;
  }


/*
 * Board framing (relocated from css/board.css per GEMINI.md §2.4).
 * Desktop .board-container-wrapper uses `container-type: size` (board.css @media min-width:769px)
 * so square boards can size via cq units. Size containment zeroes the wrapper's intrinsic height,
 * which collapsed this content-sized arena to 0px. Opt out, as Aperture and Elkraf do.
 * `catchya-active` is applied for both casual and daily launches (app._performMountGameViews).
 */
.panel-board .board-container-wrapper:has(#board-grid.catchya-active) {
  container-type: normal !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  width: 100% !important;
  margin: auto auto 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
}

.panel-board .board-container-wrapper:has(#board-grid.catchya-active) #board-top-stats {
  display: none !important;
}

/* .board-grid caps height at --board-desktop-size (360px); the arena (banner + grid + actions) is taller. */
.panel-board #board-grid.catchya-active,
#board-grid.catchya-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.catchya-arena-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 2px 8px;
        box-sizing: border-box;
      }

      .catchya-top-stats {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(6px, 2vmin, 14px);
        width: 100%;
        margin-bottom: clamp(4px, 1.2vmin, 8px);
      }
      .catchya-stat-chip {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: clamp(3px, 0.8vmin, 5px) clamp(8px, 2vmin, 12px);
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        font-size: clamp(0.72rem, 2.2vmin, 0.82rem);
        font-weight: 800;
        color: #f8fafc;
      }
      .catchya-stat-timer.urgency-warning {
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.4);
      }
      .catchya-stat-timer.urgency-critical {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.6);
        animation: catchyaBlink 0.65s infinite alternate;
      }
      @keyframes catchyaBlink {
        from { opacity: 1; }
        to { opacity: 0.5; }
      }

      .catchya-target-banner {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: clamp(5px, 1.4vmin, 10px) clamp(10px, 2.5vmin, 14px);
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(56, 189, 248, 0.35);
        border-radius: 12px;
        margin-bottom: clamp(6px, 1.6vmin, 12px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      }
      .catchya-target-label {
        font-size: clamp(0.62rem, 1.8vmin, 0.72rem);
        color: #94a3b8;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1px;
      }
      .catchya-target-highlight {
        font-size: clamp(0.92rem, 2.8vmin, 1.15rem);
        font-weight: 900;
        color: #38bdf8;
        letter-spacing: -0.01em;
      }
      .catchya-target-subtext {
        font-size: clamp(0.62rem, 1.8vmin, 0.7rem);
        color: #cbd5e1;
        margin-top: 1px;
      }

      .catchya-grid-frame {
        --catchya-grid-size: clamp(168px, min(calc(100vw - 40px), calc(var(--app-height, 100dvh) - 395px), 304px), 304px);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: clamp(6px, 1.6vmin, 10px);
        border-radius: 16px;
        background: rgba(15, 23, 42, 0.7);
        border: 2px solid #334155;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        box-sizing: border-box;
      }
      .catchya-grid-frame.urgency-warning {
        border-color: #f59e0b;
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
      }
      .catchya-grid-frame.urgency-critical {
        border-color: #ef4444;
        box-shadow: 0 0 24px rgba(239, 68, 68, 0.5);
      }

      /* Multi-Stage Peripheral & Foveal Urgency Glow (Cell Border Synchronization) */
      .catchya-grid-frame.urgency-warning .catchya-tile:not(.is-selected) {
        border-color: #f59e0b;
        box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.3), 0 0 8px rgba(245, 158, 11, 0.25);
        animation: catchyaCellWarningPulse 1.5s ease-in-out infinite;
      }
      .catchya-grid-frame.urgency-critical .catchya-tile:not(.is-selected) {
        border-color: #ef4444;
        box-shadow: inset 0 0 14px rgba(239, 68, 68, 0.45), 0 0 12px rgba(239, 68, 68, 0.4);
        animation: catchyaCellCriticalPulse 0.65s ease-in-out infinite alternate;
      }

      @keyframes catchyaCellWarningPulse {
        0%, 100% { border-color: #f59e0b; }
        50% { border-color: #fbbf24; box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.45), 0 0 10px rgba(245, 158, 11, 0.35); }
      }
      @keyframes catchyaCellCriticalPulse {
        0% { border-color: #ef4444; }
        100% { border-color: #f87171; box-shadow: inset 0 0 18px rgba(239, 68, 68, 0.65), 0 0 16px rgba(239, 68, 68, 0.55); }
      }

      .catchya-3x3-grid {
        width: var(--catchya-grid-size);
        height: var(--catchya-grid-size);
        aspect-ratio: 1 / 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(5px, 1.5vmin, 8px);
        box-sizing: border-box;
      }

      .catchya-4x4-grid {
        width: var(--catchya-grid-size);
        height: var(--catchya-grid-size);
        aspect-ratio: 1 / 1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: clamp(4px, 1.2vmin, 6px);
        box-sizing: border-box;
      }
      .catchya-4x4-grid .catchya-tile {
        width: 100%;
        height: 100%;
      }

      .catchya-tile {
        position: relative;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        background: rgba(30, 41, 59, 0.85);
        border: 2px solid rgba(255, 255, 255, 0.12);
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
      }
      .catchya-tile:hover {
        border-color: rgba(56, 189, 248, 0.5);
        transform: translateY(-1px);
      }
      .catchya-grid-frame .catchya-tile.is-selected,
      .catchya-tile.is-selected {
        border-color: #10b981;
        box-shadow: 0 0 18px rgba(16, 185, 129, 0.6), inset 0 0 12px rgba(16, 185, 129, 0.25);
        background: rgba(16, 185, 129, 0.16);
        animation: none;
      }

      /* Translucent Frosted Mist Overlay Layer */
      .catchya-tile-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 4;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 10px;
      }
      .catchya-tile.has-overlay .catchya-tile-overlay {
        opacity: 1;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.2);
      }

      .catchya-tile-check {
        display: none;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #10b981;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 900;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
        z-index: 5;
      }
      .catchya-tile.is-selected .catchya-tile-check {
        display: flex;
      }

      .catchya-tile-svg-box {
        width: 74%;
        height: 74%;
        max-width: 68px;
        max-height: 68px;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
      }
      .catchya-tile-svg-box svg {
        width: 100%;
        height: 100%;
      }

      .catchya-hud-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        padding: 4px 8px;
        box-sizing: border-box;
      }
      .catchya-actions-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-top: 6px;
      }
      .catchya-actions-row {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 360px;
      }
      .btn-catchya-verify {
        flex: 1;
        max-width: 240px;
        padding: 6px 16px;
        height: var(--btn-action-height, 36px);
        min-height: var(--btn-action-height, 36px);
        border-radius: var(--radius-action, 8px);
        border: 2px solid #10b981;
        background: #059669;
        color: #fff;
        font-size: 0.82rem;
        font-weight: 800;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.03em;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
        transition: transform 0.1s ease, filter 0.1s ease;
      }
      .btn-catchya-verify:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
      }
      .btn-catchya-verify:active {
        transform: translateY(1px);
      }
      .btn-catchya-clear {
        padding: 6px 14px;
        height: var(--btn-action-height, 36px);
        min-height: var(--btn-action-height, 36px);
        border-radius: var(--radius-action, 8px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(30, 41, 59, 0.85);
        color: #94a3b8;
        font-size: 0.80rem;
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
      }
      .btn-catchya-clear:hover:not(:disabled) {
        background: rgba(51, 65, 85, 0.95);
        color: #f8fafc;
      }
      .btn-catchya-clear:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }

      .catchya-live-badge-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.76rem;
        font-weight: 800;
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #cbd5e1;
        transition: border-color 0.3s ease, color 0.3s ease;
      }
      .catchya-live-badge-pill.tier-bot {
        border-color: rgba(148, 163, 184, 0.4);
      }
      .catchya-live-badge-pill.tier-android {
        border-color: rgba(56, 189, 248, 0.5);
        color: #38bdf8;
      }
      .catchya-live-badge-pill.tier-human {
        border-color: rgba(16, 185, 129, 0.6);
        color: #34d399;
      }
      .catchya-live-badge-pill.tier-super {
        border-color: rgba(245, 158, 11, 0.7);
        color: #fbbf24;
      }

      .panel-board:has(#control-card) .catchya-actions-row,
      .panel-board:has(.keyboard-tray-section) .catchya-actions-row {
        display: none;
      }

/* Inlined: clash.css */
/* Clash Corner Starting Cells & Target Goals */
.board-cell.cell-clash-start {
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.22), #171b24 70%);
  border: 2px dashed var(--player-corner-color, rgba(59, 130, 246, 0.7));
  position: relative;
}

.board-cell.cell-clash-start:hover .clash-start-mark {
  transform: scale(1.1);
}

.board-cell.cell-clash-target {
  box-shadow: inset 0 0 12px var(--player-target-color, rgba(239, 68, 68, 0.4));
  border: 2px dashed var(--player-target-color, rgba(239, 68, 68, 0.7));
  position: relative;
}

/* Clash Directional Concentric Zone Contour Threshold Lines */
.board-cell.contour-top-red { border-top: 3px solid #ef4444 !important; }
.board-cell.contour-bottom-red { border-bottom: 3px solid #ef4444 !important; }
.board-cell.contour-left-red { border-left: 3px solid #ef4444 !important; }
.board-cell.contour-right-red { border-right: 3px solid #ef4444 !important; }

.board-cell.contour-top-yellow { border-top: 3px solid #f59e0b !important; }
.board-cell.contour-bottom-yellow { border-bottom: 3px solid #f59e0b !important; }
.board-cell.contour-left-yellow { border-left: 3px solid #f59e0b !important; }
.board-cell.contour-right-yellow { border-right: 3px solid #f59e0b !important; }

.board-cell.contour-top-green { border-top: 3px solid #10b981 !important; }
.board-cell.contour-bottom-green { border-bottom: 3px solid #10b981 !important; }
.board-cell.contour-left-green { border-left: 3px solid #10b981 !important; }
.board-cell.contour-right-green { border-right: 3px solid #10b981 !important; }

/* Inlined: codex.css */
/* ==========================================================================
   CODEX MANUSCRIPT ARENA & RUNIC CROSSWORD
   ========================================================================== */

#board-grid.codex-active {
  /* Inherits canonical .board-grid background, borders, gap, padding, and shadows */
  margin: 0 auto;
}

.board-cell.cell-block,
.board-cell.codex-cell-block {
  background-color: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  cursor: default !important;
  pointer-events: none;
}

.board-cell.codex-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: border-box;
  transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
  overflow: hidden;
}

.board-cell.codex-cell-tile {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  .board-cell.codex-cell-tile {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}

.board-cell.codex-cell-tile:hover {
  filter: brightness(1.15);
  border-color: #d97706;
}

.board-cell.codex-cell-tile.focused {
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.55) !important;
  z-index: 2;
}

.board-cell.codex-cell-tile.in-active-word {
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.codex-cell-tile.in-active-word {
    background-color: #1e293b !important;
    border-color: #3b82f6 !important;
  }
}

.board-cell.codex-cell-tile.rune-match-highlight {
  background-color: #e0f2fe !important;
  border-color: #38bdf8 !important;
}

.board-cell.codex-cell-tile.rune-match-highlight .codex-rune-glyph {
  color: #0284c7;
}

@media (prefers-color-scheme: dark) {
  .board-cell.codex-cell-tile.rune-match-highlight {
    background-color: #0c4a6e !important;
    border-color: #0284c7 !important;
  }

  .board-cell.codex-cell-tile.rune-match-highlight .codex-rune-glyph {
    color: #7dd3fc;
  }
}

.board-cell.codex-cell-tile.cell-confirmed {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 0 1px #d97706, 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  /* Clean, unshaded porcelain surface with gold border */
}

.board-cell.codex-cell-tile.cell-drafted {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.codex-cell-tile.cell-drafted {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px #60a5fa !important;
  }
}

.board-cell.codex-cell-tile.cell-drafted.cell-incorrect {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.codex-cell-tile.cell-drafted.cell-incorrect {
    border-color: #334155 !important;
    box-shadow: none !important;
  }
}

.board-cell.codex-cell-tile.drag-hover {
  border: 2px dashed #d97706 !important;
  background-color: #fef3c7 !important;
}

/* Directional Tile Navigation Indicators */
.codex-nav-indicator,
.cell-nav-indicator {
  position: absolute;
  right: 2px;
  font-size: 0.5rem;
  line-height: 1;
  color: #94a3b8;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.15s ease, color 0.15s ease;
  z-index: 1;
}

.codex-nav-indicator.nav-up,
.cell-nav-indicator.nav-up {
  top: 2px;
}

.codex-nav-indicator.nav-down,
.cell-nav-indicator.nav-down {
  bottom: 2px;
}

.board-cell:hover .codex-nav-indicator,
.board-cell:hover .cell-nav-indicator,
.board-cell.focused .codex-nav-indicator,
.board-cell.focused .cell-nav-indicator {
  opacity: 1;
  color: #f59e0b;
}

/* Local Cell Drafted State */
.codex-draft-letter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--cell-font-size, clamp(0.85rem, 2.2vw, 1.45rem));
  line-height: 1;
  color: #2563eb;
}

@media (prefers-color-scheme: dark) {
  .codex-draft-letter {
    color: #60a5fa;
  }
}

.codex-draft-letter.is-incorrect {
  color: #64748b;
}

@media (prefers-color-scheme: dark) {
  .codex-draft-letter.is-incorrect {
    color: #94a3b8;
  }
}

.codex-incorrect-strike,
.xword-incorrect-strike,
.letter-incorrect-strike {
  position: absolute;
  top: -10%;
  left: -15%;
  width: 130%;
  height: 120%;
  pointer-events: none;
  z-index: 4;
}

.codex-draft-rune-badge {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: clamp(0.55rem, 1.3vw, 0.72rem);
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  color: #94a3b8;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.codex-cell-num + .codex-draft-rune-badge {
  left: clamp(14px, 2.8vw, 18px);
}

@media (prefers-color-scheme: dark) {
  .codex-draft-rune-badge {
    color: #94a3b8;
  }
}

/* Flipped Confirmed State */
.codex-flipped-letter {
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: var(--cell-font-size, clamp(0.85rem, 2.2vw, 1.45rem));
  line-height: 1;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  .codex-flipped-letter {
    color: #f8fafc;
  }
}

.codex-corner-rune-badge {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: clamp(0.55rem, 1.3vw, 0.72rem);
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  color: #d97706;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .codex-corner-rune-badge {
    color: #fbbf24;
  }
}

/* Codex Domino Ripple Burst Animation (Kinetic Dopamine Cascade) */
@keyframes codexRippleBurst {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    filter: brightness(1.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 16px 4px rgba(245, 158, 11, 0.65);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px #d97706, 0 2px 5px rgba(0, 0, 0, 0.25);
    filter: brightness(1);
  }
}

.board-cell.tile-ripple-burst {
  animation: codexRippleBurst 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  z-index: 10;
}

/* Unresolved Center Rune (Uses standard tile font and font-size in Weathered Slate Ink) */
.codex-rune-glyph {
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-size: var(--cell-font-size, clamp(0.85rem, 2.2vw, 1.45rem));
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  transition: color 0.15s ease;
}

@media (prefers-color-scheme: dark) {
  .codex-rune-glyph {
    color: #94a3b8;
  }
}

.codex-tile-pts {
  position: absolute;
  bottom: 1.5px;
  right: 2px;
  font-size: clamp(0.48rem, 1.2vw, 0.68rem);
  font-weight: 700;
  color: #6b7280;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .codex-tile-pts {
    color: #9ca3af;
  }
}

.codex-tile-pts.pts-mismatch {
  color: #dc2626 !important;
  font-weight: 800;
  text-decoration: underline wavy #ef4444;
}

/* Unresolved Top-Left Tentative Hypothesis Badge (Subtle Pencil) */
.codex-letter-badge {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: clamp(0.58rem, 1.4vw, 0.8rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  min-width: 10px;
  min-height: 10px;
}

.codex-letter-badge.badge-hypothesis {
  color: #2563eb;
}

@media (prefers-color-scheme: dark) {
  .codex-letter-badge.badge-hypothesis {
    color: #38bdf8;
  }
}

.codex-letter-badge.pts-mismatch {
  text-decoration: underline wavy #ef4444;
  color: #dc2626 !important;
}

.codex-timer-display {
  font-family: monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: #d97706;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(217, 119, 6, 0.1);
}

@media (prefers-color-scheme: dark) {
  .codex-timer-display {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
  }
}

/* Clue Card & HUD Toolbar */
.codex-hud-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 4px 8px;
}

.codex-clue-card {
  width: 100%;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: left;
}

.codex-clue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.codex-clue-tag {
  font-weight: 700;
  font-size: 0.85rem;
  color: #b45309;
}

@media (prefers-color-scheme: dark) {
  .codex-clue-tag {
    color: #f59e0b;
  }
}

.codex-word-progress {
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.9rem;
  color: #2563eb;
}

@media (prefers-color-scheme: dark) {
  .codex-word-progress {
    color: #38bdf8;
  }
}

.codex-clue-body {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.35;
  color: #374151;
}

@media (prefers-color-scheme: dark) {
  .codex-clue-body {
    color: #e5e7eb;
  }
}

.codex-actions-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.codex-btn-action {
  font-size: 0.88rem;
  padding: 6px 14px;
  font-weight: 600;
  border-radius: 6px;
}

/* Codex Keyboard Badging */
.codex-vk-key {
  position: relative !important;
}

.codex-vk-key .vk-rune-badge {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: 0.72rem;
  font-family: 'Segoe UI Historic', 'Cardo', Georgia, serif;
  color: #94a3b8;
  line-height: 1;
}

.codex-vk-key.key-confirmed {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 0 1px #d97706 !important;
  background: transparent !important;
}

.codex-vk-key.key-confirmed .vk-rune-badge {
  color: #d97706 !important;
  font-weight: 800 !important;
}

@media (prefers-color-scheme: dark) {
  .codex-vk-key.key-confirmed .vk-rune-badge {
    color: #fbbf24 !important;
    font-weight: 800 !important;
  }
}

.codex-vk-key.key-hypothesized {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

.codex-vk-key.key-hypothesized .vk-rune-badge {
  color: #2563eb !important;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .codex-vk-key.key-hypothesized .vk-rune-badge {
    color: #60a5fa !important;
  }
}

.codex-vk-key.vk-unrepresented {
  opacity: 0.35 !important;
  filter: grayscale(1);
}

.vk-btn-switcher {
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  margin-top: 4px !important;
}

/* Codex Rune Virtual Keyboard (Archive Phase) */
.codex-vk-rune-key {
  position: relative !important;
  user-select: none;
}

.codex-vk-rune-key .vk-rune-glyph {
  font-size: 1.25rem !important;
  font-family: 'Segoe UI Historic', 'Cardo', Georgia, serif;
  font-weight: 700;
  line-height: 1;
}

.codex-vk-rune-key .vk-rune-letter-badge {
  position: absolute;
  top: 2px;
  left: 3.5px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.codex-vk-rune-key.key-resolved-rune {
  opacity: 0.42 !important;
  background: rgba(30, 41, 59, 0.45) !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.codex-vk-rune-key.key-absent-rune {
  opacity: 0.22 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: grayscale(1);
}

@media (prefers-color-scheme: dark) {
  .codex-vk-rune-key.key-absent-rune {
    background: rgba(15, 23, 42, 0.45) !important;
    color: #64748b !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
  }
}

.codex-vk-rune-key.key-selectable-rune {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.codex-vk-rune-key.key-selectable-rune:hover {
  transform: translateY(-2px);
  border-color: #f59e0b !important;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

.codex-vk-rune-key.key-selectable-rune.vk-selected {
  border-color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-2px);
}

/* Inlined: dig.css */
/* =======================================================
   Uncross: Dig - Archaeological Temple Scriptorium Styles
   ======================================================= */

/* Bedrock Marked (Tested off-crossword cell) */
.cell-dig-bedrock-marked {
  background: #0f1219 !important;
  border: 1px solid #1c222e !important;
  opacity: 0.45;
  cursor: default;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.cell-dig-bedrock-marked::after {
  content: '·';
  font-size: 1.2rem;
  color: #4b5563;
}

/* Weathered Temple Stone Slab (Face-Down Paver - uniform starting state) */
.cell-dig-slab {
  background: linear-gradient(145deg, #2b303d, #1e222b) !important;
  border: 1px solid #3d4454 !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.cell-dig-slab:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.15), 0 4px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Multiplier Slab Borders (Drawing players to high-value dig sites!) */
.cell-dig-slab.mult-2l {
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35), inset 0 0 6px rgba(56, 189, 248, 0.2) !important;
}
.cell-dig-slab.mult-3l {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.45), inset 0 0 8px rgba(59, 130, 246, 0.25) !important;
}
.cell-dig-slab.mult-2w {
  border: 2px solid #ec4899 !important;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.35), inset 0 0 6px rgba(236, 72, 153, 0.2) !important;
}
.cell-dig-slab.mult-3w {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 0 8px rgba(239, 68, 68, 0.3) !important;
}

.multiplier-badge.dig-multiplier-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 3px;
  line-height: 1;
  z-index: 3;
  user-select: none;
  pointer-events: none;
}
.mult-2l .dig-multiplier-badge {
  color: #38bdf8;
  background: rgba(14, 116, 144, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.mult-3l .dig-multiplier-badge {
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.4);
}
.mult-2w .dig-multiplier-badge {
  color: #f472b6;
  background: rgba(131, 24, 67, 0.5);
  border: 1px solid rgba(236, 72, 153, 0.4);
}
.mult-3w .dig-multiplier-badge {
  color: #fca5a5;
  background: rgba(153, 27, 27, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Sprung Booby Trap (Revealed after survey probe or miss) */
.cell-dig-trap-sprung {
  background: linear-gradient(145deg, #1c1917, #0c0a09) !important;
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.7), inset 0 0 8px rgba(0, 0, 0, 0.9) !important;
  animation: trapSpringShake 0.4s ease-out;
  position: relative;
}

@keyframes trapSpringShake {
  0% { transform: scale(1.15) rotate(-3deg); }
  25% { transform: scale(0.95) rotate(3deg); }
  50% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(0.98) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.cell-trap-glyph {
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
  z-index: 3;
}

.cell-trap-sub {
  position: absolute;
  bottom: 2px;
  font-size: clamp(0.5rem, 1.1vw, 0.65rem);
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px #000;
  z-index: 3;
}

/* Sealed / Disarmed Booby Trap */
.cell-trap-disarm-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: clamp(0.6rem, 1.3vw, 0.8rem);
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  z-index: 5;
}

.cell-slab-mark {
  font-size: clamp(0.7rem, 1.8vw, 1.1rem);
  color: rgba(255, 255, 255, 0.14);
  font-family: Georgia, serif;
  user-select: none;
  pointer-events: none;
}

/* Tested Word Cell during Active Turn (V or C) */
.cell-dig-tested-vc {
  background: linear-gradient(145deg, #374151, #1f2937) !important;
  border: 1px solid #6b7280 !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

.cell-dig-tested-vc .cell-vc-glyph {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 800;
  font-size: clamp(0.85rem, 2vw, 1.25rem);
}

.cell-dig-tested-vc .cell-vc-vowel {
  color: #f59e0b;
}

.cell-dig-tested-vc .cell-vc-consonant {
  color: #38bdf8;
}

/* Decayed Ivory Tile (Unpreserved ivory tile after Sands of Time: maintains ivory border & shows V/C) */
.cell-dig-decayed-ivory {
  background: linear-gradient(145deg, #292524, #1c1917) !important;
  border: 2px solid #d4c5a9 !important;
  border-bottom: 2px solid #b8a686 !important;
  box-shadow: 0 0 8px rgba(212, 197, 169, 0.35) !important;
}

.cell-dig-decayed-ivory .cell-vc-glyph {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 900;
  font-size: clamp(0.9rem, 2.2vw, 1.3rem);
}

.cell-dig-decayed-ivory .cell-vc-vowel {
  color: #fde68a;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.cell-dig-decayed-ivory .cell-vc-consonant {
  color: #bae6fd;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

/* Decayed Surveyed Paver (Non-matching tested tile after Sands of Time: lighter grey paver, V/C disappears) */
.cell-dig-decayed-surveyed {
  background: linear-gradient(145deg, #4b5563, #374151) !important;
  border: 1px solid #9ca3af !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer;
}

/* Royal Keystone Cartouche (Gold border & badge) */
.cell-dig-keystone {
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.7), inset 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

/* Antiqued Bronze Artifact (Bronze border & badge) */
.cell-dig-artifact {
  border: 2px solid #cd7f32 !important;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.55), inset 0 0 5px rgba(205, 127, 50, 0.3) !important;
}

/* Highlight ONLY the first letter when an artifact clue is selected */
.board-cell.cell-artifact-selected {
  outline: 3px solid #f59e0b !important;
  outline-offset: -3px;
  animation: artifactSelectedGlow 1.2s ease-in-out infinite alternate !important;
  z-index: 5;
}

@keyframes artifactSelectedGlow {
  0% { box-shadow: 0 0 6px #f59e0b, inset 0 0 6px #f59e0b; }
  100% { box-shadow: 0 0 16px #fbbf24, inset 0 0 10px #fbbf24; }
}

.cell-artifact-badge {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.55rem, 1.3vw, 0.80rem);
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
  user-select: none;
  pointer-events: none;
  z-index: 5;
}

/* Unearthed Letter (Brushed Ivory Stone) */
.cell-dig-unearthed {
  background: linear-gradient(135deg, #fbf7ee, #eee5d3) !important;
  border: 1px solid #d4c5a9 !important;
  border-bottom: 2px solid #b8a686 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35) !important;
}

.cell-dig-unearthed .cell-letter.ivory-letter {
  color: #292524 !important;
  font-weight: 900 !important;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cell-dig-unearthed .cell-tile-value {
  color: #78716c !important;
  font-weight: 700;
}

/* Private Artifact Fragment (Unearthed matching letters held by player) */
.cell-dig-fragment {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.cell-dig-fragment .cell-letter.fragment-letter {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cell-dig-fragment .cell-tile-value {
  color: #bae6fd !important;
  font-weight: 700;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Restored Gemstone Mosaics (Claimed & Preserved) */
.cell-dig-mosaic {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
  transition: all 0.25s ease;
}

.cell-dig-mosaic .cell-letter.mosaic-letter {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.cell-dig-mosaic .cell-tile-value {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 800;
}

/* Player 1: Lapis Lazuli (#0f52ba) with Gold Veining */
.cell-dig-mosaic.mosaic-p1 {
  background: radial-gradient(circle at 30% 30%, #2563eb, #0f52ba, #1e3a8a) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6), inset 0 0 6px rgba(253, 224, 71, 0.3) !important;
}

/* Player 2: Imperial Jade (#097969) with Emerald Luster */
.cell-dig-mosaic.mosaic-p2 {
  background: radial-gradient(circle at 30% 30%, #10b981, #097969, #064e3b) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), inset 0 0 6px rgba(167, 243, 208, 0.3) !important;
}

/* Player 3: Carved Jasper (#9b111e) with Ruby Depth */
.cell-dig-mosaic.mosaic-p3 {
  background: radial-gradient(circle at 30% 30%, #ef4444, #9b111e, #7f1d1d) !important;
  border-color: #f87171 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), inset 0 0 6px rgba(254, 202, 202, 0.3) !important;
}

/* Player 4: Honey Sunstone (#ffbf00) with Amber Warmth */
.cell-dig-mosaic.mosaic-p4 {
  background: radial-gradient(circle at 30% 30%, #fbbf24, #d97706, #78350f) !important;
  border-color: #fde68a !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6), inset 0 0 6px rgba(254, 243, 199, 0.4) !important;
}

/* Active Contiguous Trench Highlight */
.board-cell.trench-cell {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  background-color: rgba(245, 158, 11, 0.15) !important;
}

/* Pulsing Trench Cursor */
.board-cell.trench-cursor {
  outline: 3px solid #fbbf24 !important;
  outline-offset: -3px;
  animation: digCursorPulse 1.1s ease-in-out infinite alternate;
  z-index: 4;
}

@keyframes digCursorPulse {
  0% {
    box-shadow: 0 0 4px #f59e0b, inset 0 0 4px #f59e0b;
  }
  100% {
    box-shadow: 0 0 14px #fbbf24, inset 0 0 10px #fbbf24;
  }
}

/* Sands of Time gradual decay & weathering transition */
.cell-dig-unearthed.sands-decaying,
.cell-dig-unearthed.sands-fade-out,
.cell-dig-bedrock-marked.sands-decaying,
.cell-dig-bedrock-marked.sands-fade-out {
  position: relative;
  overflow: hidden;
  animation: sandBorderFade var(--sands-remaining-s, 10s) linear forwards;
}

.cell-dig-unearthed.sands-decaying::before,
.cell-dig-unearthed.sands-fade-out::before,
.cell-dig-bedrock-marked.sands-decaying::before,
.cell-dig-bedrock-marked.sands-fade-out::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #2b303d, #1e222b);
  opacity: 0;
  animation: sandDarkenOverlay var(--sands-remaining-s, 10s) linear forwards;
  z-index: 1;
  pointer-events: none;
}

.cell-dig-unearthed.sands-decaying .cell-letter.ivory-letter,
.cell-dig-unearthed.sands-decaying .cell-tile-value,
.cell-dig-unearthed.sands-fade-out .cell-letter.ivory-letter,
.cell-dig-unearthed.sands-fade-out .cell-tile-value {
  position: relative;
  z-index: 2;
  animation: sandLetterFadeOut var(--sands-remaining-s, 10s) linear forwards;
}

.cell-dig-unearthed .cell-slab-mark-emerging,
.cell-dig-bedrock-marked .cell-slab-mark-emerging {
  position: absolute;
  z-index: 2;
  opacity: 0;
  animation: sandGlyphFadeIn var(--sands-remaining-s, 10s) linear forwards;
}

.cell-dig-unearthed.sands-decaying .cell-vc-glyph.cell-vc-decay-target {
  position: absolute;
  z-index: 3;
  opacity: 0;
  animation: sandGlyphFadeIn var(--sands-remaining-s, 10s) linear forwards;
}

/* Tested Word Cell decaying into Surveyed Paver */
.cell-dig-tested-vc.sands-decaying {
  position: relative;
  overflow: hidden;
}

.cell-dig-tested-vc.sands-decaying::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #2b303d, #1e222b);
  opacity: 0;
  animation: sandDarkenOverlay var(--sands-remaining-s, 10s) linear forwards;
  z-index: 1;
  pointer-events: none;
}

.cell-dig-tested-vc.sands-decaying .cell-vc-glyph {
  position: relative;
  z-index: 2;
  animation: sandGlyphFadeOut var(--sands-remaining-s, 10s) linear forwards;
}

@keyframes sandDarkenOverlay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sandLetterFadeOut {
  0% { opacity: 1; filter: blur(0px); transform: scale(1); }
  50% { opacity: 0.6; filter: blur(0.5px); }
  100% { opacity: 0; filter: blur(1.5px); transform: scale(0.92); }
}

@keyframes sandBorderFade {
  0% { border-color: #d97706; }
  100% { border-color: #3d4454; }
}

@keyframes sandGlyphFadeIn {
  0% { opacity: 0; filter: blur(1.5px); transform: scale(1.15); }
  50% { opacity: 0.08; }
  100% { opacity: 0.18; filter: blur(0px); transform: scale(1); }
}

@keyframes sandGlyphFadeOut {
  0% { opacity: 1; filter: blur(0px); transform: scale(1); }
  100% { opacity: 0; filter: blur(1.5px); transform: scale(0.85); }
}



/* ==========================================
   Uncross: Dig - HUD & Virtual Keyboard Styling
   ========================================== */

.dig-hud-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 6px 12px;
}

.dig-turn-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 6px 14px;
}

.dig-turn-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.dig-turn-indicator.my-turn {
  color: #fbbf24;
}

.dig-turn-indicator.my-turn .turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #f59e0b;
  animation: digPulse 1s infinite alternate;
}

.dig-turn-indicator.other-turn {
  color: #94a3b8;
}

.dig-turn-indicator.other-turn .turn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

@keyframes digPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}

.dig-guess-allowance {
  display: flex;
  align-items: center;
  gap: 8px;
}

.allowance-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.allowance-dots {
  font-size: 1.05rem;
  color: #f59e0b;
  letter-spacing: 2px;
}

.dig-sands-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.2), rgba(180, 83, 9, 0.3), rgba(217, 119, 6, 0.2));
  border: 1px solid #d97706;
  border-radius: 6px;
  padding: 6px 12px;
  color: #fde68a;
  font-size: 0.88rem;
  animation: sandsWarningPulse 1.2s infinite alternate;
}

@keyframes sandsWarningPulse {
  0% { border-color: #d97706; box-shadow: 0 0 4px rgba(217, 119, 6, 0.2); }
  100% { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
}

.dig-artifact-card {
  background: linear-gradient(180deg, #1e2533, #141822);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.artifact-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.artifact-site {
  margin-left: auto;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.75rem;
}

.artifact-clue-body {
  font-size: 0.96rem;
  color: #f8fafc;
  font-style: italic;
  line-height: 1.35;
}

/* Dig Virtual Keyboard */
.dig-virtual-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 600px;
  margin: 4px auto 8px auto;
  padding: 0 4px;
}

.dig-virtual-keyboard .vk-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.dig-virtual-keyboard .vk-key {
  flex: 1;
  max-width: 46px;
  height: 48px;
  background: linear-gradient(180deg, #2a3142, #1b212e);
  border: 1px solid #3d465c;
  border-bottom: 3px solid #141824;
  border-radius: 6px;
  color: #f1f5f9;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.1s ease;
  user-select: none;
}

.dig-virtual-keyboard .vk-key:hover:not(:disabled) {
  background: linear-gradient(180deg, #374158, #252e40);
  border-color: #f59e0b;
  transform: translateY(-1px);
}

.dig-virtual-keyboard .vk-key:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.dig-virtual-keyboard .vk-key.disabled,
.dig-virtual-keyboard .vk-key:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dig-virtual-keyboard .vk-key-val {
  font-size: 0.58rem;
  color: #94a3b8;
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-weight: 600;
}

/* Dig Actions Bar */
.dig-actions-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  margin: 4px auto;
}

.btn-dig-action {
  background: #1e293b;
  border: 1px solid #475569;
  color: #f8fafc;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dig-action:hover:not(:disabled) {
  background: #334155;
  border-color: #f59e0b;
  color: #fbbf24;
}

.btn-dig-pass {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dig-pass:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fee2e2;
}

.phase-nav-btn.undo-btn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-weight: 700;
}

.phase-nav-btn.undo-btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fef3c7;
}



/* =========================================================================
   Uncross: Dig - Salvaged Booby Trap Tile & Cash In Controls
   ========================================================================= */

/* Salvaged Booby Trap tile in tray */
.tray-tile.tray-tile-trap {
  background: linear-gradient(145deg, #292524, #1c1917) !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.5), inset 0 0 6px rgba(0, 0, 0, 0.8) !important;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tray-tile.tray-tile-trap:hover:not(.tray-tile-trap-disabled) {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.8) !important;
  transform: translateY(-2px);
}

.tray-tile.tray-tile-trap .tray-tile-char {
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.tray-tile.tray-tile-trap .tray-tile-pts {
  color: #fbbf24 !important;
  font-weight: 800;
}

.tray-tile.tray-tile-trap.tray-tile-trap-disabled {
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  border-color: #6b7280 !important;
  box-shadow: none !important;
}

/* Virtual Keyboard Trap Key */
.vk-key.vk-key-trap {
  background: linear-gradient(145deg, #292524, #1c1917) !important;
  border: 2px solid #d97706 !important;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4) !important;
  position: relative;
  cursor: pointer;
}

.vk-key.vk-key-trap:hover:not(.vk-disabled) {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important;
}

.vk-key.vk-key-trap .vk-char {
  font-size: 1.25rem;
}

.vk-key.vk-key-trap .vk-pts {
  color: #fbbf24;
}

/* Cash In Button (Placed next to Enter in Dig) */
.btn-cash-in-trap {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border: 1px solid #f59e0b !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4) !important;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-cash-in-trap:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-1px);
}

.dig-survey-actions-row {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .dig-virtual-keyboard .vk-key {
    min-width: 0 !important;
    height: clamp(32px, 4.4vh, 40px) !important;
    font-size: clamp(0.72rem, 3.8vw, 1.05rem) !important;
  }
}

/* Inlined: echo.css */
/* ==========================================================================
   ECHO SONAR RADAR CRT SCREEN & ACOUSTIC ARENA
   ========================================================================== */

/* ==========================================================================
   ECHO CANONICAL BOARD & ARENA CENTERING (ECHO_SPEC § 4.1)
   ========================================================================== */

.board-container-wrapper:has(#board-grid.echo-active) {
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.panel-board .board-container-wrapper:has(#board-grid.echo-active) > #board-top-stats {
  display: none !important;
}

#board-grid.echo-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  margin: auto !important;
  padding: 0 !important;
}

.echo-arena-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  user-select: none;
  --board-size: min(560px, calc(100vw - 20px));
}

.echo-arena-wrapper .yesterday-board-banner {
  width: var(--board-size, min(560px, calc(100vw - 20px)));
  max-width: var(--board-size, min(560px, calc(100vw - 20px)));
  margin: 0 auto 6px auto;
  box-sizing: border-box;
}

/* Over-Board Telemetry Header */
.echo-board-top-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 auto 6px auto !important;
  z-index: 5;
  user-select: none;
  flex-shrink: 0;
}

.echo-board-top-stats .stat-pill,
.stat-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pill-timer {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.pill-pings {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

/* Board Arena Frame & Container (CRT Sonar Radar Viewport) */
.board-arena-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.board-arena-container,
.echo-arena-container,
.echo-board-frame {
  position: relative;
  --echo-board-dim: 9;
  --echo-trench-size: 7;
  width: var(--board-size, min(560px, calc(100vw - 20px)));
  height: var(--board-size, min(560px, calc(100vw - 20px)));
  max-width: var(--board-size, min(560px, calc(100vw - 20px)));
  max-height: var(--board-size, min(560px, calc(100vw - 20px)));
  aspect-ratio: 1 / 1;
  background: #070d18;
  border: 2px solid #1e3a5f;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(6, 182, 212, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  padding: 3px;
  gap: 3px;
  box-sizing: border-box;
}

/* Soft Continuous Radar Sweep Animation */
.radar-sweep {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(56, 189, 248, 0) 0deg, rgba(56, 189, 248, 0.06) 300deg, rgba(56, 189, 248, 0.28) 360deg);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.85;
  z-index: 6;
  animation: singleRadarSweep 6s linear infinite;
}

@keyframes singleRadarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sonar Strip Architecture:
   [Top: North Strip (1 row = 1/7)]
   [Center Row: West Strip (1 col = 1/7) | 5x5 Trench Grid (5x5 = 5/7) | East Strip (1 col = 1/7)]
   [Bottom: South Strip (1 row = 1/7)]
   Total Grid Footprint: 7x7 square units identical to 7x7 XWord board dimensions
*/
.sonar-top-strip,
.sonar-bottom-strip {
  display: flex;
  flex: 1;
  width: 100%;
  padding: 0;
  gap: 3px;
  z-index: 5;
  box-sizing: border-box;
}

.sonar-middle-row {
  display: flex;
  flex: var(--echo-trench-size, 5);
  width: 100%;
  gap: 3px;
  z-index: 5;
  box-sizing: border-box;
  min-height: 0;
}

.sonar-left-strip,
.sonar-right-strip {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  gap: 3px;
  box-sizing: border-box;
}

/* 5x5 Inner Trench Grid (7x7 total board footprint) */
.trench-grid-7x7,
.echo-board-grid {
  flex: var(--echo-trench-size, 5);
  height: 100%;
  display: grid;
  gap: 3px;
  background: rgba(4, 9, 20, 0.9);
  border: 1.5px solid #1e3a5f;
  border-radius: 6px;
  padding: 2px;
  position: relative;
  box-sizing: border-box;
}

/* 4 Corner Sensor Array Brackets */
.echo-corner-anchor {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  border: 1px dashed rgba(56, 189, 248, 0.25);
  border-radius: 4px;
  color: rgba(56, 189, 248, 0.4);
  font-size: clamp(10px, 2.5cqw, 16px);
  box-sizing: border-box;
}

.echo-corner-bracket {
  opacity: 0.6;
}

/* Perimeter Emitter Cells (North, South, East, West Sensor Drop Targets) */
.emitter-btn,
.echo-emitter-cell {
  flex: 1;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: clamp(10px, 2.5cqw, 18px);
  background: rgba(14, 116, 144, 0.25);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  color: #e0f2fe;
  cursor: pointer;
  position: relative;
  transition: all 0.12s ease;
  box-shadow: inset 0 0 5px rgba(56, 189, 248, 0.2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-sizing: border-box;
}

.emitter-btn:hover,
.echo-emitter-cell:hover {
  background: rgba(14, 116, 144, 0.45);
  border-color: #38bdf8;
  transform: scale(0.96);
}

.emitter-btn.filled,
.emitter-btn.has-letter,
.echo-emitter-cell.filled {
  background: linear-gradient(135deg, #0369a1, #0284c7) !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
  font-size: clamp(12px, 3cqw, 20px) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}

.emitter-btn.focused {
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.8) !important;
  background: rgba(14, 116, 144, 0.6) !important;
}

.emitter-btn.drag-over,
.echo-emitter-cell.drag-over {
  background: rgba(56, 189, 248, 0.35) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9) !important;
  transform: scale(1.06);
  z-index: 5;
}

.echo-emitter-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 3cqw, 18px);
  font-weight: 800;
  color: #38bdf8;
  text-shadow: 0 0 6px #38bdf8;
  pointer-events: none;
}

.emitter-tag {
  position: absolute;
  font-size: clamp(7px, 1.4cqw, 10px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  line-height: 1;
}

.sonar-top-strip .emitter-tag { top: 2px; left: 3px; }
.sonar-bottom-strip .emitter-tag { bottom: 2px; left: 3px; }
.sonar-left-strip .emitter-tag { top: 2px; left: 2px; }
.sonar-right-strip .emitter-tag { top: 2px; right: 2px; }

.echo-emitter-char {
  color: #fff;
  text-shadow: 0 0 6px #38bdf8;
  line-height: 1;
}

.echo-emitter-dir-mark {
  color: rgba(56, 189, 248, 0.4);
  font-size: clamp(10px, 2cqw, 14px);
}

/* Inner Sonar Trench Cells */
.trench-cell,
.echo-trench-cell {
  position: relative;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: clamp(13px, 3.5cqw, 24px);
  background: rgba(7, 16, 30, 0.9);
  border: 1px solid rgba(30, 58, 95, 0.45);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.trench-cell:hover,
.echo-trench-cell:hover {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.12);
}

.trench-cell.is-selected,
.echo-trench-cell.is-selected {
  outline: 2px solid #38bdf8 !important;
  outline-offset: -2px;
  background: rgba(56, 189, 248, 0.22) !important;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.45), 0 0 10px rgba(56, 189, 248, 0.55) !important;
  z-index: 5;
}

/* Confirmed Hits: Ray-Axis Directional Permeability */
.trench-cell.confirmed-hit,
.echo-trench-cell.confirmed,
.echo-trench-cell.revealed {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 0 8px #4ade80;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.4);
  border: 2px solid #4ade80 !important;
  z-index: 4;
}

.trench-cell.confirmed-hit.solid-green,
.echo-trench-cell.confirmed.solid-green {
  border: 2px solid #4ade80 !important;
}

.echo-trench-cell.confirmed.shadow-vertical,
.trench-cell.confirmed-hit.shadow-vertical {
  border-top: 2px dashed #4ade80 !important;
  border-bottom: 2px dashed #4ade80 !important;
  border-left: 2px solid #4ade80 !important;
  border-right: 2px solid #4ade80 !important;
}

.echo-trench-cell.confirmed.shadow-horizontal,
.trench-cell.confirmed-hit.shadow-horizontal {
  border-top: 2px solid #4ade80 !important;
  border-bottom: 2px solid #4ade80 !important;
  border-left: 2px dashed #4ade80 !important;
  border-right: 2px dashed #4ade80 !important;
}

.echo-trench-cell.confirmed.shadow-both,
.trench-cell.confirmed-hit.shadow-both {
  border: 2px dashed #4ade80 !important;
}

/* Obstacle Detection: Phosphor Amber Directional Edge Contours */
.trench-cell.obstacle-detected,
.echo-trench-cell.obstacle-detected {
  background: rgba(14, 116, 144, 0.12);
}

.trench-cell.edge-trace-top,
.echo-trench-cell.edge-trace-top {
  border-top: 2.5px solid #ef4444 !important;
  box-shadow: 0 -2px 6px rgba(239, 68, 68, 0.45);
}

.trench-cell.edge-trace-bottom,
.echo-trench-cell.edge-trace-bottom {
  border-bottom: 2.5px solid #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}

.trench-cell.edge-trace-left,
.echo-trench-cell.edge-trace-left {
  border-left: 2.5px solid #ef4444 !important;
  box-shadow: -2px 0 6px rgba(239, 68, 68, 0.45);
}

.trench-cell.edge-trace-right,
.echo-trench-cell.edge-trace-right {
  border-right: 2.5px solid #ef4444 !important;
  box-shadow: 2px 0 6px rgba(239, 68, 68, 0.45);
}

/* Subtle Tried Character Cluster Along Tested Edges */
.tried-cluster {
  position: absolute;
  display: flex;
  gap: 1px;
  font-family: var(--font-mono, monospace);
  font-size: clamp(6px, 1.3cqw, 9px);
  font-weight: 700;
  color: #fbbf24;
  pointer-events: none;
  z-index: 5;
  line-height: 1;
}

.cluster-top { top: 1px; left: 50%; transform: translateX(-50%); }
.cluster-bottom { bottom: 1px; left: 50%; transform: translateX(-50%); }
.cluster-left { left: 1px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.cluster-right { right: 1px; top: 50%; transform: translateY(-50%); flex-direction: column; }

.echo-trench-cell.ghost {
  opacity: 0.85;
}

.trench-cell.ghost.yellow,
.echo-trench-cell.ghost.yellow {
  background: rgba(234, 179, 8, 0.15) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.6) !important;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.35) !important;
}

.trench-cell.ghost.yellow .echo-cell-letter,
.echo-trench-cell.ghost.yellow .echo-cell-letter {
  color: #fde047 !important;
  text-shadow: 0 0 6px rgba(234, 179, 8, 0.7);
  opacity: 0.95;
  font-weight: 800;
}

.echo-trench-cell.ghost.muted {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.35);
}

.echo-trench-cell.ghost.muted .echo-cell-letter {
  color: #94a3b8;
  text-shadow: none;
  opacity: 0.65;
}

.echo-cell-letter {
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 0 6px #22c55e;
}

.echo-cell-marker {
  color: rgba(56, 189, 248, 0.25);
  font-size: 0.9rem;
}

/* Pulse Energy Indicator */
.echo-pulse-load-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 8px;
  border-radius: 6px;
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 700;
}

.echo-pulse-load-badge.at-capacity {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.45);
  color: #fde047;
}

/* ==========================================================================
   ECHO HUD CONTROLS & GUIDANCE CARD (Actions Container above Keyboard)
   ========================================================================== */

.echo-hud-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 4px 6px;
  box-sizing: border-box;
}

.echo-guidance-card {
  width: 100%;
  background: rgba(5, 46, 22, 0.55);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
}

.echo-guidance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
  padding-bottom: 6px;
}

.echo-guidance-mode-tag {
  font-weight: 700;
  font-size: 0.85rem;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.echo-timer-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: #22c55e;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
}

.echo-hud-stats {
  font-size: 0.82rem;
  font-weight: 600;
  color: #86efac;
}

.echo-guidance-body {
  font-size: 0.9rem;
  color: #e2e8f0;
  line-height: 1.4;
  margin-bottom: 8px;
}

.echo-submerged-targets-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.82rem;
}

.echo-target-chip {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #a7f3d0;
  font-weight: 600;
}

.echo-target-chip.deduced {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #4ade80;
}

.echo-candidate-slots-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 6px 0;
}

.echo-slot.active-slot {
  border-color: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  animation: slotPulse 1.5s infinite;
}

@keyframes slotPulse {
  0% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  50% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
  100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
}

.echo-actions-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

.echo-btn-hud {
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}

.echo-btn-hud:hover {
  background: rgba(255, 255, 255, 0.15);
}

.echo-btn-hud.active {
  background: #15803d;
  color: #ffffff;
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.echo-btn-hud.fire {
  background: #16a34a;
  color: #ffffff;
  border-color: #4ade80;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
}

.echo-btn-hud.fire:hover:not(:disabled) {
  background: #22c55e;
}

.echo-btn-hud.fire:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.echo-telemetry-header {
  margin: 0 0 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #86efac;
}

.echo-ping-log-scroll {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
}

.echo-log-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-size: 0.82rem;
}

.echo-log-num {
  color: #94a3b8;
  font-weight: 600;
}

.echo-log-word {
  color: #e2e8f0;
  font-family: monospace;
}

.echo-log-rays {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.echo-ray-pill {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
}

.echo-ray-pill.green { background: rgba(34, 197, 94, 0.3); border: 1px solid #22c55e; color: #86efac; }
.echo-ray-pill.yellow { background: rgba(234, 179, 8, 0.3); border: 1px solid #eab308; color: #fde047; }
.echo-ray-pill.obstacle { background: rgba(56, 189, 248, 0.25); border: 1px solid #38bdf8; color: #7dd3fc; }
.echo-ray-pill.pass { background: rgba(59, 130, 246, 0.25); border: 1px solid #3b82f6; color: #93c5fd; }

/* Modals */
.echo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.echo-modal-card {
  background: #042416;
  border: 2px solid #22c55e;
  border-radius: 14px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(34, 197, 94, 0.3);
}

.echo-modal-title {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: #4ade80;
}

.echo-badge-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 8px;
}

.echo-badge-icon {
  font-size: 1.8rem;
}

.echo-badge-title {
  font-size: 1.15rem;
  color: #fef08a;
}

.echo-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.echo-btn-modal {
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.echo-btn-modal.primary { background: #16a34a; color: #fff; }
.echo-btn-modal.share { background: #0284c7; color: #fff; }
.echo-btn-modal.leaderboard { background: #d97706; color: #fff; }
.echo-btn-modal.secondary { background: rgba(255, 255, 255, 0.12); color: #cbd5e1; }

/* Echo Virtual Keyboard */
.echo-vk-container {
  max-width: 680px;
  margin: 0 auto;
}

.echo-vk-key {
  min-width: 34px;
  height: 44px;
  background: #06281a;
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-user-drag: element;
  cursor: grab;
}

.echo-vk-key.key-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.echo-vk-key:hover {
  background: #14532d;
  color: #fff;
  border-color: #22c55e;
}

.echo-vk-key.key-green {
  background: #15803d !important;
  color: #fff !important;
  border-color: #4ade80 !important;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.echo-vk-key.key-resolved {
  background: #15803d !important;
  color: #fff !important;
  border: 2px solid #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45), inset 0 0 4px rgba(34, 197, 94, 0.2) !important;
}

.echo-vk-key.edge-n-green { border-top: 3px solid #22c55e !important; }
.echo-vk-key.edge-s-green { border-bottom: 3px solid #22c55e !important; }
.echo-vk-key.edge-w-green { border-left: 3px solid #22c55e !important; }
.echo-vk-key.edge-e-green { border-right: 3px solid #22c55e !important; }

.echo-vk-key.edge-n-red {
  border-top: 3.5px solid #ef4444 !important;
  box-shadow: 0 -2px 6px rgba(239, 68, 68, 0.6) !important;
}
.echo-vk-key.edge-s-red {
  border-bottom: 3.5px solid #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.6) !important;
}
.echo-vk-key.edge-w-red {
  border-left: 3.5px solid #ef4444 !important;
  box-shadow: -2px 0 6px rgba(239, 68, 68, 0.6) !important;
}
.echo-vk-key.edge-e-red {
  border-right: 3.5px solid #ef4444 !important;
  box-shadow: 2px 0 6px rgba(239, 68, 68, 0.6) !important;
}

.echo-vk-key.key-disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Ensure keys showing active red directional feedback remain visibly prominent */
.echo-vk-key.edge-n-red.key-disabled,
.echo-vk-key.edge-s-red.key-disabled,
.echo-vk-key.edge-w-red.key-disabled,
.echo-vk-key.edge-e-red.key-disabled {
  opacity: 0.88 !important;
}

.echo-vk-key.key-yellow {
  background: #854d0e !important;
  color: #fef08a !important;
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.6) !important;
  font-weight: 800;
}

.echo-vk-key.key-dimmed {
  opacity: 0.35;
  background: #02120a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #64748b !important;
}

.echo-vk-key.vk-key-util {
  min-width: 44px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.08);
}

.echo-vk-key.vk-key-wildcard {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
}

.echo-vk-key.vk-key-wildcard:hover:not(.vk-disabled) {
  background: rgba(245, 158, 11, 0.22) !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.echo-vk-key.vk-key-space {
  min-width: 76px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

.echo-vk-key.vk-key-space:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}

.echo-vk-key.vk-selected {
  border-color: var(--accent-gold) !important;
  background: #2f384a !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .echo-vk-key.vk-key-util {
    min-width: 0 !important;
  }
  .echo-vk-key.vk-key-space {
    min-width: 0 !important;
  }
}

/* Inlined: elkraf.css */
/* ==========================================================================
   ELKRAF DEGRADING RACK CASCADE ARENA & BOARD
   ========================================================================== */

#board-grid.elkraf-active {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 920px !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.board-container-wrapper:has(#board-grid.elkraf-active) {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 6px !important;
}



/* ==========================================================================
   ELKRAF HUD CONTROLS (Tray, Phase Switch, Action Buttons)
   ========================================================================== */

.elkraf-hud-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.elkraf-hud-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.elkraf-phase-toolbar {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #334155;
}

.elkraf-phase-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.elkraf-phase-btn:hover {
  color: #ffffff;
}

.elkraf-phase-btn.active {
  background: #f59e0b;
  color: #0f172a;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.elkraf-phase-btn-badge {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-family: monospace;
  font-size: 10px;
}

.elkraf-phase-btn.active .elkraf-phase-btn-badge {
  background: rgba(15, 23, 42, 0.25);
  color: #0f172a;
}

/* Rack Tile Grid */
.elkraf-rack-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #334155;
  min-height: 64px;
  box-sizing: border-box;
}

.elkraf-rack-tile {
  width: 44px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 100%);
  color: #78350f;
  border: 2px solid #d97706;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.25rem;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, opacity 0.15s ease;
}

.elkraf-rack-tile:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.elkraf-rack-tile:active {
  transform: translateY(0);
}

.elkraf-rack-tile.staged {
  opacity: 0.22;
  pointer-events: none;
  filter: grayscale(0.9);
}

.elkraf-rack-tile.swap-selected {
  background: linear-gradient(180deg, #fee2e2 0%, #fca5a5 100%);
  color: #991b1b;
  border-color: #ef4444;
  transform: translateY(-5px);
  box-shadow: 0 0 0 2px #ef4444, 0 6px 12px rgba(239, 68, 68, 0.35);
}

/* HUD Action Buttons */
.elkraf-hud-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.elkraf-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.elkraf-btn {
  padding: 6px 14px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  user-select: none;
}

.elkraf-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.elkraf-btn-primary {
  flex: 1;
  background: #059669;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.35);
}

.elkraf-btn-primary:hover:not(:disabled) {
  background: #10b981;
  transform: translateY(-1px);
}

.elkraf-btn-swap-commit {
  flex: 1;
  background: #e11d48;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(225, 29, 72, 0.35);
}

.elkraf-btn-swap-commit:hover:not(:disabled) {
  background: #f43f5e;
  transform: translateY(-1px);
}

.elkraf-btn-secondary {
  padding: 10px 14px;
  background: #334155;
  color: #cbd5e1;
  border: 1px solid #475569;
}

.elkraf-btn-secondary:hover:not(:disabled) {
  background: #475569;
  color: #ffffff;
}

.elkraf-btn-bank {
  flex: 1;
  padding: 9px 12px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.elkraf-btn-bank:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
}

.elkraf-btn-elkraf {
  padding: 9px 14px;
  background: rgba(225, 29, 72, 0.15);
  color: #fda4af;
  border: 1px solid rgba(225, 29, 72, 0.45);
}

.elkraf-btn-elkraf:hover:not(:disabled) {
  background: rgba(225, 29, 72, 0.25);
  border-color: #f43f5e;
}

/* Auxiliary Tabs (Defs, Activity, Standings) */
.elkraf-hub-panel {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #1e293b;
  border: 1px solid #334155;
  overflow: hidden;
  max-height: 320px;
}

.elkraf-tabs-nav {
  display: flex;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid #334155;
  font-size: 11px;
  font-weight: 800;
}

.elkraf-tab-nav-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.elkraf-tab-nav-btn:hover {
  color: #ffffff;
}

.elkraf-tab-nav-btn.active {
  color: #fbbf24;
  border-bottom-color: #f59e0b;
}

.elkraf-tab-pane {
  padding: 12px;
  overflow-y: auto;
  font-size: 12px;
  color: #cbd5e1;
}

.elkraf-def-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  margin-bottom: 6px;
}

.elkraf-def-word {
  font-weight: 800;
  color: #fbbf24;
  margin-right: 6px;
}

.elkraf-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.elkraf-standings-table th {
  padding: 4px 6px;
  color: #94a3b8;
  border-bottom: 1px solid #334155;
  font-weight: 700;
}

.elkraf-standings-table td {
  padding: 6px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.4);
}

/* Inlined: game_table.css */
/* ==========================================================================
   FunBeyondWords (FWW): Game Table Canonical Play Surface
   Governed by GAME_TABLE_SPEC.md §3.2 & §3.3
   ========================================================================== */
.board-container-wrapper:has(#board-grid.game-table-active) {
  height: calc(100% - 40px) !important;
  max-height: calc(100% - 40px) !important;
  width: 100% !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}

#board-grid.game-table-active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .panel-board:has(#board-grid.game-table-active) {
    height: 52vh !important;
    min-height: 280px !important;
    max-height: 56vh !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .board-container-wrapper:has(#board-grid.game-table-active) {
    height: calc(100% - 36px) !important;
    max-height: calc(100% - 36px) !important;
    width: 100% !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
  }
  #board-grid.game-table-active {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .panel-board:has(#board-grid.game-table-active) {
    width: min(calc(100dvh - 8px), 52vw) !important;
    max-width: 52vw !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  .board-container-wrapper:has(#board-grid.game-table-active) {
    height: calc(100% - 36px) !important;
    max-height: calc(100% - 36px) !important;
    width: 100% !important;
  }
  #board-grid.game-table-active {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* Inlined: heist.css */
/* Heist Top-Left Corner Locked and Unlocked Badges */
.heist-tile-status-badge {
  position: absolute;
  top: 1.5px;
  left: 2px;
  font-size: clamp(0.55rem, 1.2vw, 0.75rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 6;
}

.heist-tile-status-badge.heist-badge-locked {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.heist-tile-status-badge.heist-badge-unlocked {
  filter: drop-shadow(0 1px 2px rgba(16, 185, 129, 0.4));
}

/* Heist Active-Turn Provisional Stash Placement */
.board-cell.heist-provisional-tile {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
  border-color: #38bdf8;
}



/* Heist: Open Loot Draggable Board Letters */
.board-cell.heist-loot-draggable {
  cursor: grab !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.board-cell.heist-loot-draggable:hover {
  transform: scale(1.04);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
  z-index: 10;
}

.board-cell.heist-loot-draggable:active,
.board-cell.heist-loot-draggable.tile-dragging {
  cursor: grabbing !important;
  opacity: 0.55;
  transform: scale(0.96);
}

/* Heist: Crime Scene Validation Invalid Highlights */
.board-cell.cell-crime-invalid {
  outline: 3px solid #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.9) !important;
  animation: crimeInvalidPulse 0.6s infinite alternate ease-in-out;
  z-index: 25;
}

@keyframes crimeInvalidPulse {
  from {
    outline-color: #b91c1c;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
  }
  to {
    outline-color: #ef4444;
    box-shadow: 0 0 18px rgba(239, 68, 68, 1);
  }
}

/* Inlined: outbreak.css */
/* ==========================================================================
   Uncross: Outbreak — Ancient Codex HUD & Grid Elements
   ========================================================================== */

.outbreak-codex-hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: var(--board-desktop-size, 580px);
  margin: 0 auto 6px auto;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.codex-keystones-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.codex-header-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  text-align: center;
}

.codex-stones-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.codex-keystone-card {
  flex: 1 1 120px;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 8px);
  transition: all 0.25s ease;
}

.codex-keystone-card.keystone-unsealed {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.keystone-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.04em;
}

.codex-keystone-card.keystone-unsealed .keystone-title {
  color: #34d399;
}

.keystone-letters {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.keystone-letter-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  font-family: monospace, monospace;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 4px;
  box-sizing: border-box;
}

.keystone-letter-box.revealed {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  border: 1px solid #d97706;
}

.keystone-letter-box.concealed {
  background: rgba(15, 23, 42, 0.85);
  color: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.outbreak-step-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem;
  font-weight: 600;
}

.step-badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #94a3b8);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.step-badge.active-step {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.step-badge.threat-step.active-step {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.step-num {
  font-weight: 800;
  margin-right: 2px;
}

.step-arrow {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.68rem;
}

.outbreak-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
}

.status-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.metric-label {
  color: var(--text-secondary, #94a3b8);
}

.metric-val {
  color: #f1f5f9;
  font-weight: 700;
}

.metric-val.critical {
  color: #ef4444;
  animation: pulse-danger 1s infinite alternate;
}

@keyframes pulse-danger {
  from { opacity: 0.8; }
  to { opacity: 1; text-shadow: 0 0 8px rgba(239, 68, 68, 0.8); }
}

.vault-tiles-preview {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}

.btn-vault-tile {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-vault-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.8);
}

.vault-empty {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  font-size: 0.7rem;
}

.btn-unseal-vowel {
  padding: 3px 8px !important;
  font-size: 0.72rem !important;
  border-radius: 4px !important;
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  cursor: pointer;
}

.btn-unseal-vowel:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.btn-unseal-vowel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Outbreak Board Grid Cells */

.board-cell.cell-sanctum-core {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.12) 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.4);
}

.sanctum-core-mark {
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}

/* Outbreak Quiet Multipliers - Empty Cells: No special background, no glowing border, no inset shadow (icon only) */
#board-grid.outbreak-active .board-cell.mult-2l:not(.tile-placed),
#board-grid.outbreak-active .board-cell.mult-3l:not(.tile-placed) {
  background: #171b24 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Outbreak Multiplier Cells with Placed Companion Tiles: Solid Bastion/Citadel Armor Border, Clean Porcelain Face */
#board-grid.outbreak-active .board-cell.tile-placed.mult-2l:not(.cell-blighted):not(.cell-blight-word):not(.cell-petrified) {
  background: #f8fafc !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
}

#board-grid.outbreak-active .board-cell.tile-placed.mult-3l:not(.cell-blighted):not(.cell-blight-word):not(.cell-petrified) {
  background: #f8fafc !important;
  border: 2px solid #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25) !important;
}

#board-grid.outbreak-active .board-cell.tile-placed.mult-2l:not(.cell-blighted):not(.cell-blight-word):not(.cell-petrified) .cell-letter,
#board-grid.outbreak-active .board-cell.tile-placed.mult-3l:not(.cell-blighted):not(.cell-blight-word):not(.cell-petrified) .cell-letter {
  color: #090d16 !important;
}

.board-cell.cell-fissure {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.45) 0%, rgba(127, 29, 29, 0.25) 100%) !important;
  border: 2px solid #dc2626 !important;
  box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.6), 0 0 8px rgba(239, 68, 68, 0.4) !important;
}

.board-cell.cell-fissure.cell-fissure-capped {
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.45) 0%, rgba(6, 78, 59, 0.75) 55%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 2px solid #fbbf24 !important;
  outline: 1px solid rgba(16, 185, 129, 0.75) !important;
  box-shadow: inset 0 0 16px rgba(16, 185, 129, 0.7), 0 0 14px rgba(245, 158, 11, 0.5) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Runic Vault Brackets (4 Corners) */
.board-cell.cell-fissure.cell-fissure-capped::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid transparent;
  border-top-color: #f59e0b;
  border-bottom-color: #f59e0b;
  box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.5);
  pointer-events: none;
  border-radius: 4px;
  z-index: 2;
}

/* Pulsing Celestial Containment Ring */
.board-cell.cell-fissure.cell-fissure-capped::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(52, 211, 153, 0.85);
  border-radius: 6px;
  animation: arcaneRingPulse 3.5s infinite linear;
  pointer-events: none;
  z-index: 1;
}

@keyframes arcaneRingPulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 0 5px #10b981); }
  100% { transform: scale(1); opacity: 0.7; }
}

.aegis-seal-badge {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.95));
  z-index: 4;
}

.fissure-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  pointer-events: none;
}

.fissure-icon-svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.9));
}

.board-cell.cell-blighted {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(88, 28, 135, 0.3) 100%) !important;
  border: 2px dashed #a855f7 !important;
  box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.5) !important;
  cursor: pointer !important;
}

.board-cell.cell-blighted:hover {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(88, 28, 135, 0.45) 100%) !important;
  transform: scale(1.05);
  z-index: 10;
}

.blight-spore-mark {
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.8));
}

.board-cell.cell-wall-of-light {
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: inset 0 0 6px rgba(245, 158, 11, 0.4), 0 0 10px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.3s ease;
}

/* Golden outer contour borders following the edge of player barrier words */
.board-cell.cell-wall-of-light.wall-contour-top {
  border-top: 2.5px solid #fbbf24 !important;
}
.board-cell.cell-wall-of-light.wall-contour-right {
  border-right: 2.5px solid #fbbf24 !important;
}
.board-cell.cell-wall-of-light.wall-contour-bottom {
  border-bottom: 2.5px solid #fbbf24 !important;
}
.board-cell.cell-wall-of-light.wall-contour-left {
  border-left: 2.5px solid #fbbf24 !important;
}

/* Broken / dulled golden edge when Blight penetrates or gnaws */
.board-cell.cell-wall-of-light.wall-penetrated {
  border-color: #ef4444 !important;
  border-style: dashed !important;
  box-shadow: inset 0 0 8px rgba(239, 68, 68, 0.5), 0 0 8px rgba(239, 68, 68, 0.4) !important;
  animation: wallUnderSiege 1.5s infinite alternate;
}

@keyframes wallUnderSiege {
  0% {
    filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
  }
}

.board-cell.cell-blight-word {
  background: radial-gradient(circle, rgba(147, 51, 234, 0.45) 0%, rgba(76, 29, 149, 0.35) 100%) !important;
  border: 2px solid #9333ea !important;
  color: #e9d5ff !important;
  cursor: pointer;
  box-shadow: inset 0 0 6px rgba(147, 51, 234, 0.4);
}

.board-cell.cell-fissure-faultline {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(180, 83, 9, 0.3) 100%) !important;
  border: 2px dashed #f59e0b !important;
  color: #fef3c7 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), inset 0 0 8px rgba(245, 158, 11, 0.3);
  animation: faultlinePulse 2s ease-in-out infinite;
  cursor: pointer;
}

@keyframes faultlinePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); border-color: #f59e0b; }
  50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); border-color: #ef4444; }
}

.board-cell.cell-infected-siege {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.7), inset 0 0 6px rgba(220, 38, 38, 0.5) !important;
  animation: siegePulse 1.5s ease-in-out infinite;
}

@keyframes siegePulse {
  0%, 100% { border-color: #ef4444; }
  50% { border-color: #9333ea; }
}

/* Petrified BlightBot Tiles: Uniform Flat Slate Gray Stone, No Border, No Box-Shadow */
.board-cell.cell-petrified,
#board-grid.outbreak-active .board-cell.cell-petrified {
  background: #475569 !important;
  color: #cbd5e1 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: bold;
}

.board-cell.cell-petrified .cell-letter,
#board-grid.outbreak-active .board-cell.cell-petrified .cell-letter {
  color: #cbd5e1 !important;
  text-shadow: none !important;
}

.board-cell.cell-corrupted {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(88, 28, 135, 0.45) 100%) !important;
  border: 2px solid #c084fc !important;
  box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.6), 0 0 6px rgba(192, 132, 252, 0.4) !important;
}

/* Outbreak Progressive Letter Degradation */
#board-grid.outbreak-active .board-cell.tile-damaged-med {
  background: linear-gradient(135deg, #f8fafc 0%, rgba(243, 232, 255, 0.9) 100%) !important;
  border-color: #d97706 !important;
}

#board-grid.outbreak-active .board-cell.tile-damaged-med .cell-letter {
  opacity: 0.70 !important;
  color: #475569 !important;
}

#board-grid.outbreak-active .board-cell.tile-damaged-crit {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 0 6px rgba(168, 85, 247, 0.3) !important;
}

#board-grid.outbreak-active .board-cell.tile-damaged-crit .cell-letter {
  opacity: 0.40 !important;
  color: #64748b !important;
  text-shadow: 0 0 2px rgba(168, 85, 247, 0.4) !important;
}

/* Outbreak Attack Impact VFX & Bite Tremor */
@keyframes gnawBiteTremor {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(0.92) rotate(-3deg); filter: brightness(1.4); }
  40% { transform: scale(1.06) rotate(3deg); filter: brightness(1.2); }
  60% { transform: scale(0.96) rotate(-1deg); }
  80% { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

.board-cell.cell-gnaw-impact {
  animation: gnawBiteTremor 0.45s ease-in-out !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(147, 51, 234, 0.7) !important;
  z-index: 15 !important;
}

/* Downward Floating Damage Indicator (CROSS_GAME_SPEC.md 3.1 & OUTBREAK_SPEC.md 4.3) */
@keyframes floatDamageDown {
  0% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 6px) scale(1.2);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, 22px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 38px) scale(0.8);
  }
}

.floating-damage-number {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  color: #ef4444;
  font-weight: 900;
  font-size: 0.9rem;
  text-shadow: 0 0 4px #000, 0 0 8px rgba(239, 68, 68, 0.95);
  pointer-events: none;
  z-index: 35;
  animation: floatDamageDown 1.0s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  letter-spacing: -0.5px;
}



/* Outbreak Biohazard Creep Pulse */
@keyframes outbreakPulse {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.9), inset 0 0 14px rgba(225, 29, 72, 0.9);
    filter: brightness(1.4) drop-shadow(0 0 8px #f43f5e);
    outline-color: #f43f5e;
  }
  40% {
    transform: scale(1.08);
    box-shadow: 0 0 28px 8px rgba(217, 70, 239, 0.85), inset 0 0 18px rgba(244, 63, 94, 0.95);
    filter: brightness(1.6) drop-shadow(0 0 16px #d946ef);
    outline-color: #ec4899;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px 1px rgba(168, 85, 247, 0.4), inset 0 0 6px rgba(168, 85, 247, 0.3);
    filter: brightness(1) drop-shadow(0 0 0px transparent);
    outline-color: transparent;
  }
}
.board-cell.cell-bot-pulse-outbreak {
  outline: 3px solid #ec4899 !important;
  outline-offset: -2px;
  animation: outbreakPulse 1.8s ease-out forwards !important;
  z-index: 12 !important;
}

/* Universal / Standard Bot Move Pulse */
@keyframes standardBotPulse {
  0% {
    transform: scale(0.94);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.9);
    border-color: #fbbf24;
  }
  45% {
    transform: scale(1.05);
    box-shadow: 0 0 18px 4px rgba(245, 158, 11, 0.7);
    border-color: #f59e0b;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px 1px rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.4);
  }
}
.board-cell.cell-bot-pulse-standard {
  animation: standardBotPulse 1.8s ease-out forwards;
  z-index: 12;
}

/* ==========================================================================
   Uncross: Outbreak — Hexagonal SVG Viewport & Cell Styling
   ========================================================================== */

.hex-board-viewport {
  position: relative;
  width: 100%;
  max-width: min(580px, calc(var(--app-height, 100dvh) - 260px), 94vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-grid-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hex-cell {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hex-cell:hover .hex-polygon {
  stroke: #38bdf8;
  stroke-width: 2px;
}

.hex-polygon {
  fill: #1e293b;
  stroke: #334155;
  stroke-width: 1.5px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.hex-cell.is-selected .hex-polygon {
  stroke: #fbbf24;
  stroke-width: 2.5px;
  fill: #1e1b4b;
}

.hex-cell.is-sanctum .hex-polygon {
  fill: rgba(16, 185, 129, 0.2);
  stroke: #10b981;
  stroke-width: 2px;
}

.hex-cell.is-sanctum.consecrated .hex-polygon {
  fill: rgba(16, 185, 129, 0.35);
  stroke: #34d399;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4));
}

.hex-cell.is-fissure .hex-polygon {
  fill: rgba(168, 85, 247, 0.2);
  stroke: #a855f7;
  stroke-width: 2px;
}

.hex-cell.is-capped .hex-polygon {
  fill: rgba(245, 158, 11, 0.25);
  stroke: #f59e0b;
}

.hex-cell.is-player-tile .hex-polygon {
  fill: #fef3c7;
  stroke: #d97706;
}

.hex-cell.is-player-tile.is-damaged .hex-polygon {
  fill: #fee2e2;
  stroke: #ef4444;
}

.hex-cell.is-petrified .hex-polygon {
  fill: #475569;
  stroke: #334155;
}

.hex-cell.is-blight .hex-polygon {
  fill: #581c87;
  stroke: #c084fc;
}

.hex-cell .cell-letter {
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #f8fafc;
  pointer-events: none;
  user-select: none;
}

.hex-cell.is-player-tile .cell-letter {
  fill: #78350f;
}

.hex-cell .cell-pts {
  font-size: 8px;
  font-weight: 700;
  font-family: inherit;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #94a3b8;
  pointer-events: none;
  user-select: none;
}

.hex-cell .cell-badge-icon {
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #cbd5e1;
  pointer-events: none;
}

.direction-chevron {
  fill: #fbbf24;
  stroke: #78350f;
  stroke-width: 0.8px;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.8));
}

.board-top-stats {
  width: 100%;
  max-width: min(580px, calc(var(--app-height, 100dvh) - 260px), 94vw);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 6px auto;
  padding: 0 4px;
  user-select: none;
}

.board-top-stats .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Inlined: rummy500.css */
/* FunBeyondWords (FWW) - Rummy 500 Stylesheet
 * Scoped strictly under .fww-game-rummy500 per GEMINI.md Chapter 2 §2.4.
 * Zero !important declarations.
 */

/* Root Board Container Override (beats .board-grid specificity 0,1,0 without !important) */
.panel-board.fww-game-rummy500 .board-corner-players-top,
.panel-board.fww-game-rummy500 .board-corner-players-bottom,
.panel-board.fww-game-rummy500 .board-top-stats,
.panel-board.fww-game-rummy500 .keyboard-tray-section {
  display: none;
}

.panel-board.fww-game-rummy500,
#panel-board.fww-game-rummy500 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.panel-board.fww-game-rummy500 .game-panel-zoom-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.panel-board.fww-game-rummy500 .board-container-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  min-height: 0;
  width: 100%;
  height: 100%;
  align-items: stretch;
  justify-content: stretch;
}

.panel-board.fww-game-rummy500 #board-grid,
#board-grid.fww-game-rummy500 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: none;
  grid-template-rows: none;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: radial-gradient(circle at center, #1b4d3e 0%, #0d2b22 100%);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  position: relative;
}

/* Table Felt Surface */
.fww-game-rummy500 .rummy-table-surface {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 14px 18px;
  gap: 14px;
  overflow-y: auto;
  box-sizing: border-box;
  align-items: center;
}

/* Header & Turn Status Banner */
.fww-game-rummy500 .rummy-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 860px;
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 14px;
  box-sizing: border-box;
}

.fww-game-rummy500 .rummy-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  color: #f1f5f9;
}

.fww-game-rummy500 .rummy-round-pill {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
}

.fww-game-rummy500 .rummy-phase-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 16px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.fww-game-rummy500 .rummy-phase-banner.my-turn {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  font-weight: 600;
}

.fww-game-rummy500 .rummy-phase-detail {
  color: #e2e8f0;
  font-weight: 400;
}

/* Centered Columnar Player Tableaus (2 to 4 columns) */
.fww-game-rummy500 .rummy-tableaus-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: 14px;
  width: 100%;
  max-width: 860px;
  min-height: 150px;
}

.fww-game-rummy500 .tableau-column {
  flex: 1 1 220px;
  max-width: 380px;
  min-height: 0;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fww-game-rummy500 .tableau-column.active-turn-col {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.fww-game-rummy500 .tableau-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e2e8f0;
}

.fww-game-rummy500 .tableau-player-id {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fww-game-rummy500 .tableau-player-name {
  font-weight: 700;
  color: #f8fafc;
}

.fww-game-rummy500 .dealer-badge {
  color: #fbbf24;
  font-size: 0.9rem;
  font-weight: 800;
}

.fww-game-rummy500 .tableau-player-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.fww-game-rummy500 .hand-count-pill {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 2px 6px;
  color: #cbd5e1;
}

.fww-game-rummy500 .round-pts-pill {
  color: #34d399;
  font-weight: 700;
}

.fww-game-rummy500 .total-pts-pill {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 2px 7px;
  color: #fbbf24;
  font-weight: 700;
}

.fww-game-rummy500 .tableau-melds-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 0%;
  min-height: 60px;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding-right: 2px;
}

.fww-game-rummy500 .empty-melds-label {
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}

/* Face-Down Hand Spread Under Meld Columns */
.fww-game-rummy500 .tableau-hand-spread {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  min-height: 38px;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.fww-game-rummy500 .tableau-hand-spread::-webkit-scrollbar {
  display: none;
}

.fww-game-rummy500 .card-face-down-spread {
  width: 22px;
  height: 32px;
  flex: 0 0 22px;
  background: linear-gradient(135deg, #1e3a8a 0%, #172554 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -11px;
  position: relative;
  user-select: none;
  cursor: default;
  transition: transform 0.15s ease;
}

.fww-game-rummy500 .card-face-down-spread:first-child {
  margin-left: 0;
}

.fww-game-rummy500 .card-face-down-spread .card-back-pattern {
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.fww-game-rummy500 .card-face-down-spread.card-face-down-last {
  border-color: rgba(251, 191, 36, 0.85);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
}

.fww-game-rummy500 .card-face-down-spread .card-back-count {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: #fde68a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.fww-game-rummy500 .empty-hand-spread-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

/* Melds in Columns: low card on top, descending z-index */
.fww-game-rummy500 .meld-group {
  display: flex;
  align-items: center;
  position: relative;
  height: 52px;
  min-height: 52px;
  padding-left: 2px;
}

.fww-game-rummy500 .meld-empty-slot {
  height: 52px;
  min-height: 52px;
  visibility: hidden;
  pointer-events: none;
}

.fww-game-rummy500 .layoff-row-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  margin-left: 22px;
  white-space: nowrap;
}

.fww-game-rummy500 .card-in-meld {
  position: relative;
  width: 40px;
  height: 54px;
  margin-right: -20px;
  border-radius: 5px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}

/* Drag & Drop Discard Target Highlight */
.fww-game-rummy500 .drag-over-discard,
.fww-game-rummy500 .btn-discard-card.drag-over-discard {
  border-color: #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.75);
  outline: 2px dashed #f59e0b;
  outline-offset: 2px;
}

/* Card Corners: Value top-left, Pip bottom-left, Value top-right, Pip bottom-right */
.fww-game-rummy500 .card-corner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  font-family: inherit;
  font-weight: 700;
  user-select: none;
  color: inherit;
}

.fww-game-rummy500 .corner-top-left {
  top: 2px;
  left: 3px;
}

.fww-game-rummy500 .corner-top-right {
  top: 2px;
  right: 3px;
}

.fww-game-rummy500 .corner-bottom-left {
  bottom: 2px;
  left: 3px;
}

.fww-game-rummy500 .corner-bottom-right {
  bottom: 2px;
  right: 3px;
}

.fww-game-rummy500 .card-value {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: inherit;
}

.fww-game-rummy500 .card-pip {
  font-size: 0.68rem;
  line-height: 1;
  color: inherit;
}

.fww-game-rummy500 .card-center-pip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.15rem;
  text-align: center;
  line-height: 1;
  opacity: 0.85;
  pointer-events: none;
  color: inherit;
}

.fww-game-rummy500 .card-color-red,
.fww-game-rummy500 .card-color-red * {
  color: #dc2626;
}

.fww-game-rummy500 .card-color-black,
.fww-game-rummy500 .card-color-black * {
  color: #1e293b;
}

/* Centered Row: Stock Deck & Fanned Discard Spread */
.fww-game-rummy500 .rummy-central-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 780px;
  flex-shrink: 0;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.42);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 12px 18px;
  box-sizing: border-box;
}

.fww-game-rummy500 .stock-deck-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.fww-game-rummy500 .card-stock-pile {
  width: 52px;
  height: 72px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1e3a8a, #172554);
  border: 2px solid #60a5fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  user-select: none;
  transition: transform 0.15s ease;
}

.fww-game-rummy500 .stock-deck-slot:hover .card-stock-pile {
  transform: translateY(-3px);
}

.fww-game-rummy500 .stock-count-label {
  font-size: 0.74rem;
  color: #cbd5e1;
  font-weight: 600;
}

/* Discard Spread (Fanned Row with -28px overlapping margins) */
.fww-game-rummy500 .discard-spread-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  padding: 8px 14px;
  min-height: 78px;
}

.fww-game-rummy500 .empty-discard-label {
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
}

.fww-game-rummy500 .card-in-discard {
  position: relative;
  width: 50px;
  height: 70px;
  margin-left: -28px;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}

.fww-game-rummy500 .card-in-discard:first-child {
  margin-left: 0;
}

.fww-game-rummy500 .card-in-discard:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  border: 1px solid #f59e0b;
}

/* Centered Draft Meld Tray (PRIVATE) */
.fww-game-rummy500 .rummy-draft-tray {
  width: 100%;
  max-width: 780px;
  flex-shrink: 0;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.fww-game-rummy500 .draft-tray-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
}

.fww-game-rummy500 .draft-instruction {
  font-size: 0.75rem;
  color: #cbd5e1;
  font-weight: 400;
}

.fww-game-rummy500 .draft-cards-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 78px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: 8px;
}

.fww-game-rummy500 .empty-draft-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-style: italic;
  padding: 8px;
  text-align: center;
}

/* Deep card badge with pinned undo icon */
.fww-game-rummy500 .card-deep-wrapper {
  position: relative;
  display: inline-block;
}

.fww-game-rummy500 .deep-target-card {
  border: 2px solid #ef4444;
}

.fww-game-rummy500 .card-undo-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 30;
}

.fww-game-rummy500 .draft-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tactile Buttons */
.fww-game-rummy500 .btn-sort-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid #475569;
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.15s ease;
}

.fww-game-rummy500 .btn-sort-card:hover:not(:disabled) {
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  border-color: #64748b;
  color: #ffffff;
  transform: translateY(-1px);
}

.fww-game-rummy500 .btn-sort-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fww-game-rummy500 .btn-submit-meld {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #059669;
  color: #ffffff;
}

.fww-game-rummy500 .btn-discard-card {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
}

/* Companion Tab Wrapper: [ 🂠 Hand ] Tab in #clues-panel */
.fww-game-rummy500.rummy-hand-tab-wrapper,
.fww-game-rummy500.rummy-scoresheet-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  background: transparent;
}

.fww-game-rummy500 .rummy-hand-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.fww-game-rummy500 .hand-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fww-game-rummy500 .hand-panel-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e2e8f0;
}

.fww-game-rummy500 .hand-sort-group {
  display: flex;
  gap: 6px;
}

.fww-game-rummy500 .hand-cards-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 4px;
  min-height: 86px;
}

.fww-game-rummy500 .hand-card {
  position: relative;
  width: 52px;
  height: 74px;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  flex-shrink: 0;
  overflow: hidden;
}

.fww-game-rummy500 .hand-card:hover {
  transform: translateY(-3px);
}

.fww-game-rummy500 .hand-card.selected {
  border: 2px solid #3b82f6;
  transform: translateY(-6px);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.45);
}

.fww-game-rummy500 .hand-card.drag-hover {
  transform: translateY(-5px) scale(1.06);
  outline: 2px solid #10b981;
  box-shadow: 0 8px 16px rgba(16, 185, 129, 0.45);
  z-index: 5;
}

.fww-game-rummy500 .hand-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.96);
}

.fww-game-rummy500 .hand-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.fww-game-rummy500 .hand-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fww-game-rummy500 .bot-thinking-status {
  font-size: 0.78rem;
  color: #fbbf24;
  font-style: italic;
}

/* Companion Tab Wrapper: [ 📊 ScoreSheet ] Tab in #clues-panel */
.fww-game-rummy500 .scoresheet-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fww-game-rummy500 .scoresheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
}

.fww-game-rummy500 .scoresheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  color: #e2e8f0;
}

.fww-game-rummy500 .scoresheet-table th,
.fww-game-rummy500 .scoresheet-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fww-game-rummy500 .scoresheet-table th {
  color: #94a3b8;
  font-weight: 600;
}

.fww-game-rummy500 .scoresheet-table .pos-score {
  color: #34d399;
}

.fww-game-rummy500 .scoresheet-table .neg-score {
  color: #f87171;
}

.fww-game-rummy500 .scoresheet-table .live-score {
  color: #fbbf24;
}

.fww-game-rummy500 .scoresheet-table .total-score-row td {
  border-top: 2px solid rgba(245, 158, 11, 0.4);
  border-bottom: none;
  color: #fbbf24;
  padding-top: 8px;
}

/* Round Over & Match Over Overlay Card */
.fww-game-rummy500 .rummy-round-over-card {
  width: 100%;
  max-width: 600px;
  background: rgba(15, 23, 42, 0.94);
  border: 2px solid #fbbf24;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  padding: 18px 24px;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease;
  z-index: 10;
}

.fww-game-rummy500 .rummy-round-over-card.match-over-card {
  border-color: #34d399;
}

.fww-game-rummy500 .round-over-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
}

.fww-game-rummy500 .round-over-badge {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fbbf24;
}

.fww-game-rummy500 .match-over-card .round-over-badge {
  color: #34d399;
}

.fww-game-rummy500 .round-over-winner {
  font-size: 0.92rem;
  color: #f1f5f9;
}

.fww-game-rummy500 .round-over-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.fww-game-rummy500 .round-over-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  color: #f1f5f9;
}

.fww-game-rummy500 .round-over-table th,
.fww-game-rummy500 .round-over-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fww-game-rummy500 .round-over-table th {
  color: #94a3b8;
  font-weight: 600;
}

.fww-game-rummy500 .round-over-table .pos-score {
  color: #34d399;
}

.fww-game-rummy500 .round-over-table .neg-score {
  color: #f87171;
}

.fww-game-rummy500 .round-over-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.fww-game-rummy500 .btn-deal-next-round {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.fww-game-rummy500 .btn-deal-next-round:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.fww-game-rummy500 .btn-deal-next-round.btn-restart-match {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .fww-game-rummy500 .rummy-central-row {
    flex-wrap: wrap;
  }

  .fww-game-rummy500 .card-in-discard {
    width: 42px;
    height: 58px;
    margin-left: -22px;
  }

  .fww-game-rummy500 .hand-card {
    width: 46px;
    height: 64px;
  }
}

/* Inlined: signals.css */
/* Decrypted by rival in Signals: de-emphasize proprietary ownership */
.tile-placed.tile-mine.tile-revealed-guessed.tile-decrypted-by-rival {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border: 2px dashed #059669 !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.25) !important;
}

.tile-placed.tile-mine.tile-revealed-guessed.tile-decrypted-by-rival .cell-letter {
  color: #047857 !important;
}

/* Inlined: summit.css */
/* Summit Glacier Frost Pulse */
@keyframes summitPulse {
  0% {
    transform: scale(0.93);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.9), inset 0 0 10px rgba(14, 165, 233, 0.7);
    border-color: #38bdf8;
  }
  45% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 5px rgba(56, 189, 248, 0.8), inset 0 0 14px rgba(56, 189, 248, 0.8);
    border-color: #7dd3fc;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 6px 1px rgba(56, 189, 248, 0.3);
    border-color: rgba(56, 189, 248, 0.4);
  }
}
.board-cell.cell-bot-pulse-summit {
  animation: summitPulse 1.8s ease-out forwards !important;
  z-index: 12 !important;
}

/* Inlined: swap.css */
/* ==========================================================================
   FunBeyondWords (FWW): Swap Dice Alignment Surface (SWAP_SPEC §3)
   ========================================================================== */
/*
 * Board wrapper framing (relocated from css/board.css per GEMINI.md §2.4).
 * Desktop .board-container-wrapper uses `container-type: size` (board.css @media min-width:769px)
 * which zeroes wrapper intrinsic height and forces 100cqh sizing. Swap opts out to container-type: normal,
 * allowing the content-sized dice tray and top stats to size naturally without displacing the control-card below.
 */
.panel-board .board-container-wrapper:has(#board-grid.swap-active),
.board-container-wrapper:has(#board-grid.swap-active) {
  container-type: normal !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  width: 100% !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto auto 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  background-color: transparent !important;
}

.panel-board .board-container-wrapper:has(#board-grid.swap-active) #board-top-stats {
  display: none !important;
}

.panel-board .board-container-wrapper:has(#board-grid.swap-active) .game-status-banner {
  width: 100% !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 440px), 96vw)) !important;
  margin: 0 auto 6px auto !important;
}

#board-grid.swap-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 440px), 96vw)) !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
}

.swap-arena-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 2px 4px;
}

.swap-board-top-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  z-index: 5;
  width: 100%;
}

.swap-board-top-stats .board-mode-toggle-wrapper {
  position: static;
  transform: none;
  margin: 0;
  flex-shrink: 0;
}

@container (max-width: 410px) {
  .swap-board-top-stats .board-mode-toggle-wrapper {
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 410px) {
  .swap-board-top-stats .board-mode-toggle-wrapper {
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.swap-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: clamp(0.72rem, 2.2vmin, 0.8rem);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.swap-stat-timer-val {
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

.swap-stat-swaps-val {
  font-family: 'JetBrains Mono', monospace;
  color: #f8fafc;
}

.swap-tray-assembly {
  --swap-assembly-size: clamp(200px, min(calc(100vw - 24px), calc(var(--app-height, 100dvh) - 350px), 420px), 420px);
  position: relative;
  width: var(--swap-assembly-size);
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  box-sizing: border-box;
}

.swap-tray-box {
  width: 100%;
  background: #1c1917;
  border: 4px solid #44403c;
  border-radius: 14px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: clamp(5px, 1.5vmin, 8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.tray-layout-wrapper {
  display: grid;
  grid-template-columns: clamp(34px, 10vw, 46px) minmax(0, 1fr);
  grid-template-rows: clamp(28px, 8vw, 44px) minmax(0, 1fr);
  gap: clamp(4px, 1.2vmin, 6px);
  width: 100%;
  box-sizing: border-box;
}

.col-targets-row {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: clamp(4px, 1.2vmin, 6px);
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.row-targets-col {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: clamp(4px, 1.2vmin, 6px);
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.swap-tray-box .dice-matrix-grid {
  grid-column: 2;
  grid-row: 2;
  background: radial-gradient(circle at 50% 50%, #114b38 0%, #08261c 100%);
  border: 2.5px solid #16533f;
  border-radius: 10px;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.85);
  padding: clamp(4px, 1.2vmin, 6px);
  display: grid;
  gap: clamp(4px, 1.2vmin, 6px);
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  touch-action: none;
}

.target-meter,
.sum-badge {
  background: #1e293b;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  padding: 2px 4px;
}

.col-targets-row .target-meter,
.col-targets-row .sum-badge {
  flex-direction: row;
  gap: 5px;
  font-size: 0.88rem;
}

.row-targets-col .target-meter,
.row-targets-col .sum-badge {
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
}

.target-goal-label,
.badge-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.03em;
}

.col-targets-row .target-goal-label,
.col-targets-row .badge-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
}

.target-goal-val,
.badge-goal-number {
  font-size: 0.96rem;
  font-weight: 800;
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.target-meter.balanced,
.sum-badge.match {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.45));
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  animation: pulseBalanced 0.4s ease-out;
}

.target-meter.balanced .target-goal-label,
.sum-badge.match .badge-label {
  color: #a7f3d0;
}

.target-meter.balanced .target-goal-val,
.sum-badge.match .badge-goal-number {
  color: #6ee7b7;
}

@keyframes pulseBalanced {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.die-cell,
.swap-die {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2px solid #94a3b8;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), inset 0 1px 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  position: relative;
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.1s ease;
  will-change: transform;
  touch-action: none;
  box-sizing: border-box;
}

.die-cell:active,
.swap-die:active {
  cursor: grabbing;
}

.die-cell:hover,
.swap-die:hover {
  transform: translate3d(0, -2px, 0) scale(1.02);
  border-color: #cbd5e1;
}

.die-cell.selected,
.swap-die.selected {
  border: 3px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.4), 0 8px 16px rgba(0, 0, 0, 0.6);
  transform: translate3d(0, -3px, 0) scale(1.05);
  z-index: 10;
  animation: pulseSelected 1.2s infinite alternate;
}

@keyframes pulseSelected {
  0% { border-color: #f59e0b; box-shadow: 0 0 14px rgba(245, 158, 11, 0.4); }
  100% { border-color: #fbbf24; box-shadow: 0 0 22px rgba(251, 191, 36, 0.8); }
}

.die-cell.kb-focused,
.die-cell.keyboard-focused,
.swap-die.kb-focused,
.swap-die.keyboard-focused {
  outline: 2.5px solid #38bdf8;
  outline-offset: 2px;
  z-index: 8;
}

.die-cell.kb-focused.selected,
.swap-die.kb-focused.selected {
  border-color: #f59e0b;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.9), 0 0 0 3px #38bdf8;
  transform: translate3d(0, -4px, 0) scale(1.07);
  z-index: 12;
  outline: 2px solid #fbbf24;
  outline-offset: 3px;
}

.die-cell.dragging,
.swap-die.dragging {
  opacity: 0.35;
  transform: scale(0.92);
}

.die-cell.drop-target,
.swap-die.drop-target,
.die-cell.drag-target-hover,
.swap-die.drag-target-hover {
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
  transform: translate3d(0, 0, 0) scale(1.04);
}

.swap-die-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border: 2.5px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65), 0 0 18px rgba(245, 158, 11, 0.5);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  touch-action: none;
  box-sizing: border-box;
}

.swap-tray-box.edge-bump {
  animation: edgeBump 0.12s ease-in-out;
}

@keyframes edgeBump {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

.die-pip-svg {
  width: 70%;
  height: 70%;
  pointer-events: none;
}

.swap-tray-assembly.ad-obscured {
  filter: blur(8px) brightness(0.6);
  pointer-events: none;
  user-select: none;
}

.swap-arena-wrapper .simulated-ad-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 380px);
  max-width: 380px;
  max-height: min(90%, 420px);
  border-radius: 18px;
  overflow: hidden;
  z-index: 50;
  background: linear-gradient(145deg, #0b1329 0%, #171d3d 50%, #1e1338 100%);
  border: 2px solid #3b82f6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  box-sizing: border-box;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.swap-arena-wrapper .simulated-ad-overlay.is-dismissed {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
}

.swap-arena-wrapper .daily-start-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 380px);
  max-width: 380px;
  max-height: min(90%, 420px);
  border-radius: 18px;
}

.swap-arena-wrapper .daily-start-overlay.is-dismissed {
  transform: translate(-50%, -50%) scale(1.05);
}

@media (max-width: 768px) {
  .swap-tray-assembly {
    max-width: min(400px, 96vw);
  }
}

/* ==========================================================================
   Swap Action Bar & Controls Container (CROSS_GAME_SPEC § 5.3.3.1)
   Suppressed when unified #control-card (.keyboard-tray-section) is active (§6.4)
   ========================================================================== */
.panel-board:has(#control-card) .swap-bottom-controls,
.panel-board:has(.keyboard-tray-section) .swap-bottom-controls {
  display: none;
}

.swap-instructions-banner {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
  background: rgba(15, 23, 42, 0.75);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-action, 8px);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 8px;
}

.swap-actions-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.swap-actions-row .tool-btn {
  flex: 1;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
  white-space: nowrap;
}

.swap-actions-row .tool-btn-secondary {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

.swap-actions-row .tool-btn-secondary:hover {
  background: #283548;
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.swap-actions-row .btn-action-giveup {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.swap-actions-row .btn-action-giveup:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
  transform: translateY(-1px);
}


/* Inlined: tumble.css */
/* ==========================================================================
   FunBeyondWords (FWW): Tumble 3D Word Shake Surface (TUMBLE_SPEC)
   ========================================================================== */
.panel-board .board-container-wrapper:has(#board-grid.tumble-active),
.board-container-wrapper:has(#board-grid.tumble-active) {
  container-type: normal;
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  width: 100%;
  margin: auto auto 0 auto;
  padding: 0;
  position: relative;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent;
}

.panel-board .board-container-wrapper:has(#board-grid.tumble-active) #board-top-stats {
  display: none !important;
}

#board-grid.tumble-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: auto !important;
}

.tumble-arena-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 4px 0;
}

.tumble-anchor-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 8px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin-top: 6px;
  margin-bottom: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tumble-anchor-card.found {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(15, 23, 42, 0.95));
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.tumble-board-top-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  z-index: 5;
}

.tumble-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tumble-stat-timer-val {
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

.tumble-stat-score-val {
  font-family: 'JetBrains Mono', monospace;
  color: #f8fafc;
}

.tumble-tray-box {
  position: relative;
  background: #1c1917;
  border: 6px solid #44403c;
  border-radius: 20px;
  padding: 10px;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.8),
    0 12px 32px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  touch-action: none;
}

.tumble-tray-box.urgency-warning {
  animation: urgencyAmberPulse 1.5s ease-in-out infinite;
  border-width: 6px;
}

.tumble-tray-box.urgency-critical {
  animation: urgencyCrimsonPulse 0.65s ease-in-out infinite;
  border-width: 7px;
}

.tumble-stat-timer-val.urgency-warning {
  color: #fbbf24;
}

.tumble-stat-timer-val.urgency-critical {
  color: #ef4444;
  animation: timerHeartbeat 0.65s ease-in-out infinite;
}

/* Multi-Stage Peripheral & Foveal Urgency (Dice Border Synchronization - CROSS_GAME_SPEC §22.4) */
.tumble-tray-box.urgency-warning .tumble-die:not(.selected):not(.in-path) .die-face {
  border-color: #f59e0b;
  box-shadow: 0 4px 0 #94a3b8, inset 0 0 10px rgba(245, 158, 11, 0.4), 0 0 8px rgba(245, 158, 11, 0.3);
  animation: tumbleDieWarningPulse 1.5s ease-in-out infinite;
}

.tumble-tray-box.urgency-critical .tumble-die:not(.selected):not(.in-path) .die-face {
  border-color: #ef4444;
  box-shadow: 0 4px 0 #94a3b8, inset 0 0 14px rgba(239, 68, 68, 0.55), 0 0 12px rgba(239, 68, 68, 0.45);
  animation: tumbleDieCriticalPulse 0.65s ease-in-out infinite alternate;
}

@keyframes tumbleDieWarningPulse {
  0%, 100% { border-color: #f59e0b; }
  50% { border-color: #fbbf24; box-shadow: 0 4px 0 #94a3b8, inset 0 0 14px rgba(245, 158, 11, 0.55), 0 0 10px rgba(245, 158, 11, 0.4); }
}

@keyframes tumbleDieCriticalPulse {
  0% { border-color: #ef4444; }
  100% { border-color: #f87171; box-shadow: 0 4px 0 #94a3b8, inset 0 0 18px rgba(239, 68, 68, 0.7), 0 0 14px rgba(239, 68, 68, 0.6); }
}

.tumble-arena-wrapper .dice-matrix-grid,
#tumble-dice-grid.dice-matrix-grid {
  --tumble-grid-size: clamp(180px, min(calc(100vw - 44px), calc(var(--app-height, 100dvh) - 380px), 312px), 312px);
  width: var(--tumble-grid-size);
  height: var(--tumble-grid-size);
  aspect-ratio: 1 / 1;
  display: grid;
  gap: clamp(4px, 1.2vmin, 8px);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  touch-action: none;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

.tumble-arena-wrapper .dice-matrix-grid.grid-4x4,
#tumble-dice-grid.dice-matrix-grid.grid-4x4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  --die-half-depth: calc((var(--tumble-grid-size) - 24px) / 8);
}

.tumble-arena-wrapper .dice-matrix-grid.grid-5x5,
#tumble-dice-grid.dice-matrix-grid.grid-5x5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(3px, 1vmin, 6px);
  --die-half-depth: calc((var(--tumble-grid-size) - 24px) / 10);
}

.tumble-die {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
  background: transparent;
  border: none;
  box-shadow: none;
}

.die-cube {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.tumble-die .die-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 45%, #e2e8f0 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 4px 0 #94a3b8,
    0 7px 12px rgba(0, 0, 0, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(15, 23, 42, 0.15);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
  pointer-events: none;
  color: #0f172a;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tumble-die:not(.die-tumbling) .die-face:not(.die-face-front) {
  display: none !important;
}

.die-face-front {
  transform: translateZ(0);
}

.tumble-die.die-tumbling .die-face {
  display: flex !important;
}
.tumble-die.die-tumbling .die-face-front {
  transform: translateZ(var(--die-half-depth, 36px));
}
.die-face-back {
  transform: rotateY(180deg) translateZ(var(--die-half-depth, 36px));
  background: linear-gradient(145deg, #e2e8f0 0%, #f1f5f9 60%, #cbd5e1 100%);
}
.die-face-top {
  transform: rotateX(90deg) translateZ(var(--die-half-depth, 36px));
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}
.die-face-bottom {
  transform: rotateX(-90deg) translateZ(var(--die-half-depth, 36px));
  background: linear-gradient(0deg, #cbd5e1 0%, #e2e8f0 100%);
}
.die-face-left {
  transform: rotateY(-90deg) translateZ(var(--die-half-depth, 36px));
  background: linear-gradient(90deg, #cbd5e1 0%, #f1f5f9 100%);
}
.die-face-right {
  transform: rotateY(90deg) translateZ(var(--die-half-depth, 36px));
  background: linear-gradient(-90deg, #cbd5e1 0%, #f1f5f9 100%);
}

.tumble-die.selected .die-face,
.tumble-die.in-path .die-face {
  background: linear-gradient(145deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border-color: #7dd3fc !important;
  box-shadow:
    0 4px 0 #0284c7,
    0 0 16px rgba(56, 189, 248, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(2, 132, 199, 0.4) !important;
}

.tumble-die.selected .die-letter-face,
.tumble-die.in-path .die-letter-face {
  color: #ffffff !important;
}

.tumble-die.selected .die-scrabble-val,
.tumble-die.in-path .die-scrabble-val {
  color: rgba(255, 255, 255, 0.9) !important;
}

.tumble-die.head-die .die-face,
.tumble-die.is-head .die-face {
  background: linear-gradient(145deg, #fbbf24 0%, #d97706 100%) !important;
  color: #0f172a !important;
  border-color: #fde047 !important;
  box-shadow:
    0 4px 0 #b45309,
    0 0 22px rgba(251, 191, 36, 0.95),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(180, 83, 9, 0.4) !important;
}

.die-letter-face {
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0f172a;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dice-matrix-grid.grid-5x5 .die-letter-face {
  font-size: 1.5rem;
}

.die-letter-face.qu-letter {
  font-size: 1.45rem;
  letter-spacing: -0.05em;
}

.die-scrabble-val {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: clamp(0.6rem, 1.25vw, 0.72rem);
  font-weight: 800;
  color: #475569;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  transition: transform 0.4s ease;
}

.tumble-path-glow {
  fill: none;
  stroke: #38bdf8;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85));
  pointer-events: none;
}

.tumble-board-action-toolbar {
  width: 100%;
  max-width: 480px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 6px;
  flex-shrink: 0;
  gap: 6px;
}

/* Tumble Centered Tray Controls (Below Dice Box) */
.board-tray-controls-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  flex-shrink: 0;
  z-index: 5;
}

.tray-action-btn {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  user-select: none;
}

.tray-action-btn:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.9);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.25);
}

.tray-action-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.tray-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Word Action Toolbar (Centered directly under Tumble button) */
.board-action-toolbar {
  width: 100%;
  max-width: 480px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin-top: 6px;
  flex-shrink: 0;
  gap: 6px;
}

.board-tool-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tool-btn {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 6px 12px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.tool-btn:hover {
  background: #334155;
  border-color: #818cf8;
  color: #fff;
}

.tool-btn:active {
  transform: translateY(1px);
}

.tool-btn-primary {
  background: #2563eb;
  border-color: #60a5fa;
  color: #fff;
}

.tool-btn-primary:hover {
  background: #1d4ed8;
  color: #fff;
}

.tool-btn-submit {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
}

.tool-btn-submit:hover {
  background: #10b981;
  color: #0b1120;
}

.active-word-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  margin-top: 2px;
}

.active-word-instruction {
  color: #64748b;
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  user-select: none;
}

.active-word-letters {
  font-size: 1.10rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  min-height: 26px;
  display: flex;
  align-items: center;
}

.active-word-math-chip {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  color: #fde68a;
  display: none;
  align-items: center;
  gap: 4px;
}

.panel-board:has(#control-card) .tumble-integrated-controls,
.panel-board:has(.keyboard-tray-section) .tumble-integrated-controls {
  display: none;
}

/* Inlined: tunnel.css */
/* ==========================================================================
   TUNNEL PRODUCTION BOARD & HUD STYLES (TUNNEL_SPEC.md § 5)
   ========================================================================== */

.panel-board .board-container-wrapper:has(#board-grid.tunnel-active) #board-top-stats {
  display: none !important;
}

#board-grid.tunnel-active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.tunnel-board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  user-select: none;
}

.tunnel-board-wrapper.dynamite-active {
  cursor: crosshair !important;
}

.tunnel-board-wrapper.dynamite-active .tunnel-cell {
  cursor: crosshair !important;
}

/* Board Top Stats Bar (Snug directly above cavern) */
.tunnel-top-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tunnel-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
}

.tunnel-stat-pill.stat-countdown {
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}

.tunnel-stat-pill.stat-score {
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.tunnel-stat-pill.stat-dir:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

/* Cavern Viewport & Grid (Canonical --board-size Lock) */
.tunnel-cavern-viewport {
  width: var(--board-size, min(480px, calc(100vw - 32px), calc(100vh - 280px)));
  height: var(--board-size, min(480px, calc(100vw - 32px), calc(100vh - 280px)));
  max-width: min(var(--board-size, 480px), calc(100vh - 280px), calc(100vw - 32px));
  max-height: min(var(--board-size, 480px), calc(100vh - 280px), calc(100vw - 32px));
  aspect-ratio: 1 / 1;
  background: #090d16;
  border: 3px solid #1e293b;
  border-radius: 12px;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.tunnel-cavern-grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  align-items: stretch;
  justify-items: stretch;
}

.tunnel-cell {
  position: relative;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  font-size: clamp(0.9rem, 3.2vw, 1.45rem);
  font-weight: 900;
  color: #f8fafc;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
  user-select: none;
}

.tunnel-cell:hover:not(.cell-bedrock):not(.cell-cavein) {
  background: #1e293b;
  border-color: rgba(56, 189, 248, 0.35);
}

.tunnel-cell.drag-over {
  border: 2px dashed #f59e0b !important;
  background: rgba(245, 158, 11, 0.15) !important;
}

.tunnel-cell.cell-bedrock {
  background: radial-gradient(circle at 35% 35%, #182234 0%, #080c14 100%);
  border-color: #0b0f19;
  cursor: not-allowed;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

.tunnel-cell.cell-bedrock .rock-pattern {
  color: #334155;
  font-size: 0.85rem;
  opacity: 0.4;
}

.tunnel-board-wrapper.dynamite-active .tunnel-cell.cell-bedrock:hover,
.tunnel-board-wrapper.dynamite-active .tunnel-cell.cell-cavein:hover {
  outline: 2px solid #ef4444;
  cursor: crosshair;
  background: rgba(239, 68, 68, 0.25);
}

/* Eligible Demolition Target Glow (Tunnel Blast Mode) */
.tunnel-cell.blast-eligible {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85) !important;
  cursor: crosshair !important;
  animation: blastPulse 1s ease-in-out infinite alternate !important;
}

@keyframes blastPulse {
  0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); border-color: #ef4444; }
  100% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.95); border-color: #f87171; }
}

/* Active Selected Cell Cursor */
.tunnel-cell.cell-selected {
  outline: 2px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  background: rgba(56, 189, 248, 0.12) !important;
}

.tunnel-cell.cell-cavein {
  background: radial-gradient(circle, #2a1215 0%, #15080a 100%);
  border-color: #475569;
  cursor: not-allowed;
}

/* Dynamic Cave-In Initial Burst */
.tunnel-cell.cell-cavein.cell-rockfall-new {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85) !important;
  animation: rockfallFade 2.5s forwards !important;
}

@keyframes rockfallFade {
  0% {
    border-color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.9);
    transform: scale(1.08);
  }
  60% {
    border-color: #dc2626;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  }
  100% {
    border-color: #475569;
    box-shadow: none;
    transform: scale(1);
  }
}

.tunnel-cell.cell-cavein.cell-rockfall-settled {
  border-color: #334155;
  box-shadow: none;
  animation: none;
}

.tunnel-cell.cell-vault {
  background: radial-gradient(circle, #3b2808 0%, #171105 100%);
  border: 2px solid #f59e0b;
  box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.3), 0 0 12px rgba(245, 158, 11, 0.25);
  animation: vaultGlow 2.5s infinite alternate ease-in-out;
}

@keyframes vaultGlow {
  0% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
  100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.7); }
}

.tunnel-cell.cell-shaft {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid #d97706;
  color: #fde047;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.tunnel-cell.cell-seed {
  border-color: #38bdf8;
  color: #e0f2fe;
}

.tunnel-cell.cell-anchor-pulse {
  border: 2px solid #fde047 !important;
  box-shadow: 0 0 14px rgba(253, 224, 71, 0.8);
  animation: anchorHalo 1.4s infinite alternate;
}

@keyframes anchorHalo {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.tunnel-cell.cell-staged {
  border: 2px dashed #38bdf8;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  animation: stagedGlow 1.2s infinite alternate;
}

@keyframes stagedGlow {
  0% { box-shadow: 0 0 4px rgba(56, 189, 248, 0.3); }
  100% { box-shadow: 0 0 14px rgba(56, 189, 248, 0.7); }
}

.tunnel-cell.cell-corridor-preview {
  background: rgba(56, 189, 248, 0.08);
  border: 1px dashed rgba(56, 189, 248, 0.4);
}

.tunnel-cell.cell-corridor-preview:hover {
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
}

/* In-HUD Tile Tray */
.tunnel-hud-tray-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.tunnel-tray-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 700;
}

.tunnel-solvable-pill {
  font-size: 0.65rem;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 1px 6px;
  border-radius: 9999px;
}

.tunnel-tile-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px;
}

.tunnel-cell .cell-tile-value {
  color: #cbd5e1;
  font-size: clamp(0.5rem, 1.1vw, 0.68rem);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.tunnel-cell.cell-shaft .cell-tile-value {
  color: #fde047;
  opacity: 0.9;
}

.tunnel-cell.cell-seed .cell-tile-value {
  color: #38bdf8;
  opacity: 0.95;
}

.tunnel-cell.cell-staged .cell-tile-value {
  color: #38bdf8;
}

.tunnel-tray-tile {
  position: relative;
  width: clamp(38px, 11vw, 46px);
  height: clamp(42px, 12vw, 50px);
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f8fafc;
  cursor: grab;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.12s ease;
  user-select: none;
}

.tunnel-tray-tile .tray-tile-pts {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.65rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.tunnel-tray-tile:hover .tray-tile-pts {
  color: #38bdf8;
}

.tunnel-tray-tile.is-staged .tray-tile-pts {
  opacity: 0.3;
}

/* In-HUD Side-by-Side Action Buttons */
.tunnel-hud-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 6px auto 0 auto;
}

.btn-tunnel-dynamite,
.btn-tunnel-swap,
.btn-tunnel-give-up,
.btn-tunnel-excavate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn-tunnel-give-up {
  background: #1e293b;
  border: 1px solid #475569;
  color: #cbd5e1;
}

.btn-tunnel-give-up:hover:not(:disabled) {
  background: #334155;
  border-color: #64748b;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-tunnel-dynamite {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  border: 1px solid #ef4444;
  color: #fef2f2;
  position: relative;
}

.btn-tunnel-dynamite .btn-corner-fc {
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-tunnel-dynamite .btn-corner-cost {
  position: absolute;
  bottom: 3px;
  right: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-gold, #fbbf24);
  line-height: 1;
}

.btn-tunnel-dynamite .btn-center-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-tunnel-dynamite:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.btn-tunnel-dynamite.active {
  background: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8) !important;
  animation: pulseDyn 1s infinite alternate;
}

@keyframes pulseDyn {
  0% { transform: scale(1); }
  100% { transform: scale(1.03); }
}

.btn-tunnel-dynamite:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tunnel-dynamite-badge {
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fca5a5;
}

.btn-tunnel-excavate {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border: 1px solid #10b981;
  color: #ecfdf5;
}

.btn-tunnel-excavate:hover:not(:disabled) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-tunnel-excavate:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tunnel-tray-tile.is-swap-selected {
  border-color: #f59e0b !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-4px) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, #1e293b 100%) !important;
}

.tunnel-tray-tile.is-swap-selected::before {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -4px;
  background: #f59e0b;
  color: #0f172a;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 900;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.btn-tunnel-swap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
  border: 1px solid #3b82f6;
  color: #eff6ff;
  position: relative;
}

.btn-tunnel-swap .btn-corner-fc {
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-tunnel-swap .btn-corner-cost {
  position: absolute;
  bottom: 3px;
  right: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-gold, #fbbf24);
  line-height: 1;
}

.btn-tunnel-swap .btn-center-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-tunnel-swap:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.btn-tunnel-swap:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-tunnel-swap-cancel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  background: #334155;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  transition: all 0.15s ease;
}

.btn-tunnel-swap-cancel:hover {
  background: #475569;
}

.btn-tunnel-swap-commit {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  height: var(--btn-action-height, 36px);
  min-height: var(--btn-action-height, 36px);
  border-radius: var(--radius-action, 8px);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border: 1.5px solid #10b981;
  color: #fff;
  position: relative;
  transition: all 0.15s ease;
}

.btn-tunnel-swap-commit .btn-corner-fc {
  position: absolute;
  top: 4px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-tunnel-swap-commit .btn-corner-cost {
  position: absolute;
  bottom: 3px;
  right: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-gold, #fbbf24);
  line-height: 1;
}

.btn-tunnel-swap-commit:hover:not(:disabled) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-tunnel-swap-commit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shake-anim {
  animation: cavernShake 0.32s ease-in-out;
}

@keyframes cavernShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

/* Yesterday's Board Projection Differentiated Styling (XWORD_SPEC § 10.3.5) */
.yesterday-board-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  color: #f8fafc;
  width: 100%;
  max-width: var(--board-size, min(348px, calc(100vw - 16px)));
  margin: 0 auto 4px auto;
  box-sizing: border-box;
  z-index: 15;
}

.yesterday-board-banner.is-visible {
  display: flex;
}

.btn-exit-yesterday {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-exit-yesterday:hover {
  background: rgba(245, 158, 11, 0.35);
  color: #ffffff;
}

/* Differentiated cell styles for Yesterday */
.board-cell.is-yesterday-solved {
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.65) !important;
}

.board-cell.is-yesterday-solved .cell-letter {
  color: #f8fafc !important;
  font-weight: 800;
}

.board-cell.is-yesterday-blank {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1.5px dashed rgba(245, 158, 11, 0.75) !important;
}

.board-cell.is-yesterday-blank .cell-letter {
  color: #fbbf24 !important;
  font-style: italic !important;
  opacity: 0.85;
}

/* Inlined: whiteboard.css */
/* ==========================================================================
   Hangout In-Window Activity Catalog & Whiteboard Canvas Styles
   ========================================================================== */

/* Full vertical flex stretch for Hangout Lounge Activity Controls */
.panel-board:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board .board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])),
.board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100% - var(--game-title-bar-height, 36px)) !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}

.panel-board .board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"]).is-config-view),
.board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"]).is-config-view) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100% - var(--game-title-bar-height, 36px)) !important;
  max-height: none !important;
}

@media (min-width: 769px) {
  .panel-board:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
  .panel-board .board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: calc(100% - var(--game-title-bar-height, 36px)) !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .panel-board .board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"]).is-config-view) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: calc(100% - var(--game-title-bar-height, 36px)) !important;
    max-height: none !important;
  }
}

/* Explicitly hide the game control card and virtual keyboard during session apps */
.panel-board:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) .control-card,
.panel-board:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) .keyboard-tray-section {
  display: none !important;
}


.board-grid.hangout-board-grid:not(.is-hidden):not([style*="display: none"]),
.hangout-board-grid:not(.is-hidden):not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  background: var(--bg-surface-elevated, #0f172a);
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.board-grid.hangout-board-grid.is-hidden,
.hangout-board-grid.is-hidden,
.hangout-board-grid[style*="display: none"] {
  display: none !important;
}

.hangout-board-grid.is-config-view {
  background: var(--bg-primary, #0b0f19) !important;
}

.hangout-board-grid:not(.is-hidden):has(#hangout-selected-game-card),
.hangout-board-grid:not(.is-hidden).has-selected-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#hangout-selected-game-card {
  margin: auto !important;
}

.hangout-catalog-container {
  display: flex;
  flex-direction: column;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 14px 16px !important;
  gap: 14px;
  color: var(--text-primary, #f8fafc);
  user-select: none;
  flex: 1 1 auto;
}

.hangout-catalog-container #hangout-scroll-area {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.hangout-selected-game-panel {
  height: auto !important;
  max-height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.hangout-selected-game-panel .landing2-game-summary {
  flex: 0 0 auto !important;
}

.side-media-tray .hangout-staging-body {
  flex: 1 1 auto !important;
  height: calc(100% - 44px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.catalog-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.catalog-status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent-gold, #f59e0b);
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-status-text {
  font-size: 0.85rem;
  color: var(--text-secondary, #94a3b8);
}

.catalog-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.catalog-section-icon {
  font-size: 1.25rem;
}

.catalog-section-titles {
  display: flex;
  flex-direction: column;
}

.catalog-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-section-sub {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}

.hangout-apps-grid,
.hangout-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.hangout-activity-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.15s ease;
}

.hangout-activity-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.hangout-activity-card.app-card {
  border-left: 3px solid #8b5cf6;
}

.hangout-activity-card.has-suggestions {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.activity-card-top {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.activity-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.activity-card-badges {
  display: flex;
  gap: 4px;
}

.card-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.pill-app { background: rgba(139, 92, 246, 0.3); color: #c4b5fd; }
.pill-game { background: rgba(245, 158, 11, 0.25); color: #fde68a; }
.pill-suggested { background: #f59e0b; color: #000000; font-weight: 800; }

.activity-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.activity-card-tagline {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-card-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-catalog-launch,
.btn-catalog-select,
.btn-catalog-suggest {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-catalog-suggest.is-suggested {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #f59e0b;
  font-weight: 700;
}

/* Host Match Setup Panel */
.hangout-config-container {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  height: 100%;
  overflow-y: auto;
}

.config-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.btn-config-back {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-secondary, #94a3b8);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-config-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.config-game-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.config-game-glyph {
  font-size: 2rem;
  padding: 6px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 8px;
}

.config-game-title {
  margin: 0;
  font-size: 1.25rem;
  color: #ffffff;
}

.config-game-desc {
  font-size: 0.8rem;
  color: var(--text-secondary, #94a3b8);
}

.config-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gold, #f59e0b);
  text-transform: uppercase;
}

.tier-chip-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.tier-chip {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  text-align: left;
}

.tier-chip.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-gold, #f59e0b);
}

.tier-chip strong { font-size: 0.85rem; }
.tier-chip span { font-size: 0.7rem; color: var(--text-secondary, #94a3b8); }

.config-peers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.config-peer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.role-toggle-group {
  display: flex;
  gap: 4px;
}

.role-chip {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.75rem;
  cursor: pointer;
}

.role-chip.active {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
  font-weight: 700;
}

.btn-launch-now {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
}

/* Whiteboard Canvas Workspace */
.whiteboard-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1e293b;
}

.whiteboard-grid-canvas,
.whiteboard-draw-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.whiteboard-grid-canvas { z-index: 1; pointer-events: none; }
.whiteboard-draw-canvas { z-index: 2; cursor: crosshair; }

.whiteboard-toolbar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.wb-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wb-tool-btn,
.wb-size-btn,
.wb-clear-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.1s ease;
}

.wb-tool-btn.active,
.wb-size-btn.active {
  background: rgba(139, 92, 246, 0.4);
  border-color: #8b5cf6;
}

.wb-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
}

.wb-color-dot.active {
  transform: scale(1.3);
  border: 2px solid #ffffff;
}

.wb-grid-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
}

.wb-grid-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.wb-grid-select option {
  background: #0f172a;
  color: #f8fafc;
  padding: 6px 10px;
}

.wb-host-badge {
  font-size: 0.65rem;
  background: #f59e0b;
  color: #000;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 3px;
}

.wb-grid-indicator {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
}

/* Launch Countdown Overlay */
.launch-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 0.2s ease;
}

.countdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--accent-gold, #f59e0b);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.countdown-icon { font-size: 2.5rem; }
.countdown-title { margin: 0; font-size: 1.25rem; color: #ffffff; }
.countdown-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--accent-gold, #f59e0b);
  line-height: 1;
}
.countdown-note { margin: 0; font-size: 0.8rem; color: var(--text-secondary, #94a3b8); }

/* Inlined: xword.css */
/* ==========================================================================
   XWORD CROSSWORD ARENA
   ========================================================================== */

#board-grid.xword-active,
.fww-game-xword #board-grid {
  /* Inherits canonical .board-grid background, borders, aspect-ratio, padding, and responsive dimensions */
  margin: 0 auto;
  grid-template-columns: repeat(var(--grid-size, var(--xword-cols, 7)), 1fr);
  grid-template-rows: repeat(var(--grid-size, var(--xword-rows, 7)), 1fr);
  gap: 2.5px;
  padding: 4px;
  background: #0d121f;
  border: 2px solid #334155;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  transition: transform 0.22s cubic-bezier(0.2, 0, 0.2, 1);
  transform-origin: center center;
  transform: translate(0%, 0%) scale(1);
}

/* ==========================================================================
   XWord Duo Cooperative Speedrun Styles (XWORD_SPEC.md §3.6)
   ========================================================================== */
.duo-role-ribbon {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 6px;
  padding: 5px 12px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.duo-role-ribbon .role-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.duo-role-ribbon .role-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.duo-role-ribbon .role-tag.across {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.duo-role-ribbon .role-tag.down {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.duo-role-ribbon .partner-telepathy-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 0.74rem;
}

.duo-role-ribbon .partner-name {
  color: #f1f5f9;
  font-weight: 600;
}

.duo-role-ribbon .pulse-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
  display: inline-block;
  animation: pulseDuoSync 2s infinite ease-in-out;
}

@keyframes pulseDuoSync {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.board-cell.xword-cell.solved-across {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(30, 41, 59, 0.95)) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
}

.board-cell.xword-cell.solved-down {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(30, 41, 59, 0.95)) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
}

.board-cell.xword-cell.solved-both {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(30, 41, 59, 0.95)) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.elkraf-arena-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: #f8fafc;
}

/* Header & Round Tabs */
.elkraf-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.7);
}

.elkraf-round-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.elkraf-round-tab {
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  user-select: none;
}

.elkraf-round-tab:hover {
  color: #ffffff;
  border-color: #475569;
}

.elkraf-round-tab.active {
  background: #f59e0b;
  color: #0f172a;
  border-color: #d97706;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.elkraf-turn-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: rgba(15, 23, 42, 0.8);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #334155;
}

.elkraf-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: elkrafDotPulse 1.8s infinite;
}

@keyframes elkrafDotPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Cascade Table Container */
.elkraf-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 520px;
  border-radius: 14px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.75);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.elkraf-cascade-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.elkraf-thead {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #0f172a;
  border-bottom: 2px solid #334155;
}

.elkraf-th {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  white-space: nowrap;
}

.elkraf-row {
  border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  transition: background-color 0.15s ease;
}

.elkraf-row.active {
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
}

.elkraf-row.locked {
  background: rgba(30, 41, 59, 0.35);
  opacity: 0.95;
}

.elkraf-row.pending {
  opacity: 0.45;
}

.elkraf-td {
  padding: 8px 12px;
  vertical-align: middle;
}

/* Step Label Column */
.elkraf-step-label {
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: #f1f5f9;
}

.elkraf-row.active .elkraf-step-label {
  color: #fbbf24;
}

.elkraf-step-note {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Swapped Face-Down Mini Tiles (No ASCII Characters) */
.elkraf-swap-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.elkraf-tile-mini {
  width: 22px;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  border: 1.5px solid #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.elkraf-tile-mini::before {
  content: '';
  width: 8px;
  height: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 2px;
}

.elkraf-tile-mini.face-up {
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 100%);
  color: #78350f;
  font-weight: 800;
  font-size: 11px;
  border-color: #d97706;
}

.elkraf-tile-mini.face-up::before {
  display: none;
}

.elkraf-swap-penalty {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fb7185;
  margin-left: 4px;
}

.elkraf-swap-rate-label {
  font-family: monospace;
  font-size: 11px;
  color: #64748b;
}

/* Played Word Cell Slots */
.elkraf-word-slots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.elkraf-tile-slot {
  width: 38px;
  height: 44px;
  border-radius: 7px;
  border: 1.5px solid #334155;
  background: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  user-select: none;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: all 0.15s ease;
}

.elkraf-tile-slot.filled {
  background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 100%);
  color: #78350f;
  border-color: #d97706;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-weight: 900;
}

.elkraf-tile-slot.staged-interactive {
  cursor: pointer;
}

.elkraf-tile-slot.staged-interactive:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.elkraf-tile-slot.active-input {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45), inset 0 0 8px rgba(245, 158, 11, 0.2);
  animation: elkrafCursorPulse 1.4s infinite alternate;
}

@keyframes elkrafCursorPulse {
  0% { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3); }
  100% { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.6); }
}

.elkraf-tile-slot.empty-target {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(15, 23, 42, 0.6);
}

.elkraf-tile-point {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  opacity: 0.85;
}

/* Clean Sweep Separator Row */
.elkraf-clean-sweep-separator td {
  padding: 10px 12px;
  text-align: center;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.25) 50%, rgba(245, 158, 11, 0.1) 100%);
  border-top: 1px solid rgba(245, 158, 11, 0.5);
  border-bottom: 1px solid rgba(245, 158, 11, 0.5);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fde68a;
}

/* Turn Summary Bar */
.elkraf-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.elkraf-summary-col {
  padding: 6px;
}

.elkraf-summary-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.elkraf-summary-val {
  display: block;
  font-size: 18px;
  font-weight: 900;
  margin-top: 2px;
  color: #f8fafc;
}

.elkraf-summary-turn-net {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
}

.elkraf-summary-turn-net .elkraf-summary-label {
  color: #fbbf24;
}

.elkraf-summary-turn-net .elkraf-summary-val {
  color: #fde68a;
  font-size: 20px;
}



/* ==========================================================================
   Yesterday Tab Content Styling (XWORD_SPEC § 10.3.5)
   ========================================================================== */
.yesterday-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yesterday-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.yesterday-card-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 5px;
}
.yesterday-stats-pills {
  display: flex;
  gap: 6px;
  align-items: center;
}
.yesterday-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}
.yesterday-pill.pill-solved {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.yesterday-pill.pill-time {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.yesterday-legend {
  display: flex;
  gap: 10px;
  font-size: 0.66rem;
  color: #94a3b8;
  padding: 2px 0;
}
.yesterday-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-chip-solved {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(34, 197, 94, 0.3);
  border: 1px solid rgba(34, 197, 94, 0.8);
}
.legend-chip-blank {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(245, 158, 11, 0.2);
  border: 1px dashed rgba(245, 158, 11, 0.8);
}
.yesterday-clues-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
}
.yesterday-clue-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.70rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.yesterday-clue-card.is-user-solved {
  border-left: 3px solid #22c55e;
}
.yesterday-clue-card.is-unsolved-blank {
  border-left: 3px solid #f59e0b;
  opacity: 0.88;
}
.yesterday-badge-solved {
  font-size: 0.62rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.yesterday-badge-blank {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.yesterday-encouraging-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.yesterday-encouraging-icon {
  font-size: 1.8rem;
}
.yesterday-encouraging-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #fbbf24;
}
.yesterday-encouraging-text {
  font-size: 0.72rem;
  color: #cbd5e1;
  line-height: 1.4;
  max-width: 280px;
}
.btn-yesterday-play-today {
  margin-top: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0b0f19;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.btn-yesterday-play-today:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-1px);
}


/* Uncross v2.2.0 - Direct Board Canvas & Cell Styling */

.board-container-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 8px 2px 8px;
  overflow: hidden;
  background-color: var(--bg-primary);
  width: 100%;
  height: calc(100% - 44px);
  box-sizing: border-box;
}

.board-arena-frame {
  display: contents;
}

/* Universal Board Top Stats Bar: Centered Immediately Above Board Grid (Unified Same-Line Bar) */
.board-top-stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  width: var(--board-size, 400px);
  max-width: 100%;
  margin: 0 auto 6px auto;
  z-index: 5;
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 26px;
  padding: 0 4px;
  white-space: nowrap;
}

/* ==========================================================================
   Board Perimeter Standings Roster (CROSS_GAME_SPEC §2.4 & §5.3.0.1)
   ========================================================================== */
.board-corner-players-top,
.board-corner-players-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--board-size, 400px);
  max-width: 100%;
  margin: 0 auto;
  z-index: 5;
  box-sizing: border-box;
  padding: 0 4px;
  pointer-events: none;
}

.board-corner-players-top {
  margin-bottom: 6px;
}

.board-corner-players-bottom {
  margin-top: 6px;
}

.board-player-corner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  user-select: none;
  pointer-events: auto;
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-player-corner.is-clickable {
  cursor: pointer;
}

.board-player-corner.is-clickable:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.board-player-corner.is-active-turn {
  background: rgba(12, 74, 110, 0.9);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
  font-weight: 700;
}

.board-player-corner.is-active-turn .board-player-score {
  color: #f8fafc;
}

.board-player-corner .board-player-name {
  color: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-player-corner .board-player-score {
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.board-player-corner .board-player-you {
  font-size: 0.65rem;
  color: #38bdf8;
  font-weight: 600;
}

.board-player-corner-slot {
  min-width: 1px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Universal Game Panel Zoom Affordance (§CROSS_GAME_SPEC §2.11)
   ========================================================================== */

.game-panel-zoom-wrapper {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transform-origin: top center;
  transition: zoom 0.12s ease-out, transform 0.12s ease-out;
}

.game-panel-zoom-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}

.game-panel-zoom-widget.is-playfield-floating {
  position: absolute;
  top: 46px; /* Positioned directly beneath 40px header with 6px breathing room */
  right: 12px;
  z-index: 60;
}

.game-panel-zoom-widget.is-playfield-floating .zoom-affordance-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  padding: 2px 6px;
  min-width: 36px;
  height: 32px;
  cursor: pointer;
  color: #cbd5e1;
  transition: all 0.15s ease;
  gap: 1px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 0, 0, 0.3);
}

.game-panel-zoom-widget.is-playfield-floating .zoom-affordance-btn:hover,
.game-panel-zoom-widget.is-playfield-floating .zoom-affordance-btn.active {
  background: rgba(30, 41, 59, 1);
  border-color: var(--accent-gold, #f59e0b);
  color: #fbbf24;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(245, 158, 11, 0.35);
}

.zoom-magnifier-svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.zoom-pct-display {
  font-size: 0.65rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.03em;
  color: inherit;
  white-space: nowrap;
}

/* Popover Flyout */
.zoom-popover-flyout {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold, rgba(245, 158, 11, 0.45));
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.2);
  padding: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #f8fafc;
  animation: zoomPopoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomPopoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.zoom-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.zoom-popover-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
}

.zoom-popover-title-icon {
  color: var(--accent-gold, #f59e0b);
  stroke: currentColor;
}

.zoom-btn-reset {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 4px;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.zoom-btn-reset:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--accent-gold, #f59e0b);
  color: #fbbf24;
}

.zoom-slider-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zoom-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.zoom-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #1e293b;
  outline: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.zoom-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fbbf24;
  cursor: pointer;
  border: 2px solid #0f172a;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
  transition: transform 0.1s ease;
}

.zoom-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.zoom-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fbbf24;
  cursor: pointer;
  border: 2px solid #0f172a;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.zoom-numeric-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.zoom-input-box-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.zoom-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
}

.zoom-number-input-group {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 5px;
  padding: 2px 4px;
}

.zoom-numeric-field {
  width: 44px;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  outline: none;
}

.zoom-numeric-field::-webkit-inner-spin-button,
.zoom-numeric-field::-webkit-outer-spin-button {
  opacity: 0.6;
  cursor: pointer;
}

.zoom-input-unit {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  margin-left: 2px;
}

.zoom-preset-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zoom-preset-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  padding: 2px 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.zoom-preset-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #94a3b8;
  color: #fff;
}

.zoom-preset-chip.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--accent-gold, #f59e0b);
  color: #fbbf24;
  font-weight: 800;
}

.zoom-popover-footnote {
  font-size: 0.64rem;
  color: #64748b;
  line-height: 1.3;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

@media (max-width: 600px) {
  .game-panel-zoom-widget.is-playfield-floating {
    top: 44px;
    right: 8px;
  }
  .board-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) {
    padding-right: 46px; /* Prevent mode slider collision with floating zoom widget on mobile */
  }
  .zoom-popover-flyout {
    right: 0;
    width: 220px;
  }
}

.board-top-stats-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}

.board-top-stats .stat-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(30, 41, 59, 0.9);
  padding: 0 10px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   Universal Peripheral Urgency & Countdown Indicator Standard (CROSS_GAME_SPEC §22.4)
   ========================================================================== */

@keyframes urgencyAmberPulse {
  0%, 100% {
    box-shadow:
      inset 0 4px 12px rgba(0, 0, 0, 0.8),
      0 12px 32px rgba(0, 0, 0, 0.7),
      0 0 14px rgba(245, 158, 11, 0.45);
    border-color: rgba(245, 158, 11, 0.75);
  }
  50% {
    box-shadow:
      inset 0 4px 12px rgba(0, 0, 0, 0.8),
      0 12px 32px rgba(0, 0, 0, 0.7),
      0 0 28px rgba(245, 158, 11, 0.85);
    border-color: #f59e0b;
  }
}

@keyframes urgencyCrimsonPulse {
  0%, 100% {
    box-shadow:
      inset 0 4px 12px rgba(0, 0, 0, 0.8),
      0 12px 32px rgba(0, 0, 0, 0.7),
      0 0 20px rgba(239, 68, 68, 0.7);
    border-color: #ef4444;
  }
  50% {
    box-shadow:
      inset 0 4px 12px rgba(0, 0, 0, 0.8),
      0 12px 32px rgba(0, 0, 0, 0.7),
      0 0 38px rgba(239, 68, 68, 0.95);
    border-color: #f87171;
  }
}

@keyframes timerHeartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Global Board & Viewport Urgency Border Effects */
.board-grid.urgency-warning,
.tunnel-cavern-viewport.urgency-warning,
.tumble-tray-box.urgency-warning {
  animation: urgencyAmberPulse 1.5s ease-in-out infinite !important;
  border-color: #f59e0b !important;
}

.board-grid.urgency-critical,
.tunnel-cavern-viewport.urgency-critical,
.tumble-tray-box.urgency-critical {
  animation: urgencyCrimsonPulse 0.65s ease-in-out infinite !important;
  border-color: #ef4444 !important;
}

/* Global Timer & Countdown Pill Urgency Styling */
.stat-timer.urgency-warning,
.stat-countdown.urgency-warning,
.tunnel-stat-pill.stat-countdown.urgency-warning {
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  background: rgba(45, 30, 10, 0.9) !important;
}

.stat-timer.urgency-critical,
.stat-countdown.urgency-critical,
.tunnel-stat-pill.stat-countdown.urgency-critical {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.8) !important;
  background: rgba(50, 15, 15, 0.95) !important;
  animation: timerHeartbeat 0.65s ease-in-out infinite !important;
}


.board-top-stats .stat-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(30, 41, 59, 0.8);
  padding: 0 10px;
  height: 26px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

#timer-display,
#score-display {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.board-container-wrapper:has(#board-top-stats:not([style*="display: none"])),
.board-container-wrapper:has(.board-corner-players-top:not([style*="display: none"])) {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Symmetrical auto-margin vertical distribution: locks top elements immediately above board */
.board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-top-stats {
  margin: auto auto 4px auto !important;
}

.board-container-wrapper:has(.board-corner-players-top:not([style*="display: none"])) .board-corner-players-top {
  margin: 0 auto 6px auto !important;
}

.board-container-wrapper:not(:has(#board-top-stats:not([style*="display: none"]))):has(.board-corner-players-top:not([style*="display: none"])) .board-corner-players-top {
  margin: auto auto 6px auto !important;
}

.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) .board-arena-frame,
.panel-board .board-container-wrapper:has(.board-corner-players-top:not([style*="display: none"])) .board-arena-frame,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid,
.panel-board .board-container-wrapper:has(.board-corner-players-top:not([style*="display: none"])) #board-grid,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.codex-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.xword-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.elkraf-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.shutter-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.tunnel-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) #board-grid.sonar-active,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) .aperture-board-wrapper,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) .aperture-grid-container,
.panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) .shutter-grid-container {
  margin-top: 0 !important;
  margin-bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel-board .board-container-wrapper:has(.board-corner-players-bottom:not([style*="display: none"])) #board-grid {
  margin-bottom: 0 !important;
}

.panel-board .board-container-wrapper:has(.board-corner-players-bottom:not([style*="display: none"])) .board-corner-players-bottom {
  margin: 6px auto auto auto !important;
}

/* In-Game Board Canvas Mode Switcher Toggle (Unified Over-Board Bar Standard) */
.board-mode-toggle-wrapper {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.board-mode-slider {
  display: inline-flex;
  align-items: center;
  position: relative;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  user-select: none;
  font-family: system-ui, -apple-system, sans-serif;
  height: 26px;
  box-sizing: border-box;
}

.mode-slider-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
  transition: color 0.15s ease;
  line-height: 1;
  height: 100%;
  box-sizing: border-box;
}

.mode-slider-btn.active {
  color: #ffffff;
}

.mode-slider-btn.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.mode-slider-pill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: calc(50% - 2px);
  border-radius: 6px;
  transition: left 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
  z-index: 1;
  pointer-events: none;
}

.mode-slider-daily.active ~ .mode-slider-pill {
  left: 2px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

.mode-slider-casual.active ~ .mode-slider-pill {
  left: calc(50%);
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
}

@media (max-width: 420px) {
  .board-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) {
    justify-content: space-between;
  }
  .board-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) .board-mode-toggle-wrapper {
    position: static;
    transform: none;
  }
  .board-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) .board-top-stats-group {
    justify-content: flex-start;
  }
}

/* Polymorphic In-Arena Header Mode Switcher Alignment (CROSS_GAME_SPEC § 4) */
.arena-top-stats {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.arena-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.arena-top-stats .board-mode-toggle-wrapper {
  position: static;
  transform: none;
  margin-left: auto;
  flex-shrink: 0;
}

.arena-top-stats.is-centered:has(.board-mode-toggle-wrapper:not([style*="display: none"])),
.arena-top-stats.swap-board-top-stats:has(.board-mode-toggle-wrapper:not([style*="display: none"])) {
  justify-content: center;
}

.arena-top-stats.is-centered .board-mode-toggle-wrapper,
.arena-top-stats.swap-board-top-stats .board-mode-toggle-wrapper {
  margin-left: 0;
  margin-right: 0;
}
 
/* Persistent In-Board Developer Bypass Dialog (Strictly for 127.0.0.1:5000 / dev emulator) */
.dev-bypass-overlay {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 10px rgba(245, 158, 11, 0.15);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
  pointer-events: auto;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-bypass-overlay.is-dragging {
  transition: none !important;
  cursor: grabbing !important;
}

.dev-bypass-overlay.minimized {
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  background: rgba(15, 23, 42, 0.88);
}

.dev-bypass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 3px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fbbf24;
  gap: 8px;
  cursor: grab;
  touch-action: none;
}

.dev-bypass-header:active,
.dev-bypass-overlay.is-dragging .dev-bypass-header {
  cursor: grabbing;
}

.dev-bypass-min-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 2px;
  line-height: 1;
}

.dev-bypass-min-btn:hover {
  color: #ffffff;
}

.dev-bypass-body {
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-bypass-btn-group {
  display: flex;
  gap: 4px;
}

.dev-bypass-btn {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.dev-bypass-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
}

.dev-bypass-btn.active.btn-casual {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fbbf24;
  font-weight: 700;
}

.dev-bypass-btn.active.btn-installed {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
  font-weight: 700;
}

.dev-bypass-btn.active.btn-social {
  background: rgba(168, 85, 247, 0.25);
  border-color: #a855f7;
  color: #c084fc;
  font-weight: 700;
}

.dev-bypass-caption {
  font-size: 0.62rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.dev-bypass-toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
}

.dev-bypass-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.65rem;
  color: #cbd5e1;
  font-weight: 500;
  user-select: none;
  transition: color 0.15s ease;
}

.dev-bypass-toggle-label:hover {
  color: #f8fafc;
}

.dev-bypass-checkbox {
  cursor: pointer;
  accent-color: #f59e0b;
  width: 13px;
  height: 13px;
  margin: 0;
}

.dev-bypass-chip {
  padding: 4px 8px;
  cursor: grab;
  touch-action: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
}

.dev-bypass-chip:active,
.dev-bypass-overlay.is-dragging .dev-bypass-chip {
  cursor: grabbing;
}

@media (min-width: 769px) {
  .panel-board .board-container-wrapper {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    position: relative;
    width: 100%;
    container-type: size;
    --board-size: min(600px, calc(100cqw - 24px), calc(100cqh - 24px));
  }

  .panel-board .board-container-wrapper:has(#board-top-stats:not([style*="display: none"])) {
    --board-size: min(600px, calc(100cqw - 24px), calc(100cqh - 60px));
  }

  .panel-board .board-container-wrapper:has(#board-mode-toggle-wrapper:not([style*="display: none"])) {
    --board-size: min(600px, calc(100cqw - 24px), calc(100cqh - 60px));
  }

  .panel-board .board-container-wrapper:has(#outbreak-codex-hud),
  .panel-board .board-container-wrapper:has(#board-grid.outbreak-active),
  .panel-board .board-container-wrapper:has(#board-grid.echo-active),
  .panel-board .board-container-wrapper:has(#board-grid.elkraf-active),
  .panel-board .board-container-wrapper:has(#board-grid.tunnel-active),
  .panel-board .board-container-wrapper:has(#board-grid.sonar-active),
  .panel-board .board-container-wrapper:has(#board-grid.swap-active),
  .panel-board .board-container-wrapper:has(#board-grid.avalanche-active),
  .panel-board .board-container-wrapper:has(.aperture-grid-container),
  .panel-board .board-container-wrapper:has(#board-grid.codex-active),
  .panel-board .board-container-wrapper:has(#board-grid.xword-active) {
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }

  .panel-board #board-grid,
  .panel-board #board-grid.codex-active,
  .panel-board #board-grid.outbreak-active,
  .panel-board #board-grid.echo-active,
  .panel-board #board-grid.xword-active,
  .panel-board #board-grid.tunnel-active,
  .panel-board #board-grid.sonar-active,
  .panel-board #board-grid.swap-active,
  .panel-board #board-grid.avalanche-active,
  .panel-board #board-grid.tumble-active,
  .panel-board #board-grid.catchya-active,
  .panel-board .echo-board-frame,
  .panel-board .board-arena-container,
  .panel-board .board-arena-frame,
  .panel-board .echo-arena-wrapper,
  .panel-board .aperture-grid-container,
  .panel-board .shutter-grid-container {
    margin: auto !important;
  }
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-size, 15), 1fr);
  grid-template-rows: repeat(var(--grid-size, 15), 1fr);
  gap: 2px;
  padding: 4px;
  background-color: #0d1017;
  border: 2px solid var(--bg-surface-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  aspect-ratio: 1 / 1;
  --board-desktop-size: clamp(200px, min(calc(var(--app-height, 100dvh) - 260px), 52vw, calc(var(--grid-size, 15) * 56px + 16px)), 800px);
  width: var(--board-desktop-size);
  height: var(--board-desktop-size);
  max-height: var(--board-desktop-size);
  max-width: var(--board-desktop-size);
  margin: auto;
  flex-shrink: 0;
  user-select: none;
  --cell-font-size: calc(var(--board-desktop-size) / var(--grid-size, 15) * 0.52);
  --cell-badge-size: calc(var(--board-desktop-size) / var(--grid-size, 15) * 0.26);
}

@media (max-width: 768px) {
  .board-grid {
    --board-mobile-size: min(390px, 94vw, 38vh);
    width: var(--board-mobile-size);
    height: var(--board-mobile-size);
    max-height: var(--board-mobile-size);
    max-width: var(--board-mobile-size);
    --cell-font-size: calc(var(--board-mobile-size) / var(--grid-size, 15) * 0.52);
    --cell-badge-size: calc(var(--board-mobile-size) / var(--grid-size, 15) * 0.26);
  }
}

@media (max-height: 720px), (max-width: 400px) {
  .board-grid {
    --board-mobile-size: min(220px, calc(100vw - 16px), calc(100dvh - 380px));
  }
}

.board-cell {
  background-color: #171b24;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Ensure child badges, letters, and SVG marks never steal pointer, dragover, or click events */
.board-cell * {
  pointer-events: none;
}

.board-cell:hover {
  filter: brightness(1.2);
}

body.has-selected-tile .board-cell:hover {
  outline: 2px dashed #38bdf8;
  filter: brightness(1.25);
  cursor: pointer;
}

/* Clue Card Selected Word Highlighting on Board */
.board-cell.cell-word-highlighted {
  outline: 3px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.85) !important;
  z-index: 12;
  animation: clueHighlightPulse 1.2s infinite alternate ease-in-out;
}

@keyframes clueHighlightPulse {
  from {
    outline-color: #0284c7;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  }
  to {
    outline-color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 1);
  }
}

.board-cell.cell-word-highlighted.focused,
.board-cell.cell-word-highlighted.cell-target-selected {
  outline: none !important;
  animation: none !important;
  z-index: 15 !important;
}

/* Player Placed Tile Highlighting */
.board-cell.cell-player-highlighted {
  outline: 3px solid var(--accent-gold, #f59e0b) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.85) !important;
  z-index: 11;
  animation: playerHighlightPulse 1.2s infinite alternate ease-in-out;
}

@keyframes playerHighlightPulse {
  from {
    outline-color: #d97706;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  }
  to {
    outline-color: #f59e0b;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.9);
  }
}

/* Multiplier Colors - Jeweled Prism Palette */
.board-cell.mult-2l {
  background: #082f49;
  border: 1px solid rgba(2, 132, 199, 0.45);
}
.board-cell.mult-3l {
  background: #064e3b;
  border: 1px solid rgba(5, 150, 105, 0.45);
}
.board-cell.mult-2w {
  background: #451a03;
  border: 1px solid rgba(217, 119, 6, 0.45);
}
.board-cell.mult-3w {
  background: #3b0764;
  border: 1px solid rgba(124, 58, 237, 0.45);
}
.board-cell.mult-star {
  background: #2e1065;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.board-cell.mult-2l .multiplier-badge { color: #38bdf8; }
.board-cell.mult-3l .multiplier-badge { color: #34d399; }
.board-cell.mult-2w .multiplier-badge { color: #fbbf24; }
.board-cell.mult-3w .multiplier-badge { color: #c084fc; }


/* Center Starting Cell & Icon */
.board-cell.cell-center-start {
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.18), #171b24 70%);
  border: 1px dashed rgba(245, 158, 11, 0.45);
}

.center-start-icon {
  width: 72%;
  height: 72%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
}

.center-start-mark {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transition: transform 0.2s ease;
}

.board-cell.cell-center-start:hover .center-start-mark {
  transform: scale(1.08);
}

/* Clash styles relocated to js/games/clash/clash.css */

.multiplier-badge {
  font-size: var(--cell-badge-size, clamp(0.55rem, 1.2vw, 0.75rem));
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.75);
}

.multiplier-badge.multiplier-badge-custom,
.multiplier-badge:has(svg) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.multiplier-badge.multiplier-badge-custom svg,
.multiplier-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Active Input Cursor */
.board-cell.cursor-active {
  outline: 3px solid var(--accent-gold);
  z-index: 10;
  box-shadow: 0 0 12px var(--accent-gold-glow);
}

/* Contextual Coordinate Badge on Clue Highlighted Cells */
.cell-coord-badge {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: clamp(0.48rem, 1.0vw, 0.66rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  background: rgba(2, 132, 199, 0.92);
  border-radius: 2px;
  padding: 1px 2px;
  letter-spacing: -0.3px;
  user-select: none;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Placed Letter Tiles */
.cell-letter {
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: var(--cell-font-size, clamp(0.85rem, 2.2vw, 1.45rem));
  line-height: 1;
}

/* Bottom-right corner point value on board tiles */
.cell-tile-value {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: clamp(0.52rem, 1.2vw, 0.72rem);
  line-height: 1;
  font-weight: 700;
  color: #000000;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}


.tile-placed.tile-mine .cell-tile-value {
  color: #000000 !important;
}

.tile-draft-dragged .cell-tile-value {
  color: #d97706 !important;
}

/* Bottom-left corner privacy indicator for secret letters and private fragments */
.cell-secret-badge {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: clamp(0.68rem, 1.3vw, 0.88rem);
  line-height: 1;
  font-weight: 900;
  color: #f59e0b;
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.9), 0 0 1px #000;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.cell-tile-purchased-badge ~ .cell-secret-badge,
.cell-secret-badge ~ .cell-tile-purchased-badge {
  left: 11px;
}

/* Heist badges relocated to js/games/heist/heist.css */
/* Open Revealed Tiles (100% Flat Porcelain Look) */
.tile-placed.tile-revealed {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

.tile-placed.tile-revealed .cell-letter {
  color: #090d16;
}

/* Placer's unrevealed/unguessed secret letters at match end */
.tile-placed.tile-ended-secret {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

.tile-placed.tile-ended-secret .cell-letter {
  color: #090d16;
}

.tile-placed.tile-ended-secret .cell-secret-badge {
  color: #b45309;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}


/* Placer's Own Secret Word */
.tile-placed.tile-mine {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border-bottom: 2px solid #0284c7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tile-placed.tile-mine .cell-letter {
  color: #0369a1;
}

/* Secret Masked Asterisk (*) Tile / REDACTED */
.tile-placed.tile-masked {
  background: linear-gradient(135deg, #181e29, #0d121a);
  border: 1px solid #334155;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(245, 158, 11, 0.12);
}

.tile-placed.tile-masked .cell-letter {
  color: var(--accent-gold);
  font-family: var(--font-mono);
  font-size: calc(var(--cell-font-size, clamp(1rem, 2.6vw, 1.8rem)) * 1.15);
  text-shadow: 0 0 8px var(--accent-gold-glow);
}

/* Guessed & Revealed Tile with DISTINCT BORDER */
.tile-placed.tile-revealed-guessed {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border: 3px solid #10b981 !important;
  outline: 2px solid #059669;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.tile-placed.tile-revealed-guessed .cell-letter {
  color: #065f46 !important;
}

/* When placer views their own word, guessed letters have distinct green border */
.tile-placed.tile-mine.tile-revealed-guessed {
  border: 3px solid #10b981 !important;
  outline: 2px solid #059669;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

/* Signals decrypt indicator relocated to js/games/signals/signals.css */
/* Newly Dragged Draft Tiles with DISTINCT ACTIVE BORDER until Enter */
.tile-placed.tile-draft-dragged {
  background: rgba(245, 158, 11, 0.3) !important;
  border: 3px dashed #f59e0b !important;
  box-shadow: 0 0 14px var(--accent-gold-glow) !important;
  animation: draftPulse 1s infinite alternate ease-in-out;
  cursor: pointer;
}

.tile-placed.tile-draft-dragged .cell-letter {
  color: #fbbf24 !important;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

.board-cell.drag-hover {
  background: rgba(245, 158, 11, 0.45) !important;
  outline: 3px solid #fbbf24 !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.8), inset 0 0 10px rgba(251, 191, 36, 0.5) !important;
  z-index: 20;
}

.board-cell.drag-hover-illegal {
  background: rgba(148, 163, 184, 0.35) !important;
  outline: 2px dashed #94a3b8 !important;
  border-color: #64748b !important;
  box-shadow: inset 0 0 10px rgba(100, 116, 139, 0.5) !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  z-index: 20;
}

/* Universal Hexagonal Board SVG Cell Drag Hover */
.hex-cell.drag-hover .hex-polygon {
  stroke: #38bdf8;
  stroke-width: 2.5px;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

/* Real-time Drag-and-Drop Tile Preview inside Cell */
.cell-drag-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 25;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(253, 230, 138, 0.92));
  border: 2px dashed #d97706;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7);
  animation: dragPreviewPulse 0.9s infinite alternate ease-in-out;
}

.cell-drag-preview .cell-letter {
  font-size: var(--cell-font-size, 1.35rem);
  font-weight: 900;
  color: #78350f;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  line-height: 1;
}

.cell-drag-preview .cell-tile-value {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #92400e;
}

.echo-emitter-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(30, 58, 138, 0.9);
  border: 2px solid #38bdf8;
  border-radius: 4px;
  color: #38bdf8;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
  z-index: 25;
  animation: dragPreviewPulse 0.9s infinite alternate ease-in-out;
}

.codex-tile-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(251, 191, 36, 0.3);
  border: 2px dashed #fbbf24;
  border-radius: 4px;
  color: #fbbf24;
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
  z-index: 25;
  animation: dragPreviewPulse 0.9s infinite alternate ease-in-out;
}

.aperture-tray-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(56, 189, 248, 0.25);
  border: 2px dashed #38bdf8;
  border-radius: 4px;
  color: #38bdf8;
  font-size: 1.2rem;
  font-weight: 800;
  z-index: 25;
  animation: dragPreviewPulse 0.9s infinite alternate ease-in-out;
}

@keyframes dragPreviewPulse {
  from {
    transform: scale(0.96);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }
  to {
    transform: scale(1.02);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.85);
  }
}

@keyframes draftPulse {
  from {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 0 6px var(--accent-gold-glow);
  }
  to {
    border-color: rgba(251, 191, 36, 1);
    box-shadow: 0 0 16px var(--accent-gold-glow);
  }
}

/* Blank Tile Designation States (Option A - Tap or Type) */
.tile-placed.tile-blank-pending {
  background: rgba(14, 165, 233, 0.25) !important;
  outline: 3px solid #38bdf8 !important;
  border: 2px dashed #0284c7 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8) !important;
  animation: blankPulse 0.8s infinite alternate ease-in-out !important;
}

@keyframes blankPulse {
  from {
    outline-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
  }
  to {
    outline-color: rgba(56, 189, 248, 1);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.9);
  }
}

.blank-prompt-chip {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: #0284c7;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.tile-blank-assigned .cell-letter {
  font-style: italic;
  opacity: 0.95;
}

.tile-blank-assigned .cell-tile-value {
  color: #94a3b8 !important;
  font-weight: 800;
}

.blank-designation-container {
  padding: 8px 12px;
}

/* Blank Designation Keyboard Vibration Animation */
@keyframes blankKeyboardVibrate {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-6px, -3px) rotate(-1.5deg); }
  20% { transform: translate(6px, 2px) rotate(1.5deg); }
  30% { transform: translate(-7px, 3px) rotate(-1.2deg); }
  40% { transform: translate(7px, -2px) rotate(1.2deg); }
  50% { transform: translate(-5px, 2px) rotate(-0.8deg); }
  60% { transform: translate(5px, -2px) rotate(0.8deg); }
  70% { transform: translate(-3px, 1px) rotate(-0.4deg); }
  80% { transform: translate(3px, -1px) rotate(0.4deg); }
  90% { transform: translate(-1px, 1px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes blankGlowPulse {
  0% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }
  25% {
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.85), 0 0 45px rgba(245, 158, 11, 0.5);
  }
  50% {
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
  }
  75% {
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.75), 0 0 35px rgba(245, 158, 11, 0.4);
  }
  100% {
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
  }
}

.blank-designation-container.keyboard-vibrate {
  animation: blankKeyboardVibrate 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
             blankGlowPulse 1.2s ease-in-out both;
  will-change: transform;
}

.blank-designation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  margin-bottom: 8px;
}

.blank-designation-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blank-designation-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #38bdf8;
}

.blank-designation-sub {
  font-size: 0.75rem;
  color: #cbd5e1;
}

.blank-designate-key {
  cursor: pointer;
  transition: transform 0.1s, background-color 0.15s;
}

.blank-designate-key:hover {
  transform: translateY(-2px);
  background-color: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
}

/* Wrong Guess Feedback (Red Flash & Shake Animation) */
.tile-placed.tile-guess-wrong {
  background: linear-gradient(135deg, #fecaca, #f87171) !important;
  border: 3px solid #ef4444 !important;
  outline: 2px solid #b91c1c !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.9) !important;
  animation: shakeWrong 0.6s ease-in-out !important;
  z-index: 25;
}

.tile-placed.tile-guess-wrong .cell-letter {
  color: #7f1d1d !important;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(127, 29, 29, 0.5);
}

@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-4px) rotate(-1.5deg); }
  30%, 60%, 85% { transform: translateX(4px) rotate(1.5deg); }
}

.cell-shake-error {
  animation: shakeWrong 0.4s ease-in-out !important;
}

/* Discovered Clue / Foothold Scouted Feedback (Emerald Golden Pulse) */
.tile-placed.tile-guess-enhanced {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border: 3px solid #34d399 !important;
  outline: 2px solid #047857 !important;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.9) !important;
  animation: popSuccess 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 25;
}

.tile-placed.tile-guess-enhanced .cell-letter {
  color: #ffffff !important;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(5, 150, 105, 0.8);
}

@keyframes popSuccess {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.15) rotate(1deg); }
  100% { transform: scale(1); }
}

/* Seed Word Tiles (Uncross: Branches) */
.tile-placed.seed-tile {
  background: linear-gradient(135deg, #064e3b, #047857) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

.tile-placed.seed-tile .cell-letter {
  color: #ecfdf5 !important;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.tile-placed.seed-tile .cell-tile-value {
  color: #a7f3d0 !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* Translucent Ghost Tiles (Legacy styling fallback) */
.tile-placed.ghost-tile {
  opacity: 0.78 !important;
  background: rgba(245, 158, 11, 0.22) !important;
  border: 2px dashed #fbbf24 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
  animation: ghostShimmer 2s infinite alternate ease-in-out;
}

.tile-placed.ghost-tile .cell-letter {
  color: #fbbf24 !important;
  font-weight: 900;
  font-style: italic;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}

.tile-placed.ghost-tile .cell-tile-value {
  color: #fde68a !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

@keyframes ghostShimmer {
  from { opacity: 0.55; }
  to { opacity: 0.82; }
}

/* Purchased Vowel Tiles (Solid regular tile look for the buyer with $ badge and net score value) */
.tile-placed.tile-purchased-buyer {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border: 1px solid #d97706 !important;
  border-bottom: 2px solid #b45309 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
  animation: none !important;
}

.tile-placed.tile-purchased-buyer .cell-letter {
  color: #1c1917 !important;
  font-style: normal !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Small $ sign in bottom-left corner for purchased tiles */
.cell-tile-purchased-badge {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: clamp(0.55rem, 1.3vw, 0.75rem);
  line-height: 1;
  font-weight: 900;
  color: #15803d; /* bold emerald green $ */
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

/* Net tile score deduction (lower-right number: tile value - purchase price) */
.cell-tile-value.cell-tile-net-value {
  color: #b91c1c !important; /* red-700 to indicate net deduction */
  font-weight: 900 !important;
}

/* Dig board styles relocated to js/games/dig/dig.css */

/* Branches styles relocated to js/games/branches/branches.css */

/* Heist loot styles relocated to js/games/heist/heist.css */

/* Branches grafted styles relocated to js/games/branches/branches.css */

/* Outbreak board styles relocated to js/games/outbreak/outbreak.css */

/* --- Universal Bot Visual Feedback Wave Animations (CROSS_GAME_SPEC.md 3.1) --- */

/* Outbreak pulse relocated to js/games/outbreak/outbreak.css */

/* Summit pulse relocated to js/games/summit/summit.css */

/* Branches pulse relocated to js/games/branches/branches.css */

/* Tile Flip & Reveal Animation for Deductions & Vowel Unsealing */
@keyframes tileFlipReveal {
  0% {
    transform: rotateY(0deg) scale(1);
    box-shadow: 0 0 0 rgba(45, 212, 191, 0);
  }
  50% {
    transform: rotateY(90deg) scale(1.15);
    background-color: #0f766e;
    box-shadow: 0 0 25px rgba(45, 212, 191, 0.9);
  }
  100% {
    transform: rotateY(0deg) scale(1);
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.6);
    border-color: #2dd4bf;
  }
}
.board-cell.cell-reveal-flip {
  animation: tileFlipReveal 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  z-index: 16 !important;
}

/* Pass / Stalled Energy Cooldown */
@keyframes passCooldownPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    transform: scale(0.96);
    opacity: 0.6;
    filter: brightness(0.7) grayscale(0.8);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}
.board-cell.cell-pass-cooldown {
  animation: passCooldownPulse 1.2s ease-in-out forwards !important;
}

/* Game Arena Panel Turn Transition Shake (Tactile Recoil) */
@keyframes panelTurnShake {
  0% { transform: translateX(0); }
  18% { transform: translateX(-4px); }
  36% { transform: translateX(4px); }
  54% { transform: translateX(-3px); }
  72% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
.panel-turn-shake {
  animation: panelTurnShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media (prefers-reduced-motion: reduce) {
  .panel-turn-shake {
    animation: none !important;
  }
  .board-cell.cell-bot-pulse-outbreak,
  .board-cell.cell-bot-pulse-standard,
  .board-cell.cell-bot-pulse-summit,
  .board-cell.cell-bot-pulse-branches {
    animation-duration: 0.01ms !important;
  }
}

.sanctum-shield-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(15, 23, 42, 0.85);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #f59e0b;
  z-index: 5;
  line-height: 1.1;
  pointer-events: none;
}

.cell-infection-badge {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  color: #ec4899;
  text-shadow: 0 0 4px #a855f7;
  z-index: 5;
  line-height: 1;
  pointer-events: none;
  animation: pulse-infection 1.6s infinite ease-in-out;
}

@keyframes pulse-infection {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.25);
    opacity: 0.75;
  }
}

.outbreak-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 6px auto;
  max-width: 600px;
  font-size: 0.85rem;
  color: #f1f5f9;
}

.outbreak-status-bar .status-metric {
  display: flex;
  align-items: center;
  gap: 5px;
}

.outbreak-status-bar .metric-val {
  font-weight: 700;
  color: #38bdf8;
}

.outbreak-status-bar .metric-val.gold {
  color: #fbbf24;
}

.outbreak-status-bar .metric-val.purple {
  color: #c084fc;
}

/* Aperture/Shutter board styles relocated to js/games/aperture/aperture.css */

/* Codex manuscript styles relocated to js/games/codex/codex.css */

/* ==========================================================================
   FIRST USER OF THE DAY (>2.0s) THEMATIC LOADING NOTICE
   ========================================================================== */

.first-user-notice-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  animation: fadeInNotice 0.25s ease forwards;
}

.first-user-notice-backdrop.fade-out {
  animation: fadeOutNotice 0.22s ease forwards;
}

@keyframes fadeInNotice {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOutNotice {
  from { opacity: 1; }
  to { opacity: 0; }
}

.first-user-notice-card {
  background: #1e1b18;
  border: 2px solid #b45309;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(180, 83, 9, 0.25);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  color: #f3f4f6;
}

.first-user-notice-card.aperture-theme {
  border-color: #38bdf8;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25);
}

.first-user-notice-icon-spinner {
  font-size: 2.8rem;
  margin-bottom: 8px;
  display: inline-block;
  animation: noticePulse 1.4s ease-in-out infinite;
}

@keyframes noticePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1); }
}

.first-user-notice-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 6px 0 10px;
  color: #fbbf24;
}

.first-user-notice-card.aperture-theme .first-user-notice-title {
  color: #38bdf8;
}

.first-user-notice-message {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #e5e7eb;
  margin-bottom: 12px;
}

.first-user-notice-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

.notice-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f9fafb;
}

.first-user-notice-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.first-user-notice-progress-bar .progress-indeterminate {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #b45309, #fbbf24, #b45309);
  border-radius: 2px;
  animation: indeterminateSlide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.first-user-notice-card.aperture-theme .first-user-notice-progress-bar .progress-indeterminate {
  background: linear-gradient(90deg, #0284c7, #38bdf8, #0284c7);
}

@keyframes indeterminateSlide {
  0% { left: -40%; width: 30%; }
  50% { left: 35%; width: 50%; }
  100% { left: 100%; width: 30%; }
}

/* Echo sonar styles relocated to js/games/echo/echo.css */

/* Whiteboard & Activity Catalog styles relocated to js/games/whiteboard/whiteboard.css */
.board-grid.hangout-board-grid.is-hidden,
.hangout-board-grid.is-hidden,
.hangout-board-grid[style*="display: none"] {
  display: none !important;
}

.board-grid.hangout-board-grid:not(.is-hidden):not([style*="display: none"]),
.hangout-board-grid:not(.is-hidden):not([style*="display: none"]) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Generic Hexagonal Board Grid Surface (First-Class Hex Surface)
   Canonical: OUTBREAK_SPEC.md & GEMINI.md § 2.4 (Zero !important)
   ========================================================================== */
.hex-board-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 860px;
  height: 100%;
  margin: 0 auto;
  flex-shrink: 0;
  user-select: none;
  box-sizing: border-box;
}

.hex-board-grid.is-hidden,
.hex-board-grid[style*="display: none"] {
  display: none;
}

.hex-board-grid .board-top-stats {
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 8px auto;
  padding: 0 4px;
  user-select: none;
  flex-shrink: 0;
}

.hex-board-grid .hex-board-viewport {
  position: relative;
  width: 100%;
  max-width: min(580px, calc(var(--app-height, 100dvh) - 260px), 94vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hex-board-grid .hex-grid-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65));
}


/* ==========================================================================
   XWORD CROSSWORD ARENA
   ========================================================================== */

#board-grid.xword-active {
  /* Inherits canonical .board-grid background, borders, aspect-ratio, padding, and responsive dimensions */
  margin: 0 auto;
  grid-template-columns: repeat(var(--grid-size, var(--xword-cols, 7)), 1fr);
  grid-template-rows: repeat(var(--grid-size, var(--xword-rows, 7)), 1fr);
  gap: 2.5px;
  padding: 4px;
  background: #0d121f;
  border: 2px solid #334155;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  --cell-font-size: clamp(0.80rem, calc(var(--board-size, 320px) / var(--grid-size, 7) * 0.50), 1.35rem);
  --cell-badge-size: clamp(0.45rem, calc(var(--board-size, 320px) / var(--grid-size, 7) * 0.22), 0.65rem);
}

/* Canonical XWord Game Panel Layout: Unified Background & Vertical Centering Pair (CROSS_GAME_SPEC § 2.11, prototypes/xword_prototype.html) */
.panel-board.is-hidden {
  display: none !important;
}

.panel-board:not(.is-hidden):has(#board-grid.xword-active),
.panel-board:not(.is-hidden):has(#board-grid.codex-active),
.panel-board:not(.is-hidden):has(#board-grid.echo-active),
.panel-board:not(.is-hidden):has(#board-grid.outbreak-active),
.panel-board:not(.is-hidden):has(#hex-board-grid:not([style*="display: none"])),
.panel-board:not(.is-hidden):has(.hex-board-grid.outbreak-active),
.panel-board:not(.is-hidden):has(#board-grid.summit-active),
.panel-board:not(.is-hidden):has(#board-grid.clash-active),
.panel-board:not(.is-hidden):has(#board-grid.dig-active),
.panel-board:not(.is-hidden):has(#board-grid.branches-active),
.panel-board:not(.is-hidden):has(#board-grid.heist-active),
.panel-board:not(.is-hidden):has(#board-grid.signals-active),
.panel-board:not(.is-hidden):has(#board-grid.swap-active),
.panel-board:not(.is-hidden):has(#board-grid.tumble-active),
.panel-board:not(.is-hidden):has(#board-grid.tunnel-active),
.panel-board:not(.is-hidden):has(#board-grid.sonar-active),
.panel-board:not(.is-hidden):has(#board-grid.avalanche-active),
.panel-board:not(.is-hidden):has(#board-grid.catchya-active) {
  background: var(--bg-card, #0f172a) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  --board-size: var(--board-desktop-size, clamp(200px, min(calc(100vw - 16px), calc(100dvh - 320px), 440px), 440px));
}

.panel-board:not(.is-hidden):has(#board-grid.aperture-active),
.panel-board:not(.is-hidden):has(#board-grid.elkraf-active) {
  background: var(--bg-card, #0f172a) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.panel-board:has(#board-grid.xword-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.codex-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.echo-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.outbreak-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#hex-board-grid:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(.hex-board-grid.outbreak-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.summit-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.clash-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.dig-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.branches-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.heist-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.signals-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.sonar-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.tunnel-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper {
  background-color: transparent !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: var(--board-size) !important;
  padding: 0 !important;
  margin: auto auto 0 auto !important; /* Auto margin top centers the (board + keyboard) pair vertically */
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kinetic & Dice Games Canonical Integrated Arena Framing (§CROSS_GAME_SPEC §2.10)
 * Pairs the shrink-wrapped board container directly above #control-card with zero bottom auto-margin
 * so the (board + virtual keyboard) pair centers vertically as a cohesive unit without excess whitespace between them.
 */
.panel-board:has(#board-grid.catchya-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.avalanche-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.tumble-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board:has(#board-grid.swap-active:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper {
  container-type: normal !important;
  background-color: transparent !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: auto auto 0 auto !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Universal Match Startup Gating Board Centering (§CROSS_GAME_SPEC §2.10)
 * When controls (#control-card) are hidden during AD_PLAYING, GO_GATE, ALREADY_PLAYED,
 * or YESTERDAY_REVIEW, .board-container-wrapper is the sole child in .game-panel-zoom-wrapper.
 * Replacing 'margin: auto auto 0 auto' with 'margin: auto' perfectly centers the board
 * and active overlays both vertically and horizontally in the game panel.
 */
#panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) #game-panel-zoom-wrapper .board-container-wrapper,
#panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) .board-container-wrapper,
.panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) #game-panel-zoom-wrapper .board-container-wrapper,
.panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) .board-container-wrapper {
  margin: auto !important;
}

/* Universal Match Startup Gating: Hide auxiliary telemetry and controls for kinetic/dice games (§CROSS_GAME_SPEC §2.10)
 * Ensures only the primary playable grid is visible under the ad and Go overlays, eliminating text leaks and awkward gaps.
 */
#panel-board:is([data-startup-state="ad"], [data-startup-state="go"]) :is(
  .avalanche-top-stats,
  .avalanche-peak-banner,
  .board-bottom-controls,
  .tumble-board-top-stats,
  #board-tray-controls,
  #tumble-action-toolbar,
  #tumble-anchor-card,
  .tumble-integrated-controls,
  .catchya-top-stats,
  .catchya-target-banner,
  .catchya-actions-box,
  .swap-board-top-stats,
  .target-meter,
  .sum-badge,
  .swap-actions-row,
  .swap-instructions-banner
),
.panel-board:is([data-startup-state="ad"], [data-startup-state="go"]) :is(
  .avalanche-top-stats,
  .avalanche-peak-banner,
  .board-bottom-controls,
  .tumble-board-top-stats,
  #board-tray-controls,
  #tumble-action-toolbar,
  #tumble-anchor-card,
  .tumble-integrated-controls,
  .catchya-top-stats,
  .catchya-target-banner,
  .catchya-actions-box,
  .swap-board-top-stats,
  .target-meter,
  .sum-badge,
  .swap-actions-row,
  .swap-instructions-banner
) {
  display: none !important;
}

/* CatchYa & Swap board wrappers: see js/games/catchya/catchya.css, swap.css */


/* Hangout Activity & Utility Workspace Full-Height Surface Integration */
.panel-board:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper,
.panel-board .board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])),
.board-container-wrapper:has(.hangout-board-grid:not(.is-hidden):not([style*="display: none"])) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100% - var(--game-title-bar-height, 36px)) !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
}

.panel-board:has(#board-grid.xword-active) .board-arena-frame,
.panel-board:has(#board-grid.xword-active) #board-grid.xword-active,
.panel-board:has(#board-grid.codex-active) #board-grid.codex-active,
.panel-board:has(#board-grid.echo-active) #board-grid.echo-active,
.panel-board:has(#board-grid.outbreak-active) #board-grid.outbreak-active,
.panel-board:has(#board-grid.summit-active) #board-grid.summit-active,
.panel-board:has(#board-grid.clash-active) #board-grid.clash-active,
.panel-board:has(#board-grid.dig-active) #board-grid.dig-active,
.panel-board:has(#board-grid.branches-active) #board-grid.branches-active,
.panel-board:has(#board-grid.heist-active) #board-grid.heist-active,
.panel-board:has(#board-grid.signals-active) #board-grid.signals-active,
.panel-board:has(#board-grid.tunnel-active) #board-grid.tunnel-active,
.panel-board:has(#board-grid.sonar-active) #board-grid.sonar-active {
  width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  height: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  max-height: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  margin: 0 auto !important;
}

.panel-board:has(#board-grid.xword-active) .board-arena-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden !important;
  border-radius: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.panel-board:has(#board-grid.xword-active) .board-arena-frame #board-grid.xword-active {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
}

.panel-board:has(#board-grid.avalanche-active) #board-grid.avalanche-active {
  width: 100% !important;
  height: auto !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.panel-board:has(#board-grid.xword-active) .control-card,
.panel-board:has(#board-grid.xword-active) .keyboard-tray-section,
.panel-board:has(#board-grid.codex-active) .control-card,
.panel-board:has(#board-grid.codex-active) .keyboard-tray-section,
.panel-board:has(#board-grid.echo-active) .control-card,
.panel-board:has(#board-grid.echo-active) .keyboard-tray-section,
.panel-board:has(#board-grid.outbreak-active) .control-card,
.panel-board:has(#board-grid.outbreak-active) .keyboard-tray-section,
.panel-board:has(#hex-board-grid:not([style*="display: none"])) .control-card,
.panel-board:has(#hex-board-grid:not([style*="display: none"])) .keyboard-tray-section,
.panel-board:has(.hex-board-grid.outbreak-active) .control-card,
.panel-board:has(.hex-board-grid.outbreak-active) .keyboard-tray-section,
.panel-board:has(#board-grid.summit-active) .control-card,
.panel-board:has(#board-grid.summit-active) .keyboard-tray-section,
.panel-board:has(#board-grid.clash-active) .control-card,
.panel-board:has(#board-grid.clash-active) .keyboard-tray-section,
.panel-board:has(#board-grid.dig-active) .control-card,
.panel-board:has(#board-grid.dig-active) .keyboard-tray-section,
.panel-board:has(#board-grid.branches-active) .control-card,
.panel-board:has(#board-grid.branches-active) .keyboard-tray-section,
.panel-board:has(#board-grid.heist-active) .control-card,
.panel-board:has(#board-grid.heist-active) .keyboard-tray-section,
.panel-board:has(#board-grid.signals-active) .control-card,
.panel-board:has(#board-grid.signals-active) .keyboard-tray-section,
.panel-board:has(#board-grid.tunnel-active) .control-card,
.panel-board:has(#board-grid.sonar-active) .control-card,
.panel-board:has(#board-grid.sonar-active) .keyboard-tray-section,
.panel-board:has(#board-grid.tunnel-active) .keyboard-tray-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px auto auto auto !important; /* 12px gap from board, auto margin bottom balances top */
  width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  flex-shrink: 0 !important;
}

/* Kinetic & Card Games: Unified #control-card framing during play and on game over */
.panel-board:has(#board-grid.catchya-active):not(:has(.game-over-bottom-panel)) .control-card,
.panel-board:has(#board-grid.catchya-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section,
.panel-board:has(#board-grid.avalanche-active):not(:has(.game-over-bottom-panel)) .control-card,
.panel-board:has(#board-grid.avalanche-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section,
.panel-board:has(#board-grid.tumble-active):not(:has(.game-over-bottom-panel)) .control-card,
.panel-board:has(#board-grid.tumble-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section,
.panel-board:has(#board-grid.swap-active):not(:has(.game-over-bottom-panel)) .control-card,
.panel-board:has(#board-grid.swap-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section,
.panel-board:has(#board-grid.rummy500-active):not(:has(.game-over-bottom-panel)) .control-card,
.panel-board:has(#board-grid.rummy500-active):not(:has(.game-over-bottom-panel)) .keyboard-tray-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px auto auto auto !important;
  width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  flex-shrink: 0 !important;
}

.panel-board:has(#board-grid.avalanche-active):has(.game-over-bottom-panel) .control-card,
.panel-board:has(#board-grid.avalanche-active):has(.game-over-bottom-panel) .keyboard-tray-section,
.panel-board:has(#board-grid.swap-active):has(.game-over-bottom-panel) .control-card,
.panel-board:has(#board-grid.swap-active):has(.game-over-bottom-panel) .keyboard-tray-section,
.panel-board:has(#board-grid.tumble-active):has(.game-over-bottom-panel) .control-card,
.panel-board:has(#board-grid.tumble-active):has(.game-over-bottom-panel) .keyboard-tray-section,
.panel-board:has(#board-grid.catchya-active):has(.game-over-bottom-panel) .control-card,
.panel-board:has(#board-grid.catchya-active):has(.game-over-bottom-panel) .keyboard-tray-section,
.panel-board:has(.game-over-bottom-panel) .control-card,
.panel-board:has(.game-over-bottom-panel) .keyboard-tray-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 4px auto auto auto !important;
  width: min(620px, 94vw) !important;
  max-width: min(620px, 94vw) !important;
  flex-shrink: 0 !important;
}

/* Aperture: Shallow slat track strip (~140px) paired closely with controls */
.panel-board:has(#board-grid.aperture-active) .board-container-wrapper {
  background-color: transparent !important;
  flex: 0 0 auto !important;
  container-type: normal !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 180px !important;
  padding: 4px 0 !important;
  margin: auto auto 0 auto !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.panel-board:has(#board-grid.aperture-active) #board-grid.aperture-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 auto !important;
}

.panel-board:has(#board-grid.aperture-active) .control-card,
.panel-board:has(#board-grid.aperture-active) .keyboard-tray-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px auto auto auto !important;
  width: 100% !important;
  max-width: 520px !important;
  flex-shrink: 0 !important;
}

.panel-board:has(#board-grid.xword-active) .yesterday-control-card,
.panel-board:has(#board-grid.codex-active) .yesterday-control-card,
.panel-board:has(#board-grid.echo-active) .yesterday-control-card {
  margin: 12px auto auto auto !important;
  width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  max-width: var(--board-size, min(var(--board-desktop-size, 400px), 94vw)) !important;
  flex-shrink: 0 !important;
}

.panel-board:has(#board-grid.aperture-active) .yesterday-control-card {
  margin: 12px auto auto auto !important;
  width: 100% !important;
  max-width: 520px !important;
  flex-shrink: 0 !important;
}

/* Elkraf: Degrading rack & action buttons paired with cascade */
.panel-board:has(#board-grid.elkraf-active) .board-container-wrapper {
  background-color: transparent !important;
  flex: 0 0 auto !important;
  container-type: normal !important;
  overflow: visible !important;
  height: auto !important;
  padding: 4px 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 920px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.panel-board:has(#board-grid.elkraf-active) .control-card,
.panel-board:has(#board-grid.elkraf-active) .keyboard-tray-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 12px auto auto auto !important;
  width: 100% !important;
  max-width: 920px !important;
  flex-shrink: 0 !important;
}

.panel-board:has(#board-grid.elkraf-active) .yesterday-control-card {
  margin: 12px auto auto auto !important;
  width: 100% !important;
  max-width: 920px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .panel-board:has(#board-grid.xword-active),
  .panel-board:has(#board-grid.codex-active),
  .panel-board:has(#board-grid.echo-active),
  .panel-board:has(#board-grid.aperture-active),
  .panel-board:has(#board-grid.elkraf-active),
  .panel-board:has(#board-grid.outbreak-active),
  .panel-board:has(#hex-board-grid:not([style*="display: none"])),
  .panel-board:has(.hex-board-grid.outbreak-active),
  .panel-board:has(#board-grid.summit-active),
  .panel-board:has(#board-grid.clash-active),
  .panel-board:has(#board-grid.dig-active),
  .panel-board:has(#board-grid.branches-active),
  .panel-board:has(#board-grid.heist-active),
  .panel-board:has(#board-grid.signals-active),
  .panel-board:has(#board-grid.swap-active),
  .panel-board:has(#board-grid.tumble-active),
  .panel-board:has(#board-grid.tunnel-active),
  .panel-board:has(#board-grid.sonar-active),
  .panel-board:has(#board-grid.avalanche-active),
  .panel-board:has(#board-grid.catchya-active) {
    overflow-y: auto !important;
  }
  .panel-board:has(#board-grid.xword-active) .board-container-wrapper,
  .panel-board:has(#board-grid.codex-active) .board-container-wrapper,
  .panel-board:has(#board-grid.echo-active) .board-container-wrapper,
  .panel-board:has(#board-grid.aperture-active) .board-container-wrapper,
  .panel-board:has(#board-grid.elkraf-active) .board-container-wrapper,
  .panel-board:has(#board-grid.outbreak-active) .board-container-wrapper,
  .panel-board:has(#hex-board-grid:not([style*="display: none"])) .board-container-wrapper,
  .panel-board:has(.hex-board-grid.outbreak-active) .board-container-wrapper,
  .panel-board:has(#board-grid.summit-active) .board-container-wrapper,
  .panel-board:has(#board-grid.clash-active) .board-container-wrapper,
  .panel-board:has(#board-grid.dig-active) .board-container-wrapper,
  .panel-board:has(#board-grid.branches-active) .board-container-wrapper,
  .panel-board:has(#board-grid.heist-active) .board-container-wrapper,
  .panel-board:has(#board-grid.signals-active) .board-container-wrapper,
  .panel-board:has(#board-grid.tunnel-active) .board-container-wrapper,
  .panel-board:has(#board-grid.sonar-active) .board-container-wrapper,
  .panel-board:has(#board-grid.catchya-active) .board-container-wrapper,
  .panel-board:has(#board-grid.avalanche-active) .board-container-wrapper,
  .panel-board:has(#board-grid.tumble-active) .board-container-wrapper,
  .panel-board:has(#board-grid.swap-active) .board-container-wrapper,
  .panel-board:has(#board-grid:not(.is-hidden):not([style*="display: none"])) .board-container-wrapper {
    margin: 2px auto 0 auto !important;
  }
  #panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) #game-panel-zoom-wrapper .board-container-wrapper,
  #panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) .board-container-wrapper,
  .panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) #game-panel-zoom-wrapper .board-container-wrapper,
  .panel-board:is([data-startup-state="ad"], [data-startup-state="go"], [data-startup-state="already-played"], [data-startup-state="yesterday"]) .board-container-wrapper {
    margin: auto !important;
  }
  .panel-board:has(#board-grid.xword-active) .control-card,
  .panel-board:has(#board-grid.xword-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.codex-active) .control-card,
  .panel-board:has(#board-grid.codex-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.echo-active) .control-card,
  .panel-board:has(#board-grid.echo-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.aperture-active) .control-card,
  .panel-board:has(#board-grid.aperture-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.elkraf-active) .control-card,
  .panel-board:has(#board-grid.elkraf-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.outbreak-active) .control-card,
  .panel-board:has(#board-grid.outbreak-active) .keyboard-tray-section,
  .panel-board:has(#hex-board-grid:not([style*="display: none"])) .control-card,
  .panel-board:has(#hex-board-grid:not([style*="display: none"])) .keyboard-tray-section,
  .panel-board:has(.hex-board-grid.outbreak-active) .control-card,
  .panel-board:has(.hex-board-grid.outbreak-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.summit-active) .control-card,
  .panel-board:has(#board-grid.summit-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.clash-active) .control-card,
  .panel-board:has(#board-grid.clash-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.dig-active) .control-card,
  .panel-board:has(#board-grid.dig-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.branches-active) .control-card,
  .panel-board:has(#board-grid.branches-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.heist-active) .control-card,
  .panel-board:has(#board-grid.heist-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.signals-active) .control-card,
  .panel-board:has(#board-grid.signals-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.tunnel-active) .control-card,
  .panel-board:has(#board-grid.tunnel-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.sonar-active) .control-card,
  .panel-board:has(#board-grid.sonar-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.catchya-active) .control-card,
  .panel-board:has(#board-grid.catchya-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.avalanche-active) .control-card,
  .panel-board:has(#board-grid.avalanche-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.tumble-active) .control-card,
  .panel-board:has(#board-grid.tumble-active) .keyboard-tray-section,
  .panel-board:has(#board-grid.swap-active) .control-card,
  .panel-board:has(#board-grid.swap-active) .keyboard-tray-section {
    margin: 2px auto !important;
    width: min(calc(100vw - 8px), 440px) !important;
    max-width: min(calc(100vw - 8px), 440px) !important;
    padding: 2px clamp(3px, 1.2vw, 6px) !important;
    box-sizing: border-box !important;
  }
}


.board-cell.xword-cell-block,
body[data-game-theme^="xword"] .board-cell.cell-block,
body[data-game-theme="xword"] .board-cell.cell-block {
  background-color: #000000 !important;
  background: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
  pointer-events: none;
}

.board-cell.xword-cell {
  position: relative;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: background 0.12s ease, border-color 0.12s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.board-cell.xword-cell.focused {
  background: #78350f !important;
  border: 2.5px solid #fbbf24 !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  z-index: 5;
}

.board-cell.xword-cell.in-active-word:not(.focused) {
  background: #24334a !important;
  border-color: #3b82f6 !important;
}

.board-cell.xword-cell .cell-letter,
.board-cell.xword-cell .xword-cell-letter {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-weight: 800;
  font-size: var(--cell-font-size, clamp(12px, 3.5vw, 22px));
  line-height: 1;
  color: #0f172a;
  text-transform: uppercase;
  pointer-events: none;
}

.board-cell.xword-cell .cell-letter.is-draft,
.board-cell.xword-cell .xword-cell-letter.is-draft {
  font-style: italic;
  color: #93c5fd;
}

.board-cell.xword-cell-tile.cell-drafted {
  border-color: #3b82f6;
}

.board-cell.xword-cell-tile.cell-drafted .xword-cell-letter {
  font-style: italic;
  color: #2563eb;
}

@media (prefers-color-scheme: dark) {
  .board-cell.xword-cell .cell-letter,
  .board-cell.xword-cell .xword-cell-letter {
    color: #f8fafc;
  }
  .board-cell.xword-cell-tile.cell-drafted {
    border-color: #60a5fa;
  }
  .board-cell.xword-cell-tile.cell-drafted .xword-cell-letter {
    color: #93c5fd;
  }
}

.xword-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

.xword-actions-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

.btn-xword-enter {
  flex: 1;
  max-width: 220px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-xword-enter:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

.btn-xword-enter:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

.board-cell.xword-cell-tile {
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  .board-cell.xword-cell-tile {
    background-color: #1e293b;
    border-color: #334155;
    color: #f8fafc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}

.board-cell.xword-cell-tile:hover {
  filter: brightness(1.15);
  border-color: #d97706;
}

.board-cell.xword-cell-tile.focused,
.board-cell.cell-target-selected,
.board-cell.codex-cell-tile.focused {
  background-color: #fef08a !important;
  border: 2.5px solid #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 5 !important;
  color: #0f172a !important;
}

.board-cell.xword-cell-tile.focused .xword-cell-letter,
.board-cell.cell-target-selected .cell-letter,
.board-cell.codex-cell-tile.focused .cell-letter {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.board-cell.xword-cell-tile.in-active-word:not(.focused) {
  background-color: #e0f2fe !important;
  border-color: #93c5fd !important;
  box-shadow: none !important;
  animation: none !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.xword-cell-tile.focused,
  .board-cell.cell-target-selected,
  .board-cell.codex-cell-tile.focused {
    background-color: #78350f !important;
    border: 2.5px solid #fbbf24 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
    color: #fef3c7 !important;
  }

  .board-cell.xword-cell-tile.focused .xword-cell-letter,
  .board-cell.cell-target-selected .cell-letter,
  .board-cell.codex-cell-tile.focused .cell-letter {
    color: #fef3c7 !important;
    font-weight: 800 !important;
  }

  .board-cell.xword-cell-tile.in-active-word:not(.focused) {
    background-color: #24334a !important;
    border-color: #3b82f6 !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

.board-cell.xword-cell-tile.in-active-word.focused {
  background-color: #fef08a !important;
  border: 2.5px solid #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 5 !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.xword-cell-tile.in-active-word.focused {
    background-color: #78350f !important;
    border: 2.5px solid #fbbf24 !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
    z-index: 5 !important;
  }
}

.board-cell.xword-cell-tile.drag-hover {
  border: 2px dashed #d97706 !important;
  background-color: #fef3c7 !important;
}

@media (prefers-color-scheme: dark) {
  .board-cell.xword-cell-tile.drag-hover {
    background-color: #3e3218 !important;
    border-color: #eab308 !important;
  }
}

.xword-tile-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tile, 'Lora', Georgia, serif);
  font-size: var(--cell-font-size, clamp(1rem, 2.5vw, 1.6rem));
  font-weight: 700;
  color: #f59e0b;
  opacity: 0.75;
  pointer-events: none;
  z-index: 4;
}

.board-cell.xword-cell-tile.cell-claimed-local {
  border: 2px solid #00f0ff !important;
  box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.4) !important;
}

.board-cell.xword-cell-tile.cell-claimed-bot {
  border: 2px solid #ff3366 !important;
  box-shadow: inset 0 0 8px rgba(255, 51, 102, 0.4) !important;
}

.xword-cell-num {
  position: absolute;
  top: 1.5px;
  left: 2.5px;
  font-size: var(--cell-badge-size, clamp(7px, 1.4vw, 10px));
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  pointer-events: none;
  z-index: 3;
}

@media (prefers-color-scheme: dark) {
  .xword-cell-num {
    color: #94a3b8;
  }
}

.xword-cell-speaker-badge {
  position: absolute;
  top: 1.5px;
  right: 2.5px;
  font-size: var(--cell-badge-size, clamp(7px, 1.4vw, 10px));
  line-height: 1;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  transition: transform 0.15s ease, color 0.15s ease;
}

.xword-cell-speaker-badge svg {
  display: block;
}

.xword-cell-speaker-badge.is-speaking {
  color: #f59e0b;
  animation: pulseSpeaker 1s infinite alternate ease-in-out;
}

@keyframes pulseSpeaker {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #f59e0b); }
  100% { transform: scale(1.25); filter: drop-shadow(0 0 6px #f59e0b); }
}

.xword-cell-letter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-weight: 800;
  font-size: var(--cell-font-size, clamp(14px, 3.5vw, 24px));
  line-height: 1;
  text-transform: uppercase;
  z-index: 2;
}

.xword-cell-chevron,
.codex-cell-chevron,
.tunnel-cell-chevron,
.grid-cell-chevron {
  position: absolute;
  pointer-events: none;
  font-size: clamp(7px, 1.4vw, 10px);
  line-height: 1;
  color: #d97706;
  z-index: 4;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.xword-cell-chevron.chevron-across,
.codex-cell-chevron.chevron-across,
.tunnel-cell-chevron.chevron-across,
.grid-cell-chevron.chevron-across {
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.xword-cell-chevron.chevron-down,
.codex-cell-chevron.chevron-down,
.tunnel-cell-chevron.chevron-down,
.grid-cell-chevron.chevron-down {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.xword-cell-chevron.chevron-up,
.codex-cell-chevron.chevron-up,
.tunnel-cell-chevron.chevron-up,
.grid-cell-chevron.chevron-up {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.xword-cell-chevron.chevron-left,
.codex-cell-chevron.chevron-left,
.tunnel-cell-chevron.chevron-left,
.grid-cell-chevron.chevron-left {
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

@media (prefers-color-scheme: dark) {
  .xword-cell-chevron,
  .codex-cell-chevron,
  .tunnel-cell-chevron,
  .grid-cell-chevron {
    color: #fbbf24;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  }
}

/* Reticle Corner Recall Badge (Instant 1-touch tile recall on focused drafted cells) */
.cell-recall-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  line-height: 12px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.92);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, background 0.12s ease;
  user-select: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell-recall-badge:hover {
  background: #dc2626;
  transform: scale(1.15);
}

.cell-recall-badge:active {
  transform: scale(0.92);
}

.clue-spotlight-bar,
.xword-clue-spotlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 6px;
  padding: 6px 12px;
  background: var(--bg-surface-elevated, #1e293b);
  border: 1px solid var(--border-subtle, #334155);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-height: 38px;
  flex-shrink: 0;
}

.clue-spotlight-badge,
.xword-clue-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}

.clue-spotlight-jump-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: pulse-jump-badge 0.8s ease-in-out infinite alternate;
}

@keyframes pulse-jump-badge {
  from { opacity: 0.85; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.02); }
}


.clue-spotlight-text,
.xword-clue-text {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary, #f8fafc);
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clue-spotlight-text.is-placeholder {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
  font-weight: 400;
}

.clue-spotlight-btn-dir,
.xword-btn-dir {
  background: #334155;
  border: 1px solid #475569;
  color: #f8fafc;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.clue-spotlight-btn-dir:hover,
.xword-btn-dir:hover {
  background: #475569;
  border-color: #f59e0b;
}

.clue-spotlight-word {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 1px 7px;
  border-radius: 5px;
  margin-right: 6px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.clue-spotlight-bar .clue-audio-btn,
.clue-spotlight-bar .clue-mic-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-right: 6px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.clue-spotlight-bar .clue-audio-btn:hover,
.clue-spotlight-bar .clue-mic-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

.clue-spotlight-bar .clue-mic-btn.is-recording {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ef4444;
  animation: pulseRecording 1s infinite alternate;
}

.clue-spotlight-feedback-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Elkraf cascade styles relocated to js/games/elkraf/elkraf.css */

/* XWord duo speedrun styles relocated to js/games/xword/xword.css */

/* Elkraf HUD styles relocated to js/games/elkraf/elkraf.css */

/* ==========================================================================
   Simulated Advertisement Overlay — Strictly Encapsulated in Board Bounds
   CROSS_GAME_SPEC § 2.10 Pillar 1
   ========================================================================== */
.simulated-ad-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--board-size, min(92%, 460px));
  max-width: var(--board-size, 480px);
  height: var(--board-size, min(92%, 460px));
  max-height: var(--board-size, 480px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  z-index: 50;
  background: linear-gradient(145deg, #0b1329 0%, #171d3d 50%, #1e1338 100%);
  border: 2px solid #3b82f6;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  box-sizing: border-box;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.simulated-ad-overlay.is-dismissed {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96) !important;
}

.ad-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ad-badge {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
}

.ad-timer-pill {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}

.ad-content-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  flex: 1;
  padding: 8px 4px;
}

.ad-hero-icon {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.5));
  animation: adHeroFloat 2.4s ease-in-out infinite alternate;
}

@keyframes adHeroFloat {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-4px) scale(1.06); }
}

.ad-hero-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.3px;
}

.ad-hero-subtitle {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
  max-width: 260px;
  line-height: 1.35;
}

.ad-cta-pill {
  margin-top: 6px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.45);
  cursor: pointer;
  user-select: none;
}

.ad-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.ad-progress-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

.ad-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transition: width 1s linear;
}

.btn-ad-skip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: not-allowed;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.btn-ad-skip.can-skip {
  background: #3b82f6;
  border-color: #60a5fa;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.55);
}

.btn-ad-skip.can-skip:hover {
  background: #2563eb;
  transform: scale(1.03);
}

/* Medium-compact layout for 260px–325px square boards (e.g. Avalanche 3x3 board tray) */
.simulated-ad-overlay.is-medium-compact {
  padding: 10px 12px;
}

.simulated-ad-overlay.is-medium-compact .ad-content-body {
  gap: 4px;
  padding: 4px 2px;
}

.simulated-ad-overlay.is-medium-compact .ad-hero-icon {
  font-size: 2rem;
}

.simulated-ad-overlay.is-medium-compact .ad-hero-title {
  font-size: 1.02rem;
}

.simulated-ad-overlay.is-medium-compact .ad-hero-subtitle {
  font-size: 0.74rem;
  line-height: 1.28;
  max-width: 240px;
}

.simulated-ad-overlay.is-medium-compact .ad-cta-pill {
  margin-top: 3px;
  padding: 5px 14px;
  font-size: 0.74rem;
}

.simulated-ad-overlay.is-medium-compact .btn-ad-skip {
  padding: 4px 10px;
  font-size: 0.72rem;
}

/* Compact layout for shallow boards (e.g. Aperture slats height < 260px) */
.simulated-ad-overlay.is-compact {
  padding: 8px 12px;
  justify-content: space-between;
}

.simulated-ad-overlay.is-compact .ad-header-row {
  margin-bottom: 2px;
}

.simulated-ad-overlay.is-compact .ad-content-body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 12px;
  padding: 2px 4px;
}

.simulated-ad-overlay.is-compact .ad-hero-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.simulated-ad-overlay.is-compact .ad-hero-title {
  font-size: 0.95rem;
  white-space: nowrap;
}

.simulated-ad-overlay.is-compact .ad-hero-subtitle {
  font-size: 0.72rem;
  max-width: 240px;
  line-height: 1.25;
}

.simulated-ad-overlay.is-compact .ad-cta-pill {
  margin-top: 0;
  font-size: 0.72rem;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.simulated-ad-overlay.is-compact .ad-footer-row {
  margin-top: 2px;
}

.simulated-ad-overlay.is-compact .btn-ad-skip {
  padding: 4px 10px;
  font-size: 0.72rem;
}

/* ==========================================================================
   Daily "Ready to Race" Start Overlay (CROSS_GAME_SPEC § 2.10 Pillar 1)
   Encapsulated strictly within .board-arena-frame / .board-container-wrapper.
   Reveals upon ad completion/skip in all daily games.
   ========================================================================== */
.daily-start-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--board-size, min(92%, 460px));
  max-width: var(--board-size, 480px);
  height: var(--board-size, min(92%, 460px));
  max-height: var(--board-size, 480px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  z-index: 52;
  background: radial-gradient(circle at 50% 35%, #1e293b 0%, #0f172a 65%, #090d16 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 30px rgba(245, 158, 11, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(8px, 2vmin, 16px) clamp(8px, 2vmin, 14px);
  box-sizing: border-box;
  gap: clamp(4px, 1.4vmin, 12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.daily-start-overlay.is-dismissed {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05) !important;
}

.daily-start-overlay.is-medium-compact {
  padding: 10px 12px;
  gap: 5px;
}

/* Compact layout for shallow boards (e.g. Aperture slats height < 260px) */
.daily-start-overlay.is-compact {
  padding: 8px 12px;
  gap: 6px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.daily-start-overlay.is-compact .start-badge-pill {
  padding: 2px 8px;
  font-size: 0.65rem;
  width: auto;
}

.daily-start-overlay.is-compact .start-mascot-wrapper {
  width: 44px;
  height: 44px;
  margin: 0;
}

.daily-start-overlay.is-compact .start-mascot-svg {
  width: 40px;
  height: 40px;
}

.daily-start-overlay.is-compact .start-gate-title {
  font-size: 0.95rem;
  margin: 0;
  display: inline-block;
}

.daily-start-overlay.is-compact .start-gate-desc {
  font-size: 0.72rem;
  margin: 0;
  max-width: 280px;
  line-height: 1.2;
}

.daily-start-overlay.is-compact .btn-start-race {
  padding: 6px 18px;
  font-size: 0.92rem;
  height: auto;
}

.start-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: clamp(0.6rem, 1.8vmin, 0.7rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2px 10px;
  border-radius: 20px;
}

.start-mascot-wrapper {
  position: relative;
  width: clamp(50px, 11vmin, 86px);
  height: clamp(50px, 11vmin, 86px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform-origin: center center;
  flex-shrink: 1;
}

.start-mascot-svg {
  width: clamp(46px, 10vmin, 82px);
  height: clamp(46px, 10vmin, 82px);
  filter: drop-shadow(0 6px 16px rgba(245, 158, 11, 0.45));
  transform-origin: center bottom;
  animation: mascotAmbientFloat 2.6s ease-in-out infinite alternate;
}

@keyframes mascotAmbientFloat {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-6px) rotate(2.5deg) scale(1.04);
  }
  100% {
    transform: translateY(0px) rotate(-2.5deg) scale(1);
  }
}

/* Diving State: Dialog backdrop, title, advisory text, and button fade immediately (120ms) */
.daily-start-overlay.is-diving {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.daily-start-overlay.is-diving .start-badge-pill,
.daily-start-overlay.is-diving .start-gate-title,
.daily-start-overlay.is-diving .start-gate-desc,
.daily-start-overlay.is-diving .btn-start-race {
  opacity: 0 !important;
  transform: scale(0.92);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.daily-start-overlay.is-diving .start-mascot-svg {
  animation: none !important;
}

/* Mascot Spin & Dive into Center Cell (800ms 1080° clockwise vortex) */
.daily-start-overlay.is-diving .start-mascot-wrapper {
  animation: mascotSpinAndDive 0.8s cubic-bezier(0.38, 0, 0.22, 1) forwards;
}

@keyframes mascotSpinAndDive {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate3d(0, -12px, 0) rotate(180deg) scale(1.1);
    opacity: 1;
  }
  65% {
    transform: translate3d(0, 24px, 0) rotate(720deg) scale(0.45);
    opacity: 0.95;
  }
  100% {
    transform: translate3d(0, 36px, 0) rotate(1080deg) scale(0);
    opacity: 0;
  }
}

/* Golden Center Cell Ping Ripple Effect */
.center-cell-ping-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  border-radius: 50%;
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 18px #f59e0b, inset 0 0 10px rgba(245, 158, 11, 0.4);
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  transform: scale(0.2);
}

.center-cell-ping-ring.is-pulsing {
  animation: centerCellPing 0.45s ease-out forwards;
}

@keyframes centerCellPing {
  0% {
    opacity: 0.95;
    transform: scale(0.2);
  }
  40% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(2.3);
  }
}

.start-gate-title {
  font-size: clamp(0.95rem, 3vmin, 1.25rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.start-gate-desc {
  font-size: clamp(0.68rem, 2.1vmin, 0.82rem);
  color: #cbd5e1;
  margin: 0;
  max-width: 250px;
  line-height: 1.3;
}

.start-gate-desc strong {
  color: #fbbf24;
  font-weight: 800;
}

/* Canonical FWW Midnight Obsidian Button with Radiant Gold Ring & High Contrast */
.btn-start-race {
  margin-top: 2px;
  background: linear-gradient(135deg, #090d16 0%, #1e293b 100%);
  color: #ffffff;
  padding: clamp(6px, 1.5vmin, 9px) clamp(22px, 5vmin, 34px);
  border-radius: 9999px;
  border: 2px solid #f59e0b;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.btn-start-race:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  border-color: #fbbf24;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.8), 0 0 22px rgba(251, 191, 36, 0.55);
}

.btn-start-race:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.btn-start-race:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-go-text {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Composite Lightning Exclamation Mark (⚡ on top, • on bottom) */
.btn-lightning-excl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 24px;
  margin-left: 2px;
  vertical-align: middle;
}

.bolt-top-svg {
  width: 12px;
  height: 16px;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.75));
}

.bolt-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ef4444;
  border: 0.8px solid #991b1b;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

/* ==========================================================================
   In-Board Interstitial Broadcast Announcement Overlay (ADMIN_SPEC § 4.7)
   Preempts Simulated Video Ad when an active announcement is present
   ========================================================================== */
.in-board-broadcast-overlay {
  border-width: 2px;
  background: linear-gradient(145deg, #090e1a 0%, #111a2e 50%, #0d1526 100%);
  padding: 16px 18px;
}

.in-board-broadcast-overlay.type-maintenance {
  border-color: #f59e0b;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.25);
}

.in-board-broadcast-overlay.type-alert {
  border-color: #f43f5e;
  box-shadow: 0 8px 32px rgba(244, 63, 94, 0.25);
}

.in-board-broadcast-overlay.type-announcement {
  border-color: #38bdf8;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.25);
}

.in-board-broadcast-overlay.type-event {
  border-color: #a855f7;
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25);
}

.broadcast-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.broadcast-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
}

.broadcast-badge.badge-maintenance {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.broadcast-badge.badge-alert {
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.5);
  color: #fda4af;
}

.broadcast-badge.badge-announcement {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #bae6fd;
}

.broadcast-badge.badge-event {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #e9d5ff;
}

.broadcast-close-icon {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

.broadcast-close-icon:hover {
  color: #ffffff;
}

.broadcast-content-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  flex: 1;
  padding: 10px 4px;
}

.broadcast-hero-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 2px;
}

.broadcast-hero-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.broadcast-hero-message {
  font-size: 0.84rem;
  color: #cbd5e1;
  margin: 0;
  max-width: 320px;
  line-height: 1.45;
}

.btn-broadcast-link {
  display: inline-block;
  margin-top: 6px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-broadcast-link:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
}

.broadcast-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.btn-broadcast-hide {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-broadcast-hide:hover {
  border-color: #38bdf8;
  color: #f8fafc;
}

.btn-broadcast-dismiss {
  background: #3b82f6;
  border: 1px solid #60a5fa;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-broadcast-dismiss:hover {
  background: #2563eb;
  transform: scale(1.02);
}

/* Game Table surface styles relocated to js/games/game_table/game_table.css */

/* Swap alignment styles relocated to js/games/swap/swap.css */

/* Tunnel production styles relocated to js/games/tunnel/tunnel.css */

/* Avalanche kinetic styles relocated to js/games/avalanche/avalanche.css */

/* Tumble word shake styles relocated to js/games/tumble/tumble.css */

/* ==========================================================================
   Fun Credits (FC) Assistance Badges & Word-Level Reveal Wash
   Canonical Specification: CROSS_GAME_SPEC.md §7.11.2 & XWORD_SPEC.md §11.4
   ========================================================================== */

/* Top-Right FC Purchase Badge (Single Cells / Vowels / Wildcards) */
.cell-fc-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  color: #f59e0b; /* Gold/Amber */
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.6);
  border-radius: 2px;
  padding: 0.5px 2px;
  pointer-events: none;
  user-select: none;
  z-index: 4;
  letter-spacing: -0.2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.board-grid-15x15 .cell-fc-badge,
.board-grid-13x13 .cell-fc-badge,
.board-grid-11x11 .cell-fc-badge {
  font-size: 5.5px;
  padding: 0 1px;
}

.cell-fcw-badge {
  font-size: 6.5px;
  letter-spacing: -0.3px;
  padding: 0.5px 1.5px;
}

.board-grid-15x15 .cell-fcw-badge,
.board-grid-13x13 .cell-fcw-badge,
.board-grid-11x11 .cell-fcw-badge {
  font-size: 5px;
  padding: 0 1px;
}

/* Word-Level Reveal: Continuous Perimeter Border Enclosing Whole Word */
.board-cell.is-revealed-word-cell {
  background: rgba(245, 158, 11, 0.12) !important;
  z-index: 2;
}

.board-cell.is-revealed-word-cell.word-across {
  border-top: 1.5px solid #f59e0b !important;
  border-bottom: 1.5px solid #f59e0b !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
}

.board-cell.is-revealed-word-cell.word-across.word-start {
  border-left: 1.5px solid #f59e0b !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

.board-cell.is-revealed-word-cell.word-across.word-end {
  border-right: 1.5px solid #f59e0b !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.board-cell.is-revealed-word-cell.word-down {
  border-left: 1.5px solid #f59e0b !important;
  border-right: 1.5px solid #f59e0b !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
}

.board-cell.is-revealed-word-cell.word-down.word-start {
  border-top: 1.5px solid #f59e0b !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.board-cell.is-revealed-word-cell.word-down.word-end {
  border-bottom: 1.5px solid #f59e0b !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* ==========================================================================
   Daily Already Played Stage Component (CROSS_GAME_SPEC § 11.10.3)
   ========================================================================== */

.panel-board:has(.daily-already-played-stage),
#panel-board:has(.daily-already-played-stage) {
  position: relative;
}

.daily-already-played-stage {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 36px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #0b0e14;
  overflow-y: auto;
  animation: fadeInStage 0.25s ease-out;
}

@keyframes fadeInStage {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.already-played-card {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  padding: 24px 20px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.15);
  text-align: center;
  color: #f8fafc;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.already-played-icon-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.12);
  border: 2px solid #f59e0b;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.already-played-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.already-played-badge.stage-badge-completed {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.already-played-badge.stage-badge-unposted {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.already-played-badge.stage-badge-forfeited {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.already-played-badge.stage-badge-attempted {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.already-played-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 10px 0;
}

.already-played-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0 0 18px 0;
  max-width: 420px;
}

.already-played-casual-cta {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.casual-cta-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.casual-cta-icon {
  font-size: 1.2rem;
}

.casual-cta-title {
  font-size: 0.92rem;
  color: #93c5fd;
  font-weight: 700;
}

.casual-cta-body {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #cbd5e1;
  margin: 0 0 12px 0;
}

.casual-cta-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-register-device-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-register-device-link:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-google-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-google-login-link:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.btn-google-login-link:disabled,
.btn-register-device-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.already-played-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.btn-action-yesterday {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.55);
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
  transition: transform 0.1s ease, filter 0.1s ease, background 0.15s ease;
}

.btn-action-yesterday:hover {
  filter: brightness(1.15);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.45));
  transform: translateY(-1px);
}

.btn-action-casual-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-action-casual-launch:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-action-return-lobby {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(51, 65, 85, 0.7);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease;
}

.btn-action-return-lobby:hover {
  background: rgba(71, 85, 105, 0.85);
}

@media (max-width: 768px) {
  .daily-already-played-stage {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 8px 10px 12px;
  }

  .daily-already-played-stage .already-played-card {
    padding: 12px 14px;
    border-radius: 14px;
    margin: 0 auto;
  }

  .daily-already-played-stage .already-played-icon-ring {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  .daily-already-played-stage .already-played-badge {
    font-size: 0.72rem;
    padding: 3px 10px;
    margin-bottom: 6px;
  }

  .daily-already-played-stage .already-played-title {
    font-size: 1.12rem;
    margin: 0 0 4px 0;
  }

  .daily-already-played-stage .already-played-desc {
    font-size: 0.80rem;
    line-height: 1.35;
    margin: 0 0 10px 0;
  }

  .daily-already-played-stage .already-played-casual-cta {
    padding: 8px 10px;
    margin: 0 0 10px 0;
    border-radius: 10px;
  }

  .daily-already-played-stage .casual-cta-header {
    margin-bottom: 4px;
  }

  .daily-already-played-stage .casual-cta-title {
    font-size: 0.82rem;
  }

  .daily-already-played-stage .casual-cta-body {
    font-size: 0.76rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
  }

  .daily-already-played-stage .btn-register-device-link,
  .daily-already-played-stage .btn-google-login-link {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .daily-already-played-stage .already-played-actions {
    gap: 6px;
  }

  .daily-already-played-stage .btn-action-yesterday,
  .daily-already-played-stage .btn-action-casual-launch,
  .daily-already-played-stage .btn-action-return-lobby {
    padding: 9px 14px;
    font-size: 0.86rem;
  }
}

/* ==========================================================================
   Visual Anchor 5, 4, 3, 2, 1 Circular Countdown Overlay (§CROSS_GAME_SPEC §2.10)
   ========================================================================== */
.visual-anchor-countdown-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
  animation: countdownBackdropFade 0.25s ease-out forwards;
}

.visual-anchor-circle-badge {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 100%);
  border: 2px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(251, 191, 36, 0.35);
}

.visual-anchor-svg-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.visual-anchor-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 4;
}

.visual-anchor-ring-progress {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.95s linear, stroke 0.3s ease;
}

.visual-anchor-digit {
  font-family: 'JetBrains Mono', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.6);
  animation: countdownDigitPulse 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.visual-anchor-digit.go-text {
  font-size: 2.2rem;
  color: #10b981;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
}

.visual-anchor-skip-hint {
  margin-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes countdownDigitPulse {
  0% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes countdownBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}