:root{--bg:#0f0f1a;--surface:#1a1a2e;--border:#2e3040;--text:#c8cdd8;--text-h:#f0f2f8;--accent:#c0392b;--accent-hover:#e74c3c;--hp:#c0392b;--mp:#2980b9;--sans:system-ui, "Segoe UI", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--shell-width:min(100vw, 430px);--hud-height:72px;--footer-height:168px;font:16px/1.5 var(--sans);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#050508}*,:before,:after{box-sizing:border-box}html,body{touch-action:manipulation;background:#050508;height:100%;margin:0;overflow:hidden}#root{width:100vw;height:100svh}h1{color:var(--text-h);letter-spacing:.08em;margin:0 0 8px;font-size:1.75rem}.portrait-shell{width:var(--shell-width);background:var(--bg);height:100svh;max-height:100dvh;margin:0 auto;position:relative;box-shadow:0 0 40px #00000080}.home-page{height:100%;padding:calc(16px + var(--safe-top)) 20px calc(16px + var(--safe-bottom));background:radial-gradient(ellipse at 50% 0%, #2a1a1a 0%, var(--bg) 60%);flex-direction:column;justify-content:center;display:flex}.home-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;padding:24px 20px}.home-sub{color:var(--text);opacity:.7;margin:0 0 20px;font-size:.85rem}.field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.field span{color:var(--text-h);font-size:.85rem}.field input{border:1px solid var(--border);background:var(--bg);color:var(--text-h);border-radius:8px;padding:12px;font-size:1rem}.class-picker{border:1px solid var(--border);border-radius:8px;margin:0 0 20px;padding:12px 14px}.class-picker legend{color:var(--text-h);padding:0 6px;font-size:.85rem}.class-option{cursor:pointer;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:0 10px;padding:10px 4px;display:grid}.class-label{color:var(--text-h);font-weight:600}.class-desc{opacity:.65;grid-column:2;font-size:.78rem}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:14px;font-size:1rem;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.game-page{background:#000;width:100vw;height:100dvh;position:fixed;inset:0;overflow:hidden}.game-canvas{z-index:0;width:100%;height:100%;position:absolute;inset:0}.game-canvas canvas{display:block;width:100%!important;height:100%!important}.game-canvas:focus{outline:none}.game-hud{z-index:10;padding:calc(8px + var(--safe-top)) 12px 10px;pointer-events:none;background:linear-gradient(#000000bf 0%,#0000 100%);position:absolute;top:0;left:0;right:0}.game-hud-row{color:var(--text-h);justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:.85rem;display:flex}.hud-map{color:#f1c40f;font-size:.95rem;font-weight:700}.hud-player{opacity:.85;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.game-hud-bars{flex-direction:column;gap:4px;display:flex}.hud-bar{color:var(--text-h);grid-template-columns:26px 1fr 52px;align-items:center;gap:6px;font-size:.72rem;display:grid}.hud-bar-label{font-weight:600}.hud-bar-value{text-align:right;opacity:.8}.bar-track{background:#2a2a35;border-radius:4px;height:8px;overflow:hidden}.bar-fill{border-radius:4px;height:100%;transition:width .15s}.bar-hp{background:var(--hp)}.bar-mp{background:var(--mp)}.game-controls-bl{left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + var(--safe-bottom));z-index:20;pointer-events:none;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute}.teleport-hint{text-align:left;color:#ffffffb3;text-shadow:0 1px 3px #000000e6;pointer-events:none;max-width:200px;margin:0;font-size:.7rem;line-height:1.35}.virtual-pad{-webkit-user-select:none;user-select:none;touch-action:none;pointer-events:auto;grid-template-rows:48px 48px 48px;grid-template-columns:48px 48px 48px;width:144px;height:144px;display:grid}.pad-btn{color:#ecf0f1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#1e1e28d9;border:1px solid #ffffff47;border-radius:10px;width:48px;height:48px;padding:0;font-size:1.35rem;line-height:1}.pad-btn:active{background:#c0392bd9;border-color:#ffffff8c;transform:scale(.96)}.pad-up{grid-area:1/2}.pad-left{grid-area:2/1}.pad-right{grid-area:2/3}.pad-down{grid-area:3/2}.btn-exit{top:calc(8px + var(--safe-top));z-index:20;border:1px solid var(--border);color:var(--text-h);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#000000a6;border-radius:8px;padding:6px 12px;font-size:.78rem;position:absolute;right:10px}.btn-exit:hover{background:#ffffff1f}@media (orientation:landscape) and (height<=500px){.portrait-shell:before{content:"建议竖屏游玩";z-index:9999;color:#fff;pointer-events:none;background:#c0392be6;border-radius:6px;padding:4px 12px;font-size:.75rem;position:fixed;top:8px;left:50%;transform:translate(-50%)}}