:root{
  --ink:#102038;
  --white:#fff;
  --green:#49f0b6;
  --gold:#ffd66b;
  --danger:#ffe0e6;
  --shadow:0 24px 70px rgba(4,12,31,.38);
  --app-height:100vh;
  --word-effect-duration:420ms;
  --hint-effect-duration:320ms;
  --completion-effect-duration:620ms;
  --cell-effect-stagger:34ms;
}
@supports (height:100svh){:root{--app-height:100svh}}
@supports (height:100dvh){:root{--app-height:100dvh}}
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:0;overflow:hidden}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--white);
  background:radial-gradient(circle at 20% 8%,rgba(111,182,255,.45),transparent 28%),radial-gradient(circle at 78% 22%,rgba(143,124,255,.46),transparent 30%),linear-gradient(160deg,#091326,#13224d 52%,#0a1a35);
  overscroll-behavior:none;
}
button{border:0;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.98)}
.shell{
  width:100%;
  height:var(--app-height);
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
}
.game{
  --guess-height:clamp(44px,8vh,76px);
  --wheel-size:clamp(190px,32vh,330px);
  --letter-size:clamp(50px,8vh,72px);
  position:relative;
  width:min(100%,480px);
  height:100%;
  max-height:900px;
  min-height:0;
  overflow:hidden;
  border-radius:34px;
  padding:14px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  gap:12px;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.18);
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.28),transparent 24%),linear-gradient(180deg,rgba(115,190,255,.98),rgba(123,109,246,.96) 50%,rgba(38,193,180,.96));
}
@supports (height:100dvh){
  .game{
    --guess-height:clamp(44px,8dvh,76px);
    --wheel-size:clamp(190px,32dvh,330px);
    --letter-size:clamp(50px,8dvh,72px);
  }
}
.game:before{content:"";position:absolute;inset:auto -20% -95px;height:220px;border-radius:50% 50% 0 0;background:rgba(8,28,64,.16);pointer-events:none}
.topbar,.levelbar,.status,.stats{position:relative;z-index:2;border-radius:22px;background:rgba(12,27,59,.22);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px}
.round{width:42px;min-width:42px;aspect-ratio:1;border-radius:50%;color:#fff;font-size:32px;line-height:1;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.brand{text-align:center;min-width:0}
.brand span,.levelbar span{margin:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:rgba(255,255,255,.72)}
h1,h2{margin:0}
h1{font-size:clamp(26px,7vw,38px);line-height:.95;letter-spacing:-.04em}
h2{font-size:18px}
.topActions{display:flex;align-items:center;gap:7px}
.muteButton{font-size:19px}
.muteButton[aria-pressed="true"]{color:#77879a;background:rgba(255,255,255,.12)}
.coins{min-width:72px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);background:linear-gradient(180deg,#fff7bd,var(--gold));box-shadow:inset 0 -3px 0 rgba(122,86,0,.16),0 8px 18px rgba(46,37,0,.18)}
.levelbar{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.levelIdentity{min-width:0;display:grid;gap:4px}
.modeLine{display:flex;align-items:center;gap:8px;min-width:0}
.modePicker{display:flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:rgba(9,26,58,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.modePicker button{min-height:36px;padding:4px 8px;border-radius:999px;color:rgba(255,255,255,.72);background:transparent;font-size:9px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.modePicker button[aria-pressed="true"]{color:#073b35;background:linear-gradient(180deg,#d5fff3,var(--green));box-shadow:0 5px 12px rgba(8,89,84,.18)}
html[data-mode="crazy"] .modePicker button[aria-pressed="true"]{color:#563b00;background:linear-gradient(180deg,#fff7bd,var(--gold));box-shadow:0 5px 12px rgba(85,57,0,.18)}
.progress{width:58px;min-width:58px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px;color:var(--ink);background:conic-gradient(var(--green) var(--progress,0%),rgba(255,255,255,.36) 0);box-shadow:inset 0 0 0 6px rgba(255,255,255,.88),0 8px 18px rgba(0,0,0,.14);font-size:13px}
.progress strong{font-size:16px}
.boardArea{position:relative;z-index:1;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:8px}
.glow{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55;background:rgba(255,255,255,.4)}
.glow.a{width:130px;height:130px;top:16px;left:12px}
.glow.b{width:180px;height:180px;bottom:0;right:-30px}
.wordGrid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  gap:clamp(3px,1.2vw,7px);
  height:min(100%,calc(var(--rows) * 48px));
  width:auto;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  aspect-ratio:var(--cols)/var(--rows);
  padding:clamp(5px,1.2vh,10px);
  border-radius:24px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 45px rgba(17,39,91,.2);
}
.cell{min-width:0;min-height:0;border-radius:clamp(7px,2.3vw,13px);display:grid;place-items:center;font-weight:950;font-size:clamp(15px,4.5vw,25px);text-transform:uppercase;color:transparent}
.cell.empty{background:transparent}
.cell.hiddenCell{background:rgba(255,255,255,.33);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.28)}
.cell.revealed{color:#172846;background:linear-gradient(180deg,#fff,#f7fbff);box-shadow:inset 0 -4px 0 rgba(25,59,99,.08),0 6px 14px rgba(28,50,94,.12)}
.cell.hintCell{color:#17496c;background:linear-gradient(180deg,#eaffff,#abf6e0)}
.cell.activeLock{outline:3px solid var(--gold);outline-offset:-2px;box-shadow:0 0 0 3px rgba(255,214,107,.17),inset 0 -4px 0 rgba(0,0,0,.08),0 0 20px rgba(255,214,107,.28)}
.cell.activeLock.hiddenCell{background:repeating-linear-gradient(135deg,rgba(255,255,255,.42) 0 7px,rgba(255,240,174,.28) 7px 14px)}
.cell.lockedCell.hiddenCell{opacity:.48;filter:saturate(.55)}
.cell.activeLock.hiddenCell:after{content:"?";color:rgba(105,72,0,.58);font-size:clamp(10px,3vw,16px)}
.cell.lockedCell.hiddenCell:after{content:"?";color:rgba(255,255,255,.5);font-size:18px}
.status{z-index:3;padding:8px 12px;text-align:center;min-width:0}
.lockstepStatus{width:max-content;max-width:100%;margin:0 auto 2px;padding:4px 9px;border-radius:999px;color:#5a3b00;background:linear-gradient(180deg,#fff7c7,#ffe07a);box-shadow:inset 0 0 0 1px rgba(105,72,0,.13),0 5px 13px rgba(85,57,0,.12);font-size:11px;font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lockstepStatus[hidden]{display:none}
.guess{height:var(--guess-height);min-height:var(--guess-height);display:grid;place-items:center;overflow:hidden;white-space:nowrap;font-size:clamp(20px,5vw,28px);line-height:1;letter-spacing:.06em;font-weight:1000;text-shadow:0 6px 18px rgba(0,0,0,.22)}
.guess.hasSelection{font-size:clamp(22px,6.5vw,38px);letter-spacing:.14em}
.message{min-height:20px;font-weight:850;color:rgba(255,255,255,.78)}
.message.good{color:#caffed}
.message.bad{color:var(--danger)}
#levelHint{margin:2px 0 0;color:rgba(255,255,255,.7);font-size:13px}
.wheelArea{z-index:4;position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:2px 0}
.wheel{position:relative;width:min(100%,var(--wheel-size));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92) 0 24%,rgba(255,255,255,.22) 25% 58%,rgba(255,255,255,.13) 59%);box-shadow:0 20px 50px rgba(17,34,77,.28),inset 0 0 0 1px rgba(255,255,255,.35);user-select:none;touch-action:none}
.wheel svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wheel polyline{fill:none;stroke:rgba(42,197,171,.82);stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))}
.letter{position:absolute;width:var(--letter-size);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;color:var(--ink);background:linear-gradient(180deg,#fff,#e7f2ff);font-size:clamp(22px,5.5vw,34px);font-weight:1000;box-shadow:0 10px 20px rgba(28,54,105,.22),inset 0 -5px 0 rgba(31,61,112,.1);z-index:3}
.letter:active{transform:translate(-50%,-50%) scale(.98)}
.letter.selected{background:linear-gradient(180deg,#d5fff3,var(--green));color:#043c35;box-shadow:0 12px 22px rgba(8,89,84,.25),inset 0 -5px 0 rgba(0,0,0,.1)}
.wheelCore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(58px,9vh,76px);aspect-ratio:1;border-radius:50%;z-index:2;display:grid;place-content:center;text-align:center;pointer-events:none;color:#24405f;text-transform:uppercase;background:radial-gradient(circle,rgba(255,255,255,.94),rgba(228,242,255,.82));box-shadow:0 10px 18px rgba(28,54,105,.15),inset 0 0 0 1px rgba(255,255,255,.8)}
.wheelCore span{font-size:12px;font-weight:1000;letter-spacing:.09em}
.wheelCore small{font-size:8px;font-weight:900;letter-spacing:.13em;color:#53708e}
.tool,.clear{position:absolute;min-height:40px;border-radius:999px;padding:9px 13px;color:#fff;font-size:13px;font-weight:950;background:rgba(13,27,61,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 18px rgba(0,0,0,.12);z-index:5}
.shuffle{left:2px;top:4px}
.hint{right:2px;top:4px}
.clear{bottom:4px;background:rgba(13,27,61,.28)}
.stats{z-index:3;display:flex;justify-content:space-around;padding:9px 14px;font-weight:800;color:rgba(255,255,255,.78)}
.stats strong{color:#fff}
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(3,10,26,.62);backdrop-filter:blur(8px)}
.modal.hidden{display:none}
.modalCard{width:min(100%,390px);max-height:calc(var(--app-height) - 24px);overflow:auto;border-radius:30px;padding:28px 22px 22px;text-align:center;color:#102038;background:linear-gradient(180deg,#fff,#edf7ff);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.badge{width:64px;aspect-ratio:1;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;color:#064238;background:linear-gradient(180deg,#cbffef,var(--green));font-size:36px;font-weight:1000}
.modalCard h2{font-size:28px}
.modalAnswer{margin:14px auto 4px;padding:10px 14px;border-radius:17px;color:#12335d;background:linear-gradient(180deg,#eaffff,#baf6e3);box-shadow:inset 0 0 0 1px rgba(32,109,101,.13),0 8px 18px rgba(30,72,102,.12);font-size:clamp(24px,7vw,34px);line-height:1.2;letter-spacing:.1em;font-weight:1000;overflow-wrap:anywhere}
.modalAnswer[hidden]{display:none}
.modalCard p{color:#526175}
.modalCard button{min-width:170px;min-height:46px;border-radius:999px;padding:14px 18px;color:#102038;font-weight:1000;background:linear-gradient(180deg,#fff7bd,#ffd66b);box-shadow:inset 0 -4px 0 rgba(91,65,0,.13),0 10px 18px rgba(85,57,0,.18)}
.modalCard button:disabled{cursor:wait;opacity:.58;transform:none;box-shadow:inset 0 -2px 0 rgba(91,65,0,.08)}
.levelMenu{position:fixed;inset:0;z-index:22;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(3,10,26,.72);backdrop-filter:blur(10px)}
.levelMenu.hidden{display:none}
.levelMenuCard{width:min(100%,560px);max-height:calc(var(--app-height) - 20px);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;border-radius:30px;padding:18px;color:#102038;background:linear-gradient(180deg,#fff,#edf7ff);box-shadow:0 30px 90px rgba(0,0,0,.4)}
.levelMenuCard header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.levelMenuCard header span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#63748b}
.levelMenuCard h2{font-size:28px}
.levelMenuClose{width:44px;min-width:44px;aspect-ratio:1;border-radius:50%;font-size:28px;line-height:1;color:#223852;background:#dceaff}
#levelMenuSummary{margin:0;color:#5b6d83;font-weight:800}
.levelGrid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;padding:2px 4px 4px}
.levelChoice{min-height:74px;border-radius:18px;padding:8px 5px;display:grid;place-content:center;gap:3px;text-align:center;color:#26415e;background:#e3edf8;box-shadow:inset 0 -3px 0 rgba(27,55,84,.08)}
.levelChoice strong{font-size:22px;line-height:1}
.levelChoice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:850}
.levelChoice.unlocked{background:linear-gradient(180deg,#e8fff8,#baf6e3)}
.levelChoice.completed{background:linear-gradient(180deg,#fff7c7,#ffe07a)}
.levelChoice.current{outline:4px solid #5d7cff;outline-offset:-4px}
.levelChoice.locked{color:#8795a7;background:#dce3eb;cursor:not-allowed;opacity:.72}
.levelChoice:focus-visible,.levelMenuClose:focus-visible,#helpButton:focus-visible,#settingsButton:focus-visible,#resetProgress:focus-visible{outline:4px solid #5d7cff;outline-offset:2px}
.levelMenuActions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#helpButton,#settingsButton,#resetProgress{min-height:44px;border-radius:999px;padding:10px 16px;font-weight:950}
#helpButton{color:#064238;background:linear-gradient(180deg,#e8fff8,#baf6e3);box-shadow:inset 0 0 0 1px #83dfc3}
#settingsButton{color:#24415e;background:#e4f4ff;box-shadow:inset 0 0 0 1px #b9ddf5}
#resetProgress{color:#8a273c;background:#ffe5eb;box-shadow:inset 0 0 0 1px #ffc3d0}
.appDialog{width:min(94vw,520px);max-height:calc(var(--app-height) - 24px);padding:0;border:0;border-radius:28px;color:#eef8ff;background:transparent;box-shadow:var(--shadow);overflow:visible}
.appDialog::backdrop{background:rgba(3,10,26,.72);backdrop-filter:blur(10px)}
.appDialogCard{max-height:calc(var(--app-height) - 24px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(155deg,#17386b,#0a1b3e 68%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.appDialogCard>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px}
.appDialogCard>header span{font-size:9px;letter-spacing:.17em;text-transform:uppercase;font-weight:900;color:#84f0d1}
.appDialogCard h2{margin-top:4px;font-size:28px}
.appDialogClose{width:44px;min-width:44px;height:44px;border-radius:15px;color:#eaf7ff;background:rgba(255,255,255,.12);font-size:27px}
.appDialogContent{min-height:0;overflow:auto;padding:5px 18px 18px;color:#d8e6f5;line-height:1.45}
.appDialogActions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:12px 18px 18px;border-top:1px solid rgba(255,255,255,.09)}
.appDialogActions button{min-height:44px;padding:9px 15px;border-radius:13px;color:#eaf7ff;background:rgba(255,255,255,.12);font-weight:950}
.appDialogActions .primary{color:#073b35;background:linear-gradient(180deg,#caffed,var(--green))}
.appDialogActions .danger{color:#7b2036;background:#ffe3ea}
.settingRow{display:grid;grid-template-columns:1fr minmax(130px,190px);gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.settingRow strong{display:block;color:#fff}.settingRow small{display:block;margin-top:3px;color:#9fb6d0}
.settingRow select{min-height:42px;border:1px solid rgba(255,255,255,.18);border-radius:11px;padding:7px 10px;color:#fff;background:#183762}
.toggleLabel{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#fff;font-weight:900}.toggleLabel input{width:23px;height:23px;accent-color:var(--green)}
.settingsNote{margin:12px 0 0;color:#9fb6d0}.audioStatus{margin:10px 0 0;color:#9fb6d0;font-size:11px;line-height:1.4}.resetPanel{text-align:center}.resetBadge{width:72px;height:72px;margin:3px auto 13px;display:grid;place-items:center;border-radius:22px;color:#073b35;background:linear-gradient(180deg,#d8fff4,var(--green));font-size:34px;font-weight:1000}
.helpPanel{display:grid;gap:12px}.helpPanel>p{margin:0}.helpRules{display:grid;gap:8px}.helpRule{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:10px;border-radius:16px;background:rgba(255,255,255,.08)}.helpRule>b{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#073b35;background:linear-gradient(180deg,#d8fff4,var(--green));font-size:18px}.helpRule strong,.helpRule small{display:block}.helpRule small{margin-top:2px;color:#a9bed5}.tutorialPresentationMount{min-height:190px;border-radius:20px;overflow:hidden;background:rgba(4,14,34,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.tutorialVisualFallback{margin:0;color:#9fb6d0;font-size:12px}

.cell.effectCell{animation-delay:calc(var(--effect-index)*var(--cell-effect-stagger))}
.cell.effectTarget{animation:targetWordReveal var(--active-effect-duration,var(--word-effect-duration)) cubic-bezier(.2,.85,.25,1.18) both;animation-delay:calc(var(--effect-index)*var(--cell-effect-stagger))}
.cell.effectHint{animation:hintCellReveal var(--active-effect-duration,var(--hint-effect-duration)) ease-out both}
.cell.effectCompletion{animation:completionCellReveal var(--active-effect-duration,var(--completion-effect-duration)) cubic-bezier(.18,.82,.25,1.18) both;animation-delay:calc(var(--effect-index)*var(--cell-effect-stagger))}
.game[data-effect="bonus"] .wheel{animation:bonusWordBurst var(--active-effect-duration,var(--word-effect-duration)) ease both}
.game[data-effect="shuffle"] .wheel{animation:wheelShuffle var(--active-effect-duration,var(--word-effect-duration)) ease both}
.game[data-effect="invalid"] .wheel{animation:invalidWheel var(--active-effect-duration,var(--word-effect-duration)) ease both}
html[data-motion-profile="cinematic"] .letter.selected{box-shadow:0 0 0 6px rgba(73,240,182,.16),0 16px 30px rgba(8,89,84,.3),inset 0 -5px 0 rgba(0,0,0,.1)}
html[data-motion-profile="cinematic"] .modal:not(.hidden) .modalCard{animation:completionCard var(--completion-effect-duration) cubic-bezier(.18,.82,.25,1.12) both}
html[data-motion-profile="instant"] *,html[data-motion-profile="instant"] *:before,html[data-motion-profile="instant"] *:after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){html[data-motion="system"] *,html[data-motion="system"] *:before,html[data-motion="system"] *:after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@keyframes targetWordReveal{0%{opacity:.25;transform:scale(.55) rotate(-7deg);filter:brightness(1.8)}55%{opacity:1;transform:scale(1.16) rotate(1deg);box-shadow:0 0 26px rgba(73,240,182,.62),inset 0 -4px 0 rgba(25,59,99,.08)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes hintCellReveal{0%{transform:scale(.7);filter:brightness(1.9)}55%{transform:scale(1.13);box-shadow:0 0 24px rgba(255,214,107,.7)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes completionCellReveal{0%{transform:scale(.58);filter:brightness(2)}45%{transform:scale(1.2);box-shadow:0 0 28px rgba(255,214,107,.8)}75%{transform:scale(.96)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes bonusWordBurst{0%,100%{transform:scale(1)}42%{transform:scale(1.035);box-shadow:0 0 0 8px rgba(255,214,107,.15),0 24px 58px rgba(17,34,77,.32),inset 0 0 0 1px rgba(255,255,255,.35)}}
@keyframes wheelShuffle{0%,100%{transform:rotate(0)}45%{transform:rotate(7deg) scale(1.025)}72%{transform:rotate(-4deg)}}
@keyframes invalidWheel{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@keyframes completionCard{0%{opacity:0;transform:translateY(14px) scale(.86)}55%{opacity:1;transform:translateY(0) scale(1.04)}100%{transform:scale(1)}}
@media(max-height:820px){
  .game{--guess-height:clamp(40px,7vh,58px);--wheel-size:clamp(180px,30vh,270px);--letter-size:clamp(48px,7.2vh,62px);gap:8px;padding:10px;border-radius:26px}
  .topbar{padding:7px 9px}
  .round{width:38px;min-width:38px}
  .coins{height:38px;min-width:66px}
  h1{font-size:clamp(24px,5.6vw,32px)}
  .levelbar{padding:6px 9px}
  .modePicker button{min-height:34px;padding:3px 8px}
  .progress{width:48px;min-width:48px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.88),0 6px 14px rgba(0,0,0,.12)}
  .boardArea{padding:3px}
  .status{padding:4px 9px}
  .message{min-height:18px;font-size:13px}
  .stats{padding:6px 10px;font-size:13px}
  .tool,.clear{min-height:36px;padding:7px 11px;font-size:12px}
}
@media(max-height:700px){
  .game{--guess-height:38px;--wheel-size:clamp(168px,29vh,215px);--letter-size:clamp(44px,7vh,52px);gap:5px;padding:6px;border-radius:20px}
  .topbar{padding:4px 7px;border-radius:16px}
  .round{width:34px;min-width:34px;font-size:27px}
  .coins{height:34px;min-width:62px;font-size:13px}
  .brand span{display:none}
  h1{font-size:24px}
  .levelbar{padding:4px 8px;border-radius:16px}
  .levelbar span{font-size:8px}
  .modeLine{gap:5px}
  .modePicker button{min-height:32px;padding:2px 7px;font-size:8px}
  .lockstepStatus{font-size:10px;padding:3px 7px}
  h2{font-size:15px}
  .progress{width:40px;min-width:40px;font-size:11px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.88)}
  .progress strong{font-size:13px}
  .wordGrid{padding:4px;border-radius:16px}
  .status{padding:2px 7px;border-radius:16px}
  .guess.hasSelection{font-size:clamp(20px,5.5vw,28px)}
  .message{min-height:16px;font-size:12px}
  #levelHint{display:none}
  .wheelCore{width:54px}
  .wheelCore span{font-size:10px}
  .wheelCore small{font-size:7px}
  .tool,.clear{min-height:34px;padding:6px 10px;font-size:11px}
  .stats{padding:4px 8px;border-radius:14px;font-size:12px}
}
@media(max-height:560px){
  .game{--guess-height:32px;--wheel-size:clamp(150px,28vh,170px);--letter-size:44px;gap:4px;padding:5px}
  .modeLine>span{display:none}
  .progress{width:36px;min-width:36px}
  .message{min-height:14px;font-size:11px}
  .stats{padding:3px 6px}
  .tool,.clear{min-height:32px;padding:5px 8px}
  .modalCard{padding:18px 16px 16px}
  .badge{width:50px;margin-bottom:8px;font-size:28px}
  .modalCard h2{font-size:23px}
}
@media(max-width:360px){
  .game{padding-left:5px;padding-right:5px}
  .tool,.clear{padding-left:8px;padding-right:8px}
  .levelbar{gap:5px}
  h2{font-size:14px}
  .levelMenuCard{padding:12px;gap:8px;border-radius:22px}
  .levelGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .levelChoice{min-height:62px;border-radius:14px;padding:5px 3px}
  .levelChoice strong{font-size:19px}
}
.game-tip{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));z-index:12;width:max-content;max-width:min(calc(100% - 24px),430px);display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#effcff;background:rgba(7,25,55,.9);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(14px);font-size:12px;font-weight:850;line-height:1.35;text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,12px) scale(.98);transition:opacity .34s ease,transform .34s ease,visibility .34s ease;pointer-events:none;will-change:opacity,transform}
.game-tip.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.game-tip.is-fading{opacity:0;visibility:hidden;transform:translate(-50%,-6px) scale(.98)}
.game-tip-icon{flex:0 0 auto;color:#71f0d1;text-shadow:0 0 12px rgba(113,240,209,.65)}
.game-tip-text{min-width:0}
html[data-motion-profile="instant"] .game-tip{transition:none}
@media(max-width:520px){.game-tip{max-width:calc(100% - 18px);padding:8px 11px;font-size:11px}}
@media(max-height:900px) and (min-width:700px){
  .game{
    --guess-height:clamp(40px,8vh,58px);
    --wheel-size:min(44vh,330px);
    --letter-size:clamp(48px,8vh,66px);
    width:min(100%,820px);
    grid-template-columns:minmax(250px,1fr) minmax(280px,.9fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "top top"
      "level wheel"
      "board wheel"
      "status stats";
    gap:8px;
    padding:10px;
  }
  .topbar{grid-area:top}
  .levelbar{grid-area:level}
  .boardArea{grid-area:board}
  .status{grid-area:status;align-self:end;overflow:hidden}
  .status .guess{font-size:clamp(16px,2.1vw,24px);letter-spacing:.04em}
  .status .guess.hasSelection{font-size:clamp(18px,2.4vw,30px);letter-spacing:.08em}
  .wheelArea{grid-area:wheel;align-self:stretch}
  .stats{grid-area:stats;align-self:end}
  .wheel{width:min(100%,var(--wheel-size))}
  #levelHint{display:block}
}