/* Artwork comes from asset-manifest.json; the original input handlers remain. */
[data-bxlr-ui-art] { --bxlr-stick-size:max(56px,12cqw); --bxlr-action-size:max(60px,12cqw); }
[data-bxlr-ui-art] .mobile-controls { container-type:inline-size; }
.bxlr-skin-frame { position:absolute; inset:0; z-index:44; pointer-events:none; container-type:inline-size; }
.game-wrap:fullscreen .bxlr-skin-frame,
.game-wrap--fullscreen .bxlr-skin-frame { inset:auto; top:50%; left:50%; width:min(100vw,222.222222vh); height:min(100vh,45vw); transform:translate(-50%,-50%); }
.bxlr-art-hud { position:absolute; inset:0; pointer-events:none; }
.bxlr-art-hud[hidden], .bxlr-art-tackle-light[hidden] { display:none; }
.bxlr-art-left, .bxlr-art-right { position:absolute; top:2%; width:28%; aspect-ratio:984/259; background:center/100% 100% no-repeat; }
.bxlr-art-left { left:1.5%; background-image:var(--ui-bannerLeft); }
/* Avatar: original 209 × 213 image inside the left banner's black recess. */
.bxlr-art-avatar { position:absolute; left:2.134146%; top:8.108108%; width:21.239837%; height:auto; display:block; }
.bxlr-art-copy { position:absolute; left:28%; right:9%; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:6%; }
.bxlr-art-left strong { font:900 clamp(10px,1.5cqw,26px)/1 Arial,sans-serif; color:#b8f20f; letter-spacing:.08em; }
.bxlr-art-left span { font:700 clamp(8px,1.05cqw,18px)/1.1 Arial,sans-serif; color:#fff; }
.bxlr-art-right { right:var(--bxlr-header-right); background-image:var(--ui-bannerRight); }
/* Ring centres sit at y=143; 140px lights cover the rings without spilling out. */
.bxlr-art-tackle-light { position:absolute; top:55.212355%; width:14.227642%; height:auto; transform:translate(-50%,-50%); }
[data-bxlr-ui-art] .bxlr-live-timer { top:3%; left:48.7%; width:22%; min-width:0; aspect-ratio:782/201; padding:0; border:0; border-radius:0; background:var(--ui-bannerTimer) center/contain no-repeat; font:900 clamp(9px,1.55cqw,26px)/1 Arial,sans-serif; letter-spacing:.015em; text-shadow:0 2px 3px #000; }
[data-bxlr-ui-art] .bxlr-live-timer.is-visible { display:flex; align-items:center; justify-content:center; }
[data-bxlr-ui-art] { --bxlr-corner-size:clamp(44px,4vw,56px); --bxlr-corner-top:max(8px,env(safe-area-inset-top)); --bxlr-corner-right:max(8px,env(safe-area-inset-right)); --bxlr-header-right:max(7%,calc(var(--bxlr-corner-size) + 22px + env(safe-area-inset-right))); --bxlr-header-width:calc(100% - var(--bxlr-header-right)); }
[data-bxlr-ui-art]:fullscreen, [data-bxlr-ui-art].game-wrap--fullscreen { --bxlr-corner-top:calc((100vh - min(100vh,45vw))/2 + max(8px,env(safe-area-inset-top))); --bxlr-corner-right:calc((100vw - min(100vw,222.222222vh))/2 + max(8px,env(safe-area-inset-right))); }
[data-bxlr-ui-art] .fullscreen-toggle,
.game-wrap:fullscreen[data-bxlr-ui-art] .fullscreen-toggle,
.game-wrap--fullscreen[data-bxlr-ui-art] .fullscreen-toggle { z-index:150; top:var(--bxlr-corner-top); right:var(--bxlr-corner-right); width:var(--bxlr-corner-size); height:var(--bxlr-corner-size); min-height:0; aspect-ratio:124/125; padding:0; border:0; border-radius:0; background:var(--ui-fullscreen) center/contain no-repeat; box-shadow:none; backdrop-filter:none; font-size:0; }
[data-bxlr-ui-art] .bxlr-music-toggle { position:absolute; z-index:150; top:calc(var(--bxlr-corner-top) + var(--bxlr-corner-size) + 6px); right:var(--bxlr-corner-right); width:var(--bxlr-corner-size); height:var(--bxlr-corner-size); padding:8px; border:3px solid #b4babc; border-radius:12px; background:linear-gradient(135deg,#43494c,#101719 45%,#292f32); color:#eef4f5; box-shadow:inset 0 0 0 2px #62696b,0 2px 3px #0008; cursor:pointer; touch-action:manipulation; }
.bxlr-music-toggle svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.bxlr-music-toggle[data-muted="false"] .bxlr-speaker-muted, .bxlr-music-toggle[data-muted="true"] .bxlr-speaker-waves { display:none; }
.bxlr-music-toggle[data-muted="true"] { color:#ff6378; }
.bxlr-music-toggle:active { transform:scale(.96); }
.bxlr-music-toggle:focus-visible { outline:3px solid #b8f20f; outline-offset:3px; }
.bxlr-sound-panel { position:absolute; z-index:151; top:calc(var(--bxlr-corner-top) + var(--bxlr-corner-size) + 6px); right:calc(var(--bxlr-corner-right) + var(--bxlr-corner-size) + 8px); width:min(230px,calc(100% - var(--bxlr-corner-size) - 28px - var(--bxlr-corner-right))); padding:12px; border:2px solid #aeb9ba; border-radius:12px; background:#101a20f5; color:#fff; box-shadow:0 5px 20px #0009; font:800 12px/1.2 Arial,sans-serif; touch-action:none; }
.bxlr-sound-panel[hidden] { display:none; }
.bxlr-sound-heading, .bxlr-sound-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bxlr-sound-heading output { color:#b8f20f; }
.bxlr-sound-panel input[type="range"] { display:block; width:100%; height:36px; margin:2px 0; accent-color:#b8f20f; cursor:pointer; }
.bxlr-sound-actions button { min-height:34px; min-width:64px; border:1px solid #93a1a4; border-radius:5px; background:#263239; color:#fff; font:800 11px Arial,sans-serif; cursor:pointer; }
.bxlr-sound-panel :focus-visible { outline:2px solid #b8f20f; outline-offset:2px; }
[data-bxlr-ui-art] .fullscreen-toggle span { display:none; }
[data-bxlr-ui-art] .mobile-control-caption, [data-bxlr-ui-art] .mobile-stick-ring { display:none; }
[data-bxlr-ui-art] .mobile-stick-wrap, [data-bxlr-ui-art] .mobile-pass-wrap { bottom:max(clamp(24px,4%,36px),env(safe-area-inset-bottom)); }
[data-bxlr-ui-art] .mobile-stick-wrap { left:max(clamp(24px,3%,48px),env(safe-area-inset-left)); }
[data-bxlr-ui-art] .mobile-pass-wrap { right:max(clamp(24px,3%,48px),env(safe-area-inset-right)); }
/* Both phases use the same canvas-relative sizing, including fullscreen. */
[data-bxlr-ui-art] .mobile-stick-zone { width:var(--bxlr-stick-size); aspect-ratio:346/371; }
[data-bxlr-ui-art] .mobile-stick-zone::before { inset:0; width:100%; height:100%; border:0; border-radius:0; background:var(--ui-moveBg) center/contain no-repeat; box-shadow:none; }
[data-bxlr-ui-art] .mobile-stick-knob { left:49.2%; top:53%; width:42%; border:0; background:var(--ui-moveJoy) center/contain no-repeat; box-shadow:none; }
[data-bxlr-ui-art] .mobile-pass-button { width:var(--bxlr-action-size); aspect-ratio:360/359; border:0; border-radius:50%; background:var(--ui-passUp) center/contain no-repeat; box-shadow:none; }
[data-bxlr-ui-art] .mobile-pass-button span, [data-bxlr-ui-art] .mobile-pass-button small { display:none; }
[data-bxlr-ui-art] .mobile-pass-button:active:not(:disabled) { background:var(--ui-passPress) center/contain no-repeat; transform:scale(.96); }
[data-bxlr-ui-art] .mobile-pass-button:disabled { background:var(--ui-passDisabled) center/contain no-repeat; opacity:1; }
[data-bxlr-ui-art] .fullscreen-toggle:focus-visible, [data-bxlr-ui-art] .mobile-pass-button:focus-visible { outline:3px solid #b8f20f; outline-offset:3px; }

/* Conversion layout shares the exact 1600 × 720 canvas frame, including
   fullscreen letterboxing. Original art stays replaceable and unstretched. */
.bxlr-conversion-art { position:absolute; inset:0; pointer-events:none; color:#fff; }
.bxlr-conversion-art[hidden], .bxlr-conversion-art [hidden] { display:none !important; }
.bxlr-conversion-art .bxlr-art-left { left:10.5%; width:28%; }
.bxlr-conversion-art .bxlr-art-left strong { font-size:clamp(8px,1.5cqw,48px); }
.bxlr-conversion-art .bxlr-art-left span { font-size:clamp(7px,1.05cqw,34px); }
[data-bxlr-ui-art] .is-conversion .bxlr-live-timer { font-size:clamp(9px,1.55cqw,50px); }
.bxlr-conversion-wind { position:absolute; top:2%; right:11%; width:28%; aspect-ratio:984/259; background:var(--ui-bannerWind) center/contain no-repeat; }
.bxlr-conversion-wind img { position:absolute; width:12%; height:auto; left:9%; top:50%; transform:translateY(-50%) scaleX(var(--wind-direction,1)); }
.bxlr-conversion-wind strong { position:absolute; left:25%; right:5%; top:0; bottom:0; display:flex; align-items:center; white-space:nowrap; font:900 clamp(7px,1.4cqw,46px)/1 Arial,sans-serif; }
.bxlr-conversion-wind.is-blowing img { animation:bxlr-wind-icon 1.4s ease-in-out infinite alternate; }
@keyframes bxlr-wind-icon { to { transform:translate(calc(var(--wind-direction) * 4px),-50%) scaleX(var(--wind-direction,1)); } }
.bxlr-conversion-instructions { position:absolute; top:16.5%; left:50%; width:24%; transform:translateX(-50%); text-align:center; }
.bxlr-hold-aim-art { width:100%; height:auto; display:block; }
.bxlr-power-stage { display:block; padding:4px 6px; border:2px solid #b8f20f; border-radius:5px; background:#071316e8; color:#b8f20f; font:900 clamp(9px,1.1cqw,22px)/1.1 Arial,sans-serif; }
.bxlr-conversion-stick { position:absolute; left:3.75%; bottom:4%; width:var(--bxlr-stick-size); aspect-ratio:346/371; background:var(--ui-moveBg) center/contain no-repeat; pointer-events:auto; touch-action:none; user-select:none; cursor:ew-resize; }
.bxlr-conversion-knob { position:absolute; left:49.2%; top:53%; width:42%; transform:translate(-50%,-50%); pointer-events:none; }
.bxlr-aim-caption { position:absolute; left:36%; top:3%; width:28%; height:8%; border-radius:2px; display:flex; justify-content:center; align-items:center; background:#272a28; font:800 clamp(6px,.95cqw,32px)/1 Arial,sans-serif; }
.bxlr-conversion-stick[aria-disabled="true"] { opacity:.5; cursor:default; }
.bxlr-conversion-kick { position:absolute; right:3%; bottom:4.5%; width:var(--bxlr-action-size); aspect-ratio:360/359; background:var(--ui-kick) center/contain no-repeat; border:0; padding:0; border-radius:50%; box-shadow:none; pointer-events:auto; touch-action:manipulation; cursor:pointer; }
.bxlr-conversion-kick:active:not(:disabled) { transform:scale(.96); filter:brightness(1.16); }
.bxlr-conversion-kick:disabled { opacity:.5; cursor:default; }
.bxlr-kick-stage { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); padding:5px 8px; border:1px solid #b8f20f; border-radius:5px; background:#071316ed; color:#fff; white-space:nowrap; font:900 clamp(9px,1.05cqw,20px)/1 Arial,sans-serif; pointer-events:none; }
.bxlr-conversion-kick:focus-visible, .bxlr-conversion-stick:focus-visible { outline:3px solid #b8f20f; outline-offset:4px; }
.bxlr-conversion-meter { position:absolute; left:56%; bottom:7%; width:25%; aspect-ratio:602/184; background:var(--ui-powerCombo) center/contain no-repeat; }
.bxlr-conversion-angle { position:absolute; left:28%; top:2%; width:42%; height:25%; display:flex; gap:.3em; align-items:center; justify-content:center; font:900 clamp(6px,.78cqw,26px)/1 Arial,sans-serif; white-space:nowrap; }
.bxlr-conversion-angle strong { color:#b8f20f; }
.bxlr-power-track { position:absolute; left:6.976744%; top:61.956522%; width:84.053156%; height:12.5%; }
.bxlr-power-zone { position:absolute; top:0; height:100%; opacity:.65; }
.is-powering .bxlr-power-zone { opacity:1; }
.bxlr-power-marker { position:absolute; top:68.2%; height:23%; width:auto; transform:translate(-50%,-50%); }
.game-wrap[data-bxlr-motion="reduced"] .bxlr-conversion-wind.is-blowing img { animation:none; }
@media (prefers-reduced-motion:reduce) { .game-wrap:not([data-bxlr-motion="full"]) .bxlr-conversion-wind.is-blowing img { animation:none; } }
/* Reserve the controls' real minimum width, then share the remaining header
   space. A fixed percentage alone lets the tackle banner cover fullscreen. */
@container (max-width:900px) {
  .bxlr-art-left, .bxlr-art-right, .bxlr-conversion-art .bxlr-art-left, .bxlr-conversion-wind { width:calc(var(--bxlr-header-width)*.33); }
  .bxlr-conversion-art .bxlr-art-left { left:1.5%; }
  .bxlr-conversion-wind { right:var(--bxlr-header-right); }
  [data-bxlr-ui-art] .bxlr-live-timer { left:calc(var(--bxlr-header-width)*.505); width:calc(var(--bxlr-header-width)*.26); }
}
@media (max-width:600px) {
  .bxlr-conversion-instructions { width:34%; }
  .bxlr-conversion-wind strong { font-size:6px; }
  .bxlr-conversion-meter { left:51%; width:26%; }
  .bxlr-conversion-angle { font-size:clamp(5px,.9cqw,5.5px); }
}