:root{--bg:#08090d;--surface:#11131a;--surface-2:#171a23;--border:#292d3a;--text:#f5f5f7;--muted:#a9adba;--yellow:#ffd84d;--purple:#a98cff;--green:#79e6a5;--radius:18px}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit}.page-width{width:min(960px,calc(100% - 32px));margin-inline:auto}.site-header{border-bottom:1px solid var(--border);background:rgba(8,9,13,.96)}.header-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--yellow);font-weight:800;text-decoration:none;letter-spacing:.03em}nav{display:flex;flex-wrap:wrap;gap:20px}nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--yellow)}.hero{padding-block:72px 44px;text-align:center}.eyebrow,.result-label,.card-label{margin:0 0 8px;color:var(--purple);font-size:.78rem;font-weight:800;letter-spacing:.13em}.hero h1{margin:0;color:var(--yellow);font-size:clamp(2.2rem,7vw,4.5rem);line-height:1}.hero-copy{max-width:720px;margin:24px auto 0;color:var(--muted);font-size:1.08rem}.information-section{margin-bottom:28px}.content-card,.calculator-card,.reference-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.content-card,.calculator-card{padding:clamp(20px,4vw,38px)}.reference-card{padding:22px}.content-card h2,.section-heading h2{margin:0 0 10px;color:var(--yellow);font-size:clamp(1.8rem,5vw,2.6rem)}.content-card p{color:var(--muted)}.disclaimer{border-left:3px solid var(--purple);padding-left:16px}.live-reference{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:60px}.draw-placeholder,.under-placeholder{color:var(--muted)}.strategy-draws{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.strategy-draw{text-align:center}.strategy-draw-time{display:block;margin-bottom:10px;color:var(--muted);line-height:1.35;font-size:.95rem;font-weight:700}.strategy-draw-ball,.under-number{display:inline-grid;place-items:center;border-radius:50%;background:var(--yellow);color:#111;font-weight:900}.strategy-draw-ball{width:64px;height:64px;font-size:1.35rem}.strategy-draw-ball.pending{border:2px dashed var(--border);background:var(--surface-2);color:var(--muted);box-shadow:none}.strategy-draw-mark{display:block;margin-top:10px;color:var(--muted);font-size:.95rem;font-weight:700;line-height:1.3}.strategy-under-scroll{overflow-x:auto;margin-top:10px}.strategy-under-table{width:100%;border-collapse:collapse;text-align:center}.strategy-under-table th,.strategy-under-table td{padding:10px 7px;border-bottom:1px solid var(--border);white-space:nowrap}.strategy-under-table th{color:var(--muted);font-size:.72rem}.strategy-under-table td:first-child{color:var(--muted);font-size:.86rem}.under-number{width:38px;height:38px;border:2px solid #e2ad00;background:radial-gradient(circle at 35% 30%,#fff4a3 0%,#ffd21f 38%,#e5ad00 100%);color:#171717;font-size:.88rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 8px rgba(133,93,0,.24)}.under-na,.context-empty{color:var(--muted)}.calculator-section{padding-block:20px 50px}.section-heading{max-width:720px;margin-bottom:24px}.section-heading>p:last-child{color:var(--muted)}
.sunny-chart-scroll{overflow-x:auto}.sunny-chart{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:18px;min-width:700px;padding:20px 10px 30px}.sunny-egg{position:relative;min-width:0;height:112px;border:2px solid #41485a;border-radius:50%;background:radial-gradient(ellipse at 50% 42%,#252c3b 0%,#151b28 74%);color:var(--text);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.22);transition:border-color .15s,background .15s,transform .15s}.sunny-egg:hover,.sunny-egg:focus-visible{border-color:var(--yellow);transform:translateY(-2px);outline:none}.sunny-egg.has-related{border-color:rgba(121,230,165,.75);background:radial-gradient(ellipse at 50% 42%,rgba(121,230,165,.18),#151b28 74%)}.sunny-egg.starter{border-color:var(--yellow);background:radial-gradient(ellipse at 50% 42%,#ffe878,#d99f08 78%);color:#111;box-shadow:0 0 0 2px #08090d,0 0 0 4px var(--yellow)}.egg-starter{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border:2px solid #e2ad00;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4a3 0%,#ffd21f 38%,#e5ad00 100%);color:#171717;font-size:1.25rem;font-weight:900;box-shadow:inset 0 2px 1px rgba(255,255,255,.65),0 3px 8px rgba(133,93,0,.3)}.egg-association{position:absolute;z-index:1;color:#ef4454;font-size:.9rem;font-weight:900;line-height:1}.egg-association.top-left{top:18px;left:18px}.egg-association.top-right{top:18px;right:18px}.egg-association.bottom-left{bottom:18px;left:18px}.egg-association.bottom-right{bottom:18px;right:18px}.egg-association.left{top:50%;left:12px;transform:translateY(-50%)}.egg-association.right{top:50%;right:12px;transform:translateY(-50%)}.egg-association.bottom{bottom:10px;left:50%;transform:translateX(-50%)}.egg-association.related{color:var(--green);text-shadow:0 0 8px rgba(121,230,165,.5)}.result-panel{border-top:1px solid var(--border);padding-top:24px}.result-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:28px;align-items:center}.result-details{min-width:0}.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}.result-summary div{padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}dt{color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}dd{margin:3px 0 0;color:var(--text);font-weight:800}.related-marks{display:flex;flex-wrap:wrap;gap:7px;min-height:48px}.related-mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid #e2ad00;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4a3 0%,#ffd21f 38%,#e5ad00 100%);color:#171717;font-size:1.3rem;font-weight:900;box-shadow:inset 0 2px 1px rgba(255,255,255,.65),0 4px 11px rgba(133,93,0,.30)}.result-layout .explorer-link{width:100%;margin-top:0;text-align:center}.explorer-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:18px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);padding:9px 14px;font-size:.9rem;font-weight:700;text-decoration:none}.explorer-link:hover,.explorer-link:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none}.coverage{margin:18px 0;color:var(--muted);font-weight:700}.secondary-button{width:100%;margin-top:24px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);cursor:pointer;font:inherit;font-weight:700;padding:9px 12px}.secondary-button:hover,.secondary-button:focus-visible{border-color:var(--yellow);outline:none}.site-footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted)}.back-navigation{padding-bottom:24px}.back-to-strategies{color:var(--muted);text-decoration:none}.back-to-strategies:hover{color:var(--yellow)}
@media(max-width:760px){.result-layout{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){.page-width{width:min(100% - 20px,960px)}.hero{padding-block:52px 34px}.live-reference{margin-bottom:36px}.strategy-draws{grid-template-columns:repeat(2,1fr);gap:16px 10px}.strategy-draw-ball{width:58px;height:58px;font-size:1.2rem}.strategy-draw-mark{font-size:.9rem}.strategy-under-table th,.strategy-under-table td{padding:8px 6px}.under-number{width:34px;height:34px}.sunny-chart{gap:12px;min-width:640px;padding-inline:6px}.sunny-egg{height:96px}.egg-starter{width:42px;height:42px;font-size:1.05rem}.egg-association{font-size:.78rem}.egg-association.top-left,.egg-association.top-right{top:14px}.egg-association.bottom-left,.egg-association.bottom-right{bottom:14px}}

/* Match the finished strategy-page Play Whe ball finish. */
.strategy-draw-ball, .under-number { background: radial-gradient(circle at 35% 30%, #fff4a3 0%, #ffd21f 38%, #e5ad00 100%); color: #171717; border: 2px solid #e2ad00; box-shadow: inset 0 2px 1px rgba(255,255,255,.65), 0 4px 11px rgba(133,93,0,.30); }
.sunny-egg.primary-related { border-color: rgba(121,230,165,.75); }
.sunny-egg.secondary-related { border-color: rgba(169,140,255,.8); background: radial-gradient(ellipse at 50% 42%, rgba(169,140,255,.16), #151b28 74%); }
.secondary-association-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.secondary-marks .secondary-mark { background: radial-gradient(circle at 35% 30%, #d9ccff 0%, #a98cff 42%, #7354c7 100%); border-color: #7354c7; color: #120d24; }
.egg-association.top-left { top: 24px; left: 24px; }
.egg-association.top-right { top: 24px; right: 24px; }
.egg-association.bottom-left { bottom: 24px; left: 24px; }
.egg-association.bottom-right { bottom: 24px; right: 24px; }
.egg-association.left { left: 18px; }
.egg-association.right { right: 18px; }
.egg-association.bottom { bottom: 18px; }
.sunny-egg.primary-related .egg-starter { background: radial-gradient(circle at 35% 30%, #d5ffe7 0%, #79e6a5 42%, #2b9b63 100%); border-color: #2b9b63; color: #07150d; }
.sunny-egg.secondary-related .egg-starter { background: radial-gradient(circle at 35% 30%, #e2d9ff 0%, #a98cff 42%, #7354c7 100%); border-color: #7354c7; color: #120d24; }
.sunny-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 0 0 8px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.sunny-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; }
.legend-starter { border-color: var(--yellow); background: var(--yellow); }
.legend-primary { border-color: #2b9b63; background: #79e6a5; }
.legend-secondary { border-color: #7354c7; background: #a98cff; }
.explorer-actions { display: grid; gap: 12px; align-content: center; }
.explorer-actions .explorer-link { margin-top: 0; }
.explorer-actions .explorer-link:last-child { border-color: var(--yellow); color: var(--yellow); }