*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:#07030f;color:var(--c-text, #f5f0ff);font-family:-apple-system,Segoe UI,Sarabun,Thonburi,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none}.app{max-width:480px;height:100dvh;margin:0 auto;position:relative;overflow:hidden;background:radial-gradient(120% 55% at 50% -10%,color-mix(in srgb,var(--c-accent, #ff2e88) 18%,transparent),transparent 60%),radial-gradient(90% 45% at 85% 110%,color-mix(in srgb,var(--c-secondary, #29e6ff) 10%,transparent),transparent 60%),linear-gradient(180deg,var(--c-bg, #12081f),var(--c-bg2, #1e0f38))}.screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 20px;text-align:center;position:relative}.menu-lights{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.menu-lights i{position:absolute;bottom:-30px;width:7px;height:9px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 35%,#ffe9b0,#f5c542 65%,#f5c54200);filter:blur(.4px);opacity:0;animation:lantern-float 9s linear infinite}.menu-lights i:nth-child(1){left:12%;animation-delay:0s}.menu-lights i:nth-child(2){left:30%;animation-delay:2.5s;width:5px;height:7px}.menu-lights i:nth-child(3){left:52%;animation-delay:5s}.menu-lights i:nth-child(4){left:68%;animation-delay:1.2s;width:5px;height:7px}.menu-lights i:nth-child(5){left:82%;animation-delay:3.8s}.menu-lights i:nth-child(6){left:44%;animation-delay:7s;width:4px;height:6px}@keyframes lantern-float{0%{transform:translateY(0) translate(0);opacity:0}12%{opacity:.9}85%{opacity:.7}to{transform:translateY(-105dvh) translate(14px);opacity:0}}.menu-emblem{width:148px;height:148px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 50% 38%,#f5c54238,#12081f99 70%);animation:float 3.2s ease-in-out infinite}.menu-emblem:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 0deg,var(--c-primary, #f5c542),transparent 25%,var(--c-accent, #ff2e88) 50%,transparent 75%,var(--c-primary, #f5c542));animation:ring-spin 6s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}.menu-emblem:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;box-shadow:0 0 44px #f5c54259,inset 0 0 30px #ff2e881f}.menu-emblem span{font-size:72px;filter:drop-shadow(0 0 18px rgba(245,197,66,.8))}@keyframes ring-spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-10px)}}.menu-title{font-size:32px;font-weight:800;letter-spacing:3px;background:linear-gradient(160deg,#ffe9b0 10%,var(--c-primary, #f5c542) 45%,#d98f1f 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(245,197,66,.35))}.menu-tagline{color:var(--c-text-dim, #a89cc8);font-size:13px;letter-spacing:1px;margin-bottom:10px}.menu-stats{display:flex;gap:10px;width:100%;margin:8px 0 14px}.stat{flex:1;background:#ffffff0d;border:1px solid rgba(245,197,66,.22);border-radius:18px;padding:13px 6px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px #ffffff14,0 6px 18px #00000059}.stat-value{font-size:18px;font-weight:800;color:var(--c-primary, #f5c542);text-shadow:0 0 12px rgba(245,197,66,.4)}.stat-label{font-size:11px;color:var(--c-text-dim, #a89cc8)}.menu-hint{font-size:12px;color:var(--c-text-dim, #a89cc8);margin-top:14px}.btn{width:100%;max-width:300px;padding:15px;border-radius:18px;font-size:17px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.btn:active{transform:scale(.95)}.btn-primary{background:linear-gradient(135deg,#ffe9b0,var(--c-primary, #f5c542) 45%,#d98f1f);color:#2a1503;border:1px solid rgba(255,233,176,.7);box-shadow:0 0 26px #f5c54273,inset 0 1px #ffffff80}.btn-primary:active{box-shadow:0 0 12px #f5c5424d}.btn-ghost{background:#ffffff0a;color:var(--c-text, #f5f0ff);border:1px solid rgba(169,156,200,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.screen.game{padding:0;gap:0}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:5}.hud-spacer{flex:1}.hud-item{background:#0a05168c;border:1px solid rgba(245,197,66,.3);border-radius:999px;padding:8px 16px;display:flex;align-items:baseline;gap:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 14px #00000059}.hud-label{font-size:10px;color:var(--c-text-dim, #a89cc8);text-transform:uppercase;letter-spacing:1px}.hud-value{font-size:18px;font-weight:800;color:var(--c-primary, #f5c542);text-shadow:0 0 10px rgba(245,197,66,.5);font-variant-numeric:tabular-nums}.hud-coin{color:var(--c-primary, #f5c542);margin-right:3px}.hud-pause{width:40px;height:40px;border-radius:50%;border:1px solid rgba(169,156,200,.4);background:#0a05168c;color:var(--c-text, #f5f0ff);font-size:15px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#07030fb8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.countdown{font-size:120px;font-weight:900;background:linear-gradient(160deg,#ffe9b0 15%,var(--c-primary, #f5c542) 55%,#d98f1f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 34px rgba(245,197,66,.55));animation:pop .8s ease infinite}@keyframes pop{0%{transform:scale(1.4);opacity:0}25%{transform:scale(1);opacity:1}}.overlay-box{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;padding:0 32px}.overlay-box h3{font-size:22px;letter-spacing:2px;color:var(--c-primary, #f5c542)}.screen.over{justify-content:center}.over-card{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 22px;border-radius:22px;background:#ffffff0d;border:1px solid rgba(245,197,66,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff14,0 18px 50px #00000080}.over-score{font-size:66px;font-weight:900;line-height:1;background:linear-gradient(160deg,#ffe9b0 15%,var(--c-primary, #f5c542) 55%,#d98f1f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(245,197,66,.45));font-variant-numeric:tabular-nums}.over-label{color:var(--c-text-dim, #a89cc8);text-transform:uppercase;font-size:12px;letter-spacing:2px}.new-best{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c-primary, #f5c542),var(--c-accent, #ff2e88));color:#2a1503;font-weight:800;padding:8px 20px;border-radius:999px;box-shadow:0 0 22px #f5c54280;animation:pop .6s ease}.new-best:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translate(-120%);animation:shimmer 2.2s ease-in-out infinite}@keyframes shimmer{55%,to{transform:translate(120%)}}.screen-title{font-size:24px;font-weight:800;letter-spacing:1px;background:linear-gradient(160deg,#ffe9b0 15%,var(--c-primary, #f5c542) 55%,#d98f1f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(245,197,66,.35))}.board-list{list-style:none;width:100%;max-height:60dvh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.board-row{display:flex;align-items:center;gap:12px;background:#ffffff0a;border:1px solid rgba(169,156,200,.18);border-radius:14px;padding:11px 15px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.board-row:nth-child(1){border-color:#f5c542a6;box-shadow:0 0 18px #f5c54240}.board-row:nth-child(2){border-color:#c8cddc80}.board-row:nth-child(3){border-color:#cd7f328c}.board-rank{font-weight:800;width:26px;color:var(--c-accent, #ff2e88)}.board-row:nth-child(1) .board-rank{color:#f5c542;text-shadow:0 0 10px rgba(245,197,66,.6)}.board-row:nth-child(2) .board-rank{color:#c8cddc}.board-row:nth-child(3) .board-rank{color:#cd7f32}.board-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-username{color:var(--c-text-dim, #a89cc8);font-size:12px}.board-score{font-weight:800;color:var(--c-primary, #f5c542);font-variant-numeric:tabular-nums}.board-empty{color:var(--c-text-dim, #a89cc8)}.quiz-emblem:before{background:conic-gradient(from 0deg,var(--c-primary, #f5c542),transparent 25%,var(--c-accent, #22c55e) 50%,transparent 75%,var(--c-primary, #f5c542))}.quiz-stats{display:grid;grid-template-columns:1fr 1fr}.quiz-cats{width:100%;max-width:340px}.quiz-cats-label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-text-dim, #8fa3bf);margin-bottom:8px}.quiz-cats-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--c-text, #f0f6ff);background:#ffffff0d;border:1px solid rgba(143,163,191,.35);cursor:pointer;transition:transform .1s ease}.chip:active{transform:scale(.95)}.chip-active{background:linear-gradient(135deg,var(--c-accent, #22c55e),#15803d);border-color:#fff6;box-shadow:0 0 16px color-mix(in srgb,var(--c-accent, #22c55e) 45%,transparent)}.quiz-error{color:#ff7a7a;font-size:13px}.quiz-game{justify-content:flex-start;padding-top:max(20px,env(safe-area-inset-top));gap:16px}.q-topbar{width:100%;display:flex;justify-content:space-between;align-items:center}.q-progress{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--c-text-dim, #8fa3bf);text-transform:uppercase}.q-score{position:relative;font-size:20px;font-weight:800;color:var(--c-primary, #f5c542);text-shadow:0 0 12px rgba(245,197,66,.4);font-variant-numeric:tabular-nums}.q-pop{position:absolute;right:0;top:-6px;font-size:16px;font-weight:900;color:var(--c-accent, #22c55e);animation:pop-rise 1s ease-out forwards;pointer-events:none}@keyframes pop-rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-38px);opacity:0}}.q-timer{width:100%;height:8px;border-radius:999px;background:#ffffff14;overflow:hidden}.q-timer-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c-accent, #22c55e),var(--c-primary, #f5c542));transition:width .1s linear}.q-timer.low .q-timer-fill{background:linear-gradient(90deg,#ef4444,#ff7a1a);box-shadow:0 0 12px #ef444499}.q-card{width:100%;background:#ffffff0d;border:1px solid rgba(245,197,66,.2);border-radius:20px;padding:22px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px #ffffff12,0 12px 32px #0006;animation:q-in .35s ease}@keyframes q-in{0%{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}.q-text{font-size:19px;line-height:1.4;font-weight:700;margin-bottom:18px}.q-options{display:flex;flex-direction:column;gap:10px}.q-option{width:100%;text-align:left;font-size:15px;font-weight:600;padding:14px 16px;border-radius:14px;color:var(--c-text, #f0f6ff);background:#ffffff0d;border:1px solid rgba(143,163,191,.3);cursor:pointer;transition:transform .1s ease,border-color .15s ease,background .15s ease}.q-option:active{transform:scale(.98)}.q-option.picked{border-color:var(--c-primary, #f5c542)}.q-option.correct{background:color-mix(in srgb,var(--c-accent, #22c55e) 30%,transparent);border-color:var(--c-accent, #22c55e);box-shadow:0 0 18px color-mix(in srgb,var(--c-accent, #22c55e) 55%,transparent)}.q-option.wrong{background:#ef444440;border-color:#ef4444;box-shadow:0 0 18px #ef444466}.q-option.dim{opacity:.45}.q-option-hidden{min-height:50px;border-radius:14px;border:1px dashed rgba(143,163,191,.25);opacity:.4}.q-footer{margin-top:16px;display:flex;align-items:center;justify-content:space-between;min-height:34px}.q-lifeline{font-size:14px;font-weight:800;letter-spacing:1px;padding:8px 18px;border-radius:999px;color:var(--c-primary, #f5c542);border:1px solid rgba(245,197,66,.5);background:#f5c54214;cursor:pointer}.q-lifeline:disabled{opacity:.3;cursor:default}.q-verdict{font-size:14px;font-weight:700;color:var(--c-text-dim, #8fa3bf)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;background:var(--c-primary, #f5c542);animation:confetti-fall 2.6s ease-in forwards}.confetti i:nth-child(3n){background:var(--c-accent, #22c55e)}.confetti i:nth-child(4n){background:var(--c-secondary, #7dd3fc)}.confetti i:nth-child(1){left:6%;animation-delay:0s}.confetti i:nth-child(2){left:16%;animation-delay:.3s}.confetti i:nth-child(3){left:26%;animation-delay:.1s}.confetti i:nth-child(4){left:36%;animation-delay:.5s}.confetti i:nth-child(5){left:46%;animation-delay:.2s}.confetti i:nth-child(6){left:56%;animation-delay:.45s}.confetti i:nth-child(7){left:66%;animation-delay:.15s}.confetti i:nth-child(8){left:76%;animation-delay:.35s}.confetti i:nth-child(9){left:86%;animation-delay:.05s}.confetti i:nth-child(10){left:12%;animation-delay:.6s}.confetti i:nth-child(11){left:32%;animation-delay:.7s}.confetti i:nth-child(12){left:52%;animation-delay:.55s}.confetti i:nth-child(13){left:72%;animation-delay:.75s}.confetti i:nth-child(14){left:92%;animation-delay:.4s}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(105dvh) rotate(560deg);opacity:0}}