#dropView { --drop-ember:#e27e4c; --drop-gold:#ebbc77; --drop-muted:#a5a8af; color:#f2f0ea; padding:12px 0 24px; }
#dropView.hidden { display:none; }
.drop-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; gap:16px; }
.drop-heading h2 { font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:800; font-style:italic; margin:0; line-height:1; overflow:visible; padding-inline-end:.18em; }
.drop-heading>div { text-align:right; display:grid; gap:3px; }
.drop-heading span { font-size:11px; letter-spacing:.1em; color:var(--drop-muted); }
.drop-heading strong { font-size:24px; font-variant-numeric:tabular-nums; }
.drop-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; align-items:start; }
.drop-stage { min-width:0; background:#121318; border:1px solid #39363a; position:relative; }
.drop-token.is-slow>circle { stroke:#fff0cf; stroke-width:3; filter:drop-shadow(0 0 7px #e27e4c); }
#dropBoard { width:100%; height:auto; display:block; overflow:visible; }
.drop-peg { fill:#686363; }
.drop-bin { stroke:#a2917d; fill:#302a25; }
.drop-bin text { fill:#f2f0ea; stroke:none; font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.drop-bin.tier-0,.drop-bin.tier-1 { fill:#5a3225; stroke:#e27e4c; }
.drop-bin.tier-2,.drop-bin.tier-3 { fill:#403128; stroke:#ba8d65; }
.drop-bin.is-landed { fill:#e8ba7c; stroke:#fff0cf; }
.drop-bin.is-landed text { fill:#181a1f; }
.drop-landing { min-height:56px; padding:14px 12px; border-top:1px solid #39363a; text-align:center; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.drop-controls { min-width:0; }
#dropForm>label { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:700; letter-spacing:.08em; }
#dropForm>label span { color:var(--drop-muted); }
#dropStake { width:100%; box-sizing:border-box; height:52px; border:1px solid #565257; border-radius:2px; padding:8px 12px; background:#181a1f; color:#f2f0ea; font:600 24px 'Barlow',sans-serif; font-variant-numeric:tabular-nums; }
#dropView button,#dropView select { font-family:inherit; border:1px solid #514b49; border-radius:2px; color:#f2f0ea; background:#202127; cursor:pointer; min-height:40px; padding:7px 10px; }
.drop-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0 14px; }
.drop-quantity { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:12px; }
.drop-quantity label { font-weight:700; letter-spacing:.08em; }
.drop-quantity span { margin-left:auto; color:#bdb8b3; font-variant-numeric:tabular-nums; }
.drop-queue { font-size:12px; color:#bdb8b3; margin:8px 0; font-variant-numeric:tabular-nums; }
.drop-queue:empty { display:none; }
#dropView button:hover:not(:disabled) { border-color:var(--drop-gold); background:#302b27; }
#dropView .drop-primary { width:100%; min-height:58px; background:var(--drop-ember); color:#171317; border-color:var(--drop-ember); font:800 25px 'Barlow Condensed',sans-serif; letter-spacing:.09em; }
#dropView .drop-primary:hover:not(:disabled) { background:#f29766; }
#dropView button:disabled { opacity:.45; cursor:default; }
#dropView :is(button,input,select,summary):focus-visible { outline:2px solid var(--drop-gold); outline-offset:3px; }
.drop-notice { color:#f0ba90; font-size:14px; margin:10px 0; min-height:0; }
.drop-notice:empty { display:none; }
#dropRetry { width:100%; margin-top:8px; }
.drop-options { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid #39363a; font-size:13px; }
.drop-options label { display:flex; align-items:center; gap:6px; }
#dropView .drop-options select { max-width:100px; padding:4px; min-height:34px; }
#dropView input[type=checkbox] { accent-color:var(--drop-ember); }
.drop-recent h3 { font-size:12px; letter-spacing:.08em; margin:20px 0 10px; }
#dropRecent { list-style:none; padding:0; margin:0; }
#dropRecent li { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #2e2e33; padding:7px 0; font-size:14px; font-variant-numeric:tabular-nums; }
.drop-profit { color:#ebbc77; }
.drop-loss { color:#b9b0aa; }
.drop-test { border:1px dashed #80654f; margin:22px 0 0; padding:12px; font-size:13px; }
.drop-test legend { color:#ebbc77; font-size:10px; letter-spacing:.09em; padding:0 4px; }
.drop-test label { display:block; margin:8px 0; }
.drop-test select { max-width:100%; }
.drop-test>div { display:grid; gap:8px; margin-top:12px; }
@media(max-width:1000px) { .drop-layout { grid-template-columns:minmax(0,1fr) 230px; gap:16px; } }
@media(max-width:720px) { .drop-layout { grid-template-columns:1fr; gap:18px; } .drop-heading { margin-bottom:14px; } .drop-heading h2 { font-size:36px; } .drop-heading strong { font-size:20px; } .drop-landing { min-height:60px; font-size:14px; display:flex; justify-content:center; align-items:center; padding:10px; } .drop-controls { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } #dropForm,.drop-options,.drop-notice,#dropQueue,#dropRetry,#dropReload,.drop-test { grid-column:1/-1; } .drop-recent { grid-column:1/-1; } .drop-recent h3 { margin-top:20px; } #dropRecent li { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { #dropView * { scroll-behavior:auto; } }