/*
 * Run with me — game UI.
 * Chunky casual-game look: bamboo frames, parchment panels, glossy pill buttons and
 * white display type with dark outlines. No images: everything here is CSS + inline SVG.
 *
 * Fonts
 *   --font-display: Tangelo, from your Adobe Fonts kit (mmw0mcg, loaded in index.html).
 *                   "Lilita One" is the fallback wherever the kit can't load.
 *   --font-body:    Manrope, for readable text.
 */
:root {
  --font-display: "tangelo", "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ink: #3a2412;            /* outline brown used for display text */
  --parch: #f7ecd1;
  --parch-ink: #5a3b1c;
  --bamboo-hi: #f8e08a; --bamboo: #dcac40; --bamboo-lo: #a87920; --bamboo-line: #6b4712;
  --leaf: #67ad3a; --leaf-dark: #2f671c;
  --wood-hi: #8d5a2c; --wood: #5e3818; --wood-line: #2b170a; --wood-ring: #c48c3e;
  --earth: #22300f;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--earth); color: var(--parch-ink); font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none;
}
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--earth); }
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- shared: outlined display text + icons ---------- */
.outlined, .score, .gbtn, .panel-title, .final, .pad span, .pct, .logo span {
  --o: var(--ink);
  color: #fff; font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  text-shadow:
    0 2.5px 0 var(--o), 2.5px 0 0 var(--o), -2.5px 0 0 var(--o), 0 -2.5px 0 var(--o),
    1.8px 1.8px 0 var(--o), -1.8px 1.8px 0 var(--o), 1.8px -1.8px 0 var(--o), -1.8px -1.8px 0 var(--o),
    0 5px 0 var(--o);
}
.ico {
  --o: var(--ink);
  width: 28px; height: 28px; flex: none; fill: #fff; stroke: #fff;
  filter: drop-shadow(2px 0 0 var(--o)) drop-shadow(-2px 0 0 var(--o)) drop-shadow(0 2px 0 var(--o)) drop-shadow(0 -2px 0 var(--o)) drop-shadow(0 3px 0 var(--o));
}

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
  transition: opacity .3s;
}
#hud.dim { opacity: 0; }
.hud-left { display: grid; gap: 6px; justify-items: start; }
.score { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.hud-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: linear-gradient(var(--wood-hi), var(--wood)); border: 2px solid var(--wood-line);
  box-shadow: inset 0 1.5px 0 rgba(255, 220, 160, .35), 0 2px 0 var(--wood-line);
  color: #ffe9bd; font: 800 12px/1 var(--font-body); white-space: nowrap;
}
.chip:empty { display: none; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 7px; height: 10px; background: rgba(255, 233, 189, .25); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); }
.dots i.on { background: #c9f24e; }

.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.energy { display: flex; align-items: center; }
.energy-badge {
  position: relative; z-index: 2; width: 42px; height: 42px; margin-right: -14px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, var(--wood-hi), var(--wood));
  border: 3px solid var(--wood-line); box-shadow: inset 0 0 0 3px var(--wood-ring), 0 3px 0 var(--wood-line);
}
.energy-badge .ico { width: 22px; height: 22px; fill: #ffd34d; stroke: #ffd34d; }
.tube {
  position: relative; width: 156px; height: 26px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(#3d2b10, #5b4219);
  border: 3px solid var(--bamboo-line);
  box-shadow: 0 0 0 4px var(--bamboo), 0 0 0 6px var(--bamboo-line), 0 6px 0 2px var(--bamboo-line);
}
.tube .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 10px;
  background: linear-gradient(#d8f86a, #8fd024 55%, #5fa214);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45);
  transition: width .25s ease-out;
}
.tube .nodes { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33% - 2px), var(--bamboo-line) calc(33% - 2px) 33%, var(--bamboo-hi) 33% calc(33% + 2px), transparent calc(33% + 2px)),
  linear-gradient(90deg, transparent calc(66% - 2px), var(--bamboo-line) calc(66% - 2px) 66%, var(--bamboo-hi) 66% calc(66% + 2px), transparent calc(66% + 2px)); }
