/* style.css - UPDATED: CSS transitions removed, animations handled by JS */

/* Global variables */
:root {
  --stack-step: 39px;
  --main-bg-color: #3498db;
  /* stack-base-percent is now computed dynamically in JS via getBaseOverlapPercent().
     To resize letters, change TILE_FONT_EM in script.js — spacing auto-scales. */
  --stack-base-percent: 77;
}

@media (max-width: 768px) {
  :root { --stack-base-percent: 69; }
}

/* Global text styling: use Arial for most text */
body, h1, h3, button, #message, .slot {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* For the letter tiles, use Big Shoulders Display (no extra smoothing/spacing) */
.letter {
  font-family: 'Big Shoulders Display', sans-serif;
  color: black;
  /* Prevent mobile browsers from adjusting font size */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* Anti-aliasing fixes for sub-pixel rendering on mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.dark-mode .letter {
  color: white;
}

/* Basic page styling */
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background-color: var(--main-bg-color);
}

body {
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* Landscape rotation warning - hidden by default */
#rotateWarning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.dark-mode #rotateWarning {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

.rotate-content {
  text-align: center;
  padding: 20px;
}

.rotate-content svg {
  margin-bottom: 20px;
  color: #3498db;
}

.rotate-content p {
  font-size: 1.3em;
  font-weight: bold;
  margin: 0;
}

/* Show rotation warning only on mobile devices in landscape */
@media screen and (max-width: 896px) and (orientation: landscape) {
  #rotateWarning {
    display: flex;
  }
}

/* Intro Screen styling */
#introScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  color: #3498db;
}
.dark-mode #introScreen {
  background-color: #222;
  color: #ffffff;
}
.intro-content { text-align: center; }

/* Intro title with stacking animation */
.intro-title {
  font-size: 4em;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.intro-letter {
  display: inline-block;
  animation: stackDrop 0.35s ease-out forwards;
  animation-delay: calc(var(--delay) * 0.08s);
  opacity: 0;
  transform: translateY(-80px);
}

@keyframes stackDrop {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in date and button after letters stack */
#introScreen p {
  font-size: 1.5em;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 0.7s;
  color: #3498db;
}

.dark-mode #introScreen p {
  color: #ffffff;
}

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

#introScreen button {
  padding: 12px 30px;
  font-size: 1.2em;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  background: linear-gradient(45deg, #2980b9, #3498db);
  color: white;
  transition: transform 0.2s ease, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 0.85s;
}
/* Dark mode button on intro - slightly different style */
.dark-mode #introScreen button {
  background: linear-gradient(45deg, #2980b9, #3498db);
}
/* The dynamically added dark mode toggle button needs immediate visibility */
#introScreen #introDarkModeBtn {
  animation-delay: 1s;
}
#introScreen button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
#introScreen button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Top Navigation Bar */
#topNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #d3d6da;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-left {
  justify-content: flex-start;
}

.nav-right {
  justify-content: flex-end;
}

.nav-center {
  flex: 0 0 auto;
}

.nav-center h1 {
  font-size: 2em;
  margin: 0;
  letter-spacing: normal;
  color: #1a1a1b;
}

.nav-icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #787c7e;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-shadow: none;
}

.nav-icon-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1a1a1b;
  transform: none;
  box-shadow: none;
}

.nav-icon-btn:active {
  transform: scale(0.95);
  box-shadow: none;
}

.nav-icon-btn svg {
  width: 24px;
  height: 24px;
}

#navDivider {
  height: 1px;
  background-color: #d3d6da;
}

/* Main Game Container */
#gameContainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto 20px;
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Letter area — vertical flex: lives header then side-by-side panels */
.letter-area {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

/* Row that holds left panel and right panel side by side at equal height */
.panels-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 15px;
}

/* Left panel: letter bank — auto-sized by tier content */
.left-panel {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Right panel: game area — push column to bottom so H is at the base */
.right-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;  /* H stays at bottom, cursor just above it */
  flex-shrink: 0;
  position: relative;
  padding-bottom: 52px; /* fixed space reserved for pts-panel — not tied to font size */
}

/* ── GAME BOX: fixed height, never grows ── */
.game-box {
  border: 2px solid #3498db;
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: 530px;
  overflow: hidden;
  padding: 0;
}

.dark-mode .game-box {
  border-color: white;
}

/* Inner row: left panel | right panel, full height */
.game-inner-row {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

/* ── LEFT PANEL: available letters ── */
.game-left-panel {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 16px;
  box-sizing: border-box;
  border-right: 2px solid #3498db;
  gap: 0;
}

.dark-mode .game-left-panel {
  border-right-color: white;
}

/* ── TIER SECTION with progress bar ── */
.panel-tier-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  padding: 8px 0 4px;
}

/* Layout: single container with track on left, labels overlaid at same height */
.tier-progress-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 6px 0;      /* top/bottom padding applied once here */
  box-sizing: border-box;
  position: relative;
}

/* Vertical track container — fixed narrow width */
.tier-track-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
  /* no extra padding — shared with layout */
}

/* The track itself — full height of the layout, position:relative for child absolute elements */
.tier-track {
  position: relative;
  width: 6px;
  flex: 1;
  background: #3498db;
  border-radius: 3px;
  overflow: visible;
}

.dark-mode .tier-track {
  background: white;
}

/* Filled portion — grows upward from bottom */
.tier-track-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  transition: height 0.4s ease, background 0.35s ease;
  min-height: 0;
}

/* Traveling dot at the top of the fill */
.tier-track-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  transition: bottom 0.4s ease, background 0.35s ease;
  z-index: 2;
}

.dark-mode .tier-track-dot {
  border-color: rgba(255,255,255,0.2);
}

/* Tick marks at each tier threshold — wider than track, full opacity */
.tier-tick {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 14px;
  height: 3px;
  background: #3498db;
  border-radius: 1px;
  z-index: 1;
}

.tier-tick-active {
  background: #3498db;
}

.dark-mode .tier-tick {
  background: white;
}

.dark-mode .tier-tick-active {
  background: white;
}

/* Labels column — absolutely overlaid, same height as track so bottom% matches exactly */
.tier-labels-col {
  position: absolute;
  left: 28px;          /* track wrap is 20px wide + 8px gap */
  right: 0;
  top: 6px;            /* matches layout padding-top */
  bottom: 6px;         /* matches layout padding-bottom */
}

