/* Spelling Hive: dusk plum ground, mint petals round a coral middle. */
:root{
  --lacquer:#201836;--lacquer-hi:#2c2249;--ink:#fbf7ff;--ink-soft:#cfc5e6;--ink-dim:#9a8fb8;
  --hair:rgba(178,236,214,.3);--brass:#9fe8cf;--brass-lo:#4fb393;--brass-hi:#d4f7ea;--jade:#3aa58a;
  --petal:#c6f1e1;--petal-hi:#e9fcf4;--petal-ink:#1d2540;--mid:#ff8f66;--mid-hi:#ffb08f;--mid-ink:#2b1408;
  --good:#7fe0b9;--bad:#ff9a8a;
  --serif:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI",system-ui,-apple-system,sans-serif;
  --sans:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
}
body{background:radial-gradient(120% 90% at 50% 0%,#3a2b62 0%,#241b3d 55%,#1a1430 100%) fixed;background-color:#241b3d;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.title{font-family:var(--serif);font-weight:900;color:var(--ink);text-shadow:0 3px 0 #120d22,0 8px 22px rgba(0,0,0,.45);font-style:normal}
.pill{font-family:var(--sans);color:#14302a;background:linear-gradient(180deg,var(--petal-hi),var(--brass) 55%,var(--brass-lo));box-shadow:0 1px 0 #fff9 inset,0 4px 0 #2d7a63,0 8px 16px rgba(0,0,0,.35);min-height:48px}
.pill:active{box-shadow:0 1px 0 #fff9 inset,0 2px 0 #2d7a63,0 4px 10px rgba(0,0,0,.3)}
.pill.soft{background:rgba(255,255,255,.08);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(207,197,230,.35)}
.link{color:var(--brass-hi);min-height:44px}
.card{background:linear-gradient(180deg,#3a2c63,var(--lacquer-hi) 45%);border-color:var(--hair)}
.card h2{font:900 1.6em/1.1 var(--serif);font-style:normal;color:var(--brass-hi)}
.row{background:rgba(255,255,255,.06);border-color:rgba(178,236,214,.18);min-height:48px;color:var(--ink)}
.row:focus-visible,.step:focus-visible,.petal:focus-visible,.icon-btn:focus-visible,.found:focus-visible{outline:3px solid var(--brass-hi);outline-offset:3px}
.toast{background:var(--lacquer-hi);color:var(--ink);font-weight:700}

/* home */
.home{gap:1em}
.home-head,.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em}
.home-icon{width:84px;height:84px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(4deg)}}
.home .title{font-size:clamp(2.4em,10vw,4.2em)}
.tagline{font-size:1.15em}
.stepper{display:flex;align-items:center;gap:.6em;background:rgba(0,0,0,.22);border:1px solid var(--hair);border-radius:999px;padding:.3em}
.step{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.1);font-size:1.6em;line-height:1;color:var(--ink)}
.step:disabled{opacity:.3}
.lv{min-width:9.5em;text-align:center;line-height:1.15}
.lv b{display:block;font-size:1.25em}
.lv small{color:var(--ink-soft)}
.home #play{font-size:1.35em;padding:.65em 3em}
.links{display:flex;flex-wrap:wrap;gap:.2em .6em;justify-content:center}

/* play */
.play{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"bar" "meter" "found" "say" "word" "felt" "dock";max-width:600px;margin:0 auto;left:0;right:0}
.side{display:contents}
.bar{grid-area:bar;padding:max(.5em,env(safe-area-inset-top)) .8em .3em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.round{width:56px;height:56px}
.rankbox{flex:1;text-align:center;line-height:1.1}
.rankbox b{display:block;font-size:1.3em;color:var(--brass-hi)}
.rankbox small,.score small{color:var(--ink-soft);font-size:.8em}
.score{min-width:48px;text-align:right;line-height:1.05}
.score b{display:block;font-size:1.6em;font-variant-numeric:tabular-nums}
.score b.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3);color:var(--good)}}

.meter{grid-area:meter;position:relative;height:26px;margin:.2em 1.4em}
.track{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.track i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.dots{position:absolute;inset:0}
.dots span{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#3a2f5c;border:2px solid rgba(255,255,255,.25);transition:background .3s,transform .3s}
.dots span.on{background:var(--brass);border-color:var(--brass-hi)}
.dots span.goal{border-color:var(--mid);box-shadow:0 0 0 3px rgba(255,143,102,.35)}
.dots span.goal::after{content:"";position:absolute;left:3px;top:-14px;width:2px;height:12px;background:var(--mid)}
.dots span.goal::before{content:"";position:absolute;left:5px;top:-14px;border:5px solid transparent;border-left:8px solid var(--mid);border-right:0}
.dots span.now{transform:scale(1.35)}

.found{grid-area:found;margin:.25em .9em 0;display:flex;align-items:center;gap:.7em;min-height:44px;padding:.35em .9em;border-radius:.8em;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);text-align:left;overflow:hidden}
.found b{flex:none;color:var(--brass-hi)}
.found span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-soft)}
.found span.has{text-transform:capitalize;color:var(--ink)}
.say{grid-area:say;height:1.9em;display:flex;align-items:center;justify-content:center;pointer-events:none}
.say span{padding:.2em .9em;border-radius:999px;font-weight:800;font-size:.95em;animation:pop .25s ease-out}
.say .good{background:var(--good);color:#0f2b22}
.say .bad{background:rgba(255,154,138,.18);color:var(--bad)}
.say .full{background:var(--mid);color:var(--mid-ink)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}}
.word{grid-area:word;height:1.5em;font:900 clamp(1.8em,8vw,2.6em)/1.5 var(--sans);text-align:center;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  display:flex;justify-content:center;align-items:center}
.word .m{color:var(--mid)}
.word .x{color:var(--ink-dim)}
.word .caret{display:inline-block;width:3px;height:1em;background:var(--brass);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.word.shake{animation:shake .38s}
.word.fly{animation:fly .45s ease-in forwards}
@keyframes fly{to{transform:translateY(-.8em) scale(.8);opacity:0}}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}

