:root{--brand:#4d4da7;--pink:#ffa3e3;--yellow:#ffe88a;--ink:#101024;--panel:#1c1c38;--muted:#b9b8d4}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#fff;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{border:1px solid #ffffff35;background:#ffffff09;color:#fff;padding:12px 17px;border-radius:5px;cursor:pointer}button:hover{border-color:var(--pink);background:#ffffff14}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{display:flex;align-items:center;gap:24px;padding:20px 5%;border-bottom:1px solid #ffffff20}header .brand{margin-right:auto}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:800;letter-spacing:1px}.brand img{width:48px;border-radius:8px}.brand b{color:var(--pink)}#connection{font-size:12px;color:var(--muted)}main{max-width:1440px;margin:auto;padding:0 5%}.intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:48px 0}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--pink)}h1{font-size:clamp(32px,4vw,58px);line-height:1.05;letter-spacing:-2px;margin:18px 0}h1 em{font-style:normal;color:var(--yellow)}p{line-height:1.6;color:var(--muted)}.title-art{width:30%;text-align:center}.title-art img{width:100%;image-rendering:pixelated}.title-art strong{display:block;color:var(--yellow);letter-spacing:12px;font-style:italic;font-size:24px}.layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(270px,1fr);gap:24px}.arena{border:1px solid #6f6eaa;background:#080813;border-radius:12px;overflow:hidden}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{font-size:13px;letter-spacing:1px}.arena>.section-head{padding:10px 22px;background:var(--brand)}.section-head>span{font-size:10px;letter-spacing:1px}.score{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;font-size:14px}.score b{color:var(--yellow);font-size:24px;white-space:nowrap}.screen{position:relative;aspect-ratio:10/7;background:#000;max-height:560px;margin:auto;display:flex;justify-content:center}.screen canvas,.screen>img{height:100%;max-width:100%;object-fit:contain;image-rendering:pixelated}.screen>img{position:absolute;inset:0;margin:auto;width:100%}.game-footer{padding:12px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.game-footer p{flex:1;font-size:12px;min-width:200px}.game-footer button{font-size:11px;padding:8px}.controls{text-align:center;font-size:10px;letter-spacing:1px;padding:0 12px 12px}.panel{background:var(--panel);border:1px solid #ffffff15;border-radius:12px;padding:24px}.king{background:linear-gradient(145deg,#4d4da7,#29294e)}.king h2{font-size:25px;margin-bottom:8px}.king p{font-size:13px}.queue-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff30;margin-top:24px;padding-top:14px}.queue-head h3{font-size:12px}.queue-head span{color:var(--yellow)}ol{padding:0;list-style:none}ol li{font-size:13px;padding:12px 0;border-bottom:1px solid #ffffff15;display:flex;justify-content:space-between;gap:12px}aside{display:flex;flex-direction:column;gap:20px}.ranking p{font-size:11px}.ranking b{color:var(--yellow)}.selection{margin-top:24px}.selection .section-head h2{font-size:21px;letter-spacing:-.5px}.roster{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:20px}.fighter{min-height:65px;text-align:left;font-size:13px;font-weight:bold}.fighter small{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.fighter.selected{background:var(--brand);border-color:var(--yellow);color:var(--yellow)}.join-row{display:flex;align-items:center;gap:16px;margin-top:20px}.join-row p{margin-right:auto;font-size:13px}.primary{background:var(--yellow);border-color:var(--yellow);color:#161627;font-weight:bold}.primary:hover{background:#fff1b0}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:40px 0}.rules b{font-size:11px;letter-spacing:1px;color:var(--pink)}.rules p{font-size:13px}footer{display:flex;align-items:center;gap:16px;padding:28px 5%;background:var(--brand);font-size:12px;line-height:1.7;letter-spacing:1px}footer img{width:65px}footer small{margin-left:auto}dialog{max-width:440px;width:calc(100% - 32px);background:var(--panel);color:white;border:1px solid #7474bb;border-radius:16px;padding:30px}dialog::backdrop{background:#000a;backdrop-filter:blur(6px)}dialog h2{font-size:30px;letter-spacing:-1px}dialog p{font-size:13px}label{display:block;font-size:12px;margin:18px 0}input{display:block;width:100%;margin-top:8px;padding:12px;background:#111123;color:white;border:1px solid #626285;border-radius:4px}.close{float:right;padding:2px 10px;font-size:24px}#auth-message{color:var(--yellow)}#touch{display:flex;justify-content:space-between;gap:16px;padding:12px 20px}#touch>div{display:flex;gap:4px;flex-wrap:wrap}#touch button{touch-action:none;user-select:none;padding:12px;min-width:42px}[hidden]{display:none!important}@media(min-width:950px){#touch{display:none}}@media(max-width:850px){header{flex-wrap:wrap;gap:12px}.brand{font-size:12px}#connection{order:3;width:100%}.layout{grid-template-columns:1fr}.intro{padding:32px 0}.title-art{width:28%}.intro p br{display:none}.roster{grid-template-columns:repeat(3,1fr)}.rules{gap:16px}footer small{display:none}}@media(max-width:550px){header button{font-size:11px}.intro{display:block}.title-art{width:190px;margin:24px auto}.section-head{align-items:flex-start}.selection .section-head{display:block}.join-row{flex-wrap:wrap}.join-row p{width:100%}.rules{grid-template-columns:1fr}.panel{padding:20px}h1{letter-spacing:-1px}}
.fighter img{width:36px;height:48px;object-fit:contain;image-rendering:pixelated;float:left;margin-right:10px}.fighter{min-height:80px}@media(max-width:550px){.fighter img{float:none;display:block;margin:0 auto 8px}.fighter{text-align:center;padding:10px 5px;font-size:11px}}
.intro{position:relative}.preview-banner{position:absolute;top:0;left:0;right:0;font-size:10px!important;letter-spacing:.5px;color:var(--yellow)}.intro:has(.preview-banner){padding-top:65px}.title-art img{border-radius:8px;border:1px solid #ffffff25}
