/* iOS Safari paints the safe-area insets (behind the status bar, above the home indicator, with viewport-fit=cover) using 's own background, not 's — this must match .app-shell's backdrop or those strips show as a mismatched black bar instead of blending into the app. */ :root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #020617; color: #f4f5ff; } * { box-sizing: border-box; } [data-asset]:not([src]) { visibility: hidden; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; } body { display: flex; justify-content: center; background: radial-gradient(ellipse at 50% 45%, #11103a, #030511 54%, #010207 85%); } .app-shell { --cut: 3cqw; width: min(100%, 520px); height: 100vh; height: 100dvh; min-height: 0; position: relative; isolation: isolate; container-type: size; container-name: app; display: grid; grid-template-rows: minmax(0, 15fr) minmax(0, 26fr) minmax(0, 16fr) minmax(0, 27fr) minmax(0, 16fr); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; background: #020617 var(--space-art, none) center top / 100% 100% no-repeat; box-shadow: 0 0 90px #1147af20; } /* Temporary footer-free layout: give the footer's space to the result panels. */ .app-shell--footer-hidden { grid-template-rows: minmax(0, 15fr) minmax(0, 26fr) minmax(0, 22fr) minmax(0, 37fr); /* Leave one line of breathing room below the draw panel, above the safe area. */ padding-bottom: calc(clamp(28px, 4dvh, 40px) + env(safe-area-inset-bottom, 0px)); } .app-shell--footer-hidden .cosmic-footer, .app-shell--footer-hidden .history-footer { display: none; } .space-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; } .space-scene canvas { display: block; width: 100%; height: 100%; } html[data-scene='ready'] .space-scene { opacity: 1; } /* The UFO/beam render into this second, transparent canvas layered ABOVE every panel (z-index 6, above .panel-frame's 4) so the ship and beam are always visible no matter where they fly, without ever needing to alter a panel's own background — see app.js. */ .space-scene-fg { z-index: 6; } .page-nav { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #5c8eb876; border-radius: 13px; background: #04112ccb; box-shadow: inset 0 0 12px #3b60d033; color: #dbecff; text-decoration: none; -webkit-tap-highlight-color: transparent; } .page-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .page-nav:hover { background: #112b53; border-color: #67e4ff; } .page-nav:focus-visible { outline: 2px solid #aaf8ff; outline-offset: 3px; } .icon-history { position: absolute; top: calc(max(12px, env(safe-area-inset-top, 0px)) + 2px); right: 20px; z-index: 7; } .brand { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: 1.3cqh; min-height: 0; z-index: 3; transform: translateY(1.8cqh); } .brand h1 { margin: 0; display: flex; flex-direction: column; align-items: center; } .brand-ufo { display: block; font-family: 'Arial Black', Arial, sans-serif; font-weight: 1000; font-style: italic; font-size: min(22.2cqw, 9.8cqh); line-height: .82; letter-spacing: -.055em; padding-right: .13em; color: transparent; background: linear-gradient(171deg, #fcffff 3%, #b8d8ff 19%, #4966a7 29%, #f7fbff 38%, #ffffff 45%, #6575a6 51%, #040b25 55%, #98a7de 65%, #fef5ff 77%, #647abb 95%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: .45px #ddecff; filter: drop-shadow(0 2px 1px #05091f) drop-shadow(0 0 3px #648fff) drop-shadow(0 3px 3px #9609c590); transform: scaleX(1.13); } .brand-mega { display: block; margin-top: .6cqh; font-size: min(10cqw, 4.25cqh); line-height: 1; letter-spacing: -.015em; font-family: 'Arial Black', Arial, sans-serif; font-weight: 950; font-style: italic; color: transparent; background: linear-gradient(#f2ffff 2%, #84f4ff 27%, #00d4ff 47%, #1671c9 53%, #d3ffff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: .3px #8febff; filter: drop-shadow(0 0 3px #178cfc) drop-shadow(0 2px 0 #071c6c); } .brand-mega span { color: transparent; background: linear-gradient(#fff8ff 0%, #c3d8ff 32%, #5873ff 48%, #5813c7 54%, #e495ff 91%); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke-color: #c6b7ff; } .brand-tagline { margin: .95cqh 0 0; font-size: min(2.45cqw, 1.2cqh); font-weight: 400; letter-spacing: .38em; line-height: 1.2; text-indent: .38em; color: #e2dcf0; text-shadow: 0 0 6px #1d4aff; } .hero { position: relative; min-height: 0; z-index: 2; } .hero-handwriting { position: absolute; right: 4cqw; top: 13%; margin: 0; color: #c6a2ff; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-style: italic; font-size: min(3.9cqw, 1.95cqh); line-height: .85; transform: rotate(-13deg); text-align: center; text-shadow: 0 0 4px #2626ff, 0 0 10px #883cff; pointer-events: none; } .hero-handwriting span { display: inline-block; margin: .1em 0 .1em .6em; } .scene-status { position: absolute; top: 45%; width: 100%; text-align: center; color: #a3c6ee; font-size: min(3cqw, 1.6cqh); letter-spacing: .06em; } .scene-status[hidden] { display: none; } .beam-contact { position: absolute; bottom: -.7cqh; left: 29%; width: 42%; height: 1.2cqh; border-radius: 50%; background: radial-gradient(ellipse, #dfffff 0%, #08bbff90 21%, #115fff33 50%, transparent 72%); filter: blur(2px); } .panel-frame { min-height: 0; position: relative; z-index: 4; margin: 0 3.8cqw; filter: drop-shadow(0 0 3px #367fff) drop-shadow(0 0 8px #2038df70); } .panel { height: 100%; padding: 1.1px; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); background: linear-gradient(145deg, #d6efff, #33a9ff 20%, #5d73fa 48%, #dca4ff 78%, #7973ff); } .panel-surface { position: relative; width: 100%; height: 100%; overflow: hidden; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); background: linear-gradient(125deg, #01091aee, #020517ef 70%, #0a0730ed); box-shadow: inset 0 0 13px #114cff66; } h2 { margin: 0; text-align: center; font-size: min(3.6cqw, 1.85cqh); font-weight: 500; line-height: 1.1; letter-spacing: .17em; text-shadow: 0 0 5px #7394ff30; } .live-section { margin-bottom: .9cqh; } .live-surface { display: flex; flex-direction: column; align-items: center; padding-top: 1.15cqh; isolation: isolate; } .live-planet { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; opacity: .92; pointer-events: none; animation: live-orbit 18s ease-in-out infinite alternate; } .live-surface::before, .live-surface::after { content: ''; position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; } .live-surface::before { inset: -24% -15%; opacity: .7; background: radial-gradient(ellipse at 25% 70%, #16cfff45, transparent 45%), radial-gradient(ellipse at 76% 38%, #792cff4d, transparent 48%), linear-gradient(112deg, transparent 35%, #70eaff24 49%, transparent 63%); animation: live-aurora 12s ease-in-out infinite alternate; } .live-surface::after { inset: 0; opacity: .55; background: radial-gradient(circle at 12% 32%, #d9f9ff 0 1px, #55bfff55 1.5px, transparent 4px), radial-gradient(circle at 28% 65%, #82ddff 0 1px, transparent 3px), radial-gradient(circle at 73% 27%, #d3b9ff 0 1px, transparent 3px), radial-gradient(circle at 88% 55%, #d5f7ff 0 1px, #389bff55 1.5px, transparent 4px), radial-gradient(circle at 63% 78%, #9bceff 0 1px, transparent 3px), radial-gradient(ellipse at 50% 115%, transparent 56%, #39bcff33 62%, transparent 68%); animation: live-sparkle 4.8s ease-in-out infinite alternate; } @keyframes live-orbit { from { transform: scale(1.07) translate3d(-1.3%, .8%, 0) rotate(-.35deg); } to { transform: scale(1.11) translate3d(1.3%, -.8%, 0) rotate(.35deg); } } @keyframes live-aurora { from { transform: translate3d(-5%, 2%, 0) rotate(-3deg); opacity: .45; } to { transform: translate3d(5%, -2%, 0) rotate(3deg); opacity: .85; } } @keyframes live-sparkle { from { opacity: .28; transform: translate3d(0, 1%, 0); } to { opacity: .85; transform: translate3d(-.7%, -1%, 0); } } .live-surface h2 { z-index: 2; } .live-badge, .live-clock { position: absolute; z-index: 2; top: 1.3cqh; display: flex; align-items: center; gap: 1.3cqw; padding: .48cqh 1.8cqw; border: 1px solid #a6a4f0; border-radius: 4px; background: #050b1ce3; box-shadow: inset 0 0 8px #4d3ee733, 0 0 3px #59b7ff7a; color: #f2f5ff; font-size: min(3.3cqw, 1.7cqh); letter-spacing: .08em; line-height: 1; } .live-badge { left: 3.1cqw; } .live-clock { right: 3.1cqw; font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; } .live-badge i { width: min(2.4cqw, 1.2cqh); aspect-ratio: 1; border-radius: 50%; background: #35ef70; box-shadow: 0 0 4px #39ff72, 0 0 9px #2afa8977; } .event-horizon { --hole-color: #9d78ff; --hole-glow: #743dff; --tilt: -18deg; position: relative; isolation: isolate; flex-shrink: 0; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; filter: drop-shadow(0 0 4px #5b4cea60); } .event-horizon::before { content: ''; position: absolute; inset: -11%; border-radius: 50%; background: radial-gradient(ellipse, transparent 48%, #24299122 54%, #803cff38 62%, transparent 71%); filter: blur(3px); z-index: -1; } .singularity { position: absolute; inset: 1px; border-radius: 50%; z-index: 1; background: radial-gradient(ellipse at 36% 24%, #020516 6%, #01020a 43%, #000005 72%, #0c0b29 92%); box-shadow: inset 0 0 10px #00000d, inset 1px -2px 4px #1e145770; } .photon-ring { display: none; } .accretion-disk { position: absolute; z-index: 0; width: 127%; height: 28%; border-radius: 50%; border: 1px solid #8471d98c; border-top-color: #c2b0ff; border-bottom-color: #3071df6b; box-shadow: 0 -1px 3px #a996ff88, 0 2px 5px #4632d670; transform: rotate(var(--tilt)); } .slot-value { position: relative; z-index: 4; font-size: min(4.7cqw, 2.5cqh); font-weight: 600; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(160deg, #eafffe 0%, #6be8ff 32%, #3f8bff 58%, #a856ff 100%); background-clip: text; -webkit-background-clip: text; /* text-shadow (not filter: drop-shadow) so the glow follows the glyphs, not the element's full bounding box, with background-clip: text. */ text-shadow: 0 0 6px #57d6ff90, 0 0 3px #9a4dff80; } .live-horizon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(28cqw, 13cqh); margin: 0; --hole-color: #80eaff; --hole-glow: #1764ff; --tilt: -10deg; } .live-horizon .singularity { background: radial-gradient(ellipse at 38% 24%, #010c2d, #000617 53%, #01020b 70%, #071f55 100%); box-shadow: inset 0 0 9px #0860ec50; } .live-horizon .photon-ring { padding: 1.7px; background: conic-gradient(from 16deg, #689dff, #1e4ed0, #a67eff, #dfffff, #7decff, #2294ff, #182ce7, #c5f8ff, #689dff); filter: drop-shadow(0 0 3px #3eaaff); } .live-horizon::before { background: radial-gradient(ellipse, transparent 42%, #0861e544 53%, #23c8ff55 61%, transparent 72%); } .live-horizon .accretion-disk { width: 132%; height: 15%; border-color: #79d1ff75; box-shadow: 0 0 5px #2d9dfbaa; } .live-horizon .slot-value { font-size: min(11cqw, 6.2cqh); opacity: 1; transition: opacity .3s ease, filter .3s ease !important; } .live-horizon.has-number .slot-value { opacity: 1; animation: live-blink 1.6s ease-in-out infinite; } .live-horizon.is-lifting .slot-value { visibility: hidden; animation-play-state: paused !important; } /* Every non-Live status (a single draw settling, the whole day closed, waiting for the next draw, or the day's session having ended) shares the same muted badge look; only Live gets the default green pulsing dot. */ html:is([data-draw-status='Settled'], [data-draw-status='Closed'], [data-draw-status='Upcoming'], [data-draw-status='Ended']) .live-horizon .slot-value { animation: none !important; opacity: 1; } html:is([data-draw-status='Settled'], [data-draw-status='Closed'], [data-draw-status='Upcoming'], [data-draw-status='Ended']) .live-badge i { background: #9ba8ca; box-shadow: 0 0 5px #9ba8ca55; } html:is([data-draw-status='Settled'], [data-draw-status='Closed'], [data-draw-status='Upcoming'], [data-draw-status='Ended']) .live-badge { border-color: #7785a8; color: #c9d3ef; } .draw-card.receiving-drop { border-color: #b5eeff; box-shadow: inset 0 0 12px #287ec95c, 0 0 8px #40b3f780; } @keyframes live-blink { 0%, 35%, 100% { opacity: 1; } 55%, 70% { opacity: .2; } } .draw-section { margin-top: .35cqh; } .draw-surface { display: grid; grid-template-rows: minmax(0, 3.55cqh) minmax(0, 1fr); padding: .9cqh 2.8cqw 1.15cqh; } .draw-surface h2 { align-self: center; font-size: min(3.45cqw, 1.8cqh); } .draw-cards-region { min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; } /* Fit six square cards within both dimensions of the available panel space. */ .draw-grid { --draw-gap: clamp(6px, 1dvh, 10px); --draw-card-size: min(calc((100cqw - 2 * var(--draw-gap)) / 3), calc((100cqh - var(--draw-gap)) / 2)); display: grid; grid-template-columns: repeat(3, var(--draw-card-size)); grid-template-rows: repeat(2, var(--draw-card-size)); gap: var(--draw-gap); margin: 0; padding: 0; list-style: none; min-height: 0; } .draw-card { position: relative; min-width: 0; min-height: 0; container-type: inline-size; display: grid; place-items: center; border: 1px solid #5672b7; border-radius: 7px; background: linear-gradient(155deg, #051526b3, #000710d6 60%, #1b0a3ae0); box-shadow: inset 0 0 8px #163e9660, inset 0 -3px 8px #9c27fe26, 0 0 3px #253ac6aa; } .draw-card::before { content: ''; position: absolute; top: -1px; left: 12%; width: 38%; height: 1px; background: linear-gradient(90deg, transparent, #cef0ff, #7eb7ff, transparent); } .draw-card time { position: absolute; top: 8cqw; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 8%; font-size: 14cqw; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .035em; text-shadow: 0 0 5px #e4edff44; } .draw-card .draw-time-period { opacity: .8; } .draw-card .event-horizon { width: 60cqw; transform: translateY(5cqw); } .draw-card .slot-value { font-size: 28cqw; } .draw-card:nth-child(2n) .event-horizon { --tilt: 15deg; } .draw-card:nth-child(3n) .photon-ring { transform: rotate(88deg); } .draw-card.has-number { border-color: #859ff2; } .draw-card.has-number .slot-value { animation: number-arrives .7s ease-out both; } .cosmic-footer { min-height: 0; position: relative; margin: -.2cqh -1cqw 0; z-index: 1; overflow: hidden; } .cosmic-footer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000); animation: orbital-drift 32s ease-in-out infinite alternate-reverse; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @keyframes number-arrives { from { opacity: 0; filter: blur(5px); transform: scale(.7); } to { opacity: 1; filter: blur(0); transform: scale(1); } } #live-number { transition: opacity .15s ease; } @keyframes orbital-drift { from { transform: scale(1.04) translate3d(-.45%, .35%, 0); } to { transform: scale(1.065) translate3d(.45%, -.35%, 0); } } html[data-paused='true'] *, html[data-paused='true'] *::before, html[data-paused='true'] *::after { animation-play-state: paused !important; } @media (min-width: 700px) { .app-shell { border-left: 1px solid #38529a24; border-right: 1px solid #38529a24; } } @media (max-height: 540px) and (orientation: landscape) { .app-shell { width: min(100%, 62dvh); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } /* Keep the requested Live indicator blinking gently. Separate longhands preserve the pickup/hidden-tab pauses and the stronger Settled override. */ .live-horizon.has-number .slot-value { animation-name: live-blink !important; animation-duration: 2.4s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; } /* Ambient planet/footer drift stays active too; hidden tabs still pause. */ .live-planet, .cosmic-footer img, .live-surface::before, .live-surface::after { animation-name: orbital-drift !important; animation-duration: 24s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-direction: alternate !important; } .cosmic-footer img { animation-duration: 32s !important; animation-direction: alternate-reverse !important; } .live-planet { animation-name: live-orbit !important; animation-duration: 18s !important; } .live-surface::before { animation-name: live-aurora !important; animation-duration: 12s !important; } .live-surface::after { animation-name: live-sparkle !important; animation-duration: 4.8s !important; } }