*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#05060a;--fg:#e8ecf4;--dim:#7a8291;--accent:#4fd0ff;--danger:#ff4d5e;--ok:#3ddc84;--gold:#ffd166;--cyan-glow:rgba(79,208,255,0.35);--panel-bg:rgba(255,255,255,0.04);--panel-border:rgba(255,255,255,0.1)}body,html{height:100%;background:var(--bg);color:var(--fg);font-family:Segoe UI,Microsoft YaHei,system-ui,sans-serif;overflow:hidden}a{text-decoration:none}a,button{color:inherit}button{font:inherit;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 22px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}button:hover{background:rgba(255,255,255,.12);border-color:var(--accent)}button:active{transform:translateY(1px)}canvas{display:block}.page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(1200px 640px at 50% 18%,#141c3a 0,#0b1022 52%,#05060c 100%)}.page:after,.page:before{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}.page:before{width:420px;height:420px;top:-120px;left:8%;background:radial-gradient(circle,rgba(79,208,255,.16) 0,transparent 70%);animation:drift 14s ease-in-out infinite alternate}.page:after{width:520px;height:520px;bottom:-180px;right:6%;background:radial-gradient(circle,rgba(168,130,255,.16) 0,transparent 70%);animation:drift 18s ease-in-out infinite alternate-reverse}@keyframes drift{0%{transform:translateY(-12px)}to{transform:translateY(18px)}}.deco-tri{position:absolute;border:1px solid rgba(120,180,255,.22);transform:rotate(45deg);pointer-events:none;z-index:0}@keyframes triPulse{0%,to{opacity:.3;transform:rotate(45deg) scale(1)}50%{opacity:.85;transform:rotate(45deg) scale(1.12)}}.title-glow{font-size:clamp(56px,12vw,96px);font-weight:800;letter-spacing:.18em;margin-right:-.18em;color:#f2f6ff;text-shadow:0 0 18px rgba(79,208,255,.55),0 0 64px rgba(79,208,255,.25)}.subtitle-en{margin-top:8px;color:rgba(160,200,255,.75);font-size:18px;font-weight:600;letter-spacing:.62em;margin-right:-.62em}.tagline{margin-top:24px;color:var(--dim);text-align:center;line-height:2;font-size:15px}.page-title{font-size:36px;font-weight:800;letter-spacing:.32em;margin-right:-.32em;color:var(--fg);text-shadow:0 0 26px var(--cyan-glow);margin-bottom:26px;z-index:1}.btn-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;z-index:1}.btn-ghost,.btn-primary,.btn-row{align-items:center;justify-content:center}.btn-ghost,.btn-primary{display:inline-flex;min-width:126px;padding:13px 32px;border-radius:12px;font-size:16px;font-weight:600;letter-spacing:.14em;cursor:pointer;transition:transform .08s ease,box-shadow .2s,background .2s,border-color .2s}.btn-primary{color:#04121a;background:linear-gradient(135deg,#6fd6ff,#3fa8ff);border:1px solid rgba(160,220,255,.6);box-shadow:0 0 22px rgba(79,208,255,.35)}.btn-primary:hover{box-shadow:0 0 36px rgba(79,208,255,.6);transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.btn-ghost{color:var(--fg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18)}.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--accent);transform:translateY(-1px)}.btn-ghost:active{transform:translateY(1px)}.panel{width:min(360px,88vw);display:flex;flex-direction:column;gap:24px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:28px 26px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1}.form-row label{display:block;color:var(--dim);font-size:14px;margin-bottom:10px}.form-row select{width:100%;padding:10px 12px;background:rgba(255,255,255,.06);color:var(--fg);border:1px solid rgba(255,255,255,.18);border-radius:8px;font:inherit}.form-row .hint{color:rgba(122,130,145,.6);font-size:12px;margin-top:10px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.12);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#6fd6ff,#3fa8ff);border:2px solid #eaf6ff;box-shadow:0 0 10px rgba(79,208,255,.5);cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#3fa8ff;border:2px solid #eaf6ff;cursor:pointer}.footer{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(122,130,145,.5);font-size:12px;letter-spacing:.08em;z-index:1}.overlay{position:absolute;inset:0;pointer-events:none;justify-content:center;background:rgba(5,6,10,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10}.overlay,.overlay-card{display:flex;flex-direction:column;align-items:center}.overlay-card{pointer-events:auto;gap:16px;padding:34px 44px;background:rgba(10,14,28,.82);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 0 60px rgba(0,0,0,.5)}.overlay-title{font-size:40px;font-weight:800;letter-spacing:.24em;margin-right:-.24em}.overlay-sub{color:var(--dim);font-size:14px;text-align:center;line-height:1.9}.overlay .btn-row{margin-top:8px}.tutorial{z-index:20}.tutorial-card{width:min(420px,90vw)}.tutorial-gestures{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:6px}.tutorial-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s,box-shadow .2s}.tutorial-item.done{border-color:rgba(61,220,132,.5);background:rgba(61,220,132,.08);box-shadow:0 0 18px rgba(61,220,132,.12)}.tutorial-glyph{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:8px;background:rgba(255,255,255,.06)}.tutorial-label{display:flex;flex-direction:column;gap:2px;text-align:left;flex:1 1}.tutorial-label b{font-size:15px;letter-spacing:.1em}.tutorial-label span{color:var(--dim);font-size:12.5px}.tutorial-check{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:var(--ok);font-size:13px;display:flex;align-items:center;justify-content:center}.tutorial-item.done .tutorial-check{border-color:var(--ok);background:rgba(61,220,132,.15)}.tutorial-move{margin-top:12px;color:rgba(160,200,255,.6);font-size:12.5px;letter-spacing:.04em}.help-panel{margin-top:26px;z-index:1;text-align:center}.help-toggle{font-size:13px;color:var(--dim);background:transparent;border:1px dashed rgba(255,255,255,.18);border-radius:999px;padding:8px 22px;letter-spacing:.12em;cursor:pointer;transition:color .2s,border-color .2s}.help-toggle:hover{color:var(--fg);border-color:var(--accent)}.help-card{margin-top:14px;display:inline-block;padding:18px 26px;background:rgba(10,14,28,.85);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--dim);font-size:13.5px;line-height:2;box-shadow:0 0 40px rgba(0,0,0,.4)}.help-card b{color:var(--fg);font-weight:600}.weapon-panel{margin-top:18px;width:min(880px,92vw)}.weapon-panel-title{text-align:center;font-size:13px;letter-spacing:4px;color:rgba(200,215,240,.7);margin-bottom:10px}.weapon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:10px;gap:10px}.weapon-card{background:rgba(14,20,40,.72);border:1px solid rgba(120,160,255,.22);border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;color:#dfe8ff;transition:border-color .15s,box-shadow .15s,transform .08s;font-family:inherit}.weapon-card:hover{border-color:rgba(160,200,255,.6)}.weapon-card.active{border-color:#7fd4ff;box-shadow:0 0 18px rgba(127,212,255,.35);background:rgba(24,36,68,.9)}.weapon-name{font-size:15px;font-weight:700;letter-spacing:2px}.weapon-en{font-size:10px;letter-spacing:2px;color:rgba(150,175,220,.6);margin-bottom:6px}.weapon-tags{display:flex;gap:6px;margin-bottom:6px}.tag{font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.08);color:rgba(220,230,255,.8)}.tag-melee{color:#ffd9a0;background:rgba(255,170,60,.14)}.tag-ranged{color:#a5e8ff;background:rgba(80,190,255,.14)}.tag-dim{color:rgba(180,195,225,.6)}.weapon-stats{font-size:11px;color:rgba(170,190,225,.75)}.weapon-note{margin-top:10px;text-align:center;font-size:11px;color:rgba(160,180,215,.55)}.shield-panel{margin-top:22px}.shield-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}.shield-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.25)}.tag-shield{color:#9fe8ff;background:rgba(80,190,255,.14)}