/* worlds.css — auto-split from index.html */
#sWorld{background:radial-gradient(ellipse at 50% 40%,#0a0020 0%,#050015 55%,#000005 100%);flex-direction:column;gap:0;padding:0;overflow:hidden}
#sWorld::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(180,100,255,.5) 1px,transparent 1px),radial-gradient(circle,rgba(100,180,255,.3) .7px,transparent .7px),radial-gradient(circle,rgba(255,100,200,.25) .6px,transparent .6px);background-size:22px 22px,14px 14px,9px 9px;background-position:3px 4px,8px 9px,1px 6px;pointer-events:none;z-index:0;opacity:.6;animation:starDrift2 14s linear infinite}
@keyframes starDrift2{0%{transform:translateY(0)}100%{transform:translateY(-22px)}}
.worldSelHeader{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 28px;z-index:2;flex-shrink:0}
.worldSelTitle{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(16px,2.5vw,28px);letter-spacing:6px;background:linear-gradient(90deg,#ffffff,#cc88ff,#ff44aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 14px #aa44ff88)}
.worldSelBack{font-family:'Orbitron',sans-serif;font-size:11px;color:#664488;background:rgba(100,40,160,.12);border:1px solid #442266;border-radius:20px;padding:7px 18px;cursor:pointer;letter-spacing:2px;transition:all .18s}
.worldSelBack:hover{color:#cc88ff;border-color:#8844cc}
/* A1 — desktop default 4-col landscape grid, wider max-width so the
   layout uses the available screen on big monitors. Mobile + tablet
   overrides further down keep their own grid-template-columns. */
.worldGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:clamp(14px,3vw,36px);flex:1;z-index:2;width:100%;max-width:1440px;margin:0 auto;overflow-y:auto;align-content:start}
.worldBigCard{aspect-ratio:4/3;border-radius:16px;cursor:pointer;overflow:hidden;position:relative;border:2px solid #2a1a4a;transition:all .25s cubic-bezier(.34,1.3,.64,1);display:flex;flex-direction:column;justify-content:flex-end}
/* B5 — desktop hover now glows in per-world accent (cyan for Neon City,
   magenta for Candy, etc.) instead of generic purple. */
.worldBigCard:hover{transform:translateY(-10px) scale(1.03);border-color:var(--world-accent,#aa44ff);box-shadow:0 0 38px var(--world-glow,rgba(180,80,255,.4)),0 20px 60px rgba(0,0,0,.6),inset 0 0 30px color-mix(in srgb,var(--world-glow,rgba(180,80,255,.4)) 30%,transparent)}
.worldBigCard.wBigSel{border-color:var(--world-accent,#cc44ff);box-shadow:0 0 40px var(--world-glow,rgba(204,68,255,.55)),inset 0 0 30px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 35%,transparent)}
.worldCardBg{position:absolute;inset:0;z-index:0;transition:transform .3s}
.worldBigCard:hover .worldCardBg{transform:scale(1.06)}
.worldBgSpace{background:linear-gradient(170deg,#0a0020 0%,#1a0040 35%,#2a1060 65%,#0a1044 100%)}
.worldBgSpace::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1px),radial-gradient(circle,rgba(200,180,255,.4) .8px,transparent .8px);background-size:32px 32px,20px 20px;background-position:0 0,12px 12px;animation:starDrift2 9s linear infinite;pointer-events:none;z-index:1;opacity:.5}
.worldBgSpace::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 70% 30%,rgba(180,80,255,.22) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 20% 70%,rgba(0,150,255,.15) 0%,transparent 60%);pointer-events:none;z-index:1}
.worldBgSea{background:linear-gradient(170deg,#020c14 0%,#052a3a 35%,#0a4555 65%,#1a6a7a 100%)}
.worldBgSea::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,220,200,.4) 1px,transparent 1px),radial-gradient(circle,rgba(0,150,255,.25) 1.2px,transparent 1.2px);background-size:18px 18px,27px 27px;background-position:0 0,9px 10px;animation:bubbleRise 4.5s ease-in-out infinite;pointer-events:none;z-index:1;opacity:.5}
@keyframes bubbleRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.worldBgSea::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 80%,rgba(0,200,180,.12) 0%,transparent 60%);pointer-events:none;z-index:1}
.worldCardContent{position:relative;z-index:2;padding:clamp(16px,2.5vw,26px);background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 55%,transparent 100%);pointer-events:none}
.worldCardIcon{font-size:clamp(40px,6vw,58px);line-height:1;margin-bottom:10px;filter:drop-shadow(0 0 16px rgba(255,255,255,.4))}
.worldCardName{font-family:'Orbitron',sans-serif;font-size:clamp(14px,2.2vw,22px);font-weight:900;color:#ffffff;letter-spacing:3px;text-shadow:0 0 20px rgba(255,255,255,.35);margin-bottom:6px}
.worldCardDesc{font-family:'Rajdhani',sans-serif;font-size:clamp(11px,1.5vw,14px);color:rgba(255,255,255,.55);letter-spacing:1px;line-height:1.4}
.worldCardSel{display:none;position:absolute;top:12px;right:12px;z-index:3;font-family:'Orbitron',sans-serif;font-size:9px;color:#cc44ff;background:rgba(120,40,200,.25);border:1px solid #aa44ff;border-radius:12px;padding:4px 10px;letter-spacing:2px}
.worldBigCard.wBigSel .worldCardSel{display:block}
@media(max-width:768px){
.worldGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.worldGrid{grid-template-columns:1fr;grid-auto-rows:calc(100vw - 28px)}
}
@media(max-width:600px){
.worldBigCard{min-height:140px;width:100%}
}
.worldBgSpace{background:linear-gradient(170deg,#040012 0%,#0e0030 35%,#1a0848 65%,#070f30 100%)!important}
.worldBgSpace::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px),radial-gradient(circle,rgba(220,200,255,.5) .8px,transparent .8px),radial-gradient(circle,rgba(180,230,255,.4) .6px,transparent .6px);background-size:38px 38px,22px 22px,14px 14px;background-position:4px 5px,13px 11px,7px 20px;animation:starDrift2 8s linear infinite;pointer-events:none;z-index:1;opacity:.7}
.worldBgSpace::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 74% 68%,#2a1060 0%,#1a0840 22%,transparent 28%),radial-gradient(ellipse 55% 35% at 68% 30%,rgba(160,80,255,.28) 0%,transparent 65%),radial-gradient(ellipse 35% 25% at 22% 72%,rgba(0,140,255,.18) 0%,transparent 60%);pointer-events:none;z-index:1}
.worldBgSea{background:linear-gradient(180deg,#062c40 0%,#083d52 28%,#094858 55%,#052838 80%,#021820 100%)!important}
.worldBgSea::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,230,210,.45) 1px,transparent 1px),radial-gradient(circle,rgba(0,160,255,.28) 1.2px,transparent 1.2px);background-size:20px 20px,30px 30px;background-position:2px 3px,11px 12px;animation:bubbleRise 4s ease-in-out infinite;pointer-events:none;z-index:1;opacity:.55}
.worldBgSea::after{content:'';position:absolute;inset:0;background:linear-gradient(158deg,rgba(80,195,215,.14) 0%,transparent 38%),linear-gradient(163deg,rgba(60,170,190,.09) 5%,transparent 32%),radial-gradient(ellipse 60% 45% at 32% 85%,rgba(0,200,170,.10) 0%,transparent 60%);pointer-events:none;z-index:1}
.worldBgCandy{background:linear-gradient(170deg,#ff44aa 0%,#ff88cc 35%,#ffccee 65%,#ffe4aa 100%)}
.worldBgCandy::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 2px,transparent 2px),radial-gradient(circle,rgba(255,200,50,.8) 1.5px,transparent 1.5px),radial-gradient(circle,rgba(80,255,160,.7) 1px,transparent 1px),radial-gradient(circle,rgba(80,160,255,.7) 1px,transparent 1px);background-size:22px 22px,17px 17px,11px 11px,14px 14px;background-position:3px 4px,9px 10px,5px 13px,14px 6px;animation:sprinkleShimmer 2.2s linear infinite;pointer-events:none;z-index:1;opacity:.75}
.worldBgCandy::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(255,255,255,.28) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(255,160,80,.18) 0%,transparent 60%);pointer-events:none;z-index:1}
@keyframes sprinkleShimmer{0%{background-position:3px 4px,9px 10px,5px 13px,14px 6px}100%{background-position:3px 26px,9px 27px,5px 24px,14px 20px}}
/* ── B1 — Mobile portrait 2-column tile grid (2026-05-11) ────────────────
   Replaces the prior 96px full-width row layout. Each world becomes a
   square tile with: world-gradient background + icon top-right + name
   bottom-left + per-world accent border + glow. Descriptions hidden on
   mobile (the small format can't carry the 1-sentence body). Pseudo-
   element animations on each .worldBgX stay enabled — the bigger tile
   gives them room to breathe (unlike the 96px row where we suppressed
   them for performance). */
/* ── B1.v3 — Mobile portrait 1:1 TRACK-CARD layout (round 9 make-over) ───
   Round-9: switched 4:5 portret naar 1:1 vierkant met de minimap als
   centrale hero (groter, ~80×80 zodat canvas 80×80 perfect aansluit) en
   wereldnaam recht eronder. Resultaat: 6 tegels boven de fold op iPhone
   ipv 4, en de tegel leest direct als "track-keuze". Drie zones:
   top (minimap-hero + emoji), midden (world name), bottom (best + go).
   Sci-fi chrome: corner brackets, animated scanline, accent-tinted
   minimap, glass-blur pills. */
@media(max-width:768px){
.worldGrid{grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:calc((100vw - 30px) / 2)!important;gap:10px!important;padding:10px 10px 24px!important;max-width:100%!important;box-sizing:border-box!important;width:100%!important;align-content:start!important}
.worldBigCard{height:100%!important;min-height:0!important;max-height:none!important;width:100%!important;max-width:100%!important;margin:0!important;border-radius:14px!important;border:1.5px solid color-mix(in srgb,var(--world-accent,#cc44ff) 38%,rgba(40,20,80,.7))!important;transform:none!important;transition:box-shadow .2s,border-color .2s,transform .2s!important;box-sizing:border-box!important;position:relative!important;z-index:1;overflow:hidden!important;cursor:pointer!important;-webkit-tap-highlight-color:rgba(255,255,255,.08)!important;touch-action:manipulation!important;display:block!important}
.worldBigCard:active{transform:scale(.97)!important}
.worldBigCard:hover,.worldBigCard:focus{transform:none!important}
.worldBigCard.wBigSel{transform:none!important;border:2px solid var(--world-accent,#cc44ff)!important;box-shadow:0 0 0 1px var(--world-accent,#cc44ff),0 0 22px var(--world-glow,rgba(204,68,255,.4)),inset 0 0 24px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 40%,transparent)!important;z-index:2!important;animation:worldSelectPulse 1s ease-out 1!important}
@keyframes worldSelectPulse{
  0%{box-shadow:0 0 0 1px var(--world-accent,#cc44ff),0 0 22px var(--world-glow,rgba(204,68,255,.4)),inset 0 0 24px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 40%,transparent)}
  50%{box-shadow:0 0 0 1px var(--world-accent,#cc44ff),0 0 38px var(--world-glow,rgba(204,68,255,.6)),inset 0 0 36px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 55%,transparent)}
  100%{box-shadow:0 0 0 1px var(--world-accent,#cc44ff),0 0 22px var(--world-glow,rgba(204,68,255,.4)),inset 0 0 24px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 40%,transparent)}
}
/* Corner brackets — pure CSS L-shapes top-left + bottom-right, in the
   world's accent colour. Read as sci-fi UI chrome around each card. */
.worldBigCard::before,.worldBigCard::after{content:'';position:absolute;width:16px;height:16px;border:2px solid var(--world-accent,#cc44ff);opacity:.75;pointer-events:none;z-index:4}
.worldBigCard::before{top:6px;left:6px;border-right:none;border-bottom:none;border-top-left-radius:4px}
.worldBigCard::after{bottom:6px;right:6px;border-left:none;border-top:none;border-bottom-right-radius:4px}
/* Background layer unchanged — world's gradient + per-world pseudo
   particle animations stay enabled. */
.worldCardBg{position:absolute!important;inset:0!important;z-index:0!important;transform:none!important}
/* Animated scanline — 2px bright accent line sweeping top→bottom every
   7s. Composite-only (opacity + transform), GPU-cheap. Suppressed by
   prefers-reduced-motion. */
.worldCardBg::after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 0%,transparent 48%,var(--world-glow,rgba(204,68,255,.4)) 50%,transparent 52%,transparent 100%)!important;opacity:.55!important;animation:worldScanline 7s linear infinite!important;z-index:1!important;pointer-events:none!important;mix-blend-mode:screen}
@keyframes worldScanline{0%{transform:translateY(-50%)}100%{transform:translateY(50%)}}
@media (prefers-reduced-motion:reduce){.worldCardBg::after{animation:none!important;opacity:0!important}}
/* Three-zone content layout: absolute positioning per element so the
   card itself stays a simple block. Z-index ladder keeps everything
   above the background pseudo (z=1) and below the corner brackets (z=4). */
.worldCardContent{position:absolute!important;inset:0!important;z-index:2!important;padding:0!important;background:linear-gradient(180deg,transparent 0%,transparent 35%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.85) 100%)!important;pointer-events:none!important;display:block!important}
.worldCardSel{display:none!important}
.worldCardDesc{display:none!important}
/* TOP — minimap hero (centered, ~50% width matches canvas 80×80) +
   small emoji corner-marker. Emoji shrinks to 22px so the minimap is the
   dominant visual; identity-colour blijft via accent-border + halo. */
.worldMini{position:absolute!important;top:10px!important;left:50%!important;transform:translateX(-50%)!important;width:clamp(68px,22vw,108px)!important;height:clamp(68px,22vw,108px)!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 55%,transparent)!important;border-radius:8px!important;background:rgba(0,0,0,.5)!important;box-shadow:0 0 14px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 60%,transparent)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3!important;display:block!important;margin:0!important}
.worldCardIcon{position:absolute!important;top:8px!important;right:8px!important;font-size:22px!important;margin:0!important;line-height:1!important;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))!important;opacity:.85!important;z-index:3!important}
/* B6 halo om de emoji is op mobile te druk naast de minimap-glow → uit. */
.worldCardIcon::before{display:none!important}
/* MIDDLE — world name, gecentreerd onder de minimap-hero. */
.worldCardName{position:absolute!important;left:8px!important;right:8px!important;top:calc(10px + clamp(68px,22vw,108px) + 12px)!important;text-align:center!important;font-family:'Orbitron',sans-serif!important;font-size:13px!important;font-weight:900!important;letter-spacing:1.2px!important;line-height:1.1!important;margin:0!important;color:#fff!important;background:linear-gradient(168deg,#ffffff 0%,#ffffff 50%,var(--world-accent,#cc44ff) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9)) drop-shadow(0 0 8px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 60%,transparent))!important;z-index:3!important}
/* BOTTOM — best-lap pill left + go pill right. left/right 12 ipv 8: laat de
   corner-brackets rechtsonder/linksonder (op 6,6 / 16×16) buiten de pill-
   bounding-box vallen zodat de L-chrome niet over de pills tekent (z-index
   ladder: pill=3, bracket=4 → bracket zou anders bovenop tekenen). */
.worldBest{position:absolute!important;left:12px!important;bottom:8px!important;font-family:'Orbitron',sans-serif!important;font-size:9px!important;font-weight:700!important;letter-spacing:.14em!important;color:#ffd700!important;padding:3px 7px!important;background:rgba(0,0,0,.55)!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 50%,transparent)!important;border-radius:10px!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 0 8px rgba(255,215,0,.5)!important;z-index:3!important;line-height:1!important}
.worldBest.isNew{color:#ff44dd!important;border-color:#ff44dd!important;background:rgba(60,0,40,.55)!important;text-shadow:0 0 10px rgba(255,68,221,.65)!important;animation:worldNewPulse 1.6s ease-in-out infinite!important}
@keyframes worldNewPulse{0%,100%{opacity:.85}50%{opacity:1;box-shadow:0 0 10px rgba(255,68,221,.4)}}
@media (prefers-reduced-motion:reduce){.worldBest.isNew{animation:none!important}}
.worldGo{position:absolute!important;right:12px!important;bottom:8px!important;font-family:'Orbitron',sans-serif!important;font-size:13px!important;color:var(--world-accent,#cc44ff)!important;padding:2px 8px!important;background:rgba(0,0,0,.45)!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 70%,transparent)!important;border-radius:10px!important;text-shadow:0 0 10px var(--world-glow,rgba(204,68,255,.6))!important;z-index:3!important;line-height:1!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.worldBigCard.wBigSel .worldGo{background:var(--world-accent,#cc44ff)!important;color:#fff!important;text-shadow:0 0 6px rgba(0,0,0,.8)!important}
/* Header — tighter on mobile: single line, geen subtitel (B1.v3 round 9). */
.worldSelHeader{padding:8px 14px 4px!important;flex-shrink:0!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;position:relative!important}
.worldSelTitle{font-size:15px!important;letter-spacing:3px!important}
.worldSelHeader::after{display:none!important}
.worldSelBack{position:static!important;font-size:9.5px!important;padding:5px 12px!important;flex-shrink:0!important}
}
@media(min-width:769px) and (max-width:1200px){
.worldGrid{grid-template-columns:repeat(3,1fr)!important;gap:24px!important;padding:24px!important;max-width:1140px!important;max-height:calc(100vh - 90px)!important;overflow-y:auto!important}
.worldBigCard{aspect-ratio:4/3!important;min-height:110px!important;height:auto!important;max-height:none!important}
.worldBigCard:hover{transform:translateY(-6px)!important;box-shadow:0 0 28px var(--world-glow,rgba(180,80,255,.4)),0 14px 40px rgba(0,0,0,.55),inset 0 0 24px color-mix(in srgb,var(--world-glow,rgba(180,80,255,.4)) 25%,transparent)!important}
.worldBigCard.wBigSel{box-shadow:0 0 0 1px var(--world-accent,#cc44ff),0 0 28px var(--world-glow,rgba(204,68,255,.55)),inset 0 0 22px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 30%,transparent)!important}
.worldSelTitle{font-size:18px!important}
}

/* ── A2/A3 — Desktop world-selector chrome (≥769px, round 8) ─────────────
   Ports the PR #125 mobile track-card chrome to desktop at landscape
   proportions. Minimap top-left, big icon top-right, gradient name +
   description band, best-lap pill bottom-left, ▶ go-pill bottom-right,
   corner brackets + animated scanline. */
@media(min-width:769px){
.worldSelHeader{padding:22px 32px 12px!important;flex-direction:column!important;align-items:center!important;gap:2px!important;position:relative!important}
.worldSelTitle{font-size:clamp(28px,3.6vw,42px)!important;letter-spacing:8px!important;background:linear-gradient(168deg,#ffffff 0%,#00eeff 25%,#cc44ff 55%,#ff22aa 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 0 20px #cc44ffbb) drop-shadow(0 0 36px #00eeff44)!important}
.worldSelHeader::after{content:'11 TRACKS · TAP TO RACE'!important;font-family:'Rajdhani',sans-serif!important;font-size:13px!important;letter-spacing:.4em!important;color:#9a7fc8!important;opacity:.85!important;display:block!important;margin-top:-4px!important}
.worldSelBack{position:absolute!important;top:22px!important;right:32px!important;font-size:12px!important;padding:8px 22px!important}
/* Card itself — landscape 4:3, full chrome */
.worldBigCard{position:relative!important;overflow:hidden!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;border:1.5px solid color-mix(in srgb,var(--world-accent,#cc44ff) 38%,rgba(40,20,80,.7))!important}
/* Corner brackets — L-shapes top-left + bottom-right in accent. */
.worldBigCard::before,.worldBigCard::after{content:''!important;position:absolute!important;width:22px!important;height:22px!important;border:2px solid var(--world-accent,#cc44ff)!important;opacity:.75!important;pointer-events:none!important;z-index:4!important}
.worldBigCard::before{top:10px!important;left:10px!important;border-right:none!important;border-bottom:none!important;border-top-left-radius:5px!important}
.worldBigCard::after{bottom:10px!important;right:10px!important;border-left:none!important;border-top:none!important;border-bottom-right-radius:5px!important}
/* Animated scanline sweep — same keyframes as mobile portrait. */
.worldCardBg{position:absolute!important;inset:0!important;z-index:0!important}
.worldCardBg::after{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 0%,transparent 48%,var(--world-glow,rgba(204,68,255,.4)) 50%,transparent 52%,transparent 100%)!important;opacity:.45!important;animation:worldScanline 8s linear infinite!important;z-index:1!important;pointer-events:none!important;mix-blend-mode:screen!important}
/* Content band — bottom-anchored, leaves room for minimap+icon up top. */
.worldCardContent{position:relative!important;z-index:2!important;padding:clamp(14px,1.6vw,22px)!important;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 55%,transparent 100%)!important;pointer-events:none!important}
/* Minimap top-left (88×88), bigger than the mobile 52×52. */
.worldMini{position:absolute!important;top:14px!important;left:14px!important;width:88px!important;height:88px!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 55%,transparent)!important;border-radius:8px!important;background:rgba(0,0,0,.45)!important;box-shadow:0 0 16px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 55%,transparent)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:3!important;display:block!important}
/* Icon top-right, even bigger on desktop. */
.worldCardIcon{position:absolute!important;top:14px!important;right:14px!important;font-size:clamp(48px,4.2vw,64px)!important;margin:0!important;line-height:1!important;filter:drop-shadow(0 4px 12px rgba(0,0,0,.7))!important;z-index:3!important}
/* Name gradient (white→accent), bigger than mobile. */
.worldCardName{font-family:'Orbitron',sans-serif!important;font-size:clamp(16px,1.6vw,22px)!important;font-weight:900!important;letter-spacing:2.5px!important;line-height:1.1!important;margin:0 0 6px!important;background:linear-gradient(168deg,#ffffff 0%,#ffffff 50%,var(--world-accent,#cc44ff) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9)) drop-shadow(0 0 10px color-mix(in srgb,var(--world-glow,rgba(204,68,255,.4)) 55%,transparent))!important;z-index:3!important;position:relative!important}
/* Description stays visible on desktop (mobile hides it for space). */
.worldCardDesc{font-family:'Rajdhani',sans-serif!important;font-size:clamp(11px,1vw,13px)!important;color:rgba(255,255,255,.62)!important;letter-spacing:.7px!important;line-height:1.4!important;z-index:3!important;position:relative!important;margin-bottom:30px}
/* Best-lap pill bottom-left, slightly bigger than mobile. */
.worldBest{position:absolute!important;left:14px!important;bottom:14px!important;font-family:'Orbitron',sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.16em!important;color:#ffd700!important;padding:4px 10px!important;background:rgba(0,0,0,.55)!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 50%,transparent)!important;border-radius:11px!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 0 8px rgba(255,215,0,.5)!important;z-index:3!important;line-height:1!important}
.worldBest.isNew{color:#ff44dd!important;border-color:#ff44dd!important;background:rgba(60,0,40,.55)!important;text-shadow:0 0 10px rgba(255,68,221,.65)!important;animation:worldNewPulse 1.6s ease-in-out infinite!important}
/* Go-pill bottom-right ▶ in accent. */
.worldGo{position:absolute!important;right:14px!important;bottom:14px!important;font-family:'Orbitron',sans-serif!important;font-size:16px!important;color:var(--world-accent,#cc44ff)!important;padding:3px 12px!important;background:rgba(0,0,0,.45)!important;border:1px solid color-mix(in srgb,var(--world-accent,#cc44ff) 70%,transparent)!important;border-radius:11px!important;text-shadow:0 0 10px var(--world-glow,rgba(204,68,255,.6))!important;z-index:3!important;line-height:1!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.worldBigCard.wBigSel .worldGo{background:var(--world-accent,#cc44ff)!important;color:#fff!important;text-shadow:0 0 6px rgba(0,0,0,.8)!important}
/* Drop the "✓ SELECTED" badge on desktop — wBigSel border + accent
   ring + go-pill fill carry the selection read. */
.worldCardSel{display:none!important}
}
@media(min-width:769px) and (prefers-reduced-motion:reduce){
.worldCardBg::after{animation:none!important;opacity:0!important}
.worldBest.isNew{animation:none!important}
}
.worldBgThemepark{background:linear-gradient(170deg,#1a0030 0%,#4a1060 25%,#cc2288 55%,#ff6622 85%,#ffaa00 100%)}
.worldBgThemepark::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,240,100,.9) 1.2px,transparent 1.2px),radial-gradient(circle,rgba(255,150,200,.6) 1px,transparent 1px),radial-gradient(circle,rgba(100,220,255,.5) .8px,transparent .8px);background-size:26px 26px,18px 18px,33px 33px;background-position:4px 6px,12px 14px,18px 8px;animation:parkLights 2.2s ease-in-out infinite alternate;pointer-events:none;z-index:1;opacity:.65}
.worldBgThemepark::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 30% 25%,rgba(255,220,80,.28) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 70%,rgba(255,80,180,.22) 0%,transparent 60%);pointer-events:none;z-index:1}
@keyframes parkLights{0%{opacity:.35}100%{opacity:.8}}
.worldBgNeonCity{background:linear-gradient(180deg,#000008 0%,#050020 40%,#0a0030 60%,#050015 80%,#000008 100%)}
.worldBgNeonCity::before{content:'';position:absolute;inset:0;background-image:linear-gradient(transparent 55%,#0a0a1a 55%,#0a0a1a 100%),linear-gradient(transparent 35%,#080818 35%,#080818 55%,transparent 55%);background-size:100% 100%,12px 100%;background-position:0 0,8px 0;pointer-events:none;z-index:1}
.worldBgNeonCity::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,255,238,.8) 1px,transparent 1px),radial-gradient(circle,rgba(255,0,170,.6) 1px,transparent 1px),radial-gradient(circle,rgba(238,255,0,.5) 1px,transparent 1px);background-size:28px 35px,22px 28px,35px 42px;background-position:3px 4px,15px 18px,8px 12px;animation:neonPulse 2s ease-in-out infinite alternate;pointer-events:none;z-index:2;opacity:.6}
@keyframes neonPulse{0%{opacity:.3}100%{opacity:.7}}
/* ─── Pier 47 card background ────────────────────────────────────────────
   Industrial harbour at night: cool slate zenith → amber dockside horizon
   with a subtle cyan water-reflection accent. */
.worldBgPier47{background:linear-gradient(170deg,#0a0e16 0%,#161c2a 30%,#26242e 55%,#3a2a1c 80%,#4a2e1e 100%)}
.worldBgPier47::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(220,140,70,.38) 1px,transparent 1px),radial-gradient(circle,rgba(160,100,50,.22) 1.2px,transparent 1.2px);background-size:42px 32px,28px 22px;background-position:8px 6px,16px 14px;animation:p47SodiumFlicker 3.5s ease-in-out infinite alternate;pointer-events:none;z-index:1;opacity:.55}
.worldBgPier47::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 75% 78%,rgba(220,140,70,.18) 0%,transparent 62%),radial-gradient(ellipse 50% 38% at 22% 70%,rgba(70,130,160,.16) 0%,transparent 60%),radial-gradient(ellipse 45% 32% at 22% 30%,rgba(38,28,52,.45) 0%,transparent 60%),linear-gradient(180deg,transparent 60%,rgba(15,12,18,.45) 100%);pointer-events:none;z-index:1}
@keyframes p47SodiumFlicker{0%{opacity:.35}50%{opacity:.65}100%{opacity:.45}}

/* ─── Caldera Noir card background ───────────────────────────────────────
   Warm noir palette: near-black zenith → deep red mid → ember horizon.
   Two slow-pulsing lava-glow hotspots low-left and lower-right suggest
   off-screen pools.
*/
.worldBgVolcanoCinematic{background:linear-gradient(170deg,#080304 0%,#1a0808 28%,#301210 55%,#481810 78%,#5e2818 100%)}
.worldBgVolcanoCinematic::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(220,90,50,.32) 1.4px,transparent 1.4px),radial-gradient(circle,rgba(150,60,40,.22) 1px,transparent 1px);background-size:36px 28px,22px 18px;background-position:6px 4px,14px 12px;animation:vcEmberFlicker 4s ease-in-out infinite alternate;pointer-events:none;z-index:1;opacity:.55}
.worldBgVolcanoCinematic::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 25% 82%,rgba(220,90,50,.24) 0%,transparent 62%),radial-gradient(ellipse 50% 38% at 78% 78%,rgba(210,80,46,.18) 0%,transparent 60%),linear-gradient(180deg,transparent 50%,rgba(8,2,2,.55) 100%);pointer-events:none;z-index:1}
@keyframes vcEmberFlicker{0%{opacity:.32}40%{opacity:.62}80%{opacity:.46}100%{opacity:.58}}

/* ─── Guangzhou card background ──────────────────────────────────────────
   Wet neon night: near-black zenith → deep purple mid → magenta/cyan
   dual city-glow at horizon. Two pulsing neon hotspots (magenta left,
   cyan right) suggest Pearl River district vs Canton Tower direction.
*/
.worldBgGuangzhou{background:linear-gradient(170deg,#040408 0%,#100820 28%,#1e1030 55%,#2a1238 78%,#0e1a40 100%)}
.worldBgGuangzhou::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(210,60,140,.34) 1.2px,transparent 1.2px),radial-gradient(circle,rgba(90,190,210,.26) 1px,transparent 1px);background-size:38px 30px,24px 20px;background-position:6px 4px,16px 12px;animation:gzNeonFlicker 3.2s ease-in-out infinite alternate;pointer-events:none;z-index:1;opacity:.55}
.worldBgGuangzhou::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 58% 44% at 28% 80%,rgba(210,60,140,.24) 0%,transparent 62%),radial-gradient(ellipse 50% 38% at 76% 78%,rgba(90,180,210,.22) 0%,transparent 60%),linear-gradient(180deg,transparent 52%,rgba(4,4,12,.50) 100%);pointer-events:none;z-index:1}
/* Neon flicker — alternates between magenta-dominant and cyan-dominant
   so the card feels alive without full animation complexity. Timing
   deliberately irregular (ease-in-out alternate) to avoid mechanical feel. */
@keyframes gzNeonFlicker{
  0%   {opacity:.30;filter:hue-rotate(0deg)}
  25%  {opacity:.60;filter:hue-rotate(8deg)}
  55%  {opacity:.44;filter:hue-rotate(-6deg)}
  80%  {opacity:.65;filter:hue-rotate(12deg)}
  100% {opacity:.40;filter:hue-rotate(4deg)}
}

/* ─────────────────────────────────────────────────────────────────────────
   B2/B3/B4/B6 — Visual upgrade pack 2026-05-11
   Per-world accent tokens, header polish, icon halo, count chip.
   Read alongside the B1 mobile-portrait block above.
   ───────────────────────────────────────────────────────────────────────── */

/* B2 — per-world --world-accent / --world-glow CSS variables. Each colour
   is sourced from the world's worldBg* gradient so the accent ring
   matches the card's identity colour. Defaults fall back to canonical
   project purple for any future world that forgets to register a token. */
.worldBigCard{--world-accent:#cc44ff;--world-glow:rgba(204,68,255,.4)}
.worldBigCard[data-world="space"]            {--world-accent:#aa66ff;--world-glow:rgba(170,102,255,.45)}
.worldBigCard[data-world="deepsea"]          {--world-accent:#00ccdd;--world-glow:rgba(0,204,221,.45)}
.worldBigCard[data-world="candy"]            {--world-accent:#ff66cc;--world-glow:rgba(255,102,204,.50)}
.worldBigCard[data-world="neoncity"]         {--world-accent:#00eeff;--world-glow:rgba(0,238,255,.50)}
.worldBigCard[data-world="volcano"]          {--world-accent:#ff5522;--world-glow:rgba(255,85,34,.45)}
.worldBigCard[data-world="arctic"]           {--world-accent:#88ddff;--world-glow:rgba(136,221,255,.45)}
.worldBigCard[data-world="themepark"]        {--world-accent:#ffaa44;--world-glow:rgba(255,170,68,.45)}
.worldBigCard[data-world="sandstorm"]        {--world-accent:#ffcc66;--world-glow:rgba(255,204,102,.45)}
.worldBigCard[data-world="pier47"]           {--world-accent:#dc8c46;--world-glow:rgba(220,140,70,.45)}
.worldBigCard[data-world="volcano-cinematic"]{--world-accent:#dc5a32;--world-glow:rgba(220,90,50,.45)}
.worldBigCard[data-world="guangzhou"]        {--world-accent:#ff3c8c;--world-glow:rgba(255,60,140,.45)}

/* B4 — header upgrade. Title gets the canonical neon gradient (matches
   .finTitle in screens.css and .pauseTitle in base.css) + dual-glow
   drop-shadow. Back button + new "11 WORLDS" count chip both adopt the
   project's glass-blur pill pattern (mirrors .selM-cardBadge and the
   .worldSelBack hover state). */
.worldSelHeader{position:relative}
.worldSelTitle{
  background:linear-gradient(168deg,#ffffff 0%,#00eeff 25%,#cc44ff 55%,#ff22aa 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 0 14px #cc44ff88) drop-shadow(0 0 28px #00eeff44)!important;
}
.worldSelBack{
  background:rgba(120,40,200,.12)!important;
  border:1px solid color-mix(in srgb,#cc44ff 40%,transparent)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.worldSelBack:hover{border-color:#cc44ff!important;color:#ffffff!important;box-shadow:0 0 14px rgba(204,68,255,.45)}

/* B6 — icon halo. Soft pulsing radial-gradient behind the emoji, tinted
   in the world's accent colour. position:relative on .worldCardIcon
   anchors the ::before pseudo. Disabled by reduced-motion. */
.worldCardIcon{position:relative;z-index:3}
.worldCardIcon::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle,var(--world-glow,rgba(204,68,255,.4)) 0%,transparent 65%);
  z-index:-1;pointer-events:none;
  animation:iconHalo 2.4s ease-in-out infinite;
}
@keyframes iconHalo{0%,100%{opacity:.30;transform:scale(.9)}50%{opacity:.65;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .worldCardIcon::before{animation:none;opacity:.42}
}