/* game.css — rules used only on the in-game screen. Split out of base.css
   to keep each file under the 250-line cap. Order of <link> tags in
   index.html keeps base.css loading first, then game.css overrides /
   extends specific selectors as needed. */

.game-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
}
.game-header .header-buttons { grid-column: 1; display: flex; gap: 6px; align-items: center; }
.game-header .wordmark { grid-column: 2; cursor: pointer; user-select: none; transition: transform 0.12s, filter 0.12s; }
.game-header .wordmark:hover { transform: translateY(-1px); filter: brightness(1.15) drop-shadow(0 0 18px rgba(244,168,216,0.7)); }
.game-header .wordmark:active { transform: scale(0.96); }
.game-header .wordmark:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }

/* When paused, freeze the line sway and every tile animation
   (drawbridge, drift pulse) at their current frame. */
.tile-cluster.paused { animation-play-state: paused; }
.tile-cluster.paused .tile { animation-play-state: paused; }
#pause-btn.is-paused { color: var(--accent); border-color: rgba(244,168,216,0.4); }

.badge {
  font-size: 11px; font-weight: 700; text-transform: lowercase; letter-spacing: 0.1em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(181,156,255,0.15); color: var(--accent-2);
  border: 1px solid rgba(181,156,255,0.3);
}
.badge-muted { background: rgba(255,255,255,0.04); color: var(--ink-faint); border-color: var(--panel-border); }

.progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.progress-bar {
  position: relative; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,0.05); overflow: hidden;
  border: 1px solid var(--panel-border);
}
.progress-fill {
  position: absolute; inset: 0 100% 0 0; border-radius: 999px;
  /* Softer rainbow than the punchy --tier-grad — fewer stops, partial alpha
     so the colours blend gently and the in-bar tier/score text reads cleanly
     regardless of where the fill ends. */
  background: linear-gradient(90deg,
    rgba(120, 130, 220, 0.78) 0%,
    rgba(180, 130, 220, 0.78) 25%,
    rgba(220, 145, 175, 0.78) 50%,
    rgba(220, 185, 135, 0.78) 75%,
    rgba(155, 210, 195, 0.78) 100%);
  transition: right 0.5s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 0 10px rgba(181, 156, 255, 0.22);
}
.progress-markers { position: absolute; inset: 0; pointer-events: none; }
.progress-markers .mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.progress-markers .mark.reached { background: #fff; box-shadow: 0 0 6px #fff; }
/* Tier name + score live INSIDE the progress bar. Black text contrasts with
   the rainbow fill; a soft white halo keeps the labels legible when they
   stretch past the fill into the dark unfilled portion of the track. */
#tier-label, #score-label {
  position: absolute; top: 50%;
  font-weight: 800; font-size: 12px; letter-spacing: 0.05em;
  color: #000; pointer-events: none; white-space: nowrap;
  text-shadow: 0 0 2px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.5);
}
#tier-label { left: 50%; transform: translate(-50%, -50%); text-transform: lowercase; }
#score-label { right: 12px; transform: translateY(-50%); font-weight: 700; }

