/* ═══ Word Scramble ═══════════════════════════════════════════════════════
   Light board, big letters, a clue card per word and James's voice when you
   solve it. Shares .gx-*, .lu-* and .pp-bar with the rebuilt games. */

/* how to play: two big choices */
.sc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-mode { display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; min-height: 64px; border-radius: 18px; border: 2px solid var(--line); background: var(--cyc); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.sc-mode b { display: block; font-family: var(--f-display); font-size: 1.15rem; font-variation-settings: 'opsz' 24, 'wght' 720; }
.sc-mode small { display: block; font-size: .98rem; line-height: 1.4; color: var(--ink-2); }
.sc-mode-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--cyc-2); }
.sc-mode:hover { border-color: var(--ink-3); }
.sc-mode[aria-pressed="true"] { border-color: var(--sound); background: var(--sound-soft); box-shadow: 0 0 0 4px rgba(36, 87, 245, .12); }
.sc-mode[aria-pressed="true"] .sc-mode-ico { background: var(--cyc); }
.sc-mode:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }

/* topic packs */
.sc-packs { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-pack { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--cyc); color: var(--ink); cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.sc-pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--ink); }
.sc-pack:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.sc-pack-pic { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 2rem; background: var(--pen-soft); }
.sc-pack:nth-child(5n+2) .sc-pack-pic { background: var(--sound-soft); }
.sc-pack:nth-child(5n+3) .sc-pack-pic { background: var(--live-soft); }
.sc-pack:nth-child(5n+4) .sc-pack-pic { background: var(--wb-soft); }
.sc-pack:nth-child(5n) .sc-pack-pic { background: var(--lab-soft); }
.sc-pack-body { display: grid; gap: 5px; min-width: 0; flex: 1; }
.sc-pack-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-pack-name { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; font-variation-settings: 'opsz' 36, 'wght' 750; }
.sc-pack-why { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.sc-pack-meta { font-size: .92rem; color: var(--ink-2); }
@media (max-width: 760px) { .sc-packs, .sc-modes { grid-template-columns: minmax(0, 1fr); } }

/* in a game */
.sc-sound { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--cyc); font-size: 1.2rem; cursor: pointer; }
.sc-sound[aria-pressed="false"] { background: var(--cyc-2); }
.sc-clock b { color: var(--sound-2); }
.sc-clock.low b { color: #B3241C; animation: lu-pulse 1s ease-in-out infinite; }
.sc-timebar { flex: 1; min-width: 120px; height: 12px; border-radius: 6px; background: var(--cyc-3); overflow: hidden; }
.sc-timebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sound), #5B84FF); border-radius: 6px; transition: width 1s linear; }