.tube .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-variant-numeric: tabular-nums; --o: #2f4a0a;
  text-shadow: 0 1.5px 0 var(--o), 1.5px 0 0 var(--o), -1.5px 0 0 var(--o), 0 -1.5px 0 var(--o), 1px 1px 0 var(--o), -1px 1px 0 var(--o), 1px -1px 0 var(--o), -1px -1px 0 var(--o); }
.energy.low .fill { background: linear-gradient(#ffd27a, #ff9a3c 55%, #e0532a); }
.energy.low .pct { --o: #7a2a0c; }
.low-tag {
  font: 800 12px/1 var(--font-body); color: #fff; padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(#ff7c6a, #d8432f); border: 2px solid #7a1f12; box-shadow: 0 2px 0 #7a1f12;
}
.low-tag[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .low-tag:not([hidden]) { animation: throb 1.6s ease-in-out infinite; } }
@keyframes throb { 50% { transform: scale(1.06); } }

.hud-buttons { display: flex; gap: 8px; pointer-events: auto; }
.round-btn, .square-btn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; cursor: pointer; transition: transform .08s; }
.round-btn {
  border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--wood-hi), var(--wood));
  border: 3px solid var(--wood-line); box-shadow: inset 0 0 0 3px var(--wood-ring), 0 4px 0 var(--wood-line);
}
.square-btn {
  border-radius: 14px; background: linear-gradient(#7fae32, #4e7518);
  border: 3px solid #26380b; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 4px 0 #26380b;
}
.round-btn .ico, .square-btn .ico { width: 24px; height: 24px; }
.round-btn .i-on { display: none; } .round-btn.on .i-on { display: block; } .round-btn.on .i-off { display: none; }
.round-btn:active, .square-btn:active { transform: translateY(3px); }

/* ---------- overlay screens ---------- */
.screen {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(var(--safe-t) + 56px) max(16px, var(--safe-r)) calc(var(--safe-b) + 24px) max(16px, var(--safe-l));
  background: radial-gradient(ellipse at 50% 45%, rgba(30, 40, 10, .18), rgba(25, 30, 8, .55));
}
.screen[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .screen:not([hidden]) .panel, .screen:not([hidden]) .logo { animation: pop .38s cubic-bezier(.2, 1.4, .4, 1) both; } }
@keyframes pop { from { opacity: 0; transform: scale(.86); } }

.logo { display: grid; justify-items: center; line-height: .9; transform: rotate(-3deg); }
.logo span { font-size: clamp(28px, 7vw, 40px); --o: var(--ink); }
.logo .big { font-size: clamp(50px, 14vw, 92px); white-space: nowrap; letter-spacing: .02em;
  text-shadow: 0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 9px 0 var(--ink); }

/* Panel = bamboo frame around parchment */
.panel { position: relative; width: min(400px, 100%); padding: 17px; }
.panel.small { width: min(300px, 100%); }
.bamboo { position: absolute; border: 2.5px solid var(--bamboo-line); border-radius: 12px; pointer-events: none; }
.bamboo.top, .bamboo.bottom {
  left: -6px; right: -6px; height: 22px;
  background:
    repeating-linear-gradient(90deg, transparent 0 74px, var(--bamboo-line) 74px 77px, var(--bamboo-hi) 77px 79px, transparent 79px 126px),
    linear-gradient(var(--bamboo-hi), var(--bamboo) 50%, var(--bamboo-lo));
  box-shadow: 0 4px 0 rgba(70, 40, 5, .35);
}
.bamboo.top { top: 0; } .bamboo.bottom { bottom: 0; }
.bamboo.left, .bamboo.right {
  top: -4px; bottom: -4px; width: 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 82px, var(--bamboo-line) 82px 85px, var(--bamboo-hi) 85px 87px, transparent 87px 140px),
    linear-gradient(90deg, var(--bamboo-hi), var(--bamboo) 50%, var(--bamboo-lo));
}
.bamboo.left { left: 0; } .bamboo.right { right: 0; }
.parchment {
  position: relative; z-index: 1; display: grid; gap: 14px; justify-items: center;
  padding: 26px 22px 24px; border-radius: 6px; text-align: center;
  background-color: var(--parch);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .7), transparent 38%),
    radial-gradient(circle at 85% 88%, rgba(196, 150, 80, .22), transparent 48%),
    repeating-linear-gradient(115deg, rgba(160, 120, 60, .05) 0 2px, transparent 2px 7px);
  box-shadow: inset 0 0 0 2px rgba(150, 105, 40, .25), inset 0 0 26px rgba(180, 130, 60, .3);
}
.parchment.stack, .stack { display: grid; gap: 18px; width: 100%; justify-items: stretch; }
.panel-title { position: absolute; z-index: 3; top: -48px; left: 0; right: 0; margin: 0; text-align: center; font-size: 58px; line-height: 1;
  text-shadow: 0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 8px 0 var(--ink); }
