@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Noto+Sans+SC:wght@400;500;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#fffffff2;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-dark-radial:radial-gradient(circle at center, #1b2236 0%, #080c16 100%);--accent-color:#7c4dff;--accent-cyan:#20f5ff;--accent-pink:#ff2bd6;--accent-lime:#a8ff3e;--text-primary:#fff;--text-secondary:#a0aec0;--color-fire:#ff3b30;--color-fire-glow:#ff3b3080;--color-water:#007aff;--color-water-glow:#007aff80;--color-wind:#fc0;--color-wind-glow:#ffcc0080;--color-earth:#34c759;--color-earth-glow:#34c75980;--color-magic:#af52de;--color-magic-glow:#af52de80;--glass-bg:#ffffff0f;--glass-bg-hover:#ffffff1f;--glass-border:#ffffff14;--glass-border-focus:#ffffff40;--glass-blur:blur(16px);--shadow-premium:0 8px 32px 0 #0000005e;--game-padding:30px;--card-width:150px;--card-height:210px;--card-font:3.6rem;--card-gap:30px;--op-btn-size:76px;--op-font:2.2rem;--op-gap:24px;--op-tray-margin:40px;--ctrl-gap:24px;--ctrl-padding:14px 32px;--ctrl-font:1.1rem;background-color:#0b0f19;font-family:Outfit,Noto Sans SC,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;margin:0;padding:0}input,textarea{-webkit-user-select:text;user-select:text}body{background:linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), radial-gradient(circle at 18% 12%, #20f5ff29, transparent 32%), radial-gradient(circle at 82% 78%, #ff2bd629, transparent 34%), var(--bg-dark-radial);background-size:42px 42px,42px 42px,auto,auto,auto;width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff05;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.glass-panel{background:linear-gradient(145deg, #ffffff1f, #ffffff09), var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);border-radius:8px;transition:all .3s cubic-bezier(.25,.8,.25,1)}.glass-panel-hover:hover{background:var(--glass-bg-hover);border-color:#20f5ff73;transform:translateY(-4px);box-shadow:0 0 0 1px #20f5ff1f,0 18px 45px #00000073,0 0 28px #20f5ff2e}.magic-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#20f5ff 0%,#7c4dff 48%,#ff2bd6 100%);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;transition:all .2s;display:flex;box-shadow:inset 0 0 0 1px #ffffff24,0 10px 26px #7c4dff57}.magic-btn:hover{transform:translateY(-3px)scale(1.03);box-shadow:inset 0 0 0 1px #ffffff2e,0 16px 32px #20f5ff33,0 0 24px #ff2bd63d}.magic-btn:active{transform:translateY(1px)}.magic-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.6;background:#3a3f50}.magic-btn.secondary{box-shadow:none;background:#ffffff13;border:1px solid #ffffff26}.magic-btn.secondary:hover{background:#ffffff26;border-color:#ffffff4d;box-shadow:0 4px 15px #ffffff0d}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(1deg)}to{transform:translateY(0)rotate(0)}}@keyframes float-gentle{0%{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes pulseGlow{0%{box-shadow:0 0 10px #20f5ff59}50%{box-shadow:0 0 32px #ff2bd68c}to{box-shadow:0 0 10px #20f5ff59}}@keyframes holoSweep{0%{opacity:0;transform:translate(-140%)skew(-18deg)}20%{opacity:.9}to{opacity:0;transform:translate(140%)skew(-18deg)}}@keyframes energyGridDrift{0%{background-position:0 0,0 0}to{background-position:42px 42px,42px 42px}}@keyframes dealIn{0%{opacity:0;transform:translateY(100px)rotate(-15deg)scale(.6)}70%{transform:translateY(-10px)rotate(3deg)scale(1.05)}to{opacity:1;transform:translateY(0)rotate(0)scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes bossHurt{0%,to{filter:none;transform:translate(0)scale(1)}20%{filter:brightness(1.5)sepia()hue-rotate(-50deg)saturate(5);transform:translate(-10px,-5px)scale(.98)}40%{filter:brightness(1.5)sepia()hue-rotate(-50deg)saturate(5);transform:translate(8px,10px)}60%{filter:brightness(1.2);transform:translate(-10px,5px)}80%{filter:brightness(1.1);transform:translate(5px,-5px)}}@keyframes energyShootLeft{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(-300px,-150px)scale(.2)}}@keyframes energyShootRight{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(300px,-150px)scale(.2)}}@keyframes energyShootVS{0%{opacity:1;transform:translate(var(--start-x), var(--start-y)) scale(1)}to{opacity:0;transform:translate(var(--end-x), var(--end-y)) scale(.2)}}.animate-float{animation:4s ease-in-out infinite float}.animate-float-delayed{animation:4s ease-in-out 1.5s infinite float}.animate-shake{animation:.4s ease-in-out shake}.animate-boss-hurt{animation:.5s ease-out bossHurt}.badge-fire{background:var(--color-fire);box-shadow:0 0 10px var(--color-fire-glow)}.badge-water{background:var(--color-water);box-shadow:0 0 10px var(--color-water-glow)}.badge-wind{background:var(--color-wind);color:#000;box-shadow:0 0 10px var(--color-wind-glow)}.badge-earth{background:var(--color-earth);box-shadow:0 0 10px var(--color-earth-glow)}.badge-magic{background:var(--color-magic);box-shadow:0 0 10px var(--color-magic-glow)}.confetti-overlay{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.combo-active{animation:1s infinite pulseGlow;border-color:#ff9800!important}.dragging{opacity:.5;transform:scale(1.05);box-shadow:0 15px 30px #00000080!important}html,body,#root{-webkit-overflow-scrolling:touch;touch-action:manipulation;width:100%;height:100%;margin:0;padding:0;position:fixed;overflow:hidden}@media (width<=768px){:root{--game-padding:16px;--card-width:120px;--card-height:170px;--card-font:2.8rem;--card-gap:16px;--op-btn-size:60px;--op-font:1.8rem;--op-gap:14px;--op-tray-margin:24px;--ctrl-gap:14px;--ctrl-padding:10px 20px;--ctrl-font:.95rem}}.main-menu-screen{gap:clamp(18px,3vh,30px);justify-content:flex-start!important;padding:clamp(18px,4vw,40px)!important}.main-menu-top{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:4px 0 10px;position:sticky;top:0}.main-menu-brand{margin-top:clamp(6px,2vh,20px)!important}.menu-status-panel{margin:6px 0 0!important}.menu-mode-card-wide{grid-column:span 2}.game-topbar{gap:12px}.game-header-title h2{font-size:clamp(1rem,2.4vw,1.45rem);line-height:1.15}.game-stats-row{flex-wrap:wrap;justify-content:flex-end}.game-card-node,.vs-card-node{isolation:isolate;overflow:hidden}.game-card-node:after,.vs-card-node:after{content:"";pointer-events:none;border:1px solid #ffffff38;border-radius:7px;position:absolute;inset:1px}.game-card-value,.vs-card-node [style*="var(--card-font)"]{font-variant-numeric:tabular-nums}.game-control-panel{flex-wrap:wrap;align-items:center;width:100%}.ai-screen{z-index:1;flex-direction:column;gap:clamp(18px,3vw,28px);width:100%;height:100%;padding:clamp(18px,4vw,42px);display:flex;position:relative;overflow-y:auto}.ai-topbar{text-align:center;grid-template-columns:90px 1fr 90px;align-items:center;gap:12px;width:min(1040px,100%);margin:0 auto;display:grid}.ai-topbar h1{color:#fff7ed;text-shadow:0 8px 30px #facc1540;font-size:clamp(1.8rem,5vw,4rem);line-height:1}.eyebrow{color:#7dd3fc;letter-spacing:0;text-transform:uppercase;margin-bottom:8px;font-size:.78rem;font-weight:800}.ai-stage{grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:clamp(18px,3vw,30px);width:min(1040px,100%);min-height:520px;margin:0 auto;padding:clamp(18px,3vw,32px);display:grid}.ai-input-area,.ai-answer-area{flex-direction:column;justify-content:center;display:flex}.ai-prompt{color:var(--text-secondary);margin-bottom:22px;font-size:.98rem;line-height:1.7}.ai-number-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.ai-number-card{background:linear-gradient(145deg,#ffffff1f,#ffffff09);border:1px solid #ffffff1f;border-radius:8px;flex-direction:column;justify-content:space-between;min-height:126px;padding:14px;display:flex}.ai-number-card span{color:#bae6fd;font-size:.78rem;font-weight:700}.ai-number-card input{color:#fff;width:100%;font:inherit;text-align:center;background:0 0;border:none;outline:none;font-size:clamp(2.2rem,8vw,4.2rem);font-weight:900}.ai-ask-btn{width:100%;min-height:54px;margin-top:16px}.ai-answer-area{background:linear-gradient(135deg,#0ea5e91f,#0000 38%),linear-gradient(315deg,#facc151f,#0000 38%),#0000002e;border:1px solid #ffffff14;border-radius:8px;min-height:360px;padding:clamp(18px,3vw,28px)}.ai-empty,.ai-thinking{text-align:center;height:100%;min-height:260px;color:var(--text-secondary);place-items:center;display:grid}.ai-empty span{color:#ffffff14;font-size:clamp(5rem,16vw,9rem);font-weight:900;line-height:.9;display:block}.thinking-orbit{border:2px solid #ffffff1a;border-top-color:#fde68a;border-radius:50%;width:78px;height:78px;animation:.9s linear infinite spin}.ai-result h2{color:#fff;margin-bottom:20px;font-size:clamp(1.35rem,4vw,2.3rem);line-height:1.22}.ai-result ol{color:#e0f2fe;gap:10px;padding-left:22px;display:grid}.ai-result li{background:#ffffff12;border-radius:8px;padding:10px 12px}.ai-result-bad p:last-child{color:var(--text-secondary);line-height:1.7}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=760px){body{background-size:30px 30px,30px 30px,auto,auto,auto}.main-menu-screen{gap:14px;padding:14px!important}.main-menu-top{gap:8px}.main-menu-top .magic-btn{white-space:nowrap;flex:1;min-height:40px}.main-menu-brand [style]{max-width:100%}.main-menu-brand h1{font-size:clamp(2.3rem,15vw,3.2rem)!important}.main-menu-brand h2{margin-top:0!important;font-size:1.08rem!important}.main-menu-brand p{margin-top:6px!important;font-size:.8rem!important}.menu-status-panel{gap:10px;width:100%!important;padding:10px 12px!important}.menu-status-panel,.menu-status-panel>div{flex-wrap:wrap}.menu-status-panel .magic-btn{min-height:38px}.menu-grid{margin-bottom:12px;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.menu-mode-card{border-radius:8px!important;height:148px!important;padding:12px 10px!important}.menu-mode-card-wide{grid-column:span 2}.game-topbar{grid-template-columns:auto 1fr;align-items:start!important;display:grid!important}.game-header-title{text-align:right!important}.game-stats-row{grid-column:1/-1;justify-content:center!important;gap:8px!important}.game-arena{justify-content:flex-start!important;margin:8px 0!important}.game-cards-wrapper{grid-template-columns:repeat(2, var(--card-width));justify-content:center!important;align-items:center!important;display:grid!important}.game-card-node{padding:12px!important}.game-card-header{font-size:.68rem!important}.game-card-expr{max-height:30px;overflow:hidden;font-size:.62rem!important}.game-operator-tray{justify-content:center;width:100%}.game-control-panel .magic-btn{flex:calc(50% - 8px);justify-content:center;min-height:42px}.ai-topbar{grid-template-columns:1fr}.ai-back-btn{width:100%}.ai-stage{grid-template-columns:1fr;min-height:auto}.ai-answer-area{min-height:300px}}@media (width<=480px){:root{--game-padding:12px;--card-width:96px;--card-height:140px;--card-font:2.3rem;--card-gap:10px;--op-btn-size:50px;--op-font:1.5rem;--op-gap:10px;--op-tray-margin:16px;--ctrl-gap:8px;--ctrl-padding:8px 14px;--ctrl-font:.85rem}.magic-btn{padding:8px 16px;font-size:.85rem}}@media (width<=360px){:root{--game-padding:8px;--card-width:82px;--card-height:120px;--card-font:1.9rem;--card-gap:6px;--op-btn-size:42px;--op-font:1.3rem;--op-gap:6px;--op-tray-margin:12px;--ctrl-padding:6px 10px;--ctrl-font:.75rem}}.vs-p1-rotated{transform-origin:50%;transform:rotate(180deg)}.menu-grid{z-index:10;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;width:100%;max-width:1000px;margin-bottom:20px;display:grid}.menu-mode-card{text-align:center;cursor:pointer;box-sizing:border-box;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:center;height:240px;padding:25px;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;overflow:hidden}.menu-mode-card:before,.vs-card-node:before{content:"";pointer-events:none;background:linear-gradient(120deg,#0000 0%,#ffffff61 45%,#0000 68%);position:absolute;inset:0;transform:translate(-140%)skew(-18deg)}.menu-mode-card:hover:before,.vs-card-node:hover:before{animation:.9s holoSweep}.card-emoji{margin-bottom:10px;font-size:3.2rem;line-height:1}@media (width<=768px){.menu-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}.menu-mode-card{border-radius:16px!important;height:165px!important;padding:15px 10px!important}.menu-mode-card h3{margin-bottom:4px!important;font-size:1.1rem!important}.menu-mode-card p{display:none!important}.menu-mode-card .card-emoji{margin-bottom:5px!important;font-size:2.5rem!important}.menu-mode-card .difficultyTag{padding:2px 8px!important;font-size:.7rem!important}}@media (height<=700px){.menu-grid{gap:12px!important}.menu-mode-card{height:140px!important;padding:10px!important}.menu-mode-card .card-emoji{font-size:2rem!important}}.vs-container{background-color:#0a0d18;background-image:linear-gradient(#20f5ff09 1px,#0000 1px),linear-gradient(90deg,#ff2bd608 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:34px 34px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;flex-direction:row;width:100%;height:100%;animation:16s linear infinite energyGridDrift;display:flex;position:relative;overflow:hidden}.vs-player-area{box-sizing:border-box;z-index:10;background-color:#0003;border:2px solid #0000;flex-direction:column;justify-content:space-between;width:280px;height:100%;padding:30px 20px;transition:all .3s;display:flex}.vs-p1-area{border-right:1px solid #ffffff0d}.vs-p2-area{border-left:1px solid #ffffff0d}.vs-active-p1{border-color:var(--color-water)!important;background-color:#007aff14!important}.vs-active-p2{border-color:var(--color-fire)!important;background-color:#ff3b3014!important}.vs-cards-center{box-sizing:border-box;background-color:#05070f80;flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;padding:30px;display:flex;position:relative}.vs-cards-wrapper{justify-content:center;align-items:center;gap:var(--card-gap);perspective:1000px;flex-wrap:wrap;width:100%;max-width:900px;display:flex}.vs-card-node{width:var(--card-width);height:var(--card-height);box-sizing:border-box;border-radius:8px;flex-direction:column;justify-content:space-between;padding:16px;transition:all .2s,width .2s,height .2s;display:flex;position:relative;overflow:hidden}.vs-operator-tray{gap:var(--op-gap);margin-top:var(--op-tray-margin);display:flex}.vs-operator-btn{width:var(--op-btn-size);height:var(--op-btn-size);font-size:var(--op-font);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-weight:700;transition:all .2s;display:flex}@media (width<=768px){.vs-container{flex-direction:column!important}.vs-player-area{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;width:100%!important;height:22%!important;padding:10px 16px!important}.vs-p1-area{border-bottom:1px solid #ffffff0d!important;border-right:none!important}.vs-p2-area{border-top:1px solid #ffffff0d!important;border-left:none!important}.vs-cards-center{height:56%!important;padding:12px!important}.vs-p1-rotated{transform:rotate(180deg)!important}.vs-player-area .vs-score-board{flex-direction:row!important;align-items:center!important;gap:8px!important;margin-top:0!important}.vs-player-area .vs-wizard-label{font-size:.85rem!important}.vs-player-area .vs-score-num{font-size:2.2rem!important}.vs-player-area .vs-buzzer-btn{border-radius:12px!important;width:120px!important;height:55px!important;font-size:1.1rem!important}.vs-player-area .vs-solve-controls{flex-direction:row!important;align-items:center!important;gap:8px!important;width:auto!important}.vs-player-area .vs-timer-ring{margin-top:0!important;padding:6px 12px!important;font-size:.95rem!important}.vs-player-area .vs-solve-btn{width:70px!important;padding:8px 0!important;font-size:.8rem!important}}
