[hidden]{display:none!important}
body.cube #menuButtons[data-visual-setup=true],body #menuButtons[data-visual-setup=true]{position:fixed;inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));width:auto;max-width:none;max-height:none;margin:0;padding:0;border:1px solid #4e626c;border-radius:24px;background:#101c23;color:#f2f6f5;z-index:50;overflow:auto;box-sizing:border-box}
body #menuButtons[data-visual-setup=true]>:not(.visual-setup){display:none!important}
.visual-setup{min-height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:12px 4vw;padding:20px 4vw;box-sizing:border-box;background:radial-gradient(ellipse at 25% 48%,#213d43 0,transparent 60%)}
.scan-header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border:0!important;padding:0!important}.scan-header b{font-size:22px;letter-spacing:.08em}.scan-header button{min-height:48px;background:#263b44;color:#eef7f6;border-color:#647b80}
.scan-art{position:relative;min-width:0;min-height:0;align-self:stretch;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:#0d2027}.scan-outline{width:100%;height:100%;position:absolute;inset:0;fill:none;stroke:#678c91;stroke-width:7;opacity:.5}.scan-outline rect{stroke-dasharray:20 20;stroke-width:3}.scan-outline g{fill:#8bb7ba;stroke:none}.scan-canvas{position:absolute;inset:0;display:grid;place-items:center}.scan-canvas canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain;mix-blend-mode:screen}.scan-line{position:absolute;inset:15% 8% auto;height:3px;background:#a6e2cf;box-shadow:0 0 20px #a6e2cf66;animation:binx-scan 3s ease-in-out infinite;pointer-events:none}.scan-message{align-self:center;min-width:0}.scan-message h2{font-size:clamp(32px,5.8vw,100px)!important;line-height:1.06;margin:0 0 24px!important;letter-spacing:-.045em;color:#f2f6f5!important;text-wrap:balance}.scan-caption{font-size:clamp(14px,1.35vw,23px)!important;color:#bdd0d1!important}.scan-progress{display:block;width:min(100%,400px);height:10px;accent-color:#9bd6bd;margin:20px 0}.scan-message button{display:block;width:100%;min-height:64px;font-size:clamp(22px,3vw,38px);background:#a9dac7;color:#10271f;border:0;border-radius:14px}.scan-settings{grid-column:1/-1;max-width:100%;font-size:14px}.scan-settings summary{width:max-content;min-height:40px;display:flex;align-items:center;cursor:pointer;color:#c5d5d4}.scan-settings[open]{background:#20323c;border-radius:12px;padding:12px}.scan-settings p{font-size:14px!important;color:#c5d5d4!important}.scan-settings #menuCameraSetup{display:block!important;margin:0!important}.scan-settings .setupControls{display:flex!important}.scan-settings .cameraDisclosure,.scan-settings #menuCameraStatus,.scan-settings .setupActions{display:none!important}.scan-settings .scan-keyboard{font-size:15px;min-height:44px;background:#263b44;color:#eef7f6}.scan-pair{position:absolute;inset:0;display:grid;place-items:center}.scan-pair #pairBox{display:contents!important}.scan-pair #pairQR{width:min(80%,65dvh)!important;max-height:100%;height:auto!important;margin:0!important;border:16px solid white}.scan-pair a,.scan-pair button,.scan-pair p{display:none!important}.visual-setup[data-qr=true] .scan-outline,.visual-setup[data-qr=true] .scan-canvas,.visual-setup[data-qr=true] .scan-line{display:none}.visual-setup[data-ready=true] .scan-line{animation:none;inset:auto 8% 10%;background:#b4f1c8}.visual-setup[data-ready=true] .scan-art{outline:2px solid #a9dac7}
body #cameraHelp{display:none}body:not(.cube) #arena,body.cube[data-cube-view=game] #arena{height:calc(100dvh - var(--binx-header-height,66px));min-height:0;max-height:none}body.binx-playing #instructions,body.binx-playing #cameraHelp{display:none}
@keyframes binx-scan{50%{transform:translateY(48dvh)}}
@media(max-width:600px) and (orientation:portrait){.visual-setup{grid-template-columns:1fr;grid-template-rows:auto minmax(200px,42dvh) auto auto;padding:16px;gap:16px}.scan-message{text-align:center}.scan-message h2{font-size:clamp(32px,9vw,58px)!important;margin-bottom:12px!important}.scan-progress{margin:12px auto}.scan-caption{margin:8px 0!important}.scan-message button{min-height:56px}.scan-art{min-height:200px}.scan-settings{grid-column:1}.scan-pair #pairQR{width:min(80%,35dvh)!important}}
@media(orientation:landscape) and (max-height:600px){.visual-setup{padding:10px 3vw;gap:6px 3vw}.scan-header b{font-size:18px}.scan-header button{min-height:40px;padding:6px 12px}.scan-message h2{font-size:clamp(28px,5vw,55px)!important;margin-bottom:12px!important}.scan-caption{margin:8px 0!important}.scan-progress{margin:10px 0}.scan-message button{min-height:48px}.scan-settings summary{min-height:30px}body #arena{min-height:0}}
@media(prefers-reduced-motion:reduce){.scan-line{animation:none;inset:50% 8% auto}.scan-progress:indeterminate{opacity:.75}}

.scan-gesture svg{width:clamp(40px,7vw,90px);height:auto;color:#a9dac7;margin-bottom:12px}.scan-gesture:empty{display:none}

.scan-settings[open] .setupActions{display:flex!important}.scan-pair-tools{display:flex;gap:12px;flex-wrap:wrap}.scan-pair-tools a{padding:12px}.visual-setup[data-live=true] .scan-outline{opacity:.15}.camera-advanced summary{font-size:14px;cursor:pointer;min-height:40px;display:flex;align-items:center}
.visual-setup[data-warning=true] .scan-art{outline:2px solid #efbd86}.visual-setup[data-warning=true] .scan-line{background:#efbd86}.visual-setup[data-warning=true] .scan-outline{stroke:#efbd86}

/* The cursor must remain above the fullscreen scan, including native fullscreen. */
#cursor{z-index:70;width:40px;height:40px;border:3px solid #fff;box-shadow:0 0 0 3px #09252e,0 3px 12px #0008;background:conic-gradient(#9ce7cb var(--dwell,0%),#164756b8 0)}
.visual-setup button.gesture-hover{outline:4px solid #f4c86a;outline-offset:3px;box-shadow:0 0 0 7px #10252b}
.scan-pointer-demo{display:flex;align-items:center;gap:12px;margin:10px 0 14px;font-size:clamp(13px,1.3vw,20px);color:#d6e9e2}
.scan-demo-path{position:relative;display:block;width:100px;height:42px;flex:none;border-bottom:2px dotted #678c91}
.scan-demo-path i{position:absolute;left:0;top:0;color:#b1ead4;animation:binx-point 3s ease-in-out infinite}
.scan-demo-path svg{width:32px;height:32px}
.scan-demo-path b{position:absolute;right:0;top:7px;width:27px;height:27px;border:3px solid #e3f2ea;border-radius:50%;animation:binx-hold 3s ease-in-out infinite}
@keyframes binx-point{0%,15%,100%{transform:translateX(0)}40%,85%{transform:translateX(62px)}}
@keyframes binx-hold{0%,40%,100%{background:transparent}65%,85%{background:#a9dac7}}
@media(max-width:600px) and (orientation:portrait){.scan-pointer-demo{justify-content:center}.visual-setup[data-ready=true] .scan-art{min-height:160px}.visual-setup[data-ready=true]{grid-template-rows:auto minmax(160px,32dvh) auto auto}}
@media(prefers-reduced-motion:reduce){.scan-demo-path i,.scan-demo-path b{animation:none}.scan-demo-path i{transform:translateX(50px)}}

/* Keep text on an opaque surface even inside the homepage theme. */
html body #menuButtons[data-visual-setup=true]{background:#101c23;color:#f2f6f5;color-scheme:dark}
html body #menuButtons[data-visual-setup=true] .scan-message button:is(:hover,:focus-visible,.gesture-hover){background:#c8efdf;color:#10271f}
