.word-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .38rem;
  /* Reserve für das kurze Fund-Highlight: Die Skalierung und der äußere
   * Leuchtrand sollen keine Scrollbalken auslösen. */
  padding: 0 .18rem .35rem;
  max-height: var(--word-list-max-size);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* In den Hinweis-Levels zählt jeder Punkt einen fehlenden Buchstaben. Zwei
 * Spalten lassen auch lange Muster wie K • • • • E vollständig erkennen. */
.word-list.word-list-length-clues {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.word-chip {
  --entry-index: 0;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .34rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--panel-soft);
  padding: .36rem .42rem;
  font-size: var(--word-chip-font-size);
  line-height: 1.05;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72) inset;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.word-chip.found {
  border-color: var(--word-color);
  background: color-mix(in srgb, var(--word-color) 14%, var(--panel-soft));
  opacity: .72;
  text-decoration: line-through;
}

.word-chip.found .word-label {
  text-decoration: line-through;
  text-decoration-thickness: .12em;
  text-decoration-color: currentColor;
}

.word-chip.concealed {
  border-style: dashed;
  color: var(--muted);
}

.word-chip.concealed .word-dot {
  background: var(--border);
}

.word-chip.just-found {
  animation: wordFound 760ms cubic-bezier(.2, .8, .2, 1);
}

.word-chip.hint-word {
  border-color: var(--word-color);
  background: color-mix(in srgb, var(--word-color) 18%, var(--panel-soft));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--word-color) 22%, transparent),
    0 1px 0 rgba(255, 255, 255, .72) inset;
}

.word-dot {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--word-color);
}

.word-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-label.word-label-length-clue {
  display: inline-flex;
  align-items: center;
  gap: .24rem;
  overflow: visible;
  font-weight: 760;
}

.word-label-length-dot {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}

.helper,
.subtitle {
  color: var(--muted);
}

.helper {
  font-size: .88rem;
  margin-top: .35rem;
}

.grid-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: start;
  min-height: 0;
  margin-top: .65rem;
  perspective: 900px;
}

.grid-generation-status {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 94%, white);
  color: var(--text);
  font-size: .86rem;
  font-weight: 750;
  box-shadow: 0 12px 28px rgba(20, 32, 58, .18);
  transform: translate(-50%, -50%);
}

.grid-generation-spinner {
  width: .9rem;
  height: .9rem;
  border: .14rem solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gridGenerationSpin 760ms linear infinite;
}

.word-grid {
  position: relative;
  display: grid;
  width: var(--grid-max-size);
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--border) 72%, white);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--cell) 92%, white), var(--cell));
  box-shadow:
    0 26px 54px rgba(31, 43, 57, .18),
    0 9px 0 color-mix(in srgb, var(--border) 46%, transparent),
    0 1px 0 rgba(255, 255, 255, .86) inset;
  touch-action: none;
  user-select: none;
  isolation: isolate;
  transform: translateZ(0) rotateX(.001deg);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.grid-keyboard-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.selection-preview { display: none; }

@media (hover: none), (pointer: coarse) {
  .selection-preview.is-visible {
    position: absolute;
    z-index: 6;
    top: calc(var(--grid-max-size) + .35rem);
    left: 50%;
    display: block;
    max-width: min(100%, var(--grid-max-size));
    margin: 0;
    padding: .22rem .55rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft));
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .grid-wrap:has(.letter-cell:focus-visible) .grid-keyboard-help {
    z-index: 2;
    top: calc(var(--grid-max-size) + .4rem);
    left: 50%;
    width: min(100%, var(--grid-max-size));
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.word-grid.is-wrong {
  animation: shakeSoft 460ms cubic-bezier(.36, .07, .19, .97);
}

.word-grid::after {
  position: absolute;
  inset: -35%;
  z-index: 9;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 44% 48%, rgba(255, 255, 255, .88) 0 1.5%, transparent 2.8%),
    radial-gradient(circle at 56% 35%, rgba(255, 234, 154, .82) 0 1.1%, transparent 2.2%),
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .72) 48%, transparent 58%);
  transform: translateX(-42%) rotate(8deg);
}

.word-grid.is-complete::after {
  animation: starSweep 1150ms cubic-bezier(.2, .8, .2, 1);
}

