/* ========================================================= ChoiceSpin — wheel section responsive (880px–1919.98px) ✅ Keep desktop-like positioning in this range ✅ Right panel shrinks from LEFT side (stays right-aligned) ✅ Wheel shrinks smoothly too ✅ No height shrinking here (only width + horizontal tightening) ========================================================= */ @media (min-width: 880px) and (max-width: 1919.98px){ /* JS adds this class + vars on only in the 880..1919 range */ html.sc-wheelresp-850{ /* Tabs horizontal padding tightening (JS-driven) */ --etab-pad-x: var(--sc-wheelresp-etab-pad-x, 12px); /* ✅ Override wheel size var used by your wheel responsive physics CSS */ --sc-wheel-size: var(--sc-wheelresp-wheel-size, 560px); } /* ========================================================= HERO GRID LOCK (desktop-style positioning preserved) spacer | wheel | content ========================================================= */ html.sc-wheelresp-850 .hero > .container.hero__grid{ grid-template-columns: var(--sc-wheelresp-entries-w, 320px) minmax(0, 1fr) var(--sc-wheelresp-entries-w, 320px) !important; grid-template-areas: "spacer wheel content" !important; column-gap: var(--sc-wheelresp-grid-gap, 18px) !important; align-items: stretch !important; } /* Keep wheel centered in the middle slot */ html.sc-wheelresp-850 .hero__wheel{ grid-area: wheel !important; justify-self: center !important; align-self: center !important; min-width: 0; gap: var(--sc-wheelresp-wheel-gap, 10px); } /* ✅ Shrink the GRID ITEM itself and keep it anchored RIGHT */ html.sc-wheelresp-850 .hero__content{ grid-area: content !important; width: 100% !important; max-width: var(--sc-wheelresp-entries-w, 320px) !important; justify-self: end !important; align-self: stretch !important; margin-left: auto !important; display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; } /* Card fills the (now smaller) hero__content width and stays tall */ html.sc-wheelresp-850 .hero__content .inputs-card{ width: 100% !important; max-width: none !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } /* Keep inner flex chain from forcing height growth */ html.sc-wheelresp-850 .etabs__panels, html.sc-wheelresp-850 #panel-entries, html.sc-wheelresp-850 #panel-results{ min-height: 0 !important; } html.sc-wheelresp-850 #panel-entries #optionsInput{ min-height: 0 !important; resize: none !important; overflow: auto !important; } /* ========================================================= Wheel size (JS controls actual px size through vars) ========================================================= */ html.sc-wheelresp-850 .hero__wheel .wheel-wrapper{ width: var(--sc-wheelresp-wheel-size, 560px) !important; height: var(--sc-wheelresp-wheel-size, 560px) !important; max-width: min(var(--sc-wheelresp-wheel-size, 560px), 96vw) !important; max-height: min(var(--sc-wheelresp-wheel-size, 560px), 96vw) !important; } /* Keep related controls visually aligned to wheel width if shown */ html.sc-wheelresp-850 .hero__wheel #spinButton, html.sc-wheelresp-850 .hero__wheel #resultBox{ max-width: min(var(--sc-wheelresp-wheel-size, 560px), 96vw) !important; } /* ========================================================= Tabs/tools/panels horizontal tightening from JS vars (NO vertical/height shrinking) ========================================================= */ html.sc-wheelresp-850 .etabs-tools{ padding-left: var(--sc-wheelresp-tools-pad-x, 12px); padding-right: var(--sc-wheelresp-tools-pad-x, 12px); } html.sc-wheelresp-850 .etabs__panels{ padding-left: var(--sc-wheelresp-panels-pad-x, 12px); padding-right: var(--sc-wheelresp-panels-pad-x, 12px); } html.sc-wheelresp-850 .etool-btn{ padding-left: var(--sc-wheelresp-etool-btn-pad-x, 9px); padding-right: var(--sc-wheelresp-etool-btn-pad-x, 9px); } } /* ========================================================= ChoiceSpin — Quick Share wrap fix (<=1322px) ✅ Keeps Quick Share inside entries card ✅ Moves Quick Share under "Spin with friends" ✅ Only while wheel-section-responsive is active (880..1919) ========================================================= */ @media (max-width: 1322px){ /* allow the actions row to wrap when the entries panel gets narrow */ html.sc-wheelresp-850 #panel-entries .inputs-card__actions{ flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 8px !important; } /* force Quick Share onto the next line */ html.sc-wheelresp-850 #panel-entries .sc-quickshare-btn{ flex: 0 0 100% !important; /* take full row => drops below */ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; /* remove old inline spacing */ margin-top: 0 !important; justify-content: flex-start !important; /* align under button left edge */ white-space: normal !important; /* prevent clipping */ overflow: hidden !important; } /* keep text/icon aligned nicely if line gets tight */ html.sc-wheelresp-850 #panel-entries .sc-quickshare-btn__txt{ white-space: nowrap; } } /* ========================================================= FIX: Preserve Entries/Results equal-height behavior in responsive shrink range (850..1919) - Keeps the height chain intact (grid -> content -> card -> panels) - Prevents tab switch height jumping after shrink vars apply ========================================================= */ @media (min-width: 880px) and (max-width: 1919.98px){ /* Keep the right column stretched vertically like desktop */ html.sc-wheelresp-850 .hero__content{ align-self: stretch !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } /* Keep the card locked to the column height (not content height) */ html.sc-wheelresp-850 .hero__content .inputs-card{ height: 100% !important; min-height: 0 !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; } /* Keep the inner chain shrinkable (prevents content from forcing growth) */ html.sc-wheelresp-850 .hero__content .etabs__panels, html.sc-wheelresp-850 .hero__content .etab-panel, html.sc-wheelresp-850 .hero__content #panel-entries, html.sc-wheelresp-850 .hero__content #panel-results{ min-height: 0 !important; } /* Extra safety: when Results is open, never fall back to auto height here */ html.sc-wheelresp-850 .hero__content .inputs-card.is-results{ height: var(--etabs-lock-card-h, 100%) !important; min-height: var(--etabs-lock-card-h, 0px) !important; } } /* ========================================================= FIX: Entries tab full-height on initial spawn (880..1919) ✅ Prevent early scrollbar on first render ✅ Make textarea wrapper fill available space ✅ Works with optimg overlay wrapper ✅ Responsive/layout-specific => belongs in wheel responsive file ========================================================= */ @media (min-width: 880px) and (max-width: 1919.98px){ /* panels area must truly become the flexible middle zone */ html.sc-wheelresp-850 .hero__content .etabs__panels{ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* active entries panel fills the available panels height */ html.sc-wheelresp-850 .hero__content #panel-entries{ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* IMPORTANT: your real textarea container is the wrapper */ html.sc-wheelresp-850 .hero__content #panel-entries .optimg-ta-wrap{ display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } /* textarea fills wrapper; scrollbar only when content overflows */ html.sc-wheelresp-850 .hero__content #panel-entries #optionsInput{ flex: 1 1 auto !important; width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; resize: none !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: auto !important; } } /* ========================================================= ChoiceSpin — STACKED layout below 880px ✅ Wheel full size again ✅ Wheel at top (under header) ✅ Entries panel below wheel ✅ Keeps Quick Share inside card ✅ Only for the bridge/tablet zone that was still side-by-side (768..879.98) ========================================================= */ @media (min-width: 100px) and (max-width: 879.98px){ .hero, .hero > .container.hero__grid{ overflow-x: clip !important; } /* Bring hero close to header (remove the big default top gap) */ main{ padding-top: 0 !important; } .hero{ padding-top: 10px !important; padding-bottom: 18px !important; /* ✅ FULL-WIDTH side gap (control this) */ --sc-stack-side-pad: 14px; /* <- change to 10px / 12px / 16px / 20px */ --sc-stack-wheel-cut: 140px; /* wheel sizing */ /* ✅ Entries card height grows as viewport gets narrower (<880px) */ --sc-stack-card-min-h-base: 430px; /* height near 880px */ --sc-stack-card-min-h-grow-max: 220px; /* max extra height added on small screens */ /* grows from 0 -> max as width drops below 880px */ --sc-stack-card-min-h-grow: clamp( 0px, calc((880px - 100vw) * 0.42), var(--sc-stack-card-min-h-grow-max) ); /* final card height target */ --sc-stack-card-min-h: calc( var(--sc-stack-card-min-h-base) + var(--sc-stack-card-min-h-grow) ); /* textarea minimum also grows a bit */ --sc-stack-ta-min-h-base: 220px; --sc-stack-ta-min-h-grow-max: 120px; --sc-stack-ta-min-h-grow: clamp( 0px, calc((880px - 100vw) * 0.22), var(--sc-stack-ta-min-h-grow-max) ); --sc-stack-ta-min-h: calc( var(--sc-stack-ta-min-h-base) + var(--sc-stack-ta-min-h-grow) ); } /* Force stacked layout: wheel on top, entries below */ .hero > .container.hero__grid{ grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "wheel" "content" !important; column-gap: 0 !important; row-gap: 14px !important; align-items: start !important; /* ✅ make the grid take full available width */ width: 100% !important; max-width: 100% !important; /* ✅ only these control left/right gap */ padding-left: var(--sc-stack-side-pad, 14px) !important; padding-right: var(--sc-stack-side-pad, 14px) !important; } /* Wheel row (top) */ .hero__wheel{ grid-area: wheel !important; justify-self: center !important; align-self: start !important; width: 100% !important; min-width: 0 !important; gap: 10px !important; } /* Full-size wheel again (not shrunk bridge size) — shrinks immediately below 880 */ .hero__wheel .wheel-wrapper{ /* ✅ Starts shrinking RIGHT AWAY below 880px - At ~880px => ~740px - Then scales down as viewport gets smaller */ width: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px)))) !important; height: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px)))) !important; /* hard safety so it can never exceed viewport */ max-width: calc(100vw - 28px) !important; max-height: calc(100vw - 28px) !important; margin: 0 auto 1rem !important; justify-self: center !important; align-self: center !important; } .hero__wheel #spinButton, .hero__wheel #resultBox{ max-width: min(740px, max(40px, calc(100vw - var(--sc-stack-wheel-cut, 140px)))) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Entries panel row (below wheel) */ .hero__content{ grid-area: content !important; width: 100% !important; max-width: none !important; justify-self: center !important; align-self: start !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; } .hero__content .inputs-card{ width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; /* ✅ full-width card + height grows while viewport shrinks */ min-height: var(--sc-stack-card-min-h, 430px) !important; display: flex !important; flex-direction: column !important; } /* Keep inner flex chain safe */ /* ✅ stacked mode: wrapper must consume extra card height */ .hero__content #panel-entries .optimg-ta-wrap{ display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } .hero__content .etabs__panels, .hero__content .etab-panel, .hero__content #panel-entries, .hero__content #panel-results{ min-height: 0 !important; } .hero__content #panel-entries #optionsInput{ flex: 1 1 auto !important; width: 100% !important; min-height: var(--sc-stack-ta-min-h, 220px) !important; height: auto !important; max-height: none !important; resize: none !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Quick Share: keep inline (right side) below 880px, until very small screens */ #panel-entries .inputs-card__actions{ display: flex !important; flex-wrap: nowrap !important; /* ✅ stay on one line */ align-items: center !important; justify-content: flex-start !important; gap: 8px !important; row-gap: 0 !important; min-width: 0 !important; } #panel-entries .sc-badgewrap{ flex: 0 1 auto !important; /* Spin with friends block can shrink if needed */ min-width: 0 !important; } #panel-entries .sc-quickshare-btn{ flex: 0 0 auto !important; /* ✅ stay inline */ width: auto !important; max-width: none !important; margin-left: auto !important; /* ✅ pushes Quick Share to the RIGHT side */ margin-top: 0 !important; justify-content: center !important; white-space: nowrap !important; overflow: visible !important; } #panel-entries .sc-quickshare-btn__txt{ white-space: nowrap !important; } } /* ========================================================= ChoiceSpin — Quick Share stacks under Spin With Friends on tiny screens (<=370px) ✅ Below 880 it's inline by default ✅ At 370px and below, move Quick Share underneath ========================================================= */ @media (max-width: 370px){ #panel-entries .inputs-card__actions{ flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 8px !important; } #panel-entries .sc-quickshare-btn{ flex: 0 0 100% !important; /* ✅ take full row => moves underneath */ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; /* ✅ remove auto push-right */ margin-top: 0 !important; justify-content: flex-start !important; white-space: normal !important; overflow: hidden !important; } #panel-entries .sc-quickshare-btn__txt{ white-space: nowrap !important; } } /* ========================================================= ChoiceSpin — stacked wheel boost on smaller screens ✅ Keep same stacked layout ✅ Make wheel bigger below 700px by using more side space ✅ Easy to tune with 2 variables only ========================================================= */ @media (min-width: 100px) and (max-width: 700px){ .hero{ /* tighter side gutters => more room for the wheel */ --sc-stack-side-pad: 10px; /* was 140px; reduce cut so wheel stays larger */ --sc-stack-wheel-cut: 76px; } } /* Extra boost for very small phones */ @media (min-width: 100px) and (max-width: 480px){ .hero{ --sc-stack-side-pad: 8px; --sc-stack-wheel-cut: 52px; } } /* ========================================================= ChoiceSpin — stacked layout top gap under header (<880px) ✅ Keeps the same visual gap under header before the wheel ✅ Applies only when the wheel-resp helper is NOT active ========================================================= */ @media (max-width: 879.98px){ html:not(.sc-wheelresp-850) .hero{ padding-top: 140px !important; /* same clean gap under header */ } html:not(.sc-wheelresp-850) .hero__wheel{ align-self: start !important; margin-top: 0 !important; /* prevent extra accidental offset */ } } /* ========================================================= ChoiceSpin — smaller top gap on very small screens (<=600px) ✅ Keeps same stacked layout ✅ Only reduces top gap a little ========================================================= */ @media (max-width: 600px){ html:not(.sc-wheelresp-850) .hero{ padding-top: 90px !important; /* was 140px */ } }