@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url(../assets/fonts/fredoka-500.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url(../assets/fonts/fredoka-600.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url(../assets/fonts/fredoka-700.woff2) format('woff2'); }
/* Dart Ranger. Dark teal, orange ear-tag accents. */
:root {
  --ink: #0d2a35; --ink-2: #143848; --ink-3: #1c4a5c; --line: #2d6073;
  --paper: #f2eee3; --mist: #a3c6d0; --faint: #7da3af;
  --tag: #ff7a2f; --tag-ink: #1d0e04; --sky: #8fd0e3; --gold: #ffc24b; --ok: #7ed6a0;
  --display: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.5 var(--display); overflow-x: hidden; }
.wrap { max-width: 1040px; margin: 0 auto; padding-block: 18px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.small { font-size: 0.78rem; color: var(--mist); margin: 0; }
h1, h2, h3 { margin: 0; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--mist); font: 500 0.9rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; z-index: 50; }
.boot.gone { display: none; }

/* title */
.hero { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 26px; }
.eartag { align-self: flex-start; display: inline-flex; gap: 14px; align-items: center; margin: 0; position: relative; padding: 0.35em 1em 0.35em 2.3em; background: var(--tag); color: var(--tag-ink); border-radius: 6px 18px 18px 6px; font: 500 0.72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.eartag::before { content: ''; position: absolute; left: 0.85em; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; border-radius: 50%; background: var(--ink); }
h1 { font-weight: 700; line-height: 1; font-size: clamp(2.8rem, 10vw, 5.2rem); letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 0; max-width: 58ch; color: var(--mist); font-size: 1.08rem; }
.titlebtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.btn.big { min-height: 52px; padding: 0.6em 1.7em; font-size: 1.15rem; }
.titlestat { margin: 0 0 8px; color: var(--mist); font-size: 0.85rem; }
.how { margin-top: 18px; color: var(--mist); }
.how summary { cursor: pointer; font-weight: 500; color: var(--paper); }
.how ul { margin: 10px 0 0; padding-left: 1.2em; max-width: 62ch; }
.how li { margin: 4px 0; }
.foot { margin: 22px 0 0; font: 400 0.76rem var(--mono); color: var(--faint); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 42px; padding: 0.5em 1.1em; cursor: pointer; font: 500 0.95rem var(--display); color: var(--paper); background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover:not(:disabled) { border-color: var(--sky); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--tag); color: var(--tag-ink); border-color: var(--tag); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #ff914f; border-color: #ff914f; }
.btn.ghost { background: transparent; }
.toggle::before { content: ''; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--sky); border: 1.5px solid var(--sky); flex: none; }
.toggle[aria-pressed='false'] { color: var(--faint); }
.toggle[aria-pressed='false']::before { background: transparent; border-color: var(--faint); }
.pausebtn[aria-pressed='true'] { color: var(--gold); }
.pausebtn[aria-pressed='true']::before { background: var(--gold); border-color: var(--gold); }
#netBtn[aria-pressed='true'], #lensBtn[aria-pressed='true'] { border-color: var(--gold); color: var(--gold); }

/* page head */
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ph-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.ph-title { display: flex; flex-direction: column; min-width: 0; }
.ph-title h2 { font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.eyebrow { font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); }
.coinbar { display: inline-flex; align-items: center; gap: 8px; padding: 0.3em 0.9em; background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; }
.coinicon { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe28a, var(--gold) 55%, #c98a1a); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.coinval { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lbl { font: 500 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--mist); }
.blurb { margin: 0 0 4px; color: var(--mist); font-size: 0.97rem; }
.chip { font: 500 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line); color: var(--sky); border-radius: 999px; padding: 0.2em 0.8em; white-space: nowrap; }
.chip.boss { color: var(--tag-ink); background: var(--tag); border-color: var(--tag); vertical-align: middle; }

/* stars */
.stars { display: inline-flex; gap: 2px; white-space: nowrap; }
.star { color: #3a6577; font-size: 1.15rem; line-height: 1; }
.star.on { color: var(--gold); }
.stars.big .star { font-size: 2.4rem; }
.stars.big { gap: 6px; }

/* worlds */
.worldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.world { min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.world.locked { opacity: .72; }
.world-art { height: 112px; background-size: cover; background-position: center; position: relative; }
.world-lake .world-art { background-color: #2c7a92; background-image: radial-gradient(circle at 76% 60%, #fff3cf 0 6%, rgba(255,230,180,0) 7%), radial-gradient(ellipse 34% 38% at 22% 53%, #437a80 0 97%, transparent 100%), linear-gradient(#5aa0c8 0 28%, #b7d8d8 28% 50%, #f1d9ad 50% 53%, #2c7a92 53% 78%, #14506a 78% 100%); }
.world-boiler .world-art { background-color: #c99a6a; background-image: radial-gradient(ellipse 30% 22% at 26% 82%, rgba(255,255,255,.95) 0 55%, rgba(255,255,255,0) 100%), radial-gradient(ellipse 20% 34% at 27% 58%, rgba(255,255,255,.7) 0 50%, rgba(255,255,255,0) 100%), linear-gradient(#86b9d8 0 34%, #d9c19a 34% 60%, #b9916a 60% 76%, #e0c48f 76% 100%); }
.world-boiler .world-art::before { content: ''; position: absolute; left: 62%; bottom: 0; width: 52px; height: 58px; background: #8a6a4e; border-radius: 26px 26px 0 0; box-shadow: inset -9px 0 0 rgba(0,0,0,.2); }
.world-safari .world-art { background-color: #d9a050; background-image: radial-gradient(circle at 78% 30%, #fff3c4 0 7%, rgba(255,240,190,0) 8%), linear-gradient(#f2c37a 0 55%, #c79052 55% 72%, #8d6638 72% 100%); }
.world-amazon .world-art { background-color: #4f8a5c; background-image: radial-gradient(circle at 74% 24%, #fff6cf 0 6%, rgba(255,246,207,0) 7%), linear-gradient(#a9dcc6 0 30%, #5f9a62 30% 58%, #3f6a3e 58% 66%, #6f966a 66% 100%); }
.world-arctic .world-art { background-color: #bcd9ee; background-image: linear-gradient(#a9cdea 0 40%, #e8f4fb 40% 52%, #cfe6f5 52% 100%); }
.world-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.world-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.world h3 { font-size: 1.3rem; font-weight: 600; }
.prog { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.world-body .btn { align-self: flex-start; margin-top: auto; }
.lockmsg { margin: auto 0 0; color: var(--faint); font-size: 0.9rem; }

/* levels */
.set { margin: 18px 0 8px; }
.set-title { display: flex; align-items: baseline; gap: 10px; font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; flex-wrap: wrap; }
.set-title .mono { font-size: 0.72rem; color: var(--mist); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; min-height: 104px; padding: 10px 10px 9px; text-align: left; color: inherit; font: inherit; cursor: pointer; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, transform .1s; }
.tile:hover:not(:disabled) { border-color: var(--tag); }
.tile:active:not(:disabled) { transform: scale(.98); }
.tile.done { background: var(--ink-3); }
.tile.locked { opacity: .5; cursor: default; }
.tile.boss { border-color: var(--tag); }
.tn { font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--paper); }
.tname { font-size: .84rem; line-height: 1.2; color: var(--mist); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tboss { position: absolute; top: 9px; right: 9px; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; background: var(--tag); color: var(--tag-ink); border-radius: 999px; padding: 0 .55em; }
.tile .stars { margin-top: auto; }
.tile .star { font-size: 1rem; }
.lockicon { margin-top: auto; font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }

/* shop */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 14px 0 18px; }
.upcard { background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.upcard.earned { border-style: dashed; }
.up-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.up-head h3 { font-size: 1.2rem; font-weight: 600; }
.tierpips { display: inline-flex; gap: 5px; }
.tierpips i { width: 14px; height: 7px; background: var(--ink-3); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.tierpips i.on { background: var(--tag); }
.upcard .btn { align-self: flex-start; margin-top: 8px; }
.maxed { color: var(--ok); margin: 6px 0 0; font-size: .8rem; }

/* sanctuary */
.sanct-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sanct-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px; padding: .4em .95em; background: var(--ink-2); color: var(--paper); border: 1px solid var(--line); border-radius: 14px; font: inherit; cursor: pointer; text-align: left; }
.sanct-tab .tn { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.sanct-tab .tc { font-size: .72rem; color: var(--mist); }
.sanct-tab.on { border-color: var(--tag); background: var(--ink-3); }
.sanct-tab.locked { opacity: .55; }
.sanct-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #1b3a44; margin-bottom: 10px; }
.sanctcv { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; touch-action: pan-y; cursor: pointer; }
.sanct-wrap.dim .sanctcv { filter: brightness(.42) saturate(.6); }
.sanct-msg { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); max-width: 86%; padding: .55em 1.1em; border-radius: 999px; background: rgba(9, 28, 36, .82); border: 1px solid var(--line); color: var(--paper); text-align: center; font-weight: 500; pointer-events: none; }
.sanct-stat { margin: 4px 0; }
@media (max-width: 640px) { .sanctcv { aspect-ratio: 3 / 4; } }
.sset { margin: 18px 0; }
.species { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.spec { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.spec canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; background: rgba(255, 255, 255, .07); border-radius: 8px; }
.spec.empty .sname { color: var(--faint); }
.sname { font-weight: 500; font-size: .95rem; text-align: center; }

/* play */
.topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.topbar .title { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.topbar h2 { font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.toggles .btn { min-height: 38px; padding: .35em .9em; font-size: .88rem; }
.stage { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #08202a; width: min(100%, calc((100dvh - 300px) * 16 / 9)); min-width: min(100%, 480px); margin-inline: auto; }
canvas#cv { border-radius: inherit; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stagecv { position: relative; }
.end, .pauseov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(6, 20, 28, .62); overflow: auto; }
.end-card { width: 100%; max-width: 420px; padding: 20px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; }
.end-card h3 { font-size: 1.9rem; font-weight: 700; line-height: 1.1; text-wrap: balance; }
.end-card p { margin: 0; color: var(--mist); }
.end-card .extra { display: flex; flex-direction: column; gap: 2px; }
.end-card .line { font: 400 .85rem var(--mono); }
.end-card .line.coins { color: var(--gold); }
.end-card .line.sanct { color: var(--ok); }
.end-card .line.unlock { color: var(--sky); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.cell { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.val { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; align-items: center; }
.pip { width: 20px; height: 7px; background: var(--tag); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.pip.used { background: var(--ink-3); }
.ruler { position: relative; display: inline-block; width: 90px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, rgba(120,200,225,.15), rgba(30,110,150,.9)); }
.ruler i { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--tag); }
.meter { display: block; height: 8px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--v, 100%); background: var(--sky); border-radius: inherit; transition: width .2s; }
.meter.low i { background: var(--tag); }
.actionrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: stretch; }
.actionrow .btn { min-height: 52px; }
#steady { flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; border-radius: 16px; padding: .5em 1.1em; touch-action: none; user-select: none; -webkit-user-select: none; }
#steady.on { border-color: var(--sky); background: var(--ink-3); }
#fire { min-width: 150px; font-size: 1.05rem; touch-action: manipulation; }
.jeepPad { display: flex; gap: 10px; margin-left: auto; }
.btn.pad { min-width: 96px; font-size: 1.05rem; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 16px; }
.btn.pad.on { border-color: var(--sky); background: var(--ink-3); }
.tip { margin: 12px 0 4px; max-width: 65ch; color: var(--mist); }
.keys { margin: 4px 0 0; font: 400 .74rem/1.5 var(--mono); color: var(--faint); max-width: 80ch; }

/* phones */
@media (max-width: 640px) {
  .wrap { padding-top: 10px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ph-title h2 { font-size: 1.4rem; }
  [data-screen='play'] .wrap { padding-left: 0; padding-right: 0; }
  [data-screen='play'] .topbar, [data-screen='play'] .actionrow, [data-screen='play'] .tip, [data-screen='play'] .keys { margin-left: 12px; margin-right: 12px; }
  .stage { width: 100%; min-width: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .topbar { margin-bottom: 8px; }
  .topbar h2 { font-size: 1.15rem; }
  .actionrow { display: grid; grid-template-columns: 1fr 1fr; }
  .actionrow .btn { min-height: 60px; }
  #steady, #fire { min-width: 0; }
  #netBtn, #lensBtn { min-height: 48px; }
  .jeepPad { grid-column: 1 / -1; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .btn.pad { min-height: 60px; }
  .keys { display: none; }
  .end-card { padding: 14px 16px; gap: 6px; }
  .end-card h3 { font-size: 1.5rem; }
  .stars.big .star { font-size: 1.9rem; }
}
/* rotate screen: only for touch phones held upright (the game is played sideways) */
.rotate { display: none; position: fixed; inset: 0; z-index: 90; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: var(--ink); color: var(--paper); }
.rotate .rphone { width: 54px; height: 92px; border: 4px solid var(--sky); border-radius: 12px; position: relative; animation: turnPhone 2.6s ease-in-out infinite; }
.rotate .rphone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: var(--sky); opacity: .7; }
.rotate h2 { font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
.rotate p { margin: 0; color: var(--mist); max-width: 28ch; }
@keyframes turnPhone { 0%, 15% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rotate .rphone { animation: none; transform: rotate(-90deg); } }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 820px) { .rotate { display: flex; } body { overflow: hidden; } }
/* phone landscape: the scene fills the height, the buttons sit on its edges, nothing scrolls while playing */
@media (orientation: landscape) and (max-height: 480px) {
  /* menus: three worlds across, shorter pictures, the sanctuary scene fits the height */
  .wrap { padding-block: 8px 16px; }
  .worldgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .world-art { height: 74px; }
  .world h3 { font-size: 1.1rem; }
  .sanct-wrap { max-width: calc((100dvh - 110px) * 16 / 9); margin-inline: auto; }
  .sanctcv { aspect-ratio: 16 / 9; }
  .btn { min-height: 44px; }
  body[data-screen='play'] { overflow: hidden; }
  body[data-screen='play'] .wrap { padding: 0; max-width: none; }
  main#play { --sw: min(calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 46px) * 16 / 9)); --gut: clamp(64px, calc((100vw - var(--sw)) / 2 - 10px), 100px); }
  main#play:not([hidden]) { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: var(--ink);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  main#play .topbar { width: 100%; box-sizing: border-box; height: 40px; flex: none; margin: 0; padding: 3px 8px; flex-wrap: nowrap; gap: 6px; }
  main#play .topbar .title { flex: 1 1 auto; overflow: hidden; }
  main#play .topbar h2 { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main#play .topbar .eyebrow { display: none; }
  main#play .topbar > .btn { min-height: 32px; padding: .15em .7em; font-size: .8rem; }
  .toggles { flex-wrap: nowrap; gap: 4px; }
  .toggles .btn { min-height: 32px; padding: .15em .6em; font-size: .74rem; }
  .stage { display: contents; }
  .stagecv { flex: none; width: var(--sw); border-radius: 12px; border: 1px solid var(--line); background: #08202a; }
  #hudStrip { position: absolute; left: calc(env(safe-area-inset-left, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 46px); z-index: 3; }
  .hud-tl .hchip { font-size: .72rem; padding: 3px 7px; white-space: nowrap; }
  main#play .actionrow { display: contents; }
  main#play .actionrow .btn { position: absolute; z-index: 5; margin: 0; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  #steady { left: calc(env(safe-area-inset-left, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: var(--gut); height: 76px; min-width: 0; min-height: 0; padding: .3em .5em; font-size: .85rem; background: rgba(12, 40, 54, .6); border-color: rgba(120, 200, 225, .5); }
  #fire { right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: calc(var(--gut) + 20px); height: calc(var(--gut) + 20px); min-width: 0; min-height: 0; border-radius: 50%; padding: .2em; font-size: .85rem; line-height: 1.15; background: rgba(255, 122, 47, .78); }
  #netBtn { right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gut) + 36px); width: calc(var(--gut) + 20px); min-width: 0; min-height: 50px; padding: .2em .4em; font-size: .78rem; line-height: 1.15; white-space: normal; background: rgba(12, 40, 54, .6); }
  #lensBtn { right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--gut) + 92px); width: calc(var(--gut) + 20px); min-width: 0; min-height: 50px; padding: .2em .4em; font-size: .78rem; line-height: 1.15; white-space: normal; background: rgba(12, 40, 54, .6); }
  .jeepPad { display: contents; margin: 0; }
  .btn.pad { min-width: 0; width: calc(var(--gut) - 12px); height: 48px; min-height: 0; padding: 0; left: calc(env(safe-area-inset-left, 0px) + 8px); background: rgba(12, 40, 54, .6); }
  #gasBtn { bottom: calc(env(safe-area-inset-bottom, 0px) + 144px); }
  #brakeBtn { bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
  .keys, .tip { display: none; }
  .pauseov, .end { z-index: 7; }
}
@media (prefers-reduced-motion: reduce) { .meter i, .tile, .btn { transition: none; } }

/* debug panel */
#dbg { position: fixed; right: 8px; bottom: 8px; z-index: 40; width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); display: flex; flex-direction: column; background: rgba(8, 28, 38, .96); border: 1px solid var(--tag); border-radius: 12px; font: 400 12px/1.4 var(--mono); color: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,.45); }
#dbg > button.dbg-head { all: unset; cursor: pointer; padding: 8px 12px; font-weight: 500; color: var(--tag); display: flex; justify-content: space-between; letter-spacing: .08em; text-transform: uppercase; }
#dbg .dbg-body { padding: 4px 12px 12px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
#dbg[data-open='0'] .dbg-body { display: none; }
#dbg label { display: flex; gap: 8px; align-items: center; }
#dbg .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#dbg button.b { font: inherit; color: var(--paper); background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
#dbg button.b:hover { border-color: var(--sky); }
#dbg select, #dbg input[type=number] { font: inherit; background: var(--ink); color: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; max-width: 100%; }
#dbg .st { color: var(--mist); white-space: pre-wrap; }
#dbg h4 { margin: 4px 0 0; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }

/* about text for the site build (crawlable copy under the game, title screen only) */
.about { max-width: 1040px; margin: 28px auto 40px; padding: 0 16px; color: var(--mist); font-size: .95rem; line-height: 1.6; }
/* folded by default: one quiet line under the title screen, the text stays in the page for search */
.about > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.about > summary::-webkit-details-marker { display: none; }
.about > summary::before { content: '▸'; font-size: .8rem; transition: transform .15s; }
.about[open] > summary::before { transform: rotate(90deg); }
.about > summary:hover, .about[open] > summary { color: var(--paper); }
.about .abouttitle { display: inline; font-size: .9rem; font-weight: 500; color: inherit; margin: 0; }
.about[open] > summary { margin-bottom: 4px; }
.about h2 { font-size: 1.1rem; color: var(--paper); margin: 22px 0 6px; }
.about ul { padding-left: 1.2em; }
.about a { color: var(--sky); }
body:not([data-screen='title']) #about { display: none; }
.world .world-art.has-art { background-size: cover; background-position: center; background-repeat: no-repeat; }
.world .world-art.has-art::before { display: none; }
.about p, .about ul { max-width: 760px; }

/* notices: a short pill over the top of the scope view */
.toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(92%, 560px); padding: .55em 1.1em; border-radius: 999px; background: rgba(8, 28, 38, .92); border: 1px solid var(--tag); color: var(--paper); font: 500 .95rem/1.35 var(--display); text-align: center; pointer-events: none; z-index: 6; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.toast.show { animation: toastIn .22s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast.show { animation: none; } }
.ruler[hidden] { display: none; }
.ruler { width: min(100%, 90px); }
/* On-stage aiming HUD. It never takes pointer events and is always on. */
.aimHud { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.aimHud[hidden] { display: none; }
.hud-tl { pointer-events: none; position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hchip { display: flex; align-items: center; gap: 7px; padding: 4px 9px; border-radius: 10px; background: rgba(8, 24, 32, .74); border: 1px solid rgba(120, 200, 225, .3); color: var(--paper); font-size: .8rem; line-height: 1.2; white-space: nowrap; }
.hchip .lbl { font-size: .62rem; color: var(--mist); }
.hchip .pips { min-height: 0; gap: 3px; }
.hchip .pip { width: 15px; height: 6px; }
.hchip .mono { font-variant-numeric: tabular-nums; }
.scopeTag { position: absolute; display: flex; flex-direction: column; gap: 4px; min-width: 52px; padding: 4px 8px; border-radius: 10px; background: rgba(8, 24, 32, .74); border: 1px solid rgba(120, 200, 225, .3); font: 600 .8rem/1.2 var(--mono); color: var(--paper); transform: translate(0, -50%); }
.scopeTag.flip { transform: translate(-100%, -50%); }
.scopeTag .meter { height: 5px; }
.waterChip { position: absolute; display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 12px; background: rgba(8, 28, 38, .8); border: 1px solid rgba(120, 200, 225, .5); color: var(--paper); transform: translateY(-100%); max-width: 56%; transition: left .25s ease, top .25s ease; }
.waterChip[hidden], .wc-depth[hidden], .wc-skip[hidden], .wc-mini[hidden] { display: none; }
.waterChip .wc-ico { flex: none; color: var(--sky); }
.waterChip .wc-txt { display: flex; flex-direction: column; gap: 3px; font: 600 .78rem/1.2 var(--display); white-space: nowrap; }
.waterChip .wc-depth { display: flex; flex-direction: column; gap: 4px; font: 500 .68rem/1.2 var(--display); color: var(--paper); }
.waterChip .wc-skip { font: 500 .66rem/1.2 var(--mono); color: var(--mist); }
.waterChip .wc-mini { font-size: .72rem; }
.waterChip .ruler { height: 5px; }
.waterChip.mini { padding: 5px 8px; opacity: .85; }
.waterChip.mini .wc-txt { display: none; }
/* Wind card, top right of the scene on windy levels: which way it blows, how hard, and which way to correct.
   Blue chevrons flow down for a downdraft, orange ones flow up for an updraft. */
.windCard { --wc: #7fd0ff; position: absolute; right: 10px; top: 10px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; background: rgba(8, 24, 32, .8); border: 1px solid rgba(120, 200, 225, .35); color: var(--paper); }
.windCard[hidden], .windCard .wd-gust[hidden] { display: none; }
.windCard.up { --wc: #ffb347; }
.windCard.calm { --wc: var(--mist); }
.windCard .wd-ico { flex: none; width: 24px; height: 44px; overflow: hidden; color: var(--wc); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.windCard.up .wd-ico { transform: rotate(180deg); }
.windCard .wd-ico svg { display: block; animation: windFlow var(--spd, 1s) linear infinite; }
.windCard.calm .wd-ico svg { animation-play-state: paused; opacity: .35; }
@keyframes windFlow { from { transform: translateY(-25%); } to { transform: translateY(0); } }   /* one chevron is a quarter of the picture, so the loop is seamless at any size */
.windCard .wd-txt { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.windCard #wdHead { font: 600 .84rem/1.2 var(--display); }
.windCard .wd-row { display: flex; align-items: center; gap: 8px; font: 600 .78rem/1.2 var(--mono); color: var(--wc); }
.windCard .wd-gust { display: flex; align-items: center; gap: 5px; font: 500 .64rem/1 var(--mono); color: var(--mist); }
.windCard .wd-gust .meter { width: 38px; height: 5px; }
.windCard .wd-gust .meter i { background: var(--wc); transition: none; }
.windCard .wd-tip { font: 600 .78rem/1.2 var(--display); color: var(--wc); }
@media (prefers-reduced-motion: reduce) { .windCard .wd-ico svg { animation: none; } }
/* windy levels: the banner moves left so it never covers the wind card */
main#play[data-wind='on'] .toast { left: calc(50% - 90px); max-width: min(560px, calc(100% - 200px)); }
@media (max-width: 640px), (max-height: 480px) {
  .windCard { right: 6px; top: 6px; gap: 5px; padding: 4px 8px 4px 5px; }
  .windCard .wd-ico { width: 20px; height: 34px; }
  .windCard .wd-ico svg { width: 20px; height: 53.33px; }
  .windCard #wdHead { font-size: .7rem; }
  .windCard .wd-row { font-size: .66rem; gap: 6px; }
  .windCard .wd-gust { font-size: .56rem; }
  .windCard .wd-gust .meter { width: 30px; height: 4px; }
  .windCard .wd-tip { font-size: .68rem; }
}
@media (max-width: 640px), (max-height: 480px) {
  .hud-tl { left: 6px; top: 6px; gap: 3px; }
  .hchip { padding: 3px 7px; font-size: .72rem; gap: 5px; }
  .hchip .lbl { font-size: .56rem; }
  .hchip .pip { width: 12px; height: 5px; }
  .scopeTag { font-size: .72rem; padding: 3px 6px; min-width: 44px; }
  .waterChip { padding: 4px 8px 4px 6px; gap: 5px; }
  .waterChip .wc-txt { font-size: .68rem; }
  .waterChip .wc-depth { font-size: .62rem; }
  .waterChip .wc-skip { font-size: .58rem; }
}

/* Sound and Music switches under the menu screens (built by js/audio.js). The play bar has its own pair. */
.audiodock { display: flex; justify-content: flex-end; gap: 6px; margin-top: 22px; }
.audiodock .btn { min-height: 38px; padding: .35em .9em; font-size: .88rem; }
body[data-screen='play'] .audiodock { display: none; }

/* ---------- text spacing ----------
   Fredoka is round and heavy (only weights 500 to 700 ship), so at the old zero or negative tracking the letters ran into
   each other. One block sets the breathing room for every screen; tune the variables, not the rules. */
:root {
  --track-title: .015em;   /* big titles (h1) */
  --track-head: .012em;    /* h2, h3 */
  --track-text: .02em;     /* running text: lede, blurbs, the level tip */
  --track-ui: .03em;       /* buttons, chips, tabs, tile names */
  --word: .06em;           /* extra space between words */
  --lh-text: 1.6;          /* line height of running text */
}
body { letter-spacing: var(--track-text); word-spacing: var(--word); }
h1 { letter-spacing: var(--track-title); word-spacing: .04em; }
h2, h3 { letter-spacing: var(--track-head); }
.lede, .blurb, .tip, .lockmsg, .maxed { line-height: var(--lh-text); }
.btn, .sanct-tab, .tname, .sname { letter-spacing: var(--track-ui); }
.keys { line-height: 1.75; max-width: 86ch; }
.tip { max-width: 72ch; }                  /* wider tracking: keep the old line length */
.lede, .blurb, .tip { text-wrap: pretty; }   /* no lone last word */
.mono, .eyebrow, .lbl, .chip, .foot, .keys, .end-card .line { word-spacing: normal; }   /* the monospace text keeps its own grid */