/* styles/share/share-route.css ChoiceSpin — Blank share page styling (v5 STABLE) Activated when */ /* ========================= Share route: boot screen (prevents double-render stutter) ========================= */ html.sc-share-route.sc-share-booting body{ background: #000; /* prevents white blink during reload */ } /* hide wheel + left panel until payload exists */ html.sc-share-route.sc-share-booting .hero__grid, html.sc-share-route.sc-share-booting .sc-share-shell{ visibility: hidden !important; } /* full-screen loader */ html.sc-share-route.sc-share-booting body::before{ content: "Loading shared wheel…"; position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.65); z-index: 1000000; font: 800 16px system-ui; color: #fff; letter-spacing: .02em; } /* ========================= Share route: hard lock scroll ========================= */ html.sc-share-route, html.sc-share-route body{ height: 100%; overflow: hidden; /* lock scrolling */ } html.sc-share-route body{ margin: 0; overscroll-behavior: none; } /* ========================= Hide normal site sections ========================= */ html.sc-share-route .site-header, html.sc-share-route .info, html.sc-share-route .faq-metrics, html.sc-share-route .site-footer{ display: none; } html.sc-share-route main{ padding: 0; margin: 0; } /* ========================= Full screen hero ========================= */ html.sc-share-route .hero{ height: 100dvh; /* prevents browser-bar jump on refresh */ min-height: 100vh; padding: 0; margin: 0; display: grid; place-items: center; } /* Hide the entries/editor column entirely */ html.sc-share-route .hero__content{ display: none; } /* IMPORTANT: Kill the original 2-column hero layout so the wheel is centered and NOT confined to a narrow column (which was clipping it). */ html.sc-share-route .hero__grid{ width: 100% !important; height: 100% !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr !important; place-items: center !important; padding: 0 !important; /* ✅ DEAD CENTER */ gap: 0 !important; } html.sc-share-route .hero__wheel{ /* ✅ THIS is the real fix: cancel base desktop placement (grid-column:2 etc.) */ grid-column: 1 / -1 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; margin: 0 auto !important; width: auto !important; display: grid !important; justify-items: center !important; align-content: center !important; gap: 10px !important; overflow: visible !important; transform: none !important; } /* Wheel size: fits viewport but stays big */ html.sc-share-route .wheel-wrapper{ width: min(560px, 72vmin); aspect-ratio: 1 / 1; margin: 0 auto; } /* Remove bottom spacing that can create phantom movement/overflow */ html.sc-share-route #spinButton, html.sc-share-route #resultBox{ margin: 0; } /* ========================= Left side panel ========================= */ .sc-share-shell{ position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 999999; width: 240px; } .sc-share-side{ background: rgba(0,0,0,.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 14px; display: grid; gap: 10px; } .sc-share-side__badge{ font: 800 12px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 2px; } .sc-share-side__btn{ width: 100%; border-radius: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font: 700 14px/1 system-ui; cursor: pointer; } .sc-share-side__btn--primary{ background: rgba(79, 140, 255, .26); border-color: rgba(79, 140, 255, .45); } .sc-share-side__hint{ font: 600 12px/1.35 system-ui; color: rgba(255,255,255,.75); min-height: 16px; } .sc-share-side__desc{ font: 650 12px/1.35 system-ui; color: rgba(255,255,255,.80); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); white-space: pre-wrap; } /* ========================= SHARE ROUTE — WHEEL MUST BE A PERFECT SQUARE (NO CLIP) Paste LAST ========================= */ /* Lock scroll WITHOUT clipping children */ html.sc-share-route, html.sc-share-route body{ height: 100%; overflow: hidden !important; } html.sc-share-route body{ position: fixed; /* prevents any scroll movement */ inset: 0; width: 100%; margin: 0 !important; } /* Remove container/grid constraints that can squeeze the wheel */ html.sc-share-route .hero .container{ max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } html.sc-share-route .hero__grid{ width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr !important; place-items: center !important; position: relative !important; } /* IMPORTANT: never clip the wheel or its ring/shadow */ html.sc-share-route .hero, html.sc-share-route .hero__wheel{ overflow: visible !important; } /* ✅ The real fix: force the wheel wrapper to be a true square */ html.sc-share-route .hero__wheel{ --sc-wheel-size: min(760px, calc(100dvh - 110px), calc(100vw - 40px)); } html.sc-share-route .wheel-wrapper{ width: var(--sc-wheel-size) !important; height: var(--sc-wheel-size) !important; /* <-- makes it a perfect square */ aspect-ratio: auto !important; /* we don't rely on aspect-ratio */ margin: 0 auto !important; } /* Remove any spacing that can create phantom overflow */ html.sc-share-route #spinButton, html.sc-share-route #resultBox{ margin: 0 !important; }