:root{--bg: rgba(10, 12, 20, .96);--panel: rgba(20, 24, 36, .96);--border: rgba(255, 255, 255, .22);--text: #f0f3ff;--muted: #b9bdd4;--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{--db-text: #f4eefe;--db-muted: #b9a9dd;--db-panel: rgba(48, 32, 82, .55);--db-panel-2: rgba(60, 40, 100, .45);--db-border: rgba(196, 152, 252, .28);--db-border-soft: rgba(196, 152, 252, .16);--db-accent: #c084fc;--db-accent-pink: #f0a6e6;--db-grad: linear-gradient(135deg, #a855f7 0%, #d946ef 50%, #f472b6 100%);--db-grad-soft: linear-gradient(135deg, rgba(168, 85, 247, .9), rgba(236, 72, 153, .9));color:var(--db-text);min-height:100vh;background:radial-gradient(900px 600px at 12% -8%,rgba(192,132,252,.3),transparent 60%),radial-gradient(820px 620px at 100% 0%,rgba(244,114,182,.22),transparent 55%),radial-gradient(760px 700px at 50% 115%,rgba(129,140,248,.22),transparent 60%),linear-gradient(165deg,#1c1138,#2a1850 48%,#1a1030);background-attachment:fixed}#app{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;gap:8px;padding:54px 16px 12px}#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}}.audio-toggle{position:absolute;top:16px;right:92px;width:32px;height:30px;padding:0;background:#141824e6;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:15px;cursor:pointer;z-index:100;transition:background .15s}.audio-toggle:hover{background:#282c3cf2}.audio-toggle[data-open=true]{background:var(--twitch);border-color:var(--twitch)}.audio-panel{position:absolute;top:54px;right:16px;width:280px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;z-index:101;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.audio-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:700}.audio-mute{padding:4px 10px;background:#282c3ce6;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;cursor:pointer}.audio-mute[data-muted=true]{background:#dc2626d9;border-color:#dc2626}.audio-row{display:flex;align-items:center;gap:8px;margin:8px 0}.audio-label{width:34px;color:var(--muted)}.audio-slider{flex:1;accent-color:var(--twitch);cursor:pointer}.audio-val{width:38px;text-align:right;font-variant-numeric:tabular-nums}.audio-test{padding:3px 8px;background:#282c3ce6;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;cursor:pointer}.audio-test:hover{background:var(--twitch);border-color:var(--twitch)}.audio-se-tests{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}#players{flex:28 1 0;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:min-content;gap:6px;overflow:hidden}#arena{flex:24 1 0;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:linear-gradient(180deg,#141828f5,#28143cf5);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:9px;background:#0009;border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden}.player .hpbar>.fill{height:100%;background:var(--hp);transition:width .3s,background .3s}.player .hp-text{font-size:12px;font-weight:700;color:var(--text);margin-top:3px;text-align:right;font-variant-numeric:tabular-nums}#log{flex:48 1 0;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px 16px;font-size:16px;line-height:1.32;overflow:hidden;display:flex;flex-direction:column-reverse}.log-line{padding:2px 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{position:relative;max-width:460px;margin:12vh auto 0;padding:44px 40px;background:var(--db-panel);border:1px solid var(--db-border);border-radius:24px;text-align:center;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 50px #1a0e3073,inset 0 1px #ffffff14}.login-card h1{margin:0 0 12px;font-size:38px;font-weight:900;background:var(--db-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.login-card .lead{color:var(--db-muted);margin:0 0 24px;line-height:1.7}.login-card .hint{color:var(--db-muted);font-size:12px;margin-top:16px}.login-card code{background:#c498fc2e;color:#e9d5ff;padding:1px 6px;border-radius:6px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 18px;border-radius:999px;border:1px solid var(--db-border);background:#ffffff0f;color:var(--db-text);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s,transform .08s,box-shadow .18s,opacity .18s}.btn:hover{background:#ffffff24;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.btn-primary{background:var(--db-grad);border-color:transparent;font-weight:700;box-shadow:0 6px 18px #d946ef59}.btn-primary:hover:not(:disabled){box-shadow:0 8px 24px #d946ef80;filter:brightness(1.06)}.btn-warn{background:linear-gradient(135deg,#fb7185,#f43f5e);border-color:transparent;font-weight:700;box-shadow:0 6px 18px #f43f5e52}.btn-warn:hover:not(:disabled){filter:brightness(1.06)}.btn-ghost{background:#ffffff0a;border-color:var(--db-border-soft)}.btn-twitch{background:var(--twitch);border-color:var(--twitch);border-radius:999px;padding:13px 26px;font-size:16px;font-weight:800;box-shadow:0 8px 24px #9146ff73}.btn-twitch:hover{background:#7a30ff;transform:translateY(-1px)}.dash-header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:linear-gradient(180deg,#3c28648c,#281a4840);border-bottom:1px solid var(--db-border-soft);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}.dash-user{display:flex;align-items:center;gap:12px}.dash-user img{width:44px;height:44px;border-radius:50%;padding:2px;background:var(--db-grad);object-fit:cover;box-shadow:0 4px 14px #a855f766}.dash-user .display-name{font-weight:800;letter-spacing:.01em}.dash-user .login-name{color:var(--db-muted);font-size:12px}.dash-main{max-width:1180px;margin:24px auto;padding:0 24px 80px}.dash-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.dash-col{display:flex;flex-direction:column;gap:16px;min-width:0}.dash-side{position:sticky;top:24px}@media (max-width: 860px){.dash-layout{grid-template-columns:1fr}.dash-side{position:static}}.card-guide{background:linear-gradient(160deg,#a855f724,#f472b61a);border-color:#d946ef4d}.guide-steps{list-style:none;counter-reset:guide;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.guide-steps li{counter-increment:guide;position:relative;padding-left:34px}.guide-steps li:before{content:counter(guide);position:absolute;left:0;top:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--db-grad);color:#fff;font-size:13px;font-weight:800;box-shadow:0 4px 12px #d946ef66}.guide-step-title{display:block;font-weight:700;font-size:14px;margin-bottom:2px}.guide-step-desc{display:block;color:var(--db-muted);font-size:12px;line-height:1.55}.guide-step-desc b{color:var(--db-text)}.guide-step-desc code{background:#c498fc2e;color:#e9d5ff;padding:1px 6px;border-radius:6px;font-family:ui-monospace,SF Mono,Menlo,monospace}.dash-dev{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 24px;background:#1c1138eb;border-top:1px solid var(--db-border-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50}.card{position:relative;background:var(--db-panel);border:1px solid var(--db-border);border-radius:20px;padding:20px 22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px #1a0e3059,inset 0 1px #ffffff14;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--db-grad);opacity:.85}.card h2{margin:0 0 14px;font-size:18px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:8px}.card h2:before{content:"";width:10px;height:10px;border-radius:3px;background:var(--db-grad);box-shadow:0 0 10px #d946ef99}.card p{color:var(--db-muted);margin:0 0 12px;font-size:13px;line-height:1.6}.card .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}.card .muted{color:var(--db-muted);font-size:12px}.status-badge{padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;background:#c498fc29;border:1px solid rgba(196,152,252,.28);color:var(--db-accent);letter-spacing:.05em}.status-badge[data-state=connected]{background:#6ee7b729;border-color:#6ee7b766;color:#6ee7b7}.status-badge[data-state=error]{background:#fb718529;border-color:#fb718566;color:#fb7185}.status-badge[data-phase=entry]{background:#c084fc2e;border-color:#c084fc73;color:#d8b4fe}.status-badge[data-phase=battle]{background:#f472b62e;border-color:#f472b673;color:#f9a8d4}.status-badge[data-phase=ended]{background:#ffffff14;border-color:var(--db-border-soft);color:var(--db-muted)}.text-input{flex:1;padding:9px 14px;background:#140c2680;border:1px solid var(--db-border);border-radius:12px;color:var(--db-text);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.text-input:focus{outline:none;border-color:var(--db-accent);box-shadow:0 0 0 3px #c084fc33}.participants{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}.participant{display:flex;align-items:center;padding:8px 12px;background:#ffffff0d;border:1px solid var(--db-border-soft);border-left:3px solid var(--rarity-Common);border-radius:12px;font-size:13px;transition:background .15s,transform .1s}.participant:hover{background:#c498fc1f;transform:translateY(-1px)}.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(--db-muted);font-size:12px}.participant .p-hp{color:var(--db-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)}}