:root{
  --panel:rgba(12,22,30,.78);--line:rgba(255,255,255,.14);--ink:#eef3f4;--soft:#a9bcc4;--seg:rgba(255,255,255,.07);--seg-h:rgba(255,255,255,.14);
  --accent:#e3ad35;--accent-ink:#1d1507;--bg:#0d1820;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;--ui:"Barlow","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--panel:rgba(12,22,30,.78)}}
:root[data-theme="dark"]{--panel:rgba(12,22,30,.78)}
*{box-sizing:border-box}
html,body{touch-action:manipulation;margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-user-select:none;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#c{touch-action:none}
button,a,input,select,textarea{touch-action:manipulation}
#hud{pointer-events:none}
.glass{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}

.top{position:fixed;top:max(.75rem,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:.4rem;padding:.35rem;border-radius:14px;opacity:0;transition:opacity .3s}
.top.on{opacity:1}
.chip{display:flex;align-items:center;gap:.5rem;padding:.3rem .7rem .3rem .55rem;border-radius:10px;min-width:6.4rem}
.chip.me{background:rgba(255,255,255,.08)}
.dot{width:.7rem;height:.7rem;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.chip .nm{font-size:.82rem;color:var(--soft)}
.chip .sc{margin-left:auto;font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.clock{display:grid;place-items:center;padding:0 .8rem;font-family:var(--display);font-weight:600;font-size:1.5rem;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.clock.low #clockTime{color:#ff8a6a}
.clock{line-height:1}.clock small{display:block;margin-top:.15rem;font:600 .68rem var(--ui);color:var(--soft);letter-spacing:.02em}
.setup .seg button:disabled{opacity:.35;cursor:not-allowed}
.pauseBtn{position:fixed;top:max(.75rem,env(safe-area-inset-top));right:max(.75rem,env(safe-area-inset-right));width:2.8rem;height:2.8rem;border-radius:12px;color:var(--ink);font:600 1rem var(--ui);cursor:pointer;display:none}
.pauseBtn.on{display:block}
.camBtn{position:fixed;top:max(.75rem,env(safe-area-inset-top));right:calc(max(.75rem,env(safe-area-inset-right)) + 3.3rem);height:2.8rem;padding:0 .8rem;border-radius:12px;color:var(--ink);font:500 .85rem var(--ui);cursor:pointer;display:none}
body.playing .camBtn{display:block}
@media (max-width:760px){.camBtn{top:auto;bottom:max(7.6rem,env(safe-area-inset-bottom));right:max(.75rem,env(safe-area-inset-right));height:2.4rem;font-size:.8rem}}

.big{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:700;font-size:clamp(4rem,14vw,8rem);line-height:1;text-shadow:0 6px 30px rgba(0,0,0,.45);pointer-events:none}
.toast{position:fixed;left:50%;top:22%;transform:translate(-50%,0);padding:.5rem 1.1rem;border-radius:12px;font-family:var(--display);font-weight:700;font-size:2rem;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,-.4rem)}
.toast.small{top:auto;bottom:22%;font:600 1rem var(--ui);padding:.45rem .9rem;color:var(--ink)}

.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(6,12,18,.35);transition:opacity .3s,visibility .3s}
.overlay.hide{opacity:0;visibility:hidden}
.card{width:min(26rem,100%);max-height:calc(100vh - 2rem);overflow:auto;padding:1.4rem 1.4rem 1.25rem;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.card h1,.card h2{margin:0;font-family:var(--display);font-weight:700;line-height:.95}
.card h1{font-size:2.9rem}.card h2{font-size:2.3rem}
.map-card{display:block;width:100%;margin:.8rem 0;padding:1rem;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--seg);color:var(--ink);cursor:pointer;font:600 1.15rem var(--ui)}
.map-card:hover{background:var(--seg-h);border-color:var(--accent)}
.map-card svg{display:block;width:100%;height:105px;margin-bottom:.75rem}
.map-card small{display:block;margin-top:.3rem;font:400 .85rem/1.4 var(--ui);color:var(--soft)}
[hidden]{display:none!important}
.lead{margin:.5rem 0 1.1rem;color:var(--soft);line-height:1.45;font-size:.95rem}
.field{margin-top:.8rem}
.field>span{display:block;margin-bottom:.35rem;color:var(--soft);font-size:.8rem;font-weight:500}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;padding:.25rem;border-radius:11px;background:var(--seg)}
.seg button{appearance:none;border:0;border-radius:8px;padding:.6rem .2rem;background:transparent;color:var(--ink);font:500 .88rem/1 var(--ui);cursor:pointer}
.seg button:hover{background:var(--seg-h)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.primary{display:block;width:100%;margin-top:1.2rem;padding:.9rem;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font:700 1.05rem var(--ui);cursor:pointer}
.primary:hover{filter:brightness(1.07)}
.ghost{display:block;width:100%;margin-top:.5rem;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:500 .95rem var(--ui);cursor:pointer}
button:focus-visible{outline:2px solid #6fc3ec;outline-offset:2px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.86rem;line-height:1.35}
.keys dt{color:var(--ink);font-weight:600;white-space:nowrap}.keys dd{margin:0;color:var(--soft)}
kbd{display:inline-block;padding:.05rem .4rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;font:600 .78rem var(--ui);color:var(--ink)}
.results{list-style:none;margin:1rem 0 0;padding:0}
.results li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:1rem}
.results li b{margin-left:auto;font-family:var(--display);font-size:1.6rem}

.touch{display:none}
body.is-touch .touch{display:block}
body.is-touch .desk{display:none}
#joy{position:fixed;left:0;bottom:0;width:50%;height:55%;touch-action:none}
#shootBtn,#passBtn{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#joyBase{position:fixed;width:7.5rem;height:7.5rem;margin:-3.75rem 0 0 -3.75rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(10,20,28,.25);display:none;pointer-events:none}
#joyKnob{position:absolute;left:50%;top:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;border-radius:50%;background:rgba(255,255,255,.75)}
#shootBtn{position:fixed;right:max(1.2rem,env(safe-area-inset-right));bottom:max(1.6rem,env(safe-area-inset-bottom));width:5.6rem;height:5.6rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(227,173,53,.85);color:var(--accent-ink);font:700 1.05rem var(--ui);touch-action:none}
#shootBtn:active,#passBtn:active{transform:scale(.95)}
#passBtn{position:fixed;right:calc(max(1.2rem,env(safe-area-inset-right)) + 6.4rem);bottom:max(1.4rem,env(safe-area-inset-bottom));width:4rem;height:4rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(47,191,168,.85);color:#07201c;font:700 .95rem var(--ui);touch-action:none;display:none}
body.team-mode #passBtn{display:block}
.results small{display:block;color:var(--soft);font-size:.8rem;margin-top:.1rem}
.team-help{display:none}body.team-help-on .team-help{display:contents}
.playOnly{display:none!important}
body.playing .playOnly:not(.touch),body.playing.is-touch .playOnly.touch{display:block!important}
@media (max-width:560px){.chip{min-width:0;padding:.25rem .5rem}.chip .nm{display:none}.chip .sc{font-size:1.35rem}.clock{font-size:1.25rem;padding:0 .55rem}.card h1{font-size:2.4rem}}
.colors{margin-top:.9rem;border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem}
.colors summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink)}
.colorRow{margin-top:.7rem}.colorRow>span{display:block;margin-bottom:.35rem;color:var(--soft);font-size:.8rem}
.swatches{display:flex;flex-wrap:wrap;gap:.4rem}
.sw{appearance:none;width:1.85rem;height:1.85rem;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.sw.court{border-radius:8px;width:2.4rem}
.sw[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.specHint{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:.45rem .9rem;border-radius:10px;font-size:.82rem;color:var(--soft);pointer-events:none;white-space:nowrap}
body.spectator #shootBtn,body.spectator #passBtn{display:none!important}
body:not(.is-touch) .specHint .touch{display:none}body.is-touch .specHint .desk{display:none}
.card.setup{width:min(29rem,100%);padding:1.3rem 1.35rem 1rem}
.setupHead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.setupHead h1{font-size:2.3rem}
.lead.tight{margin:.3rem 0 0;font-size:.86rem}
.linkBtn{appearance:none;border:0;background:none;color:var(--soft);font:500 .84rem var(--ui);cursor:pointer;padding:.35rem 0;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.linkBtn:hover{color:var(--ink)}
.opts{display:grid;gap:.5rem;margin-top:1rem}
.more .opts{margin-top:.6rem}
.opt{display:grid;grid-template-columns:5.2rem 1fr;align-items:center;gap:.7rem}
.opt>span{color:var(--soft);font-size:.82rem}
.setup .seg{background:transparent;border:1px solid var(--line);padding:.18rem;border-radius:10px}
.setup .seg button{padding:.48rem .2rem;font-size:.84rem;border-radius:7px}
.setup .primary{margin-top:.9rem}
.hint{margin:.65rem 0 0;color:var(--soft);font-size:.8rem;line-height:1.4}
.more{margin-top:.75rem;border-top:1px solid var(--line);padding-top:.5rem}
.more summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:.88rem;font-weight:600;color:var(--ink);padding:.25rem 0}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";color:var(--soft);font-size:1.1rem;font-weight:500}
.more[open] summary::after{content:"−"}
.more .keys{margin-top:.5rem;padding-top:0;border-top:0}
.setup .sw{width:1.45rem;height:1.45rem;border-width:2px}
.setup .sw.court{width:2rem;border-radius:7px}
#colorRows{display:contents}
@media (max-width:480px){.opt{grid-template-columns:1fr;gap:.3rem}.setupHead h1{font-size:2rem}}
.online{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.online h2{font-size:1.5rem!important}
.online input{appearance:none;width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:500 .95rem var(--ui)}
.online input:focus{outline:2px solid #6fc3ec;outline-offset:1px}
.netRow{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.netRow .ghost{margin:0}
.joinRow{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:.5rem}
.joinRow input{text-transform:uppercase;letter-spacing:.2em;text-align:center}
.joinRow .ghost{margin:0;width:auto;padding:.6rem 1rem}
.roomPill{position:fixed;top:max(.75rem,env(safe-area-inset-top));left:max(.75rem,env(safe-area-inset-left));display:flex;align-items:center;gap:.5rem;padding:.35rem .4rem .35rem .75rem;border-radius:12px;font-size:.85rem;z-index:3}
.roomPill b{font-family:var(--display);font-size:1.25rem;letter-spacing:.12em}
.roomPill button{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:.35rem .6rem;font:500 .8rem var(--ui);cursor:pointer}
body.net-client #againBtn,body.net-client #resumeBtn+#quitBtn{}
body.net-client #againBtn{display:none}
@media (max-width:760px){.roomPill{top:auto;bottom:max(10.6rem,env(safe-area-inset-bottom))}}
.entry input,.entry select,.pauseSettings select{width:100%;padding:.65rem;border:1px solid var(--line);border-radius:9px;background:#182832;color:var(--ink);font:500 .95rem var(--ui)}
.entry label,.pauseSettings label{display:block;margin-top:.7rem;color:var(--soft);font-size:.85rem}
.entry label input,.entry label select,.pauseSettings label select{margin-top:.35rem}
.step{color:var(--accent);font-size:.76rem;letter-spacing:.08em;margin:0 0 .7rem}
.roomItem{display:flex;align-items:center;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.roomItem div{flex:1;min-width:0}.roomItem strong{display:block;overflow-wrap:anywhere}.roomItem small{display:block;color:var(--soft);margin-top:.3rem}.roomItem button{width:auto;margin:0;padding:.6rem}
button:disabled{opacity:.45;cursor:not-allowed}.inviteText{width:100%;margin-top:.5rem;padding:.6rem;user-select:text;background:#182832;color:var(--ink);border:1px solid var(--line);border-radius:8px}
.big.specwin{color:#f39a2e;font-size:clamp(2.6rem,9vw,6rem);text-shadow:0 3px 0 #5a2a05,0 8px 30px rgba(0,0,0,.55);white-space:nowrap}
#overTitle.specwin{color:#f39a2e}
#restartBtn.armed{border-color:#f39a2e;color:#f39a2e}
.sysLauncher{text-decoration:none;position:fixed;left:max(.75rem,env(safe-area-inset-left));bottom:max(.75rem,env(safe-area-inset-bottom));z-index:30;padding:.45rem .8rem;border-radius:10px;color:var(--soft);font:600 .8rem var(--ui);cursor:pointer}
.ghost.small,.primary.small{width:auto;margin:0;padding:.45rem .7rem;font-size:.8rem}
.ghost.danger{border-color:rgba(255,120,90,.45);color:#ffb3a1}

.bigBan{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,8vw,5.6rem);line-height:1;color:#ff4d3d;text-align:center;letter-spacing:.02em;text-shadow:0 4px 0 #4a0d06,0 10px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1);z-index:40;width:92vw}
.bigBan.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.scoreOverlay{pointer-events:none;background:rgba(6,12,18,.25);z-index:25}
.scoreCard{width:min(40rem,100%);max-height:calc(100vh - 3rem)}
.sbHead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.sbTeam{margin-top:.7rem}
.sbTeamHead{display:flex;align-items:center;gap:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.sbTeamHead b{font-size:1rem}.sbTotal{margin-left:auto;font-family:var(--display);font-weight:700;font-size:1.6rem}
.sbTable{width:100%;border-collapse:collapse;font-size:.88rem}
.sbTable th{padding:.35rem .3rem;color:var(--soft);font-weight:500;font-size:.75rem;text-align:left}
.sbTable td{padding:.35rem .3rem;border-bottom:1px solid rgba(255,255,255,.06)}
.sbTable .num{text-align:right;font-variant-numeric:tabular-nums;width:4.2rem}
.sbTable td.num:nth-child(2){font-weight:700}
.sbTable tr.me td{background:rgba(255,255,255,.07)}
.sbTag{margin-left:.4rem;padding:0 .3rem;border:1px solid var(--line);border-radius:4px;font-size:.66rem;color:var(--soft)}
.scoreCard h3{margin:1rem 0 .4rem;font:600 .9rem var(--ui)}
.sbLog{list-style:none;margin:0;padding:0;max-height:10rem;overflow:hidden;font-size:.86rem}
.sbLog li{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.sbLog li b{margin-left:auto;font-family:var(--display);font-size:1.05rem}
.sbTime{width:2.8rem;color:var(--soft);font-variant-numeric:tabular-nums}
#top{pointer-events:auto;cursor:pointer}
@media (max-width:560px){.sbTable th:nth-child(5),.sbTable td:nth-child(5),.sbTable th:nth-child(6),.sbTable td:nth-child(6){display:none}}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#0d1820;color:#a9bcc4;z-index:20;transition:opacity .5s,visibility .5s}
#loading.done{opacity:0;visibility:hidden}

.welcome{padding:2.2rem!important;width:min(27rem,100%);background:rgba(12,22,30,.92)}
.brandLogo{display:block;width:min(100%,23rem);height:auto;margin:.15rem auto 0;filter:none}.welcome .lead{margin:1.15rem 0 1.8rem}.welcome input{font-size:1.2rem;padding:.9rem}
.eyebrow{margin:0 0 .65rem;color:var(--accent);font-size:.72rem;font-weight:600;letter-spacing:.16em}
.primary{display:flex;justify-content:center;align-items:center;gap:.7rem}.primary:disabled{filter:none}
.card.lobby{width:min(49rem,100%);padding:1.7rem 1.8rem}.lobby h1{font-size:2.5rem}.lobby .eyebrow{margin-bottom:.35rem;text-transform:uppercase}
.lobbyTabs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.3rem;background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;margin:1.3rem 0 1.4rem}
.lobbyTabs button{border:0;border-radius:8px;background:transparent;color:var(--soft);font:600 .98rem var(--ui);padding:.8rem;cursor:pointer}.lobbyTabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.sectionTitle{font:600 1.25rem var(--display)!important;line-height:1.2!important}.roomFields{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.roomFields label{margin-top:.8rem}.roomFields label[for="roomPassword"]{grid-column:1/-1}
.mapPicker{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}.mapGrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.9rem 0 1.1rem}.mapGrid .map-card{margin:0;font-size:1rem;padding:.85rem}.map-card[aria-pressed="true"]{border-color:var(--accent);background:rgba(227,173,53,.1);box-shadow:inset 0 0 0 1px var(--accent)}.map-card small{font-size:.76rem}.mapGrid svg{height:85px}
.courtAppearance{padding-top:.9rem;border-top:1px solid var(--line)}.courtAppearance .opts{gap:.8rem}.mapPicker .opt{grid-template-columns:6rem 1fr}.mapPicker .sw{width:1.7rem;height:1.7rem}.mapPicker .sw.court{width:2.4rem}.mapPicker .primary{margin-top:1.25rem}
.emptyState{color:var(--soft);font-size:.87rem;line-height:1.5;margin:1rem 0}.inviteBox{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:.5rem}.roomItem{padding:1rem 0}.roomItem strong{font-size:1rem}
#netStatus:empty,#nickStatus:empty,#mapStatus:empty,#setupStatus:empty{display:none}
@media(max-width:560px){.welcome{padding:1.6rem!important}.brandLogo{width:min(100%,19rem)}.card.lobby{padding:1.2rem}.roomFields{grid-template-columns:1fr}.mapGrid{gap:.5rem}.mapGrid .map-card{padding:.6rem}.map-card small{font-size:.72rem}.mapPicker .opt{grid-template-columns:1fr;gap:.4rem}.mapGrid svg{height:65px}.lobbyTabs{margin:1rem 0}.lobby h1{font-size:2.2rem}}

#adminOverlay{z-index:5}.adminCard{width:min(39rem,100%)}.adminPlayer{padding:1rem 0;border-bottom:1px solid var(--line)}.adminPlayerHead{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}.adminPlayerHead strong{overflow-wrap:anywhere}.adminPlayerHead small{margin-left:auto;color:var(--soft)}.adminActions{display:grid;grid-template-columns:minmax(7rem,1fr) auto auto auto;gap:.4rem;align-items:center}.adminActions .ghost{margin:0;width:auto;padding:.65rem .7rem;font-size:.84rem}.adminActions select{margin:0;font-size:.85rem;padding:.65rem}.adminActions .danger{color:#ff9b91;border-color:rgba(255,130,120,.35)}.adminActions .danger:hover{background:rgba(255,100,90,.12)}#adminStatus:empty{display:none}
@media(max-width:480px){.adminActions{grid-template-columns:1fr 1fr}.adminActions select{grid-column:1}.adminActions .ghost{width:100%}}
#homeScreen #genderField{display:block;margin-top:1.1rem}#homeScreen #genderField>span{display:block;margin-bottom:.4rem}#homeScreen #genderField .seg button{padding:.85rem}
/* Sohbet: oda açıkken her zaman ekranda. Okumak için tıklamak gerekmez; yazarken öne çıkar,
   sessizlikte solar ve tıklamaları geçirir. Oynarken engel olmaması için arka planı yoktur. */
.chatDock{position:fixed;z-index:4;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));width:min(26rem,calc(100vw - 2rem));display:flex;flex-direction:column;gap:.35rem;pointer-events:none}
.chatLog{display:flex;flex-direction:column;justify-content:flex-end;gap:.1rem;max-height:11rem;overflow:hidden;padding:.15rem .35rem;border-radius:10px;user-select:none;transition:opacity .35s,max-height .25s,background .25s;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.5rem);mask-image:linear-gradient(to bottom,transparent 0,#000 1.5rem)}
.chatMessage{font:500 .84rem/1.45 var(--ui);color:#eef4f6;overflow-wrap:anywhere;text-shadow:0 1px 3px #000a,0 0 10px #0007;margin:0;padding:.06rem 0}
.chatMessage b{color:var(--accent);font-weight:700;margin-right:.3rem}
.chatMessage.mine b{color:#86d8c8}
.chatMessage .host{color:#f5d27a;font-weight:600;font-size:.7rem;margin-right:.25rem}
.chatBar{display:flex;gap:.4rem;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s,max-height .2s}
.chatBar input{min-width:0;flex:1;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:rgba(12,22,30,.94);color:var(--ink);font:400 .88rem var(--ui)}
.chatBar input:focus{outline:2px solid var(--accent);outline-offset:1px}
.chatBar button{padding:.55rem .9rem;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:600 .82rem var(--ui);cursor:pointer}
/* Yazarken: kutu öne gelir, arkasına okunurluk için perde iner ve kaydırılabilir olur. */
.chatDock.writing{pointer-events:auto}
.chatDock.writing .chatLog{background:rgba(9,17,24,.82);max-height:15rem;overflow-y:auto;overscroll-behavior:contain;user-select:text}
.chatDock.writing .chatBar{opacity:1;max-height:4rem}
/* Sessizlikte solar; yeni mesaj ya da Enter geri getirir. */
.chatDock.idle .chatLog{opacity:.55;max-height:5rem}
.chatJump{align-self:flex-start;pointer-events:auto;padding:.3rem .6rem;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 .72rem var(--ui);cursor:pointer}
.chatStatus{font:400 .7rem var(--ui);line-height:1.35;margin:0;color:#ffc7a4}
.chatStatus:empty{display:none}
/* Dokunmatikte Enter yok: yazmayı bu düğme açar. */
.chatOpen{position:fixed;z-index:4;right:max(1rem,env(safe-area-inset-right));bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 9.5rem);width:2.9rem;height:2.9rem;display:none;align-items:center;justify-content:center;padding:0;border-radius:50%;color:var(--ink);cursor:pointer}
body.is-touch .chatOpen{display:flex}
@media(max-width:560px){.chatDock{width:min(20rem,calc(100vw - 2rem))}.chatLog{max-height:7rem}.chatDock.idle .chatLog{max-height:3.6rem}.chatDock.writing .chatLog{max-height:9rem}.chatMessage{font-size:.78rem}.chatBar input{font-size:16px}}
#inviteCode{font-family:var(--display);font-size:1.6rem;letter-spacing:.25em;text-align:center;color:var(--accent);background:rgba(227,173,53,.08);user-select:text}.roomFields .roomNameField{grid-column:1/-1}.renameRoomForm{display:flex;gap:.6rem;align-items:end;margin:.8rem 0}.renameRoomForm label{flex:1;min-width:0}.renameRoomForm .ghost{width:auto;margin:0;white-space:nowrap}.roomPill{max-width:calc(100vw - 1.5rem);flex-wrap:wrap}#roomTitle{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#roomRole{font-size:.72rem;color:var(--accent)}

/* Mobilde skor ve oda bilgileri, yüksekliği içeriğe göre değişen tek bir üst alan. */
.matchHud{display:contents}
@media (max-width:760px), (hover:none) and (pointer:coarse) and (max-width:1366px), (max-height:500px) and (max-width:1100px){
  .matchHud{position:fixed;top:max(.75rem,env(safe-area-inset-top));left:max(.75rem,env(safe-area-inset-left));right:max(.75rem,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none}
  .matchHud .top{position:relative;top:auto;left:auto;transform:none;max-width:calc(100% - 5.6rem);flex-wrap:wrap;justify-content:center;gap:.3rem}
  .matchHud .chip{min-width:0;gap:.35rem;padding:.25rem .4rem}
  .matchHud .chip .nm{display:none}
  .matchHud .chip .sc{font-size:1.25rem}
  .matchHud .clock{font-size:1.2rem;padding:0 .5rem}
  .matchHud .roomPill{position:relative;inset:auto;max-width:100%;min-width:0;flex-wrap:wrap;justify-content:center;gap:.35rem .5rem;padding:.35rem .5rem;pointer-events:auto}
  .matchHud #roomTitle{min-width:0;flex:0 1 auto;max-width:10rem}
  .matchHud #roomCode,.matchHud #roomRole,.matchHud .roomPill button{flex-shrink:0;white-space:nowrap}
  .matchHud .roomPill button{min-height:2rem;padding:.35rem .55rem}
  .camBtn{top:auto;bottom:max(7.6rem,env(safe-area-inset-bottom));right:max(.75rem,env(safe-area-inset-right));height:2.4rem;font-size:.8rem}
}
@media (max-width:560px){
  .matchHud .roomPill{display:grid;grid-template-columns:minmax(0,1fr) auto auto;width:min(100%,23rem);gap:.2rem .6rem;padding:.4rem .6rem;font-size:.8rem}
  .matchHud #roomTitle{grid-column:1/3;max-width:none}
  .matchHud #roomCode{grid-column:3;justify-self:end;font-size:1.1rem}
  .matchHud #copyLink{grid-column:1;justify-self:start}
  .matchHud #adminBtn{grid-column:2}
  .matchHud #roomRole{grid-column:3;text-align:right}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1100px){
  .matchHud{top:max(.4rem,env(safe-area-inset-top));gap:.25rem}
  .pauseBtn{top:max(.4rem,env(safe-area-inset-top))}
  .matchHud .roomPill{padding:.2rem .5rem;font-size:.78rem}
  .matchHud .roomPill b{font-size:1.1rem}
}

.menuMusicControl{display:block;margin:0 0 .65rem auto;padding:.4rem .7rem;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--soft);font:500 .78rem var(--ui);cursor:pointer;min-height:2.25rem}
.menuMusicControl:hover{color:var(--ink);background:var(--seg)}
.menuMusicControl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Darbe geri bildirimi: itilme anında ekran kenarından kırmızı bir vurgu gelir. */
.hitFx{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;transform:translate(var(--hx,0),var(--hy,0));
  background:radial-gradient(ellipse at center,transparent 42%,rgba(226,74,52,.5) 100%);
  transition:opacity .08s linear}
@media (prefers-reduced-motion:reduce){.hitFx{display:none}}

/* Dikey modda oynamak zor: bir kez yatay mod öneriliyor, isteyen dikeyde kalabiliyor. */
.rotateHint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(21rem,calc(100vw - 2.5rem));
  padding:1.1rem 1.2rem;border-radius:16px;display:flex;flex-direction:column;gap:.5rem;text-align:center}
.rotateHint[hidden]{display:none}
.rotateHint b{font:700 1.1rem/1.2 var(--display,var(--ui));letter-spacing:.02em}
.rotateHint span{font:500 .85rem/1.35 var(--ui);color:var(--soft)}
.rotateHint button{margin-top:.2rem;min-height:2.5rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--ink);font:600 .85rem var(--ui);cursor:pointer}
.rotateHint::before{content:"";display:block;width:2.6rem;height:4rem;margin:0 auto .2rem;border:2px solid currentColor;border-radius:7px;opacity:.65;
  animation:rotTip 2.2s ease-in-out infinite}
@keyframes rotTip{0%,35%{transform:rotate(0)}65%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotateHint::before{animation:none;transform:rotate(-90deg)}}
/* Dikey modda kumanda alanı: joystick daha yukarıda, tuşlar başparmağa yakın. */
@media (orientation:portrait){
  body.is-touch #joy{height:46%}
  body.is-touch #shootBtn{width:5rem;height:5rem;bottom:max(2.4rem,env(safe-area-inset-bottom))}
  body.is-touch #passBtn{width:3.6rem;height:3.6rem;bottom:max(7.6rem,env(safe-area-inset-bottom));right:max(1.9rem,env(safe-area-inset-right))}
  body.is-touch .camBtn{bottom:max(12.4rem,env(safe-area-inset-bottom))}
}

/* Bildirimler kaçmasın diye kısa bir giriş hareketiyle gelir. */
.toast.on{animation:toastPop .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes toastPop{from{opacity:0;transform:translate(-50%,.7rem) scale(.8)}to{opacity:1;transform:translate(-50%,-.4rem) scale(1)}}
.toast.small.on{animation:toastSlide .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes toastSlide{from{opacity:0;transform:translate(-50%,.8rem)}to{opacity:1;transform:translate(-50%,-.4rem)}}
@media (prefers-reduced-motion:reduce){.toast.on,.toast.small.on{animation:none}}

/* Maç girişinde kısa joystick tanıtımı; kumanda dokunuşlarını engellemez. */
#joyHint{position:absolute;left:0;right:0;bottom:max(1rem,env(safe-area-inset-bottom));text-align:center;pointer-events:none;color:#fff;text-shadow:0 1px 3px #000}
#joyHint[hidden]{display:none}
#joyHint p{font-size:.82rem;line-height:1.4;margin:.7rem .4rem 0}
.joyDemo{position:relative;width:6rem;height:6rem;margin:auto;border-radius:50%;border:2px dashed rgba(255,255,255,.7);background:rgba(10,20,28,.55)}
.joyDemo span{position:absolute;left:50%;top:50%;width:2.4rem;height:2.4rem;margin:-1.2rem;border-radius:50%;background:#e3ad35;animation:joyGuide 1.6s ease-in-out infinite}
@keyframes joyGuide{0%,100%{transform:translate(0,0)}35%{transform:translate(1.25rem,-1rem)}65%{transform:translate(-1rem,-.4rem)}}
@media(prefers-reduced-motion:reduce){.joyDemo span{animation:none}}

/* Canlı mesajlar HUD üzerinde çizilir; oyun kontrollerine dokunulabilir. */
#chatBubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.chatBubble{position:absolute;left:0;top:0;width:max-content;max-width:min(220px,calc(100vw - 24px));padding:8px 11px;border-radius:12px;background:rgba(250,252,255,.96);color:#15232c;font:600 13px/1.35 var(--ui);overflow-wrap:anywhere;white-space:pre-wrap;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.chatBubble::after{content:"";position:absolute;left:calc(50% - 5px);top:100%;border:5px solid transparent;border-top-color:rgba(250,252,255,.96)}
.chatBubble[hidden]{display:none}

.camIcon{display:none}
@media (max-width:760px), (hover:none) and (pointer:coarse) and (max-width:1366px), (max-height:500px) and (max-width:1100px){
  .matchHud .top{align-self:flex-start;justify-content:flex-start;max-width:calc(100% - 6.3rem);pointer-events:auto}
  .camBtn,body.is-touch .camBtn{top:max(.75rem,env(safe-area-inset-top));bottom:auto;right:calc(max(.75rem,env(safe-area-inset-right)) + 3.3rem);width:2.8rem;height:2.8rem;padding:.65rem}
  .camIcon{display:block;width:100%;height:100%}
  #camLabel{display:none}
  .specHint{width:max-content;max-width:calc(100% - 2rem);white-space:normal;text-align:center}
  .chatToggle{bottom:calc(max(1rem,env(safe-area-inset-bottom)) + var(--mobile-hint-height,2.8rem) + .6rem)}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1100px){
  .camBtn,body.is-touch .camBtn{top:max(.4rem,env(safe-area-inset-top))}
}

.fpsCounter{position:fixed;left:max(.75rem,env(safe-area-inset-left));top:max(4rem,calc(env(safe-area-inset-top) + 3.25rem));padding:.2rem .45rem;border-radius:6px;background:rgba(10,18,24,.72);color:#d8efdf;font:600 .72rem/1.3 var(--ui);font-variant-numeric:tabular-nums;pointer-events:none}
body:not(.playing) .fpsCounter,.fpsCounter[hidden]{display:none}
@media (max-width:760px), (hover:none) and (pointer:coarse) and (max-width:1366px), (max-height:500px) and (max-width:1100px){
  .matchHud .fpsCounter{position:static;align-self:flex-start}
}



/* Room card: on portrait phones a small code button sits next to the scoreboard and opens the card downward. */
.roomToggle{display:none}
.roomDetails{display:contents}
@media (orientation:portrait) and (max-width:560px){
  .matchHud{flex-direction:row;align-items:stretch;justify-content:flex-start;gap:.4rem;right:calc(max(.75rem,env(safe-area-inset-right)) + 6.45rem)}
  .matchHud .top{flex:none;max-width:none;align-self:stretch}
  .matchHud .roomPill{position:static;display:block;flex:none;width:auto;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .roomToggle{display:flex;align-items:center;gap:.4rem;height:100%;min-height:2.8rem;padding:0 .75rem;border:1px solid var(--line);border-radius:12px;
    background:rgba(12,22,30,.9);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);color:var(--ink);font:700 1.1rem var(--display);letter-spacing:.1em;cursor:pointer}
  .roomToggle i{font-style:normal;font-size:.75rem;letter-spacing:0;color:var(--soft);transition:transform .2s}
  .roomPill.open .roomToggle{border-color:var(--accent)}
  .roomPill.open .roomToggle i{transform:rotate(180deg)}
  .matchHud .roomDetails{display:none}
  .matchHud .roomPill.open .roomDetails{position:absolute;top:calc(100% + .4rem);left:0;right:-6.45rem;display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;gap:.5rem .6rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);
    backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);font-size:.85rem;pointer-events:auto;animation:roomDrop .18s ease-out}
  .matchHud .roomPill.open #roomTitle{grid-column:1/3;grid-row:1;max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .matchHud .roomPill.open #roomCode{grid-column:3;grid-row:1;justify-self:end;font-size:1.2rem}
  .matchHud .roomPill.open #copyLink{grid-column:1;grid-row:2;justify-self:start}
  .matchHud .roomPill.open #adminBtn{grid-column:2;grid-row:2}
  .matchHud .roomPill.open #roomRole{grid-column:3;grid-row:2;justify-self:end;white-space:nowrap}
  .matchHud .roomPill.open .roomDetails button{min-height:2.2rem;padding:.35rem .7rem;font-size:.82rem}
}
@keyframes roomDrop{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.matchHud .roomPill.open .roomDetails{animation:none}}
/* During a match the /admin link would cover the chat button. */
body.playing .sysLauncher{display:none}

/* Material Symbols (icon font, ligatures). */
.mi{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;user-select:none}

/* Pause: icon menu. */
.pauseCard{width:min(30rem,100%)}
.pauseCard h2{margin-bottom:1rem}
.iconMenu{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.iconTile{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-height:6.2rem;padding:.9rem .6rem;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);color:var(--ink);font:600 .92rem var(--ui);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s}
.iconTile .mi{font-size:2rem;color:var(--soft);transition:color .15s}
.iconTile b{font-weight:600}
.iconTile:hover{background:var(--seg-h);border-color:rgba(255,255,255,.28)}
.iconTile:hover .mi{color:var(--ink)}
.iconTile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iconTile:active{transform:scale(.97)}
.iconTile.main{grid-column:1/-1;flex-direction:row;min-height:3.8rem;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:1.05rem}
.iconTile.main .mi{color:var(--accent-ink);font-size:2rem}
.iconTile.main:hover{filter:brightness(1.07);background:var(--accent)}
.iconTile.armed{border-color:#f39a2e;color:#f39a2e}.iconTile.armed .mi{color:#f39a2e}
.iconTile[hidden]{display:none}
@media (max-width:420px){.iconTile{min-height:5.2rem;font-size:.85rem}.iconTile .mi{font-size:1.75rem}}

/* Panels with a header (room settings, game settings). */
.panelHead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.panelHead h2{margin:0}
.iconBtn{appearance:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--soft);cursor:pointer}
.iconBtn:hover{color:var(--ink);background:var(--seg-h)}
.iconBtn .mi{font-size:1.35rem}
.subTabs{display:flex;gap:.25rem;margin:0 0 1rem;padding:.25rem;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.18)}
.subTabs button{appearance:none;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .6rem;border:0;border-radius:9px;
  background:transparent;color:var(--soft);font:600 .9rem var(--ui);cursor:pointer}
.subTabs button .mi{font-size:1.2rem}
.subTabs button[aria-selected="true"]{background:var(--seg-h);color:var(--ink)}
.subTabs button[hidden]{display:none}
.panelSection{margin-top:.9rem}
.panelSection h3{margin:0 0 .5rem;font:700 .74rem var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
#gameSettingsCard .hint:first-of-type{margin-top:0}
#settingsOverlay [data-room-pane="players"] .renameRoomForm{margin-top:.2rem}
.leaveInvite{display:block;margin:.6rem auto 0}
.leaveInvite[hidden]{display:none}

/* Compact lobby: room discovery and invitations share the same panel. */
.card.lobby{width:min(68rem,100%);padding:clamp(1.2rem,3.5vw,3rem);border-radius:28px}
.lobbyHead{align-items:center;gap:1rem}.lobbyHead h1{font-size:2.3rem}.lobbyHead .eyebrow{overflow-wrap:anywhere}
.lobbyActions{display:flex;align-items:center;justify-content:flex-end;gap:1rem;flex-wrap:wrap}
.lobbyActions .menuMusicControl{position:static;margin:0;float:none;width:auto}
.lobbyTabs{margin:1.2rem 0;gap:.5rem}.lobbyTabs button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px}
.lobbyTabs button[aria-selected="true"]{background:rgba(255,255,255,.045);color:var(--ink);box-shadow:inset 0 -3px var(--accent)}
.lobbyList{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.lobbyBox{min-width:0;background:rgba(0,0,0,.13);border:1px solid var(--line);border-radius:16px;padding:1.2rem}
.roomsHead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.roomsHead .sectionTitle{margin-right:auto}
.roomsCount{font-size:.72rem;font-weight:700;letter-spacing:.07em;color:var(--soft)}
.refreshBtn{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none}.refreshBtn:disabled{opacity:.5}
.emptyRooms{display:flex;align-items:center;flex-direction:column;justify-content:center;padding:1.8rem .5rem;text-align:center}
.emptyHoop{width:100px;height:80px;color:var(--soft);opacity:.7;margin-bottom:1rem}
.emptyRooms strong{font:600 1.6rem var(--display)}.emptyRooms p{color:var(--soft);font-size:.9rem;line-height:1.5;margin:.6rem 0 1.2rem}
.lobbyAction{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:52px;border-radius:14px}
.emptyRooms .lobbyAction{width:auto;margin:0;padding:.8rem 1.8rem}
.lobby .inviteBox{margin:0;padding:1.2rem}.inviteBox h3{font:600 1.25rem var(--display);margin:0}.inviteBox .hint{line-height:1.5}
.inputIcon{position:relative;display:block;margin-top:.35rem}.inputIcon>.mi{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--soft);pointer-events:none}.entry .inputIcon input{margin-top:0;padding-left:2.5rem;font-size:1rem}
.roomList{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;min-width:0;max-height:min(24rem,42dvh);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--soft) transparent;gap:.5rem}.roomList:not(:empty){margin-top:1rem}
.roomList .roomItem{min-width:0;max-width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);flex-wrap:wrap;transition:background .15s,border-color .15s}
.roomList .roomItem:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25)}
.roomList .roomItem small{line-height:1.4;margin-top:.2rem}.roomList .roomItem button{min-height:40px;padding:.5rem .65rem;font-size:.8rem}.roomList .roomItem div{flex-basis:180px}
.roomsBox .emptyState:empty{display:none}
@media(max-width:760px){.lobbyList{grid-template-columns:1fr}.lobbyHead{align-items:flex-start}.lobbyActions{gap:.5rem;flex-direction:column;align-items:flex-end}.lobbyHead h1{font-size:2rem}.lobbyBox,.lobby .inviteBox{padding:1rem}.emptyRooms{padding:1rem .5rem}.emptyHoop{width:80px;height:64px}.card.lobby{border-radius:24px}.lobbyHead .eyebrow{font-size:.7rem}}

.lobbySettingsBtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.5rem;padding:.45rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--seg);color:var(--ink);font:500 .84rem var(--ui);cursor:pointer;white-space:nowrap}
.lobbySettingsBtn:hover{background:var(--seg-h)}.lobbySettingsBtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.card.lobby.creating{width:min(43rem,100%);padding:clamp(1rem,3vw,2rem)}
.mapGrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch}
.mapGrid .map-card{min-width:0;height:100%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-wrap:anywhere}
.mapGrid .map-card svg{flex:none}.mapGrid .map-card small{margin-top:auto;padding-top:.35rem}
.mapPicker .teamColorRow{grid-template-columns:6rem minmax(0,1fr);align-items:center;gap:.8rem}
.teamChoice{min-height:48px;padding:.65rem .75rem;border:1px solid var(--line);border-radius:9px;background:var(--seg);color:var(--ink);font:500 .8rem var(--ui);cursor:pointer}
.teamChoice[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(227,173,53,.1)}
.menuMusicControl.lobbySettingsBtn{display:flex;margin:0 0 .65rem auto}
@media(max-width:560px){.mapGrid .map-card{padding:.45rem;font-size:.85rem}.mapGrid .map-card svg{height:55px}.mapGrid .map-card small{font-size:.65rem}.mapPicker .teamColorRow{grid-template-columns:5.5rem minmax(0,1fr);gap:.6rem}}

.teamChoice:hover{background:var(--seg-h)}.teamChoice:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Keep room creation compact while retaining scrolling on unusually short screens. */
.card.lobby.creating{padding:1.2rem 1.5rem}
.creating .lobbyHead h1{font-size:1.9rem}.creating .lobbyHead .eyebrow{margin-bottom:.15rem}
.creating .lobbyTabs{margin:.75rem 0}.creating .lobbyTabs button{min-height:42px;padding:.55rem}
.creating .roomFields{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:.75rem}
.creating .roomFields label{margin-top:.45rem}.creating .roomFields input,.creating .roomFields select{padding:.55rem .65rem;font-size:1rem}
.creating .mapPicker{margin-top:.8rem;padding-top:.75rem}.creating .mapPicker>.hint{display:none}
.creating .mapGrid{margin:.5rem 0 .75rem;gap:.5rem}.creating .mapGrid .map-card{padding:.5rem;font-size:.9rem}
.creating .mapGrid svg{height:52px;margin-bottom:.3rem}.creating .mapGrid small{font-size:.7rem;padding-top:.2rem}
.creating .courtAppearance .opts{margin-top:.5rem;gap:.4rem}.creating .teamChoice{min-height:38px;padding:.45rem .6rem}
.creating .mapPicker .opt{grid-template-columns:6rem minmax(0,1fr);gap:.65rem}
.creating #mapNextBtn{min-height:44px;padding:.65rem;margin-top:.75rem}
.creating #mapStatus:empty,.creating #netStatus:empty{display:none}
@media(max-width:560px){
 .card.lobby.creating{padding:1rem}.creating .lobbyHead h1{font-size:1.65rem}
 .creating .mapGrid svg{height:42px}.creating .mapGrid .map-card{font-size:.8rem;padding:.4rem}.creating .mapGrid small{font-size:.65rem}
 .creating .mapPicker .opt{grid-template-columns:5rem minmax(0,1fr);gap:.5rem}
 .creating .swatches{gap:.35rem}.creating .sw{width:1.6rem;height:1.6rem}.creating .sw.court{width:2rem}
 .creating .sectionTitle{font-size:1.1rem!important}
}
.creating .roomFields .roomNameField{grid-column:auto}.creating .courtAppearance{padding-top:.6rem}

.roomList .roomItem>div{min-width:0;max-width:100%}.roomList .roomItem strong{white-space:normal;overflow-wrap:anywhere;word-break:normal}

.randomRoomBtn{width:auto;margin:0;padding:.4rem .65rem;min-height:36px;border:1px solid var(--line);border-radius:9px;background:var(--seg);color:var(--ink);font:500 .82rem var(--ui);cursor:pointer}.randomRoomBtn:hover{background:var(--seg-h)}.randomRoomBtn:disabled{opacity:.45;cursor:default}.randomRoomBtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.roomSettingsHead{align-items:flex-start;gap:.6rem}.roomTitleForm{flex:1;min-width:0}.roomTitleLine{display:flex;align-items:center;gap:.45rem;min-height:44px}.roomNameField{flex:1;min-width:0;height:44px;display:flex;align-items:center}.roomNameField #roomNameText{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1.3rem var(--display)}.roomNameField input{width:100%;min-width:0;height:44px;padding:.45rem .5rem;border:1px solid var(--line);border-radius:10px;background:var(--seg);color:var(--ink);font:600 1.3rem var(--display)}.roomNameField input:focus{outline:2px solid var(--accent);outline-offset:1px}.roomTitleLine #saveRoomNameBtn{flex:0 0 36px;width:36px;height:36px;padding:0;margin:0;display:grid;place-items:center}.roomTitleForm #roomNameStatus{min-height:1.4em;margin:.25rem 0 0}.roomTitleForm #roomNameStatus:empty{visibility:hidden}

.roomSettingsHead #roomSettingsTitle{font-size:2.5rem;line-height:1.05}.roomSettingsHead{margin-bottom:.45rem}.roomTitleForm{margin:0 0 .3rem}.roomNameField #roomNameText,.roomNameField input{font-size:1.4rem}

.roomNameField{flex:0 1 auto;max-width:calc(100% - 44px)}.roomNameField input{max-width:100%;flex-shrink:1}.roomNameField #roomNameMeasure{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none;white-space:pre;font:600 1.4rem var(--display)}

.tutorialDialog{border:1px solid var(--line);border-radius:22px;background:#101f2a;color:var(--ink);width:min(29rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:1.5rem;box-sizing:border-box;overflow:auto;font-family:var(--ui)}
.tutorialDialog::backdrop{background:rgba(3,10,16,.8);backdrop-filter:blur(6px)}
.tutorialDialog h2{margin:.5rem 0 .8rem;font-size:1.7rem}.tutorialDialog p{line-height:1.6;color:var(--soft)}
.tutorialTop,.tutorialActions{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tutorialTop small{color:var(--accent);font-weight:700}.tutorialActions{margin-top:1.2rem}.tutorialActions button{width:auto;margin:0}.tutorialActions .primary{flex:1}
.tutorialCourt{height:140px;border:2px solid #79b9ac;border-radius:14px;background:linear-gradient(90deg,transparent 49.6%,#79b9ac55 50%,transparent 50.4%),#244f50;position:relative;margin:1rem 0;overflow:hidden}.tutorialCourt:before{content:'';position:absolute;left:calc(50% - 28px);top:calc(50% - 28px);width:56px;height:56px;border:2px solid #79b9ac55;border-radius:50%}.tutorialCourt span{position:absolute;width:20px;height:20px;border-radius:50%;background:#f5bf4f;border:3px solid white;transform:translate(-50%,-50%);box-sizing:border-box;transition:left .08s,top .08s}
.tutorialMeter{height:24px;background:linear-gradient(90deg,#314653 65%,#5ba678 65%,#5ba678 85%,#314653 85%);border-radius:8px;overflow:hidden;margin:1rem 0}.tutorialMeter span{display:block;width:0;height:100%;background:#f5bf4fbb;border-right:3px solid white;box-sizing:border-box}.tutorialPad{position:relative;height:140px;border:1px dashed #79b9ac88;border-radius:16px;background:#192f3a;touch-action:none;user-select:none;overflow:hidden}.tutorialJoyHint{position:absolute;inset:0;display:grid;place-items:center;color:var(--soft);pointer-events:none}#tutorialJoyBase{position:absolute;width:112px;height:112px;margin:-56px;border:2px solid #ffffff55;border-radius:50%;background:#ffffff18;box-sizing:border-box;pointer-events:none}#tutorialJoyKnob{position:absolute;width:40px;height:40px;left:34px;top:34px;background:#f5bf4f;border-radius:50%;box-shadow:0 2px 10px #0005}.tutorialResult{min-height:2.8rem;font-size:.9rem}.tutorialDialog .tutorialShoot{touch-action:none;width:100%;padding:1rem}.tutorialDialog [hidden]{display:none!important}