.sc-clue { display: flex; gap: clamp(14px, 3vw, 24px); align-items: center; padding: clamp(16px, 3vw, 26px); border-radius: 22px; background: linear-gradient(135deg, var(--pen-soft), #FFFBEA 55%, var(--sound-soft)); animation: gm-in .35s var(--ease-out); }
.sc-pic { flex: none; width: clamp(76px, 14vw, 104px); aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; font-size: clamp(2.6rem, 2rem + 3vw, 3.8rem); background: var(--cyc); box-shadow: var(--shadow-1); }
.sc-pic-q { position: relative; }
.sc-pic-q i { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sound); color: #fff; font-style: normal; font-family: var(--f-display); font-size: 1rem; font-variation-settings: 'wght' 800; box-shadow: 0 0 0 3px var(--cyc); }
.sc-pool.gone { display: none; }
.sc-clue-text { display: grid; gap: 6px; min-width: 0; }
.sc-clue-q { font-family: var(--f-display); font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; font-variation-settings: 'opsz' 48, 'wght' 700; }

/* letters */
.sc-tile { display: grid; place-items: center; border-radius: 12px; font-family: var(--f-display); text-transform: uppercase; line-height: 1; font-variation-settings: 'opsz' 48, 'wght' 760; transition: transform .2s var(--ease-out), background .2s, border-color .2s, color .2s; }
.sc-slots { --gap: 6px; --t: min(60px, calc((100cqi - (var(--n) - 1) * var(--gap)) / var(--n))); container-type: inline-size; display: flex; justify-content: center; gap: var(--gap); }
@supports not (width: 1cqi) { .sc-slots { --t: min(60px, calc((100vw - 90px) / var(--n) - 6px)); } }
.sc-slot { width: var(--t); height: calc(var(--t) * 1.15); padding: 0; font-size: calc(var(--t) * .56); border: 2px dashed var(--line-2); background: var(--cyc); color: var(--ink); }
.sc-slot.filled { border-style: solid; border-color: var(--ink); cursor: pointer; animation: sc-drop .25s var(--ease-out); }
.sc-slot.hinted { border-color: var(--sun); background: #FFF1DA; color: #8A5300; cursor: default; }
.sc-slot.right { border-color: #1F9D55; background: #E5F6EC; color: #136B39; }
.sc-slot.wrong { border-color: var(--live); background: var(--live-soft); color: #B3241C; }
.sc-slot.won { border: 0; background: #1F9D55; color: #fff; animation: sc-win .55s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
.sc-slot.shown { border-style: solid; border-color: var(--ink-3); background: var(--cyc-2); color: var(--ink); }
@keyframes sc-drop { from { transform: scale(.7); } }
@keyframes sc-win { 0% { transform: scale(1); background: var(--cyc); color: var(--ink); } 45% { transform: translateY(-10px) scale(1.12); } 100% { transform: none; } }

.sc-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 86px; padding: 14px; border-radius: 18px; background: var(--cyc-2); align-items: center; }
.sc-pool.nope { animation: shake .35s both; }
.sc-letter { width: 54px; height: 58px; border: 0; background: var(--cyc); color: var(--ink); font-size: 1.8rem; box-shadow: 0 3px 0 var(--line-2), 0 6px 14px -6px rgba(14, 17, 24, .3); cursor: pointer; animation: sc-drop .25s var(--ease-out); }
.sc-letter:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--line-2), 0 10px 18px -6px rgba(14, 17, 24, .3); }
.sc-letter:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-2); }
.sc-letter:focus-visible, .sc-slot:focus-visible { outline: 3px solid var(--sound); outline-offset: 2px; }
.sc-pool-empty { font-size: .98rem; color: var(--ink-2); text-align: center; }
.sc-tools .btn { padding: 12px 16px; font-size: .98rem; }
.sc-keys { text-align: center; }
@media (hover: none) { .sc-keys { display: none; } }
.sc-chip { display: inline-block; padding: 0 8px; border-radius: 6px; font-weight: 700; }
.sc-chip.ok { background: #E5F6EC; color: #136B39; border: 1.5px solid #1F9D55; }

/* the answer */
.sc-got { display: grid; gap: 14px; padding: 18px; border-radius: 20px; border: 2px solid #BFE6CD; background: #F3FBF6; animation: gm-in .4s var(--ease-out); }
.sc-got.bad { border-color: var(--line); background: var(--cyc-2); }
.sc-got .lu-res { margin: 0; }
.sc-word-row { display: flex; gap: 14px; align-items: center; }
.sc-word { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); letter-spacing: -.03em; line-height: 1; font-variation-settings: 'opsz' 72, 'wght' 800; }
.sc-mean { font-size: 1.05rem; color: var(--ink-2); margin-top: 4px; }
.sc-eg { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--cyc); }
.sc-eg p { font-size: 1.15rem; line-height: 1.45; }
.sc-eg mark, .sc-rv-eg mark { background: linear-gradient(transparent 12%, var(--pen) 12%, var(--pen) 88%, transparent 88%); color: var(--ink); padding: 0 .1em; border-radius: 3px; font-weight: 700; }
.sc-say { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sound); color: #fff; font-size: 1.2rem; padding-left: 3px; box-shadow: 0 6px 16px rgba(36, 87, 245, .35); cursor: pointer; transition: transform .2s var(--ease-out); }
.sc-say.small { width: 44px; height: 44px; font-size: 1rem; }
.sc-say:hover { transform: scale(1.06); }
.sc-say.on { animation: lu-pulse 1s ease-in-out infinite; }
.sc-say:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }

/* results */
.lu-stars.big { font-size: 2.4rem; gap: 6px; }
.gm-results .review li:has(.sc-rv-h) { background: none; padding: 10px 0 0; }
.sc-rv-h { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); font-variation-settings: 'wght' 720; max-width: none; }
.sc-rv { display: flex; gap: 12px; align-items: flex-start; }
.sc-rv-body { display: grid; gap: 4px; min-width: 0; }
.sc-rv-w b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); font-variation-settings: 'wght' 750; }
.sc-rv-m { color: var(--ink-2); }
.sc-rv-eg { color: var(--ink); font-size: 1rem; }
.sc-mini { padding: 6px 10px; min-height: 36px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--cyc); color: var(--sound-2); font-family: var(--f-display); font-size: .88rem; font-variation-settings: 'wght' 650; cursor: pointer; margin-right: 4px; }
.sc-mini.on { border-color: var(--sound); background: var(--sound-soft); }

@media (max-width: 560px) {
  [data-game="scramble"] { padding: 16px 14px; }
  .sc-clue { flex-direction: column; text-align: center; padding: 16px 14px; gap: 10px; }
  .sc-clue .lu-kicker { justify-self: center; }
  .sc-pic { width: 72px; font-size: 2.6rem; border-radius: 20px; }
  .sc-letter { width: 48px; height: 52px; font-size: 1.55rem; }
  .sc-pool { padding: 10px; gap: 7px; }
  .sc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sc-tools .btn { padding: 12px 4px; font-size: .9rem; margin: 0; }
  .sc-tools .push { margin: 0; }
  /* row 1: back + score; row 2: progress + sound */
  .lu-top .lu-dots, .lu-top .sc-timebar { order: 3; flex: 1 1 calc(100% - 64px); }
  .lu-top .sc-sound { order: 4; width: 44px; height: 44px; }
  .lu-top .stat { min-width: 58px; padding: 6px 8px; }
  .sc-slots[style*="--n:9"], .sc-slots[style*="--n:10"], .sc-slots[style*="--n:11"] { --gap: 3px; }
  .sc-slot { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-slot.won, .sc-slot.filled, .sc-letter, .sc-clue, .sc-got { animation: none; }
  .sc-say.on, .sc-clock.low b { animation: none; }
}

[data-game="scramble"] .gm-results .review { padding: 0; margin-inline: 0; }
@media (max-width: 560px) { [data-game="scramble"] .gm-results .review li { padding: 10px; } }