/* settings.css — the top-right "tone it down" button + panel, and the rules
   each setting switches on. settings.js writes the choices onto <html> as
   data-motion / data-colors / data-shapes / data-effects. */

/* ============================================================
   BUTTON + PANEL
   ============================================================ */
.settings-btn {
  position: fixed; top: 14px; right: 14px; z-index: 40;
  background: var(--panel);
  backdrop-filter: blur(8px);
}
.settings-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.settings-btn svg circle { fill: currentColor; }
.settings-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--accent-2); }

/* Keep the game header's title clear of the fixed button. */
.game-header { padding-right: 46px; grid-template-columns: auto 1fr; }

.settings-panel {
  position: fixed; top: 58px; right: 14px; z-index: 41;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 72px); overflow-y: auto;
  background: rgba(28, 16, 52, 0.96);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px 16px;
  color: var(--ink);
}
.settings-head { display: flex; justify-content: space-between; align-items: center; }
.settings-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.02em; }
.settings-close {
  background: none; border: none; color: var(--ink-dim);
  font-size: 26px; line-height: 1; width: 36px; height: 36px; cursor: pointer;
}
.settings-close:hover { color: var(--ink); }
.settings-row h3 {
  margin: 14px 0 6px; font-size: 11px; font-weight: 700;
  text-transform: lowercase; letter-spacing: 0.12em; color: var(--ink-dim);
}
.settings-choices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.settings-choice {
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--ink);
  border-radius: 10px; padding: 9px 4px; min-height: 40px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.settings-choice:hover { border-color: var(--accent-2); }
.settings-choice[aria-pressed="true"] {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(181,156,255,0.22), rgba(244,168,216,0.12));
  box-shadow: 0 0 0 2px rgba(181,156,255,0.25);
}
.settings-choice:focus-visible, .settings-close:focus-visible, .settings-btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}
.settings-row .hint { margin-top: 5px; }
/* "This puzzle" (seed + show all words) only makes sense during a game. */
html:not([data-ingame]) .settings-ingame { display: none; }
.settings-panel .ghost-wide { margin-top: 10px; font-style: normal; }

