/* Cup-first Flip Cup. Shared reactions stay untouched; both sides reserve a gutter. */
.flip-flick-design .flip-scoreboard{width:calc(100% - 28px);margin:0 14px 8px;min-height:84px}
.flip-flick-design .flip-pips>span{opacity:.9;transition:filter .2s,opacity .2s}
.flip-flick-design .flip-pips>span.current{filter:drop-shadow(0 0 3px #fff16b)}
.flip-flick-design .flip-pips>span.landed{filter:grayscale(1);opacity:.35;animation:flip-score-arrive .75s ease-out}
@keyframes flip-score-arrive{0%,70%{opacity:0}85%{opacity:.7;transform:rotate(180deg) scale(1.2)}100%{opacity:.35;transform:rotate(180deg)}}
.flip-flick-design .flip-split{padding:0 clamp(44px,12vw,64px);gap:8px;overflow:visible}
.flip-flick-design .flip-lane{padding:0 0 74px;min-width:0;justify-content:center;border:0}
.flip-flick-design .flip-stage{flex:none;height:clamp(240px,48dvh,440px);width:100%;overflow:visible;background:transparent;outline:0;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.flip-flick-design .flip-stage:focus-visible{outline:0;filter:drop-shadow(0 0 4px #fff16b)}
.flip-direct-cup{position:absolute;inset:0;pointer-events:none;transform-origin:center 70%}
.flip-flick-design .flip-lane-status{top:18px;text-align:center;font-size:14px;line-height:18px;color:#fff16b}
.flip-flick-design .flip-rival-lane .flip-lane-status{color:#e1edff}
.flip-flick-design .flip-settings{bottom:calc(10px + env(safe-area-inset-bottom));justify-content:center}
.flip-flick-design .flip-settings .pong-drunk{margin-right:0}
.flip-flick-design .flip-swipe-hint,.flip-flick-design .flip-lane-fill{display:none}

@media(max-width:350px){.flip-flick-design .flip-split{padding-inline:40px;gap:4px}.flip-flick-design .flip-lane-status{font-size:12px}}
@media(max-height:650px){.flip-flick-design .flip-stage{height:clamp(180px,43dvh,280px)}.flip-flick-design .flip-lane{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){.flip-flick-design .flip-pips>span.landed{animation:none}}

.flip-flick-design .flip-stage.is-landed .flip-cup-pose{animation:flip-bank-source .75s forwards}
@keyframes flip-bank-source{0%{opacity:1;translate:0 0}12%{translate:0 -5px}26%{opacity:1;translate:0 0}30%,100%{opacity:0}}

/* Flick gestures belong to the cup, not browser scrolling/selection. */
html:has(.flip-flick-design.flip-racing),body:has(.flip-flick-design.flip-racing){overflow:hidden;overscroll-behavior:none}
.flip-flick-design .flip-stage,.flip-flick-design .flip-stage *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.flip-flick-design .flip-stage:focus:not(:focus-visible){outline:none;box-shadow:none}

/* The starting ritual precedes the board; both use the same server start time. */
.flip-flick-design .flip-start-screen{position:relative;flex:1;min-height:0;margin-bottom:64px}
.flip-flick-design .flip-start-screen .flip-start-ritual{border:0;border-radius:0;background:transparent}
.flip-flick-design.flip-starting{background:#087cff}

/* Table-edge queue exploration, with the active pair lower in reach. */
.flip-flick-design .flip-stage{translate:0 clamp(24px,7dvh,66px)}
.flip-waiting-rows,.flip-waiting-row{position:absolute;inset:0;pointer-events:none}
.flip-waiting-rows{z-index:1}
.flip-waiting-cup{position:absolute;width:clamp(38px,11vw,54px);height:auto;overflow:visible;transform:translate(-50%,-80%)}
.flip-waiting-row.side-1 .flip-waiting-cup{transform:translate(50%,-80%)}
.flip-flick-design .flip-lane{z-index:2}
@media(max-height:650px){.flip-flick-design .flip-stage{translate:0 22px}.flip-waiting-cup{width:36px}}

/* Keep the cheers lift below the explainer text. */
.flip-flick-design .flip-start-screen .flip-start-table{margin-top:90px}
@media(max-height:600px){
 .flip-flick-design .flip-start-screen .flip-start-table{height:105px;margin-top:82px}
 .flip-flick-design .flip-start-screen .flip-start-copy strong{font-size:48px}
 .flip-flick-design .flip-start-screen .flip-start-copy b{font-size:22px}
}

/* Reserve the full cheers lift below the explainer, including short phones. */
.flip-flick-design .flip-start-screen .flip-start-table{margin-top:90px}
@media(max-height:600px){
 .flip-flick-design .flip-start-screen .flip-start-table{height:105px;margin-top:82px}
 .flip-flick-design .flip-start-screen .flip-start-copy strong{font-size:48px}
 .flip-flick-design .flip-start-screen .flip-start-copy b{font-size:22px}
}