/* Drop Arcade 1.0.0: scoped to the two falling games. */
:is(.reaction-drop-page,.bonding-drop-page) {--drop-accent:#75efd8;--drop-text:#edf7fb;--drop-muted:#a5bac9}
:is(.reaction-drop-page,.bonding-drop-page) button{cursor:pointer;touch-action:manipulation}
:is(.reaction-drop-page,.bonding-drop-page) button:focus-visible,:is(.reaction-drop-page,.bonding-drop-page) select:focus-visible{outline:3px solid #ffde94;outline-offset:3px}
:is(.reaction-drop-page,.bonding-drop-page) input:focus-visible+span{outline:3px solid #ffde94;outline-offset:2px}
.drop-settings{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.drop-setting{display:inline-flex;align-items:center;gap:9px;color:#c5d5df;font-size:.8rem;font-weight:650;margin:5px 10px 5px 0}
.drop-setting select{width:auto!important;min-height:40px!important;padding:6px 29px 6px 10px!important;background:#0b2033!important;border:1px solid #52718b!important;border-radius:6px!important;color:#f2f7fb!important;font:inherit!important}
.drop-question{position:absolute!important;top:62px;left:14px;right:14px;transform:none!important;width:auto!important;min-height:72px;padding:11px 18px!important;border:1px solid #66879b65!important;border-left:3px solid var(--drop-accent)!important;border-radius:4px!important;background:#071a29f5!important;color:var(--drop-text)!important;text-align:center;z-index:7!important;box-shadow:0 8px 20px #0003!important}
.drop-question small{display:block;color:var(--drop-accent)!important;font-size:.62rem!important;letter-spacing:.10em;margin-bottom:5px}
.drop-question strong{display:block;color:#f4faff!important;font:700 clamp(1rem,1.6vw,1.35rem)/1.3 system-ui!important;overflow-wrap:anywhere}
.drop-status{position:absolute;left:8px;right:8px;top:141px;min-height:21px;color:#a7c4d4;font:700 .7rem/1.4 system-ui;text-align:center;letter-spacing:.035em;z-index:6;pointer-events:none}
.drop-status.is-warning{color:#ffe0a1;background:#342818;border-block:1px solid #caac6844}
.drop-answers{position:absolute!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:8;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;padding:0!important;background:none!important;min-height:104px}
.drop-answer,.bonding-drop-lane{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;height:auto!important;min-height:96px!important;padding:12px!important;border:1px solid #55738c!important;border-radius:5px!important;background:#0b2032f5!important;box-shadow:0 8px 16px #0003!important;color:#f1f7fa!important;text-align:left!important;transform:none!important;transition:background .15s,border-color .15s!important}
.drop-answer strong,.bonding-drop-lane strong{display:block!important;height:auto!important;overflow:visible!important;font:700 clamp(.87rem,1.25vw,1.05rem)/1.35 system-ui!important;overflow-wrap:anywhere;color:inherit!important}
.drop-lane-number,.bonding-drop-lane>small{flex:0 0 26px;width:26px;height:26px;border:1px solid #7594aa;color:#c5dce9!important;display:grid;place-items:center;font:800 .8rem system-ui!important;margin:0!important;border-radius:50%}
.drop-answer.is-targeted,.bonding-drop-lane.is-targeted{border-color:var(--drop-accent)!important;background:#113a43f5!important;box-shadow:inset 0 -3px var(--drop-accent),0 8px 16px #0003!important}
.drop-answer.is-correct,.bonding-drop-lane.is-correct{background:#13523f!important;border-color:#8ff3c3!important}
.drop-answer.is-wrong,.bonding-drop-lane.is-wrong{background:#62263a!important;border-color:#ff8baa!important}
.drop-answer:disabled,.bonding-drop-lane:disabled{opacity:1}
.drop-answer.is-correct .drop-lane-number:after,.bonding-drop-lane.is-correct>small:after{content:'✓';position:absolute;right:6px;top:5px;color:#d2ffe9;font-size:.8rem}
.drop-answer.is-wrong .drop-lane-number:after,.bonding-drop-lane.is-wrong>small:after{content:'×';position:absolute;right:6px;top:5px;color:#ffd1df;font-size:1rem}
/* The graphics canvas occupies its own space, away from answer text. */
.reaction-drop-game-wrap [data-rd-canvas]{position:absolute!important;left:0!important;top:163px!important;width:100%!important;height:calc(100% - 287px)!important;bottom:auto!important}
.reaction-drop-game-wrap{aspect-ratio:auto!important;min-height:630px!important;height:700px;max-height:none!important}
.reaction-drop-hud{z-index:8!important;top:8px!important}
.reaction-drop-overlay,.bonding-drop-overlay{z-index:30!important;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.reaction-drop-panel,.bonding-drop-panel{max-height:100%!important;border-radius:9px!important;touch-action:pan-y;overscroll-behavior:contain}
.reaction-drop-game-wrap:has(.reaction-drop-overlay.is-visible) :is(.drop-question,.drop-status,.drop-answers){visibility:hidden}
.reaction-drop-mark,.reaction-drop-overline:has(+h2){display:none}
.reaction-drop-start-panel h2{font-size:1.8rem!important}
.reaction-drop-mode-grid span{min-height:78px}
.reaction-drop-mobile-controls{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;padding:9px 12px max(10px,env(safe-area-inset-bottom))!important}
.reaction-drop-control-row-primary,.reaction-drop-control-row-secondary{max-width:none!important}
.reaction-drop-mobile-controls button{min-height:48px!important;border-radius:6px!important}
.reaction-drop-control-row-secondary small{display:none!important}
.reaction-drop-build{grid-column:1/-1;font-size:.58rem!important;color:#a4c2d1!important}
.reaction-drop-page.is-running .reaction-drop-frame,.reaction-drop-frame:fullscreen{display:flex!important;flex-direction:column;max-width:1320px;margin:auto;height:calc(100dvh - 20px)!important;min-height:590px}
.reaction-drop-page.is-running .reaction-drop-game-wrap,.reaction-drop-frame:fullscreen .reaction-drop-game-wrap{flex:1;min-height:0!important;height:auto!important}
.reaction-drop-stagebar{flex:none}
.reaction-drop-page.is-running .reaction-drop-stagebar>div{padding:7px 10px}
.reaction-drop-frame:fullscreen{max-width:none;height:100dvh!important}
/* Bonding keeps the same chemistry controller, with a shared flight/scene. */
.bonding-drop-stage{height:640px!important;min-height:480px!important;overflow:hidden!important}
.drop-bond-canvas{position:absolute;top:139px;left:0;width:100%;height:calc(100% - 263px);pointer-events:none}
.bonding-drop-faller{top:38px!important;min-height:72px!important}
.bonding-drop-stage .drop-status{top:117px}
.bonding-drop-chain{top:5px!important;left:12px!important;right:12px!important;max-width:none!important;transform:none!important;border:0!important;background:transparent!important;border-radius:0!important;padding:2px!important;line-height:1.4}
.bonding-drop-chain strong{font-size:.75rem!important}
.bonding-drop-feedback{top:50%!important;max-width:90%;z-index:12;font-size:.9rem;pointer-events:none}
.bonding-drop-topbar{grid-template-columns:repeat(4,minmax(0,1fr)) auto!important;align-items:center}
.bonding-drop-top-actions{position:static!important;display:flex;gap:6px;padding:6px!important}
.bonding-drop-top-actions button{min-width:40px;width:40px;height:40px!important;border-radius:6px}
.bonding-drop-stat{padding:10px!important}.bonding-drop-stat strong{font-size:1.05rem!important}
.bonding-drop-controls{padding:8px 12px max(8px,env(safe-area-inset-bottom))!important;gap:8px!important}
.bonding-drop-controls button{min-height:48px!important;border-radius:5px!important;display:flex;align-items:center;justify-content:center;gap:9px}
.bonding-drop-choice-grid{grid-template-columns:1fr 1fr!important}
.bonding-drop-stage:has(.bonding-drop-overlay.is-visible) :is(.drop-question,.drop-answers,.drop-status){visibility:hidden}
.bonding-drop-page:has(.bonding-drop-app.is-playing){padding:8px 0 20px}
.bonding-drop-page:has(.bonding-drop-app.is-playing) .bonding-drop-intro{display:none}
.bonding-drop-app.is-playing,.bonding-drop-app:fullscreen{display:flex;flex-direction:column;min-height:570px;height:calc(100dvh - 22px);max-width:1320px;margin:auto}
.bonding-drop-app.is-playing .bonding-drop-stage,.bonding-drop-app:fullscreen .bonding-drop-stage{flex:1;height:auto!important;min-height:0!important}
.bonding-drop-app:fullscreen{max-width:none;height:100dvh}
.bonding-drop-version{padding-bottom:6px!important;color:#a4c2d1!important}
:is(.reaction-drop-frame,.bonding-drop-app)[data-effects='low'] *{box-shadow:none!important;text-shadow:none!important}
@media(max-width:640px){
 .drop-question{left:8px;right:8px;top:55px;padding:9px 12px!important;min-height:76px}
 .drop-question strong{font-size:1rem!important;line-height:1.3!important}
 .drop-status{top:140px;font-size:.64rem}
 .drop-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;left:7px!important;right:7px!important;bottom:7px!important;min-height:146px}
 .drop-answer,.bonding-drop-lane{min-height:70px!important;padding:8px!important;gap:7px!important}
 .drop-answer strong,.bonding-drop-lane strong{font-size:.86rem!important;line-height:1.25!important}
 .drop-lane-number,.bonding-drop-lane>small{flex-basis:21px;width:21px;height:21px;font-size:.69rem!important}
 .reaction-drop-game-wrap [data-rd-canvas]{top:164px!important;height:calc(100% - 325px)!important}
 .reaction-drop-mobile-controls{gap:7px;grid-template-columns:1.7fr 1fr;padding:6px!important}
 .reaction-drop-mobile-controls button{min-height:46px!important}
 .reaction-drop-mobile-controls small{font-size:.57rem!important}
 .reaction-drop-page.is-running .reaction-drop-frame{height:calc(100dvh - 12px)!important;min-height:570px}
 .reaction-drop-start-panel{padding:15px 12px!important}
 .reaction-drop-start-panel h2{font-size:1.4rem!important;margin-bottom:12px}
 .reaction-drop-game-wrap{height:620px;min-height:610px!important}
 .reaction-drop-options{gap:6px!important}.drop-setting{font-size:.72rem;gap:6px;margin-right:5px}
 .reaction-drop-competition-setup{padding:10px!important}
 .bonding-drop-topbar{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .bonding-drop-top-actions{grid-column:1/-1;justify-content:flex-end;border-top:1px solid #38546c55;padding:4px 8px!important}
 .bonding-drop-top-actions button{height:34px!important;min-height:34px!important}
 .bonding-drop-stat{padding:6px 8px!important}.bonding-drop-stat strong{font-size:.94rem!important}
 .bonding-drop-faller{top:37px!important}
 .bonding-drop-stage .drop-status{top:119px}
 .drop-bond-canvas{top:143px;height:calc(100% - 304px)}
 .bonding-drop-app.is-playing{height:calc(100dvh - 14px);min-height:610px}
 .bonding-drop-stage{height:630px!important}
 .bonding-drop-panel{padding:16px!important}
 .bonding-drop-chain strong{font-size:.68rem!important}
 .bonding-drop-chain span{font-size:.7rem!important}
}
@media(max-width:350px){.drop-answer strong,.bonding-drop-lane strong{font-size:.80rem!important}.drop-question strong{font-size:.95rem!important}.drop-setting{gap:4px}.drop-setting select{font-size:.72rem!important;padding-right:20px!important}}
@media(prefers-reduced-motion:reduce){:is(.reaction-drop-page,.bonding-drop-page) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep site chrome and the report button out of a live lane. They return in setup. */
body:has(.reaction-drop-page.is-running) .site-header,
body:has(.bonding-drop-app.is-playing) .site-header{display:none}
body:has(.reaction-drop-page.is-running) .content-report-trigger,
body:has(.bonding-drop-app.is-playing) .content-report-trigger{display:none}
body:has(.reaction-drop-pause-panel):has([data-rd-pause-overlay].is-visible) .content-report-trigger,
body:has([data-bd-pause-overlay].is-visible) .content-report-trigger{display:block}
.bonding-drop-page:has(.bonding-drop-app.is-playing) .bonding-drop-shell{width:min(calc(100% - 12px),1320px)}

/* Content-sized regions keep long equations and explanations clear. */
.reaction-drop-game-wrap .drop-status,.bonding-drop-stage .drop-status{top:var(--drop-note-top,141px)!important}
.reaction-drop-game-wrap [data-rd-canvas],.bonding-drop-stage .drop-bond-canvas{top:var(--drop-world-top,163px)!important;height:calc(100% - var(--drop-world-top,163px) - var(--drop-world-bottom,124px))!important}
.reaction-drop-game-wrap [data-rd-canvas],.bonding-drop-stage .drop-bond-canvas{margin:0!important;border:0!important;border-radius:0!important;max-width:none!important}

/* Prevent the document from anchoring to a removed answer between rounds. */
html:has(.reaction-drop-page.is-running),html:has(.bonding-drop-app.is-playing){scroll-behavior:auto!important}
body:has(.reaction-drop-page.is-running),body:has(.bonding-drop-app.is-playing){overflow-anchor:none}