:root{--bg:#14171f;--bg-2:#1b2030;--panel:#1f2535;--line:#2d3550;--text:#eef0f6;--muted:#8b92a3;--gold:#f2b84b;--alliance:#4f8ef7;--horde:#e5534b;--cls:#f2b84b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0}html,body,#root{height:100%;overflow:hidden}body{color:var(--text);-webkit-tap-highlight-color:transparent;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.app{--hs:clamp(96px, 17dvh, 150px);flex-direction:column;justify-content:center;max-width:460px;height:100dvh;margin:0 auto;display:flex;position:relative}.brand{z-index:1;opacity:.55;justify-content:center;align-items:center;gap:6px;margin:0 auto 8px;display:flex;position:relative}.name{letter-spacing:.12em;text-transform:uppercase;font-size:13px;font-weight:700}.beta{color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 7px;font-size:8px}.sheet{z-index:1;width:calc(100% - 24px);padding:10px 4px calc(6px + env(safe-area-inset-bottom));flex-direction:column;gap:8px;margin:0 12px;display:flex;position:relative}.sheet-head{justify-content:space-between;align-items:center;display:flex}.nav{width:36px;height:32px;color:var(--muted);background:0 0;border:0;border-radius:8px;font-size:18px}.nav:hover{color:var(--text)}.dots{gap:6px;display:flex}.pip{background:var(--line);border-radius:50%;width:7px;height:7px;transition:background .2s,width .2s}.pip.on{background:var(--cls);border-radius:99px;width:20px}.step{animation:.22s ease-out rise}.step.pick{height:256px;overflow:hidden}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.step{animation:none}}.fine{text-align:center;color:var(--muted);opacity:.7;font-size:10px}.grid{align-content:center;gap:8px 6px;height:100%;padding:0 4px;display:grid}.race-grid,.class-grid{grid-template-columns:repeat(5,1fr)}.token{background:0 0;border:0;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:0;display:flex}.token-disc{width:58px;height:58px;box-shadow:0 0 0 2px var(--ring), 0 4px 10px #0006;border-radius:50%;place-items:center;transition:transform .12s;display:grid}.medal{object-fit:cover;border-radius:50%;display:block}.token:hover .token-disc,.token:focus-visible .token-disc{transform:scale(1.08)}.token:active .token-disc{transform:scale(.95)}.token-label{color:#b4bacb;text-shadow:0 1px 3px #000,0 0 8px #000;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;overflow:hidden}.card-step{flex-direction:column;gap:6px;display:flex}.stage{--bd:color-mix(in srgb, var(--cls) 50%, transparent)}.center{flex-direction:column;align-items:center;gap:12px;padding-top:4px;display:flex}.char{filter:drop-shadow(0 6px 14px #0009);flex:none;width:76px;height:76px;position:relative}.char .medal{box-shadow:0 0 0 2px var(--cls), 0 0 22px color-mix(in srgb, var(--cls) 35%, transparent)}.char-cls{position:absolute;top:-6px;right:-14px}.char-cls .medal{box-shadow:0 0 0 2px #04050a, 0 0 0 3px var(--cls)}.bubble{border:1px solid var(--bd);background:#0c0f18f2;border-radius:16px;width:min(230px,70%);height:108px;padding:9px 12px;font-size:13px;line-height:1.4;animation:.35s ease-out pop;position:relative;overflow:hidden}.btext{-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}@keyframes pop{0%{opacity:0;transform:translateY(8px)scale(.92)}}.bubble:before{content:"";border-left:1px solid var(--bd);border-top:1px solid var(--bd);background:#0c0f18f2;width:12px;height:12px;position:absolute;top:-7px;left:50%;transform:translate(-50%)rotate(45deg)}.typed{cursor:default}.ghost{opacity:0}.votes{gap:2px;display:flex;position:absolute;bottom:4px;right:8px}.votes button{opacity:.75;background:0 0;border:0;padding:0 4px;font-size:12px}.votes button.on{opacity:1}.votes button:disabled:not(.on){opacity:.3;cursor:default}.cloud{flex-wrap:wrap;place-content:flex-start center;gap:5px;width:100%;height:112px;display:flex;position:relative}.tag{color:#cfd4e2;white-space:nowrap;opacity:.3;will-change:transform;background:#0a0d16b3;border:1px solid #ffffff1f;border-radius:99px;padding:2px 8px;font-size:11px;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .3s,border-color .22s,background .22s}.tag.l2{opacity:.42}.tag.l3{opacity:.6;border-color:color-mix(in srgb, var(--cls) 55%, transparent)}.tag.suggest{border-style:dashed}.cloud:hover .tag{opacity:.6}.cloud:hover .tag.l2{opacity:.8}.cloud:hover .tag.l3{opacity:1}.cloud .tag:hover,.cloud .tag:focus-visible{opacity:1;z-index:2;color:#fff;border-color:var(--cls);background:#0a0d16f2;transform:scale(1.16)}@media (height<=600px){.char{width:60px;height:60px}.center{gap:8px}.bubble{height:84px;font-size:12.5px}.btext{-webkit-line-clamp:4}.cloud{height:96px}}@media (prefers-reduced-motion:reduce){.bubble{animation:none}}.composer{align-items:center;gap:6px;display:flex}.composer input{min-width:0;height:38px;color:var(--text);border:1px solid var(--line);background:#080a11d9;border-radius:10px;flex:1;padding:0 12px;font-size:16px}.mini{border:1px solid var(--line);background:#080a11d9;border-radius:10px;flex:none;width:34px;height:38px;font-size:14px}.send{background:var(--cls);color:#14171f;border:0;border-radius:10px;width:42px;height:38px;font-weight:700}.send:disabled{opacity:.4;cursor:default}.left{text-align:right;height:12px;color:var(--muted);font-size:10px;line-height:12px}.hole-slot{z-index:0;height:var(--hs);pointer-events:none;flex:none;margin:2px 0 4px;position:relative}.hole{width:calc(var(--hs) * 1.0526);height:calc(var(--hs) * 1.0526);color:var(--cls);position:absolute;top:50%;left:50%;overflow:visible;transform:translate(-50%,-50%)}@media (height<=520px){.hole-slot{display:none}}.app[data-mood=thinking] .hole{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.6}}@media (prefers-reduced-motion:reduce){.app[data-mood=thinking] .hole{animation:none}}.char>.medal{width:100%;height:100%}