.letter-cell {
  --entry-index: 0;
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .54), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--cell) 96%, white), var(--cell));
  color: var(--text);
  font-size: clamp(.78rem, 3.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .70) inset,
    0 -1px 0 rgba(95, 72, 45, .035) inset,
    0 9px 20px rgba(31, 43, 57, .035);
  transition:
    transform 145ms ease,
    background 145ms ease,
    box-shadow 145ms ease,
    outline-color 145ms ease,
    filter 145ms ease;
}

.letter-glyph {
  position: relative;
  z-index: 3;
  transform: translateY(var(--glyph-lift, 0));
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .28),
    0 7px 16px rgba(31, 43, 57, .10);
  transition: transform 160ms ease;
}

.letter-cell:nth-child(3n) { --glyph-lift: -.02rem; }
.letter-cell:nth-child(4n) { --glyph-lift: .02rem; }

.letter-cell:hover {
  filter: brightness(1.035);
}

.letter-cell:focus-visible { z-index: 7; outline: 3px solid var(--focus, #111827); outline-offset: -3px; }
.letter-cell.keyboard-start { z-index: 6; outline: 3px dashed var(--accent); outline-offset: -3px; background: var(--cell-pressed); }

.letter-cell:hover .letter-glyph {
  transform: translateY(calc(var(--glyph-lift, 0) - .04rem)) scale(1.04);
}

.word-grid.is-timer-paused .letter-cell,
.word-grid.is-timer-paused .letter-cell:hover,
.word-grid.is-timer-preview .letter-cell,
.word-grid.is-timer-preview .letter-cell:hover {
  filter: blur(3.5px) saturate(.8);
}

.timed-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-content: center;
  gap: .25rem;
  color: var(--text);
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 14px color-mix(in srgb, var(--panel) 94%, transparent);
}

.timed-start-overlay strong {
  display: grid;
  width: 4.25rem;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: var(--shadow);
  color: var(--accent);
  font-size: 2.35rem;
  font-variant-numeric: tabular-nums;
}

.timed-start-overlay span {
  font-size: .9rem;
  font-weight: 800;
}

.letter-cell.preview {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, transparent);
  outline-offset: -2px;
  background: var(--cell-pressed);
  box-shadow:
    0 5px 14px color-mix(in srgb, var(--accent) 18%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: scale(.985);
  z-index: 5;
}

.letter-cell.just-found {
  animation: cellFound 760ms cubic-bezier(.2, .8, .2, 1);
}

.word-list.level-entering .word-chip {
  animation: wordEntry 300ms ease both;
  animation-delay: min(calc(var(--entry-index) * 18ms), 160ms);
}

.word-grid.level-entering .letter-cell {
  animation: cellEntry 260ms ease both;
  animation-delay: min(calc(var(--entry-index) * 7ms), 180ms);
}

.word-line {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  border-radius: 999px;
  /* Mehrere gelöste Wörter dürfen die Buchstaben nicht überdecken. */
  background: color-mix(in srgb, var(--line-color) 48%, transparent);
  pointer-events: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--line-color) 18%, transparent);
  animation: lineDraw 360ms cubic-bezier(.2, .8, .2, 1);
}

.word-line.horizontal {
  width: calc(100% + 4px);
  height: 34%;
  transform: translate(-50%, -50%);
}

.word-line.vertical {
  width: 34%;
  height: calc(100% + 4px);
  transform: translate(-50%, -50%);
}

.word-line.diagonal-down {
  width: 150%;
  height: 30%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.word-line.diagonal-up {
  width: 150%;
  height: 30%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.hint-start,
.hint-end {
  z-index: 6;
  animation: pulse 1.1s ease-in-out infinite alternate;
}

.hint-start { box-shadow: inset 0 0 0 4px var(--accent); }
.hint-end { box-shadow: inset 0 0 0 4px var(--c2); }

.hint-lamps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-bottom: .9rem;
}

.hint-lamp {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
}

.hint-lamp svg {
  width: 100%;
  height: 100%;
  transition: color 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.hint-lamp.is-on svg {
  color: var(--accent);
  opacity: 1;
  filter: drop-shadow(0 0 .5rem color-mix(in srgb, var(--accent) 65%, transparent));
}

.hint-lamp.is-off svg {
  color: var(--muted);
  opacity: .35;
  filter: none;
}

.hint-lamp.is-flickering svg {
  animation: lampFlicker 1.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .hint-lamp.is-flickering svg {
    animation: none;
  }
}