:root{--font-display: "Anton", Impact, "Arial Black", sans-serif;--font-body: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;font-family:var(--font-body);line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body,html,#app{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:#222}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.nametag{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--font-display);letter-spacing:.5px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8);pointer-events:none;-webkit-user-select:none;user-select:none}.nametag-text{font-size:14px;font-weight:700;margin-bottom:2px}.nametag-color{font-size:12px;opacity:.8;font-style:italic}.nametag-class{font-size:12px;color:#ffc61a;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:1px}body.cursor-locked{cursor:none}.health-bar-container{position:fixed;bottom:20px;left:20px;width:200px;height:20px;background-color:#00000080;border-radius:10px;overflow:hidden;z-index:1000}.health-bar{height:100%;background-color:#f55;transition:width .3s ease}.mana-bar-container{position:fixed;bottom:45px;left:20px;width:200px;height:15px;background-color:#00000080;border-radius:8px;overflow:hidden;z-index:1000}.mana-bar{height:100%;background-color:#55f;transition:width .3s ease}@keyframes damage-flash{0%{background-color:#ff000080}to{background-color:#0000}}.damage-overlay{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:999}.damage-flash{animation:damage-flash .3s ease-out}.player-status{position:fixed;bottom:70px;left:20px;color:#fff;font-family:Arial,sans-serif;font-size:14px;text-shadow:1px 1px 2px rgba(0,0,0,.8);z-index:1000}.player-name{font-weight:700;margin-bottom:3px;font-size:16px}.player-health,.player-mana{margin-bottom:2px}@keyframes chargeFill{0%{width:0%}to{width:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes victoryPulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.15)}}@keyframes comboPop{0%{transform:translate(-50%) scale(.5);opacity:0}60%{transform:translate(-50%) scale(1.15);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}.emote-bubble{display:flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;background:#fffdf6;color:#0a0609;border:3px solid #000;border-radius:18px;box-shadow:0 4px #000;font-family:var(--font-display);font-size:18px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:emote-pop 2.2s ease-out both}.emote-bubble__icon{font-size:26px;line-height:1}@keyframes emote-pop{0%{transform:scale(.3) translateY(10px);opacity:0}10%{transform:scale(1.12) translateY(0);opacity:1}16%{transform:scale(1)}85%{opacity:1}to{transform:translateY(-12px);opacity:0}}.fx-rays{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 0deg,rgba(255,217,74,.06) 0deg 14deg,transparent 14deg 42deg);animation:rays-spin 26s linear infinite;pointer-events:none}@keyframes rays-spin{to{transform:rotate(360deg)}}.fx-particle{position:absolute;bottom:-20px;border-radius:50%;background:radial-gradient(circle,#fff8,transparent 70%);animation:float-up linear infinite;pointer-events:none}@keyframes float-up{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}to{transform:translateY(-110vh) scale(.3);opacity:0}}.screen-enter{animation:screen-in var(--t-enter, .38s) cubic-bezier(.2,1.4,.4,1) both}@keyframes screen-in{0%{transform:translate(-60px) rotate(-2deg) scale(.96);opacity:0}to{transform:none;opacity:1}}.panel-pop{animation:pop-in .34s cubic-bezier(.2,1.6,.4,1) both}@keyframes pop-in{0%{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}.flash-wipe{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#fff;animation:flash-out .28s ease-out both;pointer-events:none}@keyframes flash-out{0%{opacity:.9}to{opacity:0}}.shake{animation:shake-x .3s ease}@keyframes shake-x{0%,to{transform:translate(0)}25%{transform:translate(-7px)}50%{transform:translate(6px)}75%{transform:translate(-4px)}}.smash-btn{position:relative;display:block;border:none;cursor:pointer;padding:0;background:transparent;transition:transform var(--t-fast, .12s) ease,filter var(--t-fast, .12s) ease;font-family:var(--font-display);letter-spacing:1px}.smash-btn:hover:not(:disabled){transform:scale(1.05) rotate(-1deg);filter:brightness(1.18);z-index:5}.smash-btn:active:not(:disabled){transform:scale(.95);filter:brightness(.92)}.smash-btn:disabled{filter:grayscale(1) brightness(.55);cursor:not-allowed}.btn-face{clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);padding:16px 44px;color:#fff;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.85),0 0 12px rgba(255,255,255,.35);position:relative;overflow:hidden}.btn-face:after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,#ffffff8c,#fff0);pointer-events:none}.btn-xl .btn-face{padding:30px 90px;font-size:52px}.btn-md .btn-face{font-size:24px}.btn-sm .btn-face{padding:10px 26px;font-size:17px}.anim-pop-delayed{animation:pop-in .45s cubic-bezier(.2,1.6,.4,1) both}.slot-wrap{position:relative;transition:transform .15s cubic-bezier(.2,1.5,.4,1),filter .15s ease}.slot-wrap:hover{transform:translateY(-5px) scale(1.05);z-index:4}.slot-wrap.selected{transform:scale(1.12);z-index:6}.slot{width:132px;height:168px;border:2px solid #0a0a12;border-radius:12px;position:relative;overflow:hidden;background:#0a0a14;box-shadow:0 10px 22px #0000008c,inset 0 0 0 1px #ffffff0d;cursor:pointer}.portrait-bg,.portrait-lines,.portrait-grain,.portrait-halo,.portrait-vignette,.portrait-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.portrait-bg{z-index:0;background:radial-gradient(65% 55% at 50% 72%,color-mix(in srgb,var(--accent) 60%,transparent) 0%,transparent 70%),radial-gradient(45% 35% at 50% 4%,color-mix(in srgb,var(--accent2) 35%,transparent) 0%,transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--accent2) 20%,#0c0e1a),#0a0a14 58%)}.portrait-lines{z-index:1;background-image:repeating-linear-gradient(48deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px),repeating-linear-gradient(-48deg,color-mix(in srgb,var(--accent) 22%,transparent) 0 2px,transparent 2px 26px);mix-blend-mode:screen;opacity:.5}.portrait-grain{z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.06;mix-blend-mode:overlay}.portrait-halo{z-index:1;background:radial-gradient(circle at 50% 64%,color-mix(in srgb,var(--accent) 85%,white) 0%,var(--accent) 18%,transparent 58%);filter:blur(16px);opacity:.5;mix-blend-mode:screen;transition:opacity .18s ease}.portrait-vignette{z-index:4;background:radial-gradient(115% 95% at 50% 40%,transparent 55%,rgba(0,0,0,.62) 100%)}.portrait-canvas{z-index:2}.portrait-art{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;-webkit-user-select:none;user-select:none}.slot-nameplate{position:absolute;left:0;right:0;bottom:0;z-index:5;text-align:center;background:linear-gradient(180deg,transparent 0%,rgba(8,8,16,.55) 35%,rgba(8,8,16,.9) 100%);padding:14px 0 5px;font-family:var(--font-display);font-size:15px;letter-spacing:1.5px;color:#fff;text-transform:uppercase;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent),1px 1px 0 #000}.portrait-stage{position:relative;overflow:hidden;border-radius:16px;border:2px solid #0a0a12;box-shadow:0 16px 36px #0009,inset 0 0 30px #00000080;flex:1 1 auto;min-height:280px}.portrait-bg--big{background:radial-gradient(70% 60% at 50% 70%,color-mix(in srgb,var(--accent) 65%,transparent) 0%,transparent 72%),radial-gradient(50% 40% at 50% 2%,color-mix(in srgb,var(--accent2) 40%,transparent) 0%,transparent 72%),linear-gradient(135deg,color-mix(in srgb,var(--accent2) 22%,#0c0e1a),#0a0a14 60%)}.portrait-halo--big{filter:blur(40px);opacity:.6}.portrait-nameplate-big{position:absolute;left:0;right:0;bottom:18px;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.portrait-tagline{font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:14px;font-family:var(--font-display);text-shadow:0 1px 6px rgba(0,0,0,.85)}.slot-wrap:hover .slot{filter:brightness(1.08);box-shadow:0 14px 30px #000000a6,inset 0 0 0 1px #ffffff14,0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}.slot-wrap:hover .portrait-halo{opacity:.75}.slot-wrap.selected .slot{border-color:color-mix(in srgb,var(--accent) 65%,#0a0a12);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 80%,transparent),0 14px 30px #000000b3}.slot-wrap.selected .portrait-halo{opacity:.95}.slot-wrap.selected .slot:after{content:"P1";position:absolute;top:6px;left:8px;z-index:6;font-family:var(--font-display);font-size:14px;color:#ffd94a;text-shadow:1px 1px 0 #000,0 0 10px #ffd94a;transform:skew(-8deg)}.slot.locked{filter:grayscale(1) brightness(.5)}.hud-plate{transform:skew(-9deg);border:3px solid #0a0a14;box-shadow:0 8px 18px #0000008c,inset 0 0 0 2px #ffffff38;overflow:hidden}.hud-unskew{transform:skew(9deg)}.hp-shell{height:20px;border:3px solid #0a0a14;border-radius:4px;background:#10101c;overflow:hidden;position:relative;box-shadow:inset 0 3px 6px #000000b3}.hp-fill{height:100%;transition:width .25s cubic-bezier(.2,1.2,.4,1);position:relative}.hp-fill:after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}.badge-chip{display:inline-block;transform:skew(-8deg);padding:3px 12px;font-family:var(--font-display);letter-spacing:1px;font-size:14px;color:#fff;text-shadow:1px 1px 0 #000;border:2px solid #0a0a14}.boost-chip{font-size:12px;padding:2px 9px;white-space:nowrap}.boost-chip[data-boost=xp2]{background:linear-gradient(90deg,#2ea8ff,#7af0ff);color:#04202e}.boost-chip[data-boost=stamina]{background:linear-gradient(90deg,#1c9c5c,#6cf0a8);color:#04240f}.big-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:2px;line-height:.92}.mode-panel{transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}.mode-panel:hover{transform:translateY(-6px) scale(1.03);filter:brightness(1.15);box-shadow:0 18px 40px #000000b3}.pulse-ring{animation:pulse-ring 1.1s ease-out infinite}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 currentColor}to{box-shadow:0 0 0 18px transparent}}@media (max-width: 900px){.menu-columns{grid-template-columns:1fr!important}.slot{width:104px;height:128px}}@media (max-width: 560px){.btn-xl .btn-face{padding:22px 56px;font-size:40px}}