:root{--color-pink: #ec4899;--color-purple: #8b5cf6;--color-cyan: #00fff5;--color-dark: #07070f;--color-surface-navy: #0f172a;--color-difficulty-easy: #00ffc2;--color-difficulty-medium: #ffb800;--color-difficulty-hard: #ff2e63;--color-medal-gold: #ffd700;--color-medal-silver: #e2e8f0;--color-medal-bronze: #cd7f32;--color-timer-urgency: #ff003c;--color-text: #f5f5ff;--font-display: "Orbitron", sans-serif;--font-body: "Pretendard", -apple-system, system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-dark);color:var(--color-text);font-family:var(--font-body);font-size:clamp(15px,2.6vw,18px);-webkit-tap-highlight-color:transparent;background-attachment:fixed}body[data-theme=neon]{background:radial-gradient(circle at 12% 8%,rgba(236,72,153,.22),transparent 42%),radial-gradient(circle at 88% 82%,rgba(0,255,245,.16),transparent 46%),repeating-linear-gradient(0deg,rgba(139,92,246,.07) 0px,rgba(139,92,246,.07) 1px,transparent 1px,transparent 46px),repeating-linear-gradient(90deg,rgba(139,92,246,.07) 0px,rgba(139,92,246,.07) 1px,transparent 1px,transparent 46px),var(--color-dark)}body[data-theme=storybook]{background-image:radial-gradient(ellipse 70% 45% at 18% -8%,rgba(255,143,177,.4),transparent 60%),radial-gradient(ellipse 65% 45% at 92% 4%,rgba(127,216,190,.3),transparent 60%),radial-gradient(ellipse 80% 55% at 50% 115%,rgba(179,157,219,.4),transparent 65%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='30' r='1.4' fill='white' opacity='0.85'/%3E%3Ccircle cx='95' cy='75' r='1' fill='white' opacity='0.55'/%3E%3Ccircle cx='150' cy='38' r='1.6' fill='white' opacity='0.8'/%3E%3Ccircle cx='55' cy='150' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='172' cy='168' r='1.3' fill='white' opacity='0.7'/%3E%3Ccircle cx='120' cy='120' r='0.8' fill='white' opacity='0.4'/%3E%3Ccircle cx='10' cy='110' r='1.1' fill='white' opacity='0.6'/%3E%3C/svg%3E"),linear-gradient(var(--color-dark),var(--color-dark));background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;background-size:auto,auto,auto,200px 200px,auto}body[data-theme=arcade]{background:radial-gradient(ellipse 60% 40% at 50% 10%,rgba(255,212,0,.16),transparent 55%),linear-gradient(180deg,transparent 58%,rgba(108,0,255,.35) 100%),repeating-linear-gradient(0deg,rgba(255,46,99,.14) 0px,rgba(255,46,99,.14) 1px,transparent 1px,transparent 42px),repeating-linear-gradient(90deg,rgba(0,255,245,.1) 0px,rgba(0,255,245,.1) 1px,transparent 1px,transparent 42px),var(--color-dark)}body[data-theme=candy]{background-image:radial-gradient(circle at 14% 10%,rgba(255,93,162,.4),transparent 45%),radial-gradient(circle at 86% 18%,rgba(78,197,241,.35),transparent 45%),radial-gradient(circle at 50% 100%,rgba(255,225,86,.3),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Ccircle cx='20' cy='20' r='4' fill='%23FF5DA2' opacity='0.55'/%3E%3Ccircle cx='95' cy='50' r='3' fill='%234EC5F1' opacity='0.5'/%3E%3Ccircle cx='60' cy='100' r='3.5' fill='%23FFE156' opacity='0.5'/%3E%3Ccircle cx='120' cy='120' r='2.5' fill='%23B388FF' opacity='0.45'/%3E%3Ccircle cx='15' cy='90' r='2.2' fill='%237CFFB2' opacity='0.45'/%3E%3C/svg%3E"),linear-gradient(var(--color-dark),var(--color-dark));background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat;background-size:auto,auto,auto,140px 140px,auto}body[data-theme=jungle]{background-image:radial-gradient(ellipse 70% 40% at 50% -5%,rgba(253,224,71,.32),transparent 60%),radial-gradient(circle at 8% 92%,rgba(34,197,94,.32),transparent 55%),radial-gradient(circle at 94% 85%,rgba(251,146,60,.22),transparent 50%),repeating-linear-gradient(58deg,rgba(74,222,128,.07) 0px,rgba(74,222,128,.07) 2px,transparent 2px,transparent 34px),var(--color-dark)}body[data-theme=white]{background-image:radial-gradient(circle at 12% 8%,rgba(219,39,119,.1),transparent 42%),radial-gradient(circle at 88% 15%,rgba(8,145,178,.1),transparent 42%),radial-gradient(circle at 50% 100%,rgba(124,58,237,.08),transparent 55%),var(--color-dark)}button{font-family:var(--font-body);cursor:pointer;min-height:44px;min-width:44px;font-size:16px}a{color:var(--color-cyan)}.footer{color:#64748b;font-size:12px;text-align:center;padding-bottom:24px}.btn{border:none;border-radius:12px;padding:clamp(12px,3vw,16px) clamp(16px,5vw,26px);font-weight:700;font-size:clamp(15px,3.6vw,20px);white-space:nowrap;background:linear-gradient(135deg,var(--color-pink),var(--color-purple));color:#fff;box-shadow:0 0 20px #ec489966;transition:transform .15s ease}.btn:disabled,.btn-outline:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}.btn-lg{padding:clamp(14px,4vw,20px) clamp(20px,6vw,32px);font-size:clamp(17px,4.5vw,24px);border-radius:16px}.btn:active{transform:scale(.97)}h1{animation:float-bob 3.6s ease-in-out infinite}.no-float h1{animation:none}.btn-outline{background:transparent;border:2px solid var(--color-cyan);color:var(--color-cyan);box-shadow:none}.input{border-radius:10px;border:2px solid rgba(139,92,246,.5);background:#ffffff0d;color:var(--color-text);padding:clamp(11px,3vw,14px) clamp(14px,4vw,18px);font-size:clamp(16px,3.6vw,19px);min-width:0}.input:focus{outline:none;border-color:var(--color-cyan)}.card{background:#ffffff0d;border:1px solid rgba(139,92,246,.35);border-radius:16px;padding:16px}@keyframes pop-in{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(3deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.fx-pop-in{animation:pop-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes shake-x{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.fx-shake{animation:shake-x .4s ease}@keyframes glow-pulse{0%,to{box-shadow:0 0 #00fff500}50%{box-shadow:0 0 32px #00fff5cc}}.fx-glow-pulse{animation:glow-pulse 1s ease-in-out infinite}@keyframes reveal-sweep{0%{filter:blur(14px) brightness(.4);opacity:.3}60%{filter:blur(4px) brightness(1.1)}to{filter:blur(0) brightness(1);opacity:1}}.fx-reveal{animation:reveal-sweep .7s ease-out}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(220px) rotate(540deg);opacity:0}}.fx-confetti{animation:confetti-fall 1.4s ease-in forwards}.bg-cyber-grid{background-image:linear-gradient(rgba(0,255,245,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,245,.05) 1px,transparent 1px);background-size:32px 32px}@keyframes scanline{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(100vh);opacity:0}}.fx-scanline{position:fixed;top:0;left:0;width:100%;height:2px;background:#00fff559;box-shadow:0 0 12px #00fff599;animation:scanline 6s linear infinite;pointer-events:none;z-index:5}.text-glow{text-shadow:0 0 20px rgba(236,72,153,.8)}@keyframes foul-shake{0%,to{transform:translate(0)}15%{transform:translate(-8px)}30%{transform:translate(7px)}45%{transform:translate(-5px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}}.fx-foul-shake{animation:foul-shake .5s ease-in-out}@keyframes input-glow{0%,to{border-color:#8b5cf680;box-shadow:0 0 #00fff500}50%{border-color:var(--color-cyan);box-shadow:0 0 16px 2px #00fff573}}.fx-input-glow{animation:input-glow 1.4s ease-in-out infinite}@keyframes countdown-urgent-shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}.fx-countdown-urgent{animation:countdown-urgent-shake .4s ease-in-out infinite;border-color:var(--color-timer-urgency)!important}.fx-countdown-urgent .fx-countdown-num{color:var(--color-timer-urgency)!important}@keyframes bounce-char{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.fx-bounce-char{animation:bounce-char .9s ease-in-out infinite}@keyframes text-shine{0%{background-position:-120% 0}to{background-position:220% 0}}.fx-text-shine{background:linear-gradient(100deg,var(--color-difficulty-medium) 30%,#fff 48%,#fff 52%,var(--color-difficulty-medium) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:text-shine 2.2s linear infinite}.fx-rank-shine-1,.fx-rank-shine-2,.fx-rank-shine-3{display:inline-block;background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:text-shine 1.8s linear infinite}.fx-rank-shine-1 *,.fx-rank-shine-2 *,.fx-rank-shine-3 *{color:inherit;-webkit-text-fill-color:inherit}.fx-rank-shine-1{background-image:linear-gradient(100deg,var(--color-medal-gold) 30%,#fff 48%,#fff 52%,var(--color-medal-gold) 70%)}.fx-rank-shine-2{background-image:linear-gradient(100deg,#7c8aa0 30%,#fff 48%,#fff 52%,#7c8aa0 70%);filter:drop-shadow(0 0 4px rgba(226,232,240,.5))}.fx-rank-shine-3{background-image:linear-gradient(100deg,var(--color-medal-bronze) 30%,#fff 48%,#fff 52%,var(--color-medal-bronze) 70%)}@keyframes glow-pulse-slow{0%,to{box-shadow:0 0 #00fff500;text-shadow:none}50%{box-shadow:0 0 12px #00fff573;text-shadow:0 0 10px rgba(0,255,245,.6)}}.fx-glow-pulse-slow{animation:glow-pulse-slow 2.6s ease-in-out infinite}@keyframes hint-blink{0%,to{opacity:1;text-shadow:0 0 14px var(--color-cyan)}50%{opacity:.45;text-shadow:0 0 2px var(--color-cyan)}}.fx-hint-blink{animation:hint-blink 1s ease-in-out infinite}@keyframes wander-icon{0%{transform:translate(-60px,-30px) rotate(-8deg)}25%{transform:translate(50px,-45px) rotate(8deg)}50%{transform:translate(60px,35px) rotate(-6deg)}75%{transform:translate(-55px,40px) rotate(10deg)}to{transform:translate(-60px,-30px) rotate(-8deg)}}.fx-wander-icon{position:absolute;font-size:30px;opacity:.55;animation:wander-icon 7s ease-in-out infinite;pointer-events:none}@keyframes screen-shake{0%,to{transform:translate(0)}10%{transform:translate(-8px,5px)}20%{transform:translate(8px,-5px)}30%{transform:translate(-7px,-5px)}40%{transform:translate(7px,5px)}50%{transform:translate(-5px,3px)}60%{transform:translate(5px,-3px)}70%{transform:translate(-4px,3px)}80%{transform:translate(4px,-3px)}90%{transform:translate(-2px,1px)}}body.fx-screen-shake{animation:screen-shake .7s ease-in-out}@keyframes screen-flash{0%{opacity:0}12%{opacity:1}to{opacity:0}}.fx-screen-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.95),rgba(0,255,245,.5) 35%,transparent 70%);animation:screen-flash .7s ease-out}@keyframes loading-dot-blink{0%,to{opacity:.15}40%{opacity:1}}.fx-loading-dot{animation:loading-dot-blink 1.2s infinite;display:inline-block}@keyframes canvas-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fx-canvas-waiting{background-image:linear-gradient(100deg,#8b5cf600 35%,#8b5cf629,#8b5cf600 65%);background-size:250% 100%;animation:canvas-shimmer 2.4s ease-in-out infinite}@keyframes drawer-pulse{0%,to{box-shadow:0 0 #00fff500;border-color:#00fff580}50%{box-shadow:0 0 18px 2px #00fff573;border-color:var(--color-cyan)}}.fx-drawer-pulse{animation:drawer-pulse 1.8s ease-in-out infinite}@keyframes ring-flash-green{0%{box-shadow:0 0 #22c55eb3}70%{box-shadow:0 0 0 16px #22c55e00}to{box-shadow:0 0 #22c55e00}}.fx-flash-green{animation:ring-flash-green 1.1s ease-out 1}@keyframes ring-flash-yellow{0%{box-shadow:0 0 #facc15b3}70%{box-shadow:0 0 0 16px #facc1500}to{box-shadow:0 0 #facc1500}}.fx-flash-yellow{animation:ring-flash-yellow 1.1s ease-out 1}.badge-pill{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;border-radius:999px;padding:4px 12px;white-space:nowrap;flex-shrink:0}.teacher-split{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,460px);gap:24px;align-items:start;width:100%;max-width:1220px}@media (max-width: 860px){.teacher-split{grid-template-columns:1fr}}.clip-corner{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}@keyframes stamp-slam{0%{transform:scale(2.4) rotate(-14deg);opacity:0}45%{transform:scale(.85) rotate(-14deg);opacity:1}62%{transform:scale(1.12) rotate(-14deg)}80%{transform:scale(.97) rotate(-14deg)}to{transform:scale(1) rotate(-14deg);opacity:1}}.fx-stamp{display:inline-block;animation:stamp-slam .45s cubic-bezier(.2,1.6,.4,1);border-width:6px;border-style:solid;border-radius:12px;padding:6px 22px;font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:2px}.fx-stamp-correct{color:var(--color-difficulty-easy);border-color:var(--color-difficulty-easy);text-shadow:0 0 14px var(--color-difficulty-easy);box-shadow:0 0 28px #00ffc280}.fx-stamp-wrong{color:var(--color-timer-urgency);border-color:var(--color-timer-urgency);text-shadow:0 0 14px var(--color-timer-urgency);box-shadow:0 0 28px #ff003c80}@keyframes curtain-wipe{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}.fx-curtain-reveal{animation:curtain-wipe .7s cubic-bezier(.65,0,.35,1)}@keyframes scan-sweep{0%{top:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.fx-scan-sweep{position:absolute;left:0;top:0;width:100%;height:6px;background:linear-gradient(90deg,transparent,var(--color-cyan),transparent);box-shadow:0 0 16px 4px var(--color-cyan);animation:scan-sweep .7s cubic-bezier(.65,0,.35,1);animation-fill-mode:forwards;pointer-events:none;z-index:3}@keyframes reveal-flash{0%{opacity:0}30%{opacity:.9}to{opacity:0}}.fx-reveal-flash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#fff,var(--color-cyan) 60%,transparent 100%);animation:reveal-flash .45s ease-out;animation-fill-mode:forwards;pointer-events:none;z-index:4;border-radius:12px}@keyframes countdown-pulse{0%{transform:scale(1.6);opacity:0}30%{transform:scale(1);opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(.6);opacity:0}}.fx-countdown-pulse{animation:countdown-pulse .9s ease-out}@keyframes card-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.fx-card-float-0{animation:card-float 3s ease-in-out infinite}.fx-card-float-1{animation:card-float 3.4s ease-in-out infinite;animation-delay:.2s}.fx-card-float-2{animation:card-float 3.8s ease-in-out infinite;animation-delay:.4s}@keyframes rank-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}.fx-rank-float{animation:rank-float 1.6s ease-in-out infinite}.fx-rank-float-0{animation-duration:1.3s}.fx-rank-float-1{animation-duration:1.6s;animation-delay:.15s}.fx-rank-float-2{animation-duration:1.9s;animation-delay:.3s}@keyframes podium-confetti-fall{0%{transform:translateY(-40px) rotate(0);opacity:0}8%{opacity:1}to{transform:translate(var(--drift, 0px),480px) rotate(720deg);opacity:0}}.fx-podium-confetti-piece{position:absolute;top:0;animation:podium-confetti-fall 3.2s cubic-bezier(.25,.1,.4,1) forwards;pointer-events:none}@keyframes podium-burst-in{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}.fx-podium-burst{animation:podium-burst-in .6s cubic-bezier(.2,1.4,.4,1)}@keyframes podium-spotlight-sweep{0%{transform:translate(-120%) rotate(20deg);opacity:0}15%{opacity:.5}85%{opacity:.5}to{transform:translate(120%) rotate(20deg);opacity:0}}.fx-podium-spotlight{position:absolute;top:-20%;left:0;width:40%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:podium-spotlight-sweep 2.4s ease-in-out infinite;pointer-events:none}@keyframes float-bob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1deg)}}.fx-float{display:inline-block;animation:float-bob 3.2s ease-in-out infinite}.fx-float-slow{animation-duration:4.5s}.fx-float-delay{animation-delay:.6s}@keyframes drift-blob{0%{transform:translate(0) scale(1)}33%{transform:translate(24px,-30px) scale(1.08)}66%{transform:translate(-20px,18px) scale(.95)}to{transform:translate(0) scale(1)}}.bg-floating-shapes{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.bg-floating-shapes span{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;animation:drift-blob ease-in-out infinite}.bg-floating-shapes.variant-cloud span{filter:blur(60px);opacity:.45}@keyframes drift-pixel{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(16px,-16px) rotate(8deg)}}.bg-floating-shapes.variant-pixel span{border-radius:4px;filter:none;opacity:.22;animation-name:drift-pixel;animation-timing-function:steps(6)}@keyframes bounce-bubble{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-46px) scale(1.18)}}.bg-floating-shapes.variant-bubble span{filter:blur(6px);opacity:.55;animation-name:bounce-bubble;animation-timing-function:cubic-bezier(.68,-.55,.27,1.55)}@keyframes sway-leaf{0%,to{transform:translate(0) rotate(-8deg)}50%{transform:translate(26px,14px) rotate(8deg)}}.bg-floating-shapes.variant-leaf span{border-radius:42% 58% 55% 45%/55% 45% 60% 40%;filter:blur(55px);opacity:.4;animation-name:sway-leaf;animation-timing-function:ease-in-out}.bg-floating-shapes.variant-glow span{filter:blur(80px);opacity:.16}body[data-theme=storybook] .card{border-radius:28px;border-color:#ff8fb166;box-shadow:0 8px 24px -8px #b39ddb59}body[data-theme=storybook] .btn{border-radius:999px;box-shadow:0 6px 18px -6px #ff8fb180}body[data-theme=storybook] .input{border-radius:999px}body[data-theme=arcade] .card{border-radius:4px;border-width:3px;border-color:var(--color-cyan);box-shadow:4px 4px 0 var(--color-purple);-webkit-backdrop-filter:none;backdrop-filter:none}body[data-theme=arcade] .btn{border-radius:2px;box-shadow:3px 3px 0 var(--color-dark),3px 3px 0 1px var(--color-cyan)}body[data-theme=arcade] .input{border-radius:2px}body[data-theme=arcade]:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply}body[data-theme=candy] .card{border-radius:24px;border-color:#ff5da280;box-shadow:0 10px 26px -10px #ff5da273}body[data-theme=candy] .btn{border-radius:999px;box-shadow:0 8px 20px -6px #ff5da28c}body[data-theme=candy] .input{border-radius:999px}body[data-theme=jungle] .card{border-radius:20px 30px;border-color:#4ade8073;box-shadow:0 10px 24px -10px #22c55e59}body[data-theme=jungle] .btn{border-radius:18px;box-shadow:0 6px 18px -6px #fb923c80}body[data-theme=jungle] .input{border-radius:16px}body[data-theme=white] .card{background:#1e223009;border:1px solid rgba(124,58,237,.18);box-shadow:0 10px 26px -14px #1e223038}body[data-theme=white] .input{background:#1e22300a;border-color:#7c3aed4d}body[data-theme=white] .btn{box-shadow:0 8px 20px -8px #db277759}@keyframes answer-flash-wash{0%{opacity:0}15%{opacity:.22}to{opacity:0}}@keyframes answer-flash-sparkle{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(.6)}}