.screen .panel:has(.panel-title) { margin-top: 30px; }
.panel:has(.panel-title) .parchment { padding-top: 40px; }
.panel-text { margin: 0; max-width: 32ch; font: 600 15px/1.5 var(--font-body); color: var(--parch-ink); text-wrap: balance; }
.reason { font-weight: 700; font-size: 16px; }

.leaf { position: absolute; z-index: 4; width: 62px; height: 46px; pointer-events: none; }
.leaf svg { position: absolute; width: 50px; height: 34px; }
.leaf svg:last-child { transform: rotate(-58deg) translate(-8px, 6px) scale(.8); }
.leaf.tl { left: -26px; top: -18px; } .leaf.tl svg:first-child { transform: rotate(-150deg); }
.leaf.br { right: -26px; bottom: -16px; transform: rotate(180deg); }
.leaf-shape { fill: var(--leaf); stroke: var(--leaf-dark); stroke-width: 2.6; }
.leaf-vein { fill: none; stroke: var(--leaf-dark); stroke-width: 2; stroke-linecap: round; opacity: .7; }

.close-btn {
  position: absolute; z-index: 5; right: -16px; top: -14px; width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #ff9aa6, #f0465d 55%, #c4243b);
  border: 3px solid #f6f0e6; box-shadow: 0 0 0 3px #8a1427, 0 5px 0 3px #8a1427;
}
.close-btn .ico { --o: #8a1427; width: 26px; height: 26px; }
.close-btn:active { transform: translateY(3px); }

/* Glossy pill buttons */
.gbtn {
  --top: #c8f150; --bot: #7dc31b; --edge: #4a860f; --line: #2f5a0a;
  --o: var(--line);
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 66px; padding: 0 22px 0 70px; cursor: pointer; overflow: hidden;
  font-size: 28px; line-height: 1;
  background: linear-gradient(var(--top), var(--bot));
  border: 3px solid var(--line); border-radius: 22px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .5), 0 6px 0 var(--edge), 0 10px 14px rgba(50, 30, 5, .28);
  transition: transform .08s, box-shadow .08s;
}
.gbtn::before { content: ""; position: absolute; left: 12px; top: 6px; width: 46%; height: 34%; border-radius: 999px; background: rgba(255, 255, 255, .32); pointer-events: none; }
.gbtn .ico { position: absolute; left: 22px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; --o: var(--line); }
.gbtn span { position: relative; }
.gbtn:active { transform: translateY(4px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--edge), 0 4px 8px rgba(50, 30, 5, .25); }
.gbtn:hover { filter: brightness(1.05); }
.gbtn.aqua { --top: #7cf3f7; --bot: #1bbacc; --edge: #0b7f8e; --line: #075560; }
.gbtn.primary { min-height: 72px; font-size: 31px; }
#btnPlay { width: min(260px, 100%); }
.gbtn:focus-visible, .round-btn:focus-visible, .square-btn:focus-visible, .close-btn:focus-visible, .pad:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font: 700 13px/1.4 var(--font-body); color: var(--parch-ink); }
.legend.touch { display: none; }
.legend li { display: inline-flex; align-items: center; gap: 4px; }
kbd {
  font: 800 12px/1 var(--font-body); padding: 5px 7px; border-radius: 7px; color: #ffe9bd;
  background: linear-gradient(var(--wood-hi), var(--wood)); border: 2px solid var(--wood-line); box-shadow: 0 2px 0 var(--wood-line);
}
.final { font-size: clamp(54px, 15vw, 70px); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 -4px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 7px 0 var(--ink); }
.best-line { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 800 15px/1 var(--font-body); color: var(--parch-ink); }
.best-line .star { width: 24px; height: 24px; fill: #ffcf3a; stroke: #ffcf3a; }
.new { padding: 5px 10px; border-radius: 999px; color: #fff; font: 800 12px/1 var(--font-body);
  background: linear-gradient(#ff8a5a, #e2502a); border: 2px solid #7a2a0c; box-shadow: 0 2px 0 #7a2a0c; }
.new[hidden] { display: none; }
.load { width: 200px; height: 18px; border-radius: 10px; overflow: hidden; background: #3d2b10; border: 3px solid var(--bamboo-line); }
#loadBar { height: 100%; background: linear-gradient(#d8f86a, #7dc31b); transform: scaleX(0); transform-origin: left; transition: transform .3s; }

/* ---------- touch controls ---------- */
#controls {
  position: relative; z-index: 3; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);
  background: linear-gradient(#3f6a1e, #24400f 60%, #1b300b);
}
#controls::before {
  content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 26px; pointer-events: none;
  background:
    radial-gradient(circle at 22px 26px, #4b7f24 20px, transparent 21px) 0 0 / 44px 26px repeat-x,
    radial-gradient(circle at 12px 30px, #3f6a1e 18px, transparent 19px) 0 0 / 36px 26px repeat-x;
}
.cluster { display: flex; gap: 12px; align-items: center; }
.pad {
  --top: #c8f150; --bot: #7dc31b; --edge: #4a860f; --line: #2f5a0a;
  width: 76px; height: 76px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 30%, var(--top), var(--bot) 70%);
  border: 3px solid var(--line);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), inset 0 3px 0 rgba(255, 255, 255, .45), 0 6px 0 var(--edge);
  touch-action: none; transition: transform .07s, box-shadow .07s;
}
.pad .ico { width: 30px; height: 30px; --o: var(--line); }
.pad span { font-size: 13px; --o: var(--line); text-shadow: 0 1.5px 0 var(--o), 1.5px 0 0 var(--o), -1.5px 0 0 var(--o), 0 -1.5px 0 var(--o), 1px 1px 0 var(--o), -1px 1px 0 var(--o), 1px -1px 0 var(--o), -1px -1px 0 var(--o), 0 3px 0 var(--o); }
.pad.big { width: 92px; height: 92px; }
.pad.big .ico { width: 38px; height: 38px; }
.pad.aqua { --top: #7cf3f7; --bot: #1bbacc; --edge: #0b7f8e; --line: #075560; }
.pad.wood { --top: #a87443; --bot: #6a4220; --edge: #3a210d; --line: #2b170a; box-shadow: inset 0 0 0 3px #c48c3e, inset 0 -5px 0 rgba(0, 0, 0, .2), 0 6px 0 var(--edge); }
.pad.pressed { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), inset 0 3px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--edge); }

@media (max-width: 370px) {
  .pad { width: 64px; height: 64px; } .pad.big { width: 78px; height: 78px; } .cluster { gap: 8px; }
  .tube { width: 112px; } .score { font-size: 28px; }
}
@media (max-width: 480px) { .tube { width: 124px; } .panel-title { font-size: 50px; } }

/* Landscape phones: float the pad over the scene */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  #controls { position: absolute; left: 0; right: 0; bottom: 0; background: none; pointer-events: none; }
  #controls::before { display: none; }
  #controls .cluster { pointer-events: auto; }
  .screen { padding-top: calc(var(--safe-t) + 40px); }
  .logo { display: none; }
  .gbtn, .gbtn.primary { min-height: 54px; font-size: 24px; }
  .parchment { padding: 18px 18px 18px; gap: 10px; }
  .panel:has(.panel-title) .parchment { padding-top: 32px; }
  .parchment.stack, .stack { gap: 12px; }
  .panel-title { font-size: 44px; top: -38px; }
}

/* Desktop with a mouse: keyboard play, no on-screen pad */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) { #controls { display: none; } }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .legend.kbd { display: none; } .legend.touch { display: flex; }
}

