.levels-body .site-layout { display:block; }
.levels-page { width:100%; max-width:1120px; margin:0 auto; }
.levels-journey { scroll-margin-top:150px; }
.levels-hero { animation:levels-appear .45s ease-out both; }
.levels-page :is(h1,h2,h3,p) { overflow-wrap:anywhere; }
.levels-back { margin:0 0 20px; color:var(--text-muted); font-size:14px; }
.levels-back a:hover, .levels-text-link:hover { color:var(--accent-hover); text-decoration:underline; }
.levels-hero.surface { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; gap:36px; padding:36px; background:radial-gradient(ellipse at top right, color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%),var(--surface); }
.levels-hero h1 { margin:8px 0 14px; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.045em; }
.levels-hero-copy > p:not(.eyebrow) { margin:0 0 18px; max-width:540px; font-size:16px; line-height:1.65; color:var(--text-muted); }
.levels-text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--accent); font-weight:650; }
.levels-hero-symbol { display:flex; justify-content:center; align-items:center; gap:14px; }
.levels-hero-symbol span { display:grid; place-items:center; width:84px; height:100px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius:24px; background:var(--accent-soft); color:var(--accent); transform:rotate(-8deg); }
.levels-hero-symbol span:nth-child(2) { transform:translateY(-14px); background:var(--surface); }
.levels-hero-symbol span:last-child { transform:rotate(8deg); }
.levels-hero-symbol svg { width:46px; height:46px; }
.levels-personal { padding:24px; min-width:0; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)); border-radius:1rem; background:var(--surface); box-shadow:0 6px 24px var(--shadow); }
.levels-personal-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.levels-personal-heading > div { min-width:0; flex:1; }
.levels-personal-heading small { color:var(--text-muted); font-size:13px; line-height:1.35; }
.levels-personal h2 { margin:4px 0 0; font-size:21px; line-height:1.25; }
.levels-personal-symbol { display:grid; place-items:center; flex:0 0 44px; height:48px; border-radius:12px; color:var(--accent); background:var(--accent-soft); }
.levels-personal-symbol svg { width:30px; height:30px; }
.levels-cashback { display:grid; flex:0 0 auto; text-align:right; color:var(--accent); font-size:24px; line-height:1.2; font-weight:800; }
.levels-cashback small { font-weight:400; }
.levels-personal-spent { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:16px 0; margin-top:16px; border-top:1px solid var(--border); font-size:14px; }
.levels-personal-spent span { color:var(--text-muted); }
.levels-progress-label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; line-height:1.5; }
.levels-progress-label > span:first-child { min-width:0; }
.levels-progress-label > span:last-child { flex-shrink:0; font-weight:700; color:var(--accent); }
.levels-progress { height:9px; width:100%; overflow:hidden; margin:10px 0 12px; border-radius:20px; background:var(--stat-background); }
.levels-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--surface))); transform-origin:left; animation:levels-fill .85s ease-out both; }
.levels-status { margin:0; font-size:13px; line-height:1.6; color:var(--text-muted); }
.levels-status strong { color:var(--text); font-weight:600; }
.levels-maximum { display:flex; gap:8px; align-items:baseline; margin:0 0 8px; color:var(--accent); font-weight:700; line-height:1.4; }
.levels-personal.is-maximum { background:linear-gradient(145deg,var(--accent-soft),var(--surface) 70%); }
.levels-guest, .levels-notice { margin:20px 0 0; color:var(--text-muted); font-size:14px; }
.levels-notice { padding:14px 18px; border-left:3px solid var(--accent); border-radius:0 .6rem .6rem 0; background:var(--accent-soft); }
.levels-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:32px 0 18px; }
.levels-section-heading h2, .levels-rules h2 { margin:4px 0 0; font-size:clamp(22px,2.6vw,28px); line-height:1.25; letter-spacing:-.025em; }
.levels-section-heading .eyebrow { margin:0; }
.levels-section-heading > span { color:var(--text-muted); font-size:13px; flex-shrink:0; }
.levels-road { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:0; margin:0; list-style:none; }
.level-stop { position:relative; min-width:0; }
.level-stop::before { content:''; position:absolute; z-index:0; top:33px; left:-6px; right:-6px; height:1px; background:var(--border); }
.level-stop a { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 10px 14px; min-height:152px; text-align:center; border-radius:.85rem; transition:background .2s; }
.level-stop a:hover, .level-stop a:focus-visible { background:var(--surface-hover); }
.level-node { position:relative; display:grid; place-items:center; width:50px; height:50px; margin-bottom:5px; border:1px solid var(--border); border-radius:16px; color:var(--text-muted); background:var(--surface); }
.level-node svg { width:30px; height:30px; }
.level-node b { position:absolute; bottom:-5px; right:-5px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:var(--on-accent); background:var(--accent); font-size:11px; }
.level-stop-name { width:100%; font-size:14px; font-weight:750; line-height:1.35; }
.level-stop small { font-size:12px; color:var(--text-muted); }
.level-stop-perks { font-size:12px; color:var(--accent); font-weight:650; }
.level-stop-games { line-height:1.4; overflow-wrap:anywhere; }
.level-stop-status { color:var(--accent); font-size:11px; font-weight:650; }
.level-stop.is-current .level-node, .level-stop.is-reached .level-node { color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
.level-stop.is-current a { background:var(--accent-soft); }
.level-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; }
.level-card.surface { position:relative; padding:24px; min-width:0; overflow-wrap:anywhere; scroll-margin-top:150px; background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) var(--tier-strength,12%),transparent),transparent 60%),var(--surface); transition:transform .25s,box-shadow .25s,opacity .4s; }
.level-card header { display:flex; align-items:center; gap:12px; min-width:0; }
.level-card header > div { min-width:0; }
.level-card-symbol { display:grid; place-items:center; flex:0 0 48px; height:52px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); border-radius:14px; background:var(--accent-soft); color:var(--accent); }
.level-card-symbol svg { width:32px; height:32px; }
.level-card header small { font-size:12px; color:var(--text-muted); }
.level-card h3 { margin:3px 0 0; font-size:19px; line-height:1.3; }
.level-card-status { margin:16px 0 18px; min-height:24px; font-size:12px; color:var(--text-muted); }
.level-tag { display:inline-flex; padding:3px 9px; border-radius:20px; background:var(--accent); color:var(--on-accent); font-weight:700; }
.level-tag.is-complete { background:var(--accent-soft); color:var(--accent); }
.level-card dl { margin:0; display:grid; gap:16px; }
.level-card dt { margin:0 0 4px; color:var(--text-muted); font-size:12px; }
.level-card dd { margin:0; font-size:14px; line-height:1.5; }
.level-card-cashback { padding:12px 0; border-block:1px solid var(--border); }
.level-card-cashback dd { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.level-card-cashback strong { font-size:34px; color:var(--accent); line-height:1.15; letter-spacing:-.04em; }
.level-card-cashback strong > span { font-size:20px; margin-left:2px; }
.level-card-cashback small { max-width:140px; font-size:12px; color:var(--text-muted); line-height:1.4; }
.level-games { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.level-games > span { display:block; color:var(--text-muted); font-size:12px; margin-bottom:7px; }
.level-games ul { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.level-games li { padding:4px 8px; border-radius:6px; color:var(--accent); background:var(--accent-soft); font-size:12px; line-height:1.4; }
.level-card.is-current { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),0 6px 24px var(--shadow); animation:levels-glow 1.3s ease-out 2; }
.level-card.is-premium .level-card-symbol { background:var(--accent); color:var(--on-accent); }
.levels-page.has-reveal .level-card:not(.is-revealed) { opacity:0; transform:translateY(12px); }
.levels-rules.surface { margin-top:28px; padding:24px; }
.levels-rules > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.levels-rules p { margin:16px 0 0; font-size:14px; line-height:1.65; color:var(--text-muted); }
.levels-empty p { margin-top:0; color:var(--text-muted); }
@keyframes levels-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes levels-appear { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes levels-glow { 50% { box-shadow:0 0 0 3px var(--accent-soft),0 10px 28px var(--shadow); } }
@media (hover:hover) and (pointer:fine) { .level-card:hover { transform:translateY(-3px); box-shadow:0 8px 26px var(--shadow); } }
@media (max-width:900px) { .levels-hero.surface { grid-template-columns:minmax(0,1fr); gap:24px; padding:28px; } .levels-hero-symbol { display:none; } .levels-rules > div { grid-template-columns:minmax(0,1fr); gap:0; } }
@media (max-width:600px) {
  .levels-back { margin-bottom:14px; }
  .levels-hero.surface { padding:20px; gap:20px; }
  .levels-hero h1 { font-size:30px; }
  .levels-hero-copy > p:not(.eyebrow) { font-size:15px; margin-bottom:8px; }
  .levels-personal { padding:16px; }
  .levels-personal-heading { gap:9px; flex-wrap:wrap; }
  .levels-personal h2 { font-size:18px; }
  .levels-personal-symbol { flex-basis:38px; height:42px; }
  .levels-cashback { font-size:22px; }
  .levels-section-heading { margin-top:24px; align-items:start; flex-direction:column; gap:6px; }
  .levels-section-heading h2, .levels-rules h2 { font-size:22px; }
  .levels-road { grid-template-columns:minmax(0,1fr); gap:0; }
  .level-stop::before { top:0; bottom:0; left:24px; right:auto; width:1px; height:auto; }
  .level-stop a { display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto auto; gap:2px 14px; align-items:center; padding:10px 4px; min-height:72px; text-align:left; }
  .level-node { grid-row:1 / span 5; width:42px; height:42px; margin:0; border-radius:13px; }
  .level-node svg { width:26px; height:26px; }
  .level-stop-name, .level-stop small, .level-stop-perks, .level-stop-status { grid-column:2; }
  .level-stop.is-current a { padding-inline:4px 12px; }
  .level-cards { grid-template-columns:minmax(0,1fr); gap:14px; }
  .level-card.surface { padding:20px; }
  .level-card dl { gap:12px; }
  .level-card-status { margin-block:12px; }
  .level-card-cashback { padding-block:10px; }
  .levels-rules.surface { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .levels-page *, .levels-page *::before, .levels-page *::after { animation:none !important; transition:none !important; }
  .levels-page.has-reveal .level-card:not(.is-revealed) { opacity:1; transform:none; }
  .level-card:hover { transform:none; }
}