:root{--bg: rgba(10, 12, 20, .85);--panel: rgba(20, 24, 36, .9);--border: rgba(255, 255, 255, .15);--text: #f0f3ff;--muted: #99a;--hp: #4ade80;--hp-low: #ef4444;--crit: #fbbf24;--twitch: #9146ff;--rarity-Common: #b8b8b8;--rarity-Uncommon: #4ade80;--rarity-Rare: #60a5fa;--rarity-Epic: #c084fc;--rarity-Legendary: #fbbf24}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100vw;min-height:100vh;background:transparent;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,sans-serif}body.page-overlay{height:100vh;overflow:hidden}body.page-login,body.page-dashboard{background:linear-gradient(180deg,#0d1024,#1a1f3a);min-height:100vh}#app{position:relative;width:100%;height:100%}#phase-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);padding:8px 20px;background:var(--panel);border:1px solid var(--border);border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.1em}.rec-btn{position:absolute;top:16px;right:16px;padding:6px 12px;background:#141824e6;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-weight:700;cursor:pointer;z-index:100;transition:background .15s}.rec-btn:hover{background:#282c3cf2}.rec-btn:disabled{opacity:.5;cursor:not-allowed}.rec-btn[data-state=recording]{background:#dc2626e6;border-color:#dc2626;animation:recPulse 1.2s ease-in-out infinite}@keyframes recPulse{0%,to{box-shadow:0 0 #dc2626b3}50%{box-shadow:0 0 0 8px #dc262600}}#players{position:absolute;top:60px;left:16px;right:16px;height:36vh;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;overflow:hidden}#arena{position:absolute;top:calc(68px + 36vh);left:16px;right:16px;height:26vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:linear-gradient(180deg,#141828d9,#28143cd9);border:1px solid var(--border);border-radius:12px;padding:12px 24px;overflow:hidden}.arena-side{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0}.arena-side .arena-avatar{width:140px;height:140px;image-rendering:pixelated;object-fit:contain;transition:transform .2s,filter .2s}.arena-side .arena-name{margin-top:4px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}#arena-attacker .arena-avatar.attacking{transform:translate(40px) scale(1.1)}#arena-target .arena-avatar.hit{transform:translate(-20px);filter:brightness(2) sepia(1) hue-rotate(-50deg) saturate(5)}#arena-target .arena-avatar.dying{filter:grayscale(1);opacity:.3}#arena-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:120px}.arena-damage{font-size:64px;font-weight:900;color:var(--text);text-shadow:0 0 16px rgba(0,0,0,.8);opacity:0}.arena-damage.show{animation:damagePop .6s ease-out forwards}.arena-damage.crit{color:var(--crit);text-shadow:0 0 24px var(--crit),0 0 8px #fff}.arena-damage.heal{color:var(--hp)}.arena-skill{font-size:18px;font-weight:700;color:#93c5fd;margin-top:4px;opacity:0}.arena-skill.show{animation:skillFade 1.2s ease-out forwards}@keyframes damagePop{0%{opacity:0;transform:scale(.6) translateY(0)}20%{opacity:1;transform:scale(1.4) translateY(-8px)}60%{opacity:1;transform:scale(1) translateY(-12px)}to{opacity:0;transform:scale(.9) translateY(-32px)}}@keyframes skillFade{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}#arena.shake{animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.player{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--rarity-Common);border-radius:8px;padding:6px 8px;font-size:11px;transition:opacity .4s,filter .4s,transform .2s}.player .p-header{display:flex;align-items:center;gap:6px;margin-bottom:3px}.player .p-avatar{width:32px;height:32px;image-rendering:pixelated;object-fit:contain;flex-shrink:0}.player .p-meta{flex:1;min-width:0}.player.dead{opacity:.3;filter:grayscale(1)}.player.flash{transform:scale(1.05);box-shadow:0 0 10px var(--crit)}.player .name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .class{font-size:11px;color:var(--muted);margin-bottom:4px}.player .hpbar{height:6px;background:#0006;border-radius:3px;overflow:hidden}.player .hpbar>.fill{height:100%;background:var(--hp);transition:width .3s,background .3s}.player .hp-text{font-size:10px;color:var(--muted);margin-top:2px;text-align:right}#log{position:absolute;bottom:12px;left:16px;right:16px;height:26vh;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 16px;font-size:18px;line-height:1.45;overflow:hidden;display:flex;flex-direction:column-reverse}.log-line{padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.06);animation:slideIn .25s ease-out}.log-line.crit{color:var(--crit);font-weight:800;font-size:21px;text-shadow:0 0 12px var(--crit)}.log-line.death{color:var(--hp-low);font-weight:700}.log-line.flavor{color:var(--muted);font-style:italic}.log-line.skill{color:#93c5fd;font-weight:700}.log-line.heal{color:var(--hp);font-weight:700}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}#result{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#000000d9,#0000004d);animation:fadeIn .6s ease-out}#result h1{font-size:56px;margin:0 0 12px;text-shadow:0 0 24px var(--crit)}.winner-avatar{width:160px;height:160px;image-rendering:pixelated;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 0 16px var(--crit))}#result .winner-name{font-size:40px;font-weight:800}#result .winner-class{font-size:20px;color:var(--muted);margin-top:8px}#result table{margin-top:24px;border-collapse:collapse;font-size:14px}#result td,#result th{padding:4px 12px;border-bottom:1px solid var(--border)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-card{max-width:460px;margin:12vh auto 0;padding:40px;background:var(--panel);border:1px solid var(--border);border-radius:16px;text-align:center}.login-card h1{margin:0 0 12px;font-size:36px}.login-card .lead{color:var(--muted);margin:0 0 24px;line-height:1.6}.login-card .hint{color:var(--muted);font-size:12px;margin-top:16px}.login-card code{background:#ffffff14;padding:1px 6px;border-radius:4px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:#ffffff0f;color:var(--text);text-decoration:none;font-size:14px;cursor:pointer;transition:background .15s,transform .05s}.btn:hover{background:#ffffff1f}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#2563eb;border-color:#2563eb}.btn-primary:hover{background:#1d4ed8}.btn-warn{background:#dc2626;border-color:#dc2626}.btn-warn:hover{background:#b91c1c}.btn-ghost{background:transparent}.btn-twitch{background:var(--twitch);border-color:var(--twitch);padding:12px 24px;font-size:16px;font-weight:700}.btn-twitch:hover{background:#7a30ff}.dash-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border)}.dash-user{display:flex;align-items:center;gap:12px}.dash-user img{width:40px;height:40px;border-radius:50%}.dash-user .display-name{font-weight:700}.dash-user .login-name{color:var(--muted);font-size:12px}.dash-main{max-width:920px;margin:24px auto;padding:0 24px;display:flex;flex-direction:column;gap:16px}.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 20px}.card h2{margin:0 0 12px;font-size:18px}.card p{color:var(--muted);margin:0 0 12px;font-size:13px}.card .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.card .muted{color:var(--muted);font-size:12px}.status-badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#ffffff1a;letter-spacing:.05em}.status-badge[data-state=connected]{background:#4ade8033;color:#4ade80}.status-badge[data-state=error]{background:#ef444433;color:#ef4444}.status-badge[data-phase=entry]{background:#60a5fa33;color:#60a5fa}.status-badge[data-phase=battle]{background:#fbbf2433;color:var(--crit)}.status-badge[data-phase=ended]{background:#ffffff1a;color:var(--muted)}.text-input{flex:1;padding:8px 12px;background:#0000004d;border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.participants{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}.participant{padding:6px 10px;background:#ffffff0a;border-left:3px solid var(--rarity-Common);border-radius:4px;font-size:13px}.participant.dead{opacity:.4;text-decoration:line-through}.participant .p-avatar-sm{width:24px;height:24px;image-rendering:pixelated;object-fit:contain;vertical-align:middle;margin-right:6px}.participant[data-rarity=Uncommon]{border-left-color:var(--rarity-Uncommon)}.participant[data-rarity=Rare]{border-left-color:var(--rarity-Rare)}.participant[data-rarity=Epic]{border-left-color:var(--rarity-Epic)}.participant[data-rarity=Legendary]{border-left-color:var(--rarity-Legendary)}.participant .p-class{color:var(--muted);font-size:12px}.participant .p-hp{color:var(--muted);font-size:11px;margin-left:6px}.player[data-rarity=Common]{border-left-color:var(--rarity-Common)}.player[data-rarity=Uncommon]{border-left-color:var(--rarity-Uncommon)}.player[data-rarity=Rare]{border-left-color:var(--rarity-Rare)}.player[data-rarity=Epic]{border-left-color:var(--rarity-Epic)}.player[data-rarity=Legendary]{border-left-color:var(--rarity-Legendary);animation:legendaryGlow 2s ease-in-out infinite}@keyframes legendaryGlow{0%,to{box-shadow:0 0 4px var(--rarity-Legendary)}50%{box-shadow:0 0 16px var(--rarity-Legendary)}}