/* Each tier label — absolutely pinned to match tick bottom% */
/* translateY(-50%) centers the label on its tick for all tiers */
.panel-tier-item {
  position: absolute;
  left: 0;
  font-family: Arial, sans-serif;
  font-size: 1.45em;
  font-weight: bold;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: left;
  line-height: 1;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Desktop: name and points on separate lines */
.tier-label-name {
  display: block;
}
.tier-label-pts {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   TIER LABEL POSITIONS — edit these to move labels up/down.
   Each bottom% matches its threshold on the 0–80 point scale:
     Bronze    20 pts  →  bottom: 25%   (20/80 = 25%)
     Silver    40 pts  →  bottom: 50%   (40/80 = 50%)
     Gold      60 pts  →  bottom: 75%   (60/80 = 75%)
     Superstar 80 pts  →  bottom: 100%  (80/80 = 100%)
   translateY(-50%) centers the text vertically on that position.
   ───────────────────────────────────────────────────────────────── */
.panel-tier-item.tb-bronze    { color: #cd7f32; bottom: 25%;  }
.panel-tier-item.tb-silver    { color: #a8a8b8; bottom: 50%;  }
.panel-tier-item.tb-gold      { color: #f5c518; bottom: 75%;  }
.panel-tier-item.tb-superstar {
  color: #cc44ff;
  bottom: 100%;
  background: radial-gradient(
    circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%
  ),
  radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
  radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
  radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
  radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lavaLamp 9s ease-in-out infinite;
}

.dark-mode .panel-tier-item.tb-bronze { color: #e09040; }
.dark-mode .panel-tier-item.tb-silver { color: #c8c8d8; }
.dark-mode .panel-tier-item.tb-gold   { color: #ffd700; }

/* Active tier: no size change — keep consistent font throughout */
.panel-tier-item.tier-active {
  font-weight: 900;
}

/* Superstar lava-lamp on the track fill bar — color animation since it's a block not text */
.tier-track-fill-superstar {
  background: #cc44ff !important;
  animation: lavaLampDot 9s ease-in-out infinite;
}

/* Superstar dot cycles through colors */
.tier-track-dot-superstar {
  background: #cc44ff !important;
  animation: lavaLampDot 9s ease-in-out infinite;
}

/* Superstar points display */
.points-display-superstar {
  background: radial-gradient(
    circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%
  ),
  radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
  radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
  radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
  radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: lavaLamp 9s ease-in-out infinite;
}

/* Superstar sidebar score */
.words-sidebar-score-superstar {
  background: radial-gradient(
    circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%
  ),
  radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
  radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
  radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
  radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: lavaLamp 9s ease-in-out infinite;
}

@keyframes lavaLampBg {
  0%   { background-position: 10%  40%; }
  14%  { background-position: 85%  20%; }
  28%  { background-position: 60%  85%; }
  42%  { background-position: 20%  70%; }
  57%  { background-position: 90%  55%; }
  71%  { background-position: 30%  15%; }
  85%  { background-position: 70%  90%; }
  100% { background-position: 10%  40%; }
}

@keyframes lavaLampDot {
  0%   { background: #ff6030; }
  25%  { background: #b44fff; }
  50%  { background: #00e5ff; }
  75%  { background: #22ff88; }
  100% { background: #ff6030; }
}

/* Words Found row — mobile inline, hidden on desktop */
.words-found-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 4px 0 6px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.words-found-label {
  font-family: Arial, sans-serif;
  font-size: 0.78em;
  font-weight: bold;
  color: #3498db;
  white-space: nowrap;
  flex-shrink: 0;
}

.dark-mode .words-found-label {
  color: white;
}

.words-found-word {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.0em;
  font-weight: bold;
  white-space: nowrap;
}

/* Superstar lava-lamp on found words */
.words-found-word.words-found-superstar,
.words-sidebar-word.words-found-superstar {
  background: radial-gradient(
    circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%
  ),
  radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
  radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
  radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
  radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lavaLamp 9s ease-in-out infinite;
}

/* Divider between tiers/words and letters — matches border style, flush to edges */
.panel-section-divider {
  width: calc(100% + 24px);
  height: 2px;
  background-color: #3498db;
  flex-shrink: 0;
  margin: 6px -12px;
}

.dark-mode .panel-section-divider {
  background-color: white;
}

/* Bottom letters section */
.panel-letters-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  justify-content: flex-end;
  gap: 0;
}

.float-header {
  font-family: Arial, sans-serif;
  font-size: 1.15em;
  font-weight: bold;
  color: #3498db;
  text-align: center;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #3498db;
  width: 100%;
}

.dark-mode .float-header {
  color: white;
  border-bottom-color: white;
}

/* 2-column grid — letters flow naturally into rows.
   Render order from JS is [0,1,4,2,3] so the 5th letter
   lands alone in the middle row and auto-centers. */
.floating-letters-area {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0px 8px;
  width: 100%;
  flex: 1;
  align-content: center;
  justify-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Middle letter is alone in its row — span both columns so it centers */
.floating-letter-option.flo-center {
  grid-column: 1 / -1;
}

/* Each letter tile: letter on top, pts below — column layout stays within its cell */
.floating-letter-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  width: 100%;
  box-sizing: border-box;
}

.floating-letter-option:hover {
  background-color: rgba(52, 152, 219, 0.12);
}

/* On touch devices, suppress hover so first tap fires click not hover */
@media (hover: none) {
  .floating-letter-option:hover {
    background-color: transparent;
    transform: none;
  }
}

.floating-letter-option:active {
  transform: scale(0.94) !important;
}

.dark-mode .floating-letter-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (hover: none) {
  .dark-mode .floating-letter-option:hover {
    background-color: transparent;
  }
}

/* The big letter character */
.flo-letter {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.9em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

/* The point label below the letter */
.flo-pts {
  font-family: Arial, sans-serif;
  font-size: 0.95em;
  font-weight: bold;
  color: #3498db;
  white-space: nowrap;
  text-align: center;
}

.dark-mode .flo-pts {
  color: white;
}

/* ── RIGHT PANEL: stacking column + solved words ── */
.game-right-panel {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 8px 0 8px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;   /* never grows the box */
}

/* ── DESKTOP WORDS SIDEBAR ── */
.words-sidebar {
  display: none; /* hidden on mobile */
}

@media (min-width: 769px) {
  /* gameContainer stays centered; use relative + sidebar absolute left/right of it */
  #gameContainer {
    position: relative;
  }

  /* Words sidebar — absolutely positioned to the LEFT of the centered game box */
  .words-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    width: 210px;
    position: absolute;
    right: calc(50% + 216px); /* right edge anchored to left edge of game box */
    top: 0;
    margin-top: 72px;         /* align top with game box */
    max-height: 530px;        /* matches .game-box height — never grows past it */
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    direction: rtl;           /* pushes scrollbar to left edge */
  }

  /* Scrollbar styling — hidden until scrolling */
  .words-sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .words-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .words-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.3s;
  }
  .words-sidebar.is-scrolling::-webkit-scrollbar-thumb {
    background: #b0b0b0;
  }

  /* Restore ltr on all children so content renders correctly */
  .words-sidebar-title,
  .words-sidebar-list,
  .words-sidebar-item {
    direction: ltr;
  }

  /* Tier sidebar — absolutely positioned to the RIGHT of the centered game box */
  .tier-sidebar {
    display: flex !important;
    flex-direction: column;
    width: 150px;
    position: absolute;
    left: calc(50% + 216px);
    top: 0;
    /* Height matches game box: letter-area margin-top(16px) + padding(14px) + criteria(~44px) + box(530px) */
    /* We align it to the game box by matching the same top offset and use a fixed height */
    margin-top: 72px; /* same as words-sidebar-title margin-top below */
    height: 530px;    /* matches .game-box height */
    padding: 0;
    box-sizing: border-box;
  }

  /* Tier sidebar's inner layout should fill its full height */
  .tier-sidebar .tier-progress-layout {
    height: 100%;
    padding: 6px 0;
  }

  /* Hide mobile-only tier section, its divider, and mobile right-panel meter on desktop */
  .panel-tier-mobile,
  .panel-divider-mobile,
  .tier-meter-mobile-right {
    display: none !important;
  }

  /* Restore game-right-panel to column layout on desktop */
  .game-right-panel {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 8px 0 8px;
  }

  /* Left panel: let available letters fill the full height */
  .game-left-panel {
    justify-content: flex-start;
    position: relative; /* needed for absolutely-positioned desktop pts panel */
  }

  /* Panel letters section fills remaining space */
  .panel-letters-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  /* Header + letters centered together as one group (not letters floating alone) */
  .floating-letters-area {
    flex: 0 0 auto;
    align-content: center;
  }

  /* Increase letter font size in Available Letters on desktop */
  .flo-letter {
    font-size: 2.8em;
  }

  .flo-pts {
    font-size: 0.9em;
  }

  .floating-letter-option {
    padding: 8px 10px;
  }

  /* "Words Found" title — same weight/size as the date label */
  .words-sidebar-title {
    font-family: Arial, sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    color: #3498db;
    letter-spacing: 0.02em;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
    width: 100%;
    text-align: center;
    margin-top: 0;
    flex-shrink: 0; /* title always visible, never scrolled away */
  }

  .dark-mode .words-sidebar-title {
    color: white;
    border-bottom-color: white;
  }

  .words-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 10px;
    align-items: flex-end;
  }

  .words-sidebar-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    animation: solvedWordPop 0.35s ease-out;
  }

  .words-sidebar-word {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 1.45em;
    font-weight: bold;
    line-height: 1;
  }

  .words-sidebar-score {
    font-family: Arial, sans-serif;
    font-size: 0.92em;
    font-weight: bold;
    white-space: nowrap;
    /* color set inline by JS to match tier */
  }

  .dark-mode .words-sidebar-score {
    color: #aad4f5;
  }

  .words-sidebar-empty {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: #3498db;
    padding-top: 10px;
    width: 100%;
    text-align: center;
  }

  .dark-mode .words-sidebar-empty {
    color: white;
  }

  /* Hide the inline words-found-row inside the game box on desktop */
  .words-found-row {
    display: none;
  }

  /* Fly animation for tiles going to sidebar */
  .tile-fly {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: bold;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.55s ease;
  }

  /* Hide pts-panel in the right stacking column on desktop */
  .stack-section .pts-panel {
    display: none !important;
  }

  /* Desktop pts display: in normal flex flow, margin-bottom lifts it to H's horizontal axis */
  .pts-panel-desktop-left {
    display: flex !important;
    position: static !important;   /* override absolute from base .pts-panel rule */
    margin-bottom: 40px;           /* ← TUNE HERE to nudge up/down (increase = higher) */
    justify-content: center;
    align-items: center;
    padding-top: 0 !important;     /* override base .pts-panel padding-top: 14px */
  }

  .pts-panel-desktop-left .points-display {
    font-size: 2.1em;
  }
}

/* Stack section: sits at the bottom of the right panel */
.stack-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding-bottom: 42px;
  flex-shrink: 0;
  width: 100%;
}

/* Solved words panel sits above the stack inside the right panel */
.solved-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  max-height: 120px;
  padding: 4px 0;
  flex-shrink: 0;
}

/* Bottom row (legacy — keep for compat) */
.game-bottom-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  justify-content: center;
}

.solved-word-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.solved-word-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(52, 152, 219, 0.2);
  animation: solvedWordPop 0.35s ease-out;
}

@keyframes solvedWordPop {
  0%   { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

.solved-word-text {
  color: #2ecc71;
  letter-spacing: 0.05em;
}

.solved-word-score {
  font-size: 0.7em;
  color: #3498db;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.dark-mode .solved-word-item {
  border-bottom-color: rgba(170, 212, 245, 0.2);
}

.dark-mode .solved-word-score {
  color: #aad4f5;
}

/* Titles */
h3 { margin: 10px 0; }

/* Letter Bank — contains tier rows, spreads vertically to fill space */
.letter-bank {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 5px; /* tightened from 7px — vertical space between tier rows */
  padding: 38px 8px 10px; /* top 38px to clear the absolute header; sides 8px (was 15px) */
  position: relative;
  border: 2px solid #3498db;
  border-radius: 10px;
  align-self: stretch;
  box-sizing: border-box;
  overflow-y: auto;
  min-height: 456px;
  flex: 1;
}

/* Letter Point Values header inside the letter bank box —
   position: absolute takes it out of the flex flow so rows are unaffected */
.letter-bank-header {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  font-family: Arial, sans-serif;
  font-size: 1.15em;
  font-weight: bold;
  color: #3498db;
  text-align: center;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.dark-mode .letter-bank-header {
  color: #ffffff;
}

/* Bank tiles are larger — purely visual reference */
.letter-bank .letter {
  width: 58px;
  height: 58px;
  font-size: 1.8em; /* JS inline 2.2em naturally overrides this — no !important needed */
  cursor: pointer;
  user-select: none;
}

/* Each tier is one horizontal row */
.tier-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px; /* tightened from 7px — horizontal space between tiles */
  flex-shrink: 0;
}

/* Tier number label */
.tier-label {
  font-size: 2em;
  font-weight: bold;
  color: #3498db;
  width: 17px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
  user-select: none;
  /* vertical divider — equal padding either side so the line sits in the middle */
  padding-right: 10px;
  margin-right: 10px;
  border-right: 2px solid #3498db;
}

.dark-mode .tier-label {
  color: #aad4f5;
  border-right-color: #aad4f5;
}

/* Answer Area — borderless, expands as letters are typed */
.answer-area {
  display: flex;
  justify-content: center;
  gap: 48px;
}

/* Answer Column */
.answer-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

/* Each Slot — transparent by default; cursor slot shows blinking cursor + underline */
.slot {
  width: 54px;
  height: 54px;
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  position: relative;
}

/* Cursor slot: invisible 0-height input target only — visual cursor is .floating-cursor */
.slot.cursor-slot {
  height: 0 !important;
  min-height: 0 !important;
  aspect-ratio: unset !important;
  overflow: visible;
  pointer-events: auto; /* still clickable for input */
}
/* Hide the ::before cursor line — replaced by .floating-cursor */
.slot.cursor-slot::before { display: none; }

/* Floating cursor: grey tile slot, absolutely positioned above the topmost letter */
.floating-cursor {
  position: absolute;
  width: 54px;
  height: 54px;
  background: rgba(0, 0, 0, 0.07);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
  /* Center the blinking cursor line inside */
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: translateX(-50%) is applied via JS left = center - 1px */
}
.dark-mode .floating-cursor {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Floating X indicator — absolutely positioned above the cursor tile per column */
.column-x-floating {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transform: scale(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-x-floating.visible {
  animation: popIn 0.3s ease-out forwards;
}

.column-x-floating.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.column-x-floating svg path {
  stroke: #e74c3c;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

/* Floating checkmark indicator — shown above the cursor tile when a column is correct */
.column-check-floating {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transform: scale(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.column-check-floating.visible {
  animation: popIn 0.3s ease-out forwards;
}

.column-check-floating.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.column-check-floating svg path {
  stroke: #2ecc71;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.column-check-floating.visible svg path {
  animation: drawCheck 0.4s ease-out 0s forwards;
}

/* Blinking cursor line inside the grey tile */
.floating-cursor::before {
  content: '';
  display: block;
  width: 2px;
  height: 65%;
  background: #1a1a1b;
  animation: cursorBlink 1s step-end infinite;
}
.dark-mode .floating-cursor::before {
  background: #f5f5f5;
}

/* answer-column needs position:relative for the floating cursor */
.answer-column {
  position: relative;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Letter tiles - NO CSS TRANSITIONS (handled by JS now) */
.letter {
  width: 54px;
  height: 54px;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9em;
  cursor: move;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  /* REMOVED: transition: transform 0.8s ease; - Now handled by JS */
}

/* Buttons */
button {
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  background: linear-gradient(45deg, #3498db, #2980b9);
  color: white;
  font-size: 1.1em;
  transition: transform 0.2s ease, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  outline: none;
}
button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Clear button when disabled should look normal and still have hover effect */
#clearBtn:disabled {
  opacity: 1;
  cursor: pointer;
}

#clearBtn:disabled:hover {
  transform: scale(1.05);
}

/* Side menu items - override default button styles */
.side-menu-item {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.side-menu-item:hover {
  transform: scale(1.02);
}

/* Controls */
.controls {
  position: relative;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.controls button {
  flex: 0 1 400px;
  margin: 0;
}

/* Hide the clear button — backspace covers its function */
#clearBtn {
  display: none !important;
}

/* Backspace button: absolutely positioned by JS to sit over the stack column */
#backspaceBtn {
  position: absolute;
  flex: none;
  width: auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#backspaceBtn svg {
  display: block;
  pointer-events: none;
}

/* Main controls: Guess button centered, backspace absolutely placed */
#mainControls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  position: relative;
}

#mainControls #submitBtn {
  flex: 0 1 130px;
  min-width: 90px;
}

#mainControls #backspaceBtn {
  position: absolute;
  left: auto;
  right: auto;
  padding: 12px 18px;
}

/* Stopwatch */
#stopwatch {
  font-size: 2em;
  margin-top: 30px;
}

/* Message Area */
#message {
  margin-top: 20px;
  font-size: 1.2em;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: message sits between date label and game container */
@media (max-width: 768px) {
  #message {
    margin-top: 6px;
    margin-bottom: 2px;
    height: auto;
    min-height: 24px;
    font-size: 1em;
    text-align: center;
    width: 100%;
  }
}

/* Popup Overlays */
#popupOverlay,
#helpPopup,
#wordCheckerPopup,
#settingsOverlay,
#statsOverlay,
#sideMenuOverlay,
.ios-safe-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.85) !important;
  z-index: 9999;
}

/* Dark mode: use lighter dark overlay */
.dark-mode #popupOverlay,
.dark-mode #helpPopup,
.dark-mode #wordCheckerPopup,
.dark-mode #settingsOverlay,
.dark-mode #statsOverlay,
.dark-mode #sideMenuOverlay,
.dark-mode .ios-safe-overlay {
  background-color: rgba(0,0,0,0.3) !important;
}

/* How-To-Play & Word Checker Popup */
.how-to-play-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 28px 35px;
  border: 2px solid #3498db;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  text-align: center;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Desktop: Larger How to Play popup */
@media (min-width: 769px) {
  .how-to-play-popup {
    width: 520px;
    padding: 35px 45px;
  }
  .how-to-play-popup h2 {
    font-size: 2em;
    margin-bottom: 20px;
  }
  .vertical-word span {
    font-size: 2.8em;
  }
}

/* Directions */
.directions p {
  margin: 8px 0;
  font-size: 1.1em;
}

/* Vertical Word example with check and x icons */
.vertical-word span {
  display: block;
  font-size: 2.5em;
  line-height: 1;
  margin: 0.05em 0;
}

/* === Pop animation (for letter placement) === */
.letter.pop {
  animation: pop 0.18s ease-out;
}

@keyframes pop {
  0%   { opacity: 0;   }
  55%  { opacity: 1;   }
  100% { opacity: 1;   }
}

/* === Topple animations (group rotation with ground constraint) === */
@keyframes fallLeft {
  0%   { transform: rotate(0deg);    animation-timing-function: ease-in; }
  78%  { transform: rotate(-92deg);  animation-timing-function: ease-out; }
  100% { transform: rotate(-90deg); }
}

@keyframes fallRight {
  0%   { transform: rotate(0deg);   animation-timing-function: ease-in; }
  78%  { transform: rotate(92deg);  animation-timing-function: ease-out; }
  100% { transform: rotate(90deg); }
}

/* ============ Desktop: fixed-height game box ============ */
@media (min-width: 769px) {
  .letter-area {
    margin-top: 16px;
    padding: 14px 12px;
  }
  .game-box {
    max-width: 400px;
    height: 530px;
  }
  .stack-section {
    padding-bottom: 42px;
    box-sizing: border-box;
  }
}

/* Floor line beneath base letter
 *
 * Now a child of baseTile (position:absolute within the .slot containing block).
 * This anchors it to the tile's own pixel bounds, not the flex-gap/margin chain,
 * so it renders identically at every device pixel ratio.
 *
 * ── MANUAL PLACEMENT TUNING ─────────────────────────────────────────────────
 * 'bottom' = distance from the tile's bottom edge upward.
 * Increase → line moves UP (closer to letter centre)
 * Decrease → line moves DOWN (further from letter)
 * ────────────────────────────────────────────────────────────────────────────
 */
.column-floor {
  position: absolute;
  bottom: 10.5px;        /* ← TUNE HERE (desktop) */
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  background: #888888;
  border-radius: 2px;
  margin: 0;
  opacity: 0.7;
}

/* ============ Mobile: side-by-side layout, scaled down ============ */
@media (max-width: 768px) {

  /* Hide desktop-only tier sidebar on mobile */
  .tier-sidebar {
    display: none !important;
  }

  /* ── Outer container ── */
  #gameContainer {
    padding: 0 8px;
    margin-bottom: 10px;
  }

  .letter-area {
    margin-top: 6px;
    padding: 10px 8px;
    gap: 8px;
    width: 100%;
  }

  /* ── Panels stay side-by-side (same as desktop) ── */
  .panels-row {
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
  }

  /* ── Left panel: shrinks to its content ── */
  .left-panel {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  /* ── Letter bank: shorter to keep card + buttons on screen ── */
  .letter-bank {
    min-height: 0;
    height: 100%;
    padding: 36px 6px 8px; /* top clears absolute header; sides tight */
    gap: 0; /* rows spread via space-evenly, no extra gap needed */
  }

  .letter-bank-header {
    font-size: 0.82em;
    top: 10px;
  }

  /* ── Tier rows: no wrapping — tiles are small enough to fit ── */
  .tier-row {
    flex-wrap: nowrap;
    gap: 3px;
  }

  /* ── Tier number labels ── */
  .tier-label {
    font-size: 1.2em;
    width: 13px;
    padding-right: 7px;
    margin-right: 7px;
  }

  /* ── Bank tiles: 33px
        font-size !important overrides the JS inline style (2.2em) ── */
  .letter-bank .letter {
    width: 33px !important;
    height: 33px !important;
    font-size: 1.1em !important;
  }

  /* ── Base letter floor ── */
  .column-floor {
    bottom: 2.5px;   /* ← TUNE HERE (mobile ≤768px) */
  }


  /* ── Game column tiles: 32px with !important font override ── */
  .letter, .slot {
    width: 32px;
    height: 32px;
    font-size: 1.3em !important;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
  }

  /* ── Game box: full width, height constrained so buttons stay on-screen ── */
  .game-box {
    padding: 0;
    max-width: 100%;
    /* Reserve ~210px for: nav (~53px) + date/tier (~50px) + dropdown header (~44px) + controls+margin (~63px) */
    height: calc(100vh - 210px);
    height: calc(100dvh - 210px);
    /* Never shorter than 280px or taller than 400px */
    min-height: 280px;
    max-height: 400px;
  }

  /* ── "Available Letters" header: tighter padding on mobile ── */
  .float-header {
    padding-bottom: 4px;
    font-size: 1em;
  }

  /* ── Tier legend section: shrink so available letters gets more room ── */
  .panel-tier-mobile {
    flex: 0 0 auto;
    padding: 6px 0 2px;
    height: 100px;
  }

  /* ── Panel letters section: take all remaining space on mobile ── */
  .panel-letters-section {
    flex: 1 1 0;
    justify-content: center;
    min-height: 0;
  }

  /* ── Mobile: Available Letters grid gap and font size ── */
  .floating-letters-area {
    gap: 0px 6px;
    padding: 0 2px;
  }
  .flo-letter {
    font-size: 2.2em;
  }
  .flo-pts {
    font-size: 0.82em;
  }
  /* Mobile: hide full word, show abbreviated version via data-short */
  .flo-pts .flo-pts-word {
    font-size: 0;
  }
  .flo-pts .flo-pts-word::after {
    content: attr(data-short);
    font-size: 0.82rem;
  }
  .floating-letter-option {
    padding: 6px 8px;
  }

  /* ── Stack section: match mobile tile size, shifted left within right panel ── */
  .stack-section {
    padding-bottom: 43px;
    justify-content: flex-end;
    flex: 0 0 auto;     /* don't stretch — let meter take remaining space */
    margin-left: 0;
    margin-right: auto; /* pushes stack to the left, meter fills right */
  }

  /* ── Right panel: flex row, position:relative for absolute meter ── */
  .game-right-panel {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 8px 4px 0 8px;
    position: relative;
  }

  /* ── Mobile right-panel tier meter — absolutely positioned, bottom aligned with base letter underline ── */
  .tier-meter-mobile-right {
    display: block !important;
    position: absolute;
    top: 16px;    /* start a bit below the panel top so it's not too tall */
    bottom: 43px; /* align bottom with base letter underline (matches stack-section padding-bottom) */
    right: 4px;
    width: 30px;
    box-sizing: border-box;
  }

  /* ── Right panel (legacy compat) ── */
  .right-panel {
    flex-shrink: 0;
    width: auto;
    height: 360px;
    padding-bottom: 46px;
    justify-content: flex-end;
  }

  /* ── Floating cursor: match game tile size ── */
  .floating-cursor {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── Points display ── */
  .points-display {
    font-size: 1.05em;
  }

  /* ── Tier labels: smaller on mobile to avoid border overlap ── */
  .panel-tier-item {
    font-size: 0.85em;
  }
  .panel-tier-item.tier-active {
    font-size: 0.85em; /* no size change on active — keep consistent */
  }

  /* ── Hearts ── */
  .heart-icon {
    width: 26px;
    height: 26px;
  }

  /* ── Criteria text ── */
  .criteria-display {
    font-size: 0.95em;
  }

  .lives-display {
    font-size: 0.95em;
    padding: 2px 0;
  }

  /* ── Controls ── */
  .controls {
    margin-top: 8px;
    padding: 0 8px;
  }
  .controls button {
    font-size: 1em;
    padding: 10px 20px;
  }
  #mainControls #backspaceBtn {
    padding: 10px 13px;
  }

  /* ── Footer: add breathing room so the Privacy/Terms links aren't crammed
        up against the Guess/Delete buttons on mobile (desktop is unaffected,
        where margin-top:auto already pushes the footer far down the page) ── */
  .site-footer {
    padding-top: 28px;
  }

  /* ── Column indicators ── */
  .indicator-row {
    gap: 16px;
    padding: 4px 6px 6px;
  }
  .column-indicator { width: 28px; height: 32px; }
  .column-check, .column-x { width: 26px; height: 26px; }

  /* ── Popups ── */
  .vertical-word span { font-size: 2em; }
  .how-to-play-popup {
    width: 90vw;
    max-width: 90vw;
    max-height: 88vh;
    padding: 16px 14px;
    box-sizing: border-box;
  }
  .how-to-play-popup h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  .vertical-word span { font-size: 1.8em; }

  /* ═══════════════════════════════════════════════════════════
     MOBILE TIER METER — RIGHT PANEL
     The right-panel meter shows the track + colored squares
     instead of text labels. The .tier-labels-col text is hidden;
     squares are rendered via ::before on each .panel-tier-item.
     ═══════════════════════════════════════════════════════════ */

  /* The tier-progress-layout: reverse row direction so track is on right, squares on left */
  .tier-meter-mobile-right .tier-progress-layout {
    height: 100%;
    padding: 4px 0;
    gap: 0;
    flex-direction: row-reverse; /* track moves to right edge, labels col to left */
  }

  /* Track wrap — sits on the right now */
  .tier-meter-mobile-right .tier-track-wrap {
    width: 10px;
  }
  .tier-meter-mobile-right .tier-track {
    width: 4px;
  }
  .tier-meter-mobile-right .tier-track-dot {
    width: 10px;
    height: 10px;
    left: 50%;
  }
  .tier-meter-mobile-right .tier-tick {
    width: 10px;
    height: 2px;
  }

  /* Labels column: now on the left side — anchor from the left */
  .tier-meter-mobile-right .tier-labels-col {
    left: 0;
    right: 14px;  /* leave room for track-wrap on the right */
    top: 4px;
    bottom: 4px;
  }

  /* Hide the text label — show only a colored square */
  .tier-meter-mobile-right .panel-tier-item {
    font-size: 0;
    line-height: 0;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: block;
  }
  .tier-meter-mobile-right .panel-tier-item.tier-active {
    font-size: 0;   /* keep text hidden */
    width: 14px;    /* same size as inactive — no change */
    height: 14px;
  }

  /* Square colors — match each tier */
  .tier-meter-mobile-right .panel-tier-item.tb-bronze    { background: #cd7f32; -webkit-text-fill-color: transparent; }
  .tier-meter-mobile-right .panel-tier-item.tb-silver    { background: #a8a8b8; -webkit-text-fill-color: transparent; }
  .tier-meter-mobile-right .panel-tier-item.tb-gold      { background: #f5c518; -webkit-text-fill-color: transparent; }
  .tier-meter-mobile-right .panel-tier-item.tb-superstar {
    background:
      radial-gradient(circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%),
      radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
      radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
      radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
      radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
    background-size: 300% 300%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: unset;
    background-clip: unset;
    animation: lavaLamp 9s ease-in-out infinite;
  }

  /* ═══════════════════════════════════════════════════════════
     MOBILE LEFT PANEL TIER SECTION — LEGEND MODE
     The left panel's tier section shows tier names + squares
     as a key for the user. Hide the progress track and show
     a simple vertical list of colored labels.
     ═══════════════════════════════════════════════════════════ */

  /* The mobile-left tier section: show as a compact legend column */
  .panel-tier-mobile .tier-progress-layout {
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
    height: 100%;
    align-items: flex-start;
    justify-content: space-evenly;
  }

  /* Hide the progress track entirely in legend mode */
  .panel-tier-mobile .tier-track-wrap {
    display: none;
  }

  /* Legend labels column fills the full width */
  .panel-tier-mobile .tier-labels-col {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0;
    width: 100%;
    height: 100%;
  }

  /* Each label: restore text, add colored square before it */
  .panel-tier-mobile .panel-tier-item {
    position: static;
    font-size: 0.92em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    transform: none;
    white-space: normal;
    flex-wrap: wrap;
  }

  /* Mobile: name and points inline, wrapping to next line as a unit if needed */
  .panel-tier-mobile .tier-label-name {
    display: inline;
    white-space: nowrap;
  }
  .panel-tier-mobile .tier-label-pts::before {
    content: ' ';
  }
  /* Show the mobile "pts" version via data attribute, hide the "points" text */
  .panel-tier-mobile .tier-label-pts {
    display: inline;
    font-size: 0;
    white-space: nowrap;
  }
  .panel-tier-mobile .tier-label-pts::after {
    content: attr(data-mobile);
    font-size: 0.92rem;
    font-weight: bold;
  }
  .panel-tier-mobile .panel-tier-item.tier-active {
    font-size: 0.92em; /* same as inactive — no size change */
  }

  /* Colored square before each legend label */
  .panel-tier-mobile .panel-tier-item::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }
  .panel-tier-mobile .panel-tier-item.tb-bronze::before    { background: #cd7f32; }
  .panel-tier-mobile .panel-tier-item.tb-silver::before    { background: #a8a8b8; }
  .panel-tier-mobile .panel-tier-item.tb-gold::before      { background: #f5c518; }
  .panel-tier-mobile .panel-tier-item.tb-superstar::before {
    background:
      radial-gradient(circle at 20% 50%, #ff6030 0%, #ff6030 15%, transparent 45%),
      radial-gradient(circle at 80% 50%, #00e5ff 0%, #00e5ff 15%, transparent 45%),
      radial-gradient(circle at 50% 20%, #b44fff 0%, #b44fff 15%, transparent 45%),
      radial-gradient(circle at 50% 80%, #22ff88 0%, #22ff88 15%, transparent 45%),
      radial-gradient(circle at 35% 35%, #ffe000 0%, #ffe000 12%, transparent 40%);
    background-size: 300% 300%;
    animation: lavaLamp 9s ease-in-out infinite;
  }

  /* Superstar label in legend: reset the absolute positioning from the base rule,
     but let the lava-lamp background-clip text animation pass through unchanged */
  .panel-tier-mobile .panel-tier-item.tb-superstar {
    bottom: auto;  /* base rule sets bottom:100% for absolute positioning — reset it */
  }
}

/* ── Very small screens (iPhone SE 375px and narrower) ── */
@media (max-width: 380px) {
  .letter-bank .letter {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.95em !important;
  }

  .tier-label {
    font-size: 1.05em;
    width: 11px;
    padding-right: 6px;
    margin-right: 6px;
  }

  .tier-row {
    gap: 2px;
  }

  .letter-bank {
    padding: 34px 4px 6px;
    min-height: 340px;
  }

  .letter, .slot {
    width: 28px;
    height: 28px;
    font-size: 1.15em !important;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
  }

  .floating-cursor {
    width: 28px !important;
    height: 28px !important;
  }

  .right-panel {
    height: 340px;
    padding-bottom: 40px;
  }

  /* ── Base letter floor ── */
  .column-floor {
    bottom: 2.5px;   /* ← TUNE HERE (small screens ≤380px) */
  }

  .stack-section {
    padding-bottom: 42px;
  }

  .how-to-play-popup {
    width: 95vw;
    max-width: 95vw;
    max-height: 75vh;
    padding: 15px 10px;
  }
  .how-to-play-popup h2 {
    font-size: 1.3em;
  }
  .vertical-word span {
    font-size: 1.5em;
  }
}

/* Dark Mode */
html.dark-mode, .dark-mode { background-color: #1e1e1e; color: #f5f5f5; }
.dark-mode #topNav {
  background-color: #1e1e1e;
  border-bottom-color: #3a3a3c;
}
.dark-mode .nav-center h1 {
  color: #f5f5f5;
}
.dark-mode .nav-icon-btn {
  color: #818384;
}
.dark-mode .nav-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}
.dark-mode #navDivider {
  background-color: #3a3a3c;
}
.dark-mode .letter-area { background-color: #333; border-color: white; }
.dark-mode .letter-bank { background-color: #444; border-color: white; }
.dark-mode .letter-bank .letter,
.dark-mode .answer-area .letter { color: white; }
.dark-mode button:not(.nav-icon-btn) {
  background: linear-gradient(45deg, #555, #444);
  color: #f5f5f5;
}
.dark-mode .how-to-play-popup {
  background-color: #222;
  border-color: white;
  color: #f5f5f5;
}
.dark-mode #winPopup,
.dark-mode #helpPopup button {
  background: white;
  color: black;
}

.dark-mode .wait-indicator {
  color: white;
}

/* Wait indicator - shown during animations, absolutely positioned so it doesn't push other elements */
.wait-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #3498db;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

/* On small screens, move wait indicator above the counter/timer to avoid overlap */
@media (max-width: 380px) {
  .wait-indicator {
    top: -5px;
    transform: translate(-50%, 0);
  }
  
  .stats-row {
    padding-top: 25px; /* Add room above for the wait indicator */
  }
}

/* Icon styling for inline SVG check & X (5em as requested) */
.icon {
  width: 5em;
  height: 5em;
  vertical-align: middle;
  margin-right: 0.2em;
  color: currentColor;
}
.icon-check { color: green; }
.icon-x { color: red; }

/* Shake animation for incorrect answer—uses margin-left so translateY stays intact */
@keyframes shake {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: -5px; }
  50%      { margin-left: 5px; }
  75%      { margin-left: -5px; }
}
.shake { animation: shake 0.3s ease-in-out; }

/* Ensure Word Checker popup always big enough */
#wordCheckerPopup .how-to-play-popup { min-height: 350px; }

/* Blue-box selection highlight */
.letter:focus, .slot:focus { outline: none; }
.letter, .slot { -webkit-tap-highlight-color: transparent; }
.letter.selected {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Dragging state - subtle visual feedback */
.letter.dragging {
  opacity: 0.5;
}

/* Confetti canvas sits above everything but doesn't block clicks */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 3000;        /* above victory overlay (2000) */
  pointer-events: none; /* lets you click through it */
}

/* ============ Column Validation Indicators (Checkmark / X) ============ */
/* Row container for all indicators - sits below the answer area */
/* Base letter tile — blue tinted */
.letter.base-letter {
  color: #000000 !important;
}
.dark-mode .letter.base-letter {
  color: #ffffff !important;
}

/* Banned letter — greyed out and strikethrough in bank */
.letter.banned-letter {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Points display — absolutely positioned so font-size changes never shift H/floor */
.pts-panel {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 14px;
}

/* Desktop-only pts panel in left column — hidden by default, shown via media query */
.pts-panel-desktop-left {
  display: none;
}

.points-display {
  font-size: 1.25em;
  font-weight: bold;
  color: #3498db;
  letter-spacing: -0.01em;
  line-height: 1;
}
.dark-mode .points-display {
  color: #ffffff;
}
.lives-display {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}

.heart-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.heart-icon.heart-empty {
  opacity: 0.9;
}

/* Criteria description — today's challenge shown below lives */
.criteria-display {
  font-size: 1.15em;
  font-weight: 500;
  color: #3498db;
  text-align: center;
  padding: 2px 8px;
  line-height: 1.4;
  /* No italic */
}
.dark-mode .criteria-display {
  color: #ffffff;
}

/* ── Mobile words-found dropdown ── */
/* Hidden on desktop — only shown on mobile */
.mobile-words-dropdown {
  display: none;
  flex-direction: column;
  width: 100%;
  border: 1px solid #3498db;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.dark-mode .mobile-words-dropdown {
  border-color: white;
}

.mobile-words-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: transparent;
}

.mobile-words-title {
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  color: #3498db;
  text-align: center;
  flex: 1;
}

.dark-mode .mobile-words-title {
  color: white;
}

.mobile-words-chevron {
  color: #3498db;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.dark-mode .mobile-words-chevron {
  color: white;
}

.mobile-words-open .mobile-words-chevron {
  transform: rotate(180deg);
}

.mobile-words-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 12px;
  box-sizing: border-box;
}

.mobile-words-open .mobile-words-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 6px 12px 10px;
}

.mobile-words-empty {
  font-size: 0.9em;
  color: #787c7e;
  padding: 4px 0;
  text-align: center;
}

.dark-mode .mobile-words-empty {
  color: #aaa;
}

/* Mobile word items are left-aligned inside the dropdown */
.mobile-word-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-start !important;
}

/* On mobile: show the dropdown */
@media (max-width: 768px) {
  .mobile-words-dropdown {
    display: flex;
  }

  /* Hide the old inline words-found-row since dropdown replaces it */
  .words-found-row {
    display: none !important;
  }
}

/* Indicator row (just the column indicators) */
.indicator-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 48px;
  padding: 0 15px 0 15px;
}

/* Date label shown above the game board */
#playing-date-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 0 4px;
  color: #3498db !important;
  box-sizing: border-box;
}

/* Winner label shown below the date label */
#playing-winner-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 0 0;
  color: #3498db !important;
  box-sizing: border-box;
}

.dark-mode #playing-date-label {
  color: #ffffff !important;
}

.dark-mode #playing-winner-label {
  color: #ffffff !important;
}

/* Individual indicator container */
.column-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 4px;
  overflow: visible;
  pointer-events: none;
  position: relative;
}

/* Checkmark SVG - draw-in animation */
.column-check {
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
  position: absolute;
}

.column-check.visible {
  opacity: 1;
  transform: scale(1);
}

.column-check path {
  stroke: #2ecc71;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

.column-check.visible path {
  animation: drawCheck 0.4s ease-out 0.1s forwards;
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}

/* X SVG - pop animation */
.column-x {
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: scale(0);
  position: absolute;
}

.column-x.visible {
  animation: popIn 0.3s ease-out forwards;
}

.column-x.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.column-x path {
  stroke: #e74c3c;
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Correct letters — color is handled by tier class or applyCorrectColor() in JS;
   this rule only applies when no tier has been reached yet (fallback green) */
.letter.correct:not(.tile-tier-bronze):not(.tile-tier-silver):not(.tile-tier-gold):not(.tile-tier-superstar) {
  color: #2ecc71 !important;
  text-shadow: 0 0 2px rgba(46, 204, 113, 0.3);
}

/* Victory animation styles */
#victoryOverlay {
  overflow: hidden;
}

.victory-letter {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.victory-screen h1 {
  font-family: Arial, sans-serif;
}

.victory-screen p {
  font-family: Arial, sans-serif;
}

/* Hover effects for victory buttons - scale only, keep white/black colors */
.victory-share-btn:hover,
.victory-close-btn:hover {
  transform: scale(1.05);
}

/* Mobile: Shift victory content up to center it better */
@media (max-width: 768px) {
  #victoryOverlay {
    padding-bottom: 15vh;
  }
  
  .victory-screen {
    margin-top: -5vh;
  }
}

/* ============ Reveal Animation ============ */
.reveal-hidden {
  opacity: 0;
  transform: scale(0);
}

.reveal-pop {
  animation: revealPop 0.3s ease-out forwards;
}

@keyframes revealPop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Submit button waiting pulse - shows input received but waiting */
.waiting-pulse {
  animation: waitingPulse 0.6s ease-out;
}

@keyframes waitingPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  25% {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
}

/* ============ Site Footer ============ */
.site-footer {
  background: transparent;
  padding: 12px 20px 16px;
  text-align: center;
  font-size: 12px;
  color: #787c7e;
  margin-top: auto;
}

.dark-mode .site-footer {
  background: transparent;
  color: #818384;
}

.site-footer a {
  color: #3498db;
  text-decoration: none;
  margin: 0 10px;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-divider {
  color: #999;
}

/********************************************************************
 * HINT DISPLAY
 ********************************************************************/
.hint-display {
  text-align: center;
  padding: 10px 15px;
  margin-bottom: 5px;
  font-size: 1em;
  font-weight: bold;
  color: #3498db;
}

.hint-label {
  color: #3498db;
}

/* Dark mode */
.dark-mode .hint-display,
.dark-mode .hint-label {
  color: white;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hint-display {
    font-size: 0.95em;
    padding: 8px 12px;
  }
}

/********************************************************************
 * HORIZONTAL WORD DISPLAY (Hangman-style)
 ********************************************************************/
.horizontal-word-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 15px;
  margin: 10px 0;
}

.horizontal-word {
  display: flex;
  gap: 3px;
}

.word-spacer {
  width: 15px;
}

.horizontal-letter-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 22px;
}

.horizontal-letter {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  height: 1.4em;
  line-height: 1.4em;
  color: white;
  text-transform: uppercase;
}

.horizontal-letter.hint {
  color: #2ecc71;
}

.horizontal-letter.correct {
  color: #2ecc71;
}

.horizontal-underline {
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 1px;
}

/* Dark mode adjustments */
body.dark-mode .horizontal-letter {
  color: white;
}

body.dark-mode .horizontal-letter.hint,
body.dark-mode .horizontal-letter.correct {
  color: #2ecc71;
}

body.dark-mode .horizontal-underline {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Light mode adjustments */
body:not(.dark-mode) .horizontal-letter {
  color: #333;
}

body:not(.dark-mode) .horizontal-letter.hint,
body:not(.dark-mode) .horizontal-letter.correct {
  color: #2ecc71;
}

body:not(.dark-mode) .horizontal-underline {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .horizontal-word-display {
    padding: 8px 10px;
    gap: 3px;
  }
  
  .horizontal-letter-spot {
    min-width: 18px;
  }
  
  .horizontal-letter {
    font-size: 1.1em;
  }
  
  .word-spacer {
    width: 12px;
  }
  
  .horizontal-underline {
    height: 2px;
  }
}
/********************************************************************
 * TIER DISPLAY BAR — moved inside game-left-panel; external bar hidden
 ********************************************************************/
#tier-display {
  display: none !important;
}

/* The row that holds all four tier labels side by side */
.tier-bar-row {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

/* Each individual tier label in the bar */
.tier-bar-item {
  opacity: 1;              /* always fully visible — tier is communicated via tile color */
  white-space: nowrap;
  font-size: 1em;
}

/* Active class kept for JS compatibility but no longer changes appearance */
.tier-bar-item.tier-active {
  opacity: 1;
}

/* Per-tier colors — inactive items still use the color, just dimmed */
.tier-bar-item.tb-bronze    { color: #cd7f32; }
.tier-bar-item.tb-silver    { color: #a8a8b8; }
.tier-bar-item.tb-gold      { color: #f5c518; }

/* Superstar: lava-lamp flowing color effect via radial-gradient animation */
.tier-bar-item.tb-superstar {
  /* base fallback color */
  color: #cc44ff;
  /* animated gradient background clipped to text */
  background: radial-gradient(
    circle at 20% 50%,
    #ff6030 0%, #ff6030 15%,
    transparent 45%
  ),
  radial-gradient(
    circle at 80% 50%,
    #00e5ff 0%, #00e5ff 15%,
    transparent 45%
  ),
  radial-gradient(
    circle at 50% 20%,
    #b44fff 0%, #b44fff 15%,
    transparent 45%
  ),
  radial-gradient(
    circle at 50% 80%,
    #22ff88 0%, #22ff88 15%,
    transparent 45%
  ),
  radial-gradient(
    circle at 35% 35%,
    #ffe000 0%, #ffe000 12%,
    transparent 40%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lavaLamp 9s ease-in-out infinite;
}

@keyframes lavaLamp {
  0%   { background-position:  10%  40%; }
  14%  { background-position:  85%  20%; }
  28%  { background-position:  60%  85%; }
  42%  { background-position:  20%  70%; }
  57%  { background-position:  90%  55%; }
  71%  { background-position:  30%  15%; }
  85%  { background-position:  70%  90%; }
  100% { background-position:  10%  40%; }
}

/* Dark mode tweaks */
.dark-mode .tier-bar-item.tb-bronze { color: #e09040; }
.dark-mode .tier-bar-item.tb-silver { color: #c8c8d8; }
.dark-mode .tier-bar-item.tb-gold   { color: #ffd700; }

/* Separator dots between tier labels */
.tier-bar-sep {
  color: #aaa;
  opacity: 0.7;
  font-size: 0.7em;
  user-select: none;
}

/********************************************************************
 * TILE TIER COLOR — tiles stay at tier color while in that tier
 ********************************************************************/

/* Bronze — warm copper */
.letter.tile-tier-bronze {
  color: #cd7f32 !important;
  text-shadow: 0 0 3px rgba(205,127,50,0.3);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
/* Silver — cool grey-blue */
.letter.tile-tier-silver {
  color: #a8a8b8 !important;
  text-shadow: 0 0 3px rgba(168,168,184,0.3);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
/* Gold */
.letter.tile-tier-gold {
  color: #f5c518 !important;
  text-shadow: 0 0 4px rgba(245,197,24,0.4);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
/* Superstar: same lava-lamp trick on individual tiles */
.letter.tile-tier-superstar {
  background: radial-gradient(
    circle at 20% 50%,
    #ff6030 0%, #ff6030 18%,
    transparent 50%
  ),
  radial-gradient(
    circle at 80% 50%,
    #00e5ff 0%, #00e5ff 18%,
    transparent 50%
  ),
  radial-gradient(
    circle at 50% 20%,
    #b44fff 0%, #b44fff 18%,
    transparent 50%
  ),
  radial-gradient(
    circle at 50% 80%,
    #22ff88 0%, #22ff88 18%,
    transparent 50%
  ),
  radial-gradient(
    circle at 35% 35%,
    #ffe000 0%, #ffe000 14%,
    transparent 42%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none !important;
  animation: lavaLamp 9s ease-in-out infinite;
}

/********************************************************************
 * TILE TIER-UP — no flash, color just transitions in smoothly
 ********************************************************************/

/* Mobile: tighten tier bar */
@media (max-width: 768px) {
  #tier-display {
    font-size: 0.82em;
    padding: 2px 0 4px;
  }
  .tier-bar-row {
    gap: 10px;
  }
}
/* ─── Responsive title sizing for SPELLEVATE (longer than STACKLE) ─── */

/* Tablets and most phones */
@media (max-width: 768px) {
  .intro-title {
    font-size: 3em;
  }
  .nav-center h1 {
    font-size: 1.5em;
  }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
  .intro-title {
    font-size: 2.4em;
  }
  .nav-center h1 {
    font-size: 1.3em;
  }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
  .intro-title {
    font-size: 2em;
  }
  .nav-center h1 {
    font-size: 1.15em;
  }
}