:root{--purple-900: #3b0f78;--purple-800: #4c1d95;--purple-700: #6d28d9;--purple-600: #7c3aed;--purple-500: #8b5cf6;--purple-300: #c4b5fd;--purple-100: #f3e8ff;--pink: #ff4f9a;--pink-2: #ff7eb6;--coral: #ff6b6b;--orange: #ff9a2e;--yellow: #ffd23f;--green: #3ccf6a;--green-2: #22b357;--turquoise: #22c7c7;--blue: #3ba3ff;--ink: #3b1f63;--ink-soft: #6b5a8e;--card: #ffffff;--bg: #f6efff;--radius-sm: 14px;--radius: 22px;--radius-lg: 30px;--shadow: 0 6px 0 rgba(76, 29, 149, .14), 0 12px 24px rgba(76, 29, 149, .14);--shadow-sm: 0 3px 0 rgba(76, 29, 149, .14), 0 6px 12px rgba(76, 29, 149, .1);--nav-h: 84px;--font: "Fredoka Variable", "Fredoka", "Baloo 2", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--bg);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-weight:500}button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}input{font-family:inherit}h1,h2,h3,h4{margin:0;font-weight:700}img,svg{-webkit-user-drag:none}.app{position:relative;height:100%;max-width:1100px;margin:0 auto;overflow:hidden;background:linear-gradient(180deg,#f8f1ff,#f3ebff)}@media (min-width: 1101px){body{background:radial-gradient(circle at 20% 10%,#e9d5ff,#c4b5fd 60%,#a78bfa)}.app{border-left:1px solid #e3d4ff;border-right:1px solid #e3d4ff;box-shadow:0 0 60px #4c1d9540}}.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + var(--safe-b) + 24px)}.screen.no-nav{padding-bottom:calc(24px + var(--safe-b))}.screen-enter{animation:screenIn .38s cubic-bezier(.2,.9,.3,1.2)}@keyframes screenIn{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}.title-3d{font-weight:700;color:#fff;text-shadow:0 3px 0 var(--purple-800),0 6px 10px rgba(59,15,120,.35);-webkit-text-stroke:1.5px var(--purple-800);paint-order:stroke fill;letter-spacing:.5px}.section-title{display:flex;align-items:center;gap:10px;font-size:24px;color:var(--purple-800);margin:22px 18px 12px}.section-title .see-all{margin-left:auto;font-size:14px;background:#fff;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm);color:var(--purple-800)}.muted{color:var(--ink-soft)}.btn{--c1: var(--green);--c2: var(--green-2);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;font-size:20px;font-weight:700;color:#fff;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 5px color-mix(in srgb,var(--c2) 70%,#000),0 10px 18px #00000026,inset 0 2px #ffffff73;text-shadow:0 2px 0 rgba(0,0,0,.15);transition:transform .12s,box-shadow .12s,filter .2s}.btn:active{transform:translateY(4px) scale(.98);box-shadow:0 1px color-mix(in srgb,var(--c2) 70%,#000),0 4px 8px #0000001f}.btn:disabled{filter:grayscale(.6) opacity(.6)}.btn.purple{--c1: #a855f7;--c2: #7c3aed}.btn.pink{--c1: #ff7eb6;--c2: #ff3d8b}.btn.orange{--c1: #ffb347;--c2: #ff8a00}.btn.blue{--c1: #5ab8ff;--c2: #2b88f0}.btn.white{--c1: #ffffff;--c2: #efe6ff;color:var(--purple-800);text-shadow:none}.btn.sm{min-height:44px;font-size:16px;padding:0 18px}.btn.lg{min-height:68px;font-size:24px;padding:0 36px}.icon-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#a855f7,#7c3aed);box-shadow:0 4px #5b21b6,0 8px 14px #4c1d954d,inset 0 2px #fff6;transition:transform .12s}.icon-btn:active{transform:translateY(3px) scale(.95)}.icon-btn.white{background:#fff;box-shadow:0 4px #ddd0f7,0 8px 14px #4c1d952e}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:600;background:#ffffffd9;color:var(--purple-800)}.tap{transition:transform .15s cubic-bezier(.3,1.6,.5,1)}.tap:active{transform:scale(.94)}@media (hover: hover){.tap:hover{transform:translateY(-3px) rotate(-.6deg)}}.hero{position:relative;overflow:hidden;padding:calc(14px + var(--safe-t)) 14px 34px;background:linear-gradient(180deg,#7fd0ff,#bfe8ff 45%,#e6f7ff 72%,#f8f1ff);border-bottom-left-radius:40px 20px;border-bottom-right-radius:40px 20px}.hero-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none}.topbar{position:relative;z-index:3;display:flex;align-items:center;gap:10px}.hello{display:flex;align-items:center;gap:8px;background:#4c1d95d1;color:#fff;padding:4px 16px 4px 4px;border-radius:999px;box-shadow:var(--shadow-sm);font-weight:600;line-height:1.1;font-size:15px}.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#fff,#ffe9f3);border:3px solid #fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 3px 8px #00000026}.star-pill{margin-left:auto;display:flex;align-items:center;gap:6px;background:#4c1d95d1;color:#fff;font-weight:700;font-size:20px;padding:4px 6px;border-radius:999px;box-shadow:var(--shadow-sm)}.star-pill .plus{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#5be37f,#1fae4f);display:grid;place-items:center;font-size:22px;line-height:1;box-shadow:inset 0 2px #ffffff80}.logo{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;margin:-4px auto 0;width:max-content}.logo-main{font-size:clamp(34px,8.4vw,62px);white-space:nowrap;line-height:.95;font-weight:700;letter-spacing:-1px;background:linear-gradient(180deg,#ffe66d,#ffb800,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px var(--purple-800);paint-order:stroke fill;filter:drop-shadow(0 4px 0 var(--purple-900))}.logo-main .w{background:linear-gradient(180deg,#7ef0ff,#22b8f0 55%,#3ba3ff);-webkit-background-clip:text;background-clip:text}.logo-main .k{background:linear-gradient(180deg,#ffb3d9,#ff4f9a 55%,#e11d74);-webkit-background-clip:text;background-clip:text}.logo-sub{margin-top:2px;background:linear-gradient(180deg,#a855f7,#6d28d9);color:#fff;font-weight:700;font-size:clamp(16px,3.6vw,22px);padding:2px 18px 4px;border-radius:14px;border:3px solid #fff;box-shadow:0 4px 0 var(--purple-900)}.hero-body{position:relative;z-index:2;display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,1.1fr) minmax(150px,1.2fr);align-items:end;gap:6px;margin-top:4px}.speech{position:relative;background:#fff;border-radius:40px;padding:16px;text-align:center;box-shadow:0 8px 20px #4c1d9526;margin-bottom:40px}.speech:before{content:"";position:absolute;left:-12px;bottom:22px;width:26px;height:26px;background:#fff;border-radius:50%}.speech h2{font-size:clamp(18px,3.6vw,28px);color:var(--purple-800);line-height:1.1}.speech p{margin:6px 0 0;font-size:clamp(12px,2.3vw,16px);color:var(--purple-700);font-weight:600}.featured{background:linear-gradient(180deg,#ffe8a8,#ffd36b);border-radius:26px;padding:10px;border:4px solid #fff;box-shadow:var(--shadow);position:relative;margin-bottom:18px}.featured .tag{position:absolute;top:-14px;left:14px;background:linear-gradient(180deg,#a855f7,#7c3aed);color:#fff;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;border:2px solid #fff;z-index:2}.featured .art{border-radius:18px;overflow:hidden;aspect-ratio:4/3;position:relative}.featured .name{position:absolute;left:50%;transform:translate(-50%);bottom:6px;background:#4c1d95e0;color:#fff;padding:2px 14px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap}.featured .btn{width:100%;margin-top:8px;min-height:48px;font-size:19px}.dots{display:flex;justify-content:center;gap:6px;position:relative;z-index:3}.dots span{width:10px;height:10px;border-radius:50%;background:#ffffffb3}.dots span.on{background:var(--purple-600);width:12px;height:12px}.float{position:absolute;animation:floaty 5s ease-in-out infinite;pointer-events:none;z-index:1}@keyframes floaty{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(4deg)}}.bob{animation:bob 2.6s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.wiggle{animation:wiggle 2.4s ease-in-out infinite;transform-origin:50% 90%}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}.twinkle{animation:twinkle 1.8s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.85)}}.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 14px 0}@media (max-width: 560px){.cat-grid{grid-template-columns:repeat(2,1fr)}}.cat-card{position:relative;min-height:120px;border-radius:var(--radius);padding:10px 12px 12px;overflow:hidden;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 6px color-mix(in srgb,var(--c2) 75%,#000),0 12px 20px #00000024,inset 0 3px #ffffff59;display:grid;grid-template-columns:1fr 1fr;align-items:center;color:#fff;text-align:right}.cat-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.35),transparent 55%);pointer-events:none}.cat-card .ic{filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}.cat-card h3{font-size:clamp(15px,2.6vw,21px);line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.18)}.cat-card .count{grid-column:1 / -1;justify-self:center;background:#ffffffd9;color:var(--ink);font-weight:700;font-size:14px;padding:2px 14px;border-radius:999px;margin-top:4px}.hscroll{display:flex;gap:12px;overflow-x:auto;padding:4px 18px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}.thumb-card{flex:0 0 auto;width:150px;scroll-snap-align:start;background:#fff;border-radius:22px;padding:7px 7px 10px;box-shadow:var(--shadow-sm);text-align:center;position:relative}.thumb-card .t-art{border-radius:16px;aspect-ratio:1.15;display:grid;place-items:center;overflow:hidden;position:relative}.thumb-card .t-name{margin-top:6px;font-weight:700;font-size:15px;color:var(--purple-800);line-height:1.1;min-height:2.2em;display:grid;place-items:center}.fav-dot{position:absolute;top:2px;right:2px;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:2}.thumb-bg-deco{position:absolute;inset:0;background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.5) 0 6%,transparent 7%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.35) 0 9%,transparent 10%),radial-gradient(circle at 80% 15%,rgba(255,255,255,.4) 0 4%,transparent 5%)}.page-head{position:relative;padding:calc(12px + var(--safe-t)) 14px 18px;min-height:150px;overflow:hidden;border-bottom-left-radius:34px;border-bottom-right-radius:34px;background:linear-gradient(180deg,#8fd3ff,#d4f0ff 70%,#f8f1ff)}.page-head .board{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-top:14px;margin-left:8px;padding:10px 22px 12px;border-radius:22px;background:linear-gradient(180deg,#e08b46,#b85f22);border:4px solid #fff3d6;box-shadow:0 6px #7a3b10,0 10px 18px #0003;font-size:clamp(26px,6vw,40px)}.page-head .mascot{position:absolute;right:8px;bottom:-6px;z-index:1}.head-row{display:flex;align-items:center;gap:10px;position:relative;z-index:3}.chips{display:flex;gap:8px;padding:14px 16px 4px;overflow-x:auto;scrollbar-width:none}.chip{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:#fff;color:var(--purple-700);font-weight:700;font-size:15px;box-shadow:var(--shadow-sm)}.chip.on{background:linear-gradient(180deg,#a855f7,#7c3aed);color:#fff}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:14px 16px}.game-card{background:#fff;border-radius:24px;padding:8px 8px 12px;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;text-align:left}.game-card .t-art{border-radius:18px;aspect-ratio:1.2;display:grid;place-items:center;overflow:hidden;position:relative}.game-card h4{font-size:17px;margin:8px 4px 2px;color:var(--purple-800);line-height:1.1}.game-card p{font-size:13px;margin:0 4px 8px;color:var(--ink-soft);line-height:1.25;flex:1}.meta{display:flex;gap:4px;flex-wrap:wrap;margin:0 4px 8px}.meta span{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--purple-100);color:var(--purple-700)}.meta span.d-easy{background:#dcfce7;color:#15803d}.meta span.d-medium{background:#fef3c7;color:#b45309}.meta span.d-advanced{background:#ffe4e6;color:#be123c}.game-card .btn{min-height:42px;font-size:16px;width:100%}.list-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:22px;padding:8px 12px 8px 8px;box-shadow:var(--shadow-sm);margin:0 16px 10px;text-align:left;width:calc(100% - 32px)}.list-card .t-art{width:64px;height:56px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}.list-card h4{font-size:18px;color:var(--purple-800)}.play-circle{margin-left:auto;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#5be37f,#1fae4f);display:grid;place-items:center;box-shadow:0 3px #15803d;flex:0 0 auto}.bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:50;height:calc(var(--nav-h) + var(--safe-b));padding:8px 8px calc(6px + var(--safe-b));background:linear-gradient(180deg,#a463f7,#7c3aed 60%,#6d28d9);border-top-left-radius:30px;border-top-right-radius:30px;box-shadow:0 -6px 20px #4c1d9540,inset 0 3px #ffffff4d;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-weight:700;font-size:14px;border-radius:22px;transition:background .2s,transform .15s;text-shadow:0 2px 0 rgba(0,0,0,.2)}.nav-item.on{background:linear-gradient(180deg,#ffffff59,#ffffff26);box-shadow:inset 0 0 0 2px #ffffff59}.nav-item:active{transform:scale(.92)}.nav-item svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}.game-shell{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--gbg, linear-gradient(180deg, #c4f1ff, #f3e8ff))}.game-top{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 12px 8px;z-index:5}.game-top .gt-title{font-size:20px;color:var(--purple-800);font-weight:700;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud{display:flex;gap:8px;justify-content:center;padding:0 12px 6px;flex-wrap:wrap}.hud .pill{font-size:16px;padding:6px 14px;box-shadow:var(--shadow-sm);background:#fff}.game-area{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px calc(12px + var(--safe-b));touch-action:none}.game-area.scroll{overflow-y:auto;justify-content:flex-start;touch-action:pan-y}.intro{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#3b0f7859;backdrop-filter:blur(3px)}.intro-card{width:min(460px,100%);background:#fff;border-radius:34px;padding:22px 20px;text-align:center;box-shadow:var(--shadow);animation:pop .4s cubic-bezier(.2,1.4,.4,1);position:relative}.intro-card .ia{width:140px;height:120px;margin:-70px auto 6px;border-radius:28px;display:grid;place-items:center;border:5px solid #fff;box-shadow:var(--shadow-sm);overflow:hidden}.intro-card h2{font-size:30px;color:var(--purple-800)}.intro-card p{color:var(--ink-soft);font-size:17px;margin:8px 0 14px}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.diff-sel{display:flex;gap:8px;justify-content:center;margin:6px 0 18px;flex-wrap:wrap}.diff-sel button{padding:10px 16px;border-radius:16px;background:var(--purple-100);color:var(--purple-700);font-weight:700;font-size:16px;border:3px solid transparent}.diff-sel button.on{background:#fff;border-color:var(--purple-500);box-shadow:var(--shadow-sm);color:var(--purple-800)}.complete{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 40%,#ffffff80,#3b0f788c)}.complete-card{width:min(440px,100%);background:linear-gradient(180deg,#fff,#fbf6ff);border-radius:36px;padding:20px;text-align:center;box-shadow:var(--shadow);animation:pop .5s cubic-bezier(.2,1.5,.4,1);position:relative}.complete-card h2{font-size:34px}.big-stars{display:flex;justify-content:center;gap:4px;margin:6px 0}.big-stars svg{animation:starIn .5s cubic-bezier(.2,1.6,.4,1) both}.big-stars svg.off{filter:grayscale(1) opacity(.3)}@keyframes starIn{0%{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}.earned{font-size:22px;font-weight:700;color:var(--orange);margin:4px 0 12px}.badge-new{display:flex;align-items:center;gap:10px;justify-content:center;background:#fff7d6;border-radius:18px;padding:8px;margin-bottom:12px;font-weight:700;color:#b45309}.row-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot))}}.burst{position:absolute;pointer-events:none;z-index:45;animation:burst .7s ease-out forwards}@keyframes burst{0%{transform:scale(.2);opacity:1}to{transform:scale(1.6) translateY(-30px);opacity:0}}.choices{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:640px}.choice{width:var(--cs, 120px);height:var(--cs, 120px);border-radius:28px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font-size:46px;font-weight:700;color:var(--purple-800);transition:transform .15s;position:relative}.choice:active{transform:scale(.93)}.choice.right{animation:rightA .6s;background:#dcfce7;box-shadow:0 0 0 5px var(--green),var(--shadow)}.choice.wrongA{animation:shake .4s;background:#ffe4e6}@keyframes rightA{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(4deg)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.question{background:#fff;border-radius:28px;padding:14px 22px;box-shadow:var(--shadow-sm);margin-bottom:22px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:90px;font-size:40px;font-weight:700;color:var(--purple-800);max-width:680px}.prompt{font-size:22px;font-weight:700;color:var(--purple-800);margin-bottom:14px;text-align:center;display:flex;align-items:center;gap:8px}.round-dots{display:flex;gap:6px;margin-bottom:12px}.round-dots i{width:14px;height:14px;border-radius:50%;background:#7c3aed33}.round-dots i.done{background:var(--green)}.round-dots i.cur{background:var(--purple-600);transform:scale(1.2)}.modal-back{position:fixed;inset:0;z-index:200;background:#1e0a3c80;display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px)}.modal{width:min(420px,100%);background:#fff;border-radius:30px;padding:22px;box-shadow:var(--shadow);text-align:center;animation:pop .3s}.modal h3{font-size:24px;color:var(--purple-800);margin-bottom:6px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.keypad button{height:56px;border-radius:16px;background:var(--purple-100);font-size:24px;font-weight:700;color:var(--purple-800)}.keypad button:active{background:var(--purple-300)}.code-box{font-size:32px;font-weight:700;letter-spacing:6px;min-height:48px;background:#faf5ff;border-radius:14px;padding:4px;color:var(--purple-800)}.panel{background:#fff;border-radius:26px;margin:14px 16px;padding:16px;box-shadow:var(--shadow-sm)}.panel h3{font-size:20px;color:var(--purple-800);margin-bottom:10px;display:flex;align-items:center;gap:8px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #eadcff;font-size:17px;font-weight:600}.row:last-child{border-bottom:0}.switch{width:58px;height:34px;border-radius:999px;background:#e5e7eb;position:relative;transition:background .2s;flex:0 0 auto}.switch:after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0003;transition:left .2s}.switch.on{background:var(--green)}.switch.on:after{left:28px}input[type=range]{accent-color:var(--purple-600);width:150px}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{padding:6px 12px;border-radius:12px;background:var(--purple-100);font-weight:700;color:var(--purple-700)}.seg button.on{background:var(--purple-600);color:#fff}.txt{font-size:18px;padding:10px 14px;border-radius:14px;border:2px solid #e9d5ff;outline:none;color:var(--ink);width:160px}.txt:focus{border-color:var(--purple-500)}.ad-slot{margin:18px 16px 0;min-height:60px;border-radius:18px;display:grid;place-items:center;overflow:hidden}.ad-slot.test{border:2px dashed #c4b5fd;color:#a78bfa;font-size:13px;font-weight:700;background:#fff9}.splash{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#c084fc,#7c3aed 55%,#4c1d95);overflow:hidden;z-index:300}.splash .loader{width:220px;height:16px;border-radius:999px;background:#ffffff40;overflow:hidden;margin:20px auto 0;border:3px solid #fff}.splash .loader i{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#ff7eb6,#5be37f);animation:load 1.8s ease-in-out forwards}@keyframes load{0%{width:0}to{width:100%}}.onb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 24px calc(30px + var(--safe-b));gap:12px}.onb h1{font-size:clamp(30px,7vw,48px)}.onb p{font-size:20px;color:#fff;font-weight:600;max-width:420px;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.15)}.total-box{display:inline-flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#a855f7,#6d28d9);color:#fff;border-radius:26px;padding:8px 30px 12px;border:4px solid #fff;box-shadow:var(--shadow)}.total-box b{font-size:44px;line-height:1;display:flex;align-items:center;gap:6px}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}.badge{background:#fff;border-radius:22px;padding:10px 6px;text-align:center;box-shadow:var(--shadow-sm)}.badge .medal{width:78px;height:78px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#fff7c2,#ffc93c 60%,#f59e0b);border:4px solid #fff;box-shadow:0 0 0 3px #f59e0b,0 6px 12px #00000026}.badge.locked .medal{filter:grayscale(1) opacity(.45)}.badge b{font-size:14px;color:var(--purple-800);display:block;line-height:1.1}.badge small{font-size:11.5px;color:var(--ink-soft)}.progress{height:18px;border-radius:999px;background:#ede4ff;overflow:hidden}.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5be37f,#22b357);transition:width .6s}.stat-row{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:17px;font-weight:600;border-bottom:1px solid #f3ecff}.stat-row b{margin-left:auto;font-size:20px;color:var(--purple-800)}.empty{text-align:center;padding:40px 20px;color:var(--ink-soft);font-size:18px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width: 640px){.hero-body{grid-template-columns:1fr 1.15fr}.speech{margin-bottom:30px;padding:12px 10px}.featured{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:center;margin-top:8px}.featured .art{aspect-ratio:16/10}.featured .btn{margin-top:0;height:100%;min-height:64px;flex-direction:column;gap:2px;border-radius:22px}}.t-art{position:relative;display:grid;place-items:center;overflow:hidden}.ia .t-art{width:100%;height:100%}.variant-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px;max-height:210px;overflow-y:auto;padding:4px}.variant{width:86px;padding:6px 4px;border-radius:16px;background:var(--purple-100);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;font-weight:700;color:var(--purple-700);border:3px solid transparent;line-height:1.1}.variant.on{background:#fff;border-color:var(--purple-500);box-shadow:var(--shadow-sm)}.soon-ribbon{position:absolute;top:12px;left:-6px;background:linear-gradient(180deg,#ffb347,#ff8a00);color:#fff;font-size:12px;font-weight:700;padding:3px 12px 3px 10px;border-radius:0 999px 999px 0;box-shadow:0 3px #c2410c;z-index:3}.game-card.soon .t-art,.thumb-card.soon .t-art{filter:grayscale(.55) opacity(.75)}.game-card.soon .btn{--c1: #cbd5e1;--c2: #94a3b8}.filters{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 0;align-items:center}.filters select{font-family:inherit;font-weight:700;font-size:15px;color:var(--purple-800);background:#fff;border:0;border-radius:999px;padding:8px 14px;box-shadow:var(--shadow-sm)}.banner-note{margin:14px 16px 0;padding:12px 16px;border-radius:20px;background:linear-gradient(90deg,#fff7d6,#ffe4f1);font-weight:700;color:var(--purple-800);display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm)}.cat-grid.twelve{grid-template-columns:repeat(4,1fr)}@media (max-width: 560px){.cat-grid.twelve{grid-template-columns:repeat(3,1fr);gap:10px}.cat-grid.twelve .cat-card{grid-template-columns:1fr;text-align:center;min-height:112px;padding:8px 6px 10px;justify-items:center}.cat-grid.twelve .cat-card .ic{max-width:54px!important}.cat-grid.twelve .cat-card h3{font-size:15px}.cat-grid.twelve .cat-card .count{font-size:12px;padding:1px 10px}}