.wow-wrap { max-width: 1160px; }
.wow-stage { position: relative; gap: 16px; overflow: hidden; }
.wow-scoreboard { align-items: stretch; }
.wow-scoreboard .score-box { min-width: 88px; }
.wow-scoreboard .score-box strong { display: block; }
.collection-button { align-self: stretch; }
.collection-button span { margin-left: 5px; color: var(--accent); font-size: 11px; }
.wonder-banner {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  width: 100%; max-width: 690px; padding: 14px 18px;
  border: 1px solid rgba(237, 186, 93, 0.32); border-radius: 8px;
  background: linear-gradient(110deg, rgba(15, 76, 85, 0.48), rgba(196, 126, 44, 0.16) 60%, rgba(82, 111, 72, 0.26));
}
.wonder-scene { display: grid; place-items: center; width: 78px; aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, #f0b85f, #d87848 52%, #267879 53%, #155257); font-size: 42px; }
.wonder-copy { min-width: 0; }
.wow-eyebrow { color: #f2bf68; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 0.12em; }
.wonder-copy h1 { margin: 2px 0; font-size: 20px; line-height: 1.2; }
.wonder-copy p, .wow-result p { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.wonder-state { color: #f0c476; font: 700 9px 'JetBrains Mono', monospace; text-align: right; white-space: nowrap; }
.wonder-state.is-found { color: var(--success); }
.puzzle-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); align-items: center; gap: 14px; width: 100%; max-width: 790px; }
.crossword-shell { width: 100%; min-width: 0; padding: 12px 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(5, 18, 30, 0.48); }
.crossword-topline { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text-mute); font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
.crossword-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; width: max-content; max-width: 100%; margin: 0 auto; }
.crossword-cell { display: grid; place-items: center; width: clamp(24px, 3.4vw, 38px); aspect-ratio: 1; padding: 0; border: 1px solid rgba(232, 193, 126, 0.25); border-radius: 3px; background: rgba(244, 234, 214, 0.08); color: #f4ead6; font: 700 clamp(14px, 2.4vw, 20px) 'Space Grotesk', sans-serif; }
.crossword-cell.is-empty { border-color: transparent; background: transparent; }
.crossword-cell.is-known { border-color: rgba(239, 189, 109, 0.55); background: rgba(226, 166, 82, 0.18); }
.crossword-cell.is-selected { outline: 2px solid #62c6be; outline-offset: 1px; }
.crossword-cell.is-hammer-target { cursor: crosshair; }
.entry-row { display: flex; gap: 6px; width: 100%; max-width: 310px; }
.entry-display { display: grid; place-items: center; flex: 1; min-width: 0; min-height: 42px; padding: 4px 12px; border-bottom: 2px solid rgba(239, 189, 109, 0.7); color: #f4ead6; font: 700 16px 'JetBrains Mono', monospace; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.entry-display.is-placeholder { color: var(--text-mute); font-size: 10px; letter-spacing: 0.08em; }
.entry-action, .dialog-close { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-hi); color: var(--text); font: 700 20px 'Space Grotesk', sans-serif; cursor: pointer; }
.wheel-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.letter-wheel { --wheel-size: clamp(190px, 22vw, 250px); position: relative; width: var(--wheel-size); aspect-ratio: 1; flex: 0 0 auto; border: 1px dashed rgba(239, 189, 109, 0.25); border-radius: 50%; background: radial-gradient(circle, rgba(32, 78, 77, 0.18), transparent 68%); }
.wheel-letter { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; aspect-ratio: 1; margin: -24px; border: 1px solid rgba(240, 195, 117, 0.62); border-radius: 50%; background: linear-gradient(145deg, #f6d78e, #d89d50); color: #2a251c; font: 700 20px 'Space Grotesk', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.24); transform: rotate(var(--angle)) translateY(calc(var(--wheel-size) * -0.36)) rotate(calc(var(--angle) * -1)); transition: filter 0.15s, transform 0.15s; }
.wheel-letter:hover { filter: brightness(1.12); transform: rotate(var(--angle)) translateY(calc(var(--wheel-size) * -0.36)) rotate(calc(var(--angle) * -1)) scale(1.07); }
.wheel-letter:active { transform: rotate(var(--angle)) translateY(calc(var(--wheel-size) * -0.36)) rotate(calc(var(--angle) * -1)) scale(0.94); }
.wow-controls { gap: 8px; }
.wow-controls .btn { min-height: 38px; }
.hammer-button.is-active { background: linear-gradient(135deg, #bb6d42, #874638); outline: 2px solid rgba(240, 195, 117, 0.6); }
.wow-controls .btn span { margin-left: 4px; font-family: 'JetBrains Mono', monospace; }
.bonus-line { min-height: 17px; color: #f2bf68; font-size: 12px; text-align: center; }
.wow-result { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-content: center; align-items: center; gap: 10px 16px; padding: 28px; background: rgba(5, 14, 22, 0.94); animation: reveal-result 0.35s ease both; }
.wow-result[hidden] { display: none; }
.result-icon { display: grid; place-items: center; grid-row: span 2; width: 76px; aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, #f0b85f, #d87848 52%, #267879 53%, #155257); font-size: 42px; }
.wow-result h2 { margin: 2px 0; font-size: 22px; }
.wow-result .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
@keyframes reveal-result { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.collection-dialog { width: min(680px, calc(100% - 28px)); max-height: min(80vh, 700px); margin: auto; padding: 22px; border: 1px solid var(--border-hi); border-radius: 8px; background: var(--bg-1); color: var(--text); box-shadow: 0 24px 90px rgba(0,0,0,0.5); }
.collection-dialog::backdrop { background: rgba(0,0,0,0.68); backdrop-filter: blur(4px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.dialog-heading h2 { margin-top: 3px; font-size: 21px; }
.dialog-close { width: 36px; font-size: 24px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.collection-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 64px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.collection-item:disabled { cursor: default; opacity: 0.55; }
.collection-item:not(:disabled):hover { border-color: #d8a353; }
.collection-item span:first-child { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 4px; background: linear-gradient(160deg, #e4ad60, #267879); font-size: 23px; }
.collection-item strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.collection-item small { color: var(--text-mute); font-size: 9px; }
:root[data-theme="light"] .crossword-shell { background: rgba(17, 42, 48, 0.9); }
:root[data-theme="light"] .letter-wheel { background: radial-gradient(circle, rgba(32, 78, 77, 0.12), transparent 68%); }
@media (max-width: 620px) {
  .puzzle-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .crossword-shell { max-width: 420px; }
  .crossword-grid { gap: 2px; }
  .crossword-cell { width: clamp(26px, 8vw, 38px); font-size: clamp(15px, 4vw, 20px); }
  .wow-stage { padding: 14px 10px; }
  .wow-scoreboard { gap: 6px; }
  .wow-scoreboard .score-box { min-width: 68px; padding: 6px 8px; }
  .collection-button { padding: 7px 8px; font-size: 11px; }
  .wonder-banner { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .wonder-scene { width: 60px; font-size: 34px; }
  .wonder-copy h1 { font-size: 17px; }
  .wonder-state { grid-column: 2; text-align: left; }
  .crossword-shell { padding: 9px 6px; }
  .crossword-grid { gap: 2px; }
  .crossword-cell { width: clamp(25px, 7.2vw, 39px); }
  .letter-wheel { --wheel-size: min(260px, 72vw); }
  .wheel-letter { width: 44px; margin: -22px; font-size: 18px; }
  .wow-result { padding: 18px; grid-template-columns: 58px minmax(0, 1fr); }
  .result-icon { width: 58px; font-size: 32px; }
  .wow-result h2 { font-size: 18px; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .wow-result { animation: none; } }