/* Stable drawing surfaces and bounded, readable panels. */
.main-content,.arena-grid>*,.replay-grid>*,.range-layout>*{min-width:0}
.recent-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 8px}.recent-row>*{min-width:0;overflow-wrap:anywhere}.recent-row>b,.recent-row>strong:last-child{white-space:nowrap;text-align:right}
#replay-log .recent-row,#range-log .recent-row{grid-template-columns:minmax(0,1fr) 72px 64px}#replay-log,#range-log{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding-right:14px;contain:layout style}.replay-grid{grid-template-columns:minmax(220px,380px) minmax(0,1fr);gap:22px}.replay-grid>div{min-width:0}.replay-player{max-width:100%;overflow-wrap:anywhere}
.brand-logo,.auth-story .brand-logo,.hero-logo{height:auto!important;object-fit:contain;object-position:center;max-height:none!important;background:transparent;border-radius:0;padding:0;transform:none!important;filter:none!important}.brand-logo{width:100%;max-width:175px;aspect-ratio:1}.brand-caption{display:block;text-align:center;font-size:12px;font-weight:850;letter-spacing:.28em;color:var(--text);margin:-18px 0 16px}.hero-logo{width:min(35%,240px)!important;align-self:center!important;margin:0!important;position:static!important}aside{overflow-y:auto;padding-top:12px}aside>.eyebrow{display:none}.hero{overflow:visible!important;align-items:center}.auth-story .brand-logo{width:220px!important}
nav{margin-top:8px}.nav-group{font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--muted);padding:18px 14px 5px}nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:44px}nav button span{margin:0!important}.nav-icon{width:21px;height:21px;flex:none}.avatar-image{display:block;width:48px;height:48px;border-radius:14px;object-fit:cover}.profile-chip{display:flex;align-items:center;gap:10px;overflow:visible}.profile-chip #header-avatar{flex:none}.profile-chip .avatar-image{width:40px;height:40px;border-radius:12px}.player-avatar{padding:0;background:transparent}.avatar-picker button{padding:5px;border-radius:16px}.avatar-picker .avatar-image{width:58px;height:58px}.avatar-picker button.active{outline:2px solid var(--teal);outline-offset:2px}td .avatar-image{display:inline-block;width:28px;height:28px;vertical-align:middle;margin-right:8px}
.section-tabs{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:8;background:var(--bg);padding:10px 0 16px;margin-bottom:12px;border-bottom:1px solid var(--line)}.section-tabs button{min-height:42px;padding:10px 16px;font-weight:650}.section-tabs button[aria-selected=true]{background:var(--teal);color:var(--bg);border-color:var(--teal)}.section-panel{min-width:0;animation:none}.range-setup-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:18px}.range-setup-summary>span:first-child{flex:1;font-weight:650}.range-setup-summary>span:last-child{flex-basis:100%;font-size:12px;color:var(--muted)}#page-range-setup>.card{max-width:880px}#page-range-setup>.card label{max-width:100%}.check-label{display:flex;align-items:center;gap:10px}.check-label input{width:auto;margin:0}.setup-warning{border-left:3px solid var(--orange);padding:14px 18px;background:var(--button);color:var(--text)}
.page{animation:none!important;filter:none!important;transform:none!important}.range-canvas-wrap,.range-camera-wrap,.canvas-wrap{transform:none!important;filter:none!important;backface-visibility:visible;animation:none!important}.impact-flash .range-canvas-wrap,.impact-flash .canvas-wrap{animation:none!important;outline:1px solid var(--teal)}.range-camera-wrap{contain:paint}#range-canvas,#range-camera,#game-canvas,#replay-canvas{display:block;image-rendering:auto}.camera-stage{aspect-ratio:auto;min-height:300px;height:52vh;max-height:620px}.camera-stage img{object-fit:contain}.clock-final{animation:none!important;color:var(--red)!important}
#page-play[data-section=lobby] .arena,#page-play[data-section=lobby] .camera-card,#page-play[data-section=lobby] #arena-live,#page-play[data-section=lobby] #arena-equipment,#page-play[data-section=lobby] .match-replay{display:none!important}#page-play[data-section=game] #lobby-entry,#page-play[data-section=game] #host-settings,#page-play[data-section=game] .desktop-server,#page-play[data-section=game] .match-replay{display:none!important}#page-play[data-section=replay] #lobby,#page-play[data-section=replay] #lobby-entry,#page-play[data-section=replay] .desktop-server{display:none!important}#page-play[data-section=lobby] .arena-grid{grid-template-columns:minmax(0,1fr) 300px}#page-play[data-section=lobby] #arena-live{display:none}#page-play .room-bar{margin-top:14px}
.photo-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,400px);gap:30px}.photo-editor input[type=file]{max-width:100%}#avatar-crop{display:block;width:100%;max-width:320px;aspect-ratio:1;border:2px solid var(--teal);border-radius:12px;touch-action:none;cursor:grab;margin-bottom:18px}#avatar-crop:active{cursor:grabbing}#avatar-crop-tools>label{display:grid;grid-template-columns:85px 1fr;align-items:center;gap:8px;margin:8px 0}#avatar-crop-tools input{margin:0}
.lobby-actions{margin:12px 0 22px}#page-play[data-section=lobby] .lobby-camera{display:none!important}
#page-range>.range-intro{display:none}.range-setup-summary{padding:10px 14px;margin-bottom:12px;gap:6px 14px}.range-setup-summary>span:last-child{flex-basis:auto}.section-tabs{padding-top:6px;padding-bottom:10px;margin-bottom:14px}.range-stage{padding:18px}#range-canvas{height:min(43vh,480px)}.range-views[data-view=both] #range-canvas{height:min(40vh,450px)}.range-camera-wrap canvas{max-height:43vh}.range-readout{padding:4px 0 12px}.range-hud #range-clock{font-size:30px}.range-stage:fullscreen #range-canvas{height:100%;max-height:calc(100vh - 210px)}.range-stage:fullscreen .range-camera-wrap canvas{max-height:calc(100vh - 210px)}
:root[data-theme=light] .brand-logo,:root[data-theme=light] .hero-logo{background:#17191f;border-radius:12px}
@media(max-width:1000px){.replay-grid{grid-template-columns:minmax(180px,300px) minmax(0,1fr)}.main-content{padding:24px}.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){aside{padding:8px 14px}.brand-logo{max-width:95px;aspect-ratio:1;max-height:88px!important;object-fit:contain}.brand-caption{display:none}.nav-group{display:none}nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:5px;margin-top:8px}nav button{justify-content:flex-start;font-size:11px;padding:8px 5px;gap:7px;white-space:normal}.nav-icon{width:17px;height:17px}nav button span{font-size:11px}.sidebar-bottom{top:15px}.profile-chip{max-width:180px}.replay-grid,.photo-editor,#page-play[data-section=lobby] .arena-grid{grid-template-columns:1fr}.section-tabs{position:relative;gap:5px}.section-tabs button{font-size:12px;padding:8px 10px}.recent-row{padding:10px 4px;gap:7px}#replay-log .recent-row,#range-log .recent-row{grid-template-columns:minmax(0,1fr) 54px 46px;font-size:12px}#replay-log,#range-log{padding-right:8px}.hero-logo{width:28%!important}.hero h1{font-size:28px!important}.camera-stage{height:42vh}.range-setup-summary{align-items:flex-start}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Shared action rhythm across every personal skin. */
button,.download-button,.target-actions a{box-sizing:border-box;min-height:46px;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:8px;vertical-align:middle;font:inherit;font-weight:650;border-radius:7px;padding:11px 17px;text-align:center;white-space:normal;overflow-wrap:anywhere}
.button-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:14px}.button-row>button,.button-row>a{flex:1 1 180px;margin:0;min-width:0}.button-row>button:hover,.button-row>a:hover{transform:none}.button-row>button:only-child{flex-grow:0}
button:not(.primary):not(.danger):not(.skin):not(.text-button):not(.profile-chip){color:var(--text);background:var(--button);border:1px solid var(--line)}button.primary,.download-button{background:var(--teal);color:var(--bg);border:1px solid var(--teal)}button.primary:hover,.download-button:hover{filter:brightness(1.08);background:var(--teal);color:var(--bg)}button.danger{background:color-mix(in srgb,var(--red) 17%,var(--panel));border:1px solid var(--red);color:var(--text)}button:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.section-tabs button[aria-selected=true],button[aria-current=step]{background:var(--teal)!important;border-color:var(--teal)!important;color:var(--bg)!important}.section-tabs button{flex:1 1 140px}.skin-grid{align-items:stretch}.skin-grid .skin{min-height:58px}.avatar-picker button{min-height:0;padding:5px}nav button{justify-content:flex-start;font-size:13px;padding:10px 12px}.profile-chip{padding:6px 12px}.brand-caption{display:none!important}.target-actions{display:flex;flex-wrap:wrap;gap:10px}.target-actions a{flex:1 1 140px;text-decoration:none}
.guide-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:22px}.guide-index{display:flex;flex-direction:column;gap:8px;align-self:start}.guide-index button{text-align:left;justify-content:flex-start}.guide-body{line-height:1.7;min-width:0}.guide-body p,.guide-body li{max-width:85ch}.guide-body li{margin-bottom:10px}.guide-body dt{font-weight:750;color:var(--text);margin-top:18px}.guide-body dd{margin:6px 0;color:var(--muted)}.guide-body code{overflow-wrap:anywhere}.setup-diagram{width:100%;height:auto;max-height:300px;color:var(--text);background:var(--button);border-radius:10px;padding:14px}.setup-diagram text{fill:currentColor;font-size:12px}.wizard-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}.wizard-steps button{font-size:12px}progress{width:100%;height:9px;accent-color:var(--teal)}.setup-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.75fr);gap:20px;align-items:center}.setup-home .button-row{margin:0}.setup-home p{margin-bottom:0}
@media(max-width:760px){.guide-layout,.setup-home{grid-template-columns:1fr}.guide-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.guide-index button,.wizard-steps button{font-size:11px;padding:9px}.wizard-steps{grid-template-columns:repeat(2,minmax(0,1fr))}nav button{font-size:11px;padding:8px 5px}.button-row>button,.button-row>a{flex-basis:140px}.section-tabs button{flex-basis:110px}}

