/* RELEASE FABLE 5.5 — UI styles. Chunky cartoon UI, no web fonts needed. */
:root {
  --ink: #1d1430;
  --accent: #ff8a3d;
  --accent-2: #ffb35c;
  --cream: #fff4e3;
  --panel-a: #3d2c6b;
  --panel-b: #251a44;
  --good: #5ddc7c;
  --danger: #ff5468;
  --x: #0f0f12;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --px: 0px; --py: 0px; --pw: 480px; --ph: 720px; --ps: 1;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0c0818; color: var(--cream);
  font-family: var(--font); font-weight: 700;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
/* the page behind the canvas follows the section (only seen in overscroll / while a resize repaints) */
body[data-section="0"] { background: #070c1c; } body[data-section="1"] { background: #1b0d06; } body[data-section="2"] { background: #06120c; }
body[data-section="3"] { background: #12172e; } body[data-section="4"] { background: #22180f; } body[data-section="5"] { background: #0d2846; }
body[data-section="6"] { background: #06040e; }
#game { position: fixed; left: 0; top: 0; display: block; width: 100vw; height: 100vh; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; }

/* ---------------- buttons ---------------- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border: 3px solid var(--ink); border-radius: 16px;
  background: var(--cream); color: var(--ink); font-size: 18px; font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(29,20,48,.12); cursor: pointer; text-decoration: none;
  transition: transform .06s ease, box-shadow .06s ease, filter .15s ease; position: relative; outline: none;
  touch-action: manipulation; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--ink), inset 0 -4px 0 rgba(29,20,48,.12); }
  .btn.xshare:hover { box-shadow: 0 6px 0 #000; }
  .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(29,20,48,.12); }
  .btn.xshare:active { box-shadow: 0 1px 0 #000; }
  .hud-btn:hover { background: rgba(48,32,86,.95); }
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(29,20,48,.12); }
.btn:focus-visible { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px rgba(255,210,120,.75); }
body.no-ring .btn:focus-visible { box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(29,20,48,.12); }
body.no-ring .btn.xshare:focus-visible { box-shadow: 0 5px 0 #000; }
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--ink); }
.btn.big { min-height: 62px; font-size: 26px; padding: 10px 26px; border-radius: 20px; letter-spacing: .05em; }
.btn.small { min-height: 42px; font-size: 15px; padding: 8px 12px; border-radius: 13px; }
.btn.danger { background: linear-gradient(180deg, #ff8a95, var(--danger)); }
.btn.xshare { background: var(--x); color: #fff; border-color: var(--ink); box-shadow: 0 5px 0 #000; }
.btn.xshare svg { width: 20px; height: 20px; fill: #fff; }
.btn.xshare:active { box-shadow: 0 1px 0 #000; }

/* ---------------- screens & cards ---------------- */
#screens { position: fixed; left: 0; top: 0; width: 100%; height: var(--app-h, 100%); pointer-events: none; z-index: 20; }
/* screens scroll when they don't fit (phones in landscape); the child's auto margin centres it safely */
.screen { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; pointer-events: auto;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.screen.show { display: flex; animation: fadeIn .18s ease-out; }
.screen > * { margin-top: auto; margin-bottom: auto; }
.screen.modal { background: rgba(10, 6, 22, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: calc(12px + var(--sat)) calc(14px + var(--sar)) calc(12px + var(--sab)) calc(14px + var(--sal)); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.card {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; flex: none;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 3px solid var(--ink); border-radius: 26px; padding: 20px 20px 22px;
  box-shadow: 0 8px 0 var(--ink), 0 24px 60px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.12);
  text-align: center; animation: pop .28s cubic-bezier(.2,1.4,.4,1);
}
.card.wide { max-width: 540px; }
@keyframes pop { from { transform: scale(.85) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.card h2 { margin: 2px 0 6px; font-size: 32px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
.card h3 { margin: 14px 0 8px; font-size: 18px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); }
.card .sub { margin: 0 0 14px; font-size: 15px; color: #d9cdf3; line-height: 1.4; }
.card .sub b { color: #fff; }
.menu { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.menu .row, .row, .menu.row { display: flex; flex-direction: row; gap: 10px; }
.nw { white-space: nowrap; }
.row > .btn { flex: 1 1 0; min-width: 0; }

/* ---------------- title (the game's "cover") ---------------- */
/* The renderer draws the tower behind it blurred and drifting slowly up; this layer darkens it, with a
   soft vignette around the menu and a darker foot for the credit line. The footer is part of the column
   (never scrolled away) and the logo is the part that gives way on short screens. */
#scr-title {
  background:
    radial-gradient(ellipse 80% 62% at 50% 44%, rgba(10,6,22,.2) 0%, rgba(10,6,22,.44) 58%, rgba(6,4,14,.8) 100%),
    linear-gradient(180deg, rgba(10,6,22,.30) 0%, rgba(10,6,22,.12) 34%, rgba(10,6,22,.34) 72%, rgba(6,4,14,.82) 100%);
  padding: max(14px, calc(8px + var(--sat))) calc(16px + var(--sar)) max(14px, calc(8px + var(--sab))) calc(16px + var(--sal)); }
#scr-title .title-col { width: 100%; max-width: 430px; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; flex: none; }
#scr-title .title-main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 2vh; padding-bottom: 2dvh; }
#scr-title .title-hero, #scr-title .title-actions { display: contents; }
#logo { flex: 0 1 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 96px; max-height: 34vh; max-height: 34dvh; display: block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
#scr-title .tagline { flex: none; margin: 6px 0 0; padding: 0 6px; font-size: 16px; line-height: 1.3; color: #f3e6ff; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(0,0,0,.7); }
#scr-title .menu { flex: none; width: 100%; max-width: 330px; margin-top: 22px; margin-top: clamp(16px, 3.2dvh, 32px); gap: 12px; }
.bests { margin: 16px 0 0; font-size: 14px; color: #e3d7fb; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 0 var(--ink); }
.bests b { color: var(--accent-2); }
.bests .nosave { color: #ffc2c8; font-size: 12.5px; }
#scr-title .bests { flex: none; margin: 18px 0 0; margin-top: clamp(14px, 2.6dvh, 24px); font-size: 14px; text-shadow: 0 2px 0 var(--ink), 0 0 10px rgba(0,0,0,.7); }
#scr-title .bests:empty { display: none; }
.legal { flex: none; margin-top: 12px; font-size: 12.5px; color: rgba(255,244,227,.8); line-height: 1.45; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(0,0,0,.8); }
.legal p { margin: 0; }
.legal b { color: var(--accent-2); }
@media (max-height: 640px) {
  #scr-title .menu { gap: 10px; }
}
@media (min-width: 900px) and (min-height: 820px) {
  #scr-title .title-col { max-width: 540px; }
  #scr-title .menu { max-width: 400px; }
  #logo { max-height: 38vh; max-height: 38dvh; }
  #scr-title .tagline { font-size: 21px; }
  #scr-title .bests { font-size: 16px; }
  .legal { font-size: 14.5px; }
}
/* short landscape phones: logo + tagline on the left, the menu on the right, the credit line under both */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-title { padding-top: max(10px, calc(6px + var(--sat))); padding-bottom: max(10px, calc(6px + var(--sab))); }
  #scr-title .title-col { max-width: 820px; }
  #scr-title .title-main { flex-direction: row; gap: 28px; padding-bottom: 0; }
  #scr-title .title-hero, #scr-title .title-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; }
  #scr-title .title-actions { max-width: 340px; }
  #logo { aspect-ratio: 2 / 1.1; max-height: 56vh; max-height: 56dvh; min-height: 80px; }
  #scr-title .tagline { margin-top: 6px; font-size: 15px; }
  #scr-title .menu { margin-top: 0; gap: 9px; }
  #scr-title .bests { margin-top: 10px; font-size: 13px; }
  .legal { margin-top: 6px; font-size: 11.5px; }
}

/* ---------------- HUD ---------------- */
#hud {
  position: fixed; left: var(--hud-x); top: var(--hud-y); width: var(--hud-w); height: var(--hud-h);
  display: flex; align-items: center; gap: 6px; z-index: 10; pointer-events: none;
  transition: opacity .2s ease;
}
body:not([data-state="playing"]) #hud { opacity: .0; }
#hud > * { pointer-events: auto; }
/* --hud-k: 1, or up to 1.3 on big desktop monitors (render.js layout) */
.pill {
  height: 100%; max-height: calc(44px * var(--hud-k, 1)); display: flex; align-items: center; gap: 5px; padding: 0 10px;
  background: rgba(20, 12, 38, .92); border: 2.5px solid var(--ink); border-radius: 13px;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
  color: #fff; font-size: calc(16px * var(--hud-k, 1)); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill svg { width: calc(18px * var(--hud-k, 1)); height: calc(18px * var(--hud-k, 1)); flex: none; fill: var(--accent); stroke: var(--accent); }
.pill svg .cut { fill: rgba(20,12,38,1); }
#hudFalls svg { fill: #ffd3d8; stroke: none; }
.pill.bump { animation: bump .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-4deg); background: #c3293c; } 100% { transform: scale(1); } }
.pill.grow { flex: 1 1 auto; min-width: 0; gap: 7px; }
.where-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; font-size: calc(14px * var(--hud-k, 1)); color: #f4ebff; }
.where-bar { flex: 1 1 30px; min-width: 22px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; border: 1.5px solid rgba(0,0,0,.5); }
.where-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 6px; transition: width .3s ease; }
.where-pct { font-size: calc(14px * var(--hud-k, 1)); color: var(--accent-2); margin-left: auto; }
.hud-btn {
  height: 100%; max-height: calc(44px * var(--hud-k, 1)); aspect-ratio: 1; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(20, 12, 38, .92); border: 2.5px solid var(--ink); border-radius: 13px; cursor: pointer; outline: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); touch-action: manipulation;
}
.hud-btn:focus-visible { box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 0 3px rgba(255,210,120,.9); }
body.no-ring .hud-btn:focus-visible { box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.hud-btn:active { transform: translateY(2px); }
.hud-btn svg { width: calc(22px * var(--hud-k, 1)); height: calc(22px * var(--hud-k, 1)); fill: #fff; stroke: #fff; }
.snd-off { display: none; }
body.muted .snd-on { display: none; }
body.muted .snd-off { display: block; }
body.muted #hudMute svg { fill: #ff9aa6; stroke: #ff9aa6; }

/* phones on their side: a stacked HUD card in the left side bar (never over the playfield) */
body[data-hud="stack"] #hud {
  height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  grid-template-areas: "p m" "t t" "f f" "w w";
}
body[data-hud="stack"] #hudPause { grid-area: p; }
body[data-hud="stack"] #hudMute { grid-area: m; }
body[data-hud="stack"] #hudTime { grid-area: t; }
body[data-hud="stack"] #hudFalls { grid-area: f; }
body[data-hud="stack"] #hudWhere { grid-area: w; }
body[data-hud="stack"] .pill, body[data-hud="stack"] .hud-btn { height: 38px; width: 100%; aspect-ratio: auto; }
body[data-hud="stack"] .hud-btn { height: 44px; }
body[data-hud="stack"] .pill { justify-content: flex-start; }
body[data-hud="stack"] .where-bar { display: block; }

/* ---------------- section banner ---------------- */
#banner {
  position: fixed; left: var(--px); width: var(--pw); top: calc(var(--py) + var(--ph) * .05); z-index: 9;
  display: flex; justify-content: center; pointer-events: none; opacity: 0;
}
/* HUD drawn inside the playfield (landscape / desktop): the banner starts under it */
body[data-layout="desktop"] #banner, body[data-layout="landscape"][data-hud="row"] #banner { top: calc(var(--hud-y) + var(--hud-h) + 10px); }
/* the final section announces itself at the bottom of the view (above any controls that overlap it) */
#banner.low, body[data-layout] #banner.low { top: auto !important; bottom: calc(100% - var(--py) - var(--ph) + var(--hidb, 0px) + var(--ph) * .04); bottom: calc(var(--app-h, 100vh) - var(--py) - var(--ph) + var(--hidb, 0px) + var(--ph) * .04); }
#banner .b-inner {
  padding: 10px 26px 12px; text-align: center; border-radius: 18px;
  background: linear-gradient(180deg, rgba(29,20,48,.92), rgba(29,20,48,.78)); border: 3px solid var(--ink);
  box-shadow: 0 6px 0 rgba(0,0,0,.45); max-width: 92%;
}
#banner.show { animation: bannerIn 2.1s cubic-bezier(.2,1.2,.3,1) forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateY(-26px) scale(.9); }
  10% { opacity: 1; transform: translateY(0) scale(1.03); }
  16% { transform: scale(1); }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.b-sec { font-size: calc(13px * max(var(--ps), .72)); letter-spacing: .3em; color: var(--accent-2); font-weight: 900; }
.b-name { font-size: calc(34px * max(var(--ps), .62)); font-weight: 900; letter-spacing: .05em; color: #fff; line-height: 1.05; margin-top: 2px;
  text-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(255,140,60,.35); }
.b-sub { font-size: calc(13.5px * max(var(--ps), .8)); color: #d9cdf3; margin-top: 4px; }
.b-sub:empty { display: none; }

/* ---------------- touch controls ---------------- */
#controls { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; }
body.touch[data-state="playing"] #controls { display: block; }
#dpad, #jumpBtn { position: absolute; pointer-events: auto; touch-action: none; }
#dpad { display: flex; gap: 12px; }
.pad {
  width: var(--pad, 80px); height: var(--pad, 80px); border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.13); border: 3px solid rgba(255,255,255,.5); box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.18);
  transition: transform .05s, background .05s;
}
.pad svg { width: 46%; height: 46%; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
#dpad.on-left .l, #dpad.on-right .r { background: rgba(255,180,100,.75); border-color: #fff; transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 0 3px #fff8; }
#jumpBtn { width: var(--jump, 118px); height: var(--jump, 118px); border-radius: 50%; }
#jumpBtn .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--charge, 0) * 360deg), rgba(255,255,255,.14) 0);
  border: 3px solid rgba(255,255,255,.55); box-shadow: 0 6px 0 rgba(0,0,0,.35);
}
#jumpBtn .face {
  position: absolute; inset: 11px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 30%, rgba(255,190,120,.95), rgba(255,122,47,.92)); border: 3px solid var(--ink);
  color: var(--ink); font-weight: 900; font-size: calc(var(--jump, 118px) * .185); letter-spacing: .06em; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
}
#jumpBtn .face small { font-size: calc(var(--jump, 118px) * .09); letter-spacing: .2em; opacity: .7; margin-top: -2px; }
#jumpBtn.on .face { transform: scale(.94); filter: brightness(1.12); }
#jumpBtn.charging .face { background: radial-gradient(circle at 40% 30%, #ffd9a8, #ff6a2b); }
/* red tape caps the charge: the part of the ring it can't reach shows red (its edge is the cap tick) */
#jumpBtn.capped .ring { background: conic-gradient(var(--accent) calc(var(--charge, 0) * 360deg), rgba(255,255,255,.14) 0 calc(var(--cap, 1) * 360deg - 3deg), #ff3b3b 0 calc(var(--cap, 1) * 360deg + 3deg), rgba(255,59,59,.38) 0); }
/* a frozen charge (pause, cancelled touch): the ring pulses and the label says "tap" to finish it */
#jumpBtn.held .ring { animation: heldPulse 1s ease-in-out infinite; border-color: #fff; }
#jumpBtn.held .face small { opacity: 1; }
@keyframes heldPulse { 0%, 100% { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 0 rgba(255,210,120,.0); } 50% { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 7px rgba(255,210,120,.65); } }
/* short in-app browsers: the controls overlap the bottom of the world, so they are see-through until used */
body.ctrl-overlap .pad { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.38); }
body.ctrl-overlap #jumpBtn .face { opacity: .6; }
body.ctrl-overlap #jumpBtn .ring { background: conic-gradient(var(--accent) calc(var(--charge, 0) * 360deg), rgba(255,255,255,.07) 0); border-color: rgba(255,255,255,.38); }
body.ctrl-overlap #jumpBtn.capped .ring { background: conic-gradient(var(--accent) calc(var(--charge, 0) * 360deg), rgba(255,255,255,.07) 0 calc(var(--cap, 1) * 360deg - 3deg), #ff3b3b 0 calc(var(--cap, 1) * 360deg + 3deg), rgba(255,59,59,.3) 0); }
body.ctrl-overlap #jumpBtn.on .face, body.ctrl-overlap #jumpBtn.charging .face, body.ctrl-overlap #jumpBtn.held .face { opacity: 1; }

/* portrait phones: controls live in the strip under the playfield */
body[data-layout="portrait"] #controls { inset: auto; left: var(--ctrl-x); top: var(--ctrl-y); width: var(--ctrl-w); height: var(--ctrl-h); position: fixed; }
body[data-layout="portrait"] #controls { --pad: min(21vw, 86px); --jump: min(31vw, 126px); }
/* 22 px in from the edge: clear of the system back-swipe zone */
body[data-layout="portrait"] #dpad { left: calc(22px + var(--sal)); top: 50%; transform: translateY(-50%); }
body[data-layout="portrait"] #jumpBtn { right: 16px; top: 50%; transform: translateY(-50%); }
/* landscape / desktop touch: controls in the side bars, bottom corners */
body[data-layout="landscape"] #controls, body[data-layout="desktop"] #controls { --pad: clamp(64px, 17vh, 92px); --jump: clamp(100px, 27vh, 134px); }
body[data-layout="landscape"] #dpad, body[data-layout="desktop"] #dpad { left: calc(16px + var(--sal)); bottom: calc(18px + var(--sab)); }
body[data-layout="landscape"] #jumpBtn, body[data-layout="desktop"] #jumpBtn { right: calc(18px + var(--sar)); bottom: calc(18px + var(--sab)); }

/* ---------------- how to play ---------------- */
/* the soft fade at the bottom says "there's more below" */
.howto-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; text-align: left; padding: 0 4px 14px; margin: 0 -4px; min-height: 0; flex: 1 1 auto; outline: none; border-radius: 10px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.howto-scroll:focus-visible { box-shadow: 0 0 0 3px rgba(255,210,120,.75); }
body.no-ring .howto-scroll:focus-visible { box-shadow: none; }
/* keyboard lines for keyboard players, touch lines for touch players */
body.touch .steps li.kb, body:not(.touch) .steps li.tch { display: none; }
.steps { margin: 6px 0 6px; padding-left: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.steps li { counter-increment: s; position: relative; padding: 8px 10px 8px 44px; background: rgba(0,0,0,.2); border-radius: 14px; font-size: 15px; line-height: 1.45; color: #efe6ff; }
.steps li::before { content: counter(s); position: absolute; left: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); font-size: 13px; }
.steps b { color: #fff; }
kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 900 12px/18px var(--font); text-align: center; }
.tbtn { display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 8px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); font-size: 12px; line-height: 18px; }
.hint { font-size: 13.5px; color: #cdbfee; margin: 8px 2px; line-height: 1.45; }
.hazards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hz { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; background: rgba(0,0,0,.22); border-radius: 12px; min-width: 0; }
.hz-cv { width: 58px; height: 42px; flex: none; border-radius: 8px; background: rgba(255,255,255,.06); }
.hz-tx { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.3; color: #d6cbef; }
.hz-tx b { font-size: 13.5px; color: #fff; overflow-wrap: anywhere; }
@media (max-width: 430px) { .hazards { grid-template-columns: 1fr; } }
/* how-to keeps its own scroller, so its card is capped to the padded screen height */
#scr-howto .card { max-height: min(100%, 760px); }
#scr-howto { align-items: center; }
#scr-howto > .card { margin: 0; }

/* ---------------- launch cinematic ---------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#scr-ending { pointer-events: auto; overflow: hidden; outline: none; }
.ending-skip { position: absolute; top: calc(16px + var(--sat)); right: calc(16px + var(--sar));
  display: inline-flex; align-items: center; gap: 9px; margin: 0; min-height: 44px; padding: 8px 13px;
  color: #fff0d6; background: rgba(14,15,27,.72); border: 1px solid rgba(255,235,201,.28); border-radius: 999px;
  font: 800 12px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .24s; touch-action: manipulation; }
.ending-skip.ready { opacity: .82; visibility: visible; }
.ending-skip:hover, .ending-skip:focus-visible { opacity: 1; background: #272238; }
.ending-skip:focus-visible { outline: 3px solid #ffd385; outline-offset: 3px; }
.ending-skip svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.skip-key { color: #b6afba; font-size: 10px; letter-spacing: .02em; text-transform: none; }
body.touch .skip-key { display: none; }

/* ---------------- release report (end card) ----------------
   A chunky game panel: the deadpan cube peeks over the top edge with a tiny flag, a tilted red ribbon,
   a stamped rank medal, huge outlined numbers that count up (ui.js) and NEW BEST stickers that pop in.
   It sits low so the exploded moon stays in view above it. */
#scr-end { --heavy: "Arial Black", "Avenir Next Heavy", "Segoe UI Black", var(--font);
  --ol2: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink);
  --ol3: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink);
  --hero-up: 60px; }
#scr-end.modal { padding: calc(var(--hero-up) + 36px + var(--sat)) calc(14px + var(--sar)) calc(16px + var(--sab)) calc(14px + var(--sal));
  background: linear-gradient(180deg, transparent 35%, rgba(8,6,20,.3) 70%, rgba(8,6,20,.62) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
#scr-end .card.end { --padt: 16px; position: relative; width: 100%; max-width: 410px; margin-top: auto; margin-bottom: 0; padding: var(--padt) 16px 16px;
  border: 3.5px solid var(--ink); border-radius: 26px; text-align: center;
  background: radial-gradient(130% 60% at 50% 0%, rgba(155,109,255,.34), rgba(155,109,255,0) 62%),
    linear-gradient(180deg, #402d72 0%, #2b1e52 52%, #1e1440 100%);
  box-shadow: 0 9px 0 var(--ink), 0 28px 64px rgba(0,0,0,.62), inset 0 3px 0 rgba(255,255,255,.15), inset 0 -5px 0 rgba(0,0,0,.2);
  animation: endSlam .55s cubic-bezier(.2,1.25,.35,1) both; }
/* headline ribbon, slung across the card's top edge (ui.js shrinks the font if it would not fit) */
#scr-end .card h2.end-ribbon { position: relative; display: block; width: max-content; max-width: 100%; padding: 0 20px;
  margin: calc(-1 * var(--padt) - 3.5px - .5em - 13px) auto 0;
  font: 900 25px/1 var(--heavy); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: none;
  transform: rotate(-3deg); animation: ribbonIn .6s cubic-bezier(.2,1.4,.4,1) .18s both; }
.end-ribbon > span { position: relative; z-index: 1; display: block; padding: 9px 16px 11px; white-space: nowrap;
  background: linear-gradient(180deg, #ff7070 0%, #ef3b45 55%, #d92536 100%); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.32), inset 0 -4px 0 rgba(0,0,0,.14);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3.5px 0 var(--ink), 1.5px 3.5px 0 var(--ink), -1.5px 3.5px 0 var(--ink); }
.end-ribbon::before, .end-ribbon::after { content: ''; position: absolute; z-index: 0; top: 13px; bottom: -8px; width: 36px;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40' preserveAspectRatio='none'%3E%3Cpath d='M2 2h32v36H2l11-18z' fill='%23a3202a' stroke='%231d1430' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* the hero (drawn by ui.js) peeks over the ribbon; the canvas's bottom strip hangs over its top border (the nubs) */
.end-hero { position: absolute; left: 50%; top: calc(-1 * var(--hero-up)); width: 132px; height: calc(var(--hero-up) + 14px);
  transform: translateX(-50%); pointer-events: none; z-index: 2; }
.end-ribbon::before { left: 0; }
.end-ribbon::after { right: 0; transform: scaleX(-1); }
.end-joke { margin: 14px 0 8px; font-size: 14px; line-height: 1.3; color: #e6dbff; text-shadow: 0 2px 0 var(--ink); }
.end-joke br { display: none; }
.end-joke[hidden] { display: none; }
/* release counter (ui.js): "You're the [47th] person to release Fable 5.5" in the joke's slot, one line,
   shrunk to fit; the ordinal is a tilted gold sticker. While counting it is a quiet pulsing line. */
.end-release { display: block; max-width: 100%; margin: 13px 0 7px; white-space: nowrap; overflow: hidden; padding: 4px 2px 6px;
  font-size: 14.5px; line-height: 1.25; font-weight: 800; color: #fff4e3; text-shadow: 0 2px 0 var(--ink); }
.end-release[hidden] { display: none; }
.end-release .ord { display: inline-block; margin: 0 .14em; padding: .14em .42em .2em; vertical-align: .02em;
  font: 900 1.32em/1 var(--heavy); letter-spacing: .01em; color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, #fff1a8 0%, #ffd25a 45%, #ffa83d 100%); border: 2.5px solid var(--ink); border-radius: .42em;
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.6); transform: rotate(-3deg);
  animation: stampIn .45s cubic-bezier(.3,1.5,.5,1) .9s both; }
.end-release .pre, .end-release .post { display: inline; }
.end-release.wrap { white-space: normal; line-height: 1.6; text-wrap: balance; }
.end-release[data-state="pending"] { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #b9a8e8;
  animation: countPulse 1.1s ease-in-out infinite alternate; }
.end-release.landed .ord { animation: landPop .5s cubic-bezier(.3,1.6,.5,1) both; }
.end-release.landed { animation: fadeIn .25s ease-out both; }
@keyframes countPulse { from { opacity: .45; } to { opacity: .95; } }
@keyframes landPop { 0% { opacity: 0; transform: rotate(-14deg) scale(1.8); } 60% { opacity: 1; transform: rotate(-1deg) scale(.92); } 100% { opacity: 1; transform: rotate(-3deg); } }
/* rank: a stamped plate with a gold medal */
.end-rank { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 6px 0 14px; padding: 5px 16px 5px 6px;
  background: rgba(13,8,28,.62); border: 2.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink), inset 0 1px 0 rgba(255,255,255,.1); transform: rotate(-1.5deg);
  animation: stampIn .45s cubic-bezier(.3,1.5,.5,1) 1.05s both; }
.end-rank[hidden] { display: none; }
.medal { flex: none; width: 40px; height: 47px; margin: -12px 0 -10px -6px; overflow: visible; filter: drop-shadow(0 3px 0 var(--ink)); }
.medal .m-tail { stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.medal .m-tail.l { fill: #e8413c; } .medal .m-tail.r { fill: #4de3ff; }
.medal .m-disc { fill: #ffd25a; stroke: var(--ink); stroke-width: 3; }
.medal .m-ring { fill: #ffb33d; stroke: rgba(29,20,48,.35); stroke-width: 1.5; }
.medal .m-star { fill: #fff6c8; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.rank-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.rank-txt .k { margin-bottom: 3px; font-size: 10px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: #ffb35c; }
#scr-end .rank { margin: 0; font: 900 17px/1.08 var(--heavy); letter-spacing: .015em; text-transform: uppercase; color: #ffd25a;
  -webkit-text-stroke: 4.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink), 1.5px 3px 0 var(--ink), -1.5px 3px 0 var(--ink); overflow-wrap: anywhere; }
/* stat tiles */
#scr-end .stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 10px; }
#scr-end .st-time { grid-column: 1 / -1; }
#scr-end .stat { --c: #4de3ff; position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 7px 13px 6px;
  background: linear-gradient(180deg, #4b3886 0%, #30225e 100%); border: 3px solid var(--ink); border-radius: 17px;
  box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.16);
  animation: tileIn .42s cubic-bezier(.2,1.4,.4,1) .3s both; }
#scr-end .stat.st-falls { --c: #ff8f9c; animation-delay: .38s; }
#scr-end .stat.st-jumps { --c: #ffd25a; animation-delay: .46s; }
#scr-end .stat .k { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c); text-shadow: 0 2px 0 var(--ink); }
#scr-end .stat .k svg { width: 15px; height: 15px; flex: none; fill: var(--c); stroke: var(--c); }
#scr-end .stat .k svg .cut { fill: #3d2c70; stroke: none; }
#scr-end .stat .v { --fs: 50px; display: block; width: 100%; padding: 0 4px 5px 2px; text-align: left; white-space: nowrap;
  font: 900 var(--fs)/1.08 var(--heavy); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink), 2px 5px 0 var(--ink), -2px 5px 0 var(--ink); }
#scr-end .st-time .v { --fs: 54px; }
#scr-end .stat .nb { --rot: 9deg; position: absolute; top: -19px; right: -13px; z-index: 1; padding: 4px 7px 5px; white-space: nowrap;
  font: 900 10.5px/1 var(--heavy); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, #e6ff8a 0%, #7ee27a 100%); border: 2.5px solid var(--ink); border-radius: 9px;
  box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.55); transform: rotate(var(--rot));
  animation: stickerPop .5s cubic-bezier(.3,1.6,.5,1) 1.5s both; }
#scr-end #nbFalls { --rot: -7deg; animation-delay: 1.62s; }
#scr-end .bests { display: block; margin: 0 0 12px; font-size: 12.5px; line-height: 1.4; color: #cdbfee; text-shadow: 0 2px 0 var(--ink); }
#scr-end .bests b { color: #ffb35c; }
#scr-end .bests .practice { color: #ffc2c8; font-weight: 700; }
/* actions: Share on X is the big gold call to action; the other two are quiet */
#scr-end .menu { margin-top: 0; gap: 12px; animation: menuIn .4s cubic-bezier(.2,1.2,.4,1) .3s both; }
#scr-end .btn.xshare { min-height: 62px; padding: 10px 20px; gap: 11px; overflow: hidden; isolation: isolate;
  font: 900 25px/1 var(--heavy); letter-spacing: .02em; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, #ffe07a 0%, #ffb547 48%, #ff8a3d 100%);
  box-shadow: 0 6px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(160,60,10,.25); }
#scr-end .btn.xshare svg { width: 25px; height: 25px; fill: var(--ink); }
#scr-end .btn.xshare::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%) no-repeat; background-size: 260% 100%;
  background-position: 150% 0; animation: shine 3.6s ease-in-out 1.9s infinite; }
@media (hover: hover) { #scr-end .btn.xshare:hover { box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.5); } }
#scr-end .btn.xshare:active { box-shadow: 0 1px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.5); }
body.no-ring #scr-end .btn.xshare:focus-visible { box-shadow: 0 6px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.5); }
#scr-end .row .btn { min-height: 44px; font-size: 15px; color: #f1e8ff; letter-spacing: .03em; border: 3px solid var(--ink); border-radius: 14px;
  background: linear-gradient(180deg, #4e3a8a, #3a2a6c); box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.14); }
#scr-end .row .btn:active { box-shadow: 0 1px 0 var(--ink); }
#scr-end .btn:focus-visible { outline: 3px solid #ffd385; outline-offset: 3px; }
body.no-ring #scr-end .btn:focus-visible { outline: none; }
body.no-ring #scr-end .row .btn:focus-visible { box-shadow: 0 4px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.14); }
@keyframes endSlam { 0% { opacity: 0; transform: translateY(-46px) scale(1.16) rotate(-2.5deg); }
  55% { opacity: 1; transform: translateY(7px) scale(.97) rotate(.6deg); } 78% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes ribbonIn { 0% { opacity: 0; transform: rotate(-16deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-1deg) scale(.93); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes tileIn { 0% { opacity: 0; transform: translateY(16px) scale(.86); } 100% { opacity: 1; transform: none; } }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-12deg) scale(1.75); } 65% { opacity: 1; transform: rotate(-.5deg) scale(.92); } 100% { opacity: 1; transform: rotate(-1.5deg); } }
@keyframes stickerPop { 0% { opacity: 0; transform: rotate(-30deg) scale(0); } 60% { opacity: 1; transform: rotate(var(--rot)) scale(1.35); } 100% { opacity: 1; transform: rotate(var(--rot)); } }
@keyframes menuIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes shine { 0% { background-position: 150% 0; } 28%, 100% { background-position: -50% 0; } }
/* short phones (in-app browsers, iPhone SE): tighter, the numbers stay big */
@media (orientation: portrait) and (max-height: 720px) {
  #scr-end { --hero-up: 52px; }
  #scr-end.modal { padding-bottom: calc(10px + var(--sab)); }
  #scr-end .card.end { --padt: 13px; padding: var(--padt) 14px 13px; }
  #scr-end .card h2.end-ribbon { font-size: 22px; }
  .end-ribbon > span { padding: 7px 14px 9px; }
  .end-joke { margin: 13px 0 4px; font-size: 13px; }
  .end-release { margin: 11px 0 3px; font-size: 13.5px; }
  .end-rank { margin: 6px 0 11px; }
  #scr-end .stats { gap: 9px; margin-bottom: 8px; }
  #scr-end .stat .v { --fs: 40px; }
  #scr-end .st-time .v { --fs: 46px; }
  #scr-end .bests { margin-bottom: 9px; font-size: 12px; }
  #scr-end .menu { gap: 10px; }
  #scr-end .btn.xshare { min-height: 56px; font-size: 23px; }
  #scr-end .row .btn { min-height: 42px; }
}
/* tall tablets / portrait desktop windows: a bit bigger */
@media (orientation: portrait) and (min-width: 600px) and (min-height: 900px) {
  #scr-end { --hero-up: 70px; }
  #scr-end .card.end { --padt: 20px; max-width: 470px; padding: var(--padt) 20px 18px; margin-bottom: 2vh; }
  .end-hero { width: 154px; }
  #scr-end .card h2.end-ribbon { font-size: 29px; }
  .end-joke { font-size: 15.5px; }
  .end-release { font-size: 16px; }
  #scr-end .rank { font-size: 19px; }
  #scr-end .stat .v { --fs: 58px; }
  #scr-end .st-time .v { --fs: 64px; }
  #scr-end .stat .k { font-size: 13px; }
  #scr-end .bests { font-size: 13.5px; }
  #scr-end .btn.xshare { min-height: 66px; font-size: 27px; }
  #scr-end .row .btn { min-height: 48px; font-size: 16px; }
}
/* the pause card hides while a confirm dialog sits on top of it (no double card edges) */
#scr-pause[inert] .card { visibility: hidden; }

/* ---------------- one-off hint toast ---------------- */
#toast { position: fixed; left: var(--px); width: var(--pw); top: calc(var(--py) + var(--ph) * .3); z-index: 11; display: flex; justify-content: center;
  pointer-events: none; opacity: 0; padding: 0 10px; }
#toast > span { padding: 8px 14px; border-radius: 14px; background: rgba(20,12,38,.92); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.4);
  color: #fff; font-size: 14.5px; line-height: 1.3; text-align: center; }
#toast.show { animation: toastIn 4s ease forwards; }
body:not([data-state="playing"]) #toast { display: none; }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------- share dialog ---------------- */
.card.share { max-width: 460px; }
.share-body { display: flex; flex-direction: column; gap: 12px; }
.share-preview { margin: 0; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #140c26;
  box-shadow: 0 5px 0 var(--ink); aspect-ratio: 1200 / 675; line-height: 0; }
.share-preview img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
.share-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.share-tip { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; color: #e3d7fb; }
.share-tip svg { width: 18px; height: 18px; flex: none; stroke: var(--accent-2); }
.share-side .menu { margin-top: 0; }
#btnShareSave[aria-disabled="true"] { opacity: .55; cursor: progress; }
/* the share dialog keeps the screen's own touch scrolling (long-press the preview to save on phones) */
#scr-share .share-preview { touch-action: auto; }

.noscript { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ---------------- small screens ---------------- */
@media (max-height: 640px) {
  .btn.big { min-height: 54px; font-size: 22px; }
  .card { padding: 16px; }
  .card h2 { font-size: 26px; }
  .menu { gap: 10px; }
}
@media (max-width: 440px) {
  .where-bar { display: none; }
  .pill { padding: 0 8px; }
  #hud { gap: 5px; }
}
/* narrow phones: the clock icon goes, so long runs (1:03:54, 1234 falls) still leave room for the section */
@media (max-width: 400px) {
  #hudTime svg { display: none; }
  .pill { padding: 0 7px; }
  #hud { gap: 4px; }
}
@media (max-width: 360px) {
  .pill { padding: 0 6px; font-size: 14px; }
  .btn { font-size: 16px; }
}

/* ---------------- big desktop screens ---------------- */
@media (min-width: 900px) and (min-height: 820px) {
  .btn.big { min-height: 74px; font-size: 32px; }
  #scr-title .btn.small { min-height: 52px; font-size: 18px; }
  .bests { font-size: 16px; }
  .card { max-width: 480px; }
  .card.share { max-width: 460px; }
  .card.wide { max-width: 620px; }
  .card:not(.share) .btn { font-size: 20px; }
  .card:not(.share) .btn.small { min-height: 48px; font-size: 17px; }
  .card .sub { font-size: 16.5px; }
}

/* ---------------- short landscape phones (e.g. 844x390, 667x375, 568x320) ---------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .bests { margin-top: 10px; font-size: 13px; }
  .btn { min-height: 42px; font-size: 16px; padding: 8px 14px; }
  .btn.big { min-height: 50px; font-size: 21px; }
  .btn.small { min-height: 38px; font-size: 14px; }
  .menu { gap: 9px; }
  .card { padding: 14px 16px 16px; max-width: 520px; }
  .card.wide { max-width: 600px; }
  .card h2 { font-size: 24px; margin-bottom: 4px; }
  .card .sub { margin-bottom: 8px; font-size: 14px; }
  .stats { margin-bottom: 8px; }
  .stat { padding: 6px 4px 10px; }
  .stat .v { font-size: 22px; }
  .screen.modal { padding-top: calc(16px + var(--sat)); padding-bottom: calc(10px + var(--sab)); }
  /* share dialog side by side: preview left, actions right */
  .card.share { max-width: 720px; }
  .share-body { flex-direction: row; align-items: center; gap: 16px; }
  .share-preview { flex: 1 1 55%; min-width: 0; }
  .share-side { flex: 1 1 45%; }
  .share-tip { font-size: 13px; }
  /* the section name stays on one line in the narrow landscape playfield */
  #banner .b-inner { padding: 7px 14px 9px; max-width: 98%; }
  .b-name { white-space: nowrap; font-size: calc(34px * max(var(--ps), .46)); }
}
/* the smallest landscape phones (568x320): the pause menu fits without scrolling */
@media (orientation: landscape) and (max-height: 340px) {
  #pauseTitle { font-size: 20px; margin: 0; }
  #scr-pause .card { padding: 10px 14px 12px; }
  #scr-pause .card .sub { margin: 2px 0 6px; font-size: 13px; }
  #scr-pause .menu { gap: 7px; margin-top: 2px; }
  #scr-pause .btn { min-height: 36px; font-size: 15px; padding: 6px 12px; }
  #scr-pause .btn.small { min-height: 34px; font-size: 13.5px; }
  .screen.modal { padding-top: calc(8px + var(--sat)); padding-bottom: calc(8px + var(--sab)); }
}

/* ---------------- reduced motion (setting or OS preference, applied as body.reduce-motion) ---------------- */
body.reduce-motion .screen.show, body.reduce-motion .card { animation: fadeIn .2s ease-out; }
body.reduce-motion .pill.bump { animation: none; }
body.reduce-motion #banner.show { animation: bannerFade 2.1s linear forwards; }
@keyframes bannerFade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
body.reduce-motion .btn, body.reduce-motion .pad, body.reduce-motion .where-bar i, body.reduce-motion #hud { transition: none; }
body.reduce-motion #jumpBtn.held .ring { animation: none; box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 5px rgba(255,210,120,.6); }
body.reduce-motion #toast.show { animation: bannerFade 4s linear forwards; }
@media (hover: hover) { body.reduce-motion .btn:hover { transform: none; } }

/* Landscape phones and desktop: the ribbon across the top, the big numbers on the left (like the share
   image), rank and actions on the right. Low and wide, so the wrecked moon keeps the top of the screen. */
@media (orientation: landscape) {
  #scr-end { --hero-up: 52px; }
  #scr-end.modal { padding: calc(var(--hero-up) + 32px + var(--sat)) calc(18px + var(--sar)) calc(14px + var(--sab)) calc(18px + var(--sal)); }
  #scr-end .card.end { --padt: 18px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 0 20px;
    grid-template-areas: "rib rib" "stats joke" "stats rank" "stats menu" "bests menu"; grid-template-rows: auto auto auto 1fr auto;
    max-width: 760px; padding: var(--padt) 20px 16px; }
  .end-intro, .end-results { display: contents; }
  #scr-end .card h2.end-ribbon { grid-area: rib; }
  .end-hero { width: 120px; }
  .end-joke { grid-area: joke; margin: 26px 0 4px; }
  .end-release { grid-area: joke; margin: 22px 0 2px; }
  .end-rank { grid-area: rank; justify-self: center; margin: 8px 0 14px; }
  #scr-end .stats { grid-area: stats; align-self: stretch; grid-template-rows: auto 1fr; margin: 32px 0 10px; gap: 10px; }
  #scr-end .stat { justify-content: space-between; }
  #scr-end .stat .v { --fs: 40px; }
  #scr-end .st-time .v { --fs: 46px; }
  #scr-end .bests { grid-area: bests; margin: 0; }
  #scr-end .menu { grid-area: menu; align-self: end; }
  #scr-end .btn.xshare { min-height: 56px; font-size: 23px; }
  #scr-end .row .btn { min-height: 42px; }
}
/* phones on their side */
@media (orientation: landscape) and (max-height: 460px) {
  #scr-end { --hero-up: 46px; }
  #scr-end.modal { padding-bottom: calc(10px + var(--sab)); }
  #scr-end .card.end { --padt: 13px; padding: var(--padt) 16px 12px; gap: 0 16px; }
  .end-hero { width: 106px; }
  #scr-end .card h2.end-ribbon { font-size: 21px; padding: 0 16px; }
  .end-ribbon > span { padding: 7px 12px 8px; }
  .end-ribbon::before, .end-ribbon::after { width: 30px; top: 11px; }
  .end-joke { margin: 22px 0 4px; font-size: 12.5px; }
  .end-release { margin: 18px 0 2px; font-size: 13px; }
  .end-rank { margin: 6px 0 10px; padding: 4px 12px 4px 5px; }
  #scr-end .rank { font-size: 14px; }
  .medal { width: 34px; height: 40px; }
  #scr-end .stats { margin: 27px 0 8px; gap: 9px; }
  #scr-end .stat .v { --fs: 36px; }
  #scr-end .st-time .v { --fs: 40px; }
  #scr-end .bests { font-size: 11px; }
  #scr-end .menu { gap: 9px; }
  #scr-end .btn.xshare { min-height: 50px; font-size: 21px; border-radius: 15px; }
  #scr-end .row .btn { min-height: 40px; font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 340px) {
  #scr-end { --hero-up: 40px; }
  #scr-end.modal { padding-left: calc(10px + var(--sal)); padding-right: calc(10px + var(--sar)); }
  #scr-end .card.end { --padt: 11px; padding: var(--padt) 13px 11px; gap: 0 13px; border-radius: 22px; }
  .end-hero { width: 94px; }
  #scr-end .card h2.end-ribbon { font-size: 18px; }
  .end-joke { font-size: 11.5px; margin: 19px 0 2px; }
  .end-release { margin: 13px 0 0; padding: 2px 2px 3px; font-size: 12px; }
  .end-release.wrap { line-height: 1.5; }
  .end-release .ord { padding: .06em .36em .1em; font-size: 1.22em; box-shadow: 0 2px 0 var(--ink), inset 0 2px 0 rgba(255,255,255,.6); }
  .end-release:not([hidden]) ~ .end-rank { margin: 4px 0 8px; }
  #scr-end .rank { font-size: 12.5px; }
  #scr-end .stat { padding: 5px 8px 4px; border-radius: 14px; }
  #scr-end .stat .k { font-size: 10px; letter-spacing: .08em; gap: 4px; }
  #scr-end .stat .k svg { width: 12px; height: 12px; }
  #scr-end .stats { margin: 23px 0 6px; gap: 8px; }
  #scr-end .stat .v { --fs: 30px; }
  #scr-end .st-time .v { --fs: 34px; }
  #scr-end .stat .nb { font-size: 9px; padding: 4px 6px; }
  #scr-end .bests { font-size: 10.5px; }
  #scr-end .menu { gap: 8px; }
  #scr-end .btn.xshare { min-height: 46px; font-size: 19px; }
  #scr-end .row .btn { min-height: 38px; font-size: 13px; }
}
/* big desktop monitors */
@media (orientation: landscape) and (min-width: 1100px) and (min-height: 680px) {
  #scr-end { --hero-up: 68px; }
  #scr-end.modal { padding-bottom: calc(3vh + var(--sab)); }
  #scr-end .card.end { --padt: 22px; max-width: 860px; padding: var(--padt) 26px 20px; gap: 0 28px; }
  .end-hero { width: 150px; }
  #scr-end .card h2.end-ribbon { font-size: 30px; }
  .end-joke { font-size: 16px; }
  #scr-end .rank { font-size: 19px; }
  #scr-end .stat .k { font-size: 12.5px; }
  #scr-end .stat .v { --fs: 52px; }
  #scr-end .st-time .v { --fs: 60px; }
  #scr-end .bests { font-size: 13.5px; }
  #scr-end .btn.xshare { min-height: 64px; font-size: 27px; }
  #scr-end .row .btn { min-height: 46px; font-size: 16px; }
}
@media (orientation: landscape) and (min-width: 1600px) and (min-height: 960px) {
  #scr-end { --hero-up: 80px; }
  #scr-end .card.end { --padt: 26px; max-width: 980px; padding: var(--padt) 30px 24px; }
  .end-hero { width: 176px; }
  #scr-end .card h2.end-ribbon { font-size: 35px; }
  .end-joke { font-size: 18px; }
  #scr-end .rank { font-size: 22px; }
  .medal { width: 46px; height: 54px; }
  #scr-end .stat .k { font-size: 14px; }
  #scr-end .stat .k svg { width: 17px; height: 17px; }
  #scr-end .stat .v { --fs: 60px; }
  #scr-end .st-time .v { --fs: 70px; }
  #scr-end .stat .nb { font-size: 13px; }
  #scr-end .bests { font-size: 15px; }
  #scr-end .btn.xshare { min-height: 72px; font-size: 30px; }
  #scr-end .btn.xshare svg { width: 29px; height: 29px; }
  #scr-end .row .btn { min-height: 52px; font-size: 18px; }
}
/* reduce motion: a plain fade, no slams, no pops, no shine (ui.js also skips the count-up) */
body.reduce-motion #scr-end .card.end, body.reduce-motion #scr-end .card h2.end-ribbon, body.reduce-motion #scr-end .end-rank,
body.reduce-motion #scr-end .stat, body.reduce-motion #scr-end .stat .nb, body.reduce-motion #scr-end .menu,
body.reduce-motion .end-release .ord, body.reduce-motion .end-release.landed .ord, body.reduce-motion .end-release.landed { animation: fadeIn .2s linear both; }
body.reduce-motion .end-release[data-state="pending"] { animation: none; opacity: .8; }
body.reduce-motion #scr-end .btn.xshare::after { animation: none; display: none; }
body.reduce-motion .ending-skip { transition: none; }