:root {
  --bg: #121213;
  --surface: #1e1e20;
  --text: #ffffff;
  --muted: #9a9a9e;
  --line: #3a3a3c;
  --empty: #161618;
  --green: #538d4e;
  --yellow: #b59f3b;
  --gray: #3a3a3c;
  --key: #818384;
  --accent: #6aaa64;
  --red: #d64545;
  --glow-white: 0 0 0 2px #fff, 0 0 12px #ffffffaa;
  --glow-red: 0 0 0 2px #ff6b6b, 0 0 16px #ff4d4dcc;
  --tile: min(15vw, 62px, calc((100dvh - 330px) / 6.6));
  --gap: 6px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.35; cursor: default; }

/* ---- top bar ---- */

.topbar {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}

.brand { text-align: center; }
.brand h1 { margin: 0; font-size: 28px; letter-spacing: 0.12em; font-weight: 800; }
.subtitle { font-size: 12px; color: var(--muted); }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: none;
  font-weight: 700;
}

.switch { justify-self: end; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--line); position: relative; transition: background 0.2s;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid #fff; outline-offset: 2px; }
.switch__label { font-size: 14px; font-weight: 700; }

/* ---- board ---- */

.play {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 10px 16px;
}

.board, .win-grid, .help-example { display: grid; gap: var(--gap); }

.row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap); }

.tile {
  width: var(--tile); height: var(--tile);
  display: grid; place-items: center;
  font-size: calc(var(--tile) * 0.55);
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 4px;
  transition: transform 0.1s;
}
.tile--g { --own: var(--green); }
.tile--y { --own: var(--yellow); }
.tile--b { --own: var(--gray); }
.tile--g, .tile--y, .tile--b { background: var(--own); }
.tile--blank { background: var(--empty); border: 2px solid #2a2a2c; }
.tile--tap { animation: tap 0.1s; }

.row--unused { opacity: 0.6; }
.row--active .tile { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ffffffaa; }
.row--active .tile:empty { opacity: 0.75; }

/* Correct word: each tile flips in turn and lights up as it lands, then the glow fades. */
.row--flip .tile {
  animation: flip var(--flip-ms) ease-in-out both;
  animation-delay: calc(var(--i) * var(--flip-stagger-ms));
}
.row--glow-out .tile { animation: glow-out var(--glow-fade-ms) ease-out both; }

/* Wrong word: whole row turns red, glows, shakes, then snaps back. */
.row--reject { animation: shake var(--reject-ms); }
.row--reject .tile {
  background: var(--red);
  box-shadow: var(--glow-red);
}

/* Wrong colors: shake, then each tile flips up to show what her word really makes, then back. */
.row--peek { animation: shake var(--reject-ms); }
.row--peek .tile {
  animation: peek var(--peek-ms) ease-in-out both;
  animation-delay: calc(var(--i) * var(--peek-stagger-ms));
}
.row--dance .tile { animation: bounce 0.6s var(--delay, 0ms); }
.row--dance .tile:nth-child(2) { animation-delay: calc(var(--delay, 0ms) + 60ms); }
.row--dance .tile:nth-child(3) { animation-delay: calc(var(--delay, 0ms) + 120ms); }
.row--dance .tile:nth-child(4) { animation-delay: calc(var(--delay, 0ms) + 180ms); }
.row--dance .tile:nth-child(5) { animation-delay: calc(var(--delay, 0ms) + 240ms); }

@keyframes tap { 50% { transform: scale(1.1); } }
@keyframes flip {
  0% { transform: rotateX(0); box-shadow: none; }
  50% { transform: rotateX(90deg); box-shadow: none; }
  100% { transform: rotateX(0); box-shadow: var(--glow-white); }
}
/* Flip to the --peek color, hold it, flip back to the tile's own color. */
@keyframes peek {
  0% { transform: rotateX(0); background: var(--own); box-shadow: none; }
  12% { transform: rotateX(90deg); background: var(--own); }
  12.1% { transform: rotateX(90deg); background: var(--peek); }
  24% { transform: rotateX(0); background: var(--peek); box-shadow: var(--glow-red); }
  76% { transform: rotateX(0); background: var(--peek); box-shadow: var(--glow-red); }
  88% { transform: rotateX(90deg); background: var(--peek); }
  88.1% { transform: rotateX(90deg); background: var(--own); }
  100% { transform: rotateX(0); background: var(--own); box-shadow: none; }
}
@keyframes glow-out {
  from { box-shadow: var(--glow-white); }
  to { box-shadow: none; }
}
@keyframes bounce { 30% { transform: translateY(-14px); } 60% { transform: translateY(3px); } }
@keyframes shake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* ---- toasts ---- */

.toasts {
  position: absolute; top: 10px; left: 16px; right: 16px;
  display: grid; justify-items: center; gap: 6px;
  z-index: 5; pointer-events: none;
}
.toast {
  max-width: 420px;
  background: #f4f4f5; color: #111;
  padding: 10px 14px; border-radius: 8px;
  font-weight: 700; font-size: 15px; text-align: center;
  box-shadow: 0 4px 16px #0008;
  transition: opacity 0.3s;
}
.toast--out { opacity: 0; }

/* ---- action buttons ---- */

.actions { display: flex; gap: 8px; padding: 0 16px 8px; }
.action {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700; font-size: 15px;
}

/* ---- keyboard ---- */

.keyboard {
  width: 100%; max-width: 500px;
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
  display: grid; gap: 8px;
}
.kb-row { display: flex; gap: 6px; justify-content: center; }
.kb-row:nth-child(2) { padding: 0 5%; }
.key {
  flex: 1; height: 54px; max-width: 44px;
  border: 0; border-radius: 4px;
  background: var(--key);
  font-weight: 700; font-size: 15px; text-transform: uppercase;
  touch-action: manipulation;
}
.key:active { filter: brightness(1.25); }
.key--wide { flex: 1.5; max-width: 66px; font-size: 13px; }

/* ---- dialogs ---- */

.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px;
}
.modal::backdrop { background: #000a; }
.modal h2 { margin: 0 0 10px; }
.modal h3 { margin: 18px 0 6px; }
.modal p, .modal li { line-height: 1.45; }
.modal ul { padding-left: 0; list-style: none; display: grid; gap: 4px; }
.modal ul li::before { content: "• "; color: var(--muted); }
.modal ul li:has(.chip)::before { content: ""; }
.modal__close { position: absolute; top: 12px; right: 12px; border: 0; }
.muted { color: var(--muted); font-size: 14px; }

.help-example { --tile: 40px; --gap: 4px; justify-content: center; margin: 12px 0; }
.chip { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.chip--g { background: var(--green); }
.chip--y { background: var(--yellow); }
.chip--b { background: var(--gray); }

.modal--win { text-align: center; }
.win-grid { --tile: 44px; --gap: 5px; justify-content: center; margin: 14px 0 18px; }

.primary {
  display: block; width: 100%;
  margin-top: 14px; padding: 12px;
  border: 0; border-radius: 999px;
  background: var(--accent);
  font-weight: 800; font-size: 17px;
}
.primary--share { background: #f4f4f5; color: #121213; }
.link { margin-top: 10px; background: none; border: 0; color: var(--muted); text-decoration: underline; }

/* ---- confetti ---- */

.confetti {
  position: fixed; top: -12px;
  width: 9px; height: 14px; border-radius: 2px;
  z-index: 100; pointer-events: none;
  animation: fall 2.4s ease-in forwards;
}
@keyframes fall {
  to { transform: translate(var(--drift), 105vh) rotate(720deg); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .confetti { display: none; }
}