nav button.selected{background:color-mix(in srgb,var(--teal) 14%,var(--panel))!important;border-color:var(--teal)!important;color:var(--text)!important}.pdf-options a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:46px;line-height:1.3;text-align:center}
.main-content{margin:0 auto}.button-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}.button-row>button,.button-row>a{width:100%;height:100%}nav button span{overflow-wrap:normal}nav button{font-size:12px}

.print-download{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);align-items:center;gap:24px;margin-bottom:24px}.print-download p:last-child{margin-bottom:0}.print-download .download-button{text-decoration:none;word-break:normal}@media(max-width:760px){.print-download{grid-template-columns:1fr}}
.range-framing{display:block;padding:10px 4px 0;font-size:12px}.range-framing select{padding:8px;margin-top:4px}.range-camera-wrap:has(#range-camera-framing option[value=target]:checked) canvas{width:auto;max-width:100%;margin:auto}#laser-form input{min-width:0}
.range-direct-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:10px 16px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:7px;margin-bottom:12px}.range-direct-controls label{margin:0}.range-direct-controls>span{grid-column:1/-1;font-size:12px;color:var(--muted)}@media(max-width:760px){.range-direct-controls{grid-template-columns:1fr}.range-direct-controls>span{grid-column:auto}}

/* Identical image viewports; controls and captions sit below the camera image. */
.range-hud{margin-bottom:18px}.range-views{align-items:start}.range-views[data-view=both]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.range-canvas-wrap{margin:0;height:clamp(320px,56vh,760px);box-sizing:border-box}.range-camera-wrap{padding:0;border:0;background:transparent;contain:initial}
.range-camera-wrap canvas,#range-canvas,.range-views[data-view=both] #range-canvas{width:100%;height:clamp(320px,56vh,760px);max-height:none;object-fit:contain;box-sizing:border-box;margin:0}
.range-camera-wrap canvas{border:1px solid var(--line);background:#090a0d}.range-camera-wrap:has(#range-camera-framing option[value=target]:checked) canvas{width:100%;margin:0}
.range-stage:fullscreen .range-canvas-wrap,.range-stage:fullscreen #range-canvas,.range-stage:fullscreen .range-camera-wrap canvas{height:calc(100vh - 270px);max-height:none}
@media(max-width:760px){.range-views[data-view=both]{grid-template-columns:1fr}.range-stage:fullscreen .range-views[data-view=both]{grid-template-columns:1fr 1fr}}
dialog{max-width:520px;width:calc(100% - 40px);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:26px}dialog::backdrop{background:#000b}

.range-canvas-wrap{border:0}.range-canvas-wrap #range-canvas{border:1px solid var(--line)}
