:root{color-scheme:dark;--gold:#e7bd77;--muted:#b5b2c5;--bg:#100f1b;--card:#201e30}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 10%,#332840,transparent 65%),var(--bg);color:#f6f0e7;font:16px system-ui,sans-serif}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:12px 4%;border-bottom:1px solid #ffffff17;gap:12px}a{color:var(--gold);text-decoration:none}.brand{font-size:10px;letter-spacing:3px;text-align:center}.brand b{display:block;font:italic 30px Georgia;letter-spacing:0}button,input,select{font:inherit}button,select,input:not([type=range],[type=checkbox],[type=color]){border:1px solid #ffffff2a;border-radius:9px;color:inherit;background:#2d293e;padding:11px;min-height:44px}button{cursor:pointer}button:hover{filter:brightness(1.2)}button:disabled{opacity:.48;cursor:default}:focus-visible{outline:3px solid #f7d391;outline-offset:3px}.primary{background:linear-gradient(120deg,#efcf94,#c99851);color:#271d13;border:0;font-weight:750;width:100%;margin-top:15px}.primary span{float:right}main{max-width:1250px;margin:24px auto;padding:0 24px;display:grid;grid-template-columns:minmax(300px,1.5fr) minmax(300px,1fr);gap:22px}.lane-panel{position:relative;border:1px solid #6b5473;border-radius:20px;overflow:hidden;background:#141423;min-width:0;align-self:start;box-shadow:0 18px 60px #0006}.turn{position:absolute;top:18px;left:20px;right:20px;z-index:1;display:flex;justify-content:space-between;gap:12px;font-size:14px}.turn span{color:#f7d391;font-weight:700}.turn strong{font-weight:400}canvas{width:100%;height:min(68vh,690px);display:block;touch-action:none}#announcement{position:absolute;bottom:48px;left:10px;right:10px;text-align:center;font:italic 25px Georgia;text-shadow:0 2px 7px #000}#pinsLeft{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:12px;color:#d9c9b6}aside{display:flex;flex-direction:column;gap:16px;min-width:0}.card,.score-card{background:linear-gradient(145deg,#272337,#1b1a29);border:1px solid #ffffff13;border-radius:16px;padding:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);margin:0 0 14px}h1{font:38px/1.15 Georgia;margin:0}h2{font:24px Georgia;margin:0 0 14px}.muted,.hint{color:var(--muted)}.hint{font-size:12px;line-height:1.6}label{display:block;font-size:13px;margin-top:12px}label select,label input:not([type=checkbox],[type=range],[type=color]){width:100%;margin-top:6px}input[type=range]{width:100%;accent-color:var(--gold);height:28px}input[type=color]{width:46px;height:44px;padding:2px;border:0;background:none}.player-row{display:grid;grid-template-columns:1fr 100px 46px;gap:8px;margin-top:10px}.player-row input{min-width:0;width:100%}.player-row select{padding:8px;font-size:12px}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px}output{float:right;color:var(--gold)}.comfort{padding:16px 22px}.comfort>div{display:flex;gap:20px;align-items:center}.comfort label{flex:1;margin:5px 0}.comfort details{font-size:13px;margin-top:10px;color:var(--muted)}.score-card{grid-column:1/-1;min-width:0;padding:20px}.score-heading{display:flex;justify-content:space-between;gap:15px}.score-heading span{font-size:12px;color:var(--muted)}.score-player{margin-top:14px}.score-name{font-weight:700;font-size:13px;margin-bottom:7px}.frames{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) minmax(0,1.3fr) minmax(0,1fr);border:1px solid #514555;border-radius:7px;overflow:hidden}.frame{border-right:1px solid #514555;text-align:center;min-width:0}.frame small{display:block;background:#ffffff07;font-size:10px;padding:3px;color:var(--muted)}.rolls{font-size:13px;letter-spacing:4px;height:23px;padding-top:3px;color:var(--gold)}.total{font-weight:700;padding:4px;font-size:17px}.frame-points{font-size:9px;color:var(--muted)}.active .frames{border-color:var(--gold)}dialog{background:#252033;color:#f6f0e7;max-width:620px;border:1px solid #c99851;border-radius:16px;padding:28px;line-height:1.6}dialog::backdrop{background:#000b}[hidden]{display:none!important}#invite{width:100%}#roster{line-height:2.3}#connection{overflow-wrap:anywhere}
@media(max-width:740px){header{height:64px;padding:8px 14px}header>a{font-size:11px}.brand b{font-size:24px}header button{font-size:11px;padding:8px}main{margin:12px auto;padding:0 10px;gap:12px;grid-template-columns:1fr}canvas{height:42vh;min-height:250px}.turn{top:10px;font-size:12px;left:12px;right:12px}.card{padding:18px}h1{font-size:30px}.score-card{padding:12px}.score-heading{display:block}.frames{grid-template-columns:repeat(5,minmax(0,1fr))}.frame{border-bottom:1px solid #514555}.frame:last-child{grid-column:1/-1}.rolls{letter-spacing:2px}#controls{padding:12px 16px}#controls .eyebrow{display:none}.sliders{gap:0 14px}.sliders label{margin-top:0}#bowl{margin-top:3px}.hint{margin:7px 0}#newGame{min-height:32px;padding:5px 10px;font-size:12px}#announcement{font-size:20px;bottom:33px}#pinsLeft{bottom:12px}.score-card{grid-column:auto}body.playing .comfort{order:2}body.playing .lane-panel{position:sticky;top:0;z-index:2}body.playing aside{gap:10px}}
@media(max-height:520px) and (min-width:741px){canvas{height:75vh}.card{padding:14px}main{margin:10px auto}header{height:54px}}

#lane{cursor:grab}#lane.aiming{cursor:grabbing}.turn,#announcement,#pinsLeft{pointer-events:none}