html.bs-phone{height:100%;overflow:hidden}.bs-phone body{position:fixed;left:var(--bs-left,0px);top:var(--bs-top,0px);width:var(--bs-width,100vw);height:var(--bs-height,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bs-phone header{flex:none;height:48px;min-height:48px;width:100%;max-width:none;padding:2px 6px;gap:5px}.bs-phone header h1,.bs-phone header .eyebrow{display:none}.bs-phone header nav{margin:0!important}.bs-phone .return-games{font-size:12px;padding:5px 0;margin:0;display:flex;align-items:center}.bs-phone button,.bs-phone select{min-height:44px;font-size:12px;padding:5px 8px;touch-action:manipulation}.bs-phone button:active:enabled{transform:none}.bs-phone button:disabled{opacity:.65}.bs-phone main{flex:1;min-height:0;width:100%;max-width:none;padding:4px;overflow:auto;overscroll-behavior:contain}.bs-phone footer{display:none}.bs-phone .lobby{padding:16px;margin:0;gap:12px;grid-template-columns:1fr}.bs-phone .intro h2{font-size:26px}.bs-phone .intro p{font-size:13px}.bs-phone .intro .eyebrow{display:none}.bs-phone .modes{gap:8px}
.bs-phone.battle-active main{overflow:hidden;display:flex;flex-direction:column;gap:3px}.bs-phone #game{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}.bs-phone .battlebar{flex:none;margin:0;min-height:35px;gap:4px}.bs-phone .battlebar .eyebrow{font-size:9px;letter-spacing:.6px}.bs-phone .battlebar h2{font-size:17px;margin:0;line-height:1.2}.bs-phone #leave{min-height:44px;font-size:11px;padding:4px}
.bs-phone #phoneLayout{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px}.bs-phone .phone-tabs{display:flex;gap:4px;flex:none}.bs-phone .phone-tabs button{flex:1}.bs-phone .phone-tabs button[aria-pressed=true]{background:#edbd68;border-color:#edbd68;color:#10242f}
.bs-phone .boards{flex:1;min-height:0;display:flex;margin:0;gap:0;align-items:center;justify-content:center;overflow:hidden}.bs-phone .boards>.panel{width:100%;height:100%;padding:3px;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.bs-phone[data-water=own] .boards>.panel:nth-child(2),.bs-phone[data-water=enemy] .boards>.panel:first-child{display:none}.bs-phone .boardheading{height:22px;min-height:22px;width:100%;max-width:var(--bs-grid-size,400px)}.bs-phone .boardheading h3{margin:0;font-size:13px}.bs-phone .boardheading span{font-size:9px}
.bs-phone .grid{width:var(--bs-grid-size,300px);height:var(--bs-grid-size,300px);flex:none;grid-template-columns:16px repeat(10,minmax(0,1fr));grid-template-rows:16px repeat(10,minmax(0,1fr));gap:2px}.bs-phone .grid .axis{font-size:10px}.bs-phone .grid button{min-height:0;min-width:0;width:100%;height:100%;aspect-ratio:auto;font-size:16px;padding:0;touch-action:manipulation}.bs-phone .grid button.phone-target{outline:3px solid #fff6a4;outline-offset:-3px;background:#42657b}.bs-phone .grid button.phone-target:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:#fff6a4;pointer-events:none}
.bs-phone #phoneControls{flex:none;min-height:0;max-height:55%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px}.bs-phone #placement{min-height:0}.bs-phone .ships{flex-wrap:nowrap;overflow:auto;gap:4px;padding-bottom:2px}.bs-phone .ships button{flex:none;font-size:11px;white-space:nowrap;padding:4px 7px}.bs-phone .actions{gap:3px;margin:2px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.bs-phone .actions button{min-width:0;font-size:11px}.bs-phone #confirmPlace{grid-column:1/3}.bs-phone #previewHelp{font-size:11px;line-height:1.2;margin:2px 0;min-height:0;max-height:30px;overflow:auto}.bs-phone .shot-results{margin:0;gap:4px;flex:none}.bs-phone .shot-results>div{padding:4px 6px;min-width:0}.bs-phone .shot-results span{font-size:10px}.bs-phone .shot-results strong{font-size:12px;line-height:1.2;margin:0;overflow-wrap:anywhere}.bs-phone.deploying .shot-results{display:none}
.bs-phone #phoneAim{display:flex;align-items:center;gap:4px;flex:none}.bs-phone #phoneAim label{font-size:11px;display:flex;align-items:center;gap:3px}.bs-phone #phoneAim select{padding:3px 5px}.bs-phone #phoneAim button{flex:1}.bs-phone #phoneTargetText{font-size:12px;color:#ffe1a8;min-height:15px;margin:0}.bs-phone.deploying #phoneTargetText{display:none}.bs-phone #phoneFire{background:#edbd68;color:#10242f}
.bs-phone #notice:not(:empty){margin:0;flex:none;padding:5px;font-size:12px;max-height:60px;overflow:auto}.bs-phone #again{flex:none}
.bs-phone dialog{color:var(--text);background:#102e40;border:1px solid #52758a;border-radius:10px;width:calc(100% - 16px);max-width:650px;max-height:calc(var(--bs-height,100dvh) - 16px);padding:14px;overflow:auto;overscroll-behavior:contain}.bs-phone dialog::backdrop{background:#020c17d9}.bs-phone dialog h2{font-size:22px}.bs-phone dialog h3{font-size:15px;margin:12px 0 5px}.bs-phone dialog p{font-size:13px}.bs-phone dialog details{margin-top:10px;padding-top:8px}.bs-phone dialog .room{margin:8px 0;padding:8px;font-size:12px}.bs-phone #phoneMenuClose{display:block;position:sticky;bottom:0;margin:10px 0 0 auto;background:#edbd68;color:#10242f}.bs-phone dialog .fleet-status{margin:0;gap:4px}.bs-phone dialog .fleet-item{font-size:12px;padding:4px}.bs-phone dialog .log{margin:8px 0;padding:8px;font-size:12px}
.bs-phone.bs-landscape #phoneLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,39%);grid-template-rows:minmax(0,1fr)}.bs-phone.bs-landscape #phoneSide{min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px}.bs-phone.bs-landscape #phoneControls{max-height:none;flex:1;overflow:auto}.bs-phone.bs-landscape .battlebar h2{font-size:15px}.bs-phone.bs-landscape .phone-tabs button{min-height:44px}.bs-phone.bs-landscape header{height:44px;min-height:44px}
.bs-phone:not(.bs-landscape) #phoneSide{flex:none;min-height:0}
.bs-phone:not(.bs-landscape) #phoneControls{max-height:none}
.bs-phone #placement{flex:none}
.bs-phone button{transition:none}

.bs-phone .audio-controls{gap:4px}.bs-phone .audio-controls button{font-size:11px;padding:5px 6px}.bs-phone #phoneMenuBtn{font-size:11px;padding:5px 6px}