@import url('/shared/room.css');
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#263744;background:#faf8f5;font-synthesis:none;font-size:16px}*{box-sizing:border-box}body{margin:0}header{max-width:1100px;margin:auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-weight:850;letter-spacing:-.035em;font-size:23px;color:#d43642;text-decoration:none}.header-tools,.languages{display:flex;gap:6px;align-items:center;flex-wrap:wrap}button,input,select{font:inherit}button,.button{cursor:pointer;border:1px solid #d5dce0;background:white;color:#263744;border-radius:12px;padding:11px 16px;min-height:44px;text-decoration:none;font-weight:650}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #096dca;outline-offset:4px}.languages button{font-size:12px;padding:7px 10px;min-height:34px}.languages [aria-pressed=true]{background:#263744;color:white}.primary{background:#cf3441;color:white;border-color:#cf3441}.button{display:inline-flex;align-items:center;justify-content:center}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:750;color:#bb3340}.pill{display:inline-block;border-radius:30px;background:#f4e5e4;color:#a8313d;font-size:12px;padding:6px 11px;font-weight:650}main{max-width:1000px;padding:20px 28px 190px;margin:auto}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,6vw,56px);letter-spacing:-.045em;line-height:1.15}h2{font-size:24px;letter-spacing:-.03em}p{line-height:1.8;color:#61717c}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:28px;padding:32px 0 44px}.hero p{max-width:470px}.hero .button{margin-top:12px}.hero-art{aspect-ratio:1;border-radius:32px;background:#f1eae5;position:relative;overflow:hidden}.demo{position:absolute;width:32%;aspect-ratio:1;border-radius:50%;background:#d93644;box-shadow:0 8px 0 #b32633,0 16px 28px #ac30302b;display:grid;place-items:center;color:white;font-size:46px;font-weight:bold}.demo:first-child{left:17%;top:16%}.demo:last-child{right:13%;bottom:18%}.hero-art:before{content:"+0.284 s";position:absolute;right:8%;top:12%;font:650 14px ui-monospace,monospace;color:#8d6c6b}.panel{border:1px solid #e0e2df;background:#fff;border-radius:22px;padding:25px;margin:14px 0;box-shadow:0 3px 15px #26374403}.rules ol{padding-left:22px;margin-bottom:0}.rules li{padding:7px 0;line-height:1.8;font-size:14px;color:#61717c}.room-heading,.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.room-heading h1{font-size:30px;margin:4px 0 10px}.code{font:600 13px ui-monospace,monospace;letter-spacing:.08em;color:#61717c}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}label{display:grid;gap:8px;font-size:13px;color:#61717c}input,select{width:100%;min-width:0;padding:11px;border-radius:10px;border:1px solid #d5dce0;background:#fafbf9;color:#263744;min-height:44px}.roster{display:grid;gap:10px;margin:18px 0}.member{display:flex;gap:10px;align-items:center;border:1px solid #e6e9e8;border-radius:14px;padding:12px;min-width:0}.member.self{border-color:#cf344150;background:#fff8f7}.member-name{flex:1;min-width:0;overflow-wrap:anywhere}.member-name strong{display:block}.member small{font-size:11px;color:#76828a}.member .name-form{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.name-form input{padding:7px;min-height:36px}.name-form button{padding:6px 9px;min-height:36px;font-size:12px}.member label{width:110px;flex-shrink:0}.member .badge{font-size:11px;max-width:85px;text-align:right}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.check{display:flex;align-items:center;gap:10px}.check input{width:20px;height:20px;min-height:0}.note{font-size:12px;line-height:1.7;margin:10px 0}.error{color:#ab2835;background:#fff0ee;border-radius:12px;padding:12px;font-size:13px;overflow-wrap:anywhere}.error:empty{display:none}.match-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.match-top h1{font-size:24px;margin:0}.metrics{display:flex;gap:24px;font-variant-numeric:tabular-nums}.metrics span{display:block;color:#78838a;font-size:11px}.metrics strong{font-size:24px;letter-spacing:-.04em}.arena{height:clamp(250px,43dvh,420px);position:relative;background:#f0eae5;border:1px solid #e3dcd6;border-radius:24px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}.arena-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#8f8079;font-weight:650;font-size:14px;text-align:center;padding:30px}.arena-hint.countdown{font-size:42px}.red-button{position:absolute;transform:translate(-50%,-50%);width:72px;height:72px;min-height:0;padding:0;border-radius:50%;border:3px solid #c92a39;background:#df3948;box-shadow:0 5px 0 #ad2330,0 10px 15px #a9282920;color:white;font-size:32px;line-height:1;touch-action:manipulation}.red-button:active{box-shadow:0 2px 0 #ad2330}.red-button:focus-visible{outline:4px solid #154eae;outline-offset:4px}.feedback{height:24px;margin:9px 0;font-size:13px;color:#9c3340;text-align:center;font-variant-numeric:tabular-nums}.attack-bar{display:flex;align-items:end;gap:10px;background:white;border:1px solid #e0e2df;border-radius:16px;padding:14px}.attack-bar label{flex:1}.attack-bar strong{font-size:13px;white-space:nowrap;align-self:center}.score-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}.score-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:12px;background:#f7f8f5;padding:12px;font-size:14px}.score-list li span{min-width:0;overflow-wrap:anywhere}.score-list b{white-space:nowrap;font-variant-numeric:tabular-nums}.result-banner{padding:20px;text-align:center;background:#fff1ee;border-radius:16px;margin-bottom:24px}.result-banner strong{display:block;font-size:30px;color:#c73140;overflow-wrap:anywhere}.result-banner p{margin:0;font-size:13px}.progress{font-size:12px;color:#78838a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rules-toggle{margin-top:20px}.rules-toggle summary{cursor:pointer;font-weight:650}.match-screen{padding-top:4px}footer{padding:0}.spectator-note{text-align:center;padding:24px;background:#f0eae5;border-radius:18px}#connection{font-size:12px;margin:10px 0}#connection button{font-size:12px;padding:6px 10px;min-height:34px}
@media(max-width:600px){header{padding:16px;align-items:flex-start}.brand{font-size:18px;padding-top:7px}.header-tools{justify-content:flex-end;max-width:185px}main{padding:12px 16px 190px}.hero{grid-template-columns:1fr;padding:20px 0;gap:22px}.hero-art{aspect-ratio:1.8}.hero-art .demo{width:24%;font-size:34px}.panel{padding:18px;border-radius:18px}.settings-grid{grid-template-columns:1fr 1fr}.settings-grid label:first-child{grid-column:1/-1}.member{flex-wrap:wrap;gap:8px}.member-name{flex-basis:45%}.member label{width:100px}.member .name-form{flex-basis:100%}.metrics{gap:18px}.metrics strong{font-size:22px}.match-top h1{font-size:18px}.arena{height:clamp(230px,38dvh,330px);border-radius:18px}.red-button{width:56px;height:56px;font-size:27px}.attack-bar{padding:12px;flex-wrap:wrap}.attack-bar strong{width:100%}.attack-bar label{min-width:100px}.note.keyboard{font-size:11px}.match-screen .rules-toggle{margin-top:18px}.match-screen .room-heading{display:none}}
@media(max-width:360px){main{padding-bottom:260px}}
@media(max-height:550px) and (orientation:landscape){.arena{height:230px}.match-top{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.invite-panel label{display:block;margin-bottom:8px;font-weight:700}.invite-panel input{width:100%;min-width:0;font-size:14px}
.participation-choices{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.participation-choices button[aria-pressed=true]{background:#fff0ed;border-color:#cf3441;color:#b12a38;box-shadow:inset 0 0 0 1px #cf3441}.participation-choices button[aria-pressed=true]::before{content:'✓';font-weight:850;margin-right:7px}
.member .force-spectate{font-size:12px;padding:7px 10px;white-space:nowrap}.name-form button{flex-shrink:0;white-space:nowrap}
.lobby-result{border-color:#e6bbb8;background:#fff8f5}.lobby-result h2{font-size:18px;margin:0}.previous-winner{font-size:25px;font-weight:800;color:#c73140;margin:14px 0;overflow-wrap:anywhere}.lobby-result details{margin-top:14px}.lobby-result summary{cursor:pointer;font-size:13px;font-weight:650}