.felt{grid-area:felt;display:grid;place-items:center;min-height:0;position:relative}
.flower{position:relative;width:var(--s,300px);height:var(--s,300px)}
.petal{position:absolute;width:30%;height:30%;border-radius:50%;border:0;padding:0;font:900 calc(var(--s,300px)*.13)/1 var(--sans);text-transform:uppercase;
  color:var(--petal-ink);background:radial-gradient(circle at 38% 30%,var(--petal-hi),var(--petal) 60%,#9fd9c5);
  box-shadow:0 5px 0 #6fb9a2,0 10px 18px rgba(0,0,0,.35);transition:transform .12s,left .32s cubic-bezier(.3,1.3,.5,1),top .32s cubic-bezier(.3,1.3,.5,1);touch-action:manipulation}
.petal.mid{background:radial-gradient(circle at 38% 30%,var(--mid-hi),var(--mid) 62%,#e46c45);color:var(--mid-ink);box-shadow:0 5px 0 #b44f2f,0 10px 22px rgba(0,0,0,.4)}
.petal.press{transform:scale(.88)}
.petal:active{transform:scale(.9)}
.flower.spin .petal:not(.mid){transform:scale(.7)}

.dock{grid-area:dock;display:flex;justify-content:center;align-items:center;gap:1em;padding:.4em .8em max(.8em,env(safe-area-inset-bottom))}
.dock .pill{padding:.5em 1.4em;font-size:1.1em;min-width:5.5em}
.float{position:fixed;z-index:39;pointer-events:none;font:900 1.6em/1 var(--sans);color:var(--good);text-shadow:0 2px 8px rgba(0,0,0,.5);animation:rise .9s ease-out forwards}
@keyframes rise{to{transform:translateY(-70px);opacity:0}}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* cards */
.brand{display:block;text-align:center;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.75em;color:var(--ink-soft);margin:-.4em 0 .5em}
.big{display:flex;justify-content:center;gap:1.6em;margin:.2em 0 .5em;text-align:center}
.big b{display:block;font-size:1.8em;line-height:1.1;color:var(--ink)}
.big small{color:var(--ink-soft);font-size:.8em}
.words{columns:2 8em;column-gap:1em;margin:.4em 0;padding:0;list-style:none;text-transform:capitalize;max-height:40vh;overflow:auto}
.words li{padding:.1em 0;break-inside:avoid}
.words li.full{color:var(--mid);font-weight:800}
.words li.miss{color:var(--ink-dim)}
.how p{margin:.3em 0 .6em}
.how .ex{display:flex;gap:.4em;justify-content:center;margin:.4em 0 .8em}
.how .ex i{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;background:var(--petal);color:var(--petal-ink)}
.how .ex i.m{background:var(--mid);color:var(--mid-ink)}
.ranks{margin:.2em 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr auto;gap:.15em 1em;font-size:.9em}
.ranks li{display:contents}
.ranks li.now span{color:var(--brass-hi);font-weight:800}
.ranks li.goal span:first-child::after{content:" (goal)";color:var(--mid)}

/* a short, wide screen: the flower left, the rest right */
@media (min-aspect-ratio:23/20) and (max-height:620px){
  .play{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar" "felt side"}
  .side{display:flex;flex-direction:column;justify-content:center;gap:.15em;grid-area:side;min-height:0;padding-right:max(.6em,env(safe-area-inset-right))}
  .bar{padding-top:max(.3em,env(safe-area-inset-top))}
  .felt{padding-left:env(safe-area-inset-left)}
  .meter{margin:.1em .9em}
  .found{margin:.1em 0}
  .dock{padding:.2em 0 max(.3em,env(safe-area-inset-bottom))}
  .word{font-size:clamp(1.6em,6vh,2.4em)}
}
@media (max-height:480px){
  .home{flex-direction:row;gap:2em}
  .home-icon{display:none}
  .home .title{font-size:2.4em}
  .home-body{gap:.4em}
  .icon-btn{width:44px;height:44px}
  .icon-btn.round{width:48px;height:48px}
  .rankbox b{font-size:1.1em}
  .dock .pill{min-height:44px;padding:.35em 1em}
  .card .words{max-height:30vh}
  .how .ex{display:none}
  .how p{margin:.15em 0}
}