:root{--bg: #0a0e1a;--panel: #0f1628;--panel2: #131c33;--line: #1f2b44;--gold: #f5c451;--gold-d: #c99a2e;--cyan: #4da3ff;--cyan-d: #2a7fd4;--green: #4de3a0;--green-d: #2aa87a;--red: #ff6b6b;--red-d: #c94f4f;--purple: #a78bfa;--gray: #8a93b2;--text: #eaf0ff;--dim: #9fb3c8;--mono: "Cascadia Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;--sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}body:before,body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}body:before{background:radial-gradient(1px 1px at 20% 30%,rgba(245,196,81,.6),transparent),radial-gradient(1px 1px at 60% 70%,rgba(77,163,255,.5),transparent),radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 40% 80%,rgba(245,196,81,.4),transparent),radial-gradient(1px 1px at 10% 60%,rgba(167,139,250,.4),transparent),radial-gradient(1px 1px at 90% 50%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 30% 10%,rgba(77,163,255,.4),transparent),radial-gradient(2px 2px at 70% 90%,rgba(255,255,255,.3),transparent),radial-gradient(1px 1px at 50% 50%,rgba(245,196,81,.3),transparent);background-size:100% 100%;animation:twinkle 8s ease-in-out infinite alternate}body:after{background:radial-gradient(ellipse at 20% 50%,rgba(77,163,255,.06),transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(167,139,250,.05),transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(245,196,81,.04),transparent 50%);animation:drift 30s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.6}to{opacity:1}}@keyframes drift{0%{transform:translate(0)}to{transform:translate(-2%,1%)}}.app{max-width:980px;margin:0 auto;padding:20px;position:relative;z-index:1}.menu{text-align:center;padding:40px 0}.menu-title{font-size:42px;letter-spacing:4px;color:var(--gold);text-shadow:0 0 30px rgba(245,196,81,.4),0 0 60px rgba(245,196,81,.15);animation:titlePulse 3s ease-in-out infinite}@keyframes titlePulse{0%,to{text-shadow:0 0 30px rgba(245,196,81,.4),0 0 60px rgba(245,196,81,.15)}50%{text-shadow:0 0 40px rgba(245,196,81,.6),0 0 80px rgba(245,196,81,.25)}}.menu-sub{color:var(--dim);margin:8px 0 40px;font-family:var(--mono);letter-spacing:2px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:640px;margin:0 auto}.menu-btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:22px 12px;font-size:16px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-family:var(--sans);position:relative;overflow:hidden}.menu-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(77,163,255,.08),transparent);opacity:0;transition:opacity .3s}.menu-btn:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 8px 24px #4da3ff26}.menu-btn:hover:before{opacity:1}.menu-btn.primary{background:linear-gradient(180deg,#f8d97a,var(--gold));color:#1c1505;border-color:var(--gold);box-shadow:0 4px 16px #f5c4514d}.menu-btn.primary:hover{box-shadow:0 8px 28px #f5c45166}.menu-btn.locked{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.menu-hint{color:var(--gray);font-size:13px;margin-top:20px;font-family:var(--mono)}.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:10px;padding:20px;position:relative;margin-bottom:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:panelIn .4s ease-out}@keyframes panelIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel:before{content:"";position:absolute;top:-1px;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}.panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px;flex-wrap:wrap}.panelhead .tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--cyan);text-transform:uppercase}.btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--sans);position:relative;overflow:hidden}.btn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px);box-shadow:0 4px 12px #4da3ff1f}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#f8d97a,var(--gold));color:#1c1505;border-color:var(--gold);box-shadow:0 2px 8px #f5c45140}.btn.primary:hover:not(:disabled){color:#1c1505;box-shadow:0 6px 20px #f5c45166}.btn.small{padding:8px 14px;font-size:12px}.bar{height:14px;background:#0c1220;border:1px solid var(--line);border-radius:7px;overflow:hidden;position:relative}.bar .fill{height:100%;width:100%;background:linear-gradient(90deg,var(--cyan-d),var(--cyan));transition:width .5s ease-out;position:relative}.bar .fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:barShimmer 2s ease-in-out infinite}@keyframes barShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.bar .fill.pc{background:linear-gradient(90deg,var(--gold-d),var(--gold))}.bar .fill.low{background:linear-gradient(90deg,var(--red-d),var(--red));animation:barLowPulse 1s ease-in-out infinite}@keyframes barLowPulse{0%,to{opacity:1}50%{opacity:.7}}.bar .lbl{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:#eaf0ff;letter-spacing:1px}.card{transition:all .2s cubic-bezier(.4,0,.2,1)!important;position:relative;overflow:hidden}.card:not(:disabled):hover{border-color:var(--cyan)!important;transform:translateY(-4px)!important;box-shadow:0 8px 24px #4da3ff33!important}.card:not(:disabled):hover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(77,163,255,.1),transparent);pointer-events:none}.card:not(:disabled):active{transform:translateY(-1px)!important}.shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.crit-flash{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(245,196,81,.3),transparent 60%);pointer-events:none;z-index:9999;animation:critFlash .5s ease-out forwards}@keyframes critFlash{0%{opacity:0}30%{opacity:1}to{opacity:0}}.tide-pulse{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center bottom,rgba(255,107,107,.15),transparent 60%);animation:tidePulse .8s ease-out forwards}@keyframes tidePulse{0%{opacity:0;transform:scale(1.2)}50%{opacity:1}to{opacity:0;transform:scale(1)}}.damage-num{position:absolute;font-family:var(--mono);font-weight:900;font-size:28px;color:var(--gold);text-shadow:0 0 12px rgba(245,196,81,.8);pointer-events:none;z-index:100;animation:dmgFloat 1s ease-out forwards}.damage-num.crit{font-size:38px;color:var(--gold);text-shadow:0 0 20px var(--gold),0 0 40px rgba(245,196,81,.5)}.damage-num.miss{color:var(--red);text-shadow:0 0 12px rgba(255,107,107,.6)}.damage-num.heal{color:#6bff9e;text-shadow:0 0 12px rgba(107,255,158,.5);font-size:22px}@keyframes dmgFloat{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-10px) scale(1.2)}to{opacity:0;transform:translateY(-60px) scale(1)}}.tame-burst{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9997;display:flex;align-items:center;justify-content:center}.tame-star{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:starBurst 1s ease-out forwards}@keyframes starBurst{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}.word-display{text-shadow:0 0 20px rgba(245,196,81,.5),0 0 40px rgba(245,196,81,.2);animation:wordBreath 3s ease-in-out infinite}@keyframes wordBreath{0%,to{text-shadow:0 0 20px rgba(245,196,81,.5),0 0 40px rgba(245,196,81,.2)}50%{text-shadow:0 0 30px rgba(245,196,81,.7),0 0 60px rgba(245,196,81,.3)}}.tide-warn{animation:tideWarn 1.5s ease-in-out infinite}@keyframes tideWarn{0%,to{opacity:1}50%{opacity:.6}}.opt-btn{position:relative;overflow:hidden}.opt-btn.correct{border-color:var(--green)!important;color:var(--green)!important;background:#2da87a1a!important}.opt-btn.wrong{border-color:var(--red)!important;color:var(--red)!important;background:#c94f4f1a!important;animation:shake .3s}.combo-display{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:900;animation:comboPop .3s ease-out}@keyframes comboPop{0%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}.badge-glow{animation:badgeGlow 2s ease-in-out infinite}@keyframes badgeGlow{0%,to{box-shadow:0 0 8px var(--gold)}50%{box-shadow:0 0 20px var(--gold),0 0 40px #f5c4514d}}.volume-btn{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;transition:all .15s;font-family:var(--mono)}.volume-btn:hover{border-color:var(--cyan);color:var(--cyan)}.qword{color:var(--gold);font-family:var(--mono);font-weight:700;font-size:1.15em;letter-spacing:1px;text-shadow:0 0 8px rgba(245,196,81,.4);padding:0 2px}.lbl-sm{color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase}.inp{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:8px 12px;font-size:14px;font-family:var(--sans);outline:none;transition:border-color .15s}.inp:focus{border-color:var(--cyan)}.rank{width:100%;border-collapse:collapse;font-size:14px}.rank th,.rank td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}.rank th{color:var(--dim);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:1px}.rank td.gold{color:var(--gold);font-weight:800}.rank .you{margin-left:6px;font-size:10px;color:#1c1505;background:var(--gold);border-radius:4px;padding:1px 5px;font-family:var(--mono)}@media (max-width: 640px){.menu-grid{grid-template-columns:1fr 1fr}.menu-title{font-size:30px}.damage-num{font-size:22px}.damage-num.crit{font-size:30px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body:before,body:after{animation:none}}