:root{--color-bg: #10121a;--color-surface: #1b1e2b;--color-text: #f2f3f7;--color-muted: #9598ac;--color-primary: #3d5fe0;--color-green: #2e9e5b;--color-yellow: #d1a021;--color-red: #c94f4f;--radius: 12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--color-bg);color:var(--color-text);min-height:100vh}html,body{min-height:100dvh}#app{display:flex;justify-content:center;height:100%}#app>*{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(min-width:700px){html,body{background:radial-gradient(ellipse 60% 50% at 50% 18%,rgba(91,127,255,.22),transparent 60%),linear-gradient(160deg,#0e1230,#171b45 55%,#232a6b);background-attachment:fixed;height:auto;min-height:100vh;overflow:visible}body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px}#app{position:relative;width:520px;height:min(880px,calc(100dvh - 80px));max-height:960px;font-size:1.0625rem;background:var(--color-bg);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px -12px #0000008c,0 8px 20px #00000059;overflow:hidden}#app>*{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;scrollbar-width:none}#app>*::-webkit-scrollbar{display:none}.screen,.reveal{max-width:100%}.card{padding:18px 16px;min-height:64px;gap:14px}.card__rank{width:32px;height:32px}.card__memory{width:28px;height:28px}}.screen{width:100%;max-width:480px;padding:24px 16px 48px;display:flex;flex-direction:column;gap:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header h1.wordmark{margin:12px 0 14px;font-weight:800;letter-spacing:-.02em;font-size:1.8rem;display:flex;align-items:center;justify-content:center;gap:.2em;line-height:1.1}.wordmark__word--2{background:linear-gradient(120deg,#8fa6ff,#5b7fff 55%,#3d5fe0);-webkit-background-clip:text;background-clip:text;color:transparent}.criterion{margin:0;font-size:1rem;color:var(--color-muted);font-weight:600;text-align:center}.attempts{margin:10px 0 0;font-size:.9rem;color:var(--color-muted);text-align:center}.attempts strong{color:var(--color-text)}.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;touch-action:none;-webkit-user-select:none;user-select:none}.board--locked .card{cursor:default}.card{display:flex;align-items:center;gap:12px;background:var(--color-surface);border:2px solid transparent;border-radius:var(--radius);padding:16px 14px;min-height:56px;font-size:1.1rem;font-weight:600;cursor:grab;touch-action:none;transition:border-color .15s ease,background .15s ease,transform .18s cubic-bezier(.2,0,.2,1);will-change:transform}.card--dragging{cursor:grabbing;box-shadow:0 12px 28px #00000080;border-color:var(--color-primary);z-index:5;transition:border-color .15s ease,background .15s ease}.card:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.card--grabbed{border-color:var(--color-primary);background:#5b7fff1f;box-shadow:0 8px 20px #0006;transform:scale(1.02)}@media(hover:hover){.card:hover{border-color:#5b7fff80;box-shadow:0 4px 14px #00000040}.board--locked .card:hover{border-color:transparent;box-shadow:none}}@keyframes card-settle{0%{transform:scale(1.05)}55%{transform:scale(.975)}to{transform:scale(1)}}.card--settle{animation:card-settle .2s cubic-bezier(.3,.8,.3,1.3)}@keyframes card-pop{0%{transform:scale(1)}45%{transform:scale(1.05)}to{transform:scale(1)}}.card--pop{animation:card-pop .24s ease}@media(prefers-reduced-motion:reduce){.card,.card--settle,.card--pop,.card--grabbed{transition:none;animation:none}}.card__rank{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#ffffff14;font-size:.9rem;flex-shrink:0}.card__label{flex:1}.card__grip{color:var(--color-muted);font-size:1.2rem}.card__memory{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;font-size:.85rem;font-weight:800;flex-shrink:0;color:#0e0e12;border:1.5px solid transparent}.card__memory--green{background:var(--color-green);color:#eafff1}.card__memory--yellow{background:var(--color-yellow)}.card__memory--red{background:var(--color-red);color:#fff0f0}@keyframes memory-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.card__memory--pop{animation:memory-pop .26s cubic-bezier(.3,.8,.3,1.3) both}@media(prefers-reduced-motion:reduce){.card__memory--pop{animation:none}}.card--green{border-color:var(--color-green);background:#2e9e5b26}.card--yellow{border-color:var(--color-yellow);background:#d1a02126}.card--red{border-color:var(--color-red);background:#c94f4f26}.actions{display:flex;flex-direction:column}.button{border:none;border-radius:var(--radius);padding:14px 20px;font-size:1rem;font-weight:700;cursor:pointer;width:100%}.button--primary{background:var(--color-primary);color:#fff;transition:transform 90ms ease,filter .12s ease}.button--primary:hover{filter:brightness(1.08)}.button--primary:active{transform:scale(.98)}.button--primary:disabled{opacity:.5;cursor:default}.button:focus-visible,.lang-toggle:focus-visible,.mute-toggle:focus-visible,.home-link:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.reveal{width:100%;max-width:480px;padding:calc(64px + env(safe-area-inset-top,0px)) 16px 48px;display:flex;flex-direction:column;gap:12px;margin:0 auto}.reveal__title{margin:0;font-size:1.6rem;font-weight:800}.reveal__subtitle{margin:0;color:var(--color-muted)}.reveal__criterion{margin:0 0 8px;font-weight:600}.reveal__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.reveal__row{display:flex;align-items:center;gap:12px;background:var(--color-surface);border-radius:var(--radius);padding:12px 14px;position:relative}.reveal__row--trap{border:2px solid var(--color-yellow)}.reveal__rank{width:24px;text-align:center;color:var(--color-muted);font-weight:700}.reveal__label{flex:1;font-weight:700}.reveal__value{color:var(--color-muted);font-size:.9rem}.reveal__trap-tag{position:absolute;top:-10px;right:10px;background:var(--color-yellow);color:#1a1a1a;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase}.reveal__source{color:var(--color-muted);font-size:.8rem;margin:4px 0 12px}.reveal__countdown{text-align:center;color:var(--color-muted);font-size:.85rem;margin:0}.reveal__countdown strong{color:var(--color-text)}.home-link{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:16px;width:30px;height:30px;background:transparent;color:#6d8bff;line-height:1;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;filter:drop-shadow(0 4px 10px rgba(109,139,255,.35));transition:transform .12s ease,color .12s ease;z-index:30}.home-link:before{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}.home-link svg{width:100%;height:100%;display:block}.home-link:hover{color:#8fa6ff;transform:translateY(-2px) scale(1.06)}.home-link:active{transform:scale(.96)}.lang-toggle{position:absolute;top:20px;right:16px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:var(--color-text);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:700;cursor:pointer}.lang-toggle:hover{border-color:var(--color-primary)}.mute-toggle{position:absolute;top:20px;right:76px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:var(--color-muted);border-radius:999px;width:30px;height:30px;font-size:.95rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.mute-toggle:hover{border-color:var(--color-primary);color:var(--color-text)}.header{position:relative;padding-top:calc(64px + env(safe-area-inset-top,0px))}.reveal-wrap{position:relative;width:100%;display:flex;justify-content:center}.stats{background:var(--color-surface);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}.stats__title{margin:0;font-size:1rem}.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.stats__cell{display:flex;flex-direction:column;gap:2px}.stats__cell strong{font-size:1.3rem}.stats__cell span{font-size:.7rem;color:var(--color-muted)}.stats__dist-title{margin:4px 0 0;font-size:.8rem;color:var(--color-muted)}.stats__hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.stats__hist-row{display:flex;align-items:center;gap:8px}.stats__hist-label{width:14px;font-size:.8rem;color:var(--color-muted)}.stats__hist-bar-track{flex:1;background:#ffffff0f;border-radius:6px;overflow:hidden}.stats__hist-bar{display:block;min-width:20px;background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:700;text-align:right;padding:3px 6px;border-radius:6px}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.screen-enter{animation:screen-fade-in .22s cubic-bezier(.2,0,.2,1) both}@media(prefers-reduced-motion:reduce){.screen-enter{animation:none}}@keyframes reveal-win-pop{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.03);opacity:1}to{transform:scale(1)}}.reveal__title--win{color:var(--color-green);animation:reveal-win-pop .42s cubic-bezier(.3,.8,.3,1.2) both}@media(prefers-reduced-motion:reduce){.reveal__title--win{animation:none}}.button--copied{background:var(--color-green)}.mascot-guide{position:relative;width:64px;opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}.mascot-guide--show{opacity:1;transform:scale(1)}.mascot-guide--hop{animation:mascotHop 1.1s cubic-bezier(.34,1.56,.64,1) infinite}@keyframes mascotHop{0%,to{transform:translateY(0) scale(1)}30%{transform:translateY(-10px) scale(1.02,.97)}50%{transform:translateY(0) scale(.97,1.03)}}.mascot-guide svg{width:100%;display:block;filter:drop-shadow(0 8px 16px rgba(109,139,255,.35))}.mascot-guide__bubble{position:absolute;inset:auto 0 0 0;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(prefers-reduced-motion:reduce){.mascot-guide{transition:opacity .15s ease;transform:none}.mascot-guide--show{transform:none}.mascot-guide--hop{animation:none}}.tutor-replay{position:absolute;top:20px;right:116px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:var(--color-muted);border-radius:999px;width:30px;height:30px;font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.tutor-replay:hover,.tutor-replay:focus-visible{border-color:var(--color-primary);color:var(--color-text)}.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:#06070cb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}body.onboarding-lock{overflow:hidden}.onboarding-card{width:100%;max-width:420px;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 24px 28px;background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 24px 48px -12px #0000008c;text-align:center}.onboarding-mascot-host{width:100%;max-width:220px;aspect-ratio:300 / 170}.onboarding-mascot.mascot-guide{position:static;width:100%;opacity:1;transform:none}.onboarding-title{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.01em}.onboarding-title:focus-visible{outline:none}.onboarding-text{margin:0;color:var(--color-text);font-size:1rem;line-height:1.4}.onboarding-bullets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;width:100%}.onboarding-bullets li{background:#ffffff0d;border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--color-text);text-align:left}.onboarding-dots{display:flex;gap:6px}.onboarding-dot{width:7px;height:7px;border-radius:999px;background:#fff3}.onboarding-dot--active{background:var(--color-primary)}.onboarding-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:4px}.onboarding-skip{background:transparent;color:var(--color-muted);border:1.5px solid rgba(255,255,255,.2)}.onboarding-skip:hover,.onboarding-skip:focus-visible{border-color:var(--color-primary);color:var(--color-text)}@media(min-width:700px){.onboarding-card{max-width:460px;padding:40px 36px 32px}.onboarding-mascot-host{max-width:260px}.onboarding-actions{flex-direction:row-reverse}}@media(max-width:699px){#app{height:auto;min-height:100dvh}#app>*{max-height:none;overflow:visible}.screen{min-height:100dvh;padding:4px 14px calc(12px + env(safe-area-inset-bottom,0px));gap:10px}.header{padding-top:calc(72px + env(safe-area-inset-top,0px));flex-shrink:0;margin-bottom:-4px}.header h1.wordmark{font-size:1.25rem;margin:8px 0;gap:.15em}.criterion{font-size:.85rem;line-height:1.2}.attempts{margin:14px 0 0;font-size:.72rem;color:var(--color-muted);opacity:.85}#board-container{flex:1 1 auto;min-height:0;display:flex}.board{flex:1 1 auto;width:100%;min-height:0;gap:clamp(8px,2vh,18px)}.card{flex:1 1 0;min-height:52px;padding:10px 12px;font-size:1rem}.card__rank{width:24px;height:24px;flex-shrink:0}.card__memory{width:22px;height:22px;flex-shrink:0}.actions{flex-shrink:0;margin-top:16px}.reveal{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}}@media(min-width:700px){.screen{height:100%;padding-bottom:24px;gap:0}#board-container{flex:1 1 auto;min-height:0;display:flex;align-items:center}.board{width:100%;gap:clamp(10px,2.6vh,22px)}.card{max-height:78px}.actions{flex-shrink:0}}