/* Döner Chef: Rückgeld-Chaos – Laden mit Sitzecke, Küche, Kammer, Theke und Straße */
/* Figuren und Geräte sind SVG-Dateien unter assets/ und leicht austauschbar. */
/* GUI-Farben: Creme, Terrakotta-Holz und Jupi-Grün – alles aus einem Guss. */

.doner-main { max-width: 1280px; margin: 0 auto; padding: 1rem; }
#doner-board { display: flex; flex-direction: column; gap: .4rem; background: #f3e9d2;
  border: 3px solid #6d4c41; border-radius: 1.2rem; padding: .5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* Board-Hauptbereich: HUD ist eine Zeile ÜBER diesem Bereich,
   darunter Aktionsleiste links + Karte rechts */
.board-body { display: flex; flex-wrap: wrap; gap: .45rem; align-items: stretch; }
.board-hud { flex: 0 0 auto; }
.side-panel { flex: 0 0 178px; display: flex; flex-direction: column; gap: .4rem;
  min-width: 0; }
.side-panel .doner-toast { flex: 0 0 auto; font-size: .84rem; }
.side-panel .service-row { flex: 1 1 auto; display: flex; flex-direction: column; }
.side-panel .service-actions { flex: 1 1 auto; display: flex; flex-direction: column;
  gap: .4rem; }
.side-panel .kitchen-help { flex-direction: column; align-items: stretch; gap: .35rem; }
.side-panel .kitchen-help button { width: 100%; justify-content: center; text-align: center; }
.side-panel .near-label { text-align: center; }
.side-panel .action-panel { flex: 1 1 auto; flex-direction: column; align-items: stretch; }

/* ---------- Laden-Ansicht: FIXE WELT ----------
   Der ganze Laden ist 1280x720 groß und wird als Ganzes mit transform:scale()
   in den verfügbaren Platz gestaucht/gestreckt (game.js fitWorld()).
   Alles darin hat feste Pixelgrößen -> Figuren & Stationen bleiben immer
   proportional zueinander, egal wie groß der Bildschirm ist. */
.shop-view { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1rem;
  border: 3px solid #5d4037; box-shadow: 0 4px 14px rgba(0,0,0,.25); background: #2b1b12; }
.world { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  transform: translate(-50%, -50%); transform-origin: center center;
  display: flex; flex-direction: column; }
.world #indoor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.world .indoor-main { flex: 1 1 auto; min-height: 0; }
.world #kitchen { height: auto; flex: 1 1 auto; min-height: 310px; }
.world .serve-counter { flex: 0 0 auto; }
.world #guest-layer { height: 140px; flex: 0 0 auto; min-height: 0; }
.world #street { flex: 0 0 auto; }

/* Vollbild: Board füllt den Schirm, die Welt skaliert per fitWorld() hinein */
#doner-board:fullscreen, #doner-board:-webkit-full-screen {
  width: 100vw; height: 100vh; max-width: none; border-radius: 0;
  padding: .4rem; overflow: auto; background: #f3e9d2;
}
#doner-board:fullscreen { display: flex; flex-direction: column; position: relative; }
/* HUD schwebt im Vollbild ÜBER der Karte (Overlay) – kostet keine Höhe,
   dadurch skaliert die Welt größer und die Seitenbalken schrumpfen */
#doner-board:fullscreen .board-hud { position: absolute; top: .35rem;
  left: calc(.4rem + 178px + .45rem); right: .35rem; z-index: 40; flex: none;
  background: rgba(255,254,249,.9); backdrop-filter: blur(4px); }
#doner-board:fullscreen .board-body { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap;
  position: relative; }
#doner-board:fullscreen .side-panel { flex: 0 0 178px; min-height: 0; overflow: hidden auto; }
#doner-board:fullscreen .shop-view { flex: 1 1 auto; min-width: 0; min-height: 0;
  aspect-ratio: auto; }

