/* KÜNI springt: zweites Spiel auf der Seite, ein Doodle-Jump mit Canvas.
   Die Spielkonsole ist immer dunkel, egal ob die Seite hell oder dunkel steht.
   Die Erklärspalte und die Bestenliste nutzen dagegen die Farben der Seite.
   Schriften kommen von der Seite (Archivo, IBM Plex Sans), kein eigener Download. */

.doodle-jump {
  --dj-accent: #71d7ff;
  --dj-text: #f0f5ff;
  --dj-muted: #a0adc2;
  --dj-line: rgba(148, 181, 224, .16);
  isolation: isolate;
}
.doodle-jump *, .doodle-jump *::before, .doodle-jump *::after { box-sizing: border-box; }
.doodle-jump [hidden] { display: none !important; }

/* ---------- Layout ---------- */
.dj-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 6vw, 88px); align-items: center; margin-top: 36px;
}

/* ---------- Erklärspalte, in den Farben der Seite ---------- */
.dj-story { max-width: 440px; }
.dj-record { display: flex; align-items: center; gap: 14px; padding: 0 0 20px; border-bottom: 1px solid var(--linie); }
.dj-record-icon {
  display: grid; place-items: center; flex: none; width: 46px; height: 52px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, var(--karte)); color: var(--akzent);
}
.dj-record > div > span { display: block; font-size: 14px; color: var(--text-leise); }
.dj-record strong { display: block; font: 800 32px/1.15 var(--schrift-titel); letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.dj-record strong small { font-size: 16px; font-weight: 600; color: var(--text-leise); }
.dj-record-tag { margin-left: auto; max-width: 140px; font-size: 13px; line-height: 1.45; text-align: right; color: var(--text-leise); }
/* Die Reise nach oben: 15 Etappen, kompakt, jede mit ihrer Farbe (--c im HTML) */
.dj-route-titel { margin: 16px 0 4px; font: 700 13px/1.3 var(--schrift-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
.dj-route { list-style: none; margin: 0; padding: 4px 0 8px; }
.dj-route li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 27px; padding: 3px 0; font-size: 14px; color: var(--text-leise); }
.dj-route li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 19px; bottom: -8px; width: 2px; background: var(--linie); }
.dj-route-dot { width: 12px; height: 12px; flex: none; z-index: 1; border-radius: 50%; border: 2px solid var(--linie); background: var(--karte); }
.dj-route strong { font-weight: 600; }
.dj-route b { margin-left: auto; font: 600 13px/1 var(--schrift-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dj-route .is-unlocked { color: var(--text); }
.dj-route .is-unlocked strong { color: var(--tinte); }
.dj-route .is-unlocked .dj-route-dot { background: var(--c); border-color: color-mix(in srgb, var(--c) 55%, #000); }
.dj-route .is-unlocked:not(:last-child)::after { background: color-mix(in srgb, var(--c) 60%, var(--linie)); }
.dj-route-weiter { margin: 0 0 6px 24px; font-size: 13px; font-style: italic; color: var(--text-leise); }
/* Bestenliste: wie weit jemand gekommen ist, klein hinter dem Namen */
#springt-liste .bestenliste__etappe { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--text-leise); }
.dj-tip { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 16px 0 0; border-top: 1px solid var(--linie); font-size: 15px; line-height: 1.55; color: var(--text-leise); }
.dj-tip p { margin: 0; }
.dj-tip strong { display: block; color: var(--tinte); font-weight: 600; }
.dj-gem {
  width: 18px; height: 24px; flex: none; margin: 0 6px 0 2px;
  clip-path: polygon(50% 0, 100% 35%, 80% 80%, 50% 100%, 0 45%);
  background: linear-gradient(120deg, #d4ffff, #4ac7ff 50%, #516dff);
}
.dj-local { margin: 14px 0 0; font-size: 13px; color: var(--text-leise); }

/* ---------- Spielkonsole, immer dunkel ---------- */
.dj-console {
  --dj-board-width: 420px;
  width: min(100%, var(--dj-board-width)); justify-self: center; min-width: 0; position: relative;
  color: var(--dj-text); color-scheme: dark; font: 400 16px/1.5 var(--schrift-text);
}
.dj-console p, .dj-console h3 { margin: 0; }
.dj-console h3, .dj-console button, .dj-height, .dj-result strong { font-family: var(--schrift-titel); }
.dj-console button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: var(--schrift-titel); }
.dj-console button:disabled { opacity: .3; cursor: default; }
.dj-console button:focus-visible, .dj-canvas:focus-visible { outline: 3px solid #c7eeff; outline-offset: 3px; }
.dj-console button:active:not(:disabled) { transform: translateY(1px); }
.dj-console::before {
  content: ""; position: absolute; inset: 10% -4% 5%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(23, 81, 163, .28), transparent 67%);
}
.dj-console-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.dj-world { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--tinte); }
.dj-world i { width: 8px; height: 8px; border-radius: 50%; background: var(--dj-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--dj-accent) 60%, transparent); }
.dj-tools { display: flex; align-items: center; gap: 8px; }
.dj-icon-button.sperre-knopf svg { stroke-width: 1.6; }
.dj-icon-button {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  border: 1px solid #304562; background: #142136; color: #bdd0e6;
}
.dj-icon-button:hover:not(:disabled) { background: #203653; border-color: #6392bd; color: #fff; }
.dj-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dj-icon-button .dj-sound-on { display: none; }
.dj-icon-button[aria-pressed="true"] .dj-sound-on { display: block; }
.dj-icon-button[aria-pressed="true"] .dj-sound-off { display: none; }
.dj-stage {
  position: relative; aspect-ratio: 21 / 32; width: 100%; overflow: hidden; background: #071525;
  border: 1px solid #37688e; border-radius: 24px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .35), 0 0 0 6px rgba(24, 43, 66, .18), 0 0 32px rgba(53, 125, 198, .18);
}
.dj-canvas {
  display: block; width: 100%; height: 100%; outline-offset: -4px !important;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Beim Spielen nimmt das Spielfeld alle Berührungen. Gesperrt (Standard) lenkt ein Wisch nur;
   entsperrt reicht sperre.js ein senkrechtes Wischen an die Seite weiter. */
.doodle-jump[data-state="playing"] .dj-canvas { cursor: grab; touch-action: none; }
/* Startbild, Pause und Ergebnis: entsperrt darf auch ein Wisch über der Fläche die Seite mitnehmen */
.doodle-jump[data-lock="aus"] .dj-overlay { overscroll-behavior: auto; }
.doodle-jump[data-state="playing"] .dj-canvas:active { cursor: grabbing; }
.dj-icon-button.sperre-knopf[aria-pressed="false"] { color: #ffd166; border-color: #7a6a3a; }
.dj-tools { position: relative; }
.dj-tools > .sperre-hinweis { top: calc(100% + 12px); right: 0; }
.dj-tools > .sperre-hinweis::before { right: 66px; }
.dj-hud {
  position: absolute; z-index: 1; inset: 0 0 auto; padding: 20px 21px 48px; pointer-events: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  /* reicht bis unter "Nächstes Ziel", damit die Schrift auch auf hellem Himmel und Wolken lesbar bleibt */
  background: linear-gradient(rgba(8, 19, 35, .94), rgba(8, 19, 35, .75) 70%, transparent);
}
.dj-height small { display: block; margin-bottom: 1px; font-size: 12px; letter-spacing: .3px; color: #9fb5cf; }
.dj-height strong { font-size: 31px; line-height: 1; font-weight: 750; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.dj-height strong span { font-size: 14px; font-weight: 450; letter-spacing: 0; color: #9fb8d4; }
/* Extra-Leben: sechs Kristalle füllen das Herz von unten, voll fängt es KÜNI einmal auf */
.dj-energy { width: 118px; }
.dj-herz-zeile { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #d2e9ff; }
.dj-herz { width: 22px; height: 20px; flex: none; overflow: visible; }
.dj-herz-leer { fill: rgba(255, 90, 122, .12); stroke: #ff8fa6; stroke-width: 1.6; }
.dj-herz-voll { fill: #ff5a7a; }
.dj-energy.is-ready .dj-herz { filter: drop-shadow(0 0 6px rgba(255, 90, 122, .75)); animation: dj-herzschlag 1.1s ease-in-out infinite; }
.dj-energy.is-ready .dj-herz-zeile { color: #ffd0da; }
@keyframes dj-herzschlag { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1.04); } 45% { transform: scale(1.12); } }
.dj-energy-pips { display: flex; gap: 5px; margin-top: 7px; }
.dj-energy-pips i { width: 9px; height: 12px; background: #2a4a6c; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); }
.dj-energy-pips i.is-filled { background: #6ad4ff; }
.dj-energy.is-ready .dj-energy-pips i { background: #ff8fa6; }
.dj-hud-best { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: #a7bdd6; }
.dj-hud-best b { font-weight: 500; color: #e0cfa7; }
.dj-goal { position: absolute; z-index: 1; top: 88px; left: 22px; right: 22px; pointer-events: none; }
.dj-goal > span { display: block; margin-bottom: 5px; font-size: 12px; color: #c6d6e8; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dj-goal > div { height: 3px; border-radius: 3px; overflow: hidden; background: rgba(184, 219, 255, .13); }
.dj-goal i { display: block; height: 100%; width: 0; background: var(--dj-accent); box-shadow: 0 0 8px var(--dj-accent); transition: width .2s linear; }
.dj-toast {
  position: absolute; z-index: 3; top: 24%; left: 50%; transform: translateX(-50%); max-width: 90%; white-space: nowrap; pointer-events: none;
  padding: 8px 16px; border-radius: 20px; border: 1px solid #438ca1; background: rgba(17, 48, 71, .93);
  font-weight: 650; font-size: 14px; color: #effdff; text-shadow: 0 2px 10px #000; box-shadow: 0 4px 22px rgba(0, 0, 0, .2);
}
.dj-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; text-align: center;
  padding: 36px 25px 22px; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(5, 18, 37, .06) 0%, rgba(4, 19, 36, .19) 25%, rgba(6, 20, 40, .81) 61%, rgba(6, 18, 38, .96) 100%);
}
/* Nach der Runde und in der Pause: nur das Spielfeld verschwimmt, damit Ergebnis und Namensfeld
   sich klar abheben. Anzeige oben und Ergebnis bleiben scharf. Leicht vergrößert, damit der
   weiche Rand der Unschärfe vom abgerundeten Rahmen abgeschnitten wird. */
.dj-canvas { transition: filter .35s ease, transform .35s ease; }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-canvas { filter: blur(6px) saturate(.75) brightness(.8); transform: scale(1.05); }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-overlay {
  background: linear-gradient(180deg, rgba(5, 18, 37, .2) 0%, rgba(4, 19, 36, .38) 25%, rgba(6, 20, 40, .84) 61%, rgba(6, 18, 38, .96) 100%);
}
@media (prefers-reduced-motion: reduce) { .dj-canvas { transition: none; } }
.dj-menu { width: 100%; max-width: 340px; position: relative; margin-block: auto; flex-shrink: 0; }
.dj-hero-art { height: 236px; position: relative; display: grid; place-items: center; margin: 0 0 6px; isolation: isolate; }
.dj-hero-art img { width: 240px; height: 240px; object-fit: contain; display: block; position: relative; z-index: 1; transform: rotate(-6deg); filter: drop-shadow(0 14px 20px rgba(8, 104, 211, .27)); }
.dj-orbit-ring {
  position: absolute; top: 160px; width: 190px; height: 190px; border: 1px solid rgba(96, 187, 251, .31); border-radius: 50%;
  box-shadow: 0 0 35px rgba(23, 139, 234, .13), inset 0 0 30px rgba(54, 135, 189, .07); transform: rotate(-26deg) scaleY(.35);
}
.dj-orbit-ring::before { content: ""; position: absolute; inset: -25px; border: 1px solid rgba(65, 139, 195, .18); border-radius: 50%; }
.dj-menu-kicker { margin: 0 0 10px !important; font-size: 13px; color: #8ecbeb; }
.dj-menu-title { font-size: 42px; line-height: 1.02; font-weight: 800; letter-spacing: -1.8px; text-wrap: balance; color: #eff8ff; }
.dj-menu-copy { margin: 12px 0 19px !important; font-size: 15px; line-height: 1.5; color: #adbed7; }
.dj-start {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 53px;
  border: 1px solid #a3e3ff; border-radius: 13px; font-size: 17px; font-weight: 750; color: #052239;
  background: linear-gradient(120deg, #b0f0ff, #58b9ff); box-shadow: 0 7px 28px rgba(41, 159, 251, .2), inset 0 1px #e0fcff;
  transition: box-shadow .2s, transform .2s, background .2s;
}
.dj-start svg { width: 16px; height: 16px; fill: currentColor; }
.dj-start:hover { background: linear-gradient(120deg, #d6fbff, #89ceff); box-shadow: 0 9px 34px rgba(41, 159, 251, .33); }
/* Eintragen direkt nach der Runde, wie bei KÜNI rennt. Mit offenem Formular ist „Eintragen“ der Hauptknopf. */
.dj-eintrag { margin: 0 0 14px; text-align: left; }
.dj-eintrag label { display: block; margin-bottom: 6px; font: 600 12px/1.3 var(--schrift-mono); letter-spacing: .04em; color: #a9bfd8; }
.dj-eintrag-zeile { display: flex; gap: 8px; }
.dj-eintrag input {
  flex: 1; min-width: 0; min-height: 46px; padding: 8px 12px; border-radius: 11px;
  border: 1.5px solid #3f6386; background: #0d1d31; color: #f0f5ff; font: 500 16px/1.2 var(--schrift-text);
  user-select: text; -webkit-user-select: text;
}
.dj-eintrag input::placeholder { color: #7890ab; }
.dj-eintrag input:focus { outline: none; border-color: #8fdcff; box-shadow: 0 0 0 3px rgba(113, 215, 255, .25); }
.dj-eintrag input[aria-invalid="true"] { border-color: #ff8a8a; }
.dj-eintrag button {
  flex: none; min-height: 46px; padding: 0 16px; border-radius: 11px; border: 1px solid #a3e3ff;
  font-size: 15px; font-weight: 750; color: #052239; background: linear-gradient(120deg, #b0f0ff, #58b9ff);
}
.dj-eintrag button:hover:not(:disabled) { background: linear-gradient(120deg, #d6fbff, #89ceff); }
.dj-start.ist-zweitrangig { min-height: 46px; font-size: 15px; color: #d5eaff; background: rgba(20, 33, 54, .8); border-color: #4a7396; box-shadow: none; }
.dj-start.ist-zweitrangig:hover { background: #203653; border-color: #7fb4e0; color: #fff; }
.doodle-jump.hat-eintrag .dj-hero-art, .doodle-jump.hat-eintrag .dj-menu-hint, .doodle-jump.hat-eintrag .dj-goal { display: none; }
.dj-menu-hint { margin: 12px 0 0 !important; font-size: 12px; color: #96abc5; }
.dj-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 20px; padding: 15px 0; border-block: 1px solid rgba(89, 128, 174, .22); }
.dj-result strong { display: block; font-size: 22px; font-weight: 650; color: #e5f4ff; font-variant-numeric: tabular-nums; }
.dj-result span { display: block; font-size: 12px; color: #9aaec9; }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-hero-art { height: 150px; }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-hero-art img { width: 154px; height: 154px; }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-orbit-ring { top: 95px; width: 130px; height: 130px; }
.doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-menu-title { font-size: 34px; letter-spacing: -1.2px; }
.dj-slider {
  /* --dj-pos: 0 = ganz links, 1 = ganz rechts (setzt springt.js). --dj-halb = halbe Leistenhöhe,
     so weit bleibt die Knopfmitte vom Rand weg; springt.js rechnet mit derselben Größe. */
  --dj-pos: .5; --dj-halb: 29px; --dj-knopf: 50px;
  --dj-x: calc(var(--dj-halb) + (100% - 2 * var(--dj-halb)) * var(--dj-pos));
  position: relative; height: calc(2 * var(--dj-halb)); margin-top: 14px; border-radius: 999px;
  border: 1px solid #2f4a68;
  background:
    radial-gradient(110px 70px at var(--dj-x) 50%, rgba(80, 190, 255, .24), transparent 70%),
    linear-gradient(180deg, #0a1526, #142840);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .5), 0 3px 0 #08131f, 0 0 0 4px rgba(101, 209, 255, .07);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s;
}
.doodle-jump[data-state="playing"] .dj-slider { touch-action: none; cursor: grab; }
.dj-slider.is-held { cursor: grabbing; border-color: #4fa9dd; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .5), 0 3px 0 #08131f, 0 0 0 4px rgba(101, 209, 255, .16); }
/* Schiene: gestrichelte Leuchtlinie wie die Plattformen */
.dj-slider-schiene {
  position: absolute; left: var(--dj-halb); right: var(--dj-halb); top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(101, 209, 255, .32) 0 5px, transparent 5px 14px);
}
/* Pfeile an beiden Enden, die nach außen laufen: zeigt, dass man schieben kann */
.dj-slider-pfeile { position: absolute; top: 50%; display: flex; gap: 1px; translate: 0 -50%; transition: opacity .25s; pointer-events: none; }
.dj-slider-pfeile--links { left: 17px; }
.dj-slider-pfeile--rechts { right: 17px; }
.dj-slider-pfeile i { width: 12px; height: 12px; display: grid; place-items: center; opacity: .18; animation: dj-pfeil 1.5s ease-in-out infinite; }
.dj-slider-pfeile i::before { content: ""; width: 7px; height: 7px; border-top: 2.5px solid #65d1ff; border-left: 2.5px solid #65d1ff; rotate: -45deg; translate: 2px 0; }
.dj-slider-pfeile--rechts i::before { rotate: 135deg; translate: -2px 0; }
.dj-slider-pfeile--links i:nth-child(3), .dj-slider-pfeile--rechts i:nth-child(1) { animation-delay: 0s; }
.dj-slider-pfeile--links i:nth-child(2), .dj-slider-pfeile--rechts i:nth-child(2) { animation-delay: .2s; }
.dj-slider-pfeile--links i:nth-child(1), .dj-slider-pfeile--rechts i:nth-child(3) { animation-delay: .4s; }
@keyframes dj-pfeil { 0%, 100% { opacity: .18; } 35% { opacity: .95; } }
.dj-slider.is-held .dj-slider-pfeile { opacity: .25; }
/* Der Knopf: KÜNIs Kopf in einer leuchtenden Kapsel */
.dj-slider-knopf {
  position: absolute; z-index: 1; top: 50%; left: var(--dj-x);
  width: var(--dj-knopf); height: var(--dj-knopf); margin: calc(var(--dj-knopf) / -2) 0 0 calc(var(--dj-knopf) / -2);
  display: grid; place-items: center; overflow: hidden; border-radius: 50%; pointer-events: none;
  border: 2px solid #65d1ff;
  background: radial-gradient(circle at 35% 28%, #2c5f8e, #0f2139 72%);
  box-shadow: 0 0 0 4px rgba(101, 209, 255, .14), 0 0 20px rgba(101, 209, 255, .55), inset 0 -4px 8px rgba(0, 0, 0, .45);
  transition: scale .15s, box-shadow .2s;
}
.dj-slider-knopf img { width: 128%; max-width: none; height: auto; translate: 0 6%; }
.dj-slider.is-held .dj-slider-knopf { scale: 1.1; box-shadow: 0 0 0 5px rgba(101, 209, 255, .22), 0 0 28px rgba(101, 209, 255, .8), inset 0 -4px 8px rgba(0, 0, 0, .45); }
/* Solange nicht gespielt wird, pendelt der Knopf und zeigt so, wie gelenkt wird */
.doodle-jump:not([data-state="playing"]) .dj-slider-knopf { animation: dj-schieben 3.4s ease-in-out infinite; }
@keyframes dj-schieben { 0%, 100% { translate: 0 0; } 25% { translate: -58px 0; } 75% { translate: 58px 0; } }
.dj-slider-hilfe { margin-top: 8px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--text-leise); }
@media (prefers-reduced-motion: reduce) {
  .dj-slider-pfeile i, .doodle-jump:not([data-state="playing"]) .dj-slider-knopf { animation: none; }
  .dj-slider-pfeile i { opacity: .6; }
}
.dj-touch-help { display: none; }
.dj-console .spiel-legende { margin-top: 14px; }   /* Grundstil in styles.css, gleich wie bei KÜNI rennt */
.dj-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; }
.dj-art-fallback { font: bold 72px var(--schrift-titel); color: #65d1ff; text-shadow: 0 0 20px #1b99fe; }
.dj-no-js { padding: 16px; color: #ffdc9e; }

/* ---------- Schmale und niedrige Bildschirme ---------- */
@media (min-width: 801px) and (max-height: 880px) {
  .dj-console { --dj-board-width: min(420px, calc((100svh - 190px) * .65625)); }
  .dj-hero-art { height: 180px; }
  .dj-hero-art img { width: 188px; height: 188px; }
  .dj-orbit-ring { top: 125px; width: 145px; height: 145px; }
  .dj-menu-title { font-size: 34px; }
  .dj-overlay { padding: 70px 22px 18px; }
  .dj-menu-copy { font-size: 13px; margin: 9px 0 15px !important; }
}
@media (max-width: 800px) {
  .dj-layout { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .dj-story { display: none; }
  .dj-console { --dj-board-width: min(420px, calc((100svh - 230px) * .65625)); }
  .dj-console-bar { margin-bottom: 8px; }
  .dj-hero-art { height: clamp(150px, 24svh, 230px); }
  .dj-hero-art img { width: clamp(160px, 25svh, 240px); height: clamp(160px, 25svh, 240px); }
  .dj-orbit-ring { top: 70%; width: 65%; height: 70%; }
  .dj-overlay { padding: 66px 24px 18px; }
  .dj-menu-title { font-size: clamp(30px, 5.5svh, 42px); }
  .dj-menu-copy { font-size: 14px; margin: 11px 0 15px !important; }
  .dj-start { min-height: 49px; }
  .dj-hud { padding: 17px 17px 12px; }
  .dj-height strong { font-size: 28px; }
  .dj-goal { top: 78px; left: 18px; right: 18px; }
  .dj-slider { margin-top: 12px; }
  .dj-console .spiel-legende { margin-top: 11px; }
}
@media (pointer: coarse) { .dj-touch-help { display: block; } .dj-desktop-help { display: none; } }
@media (max-height: 700px) and (max-width: 800px) {
  .dj-console { --dj-board-width: min(380px, calc((100svh - 190px) * .65625)); }
  .dj-hero-art { height: 120px; }
  .dj-hero-art img { width: 130px; height: 130px; }
  .dj-menu-kicker { display: none; }
  .dj-menu-title { font-size: 28px; }
  .dj-menu-copy { font-size: 13px; margin: 7px 0 11px !important; }
  .dj-start { min-height: 44px; font-size: 15px; }
  .dj-energy { width: 96px; }
  .dj-slider { --dj-halb: 26px; --dj-knopf: 44px; margin-top: 8px; }
  .dj-slider-hilfe { margin-top: 5px; font-size: 12px; }
  .doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-hero-art { display: none; }
  .doodle-jump:is([data-state="over"], [data-state="paused"]) .dj-menu-title { font-size: 27px; line-height: 1.06; }
  .doodle-jump[data-state="over"] .dj-result { padding: 10px 0; margin-bottom: 12px; gap: 7px; }
  .doodle-jump[data-state="over"] .dj-result strong { font-size: 19px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .dj-console { --dj-board-width: 320px; }
  .dj-overlay { padding: 30px 14px 10px; }
  .dj-hero-art { height: 90px; }
  .dj-hero-art img { height: 95px; width: 95px; }
  .dj-menu-hint, .dj-menu-kicker { display: none; }
  .dj-menu-copy { margin: 8px 0 12px !important; }
  .dj-menu-title { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .doodle-jump * { transition: none !important; animation: none !important; } }