:root{--navy:#1d2a5b;--ink:var(--navy);--muted:#5a6a9a;--bg-top:#d9f0ff;--bg-bottom:#fff6dc;--panel:#fff;--mint:#19b6a5;--yellow:#ffc533;--coral:#ff6b57;--violet:#7b61ff;--sky:#3aa0ff;--cell:#34478f;--lit:#ffd93d;--game:var(--violet);--shadow:0 5px 0 #1d2a5b2e;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{overscroll-behavior:none;background:var(--bg-top);height:100%;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;overflow:hidden}body{background:radial-gradient(circle at 12% 8%, #ffc53359 0 90px, transparent 91px), radial-gradient(circle at 92% 22%, #7b61ff2e 0 70px, transparent 71px), radial-gradient(circle at 6% 78%, #ff6b5729 0 80px, transparent 81px), radial-gradient(circle at 96% 90%, #19b6a538 0 110px, transparent 111px), linear-gradient(180deg, var(--bg-top), var(--bg-bottom))}button{font:inherit;color:inherit;touch-action:manipulation}button:focus-visible,.toggle input:focus-visible+.switch{outline:3px solid var(--violet);outline-offset:3px}#app{max-width:520px;margin:0 auto;position:fixed;inset:0}.screen{padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:14px;animation:.18s ease-out screen-in;display:flex;position:absolute;inset:0}.screen.scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-y:auto}h1,h2,p{margin:0}h2{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:15px;font-weight:800}.panel{background:var(--panel);border:3px solid var(--navy);box-shadow:var(--shadow);border-radius:22px;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.btn,.daily,.card,.opt,.icon-btn,.skip{cursor:pointer;transition:transform 80ms ease-out}.btn:active,.daily:active,.card:active,.opt:active,.icon-btn:active{transform:translateY(3px)scale(.98)}.btn{border:3px solid var(--navy);min-height:56px;box-shadow:0 5px 0 var(--navy);border-radius:999px;padding:0 24px;font-size:20px;font-weight:900}.btn.primary{background:var(--coral);color:#fff;text-shadow:0 2px #1d2a5b59}.btn.secondary{color:var(--navy);background:#fff}.icon-btn{border:3px solid var(--navy);width:48px;height:48px;color:var(--navy);box-shadow:0 4px 0 var(--navy);background:#fff;border-radius:16px;place-items:center;padding:0;display:grid}.icon-btn svg{width:22px;height:22px}.brand{align-items:center;gap:12px;min-height:92px;padding-right:100px;display:flex}.title{letter-spacing:-.01em;font-size:34px;font-weight:900;line-height:1}.sub{color:var(--muted);margin-top:4px;font-size:15px;font-weight:700}.chips{gap:10px;display:flex}.chip{border:3px solid var(--navy);background:#fff;border-radius:999px;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 8px;font-size:15px;font-weight:800;display:flex}.chip b{font-size:18px}.chip-icon{width:24px;height:24px;display:inline-grid}.chip.streak:not(.on){opacity:.6}.chip.streak.on .chip-icon{animation:1.4s ease-in-out infinite flame}.daily{border:3px solid var(--navy);background:linear-gradient(180deg, #ff8a6d, var(--coral));color:#fff;min-height:92px;box-shadow:0 7px 0 var(--navy);border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 18px;display:flex;position:relative;overflow:hidden}.daily:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff59,#0000);width:30%;animation:3.2s ease-in-out infinite glint;position:absolute;top:0;bottom:0;left:-40%;transform:skew(-20deg)}.daily-title{text-shadow:0 3px #1d2a5b59;font-size:28px;font-weight:900}.daily-sub{opacity:.95;font-size:15px;font-weight:800}.free{flex-direction:column;gap:10px;display:flex}.cards{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.card{border:3px solid var(--navy);min-height:112px;box-shadow:var(--shadow);background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;display:flex}.card-icon{width:56px;height:56px;display:block}.ico,.card-icon img,.intro-icon img,.between-icon img,.row-icon img,.chip-icon img,.row-pb img,.pill img{object-fit:contain;width:100%;height:100%;display:block}.card-title{text-align:center;font-size:14px;font-weight:900;line-height:1.1}.card-best{color:var(--muted);font-size:12px;font-weight:800}.chart svg{width:100%;height:auto;display:block}.chart-axis{fill:var(--muted);font-size:9px;font-weight:700}.chart-label{fill:var(--muted);font-size:12px;font-weight:800}.chart-label.today{fill:var(--navy)}.chart-value{fill:var(--navy);font-size:10px;font-weight:900}.trend{color:var(--muted);text-align:center;font-size:15px;font-weight:800}.toggle{cursor:pointer;align-items:center;gap:12px;min-height:48px;font-size:15px;font-weight:800;display:flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.switch{border:3px solid var(--navy);background:#fff;border-radius:999px;flex:none;width:54px;height:32px;transition:background .15s;position:relative}.switch:after{content:"";background:var(--navy);border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked+.switch{background:var(--mint)}.toggle input:checked+.switch:after{background:#fff;transform:translate(22px)}.foot{color:var(--muted);text-align:center;padding-bottom:8px;font-size:13px;font-weight:700}.mascot{aspect-ratio:1/1.22;flex:none;width:100px;margin-top:14px;position:relative}.mascot.big{width:128px}.mascot img{pointer-events:none;display:block;position:absolute}.mascot .m-body{width:100%;animation:1.8s ease-in-out infinite bob;bottom:0;left:0}.mascot .m-head{transform-origin:50% 100%;width:84%;animation:1.8s ease-in-out infinite head-bob;display:none;top:0;left:8%}.mascot[data-expr=happy] .m-head.happy,.mascot[data-expr=cheer] .m-head.cheer,.mascot[data-expr=hmm] .m-head.hmm{display:block}.mascot[data-expr=cheer]{animation:.6s ease-in-out infinite hop}.dots{justify-content:center;gap:8px;padding-top:8px;display:flex}.dots i{border:2px solid var(--navy);background:#1d2a5b2e;border-radius:50%;width:12px;height:12px}.dots i.done{background:var(--mint)}.dots i.now{background:var(--game);transform:scale(1.3)}#intro{justify-content:center}.intro-card{border:3px solid var(--navy);box-shadow:0 7px 0 var(--navy);text-align:center;background:#fff;border-radius:30px;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 22px;animation:.3s cubic-bezier(.2,1.3,.4,1) card-in;display:flex}.intro-step{color:var(--muted);font-size:14px;font-weight:800}.intro-icon{width:96px;height:96px;animation:.5s cubic-bezier(.2,1.6,.4,1) bounce-in}.intro-title{letter-spacing:0;text-transform:none;color:var(--navy);font-size:32px;font-weight:900}.intro-line{color:var(--muted);max-width:18em;font-size:19px;font-weight:800}.skip{min-height:48px;color:var(--muted);background:0 0;border:0;align-self:center;padding:0 22px;font-size:15px;font-weight:800}.demo{background:var(--navy);color:#fff;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;min-height:150px;padding:14px;display:flex}.demo-grid{grid-template-columns:repeat(var(--side), 34px);gap:6px;display:grid}.demo-cell{background:var(--cell);border-radius:9px;width:34px;height:34px;display:block}.demo-grid.glyphs .demo-cell{color:#ffd93d;background:0 0;padding:3px}.demo-cell.flash{animation:2.4s ease-in-out infinite demo-flash}.demo-cell.step{animation:2.4s ease-in-out infinite demo-step}.demo-cell.odd{animation:1.2s ease-in-out infinite demo-odd}.demo-expr{font-size:36px;font-weight:900}.demo-opts{gap:10px;display:flex}.demo-opt{min-width:64px;color:var(--navy);text-align:center;background:#fff;border-radius:14px;padding:8px 10px;font-size:18px;font-weight:900}.demo-opt.pick{animation:2.4s ease-in-out infinite demo-pick}.demo-word{letter-spacing:.05em;color:#e8453c;font-size:52px;font-weight:900}.demo-seq{gap:8px;display:flex}.demo-shape{place-items:center;width:42px;height:42px;display:grid;position:relative}.demo-shape svg{width:100%;height:100%}.demo-shape.slot{border:3px dashed #fff9;border-radius:12px;font-size:22px;font-weight:900}.demo-shape .answer{animation:2.4s ease-in-out infinite demo-answer;position:absolute;inset:0}#play{gap:10px}.topbar{align-items:center;gap:12px;min-height:52px;padding-right:100px;display:flex}.top-text{flex-direction:column;line-height:1.15;display:flex}.play-title{font-size:20px;font-weight:900}.play-step{color:var(--muted);font-size:13px;font-weight:800}.timer{border:3px solid var(--navy);background:#fffc;border-radius:999px;height:16px;position:relative;overflow:hidden}.timer-fill{transform-origin:0;background:linear-gradient(90deg, var(--mint), #7be3c8);will-change:transform;position:absolute;inset:0}.timer.urgent{animation:.5s ease-in-out infinite urgent}.timer.urgent .timer-fill{background:var(--coral)}.statusrow{align-items:center;gap:10px;min-height:34px;display:flex}.lvl,.combo{border:3px solid var(--navy);background:#fff;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:900}.combo{background:var(--yellow)}.combo.tick{animation:.25s ease-out bump}.top-score{color:var(--muted);margin-left:auto;font-size:15px;font-weight:800}.top-score b{color:var(--navy);font-size:24px;font-weight:900}.board-host{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.board{flex-direction:column;align-items:stretch;gap:18px;width:100%;display:flex}.hint{text-align:center;min-height:24px;color:var(--muted);font-size:15px;font-weight:800}.plate{background:var(--navy);color:#fff;border-radius:24px;padding:14px;box-shadow:0 7px #1d2a5b4d}.stage{justify-content:center;align-items:center;min-height:150px;display:flex}.expr{letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(40px,14vw,64px);font-weight:900}.word{letter-spacing:.05em;color:var(--ink);font-size:clamp(52px,17vw,84px);font-weight:900}.stage.seq{flex-wrap:nowrap;gap:6px}.seq-item{aspect-ratio:1;flex:1 1 0;place-items:center;max-width:48px;display:grid}.seq-item svg{width:100%;height:100%}.seq-item.slot{border:3px dashed #ffffffa6;border-radius:12px;font-size:24px;font-weight:900}.options{gap:12px;display:grid}.options.cols3{grid-template-columns:repeat(3,1fr)}.options.cols4{grid-template-columns:repeat(4,1fr)}.options.cols2{grid-template-columns:repeat(2,1fr)}.options.cols2 .opt:last-child:nth-child(odd){grid-column:1/-1}.opt{border:3px solid var(--navy);min-height:72px;box-shadow:0 5px 0 var(--navy);font-variant-numeric:tabular-nums;background:#fff;border-radius:20px;justify-content:center;align-items:center;gap:8px;padding:6px;font-size:28px;font-weight:900;display:flex;position:relative}.opt.name{min-height:64px;font-size:19px}.opt.shape svg{width:44px;height:44px}.opt.shape{background:var(--navy)}.opt .keycap{color:var(--muted);font-size:11px;font-weight:800;position:absolute;top:2px;left:7px}.opt.shape .keycap{color:#fff9}@media (hover:none){.opt .keycap{display:none}}.opt.done{pointer-events:none}.opt.right{background:#8be0a0}.opt.wrong{background:#ff9d90}.opt.reveal{outline:4px solid var(--mint);outline-offset:2px}.swatch{border:2px solid var(--navy);background-color:var(--ink);border-radius:50%;flex:none;width:24px;height:24px;display:inline-block}.use-pat{--o:#1d2a5b99;--base:linear-gradient(var(--ink), var(--ink))}.pat-stripes{background-image:repeating-linear-gradient(45deg, var(--o) 0 4px, transparent 4px 11px), var(--base)}.pat-cross{background-image:repeating-linear-gradient(45deg, var(--o) 0 3px, transparent 3px 11px), repeating-linear-gradient(-45deg, var(--o) 0 3px, transparent 3px 11px), var(--base)}.pat-dots{background-image:radial-gradient(circle, var(--o) 0 2.4px, transparent 3px), var(--base);background-size:10px 10px,auto}.pat-check{background-image:conic-gradient(var(--o) 25%, transparent 0 50%, var(--o) 0 75%, transparent 0), var(--base);background-size:14px 14px,auto}.pat-rings{background-image:radial-gradient(circle, transparent 0 2.5px, var(--o) 3px 4.6px, transparent 5.2px), var(--base);background-size:14px 14px,auto}.pat-grid{background-image:repeating-linear-gradient(0deg, var(--o) 0 2px, transparent 2px 9px), repeating-linear-gradient(90deg, var(--o) 0 2px, transparent 2px 9px), var(--base)}.word.use-pat{color:#0000;-webkit-text-stroke:1.5px var(--ink);-webkit-background-clip:text;background-clip:text}.gridplate{flex-direction:column;gap:10px;padding:12px 12px 14px;display:flex}.gridplate.side-6{padding:10px 8px 12px}.cap{text-align:center;color:#ffffffd9;min-height:22px;font-size:16px;font-weight:800}.grid{grid-template-columns:repeat(var(--side), 1fr);gap:8px;width:min(100%,100svh - 330px,420px);margin:0 auto;display:grid}.side-5 .grid{gap:6px}.side-6 .grid{gap:5px}.cell{aspect-ratio:1;background:var(--cell);min-width:0;color:var(--glyph,#fff);cursor:pointer;border:0;border-radius:12px;padding:0;transition:background .1s,transform .1s;position:relative}.side-5 .cell,.side-6 .cell{border-radius:9px}.cell:focus-visible{outline-offset:1px;outline:3px solid #fff}.cell.lit{background:var(--lit);transform:scale(1.04);box-shadow:0 0 18px 2px #ffd93db3}.cell.trail{background:#5568b3}.cell.start:after{content:"";border:3px solid var(--navy);background:#fff;border-radius:50%;position:absolute;inset:32%}.cell.found,.cell.right{background:#19b6a5}.cell.found:before,.cell.right:before{content:"";border:4px solid #fff;border-width:0 4px 4px 0;border-radius:1px;width:22%;height:40%;position:absolute;top:22%;left:28%;transform:rotate(40deg)}.cell.glyph.right:before{display:none}.cell.bad{background:var(--coral)}.cell.missed{box-shadow:inset 0 0 0 3px var(--lit)}.cell.missed[data-step]:after{content:attr(data-step);color:#fff;place-items:center;font-size:15px;font-weight:900;display:grid;position:absolute;inset:0}.cell.glyph{background:#2a3a7a;padding:12%}.cell.glyph svg{pointer-events:none;width:100%;height:100%;display:block}.cell.glyph.right{background:var(--mint);color:#fff}#between{justify-content:center}.between-card{border:3px solid var(--navy);box-shadow:0 7px 0 var(--navy);text-align:center;background:#fff;border-radius:30px;flex-direction:column;align-items:center;gap:10px;padding:22px 16px 26px;animation:.3s cubic-bezier(.2,1.3,.4,1) card-in;display:flex}.between-title{color:var(--navy);text-transform:none;letter-spacing:0;font-size:22px;font-weight:900}.between-icon{width:72px;height:72px}.between-points{font-variant-numeric:tabular-nums;color:var(--game);text-shadow:0 4px #1d2a5b26;font-size:76px;font-weight:900;line-height:1}.between-card.landed .between-points{animation:.35s ease-out bump}.between-unit{color:var(--muted);margin-top:-6px;font-size:15px;font-weight:800}.between-meta{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.pill{border:3px solid var(--navy);background:#fff;border-radius:999px;align-items:center;gap:4px;padding:4px 12px;font-size:14px;font-weight:800;display:inline-flex}.pill.best{background:var(--yellow)}.pill .ico{width:20px;height:20px}.between-next{color:var(--muted);font-size:15px;font-weight:800}.between-card .btn{align-self:stretch;margin-top:4px}.res-top{align-items:center;gap:8px;min-height:140px;padding-right:100px;display:flex}.res-score{flex-direction:column;display:flex}.res-kicker{color:var(--muted);font-size:14px;font-weight:800}.res-number{font-variant-numeric:tabular-nums;font-size:64px;font-weight:900;line-height:1}.res-label{color:var(--mint);font-size:18px;font-weight:900}.res-badges{flex-wrap:wrap;gap:8px;display:flex}.badge{border:3px solid var(--navy);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:15px;font-weight:900;display:inline-flex}.badge.best{background:var(--yellow);animation:.6s ease-out 1.3s both bump}.badge.note{background:#fff6dc;font-size:13px}.badge.streak.up{animation:.5s ease-out 1.6s both bump}.skill{grid-template-columns:64px 1fr 34px;align-items:center;gap:10px;font-size:15px;font-weight:800;display:grid}.skill-val{text-align:right;font-weight:900}.track{border:3px solid var(--navy);background:#eef3ff;border-radius:999px;height:16px;overflow:hidden}.fill{background:var(--mint);border-radius:999px;width:0;height:100%;transition:width .8s cubic-bezier(.2,.9,.3,1)}.fill[data-skill=memory]{background:var(--violet)}.fill[data-skill=speed]{background:var(--coral)}.fill[data-skill=maths]{background:var(--yellow)}.fill[data-skill=focus]{background:var(--sky)}.game-row{align-items:center;gap:10px;min-height:44px;font-weight:800;display:flex}.row-icon{flex:none;width:36px;height:36px}.row-title{flex:1}.row-score{font-variant-numeric:tabular-nums;white-space:nowrap}.row-score b{font-size:20px;font-weight:900}.row-score span{color:var(--muted);margin-left:2px;font-size:13px;font-weight:800}.row-pb{width:24px;height:24px;animation:.6s ease-out 1.4s both spin-pop}.res-buttons{grid-template-columns:1fr 1.4fr;gap:12px;padding:4px 0 8px;display:grid}#fx{z-index:5;pointer-events:none;position:fixed;inset:0;overflow:hidden}.pop{color:var(--navy);text-shadow:-2px 0 #fff,2px 0 #fff,0 -2px #fff,0 2px #fff;white-space:nowrap;font-size:24px;font-weight:900;position:fixed}.pop.quick{color:#d98a00}.pop.bad{color:#d6342a}.bit{will-change:transform;border-radius:50%;width:9px;height:9px;position:fixed}.bit.confetti{border-radius:2px;width:9px;height:15px}.shake{animation:.22s ease-in-out shake}.bump{animation:.22s ease-out bump}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}@keyframes card-in{0%{opacity:0;transform:scale(.92)translateY(14px)}}@keyframes bounce-in{0%{transform:scale(.4)}}@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.16)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes urgent{50%{transform:scaleY(1.35)}}@keyframes glint{0%,60%{left:-40%}to{left:120%}}@keyframes flame{50%{transform:scale(1.18)rotate(-6deg)}}@keyframes bob{50%{transform:translateY(3px)}}@keyframes head-bob{50%{transform:translateY(-3px)rotate(1.5deg)}}@keyframes hop{50%{transform:translateY(-10px)}}@keyframes spin-pop{0%{transform:scale(0)rotate(-120deg)}70%{transform:scale(1.35)rotate(10deg)}}@keyframes demo-flash{0%,15%,60%,to{background:var(--cell)}25%,50%{background:var(--lit);box-shadow:0 0 14px #ffd93dcc}}@keyframes demo-step{0%,22%,to{background:var(--cell)}4%,14%{background:var(--lit);box-shadow:0 0 14px #ffd93dcc}}@keyframes demo-pick{0%,45%{background:#fff;transform:none}60%,90%{background:#8be0a0;transform:scale(1.12)}to{background:#fff;transform:none}}@keyframes demo-odd{50%{color:#ff8ad8;transform:scale(1.3)}}@keyframes demo-answer{0%,40%{opacity:0;transform:scale(.3)}60%,90%{opacity:1;transform:scale(1)}to{opacity:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (height<=700px){.intro-icon{width:72px;height:72px}.demo{min-height:120px}.mascot.big{width:104px}}html[data-screen=home] body{background:url(../assets/bg-home.webp) center top / cover no-repeat, var(--bg-top)}html[data-screen=intro] body,html[data-screen=play] body,html[data-screen=between] body,html[data-screen=results] body{background:url(../assets/bg-play.webp) center top / cover no-repeat, var(--bg-bottom)}#home h2,#home .sub,#home .foot{color:var(--navy)}#home .foot,#home .sub{text-shadow:0 1px #ffffffb3}.btn.primary,.daily{box-shadow:none;filter:drop-shadow(0 5px #1d2a5b4d);background:0 0;border:0 solid #0000;border-image:url(../assets/style-sheet/button-primary@2x.webp) 0 112 fill/0 28px}.btn.secondary{box-shadow:none;color:var(--navy);filter:drop-shadow(0 5px #1d2a5b4d);background:0 0;border:0;border-image:url(../assets/style-sheet/button-secondary@2x.webp) 0 106 fill/0 28px}.btn{border-width:0 28px}.daily{border-width:0 46px;border-image-width:0 46px;min-height:96px;padding:0 0 4px;overflow:visible}.daily-title,.daily-sub{z-index:1;position:relative}.daily-ico{object-fit:contain;pointer-events:none;width:54px;height:54px;position:absolute;top:50%;left:-30px;transform:translateY(-50%)rotate(-12deg)}.daily:after{display:none}.timerrow{align-items:center;gap:8px;display:flex}.timerrow .timer{flex:1}.timer-ico{object-fit:contain;flex:none;width:34px;height:34px}.pill.best .ico,.badge.best .ico{width:24px;height:24px;margin:-4px 0}.screen.scroll>*{flex-shrink:0}
