/* Shared look of the SOS minigames (internal/minigame). Same warm palette and
   type as «Каракули», so every game in the one Mini App feels like one set. */
#miniView{position:fixed;inset:0;display:none;flex-direction:column;
  background:radial-gradient(120% 120% at 50% 0%,#efe9dd 0%,#e4ddcf 100%);
  font-family:'Nunito',system-ui,sans-serif;color:#1b1b18;user-select:none;-webkit-user-select:none}
#miniView *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.mstage{position:relative;flex:1;overflow:hidden;background:#FBF7F0}
.mscreen{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.mfred{font-family:'Fredoka',sans-serif}
@keyframes mpop{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes mrise{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes mshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes mflash{0%{filter:brightness(1)}30%{filter:brightness(1.35)}100%{filter:brightness(1)}}
@keyframes mbounce{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* intro */
.mintro{align-items:center;justify-content:center;gap:8px;padding:32px;text-align:center}
.mintro .emo{font-size:72px;line-height:1;animation:mpop .45s ease both}
.mintro h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px;line-height:1.1;margin:8px 0 0;animation:mrise .45s ease .08s both}
.mintro .hint{font-size:16px;font-weight:700;color:#9a948a;max-width:300px;line-height:1.35;animation:mrise .45s ease .16s both}
.mintro .child{font-size:13px;font-weight:800;letter-spacing:1.5px;color:#FF5A45;text-transform:uppercase}
.mintro .mbig{margin-top:28px;max-width:320px;animation:mrise .45s ease .24s both}

/* header + timer */
.mtimebarwrap{height:7px;flex:0 0 7px;background:#EEE8DC;width:100%}
.mtimebar{height:100%;width:100%;background:#FF5A45;border-radius:0 99px 99px 0;transition:width .25s linear}
.mtimebar.warn{background:#FF3B30}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 20px 6px;gap:12px}
.mlab{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#9a948a}
.mval{font-family:'Fredoka',sans-serif;font-weight:600;font-size:24px;line-height:1.1}
.mtimer{font-family:'Fredoka',sans-serif;font-weight:600;font-size:30px;line-height:1;text-align:right}
.mdots{display:flex;gap:5px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap;max-width:140px}
.mdots i{width:8px;height:8px;border-radius:50%;display:block;background:#E7E1D6}
.mdots i.ok{background:#20C19A}.mdots i.bad{background:#D8D2C6}.mdots i.now{background:#FF5A45}
.mpill{display:inline-block;font-weight:800;font-size:12px;letter-spacing:2.5px;color:#FF5A45;background:#FFE7E2;padding:8px 16px;border-radius:999px}
.mlives{font-size:18px;letter-spacing:2px;text-align:right}

/* body */
.mbody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 16px;min-height:0}
.mfoot{padding:8px 22px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px}
.mscore{font-size:13px;font-weight:800;color:#9a948a}
.mgrid{--cols:3;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(4px,1.6vw,10px);width:100%;max-width:min(100%,calc(100svh - 300px));margin:0 auto}
.mtile{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:clamp(8px,2.4vw,18px);
  box-shadow:0 6px 16px rgba(40,30,20,.08);cursor:pointer;font-size:clamp(16px,calc(58vw / var(--cols)),52px);line-height:1;transition:transform .12s ease,background .2s ease}
.mtile:active{transform:scale(.94)}
.mtile.ok{background:#E7F7F1;box-shadow:0 0 0 3px #20C19A inset,0 6px 16px rgba(40,30,20,.08)}
.mtile.bad{background:#FFE7E2;box-shadow:0 0 0 3px #FF5A45 inset,0 6px 16px rgba(40,30,20,.08);animation:mshake .35s ease}
.mtile.done{background:#F1EBDF;color:#c9c2b5;box-shadow:none}
.mtile.mark{box-shadow:0 0 0 3px #FF5A45 inset,0 6px 16px rgba(40,30,20,.08)}
.mtile.num{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(18px,calc(42vw / var(--cols)),40px)}

/* buttons */
.mbig{appearance:none;border:none;cursor:pointer;width:100%;background:#FF5A45;color:#fff;font-family:'Fredoka',sans-serif;
  font-weight:600;font-size:20px;padding:17px;border-radius:20px;box-shadow:0 12px 22px rgba(255,90,69,.3)}
.mbig:disabled{opacity:.6}
.mbig.good{background:#20C19A;box-shadow:0 12px 22px rgba(32,193,154,.32)}
.mwhite{appearance:none;cursor:pointer;width:100%;background:#fff;color:#1b1b18;border:2px solid #ECE6DB;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px;padding:14px;border-radius:20px}
.mghost{border:none;background:none;cursor:pointer;font-family:'Nunito';font-weight:800;font-size:14px;color:#9a948a;padding:6px 4px}
.mrow{display:flex;gap:10px;width:100%;max-width:360px}
.mchoice{appearance:none;border:none;cursor:pointer;flex:1;background:#fff;border-radius:20px;padding:18px 10px;font-size:40px;line-height:1;
  box-shadow:0 8px 18px rgba(40,30,20,.08);transition:transform .12s ease}
.mchoice:active{transform:scale(.95)}
.mchoice.ok{background:#E7F7F1;box-shadow:0 0 0 3px #20C19A inset}
.mchoice.bad{background:#FFE7E2;box-shadow:0 0 0 3px #FF5A45 inset;animation:mshake .35s ease}
.mchoice.text{font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;padding:20px 10px}

/* reveal overlay inside a screen */
.mreveal{position:absolute;inset:0;background:rgba(251,247,240,.78);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:36px;gap:12px;z-index:5;text-align:center}
.mreveal.show{display:flex}
.mreveal .emo{font-size:78px;line-height:1;animation:mpop .5s ease both}
.mreveal .tt{margin:0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:28px;line-height:1.16;animation:mrise .45s ease .08s both}
.mreveal .ss{font-size:15px;font-weight:700;color:#9a948a;animation:mrise .45s ease .16s both}

/* results */
.mres{padding:28px 22px calc(20px + env(safe-area-inset-bottom));align-items:center;text-align:center;justify-content:center;gap:8px}
.mres .emo{font-size:76px;line-height:1;animation:mpop .5s ease both}
.mres .cap{font-weight:800;font-size:12px;letter-spacing:2.5px;color:#FF5A45}
.mres h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;line-height:1.05;margin:4px 0}
.mres h2 b{color:#FF5A45;font-weight:700}
.mres .sub{font-size:15px;font-weight:700;color:#9a948a;max-width:320px;line-height:1.35}
.mres .detail{font-size:14px;font-weight:700;color:#1b1b18;background:#fff;padding:10px 16px;border-radius:14px;margin-top:6px}
.mres .mbig,.mres .mwhite{max-width:340px;margin-top:8px}
.mres #mClose{animation:mrise .35s ease .3s both}

/* game-specific */
.simon-pads{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,340px);aspect-ratio:1}
.simon-pad{display:flex;align-items:center;justify-content:center;font-size:64px;border-radius:26px;background:#fff;
  box-shadow:0 10px 22px rgba(40,30,20,.10);transition:transform .12s ease,background .15s ease,box-shadow .15s ease;cursor:pointer}
.simon-pad.lit{transform:scale(1.06);background:#FFE7E2;box-shadow:0 0 0 4px #FF5A45 inset,0 14px 28px rgba(255,90,69,.3)}
.simon-pad.off{pointer-events:none;opacity:.85}
.simon-msg{font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;margin:18px 0 0;min-height:30px;text-align:center}
.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,330px);aspect-ratio:1}
.ttt-cell{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:22px;font-family:'Fredoka',sans-serif;
  font-weight:700;font-size:56px;box-shadow:0 8px 18px rgba(40,30,20,.08);cursor:pointer}
.ttt-cell.x{color:#FF5A45}.ttt-cell.o{color:#3B82F6}.ttt-cell.new{animation:mbounce .35s ease both}
.ttt-cell.win{background:#E7F7F1;box-shadow:0 0 0 3px #20C19A inset}
.ttt-score{display:flex;align-items:center;gap:14px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;margin-bottom:18px}
.ttt-score .vs{font-size:13px;font-weight:800;color:#9a948a;letter-spacing:1.5px}
.ttt-turn{font-weight:800;font-size:14px;color:#9a948a;margin-top:16px;min-height:20px}
.whack-field{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,340px);aspect-ratio:1}
.whack-hole{position:relative;border-radius:50%;background:radial-gradient(circle at 50% 40%,#E8E0CF,#D8CFBC 70%,#C9BFAA);box-shadow:inset 0 6px 14px rgba(40,30,20,.18);overflow:hidden}
.whack-bug{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;line-height:1;transform:translateY(110%);transition:transform .18s ease-out;cursor:pointer}
.whack-bug.up{transform:translateY(0)}
.whack-bug.hit{transform:scale(1.3);opacity:0;transition:transform .2s ease,opacity .2s ease}
.whack-baby{font-size:44px;text-align:center;margin-bottom:14px;line-height:1}
.wordle-grid{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(100%,300px);margin:0 auto}
.wordle-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wordle-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;border:2px solid #ECE6DB;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;text-transform:uppercase}
.wordle-cell.fill{border-color:#c9c2b5}
.wordle-cell.m0{background:#C9C2B5;border-color:#C9C2B5;color:#fff}
.wordle-cell.m1{background:#F5A623;border-color:#F5A623;color:#fff}
.wordle-cell.m2{background:#20C19A;border-color:#20C19A;color:#fff}
.wordle-cell.flip{animation:mbounce .3s ease both}
.wordle-kb{display:flex;flex-direction:column;gap:6px;padding:8px 6px calc(12px + env(safe-area-inset-bottom))}
.wordle-kb .r{display:flex;gap:4px;justify-content:center}
.wkey{flex:1;max-width:34px;height:44px;border:none;border-radius:8px;background:#fff;box-shadow:0 3px 8px rgba(40,30,20,.08);
  font-family:'Nunito';font-weight:800;font-size:15px;text-transform:uppercase;cursor:pointer;padding:0}
.wkey.wide{max-width:64px;font-size:13px}
.wkey.m0{background:#C9C2B5;color:#fff}.wkey.m1{background:#F5A623;color:#fff}.wkey.m2{background:#20C19A;color:#fff}
.shadow-art{display:block;width:100%;height:100%;overflow:visible}
.shadow-art.is-silhouette{--art-main:#293D43!important;--art-light:#293D43!important;--art-dark:#293D43!important;--art-ink:#293D43!important}
.shadow-art.is-silhouette .shadow-art-detail{display:none}
.shadow-legacy{display:block;font-size:80px;line-height:1}
.shadow-legacy.is-silhouette{filter:brightness(0)}
.shadow-screen,.shadow-intro{color:#293D43;background:#FAF8F2}
.shadow-screen button,.shadow-intro button{touch-action:manipulation}
.shadow-screen button:focus-visible,.shadow-intro button:focus-visible{outline:3px solid #426A74;outline-offset:4px}
.shadow-screen .mhead{width:100%;max-width:520px;margin:0 auto;padding:16px 22px 12px}
.shadow-screen .mlab{color:#708181;font-size:10px;letter-spacing:1.6px}
.shadow-screen .mval{font-family:inherit;font-size:17px;letter-spacing:.5px;margin-top:5px;font-weight:900}
.shadow-screen .mtimer{font-family:inherit;font-variant-numeric:tabular-nums;font-size:25px;font-weight:900}
.shadow-screen .mtimebar{background:#648C87}
.shadow-screen .mtimebar.warn{background:#D57856}
.shadow-screen .mdots i.now{background:#648C87}
.shadow-screen .mdots i.ok{background:#3C8C73}
.shadow-screen .mdots i.bad{background:#D57856}
.shadow-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;width:100%;max-width:480px;margin:0 auto;padding:4px 22px 12px}
.shadow-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
.shadow-heading h2{font-size:15px;font-weight:900;margin:0}
.shadow-tier{font-size:10px;font-weight:800;white-space:nowrap;padding:5px 9px;background:#EAF0E9;color:#526E63;border-radius:99px}
.shadow-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:clamp(142px,25svh,218px);border:1px solid #E0E6DA;border-radius:26px;margin-bottom:16px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 75%,#F2F4E9 0%,#E9EFE5 70%)}
.shadow-scene::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#72846C25 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(transparent,#000)}
.shadow-scene-label{position:absolute;top:14px;font-size:9px;font-weight:900;letter-spacing:2.1px;color:#68796B}
.shadow-target{width:clamp(110px,19svh,158px);height:clamp(110px,19svh,158px);position:relative;z-index:1;margin-top:14px;display:grid;place-items:center}
.shadow-ground{position:absolute;width:100px;height:12px;bottom:16px;background:#63766317;border-radius:50%;filter:blur(2px)}
.shadow-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shadow-option{position:relative;appearance:none;border:1.5px solid #E5E3DA;border-radius:20px;background:#FFFDF8;color:#687875;cursor:pointer;height:clamp(102px,17svh,144px);display:flex;align-items:center;justify-content:center;padding:9px 25px;
  box-shadow:0 3px 0 #ECEAE1;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.shadow-option .shadow-art{width:112px;max-width:100%;max-height:100%;flex:none}
.shadow-option .shadow-legacy{font-size:58px}
.shadow-option:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #ECEAE1}
.shadow-option-number{position:absolute;left:11px;top:9px;font-size:11px;font-weight:900;color:#7A8782}
.shadow-option-result{position:absolute;right:9px;bottom:9px;width:22px;height:22px;border-radius:50%;font:900 16px/22px system-ui;display:none;color:#fff}
.shadow-option:disabled{cursor:default;opacity:1;-webkit-text-fill-color:currentColor}
.shadow-option.selected{border-color:#62887E;background:#EDF3EE}
.shadow-option.correct{border:2px solid #3C8C73;background:#EBF5EE;box-shadow:0 3px 0 #C8DFCE}
.shadow-option.correct .shadow-option-result{display:block;background:#3C8C73}
.shadow-option.incorrect{border:2px solid #C47151;background:#FCF0E9;box-shadow:0 3px 0 #EED6C7}
.shadow-option.incorrect .shadow-option-result{display:block;background:#C47151}
.shadow-option.muted .shadow-art,.shadow-option.muted .shadow-legacy{opacity:.45}
.shadow-footer{flex:none;width:100%;max-width:480px;margin:0 auto;padding:10px 22px max(16px,env(safe-area-inset-bottom));border-top:1px solid #E8E7DE}
.shadow-feedback{display:flex;flex-direction:column;gap:3px;min-height:44px}
.shadow-feedback b{font-size:13px;font-weight:900}
.shadow-feedback span{font-size:11px;font-weight:700;line-height:1.4;color:#6B7A75}
.shadow-feedback.success b{color:#32785E}
.shadow-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}
.shadow-score{font-size:12px;color:#6B7A75;font-weight:800;white-space:nowrap}
.shadow-score b{color:#293D43;font-size:17px;margin-left:4px}
.shadow-next{border:0;border-radius:14px;padding:12px 24px;min-height:44px;min-width:128px;background:#426E63;color:#fff;font:800 13px 'Nunito',system-ui,sans-serif;cursor:pointer}
.shadow-next.secondary{background:#EBEEE5;color:#536B5F}
.shadow-next:disabled{opacity:.6;cursor:wait}
.shadow-intro{align-items:center;justify-content:center;padding:28px 26px max(28px,env(safe-area-inset-bottom));text-align:center;overflow-y:auto}
.shadow-eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#728377}
.shadow-intro-art{position:relative;width:270px;height:200px;flex-shrink:0;margin:25px 0 6px}
.shadow-intro-shadow{position:absolute;left:3px;top:5px;width:175px;height:175px;padding:24px;background:#E9EFE3;border-radius:50%}
.shadow-intro-card{position:absolute;right:2px;bottom:2px;width:132px;height:132px;padding:17px;background:#FFFDF8;border:1px solid #E4E5D9;border-radius:24px;transform:rotate(8deg);box-shadow:0 12px 26px #3B554513}
.shadow-intro-card span{position:absolute;right:-7px;bottom:0;background:#426E63;color:#fff;border:4px solid #FAF8F2;border-radius:50%;width:36px;height:36px;font:800 19px/28px system-ui}
.shadow-intro h2{font-size:36px;font-weight:900;letter-spacing:-1px;margin:14px 0 8px}
.shadow-intro p{font-size:15px;line-height:1.6;font-weight:700;color:#60736D;max-width:340px;margin:0}
.shadow-rules{display:flex;align-items:center;gap:13px;margin:23px 0 17px;padding:13px 17px;border:1px solid #E4E6DA;border-radius:16px;font-size:12px;color:#647469;font-weight:700}
.shadow-rules b{color:#354E43;font-size:16px}
.shadow-rules i{width:1px;height:24px;background:#DADFD2}
.shadow-intro-note{font-size:12px;line-height:1.6;font-weight:700;color:#78857B}
.shadow-child{font-size:11px;font-weight:900;letter-spacing:.8px;color:#66816B;margin-top:20px}
.shadow-intro .mbig{max-width:330px;background:#426E63;box-shadow:0 7px 16px #426E631F;font:800 16px 'Nunito',system-ui,sans-serif;border-radius:18px;margin-top:22px;min-height:52px;flex-shrink:0}
@media (min-height:820px){.shadow-content{flex:0 1 auto;margin-top:auto}.shadow-footer{margin-bottom:auto}}
@media (max-height:680px){
  .shadow-screen .mhead{padding-top:9px;padding-bottom:8px}.shadow-heading{margin-bottom:8px}
  .shadow-scene{height:130px;margin-bottom:10px}.shadow-scene-label{top:9px;font-size:8px}.shadow-target{height:100px;width:100px}
  .shadow-option{height:100px;padding:6px 25px;border-radius:16px}.shadow-options{gap:9px}
  .shadow-footer{padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.shadow-feedback{min-height:36px}
  .shadow-intro{justify-content:flex-start;padding-top:22px}.shadow-intro-art{height:145px;width:220px;margin-top:15px}
  .shadow-intro-shadow{width:135px;height:135px;padding:17px}.shadow-intro-card{width:106px;height:106px;padding:13px}
  .shadow-intro h2{margin-top:10px;font-size:30px}.shadow-rules{margin:15px 0 12px}.shadow-child{margin-top:12px}.shadow-intro .mbig{margin-top:16px}
}
@media (max-width:350px){.shadow-heading h2{font-size:13px}.shadow-tier{font-size:9px;padding:5px 7px}.shadow-content,.shadow-footer{padding-left:16px;padding-right:16px}}
@media (prefers-reduced-motion:reduce){.shadow-screen *,.shadow-intro *{animation:none!important;transition:none!important}}
.stroop-word{font-family:'Fredoka',sans-serif;font-weight:700;font-size:50px;line-height:1.1;margin-bottom:34px;letter-spacing:1px;animation:mpop .3s ease both}
.stroop-btn{appearance:none;border:none;cursor:pointer;flex:1;aspect-ratio:1;border-radius:22px;box-shadow:0 8px 18px rgba(40,30,20,.12);transition:transform .12s ease}
.stroop-btn:active{transform:scale(.94)}
.stroop-btn.ok{box-shadow:0 0 0 4px #1b1b18 inset}
.stroop-btn.bad{opacity:.35}
/* «Пятнашки»: tiles are positioned by --r/--c and slide with a transform,
   so the board is built once and every move animates. --n is the board
   side (3, 4 or 5); gaps, the raised edge and the type scale with it. */
.fifteen-board{--pad:clamp(7px,2.4vw,12px);--gap:clamp(4px,calc(6.6vw / var(--n)),10px);
  --bw:min(calc(100vw - 32px),360px,calc(100svh - 300px));
  --t:calc((var(--bw) - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n));
  --e:clamp(3px,calc(var(--t) * .055),5px);
  position:relative;flex:0 0 auto;width:var(--bw);height:var(--bw);touch-action:none;
  border-radius:calc(var(--t) * .22 + var(--pad));background:linear-gradient(180deg,#E9E1D2,#E2D9C8);
  box-shadow:inset 0 2px 5px rgba(60,40,20,.13),0 1px 0 #fff;transition:box-shadow .5s ease}
.fifteen-slot,.fifteen-tile{position:absolute;left:var(--pad);top:var(--pad);width:var(--t);height:var(--t);
  transform:translate3d(calc(var(--c) * (var(--t) + var(--gap))),calc(var(--r) * (var(--t) + var(--gap))),0)}
.fifteen-slot{border-radius:calc(var(--t) * .22);background:rgba(120,95,65,.07);box-shadow:inset 0 3px 6px rgba(60,40,20,.10)}
.fifteen-tile{cursor:pointer;will-change:transform}
.fifteen-board.live .fifteen-tile{transition:transform .21s cubic-bezier(.25,.9,.3,1.14)}
.fifteen-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--t) * .22);
  background:linear-gradient(180deg,#fff 0%,#FFF5EA 100%);color:#FF5A45;
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:calc(var(--t) * .42);line-height:1;
  box-shadow:0 var(--e) 0 #EBDAC6,0 10px 18px rgba(60,40,20,.12),inset 0 1px 0 #fff;
  transition:transform .12s ease,box-shadow .12s ease,background .3s ease,color .3s ease}
.fifteen-tile.press .fifteen-face{transform:translateY(calc(var(--e) * .6));box-shadow:0 calc(var(--e) * .4) 0 #EBDAC6,0 4px 10px rgba(60,40,20,.12),inset 0 1px 0 #fff}
.fifteen-tile.home .fifteen-face{background:linear-gradient(180deg,#F3FCF8 0%,#DDF5EB 100%);color:#17AE88;
  box-shadow:0 var(--e) 0 #BCE5D5,0 10px 18px rgba(20,120,90,.12),inset 0 1px 0 #fff}
.fifteen-tile.home.press .fifteen-face{box-shadow:0 calc(var(--e) * .4) 0 #BCE5D5,0 4px 10px rgba(20,120,90,.12),inset 0 1px 0 #fff}
.fifteen-tile.pop .fifteen-face{animation:fpop .38s cubic-bezier(.3,1.5,.5,1) .12s}
.fifteen-tile.nudge .fifteen-face{animation:fnudge .34s ease}
.fifteen-board.enter .fifteen-face{animation:fin .42s cubic-bezier(.3,1.4,.5,1) var(--d) both}
.fifteen-board.solved{box-shadow:inset 0 2px 5px rgba(60,40,20,.10),0 0 0 4px rgba(32,193,154,.28),0 18px 40px rgba(32,193,154,.22)}
.fifteen-board.solved .fifteen-tile .fifteen-face{animation:fwave .55s cubic-bezier(.3,1.4,.5,1) calc(180ms + var(--i) * var(--w)) both}
.fifteen-last .fifteen-face{background:linear-gradient(180deg,#34D8AE 0%,#1DB88F 100%);color:#fff;
  box-shadow:0 var(--e) 0 #159A77,0 12px 22px rgba(32,193,154,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.fifteen-board.solved .fifteen-last .fifteen-face{animation:fin .45s cubic-bezier(.3,1.5,.5,1) both}
.fifteen-moves{display:inline-block}
.fifteen-moves.pop,.fifteen-home b.pop{animation:fbump .28s ease}
.fifteen-home{display:block;font-size:24px;line-height:1.1;color:#9a948a}
.fifteen-home b{display:inline-block;font-weight:600;color:#17AE88}
#miniView .mdots i{transition:background .3s ease}
#miniView .mtimer>.mlab{display:block;line-height:normal}
.fifteen-goal{display:flex;align-items:center;gap:12px;width:min(calc(100vw - 32px),360px);margin-top:clamp(12px,2.6svh,24px);
  font-size:13px;font-weight:800;color:#9a948a;line-height:1.3}
.fifteen-goaltext{flex:1;min-width:0}
.fifteen-goal b{color:#1b1b18;font-weight:800}
.fifteen-mini{--s:calc(40px / var(--n));flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--n),var(--s));grid-auto-rows:var(--s);gap:2px;padding:3px;
  background:#E6DECF;border-radius:10px}
.fifteen-mini i{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:3px;
  font-style:normal;font-family:'Fredoka',sans-serif;font-weight:700;font-size:calc(var(--s) * .62);line-height:1;color:#20C19A}
.fifteen-mini i:last-child{background:transparent}
/* help: a gold halo on the board, a gold flash on every tile it moves and
   sparks where the tile left */
.fifteen-face>span,.fifteen-face>svg{position:relative;z-index:1}
.fifteen-face::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#FFEDB5 0%,#FFCB55 100%);box-shadow:0 0 0 3px #F5A623,0 0 24px rgba(245,166,35,.7)}
.fifteen-tile.auto{z-index:2}
.fifteen-tile.auto .fifteen-face::after{animation:fauto .8s ease-out}
.fifteen-board.helping{animation:fhalo 1.1s ease-in-out infinite alternate}
.fifteen-board.live.helping .fifteen-tile{transition:transform .17s cubic-bezier(.3,.8,.3,1.06)}
.fifteen-spark{position:absolute;left:var(--pad);top:var(--pad);width:var(--t);height:var(--t);pointer-events:none;z-index:4;
  transform:translate3d(calc(var(--c) * (var(--t) + var(--gap))),calc(var(--r) * (var(--t) + var(--gap))),0)}
.fifteen-spark i{position:absolute;left:50%;top:50%;font-style:normal;line-height:1;color:#F5A623;
  font-size:calc(var(--t) * .24 * var(--s));text-shadow:0 0 8px rgba(255,203,85,.95);
  animation:fspark .75s cubic-bezier(.2,.7,.3,1) forwards}
.fifteen-help{appearance:none;border:none;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 13px 8px 10px;
  border-radius:16px;background:linear-gradient(180deg,#FFF8E4 0%,#FFEDC2 100%);color:#8A5A00;
  box-shadow:0 3px 0 #EFCF86,0 8px 16px rgba(245,166,35,.18);transition:transform .12s ease,box-shadow .12s ease,filter .25s ease,opacity .25s ease}
.fifteen-help:active{transform:translateY(2px);box-shadow:0 1px 0 #EFCF86,0 4px 8px rgba(245,166,35,.18)}
.fifteen-bulb{font-size:22px;line-height:1;filter:drop-shadow(0 0 0 rgba(255,200,60,0));animation:fbulb 2.8s ease-in-out infinite}
.fifteen-helplbl{display:flex;flex-direction:column;align-items:flex-start;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;line-height:1.05}
.fifteen-helplbl small{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:#B98A2E;margin-top:2px}
.fifteen-help.busy{pointer-events:none}
.fifteen-help.busy .fifteen-bulb{animation:fbulbon .45s ease-in-out infinite alternate}
.fifteen-help.empty{filter:grayscale(1);opacity:.5;box-shadow:0 3px 0 #E4DDD0}
.fifteen-help.empty .fifteen-bulb{animation:none}
.fifteen-help.nudge{animation:fnudge .34s ease}
@keyframes fauto{0%{opacity:.95}40%{opacity:.75}100%{opacity:0}}
@keyframes fhalo{from{box-shadow:inset 0 2px 5px rgba(60,40,20,.12),0 0 0 3px rgba(245,166,35,.22),0 10px 30px rgba(245,166,35,.16)}
  to{box-shadow:inset 0 2px 5px rgba(60,40,20,.12),0 0 0 5px rgba(245,166,35,.45),0 16px 44px rgba(245,166,35,.32)}}
@keyframes fspark{0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--x) * var(--t)),calc(-50% + var(--y) * var(--t))) scale(1) rotate(120deg);opacity:0}}
@keyframes fbulb{0%,80%,100%{filter:drop-shadow(0 0 0 rgba(255,200,60,0))}90%{filter:drop-shadow(0 0 8px rgba(255,200,60,.9))}}
@keyframes fbulbon{from{filter:drop-shadow(0 0 2px rgba(255,200,60,.6));transform:scale(1)}to{filter:drop-shadow(0 0 12px rgba(255,200,60,1));transform:scale(1.15)}}

/* Fog is decorative and never intercepts a move. The moving clearing and
   the tiles above it keep both the empty cell and valid moves readable. */
@property --fx{syntax:'<length>';inherits:false;initial-value:0px}
@property --fy{syntax:'<length>';inherits:false;initial-value:0px}
@property --fr{syntax:'<length>';inherits:false;initial-value:0px}
.fifteen-play .mfoot{justify-content:center}
.fifteen-controls{max-width:340px;font-size:12px;line-height:1.5;text-align:center;font-weight:700;color:#8b877e}
.fifteen-tile:focus-visible{outline:3px solid #647f9f;outline-offset:4px;border-radius:calc(var(--t) * .22);z-index:4}
.fifteen-board.fog{background:linear-gradient(145deg,#dde5ea,#c8d5df);box-shadow:inset 0 2px 5px #52677d24,0 1px 0 #fff,0 16px 40px #52677d12}
.fifteen-board.fog .fifteen-slot{background:#52677d0d;box-shadow:inset 0 2px 6px #52677d16}
.fifteen-board.fog .fifteen-slot.gap{background:#ecf2f5;box-shadow:inset 0 0 0 1.5px #96adbf70,inset 0 2px 8px #52677d14}
.fifteen-board.fog .fifteen-slot.gap::after{content:'';position:absolute;inset:35%;border:1.5px dashed #93a9bb;border-radius:25%;opacity:.85}
.fifteen-fog{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle var(--fr) at var(--fx) var(--fy),transparent 0 38%,#0009 66%,#000 100%);
  mask-image:radial-gradient(circle var(--fr) at var(--fx) var(--fy),transparent 0 38%,#0009 66%,#000 100%)}
.fifteen-fog.ready{transition:--fx .28s ease-out,--fy .28s ease-out,--fr 1s ease,opacity .7s ease}
.fifteen-fog.thin{opacity:0}
.fifteen-mistbank{position:absolute;inset:-18%;opacity:.88;transform:translate3d(0,0,0);transition:transform 1.8s cubic-bezier(.4,0,.2,1),opacity 1.2s ease;
  background:radial-gradient(ellipse at 20% 25%,#f7fafbea,transparent 60%),radial-gradient(ellipse at 65% 80%,#d5e1eae6,transparent 65%),linear-gradient(115deg,#e9f0f5d9,#c9d8e0b8);
  -webkit-mask-image:linear-gradient(100deg,#000 0 76%,transparent 100%);mask-image:linear-gradient(100deg,#000 0 76%,transparent 100%)}
.fifteen-fog.thin .fifteen-mistbank{transform:translate3d(-105%,-6%,0) scale(1.08)}
.fifteen-fog i{position:absolute;inset:-25%;will-change:transform;
  background:radial-gradient(ellipse at 24% 32%,#fff 0,transparent 33%),radial-gradient(ellipse at 75% 64%,#f9fcff 0,transparent 38%),radial-gradient(ellipse at 38% 88%,#fff 0,transparent 28%);
  opacity:.75;animation:fdrift 12s ease-in-out infinite alternate}
.fifteen-fog i:nth-child(2){opacity:.6;transform:rotate(180deg);animation:fdrift2 17s ease-in-out infinite alternate;
  background:radial-gradient(ellipse at 65% 24%,#fff 0,transparent 32%),radial-gradient(ellipse at 15% 72%,#b5cbdc 0,transparent 40%)}
.fifteen-fog i:nth-child(3){inset:-40%;opacity:.35;animation:fdrift 9s ease-in-out -5s infinite alternate-reverse;
  background:repeating-linear-gradient(165deg,transparent 0 12%,#fff 20%,transparent 28% 42%)}
.fifteen-fog.thin i{animation-play-state:paused}
.fifteen-board.dense:not(.fog-arriving) .fifteen-mistbank{opacity:.28}
/* Each hidden tile has two independent cloud currents. The shared SVG is
   a static noise mask; only transforms/opacity animate on the compositor. */
.fifteen-cellmist{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,#d7e4ef,#b4c9dc);transition:opacity .35s ease}
.fifteen-cellmist i{position:absolute;inset:-65%;background:#f8fcff;
  -webkit-mask-image:url('fifteen-mist.svg');mask-image:url('fifteen-mist.svg');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  animation:fcellmist var(--mist-time) ease-in-out var(--mist-offset) infinite alternate paused}
.fifteen-cellmist i+i{inset:-55%;background:#7f9fb9;
  animation:fcellmistback calc(var(--mist-time) * 1.35) ease-in-out calc(var(--mist-offset) - 4s) infinite alternate paused}
.fifteen-board.dense .fifteen-tile:not(.seen) .fifteen-cellmist{opacity:1}
.fifteen-board.dense .fifteen-tile:not(.seen) .fifteen-cellmist i{animation-play-state:running}
.fifteen-board.fog-arriving .fifteen-tile:not(.seen) .fifteen-cellmist{transition-delay:var(--mist-delay);transition-duration:.8s}
@keyframes fcellmist{
  0%{transform:translate3d(-14%,-9%,0) rotate(-18deg) scale(1);opacity:.78}
  50%{transform:translate3d(3%,5%,0) rotate(4deg) scale(1.12);opacity:1}
  100%{transform:translate3d(14%,-3%,0) rotate(22deg) scale(1.02);opacity:.85}}
@keyframes fcellmistback{
  0%{transform:translate3d(12%,8%,0) rotate(28deg) scale(1.12);opacity:.24}
  50%{transform:translate3d(-3%,-8%,0) rotate(8deg) scale(1);opacity:.48}
  100%{transform:translate3d(-14%,5%,0) rotate(-16deg) scale(1.15);opacity:.3}}
.fifteen-board.fog .fifteen-tile.seen{z-index:3}
.fifteen-board.fog .fifteen-tile.near:not(.home) .fifteen-face{background:linear-gradient(#fff,#f1f6fa);color:#4c6b89;box-shadow:0 var(--e) 0 #b5c8d9,0 6px 16px #506b8620,inset 0 0 0 1.5px #a5bdd2}
.fifteen-board.fog .fifteen-face>span{transition:opacity .35s ease,filter .35s ease,transform .35s ease}
.fifteen-board.fog.dense .fifteen-tile:not(.seen) .fifteen-face>span{opacity:0;filter:blur(5px);transform:scale(.92)}
.fifteen-board.fog.dense .fifteen-tile:not(.seen) .fifteen-face{background:linear-gradient(155deg,#eaf0f4,#d9e3eb);box-shadow:0 var(--e) 0 #bdcdd8,0 5px 12px #506b860d,inset 0 1px 0 #ffffff90}
.fifteen-board.fog-arriving .fifteen-tile:not(.seen) .fifteen-face>span{transition-delay:var(--mist-delay);transition-duration:.65s}
@keyframes fdrift{from{transform:translate3d(-9%,-4%,0) scale(1)}to{transform:translate3d(9%,6%,0) scale(1.12)}}
@keyframes fdrift2{from{transform:translate3d(8%,6%,0) rotate(-6deg)}to{transform:translate3d(-8%,-6%,0) rotate(8deg)}}

.fifteen-weather{display:flex;align-items:center;gap:11px;width:min(calc(100vw - 32px),360px);min-height:68px;padding:12px 14px;margin-bottom:16px;
  border:1px solid #dce5ec;border-radius:19px;background:linear-gradient(115deg,#f8fafc,#edf2f6);box-shadow:0 3px 12px #52677d06;color:#4c647b}
.fifteen-weathericon{width:34px;height:34px;flex:none;border-radius:12px;background:#e0e9f0;display:grid;place-items:center}
.fifteen-weathericon svg{width:23px;height:23px;color:#627e98}
.fifteen-weathertext{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fifteen-weathertext b{font-size:14px;font-weight:900;line-height:1.2}
.fifteen-weathertext small{font-size:11px;font-weight:700;line-height:1.4;color:#718598}
.fifteen-weathercount{position:relative;display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;font-size:17px;font-weight:900;color:#617d95;background:#e0e9f0}
.fifteen-weather[data-phase="preview"] .fifteen-weathercount::after{content:'';position:absolute;inset:-3px;border:2px solid #a2b8cb;border-bottom-color:transparent;border-left-color:transparent;border-radius:50%;animation:fcount 3s linear both}
.fifteen-weather[data-phase="active"] .fifteen-weathercount,.fifteen-weather[data-phase="help"] .fifteen-weathercount,.fifteen-weather[data-phase="rolling"] .fifteen-weathercount{width:7px;height:7px;background:#8aa6bd;margin:0 8px}
.fifteen-weather[data-phase="rolling"] .fifteen-weathericon svg{animation:fweather 1.8s ease-in-out infinite}
.fifteen-weather[data-phase="won"]{background:#eef9f3;border-color:#cbe8d9;color:#238866}
.fifteen-foglegend{display:flex;justify-content:center;gap:20px;width:100%;margin-top:16px;font-size:11px;font-weight:800;color:#7b8b94}
.fifteen-foglegend span{display:flex;align-items:center;gap:6px}
.fifteen-foglegend i{width:8px;height:8px;border-radius:3px;background:#a5bdd2;box-shadow:0 1px 0 #7995ad}
.fifteen-foglegend span+span i{background:#74c9ab;box-shadow:0 1px 0 #47a888}
@keyframes fcount{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fweather{50%{transform:translateX(3px)}}

/* fog switch on the level picker */
.fifteen-fogtoggle{appearance:none;border:1px solid #e4e3df;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:340px;padding:15px;border-radius:22px;background:#fffdfa;text-align:left;color:#435c73;font-family:'Nunito',sans-serif;
  box-shadow:0 3px 0 #deded9,0 8px 20px #394d6208;animation:mrise .45s ease .45s both;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
.fifteen-fogtoggle:focus-visible{outline:3px solid #6c8ea9;outline-offset:4px}
.fifteen-fogheading{display:flex;align-items:center;gap:10px;width:100%}
.fifteen-fogtoggle>*{position:relative;z-index:1}
.fifteen-fogtoggle::after{content:'';position:absolute;inset:-40%;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0)) 20% 40%/40% 60% no-repeat,
    radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0)) 75% 60%/45% 70% no-repeat;
  animation:fdrift 9s ease-in-out infinite alternate}
.fifteen-fogtoggle.on{border-color:#bdcede;background:linear-gradient(120deg,#f2f6fa,#e6edf4);box-shadow:0 3px 0 #c1cfdb,0 10px 24px #52677d12}
.fifteen-fogtoggle.on::after{opacity:.7}
.fifteen-fogicon{display:flex;flex:none;width:26px;height:26px;color:#9AA6B8;transition:transform .4s cubic-bezier(.3,1.5,.5,1),color .35s ease}
.fifteen-fogicon .fifteen-fogsvg{width:100%;height:100%}
.fifteen-fogtoggle.on .fifteen-fogicon{color:#5E7090}
.fifteen-fogsvg{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;color:#7D8EA8}
.fifteen-fogicon .fifteen-fogsvg{color:inherit}
.fifteen-fogtoggle.on .fifteen-fogicon{transform:scale(1.15) rotate(-6deg)}
.fifteen-fogtext{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fifteen-fogtext b{font-weight:900;font-size:14px;line-height:1.3}
.fifteen-fogtext small{font-size:8px;letter-spacing:1.25px;font-weight:900;color:#8596a4;line-height:1.3}
.fifteen-switch{flex:0 0 auto;width:40px;height:24px;border-radius:99px;background:#d8dcd9;transition:background .3s ease}
.fifteen-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.fifteen-switch{position:relative}
.fifteen-fogtoggle.on .fifteen-switch{background:#6989a5}
.fifteen-fogtoggle.on .fifteen-switch i{transform:translateX(16px)}
.fifteen-fogdemo{display:flex;align-items:center;gap:16px;width:100%}
.fifteen-fogsample{position:relative;flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:80px;height:80px;padding:5px;border-radius:13px;background:#e3e8eb;overflow:hidden}
.fifteen-fogsample>i{display:grid;place-items:center;position:relative;border-radius:5px;background:#fff;box-shadow:0 1px 1px #617c911c;color:#758aa0;font-size:11px;font-weight:900;font-style:normal;transition:color .5s ease,background .5s ease}
.fifteen-fogsample>i.home{background:#e0f5eb;color:#43a782}
.fifteen-fogsample>i.gap{background:transparent;box-shadow:inset 0 0 0 1px #b5c7d4}
.fifteen-samplemist{position:absolute;inset:-40%;pointer-events:none;opacity:0;transform:translateX(-60%);transition:opacity .6s ease,transform .9s ease;
  background:radial-gradient(ellipse at 30% 25%,#f3f8ff,transparent 70%),linear-gradient(125deg,#ccdeedee,transparent 85%)}
.fifteen-fogtoggle.on .fifteen-samplemist{opacity:1;transform:translateX(0)}
.fifteen-samplemist::after{content:'';position:absolute;inset:-35%;background:url('fifteen-mist.svg') center/100% 100%;animation:fcellmist 9s ease-in-out infinite alternate paused}
.fifteen-fogtoggle.on .fifteen-samplemist::after{animation-play-state:running}
.fifteen-fogtoggle.on .fifteen-fogsample>i:not(.near):not(.home){color:transparent}
.fifteen-fogsample>i.near,.fifteen-fogsample>i.home,.fifteen-fogsample>i.gap{z-index:1}
.fifteen-fogcaption{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;line-height:1.45;color:#7b8d9e}
.fifteen-fogcaption b{font-size:13px;font-weight:900;color:#4f687f}
.fifteen-fogbenefit{width:100%;border-top:1px solid #c5d3de70;padding-top:10px;font-size:10px;font-weight:800;color:#8092a2;line-height:1.4}
.fifteen-levels.foggy .fifteen-lvgrid{position:relative;overflow:hidden}
.fifteen-levels.foggy .fifteen-lvgrid::after{content:'';position:absolute;inset:-30%;
  background:radial-gradient(circle at 62% 62%,rgba(238,233,226,0) 0 16%,rgba(238,233,226,.9) 42%);animation:fdrift 7s ease-in-out infinite alternate}

/* level picker */
.fifteen-pick{overflow-y:auto;justify-content:flex-start;gap:6px;padding:20px 22px}
.fifteen-pick>:first-child{margin-top:auto}
.fifteen-pick>:last-child{margin-bottom:auto}
.fifteen-pick .emo{font-size:48px}
.fifteen-pick h2{font-size:30px;margin-top:2px}
.fifteen-pick .child{margin-top:8px}
.fifteen-pick .hint{font-size:15px}
.fifteen-levels{display:flex;flex-direction:column;gap:9px;width:100%;max-width:340px;margin:12px 0 4px}
.fifteen-level{appearance:none;border:none;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;padding:10px 16px 10px 12px;
  background:#fff;border-radius:20px;text-align:left;font-family:'Nunito',sans-serif;color:#1b1b18;
  box-shadow:0 4px 0 #EBDAC6,0 10px 20px rgba(60,40,20,.08);
  animation:mrise .45s ease calc(.22s + var(--k) * .07s) both;transition:transform .12s ease,box-shadow .12s ease,opacity .25s ease}
.fifteen-level:active{transform:translateY(3px);box-shadow:0 1px 0 #EBDAC6,0 4px 10px rgba(60,40,20,.08)}
.fifteen-lvgrid{flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:2px;
  width:46px;height:46px;padding:4px;background:#EEE6D8;border-radius:12px}
.fifteen-lvgrid i{background:var(--lc);border-radius:2px}
.fifteen-lvtext{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.fifteen-lvtext b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;line-height:1.1}
.fifteen-lvtext small{font-size:13px;font-weight:800;color:#9a948a}
.fifteen-lvreward{display:flex;flex-direction:column;align-items:flex-end;font-family:'Fredoka',sans-serif;font-weight:700;font-size:26px;line-height:1;color:var(--lc)}
.fifteen-lvreward small{font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:#9a948a;margin-top:4px}
.fifteen-level.lv1{--lc:#20C19A}.fifteen-level.lv2{--lc:#F5A623}.fifteen-level.lv3{--lc:#FF5A45}
.fifteen-level.lv3{background:linear-gradient(180deg,#fff 0%,#FFF3EF 100%)}
.fifteen-levels.picked .fifteen-level{pointer-events:none}
.fifteen-levels.picked .fifteen-level:not(.chosen){opacity:.35;transform:scale(.97)}
.fifteen-level.chosen{box-shadow:0 0 0 3px var(--lc),0 4px 0 #EBDAC6,0 12px 24px rgba(60,40,20,.12);transform:scale(1.02)}
@keyframes fin{0%{transform:scale(.5);opacity:0}65%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes fpop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes fnudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-2deg)}50%{transform:translateX(4px) rotate(1.5deg)}75%{transform:translateX(-2px)}}
@keyframes fwave{0%{transform:scale(1)}40%{transform:translateY(-6px) scale(1.07)}100%{transform:scale(1)}}
@keyframes fbump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .fifteen-board.live .fifteen-tile{transition-duration:.01ms}
  .fifteen-play *,.fifteen-play *::after,.fifteen-pick *,.fifteen-pick *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .fifteen-spark{display:none}
}
@media (max-width:360px){
  .fifteen-fogtoggle{padding:12px;gap:11px}
  .fifteen-fogheading{gap:7px}.fifteen-fogtext b{font-size:12px}.fifteen-fogtext small{font-size:7px;letter-spacing:.8px}
  .fifteen-weather{padding:10px;gap:8px}.fifteen-weathertext b{font-size:13px}.fifteen-weathertext small{font-size:10px}
  .fifteen-fogbenefit{font-size:9px}
}
@media (max-height:650px){
  .fifteen-play.with-fog .fifteen-board{--bw:min(calc(100vw - 32px),360px,max(180px,calc(100svh - 310px)))}
  .fifteen-weather{margin-bottom:10px;min-height:58px;padding:9px 12px}
  .fifteen-foglegend{margin-top:10px}
}
@media (max-height:490px){
  .fifteen-play{overflow-y:auto}.fifteen-play .mbody{flex:none;padding-top:12px;padding-bottom:12px}
}

/* «Быстрый счёт»: a squared-notebook card, red-pen corrections, chunky answer buttons */
.math-screen .mbody{justify-content:center;gap:0}
.math-chips{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 20px 0;min-height:32px}
.math-chip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;letter-spacing:.6px;padding:6px 12px;border-radius:999px;
  background:#fff;box-shadow:0 3px 10px rgba(40,30,20,.07);white-space:nowrap}
.math-level.off{visibility:hidden}
.math-level.l1{color:#169C7C}.math-level.l2{color:#D98200}.math-level.l3{color:#FF5A45}
.math-chip.pop{animation:mathChipPop .5s cubic-bezier(.3,1.6,.5,1)}
.math-streak{color:#FF5A45;background:#FFE7E2;opacity:0}
.math-streak.on{opacity:1}
.math-streak.bump{animation:mathChipPop .4s cubic-bezier(.3,1.6,.5,1)}
.math-streak.broke{animation:mathBroke .55s ease}
.math-stage{width:min(100%,380px);display:flex;justify-content:center}
.math-card{--fs:48px;position:relative;width:100%;padding:40px 20px 30px;border-radius:26px;background-color:#fff;
  background-image:linear-gradient(90deg,transparent calc(100% - 30px),#F6C3BA calc(100% - 30px),#F6C3BA calc(100% - 28px),transparent calc(100% - 28px)),
    linear-gradient(#E4EDF7 1px,transparent 1px),linear-gradient(90deg,#E4EDF7 1px,transparent 1px);
  background-size:100% 100%,20px 20px,20px 20px;background-position:0 0,-1px 9px,9px -1px;
  box-shadow:0 0 0 1px #EEE7DB,0 14px 30px rgba(40,30,20,.10);transition:box-shadow .2s ease}
.math-card.in{animation:mathCardIn .42s cubic-bezier(.2,.9,.3,1.15) both}
.math-card.hurry{animation:mathHurry .5s ease-in-out infinite alternate}
.math-card.ok{box-shadow:0 0 0 3px #20C19A,0 14px 30px rgba(32,193,154,.24);animation:mathJoy .45s ease}
.math-card.bad{box-shadow:0 0 0 3px #FF5A45,0 14px 30px rgba(255,90,69,.22);animation:mshake .4s ease}
.math-card.out{animation:mathCardOut .28s ease-in forwards}
.math-eq{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.26em;row-gap:.12em;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:var(--fs);line-height:1.1;color:#1b1b18;font-variant-numeric:tabular-nums}
.math-eq .tk{display:inline-block;animation:mathTk .3s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i) * 35ms + 90ms)}
.math-eq .op{color:#FF5A45}
.math-eq .eq{color:#b4ad9f}
.math-eq .grp{display:inline-flex;column-gap:.26em;white-space:nowrap}
.math-eq .claim{position:relative;padding:0 .14em;border-radius:.18em;background:linear-gradient(transparent 12%,#FFE9A8 12%,#FFE9A8 88%,transparent 88%)}
.math-eq .claim.struck{color:#bdb6aa;background:none}
.math-eq .claim.struck::after{content:'';position:absolute;left:-.06em;right:-.06em;top:52%;height:max(3px,.08em);border-radius:9px;background:#FF3B30;
  transform:rotate(-14deg) scaleX(0);transform-origin:left center;animation:mathStrike .25s ease .05s forwards}
.math-eq .fix{position:absolute;left:50%;bottom:86%;font-size:.6em;color:#FF3B30;white-space:nowrap;opacity:0;
  transform:translateX(-50%) rotate(-8deg);animation:mathFix .45s cubic-bezier(.3,1.6,.5,1) .28s forwards}
.math-stamp{position:absolute;left:16px;top:9px;padding:2px 10px;border:3px solid currentColor;border-radius:10px;background:rgba(255,255,255,.85);
  font:700 16px/1.25 'Fredoka',sans-serif;letter-spacing:2px;opacity:0;pointer-events:none;transform:rotate(-12deg)}
.math-stamp.show{animation:mathStamp .42s cubic-bezier(.3,1.5,.5,1) forwards}
.math-stamp.ok{color:#20C19A}.math-stamp.bad{color:#FF3B30}.math-stamp.skip{color:#9a948a}
.math-note{min-height:22px;margin-top:12px;font-weight:800;font-size:15px;line-height:1.3;color:#9a948a;text-align:center;opacity:0}
.math-note.show{animation:mrise .3s ease both}
.math-note.ok{color:#169C7C}.math-note.bad{color:#E2442F}
.math-meter{display:flex;gap:5px;width:min(100%,300px);margin-top:14px}
.math-meter i{flex:1;height:10px;border-radius:99px;background:#ECE6DB;transition:background .25s ease,box-shadow .25s ease}
.math-meter i.on{background:#20C19A}
.math-meter i.pop{animation:mathSeg .5s cubic-bezier(.3,1.6,.5,1)}
.math-meter.full i{box-shadow:0 0 10px rgba(32,193,154,.55)}
.math-cap{margin-top:8px;font-size:13px;font-weight:800;color:#9a948a}
.math-cap b{color:#1b1b18}
.math-meter.full+.math-cap{color:#169C7C}
.math-pad{position:relative;width:100%;max-width:420px;margin:0 auto;padding:6px 16px 4px}
.math-row{display:flex;gap:12px}
.math-btn{--c:#FF5A45;--edge:#F1C8BF;position:relative;appearance:none;border:none;cursor:pointer;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px 12px;border-radius:22px;background:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;color:var(--c);touch-action:manipulation;
  box-shadow:0 6px 0 var(--edge),0 12px 22px rgba(40,30,20,.10);transition:transform .08s ease,box-shadow .08s ease,background .2s ease,opacity .2s ease}
.math-btn .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#fff;background:var(--c);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.math-btn.yes{--c:#20C19A;--edge:#BDE6D9}
.math-btn:active,.math-btn.pressed{transform:translateY(5px);box-shadow:0 1px 0 var(--edge),0 4px 10px rgba(40,30,20,.08)}
.math-btn.ok{background:#E7F7F1;box-shadow:0 0 0 3px #20C19A inset,0 6px 0 #BDE6D9}
.math-btn.bad{background:#FFE7E2;box-shadow:0 0 0 3px #FF5A45 inset,0 6px 0 #F1C8BF;animation:mshake .35s ease}
.math-btn.dim{opacity:.4}
.math-toast{position:absolute;left:50%;bottom:calc(100% + 4px);z-index:4;white-space:nowrap;font-weight:800;font-size:14px;padding:8px 14px;border-radius:999px;
  background:#1b1b18;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translateX(-50%)}
.math-toast.show{animation:mathToast 1.6s ease forwards}
.math-lives{display:flex;flex-direction:column;gap:3px}
.math-lives .cap{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#9a948a}
.math-lives .cap.last{color:#FF3B30;animation:mathBlink 1s ease-in-out infinite}
.math-hearts{display:flex;gap:4px;font-size:18px;line-height:1;min-height:18px}
.math-hearts span{display:inline-block}
.math-hearts .gone{filter:grayscale(1);opacity:.4}
.math-hearts .break{animation:mathHeart .7s ease both}
.math-screen .mtimer{transform-origin:right center}
.math-screen .mtimer.tick{animation:mathTick .4s ease}
.math-screen .mval{white-space:nowrap}
.math-screen .mdots{max-width:none;flex-wrap:nowrap;gap:4px}
.math-screen .mdots i.pop{animation:mbounce .35s ease both}
.math-spark{position:absolute;z-index:8;width:24px;height:24px;margin:-12px 0 0 -12px;font-size:20px;line-height:24px;text-align:center;pointer-events:none}
.math-banner{position:absolute;left:0;right:0;top:36%;z-index:6;display:none;flex-direction:column;align-items:center;gap:4px;padding:18px 20px;text-align:center;
  background:#1b1b18;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.25);transform:skewY(-4deg)}
.math-banner.show{display:flex;animation:mathBanner 1.4s cubic-bezier(.2,.8,.2,1) both}
.math-banner .lv{font-weight:800;font-size:12px;letter-spacing:3px;color:#FFB4A8}
.math-banner .tt{font-family:'Fredoka',sans-serif;font-weight:700;font-size:32px;line-height:1.1}
.math-banner .ss{font-weight:700;font-size:14px;color:#d9d3c7;max-width:320px}
@keyframes mathCardIn{0%{opacity:0;transform:translate(70px,18px) rotate(7deg) scale(.92)}100%{opacity:1;transform:none}}
@keyframes mathCardOut{to{opacity:0;transform:translate(-90px,-10px) rotate(-9deg) scale(.94)}}
@keyframes mathTk{0%{opacity:0;transform:translateY(16px) scale(.5)}100%{opacity:1;transform:none}}
@keyframes mathJoy{0%{transform:scale(1)}40%{transform:scale(1.045) rotate(-.6deg)}100%{transform:scale(1)}}
@keyframes mathHurry{from{box-shadow:0 0 0 1px #EEE7DB,0 14px 30px rgba(40,30,20,.10)}to{box-shadow:0 0 0 3px #FF8A7A,0 14px 34px rgba(255,90,69,.28)}}
@keyframes mathStrike{to{transform:rotate(-14deg) scaleX(1)}}
@keyframes mathFix{0%{opacity:0;transform:translate(-50%,10px) rotate(-8deg) scale(.4)}100%{opacity:1;transform:translateX(-50%) rotate(-8deg)}}
@keyframes mathStamp{0%{opacity:0;transform:rotate(-12deg) scale(2.6)}60%{opacity:1;transform:rotate(-12deg) scale(.9)}100%{opacity:1;transform:rotate(-12deg)}}
@keyframes mathChipPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes mathBroke{0%{opacity:1;transform:none}30%{opacity:1;transform:rotate(-8deg) scale(1.08)}100%{opacity:0;transform:translateY(10px) rotate(6deg) scale(.8)}}
@keyframes mathSeg{0%{transform:none}40%{transform:scale(1.2,1.9)}100%{transform:none}}
@keyframes mathToast{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1.05)}22%{transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}
@keyframes mathHeart{0%{transform:scale(1);filter:none;opacity:1}30%{transform:scale(1.6) rotate(-12deg)}100%{transform:none;filter:grayscale(1);opacity:.4}}
@keyframes mathBlink{50%{opacity:.45}}
@keyframes mathTick{0%{transform:scale(1.4);color:#FF3B30}100%{transform:none}}
@keyframes mathBanner{0%{transform:translateX(110%) skewY(-4deg)}18%,82%{transform:translateX(0) skewY(-4deg)}100%{transform:translateX(-110%) skewY(-4deg)}}
@media (max-height:640px){
  .math-card{padding:32px 16px 22px}.math-meter{margin-top:10px}.math-note{margin-top:8px}
  .math-btn{padding:10px 8px 9px;gap:4px;font-size:17px}.math-btn .ic{width:38px;height:38px;font-size:21px}
}
@media (max-width:350px){
  .math-screen .mval{font-size:20px}.math-screen .mdots{gap:3px}.math-screen .mdots i{width:7px;height:7px}
  .math-chips{padding:2px 14px 0}.math-pad{padding-left:12px;padding-right:12px}.math-row{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .math-screen *,.math-screen{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important}
}