/* Each world owns the whole interface. Shared selectors consume its palette and geometry. */
@font-face{font-family:Rye;src:url('assets/fonts/rye.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Fredoka;src:url('assets/fonts/fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlowcondensed-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlowcondensed.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/spacegrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}

body[data-world=desert]{
  color-scheme:light;--bg:#ecddba;--panel:#f8edcf;--card:#f0dfb9;--selected:#e8c69c;--disabled:#eee2c7;
  --line:#a58357;--text:#392819;--muted:#725537;--accent:#9b3a21;--on-accent:#fff3d4;--strong:#5c3920;
  --radius:5px;--small-radius:2px;--border-width:2px;--shadow:4px 5px 0 #805b3238;--danger:#a12a22;
  --body-font:Georgia,'Times New Roman',serif;--display-font:Rye,Georgia,serif;--heading-weight:400;
  --scene-ink:#fff0cd;--scene-muted:#ebd0a2;--scene-panel:#412814df;--scene-line:#f2cb8266;
  background-image:radial-gradient(#91663a20 .7px,transparent .7px),linear-gradient(110deg,#f4e8ca88,transparent);
  background-size:5px 5px,100% 100%;
}
body[data-world=ocean]{
  color-scheme:dark;--bg:#051f30;--panel:#0b3549;--card:#12495c;--selected:#13687a;--disabled:#0b2d40;
  --line:#357888;--text:#e2fcff;--muted:#a3d5dc;--accent:#79edda;--on-accent:#06333e;--strong:#c9f6ff;
  --radius:30px;--small-radius:17px;--border-width:1px;--shadow:0 14px 40px #00182366,inset 0 1px 0 #b1f4ff25;--danger:#ffc6b6;
  --body-font:Fredoka,'Trebuchet MS',sans-serif;--display-font:Fredoka,'Trebuchet MS',sans-serif;--heading-weight:500;
  --scene-ink:#eaffff;--scene-muted:#b9eeee;--scene-panel:#062d40db;--scene-line:#9afbe95c;
  background-image:radial-gradient(ellipse at 12% 0%,#159b9540,transparent 48%),radial-gradient(ellipse at 95% 65%,#10759b30,transparent 45%);
  background-attachment:fixed;
}
body[data-world=road]{
  color-scheme:light;--bg:#eee7d3;--panel:#fff9e8;--card:#f7eed6;--selected:#f2d9bd;--disabled:#e9e4d7;
  --line:#425c59;--text:#1e413e;--muted:#576b61;--accent:#ab3025;--on-accent:#fff5df;--strong:#173c38;
  --radius:12px;--small-radius:6px;--border-width:2px;--shadow:5px 5px 0 #234b46;--danger:#ab3025;
  --body-font:'Barlow Condensed','Arial Narrow',sans-serif;--display-font:'Barlow Condensed',Impact,sans-serif;--heading-weight:700;
  --scene-ink:#fff8dc;--scene-muted:#dce7c2;--scene-panel:#153c33eb;--scene-line:#f9e9b46b;
  background-image:repeating-linear-gradient(0deg,transparent 0 7px,#807e6810 7px 8px);
}
body[data-world=galaxy]{
  color-scheme:dark;--bg:#0d0920;--panel:#1b1235;--card:#241a43;--selected:#392759;--disabled:#17112c;
  --line:#6b4c92;--text:#f4edff;--muted:#bdb0d9;--accent:#cfadff;--on-accent:#231039;--strong:#88f3f2;
  --radius:3px;--small-radius:2px;--border-width:1px;--shadow:0 0 26px #b879ff12,inset 0 0 24px #9770dc09;--danger:#ffb4ce;
  --body-font:'Space Grotesk',Consolas,monospace;--display-font:'Space Grotesk',Consolas,monospace;--heading-weight:600;
  --scene-ink:#f7edff;--scene-muted:#d6c7f4;--scene-panel:#1b103ada;--scene-line:#b193f66b;
  background-image:radial-gradient(circle at 20% 12%,#532d713d,transparent 36%),radial-gradient(#bba1e975 .7px,transparent .7px),linear-gradient(#a286d108 1px,transparent 1px),linear-gradient(90deg,#a286d108 1px,transparent 1px);
  background-size:auto,83px 97px,40px 40px,40px 40px;
}
body[data-world]{font-family:var(--body-font);background-color:var(--bg);color:var(--text)}
body[data-world] :is(h1,h2,h3,.brand,.scoreboard strong,.map-name,.milestones b){font-family:var(--display-font);font-weight:var(--heading-weight)}
body[data-world] h1{font-size:clamp(29px,3.4vw,46px);letter-spacing:-.8px;line-height:1.18}
body[data-world] h1 span{display:block;margin-top:3px}
body[data-world] .topbar{border-color:var(--line)}
body[data-world] .brand-icon{color:var(--on-accent);border-radius:var(--small-radius)}
body[data-world] :is(.stage,.collection,.next-reward,dialog){border:var(--border-width) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
body[data-world] .stage{border-color:var(--strong);color:var(--scene-ink)}
body[data-world] .stage-image{opacity:1}
body[data-world] :is(.map-label,.glass){background:var(--scene-panel);color:var(--scene-ink);border-color:var(--scene-line);border-radius:var(--small-radius)}
body[data-world] .map-label i{background:var(--accent)}
body[data-world] .sound-toggle[aria-pressed=true]{color:var(--scene-ink);border-color:var(--scene-line)}
body[data-world] .scoreboard{text-shadow:0 1px 3px #000c,0 2px 8px #0008}
body[data-world] .scoreboard strong{color:var(--scene-ink);letter-spacing:-1px;text-shadow:0 2px 4px #000a,0 3px 15px #0005}
body[data-world] :is(.score-label,.times,.scoreboard p,.stage-bottom,.stage-bottom>span:last-child){color:var(--scene-muted)}
body[data-world] .stage-bottom{background:var(--scene-panel);border-color:var(--scene-line)}
body[data-world] .click-particle{color:var(--scene-ink)}
body[data-world] .click-hint{color:var(--scene-ink);font-family:var(--body-font)}
body[data-world] :is(.collection,.next-reward,dialog){background:var(--panel)}
body[data-world] :is(.collection-count,.reward-symbol){border-color:var(--line);background:var(--card);color:var(--accent);border-radius:var(--small-radius)}
body[data-world] .progress-track{background:var(--line);border-radius:var(--small-radius);height:6px}
body[data-world] .progress-track>span{border-radius:var(--small-radius)}
body[data-world] .collection-tabs{background:var(--bg);border:1px solid var(--line);border-radius:var(--small-radius)}
body[data-world] .collection-tabs button{border-radius:var(--small-radius)}
body[data-world] .collection-tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent);box-shadow:none}
body[data-world] :is(.map-card,.cosmetic-card){background:var(--card);border:var(--border-width) solid var(--line);border-radius:var(--small-radius)}
body[data-world] :is(.map-card,.cosmetic-card).selected{background:var(--selected);border-color:var(--accent)}
body[data-world] :is(.map-card,.cosmetic-card):disabled{background:var(--disabled);border-color:var(--line)}
body[data-world] :is(.map-card,.cosmetic-card):hover:not(:disabled){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body[data-world] .map-thumb{border-radius:var(--small-radius)}
body[data-world] :is(.map-number,.map-status,.collection-note,.cosmetic-lock,.milestones small,footer,dialog p){color:var(--muted)}
body[data-world] .selected .map-status{color:var(--accent)}
body[data-world] .cosmetic-preview{background:radial-gradient(ellipse,var(--selected),transparent 72%)}
body[data-world] .milestones li::before{background:var(--line)}
body[data-world] .milestone-marker{border-color:var(--line);color:var(--muted);border-radius:var(--small-radius)}
body[data-world] .milestones li.earned .milestone-marker{color:var(--on-accent);border-color:var(--accent);background:var(--accent)}
body[data-world] .milestones li.next .milestone-marker{border-color:var(--accent);color:var(--accent)}
body[data-world] .milestones b{color:var(--text)}
body[data-world] :is(.milestones li.next b,.milestones li.earned b){color:var(--accent)}
body[data-world] :is(.icon-button,.button,.help-tip,.sound-library){border-radius:var(--small-radius)}
body[data-world] .icon-button:hover{background:var(--selected)}
body[data-world] .glass:hover{background:var(--scene-panel)}
body[data-world] :is(.secondary,.help-tip){background:var(--card);border-color:var(--line);color:var(--text)}
body[data-world] .secondary:hover{border-color:var(--accent);color:var(--accent)}
body[data-world] .primary{background:var(--accent);color:var(--on-accent)}
body[data-world] .danger{color:var(--danger)}
body[data-world] .danger-button{background:var(--danger);color:var(--bg)}
body[data-world] .sound-library{background:var(--card);border:1px solid var(--line)}
body[data-world] .toast{background:var(--accent);color:var(--on-accent);border:var(--border-width) solid var(--strong);border-radius:var(--small-radius);box-shadow:var(--shadow)}
body[data-world] .toast button{background:var(--on-accent);color:var(--accent);border-radius:var(--small-radius)}
body[data-world] .toast .toast-close{background:transparent;color:var(--on-accent);border-color:currentColor}
body[data-world] .toast button:focus-visible{outline-color:var(--on-accent)}
body[data-world] .toast.error{background:var(--panel);color:var(--danger);border-color:var(--danger)}
body[data-world] .toast.error .toast-close{color:var(--danger)}
body[data-world] .save-state.warning{color:var(--danger)}
body[data-world] .save-state.warning i{background:var(--danger)}
body[data-world] dialog::backdrop{background:#061017b8}
body[data-world] .footer-dot{color:var(--accent)}

/* DESIERTO — a stamped frontier field journal. */
body[data-world=desert] .topbar{border-bottom:3px double var(--strong)}
body[data-world=desert] .brand{font-size:17px;letter-spacing:-.6px}
body[data-world=desert] .brand-light{font-weight:400}
body[data-world=desert] .brand-icon{transform:rotate(0);border:2px solid var(--accent);outline:1px solid var(--accent);outline-offset:3px}
body[data-world=desert] :is(.eyebrow,.next-title,.map-number,.score-label){font-family:'Courier New',monospace;font-weight:bold;letter-spacing:1.3px}
body[data-world=desert] .collection{border-style:double;border-width:4px}
body[data-world=desert] .collection-heading{padding-bottom:15px;border-bottom:2px dashed var(--line)}
body[data-world=desert] .map-card{border-style:dashed}
body[data-world=desert] .map-card.selected{border-style:solid;box-shadow:3px 3px 0 #9b3a2126}
body[data-world=desert] .stage{outline:1px solid var(--line);outline-offset:4px}
body[data-world=desert] .stage-shade{background:linear-gradient(transparent 50%,#30190b12 75%,#30190b40)}
body[data-world=desert] .next-reward{border-top:4px double var(--line)}
body[data-world=desert] .journey h2{font-size:15px}
body[data-world=desert] .milestone-marker{transform:rotate(45deg)}
body[data-world=desert] .milestone-marker .icon{transform:rotate(-45deg)}
body[data-world=desert] .collection h2{font-size:21px}
body[data-world=desert] .map-name{font-size:12px}
body[data-world=desert] footer{border-top:3px double var(--strong)}

/* MARINO — soft, buoyant glass with rings and sea light. */
body[data-world=ocean] .topbar{border-radius:0 0 28px 28px;border-bottom-color:#75dac65c}
body[data-world=ocean] .brand-icon{border-radius:50% 45% 48% 40%;box-shadow:0 0 22px #79edda36}
body[data-world=ocean] h1{font-size:clamp(34px,3.9vw,53px);letter-spacing:-1px}
body[data-world=ocean] .collection{background:linear-gradient(145deg,#104758ee,#0a2f43f7)}
body[data-world=ocean] .map-card{border-radius:20px 20px 20px 7px}
body[data-world=ocean] .map-card.selected{box-shadow:0 0 22px #6aedcc20,inset 0 1px 0 #caffef45}
body[data-world=ocean] .stage{border:2px solid #71d5d0;box-shadow:0 0 0 5px #53c4c916,0 15px 60px #0005}
body[data-world=ocean] .stage-shade{background:linear-gradient(transparent 50%,#02273812 75%,#02273840)}
body[data-world=ocean] .milestone-marker{border-radius:50%;box-shadow:0 0 0 4px #79edda0c}
body[data-world=ocean] .progress-track{height:7px;background:#032537}
body[data-world=ocean] .progress-track>span{background:linear-gradient(90deg,#35b9d3,#a1f5d2)}
body[data-world=ocean] .reward-symbol{border-radius:50%}
body[data-world=ocean] dialog{background:linear-gradient(145deg,#124b60,#092b3e);border-color:#79eddab0}

/* ROAD TRIP — diner signs, enamel borders and painted road markings. */
body[data-world=road] .brand{font-size:26px;letter-spacing:1px;font-weight:700}
body[data-world=road] .brand-light{font-weight:700}
body[data-world=road] .brand-icon{transform:rotate(-8deg);border:2px solid var(--strong);box-shadow:2px 2px 0 var(--strong)}
body[data-world=road] .topbar{border-bottom:3px solid var(--strong)}
body[data-world=road] h1{text-transform:uppercase;font-size:clamp(40px,4.3vw,62px);line-height:.95;letter-spacing:.5px}
body[data-world=road] h1 span{margin-top:9px}
body[data-world=road] :is(.eyebrow,.next-title,.map-number){font-weight:700;letter-spacing:2px}
body[data-world=road] :is(.intro-copy,.map-status){font-size:14px}
body[data-world=road] .map-name{font-size:18px;text-transform:uppercase;letter-spacing:.7px}
body[data-world=road] .collection h2{font-size:31px;text-transform:uppercase}
body[data-world=road] .collection-tabs button{font-size:15px;text-transform:uppercase;letter-spacing:1px}
body[data-world=road] .map-card.selected{box-shadow:3px 3px 0 var(--accent)}
body[data-world=road] .collection{border:3px solid var(--strong)}
body[data-world=road] .stage{border:4px solid var(--strong);box-shadow:6px 6px 0 var(--accent)}
body[data-world=road] .stage-shade{background:linear-gradient(transparent 50%,#071f1612 75%,#071f1640)}
body[data-world=road] .scoreboard strong{font-size:78px;font-weight:700;letter-spacing:2px}
body[data-world=road] .stage-bottom{border-top:2px dashed #fff0a9a0}
body[data-world=road] .map-label{border:3px double #e8e2b9;border-radius:8px}
body[data-world=road] .next-reward{border-left:7px solid var(--accent)}
body[data-world=road] .progress-track{height:8px;background:var(--strong)}
body[data-world=road] .progress-track>span{background:repeating-linear-gradient(90deg,var(--accent) 0 16px,#eaba8670 16px 20px)}
body[data-world=road] .milestones li::before{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 13px)}
body[data-world=road] .milestone-marker{border-radius:5px 5px 12px 12px;border-width:2px}
body[data-world=road] :is(.milestones b,.journey h2,.dialog-heading h2){text-transform:uppercase;letter-spacing:.5px}
body[data-world=road] :is(.button,.setting-row b){font-size:15px}
body[data-world=road] :is(dialog p,.setting-row small,.sound-library p){font-size:14px}
body[data-world=road] .milestones b{font-size:15px}
body[data-world=road] .milestones small{font-size:12px}

/* GALÁCTICO — a violet navigation console, cyan tracers and sharp edges. */
body[data-world=galaxy] .topbar{border-bottom-color:var(--accent);box-shadow:0 7px 20px -17px #deafff}
body[data-world=galaxy] .brand{letter-spacing:-1px}
body[data-world=galaxy] .brand-icon{transform:rotate(45deg);background:transparent;border:1px solid var(--accent);color:var(--accent);box-shadow:0 0 20px #cfadff35}
body[data-world=galaxy] .brand-icon svg{transform:rotate(-45deg)}
body[data-world=galaxy] :is(.eyebrow,.next-title,.map-number,.score-label,.sound-library-tag){font-family:Consolas,'Courier New',monospace}
body[data-world=galaxy] h1 span{color:#d3b4ff;text-shadow:0 0 30px #c499ff45}
body[data-world=galaxy] .intro-copy{color:#b8a7d5}
body[data-world=galaxy] :is(.stage,.collection){border-top:2px solid var(--accent)}
body[data-world=galaxy] .collection{background:linear-gradient(145deg,#24163b,#150e29);position:relative}
body[data-world=galaxy] .collection-heading{border-bottom:1px solid var(--line);padding-bottom:18px}
body[data-world=galaxy] .map-card{border-left:3px solid var(--line)}
body[data-world=galaxy] .map-card.selected{border-left-color:var(--strong);box-shadow:inset 0 0 20px #a65dff19}
body[data-world=galaxy] .stage{box-shadow:0 0 0 4px #c4a7ff0c,0 0 35px #9161cc18}
body[data-world=galaxy] .stage-shade{background:linear-gradient(transparent 50%,#10091f12 75%,#10091f40)}
body[data-world=galaxy] .map-label{color:var(--strong);border-left:3px solid var(--strong)}
body[data-world=galaxy] .scoreboard strong{text-shadow:0 0 30px #cc9efa66}
body[data-world=galaxy] .progress-track>span{background:linear-gradient(90deg,#9361d9,#88f3f2);box-shadow:0 0 10px #88f3f2}
body[data-world=galaxy] .next-reward{border-left:3px solid var(--strong)}
body[data-world=galaxy] .milestone-marker{border-radius:0;box-shadow:0 0 10px #c49bff12}
body[data-world=galaxy] .milestones li.earned .milestone-marker{background:var(--selected);color:var(--strong)}
body[data-world=galaxy] dialog{border-top:3px solid var(--accent);box-shadow:0 0 70px #ae7aff25}
body[data-world=galaxy] footer{font-family:Consolas,'Courier New',monospace}

@media(max-width:800px){
  body[data-world=desert] .map-name{font-size:10px}
  body[data-world=road] .map-name{font-size:16px}
}
@media(max-width:650px){
  body[data-world] .brand{font-size:17px;letter-spacing:-.7px}
  body[data-world=desert] .brand{font-size:13px;letter-spacing:-.5px}
  body[data-world=road] .brand{font-size:22px}
  body[data-world] h1{font-size:32px;line-height:1.15;letter-spacing:-.8px}
  body[data-world=desert] h1{font-size:27px}
  body[data-world=road] h1{font-size:43px;line-height:1}
  body[data-world] .stage{border-radius:var(--radius)}
  body[data-world] .collection{border-radius:var(--radius)}
  body[data-world=desert] .map-name{font-size:13px}
  body[data-world=road] .map-name{font-size:18px}
  body[data-world] .cosmetic-card .map-name{font-size:10px}
  body[data-world=desert] .cosmetic-card .map-name{font-size:9px}
  body[data-world=road] .cosmetic-card .map-name{font-size:14px}
  body[data-world] .milestones li{min-width:100px}
  body[data-world=desert] .milestones small{font-family:Georgia,serif}
  body[data-world] .dialog-heading h2{font-size:21px}
  body[data-world=desert] .dialog-heading h2{font-size:19px}
  body[data-world] .journey h2{font-size:14px}
  body[data-world=road] .journey h2{font-size:21px}
}
@media(max-width:370px){
  body[data-world] .header-actions{gap:5px}
  body[data-world] .brand{gap:8px}
  body[data-world=desert] .brand{font-size:12px}
  body[data-world] .save-state{font-size:10px;max-width:64px}
  body[data-world] .map-label{font-size:7px;letter-spacing:.25px;padding:8px}
  body[data-world] .sound-toggle{font-size:9px;padding:0 8px}
  body[data-world] .map-card{gap:10px}
}
/* Keep keyboard focus visible over both bright GIF frames and dark scene controls. */
body[data-world] .stage button:focus-visible{outline-color:var(--scene-ink);box-shadow:0 0 0 8px #081018a6}
/* Keep totals on one line at phone widths, including Road Trip's wider numerals. */
@media(max-width:650px){body[data-world] .scoreboard strong{font-size:clamp(36px,15vw,60px)}}

/* Branding lives in the compact title, leaving the game close to the top. */
body[data-world] .intro{align-items:center;gap:24px;padding:22px 0 20px}
.intro-content{min-width:0;flex:1}
body[data-world] .intro .eyebrow{margin:0 0 8px;font-size:8px;line-height:1.3}
body[data-world] #page-title{font-size:clamp(26px,3vw,38px);line-height:1.04;letter-spacing:-1.1px;margin:0;max-width:none}
body[data-world] #page-title .title-brand{display:flex;align-items:center;gap:14px;margin:0 0 5px;color:var(--text);text-shadow:none}
#page-title .world-brand{display:flex;align-items:center;gap:12px;min-width:0}
body[data-world] #page-title .world-wordmark{display:block;margin:0;color:var(--text);font-size:clamp(25px,2.8vw,36px);line-height:1;letter-spacing:-1.4px;white-space:nowrap;text-shadow:none}
#page-title .world-tagline{font-family:var(--body-font);font-size:10px;font-weight:400;letter-spacing:.3px;line-height:1.4;text-transform:none;color:var(--muted);border-left:1px solid var(--line);padding-left:14px;white-space:nowrap}
body[data-world] #page-title #world-title{display:block;margin:0;line-height:1.06;letter-spacing:-.9px}
body[data-world] .intro-copy{margin:7px 0 0;font-size:12px;line-height:1.4}
.intro-tools{display:flex;flex-direction:column;gap:20px;align-items:flex-end;flex-shrink:0}
body[data-world] .intro-tools .header-actions{gap:12px}
body[data-world] .intro-tools .journey-label{padding-left:0;border:0}
body[data-world] #page-title .world-emblem{position:relative;display:block;flex:0 0 52px;width:52px;height:52px;margin:0;color:var(--emblem-ink);background-color:var(--emblem-bg);border:2px solid var(--emblem-edge);border-radius:var(--emblem-radius);transform:rotate(var(--emblem-turn));box-shadow:var(--emblem-shadow);transition:background-color .5s ease,color .5s ease,border-color .5s ease,border-radius .5s ease,transform .5s ease,box-shadow .5s ease}
.world-logo{position:absolute;inset:7px;width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateY(5px) scale(.65) rotate(-20deg);transition:opacity .38s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.world-logo .logo-detail{stroke-width:1.4;opacity:.75}
body[data-world=desert]{--emblem-bg:#ac492c;--emblem-ink:#ffedbd;--emblem-edge:#673820;--emblem-radius:24px 24px 7px 7px;--emblem-turn:-4deg;--emblem-shadow:3px 3px 0 #a5835760}
body[data-world=ocean]{--emblem-bg:#93f5de;--emblem-ink:#064f65;--emblem-edge:#d3fff4;--emblem-radius:50% 42% 48% 36%;--emblem-turn:5deg;--emblem-shadow:0 0 24px #79edda55,inset 0 -5px 0 #35a8bb55}
body[data-world=road]{--emblem-bg:#204f49;--emblem-ink:#fff0b5;--emblem-edge:#ab3025;--emblem-radius:7px 7px 23px 23px;--emblem-turn:0deg;--emblem-shadow:3px 3px 0 #ab302555}
body[data-world=galaxy]{--emblem-bg:#392060;--emblem-ink:#9df9f4;--emblem-edge:#cfadff;--emblem-radius:5px;--emblem-turn:45deg;--emblem-shadow:0 0 25px #b48aef60,inset 0 0 14px #cfadff22}
body[data-world=desert] .logo-desert,body[data-world=ocean] .logo-ocean,body[data-world=road] .logo-road{opacity:1;transform:translateY(0) scale(1) rotate(0)}
body[data-world=galaxy] .logo-galaxy{opacity:1;transform:translateY(0) scale(1) rotate(-45deg)}
body[data-world=road] #page-title .world-wordmark{letter-spacing:.2px;font-size:clamp(30px,3.1vw,42px)}
@media(max-width:1000px){
  body[data-world] .intro{gap:14px;padding:18px 0}
  .intro-tools{gap:12px}
  body[data-world] .intro-tools .save-state{font-size:10px}
  #page-title .world-tagline{font-size:9px;padding-left:10px}
  body[data-world] #page-title .title-brand{gap:10px}
}
@media(max-width:700px){
  body[data-world] .intro{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 0}
  .intro-tools{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  body[data-world] .intro-tools .journey-label{display:flex;font-size:10px;gap:8px}
  body[data-world] .intro-tools .journey-label small{font-size:8px}
  body[data-world] .intro-tools .header-actions{gap:8px}
  body[data-world] .intro-tools .save-state{max-width:none;font-size:10px}
  body[data-world] .intro-tools .icon-button{width:30px;height:30px}
  body[data-world] #page-title{font-size:27px}
  body[data-world] #page-title .world-wordmark{font-size:27px;letter-spacing:-1.2px}
  body[data-world=road] #page-title .world-wordmark{font-size:33px;letter-spacing:0}
  body[data-world] #page-title .world-emblem{flex-basis:42px;width:42px;height:42px}
  .world-logo{inset:5px;width:28px;height:28px}
  #page-title .world-brand{gap:9px}
  body[data-world] .intro-copy{font-size:11px;margin-top:5px}
}
@media(max-width:400px){
  body[data-world] #page-title .world-wordmark{font-size:22px;letter-spacing:-1px}
  body[data-world=desert] #page-title .world-wordmark{font-size:20px}
  body[data-world=road] #page-title .world-wordmark{font-size:28px}
  body[data-world] #page-title{font-size:25px}
  body[data-world] #page-title .title-brand{gap:8px}
  #page-title .world-tagline{font-size:8px;padding-left:8px;white-space:normal;max-width:56px}
  body[data-world] .intro-tools .save-state{max-width:78px;font-size:9px}
}