:root {
  --ssl-green: #12372a;
  --ssl-ink: #11162c;
  --ssl-blue: #3c68ff;
  --ssl-cyan: #22d8f2;
  --ssl-purple: #925cff;
  --ssl-lime: #c9ff3d;
  --ssl-pink: #ff55c7;
  --ssl-white: #ffffff;
  --ssl-cloud: #f4f7fc;
  --ssl-gray: #e4e9f2;
  --ssl-muted: #667085;
  --ssl-line: rgba(26, 37, 71, .12);
  --ssl-shadow: 0 18px 45px rgba(43, 64, 129, .14);
  --ssl-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --ssl-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 58px; }
body { margin: 0; background: #e9edf5; color: var(--ssl-ink); font-family: var(--ssl-body); line-height: 1.78; -webkit-font-smoothing: antialiased; }
button, a, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.ssl-page { position: relative; width: 100%; max-width: 480px; min-height: 100vh; margin: auto; overflow: clip; background: var(--ssl-white); box-shadow: 0 0 60px rgba(29, 40, 81, .16); }

/* HERO / official brand key visual */
.ssl-hero { position: relative; min-height: 760px; padding: 28px 20px 26px; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(rgba(0,38,23,.38),rgba(0,20,12,.76)),url("assets/images/branding/ssl-hero-bg.webp") center / cover no-repeat; isolation: isolate; }
.ssl-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 34%,rgba(255,255,255,.11),transparent 28%),radial-gradient(circle at 88% 22%,rgba(146,92,255,.18),transparent 31%),radial-gradient(circle at 8% 75%,rgba(34,216,242,.13),transparent 32%); }
.ssl-hero::after { content: ""; position: absolute; z-index: 0; inset: auto 0 0; height: 42%; pointer-events: none; background: linear-gradient(transparent,rgba(0,20,12,.34)); }
.ssl-hero__ornament { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: repeating-linear-gradient(116deg,transparent 0 60px,rgba(34,216,242,.055) 61px 62px,transparent 63px 124px); }
.ssl-hero__ornament::before { content: ""; position: absolute; width: 150%; height: 2px; left: -20%; top: 46%; transform: rotate(-11deg); background: linear-gradient(90deg,transparent,rgba(34,216,242,.55),rgba(146,92,255,.45),transparent); box-shadow: 0 0 18px rgba(34,216,242,.35); }
.ssl-hero__ornament::after { content: ""; position: absolute; width: 130%; height: 2px; left: -15%; bottom: 162px; transform: rotate(-7deg); background: linear-gradient(90deg,transparent,var(--ssl-cyan),var(--ssl-lime),transparent); opacity: .42; }
.ssl-hero > *:not(.ssl-hero__ornament) { position: relative; z-index: 2; }
.ssl-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 13px; border: 1px solid rgba(201,255,61,.5); border-radius: 99px; color: #fff; background: rgba(0,33,20,.58); box-shadow: 0 0 20px rgba(201,255,61,.11); font-family: var(--ssl-display); font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; backdrop-filter: blur(9px); }
.ssl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ssl-lime); box-shadow: 0 0 10px var(--ssl-lime); }
.ssl-logo-slot { display: grid; place-items: center; width: 100%; min-height: 0; margin: 18px auto 0; }
.ssl-logo-slot::before { content: ""; position: absolute; z-index: -1; width: min(94vw,410px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(0,17,10,.46),rgba(0,38,23,.28) 51%,transparent 73%); filter: blur(2px); }
.ssl-hero__logo { display: block; width: min(78%,350px); height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.55)) drop-shadow(0 0 15px rgba(61,255,202,.22)); }
.ssl-hero__copy { margin: 12px 0 0; color: #fff; font-size: 25px; font-weight: 1000; line-height: 1.35; letter-spacing: -.04em; text-shadow: 0 3px 16px rgba(0,0,0,.6); }
.ssl-hero__en { margin: 5px 0 0; color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-shadow: 0 0 14px rgba(201,255,61,.25); }
.ssl-hero__lead { display: flex; flex-direction: column; gap: 1px; margin: 12px 0 0; color: rgba(255,255,255,.83); font-size: 10px; font-weight: 600; line-height: 1.7; }
.ssl-hero__lead strong { color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.ssl-hero__lead span { display: block; }
.ssl-hero__period { display: flex; flex-direction: column; gap: 3px; width: min(100%,350px); margin: 15px auto 0; padding: 11px 15px; overflow: hidden; border: 1px solid rgba(34,216,242,.42); background: rgba(0,28,17,.64); box-shadow: 0 12px 30px rgba(0,0,0,.19),inset 0 0 28px rgba(34,216,242,.04); backdrop-filter: blur(10px); }
.ssl-hero__period::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--ssl-lime),var(--ssl-cyan),var(--ssl-purple)); }
.ssl-hero__period b { color: #fff; font-family: var(--ssl-display); font-size: 13px; font-weight: 900; letter-spacing: .03em; }
.ssl-hero__period span { color: rgba(255,255,255,.72); font-size: 9px; }
.ssl-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 17px; }
.ssl-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 11px 22px; border: 0; text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .05em; cursor: pointer; }
.ssl-button--gold { min-width: 255px; clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); color: #fff; background: linear-gradient(100deg, var(--ssl-green), #195c55); box-shadow: 0 11px 28px rgba(18,55,42,.22); }
.ssl-hero .ssl-button--gold { border: 1px solid rgba(255,255,255,.22); background: linear-gradient(100deg,#08715c,#00a982); box-shadow: 0 12px 28px rgba(0,0,0,.27),0 0 20px rgba(34,216,242,.10); }
.ssl-text-link { color: rgba(255,255,255,.88); font-size: 10px; font-weight: 800; text-underline-offset: 4px; }
.ssl-text-link span { margin-left: 5px; color: var(--ssl-lime); }
.ssl-hero__facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: 21px 0 0; padding: 0; list-style: none; }
.ssl-hero__facts li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 62px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); background: rgba(0,25,15,.57); box-shadow: 0 8px 18px rgba(0,0,0,.14); backdrop-filter: blur(8px); }
.ssl-hero__facts li::after { content: ""; position: absolute; width: 40px; height: 3px; right: -9px; bottom: 5px; transform: rotate(-28deg); background: var(--ssl-cyan); }
.ssl-hero__facts li:nth-child(2)::after { background: var(--ssl-purple); }
.ssl-hero__facts li:nth-child(3)::after { background: var(--ssl-lime); }
.ssl-hero__facts li:nth-child(4)::after { background: var(--ssl-pink); }
.ssl-hero__facts b { color: #fff; font-family: var(--ssl-display); font-size: 21px; font-weight: 1000; line-height: 1; }
.ssl-hero__facts span { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 7px; font-weight: 800; white-space: nowrap; }

/* Navigation + chapters */
.ssl-tabs { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid var(--ssl-line); background: rgba(255,255,255,.93); box-shadow: 0 7px 20px rgba(32,45,88,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ssl-tabs button { position: relative; min-height: 55px; padding: 8px 1px; border: 0; color: #778096; background: none; font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .08em; cursor: pointer; }
.ssl-tabs button::before { display: block; margin-bottom: 3px; color: #b0b7c7; font-size: 7px; }
.ssl-tabs button:nth-child(1)::before { content: "01"; }.ssl-tabs button:nth-child(2)::before { content: "02"; }.ssl-tabs button:nth-child(3)::before { content: "03"; }.ssl-tabs button:nth-child(4)::before { content: "04"; }.ssl-tabs button:nth-child(5)::before { content: "05"; }
.ssl-tabs button.is-active { color: #fff; background: var(--ssl-green); box-shadow: inset 0 -4px 0 var(--ssl-lime); }
.ssl-tabs button.is-active::before { color: var(--ssl-lime); }
.ssl-panel { display: none; }.ssl-panel.is-active { display: block; animation: ssl-in .28s ease both; }
@keyframes ssl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ssl-section { position: relative; padding: 58px 22px; overflow: hidden; background: #fff; }
.ssl-section + .ssl-section { border-top: 1px solid var(--ssl-line); }
.ssl-section:nth-of-type(even) { background: linear-gradient(155deg, #f8faff, #f5f2ff 55%, #fbfff1); }
.ssl-section::after { content: ""; position: absolute; z-index: 0; width: 140px; height: 2px; right: -28px; top: 33px; transform: rotate(-13deg); background: linear-gradient(90deg, transparent, rgba(60,104,255,.32), rgba(34,216,242,.65)); }
.ssl-section > * { position: relative; z-index: 1; }
.ssl-section--green { color: var(--ssl-ink); background: radial-gradient(circle at 10% 10%, rgba(34,216,242,.22), transparent 36%), radial-gradient(circle at 92% 72%, rgba(201,255,61,.22), transparent 38%), linear-gradient(145deg, #f6fbff, #f7f2ff) !important; }
.ssl-section--ivory { background: linear-gradient(145deg, #f7f9fd, #f0f4fa) !important; }
.ssl-chapter { padding-top: 110px; }
.ssl-chapter::before { content: attr(data-chapter); position: absolute; z-index: 0; top: 19px; right: 17px; color: rgba(60,104,255,.08); font-family: var(--ssl-display); font-size: 118px; font-weight: 1000; line-height: .8; letter-spacing: -.08em; }
.ssl-chapter .ssl-heading::before { content: attr(data-chapter-name) "  " attr(data-chapter); display: inline-block; margin-bottom: 14px; padding: 5px 10px; transform: skewX(-13deg); color: #fff; background: linear-gradient(90deg, var(--ssl-blue), var(--ssl-purple)); font-family: var(--ssl-display); font-size: 9px; font-weight: 1000; letter-spacing: .14em; }
.ssl-heading { margin-bottom: 27px; }
.ssl-heading span { display: flex; align-items: center; gap: 8px; color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .2em; }
.ssl-heading span::before { content: ""; width: 25px; height: 3px; transform: skewX(-24deg); background: linear-gradient(90deg, var(--ssl-cyan), var(--ssl-purple)); }
.ssl-heading h2 { margin: 8px 0 0; color: var(--ssl-ink); font-size: 29px; font-weight: 1000; line-height: 1.36; letter-spacing: -.04em; }
.ssl-heading--light h2, .ssl-heading--light span { color: var(--ssl-ink); }
.ssl-heading--small { margin-top: 52px; }.ssl-heading--small h2 { font-size: 24px; }
.ssl-section p { margin: 0 0 17px; color: #465068; font-size: 12px; line-height: 1.95; }
.ssl-dropcap::first-letter { float: none; margin: 0; color: inherit; font: inherit; }
.ssl-statement { position: relative; margin: 34px 0 0; padding: 28px 20px; overflow: hidden; color: #fff; background: linear-gradient(115deg, #263cc6, #7c4cf4 64%, #18cde6); box-shadow: 0 18px 38px rgba(65,77,196,.2); clip-path: polygon(0 0,100% 0,95% 100%,0 100%); }
.ssl-intro .ssl-statement { margin-top: 26px; }
.ssl-statement::after { content: "SSL"; position: absolute; right: -4px; bottom: -26px; color: rgba(255,255,255,.1); font-family: var(--ssl-display); font-size: 86px; font-weight: 1000; line-height: 1; }
.ssl-statement small { display: block; color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.ssl-statement strong { display: block; margin-top: 8px; font-size: 20px; font-weight: 900; line-height: 1.55; }

/* About / slider / eligibility */
.ssl-path { display: grid; gap: 11px; }
.ssl-path article { position: relative; padding: 22px 18px; overflow: hidden; border: 1px solid rgba(60,104,255,.14); background: rgba(255,255,255,.76); box-shadow: 0 12px 28px rgba(42,60,119,.08); }
.ssl-path article::before { content: ""; position: absolute; width: 88px; height: 88px; top: -50px; right: -20px; transform: rotate(38deg); background: linear-gradient(135deg, var(--ssl-cyan), var(--ssl-purple)); opacity: .24; }
.ssl-path article.is-current { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,var(--ssl-blue),var(--ssl-cyan),var(--ssl-lime)) border-box; }
.ssl-path article em { position: absolute; right: 12px; top: 4px; color: rgba(60,104,255,.1); font-family: var(--ssl-display); font-size: 54px; font-weight: 1000; font-style: normal; }
.ssl-path article small { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .13em; }
.ssl-path article h3 { margin: 7px 0 8px; color: var(--ssl-ink); font-size: 15px; font-weight: 900; }
.ssl-path article p { margin: 0; color: #59637a; font-size: 10px; line-height: 1.85; }
.ssl-path__arrow { text-align: center; color: var(--ssl-purple); font-size: 20px; font-weight: 1000; }
.ssl-path__goal { padding: 17px; color: #fff; text-align: center; background: linear-gradient(90deg, var(--ssl-blue), var(--ssl-purple)); font-size: 13px; font-weight: 900; transform: skewX(-4deg); }
.ssl-slider { display: flex; gap: 12px; overflow-x: auto; padding: 3px 8% 18px 2px; scroll-snap-type: x mandatory; scrollbar-width: none; }.ssl-slider::-webkit-scrollbar { display: none; }
.ssl-slide { flex: 0 0 82%; padding: 0; overflow: hidden; border: 1px solid rgba(60,104,255,.14); background: #f2f6ff; box-shadow: 0 18px 35px rgba(58,77,146,.16); scroll-snap-align: start; cursor: zoom-in; }
.ssl-slide img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.ssl-slider-controls { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 12px; align-items: center; margin-top: 8px; }
.ssl-slider-controls > button { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(0,170,131,.22); border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--ssl-green),var(--ssl-green-bright)); box-shadow: 0 8px 18px rgba(7,61,51,.18); font-family: var(--ssl-display); font-size: 27px; line-height: 1; cursor: pointer; }
.ssl-slider-controls > button:focus-visible { outline: 3px solid rgba(34,216,242,.5); outline-offset: 2px; }
.ssl-slider-status { display: flex; flex-direction: column; gap: 7px; align-items: center; min-width: 0; }
.ssl-slider-status b { color: var(--ssl-green); font-family: var(--ssl-display); font-size: 12px; font-weight: 1000; letter-spacing: .12em; }
.ssl-slider-status > span { width: min(100%,120px); height: 3px; overflow: hidden; border-radius: 999px; background: #dce7e4; }
.ssl-slider-status i { display: block; width: 100%; height: 100%; transform: scaleX(.0667); transform-origin: left center; background: linear-gradient(90deg,var(--ssl-green-bright),var(--ssl-cyan),var(--ssl-purple)); transition: transform .2s ease; }
.ssl-caption { color: var(--ssl-muted) !important; font-size: 9px !important; line-height: 1.7 !important; text-align: center; }
.ssl-check-list { margin: 25px 0; padding: 0; list-style: none; }
.ssl-check-list li { position: relative; margin-bottom: 6px; padding: 12px 9px 12px 35px; background: rgba(255,255,255,.75); border: 1px solid var(--ssl-line); font-size: 11px; font-weight: 800; box-shadow: 0 6px 15px rgba(37,53,103,.05); }
.ssl-check-list li::before { content: "✓"; position: absolute; left: 9px; top: 10px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--ssl-blue),var(--ssl-cyan)); font-size: 9px; }
.ssl-note { margin: 21px 0; padding: 15px 16px; border-left: 5px solid var(--ssl-cyan); background: #eef8ff; }
.ssl-note b { display: block; color: var(--ssl-green); font-size: 11px; }.ssl-note p { margin: 4px 0 0 !important; color: #526077 !important; font-size: 10px !important; line-height: 1.8 !important; }
.ssl-note--dark { border-color: var(--ssl-purple); background: rgba(255,255,255,.74); }.ssl-note--dark b { color: var(--ssl-green); }.ssl-note--dark p { color: #526077 !important; }
.ssl-details { border-top: 1px solid var(--ssl-line); border-bottom: 1px solid var(--ssl-line); }.ssl-details summary { position: relative; padding: 14px 36px 14px 3px; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }.ssl-details summary::-webkit-details-marker { display: none; }.ssl-details summary::after { content: "＋"; position: absolute; right: 7px; color: var(--ssl-blue); font-size: 17px; }.ssl-details[open] summary::after { content: "−"; }.ssl-details div { padding: 2px 3px 8px; }.ssl-details p { font-size: 10px; line-height: 1.8; }
.ssl-schedule { border-top: 3px solid var(--ssl-blue); }.ssl-schedule > div { position: relative; display: grid; grid-template-columns: 94px 1fr; gap: 8px; align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--ssl-line); }.ssl-schedule b { color: #263d9c; font-family: var(--ssl-display); font-size: 11px; font-weight: 1000; }.ssl-schedule span { color: #4d5870; font-size: 9px; font-weight: 700; }.ssl-schedule .is-current { padding-left: 14px; background: linear-gradient(90deg,rgba(201,255,61,.35),rgba(34,216,242,.12)); }.ssl-schedule .is-current::before { content: "ON AIR"; position: absolute; top: -1px; left: -1px; padding: 2px 4px; color: #fff; background: #ef3974; font-family: var(--ssl-display); font-size: 5px; font-weight: 900; letter-spacing: .1em; }
.ssl-cup-date { display: flex; flex-direction: column; align-items: center; margin-top: 23px; padding: 25px; color: #fff; background: linear-gradient(110deg,#283ed0,#8754f3 58%,#16cce4); box-shadow: 0 18px 38px rgba(71,73,196,.23); clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }.ssl-cup-date small { color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 8px; font-weight: 900; letter-spacing: .22em; }.ssl-cup-date strong { margin: 5px 0 2px; font-family: var(--ssl-display); font-size: 25px; font-weight: 1000; }.ssl-cup-date span { font-size: 9px; }

/* Rule: TV graphics */
.ssl-formula { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 25px 0; padding: 19px 8px 9px; background: linear-gradient(110deg,#1e2b75,#4932a7); box-shadow: 0 16px 35px rgba(40,47,125,.2); }
.ssl-formula::before { content: "HOW TO SCORE"; position: absolute; top: -10px; left: 10px; padding: 4px 9px; color: #10162d; background: var(--ssl-lime); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .14em; transform: skewX(-12deg); }
.ssl-formula span { display: grid; place-items: center; min-height: 65px; padding: 6px; border: 1px solid rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.08); font-size: 9px; font-weight: 900; text-align: center; }
.ssl-formula i { position: absolute; top: 43px; z-index: 2; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #15204c; background: var(--ssl-cyan); font-size: 11px; font-weight: 1000; font-style: normal; }.ssl-formula i:nth-of-type(1) { left: calc(33.33% - 7px); }.ssl-formula i:nth-of-type(2) { left: calc(66.66% - 12px); }
.ssl-formula b { grid-column: 1/-1; padding: 11px; color: var(--ssl-ink); background: linear-gradient(90deg,var(--ssl-cyan),var(--ssl-lime)); text-align: center; font-family: var(--ssl-display); font-size: 13px; font-weight: 1000; letter-spacing: .05em; }
.ssl-phrase-select { display: flex; align-items: center; justify-content: space-between; margin: 23px 0 13px; padding: 10px 12px; border: 1px solid rgba(60,104,255,.15); background: rgba(255,255,255,.82); }.ssl-phrase-select label { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .12em; }.ssl-phrase-select select { min-width: 120px; padding: 8px; border: 1px solid rgba(60,104,255,.2); border-radius: 0; color: #fff; background: #303fc2; font-size: 11px; font-weight: 800; }
.ssl-bonus-dates { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.ssl-bonus-dates div { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 15px; border: 1px solid rgba(60,104,255,.12); background: rgba(255,255,255,.82); box-shadow: 0 9px 18px rgba(48,65,130,.07); }.ssl-bonus-dates div::before { content: "BOOST DAY"; color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 6px; font-weight: 1000; letter-spacing: .12em; }.ssl-bonus-dates div:nth-child(3) { background: linear-gradient(135deg,#2a3ed0,#7b4ff1); }.ssl-bonus-dates div:nth-child(3)::before, .ssl-bonus-dates div:nth-child(3) span, .ssl-bonus-dates div:nth-child(3) small { color: #fff; }.ssl-bonus-dates div:last-child { grid-column: 1/-1; background: linear-gradient(90deg,rgba(201,255,61,.32),rgba(34,216,242,.18)); }.ssl-bonus-dates span { color: #5b6579; font-size: 9px; }.ssl-bonus-dates b { color: var(--ssl-ink); font-family: var(--ssl-display); font-size: 35px; font-weight: 1000; line-height: 1.08; letter-spacing: -.05em; }.ssl-bonus-dates div:nth-child(3) b { color: var(--ssl-lime); }.ssl-bonus-dates small { color: #778094; font-size: 8px; font-weight: 700; }
.ssl-table-wrap { overflow-x: auto; margin: 0 0 23px; border-top: 4px solid var(--ssl-blue); background: #fff; box-shadow: 0 10px 25px rgba(39,56,113,.07); } table { width: 100%; min-width: 280px; border-collapse: collapse; } caption { padding: 12px 8px; color: var(--ssl-ink); text-align: left; font-size: 10px; font-weight: 900; } th, td { padding: 10px 14px; border-top: 1px solid var(--ssl-line); font-size: 11px; } th { text-align: left; font-weight: 700; } td { color: var(--ssl-blue); text-align: right; font-family: var(--ssl-display); font-size: 13px; font-weight: 1000; }
.ssl-subtitle { margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--ssl-cyan); font-size: 17px; font-weight: 1000; }.ssl-bonus-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.ssl-bonus-grid span { display: flex; flex-direction: column; padding: 10px 4px; border: 1px solid var(--ssl-line); background: #fff; text-align: center; font-size: 8px; font-weight: 800; }.ssl-bonus-grid b { color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 19px; font-weight: 1000; }.ssl-plain-list { padding-left: 18px; color: var(--ssl-muted); font-size: 9px; }
.ssl-route-card { position: relative; margin: 13px 0; padding: 24px 17px 18px; overflow: hidden; border: 1px solid rgba(60,104,255,.16); background: #fff; box-shadow: 0 14px 28px rgba(38,53,112,.1); }.ssl-route-card::after { content: ""; position: absolute; z-index: 0; width: 140px; height: 140px; right: -80px; top: -80px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); opacity: .19; }.ssl-route-card:nth-of-type(2)::after { background: linear-gradient(135deg,var(--ssl-lime),var(--ssl-cyan)); }.ssl-route-card > * { position: relative; z-index: 1; }.ssl-route-card > small { display: inline-block; padding: 3px 8px; color: #fff; background: var(--ssl-blue); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .17em; transform: skewX(-12deg); }.ssl-route-card > strong { display: block; margin-top: 9px; font-size: 14px; font-weight: 900; }.ssl-route-card > b { position: absolute; top: 16px; right: 15px; color: var(--ssl-ink); font-family: var(--ssl-display); font-size: 30px; font-weight: 1000; }.ssl-route-card p { margin: 12px 0 0; font-size: 9px; line-height: 1.8; }.ssl-route-breakdown { display: grid; grid-template-columns: repeat(6,1fr); margin-top: 14px; border: 1px solid var(--ssl-line); }.ssl-route-breakdown span { display: flex; flex-direction: column; padding: 5px 1px; border-right: 1px solid var(--ssl-line); text-align: center; font-family: var(--ssl-display); font-size: 7px; font-weight: 800; }.ssl-route-breakdown span:last-child { border: 0; }.ssl-route-breakdown b { color: var(--ssl-purple); font-size: 16px; font-weight: 1000; }
.ssl-total { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 25px; padding: 30px 20px; overflow: hidden; color: #fff; background: linear-gradient(105deg,#2135bd,#7f4bec 62%,#17cce4); box-shadow: 0 18px 35px rgba(64,68,181,.22); clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); }.ssl-total::before { content: "24"; position: absolute; right: -7px; top: -25px; color: rgba(255,255,255,.1); font-family: var(--ssl-display); font-size: 120px; font-weight: 1000; }.ssl-total span, .ssl-total small { position: relative; color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .24em; }.ssl-total b { position: relative; font-family: var(--ssl-display); font-size: 32px; font-weight: 1000; }

/* Ranking reveal */
.ssl-ranking-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 20px; }.ssl-ranking-tabs button { min-height: 45px; padding: 7px 2px; border: 1px solid rgba(60,104,255,.16); color: #657086; background: #fff; font-family: var(--ssl-display); font-size: 9px; font-weight: 1000; cursor: pointer; }.ssl-ranking-tabs button.is-active { border-color: var(--ssl-green); color: #fff; background: var(--ssl-green); box-shadow: inset 0 -4px 0 var(--ssl-lime); }.ssl-ranking-tabs button:focus-visible { outline: 3px solid rgba(34,216,242,.62); outline-offset: 2px; }.ssl-ranking-panel { display: none; }.ssl-ranking-panel.is-active { display: block; }
.ssl-ranking-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 6px; border-bottom: 4px solid var(--ssl-blue); background: linear-gradient(90deg,#f3f7ff,#f8f3ff); }.ssl-ranking-meta b { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 14px; font-weight: 1000; }.ssl-ranking-meta span { color: var(--ssl-muted); font-size: 7px; }
.ssl-state { margin: 8px 0 22px; padding: 50px 15px; border: 1px solid var(--ssl-line); background: linear-gradient(135deg,#f3f7ff,#f8f2ff); text-align: center; }.ssl-state b { display: block; color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 22px; font-weight: 1000; letter-spacing: .14em; }.ssl-state span { display: block; margin-top: 6px; color: var(--ssl-muted); font-size: 9px; line-height: 1.7; }.ssl-state.is-error b { color: #e44b79; }.ssl-state.is-loading b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px; border: 2px solid rgba(7,61,51,.18); border-top-color: var(--ssl-green-bright); border-radius: 50%; animation: ssl-spin .8s linear infinite; }
@keyframes ssl-spin { to { transform: rotate(360deg); } }
.ssl-rank-row { position: relative; display: grid; grid-template-columns: 45px 43px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 68px; padding: 10px 5px; overflow: hidden; border-bottom: 1px solid var(--ssl-line); background: #fff; }.ssl-rank-row::after { content: ""; position: absolute; width: 70px; height: 2px; right: -12px; bottom: 4px; transform: rotate(-13deg); background: var(--ssl-cyan); opacity: .45; }.ssl-rank-row .rank { color: #263a9e; font-family: var(--ssl-display); font-size: 27px; font-weight: 1000; line-height: 1; text-align: center; letter-spacing: -.08em; }.ssl-rank-row img, .ssl-avatar-placeholder { width: 40px; height: 40px; border: 2px solid #dbe4ff; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg,#dff8ff,#eee2ff); }.ssl-avatar-placeholder { display: grid; place-items: center; color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 14px; font-weight: 1000; }.ssl-rank-row .name { min-width: 0; color: var(--ssl-ink); font-size: 10px; font-weight: 900; overflow-wrap: anywhere; }.ssl-rank-row .name small { display: block; width: max-content; max-width: 100%; margin-top: 3px; padding: 2px 5px; overflow: hidden; border-radius: 2px; color: #fff; background: var(--ssl-green); font-size: 6px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.ssl-rank-row .name small:empty { display: none; }.ssl-rank-row .score { color: var(--ssl-blue); text-align: right; font-family: var(--ssl-display); font-size: 11px; font-weight: 1000; white-space: nowrap; }.ssl-rank-row .score small { display: block; color: #8c65e7; font-family: var(--ssl-body); font-size: 7px; }.ssl-ranking-list .ssl-rank-row:nth-child(-n+3) { margin: 6px 0; border: 1px solid rgba(60,104,255,.15); box-shadow: 0 10px 24px rgba(47,63,128,.1); }.ssl-ranking-list .ssl-rank-row:nth-child(1) { min-height: 88px; background: linear-gradient(100deg,rgba(201,255,61,.25),rgba(34,216,242,.15),#fff 72%); }.ssl-ranking-list .ssl-rank-row:nth-child(1) .rank { color: #8c59ef; font-size: 39px; }.ssl-ranking-list .ssl-rank-row:nth-child(2) .rank { color: #3670dd; font-size: 34px; }.ssl-ranking-list .ssl-rank-row:nth-child(3) .rank { color: #16abc4; font-size: 31px; }

/* Rewards / prime-time finale */
#rewards { min-height: 330px; padding-top: 112px; background: radial-gradient(circle at 50% 15%,rgba(255,255,255,.85),transparent 24%), conic-gradient(from 205deg at 50% 0%,#dffcff,#eef2ff,#f3e8ff,#efffd3,#dffcff) !important; }
#rewards::after { width: 130%; height: 90px; top: 200px; right: -15%; transform: rotate(-8deg); background: linear-gradient(90deg,transparent,rgba(34,216,242,.5),rgba(146,92,255,.55),rgba(201,255,61,.5),transparent); filter: blur(12px); }
.ssl-milestones { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.ssl-milestones article { position: relative; padding: 20px 7px; overflow: hidden; border: 1px solid rgba(60,104,255,.14); background: linear-gradient(145deg,#fff,#f0f6ff); text-align: center; box-shadow: 0 12px 25px rgba(43,58,119,.09); }.ssl-milestones article::after { content: ""; position: absolute; width: 60px; height: 60px; right: -35px; bottom: -35px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); }.ssl-milestones small { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .04em; }.ssl-milestones strong { display: block; margin-top: 7px; color: var(--ssl-ink); font-size: 10px; line-height: 1.6; }.ssl-milestones b { color: var(--ssl-purple); font-size: 17px; }
.ssl-podium { display: grid; gap: 8px; }.ssl-podium article { display: grid; grid-template-columns: 49px 1fr; align-items: center; padding: 13px; border: 1px solid var(--ssl-line); background: #fff; box-shadow: 0 7px 18px rgba(43,58,112,.06); }.ssl-podium span { grid-row: 1/3; color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 36px; font-weight: 1000; line-height: 1; }.ssl-podium small { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 6px; font-weight: 1000; letter-spacing: .15em; }.ssl-podium strong { font-size: 12px; font-weight: 900; }
#cup-rewards { background: radial-gradient(circle at 50% 0,rgba(34,216,242,.38),transparent 28%), radial-gradient(circle at 15% 45%,rgba(146,92,255,.22),transparent 30%), radial-gradient(circle at 90% 78%,rgba(201,255,61,.26),transparent 30%), linear-gradient(165deg,#f8fbff,#f3f0ff 58%,#fbfff0) !important; }
#cup-rewards::before { content: ""; position: absolute; z-index: 0; top: 85px; left: 50%; width: 2px; height: 290px; transform-origin: top; transform: rotate(26deg); background: linear-gradient(#fff,rgba(34,216,242,.65),transparent); box-shadow: 0 0 22px rgba(34,216,242,.8); }
.ssl-award { position: relative; margin: 11px 0; padding: 19px; overflow: hidden; border: 1px solid rgba(60,104,255,.13); color: var(--ssl-ink); background: rgba(255,255,255,.83); box-shadow: 0 15px 32px rgba(50,62,128,.11); backdrop-filter: blur(7px); }.ssl-award::before { content: ""; position: absolute; width: 110px; height: 110px; right: -55px; bottom: -60px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); opacity: .3; }.ssl-award--first { min-height: 260px; border: 0; color: #fff; background: radial-gradient(circle at 50% 8%,rgba(255,255,255,.35),transparent 20%), linear-gradient(140deg,#2639c3,#8351ef 62%,#16cce4); box-shadow: 0 22px 45px rgba(66,65,180,.28); }.ssl-award--first::after { content: ""; position: absolute; width: 330px; height: 160px; left: -35px; top: -65px; border-radius: 50%; border: 2px solid rgba(255,255,255,.24); box-shadow: 0 0 25px rgba(255,255,255,.22), inset 0 0 25px rgba(255,255,255,.17); transform: rotate(-8deg); }.ssl-award > div { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(60,104,255,.12); }.ssl-award--first > div { border-color: rgba(255,255,255,.24); }.ssl-award small { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .17em; }.ssl-award--first small { color: var(--ssl-lime); }.ssl-award > div b { font-family: var(--ssl-display); font-size: 54px; font-weight: 1000; line-height: 1; letter-spacing: -.08em; }.ssl-award--first > div b { font-size: 82px; text-shadow: 3px 3px 0 rgba(34,216,242,.35); }.ssl-award h3 { position: relative; z-index: 1; font-size: 18px; font-weight: 1000; line-height: 1.45; }.ssl-award ul { position: relative; z-index: 1; margin: 13px 0 0; padding-left: 19px; font-size: 10px; font-weight: 700; }.ssl-award p { position: relative; z-index: 1; margin: 13px 0 0; font-size: 10px; }.ssl-trophy { display: grid; grid-template-columns: 55px 1fr; gap: 12px; align-items: center; margin-top: 22px; padding: 19px; border: 1px solid rgba(60,104,255,.2); background: linear-gradient(110deg,#fff,#ecf7ff,#f1ebff); box-shadow: 0 12px 27px rgba(43,57,116,.1); }.ssl-trophy > span { color: var(--ssl-purple); text-align: center; font-size: 43px; text-shadow: 0 0 18px rgba(146,92,255,.35); }.ssl-trophy small { display: block; color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .16em; }.ssl-trophy b { font-size: 11px; font-weight: 900; }.ssl-trophy p { margin: 4px 0 0; font-size: 8px; }
#media-rewards { background: linear-gradient(145deg,#fff,#f2f7ff 58%,#f7f0ff); }
#media-rewards::before { content: ""; position: absolute; z-index: 0; width: 370px; height: 190px; left: 50%; bottom: 60px; transform: translateX(-50%); border: 10px solid #1b2142; border-radius: 5px; background: radial-gradient(circle at 50% 0,rgba(255,255,255,.8),transparent 20%), linear-gradient(130deg,#2d46cc,#8c55ed,#18cae7); box-shadow: 0 20px 35px rgba(24,31,69,.2); opacity: .11; }
.ssl-cities { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin: 23px 0; }.ssl-cities span { padding: 10px 2px; border-top: 3px solid var(--ssl-cyan); border-bottom: 3px solid var(--ssl-purple); background: rgba(255,255,255,.75); text-align: center; font-size: 9px; font-weight: 900; }.ssl-button--outline { width: 100%; border: 2px solid var(--ssl-blue); color: var(--ssl-blue); background: rgba(255,255,255,.8); }

/* FAQ + footer + overlays */
.ssl-faq-item { border-bottom: 1px solid var(--ssl-line); }.ssl-faq-item summary { position: relative; padding: 17px 38px 17px 30px; color: var(--ssl-ink); cursor: pointer; list-style: none; font-size: 11px; font-weight: 900; line-height: 1.6; }.ssl-faq-item summary::-webkit-details-marker { display: none; }.ssl-faq-item summary::before { content: "Q"; position: absolute; left: 3px; color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 20px; font-weight: 1000; }.ssl-faq-item summary::after { content: "＋"; position: absolute; right: 7px; color: var(--ssl-blue); font-size: 17px; }.ssl-faq-item[open] { background: linear-gradient(90deg,rgba(34,216,242,.08),rgba(146,92,255,.07)); }.ssl-faq-item[open] summary::after { content: "−"; }.ssl-faq-item p { position: relative; margin: 0; padding: 0 8px 18px 30px; color: #586278; font-size: 10px; line-height: 1.8; }.ssl-faq-item p::before { content: "A"; position: absolute; left: 3px; color: var(--ssl-green); font-family: var(--ssl-display); font-size: 17px; font-weight: 1000; }.ssl-notice-list { margin: 0; padding-left: 18px; }.ssl-notice-list li { margin-bottom: 9px; color: #606a7f; font-size: 9px; line-height: 1.8; }
.ssl-footer { position: relative; padding: 72px 22px 125px; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(circle at 50% 0,rgba(34,216,242,.32),transparent 28%), linear-gradient(155deg,#151c48,#35256f 62%,#19264b); }.ssl-footer::before { content: ""; position: absolute; width: 420px; height: 2px; left: -80px; top: 120px; transform: rotate(-14deg); background: linear-gradient(90deg,transparent,var(--ssl-cyan),var(--ssl-lime),transparent); box-shadow: 0 0 20px var(--ssl-cyan); }.ssl-footer > * { position: relative; }.ssl-footer > small { color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 8px; font-weight: 1000; letter-spacing: .23em; }.ssl-footer h2 { margin: 14px 0 22px; font-size: 27px; font-weight: 1000; line-height: 1.45; }.ssl-footer p { color: #d6daf0; font-size: 10px; }.ssl-footer__actions { display: grid; gap: 7px; margin-top: 27px; }.ssl-footer__actions a { padding: 11px; border: 1px solid rgba(255,255,255,.24); color: #fff; background: rgba(255,255,255,.05); text-decoration: none; font-size: 9px; font-weight: 800; }.ssl-copyright { margin: 45px 0 0 !important; font-family: var(--ssl-display) !important; font-size: 7px !important; letter-spacing: .13em; }
.ssl-fixed-cta { position: fixed; z-index: 90; left: 50%; bottom: max(10px,env(safe-area-inset-bottom)); width: min(calc(100% - 24px),456px); padding: 5px; transform: translateX(-50%); background: rgba(255,255,255,.92); box-shadow: 0 9px 30px rgba(22,32,70,.25); backdrop-filter: blur(10px); }.ssl-fixed-cta a { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 10px; clip-path: polygon(3% 0,100% 0,97% 100%,0 100%); color: #fff; background: linear-gradient(100deg,var(--ssl-green),#1f5d51); text-decoration: none; font-size: 11px; font-weight: 900; }.ssl-fixed-cta a::after { content: ""; position: absolute; width: 90px; height: 2px; right: -15px; top: 7px; transform: rotate(-14deg); background: var(--ssl-lime); box-shadow: 0 0 10px var(--ssl-lime); }.ssl-fixed-cta span { color: var(--ssl-lime); font-family: var(--ssl-display); font-size: 6px; font-weight: 1000; letter-spacing: .18em; }
.ssl-lightbox, .ssl-modal { display: none; position: fixed; z-index: 1000; inset: 0; align-items: center; justify-content: center; padding: 18px; background: rgba(10,14,35,.93); backdrop-filter: blur(8px); }.ssl-lightbox.is-active, .ssl-modal.is-active { display: flex; }.ssl-lightbox img { max-width: min(86vw,430px); max-height: 82vh; object-fit: contain; box-shadow: 0 20px 60px #000; }.ssl-lightbox button, .ssl-modal__close { position: absolute; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); font-size: 27px; cursor: pointer; }.ssl-lightbox__close { top: 14px; right: 14px; }.ssl-lightbox__prev { left: 7px; }.ssl-lightbox__next { right: 7px; }.ssl-lightbox > span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-family: var(--ssl-display); font-size: 10px; font-weight: 900; }.ssl-modal__card { position: relative; width: min(100%,410px); max-height: 88vh; overflow: auto; padding: 35px 25px; background: linear-gradient(145deg,#fff,#f2f7ff,#f5efff); box-shadow: 0 22px 70px rgba(0,0,0,.4); }.ssl-modal__card::before { content: ""; position: absolute; width: 160px; height: 4px; left: 0; top: 0; background: linear-gradient(90deg,var(--ssl-blue),var(--ssl-cyan),var(--ssl-purple),var(--ssl-lime)); }.ssl-modal__card > small { color: var(--ssl-blue); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .2em; }.ssl-modal__card h2 { margin: 8px 35px 20px 0; color: var(--ssl-ink); font-size: 21px; font-weight: 1000; }.ssl-modal__card p { font-size: 10px; line-height: 1.9; }.ssl-modal__card > b { display: block; padding: 13px; color: #fff; background: linear-gradient(90deg,var(--ssl-blue),var(--ssl-purple)); text-align: center; font-size: 10px; }.ssl-modal__close { top: 12px; right: 12px; border-color: var(--ssl-line); color: var(--ssl-ink); background: #fff; }.ssl-overlay-open { overflow: hidden; }

@media (max-width: 374px) {
  .ssl-hero { min-height: 720px; padding: 24px 14px; }
  .ssl-logo-slot { margin-top: 15px; }
  .ssl-hero__copy { margin-top: 10px; font-size: 21px; }
  .ssl-hero__facts span { font-size: 6px; }
  .ssl-section { padding-left: 16px; padding-right: 16px; }
  .ssl-heading h2 { font-size: 26px; }
  .ssl-chapter::before { right: 8px; font-size: 103px; }
  .ssl-route-card > b { position: static; display: block; margin-top: 4px; }
  .ssl-cities span { font-size: 8px; }
  .ssl-rank-row { grid-template-columns: 38px 36px minmax(0,1fr) auto; gap: 5px; }
  .ssl-rank-row img, .ssl-avatar-placeholder { width: 34px; height: 34px; }
  .ssl-rank-row .rank { font-size: 24px; }
}
@media (min-width: 700px) { body { padding: 24px 0; }.ssl-fixed-cta { bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.ssl-panel.is-active, .ssl-state.is-loading b::after { animation: none; } }

/* Reference-informed brand balance: deep green is the brand, color is the stage light. */
:root {
  --ssl-green: #073d33;
  --ssl-green-bright: #096b59;
  --ssl-emerald: #00aa83;
  --ssl-gold-special: #f2c84b;
}

.ssl-hero__facts li { border-top: 3px solid var(--ssl-green-bright); }
.ssl-hero__facts li:nth-child(2) { border-top-color: var(--ssl-cyan); }
.ssl-hero__facts li:nth-child(3) { border-top-color: var(--ssl-purple); }
.ssl-hero__facts li:nth-child(4) { border-top-color: var(--ssl-lime); }
.ssl-hero__facts b { color: #fff; }

.ssl-section::after { background: linear-gradient(90deg,transparent,rgba(0,170,131,.42),rgba(34,216,242,.72),rgba(146,92,255,.34)); }
.ssl-section:nth-of-type(even) { background: linear-gradient(155deg,#f8fbfa,#f1f8f6 34%,#f3f6ff 69%,#faf7ff); }
.ssl-section--ivory { background: linear-gradient(145deg,#f7faf9,#edf5f3 48%,#f1f4fb) !important; }
.ssl-heading span { color: var(--ssl-green-bright); }
.ssl-heading span::before { background: linear-gradient(90deg,var(--ssl-green),var(--ssl-emerald),var(--ssl-cyan),var(--ssl-purple)); }
.ssl-heading h2 { color: var(--ssl-green); }
.ssl-chapter::before { color: rgba(7,61,51,.065); }
.ssl-chapter .ssl-heading::before { background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright),var(--ssl-emerald)); }
.ssl-statement { background: linear-gradient(115deg,var(--ssl-green),var(--ssl-green-bright) 48%,#176f85 73%,var(--ssl-purple)); box-shadow: 0 18px 38px rgba(7,61,51,.22); }

#difference {
  background:
    linear-gradient(118deg,transparent 0 68%,rgba(34,216,242,.13) 68% 72%,transparent 72%),
    radial-gradient(circle at 8% 10%,rgba(0,170,131,.18),transparent 35%),
    radial-gradient(circle at 93% 78%,rgba(146,92,255,.18),transparent 35%),
    linear-gradient(145deg,#f7fcfa,#eef8f6 48%,#f4f1ff) !important;
}
.ssl-path article.is-current { background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--ssl-green),var(--ssl-emerald),var(--ssl-cyan),var(--ssl-purple)) border-box; }
.ssl-path__goal { background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright),#277a8f); }
.ssl-check-list li::before { background: linear-gradient(135deg,var(--ssl-green-bright),var(--ssl-emerald)); }
.ssl-cup-date { background: linear-gradient(110deg,var(--ssl-green),var(--ssl-green-bright) 46%,#176f85 68%,var(--ssl-purple)); box-shadow: 0 18px 38px rgba(7,61,51,.25); }

/* BOOST DAYS is a dark stage segment, not a classic solid-green panel. */
#multiplier {
  color: #fff;
  background:
    linear-gradient(116deg,transparent 0 62%,rgba(34,216,242,.09) 62% 66%,transparent 66%),
    radial-gradient(circle at 50% 5%,rgba(34,216,242,.24),transparent 28%),
    radial-gradient(circle at 92% 42%,rgba(146,92,255,.26),transparent 34%),
    radial-gradient(circle at 8% 86%,rgba(201,255,61,.13),transparent 30%),
    linear-gradient(150deg,#052f28,#073d33 45%,#083d4b 72%,#231d56) !important;
}
#multiplier::before { content: ""; position: absolute; z-index: 0; width: 520px; height: 230px; left: 50%; bottom: -150px; transform: translateX(-50%); border-radius: 50%; border: 2px solid rgba(34,216,242,.22); box-shadow: 0 0 40px rgba(34,216,242,.19),inset 0 0 35px rgba(146,92,255,.16); }
#multiplier .ssl-heading h2,#multiplier .ssl-heading span,#multiplier > p { color: #fff; }
#multiplier .ssl-heading span::before { background: linear-gradient(90deg,var(--ssl-lime),var(--ssl-cyan),var(--ssl-purple)); }
#multiplier .ssl-phrase-select { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
#multiplier .ssl-phrase-select label { color: var(--ssl-lime); }
#multiplier .ssl-phrase-select select { border-color: rgba(255,255,255,.2); background: rgba(5,47,40,.9); }
#multiplier .ssl-bonus-dates div { border-color: rgba(34,216,242,.26); color: #fff; background: linear-gradient(155deg,rgba(255,255,255,.11),rgba(0,170,131,.08)); box-shadow: 0 0 22px rgba(34,216,242,.08); }
#multiplier .ssl-bonus-dates div:nth-child(3) { border-color: rgba(242,200,75,.58); background: radial-gradient(circle at 50% 0,rgba(242,200,75,.22),transparent 52%),linear-gradient(145deg,#65336e,#4c235e); box-shadow: 0 0 28px rgba(242,200,75,.19); }
#multiplier .ssl-bonus-dates div:last-child { background: linear-gradient(90deg,rgba(0,170,131,.28),rgba(34,216,242,.15),rgba(146,92,255,.17)); }
#multiplier .ssl-bonus-dates span,#multiplier .ssl-bonus-dates small { color: #d6e8e3; }
#multiplier .ssl-bonus-dates b { color: #fff; }
#multiplier .ssl-bonus-dates div:nth-child(3) b { color: var(--ssl-gold-special); }
#multiplier .ssl-bonus-dates div::before { color: var(--ssl-cyan); }

.ssl-formula { background: linear-gradient(110deg,var(--ssl-green),#124e65 52%,#493278); box-shadow: 0 16px 35px rgba(7,61,51,.22); }
.ssl-formula::before { background: var(--ssl-lime); }
.ssl-table-wrap { border-top-color: var(--ssl-green-bright); }
.ssl-subtitle { border-bottom-color: var(--ssl-emerald); }
.ssl-route-card > small { background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright)); }
.ssl-route-card::after { background: linear-gradient(135deg,var(--ssl-emerald),var(--ssl-cyan),var(--ssl-purple)); }
.ssl-route-breakdown b { color: var(--ssl-green-bright); }
.ssl-total { background: linear-gradient(105deg,var(--ssl-green),var(--ssl-green-bright) 50%,#176f85 72%,var(--ssl-purple)); box-shadow: 0 18px 35px rgba(7,61,51,.24); }
.ssl-total b { color: #fff; }.ssl-total b::first-letter { color: var(--ssl-gold-special); }

.ssl-ranking-meta { border-bottom-color: var(--ssl-green-bright); background: linear-gradient(90deg,#edf8f5,#f2f8ff,#f6f1ff); }
.ssl-ranking-meta b { color: var(--ssl-green); }
.ssl-rank-row .rank { color: var(--ssl-green-bright); }
.ssl-ranking-list .ssl-rank-row:nth-child(1) { border-color: rgba(242,200,75,.45); background: linear-gradient(100deg,rgba(242,200,75,.16),rgba(201,255,61,.15),rgba(34,216,242,.10),#fff 76%); }
.ssl-ranking-list .ssl-rank-row:nth-child(1) .rank { color: #c69711; }
.ssl-ranking-list .ssl-rank-row:nth-child(2) .rank { color: #6e7e91; }
.ssl-ranking-list .ssl-rank-row:nth-child(3) .rank { color: #a7644b; }

#rewards {
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.92),transparent 24%),
    radial-gradient(circle at 8% 88%,rgba(0,170,131,.22),transparent 30%),
    conic-gradient(from 205deg at 50% 0%,#e6f9f4,#eff9ff,#f3eaff,#edffe1,#e4f8f2) !important;
}
#rewards .ssl-heading h2 { color: var(--ssl-green); }

/* Champion Cup uses gold only as the award light. */
#cup-rewards {
  color: #fff;
  background:
    radial-gradient(circle at 50% 0,rgba(242,200,75,.22),transparent 25%),
    radial-gradient(circle at 8% 42%,rgba(0,170,131,.26),transparent 31%),
    radial-gradient(circle at 92% 72%,rgba(146,92,255,.28),transparent 31%),
    linear-gradient(160deg,#052f28,#073d33 42%,#0b3b4a 67%,#231d54) !important;
}
#cup-rewards .ssl-heading h2,#cup-rewards .ssl-heading span { color: #fff; }
#cup-rewards .ssl-heading span::before { background: linear-gradient(90deg,var(--ssl-gold-special),var(--ssl-lime),var(--ssl-cyan)); }
#cup-rewards .ssl-award { color: var(--ssl-ink); background: rgba(255,255,255,.93); }
#cup-rewards .ssl-award--first { color: #fff; background: radial-gradient(circle at 50% 5%,rgba(242,200,75,.32),transparent 23%),linear-gradient(140deg,#594414,#9a7015 35%,#073d33 70%,#0d5863); box-shadow: 0 0 0 1px rgba(242,200,75,.65),0 22px 48px rgba(0,0,0,.25),0 0 35px rgba(242,200,75,.12); }
#cup-rewards .ssl-award--first small,#cup-rewards .ssl-award--first > div b { color: var(--ssl-gold-special); }
#cup-rewards .ssl-caption { color: #c9dcd6 !important; }
.ssl-trophy { border-color: rgba(242,200,75,.45); background: linear-gradient(110deg,#fff,#edf9f5,#f2efff); }
.ssl-trophy > span { color: #c69711; text-shadow: 0 0 18px rgba(242,200,75,.32); }

#media-rewards { background: linear-gradient(145deg,#fff,#edf8f5 48%,#f1f7ff 73%,#f6f0ff); }
.ssl-cities span { border-top-color: var(--ssl-green-bright); border-bottom-color: var(--ssl-cyan); }
.ssl-button--outline { border-color: var(--ssl-green); color: var(--ssl-green); }
.ssl-faq-item summary::before,.ssl-faq-item summary::after { color: var(--ssl-green-bright); }
.ssl-faq-item[open] { background: linear-gradient(90deg,rgba(0,170,131,.08),rgba(34,216,242,.07),rgba(146,92,255,.05)); }
.ssl-footer { background: radial-gradient(circle at 50% 0,rgba(34,216,242,.25),transparent 28%),linear-gradient(155deg,#052f28,#073d33 50%,#0d3c4b 73%,#231d54); }

@media (max-width: 374px) {
  .ssl-logo-slot::before { width: min(94vw,320px); }
}

/* Compact content */
.ssl-section-lead { color: var(--ssl-ink) !important; font-size: 14px !important; font-weight: 800; line-height: 1.85 !important; }

.ssl-lightbox img { display: block; width: auto; height: auto; max-width: min(94vw,960px); max-height: 82vh; object-fit: contain; }

.ssl-target-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 24px 0 12px; }
.ssl-target-cards article { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 128px; padding: 13px 6px; overflow: hidden; border: 1px solid rgba(0,170,131,.18); background: rgba(255,255,255,.9); text-align: center; box-shadow: 0 10px 22px rgba(7,61,51,.08); }
.ssl-target-cards article::before { content: ""; position: absolute; width: 75px; height: 75px; top: -48px; right: -32px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-emerald),var(--ssl-cyan),var(--ssl-purple)); opacity: .28; }
.ssl-target-cards span { color: var(--ssl-green-bright); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .14em; }
.ssl-target-cards b { margin: 8px 0 5px; color: var(--ssl-green); font-family: var(--ssl-display); font-size: 19px; font-weight: 1000; line-height: 1.05; }
.ssl-target-cards small { color: #68738a; font-size: 7px; font-weight: 700; line-height: 1.5; }
.ssl-auto-entry { margin: 0 0 19px !important; padding: 10px; color: #fff !important; background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright)); text-align: center; font-size: 10px !important; font-weight: 900; line-height: 1.6 !important; }

.ssl-schedule-visual { position: relative; padding-top: 38px; overflow: hidden; border: 1px solid rgba(0,170,131,.15); background: linear-gradient(145deg,#fff,#edf8f5 55%,#f2f1ff); box-shadow: 0 13px 28px rgba(7,61,51,.09); }
.ssl-schedule-visual::before { content: "6 PHRASES / 3 MONTHS"; position: absolute; inset: 0 0 auto; height: 38px; padding: 9px 13px; color: #fff; background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright),#176f85,var(--ssl-purple)); font-family: var(--ssl-display); font-size: 9px; font-weight: 1000; letter-spacing: .16em; }
.ssl-schedule-visual > div { padding-left: 13px; padding-right: 13px; background: rgba(255,255,255,.56); }
.ssl-schedule-visual > div:nth-child(even) { background: rgba(0,170,131,.06); }

.ssl-bonus-catch { margin: -3px 0 15px !important; color: var(--ssl-green) !important; font-size: 13px !important; font-weight: 1000; line-height: 1.6 !important; }
.ssl-route-details { margin-top: 18px; background: rgba(255,255,255,.72); }

/* SSL-exclusive Phrase bonuses */
#phrase-bonuses { background: radial-gradient(circle at 100% 8%,rgba(34,216,242,.18),transparent 28%),radial-gradient(circle at 0 72%,rgba(146,92,255,.12),transparent 31%),linear-gradient(155deg,#fff,#eff9f6 48%,#f3f5ff); }
.ssl-phrase-bonus-card { position: relative; margin: 16px 0; padding: 20px 17px 18px; overflow: hidden; border: 1px solid rgba(7,61,51,.14); border-top: 5px solid var(--ssl-emerald); background: rgba(255,255,255,.94); box-shadow: 0 13px 28px rgba(7,61,51,.10); }
.ssl-phrase-bonus-card::after { content: ""; position: absolute; width: 105px; height: 105px; right: -65px; bottom: -62px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); opacity: .22; }
.ssl-phrase-bonus-card--items { border-top-color: var(--ssl-purple); }
.ssl-phrase-bonus-card--items::after { background: linear-gradient(135deg,var(--ssl-purple),var(--ssl-lime)); }
.ssl-phrase-bonus-card__head { position: relative; z-index: 1; display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 11px; align-items: center; }
.ssl-phrase-bonus-card__head > span { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(0,170,131,.32); color: var(--ssl-green); background: linear-gradient(135deg,#eafff7,#e7f8ff); font-family: var(--ssl-display); font-size: 25px; font-weight: 1000; box-shadow: 0 0 18px rgba(34,216,242,.20); }
.ssl-phrase-bonus-card--items .ssl-phrase-bonus-card__head > span { border-color: rgba(146,92,255,.32); color: var(--ssl-purple); background: linear-gradient(135deg,#f2efff,#eafcff); }
.ssl-phrase-bonus-card__head small { display: block; color: var(--ssl-green-bright); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .16em; }
.ssl-phrase-bonus-card__head h3 { margin: 3px 0 0; color: var(--ssl-green); font-size: 18px; font-weight: 1000; line-height: 1.35; }
.ssl-phrase-bonus-card > p { position: relative; z-index: 1; margin: 14px 0 12px; color: #52645f; font-size: 11px; font-weight: 700; line-height: 1.75; }
.ssl-threshold-grid { position: relative; z-index: 1; display: grid; gap: 6px; }
.ssl-threshold-grid--four { grid-template-columns: repeat(2,1fr); }
.ssl-threshold-grid--three { grid-template-columns: repeat(3,1fr); }
.ssl-threshold-grid > span { display: flex; min-height: 72px; flex-direction: column; justify-content: center; padding: 9px 5px; border: 1px solid rgba(7,61,51,.12); background: linear-gradient(145deg,#f9fffd,#edf9f6); text-align: center; }
.ssl-phrase-bonus-card--items .ssl-threshold-grid > span { background: linear-gradient(145deg,#fff,#f3efff); }
.ssl-threshold-grid small { color: #60736d; font-size: 9px; font-weight: 900; }
.ssl-threshold-grid b { margin-top: 5px; color: var(--ssl-green-bright); font-family: var(--ssl-display); font-size: 18px; font-weight: 1000; line-height: 1; white-space: nowrap; }
.ssl-phrase-bonus-card--items .ssl-threshold-grid b { color: var(--ssl-purple); }
.ssl-add-to-badge { position: relative; z-index: 1; display: block; margin-top: 12px; padding: 8px; color: #fff; background: linear-gradient(90deg,var(--ssl-green),var(--ssl-green-bright)); text-align: center; font-size: 10px; font-weight: 1000; }
.ssl-phrase-bonus-card--items .ssl-add-to-badge { background: linear-gradient(90deg,var(--ssl-green),#176f85,var(--ssl-purple)); }
.ssl-bonus-conditions { position: relative; z-index: 1; margin: 13px 0 0; padding: 12px 12px 12px 29px; color: #53655f; background: #f4f7f6; font-size: 10px; font-weight: 700; line-height: 1.75; }
.ssl-bonus-conditions li + li { margin-top: 5px; }
.ssl-bonus-destination { display: grid; grid-template-columns: minmax(0,1fr) 25px minmax(0,1fr); align-items: stretch; margin-top: 24px; padding: 10px; border: 1px solid rgba(7,61,51,.16); background: rgba(255,255,255,.72); box-shadow: 0 12px 27px rgba(7,61,51,.08); }
.ssl-bonus-destination > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 13px 7px; border-top: 4px solid var(--ssl-emerald); background: #fff; text-align: center; }
.ssl-bonus-destination > i { display: grid; place-items: center; color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 18px; font-weight: 1000; font-style: normal; }
.ssl-bonus-destination .ssl-bonus-destination__league { border-top-color: var(--ssl-purple); background: #f5f1ff; }
.ssl-bonus-destination small { color: #6c7e78; font-family: var(--ssl-display); font-size: 6px; font-weight: 1000; letter-spacing: .08em; }
.ssl-bonus-destination b { margin-top: 6px; color: var(--ssl-green); font-size: 12px; font-weight: 1000; line-height: 1.4; }
.ssl-bonus-destination span { margin-top: 5px; color: #6b7774; font-size: 8px; font-weight: 700; line-height: 1.45; }
.ssl-bonus-destination__league b { color: var(--ssl-purple); }
.ssl-league-only-badge { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; margin: 35px 0 17px; padding: 13px 15px; border-left: 5px solid var(--ssl-purple); background: linear-gradient(90deg,#f1edff,#f5f9ff); }
.ssl-league-only-badge small { grid-row: 1/3; color: var(--ssl-purple); font-family: var(--ssl-display); font-size: 7px; font-weight: 1000; letter-spacing: .12em; }
.ssl-league-only-badge b { color: var(--ssl-purple); font-size: 14px; font-weight: 1000; }
.ssl-league-only-badge span { color: #5e687a; font-size: 9px; font-weight: 800; }
.ssl-league-only-badge + .ssl-subtitle { margin-top: 0; }

@media (max-width: 374px) {
  .ssl-phrase-bonus-card { padding-left: 12px; padding-right: 12px; }
  .ssl-threshold-grid--three { gap: 4px; }
  .ssl-threshold-grid--three > span { padding-left: 2px; padding-right: 2px; }
  .ssl-threshold-grid--three b { font-size: 15.5px; }
  .ssl-threshold-grid--three small { font-size: 8px; }
  .ssl-bonus-destination { grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); padding: 6px; }
  .ssl-bonus-destination > div { padding-left: 4px; padding-right: 4px; }
  .ssl-bonus-destination b { font-size: 11px; }
}

/* Rewards hierarchy */
.ssl-reward-block { margin: 0 -4px 18px; padding: 22px 16px; border: 1px solid var(--ssl-line); }
.ssl-reward-block .ssl-heading { margin-bottom: 20px; }
.ssl-reward-block .ssl-heading--small { margin-top: 0; }
.ssl-reward-block--phrase-rank { border-top: 5px solid var(--ssl-green); background: linear-gradient(145deg,#eff9f6,#f1f8ff); }
.ssl-reward-block--points { border-top: 5px solid var(--ssl-cyan); background: linear-gradient(145deg,#f5fbff,#f5f1ff); }
.ssl-reward-block--season { border-top: 5px solid var(--ssl-purple); background: linear-gradient(145deg,#f8f5ff,#f2f8f6); }
.ssl-phrase-rank-prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ssl-phrase-rank-prizes article { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 130px; padding: 15px 10px; overflow: hidden; border: 1px solid rgba(7,61,51,.13); background: #fff; box-shadow: 0 9px 21px rgba(7,61,51,.08); }
.ssl-phrase-rank-prizes article::after { content: ""; position: absolute; width: 74px; height: 74px; right: -45px; bottom: -45px; transform: rotate(45deg); background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); opacity: .28; }
.ssl-phrase-rank-prizes article.is-first { grid-column: 1/-1; min-height: 145px; border-color: rgba(242,200,75,.52); color: #fff; background: radial-gradient(circle at 90% 0,rgba(242,200,75,.28),transparent 35%),linear-gradient(105deg,#765b13,#073d33 56%,#0d5962); box-shadow: 0 14px 30px rgba(7,61,51,.2); }
.ssl-phrase-rank-prizes b { position: relative; z-index: 1; color: var(--ssl-green-bright); font-family: var(--ssl-display); font-size: 31px; font-weight: 1000; line-height: 1; }
.ssl-phrase-rank-prizes .is-first b { color: var(--ssl-gold-special); font-size: 42px; }
.ssl-phrase-rank-prizes strong { position: relative; z-index: 1; margin-top: 11px; color: var(--ssl-ink); font-size: 12px; font-weight: 1000; line-height: 1.55; }
.ssl-phrase-rank-prizes .is-first strong { color: #fff; font-size: 15px; }
.ssl-phrase-rank-prizes small { position: relative; z-index: 1; margin-top: 7px; color: #d7e8e3; font-size: 8px; font-weight: 700; }

/* Champion Cup rank is one Japanese expression: 1位 / 2位 / 3位 / 4〜10位 */
.ssl-award > div { align-items: flex-end; }
.ssl-award > div b { order: 1; color: var(--ssl-green); font-size: 48px; letter-spacing: -.07em; }
.ssl-award > div small { order: 2; margin-bottom: 8px; }
.ssl-award--first > div b { color: var(--ssl-gold-special); font-size: 72px; }
.ssl-award:last-of-type > div b { font-size: 34px; letter-spacing: -.04em; }
.ssl-award h3 { margin: 16px 0 9px; padding-left: 11px; border-left: 4px solid var(--ssl-emerald); font-size: 15px; }
.ssl-award--first h3 { border-left-color: var(--ssl-gold-special); font-size: 18px; }

/* Champion Cup reward cards: compact stage intro and unified information hierarchy. */
#cup-rewards::after { content: ""; position: absolute; z-index: 0; top: 88px; left: -10%; width: 120%; height: 150px; transform: none; clip-path: polygon(50% 0,100% 100%,0 100%); background: repeating-linear-gradient(92deg,transparent 0 8%,rgba(34,216,242,.13) 8.5% 9%,transparent 9.5% 18%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,170,131,.04) 60%,rgba(146,92,255,.16)); filter: blur(.2px); opacity: .55; pointer-events: none; }
#cup-rewards .ssl-heading { margin-bottom: 16px; }
#cup-rewards .ssl-heading + .ssl-award { margin-top: 0; }
#cup-rewards .ssl-award { margin: 9px 0; padding: 16px 18px 17px; }
#cup-rewards .ssl-award > div { min-height: 53px; border-bottom-color: rgba(7,61,51,.13); }
#cup-rewards .ssl-award > div b { font-size: 46px; line-height: .95; }
#cup-rewards .ssl-award > div small { margin-bottom: 7px; font-size: 9px; }
#cup-rewards .ssl-award h3 { margin: 13px 0 8px; padding-left: 10px; font-size: 16px; line-height: 1.5; }
#cup-rewards .ssl-award ul { margin: 9px 0 0; padding-left: 20px; font-size: 11px; line-height: 1.9; }
#cup-rewards .ssl-award li { padding-left: 2px; }
#cup-rewards .ssl-award--first { min-height: 0; color: #f7fbf8; background: radial-gradient(circle at 100% 0,rgba(34,216,242,.22),transparent 32%),radial-gradient(circle at 0 100%,rgba(146,92,255,.16),transparent 35%),linear-gradient(135deg,#0c5145,#087064 54%,#0a5962); box-shadow: 0 0 0 1px rgba(34,216,242,.34),0 16px 34px rgba(0,22,19,.25),0 0 26px rgba(0,170,131,.18); }
#cup-rewards .ssl-award--first { padding-top: 14px; padding-bottom: 14px; }
#cup-rewards .ssl-award--first::before { right: -70px; bottom: -72px; opacity: .13; background: linear-gradient(135deg,var(--ssl-cyan),var(--ssl-purple)); }
#cup-rewards .ssl-award--first::after { display: none; }
#cup-rewards .ssl-award--first > div { min-height: 57px; border-bottom-color: rgba(242,200,75,.62); }
#cup-rewards .ssl-award--first > div b { color: var(--ssl-gold-special); font-size: 56px; text-shadow: none; }
#cup-rewards .ssl-award--first > div small { color: var(--ssl-gold-special); }
#cup-rewards .ssl-award--first h3 { margin-top: 12px; margin-bottom: 7px; border-left-color: var(--ssl-cyan); color: #fff; font-size: 21px; line-height: 1.4; }
#cup-rewards .ssl-award--first ul { margin-top: 7px; color: #f4f8f5; font-size: 11.5px; line-height: 1.75; }
#cup-rewards .ssl-award--first li::marker { color: var(--ssl-cyan); }
#cup-rewards .ssl-award--second { border-left: 5px solid #9ccbd4; background: radial-gradient(circle at 100% 100%,rgba(34,216,242,.16),transparent 31%),linear-gradient(105deg,#fff,#f4fbfd); }
#cup-rewards .ssl-award--second::before { background: linear-gradient(135deg,#c7d4da,var(--ssl-cyan)); opacity: .42; }
#cup-rewards .ssl-award--second > div { position: relative; border-bottom: 0; }
#cup-rewards .ssl-award--second > div::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,#aebdc4,var(--ssl-cyan),transparent); }
#cup-rewards .ssl-award--second > div b,#cup-rewards .ssl-award--second > div small { color: #567c88; }
#cup-rewards .ssl-award--second h3 { border-left-color: #67cbd8; }
#cup-rewards .ssl-award--third { border-left: 5px solid #b9795e; background: radial-gradient(circle at 100% 100%,rgba(146,92,255,.13),transparent 31%),linear-gradient(105deg,#fff,#fcf7f5); }
#cup-rewards .ssl-award--third::before { background: linear-gradient(135deg,#bd7654,var(--ssl-purple)); opacity: .38; }
#cup-rewards .ssl-award--third > div { position: relative; border-bottom: 0; }
#cup-rewards .ssl-award--third > div::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,#b16c50,var(--ssl-purple),transparent); }
#cup-rewards .ssl-award--third > div b,#cup-rewards .ssl-award--third > div small { color: #9c5e49; }
#cup-rewards .ssl-award--third h3 { border-left-color: var(--ssl-purple); }
#cup-rewards .ssl-award:last-of-type > div b { font-size: 32px; }
.ssl-trophy { position: relative; grid-template-columns: 90px minmax(0,1fr); gap: 16px; min-height: 200px; margin-top: 24px; padding: 24px 20px; overflow: hidden; border: 1px solid rgba(242,200,75,.58); background: radial-gradient(circle at 12% 42%,rgba(34,216,242,.24),transparent 28%),radial-gradient(circle at 88% 12%,rgba(146,92,255,.16),transparent 32%),linear-gradient(125deg,#fff,#edfaff 52%,#f3efff); box-shadow: 0 16px 34px rgba(7,61,51,.16),inset 0 0 0 4px rgba(255,255,255,.62); }
.ssl-trophy::after { content: ""; position: absolute; width: 150px; height: 2px; right: -35px; bottom: 25px; transform: rotate(-25deg); background: linear-gradient(90deg,transparent,var(--ssl-cyan),var(--ssl-purple),transparent); box-shadow: 0 0 13px rgba(34,216,242,.62); }
.ssl-trophy__visual { position: relative; z-index: 1; display: grid; place-items: center; width: 86px; height: 116px; filter: drop-shadow(0 10px 15px rgba(7,61,51,.18)); }
.ssl-trophy__visual::before { content: ""; position: absolute; top: 4px; width: 80px; height: 86px; clip-path: polygon(50% 0,96% 77%,76% 100%,24% 100%,4% 77%); background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(34,216,242,.28) 46%,rgba(146,92,255,.34)); box-shadow: inset 0 0 0 2px rgba(242,200,75,.7); }
.ssl-trophy__visual::after { content: ""; position: absolute; bottom: 4px; width: 78px; height: 16px; clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); background: linear-gradient(90deg,#0b5146,var(--ssl-green-bright),#157d83); box-shadow: 0 0 14px rgba(34,216,242,.38); }
.ssl-trophy__visual i { position: relative; z-index: 1; width: 42px; height: 42px; margin-top: -24px; transform: rotate(45deg); border: 2px solid var(--ssl-gold-special); background: linear-gradient(135deg,rgba(255,255,255,.82),rgba(34,216,242,.18)); box-shadow: 0 0 18px rgba(242,200,75,.38),inset 0 0 13px rgba(146,92,255,.2); }
.ssl-trophy__content { position: relative; z-index: 1; min-width: 0; }
.ssl-trophy__content small { color: var(--ssl-purple); font-size: 8px; letter-spacing: .18em; }
.ssl-trophy__content h3 { margin: 7px 0 12px; color: var(--ssl-green); font-size: 19px; font-weight: 1000; line-height: 1.35; }
.ssl-trophy__content b { display: block; color: var(--ssl-ink); font-size: 20px; font-weight: 1000; line-height: 1.45; }
.ssl-trophy__content p { margin: 13px 0 0; color: #425b56; font-size: 13.5px; font-weight: 700; line-height: 1.65; }
#cup-rewards .ssl-caption--media-period { margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(201,220,214,.28); color: #c9dcd6 !important; }
.ssl-panel[data-tab-panel="rewards"] > .ssl-section:last-child { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }

@media (max-width: 374px) {
  .ssl-section-lead { font-size: 12px !important; }
  .ssl-target-cards { gap: 4px; }
  .ssl-target-cards article { min-height: 118px; padding-left: 3px; padding-right: 3px; }
  .ssl-target-cards b { font-size: 16px; }
  .ssl-target-cards small { font-size: 6px; }
  .ssl-reward-block { padding-left: 11px; padding-right: 11px; }
  .ssl-award > div b { font-size: 42px; }
  .ssl-award--first > div b { font-size: 62px; }
  .ssl-award:last-of-type > div b { font-size: 29px; }
  #cup-rewards .ssl-award { padding: 14px 15px 15px; }
  #cup-rewards .ssl-award > div b { font-size: 41px; }
  #cup-rewards .ssl-award--first > div b { font-size: 50px; }
  #cup-rewards .ssl-award h3 { font-size: 15px; }
  #cup-rewards .ssl-award--first h3 { font-size: 19px; }
  #cup-rewards .ssl-award ul { padding-left: 19px; font-size: 10px; }
  #cup-rewards .ssl-award--first ul { font-size: 10.5px; }
  #cup-rewards .ssl-award:last-of-type > div b { font-size: 28px; }
}

@media (max-width: 340px) {
  .ssl-trophy { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 22px 20px 24px; }
  .ssl-trophy__visual { width: 86px; height: 106px; margin: 0 auto; }
  .ssl-trophy__content h3 { font-size: 19px; }
  .ssl-trophy__content b { font-size: 20px; }
  .ssl-trophy__content p { font-size: 13px; }
}

/* Season progression timeline */
#schedule { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.ssl-schedule-lead { margin: -5px 0 27px !important; color: #4d5c69 !important; font-size: 12px !important; font-weight: 800; line-height: 1.8 !important; }
.ssl-schedule-timeline { position: relative; width: 100%; padding: 7px 0 0 30px; }
.ssl-schedule-timeline::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 42px; left: 15px; width: 4px; border-radius: 9px; background: linear-gradient(180deg,var(--ssl-green),var(--ssl-emerald) 38%,var(--ssl-cyan) 68%,var(--ssl-purple)); box-shadow: 0 0 13px rgba(0,170,131,.48); }
.ssl-phrase-stage { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 8px; align-items: center; width: 100%; min-height: 68px; margin: 0 0 15px; padding: 8px 12px 8px 6px; border: 1px solid rgba(7,61,51,.14); border-left: 4px solid var(--ssl-green-bright); background: rgba(255,255,255,.96); box-shadow: 0 8px 19px rgba(7,61,51,.08); }
.ssl-phrase-stage::before { content: ""; position: absolute; left: -24px; top: 50%; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; transform: translateY(-50%); background: var(--ssl-emerald); box-shadow: 0 0 0 2px var(--ssl-green-bright),0 0 14px rgba(0,170,131,.7); }
.ssl-phrase-stage:not(:last-of-type)::after { content: "⌄"; position: absolute; left: -25px; bottom: -18px; color: var(--ssl-cyan); font-family: var(--ssl-display); font-size: 15px; font-weight: 1000; line-height: 1; text-shadow: 0 0 9px rgba(34,216,242,.72); }
.ssl-phrase-stage__number { color: var(--ssl-green); font-family: var(--ssl-display); font-size: 30px; font-weight: 1000; line-height: 1; letter-spacing: -.06em; text-align: center; }
.ssl-phrase-stage > div { min-width: 0; padding-left: 11px; border-left: 1px solid rgba(7,61,51,.12); }
.ssl-phrase-stage b { display: block; color: var(--ssl-green-bright); font-family: var(--ssl-display); font-size: 10px; font-weight: 1000; letter-spacing: .14em; }
.ssl-phrase-stage time { display: block; margin-top: 3px; color: var(--ssl-ink); font-family: var(--ssl-display); font-size: 13px; font-weight: 1000; letter-spacing: .015em; line-height: 1.2; white-space: nowrap; }
.ssl-phrase-stage.is-current { opacity: 1; filter: none; border-color: rgba(201,255,61,.75); border-left-color: var(--ssl-lime); background: linear-gradient(100deg,#fff,rgba(7,61,51,.10),rgba(201,255,61,.13)); box-shadow: 0 0 0 1px rgba(201,255,61,.34),0 0 23px rgba(0,170,131,.24),0 11px 24px rgba(7,61,51,.13); }
.ssl-phrase-stage.is-current::before { background: var(--ssl-lime); box-shadow: 0 0 0 2px var(--ssl-green),0 0 18px rgba(201,255,61,.85); }
.ssl-phrase-stage.is-current > div::after { content: "ON AIR"; display: inline-block; margin-top: 5px; padding: 2px 6px; color: #fff; background: var(--ssl-green); font-family: var(--ssl-display); font-size: 6px; font-weight: 1000; letter-spacing: .12em; }
.ssl-phrase-stage.is-past { opacity: .72; filter: saturate(.48); border-left-color: #91a39e; background: #f2f5f4; box-shadow: 0 5px 13px rgba(7,61,51,.05); }
.ssl-phrase-stage.is-past::before { background: #94a49f; box-shadow: 0 0 0 2px #c7d0cd; }
.ssl-phrase-stage.is-past .ssl-phrase-stage__number,.ssl-phrase-stage.is-past b,.ssl-phrase-stage.is-past time { color: #71817c; }
.ssl-phrase-stage.is-future { opacity: 1; filter: none; }
.ssl-final-connector { position: relative; height: 62px; margin-left: -30px; }
.ssl-final-connector span { position: absolute; left: 15px; top: -15px; width: 4px; height: 55px; border-radius: 9px; background: linear-gradient(180deg,var(--ssl-purple),var(--ssl-cyan),var(--ssl-gold-special)); box-shadow: 0 0 16px rgba(34,216,242,.6); }
.ssl-final-connector i { position: absolute; left: 5px; bottom: 5px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(242,200,75,.7); border-radius: 50%; color: var(--ssl-gold-special); background: var(--ssl-green); font-size: 14px; font-style: normal; box-shadow: 0 0 16px rgba(242,200,75,.28); }
.ssl-cup-gate { position: relative; min-height: 180px; margin: 0; padding: 29px 22px 31px; overflow: hidden; border: 1px solid rgba(242,200,75,.72); clip-path: polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px)); background: radial-gradient(circle at 50% 0,rgba(242,200,75,.25),transparent 32%),radial-gradient(circle at 12% 80%,rgba(34,216,242,.18),transparent 35%),linear-gradient(135deg,#052f28,#073d33 48%,#0d5360 76%,#2b205d); box-shadow: inset 0 0 0 5px rgba(255,255,255,.045),0 20px 42px rgba(7,61,51,.27),0 0 25px rgba(34,216,242,.12); }
.ssl-cup-gate::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(34,216,242,.24); clip-path: inherit; pointer-events: none; }
.ssl-cup-gate::after { content: ""; position: absolute; width: 145%; height: 2px; left: -23%; top: 29px; transform: rotate(-9deg); background: linear-gradient(90deg,transparent,var(--ssl-cyan),var(--ssl-purple),transparent); box-shadow: 0 0 14px rgba(34,216,242,.7); }
.ssl-cup-gate > * { position: relative; z-index: 1; }
.ssl-cup-gate > i { display: block; margin-bottom: 4px; color: var(--ssl-gold-special); font-size: 27px; font-style: normal; line-height: 1; text-shadow: 0 0 16px rgba(242,200,75,.52); }
.ssl-cup-gate small { color: var(--ssl-gold-special); }
.ssl-cup-gate strong { margin: 7px 0 5px; font-size: 27px; letter-spacing: .025em; }
.ssl-cup-gate span { color: #e1eeea; font-size: 10px; font-weight: 800; }
.ssl-cup-gate .ssl-timeline-end { position: absolute; z-index: 2; top: 10px; left: 10px; display: block; width: 15px; height: 15px; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; background: var(--ssl-gold-special); box-shadow: 0 0 0 2px var(--ssl-green),0 0 18px rgba(242,200,75,.76); }

.ssl-fixed-cta { padding: 4px; }
.ssl-fixed-cta a { min-height: 44px; padding: 7px 10px; }

@media (max-width: 374px) {
  #schedule { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .ssl-schedule-lead { font-size: 11px !important; }
  .ssl-schedule-timeline { padding-left: 27px; }
  .ssl-schedule-timeline::before { left: 13px; }
  .ssl-phrase-stage { grid-template-columns: 44px minmax(0,1fr); gap: 6px; min-height: 66px; margin-bottom: 14px; padding: 7px 8px 7px 5px; }
  .ssl-phrase-stage::before { left: -22px; width: 14px; height: 14px; }
  .ssl-phrase-stage:not(:last-of-type)::after { left: -23px; }
  .ssl-phrase-stage__number { font-size: 28px; }
  .ssl-phrase-stage > div { padding-left: 8px; }
  .ssl-phrase-stage time { font-size: 11px; letter-spacing: 0; }
  .ssl-final-connector { margin-left: -27px; }
  .ssl-final-connector span { left: 13px; }
  .ssl-final-connector i { left: 3px; }
  .ssl-cup-gate { min-height: 168px; padding-left: 14px; padding-right: 14px; }
  .ssl-cup-gate strong { font-size: 23px; }
}