/* ---------- v3 additions: time of day, sprint stamina, key guide ---------- */
.ico.sm { width: 16px; height: 16px; filter: drop-shadow(1px 0 0 var(--wood-line)) drop-shadow(-1px 0 0 var(--wood-line)) drop-shadow(0 1px 0 var(--wood-line)) drop-shadow(0 -1px 0 var(--wood-line)); }
.chip.time .clock { font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.chip.time[data-phase="morning"] .ico { fill: #ffd38a; stroke: #ffd38a; }
.chip.time[data-phase="noon"] .ico { fill: #ffe14d; stroke: #ffe14d; }
.chip.time[data-phase="evening"] .ico { fill: #ff9f5a; stroke: #ff9f5a; }
.chip.time[data-phase="night"] { background: linear-gradient(#3b4a7a, #233058); border-color: #121a36; box-shadow: inset 0 1.5px 0 rgba(200, 215, 255, .3), 0 2px 0 #121a36; color: #e6ecff; }
.chip.time[data-phase="night"] .ico { fill: #eef2ff; stroke: #eef2ff; }

.stamina { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.stamina-label { font: 800 11px/1 var(--font-body); color: #fff; text-transform: uppercase; letter-spacing: .06em;
  text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink), 0 2px 0 var(--ink); }
.sbar { width: 112px; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(40, 25, 10, .65); border: 2px solid var(--wood-line); box-shadow: 0 2px 0 var(--wood-line); }
.sfill { height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(#ffe07a, #f2a12a); transition: width .12s linear; }
.stamina.active .sfill { background: linear-gradient(#fff2a8, #ffb53a); }
.stamina.winded .sfill { background: linear-gradient(#ff9b8a, #d8432f); }
.stamina.winded .stamina-label { color: #ffd2c8; }

.key-guide {
  position: absolute; z-index: 2; left: calc(var(--safe-l) + 14px); bottom: calc(var(--safe-b) + 14px);
  display: grid; gap: 5px; padding: 9px 11px; border-radius: 12px; pointer-events: none;
  background: rgba(43, 23, 10, .55); border: 2px solid rgba(43, 23, 10, .7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 700 11px/1 var(--font-body); color: #ffe9bd; transition: opacity .3s;
}
.key-guide div { display: flex; align-items: center; gap: 4px; }
.key-guide kbd { font-size: 10px; padding: 3px 5px; min-width: 18px; text-align: center; }
.key-guide span { margin-left: 3px; }
.key-guide em { font-style: normal; opacity: .65; font-weight: 600; }
.key-guide.dim { opacity: 0; }
@media not all and (hover: hover) and (pointer: fine) and (min-width: 701px) { .key-guide { display: none; } }

.panel-hint { margin: 0; font: 700 12px/1.45 var(--font-body); color: #8a6436; max-width: 36ch; text-wrap: balance; }

.pad { position: relative; }
.pad.sprint { --top: #ffd66a; --bot: #f08a1c; --edge: #a4520a; --line: #6b3204; }
.pad.sprint::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#c9f24e var(--stamina, 100%), rgba(0, 0, 0, .35) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
}
.pad.sprint.winded { filter: saturate(.35) brightness(.85); }
.pad.sprint.winded::after { background: conic-gradient(#ff8a6a var(--stamina, 0%), rgba(0, 0, 0, .35) 0); }
@media (max-width: 480px) { .sbar { width: 96px; } .chip.time .clock { display: none; } }

/* ---------- splash: "Halfas presents" ---------- */
.splash {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  padding: calc(var(--safe-t) + 16px) max(16px, var(--safe-r)) calc(var(--safe-b) + 16px) max(16px, var(--safe-l));
  background: linear-gradient(#5b5d98 0%, #a58ab8 34%, #e6a8a4 58%, #f6c28c 74%, #f8cf8f 100%);
  transition: opacity .6s ease, transform .6s ease;
}
.splash[hidden] { display: none; }
.splash.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
.splash-sun {
  position: absolute; left: 50%; top: 70%; width: min(46vmin, 300px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0 38%, rgba(255, 228, 180, .55) 39%, rgba(255, 214, 160, 0) 70%);
}
.splash-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; }
.splash-hills .h1 { fill: #7c79ad; } .splash-hills .h2 { fill: #5f6f62; } .splash-hills .h3 { fill: #6f7a37; } .splash-hills .h4 { fill: #3e4a24; }
.splash-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; translate: 0 -6vh; }
.splash-logo {
  display: flex; font-family: var(--font-display); font-weight: 700; line-height: 1; color: #fff;
  font-size: clamp(76px, 22vw, 168px); letter-spacing: .01em;
}
.splash-logo span {
  display: inline-block;
  text-shadow: 0 5px 0 var(--ink), 5px 0 0 var(--ink), -5px 0 0 var(--ink), 0 -5px 0 var(--ink),
    3.5px 3.5px 0 var(--ink), -3.5px 3.5px 0 var(--ink), 3.5px -3.5px 0 var(--ink), -3.5px -3.5px 0 var(--ink), 0 11px 0 var(--ink), 0 18px 24px rgba(50, 25, 40, .35);
}
.splash-rule { width: min(260px, 60vw); height: 6px; border-radius: 6px; margin-top: 14px; background: linear-gradient(90deg, transparent, #fff6dc 20%, #fff6dc 80%, transparent); opacity: .9; }
.splash-presents { margin: 6px 0 0; font: 800 13px/1 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: #fff8ec; text-shadow: 0 2px 0 rgba(58, 36, 18, .55); }
.splash-title { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 7vw, 40px); color: #fff;
  text-shadow: 0 2.5px 0 var(--ink), 2.5px 0 0 var(--ink), -2.5px 0 0 var(--ink), 0 -2.5px 0 var(--ink), 1.8px 1.8px 0 var(--ink), -1.8px 1.8px 0 var(--ink), 1.8px -1.8px 0 var(--ink), -1.8px -1.8px 0 var(--ink), 0 5px 0 var(--ink); }
.splash-skip { position: absolute; z-index: 1; bottom: calc(var(--safe-b) + 18px); left: 0; right: 0; margin: 0; text-align: center; font: 700 12px/1 var(--font-body); color: rgba(255, 248, 236, .8); }

@media (prefers-reduced-motion: no-preference) {
  .splash:not([hidden]) .splash-sun { animation: sunrise 1.6s cubic-bezier(.2, .8, .2, 1) both; }
  .splash:not([hidden]) .splash-hills { animation: hills 1.2s cubic-bezier(.2, .8, .2, 1) both; }
  .splash:not([hidden]) .splash-logo span { animation: letter .7s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.35s + var(--i) * .09s); }
  .splash:not([hidden]) .splash-rule { animation: grow .6s ease-out 1.05s both; }
  .splash:not([hidden]) .splash-presents, .splash:not([hidden]) .splash-title { animation: fadeUp .6s ease-out both; }
  .splash:not([hidden]) .splash-presents { animation-delay: 1.2s; }
  .splash:not([hidden]) .splash-title { animation-delay: 1.45s; }
  .splash:not([hidden]) .splash-skip { animation: fadeUp .6s ease-out 1.8s both; }
}
@keyframes sunrise { from { translate: -50% 10%; opacity: 0; } }
@keyframes hills { from { transform: translateY(40%); } }
@keyframes letter { from { opacity: 0; transform: translateY(60px) scale(.5) rotate(-8deg); } }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }