/* 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 real touch devices in landscape.
   The (pointer: coarse) check is essential: without it, dragging a DESKTOP
   browser window narrower than 896px while it's still wider than tall matches
   (max-width + landscape) and the warning pops up by accident. A mouse-driven
   desktop is (pointer: fine), so requiring coarse limits this to actual phones/
   tablets held sideways. */
@media screen and (max-width: 896px) and (orientation: landscape) and (pointer: coarse) {
  #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);
}

/* No tier reached yet — fill and dot use the neutral track color
   (light blue in light mode, white in dark mode) so the user isn't
   misled into thinking they're already in the Bronze tier at 0 points. */
.tier-track-fill-untiered,
.tier-track-dot-untiered {
  background: #3498db;
}
.dark-mode .tier-track-fill-untiered,
.dark-mode .tier-track-dot-untiered {
  background: white;
}

/* 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 — anchored to the LEFT edge of the centered game box on the
     right, and extended out into the empty left margin so long words have room
     to render on one line instead of being clipped. align-items: flex-end keeps
     ALL children right-anchored, so the title (which has its own width: 210px)
     stays pinned to the right side exactly where it was originally — only the
     word rows use the extra width to extend leftward. */
  .words-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    position: absolute;
    right: calc(50% + 216px); /* right edge anchored to left edge of game box */
    left: 8px;                /* extend out toward the viewport's left edge */
    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;       /* harmless: box is wide enough to hold any word */
    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: 210px;       /* underline length unchanged */
    text-align: center; /* keep "Words Found" centered over its own underline */
    /* The container is direction: rtl, so its align-items: flex-end resolves to
       the LEFT side. The word rows end up on the right (full-width list with
       right-pushed items), so the title must be explicitly anchored right too.
       Under rtl, align-self: flex-start resolves to the RIGHT edge — matching
       the words — so the header/underline sit directly above them. */
    align-self: flex-start;
    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%;        /* spans the wide box; rows are right-anchored below */
    padding-top: 10px;
    align-items: flex-end;
  }

  /* Long words extend leftward on one line into the now-available space */
  .words-sidebar-word {
    white-space: nowrap;
  }

  .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;
    /* Lives inside the full-width (.words-sidebar-list), a flex column with
       align-items: flex-end — so by default it right-anchors to the list's right
       edge (same edge as the word rows and the header). A fixed 210px width with
       centered text then places the dash directly under the "Words Found" header.
       (No align-self override here — that earlier pulled it to the wrong side.) */
    width: 210px;
    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;
    /* The page is proportionally zoomed down on short desktop screens (see index.html
       fit-to-height script). Unlike the game box, this popup floats centered over
       everything and has no neighbours competing for space, so it shouldn't shrink.
       Counter-scale it by the inverse zoom so it always renders at its natural size,
       matching how it looks on a full-height screen. --inv-zoom is 1 when unzoomed. */
    zoom: var(--inv-zoom, 1);
  }
  .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;
  /* The floor is a child of the base tile. During a topple the base tile's letter
     is set to visibility:hidden, which would also hide this floor (visibility is
     inherited). Re-assert visible so the floor stays put and visible even when its
     parent letter is hidden — it's anchored to the slot, which never moves. */
  visibility: visible;
}

/* Never show the floor on a toppling clone — the floor must never fall.
   (Belt-and-suspenders alongside the JS that strips it from the clone.) */
.topple-group .column-floor {
  display: none;
}

/* ============ 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) */
  }

  .pending-points {
    font-size: 0.70rem;   /* ← TUNE HERE (mobile ≤768px) — matches the .flo-pts "+N pts" labels */
  }


  /* ── 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%;
    /* Size the box to the space the screen actually has so the Guess button always
       lands on-screen with no scrolling. Two iPhone-specific details:
       (1) svh = the "small" viewport height, always measured with Safari's toolbar
           SHOWING. dvh can momentarily report the taller (toolbar-hidden) height at
           load, which made the box too tall and pushed Guess behind the toolbar.
       (2) Reserve ~270px for everything around the box: nav (~53) + date (~40) +
           the "Today: Find words…" line (~50) + dropdown header (~44) + controls (~63)
           + a little margin. The original 210 forgot the "Today" line, so the box ran
           ~50px too tall.
       max-height caps it at 450 so it can't stretch on tall/desktop windows (extra
       height just opens up below the game); min-height floors it so the tier legend
       and letters can't overlap — below that the page scrolls instead. */
    height: calc(100vh - 270px);
    height: calc(100svh - 270px);
    min-height: 340px;
    max-height: 450px;
  }

  /* ── "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 gap FLOOR ──
        The footer's distance from the controls comes from .site-footer's
        `margin-top:auto`, which only works while there's free vertical space
        for it to absorb. When the inline error message (e.g. "not in word
        list") is inserted above the game box, content can briefly fill the
        viewport, the auto-margin collapses to ~0, and it doesn't reliably
        restore afterward — leaving the footer crammed under the buttons.
        A fixed margin-bottom here guarantees a minimum gap that reflow can't
        collapse. The auto-margin still pushes the footer fully to the bottom
        when there IS free space, so the normal state is unchanged. */
  #mainControls {
    margin-bottom: 48px;
  }

  /* ── 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;
  }

  /* ── Footer DRIFT FIX ──
        Base `.site-footer` uses `margin-top:auto`, which positions the footer
        against the BOTTOM of the viewport by absorbing leftover space. On
        mobile that reference moves: the inline message changes content height
        and the address bar show/hide changes the viewport height, so the
        footer settles a few px off after a message clears (the residual
        "creep" upward). Neutralizing the auto margin pins the footer a fixed
        distance below #mainControls instead — and since the controls always
        return to the same spot, so does the footer. On this layout the game
        area already ~fills the screen (height: calc(100vh - 210px)), so `auto`
        contributes ~0 in the resting state; removing it kills the drift
        WITHOUT changing the current spacing. `body >` raises specificity so
        this wins over the base rule regardless of source order. Desktop is
        untouched (outside this media query). Tune the gap via #mainControls
        margin-bottom above. */
  body > .site-footer {
    margin-top: 0;
  }

  /* ── 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) */
  }

  .pending-points {
    font-size: 0.82rem;   /* ← TUNE HERE (small screens ≤380px) — matches the .flo-pts "+N pts" labels */
  }

  .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;
}

/* Live pending-points "+N" beside the topmost letter in the stacking column.
   Same font treatment as .points-display, but solid black (light) / white (dark),
   with no tier color animation. Positioned via JS (updateFloatingCursor). */
.pending-points {
  position: absolute;
  font-weight: bold;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 1.5rem;     /* ← TUNE HERE (desktop) */
  color: #000000;        /* black in light mode */
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.dark-mode .pending-points {
  color: #ffffff;        /* white in dark mode */
}
.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;
  }
}