/* ================= Spell Bee ================= */

/* ---- welcome + map entries ---- */
.spell-go { gap: 12px; padding: 12px 30px 12px 16px; }
.spell-go .ic { width: 52px; height: 52px; }
.spell-tile { min-height: 130px; }
.spell-tile .spell-count { font-weight: 800; font-size: 1rem; color: var(--peacock-deep); }

/* ---- hub ---- */
.spell-summary { display: flex; flex-direction: column; gap: 10px; }
.known-line { font-size: 1.15rem; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.known-line b { font-size: 2rem; color: var(--peacock-deep); line-height: 1; }
.known-bar { height: 16px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.known-bar span { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: linear-gradient(180deg, #ffd166, var(--mango)); transition: width 0.6s var(--ease); }
.spell-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.spell-actions { max-width: 560px; }
.btn.action .action-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 0; }
.btn.action .action-text .bi { align-items: flex-start; }
.btn.action .action-sub { font-size: 0.9rem; font-weight: 700; opacity: 0.85; }
.btn.action.ghost .action-sub { color: var(--ink-soft); }
.btn.action.quiet { filter: saturate(0.5); opacity: 0.7; }
@media (min-width: 720px) {
  .spell-actions { grid-template-columns: 1fr 1fr; max-width: 900px; }
  .spell-actions .btn:last-child { grid-column: 1 / -1; }
}

/* ---- play ---- */
.spell-run .title { gap: 0; }
.spell-body { gap: 10px; }
.spell-stage { align-content: start; gap: 10px; justify-items: center; }
.card-host { min-height: 0; width: 100%; display: grid; justify-items: center; }
.card-host:empty { display: none; }
.word-card { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 18px; border-radius: 28px; width: 100%; max-width: 560px; min-height: 96px;
  background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 3px #f3dcae, var(--lift); animation: pop 0.3s var(--ease); }
.word-card.pic-only { width: auto; min-height: 0; }
.word-pic { width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.word-pic .ic { width: 100%; height: 100%; }
.big-word { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: 0.45em; font-weight: 800; font-size: clamp(2.5rem, 13.5vw, 4.4rem); letter-spacing: 0.06em; line-height: 1.05; color: var(--ink); }
.big-word.lc { letter-spacing: 0.03em; }
.bw-part { white-space: nowrap; }
.covered-card { background: repeating-linear-gradient(45deg, var(--peacock-soft) 0 12px, #fff 12px 24px); box-shadow: inset 0 0 0 3px var(--peacock), var(--lift-sm); }
.cover-q { font-size: 3.4rem; font-weight: 800; color: var(--peacock); line-height: 1; }
.cover-btn { align-self: center; min-height: 72px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* letter slots */
.slots { --n: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 6px 0; }
.slot-group { display: inline-flex; gap: 4px; }
.lslot { width: min(54px, calc((100vw - 44px) / var(--n) - 4px)); min-width: 28px; height: clamp(48px, 15vw, 66px); border-radius: 14px; display: grid; place-items: center;
  font-size: clamp(1.7rem, 7.5vw, 2.5rem); font-weight: 800; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line), inset 0 -4px 0 rgba(61, 42, 63, 0.05); }
.lslot.given { background: var(--cream-2); color: var(--ink-soft); }
.lslot.next { box-shadow: inset 0 0 0 3px var(--mango), 0 0 0 4px rgba(255, 181, 46, 0.3); background: #fffbea; }
.lslot.filled { color: var(--peacock-deep); background: var(--peacock-soft); box-shadow: inset 0 0 0 2.5px var(--peacock); }
.lslot.helped { color: var(--lotus-deep); background: var(--lotus-soft); box-shadow: inset 0 0 0 2.5px var(--lotus); }
.lslot.pop { animation: pop 0.3s var(--spring); }
.lslot.given.filled { color: var(--ink-soft); background: var(--cream-2); box-shadow: inset 0 0 0 2.5px var(--line); }

/* controls: buddy + buttons, then the tiles */
.spell-controls { display: flex; flex-direction: column; gap: 10px; }
.spell-side { padding-bottom: 0; }
.spell-side .buddy { min-height: 64px; }
.spell-side .bubble { min-height: 52px; padding: 6px 14px; }
.spell-side > .btn { min-height: 56px; }
@media (max-width: 759px) { .spell-side > .btn { min-height: 64px; } }
.spell-tiles-host { display: grid; }

/* letter tiles: always at least 64px, nothing red, nothing lost */
.ltiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ltile { width: 68px; height: 68px; border: 0; border-radius: 20px; font-size: 2.2rem; font-weight: 800; color: var(--ink); touch-action: manipulation; padding: 0;
  background: linear-gradient(180deg, #fffefb, #fff1d6); box-shadow: inset 0 0 0 2.5px #f3dcae, inset 0 -5px 0 #f3dcae, var(--lift-sm); transition: transform 0.12s var(--ease), opacity 0.2s; }
.ltile:active { transform: translateY(3px); }
.ltile.used { opacity: 0.18; box-shadow: none; }
.ltile[disabled] { cursor: default; }
.ltile.shake { animation: nudge 0.3s 2; }
.ltile.glow { animation: pulse 1s ease-in-out infinite; box-shadow: inset 0 0 0 3px var(--mango), 0 0 0 5px rgba(255, 181, 46, 0.35), var(--lift-sm); }
.ltiles.letterboard { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 4px; max-width: 460px; margin: 0 auto; width: 100%; }
.letterboard .ltile { width: 100%; height: 64px; font-size: 2rem; border-radius: 16px; }

@media (max-width: 420px) {
  .spell-run, .spell-hub, .garden { padding-left: 10px; padding-right: 10px; }
}
@media (max-height: 760px) and (max-width: 520px) {
  .spell-run { gap: 8px; padding-top: 10px; padding-bottom: 12px; }
  .spell-run .progress-row { display: none; }
  .word-card { min-height: 80px; padding: 8px 14px; }
  .word-pic { width: 60px; height: 60px; }
  .cover-btn { min-height: 64px; font-size: 1.3rem; padding: 6px 24px; }
}
@media (min-width: 720px) and (orientation: landscape) {
  .spell-body { align-items: flex-start; }
  .spell-controls { flex: 1; max-width: 520px; }
  .ltile { width: 76px; height: 76px; }
  .ltiles.letterboard { grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: 6px; max-width: 560px; }
  .letterboard .ltile { height: 70px; }
  .lslot { width: 58px; height: 74px; }
}

/* ---- garden ---- */
.garden-title { margin: 0; font-size: 1.6rem; }
.garden-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-weight: 800; }
.garden-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.garden-group h2 { margin: 0 0 8px; font-size: 1.2rem; }
.garden-group .count { color: var(--ink-soft); font-weight: 700; }
.garden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.gword { min-height: 64px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 0; border-radius: 20px; text-align: left; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink);
  background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--line), var(--lift-sm); touch-action: manipulation; }
.gword.clean { background: linear-gradient(180deg, #fffdf2, #fff0c4); box-shadow: inset 0 0 0 2.5px var(--gold), var(--lift-sm); }
.gword.empty { color: var(--ink-soft); }
.gword .slot { width: 40px; height: 40px; flex: none; }
.gword .gw { min-width: 0; overflow-wrap: anywhere; }

/* ---- grown-up area ---- */
.spell-grown h3 { margin: 14px 0 4px; font-size: 1.05rem; color: var(--peacock-deep); }
.spell-list { margin-top: 8px; }
.spell-list table { margin-top: 6px; }
.spell-list td.dots { letter-spacing: 0.15em; color: var(--peacock-deep); white-space: nowrap; }
.mini-btn { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; font-weight: 800; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.spell-add textarea { font: inherit; padding: 10px 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2.5px var(--line); max-width: 460px; width: 100%; resize: vertical; }
.spell-add .btn { align-self: flex-start; margin-top: 6px; }
.sug-theme { margin-top: 8px; }
.sug-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sug-chip { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; font-weight: 800; letter-spacing: 0.04em; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.sug-chip[aria-pressed='true'] { background: var(--peacock-soft); color: var(--peacock-deep); box-shadow: inset 0 0 0 2.5px var(--peacock); }

.spell-actions .action-ic { color: var(--ink); }

@media (max-width: 420px) {
  .garden-group { padding: 12px 10px; }
  .gword { gap: 4px; padding: 4px 8px 4px 4px; }
  .gword .slot { width: 34px; height: 34px; }
}

/* the three-way language switch is wider than a 360px phone; tighten it everywhere */
@media (max-width: 400px) { .lang button { padding: 0 9px; min-width: 56px; font-size: 0.95rem; } }
.spell-switch { max-width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 30px; }
.spell-switch button { min-width: 0; padding: 0 14px; }
.welcome { overflow-x: hidden; overflow-y: auto; }
@media (max-height: 800px) {
  .welcome .halo { width: min(46vw, 210px); }
  .welcome .hero { gap: 6px; }
}