:root{--bg:#0a0a0f;--surface:#12121a;--surface2:#1c1c28;--accent:#e8ff47;--accent2:#ff4d6d;--accent3:#47c8ff;--text:#f0f0f0;--muted:#666688;--border:#2a2a3a;--radius:12px;--green:#47ffaa}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,3vw,24px);overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 40% at 15% 20%,rgba(232,255,71,.07) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 85% 80%,rgba(255,77,109,.07) 0%,transparent 60%);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1;width:min(100%,500px)}
.footer-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.status-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.64rem;line-height:1.3}
.status-chip.online{border-color:rgba(71,255,170,.26);color:var(--green);background:rgba(71,255,170,.07)}
.status-chip.offline{border-color:rgba(255,77,109,.26);color:var(--accent2);background:rgba(255,77,109,.07)}
.status-chip.count{color:var(--text)}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.status-value{font-weight:800;color:var(--accent);font-family:'Inter',sans-serif;font-size:.72rem}
.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;margin-left:calc(50% - 50vw);text-align:center;margin-bottom:clamp(18px,4vw,32px)}
.logo h1{display:block;width:max-content;max-width:none;margin:0 auto;font-size:clamp(2.2rem,7.2vw,3.8rem);font-weight:800;letter-spacing:clamp(-2px,-0.22vw,-0.6px);line-height:1;font-family:'Syne',sans-serif;white-space:nowrap;text-align:center}
.logo h1 .u{color:var(--accent)}.logo h1 .r{color:var(--accent2)}
.logo p{margin-top:8px;color:var(--muted);font-family:'Inter',sans-serif;font-size:.75rem;letter-spacing:2px;text-transform:uppercase;line-height:1.35}
.logo-btns{display:flex;justify-content:center;margin-top:12px}
.rules-btn{background:rgba(71,200,255,.1);border:1px solid rgba(71,200,255,.25);color:var(--accent3);border-radius:20px;padding:5px 16px;font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:1px;cursor:pointer;transition:background .2s;line-height:1.35}
.rules-btn:hover{background:rgba(71,200,255,.2)}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:4px;margin-bottom:18px}
.tab-btn{flex:1;padding:9px 12px 11px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s;line-height:1.35;min-height:40px;display:flex;align-items:center;justify-content:center}
.tab-btn.active{background:var(--surface2);color:var(--text)}
.panel{display:none;flex-direction:column;gap:12px}.panel.active{display:flex}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(14px,3vw,18px);display:flex;flex-direction:column;gap:13px}
label{font-size:.7rem;font-family:'Inter',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;line-height:1.35}
input[type=text]{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem;line-height:1.35;outline:none;transition:border-color .2s}
input:focus{border-color:var(--accent)}
.row{display:flex;gap:10px;min-width:0}.row>div{flex:1;min-width:0}
.create-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.setting-field{min-width:0}
.range-group{display:flex;align-items:center;gap:6px}
input[type=range]{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}
.range-val{font-family:'Inter',sans-serif;color:var(--accent);font-size:.95rem;min-width:fit-content;width:auto;text-align:left;flex-shrink:0;line-height:1.3}
.mobile-picker{display:none;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;line-height:1.35;outline:none}
.role-toggle{display:flex;gap:8px}
.role-btn{flex:1;padding:9px 12px 11px;border:2px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:center;line-height:1.35;min-height:40px}
.role-btn.ap{border-color:var(--accent);color:var(--accent);background:rgba(232,255,71,.08)}
.role-btn.aa{border-color:var(--accent3);color:var(--accent3);background:rgba(71,200,255,.08)}
.arbiter-info{display:none;padding:10px 13px;background:rgba(71,200,255,.06);border:1px solid rgba(71,200,255,.18);border-radius:8px;font-size:.78rem;color:var(--accent3);line-height:1.6}
.arbiter-info.show{display:block}
.timer-opts{display:flex;gap:8px;flex-wrap:wrap}
.timer-opt{padding:7px 14px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--muted);font-family:'Inter',sans-serif;font-size:.75rem;cursor:pointer;transition:all .2s;line-height:1.4;min-height:30px;display:inline-flex;align-items:center;justify-content:center;overflow:visible}
.timer-opt:hover{border-color:var(--muted)}
.timer-opt.sel{border-color:var(--accent);color:var(--accent);background:rgba(232,255,71,.09)}
.timer-custom{display:none;margin-top:8px}
.timer-custom.show{display:block}
.btn{width:100%;padding:12px;border:none;border-radius:var(--radius);font-family:'Inter',sans-serif;font-weight:800;font-size:.95rem;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:wait}
.btn-primary{background:var(--accent);color:#0a0a0f}
.btn-primary:hover{box-shadow:0 0 24px rgba(232,255,71,.35)}
.btn-secondary{background:var(--accent2);color:#fff}
.btn-secondary:hover{box-shadow:0 0 24px rgba(255,77,109,.35)}
.hint{font-size:.72rem;color:var(--muted);text-align:center;font-family:'Inter',sans-serif;line-height:1.35}
.footer-links{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;padding-bottom:6px}
.footer-link{color:var(--muted);text-decoration:none;font-size:.68rem;letter-spacing:1px;text-transform:uppercase;transition:color .2s,border-color .2s}
.footer-link:hover{color:var(--text)}
.footer-btn{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;padding:0}
.error-msg{background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.35);color:var(--accent2);border-radius:8px;padding:8px 12px;font-size:.82rem;display:none}
#loading{display:none;position:fixed;inset:0;background:rgba(10,10,15,.88);z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:14px}
#loading.show{display:flex}
#loading p{color:var(--muted);font-size:.82rem;font-family:'Inter',sans-serif;line-height:1.35}
.big-spinner{width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deco{position:fixed;font-family:'Syne Mono',monospace;font-size:.58rem;color:var(--border);letter-spacing:2px;pointer-events:none;z-index:0}
.deco1{top:18px;left:18px;transform:rotate(-90deg) translateX(-100%);transform-origin:top left}
.deco2{bottom:18px;right:18px;transform:rotate(90deg) translateX(100%);transform-origin:bottom right}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,15,.92);z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:480px;width:100%;max-height:85vh;overflow-y:auto;position:relative}
.modal h2{font-size:1.3rem;font-weight:800;letter-spacing:-1px;margin-bottom:18px;color:var(--accent)}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.3rem;line-height:1}
.rules-modal{max-width:720px;padding:20px 20px 18px}
.rules-hero{margin-bottom:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(71,200,255,.18);background:linear-gradient(180deg,rgba(71,200,255,.08),rgba(71,200,255,.03))}
.rules-eyebrow{font-size:.66rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent3);margin-bottom:6px}
.rules-hero h2{margin-bottom:8px}
.rules-hero p{font-size:.9rem;color:var(--muted);line-height:1.65}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rules-card{padding:14px 15px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.rules-card h3{font-size:.74rem;font-family:'Inter',sans-serif;color:var(--accent3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.rules-card p{font-size:.84rem;color:var(--muted);line-height:1.6}
.rules-card p + p{margin-top:8px}
.rules-list{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:7px}
.rules-list li{position:relative;padding-left:14px;font-size:.84rem;color:var(--muted);line-height:1.58}
.rules-list li::before{content:'';position:absolute;left:0;top:.56em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rules-callout{margin-top:12px;padding:11px 13px;border-radius:12px;background:rgba(232,255,71,.07);border:1px solid rgba(232,255,71,.18);color:var(--text);font-size:.82rem;line-height:1.6}
.contact-modal{max-width:420px}
.contact-intro{font-size:.84rem;color:var(--muted);line-height:1.6;margin-bottom:14px}
.contact-actions{display:flex;flex-direction:column;gap:8px}
.contact-link{display:flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);text-decoration:none;font-weight:700;transition:border-color .2s,background .2s}
.contact-link:hover{border-color:var(--accent3);background:rgba(71,200,255,.07)}
.contact-mail{margin-top:14px;text-align:center;color:var(--accent3);font-family:'Syne Mono',monospace;font-size:.76rem}
.rules-tag{display:inline-block;background:rgba(71,255,170,.1);border:1px solid rgba(71,255,170,.25);color:var(--green);border-radius:6px;padding:2px 8px;font-family:'Inter',sans-serif;font-size:.7rem;margin:2px 2px}
.rules-tag.red{background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.25);color:var(--accent2)}
.rules-tag.mode-original{background:rgba(232,255,71,.1);border-color:rgba(232,255,71,.25);color:var(--accent)}
.rules-tag.mode-elim{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.3);color:#ff6b6b}
@media (max-width:640px){
  body{justify-content:flex-start;padding-top:18px;padding-bottom:18px}
  .wrap{max-width:none}
  .logo{width:100%;margin-left:0}
  .logo p{font-size:.7rem;letter-spacing:1.5px}
  .row{flex-direction:column;gap:12px}
  .modal{padding:18px 16px}
  .rules-grid{grid-template-columns:1fr}
  .deco{display:none}
}
@media (max-width:480px){
.logo h1{font-size:clamp(1.3rem,7.6vw,2rem);letter-spacing:clamp(-1.2px,-0.18vw,-0.2px)}
.tabs{gap:2px;padding:3px}
.tab-btn{font-size:.82rem;padding:10px 8px}
.role-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.role-btn{padding:8px 10px;font-size:.76rem;min-height:38px}
.create-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.setting-field{padding:8px 9px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02)}
.setting-field label{margin-bottom:6px}
.setting-field .range-group{display:none}
.mobile-picker{display:block}
#timer-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#timer-opts .timer-opt{width:100%;padding:9px 10px}
#timer-opts .timer-opt[data-val="0"]{grid-column:1/-1}
#win-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#win-opts .timer-opt{width:100%;padding:9px 10px}
  .btn{font-size:.9rem;padding:11px}
  .hint{font-size:.68rem}
  .footer-status{gap:6px;margin-top:14px}
  .status-chip{font-size:.6rem;padding:6px 9px}
  .status-value{font-size:.68rem}
  .footer-links{margin-top:16px}
  .rules-modal{padding:16px 14px}
  .rules-hero{padding:12px 13px}
  .rules-hero p,.rules-card p,.rules-list li,.rules-callout{font-size:.8rem}
}