/* UhrRPG: ein Tag in der Stadt, erzählt in Postkarten. Mobil zuerst, Stufen 640 und 1024px.
   Jede Stunde hat ihren eigenen Grund (harte Farbstufen wie die Lichtstimmungen im Spiel), getrennt
   durch eine Pixel-Dachkante. Galmuri ist die Schrift des Spiels und steht nur in Uhr, Poststempel,
   Sprechblasen und Spiel-Etiketten; Lesetext bleibt Manrope. */
@font-face {
  font-family: Galmuri;
  src: url("/fonts/galmuri11-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.uhrrpg-page {
  --font-game: Galmuri, var(--font-display);
  --fs-game: 1.375rem;          /* Galmuri auf seinem 11-px-Raster (×2) */
  --paper: #fffaf0;
  --paper-ink: #1c3331;
  --paper-ink-2: #4a4136;
  --paper-mark: #8b421e;
  --card-shadow: #1c333159;
  --ink-edge: var(--image-label);
  --panorama-position: center 62%;
}
:root[data-theme="dark"] .uhrrpg-page {
  --paper: #f1e8d6;
  --card-shadow: #0009;
}
.uhrrpg-page main.rpg-main { width: 100%; max-width: none; margin: 0; padding: 0; }
.uhrrpg-page ::selection { background: var(--signal-amber); color: var(--image-label); }
.rpg-wrap { width: min(var(--layout-max), calc(100% - var(--layout-gutter) * 2)); margin-inline: auto; }
.px-icon { width: 18px; height: 18px; fill: currentColor; shape-rendering: crispEdges; flex: none; }
.uhrrpg-page img { image-rendering: pixelated; }
/* Aufnahmen werden frei skaliert (srcset bis 4 Bildpunkte je Spielpixel): weich verkleinern statt Zeilen zu verwerfen. */
.uhrrpg-page :is(.panorama-day, .day-window-scenes, .postcard-front, .device-shot) img { image-rendering: auto; }
:root[data-theme="dark"] .panorama--uhrrpg .panorama-day { filter: saturate(.8) brightness(.62) hue-rotate(-8deg); }

/* ---------- Gründe nach Tageszeit ---------- */
.ground {
  --ground: var(--surface);
  --ink: var(--text);
  --ink-2: var(--text-secondary);
  --line: var(--separator);
  --focus-ring: var(--focus);
  position: relative;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
}
.ground--dawn { --ground: #f6e5e2; --ink: #33232a; --ink-2: #5a4249; --line: #d9bfc0; }
.ground--morning { --ground: #f8f3e9; --ink: #2d2a22; --ink-2: #514a3c; --line: #dcd2bd; }
.ground--late { --ground: #f3ead6; --ink: #30291c; --ink-2: #54493a; --line: #d8caa9; }
.ground--noon { --ground: #fdfaf2; --ink: #1e332c; --ink-2: #3b4d42; --line: #d9d6c6; }
.ground--afternoon { --ground: #f0dfbf; --ink: #3a2814; --ink-2: #5e4528; --line: #d2b98c; }
.ground--rain { --ground: #d6dde2; --ink: #1d2a31; --ink-2: #3a4a53; --line: #a9b6bf; }
.ground--dusk { --ground: #3d2f52; --ink: #f6eefb; --ink-2: #d8c9e4; --line: #66568a; --focus-ring: var(--signal-amber); --card-shadow: #0008; }
.ground--night { --ground: #1a2140; --ink: #eef1fb; --ink-2: #c3cae6; --line: #3c4675; --focus-ring: var(--signal-amber); --card-shadow: #000a; }
.ground--elsewhere { --ground: #173436; --ink: #eaf5f2; --ink-2: #bcd6d1; --line: #2f5b5c; --focus-ring: var(--signal-amber); --card-shadow: #000a; }
.ground--winter { --ground: #e8eef5; --ink: #1c2a3a; --ink-2: #3e4d5e; --line: #b8c6d6; }
:root[data-theme="dark"] .ground--dawn { --ground: #2a1f25; --ink: #f5e6ea; --ink-2: #d5bfc6; --line: #4a3640; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--morning { --ground: #1d1f1d; --ink: #f1ece0; --ink-2: #cdc5b3; --line: #3c3a33; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--late { --ground: #23201a; --ink: #f3ead6; --ink-2: #d1c6ad; --line: #474030; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--noon { --ground: #141c22; --ink: #eef2f5; --ink-2: #bcc9d4; --line: #34475a; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--afternoon { --ground: #2b2216; --ink: #f6e6c8; --ink-2: #d9c39b; --line: #54432b; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--rain { --ground: #18222a; --ink: #e3ecf1; --ink-2: #b1c1cb; --line: #34444f; --focus-ring: var(--signal-amber); }
:root[data-theme="dark"] .ground--dusk { --ground: #261d35; }
:root[data-theme="dark"] .ground--night { --ground: #0f1429; }
:root[data-theme="dark"] .ground--elsewhere { --ground: #0f2425; }
:root[data-theme="dark"] .ground--winter { --ground: #182230; --ink: #e6eef7; --ink-2: #b9c7d6; --line: #33445a; --focus-ring: var(--signal-amber); }

/* Dachkante: der neue Grund steigt als Pixel-Dachlinie in den vorigen. */
.hour::before, .devices::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -15px;
  height: 16px;
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 8h8v-4h8v4h12v8H0zM28 12h12v4H28zM40 0h4v4h12v12H40zM56 6h16v10H56zM72 10h12v6H72zM84 4h4v-4h4v4h4v12H84z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M0 8h8v-4h8v4h12v8H0zM28 12h12v4H28zM40 0h4v4h12v12H40zM56 6h16v10H56zM72 10h12v6H72zM84 4h4v-4h4v4h4v12H84z'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 16px;
  pointer-events: none;
}
.ground :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.ground a:not([class]) { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Eröffnung ---------- */
.rpg-hero { padding-block: 2rem var(--section); }
.rpg-hero-grid { display: grid; gap: 2rem; align-items: center; }
.rpg-wordmark { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.rpg-icon { width: 56px; height: 56px; border-radius: 13px; image-rendering: auto !important; box-shadow: 0 2px 6px #1c333140; }
.rpg-icon--night { display: none; }
:root[data-theme="dark"] .rpg-icon--day { display: none; }
:root[data-theme="dark"] .rpg-icon--night { display: block; }
.rpg-name { font: 800 var(--fs-h3)/1.2 var(--font-ui); }
.rpg-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: .1rem .55rem;
  background: var(--warm-tint); color: var(--warm-text); font: 750 var(--fs-small)/1.3 var(--font-ui);
}
.rpg-hero h1 {
  margin: 1.25rem 0 1rem;
  font: 500 var(--fs-title)/1.1 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.rpg-hero h1 span { display: inline-block; }
.rpg-hero h1 span + span { color: var(--warm-text); }
.rpg-lead { margin: 0; max-width: 54ch; font-size: var(--fs-lead); line-height: 1.6; }
.rpg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.rpg-button {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.2rem;
  background: var(--action); color: var(--on-action); border: 2px solid var(--action);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  font: 750 1rem/1.2 var(--font-ui); text-decoration: none;
}
@media (hover: hover) {
  .rpg-button:hover { background: var(--action-hover); border-color: var(--action-hover); }
}
.rpg-note { margin: 1rem 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.rpg-source { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); max-width: none; }

/* Tagesfenster: die echte Szene, eine Uhr, sechs Stimmungen. */
.day-window { margin: 0; min-width: 0; }
.day-window-frame { border: 3px solid var(--ink-edge); background: var(--ink-edge); box-shadow: 6px 6px 0 var(--pixel-shadow); }
.day-window-scenes { position: relative; aspect-ratio: 852 / 393; overflow: hidden; background: #2b2a33; }
.day-window-scenes img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.day-window-scenes img.is-current { opacity: 1; z-index: 2; }
.day-window-scenes img.is-prev { opacity: 1; z-index: 1; }
.day-window-place {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .35rem .75rem .45rem;
  font: 400 var(--fs-game)/1.2 var(--font-game); color: var(--on-image);
}
.day-dial { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.day-dial button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: .4rem .5rem;
  background: var(--surface-card); color: var(--text); border: 2px solid var(--control-border);
  font: 400 1.375rem/1 var(--font-game); cursor: pointer;
}
.day-dial button[aria-checked="true"] { background: var(--on-image); color: var(--image-label); border-color: var(--image-label); box-shadow: 3px 3px 0 var(--image-label); }
:root[data-theme="dark"] .day-dial button[aria-checked="true"] { box-shadow: 3px 3px 0 var(--accent-text); }
.day-window figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-top: .75rem; }
.day-window-caption { flex: 1 1 18rem; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); min-height: 3em; }

/* ---------- Stunden ---------- */
.hour { padding-block: calc(var(--section) - .5rem) var(--section); }
.hour-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem 1rem; align-items: center; margin-bottom: 2rem; }
.hour-clock {
  margin: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 3rem; padding: .35rem .65rem .45rem;
  background: var(--on-image); color: var(--image-label); border: 3px solid var(--image-label); box-shadow: 4px 4px 0 var(--card-shadow);
  font: 400 var(--fs-game)/1 var(--font-game); font-variant-numeric: tabular-nums;
}
.hour-head h2 { margin: 0; font: 800 var(--fs-h2)/1.15 var(--font-ui); letter-spacing: -.035em; text-wrap: balance; }
.hour-intro { grid-column: 1 / -1; margin: 0; max-width: 62ch; font-size: var(--fs-lead); line-height: 1.6; }
.hour-body { display: grid; gap: 2rem; margin-top: 2.5rem; }
.hour-body + .postcards, .inventory + .postcards { margin-top: 3rem; }
.hour-head + .hour-body { margin-top: 0; }
.hour-text { max-width: 62ch; }
.hour-text h3 { margin: 1.75rem 0 .4rem; font: 800 var(--fs-h3)/1.3 var(--font-ui); letter-spacing: -.02em; }
.hour-text h3:first-child { margin-top: 0; }
.hour-text p { margin: 0; line-height: 1.65; }
.hour-text p + p { margin-top: .75rem; }

/* Kleiderschrank: Zahlen als Spiel-Etiketten. */
.wardrobe { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; padding: 0; }
.wardrobe li { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .75rem; border: 2px solid var(--line); background: color-mix(in srgb, var(--ground) 70%, #fff 30%); }
:root[data-theme="dark"] .wardrobe li { background: color-mix(in srgb, var(--ground) 82%, #fff 18%); }
.wardrobe strong { font: 400 var(--fs-game)/1 var(--font-game); }

/* Kartenlegende: Kästchen wie auf der Weltkarte im Spiel. */
.legend { display: grid; gap: 1.25rem 2rem; margin: 0 0 2.5rem; }
.legend > div { position: relative; padding-left: 1.75rem; }
.legend > div::before { content: ""; position: absolute; left: 0; top: .35rem; width: 12px; height: 12px; background: var(--ink); box-shadow: 3px 3px 0 var(--line); }
.legend > div:nth-child(2)::before { background: #c9a27e; }
.legend > div:nth-child(3)::before { background: #79b46a; }
.legend > div:nth-child(4)::before { background: #d6455d; }
.legend dt { font: 800 var(--fs-h3)/1.3 var(--font-ui); }
.legend dd { margin: .3rem 0 0; line-height: 1.6; color: var(--ink-2); }

/* ---------- Postkarten ---------- */
.postcards {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 30rem); gap: 1.25rem;
  margin-inline: calc(var(--layout-gutter) * -1); padding: .5rem var(--layout-gutter) 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-gutter);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.postcards--portrait { grid-auto-columns: min(62%, 15rem); }
.postcard { display: grid; align-self: start; align-content: start; justify-items: start; gap: .6rem; scroll-snap-align: start; min-width: 0; perspective: 1400px; }
.postcard-card { display: grid; width: 100%; }
.postcard-front, .postcard-back {
  margin: 0; min-width: 0;
  background: var(--paper); color: var(--paper-ink);
  border: 2px solid var(--ink-edge); box-shadow: 5px 5px 0 var(--card-shadow);
}
.postcard-front { display: flex; flex-direction: column; padding: 8px 8px 0; }
.postcard-front img { display: block; width: 100%; height: auto; border: 2px solid var(--ink-edge); }
/* Ist die Rückseite höher als die Vorderseite, füllt das Bild die Karte (Mitte bzw. Oberkante bleibt sichtbar). */
.rpg-js .postcard-front img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
.rpg-js .postcards--portrait .postcard-front img { object-position: top; }
.postcard-front figcaption { margin-top: auto; padding: .45rem .2rem .55rem; font: 400 var(--fs-game)/1.2 var(--font-game); }
.postcard-back {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark stamp" "title title" "text text";
  align-content: start; gap: .5rem .75rem; padding: 1rem 1rem 1.25rem;
}
.postcard-stamp {
  grid-area: stamp; width: 56px; height: 56px; padding: 8px; box-sizing: border-box;
  background: #f6e2b8; outline: 2px dashed #b0874f; outline-offset: -5px; border: 3px solid #f6e2b8;
}
.postcard-mark {
  grid-area: mark; align-self: center; justify-self: start; margin: 0; padding: .1rem .4rem;
  font: 400 1.0625rem/1.3 var(--font-game); color: var(--paper-mark);
  border-block: 2px solid currentColor; transform: rotate(-3deg);
}
.postcard-mark time:not(:empty)::before { content: "· "; }
/* Ortszeit-Stempel auf der Vorderseite (Städte anderswo). */
.postcard-front { position: relative; }
.postcard-cancel {
  position: absolute; bottom: 8px; right: 12px; margin: 0; padding: .2rem .55rem .3rem;
  background: var(--paper); color: var(--paper-mark); border: 2px solid currentColor; box-shadow: 0 0 0 3px var(--paper);
  font: 400 var(--fs-game)/1.1 var(--font-game); font-variant-numeric: tabular-nums; transform: rotate(-4deg);
}
.postcard-cancel:has(time:empty) { display: none; }
.postcard-back h3 { grid-area: title; margin: .25rem 0 0; font: 800 1.125rem/1.35 var(--font-ui); letter-spacing: -.015em; }
.postcard-back p:not(.postcard-mark) { grid-area: text; margin: 0; font-size: 1rem; line-height: 1.6; color: var(--paper-ink-2); }
.postcard-turn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .2rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font: 750 1rem/1.2 var(--font-ui); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.postcard-turn[aria-pressed="true"] .ua-icon { transform: scaleX(-1); }
/* Ohne Skript stehen Vorder- und Rückseite untereinander. Mit Skript dreht sich die Karte. */
.rpg-js .postcard-front, .rpg-js .postcard-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rpg-js .postcard-card {
  --turn: 0deg;
  transform: rotateY(var(--turn));
  transform-style: preserve-3d; cursor: pointer;
  transition: transform .75s cubic-bezier(.16, .84, .24, 1);
}
.rpg-js .postcard-back { transform: rotateY(180deg); }
.rpg-js .postcard[data-turned] .postcard-card { --turn: 180deg; }
.postcard-card:not(:has(.postcard-back)) { cursor: auto; }
html:not(.rpg-js) .postcard-back { margin-top: -2px; box-shadow: 5px 5px 0 var(--card-shadow); }

/* ---------- Aufträge ---------- */
.missions {
  list-style: none; counter-reset: mission; margin: 0; padding: .5rem 0;
  background: #2a221d; color: #f6ead4; border: 3px solid #120d0b; box-shadow: 6px 6px 0 var(--card-shadow);
}
.missions li { counter-increment: mission; display: grid; grid-template-columns: auto 32px minmax(0, 1fr); gap: .25rem .75rem; align-items: start; padding: .9rem 1rem; }
.missions li + li { border-top: 1px solid #4a3d33; }
.missions li::before { content: counter(mission); font: 400 var(--fs-game)/1.2 var(--font-game); color: #e8b864; min-width: 1.2ch; }
.missions img { width: 32px; height: 32px; margin-top: .1rem; }
.missions h3 { margin: 0; font: 400 var(--fs-game)/1.2 var(--font-game); }
.missions p { margin: .3rem 0 0; color: #ddcdb2; line-height: 1.55; }
.duck-score[hidden] { display: none; }
.duck-score { margin-top: 1rem !important; padding: .5rem .75rem; display: inline-block; background: var(--on-image); color: var(--image-label); border: 2px solid var(--image-label); font: 400 var(--fs-game)/1.2 var(--font-game); }

/* ---------- Gegenstände ---------- */
.inventory { margin-bottom: 2.5rem; }
.inventory-bar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem; margin-bottom: 1rem; width: fit-content; max-width: 100%; background: #2a221d; border: 3px solid #120d0b; box-shadow: 5px 5px 0 var(--card-shadow); }
.inventory-bar button {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  background: #3d322b; border: 2px solid #5b4b3f; cursor: pointer;
}
.inventory-bar button img { width: 32px; height: 32px; }
.inventory-bar button[aria-checked="true"] { background: #f6ead4; border-color: #f6ead4; box-shadow: inset 0 0 0 2px #2a221d; }
.inventory-bar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inventory-bar :focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 2px; }
.inventory-list { display: grid; gap: 1rem 2rem; margin: 0; }
.inventory-list > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "icon name" "icon price" ". text"; gap: .1rem 1rem; }
.inventory-list dt { display: contents; }
.inventory-list dt img { grid-area: icon; width: 48px; height: 48px; }
.inventory-list dt span { grid-area: name; font: 400 var(--fs-game)/1.2 var(--font-game); }
.inventory-list dd { margin: 0; grid-area: text; line-height: 1.6; }
.inventory-list dd.price { grid-area: price; font-weight: 750; color: var(--ink-2); }
.rpg-js .inventory-list > div {
  max-width: 34rem; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; padding: 1rem 1.1rem 1.2rem;
  background: var(--paper); color: var(--paper-ink); border: 2px solid var(--ink-edge); box-shadow: 5px 5px 0 var(--card-shadow);
}
.rpg-js .inventory-list dt img { width: 56px; height: 56px; }
@media (min-width: 640px) {
  .rpg-js .inventory-list dt img { width: 72px; height: 72px; }
  .rpg-js .inventory-list dt span { font-size: 2.0625rem; }
}
.rpg-js .inventory-list dd.price { color: var(--paper-mark); }
.rpg-js .inventory-list dd:not(.price) { font-size: var(--fs-lead); color: var(--paper-ink-2); }

/* ---------- Sprechblasen ---------- */
.bubbles { list-style: none; display: flex; flex-wrap: wrap; align-content: start; gap: 1.5rem 1rem; margin: 0; padding: 0 0 1rem; }
.bubbles li {
  position: relative; padding: .45rem .75rem .55rem; background: var(--on-image); color: var(--image-label);
  border: 2px solid var(--image-label); font: 400 1.0625rem/1.3 var(--font-game);
}
.bubbles li::after {
  content: ""; position: absolute; left: 1rem; bottom: -10px; width: 12px; height: 10px; background: var(--image-label);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 66% 20%, 66% 60%, 33% 60%, 33% 100%, 0 100%);
}
.bubbles li:nth-child(3n + 2) { transform: translateY(.5rem); }
.bubbles li:nth-child(4n + 3)::after { left: auto; right: 1rem; transform: scaleX(-1); }
.bubbles .bubble--think { border-style: dashed; }

/* ---------- Fahndung ---------- */
.wanted { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--line); }
.wanted li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 2px solid var(--line); }
.wanted-stars { display: flex; gap: 4px; padding-top: .25rem; }
.wanted-stars svg { width: 27px; height: 27px; fill: var(--signal-amber); shape-rendering: crispEdges; filter: drop-shadow(2px 2px 0 #0007); }
.wanted h3 { margin: 0; font: 800 var(--fs-h3)/1.3 var(--font-ui); }
.wanted p { margin: .25rem 0 0; color: var(--ink-2); line-height: 1.55; }
.speech { margin: .75rem 0; padding: .6rem .85rem .7rem; width: fit-content; max-width: 100%; background: var(--on-image); color: var(--image-label); border: 2px solid #000; font: 400 var(--fs-game)/1.3 var(--font-game); }

/* ---------- Radio ---------- */
.radio { list-style: none; margin: 0; padding: .75rem; display: grid; gap: .5rem; background: #2a221d; border: 3px solid #120d0b; box-shadow: 6px 6px 0 var(--card-shadow); color: #f6ead4; align-self: start; }
.radio li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; padding: .65rem .85rem; background: #3d322b; }
.radio li::after { content: ""; grid-row: 1 / 3; grid-column: 2; width: 34px; height: 18px; background: #6a5a4d linear-gradient(#f6ead4, #f6ead4) 4px 50% / 10px 10px no-repeat; }
.radio li:last-child::after { background: #d83a2a linear-gradient(#f6ead4, #f6ead4) calc(100% - 4px) 50% / 10px 10px no-repeat; }
.radio h3 { margin: 0; font: 400 var(--fs-game)/1.2 var(--font-game); }
.radio p { margin: .15rem 0 0; color: #ddcdb2; font-size: var(--fs-small); }

/* Uhr für die Städte anderswo */
.hour-clock--globe { font-size: 1.0625rem; }

/* ---------- Geräte ---------- */
.devices { padding-block: var(--section) 0; }
.devices-grid { display: grid; gap: 2rem; align-items: start; }
.device-shot { margin: 0; }
.device-shot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink-edge); box-shadow: 5px 5px 0 var(--pixel-shadow); }
.device-shot--duo img { max-width: 18rem; }
.device-shot figcaption { margin-top: .6rem; font: 750 var(--fs-small)/1.4 var(--font-ui); color: var(--ink-2); }
.legend--compact { margin: 0; }

/* ---------- Abschluss ---------- */
.rpg-closing { width: min(var(--layout-max), calc(100% - var(--layout-gutter) * 2)); margin-inline: auto; box-sizing: border-box; }
.rpg-closing h2 span { display: block; }
.rpg-closing-icon { width: 96px; height: 96px; border-radius: 22px; image-rendering: auto !important; box-shadow: 0 6px 18px #0006; }
.rpg-closing-status {
  display: inline-flex; align-items: center; gap: .6rem; margin: 1.5rem auto 0 !important; padding: .55rem .9rem;
  border: 2px dashed var(--on-image); color: var(--on-image) !important; font: 400 var(--fs-game)/1.2 var(--font-game) !important;
}
.rpg-closing-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.75rem 0 1rem; padding: 0; }
.rpg-closing-links a {
  display: inline-flex; align-items: center; min-height: 48px; padding: .5rem 1rem; background: var(--on-image); color: var(--image-label);
  border: 2px solid var(--on-image); box-shadow: 3px 3px 0 #0f1f1b; font-weight: 750; text-decoration: none; line-height: 1.3;
}
@media (hover: hover) { .rpg-closing-links a:hover { background: var(--signal-amber); border-color: var(--signal-amber); } }
.rpg-closing a:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 3px; }
.rpg-closing .closing-band-note a { color: inherit; }

/* ---------- Gummienten ---------- */
.duck {
  position: absolute; z-index: 2; top: -42px; left: var(--duck-x, 50%);
  width: 44px; height: 44px; padding: 6px; margin-left: -22px;
  background: none; border: 0; cursor: pointer;
}
.duck img { width: 32px; height: 32px; display: block; }
.duck[data-found] { cursor: default; }
.duck[data-found] img { opacity: .4; filter: grayscale(.6); }
.duck.is-squeaking img { animation: duck-hop .5s steps(4, end); }
@keyframes duck-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-14px) scaleX(-1); } 70% { transform: translateY(-4px) scaleX(-1); } 100% { transform: translateY(0); } }
.duck:focus-visible { outline: 3px solid var(--focus-ring, var(--focus)); outline-offset: 0; }

/* ---------- Tagesuhr (HUD unten links) ---------- */
.day-hud { position: fixed; z-index: calc(var(--layer-header) - 2); left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
.day-hud summary {
  display: flex; align-items: center; gap: .5rem; min-height: 48px; padding: .3rem .75rem .3rem .6rem; list-style: none; cursor: pointer;
  background: var(--on-image); color: var(--image-label); border: 3px solid var(--image-label); box-shadow: 3px 3px 0 #1c333180;
  font: 400 var(--fs-game)/1 var(--font-game); font-variant-numeric: tabular-nums;
}
.day-hud summary::-webkit-details-marker { display: none; }
.day-hud summary:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 2px; }
.day-hud-sky svg { width: 22px; height: 22px; display: block; fill: currentColor; shape-rendering: crispEdges; }
.day-hud-ducks { display: inline-flex; align-items: center; gap: .3rem; padding-left: .5rem; border-left: 2px solid #1c333140; font-size: 1.0625rem; }
.day-hud-ducks img { width: 20px; height: 20px; }
.day-hud ol {
  list-style: none; position: absolute; left: 0; bottom: calc(100% + 8px); margin: 0; padding: .35rem;
  width: max-content; max-width: calc(100vw - 24px); max-height: min(70vh, 34rem); overflow: auto;
  background: var(--on-image); border: 3px solid var(--image-label); box-shadow: var(--shadow-menu);
}
.day-hud a { display: grid; grid-template-columns: 5.5rem auto; align-items: center; min-height: 44px; padding: .2rem .6rem; color: var(--image-label); text-decoration: none; font-weight: 750; }
.day-hud a span:first-child { font: 400 1.0625rem/1 var(--font-game); }
.day-hud a[aria-current="true"] { background: var(--image-label); color: var(--on-image); }
.day-hud a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) { .day-hud a:hover { background: #e5cf9f; } .day-hud a[aria-current="true"]:hover { background: var(--image-label); } }

/* Auf dem Telefon ist die Rückseite höher als das Bild: das Bild füllt dann die Vorderseite (Mitte bleibt). */
@media (max-width: 639px) {
  .rpg-hero { padding-top: 1.5rem; }
  .rpg-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .rpg-hero-copy { display: contents; }
  .rpg-hero h1 { margin: 1rem 0 .75rem; }
  .rpg-hero .day-window { order: 1; margin-top: 1.5rem; }
  .rpg-actions { order: 2; }
  .rpg-note { order: 3; }
  .wanted li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .postcard-back { padding: .85rem .85rem 1rem; gap: .4rem .6rem; }
  .postcard-back p:not(.postcard-mark) { font-size: .9375rem; line-height: 1.55; }
  .postcard-back h3 { font-size: 1.0625rem; }
}

/* ---------- Stufe M ---------- */
@media (min-width: 640px) {
  /* Rückseite wie eine echte Postkarte: Text links, rechts Marke, Stempel und Adresszeilen hinter einem Trennstrich. */
  .postcards:not(.postcards--portrait) .postcard-back {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 2.5rem; padding: 1.25rem 1.5rem 1.5rem;
    grid-template-areas: "title stamp" "text mark" "text addr"; grid-template-rows: auto auto 1fr;
    background-image: linear-gradient(to right, transparent calc(60% + .25rem), #1c333140 calc(60% + .25rem), #1c333140 calc(60% + .25rem + 2px), transparent calc(60% + .25rem + 2px));
    background-size: 100% calc(100% - 2.5rem); background-position: 0 1.25rem; background-repeat: no-repeat;
  }
  .postcards:not(.postcards--portrait) .postcard-stamp { justify-self: end; }
  .postcards:not(.postcards--portrait) .postcard-back h3 { margin-top: 0; align-self: center; }
  .postcards:not(.postcards--portrait) .postcard-back::after {
    content: ""; grid-area: addr; align-self: end; height: 6rem;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 2px), #1c333159 calc(2rem - 2px) 2rem);
  }
  /* Wie ausgelegte Karten: eine große, eine kleinere, etwas tiefer. */
  .postcards:not(.postcards--portrait) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .postcards:not(.postcards--portrait) > .postcard:nth-child(even) { margin-top: 3rem; }
  .postcards--four > .postcard:nth-child(3) { margin-top: -1rem; }
  .rpg-hero { padding-top: 2.5rem; }
  .wardrobe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postcards { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; margin-inline: 0; padding: 0; overflow: visible; gap: 2rem 1.75rem; }
  .postcards--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hour-clock { font-size: 2.0625rem; min-height: 3.75rem; min-width: 7rem; }
  .hour-clock--globe { font-size: var(--fs-game); }
  .inventory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .devices-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .devices-grid .legend--compact { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Stufe L ---------- */
@media (min-width: 1024px) {
  .rpg-hero { padding-top: 3.5rem; }
  .rpg-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
  .day-dial { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hour-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; }
  .hour-intro { grid-column: 2; }
  .hour-body--split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
  .hour-body--split > .postcards--portrait { order: 2; }
  .hour-body--split:has(> .postcards--portrait) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  .hour-body--missions { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .postcards--portrait { gap: 1.5rem; }
  .inventory { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .inventory-bar { display: grid; grid-template-columns: repeat(3, 56px); margin: 0; }
  .rpg-js .inventory-list { grid-template-columns: minmax(0, 1fr); }
  .devices-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
  .devices-grid .legend--compact { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}

/* Mit Skript zeigt die Inventarliste nur den gewählten Gegenstand. */
.rpg-js .inventory-list > div[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .day-window-scenes img { transition: none; }
  .rpg-js .postcard-card { transition: none; transform: none !important; }
  .rpg-js .postcard-back { transform: none; visibility: hidden; }
  .rpg-js .postcard[data-turned] .postcard-back { visibility: visible; }
  .rpg-js .postcard[data-turned] .postcard-front { visibility: hidden; }
  .duck.is-squeaking img { animation: none; }
}
@media (forced-colors: active) {
  .hour::before { display: none; }
  .day-dial button[aria-checked="true"], .inventory-bar button[aria-checked="true"] { outline: 3px solid Highlight; }
}

/* ---------- Bewegung: verspielt, aber knapp ----------
   Ein Hauptmoment (Pixel-Blende im Tagesfenster), sonst kleine Rückmeldungen in harten Stufen wie im Spiel.
   Alles in Pixelschritten (steps) oder kurz und ohne Nachfedern. */
@keyframes rpg-fade { from { opacity: 0; } to { opacity: 1; } }
.day-window-scenes img.is-entering { animation: rpg-fade .7s cubic-bezier(.4, 0, .2, 1) both; }

@keyframes rpg-blink { 50% { opacity: 0; } }
.hour.is-now .hour-clock .colon, .day-hud-time .colon { animation: rpg-blink 1s steps(1, end) infinite; }

@keyframes rpg-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bubbles.is-waiting li { opacity: 0; }
.bubbles.is-shown li { animation: rpg-pop .3s steps(3, end) both; }
.bubbles.is-shown li:nth-child(3n + 2) { animation-name: rpg-pop-low; }
@keyframes rpg-pop-low { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: translateY(.5rem); } }
.bubbles.is-shown li:nth-child(2) { animation-delay: .09s; }
.bubbles.is-shown li:nth-child(3) { animation-delay: .18s; }
.bubbles.is-shown li:nth-child(4) { animation-delay: .27s; }
.bubbles.is-shown li:nth-child(5) { animation-delay: .36s; }
.bubbles.is-shown li:nth-child(6) { animation-delay: .45s; }
.bubbles.is-shown li:nth-child(7) { animation-delay: .54s; }
.bubbles.is-shown li:nth-child(8) { animation-delay: .63s; }

@keyframes rpg-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.5); } to { opacity: 1; transform: rotate(-3deg); } }
.rpg-js .postcard[data-turned] .postcard-mark { animation: rpg-stamp .3s steps(3, end) .45s both; }

@keyframes rpg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rpg-js .inventory-list > div.is-entering { animation: rpg-rise .22s cubic-bezier(.16, 1, .3, 1) both; }
.day-hud details[open] ol { animation: rpg-rise .16s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes rpg-hop { 50% { transform: translateY(-4px); } }
@keyframes rpg-star { 50% { opacity: .25; } }

/* Pixelknöpfe: beim Zeigen heben sie sich, beim Drücken sinken sie in die Seite. */
.rpg-button, .rpg-closing-links a, .day-hud summary, .day-dial button, .inventory-bar button {
  transition: transform .12s cubic-bezier(.16, 1, .3, 1), box-shadow .12s cubic-bezier(.16, 1, .3, 1);
}
.rpg-button:active, .rpg-closing-links a:active, .day-hud summary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 transparent; }
.day-dial button:active, .inventory-bar button:active { transform: translateY(2px); }
.postcard-turn .ua-icon { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

@media (hover: hover) {
  .rpg-button:hover, .rpg-closing-links a:hover, .day-hud summary:hover { transform: translate(-2px, -2px); }
  .rpg-button:hover { box-shadow: 5px 5px 0 var(--pixel-shadow); }
  .rpg-closing-links a:hover { box-shadow: 5px 5px 0 #0f1f1b; }
  .day-hud summary:hover { box-shadow: 5px 5px 0 #1c333180; }
  .day-dial button:hover { border-color: var(--image-label); }
  /* Unsichtbarer Rand hält den Zeiger über einem angehobenen Knopf, damit er nicht flackert. */
  .rpg-button, .rpg-closing-links a, .day-hud summary { position: relative; }
  .rpg-button::after, .rpg-closing-links a::after, .day-hud summary::after { content: ""; position: absolute; inset: -4px; }
  .day-dial button:hover .px-icon, .inventory-bar button:hover img { animation: rpg-hop .3s steps(2, end); }
  .inventory-bar button:not([aria-checked="true"]):hover { background: #4a3d33; border-color: #7a6655; }
  .postcard-turn:hover .ua-icon { transform: rotate(180deg); }
  .missions li:hover { background: #342a24; }
  .missions li:hover img { animation: rpg-hop .3s steps(2, end); }
  .wanted li:hover .wanted-stars svg { animation: rpg-star .5s steps(1, end) 2; }
  .wanted li:hover .wanted-stars svg:nth-child(2) { animation-delay: .1s; }
  .wanted li:hover .wanted-stars svg:nth-child(3) { animation-delay: .2s; }
  .bubbles li:hover { background: var(--signal-amber); }
  .radio li:hover { background: #4a3d33; }
  .duck:not([data-found]):hover img { transform: translateY(-4px); }
  .duck img { transition: transform .15s steps(2, end); }
  .rpg-closing-icon { transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
  .rpg-closing-icon:hover { transform: translateY(-4px); }
  .legend > div::before { transition: transform .15s steps(2, end); }
  .legend > div:hover::before { transform: translate(-2px, -2px); }
}

@media (prefers-reduced-motion: reduce) {
  .day-window-scenes img.is-entering, .bubbles.is-shown li, .rpg-js .postcard[data-turned] .postcard-mark,
  .rpg-js .inventory-list > div.is-entering, .day-hud details[open] ol { animation: none; }
  .hour.is-now .hour-clock .colon, .day-hud-time .colon { animation: none; }
  .bubbles.is-waiting li { opacity: 1; }
  .rpg-button, .rpg-closing-links a, .day-hud summary, .day-dial button, .inventory-bar button, .duck img, .legend > div::before { transition: none; transform: none !important; }
  .day-dial button:hover .px-icon, .inventory-bar button:hover img, .missions li:hover img, .wanted li:hover .wanted-stars svg { animation: none; }
  .postcard-turn:hover .ua-icon { transform: none; }
}