:root{--ink:#3a2a22;--ink-soft:#6b5348;--paper:#fff6e8;--paper-2:#ffe9c7;--leaf:#3f8f4a;--leaf-deep:#2f6b38;--grass:#8fd36a;--honey:#f4b942;--berry:#e86a4a;--sky:#8ec8ff;--shadow:0 10px 0 #d7b48a;--radius:22px;--pixel:"Press Start 2P", monospace;--dock-pad:calc(14px + env(safe-area-inset-bottom,0px));--toggle-pad:calc(214px + env(safe-area-inset-bottom,0px));color:var(--ink);background:#000;font-family:Nunito,system-ui,sans-serif}html:not(.is-pwa){--dock-pad:calc(14px + env(safe-area-inset-bottom,0px) + max(44px, 100lvh - 100dvh));--toggle-pad:calc(214px + env(safe-area-inset-bottom,0px) + max(44px, 100lvh - 100dvh))}@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){html{--dock-pad:calc(14px + env(safe-area-inset-bottom,0px));--toggle-pad:calc(214px + env(safe-area-inset-bottom,0px))}}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#d4a24a #1a120c}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1a120c;border:1px solid #8a6230;border-radius:0}::-webkit-scrollbar-thumb{background:linear-gradient(#f0d078 0%,#d4a24a 40%,#8a5a22 100%);border:1px solid #5a3c18}::-webkit-scrollbar-thumb:hover{background:#f4b942}::-webkit-scrollbar-corner{background:#1a120c}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#000}html,body,#root{overscroll-behavior:none;background:#000;width:100%;height:100lvh;min-height:100lvh;margin:0}body{min-height:100lvh;background:#000;min-height:-webkit-fill-available}#root{width:100%}button,input{font:inherit}button{cursor:pointer}.app{background:linear-gradient(#fff8ec,#f4e2c0);width:100%;height:100%;min-height:100lvh;position:relative;overflow:hidden}:is(.app:has(.arena-screen),.app:has(.boot-screen)){background:#000;min-height:100lvh}.app:has(.arena-screen) .local-tag{display:none}.local-tag{z-index:5;border:3px solid var(--ink);letter-spacing:.04em;background:#fff;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;position:absolute;top:12px;right:12px}.screen{flex-direction:column;min-height:100svh;padding:28px 20px 32px;display:flex}.screen-wide{justify-content:center;align-items:center}.auth-wrap,.create-wrap{width:min(720px,100%)}.create-wrap{width:min(980px,100%)}.logo{text-align:center;margin:28px 0 8px}.logo h1{letter-spacing:.04em;color:#5b2d86;text-shadow:3px 3px #ffd27a;margin:0;font-family:Fredoka,Nunito,sans-serif;font-size:clamp(48px,7vw,84px)}.logo p{color:var(--ink-soft);margin:6px 0 0;font-weight:700}.card{background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:18px;padding:20px 18px 18px}.tabs{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;display:grid}.tab,.primary,.ghost{border:3px solid var(--ink);border-radius:14px;padding:12px 14px;font-weight:800}.tab{color:var(--ink);background:#ffe1b0}.tab.active{background:var(--honey)}.field{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.field span{color:var(--ink-soft);font-size:13px;font-weight:800}.field input{border:3px solid var(--ink);background:#fff;border-radius:12px;outline:none;padding:12px 14px}.field input:focus{box-shadow:0 0 0 4px #ffd27a}.primary{background:var(--leaf);color:#fff;width:100%;margin-top:8px;font-size:18px}.primary:disabled{opacity:.5;cursor:default}.ghost{width:100%;color:var(--ink);background:#fff;margin-top:10px}.error{color:#c0392b;min-height:22px;margin:0 0 8px;font-size:14px;font-weight:800}.hint{text-align:center;color:var(--ink-soft);margin:14px 0 0;font-size:13px}.screen h2{margin:0 0 6px;font-family:Fredoka,Nunito,sans-serif;font-size:clamp(28px,4vw,44px)}.lead{color:var(--ink-soft);margin:0 0 16px;font-weight:700}.choices{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px;display:grid}.choice{border:3px solid var(--ink);text-align:center;background:#fff;border-radius:16px;min-height:160px;padding:18px 12px 16px}.choice.active{background:#fff3c4;box-shadow:0 0 0 4px #f4b942}.choice b{margin-top:6px;display:block}.choice small{color:var(--ink-soft);margin-top:4px;font-weight:700;line-height:1.25;display:block}.choice-sprite{place-items:center;height:72px;margin-bottom:4px;display:grid}.choice-sprite .hero-portrait{width:52px;height:62px;image-rendering:pixelated;image-rendering:crisp-edges}.doll-head{border:3px solid var(--ink);z-index:1;border-radius:8px;width:22px;height:22px;margin:0 auto;position:relative}.doll-body{border:3px solid var(--ink);border-radius:8px;width:26px;height:22px;margin:-4px auto 0}.doll.human .doll-head,.doll.human .doll-body{background:#f0c2a0}.doll.elf .doll-head{background:#f7e3c4}.doll.elf .doll-body{background:#8fd36a}.doll.elf .doll-head:before,.doll.elf .doll-head:after{content:"";border:6px solid #0000;width:0;height:0;position:absolute;top:2px}.doll.elf .doll-head:before{border-bottom-color:#f7e3c4;left:-11px}.doll.elf .doll-head:after{border-bottom-color:#f7e3c4;right:-11px}.doll.orc .doll-head,.doll.orc .doll-body{background:#7db86a}.doll.orc .doll-head:before,.doll.orc .doll-head:after{content:"";border:2px solid var(--ink);background:#fff8ec;width:4px;height:6px;position:absolute;bottom:2px}.doll.orc .doll-head:before{left:2px}.doll.orc .doll-head:after{right:2px}.class-mark{place-items:center;height:44px;font-size:28px;line-height:1;display:grid}.arena-screen{width:100%;height:100lvh;min-height:100lvh;background:#000;min-height:-webkit-fill-available;padding:0;position:fixed;inset:0;overflow:hidden}.hud{pointer-events:none;z-index:3;position:absolute;inset:0}.hud:before,.hud:after{content:"";pointer-events:none;position:absolute;left:0;right:0}.hud:before{background:linear-gradient(#0c08066b,#0000);height:110px;top:0}.hud:after{background:linear-gradient(#0000,#0c08068c);height:160px;bottom:0}.hud-top,.hud-bottom{pointer-events:auto}.hud-top{top:calc(8px + env(safe-area-inset-top,0px));grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;display:grid;position:absolute;left:10px;right:10px}.hero-chip,.wallet,.hud-dock{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#3a2618f0,#160e0af5);border:2px solid #d4a24a;box-shadow:0 6px #120a068c,inset 0 1px #ffe8b42e}.hero-chip{text-align:left;font:inherit;color:inherit;border-radius:12px;justify-self:start;align-items:center;gap:8px;padding:6px 10px 6px 6px;display:flex}.hero-frame{background:#1a120c;border:2px solid #8a6230;border-radius:8px;place-items:center;width:48px;height:52px;display:grid;overflow:hidden}.hero-portrait{object-fit:contain;width:42px;height:50px;image-rendering:pixelated}.hero-meta strong{font-family:var(--pixel);color:#fff6d2;letter-spacing:.02em;align-items:baseline;gap:8px;font-size:8px;display:flex}.hero-meta strong i{color:#f4b942;font-size:7px;font-style:normal}.hero-meta span{color:#d7c4a4;margin:4px 0 6px;font-size:11px;font-weight:800;display:block}.hp{background:#3a2218;border:1px solid #8a6230;border-radius:99px;width:124px;height:14px;position:relative;overflow:hidden}.hp>i{background:linear-gradient(#e24b4b,#a81f1f);height:100%;display:block}.hp>b{font-family:var(--pixel);color:#fff8ec;text-shadow:1px 1px #111;place-items:center;font-size:7px;display:grid;position:absolute;inset:0}.hud-wave{text-align:center;pointer-events:none;white-space:nowrap;justify-self:center;padding-top:6px}.hud-wave-title,.hud-wave-sub{font-family:var(--pixel);color:#ffe066;text-shadow:-2px -2px #111,2px -2px #111,-2px 2px #111,2px 2px #111,0 3px #111;margin:0}.hud-wave-title{letter-spacing:.08em;font-size:clamp(12px,2.4vw,16px)}.hud-wave-sub{color:#fff6d2;margin-top:6px;font-size:8px}.hud-wave.boss{white-space:normal;max-width:min(46vw,220px)}.hud-wave.boss .hud-wave-title,.hud-wave.boss .hud-wave-sub{color:#ff6b4a}.hud-wave-check{font-family:var(--pixel);color:#d7c4a4;text-shadow:-1px -1px #111,1px 1px #111;margin:6px 0 0;font-size:6px}.hud-toast{z-index:8;pointer-events:none;font-family:var(--pixel);letter-spacing:.06em;color:#ffe066;text-shadow:1px 1px #111;background:linear-gradient(#3a2618f5,#160e0af7);border:2px solid #d4a24a;border-radius:12px;margin:0;padding:9px 16px;font-size:8px;animation:.22s ease-out hud-toast-in;position:absolute;top:22%;left:50%;transform:translate(-50%);box-shadow:0 6px #120a068c,inset 0 1px #ffe8b42e}@keyframes hud-toast-in{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.wallet{border-radius:12px;justify-self:end;align-items:center;gap:10px;padding:8px 10px;display:flex}.wallet-item{font-family:var(--pixel);color:#fff6d2;align-items:center;gap:6px;font-size:9px;display:flex}.wallet-item img{object-fit:contain;width:22px;height:22px}.hud-bottom{left:50%;bottom:var(--dock-pad);flex-direction:column;align-items:stretch;gap:8px;width:min(520px,100% - 16px);max-height:calc(100svh - 24px);display:flex;position:absolute;transform:translate(-50%)}.hud-combat{flex-direction:column;flex:none;gap:6px;padding:0 2px;display:flex}.hud-dock{border-radius:16px;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:0;padding:10px;display:flex;position:relative}.hud-bottom.shop .hud-dock{height:50svh;min-height:0}.hud-hint{text-align:center;font-family:var(--pixel);color:#ffe066;text-shadow:2px 2px #111;margin:0;font-size:8px;position:relative;top:auto}.skill-bar{grid-template-columns:repeat(8,42px);justify-content:center;gap:4px;display:grid}.skill-slot{background:linear-gradient(#3a2818,#1a120c);border:2px solid #8a6230;border-radius:10px;place-items:center;width:42px;height:42px;padding:0;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffe8b424}@media (width<=520px){.hud-top{grid-template-columns:1fr auto}.hero-chip{order:1}.wallet{order:2}.hud-wave{order:3;grid-column:1/-1;padding-top:2px}.hud-toast{padding:8px 12px;font-size:7px;top:28%}.skill-bar{grid-template-columns:repeat(8,minmax(0,1fr));width:100%}.skill-slot{aspect-ratio:1;width:100%;height:auto}}.skill-slot.empty{background:#100a08c7;border-color:#5a3c22}.skill-slot.locked{color:#6b5348;background:#0c0806e6;font-size:11px}.skill-slot.cooling{cursor:default}.skill-px{object-fit:cover;width:100%;height:100%;image-rendering:pixelated}.skill-cd{color:#ffe066;font-family:var(--pixel);background:#0a0604b8;place-items:center;font-size:8px;display:grid;position:absolute;inset:0}.xp{background:#1a120c;border:1px solid #8a6230;border-radius:99px;width:100%;height:8px;overflow:hidden}.xp>i{background:linear-gradient(90deg,#c47a12,#f4b942);height:100%;display:block}.nav-bar{grid-template-columns:repeat(4,1fr);gap:4px;width:100%;display:grid}.nav-btn{font-family:var(--pixel);color:#d7c4a4;background:linear-gradient(#3a2818,#1c120c);border:2px solid #8a6230;border-radius:10px;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;font-size:6px;line-height:1.2;display:flex}.nav-btn img{object-fit:contain;width:24px;height:24px}.nav-btn.active{color:#ffe066;background:linear-gradient(#5a3c1c,#3a2818);border-color:#f4b942;box-shadow:inset 0 -2px #f4b942}@media (hover:hover) and (pointer:fine){.nav-btn:hover{color:#ffe066;background:#f4b94229}}.hud-toggles{right:10px;bottom:calc(var(--dock-pad) + 148px);pointer-events:auto;flex-direction:column;gap:6px;display:flex;position:absolute}.hud:has(.hud-bottom.shop) .hud-toggles{bottom:calc(var(--dock-pad) + 50svh + 92px)}.toggle-btn{min-width:86px;font-family:var(--pixel);color:#d7c4a4;background:linear-gradient(#302016eb,#1c120cf0);border:2px solid #d4a24a;border-radius:8px;align-items:center;gap:6px;padding:6px 8px;font-size:6px;display:flex}.toggle-btn b{color:#6b5348;font-size:8px}.toggle-btn.on{color:#ffe066}.toggle-btn.on b{color:#3dff2e}.toggle-btn.speed{letter-spacing:.04em;flex:1;justify-content:center;min-width:0;font-size:8px}.hud-speed{gap:6px;min-width:86px;display:flex}.sound-card{background:linear-gradient(#302016f5,#1c120cf5);border:2px solid #d4a24a;border-radius:8px;flex-direction:column;gap:8px;min-width:124px;padding:8px;display:flex}.sound-card label{font-family:var(--pixel);color:#fff6d2;flex-direction:column;gap:4px;font-size:6px;display:flex}.sound-card input[type=range]{accent-color:#f4b942;width:100%}.gear-shop{flex-direction:column;flex:1;width:100%;min-height:0;display:flex;overflow:hidden}.gear-lead{color:#d7c4a4;margin:0;font-size:12px;font-weight:800}.gear-row{background:#1a120c;border:1px solid #8a6230;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:8px;display:flex}.gear-row b{font-family:var(--pixel);color:#f4b942;font-size:6px;display:block}.gear-row span{color:#fff6d2;margin:4px 0 2px;font-size:13px;font-weight:800;display:block}.gear-row span i{color:#f4b942;margin-left:8px;font-style:normal}.gear-row small{color:#d7c4a4;font-weight:700}.gear-row button{min-width:72px;font-family:var(--pixel);color:#ffe066;background:#3a2818;border:2px solid #d4a24a;border-radius:8px;flex:none;padding:8px 6px;font-size:7px}.gear-row button:disabled{opacity:.45}.gear-row button .gear-crystal{vertical-align:-2px;width:12px;height:12px;image-rendering:pixelated;margin-right:4px}.skill-order{flex-direction:column;gap:6px;display:flex}.skill-order-lead{font-family:var(--pixel);color:#f4b942;margin:0;font-size:7px}.skill-order-row{background:#1a120c;border:1px solid #8a6230;border-radius:8px;align-items:center;gap:8px;padding:6px;display:flex}.skill-order-row img{object-fit:cover;width:28px;height:28px;image-rendering:pixelated;border-radius:6px}.skill-order-row span{color:#fff6d2;flex:1;font-size:13px;font-weight:800}.skill-order-row button{color:#ffe066;background:#3a2818;border:2px solid #d4a24a;border-radius:6px;width:28px;height:28px;padding:0}.skill-order-row button:disabled{opacity:.35}.hero-modal{z-index:8;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:#0c080694;place-items:center;display:grid;position:absolute;inset:0}.hero-modal-card{background:linear-gradient(#3a2618f5,#160e0afa);border:2px solid #d4a24a;border-radius:16px;flex-direction:column;gap:12px;width:min(360px,100%);max-height:100%;padding:14px;display:flex;overflow:hidden;box-shadow:0 10px #120a0680}.hero-modal-top{align-items:center;gap:10px;display:flex}.hero-modal-top .hero-portrait{width:42px;height:50px}.hero-modal-top strong{font-family:var(--pixel);color:#fff6d2;font-size:8px;display:block}.hero-modal-top span{color:#d7c4a4;margin-top:6px;font-size:13px;font-weight:800;display:block}.hero-modal-x{color:#ffe066;background:0 0;border:0;margin-left:auto;font-size:18px}.hero-modal-card label,.vol-row{font-family:var(--pixel);color:#fff6d2;flex-direction:column;gap:8px;font-size:7px;display:flex}.vol-row span{justify-content:space-between;align-items:center;font-size:8px;display:flex}.vol-row b{color:#f4b942;font-weight:700}.hero-modal-card input[type=range],.vol-row input[type=range]{appearance:none;touch-action:manipulation;background:0 0;width:100%;height:28px;margin:0}.vol-row input[type=range]::-webkit-slider-runnable-track{background:#1a120c;border:1px solid #8a6230;border-radius:99px;height:10px}.vol-row input[type=range]::-webkit-slider-thumb{appearance:none;background:#f4b942;border:2px solid #fff8d0;border-radius:50%;width:28px;height:28px;margin-top:-10px;box-shadow:0 2px #8a5a12}.vol-row input[type=range]::-moz-range-track{background:#1a120c;border-radius:99px;height:10px}.vol-row input[type=range]::-moz-range-thumb{background:#f4b942;border:2px solid #fff8d0;border-radius:50%;width:28px;height:28px}@media (width>=521px){.hud-bottom.shop .hud-dock{height:min(420px,52vh)}.hud:has(.hud-bottom.shop) .hud-toggles{bottom:calc(var(--dock-pad) + min(420px, 52vh) + 92px)}}.hurt-veil{pointer-events:none;z-index:6;opacity:0;background:linear-gradient(90deg,#be0c168c 0%,#0000 7% 93%,#be0c168c 100%),linear-gradient(#be0c1647 0%,#0000 5% 95%,#be0c1647 100%);transition:opacity 90ms linear;position:absolute;inset:0}.hurt-veil.show{opacity:1}.scroll-area{flex-direction:column;min-height:0;display:flex;position:relative}.scroll-area-view{height:100%;min-height:0;max-height:inherit;scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex:1;gap:8px;padding-right:14px;display:flex;overflow:auto}.scroll-area-view::-webkit-scrollbar{width:0;height:0;display:none}.scroll-area-track{pointer-events:auto;background:#140e0a;border:2px solid #8a6230;width:10px;position:absolute;top:2px;bottom:2px;right:2px;box-shadow:inset 0 0 0 1px #1a120c}.scroll-area-thumb{cursor:grab;touch-action:none;background:linear-gradient(#f0d078 0%,#d4a24a 42%,#8a5a22 100%);border:1px solid #5a3c18;border-radius:0;min-height:28px;margin:0;padding:0;position:absolute;left:0;right:0;box-shadow:inset 0 1px #ffe8b459}.scroll-area-thumb:active{cursor:grabbing;background:#f4b942}.gear-shop .scroll-area-view{gap:8px}.hero-modal-card .scroll-area-view{gap:12px}.game-host{width:100%;height:100%;position:absolute;inset:0}.game-host.game-wait{visibility:hidden}.game-host canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.boot-screen{width:100%;height:100%;min-height:100lvh;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));background:#000;place-items:end center;display:grid;position:fixed;inset:0;overflow:hidden}.boot-art{object-fit:cover;object-position:center top;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.boot-screen:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0c0806d1 55%,#0c0806eb);height:42%;position:absolute;bottom:0;left:0;right:0}.boot-card{z-index:1;text-align:center;background:linear-gradient(#302016e0,#160e0af0);border:3px solid #d4a24a;border-radius:18px;width:min(420px,100%);padding:16px 18px 14px;position:relative;box-shadow:0 8px #00000052}.boot-kicker{color:#8fd36a;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:12px;font-weight:800}.boot-bar{background:#1a120c;border:2px solid #d4a24a;border-radius:999px;height:16px;overflow:hidden}.boot-bar i{background:linear-gradient(#b6f08a,#5cb85a);width:0;height:100%;transition:width .16s linear;display:block}.boot-label{color:#fff6e8;font-family:var(--pixel);margin:14px 0 0;font-size:9px;line-height:1.5}.boot-go{cursor:pointer}.boot-go .boot-label{animation:1.2s ease-in-out infinite boot-pulse}@keyframes boot-pulse{50%{opacity:.55}}.arena-boot{z-index:8;position:absolute;inset:0}.arena-boot .boot-screen{height:100%;min-height:100%}.hud-wait{visibility:hidden;pointer-events:none}