.input-display {
  /* Centred right under the weerrd title, tucked up close to it (the
     .screen flex gap would otherwise leave a wide space). */
  align-self: center;
  width: auto;
  max-width: 100%;
  text-align: center;
  margin-top: -12px;
  min-height: 36px;
  font-size: 26px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: lowercase; padding: 4px 14px 4px 4px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.input-display .letter { display: inline-block; }
.input-display .letter.drift { color: var(--seagreen); text-shadow: 0 0 12px rgba(93,202,165,0.6); }
.input-placeholder { color: var(--ink-dim); font-weight: 400; font-style: italic;
  letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.input-display.shake { animation: shake 0.4s ease-in-out; }

/* Seed row + loader — live in the settings panel ("This puzzle" / "Load a
   seed"): small label + monospace seed + copy chip; text input + go button. */
.seed-display { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seed-label { color: var(--ink-faint); font-weight: 700; letter-spacing: 0.06em; text-transform: lowercase; }
.seed-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: rgba(95,108,255,0.10);
  padding: 2px 8px; border-radius: 6px;
  user-select: all; cursor: copy;
}
.seed-copy, .seed-load {
  background: transparent;
  color: var(--ink); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 3px 10px; font-size: 12px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.seed-copy { padding: 3px 8px; }
.seed-copy:hover, .seed-load:hover { background: rgba(181,156,255,0.18); border-color: var(--accent-2); }
.seed-search { display: flex; align-items: center; gap: 6px; }
#seed-search-input {
  flex: 1; min-width: 0;
  background: rgba(10,8,32,0.6);
  color: var(--ink); border: 1px solid var(--panel-border);
  border-radius: 999px; padding: 8px 12px; font-size: 16px;  /* 16px: no iPhone zoom-on-focus */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#seed-search-input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.word-range-sub {
  font-size: 0.85em;
  opacity: 0.65;
  margin-left: 4px;
}
/* Action row — directly under the letters: nooo (clear) · drop it
   (backspace) · pop it (submit). In normal flow, so it moves with the
   letters; the player can long-press it somewhere else (movable.js adds a
   `translate`). Button looks live in buttons.css. */
.action-row {
  position: relative; z-index: 9;
  display: grid; grid-template-columns: 0.9fr 1.15fr 1.25fr; gap: 10px;
  align-items: center;
  width: min(100%, 460px); margin: 0 auto;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Editing (after a long-press / click-and-hold): dashed outline and a round
   corner handle for resizing. Tap elsewhere to finish. */
.action-row.is-editing, .def-anchor.is-editing .def-float {
  outline: 2px dashed var(--accent-2); outline-offset: 8px;
}
.is-moving { cursor: grabbing; }
.move-grip {
  position: absolute; right: -16px; bottom: -16px; z-index: 20;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent-2) 70%);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  cursor: nwse-resize;
  touch-action: none;
}
.move-grip::after {
  content: '⤡'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px; color: #2a0f55; text-shadow: none;
}

.ghost-wide {
  display: block; width: 100%;
  background: rgba(181, 156, 255, 0.06);
  border: 1px dashed var(--panel-border);
  color: var(--ink-dim);
  border-radius: 12px;
  padding: 11px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 12px;
  font-style: italic;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ghost-wide:hover { color: var(--ink); border-color: var(--accent-2); background: rgba(181, 156, 255, 0.12); }
.ghost-wide:disabled { opacity: 0.5; cursor: default; }

/* Cluster sits centered on top, found-list flows directly underneath. The
   cluster's height is sized per-formation in JS (fitClusterToFormation), so
   the gap to the word list stays consistent regardless of which shape is
   active and the two never overlap. */
.game-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  #game.screen { max-width: min(98vw, 1400px); }
  .game-body .found-list {
    /* At wider viewports, expand the word list to fill the row instead of
       staying in the cramped 3-column mobile grid. */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
}

.found-section { margin-top: 8px; }
.found-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink-faint); margin-bottom: 6px;
  text-transform: lowercase; letter-spacing: 0.1em;
}
#found-count { color: var(--ink-dim); font-weight: 700; }
.found-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
@media (max-width: 380px) {
  .found-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.found-list::-webkit-scrollbar { width: 6px; }
.found-list::-webkit-scrollbar-thumb { background: rgba(181,156,255,0.25); border-radius: 3px; }
.found-list li {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 6px 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: default;
  animation: fadeInUp 0.4s ease both;
  min-width: 0;
  /* Long-press opens the definition: keep phones from selecting the text
     or showing their own copy/share menu instead. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.found-list li.wild { border-color: rgba(244,168,216,0.5); }
.found-list li.allweerrd { border-color: rgba(93,202,165,0.6);
  background: linear-gradient(135deg, rgba(93,202,165,0.18), rgba(181,156,255,0.12)); }
/* Soft word: word missing the puzzle's center letter — scored at 75% and
   visually marked with a dashed amber border + dimmer fill so it's
   distinguishable from a normal find at a glance. (Opacity-based dimming
   would clash with the fadeInUp 'both' fill mode.) */
.found-list li.soft {
  border-style: dashed;
  border-color: rgba(250, 199, 117, 0.45);
  background: rgba(28, 18, 48, 0.55);
}
.found-list li.soft .word { color: var(--ink-dim); font-weight: 500; }
.found-list li.soft .pts { color: rgba(250, 199, 117, 0.85); }
/* Suppresses the fadeInUp entrance so plural-collapse re-renders don't flicker. */
.found-list li.no-fade { animation: none; }
.found-list li.revealed {
  opacity: 0.55;
  border-style: dashed;
  background: rgba(36, 22, 64, 0.35);
}
.found-list li.revealed .word { color: var(--ink-dim); font-weight: 500; }
/* Words show in full — no truncation. The wider game width ensures cells
   can grow to fit even 16-letter words at 3 columns. */
.found-list .word { font-weight: 700; text-transform: lowercase; flex: 0 1 auto; min-width: 0; }
.found-list .suffixes {
  font-size: 11px; font-weight: 600; color: var(--accent-2);
  letter-spacing: 0.02em; flex: 1 1 auto; min-width: 0;
}
.found-list .suffixes:empty { display: none; }
/* Score tiers: high scores land in pink and slant; lower scores shade down to dim. */
.found-list .pts        { flex: 0 0 auto; font-weight: 600; }
.found-list .pts.pts--1 { color: var(--ink-faint);               font-size: 12px; }
.found-list .pts.pts--2 { color: rgba(200, 175, 255, 0.72);      font-size: 13px; font-weight: 700; }
.found-list .pts.pts--3 { color: rgba(255, 150, 210, 0.90);      font-size: 14px; font-weight: 700; }
.found-list .pts.pts--4 { color: #ff72c2; font-size: 16px; font-weight: 800; font-style: italic;
                           text-shadow: 0 0 10px rgba(255, 114, 194, 0.55); }
.found-list .src-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.src-dot.wordnet { background: var(--src-wordnet); }
.src-dot.gcide { background: var(--src-gcide); }
.src-dot.wiktionary { background: var(--src-wiktionary); }
.src-dot.scrabble { background: var(--src-scrabble); }

/* ThereWeerrdly milestone modal — appears once when the player reaches the top
   tier. Click Continue to dismiss; the game keeps running underneath. */
.weerrdly-note {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(20,10,45,0.6), rgba(8,6,20,0.85));
  backdrop-filter: blur(4px);
  animation: weerrdlyFadeIn 0.4s ease;
}
.weerrdly-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: var(--radius); padding: 24px 22px;
  max-width: 380px; width: 92%; text-align: center;
  box-shadow: var(--shadow-lg),
              0 0 60px rgba(93,202,165,0.45),
              0 0 120px rgba(181,156,255,0.35);
  animation: weerrdlyCardEnter 0.7s cubic-bezier(0.34, 1.4, 0.4, 1) backwards;
  z-index: 2;
  overflow: hidden;
}
.weerrdly-card h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: 0.04em;
  font-weight: 900;
  /* Bright multi-stop rainbow — same palette as the milestone-name banner so
     the celebration reads as a real top-tier moment, not a muted modal. */
  background: linear-gradient(90deg,
    #5b6cff 0%,  #8a5cff 10%, #c45cff 20%, #ff5cd0 30%,
    #ff6c8a 40%, #ff9a5c 50%, #ffd45c 60%, #b8ff7a 70%,
    #5cffd0 80%, #5cb8ff 90%, #b59cff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Two simultaneous animations: fast rainbow scroll across the gradient AND
     a hue-rotate on the drop-shadow halo so the glow cycles colors too. */
  animation: milestoneRainbow 1.6s linear infinite,
             milestoneHueShift 2.4s linear infinite;
  filter: drop-shadow(0 0 18px rgba(181,156,255,0.85))
          drop-shadow(0 0 8px rgba(244,168,216,0.7));
  position: relative; z-index: 2;
}
.weerrdly-card p {
  color: var(--ink); margin: 0 0 20px; font-size: 14px; line-height: 1.45;
  position: relative; z-index: 2;
}
.weerrdly-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.weerrdly-card .secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--accent-2);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.weerrdly-card .secondary:hover { background: rgba(181,156,255,0.15); }
.weerrdly-card .secondary:active { transform: scale(0.96); }