/* ---------- HUD: schlanke weiße Karten + Pill-Buttons (möglichst niedrig) ---------- */
.board-hud { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  background: linear-gradient(#fffef9, #f7efdb); border: 2px solid #c9a27a; border-radius: .7rem;
  padding: .2rem .4rem; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.hud-stat { background: #ffffff; border: 1px solid #e6dcc4; border-radius: .55rem;
  padding: .08rem .45rem; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.hud-stat label { display: block; font-size: .56rem; line-height: 1.1; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #8d6e63; }
.hud-stat span { font-weight: 800; font-size: .88rem; line-height: 1.2; color: #3e2723;
  white-space: nowrap; }
.hud-stat.money span { color: #2e7d32; }
.hud-stat.carry span { font-size: .8rem; }
/* Uhr: feste Breite, damit die Anzeige nicht zappelt, wenn sich die Zahl ändert */
#hud-clock { display: inline-block; min-width: 3.4em; text-align: center;
  font-variant-numeric: tabular-nums; }
#hud-carry { display: inline-flex; align-items: center; gap: .18rem; min-height: 20px; }
#hud-carry .food-icon { width: 20px; height: 20px; }
.hud-btns { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; margin-left: auto; }

/* Alle HUD-Knöpfe als einheitliche, schlanke Pills (überschreiben jupi_btn) */
.hud-btns button, .price-menu summary {
  font-family: inherit;
  background: linear-gradient(#ffffff, #f1ead8);
  border: 2px solid #c9a27a; border-radius: 999px; color: #4e342e;
  padding: .12rem .6rem; font-weight: 800; font-size: .74rem; line-height: 1.4; cursor: pointer;
  box-shadow: 0 1px 0 #b3834e; transition: transform .08s, box-shadow .08s, background .12s; }
.hud-btns button:hover, .price-menu summary:hover {
  background: linear-gradient(#fffdf5, #fff3d6);
  transform: translateY(-1px); box-shadow: 0 2px 0 #b3834e; }
.hud-btns button:active, .price-menu summary:active {
  transform: translateY(1px); box-shadow: 0 0 0 #b3834e; }
.hud-btns button:focus-visible, .price-menu summary:focus-visible {
  outline: 3px solid #66bb6a; outline-offset: 2px; }
/* Hauptknopf grün hervorheben */
#btn-upgrades { background: linear-gradient(#66bb6a, #43a047);
  border-color: #2e7d32; color: #fff; box-shadow: 0 1px 0 #1b5e20; }
#btn-upgrades:hover { background: linear-gradient(#74c97a, #4caf50); box-shadow: 0 2px 0 #1b5e20; }
#btn-upgrades:active { box-shadow: 0 0 0 #1b5e20; }

/* ---------- Schöne Tooltips (data-tip, erscheinen unter dem Element) ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #3e2723; color: #fff; padding: .3rem .65rem; border-radius: .55rem;
  font-size: .72rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  z-index: 60; box-shadow: 0 4px 10px rgba(0,0,0,.35); pointer-events: none; }
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  content: ""; position: absolute; top: calc(100% + 2px); left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-bottom-color: #3e2723; z-index: 60; pointer-events: none; }

/* ---------- Preis-Menü (aufklappbar, geht auch im Vollbild auf) ---------- */
.price-menu { position: relative; }
.price-menu summary { display: flex; align-items: center; justify-content: center;
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap; }
.price-menu summary::-webkit-details-marker, .price-menu summary::marker { display: none; content: ""; }
.price-menu[open] summary { box-shadow: 0 0 0 3px #c8e6c9; }
/* Auch hochkant vor dem Drehhinweis, aber unter den Spiel-Dialogen. */
.price-menu[open] { z-index: 48; }
.price-menu[open]::after, .price-menu[open]::before { display: none; }
.price-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 86vw;
  background: #fffdf5; border: 3px solid #6d4c41; border-radius: .8rem; padding: .55rem .7rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.3); z-index: 40; max-height: 70vh; overflow: auto; }
.price-panel > b { display: block; margin-bottom: .25rem; color: #4e342e; }
.price-row { display: flex; gap: .45rem; align-items: center; padding: .22rem 0;
  border-bottom: 1px dashed #d7c9a8; font-size: .85rem; }
.price-row:last-of-type { border-bottom: none; }
.price-row .food-icon { width: clamp(24px, 1.8vw, 32px); height: clamp(24px, 1.8vw, 32px); flex: 0 0 auto; }
.price-row .pr-name { flex: 1; font-weight: 700; color: #3e2723; min-width: 0; }
.price-row .pr-recipe { display: block; font-size: .74rem; color: #5d4037; font-weight: 400; }
.price-row .pr-price { font-weight: 800; color: #2e7d32; white-space: nowrap; }
.price-panel .hint { margin: .3rem 0 0; }
.daybar { display: inline-block; width: 64px; height: 6px; background: #d7c9a8; border-radius: 99px;
  margin-left: .35rem; vertical-align: middle; overflow: hidden; }
.daybar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#FDD835,#FB8C00); }
.doner-sub { margin: 0; font-size: .9rem; color: #4e342e; }
.doner-toast { background: #fffdf5; border: 2px solid #a9744f; border-radius: .7rem;
  padding: .3rem .65rem; min-height: 1.8rem; font-weight: 600; margin: 0; color: #3e2723;
  font-size: .9rem; }

/* ---------- Laden-Ansicht ---------- */
.shop-view { position: relative; }

/* Innenraum */
#indoor { position: relative; background: #f7ecd4; }
/* Wand jetzt als schmale Leiste (spart vertikalen Platz) */
.shop-wall { position: relative; display: flex; align-items: center; justify-content: center;
  gap: .7rem; padding: .18rem .5rem; text-align: center; border-bottom: 3px solid #4e342e;
  background:
    repeating-linear-gradient(0deg, rgba(62,39,35,.18) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(90deg, rgba(62,39,35,.10) 0 2px, transparent 2px 46px),
    linear-gradient(#8d6e63, #6d4c41); }
.shop-sign { display: inline-block; background: #2e2e2e; color: #ffd54f; font-weight: 800;
  font-size: .95rem; letter-spacing: .12rem; padding: .08rem .8rem; border-radius: .4rem;
  border: 2px solid #ffd54f; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
#indoor.has-neon .shop-sign { color: #69f0ae; border-color: #69f0ae;
  box-shadow: 0 0 14px #69f0ae, inset 0 0 8px rgba(105,240,174,.4); }
.shop-sign-sub { color: #efebe9; font-size: .66rem; }

/* Innenraum: links Küche + Theke (exakt gleich breit), rechts Sitzecke */
.indoor-main { display: flex; align-items: stretch; }
.indoor-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.room-label { position: absolute; top: 4px; left: 6px; font-size: .68rem; font-weight: 800;
  color: #4e342e; background: rgba(255,253,245,.9); padding: 0 .45rem; border-radius: 99px;
  border: 1px solid #d7c9a8; z-index: 3; }

/* Sitzecke rechts: schließt unten direkt an den Eingangsbereich an */
.dining { position: relative; width: 200px; flex: 0 0 auto;
  background:
    repeating-linear-gradient(0deg, rgba(62,39,35,.12) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(90deg, rgba(62,39,35,.06) 0 1px, transparent 1px 58px),
    linear-gradient(#d1a66e, #bd8f58);
  border-left: 4px solid #4e342e; display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly; padding: 56px .3rem 1.4rem; }
.dining-label { top: auto; bottom: 4px; left: 50%; transform: translateX(-50%); }
.table-set { position: relative; width: 92px; height: 62px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
/* kleiner Teppich unter jedem Tisch */
.table-set::before { content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 46px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(191,54,12,.28) 0 58%, rgba(191,54,12,.16) 70%, transparent 74%); }
.table { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  background: radial-gradient(circle at 35% 30%, #e6b977, #a9744f);
  border: 3px solid #5d4037; border-radius: 50%; box-shadow: inset 0 -4px 6px rgba(0,0,0,.2); }
.table::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; background: #fffdf5; border: 2px solid #a9744f; border-radius: 50%; }
.chair { position: absolute; width: 20px; height: 20px; background: radial-gradient(circle at 35% 30%, #66bb6a, #2e7d32);
  border: 2px solid #1b5e20; border-radius: .35rem; box-shadow: 0 2px 2px rgba(0,0,0,.3); }
.chair.c1 { left: 0; top: 50%; margin-top: -10px; }
.chair.c2 { right: 0; top: 50%; margin-top: -10px; }
/* Grünpflanze in der Ecke (nur CSS, kein Bild nötig) */
.plant { position: absolute; right: 8px; bottom: 22px; width: 22px; height: 26px;
  background: radial-gradient(circle at 50% 25%, #66bb6a 0 8px, #2e7d32 8px 12px, transparent 12px),
    #8d6e63; border: 2px solid #5d4037; border-radius: 3px 3px 6px 6px; background-size: 100% 70%, 100% 100%;
  background-position: top, bottom; background-repeat: no-repeat; }

/* Küche: warmer Fliesenboden, oben Sockelleiste als Wand-Abschluss.
   Höhe skaliert mit dem Bildschirm (Handys quer / 16:9 brauchen wenig Höhe) */
#kitchen { position: relative; flex: 0 0 auto; min-width: 0; height: clamp(200px, 30vh, 340px);
  background:
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(161,136,127,.14) 36px 38px),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(161,136,127,.14) 36px 38px),
    linear-gradient(#fbf3e0, #f0dfc0);
  overflow: hidden; }
#kitchen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px;
  background: linear-gradient(#d7ccc8, #a1887f); border-bottom: 3px solid #8d6e63; z-index: 1; }
.kitchen-floor-label { position: absolute; left: 8px; bottom: 6px; font-size: .74rem;
  color: #4e342e; font-weight: 700; background: rgba(255,255,255,.85);
  padding: 0 .5rem; border-radius: 99px; }

/* Stationen: freistehende Geräte OHNE Rahmen – Bild mit Bodenschatten,
   kleinem Namensschild und Slots direkt am Gerät. Größe passt sich
   der Bildschirmbreite an (clamp). */
.station { position: absolute; width: clamp(88px, 13.5%, 180px); padding: 0;
  background: none; border: none; text-align: center; cursor: pointer; z-index: 2; }
/* weicher Bodenschatten unter dem Gerät */
.station::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 84%;
  height: 12px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(62,39,35,.22), transparent 68%); }
.station-img { width: 100%; height: auto; aspect-ratio: 96 / 64; object-fit: contain;
  display: block; position: relative;
  /* Gemeinsamer Papier-und-Tusche-Look für alle freistehenden SVG-Geräte. */
  filter: drop-shadow(1px 0 0 #65452f) drop-shadow(-1px 0 0 #65452f)
    drop-shadow(0 1px 0 #65452f) drop-shadow(0 -1px 0 #65452f)
    drop-shadow(0 4px 3px rgba(73,45,28,.24)); transition: transform .12s, filter .12s; }
.station:hover .station-img { transform: translateY(-2px); }
.station-name { display: inline-block; margin-top: 2px; font-size: .74rem;
  font-weight: 800; color: #5d4037; background: rgba(255,253,245,.92);
  border: 1px solid #d7c9a8; border-radius: 99px; padding: 0 .45rem; position: relative;
  white-space: nowrap; }
/* Station in Reichweite: orange Leuchten statt Rahmen */
.station.near .station-img {
  filter: drop-shadow(0 0 9px rgba(251,140,0,.95)) drop-shadow(0 5px 4px rgba(0,0,0,.2)); }
.station.near::before { background: radial-gradient(ellipse, rgba(251,140,0,.4), transparent 70%); }
.station.near .station-name { background: #ffe0b2; border-color: #fb8c00; }
.station.busy { opacity: .85; }
/* Slots im Gerät: jedes hineingelegte Teil mit eigenem Icon + Timer */
.station .machine-slots { display: flex; gap: 3px; justify-content: center; margin-top: 2px;
  min-height: 26px; }
.station .slot { position: relative; flex: 1 1 0; min-width: 0; max-width: 36px;
  background: rgba(255,255,255,.88); border: 1px solid #d7c9a8; border-radius: .4rem;
  padding: 1px 1px 2px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.station .slot .slot-icon { width: 70%; max-width: 26px; height: auto;
  aspect-ratio: 1; display: block; margin: 0 auto; object-fit: contain; }
.station .slot .slot-time { display: block; font-size: .6rem;
  font-weight: 800; color: #e65100; line-height: 1.2; }
.station .slot .slot-bar { height: 3px; background: #e0e0e0; border-radius: 99px;
  overflow: hidden; margin-top: 1px; }
.station .slot .slot-bar i { display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffca28, #fb8c00); }
/* Fertig im Gerät: grün, pulsiert als Aufforderung rechtzeitig zu nehmen */
.station .slot.ready .slot-time { color: #2e7d32; }
.station .slot.ready .slot-bar i { background: #66bb6a; animation: bar-pulse 1s ease-in-out infinite; }
/* Verbrannt: dunkler Slot, schwarzes Icon */
.station .slot.burnt { background: #3e2723; border-color: #3e2723; }
.station .slot.burnt .slot-icon { filter: brightness(0.25); }
.station .slot.burnt .slot-time { color: #ef9a9a; }
.station .slot.burnt .slot-bar i { background: #e53935; }
@keyframes bar-pulse { 50% { opacity: .45; } }

/* Abstellkammer: klein oben in der Sitzecke (wird per Upgrade zur Toilette) */
.storage-room { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 74px; background: #cfd8dc; border: 2px solid #6d4c41; border-radius: .5rem;
  padding: 1rem .2rem .3rem; text-align: center; z-index: 3; }
.storage-room .room-label { top: 2px; left: 2px; font-size: .55rem; }
.storage-boxes { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.storage-boxes span { display: block; width: 34px; height: 18px; background: #a9744f;
  border: 2px solid #6d4c41; border-radius: .2rem; position: relative; }
.storage-boxes span::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: #6d4c41; }
.storage-room .toilet-img { width: 40px; margin: 0 auto; display: none; }
.storage-room.is-toilet { background: #e1f5fe; }
.storage-room.is-toilet .storage-boxes { display: none; }
.storage-room.is-toilet .toilet-img { display: block; }

/* Serviertheke: liegt NUR unter der Küche (gleiche Breite wie die Küche),
   ist direkt anklickbar (serviert für Gast 1) */
.serve-counter { position: relative; flex: 0 0 auto; cursor: pointer;
  background:
    repeating-linear-gradient(90deg, rgba(62,39,35,.14) 0 2px, transparent 2px 36px),
    linear-gradient(#a9744f, #79553d);
  border-top: 4px solid #4e342e; border-bottom: 4px solid #3e2723; padding: .25rem .6rem;
  transition: filter .12s; }
.serve-counter:hover { filter: brightness(1.08); }
/* Arbeitsplatte oben auf der Theke */
.serve-counter::before { content: ""; display: block; height: 6px; margin: -.25rem -.6rem .25rem;
  background: linear-gradient(#efebe9, #a1887f); border-bottom: 2px solid #4e342e;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.5); }
#indoor.has-marble .serve-counter { background: linear-gradient(#eceff1, #b0bec5); }
#indoor.has-marble .serve-counter::before { background: linear-gradient(#ffffff, #cfd8dc); }
/* Titelzeile der Theke als Flex: Titel + Hinweis links, Rechnung-Pill rechts */
.serve-counter h3 { margin: 0 0 .2rem; font-size: .82rem; color: #ffecb3;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#indoor.has-marble .serve-counter h3 { color: #37474f; }
.serve-counter h3 small { font-weight: 400; }
.counter-slots { display: flex; gap: .35rem; flex-wrap: wrap; min-height: 42px; align-items: stretch; }
/* 8 feste Plätze – jedes abgelegte Teil in eigener Reihenfolge */
.counter-slot { flex: 1 0 88px; background: rgba(255,253,245,.8);
  border: 2px dashed #d7c9a8; border-radius: .5rem; padding: .1rem .35rem;
  font-weight: 700; display: inline-flex; align-items: center; gap: .3rem;
  color: #7a5c44; font-size: .68rem; min-width: 0; }
.counter-slot.full { border-style: solid; border-color: #66bb6a; color: #3e2723;
  background: #fffdf5; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.counter-slot .food-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.counter-slot small { font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Freie Plätze pulsieren sanft, während der Gast noch wartet */
.counter-slots.waiting .counter-slot:not(.full) { border-color: #ffe082;
  animation: bar-pulse 1.4s ease-in-out infinite; }
/* Rechnung als kompakter Pill rechts im Theken-Kopf – liegt ÜBER den Plätzen
   und wird nie von den Gäste-Blasen überdeckt, die von unten hineinragen */
.counter-bill { margin-left: auto; font-weight: 800; font-size: .74rem; white-space: nowrap;
  background: rgba(255,253,245,.92); color: #3e2723; padding: .08rem .55rem;
  border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* Gäste-Schlange / Eingangsbereich: warme Fliesen, Gäste stehen an der Theke.
   Höhe ebenfalls bildschirmabhängig, damit das Board nie zu hoch wird */
#guest-layer { position: relative; min-height: clamp(96px, 14vh, 150px);
  background:
    repeating-linear-gradient(90deg, rgba(161,136,127,.12) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(161,136,127,.08) 0 2px, transparent 2px 44px),
    linear-gradient(#f6e8cb, #ecd7ae); }
/* Tür-Durchgang: liegt direkt UNTER der Sitzecke (Eingang rechts, 84 %) */
#guest-layer::before { content: "EINGANG"; position: absolute; left: 84%; bottom: 2px;
  width: 76px; margin-left: -38px; background: #4e342e; color: #ffcc80;
  font-size: .6rem; font-weight: 800; letter-spacing: .1rem; text-align: center;
  padding: .3rem 0; border-radius: .3rem .3rem 0 0; box-shadow: 0 -2px 4px rgba(0,0,0,.2); }
#indoor.has-carpet #guest-layer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
  height: 22px; background: linear-gradient(#c62828, #8e0000); border-top: 2px solid #ffebee;
  border-bottom: 2px solid #ffebee; }
.guest { position: absolute; bottom: 14px; width: 108px;
  transform: translateX(-50%); text-align: center; z-index: 5; animation: guest-in .4s ease-out; }
@keyframes guest-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%); } }
.guest .fig { width: 68%; max-width: 76px; margin: 0 auto; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.guest.active .fig { filter: drop-shadow(0 0 7px #66bb6a) drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
/* Sprechblase schwebt ÜBER der Figur und darf über die Theke hinausragen */
.bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 168px; background: #fffdf5; border: 2px solid #a9744f;
  border-radius: .7rem; padding: .3rem .4rem; box-shadow: 0 3px 8px rgba(0,0,0,.28); z-index: 6; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px;
  margin-left: -5px; background: #fffdf5; border-right: 2px solid #a9744f; border-bottom: 2px solid #a9744f;
  transform: rotate(45deg); }
.bubble-order { display: flex; gap: 4px; justify-content: center; align-items: center; min-height: 30px; flex-wrap: wrap; }
.bubble-order .food-icon { width: 36px; height: 36px; }
/* "2x"-Zähler direkt am Icon */
.order-group { display: inline-flex; align-items: center; position: relative; }
.order-x { position: absolute; right: -6px; bottom: -5px; background: #43a047; color: #fff;
  font-size: .58rem; font-weight: 800; border-radius: 99px; padding: 0 .28rem;
  border: 1.5px solid #fffdf5; line-height: 1.4; }
.order-hidden { font-weight: 800; color: #616161; font-size: 1.2rem; }
.patience { height: 6px; background: #e0e0e0; border-radius: 99px; overflow: hidden; margin-top: 3px; }
.patience i { display: block; height: 100%; background: #66bb6a; }
.patience.warn i { background: #ffa000; }
.patience.crit i { background: #e53935; }
.guest-say { font-size: .76rem; font-style: italic; color: #3e2723; margin-top: 3px;
  line-height: 1.25; }

/* Figuren-Baukasten: Basis + Overlay exakt übereinander */
.fig { position: relative;
  filter: drop-shadow(1px 0 0 #65452f) drop-shadow(-1px 0 0 #65452f)
    drop-shadow(0 1px 0 #65452f) drop-shadow(0 -1px 0 #65452f)
    drop-shadow(0 3px 2px rgba(73,45,28,.3)); }
.fig-base { width: 100%; display: block; }
.fig-mood, .fig-hat { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Figuren haben FESTE Größe in Welt-Koordinaten (Welt wird als Ganzes skaliert) */
.player { position: absolute; width: 76px; z-index: 5;
  transform: translateX(-50%);
  transition: left .12s linear, top .12s linear; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.player-carry { position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  background: #fffdf5; border: 2px solid #66bb6a; border-radius: 50%; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; }
.player-carry[hidden] { display: none; }
.player-carry .food-icon { width: 34px; height: 34px; }

/* Stations-Popup: Menü ploppt direkt an der Station auf */
.station-popup { position: absolute; z-index: 7; min-width: 230px; max-width: 300px;
  max-height: 240px; overflow: auto; background: #fffdf5; border: 3px solid #6d4c41;
  border-radius: .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.3); padding: .4rem .5rem; }
.station-popup[hidden] { display: none; }
/* Handy: Stations-Menü MITTIG auf dem Bildschirm, über allem
   (auch im Vollbild – liegt außerhalb der skalierten Welt im Board) */
.station-popup.as-sheet { position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100vw - 20px)); min-width: 0; max-width: none;
  max-height: min(70vh, 420px); z-index: 60; }
.station-popup.as-sheet .popup-body button { width: 100%; }
.popup-head { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; border-bottom: 2px solid #d7ccc8; padding-bottom: .2rem; margin-bottom: .3rem; }
.popup-close { border: none; background: none; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.popup-body { display: flex; flex-direction: column; gap: .3rem; }
.popup-body button { border: 2px solid #a5d6a7; background: #e8f5e9; border-radius: .6rem;
  padding: .3rem .5rem; font-weight: 700; cursor: pointer; display: flex; gap: .35rem;
  align-items: center; text-align: left; }
.popup-body button:hover { background: #c8e6c9; }
.popup-body .food-icon { width: 30px; height: 30px; flex: 0 0 auto; }

/* Ablage: eigenes, kompaktes Holzregal für ZWISCHENERGEBNISSE
   (klar von der Serviertheke getrennt, verdeckt die Mülltonne nicht) */
.shelf { position: absolute; right: 4px; bottom: 18px;
  background: linear-gradient(#a9744f, #6d4c41); border: 3px solid #4e342e;
  border-radius: .7rem; padding: .3rem .45rem;
  width: 186px; max-width: 40%; z-index: 4; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.shelf h3 { margin: 0 0 .2rem; font-size: .66rem; color: #ffe0b2; }
.shelf-slots { display: flex; gap: .25rem; }
.shelf-slot { flex: 1; min-height: 46px; background: rgba(255,253,245,.95); border-radius: .45rem;
  font-size: .6rem; padding: .1rem; text-align: center; cursor: pointer;
  border: 2px solid transparent; min-width: 0; }
.shelf-slot.full { background: #fff8e1; border-color: #ffe082; }
.shelf-slot.spoiled { background: #ffebee; border-color: #e53935; }
.shelf-slot .food-icon { width: 26px; height: 26px; display: block; margin: 0 auto; }
.shelf-slot .spoil { display: block; height: 5px; background: #e0e0e0; border-radius: 99px;
  overflow: hidden; margin-top: 2px; }
.shelf-slot .spoil i { display: block; height: 100%; background: #8d6e63; }

/* Straße ganz unten (kompakt, damit das Board auf Handys quer passt) */
#street { position: relative; background: #9e9e9e; }
.shop-front { position: relative; height: 46px; background: linear-gradient(#a1887f, #8d6e63); }
/* Beleuchtete Schaufenster links und rechts der Tür */
.shop-front::before, .shop-front::after { content: ""; position: absolute; top: 8px; height: 26px;
  width: 17%; background: linear-gradient(#fff8e1, #ffe082); border: 3px solid #4e342e;
  border-radius: .35rem; box-shadow: inset 0 0 8px rgba(255,193,7,.5); }
.shop-front::before { left: 6%; }
.shop-front::after { right: 6%; }
.shop-awning { position: absolute; top: 0; left: 0; right: 0; height: 16px; z-index: 2;
  background: repeating-linear-gradient(90deg, #c62828 0 24px, #ffebee 24px 48px);
  border-bottom: 3px solid #7f0000; }
/* Volants (Skallope) unten an der Markise */
.shop-awning::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 12px -3px, #c62828 9px, transparent 10px) 0 0 / 48px 12px repeat-x,
    radial-gradient(circle at 36px -3px, #ffebee 9px, transparent 10px) 24px 0 / 48px 12px repeat-x; }
.neon-sign { position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  background: #1a1a1a; color: #ff6ec7; font-weight: 800; font-size: .8rem; letter-spacing: .2rem;
  padding: .1rem .9rem; border-radius: 99px; border: 2px solid #ff6ec7;
  box-shadow: 0 0 12px #ff6ec7, inset 0 0 6px rgba(255,110,199,.5); white-space: nowrap; z-index: 3; }
.neon-sign[hidden] { display: none; }
.shop-automat { position: absolute; left: 12px; bottom: 0; height: 44px; z-index: 2; }
.shop-automat[hidden] { display: none; }
/* Eingangstür: liegt genau unter der EINGANG-Matte (84 %) */
.shop-door { position: absolute; bottom: 0; left: 84%; width: 64px; margin-left: -32px; height: 28px;
  background: #4e342e; border: 3px solid #2e1a12; border-bottom: none; border-radius: .4rem .4rem 0 0;
  color: #ffcc80; font-size: .62rem; font-weight: 700; text-align: center; line-height: 24px; z-index: 1; }
.sidewalk { height: 48px; background: repeating-linear-gradient(90deg, #bdbdbd 0 46px, #9e9e9e 46px 48px);
  border-top: 3px solid #757575; position: relative; }
#street-walkers { position: absolute; left: 0; right: 0; top: 48px; height: 56px; }
/* Passanten: feste Größe in Welt-Koordinaten */
.walker { position: absolute; bottom: 0; width: 78px;
  transform: translateX(-50%); }
.walker .fig-base, .walker .fig-mood { width: 100%; }
.walker .fig-mood { position: absolute; inset: 0; }
.walker.flip img { transform: scaleX(-1); }
.walker.is-guest::after { content: "!"; position: absolute; top: -14px; right: 2px;
  background: #fdd835; border: 2px solid #f9a825; border-radius: 50%;
  width: 18px; height: 18px; font-size: .75rem; font-weight: 800; line-height: 14px; }
.road { height: 38px; background: #424242; position: relative; }
.road-line { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, #ffeb3b 0 30px, transparent 30px 55px); }

/* ---------- Aktionen (kompakt) ---------- */
.service-row { display: block; }
.service-actions { background: #fffdf5; border: 2px solid #a9744f; border-radius: .8rem;
  padding: .35rem .55rem; }
.kitchen-help { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.kitchen-help button { padding: .25rem .7rem !important; font-size: .82rem !important; }
.near-label { font-size: .82rem; color: #2e7d32; font-weight: 700; }
.action-panel { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; min-height: 1.4rem; align-items: center; }
.action-panel button { border: 2px solid #a5d6a7; background: #e8f5e9; border-radius: .7rem;
  padding: .25rem .55rem; font-weight: 700; font-size: .8rem; cursor: pointer;
  display: inline-flex; gap: .3rem; align-items: center; }
.action-panel button:hover { background: #c8e6c9; }
.action-panel .food-icon { width: 30px; height: 30px; }
/* Essen-Icons: feste Größe in Welt-Koordinaten (skalieren mit der Welt) */
.food-icon { width: 34px; height: 34px; object-fit: contain; box-sizing: border-box;
  padding: 2px; border: 1px solid #dfc9a7; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fffdf4, #f1dfbf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 3px rgba(73,45,28,.2); }

/* ---------- Modals (liegen im Board, damit sie im Vollbild sichtbar sind) ---------- */
.modal { position: fixed; inset: 0; background: rgba(62,39,35,.6); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 1rem;
  backdrop-filter: blur(3px); }
#doner-board:fullscreen .modal { position: absolute; }
.modal[hidden] { display: none; }
/* Karte im warmen Papier-Look mit Holzrahmen und Titel-Leiste */
.modal-card { background: linear-gradient(#fffdf5, #f9f1dd);
  border: 3px solid #8d5a2b; border-radius: 1.2rem;
  padding: 1.1rem 1.3rem; max-width: 480px; width: 100%; max-height: 88vh; overflow: auto;
  position: relative; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.modal-card.wide { max-width: 640px; }
.modal-card h2 { color: #5d4037; margin-top: 0; padding-bottom: .35rem;
  border-bottom: 3px solid #c9a27a; letter-spacing: .02em; }
.modal-close { position: absolute; top: .4rem; right: .7rem; font-size: 1.4rem;
  border: none; background: none; cursor: pointer; color: #8d5a2b; }
.modal-close:hover { color: #e65100; }
.modal-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
/* Alle Modals-Knöpfe als freundliche Pills (wie im HUD) */
.modal-actions button { font-family: inherit; border-radius: 999px;
  padding: .45rem 1.1rem; font-weight: 800; cursor: pointer;
  border: 2px solid #2e7d32; background: linear-gradient(#66bb6a, #43a047);
  color: #fff; box-shadow: 0 2px 0 #1b5e20; transition: transform .08s, box-shadow .08s; }
.modal-actions button:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #1b5e20; }
.modal-actions button:active { transform: translateY(1px); box-shadow: 0 1px 0 #1b5e20; }
.modal-actions button.jupi_btn_alt { border-color: #c9a27a; color: #4e342e;
  background: linear-gradient(#ffffff, #f1ead8); box-shadow: 0 2px 0 #b3834e; }
.modal-actions button.jupi_btn_alt:hover { background: linear-gradient(#fffdf5, #fff3d6);
  box-shadow: 0 3px 0 #b3834e; }
.modal-actions button.danger { border-color: #b71c1c; background: linear-gradient(#ef5350, #c62828);
  color: #fff; box-shadow: 0 2px 0 #7f0000; }
.menu-card { text-align: center; }
.menu-logo { width: 120px; }
/* Pausenmenü: kompakte Info-Chip statt nüchternem Text */
#pause-menu .modal-card { max-width: 420px; }
#pause-info { background: #fff8e1; border: 2px solid #ffe082; border-radius: .7rem;
  padding: .45rem .7rem; font-weight: 700; color: #5d4037; }
#pause-menu .modal-actions { flex-direction: column; }
#pause-menu .modal-actions button { width: 100%; justify-content: center; text-align: center; }
.register-customer { background: #fff8e1; border: 2px solid #ffe082; border-radius: .6rem;
  padding: .35rem .6rem; font-style: italic; }
.police-bar { background: #ffebee; border: 2px solid #e53935; border-radius: .6rem;
  padding: .4rem .6rem; margin: .5rem 0; font-weight: 700; }
.police-bar img { width: 30px; height: 30px; vertical-align: middle; }
.police-fill { display: block; height: 8px; background: #ffcdd2; border-radius: 99px;
  overflow: hidden; margin-top: .3rem; }
.police-fill i { display: block; height: 100%; background: #e53935; width: 100%; }
.coin-row { display: flex; gap: .3rem; flex-wrap: wrap; margin: .4rem 0; }
.coin-row button { border-radius: 99px; border: 2px solid #a5d6a7; background: #f1f8e9;
  padding: .2rem .6rem; cursor: pointer; font-weight: 700; }
/* Ziffernblock: eigene Tastatur im Modal, damit am Handy KEINE Systemtastatur
   aufpoppt (die würde im Querformat das ganze Modal verdecken) */
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .1rem 0 .4rem; }
.numpad button { min-height: 44px; border-radius: .6rem; border: 2px solid #a5d6a7;
  background: #f1f8e9; font-weight: 800; font-size: 1.05rem; cursor: pointer; color: #3e2723; }
.numpad button:hover { background: #c8e6c9; }
.numpad button:active { transform: translateY(1px); }
.numpad button.fn { background: #fff8e1; border-color: #ffe082; }
@media (hover: hover) and (pointer: fine) {
  .numpad button { min-height: 38px; font-size: .95rem; }
}
.form-error { color: #c62828; font-weight: 700; min-height: 1.2rem; }
.hint { font-size: .85rem; color: #5d4037; }
.shop-list { display: grid; gap: .5rem; }
.shop-item { display: flex; gap: .6rem; align-items: center; border: 2px solid #d7c9a8;
  border-radius: .7rem; padding: .4rem .6rem; background: #fff; }
.shop-item.owned { opacity: .6; border-color: #9e9e9e; }
.shop-item button { margin-left: auto; }
.day-stats { display: grid; gap: .25rem; }
.avatar-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: .6rem 0; }
.avatar-preview { width: 110px; margin: 0 auto; background: #f1f8e9; border: 2px solid #a5d6a7;
  border-radius: .8rem; padding: .5rem; }
.help-body ol { padding-left: 1.2rem; }
.danger { border-color: #e53935 !important; color: #c62828 !important; }
label input[type=text] { width: 120px; padding: .3rem .5rem; border-radius: .5rem;
  border: 2px solid #a5d6a7; font-size: 1rem; }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------- Notizblock-Upgrade (kleiner Zettel im HUD) ---------- */
.notepad { background: #fffde7; border: 2px dashed #f9a825; border-radius: .7rem;
  padding: .3rem .6rem; min-width: 170px; }
.notepad label { display: block; font-size: .68rem; color: #6d4c41; font-weight: 700; }
.notepad input { width: 100%; border: none; border-bottom: 2px solid #ffe082; background: transparent;
  font-size: .9rem; padding: .15rem 0; outline: none; color: #3e2723; }
.notepad[hidden] { display: none; }

/* ---------- Dark Mode: Brett bleibt hell (Papier-Look), Schrift dunkel ----------
   Die Plattform schaltet im Dark Mode die Schrift auf Hellgrau – auf dem
   cremefarbenen Brett wäre das unlesbar. Darum erbt hier alles Dunkelbraun,
   native Controls (Selects) rendern hell. Alle expliziten Farben bleiben. */
html[data-theme="dark"] #doner-board { color: #3e2723; color-scheme: light; }

/* ---------- Kleine Screens: HUD bleibt im Fluss ÜBER dem Spiel.
     Gilt bei schmalen Fenstern (Handys/Tablets hochkant) UND bei wenig
     Höhe (Handys quer – auch wenn sie breiter als 900px sind!) ---------- */
@media (max-width: 900px), (max-height: 600px) {
  .hud-stat span { font-size: .8rem; }
  .hud-stat.carry span { font-size: .74rem; }
  #hud-carry .food-icon { width: 18px; height: 18px; }
  .daybar { width: 48px; margin-left: .2rem; }
  .hud-btns button, .price-menu summary { padding: .1rem .4rem; font-size: .68rem; }
  .notepad { min-width: 0; padding: .1rem .35rem; }
  .notepad input { font-size: .78rem; }
  .side-panel { flex: 0 0 158px; }
  .side-panel .kitchen-help button { padding: .4rem .5rem !important; font-size: .78rem !important; }
  /* Welt bekommt die volle Breite: Nur die Meldungszeile liegt als schmale
     Leiste oben über der Welt (reine Deko dahinter) – der E/Q-Aktionskasten
     ist auf kleinen Screens ausgeblendet (Stationen/Mülltonne sind tippbar) */
  #doner-board .board-body { position: relative; }
  #doner-board .board-body > .side-panel,
  #doner-board:fullscreen .side-panel {
    position: absolute; left: .4rem; right: .4rem; top: .4rem; bottom: auto; z-index: 30;
    flex: none; width: auto;
    background: rgba(255,253,245,.92); border: 2px solid #a9744f;
    border-radius: .8rem; padding: .2rem .45rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
  }
  #doner-board .side-panel .service-row { display: none; }
  #doner-board .side-panel .doner-toast {
    font-size: .72rem; min-height: 0; padding: .2rem .45rem; text-align: center;
  }
  /* Preisliste als Bottom-Sheet, damit sie auf schmalen Screens passt */
  .price-panel { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto;
    width: auto; max-width: none; max-height: 60vh; }
  /* Handy im Vollbild: HUD NICHT als Overlay – es liegt schlank ÜBER dem
     Spielfeld und der Aktionsleiste (in normalem Textfluss) */
  #doner-board:fullscreen .board-hud { position: static; flex: 0 0 auto;
    left: auto; right: auto; }
  #doner-board:fullscreen .board-body { flex-wrap: nowrap; }
}

/* ---------- Touch-Bedienung: große Trefferflächen für Finger ----------
   Gilt für Touch-Geräte egal welcher Größe (Handy, Tablet, Touch-Laptop) */
@media (hover: none) and (pointer: coarse) {
  /* E/Q-Aktionen: mindestens 44px hoch */
  #doner-board .side-panel .kitchen-help button {
    min-height: 44px; font-size: .85rem !important; padding: .5rem .6rem !important;
  }
  /* Kasse: große Schein-Buttons + Zoom-sichere Eingabe (16px = kein iOS-Zoom) */
  .coin-row button { min-height: 44px; padding: .45rem .9rem; font-size: 1rem; }
  label input[type=text], #register-input { font-size: 16px; padding: .5rem .6rem; }
  /* Alle Menü-Knöpfe (Pause, Kasse, Shop, Tag) gut treffbar */
  .modal-actions button { min-height: 44px; padding: .55rem 1.2rem; font-size: 1rem; }
  .modal-close { min-width: 44px; min-height: 44px; }
  /* Stations-Menüs: Einträge als große Zeilen */
  .popup-body button { min-height: 44px; font-size: .9rem; }
  .station-popup.as-sheet .popup-body button { min-height: 48px; }
  /* HUD-Pills kompakt, aber treffbar */
  .hud-btns button, .price-menu summary { min-height: 36px; font-size: .78rem; }
}

/* ---------- Hochkant-Handy: bitte ins Querformat drehen ---------- */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 45;
  background: linear-gradient(#f3e9d2, #e8d5ae); color: #4e342e; text-align: center;
  padding: 38vh 2rem 0; font-weight: 800; font-size: 1.05rem; line-height: 1.5; }
@media (orientation: portrait) and (max-width: 860px) {
  #rotate-hint { display: block; }
}
/* ACHTUNG: #rotate-hint liegt bewusst UNTER den Modalen (z-index 45 < 50).
   Startmenü, Hilfe und „Über das Spiel" müssen auch hochkant bedienbar
   bleiben - nur das Spielfeld selbst verlangt das Querformat. */

/* ---------- Startmenü & „Über das Spiel" (GUI-Richtlinie 3.13, Typ 4) ---- */
/* Vier Pflicht-Knöpfe: Spielen, 🔊 Ton, ❓ Wie spielt man, ℹ️ Über das Spiel.
   Bedienziele ≥ 40 px (Regel 3.13.5) - auch bei schlanker Schrift. */
.menu-actions { flex-direction: column; align-items: stretch; }
.menu-card .menu-knopf { min-height: 44px; padding: .55rem 1.1rem; font-size: 1rem;
  justify-content: center; text-align: center; }
.menu-card .menu-lernsatz { margin: .6rem auto .2rem; max-width: 34rem; }
/* Lernsatz „Du übst dabei …" - im Startmenü KURZ sichtbar (Regel 1.1.2),
   ausführlich im Hilfe-/Über-Modal. Dunkle Schrift auf heller Fläche
   (Kontrast-Regel: kein Grau-in-Grau). */
.lernsatz { background: #fff8e1; border: 2px solid #c9a27a; border-radius: .7rem;
  padding: .55rem .8rem; color: #4e342e; font-size: .92rem; line-height: 1.45; }
.lernsatz strong { color: #2e7d32; }
#about-modal .modal-card { max-width: 520px; }
@media (max-width: 900px), (max-height: 600px) {
  .menu-card .menu-knopf { min-height: 44px; font-size: .92rem; padding: .5rem .8rem; }
  .menu-logo { width: 84px; }
}

/* Drei-Zonen-Leiste (GUI 3.13) */
/* Hilfe/Info liegen über dem später im DOM stehenden Startmenü. */
.modal:not(#start-menu) { z-index:60; }
.modal-close { min-width:40px;min-height:40px; }
#help-modal h2,#about-modal h2 { padding-right:40px; }
/* Alle vier Startaktionen bleiben auch auf flachen Handy-Bildschirmen sichtbar. */
@media (max-height:500px) and (min-width:600px){
 .menu-card { max-width:620px;padding:.7rem 1rem; }
 .menu-card .menu-logo,.menu-card [data-i18n="spiel_don_start_text"],
 .menu-card [data-i18n="spiel_don_start_tasten"] { display:none; }
 .menu-card h2 { font-size:20px;margin-bottom:.4rem; }
 .menu-card .menu-lernsatz { margin:.4rem auto; }
 .menu-card .menu-actions { display:grid;grid-template-columns:1fr 1fr;margin-top:.5rem; }
}
.don_header { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;padding:7px 20px;background:var(--ct-color);border-bottom:1px solid var(--grey300-color); }
.don_back { justify-self:start;display:flex;align-items:center;min-height:40px;
  text-decoration:none;font-weight:700; }
.don_brand { display:flex;align-items:center;gap:9px; }
.don_brand h1 { margin:0;font-size:20px; }
.don_brand img { border-radius:9px; }
.don_header_actions { display:flex;align-items:center;justify-self:end;gap:8px;min-width:0; }
.don_header .jupi_theme_switch { width:74px;height:40px;min-height:40px;padding:0;
  background:var(--grey200-color);border-color:var(--grey400-color); }
.don_header .jupi_theme_switch .jts_thumb { width:32px;height:32px;top:3px;bottom:auto;left:3px; }
html[data-theme="dark"] .don_header .jupi_theme_switch .jts_thumb { left:calc(100% - 35px); }
.don_header .jupi_theme_switch .jts_icon { font-size:18px; }
.don_header .jupi_theme_switch .jts_sun { left:9px; }
.don_header .jupi_theme_switch .jts_moon { right:9px; }
.don_header .jupi_sprachen_select { min-height:40px;max-width:165px;
  color:var(--blk-color);background:var(--grey100-color);border:1px solid var(--grey400-color); }

.don_header { position:relative;z-index:46; }
.don_header .jupi_theme_switch { flex:0 0 74px;box-sizing:border-box; }
.don_header .jupi_theme_switch .jts_thumb { box-sizing:border-box; }
#doner-board { position:relative; }
/* Der Drehhinweis gehört zum Spiel; Sprache und Theme bleiben erreichbar. */
#rotate-hint { position:absolute;padding: min(30vh,180px) 2rem 2rem; }
.board-hud button,.board-hud summary { min-height:40px;min-width:40px; }
@media (max-width:800px){
 .don_header { grid-template-columns:1fr auto;gap:6px;padding:6px 12px; }
 .don_brand { grid-column:1/-1;grid-row:1;justify-self:center; }
 .don_header_actions { grid-column:2;grid-row:2;gap:6px; }
 .don_back { grid-column:1;grid-row:2;font-size:14px; }
 .don_header .jupi_sprachen_select { max-width:134px; }
}