@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
html.app-booting,html.app-booting body{background:#000!important}
html.app-booting #gameCanvas{visibility:hidden}
:root{--ink:#573b2b;--shadow:0 12px 0 rgba(105,70,42,.12),0 18px 34px rgba(105,70,42,.13)}
*{box-sizing:border-box} body{margin:0;min-height:100vh;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:#fffaf3;overflow-x:hidden}
.app{width:min(100%,540px);margin:auto;padding:20px 20px 36px;min-height:100vh;display:flex;flex-direction:column}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.brand{font-size:29px;font-weight:900;letter-spacing:4px;color:#7767cc}.brand span{color:#ff8da1}.pill{background:white;border:3px solid #eee7ff;border-radius:99px;padding:8px 13px;font-weight:900;box-shadow:0 5px 0 #eee7ff}.pill b{color:#ff9e4f}
.card{background:#fff;border:5px solid #fff;border-radius:30px;box-shadow:var(--shadow);overflow:hidden;position:relative;aspect-ratio:3/2}.sheet{position:absolute;width:300%;height:auto;max-width:none;transition:left .35s ease,top .35s ease}
.slots{display:flex;justify-content:center;gap:7px;min-height:55px}.slot{width:47px;height:52px;background:white;border:3px solid #e7e1f8;border-radius:14px;display:grid;place-items:center;font-size:25px;font-weight:900;color:#6e5fc4;box-shadow:0 5px 0 #e7e1f8;transition:.18s}.slot.filled{transform:translateY(-3px);background:#fffdf8}.slot.good{background:#d7f5df;border-color:#a8e3b8;box-shadow:0 5px 0 #a8e3b8;color:#399358}.slot.bad{animation:shake .28s;background:#ffe3e5;border-color:#ffb6be}
.wheel-wrap{position:relative;width:250px;height:250px;margin:14px auto 8px;touch-action:none;user-select:none}.wheel{position:absolute;inset:11px;border-radius:50%;background:linear-gradient(145deg,#f0eaff,#fff);border:4px solid white;box-shadow:var(--shadow),inset 0 0 0 3px #e7ddff}.wheel:after{content:"✦";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:30px;color:#c7bdf0}.trace{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.trace polyline{fill:none;stroke:#9b8be8;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.65}.letter{position:absolute;z-index:2;left:50%;top:50%;width:58px;height:58px;margin:-29px;border:0;border-radius:50%;background:white;color:#535d79;font:900 27px Nunito,sans-serif;box-shadow:0 6px 0 #d9d1ef,0 9px 14px #cfc9e6;cursor:pointer;transform:rotate(var(--a)) translateY(-91px) rotate(calc(-1 * var(--a)));transition:filter .15s,background .15s,color .15s,box-shadow .15s}.letter:hover{filter:brightness(1.04)}.letter.selected{background:#8f7cdd;color:white;box-shadow:0 5px 0 #6958bd,0 8px 14px #cfc9e6}
.wheel{inset:0}.letter{transform:rotate(var(--a)) translateY(-82px) rotate(calc(-1 * var(--a)))}.actions{margin-top:0}
.actions{display:flex;justify-content:center;gap:12px}.action{border:0;border-radius:17px;padding:11px 17px;font:900 14px Nunito;background:white;color:#71809c;box-shadow:0 5px 0 #e8e3f0;cursor:pointer}.action.hint{background:#fff1b9;box-shadow:0 5px 0 #f0d982;color:#9b7921}
.menu-screen{position:fixed;inset:0;background:rgba(87,76,116,.25);backdrop-filter:blur(7px);display:grid;place-items:center;padding:24px;z-index:5;opacity:0;visibility:hidden;pointer-events:none}.menu-screen.show{opacity:1;visibility:visible;pointer-events:auto}.modal{text-align:center;background:#fffaf5;border:5px solid white;border-radius:32px;padding:30px;box-shadow:var(--shadow);max-width:380px}.modal h2{margin:5px 0;color:#6d5bc7;font-size:30px}.menu-screen{z-index:10;background:#fffaf3;backdrop-filter:none;overflow:hidden;padding:0}.menu-screen:before,.menu-screen:after{content:"";position:absolute;border-radius:50%;z-index:-1}.menu-screen:before{width:460px;height:460px;left:-180px;top:-190px;background:#fff0da}.menu-screen:after{width:420px;height:420px;right:-170px;bottom:-190px;background:#ffe0d2}.menu-screen .modal{width:min(100%,540px);max-width:none;min-height:100vh;padding:20px 20px 36px;background:transparent;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;align-items:center}.menu-screen h1{align-self:flex-start;margin:0;color:#7767cc;font-size:29px;line-height:40px;letter-spacing:4px}.menu-screen h1 span{color:#ff8da1}.point-card{position:relative;width:min(100%,360px);margin-top:64px;padding:29px 24px 25px;overflow:hidden;border:5px solid #fff;border-radius:30px;background:linear-gradient(145deg,#f0ebff 0%,#fff 58%,#fff4d2 100%);box-shadow:0 10px 0 #e5def8,0 18px 35px rgba(92,83,125,.16)}.point-card:before{content:"★";position:absolute;right:18px;top:10px;color:#ffd56b;font-size:54px;opacity:.55;transform:rotate(12deg)}.point-caption{position:relative;margin:0 0 5px!important;color:#8d83ae;font-size:13px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.menu-points{position:relative;display:block;color:#6958bd;font-size:45px;font-weight:900;line-height:1.1}.point-progress{position:relative;width:128px;height:7px;margin:18px auto 0;border-radius:99px;background:#e2dcf3;overflow:hidden}.point-progress:after{content:"";display:block;width:var(--progress,16.67%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#f6a44f,#e8792d)}.menu-screen .menu-button{min-width:190px;margin-top:44px;font-size:19px;padding:15px 34px}.menu-button{border:0;background:#f39a3f;color:#fff;font:900 17px Nunito;padding:13px 26px;border-radius:17px;box-shadow:0 6px 0 #b85f22;cursor:pointer}
@keyframes shake{25%{translate:-5px}50%{translate:5px}75%{translate:-3px}}
.rank-name{position:relative;margin:8px 0 14px;color:#6958bd;font-size:18px;font-weight:900}
.rank-list{position:relative;display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin-top:18px}
.rank-icon{flex:1;min-width:0;font-size:24px;line-height:1;filter:grayscale(1);opacity:.35;transform:scale(.9);transition:filter .3s,opacity .3s,transform .3s}
.rank-icon.current{filter:none;opacity:1;transform:scale(1.2)}
.point-card .point-progress{width:100%;margin-top:18px}
.menu-button.secondary{margin-top:16px;background:#fff;color:#6958bd;box-shadow:0 6px 0 #e5def8}
.language-pair-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,360px);margin-top:48px}
.language-pair-button{display:grid;place-items:center;min-height:76px;padding:8px;border:3px solid var(--ink);border-radius:14px;background:#fffbea;box-shadow:0 4px 0 var(--ink);cursor:pointer;font-size:38px;line-height:1}
.language-pair-button:disabled{background:#b4b4b4!important;color:#707070;border-color:#707070!important;box-shadow:0 4px 0 #707070;cursor:not-allowed;filter:grayscale(1)}
.language-pair-button:hover{transform:translateY(-2px);filter:brightness(1.04)}
.language-pair-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.language-pair-button img{display:block;width:58px;height:36px;object-fit:contain;border:2px solid var(--ink);border-radius:4px}
.help-message{max-width:390px;margin:24px 0 0;color:var(--ink);font-size:19px;line-height:1.5;font-weight:800}
.abandon-actions{display:flex;gap:14px;width:min(100%,390px);margin-top:34px}
.abandon-actions .menu-button{flex:1;min-width:0!important;margin-top:0!important;padding:13px 18px;font-size:18px;line-height:1.1;white-space:nowrap}
@media(max-width:420px){.abandon-actions{gap:10px}.abandon-actions .menu-button{padding:11px 10px;font-size:16px}}
#gameCanvas #abandonScreen .abandon-actions .menu-button{min-width:0!important;min-height:0!important;margin-top:0!important;padding:13px 18px!important;font-size:18px!important;line-height:1.1;white-space:nowrap}
@media(max-width:420px){#gameCanvas #abandonScreen .abandon-actions .menu-button{padding:11px 10px!important;font-size:16px!important}}
.language-list{display:flex;flex-direction:column;gap:12px;width:min(100%,360px);margin:28px 0}
.language-option{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;border:3px solid #eee7ff;border-radius:17px;background:#fff;color:#535d79;font:900 18px Nunito,sans-serif;text-align:left;cursor:pointer;box-shadow:0 5px 0 #e5def8}
.language-flag{display:block;width:42px;height:28px;object-fit:contain;overflow:hidden;border-radius:4px;box-shadow:0 1px 4px rgba(64,80,108,.25)}
.language-option.active{border-color:#f39a3f;background:#fff3e3;box-shadow:0 5px 0 #f39a3f}
.language-option:disabled{background:#b4b4b4;color:#707070;border-color:#707070;box-shadow:0 5px 0 #707070;cursor:not-allowed;filter:grayscale(1)}
#languageScreen{z-index:11}
#gameCanvas .menu-screen .menu-button.secondary{margin-top:16px}
#gameCanvas #languageScreen .modal{justify-content:center}
/* Единый виртуальный холст: адаптация выполняется масштабом всего интерфейса. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{min-height:0;display:block}
.reserved-space{position:fixed;z-index:50;left:0;top:calc(100% - 70px);width:100%;height:70px;background:transparent;pointer-events:none}
#gameCanvas{position:fixed;left:50%;top:0;width:540px;height:960px;flex:none;transform:translateX(-50%) scale(var(--canvas-scale,1));transform-origin:top center}
#gameCanvas .app{width:540px;height:960px;min-height:0;padding:20px 20px 24px;display:flex;flex-direction:column}
#gameCanvas header{margin-bottom:16px}
#gameCanvas .brand{font-size:29px}
#gameCanvas .pill{padding:8px 13px}
#gameCanvas .card{width:auto;align-self:stretch;border-width:5px;border-radius:30px}
#gameCanvas .slot{width:49px;height:55px;font-size:26px;border-radius:15px}
#gameCanvas .wheel-wrap{width:263px;height:263px;margin:auto}
#gameCanvas .letter{width:61px;height:61px;margin:-30.5px;font-size:28px;transform:rotate(var(--a)) translateY(-86px) rotate(calc(-1 * var(--a)))}
#gameCanvas .actions{display:flex;align-self:stretch;margin-top:0}
#gameCanvas .action{padding:11px 17px;font-size:14px}
#gameCanvas .menu-screen{
  position:absolute;
  top:0;
  left:50%;
  right:auto;
  bottom:auto;
  width:var(--screen-width,540px);
  height:var(--screen-height,960px);
  transform:translateX(-50%);
}
#gameCanvas .menu-screen .modal{width:540px;min-height:960px;padding:20px 20px 24px}
#gameCanvas .menu-screen h1{font-size:29px;line-height:40px}
#gameCanvas .point-card{width:470px;margin-top:64px;padding:46px 32px 39px;border-radius:38px}
#gameCanvas .point-card:before{right:25px;top:15px;font-size:68px}
#gameCanvas .point-caption{font-size:17px;letter-spacing:2.5px}
#gameCanvas .menu-points{font-size:64px}
#gameCanvas .point-progress{width:190px;height:11px;margin-top:26px}
#gameCanvas .menu-screen .menu-button{min-width:270px;margin-top:82px;font-size:26px;padding:21px 48px;border-radius:22px}
#gameCanvas .app>.card{width:auto}
#gameCanvas .app header .brand{font-size:33px;letter-spacing:4.5px}
#gameCanvas .app header .pill{padding:10px 16px;font-size:17px}
#gameCanvas .app .slot{width:54px;height:60px;font-size:29px;border-radius:16px}
#gameCanvas .app .wheel-wrap{width:363px;height:363px}
#gameCanvas .app .letter{width:64px;height:64px;margin:-32px;font-size:30px;transform:rotate(var(--a)) translateY(-130px) rotate(calc(-1 * var(--a)))}
#gameCanvas .app .action{padding:13px 20px;font-size:16px;border-radius:19px}
.sheet{transition:none!important;will-change:transform,opacity}
.sheet.picture-unavailable{visibility:hidden}
.sheet.picture-exit,.sheet.picture-enter{animation-duration:.36s;animation-timing-function:linear}
.sheet.picture-exit{animation-name:pictureExit;animation-fill-mode:forwards;z-index:1}
.sheet.picture-enter{animation-name:pictureEnter}
.sheet.swipe-left-to-right{--swipe-x:100%;--swipe-y:0%;--enter-x:-100%;--enter-y:0%}
.sheet.swipe-right-to-left{--swipe-x:-100%;--swipe-y:0%;--enter-x:100%;--enter-y:0%}
.sheet.swipe-top-to-bottom{--swipe-x:0%;--swipe-y:100%;--enter-x:0%;--enter-y:-100%}
.sheet.swipe-bottom-to-top{--swipe-x:0%;--swipe-y:-100%;--enter-x:0%;--enter-y:100%}
@keyframes pictureExit{to{transform:translate(var(--swipe-x),var(--swipe-y))}}
@keyframes pictureEnter{from{transform:translate(var(--enter-x),var(--enter-y))}to{transform:translate(0,0)}}

/* Calm, hand-painted cartoon landscape shared by the game and its menus. */
:root{
  /* Replace this URL with the direct link to your background image. */
  --game-background-image:url("https://lvl.land/assets/image/cartoon/background-mobile/cartoon-landscape-1.png");
}
html.background-fallback{--game-background-image:none}
html.font-fallback #gameCanvas,html.font-fallback #gameCanvas *{font-family:Arial,sans-serif!important}
img.asset-unavailable{visibility:hidden!important}

@property --wipe-radius{
  syntax:"<length>";
  inherits:false;
  initial-value:150vmax;
}
.screen-transition{
  --wipe-radius:150vmax;
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
  background:radial-gradient(circle at center,
    transparent 0 calc(var(--wipe-radius) - 12vmax),
    rgba(0,0,0,.16) calc(var(--wipe-radius) - 8vmax),
    rgba(0,0,0,.52) calc(var(--wipe-radius) - 4vmax),
    rgba(0,0,0,.86) calc(var(--wipe-radius) - 1vmax),
    #000 var(--wipe-radius));
  opacity:0;
  transition:none!important;
}
.screen-transition.boot-cover,.screen-transition.holding{--wipe-radius:0px;opacity:1;pointer-events:auto;background:#000}
.screen-transition.closing{opacity:1;pointer-events:auto;animation:screenClose .72s cubic-bezier(.58,.01,.4,1) forwards}
.screen-transition.opening{opacity:1;pointer-events:auto;animation:screenOpen .9s cubic-bezier(.16,.72,.18,1) forwards}
.screen-transition.initial-opening{opacity:1;pointer-events:auto;animation:screenOpen 1.7s cubic-bezier(.16,.72,.18,1) forwards}
@keyframes screenClose{from{--wipe-radius:150vmax}to{--wipe-radius:0px}}
@keyframes screenOpen{from{--wipe-radius:0px}to{--wipe-radius:150vmax}}

#gameCanvas.screen-committing *,
#gameCanvas.screen-committing *:before,
#gameCanvas.screen-committing *:after{transition:none!important}

.confetti-burst{position:absolute;left:50%;top:47%;width:1px;height:1px;z-index:20;pointer-events:none}
.confetti-burst i{
  position:absolute;left:0;top:0;width:var(--size);height:calc(var(--size) * .55);
  border:2px solid var(--ink);border-radius:2px;background:var(--color);
  box-shadow:1px 2px 0 rgba(23,26,43,.38);opacity:0;
  animation:confettiFly 1.5s cubic-bezier(.16,.72,.3,1) var(--delay) both;
}
.confetti-burst i:nth-child(3n){border-radius:50%;height:var(--size)}
.confetti-burst i:nth-child(4n){height:calc(var(--size) * 1.5);width:calc(var(--size) * .45)}
@keyframes confettiFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}
  8%{opacity:1}
  72%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(1) rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.confetti-burst{display:none}}

#gameCanvas .screen-notice{
  position:absolute;z-index:40;left:50%;top:76px;width:min(470px,calc(100% - 32px));transform:translateX(-50%);
  padding:12px 16px;border:3px solid var(--ink);border-radius:14px;background:#fffbea;box-shadow:0 5px 0 var(--ink);
  color:#96623c;font-size:15px;font-weight:900;line-height:1.3;text-align:center;
}
#gameCanvas .screen-notice[hidden]{display:none}

/* Timed rounds, results and audio settings */
.round-timer{
  --time:360deg;position:absolute;z-index:3;right:14px;top:14px;width:54px;height:54px;
  display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;
  background:conic-gradient(#f29a38 var(--time),#fffbea 0);
  box-shadow:0 4px 0 var(--ink),0 8px 16px rgba(49,61,56,.2);color:var(--ink);
  font:900 21px Nunito;transition:background .1s linear,transform .2s;
}
.round-timer:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fffbea;border:2px solid var(--ink)}
.round-timer span{position:relative;z-index:1}
.round-timer.urgent{background:conic-gradient(#e9a234 var(--time),#fffbea 0);animation:timerPulse .55s ease-in-out infinite alternate}
@keyframes timerPulse{to{transform:scale(1.08)}}
#gameCanvas .menu-screen .settings-button{margin-top:16px}
.compact-modal{justify-content:center!important}
.volume-control{width:min(100%,470px);display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 14px;padding:16px 12px;box-sizing:border-box;background:#f5f4e5;border:4px solid var(--ink);border-radius:22px 28px 23px 26px;box-shadow:0 6px 0 #b58253,0 14px 24px #70451f2e;color:var(--ink);font-size:19px;font-weight:900}
.volume-copy{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px}
.volume-copy strong{min-width:3.5ch;font-variant-numeric:tabular-nums}
.volume-step{flex:0 0 48px;width:48px;height:48px;padding:0;border:3px solid var(--ink);border-radius:14px;background:#e9a234;color:#fffbea;box-shadow:0 4px 0 var(--ink);font:900 30px/1 Nunito,system-ui,sans-serif;cursor:pointer;touch-action:none;user-select:none;-webkit-touch-callout:none}
.volume-step.holding,.volume-step:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.volume-step:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.volume-step[aria-disabled="true"]{opacity:.4;cursor:default}
.result-modal{justify-content:center!important}
.result-icon{font-size:78px;filter:drop-shadow(3px 4px 0 var(--ink))}
.result-message{margin:34px 0 4px;color:#fffbea;font-size:27px;font-weight:900;text-shadow:2px 3px 0 var(--ink)}
.level-positive{color:#39a85a;text-shadow:2px 3px 0 var(--ink)}
.level-negative{color:#d94d4d;font-weight:900;text-shadow:2px 3px 0 var(--ink)}
.result-score{color:#e9a234;font-size:92px;line-height:1;-webkit-text-stroke:3px var(--ink);text-shadow:4px 5px 0 #fffbea}
.result-label{margin:8px 0 0;color:#fffbea;font-size:19px;font-weight:900;text-shadow:1px 2px 0 var(--ink)}
#gameCanvas .result-modal .menu-button{margin-top:52px}
#gameCanvas .result-modal .menu-button.secondary{margin-top:18px}
@media (prefers-reduced-motion:reduce){.round-timer.urgent{animation:none}}

/* Answer slots live over the lower edge of the picture. */
#gameCanvas .card>.slots{
  --slot-scale:.81;
  position:absolute;
  z-index:3;
  left:12px;
  right:12px;
  bottom:18px;
  min-height:60px;
  align-items:center;
  transform:scale(var(--slot-scale));
  transform-origin:center bottom;
}
#gameCanvas .card>.slots>.slot{flex:0 0 auto}

#gameCanvas .wheel-wrap .trace,
#gameCanvas .wheel-wrap .letter,
#gameCanvas .card>.slots>.slot{transition-property:opacity,transform,background,color,box-shadow;transition-duration:.25s;transition-timing-function:ease}
#gameCanvas .wheel-wrap.hint-fade .trace{opacity:0;transition-duration:1.25s}
#gameCanvas .card>.slots.hint-fade>.slot.filled{color:transparent;transition-duration:1.25s}
#gameCanvas .wheel-wrap[aria-busy="true"]{pointer-events:none}
#gameCanvas .action:disabled{cursor:default;filter:grayscale(.35);opacity:.6}

/* Opening screen shown before the main menu. */
#gameCanvas #startScreen{z-index:15}
#gameCanvas #startScreen .start-modal{
  position:relative;
  justify-content:center;
  padding-bottom:160px;
}
.start-credit{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  color:#fffbea;
  font-size:18px;
  font-weight:900;
  letter-spacing:2px;
  text-shadow:1px 2px 0 var(--ink),0 3px 10px rgba(49,61,56,.24);
}
#gameCanvas #startScreen .start-title{
  align-self:center;
  margin:0;
  max-width:100%;
  font-size:40px;
  line-height:1.08;
  letter-spacing:3px;
  text-align:center;
  white-space:nowrap;
}
#gameCanvas #startScreen .play{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:310px;
  margin-top:48px;
  padding:22px 44px 22px 36px;
  overflow:hidden;
  border:4px solid var(--ink)!important;
  border-radius:42px 22px 42px 22px;
  background:linear-gradient(135deg,#efb54d 0 48%,#e9a234 49% 100%);
  color:#fff9e5;
  box-shadow:0 9px 0 var(--ink),0 18px 28px rgba(44,49,42,.28)!important;
  font-size:29px;
  letter-spacing:5px;
  text-shadow:2px 2px 0 rgba(69,45,35,.45);
  transform:rotate(-1deg);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
#gameCanvas #startScreen .play:before{
  content:"\25B6";
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding-left:3px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:#fff4c9;
  color:#96623c;
  font-size:20px;
  text-shadow:none;
  box-shadow:0 4px 0 var(--ink);
}
#gameCanvas #startScreen .play:after{
  content:"";
  position:absolute;
  top:-35%;
  left:-25%;
  width:18%;
  height:170%;
  background:rgba(255,255,255,.35);
  transform:skewX(-20deg);
  transition:left .42s ease;
}
#gameCanvas #startScreen .play:hover{
  filter:brightness(1.08) saturate(1.08);
  transform:translateY(-4px) rotate(1deg) scale(1.025);
  box-shadow:0 12px 0 var(--ink),0 23px 32px rgba(44,49,42,.3)!important;
}
#gameCanvas #startScreen .play:hover:after{left:112%}
#gameCanvas #startScreen .play:active{
  transform:translateY(6px) rotate(0) scale(.99);
  box-shadow:0 3px 0 var(--ink),0 9px 14px rgba(44,49,42,.24)!important;
}

#gameCanvas .card>.card-points{
  position:absolute;
  z-index:3;
  left:14px;
  top:14px;
}

/* Footer links stay on one line at the bottom of the opening screen. */
#startScreen .start-credit{bottom:122px}
.start-links{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;width:510px;max-width:calc(100% - 24px)}
.start-links button{flex:0 1 auto;border:2px solid var(--ink);border-radius:10px;background:#fffbea;color:var(--ink);padding:10px 12px;font:900 18px/1.2 Nunito,system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.start-links button:hover{background:#efb34a}
.start-links button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.start-links button:focus-visible,.info-dialog button:focus-visible{outline:3px solid #e9a234;outline-offset:4px}
.info-dialog{position:fixed;inset:0;width:min(960px,calc(100% - 24px));height:calc(100% - 32px);height:min(840px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:3px solid var(--ink);border-radius:18px;background:#fffbea;color:var(--ink);box-shadow:0 12px 40px #0005;overflow:hidden}
.info-dialog[open]{display:flex;flex-direction:column}
.info-dialog::backdrop{background:rgba(25,32,27,.65)}
.info-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:2px solid var(--ink)}
.info-dialog-header h2{margin:0;font-size:20px}
.info-dialog-header button{flex:none;width:44px;height:44px;padding:0;border:2px solid var(--ink);border-radius:10px;background:#f5f4e5;color:var(--ink);font:700 30px/1 system-ui;cursor:pointer}
.info-dialog iframe{display:block;flex:1;width:100%;min-height:0;border:0;background:white}

/* Shared candy-like materials, inspired by the opening Play button. */
:root {
  --ink: #573b2b;
  --cream: #fffdf0;
  --orange-edge: #b85f22;
  --gold-edge: #bd681f;
  --panel-shadow: 0 8px 0 #d6b98e, 0 18px 32px #70451f2b;
}

/* Draw one continuous landscape behind both the game and its reserved space. */
html { background: #e8bd79; }
body {
  background-color: #e8bd79;
  background-image: linear-gradient(180deg,#fff9dd30,#eefbd21a 50%,#37665126),var(--game-background-image);
  background-position: center;
  background-size: cover;
}
#gameCanvas.menu-open > .app { visibility: hidden; }
#gameCanvas .menu-screen { background: transparent; }
#gameCanvas .menu-screen:after { display: none; }
#gameCanvas .menu-screen:before {
  display: block; content: ''; position: absolute; z-index: -1;
  left: 50%; top: 15%; width: 680px; height: 680px;
  transform: translateX(-50%); border: 0; border-radius: 50%;
  background: radial-gradient(ellipse,#fffbe68c,transparent 68%); filter: none;
  pointer-events: none;
}
#gameCanvas .app { padding: 26px 26px 30px; }
#gameCanvas .app header { justify-content: center; margin-bottom: 22px; }
#gameCanvas .app header .brand, #gameCanvas .menu-screen h1 {
  color: #fffdf0; font-weight: 900; letter-spacing: .5px;
  max-width:100%;white-space:nowrap;
  -webkit-text-stroke: 0; text-shadow: 0 3px 0 #8a5b35,0 5px 12px #68432340;
  transform: none;
}
#gameCanvas .app header .brand { font-size: 31px; }
#gameCanvas .menu-screen h1 { align-self: center; font-size: 30px; }
#gameCanvas .modal h2 {
  color: var(--ink); font-size: 34px; line-height: 1.2;
  -webkit-text-stroke: 0; text-shadow: 0 2px 0 #fff;
  margin: 0 0 20px;
}

/* One material system for every interactive control. */
#gameCanvas :is(.menu-button,.action,.language-option,.language-pair-button,.volume-step),
.start-links button, .info-dialog-header button {
  --button-edge: #cbbd9f;
  --button-shadow: inset 0 2px 0 #ffffffb3, inset 0 -3px 0 #0000000d, 0 7px 0 var(--button-edge), 0 13px 20px #70451f33;
  position: relative; isolation: isolate;
  border: 2px solid #fff9e8 !important;
  border-radius: 22px;
  background: linear-gradient(180deg,#fffef6 0%,#fff8e4 48%,#f4e6c7 100%);
  color: var(--ink); font-weight: 900;
  box-shadow: var(--button-shadow) !important;
  text-shadow: 0 1px 0 #fff9;
  transition: transform .18s, box-shadow .18s, filter .18s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#gameCanvas :is(.menu-button,.action,.volume-step), .start-links button { min-height:64px; }
#gameCanvas :is(.menu-button,.action,.language-option,.language-pair-button,.volume-step)::after {
  content: ''; position: absolute; pointer-events: none;
  inset: 4px 9px auto; height: 42%; border-radius: 18px 18px 40% 40%;
  background: linear-gradient(#fff5,#fff0); z-index: -1;
}
#gameCanvas .menu-button {
  --button-edge: var(--orange-edge);
  background: linear-gradient(180deg,#ffc06a 0%,#f79a3f 48%,#e8792d 100%);
  color: #fff; text-shadow: 0 2px 0 #9b491f80;
}
#gameCanvas .menu-button.secondary {
  --button-edge: #cbbd9f;
  background: linear-gradient(180deg,#fffef6,#fff8e4 48%,#f4e6c7);
  color: var(--ink); text-shadow: 0 1px 0 #fff;
}
#gameCanvas :is(.action.hint,#startButton,#playAgain) {
  --button-edge: var(--gold-edge);
  background: linear-gradient(180deg,#ffe38a,#ffc250 48%,#f3a236);
  color: #744820; text-shadow: 0 1px 0 #fff6;
}
#gameCanvas #abandonConfirm {
  --button-edge: #c05c50;
  background: linear-gradient(#ffa98b,#f57d65 52%,#e76a58);
}
@media (hover:hover) {
  #gameCanvas :is(.menu-button,.action,.language-option,.language-pair-button,.volume-step):not(:disabled):not([aria-disabled="true"]):hover,
  .start-links button:hover, .info-dialog-header button:hover {
    transform: translateY(-3px); filter: brightness(1.055);
    box-shadow: inset 0 2px 0 #ffffffb3,0 10px 0 var(--button-edge),0 18px 24px #70451f33 !important;
  }
}
#gameCanvas :is(.menu-button,.action,.language-option,.language-pair-button,.volume-step):not(:disabled):active,
#gameCanvas .volume-step.holding,.start-links button:active,.info-dialog-header button:active {
  transform: translateY(5px) scale(.98); filter: brightness(.98);
  box-shadow: inset 0 2px 4px #0001,0 2px 0 var(--button-edge),0 5px 9px #70451f26 !important;
}
button:focus-visible { outline: 4px solid #8f3e16 !important; outline-offset: 6px; }
#gameCanvas :is(.action,.language-option,.language-pair-button):disabled,
#gameCanvas .volume-step[aria-disabled="true"] {
  --button-edge: #aaa096; background: linear-gradient(#f0ebe4,#d8cec1) !important;
  color: #756b62; border-color: #f6f0e8 !important; opacity: .65;
  filter: grayscale(.5); transform: none; cursor: default;
}

/* Opening screen: a little toy-like word constellation. */
#gameCanvas #startScreen .start-modal { padding-bottom: 110px; }
.hero-toys { position: relative; width: 290px; height: 174px; margin-bottom: 22px; }
.hero-toy {
  position: absolute; display: grid; place-items: center;
  width: 110px; height: 110px; border: 4px solid #fff9e4; border-radius: 30px;
  font-size: 65px; font-weight: 900; line-height: 1;
  box-shadow: inset 0 3px 0 #fff8,0 9px 0 var(--toy-edge),0 18px 26px #70451f30;
  animation: toyFloat 4.8s ease-in-out infinite;
}
.hero-toy:first-child { --toy-edge:#d17f35; --tilt:-15deg; left:17px; top:42px; background:linear-gradient(#ffde85,#ffb642);color:#fff;text-shadow:0 4px 0 #d18a3b; }
.hero-toy:nth-child(2) { --toy-edge:#b95726; --tilt:12deg; right:25px; top:19px; background:linear-gradient(#ffc277,#ef7d3d);animation-delay:-1.6s; }
.hero-toy:nth-child(3) { --toy-edge:#bb80ab; --tilt:8deg; right:4px; bottom:0; width:66px;height:66px;border-radius:22px;background:linear-gradient(#ffd5e3,#f2a3c0);font-size:36px;animation-delay:-3s; }
.hero-spark { position:absolute;color:#fffbe6;font-size:32px;left:5px;top:0;text-shadow:0 2px 7px #e6ad4e;animation:sparkle 3s ease-in-out infinite; }
.hero-spark:last-child { left:auto;right:0;top:0;font-size:22px;animation-delay:-1.5s; }
#gameCanvas #startScreen .start-title { font-size:43px;letter-spacing:.3px;white-space:nowrap;line-height:1.15;max-width:470px; }
#gameCanvas #startScreen .play {
  --button-edge:#bc7434;
  min-width:320px;min-height:98px;margin-top:38px;padding:20px 40px 20px 30px;
  border:3px solid #fff1b8 !important;border-radius:32px;
  background:linear-gradient(135deg,#ffcf65 0%,#ffbd4d 48%,#f3a54b 49%,#ef9251 100%);
  color:#fff;text-shadow:0 3px 0 #ae663580;letter-spacing:4px;
  box-shadow:inset 0 3px 0 #fff9,inset 0 -4px 0 #dc883533,0 9px 0 #bc7434,0 18px 28px #48603940 !important;
  transform:none;
}
#gameCanvas #startScreen .play:before {
  width:50px;height:50px;border:2px solid #fff7d0;border-radius:50%;
  background:linear-gradient(#fffef1,#ffe6a5);color:#d38534;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 #d69143;font-size:22px;
}
#gameCanvas #startScreen .play:after {
  inset:auto;top:-40%;left:-35%;width:22%;height:180%;z-index:1;
  border-radius:0;background:linear-gradient(90deg,transparent,#fff7,transparent);
  transform:skewX(-22deg);animation:playShine 5s ease-in-out infinite;
}
#gameCanvas #startScreen .play:hover { transform:translateY(-3px) scale(1.02); }
#gameCanvas #startScreen .play:active { transform:translateY(6px) scale(.98);box-shadow:0 3px 0 #bc7434,0 8px 14px #48603940 !important; }
.start-credit { color:#fffdef;letter-spacing:3px;text-shadow:0 2px 5px #355c3e99; }
.start-links { gap:10px; }
.start-links button { padding:11px 13px;border-radius:14px;font-size:16px; }

/* Menu progression and language controls. */
#gameCanvas #menuScreen .modal { padding-top:45px; }
#gameCanvas .point-card {
  width:458px;margin-top:45px;padding:35px 28px 30px;border:3px solid #fffdf0 !important;
  border-radius:36px;background:radial-gradient(ellipse at 25% 0%,#fff,transparent 60%),linear-gradient(145deg,#fffbea,#f9edd0);
  box-shadow:inset 0 -5px 0 #e8daba66,var(--panel-shadow) !important;
}
#gameCanvas .point-card:before { color:#ffc756;opacity:.75;-webkit-text-stroke:0;text-shadow:0 3px 0 #d99b39;right:27px;top:18px; }
#gameCanvas .point-caption { color:#8b7967;font-size:15px;letter-spacing:3px; }
#gameCanvas .menu-points { color:#e9a234;font-size:80px;-webkit-text-stroke:0;text-shadow:0 3px 0 #b57929,0 5px 0 #fff; }
#gameCanvas .rank-name { color:var(--ink);font-size:20px;margin:9px 0 22px; }
.rank-list { gap:6px; }
.rank-icon { font-size:24px;filter:grayscale(.8);opacity:.35; }
#gameCanvas .rank-icon.current { filter:drop-shadow(0 3px 2px #c2753240);transform:scale(1.3);opacity:1; }
#gameCanvas .point-progress { height:15px !important;margin-top:23px;border:2px solid #fff;background:#e9dfcf;box-shadow:inset 0 2px 3px #8c735826; }
#gameCanvas .point-progress:after { background:linear-gradient(#ffc66f,#ed8730);box-shadow:inset 0 2px 0 #fff6;transition:width .5s; }
#gameCanvas .menu-screen .menu-button { min-width:280px;margin-top:36px;padding:20px 38px;border-radius:25px;font-size:25px; }
#gameCanvas #menuScreen .start { margin-top:36px;min-width:320px; }
.language-pair-buttons { position:relative;width:320px;gap:38px;margin-top:29px; }
.language-pair-buttons:before { content:'→';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fffdf0;font-size:28px;text-shadow:0 2px 0 #607d56; }
#gameCanvas .language-pair-button { min-height:68px;border-radius:20px; }
.language-pair-button img { border:2px solid #fff;border-radius:7px;box-shadow:0 2px 4px #573b2b26;width:54px; }
#gameCanvas #menuScreen .settings-button { margin-top:25px;min-width:240px;font-size:20px;padding:16px 26px; }
#gameCanvas #languageScreen .modal { justify-content:center; }
.language-list { width:420px;gap:17px;margin:12px 0 20px; }
#gameCanvas .language-option { min-height:77px;padding:16px 24px;font-size:22px;gap:20px;border-radius:22px; }
#gameCanvas .language-option.active { --button-edge:#bd681f;background:linear-gradient(#ffe4b8,#ffbb6a);border-color:#fff !important; }
.language-option.active:before { content:'✓';position:absolute;right:22px;color:#9d4b18;font-size:26px; }
.language-flag { width:47px;height:31px;border:2px solid #fff;border-radius:7px;box-shadow:0 2px 4px #573b2b26; }

/* The playing board: smooth rim, raised letters, luminous connecting path. */
#gameCanvas .card { flex:none;height:326px;border:5px solid #fffbea !important;border-radius:31px !important;background:#fffbea;box-shadow:0 8px 0 #c7a56f,0 18px 28px #70451f30; }
#gameCanvas .card:after { border-radius:26px;box-shadow:inset 0 0 0 2px #fff8;background:linear-gradient(transparent 64%,#573b2b33); }
.sheet { filter:saturate(1.08); }
#gameCanvas .pill { padding:8px 14px !important;border:2px solid #fff7d4;border-radius:18px;background:linear-gradient(#fff6d3,#ffda7f);color:#8c622c;box-shadow:inset 0 2px 0 #fff9,0 4px 0 #d4a04b,0 7px 12px #314d392b; }
#gameCanvas .pill b { color:#84562a; }
#gameCanvas .card>.slots { bottom:19px;gap:8px; }
#gameCanvas .app .slot {
  width:54px;height:60px;border:2px solid #fffdf0;border-radius:15px;background:linear-gradient(#fffef8,#f3ebd7);
  color:#775034;box-shadow:inset 0 2px 0 #fff,0 5px 0 #c4a574,0 9px 12px #57351f33;
  transform:none;font-size:30px;
}
#gameCanvas .app .slot:nth-child(n) { transform:none; }
#gameCanvas .app .slot.filled { transform:translateY(-3px);background:linear-gradient(#fff4c4,#ffda80);color:#93662e; }
#gameCanvas .app .slot.good { background:linear-gradient(#d8f5b9,#79cc62) !important;border-color:#f5ffe9 !important;color:#2e7137 !important;animation:answerPop .36s ease both; }
#gameCanvas .app .slot.bad { background:linear-gradient(#ffcfbf,#f48d80) !important;border-color:#fff0e7 !important;color:#903f37 !important;animation:shake .28s; }
#gameCanvas .app .wheel-wrap { width:350px;height:350px;margin:auto; }
#gameCanvas .wheel {
  border:5px solid #fffae9;
  background:radial-gradient(circle at 40% 26%,#ffffffc9,transparent 57%),linear-gradient(145deg,#ffe8c2,#f4bd78);
  box-shadow:inset 0 0 0 6px #ffffff6b,inset 0 -12px 22px #d68b421f,0 9px 0 #c28a50,0 20px 28px #70451f33;
}
#gameCanvas .wheel:before { content:'';position:absolute;inset:32px;border:2px dashed #d894514d;border-radius:50%;pointer-events:none; }
#gameCanvas .wheel:after { content:'✦';display:grid;place-items:center;width:62px;height:62px;border-radius:50%;font-size:38px;color:#efb34a;background:linear-gradient(#fffbea,#f4e5bb);box-shadow:inset 0 2px 0 #fff,0 4px 0 #cfad76;-webkit-text-stroke:0;text-shadow:0 2px 0 #ca9739; }
#gameCanvas .app .letter {
  width:66px;height:66px;margin:-33px;font-size:31px;transform:rotate(var(--a)) translateY(-124px) rotate(calc(-1 * var(--a)));
  border:2px solid #fffdf4;border-radius:50% !important;background:linear-gradient(#fffef9,#fff8df 55%,#f6e8c3);
  color:#694733;scale:1;box-shadow:inset 0 2px 0 #fff,0 6px 0 #c6a371,0 10px 14px #70451f2e;
  transition:background .15s,color .15s,box-shadow .15s,scale .15s,opacity .25s;
}
#gameCanvas .app .letter:hover { background:linear-gradient(#fffbe9,#ffe3a0);filter:none; }
@media (hover:hover) { #gameCanvas .app .letter:hover { scale:1.07; } }
#gameCanvas .app .letter.selected { background:linear-gradient(#ffc86f,#ed8f32);color:#fff;border-color:#fff0d2;box-shadow:inset 0 2px 0 #fff6,0 3px 0 #b96120,0 0 15px #f5a64f80;scale:.96;text-shadow:0 2px 0 #99491466; }
#gameCanvas .trace polyline { stroke:#f3a047;stroke-width:13;opacity:.85;filter:drop-shadow(0 2px 1px #ad5d245c); }
#gameCanvas .actions { gap:18px;justify-content:center; }
#gameCanvas .app .action { min-width:166px;padding:16px 22px;font-size:19px;border-radius:22px; }
.round-timer { width:58px;height:58px;border:3px solid #fff9e7;background:conic-gradient(#f29a38 var(--time),#ede8cf 0);box-shadow:0 4px 0 #b9793f,0 8px 12px #57351f33;color:var(--ink);font-size:22px; }
.round-timer:before { inset:6px;border:1px solid #fff;background:linear-gradient(#fffef1,#f5eccd);box-shadow:0 1px 3px #70451f26; }
.round-timer.urgent { background:conic-gradient(#f27c66 var(--time),#ede8cf 0);color:#bf5242; }

/* Secondary screens use the same soft panel surface. */
#gameCanvas :is(#helpScreen,#abandonScreen,#settingsScreen,#languageScreen,#resultScreen) .modal { position:relative;isolation:isolate; }
#gameCanvas :is(#helpScreen,#abandonScreen,#settingsScreen,#languageScreen,#resultScreen) .modal:before {
  content:'';position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);
  width:494px;height:var(--panel-height,660px);border:3px solid #fff9e9;border-radius:40px;
  background:radial-gradient(ellipse at 30% 0%,#fffdf4,transparent 68%),linear-gradient(155deg,#fff8e8f5,#f2e9cdf5);
  box-shadow:inset 0 -5px 0 #e4d9bc80,var(--panel-shadow);pointer-events:none;
}
#helpScreen { --panel-height:500px; }
#abandonScreen { --panel-height:450px; }
#languageScreen { --panel-height:660px; }
#settingsScreen { --panel-height:680px; }
#resultScreen { --panel-height:780px; }
.help-message { color:#71513a;max-width:400px;margin:6px 0 0;font-size:22px;line-height:1.6; }
.abandon-actions { width:406px;margin-top:35px;gap:16px; }
#gameCanvas #abandonScreen .abandon-actions .menu-button { min-height:58px !important;font-size:20px !important;border-radius:20px; }
.volume-control { width:426px;gap:12px;margin:12px 0;padding:19px 15px;border:2px solid #fffdf0;border-radius:24px;background:linear-gradient(#fff9eb,#f1e3ca);box-shadow:inset 0 2px 3px #9d744520,0 3px 0 #d9c19c;color:var(--ink);font-size:19px; }
.volume-copy { flex-direction:column;gap:5px; }
.volume-copy strong { color:#bd6124;font-size:24px; }
#gameCanvas .volume-step { --button-edge:#b96120;width:64px;height:64px;flex-basis:64px;border-radius:17px;background:linear-gradient(#ffc86f,#ed8f32);color:white;font-size:31px;text-shadow:0 2px 0 #99491466;touch-action:none; }
.result-icon { display:grid;place-items:center;width:130px;height:130px;margin-bottom:22px;border-radius:50%;background:radial-gradient(circle,#fffbe4,#fce7a0);box-shadow:inset 0 2px 0 #fff,0 5px 0 #e4c979,0 12px 25px #b7923930;font-size:82px;filter:none; }
.menu-screen.show .result-icon { animation:trophyFloat 3s ease-in-out infinite; }
.result-message { max-width:414px;margin:4px 0 19px;color:#7b6958;font-size:22px;line-height:1.4;text-shadow:none; }
.level-positive { color:#378a45;text-shadow:none; }
.level-negative { color:#ce6859;text-shadow:none; }
.result-score { color:#e9a234;font-size:96px;-webkit-text-stroke:0;text-shadow:0 4px 0 #bc8330,0 6px 0 #fff; }
.result-label { color:#8a7866;font-size:17px;letter-spacing:2px;text-shadow:none; }
#gameCanvas .result-modal .menu-button { margin-top:30px; }
#gameCanvas .result-modal .menu-button.secondary { margin-top:18px; }
.confetti-burst i { border:1px solid #fff7;box-shadow:0 2px 3px #0002;border-radius:4px; }
#gameCanvas .screen-notice { border:2px solid #fff9df;border-radius:22px;background:linear-gradient(#fff7df,#ffe7bb);color:#96623c;box-shadow:0 5px 0 #d6ae76,0 12px 25px #70451f33; }
.info-dialog { border:3px solid #fff9df;border-radius:26px;background:#fffaed;color:var(--ink);box-shadow:0 16px 50px #57351f55; }
.info-dialog::backdrop { background:#57351f6b;backdrop-filter:blur(7px); }
.info-dialog-header { padding:14px 18px;border-bottom:2px solid #e8e8d8; }
.info-dialog-header button { border-radius:14px; }

@keyframes toyFloat { 0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-10px) rotate(calc(var(--tilt) + 4deg))} }
@keyframes sparkle { 0%,100%{opacity:.55;transform:scale(.8) rotate(-8deg)}50%{opacity:1;transform:scale(1.1) rotate(8deg)} }
@keyframes playShine { 0%,62%{left:-35%}86%,100%{left:125%} }
@keyframes trophyFloat { 0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)} }
@keyframes answerPop { 0%{transform:scale(.9)}65%{transform:translateY(-5px) scale(1.1)}100%{transform:scale(1)} }
/* Never animate hidden screens; preserve reduced-motion and hint fading. */
.menu-screen:not(.show) *, .menu-screen:not(.show) *:after { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  #gameCanvas *,#gameCanvas *:before,#gameCanvas *:after { animation:none !important;transition:none !important; }
}