/* Slider rows (Letters on screen, Random rainbow): track + live value. */
.settings-slider { display: flex; align-items: center; gap: 12px; }
.settings-slider input[type="range"] {
  flex: 1; min-width: 0; height: 28px; margin: 0;
  accent-color: var(--accent-2); cursor: pointer;
}
.settings-value {
  min-width: 78px; text-align: right;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.settings-row.is-off h3,
.settings-row.is-off .settings-value { opacity: 0.45; }
.settings-row.is-off input[type="range"] { cursor: not-allowed; opacity: 0.45; }


/* Start-menu install button (install.js sets html[data-install]). Shown
   only when the browser can install, or on iPhone/iPad with instructions. */
.install-btn { display: none; }
html[data-install="prompt"] .install-btn,
html[data-install="ios"] .install-btn { display: block; }
.install-help { font-size: 13px; line-height: 1.5; color: var(--ink-dim); text-align: center; }


/* ============================================================
   MOVEMENT: STILL — nothing drifts on its own. Shape changes and letter
   swaps are stopped in JS; these rules stop the looping CSS motion.
   Tap feedback, drift arrivals and the leaving-soon throb still play.
   ============================================================ */
html[data-motion="still"] .tile-cluster { animation: none !important; }
html[data-motion="still"] .tile-cluster.formation-wave .tile,
html[data-motion="still"] .tile-cluster.formation-rain .tile,
html[data-motion="still"] .tile-cluster.formation-evaporation .tile,
html[data-motion="still"] .tile-cluster.formation-circle .tile,
html[data-motion="still"] .tile-cluster.formation-equals .tile,
html[data-motion="still"] .tile-cluster.formation-horseshoe-up .tile,
html[data-motion="still"] .tile-cluster.formation-horseshoe-down .tile,
html[data-motion="still"] .tile-cluster.formation-smiley .tile.eye-letter {
  animation: none;
}
html[data-motion="still"] .blob,
html[data-motion="still"] .wordmark { animation-play-state: paused !important; }
/* Stagnant and Smooth: letters stand upright — no leftover tap tilt (an
   inline `rotate`, hence !important) and no wobble when a found word
   celebrates. tile-cluster.js also stops adding tilt unless Flashy. */
html[data-motion="still"] .tile-cluster .tile,
html[data-motion="gentle"] .tile-cluster .tile { rotate: 0deg !important; }
html[data-motion="still"] .tile-cluster .tile.wobble,
html[data-motion="gentle"] .tile-cluster .tile.wobble { animation: none !important; }


/* ============================================================
   LETTER BRIGHTNESS slider — settings.js sets --letter-bright (a
   brightness boost) and --letter-halo (a soft dark edge behind each letter
   so it stands out from the background). Colour settings add saturation.
   ============================================================ */
.tile-cluster {
  --letter-sat: 1;
  filter: brightness(var(--letter-bright, 1)) saturate(var(--letter-sat))
          drop-shadow(0 0 2px rgba(5, 2, 20, var(--letter-halo, 0)))
          drop-shadow(0 0 6px rgba(5, 2, 20, calc(var(--letter-halo, 0) * 0.6)));
}


/* ============================================================
   COLORS: SOFT — dimmer background glow, gentler letter colour.
   ============================================================ */
html[data-colors="soft"] .ambient { opacity: 0.5; }
html[data-colors="soft"] .tile-cluster { --letter-sat: 0.65; }
/* MUTED — between Staid and Stagnant: faint glow, soft letters. */
html[data-colors="muted"] .ambient { opacity: 0.25; }
html[data-colors="muted"] .tile-cluster { --letter-sat: 0.4; }
/* JUICY — past Rainbowy: richer, punchier colour everywhere. */
html[data-colors="juicy"] .ambient { opacity: 1; }
html[data-colors="juicy"] .blob { filter: blur(46px) saturate(1.6); }
html[data-colors="juicy"] .tile-cluster { --letter-sat: 1.4; }


/* ============================================================
   COLORS: CALM — no background glow, no colour cycling. Every letter role
   keeps its own steady colour so the main and drift letters still stand out.
   ============================================================ */
html[data-colors="calm"] .ambient { display: none; }
html[data-colors="calm"] .wordmark { animation: none !important; }
html[data-colors="calm"] .tile-cluster .tile .letter {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-colors="calm"] .tile-cluster.no-tile .tile.center .letter { color: var(--amber) !important; }
html[data-colors="calm"] .tile-cluster.no-tile .tile.center .letter::before {
  animation: none;
  -webkit-text-stroke-color: var(--amber);
  opacity: 0.5;
}
html[data-colors="calm"] .tile-cluster.no-tile .tile.drift .letter::before,
html[data-colors="calm"] .tile-cluster.no-tile .tile.earned .letter::before {
  animation: none;
  -webkit-text-stroke-color: var(--accent-2);
  filter: none;
}


/* ============================================================
   RANDOM RAINBOW slider — settings.js adds random-colour blobs per step
   (4 / 8 / 14 / 26); from step 2 the whole background also drifts through
   the hues, faster at each step. Weerrdest's blobs roam the whole screen
   (blobWander) instead of circling in place, and the original blobs speed
   up too. Stagnant colours hide the background entirely.
   ============================================================ */
html[data-rainbow="2"] .ambient { animation: ambientHue 60s linear infinite; }
html[data-rainbow="3"] .ambient { animation: ambientHue 30s linear infinite; }
html[data-rainbow="4"] .ambient { animation: ambientHue 7s linear infinite; }
html[data-rainbow="3"] .blob,
html[data-rainbow="4"] .blob { filter: blur(50px) saturate(1.4); }
html[data-rainbow="4"] .blob:not(.blob-rainbow) { animation-duration: 7s; opacity: 0.5; }
@keyframes ambientHue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
@keyframes blobWander1 {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(38vw, 14vh) scale(1.45); }
  45%  { transform: translate(12vw, 48vh) scale(0.7); }
  70%  { transform: translate(-30vw, 22vh) scale(1.3); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes blobWander2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-34vw, -20vh) scale(0.75); }
  55%  { transform: translate(24vw, -42vh) scale(1.5); }
  80%  { transform: translate(30vw, 10vh) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
html[data-motion="still"] .ambient { animation-play-state: paused; }


/* ============================================================
   CELEBRATIONS: SUPER ALOT — confetti pieces (spawned by effects.js)
   fall from the top edge with their own drift, spin and speed.
   ============================================================ */
.confetti {
  position: fixed; top: -24px; z-index: 30;
  pointer-events: none; border-radius: 2px;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.3, 0.1, 0.6, 1);
  animation-fill-mode: both;
}
@keyframes confettiFall {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate(var(--drift-x), 105vh) rotate(var(--spin)); opacity: 0; }
}
/* Kaboom's mixed confetti shapes. */
.confetti.circle { border-radius: 50%; }
.confetti.ribbon { width: 4px !important; height: 22px !important; border-radius: 2px; }
.confetti.star, .twinkle {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
                     21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Sparkly / Kaboom: stars that burst out of each letter and twinkle out. */
.twinkle {
  position: fixed; z-index: 31; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  animation: twinkleBurst 1.1s ease-out both;
}
@keyframes twinkleBurst {
  0%   { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.1) rotate(160deg); opacity: 0; }
}

/* Kaboom: a coloured shockwave ring from the letters. */
.kaboom-ring {
  position: fixed; z-index: 29; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 6px solid hsl(var(--ring-hue), 100%, 65%);
  box-shadow: 0 0 30px hsl(var(--ring-hue), 100%, 60%), inset 0 0 20px hsl(var(--ring-hue), 100%, 70%);
  animation: kaboomRing 0.9s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
@keyframes kaboomRing {
  from { transform: scale(0.3); opacity: 1; }
  to   { transform: scale(14); opacity: 0; border-width: 1px; }
}


/* ============================================================
   CELEBRATIONS: SMALL — skip the per-letter sparks, drips and bubbles
   and the full-screen flashes; keep the points, banners and tier names.
   ============================================================ */
html[data-effects="small"] .wax-drop,
html[data-effects="small"] .wax-bubble,
html[data-effects="small"] .firework,
html[data-effects="small"] .start-spark,
html[data-effects="small"] .allweerrd-flash,
html[data-effects="small"] .milestone-backdrop,
html[data-effects="small"] .milestone-ring { display: none !important; }
html[data-effects="small"] .wild-burst,
html[data-effects="small"] .weerrd-burst,
html[data-effects="small"] .blob.pop-once,
html[data-effects="small"] .blob-ephemeral,
html[data-effects="small"] .blob.respawn {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}