/* Decorative layers behind the card. */
.weerrdly-bursts {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.weerrdly-ring {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid rgba(244,168,216,0.85);
  box-shadow: 0 0 60px rgba(181,156,255,0.85), inset 0 0 30px rgba(244,168,216,0.5);
  transform: translate(-50%,-50%);
  pointer-events: none; z-index: 1;
  animation: weerrdlyRing 2.0s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* Twinkle stars inside the card. Each gets a per-spawn --star-hue so the
   layer reads multicolor like the rest of the celebration palette. */
.weerrdly-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.weerrdly-star {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: hsl(var(--star-hue, 320), 95%, 70%);
  box-shadow: 0 0 10px hsla(var(--star-hue, 320), 95%, 70%, 0.95),
              0 0 18px hsla(var(--star-hue, 320), 95%, 65%, 0.55);
  animation: weerrdlyStarTwinkle 1.8s ease-in-out infinite;
}

/* Full-screen milestone celebration overlay. z-index 50 so it reads above
   every gameplay element including the action row. pointer-events:none on
   every layer so it never intercepts taps. */
.milestone-banner {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
}
.milestone-banner > * { pointer-events: none; }

/* Every layer is fully visible by default so the overlay still reads when
   prefers-reduced-motion is on (animations get disabled in that case but the
   banner is still on screen for ~2.8s before JS removes it). */
.milestone-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(181,156,255,0.32) 0%,
    rgba(244,168,216,0.18) 35%,
    rgba(10,8,32,0.6) 70%,
    rgba(10,8,32,0.85) 100%);
  opacity: 1;
}
.milestone-ring {
  position: absolute; left: 50%; top: 50%;
  width: 240px; height: 240px; border-radius: 50%;
  border: 4px solid rgba(244,168,216,0.85);
  box-shadow: 0 0 60px rgba(181,156,255,0.8), inset 0 0 40px rgba(244,168,216,0.5);
  transform: translate(-50%,-50%);
  opacity: 1;
}
.milestone-stack {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; white-space: normal;
  max-width: 92vw;
}
.milestone-kicker {
  font-size: clamp(12px, 2.2vw, 20px); font-weight: 800;
  letter-spacing: 0.4em; text-transform: lowercase;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(244,168,216,0.95);
}
.milestone-name {
  font-size: clamp(28px, 7vw, 80px);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  line-height: 1.0;
  max-width: 90vw;
  overflow-wrap: anywhere;
  word-break: break-word;
  background: linear-gradient(90deg,
    #5b6cff 0%,  #8a5cff 10%, #c45cff 20%, #ff5cd0 30%,
    #ff6c8a 40%, #ff9a5c 50%, #ffd45c 60%, #b8ff7a 70%,
    #5cffd0 80%, #5cb8ff 90%, #b59cff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(181,156,255,0.95)) drop-shadow(0 0 12px rgba(244,168,216,0.85));
}
/* Milestone animations always play (not gated on prefers-reduced-motion) so
   the jump + color cycle the user asked for actually shows up regardless of
   the OS accessibility setting. The overlay is still visible without them. */
.milestone-backdrop { animation: milestoneBackdrop 4.8s ease-out forwards; }
.milestone-ring     { animation: milestoneRing 4.8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; }
.milestone-stack    { animation: milestoneJump 4.8s cubic-bezier(0.34, 1.4, 0.4, 1) forwards; }
.milestone-name     { animation: milestoneRainbow 1.2s linear infinite,
                                 milestoneHueShift 2s linear infinite; }

/* Word definition panel — appears in #def-anchor just under the action
   buttons, floating over the word list; springs in on submit, fades after
   ~5s unless touched. Long-press moves it (movable.js), tap dismisses. */
.def-anchor { position: relative; z-index: 55; height: 0; }
.def-float {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  /* Above .milestone-banner (50) so a definition that lands on the same submit
     as a tier-up celebration stays readable; below .weerrdly-note (60) since
     that final-tier modal is click-to-dismiss and must trump everything. */
  z-index: 55;
  /* Wider than tall, so it covers as few found words as possible. */
  max-width: min(560px, calc(100vw - 28px));
  padding: 9px 13px 10px;
  border-radius: 10px;
  /* Solid enough to read over the word list it floats above. */
  background: rgba(14, 8, 38, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(181, 156, 255, 0.30);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  transform-origin: top center;
}
.def-float__header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.def-float__word {
  font-weight: 800;
  font-size: 15px;
  color: #e8d8ff;
  letter-spacing: 0.04em;
}
.def-float__pos {
  font-size: 11px;
  font-style: italic;
  color: rgba(181, 156, 255, 0.7);
  font-weight: 500;
}
/* Two-column body: definitions left, synonyms/hypernyms right. */
.def-float__body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.def-float__defs {
  flex: 1 1 0;
  min-width: 0;
}
.def-float__rels {
  flex: 0 0 auto;
  max-width: 190px;
  min-width: 110px;
  border-left: 1px solid rgba(181, 156, 255, 0.16);
  padding-left: 12px;
}
.def-float__def {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(220, 210, 255, 0.90);
  line-height: 1.42;
}
/* Alternate (GCIDE / Wiktionary) definitions: dimmer, separated. */
.def-float__def--alt {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(181, 156, 255, 0.12);
  color: rgba(200, 185, 240, 0.68);
  font-size: 11px;
}
/* Per-row source chip in front of each definition (def-float + tooltip). */
.def-float__src, .tt-src {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: lowercase;
  padding: 1px 6px; border-radius: 4px;
  margin-right: 6px; vertical-align: 1px;
  color: #1a0a30;
  background: var(--src-scrabble);
}
.def-float__src--wordnet,    .tt-src--wordnet    { background: var(--src-wordnet); }
.def-float__src--wiktionary, .tt-src--wiktionary { background: var(--src-wiktionary); }
.def-float__src--gcide,      .tt-src--gcide      { background: var(--src-gcide); }
.def-float__deftext, .tt-deftext { display: inline; }
/* Tooltip definition rows — same vertical rhythm as the panel. */
.tt-defs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.tt-def  { font-size: 12px; line-height: 1.4; color: rgba(220, 210, 255, 0.92); }
.tt-defs .tt-def + .tt-def {
  padding-top: 4px;
  border-top: 1px solid rgba(181, 156, 255, 0.12);
  color: rgba(200, 185, 240, 0.72);
}
.def-float__meta {
  margin: 0 0 3px;
  font-size: 11px;
  color: rgba(181, 156, 255, 0.62);
  line-height: 1.35;
}