@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #0c0e12;--card: #151922;--border: #2a3142;--text: #e8eaef;--muted: #8b93a7;--accent: #e85d4c;--accent-dim: #9a3d32;--you: #4c9f7a;--foe: #c45c8a;--font: "JetBrains Mono", "SF Mono", ui-monospace, monospace;--font-sans: "DM Sans", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 120% 80% at 50% -20%,#1a2230 0%,var(--bg) 55%);color:var(--text);font-family:var(--font-sans)}.rotate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:1.25rem;background:#0c0e12eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.rotate-card{width:min(520px,100%);border-radius:14px;border:1px solid var(--border);background:var(--card);padding:1.15rem;text-align:center}.rotate-title{font-weight:700;font-size:clamp(1.05rem,4.5vw,1.2rem);letter-spacing:-.01em;line-height:1.15;text-wrap:balance}.rotate-sub{margin-top:.45rem;color:var(--muted);font-size:clamp(.9rem,3.8vw,1rem);line-height:1.35;text-wrap:balance}@media(max-width:900px)and (orientation:portrait){.rotate-overlay{display:flex;pointer-events:all}body{overflow:hidden;touch-action:none}}#app{max-width:920px;margin:0 auto;padding:1.5rem 1rem 3rem}header h1{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;margin:0 0 .25rem}.sub{color:var(--muted);font-size:.9rem;margin:0 0 1.25rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem}.card h2{font-size:1rem;margin:0 0 .75rem;color:var(--muted);font-weight:600}.auth-form{display:grid;gap:.6rem}.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{font-family:var(--font);font-size:.95rem;padding:.55rem .65rem;border-radius:8px;border:1px solid var(--border);background:#0a0c10;color:var(--text)}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.me-row{display:flex;align-items:center;gap:.85rem;margin-bottom:.75rem}.avatar{width:54px;height:54px;border-radius:12px;border:1px solid var(--border);background:#0a0c10;object-fit:cover}.me-name{font-weight:600;letter-spacing:-.01em}.my-friends{margin:.75rem 0 .25rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,var(--border) 75%,transparent)}.my-friends-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.my-friends-title{margin:0;font-size:.95rem;font-weight:600;color:var(--muted)}.my-friends-link{font-size:.9rem;color:var(--muted)}.my-friends-link:hover{color:var(--text)}.avatar-form{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;margin:.75rem 0}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.file-choose{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border);background:#0a0c10;color:var(--text);cursor:pointer;font-family:var(--font);font-size:.9rem;min-width:0}.file-name{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12rem}@media(max-width:640px){.avatar-form{grid-template-columns:1fr}.file-name{max-width:100%}}.hidden{display:none!important}.mono{font-family:var(--font);font-size:.85rem}#conn{margin:0 0 .35rem}#pid{color:var(--muted);margin:0;word-break:break-all}button{font-family:var(--font-sans);font-weight:600;font-size:1rem;padding:.65rem 1.25rem;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dim) 100%);color:#fff;width:100%}button:disabled{opacity:.45;cursor:not-allowed}#lobby{display:flex;flex-direction:column;gap:.65rem}.presence-list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem 1rem}.presence-item{display:flex;align-items:center;gap:.5rem;min-width:0}.profile-link{display:inline-flex;align-items:center;gap:.5rem;min-width:0;color:inherit;text-decoration:none}.profile-link:hover .presence-nick,.profile-link:hover .dueling-nick{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.profile-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}.profile-link-disabled{cursor:default;opacity:.9}.presence-avatar{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#0a0c10;object-fit:cover;flex-shrink:0}.presence-nick{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12rem}#presence-empty{margin-top:.35rem}.dueling-card{border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}.dueling-scroll-wrap{margin-top:.75rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.4rem;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}.dueling-scroll-wrap::-webkit-scrollbar{height:8px}.dueling-scroll-wrap::-webkit-scrollbar-track{background:#0a0c10;border-radius:4px}.dueling-scroll-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.dueling-scroll-wrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 55%,var(--border))}.dueling-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:.55rem;align-items:stretch;width:max-content;min-height:0}.dueling-row{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:.35rem;padding:.45rem .55rem;border-radius:10px;background:#00000038;border:1px solid color-mix(in srgb,var(--border) 85%,transparent);box-sizing:border-box;cursor:pointer;transition:background .12s ease,border-color .12s ease}.dueling-row:hover{background:#e85d4c14;border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.dueling-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dueling-side{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;min-width:0;width:4.25rem;flex-shrink:0}.notifications-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.65rem}.notif-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem .7rem;border-radius:10px;border:1px solid var(--border);background:#0000002e}.notif-main{display:flex;align-items:center;gap:.6rem;min-width:0}.notif-avatar{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:#0a0c10;object-fit:cover;flex-shrink:0}.notif-text{min-width:0;color:var(--text);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notif-actions{display:flex;gap:.5rem;flex-shrink:0}.notif-actions button{width:auto;padding:.45rem .7rem;font-size:.9rem}.dueling-avatar{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#0a0c10;object-fit:cover;flex-shrink:0}.dueling-nick{font-size:.68rem;font-weight:500;line-height:1.2;text-align:center;color:var(--text);width:100%;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:break-word}.dueling-vs{flex-shrink:0;align-self:center;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(145deg,#1e2633,#12161d);border:1px solid var(--border);font-size:.58rem;font-weight:800;font-style:italic;letter-spacing:.02em;color:var(--accent)}#dueling-empty{margin-top:.35rem}button.btn-secondary{background:linear-gradient(180deg,#3d4a5c,#2a3142);border:1px solid var(--border)}.hint{color:var(--muted);font-size:.85rem;margin:.65rem 0 0;min-height:1.2em}.postmatch{margin-top:.75rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,var(--border) 75%,transparent);display:grid;gap:.6rem}.postmatch .hint{margin:0}.rematch-incoming{display:grid;gap:.6rem}.rematch-bar{height:10px;border-radius:999px;background:#0a0c10;border:1px solid var(--border);overflow:hidden}.rematch-bar-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 35%,#fff));transition:width .1s linear}.duel-card{padding:1.1rem 1.25rem 1.25rem}.duel-card.spectator-mode .zone-fieldset{pointer-events:none;opacity:.48}.duel-card.spectator-mode #btn-submit{display:none}.spectate-hint{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 .85rem}.duel-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}.duel-actions #btn-submit{flex:1 1 auto;min-width:8rem}.duel-header{text-align:center;margin-bottom:1rem}.duel-meta{margin:0 0 .35rem;color:var(--muted);font-size:.9rem}.timer{font-size:1.35rem;margin:0;color:var(--accent);font-variant-numeric:tabular-nums}.duel-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}@media(max-width:640px)and (orientation:portrait){.duel-columns{grid-template-columns:1fr}}@media(max-width:900px)and (orientation:landscape){.duel-columns{gap:.7rem}.hero-panel{min-height:240px;padding:.85rem .85rem .95rem}.duel-avatar{width:60px;height:60px}.hero-title{font-size:.98rem;margin-bottom:.55rem}.radio-row{font-size:.88rem;padding:.4rem .55rem}}.hero-panel{border:1px solid var(--border);border-radius:12px;padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;align-items:center;min-height:280px}.hero-you{background:linear-gradient(165deg,rgba(76,159,122,.12) 0%,var(--card) 45%);border-color:#4c9f7a59}.hero-foe{background:linear-gradient(195deg,rgba(196,92,138,.12) 0%,var(--card) 45%);border-color:#c45c8a59}.duel-identity{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:.65rem;width:100%}.duel-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#0a0c10;box-shadow:0 6px 18px #0006;flex-shrink:0}.hero-you .duel-avatar{border:2px solid rgba(76,159,122,.55)}.hero-foe .duel-avatar{border:2px solid rgba(196,92,138,.55)}.hero-title{margin:0 0 .75rem;font-size:1.05rem;font-weight:600;letter-spacing:.02em}.hero-you .hero-title{color:var(--you)}.hero-foe .hero-title{color:var(--foe)}.hero-panel .hp-bar{width:100%;display:grid;grid-template-columns:1fr 2.75rem;align-items:center;gap:.5rem;margin-bottom:1rem}.hp-num{text-align:right;font-size:.9rem}.track{height:10px;background:#0a0c10;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.fill{height:100%;border-radius:5px;transition:width .25s ease}.fill.you{background:linear-gradient(90deg,#2d6b52,var(--you))}.fill.foe{background:linear-gradient(90deg,#8a3d5c,var(--foe))}.zone-fieldset{border:none;margin:0;padding:0;width:100%;align-self:stretch}.zone-fieldset legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem;padding:0;width:100%;text-align:center}.radio-stack{display:flex;flex-direction:column;gap:.4rem}.radio-row{display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;border-radius:8px;border:1px solid var(--border);background:#0a0c10a6;cursor:pointer;font-size:.92rem;transition:border-color .15s ease,background .15s ease}.hero-you .radio-row:hover{border-color:#4c9f7a73}.hero-foe .radio-row:hover{border-color:#c45c8a73}.radio-row:has(input:checked){border-color:var(--accent);background:#e85d4c14}.radio-row input{accent-color:var(--accent);width:1rem;height:1rem;margin:0;flex-shrink:0}#log-lines{list-style:none;padding:0;margin:0;max-height:220px;overflow-y:auto;font-family:var(--font);font-size:.8rem;line-height:1.45}#log-lines li{padding:.35rem 0;border-bottom:1px solid #1e2430;color:var(--muted)}#log-lines li strong{color:var(--text)}.chat-card{padding:.9rem 1rem 1rem}.chat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.75rem}.chat-tab{background:#0a0c10a6;border:1px solid var(--border);color:var(--muted);padding:.55rem .75rem;border-radius:10px;width:100%}.chat-tab.active{color:var(--text);border-color:#e85d4cb3;background:#e85d4c14}.chat-lines{height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;background:#0a0c10a6;padding:.65rem .75rem;font-family:var(--font);font-size:.82rem;line-height:1.35;margin-bottom:.75rem}.chat-line{display:flex;gap:.5rem;padding:.25rem 0;color:var(--muted);border-bottom:1px solid rgba(42,49,66,.45)}.chat-line:last-child{border-bottom:none}.chat-who{flex:0 0 auto;color:var(--text)}.chat-text{flex:1 1 auto;word-break:break-word}.chat-form{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}.chat-form input[type=text]{font-family:var(--font);font-size:.95rem;padding:.55rem .65rem;border-radius:10px;border:1px solid var(--border);background:#0a0c10;color:var(--text)}