/* Hatford – Spiel-HUD, Fenster im Spiel und Titelbild */

/* ---------- Joystick */
.joy {
  position: fixed; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,.12), rgba(255,255,255,.28)); border: 3px solid rgba(255,255,255,.7);
  pointer-events: none !important; z-index: 30;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #e2e8ee); box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

/* ---------- HUD oben */
.ahud-top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; gap: 10px; z-index: 20;
  padding: calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
  pointer-events: none;
}
.ahud-top > * { pointer-events: auto; }
.ahud-top .sp { flex: 1; pointer-events: none; }
.hud-left { display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.hud-left > * { pointer-events: auto; }
.apill {
  background: var(--pill); color: #fff; font-weight: 700; border-radius: 16px; padding: 7px 14px; font-size: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12); white-space: nowrap;
  border: 2px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.amoney { display: flex; align-items: center; gap: 8px; font-size: 20px; height: 46px; padding: 0 16px 0 8px; min-width: 116px; flex: none; }
.amoney img { width: 40px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.3)); }
.amoney .av { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.amoney.bump, .rank-card.bump { animation: bump .3s; }
.amenu {
  position: relative; width: 48px; height: 48px; border-radius: 16px; border: 3px solid #fff; background: linear-gradient(#5fb3ff, #2a77cf);
  color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.22), 0 6px 12px rgba(0,0,0,.18); display: grid; place-items: center; flex: none; padding: 0;
}
.amenu:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
/* drei klare Balken statt eines Schriftzeichens (sieht auf jedem Gerät gleich aus) */
.amenu .am-bars { display: grid; gap: 5px; }
.amenu .am-bars i { display: block; width: 22px; height: 4px; border-radius: 2px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.amenu .am-dot { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: #e53935; border: 3px solid #fff; animation: badgepulse 1.4s ease-in-out infinite; }
.rank-card {
  display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; text-align: left;
  background: var(--pill); color: #fff; border-radius: 16px; padding: 4px 12px 4px 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
  border: 2px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rank-card .ri { font-size: 30px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.16); border-radius: 12px; }
.rank-card .rc { display: flex; flex-direction: column; gap: 3px; min-width: 104px; }
.rank-card b { font-size: 15px; line-height: 1; }
.rank-card .pbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.rank-card .pbar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe07a, #ffb42e); border-radius: 4px; transition: width .4s; }
.rank-card .pt { font-size: 12px; font-weight: 600; opacity: .95; }
.minimap { position: relative; display: block; width: 156px; height: 95px; padding: 0; border-radius: 16px; overflow: hidden; background: #4c9440; box-shadow: 0 3px 10px rgba(0,0,0,.28); border: 3px solid #fff; cursor: pointer; }
.minimap canvas { display: block; width: 100%; height: 100%; }
.minimap .mm-zoom { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 9px; background: rgba(20, 40, 60, .78); color: #fff; font-size: 15px; line-height: 1; display: grid; place-items: center; pointer-events: none; }
.minimap:active { transform: scale(.97); }
.hud-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; pointer-events: none; width: 0; min-width: 100%; }   /* bestimmt nicht die Breite der linken Spalte */
.hud-btns > * { pointer-events: auto; }
.aboost { position: absolute; left: 6px; bottom: -14px; background: #f59f1b; color: #fff; font: 700 12px var(--font); padding: 1px 8px; border-radius: 9px; border: 2px solid #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Shop-Knopf im Spielbild: runder Goldknopf mit Karte, Hinweis-Punkt und Schild darunter */
.acard { position: relative; align-self: flex-start; width: 66px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; animation: cardbob 2.6s ease-in-out infinite; }
.acard .cb-ring {
  width: 58px; height: 58px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff0a0, #f5b83a 55%, #d97a10); box-shadow: 0 4px 0 rgba(150, 80, 0, .5), 0 8px 16px rgba(0,0,0,.25);
}
.acard .cb-ring { font-size: 36px; line-height: 1; }
.acard .cb-ring i.em { vertical-align: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.acard .cb-badge { position: absolute; top: -3px; right: 0; min-width: 22px; height: 22px; border-radius: 11px; background: #e53935; color: #fff; font: 700 14px var(--font); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); animation: badgepulse 1.4s ease-in-out infinite; }
.acard .cb-lbl { margin-top: -9px; position: relative; background: #2b3a55; color: #fff; font: 700 11px var(--font); padding: 2px 8px; border-radius: 9px; border: 2px solid #fff; white-space: nowrap; }
.acard:active { transform: scale(.94); }
.acard.owned { animation: none; }
.acard.owned .cb-badge { background: #3a9a2b; animation: none; }
@keyframes cardbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes badgepulse { 50% { transform: scale(1.15); } }

/* ---------- Ziel, Banner, Viertel */
.aside {
  position: absolute; right: calc(10px + var(--safe-right, 0px)); top: calc(66px + var(--safe-top)); z-index: 21;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 232px; pointer-events: none;
}
.aside > * { pointer-events: auto; }
.agoal {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--cream); border: 3px solid #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 7px 10px 8px; font-weight: 600; font-size: 14px; line-height: 1.28;
}
.agoal .ghd { display: flex; align-items: center; gap: 6px; }
.agoal .gi { font-size: 24px; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #ffe9b8; display: grid; place-items: center; }
.agoal .gh { font-size: 12px; color: var(--blue-dark); line-height: 1.2; }
.agoal .gt b { color: var(--blue-dark); }
.agoal .ggo { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 700; color: #fff; background: #3f8fe0; border-radius: 10px; padding: 2px 9px; }
.agoal .ggo[hidden] { display: none; }
/* „Jetzt: …“ – wohin „Hinlaufen“ gerade führt */
.agoal .gstep { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #2f5d8a; line-height: 1.2; }
.agoal .gstep i { font-style: normal; font-weight: 700; color: #1d4f7c; }
.agoal .gstep[hidden] { display: none; }
.agoal.walking { border-color: #8fd0f5; }
.agoal.walking .ggo { background: #e8743b; }
.agoal:active { transform: scale(.98); }
.agoal.tut { background: #fffbe0; border-color: #ffe07a; }
.agoal.done { animation: goaldone .7s; }
.agoal.new { animation: goalnew .8s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes goaldone { 30% { transform: scale(1.06); background: #e7ffd9; } }
@keyframes goalnew { 0% { transform: translateX(40px); opacity: 0; } 55% { opacity: 1; box-shadow: 0 0 0 5px rgba(255, 204, 51, .85), var(--shadow); } 100% { transform: none; } }
.abanner {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 35; pointer-events: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: rgba(255, 247, 232, .96); border: 4px solid #fff; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 12px 22px; max-width: 90vw;
}
.abanner b { font-size: 22px; }
.abanner span { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.abanner.big b { font-size: clamp(22px, 4.5vw, 34px); color: var(--blue-dark); }
.abanner.show { animation: bannerin .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerin { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } }
.aenter {
  position: absolute; left: 50%; bottom: calc(62px + var(--safe-bottom)); transform: translateX(-50%); pointer-events: none !important;
  background: rgba(20, 60, 90, .72); color: #fff; font-weight: 700; font-size: 18px; padding: 6px 18px; border-radius: 14px; white-space: nowrap;
}
.aenter.show { animation: enterin 2.2s forwards; }
@keyframes enterin { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.amoney.card::after { content: '💳'; font-size: 15px; margin-left: 2px; }
.bankbox { display: flex; flex-direction: column; gap: 10px; }
.bankbox .big { font-size: 30px; font-weight: 700; color: #2e7d32; text-align: center; }
.bankbox .gain { color: #2e8b45; }
.bankbox .row { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; background: #fff; border-radius: 10px; padding: 6px 10px; }
.bankbox .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fcard { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 3px solid var(--cream-line); border-radius: 14px; padding: 6px; text-align: center; }
.fcard.cur { border-color: #9fd98c; background: #f3ffee; }
.fcard.pend { border-color: #ffd58a; }
.fcard .fthumb { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; }
.fcard b { font-size: 14px; }
.fcard .fstyle { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.fcard .fcost { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; }
.fcard .fcost span { display: inline-flex; align-items: center; gap: 1px; }
.fcard .fcost img { width: 18px; height: 18px; }
.fcard .btn { max-width: 100%; white-space: normal; line-height: 1.15; }
.fcard .ftag { font-size: 12px; font-weight: 700; color: #3a9a2b; padding: 4px 0; }

/* ---------- Aktions-Taste & angenommener Auftrag */
.aact {
  position: absolute; left: calc(10px + var(--safe-left)); top: 52%; transform: translateY(-50%); z-index: 22;
  display: flex; flex-direction: column; align-items: center; width: 96px; border: 0; background: none; padding: 0;
  color: #fff; font: 700 12px Fredoka, system-ui, sans-serif; cursor: pointer;
}
/* Aktions-Knopf (Ausbauen, Auftrag annehmen, Einrichten): rund an der linken Seite – nicht unten, wo der Daumen läuft */
.aact .ai {
  width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 35% 30%, #9ff3a8, #3cb04f 58%, #23813a); box-shadow: 0 4px 0 #1f6b2e, 0 8px 16px rgba(0,0,0,.28);
  animation: actpulse 1.6s ease-in-out infinite;
}
.aact .ai + span {
  margin-top: -9px; position: relative; max-width: 96px; background: #1f4d2a; padding: 3px 9px 4px; border-radius: 10px; border: 2px solid #fff;
  text-align: center; line-height: 1.1; box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.aact:active .ai { transform: translateY(3px); box-shadow: 0 1px 0 #1f6b2e; animation: none; }
.aact.pop { animation: actpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes actpop { from { transform: translateY(-50%) scale(.5); opacity: 0; } }
@keyframes actpulse { 50% { transform: scale(1.07); } }
.aquest {
  background: rgba(255, 247, 232, .97); border: 3px solid #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 6px 8px 8px;
}
.aquest .qh { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.aquest .qh b { flex: 1; color: var(--blue-dark); }
.aquest .qr { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #2e8b45; }
.aquest .qr img { width: 20px; height: 14px; }
.aquest .qx { border: 0; background: rgba(0,0,0,.08); border-radius: 50%; width: 34px; height: 34px; margin: -6px -4px -6px 0; font-size: 15px; cursor: pointer; color: var(--ink-soft); flex: none; }
.aquest .qi { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.aquest .qrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: #fff; border-radius: 10px; padding: 2px 6px; }
.aquest .qrow img { width: 24px; height: 24px; }
.aquest .qrow .qn { flex: 1; }
.aquest .qrow b { color: #c0392b; }
.aquest .qrow.ok b { color: #3a9a2b; }
.aquest .qrow.ok { background: #e9ffe2; }

/* ---------- Korb */
.acap {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); z-index: 20;
  background: var(--pill); color: #fff; font-weight: 700; border-radius: 18px; padding: 5px 10px 5px 6px; font-size: 15px;
  border: 2px solid rgba(255,255,255,.22); font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: calc(100vw - 24px);
}
.acap .ci { font-size: 22px; width: 32px; height: 32px; border-radius: 11px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.acap .cmeter { display: flex; flex-direction: column; gap: 3px; min-width: 50px; }
.acap .cv { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.acap .cbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.acap .cbar i { display: block; height: 100%; width: 0; background: linear-gradient(#7fe05e, #3a9a2b); border-radius: 3px; transition: width .2s; }
.acap.full .cbar i { background: linear-gradient(#ffb36b, #e8743b); }
.acap.full { border-color: rgba(255, 170, 90, .9); }
.acap .cchips { display: flex; gap: 4px; }
.acap .cc { display: inline-flex; align-items: center; gap: 1px; background: rgba(255,255,255,.14); border-radius: 10px; padding: 1px 6px 1px 2px; font-size: 13px; }
.acap .cc img { width: 22px; height: 22px; }
.acap .cc.need { background: rgba(95, 208, 106, .35); box-shadow: inset 0 0 0 2px #7fe05e; }
.acap .cc.more { padding: 1px 6px; }
/* Korb-Fenster */
.bk { display: flex; flex-direction: column; gap: 10px; }
.bk-head { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.bk-list { display: flex; flex-direction: column; gap: 6px; }
.bk-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 6px 10px; }
.bk-row.need { border-color: #9fd98c; background: #f3fff0; }
.bk-row > img { width: 36px; height: 36px; }
.bk-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bk-t b { font-size: 15px; }
.bk-t small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.bk-row.need .bk-t small { color: var(--green-dark); }

/* ---------- Schwebetexte & Blasen (Schilder und Blasen z-index 1–4 liegen unter dem HUD mit 20) */
.ftext {
  position: fixed; left: 0; top: 0; pointer-events: none !important; font-weight: 700; font-size: 22px; color: #fff; z-index: 25;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.25); white-space: nowrap; will-change: transform;
}
.ftext.money { color: #e9ffe6; }
.ftext.warn { color: #ffe3de; font-size: 17px; background: rgba(210, 60, 50, .9); padding: 3px 10px; border-radius: 10px; text-shadow: none; }
.ftext.max { color: #fff; background: rgba(240, 140, 30, .95); padding: 2px 10px; border-radius: 10px; text-shadow: none; font-size: 18px; }
/* „MAX“ und Warnungen kommen im Takt wieder: Sie bleiben unter den Karten der Anzeige (20+), statt deren Text zu verdecken */
.ftext.max, .ftext.warn { z-index: 19; }
.ftext.good { color: #fff; background: rgba(60, 170, 70, .92); padding: 3px 10px; border-radius: 10px; text-shadow: none; font-size: 17px; }
.cbubble {
  position: fixed; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 14px; padding: 3px 8px 3px 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,.2); font-weight: 700; font-size: 14px; color: var(--ink); pointer-events: none !important; transition: opacity .2s;
}
.cbubble img { width: 26px; height: 26px; }
.cbubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.cbubble.happy { padding: 3px 8px; font-size: 18px; }
.cbubble .bw { display: inline-flex; align-items: center; gap: 2px; }
.cbubble.multi { gap: 6px; }
.cbubble .bw.ok b, .obubble .bw.ok b { color: #3a9a2b; }
.cbubble.multi img { width: 22px; height: 22px; }
.obubble {
  position: fixed; left: 0; top: 0; z-index: 4; background: #fff7e8; border: 3px solid #fff; border-radius: 14px; padding: 4px 8px 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25); font-weight: 700; font-size: 13px; color: var(--ink); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .2s;
}
.obubble .oh { font-size: 12px; color: var(--blue-dark); }
.obubble .oi { display: flex; gap: 6px; }
.obubble .bw { display: inline-flex; align-items: center; gap: 2px; }
.obubble img { width: 24px; height: 24px; }
.obubble .or { display: flex; align-items: center; gap: 3px; color: #2e8b45; font-size: 14px; }
.obubble .or img { width: 22px; height: 16px; }
.tlabel {
  position: fixed; left: 0; top: 0; z-index: 1; background: rgba(20, 70, 100, .78); color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px;
  border-radius: 10px; pointer-events: none !important; white-space: nowrap; transition: opacity .2s;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tlabel small { display: none; font-size: 11px; font-weight: 600; color: #e6f6ff; white-space: normal; max-width: 190px; line-height: 1.2; }
.tlabel.near { background: rgba(20, 70, 100, .9); z-index: 2; }
.tlabel.near small { display: block; }

/* ---------- Fenster im Spiel */
.offer { display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid #ffd58a; border-radius: 16px; padding: 10px 12px; }
.offer.owned { border-color: #9fd98c; background: #f3ffee; }
.offer .oico { font-size: 38px; }
.offer .otxt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.offer .otxt b { font-size: 17px; }
.offer .otxt span { font-size: 13px; color: var(--ink-soft); font-weight: 600; line-height: 1.3; }
.offer .oprice { font-weight: 700; font-size: 18px; color: #d9730d; display: flex; flex-direction: column; align-items: center; }
.offer .oprice small { font-size: 11px; color: var(--ink-soft); }
.offer .oprice.ok { color: #3a9a2b; }

/* ---------- Titelbild: Logo oben, großer „Spielen“-Knopf unten (über dem Titelbild aus #startbg) */
#title { pointer-events: auto; overflow: hidden; }
.title-wrap { position: absolute; inset: 0; }
.ts-bottom {
  position: absolute; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); width: min(86vw, 440px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ts-play {
  width: 100%; border: 5px solid #fff; border-radius: 28px; padding: 14px 18px 18px; cursor: pointer; font: 700 clamp(30px, 8vw, 42px) Fredoka, system-ui, sans-serif;
  color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 #1f7a14; background: linear-gradient(#8ff06a, #45c92c 52%, #2f9e1d);
  box-shadow: 0 8px 0 #1f6b14, 0 14px 30px rgba(0,0,0,.35), inset 0 4px 0 rgba(255,255,255,.45); animation: playpulse 1.8s ease-in-out infinite;
}
/* Einzeiliges Schriftlogo auf dem Titelbild */
.ts-logo.line, .ks-logo.line { width: min(90vw, 500px); top: calc(3.5vh + var(--safe-top)); }
/* Spielname nur für Vorleseprogramme: das Logo steckt im Titelbild */
.ts-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (min-aspect-ratio: 1/1) { .ts-logo.line, .ks-logo.line { width: min(44vw, 460px); } }
.ts-play:active { transform: translateY(5px); box-shadow: 0 3px 0 #1f6b14, 0 8px 18px rgba(0,0,0,.35); animation: none; }
@keyframes playpulse { 50% { transform: scale(1.035); } }
.ts-save { display: flex; gap: 10px; align-items: center; background: rgba(255, 250, 238, .94); border: 3px solid #fff; border-radius: 18px; padding: 7px 14px; box-shadow: 0 6px 14px rgba(0,0,0,.2); font-weight: 600; font-size: 13px; color: var(--ink); }
.ts-save b { display: block; font-size: 15px; }
.ts-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ts-row .btn { background: rgba(20, 40, 80, .62); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
/* Quer: mittig unter dem Logo im Titelbild. Bildgröße wie bei background-size: cover (--wi × --hi), verschoben um den Ausschnitt */
@media (min-aspect-ratio: 1/1) {
  .ts-bottom {
    --wi: max(100vw, calc(100vh * var(--t-r))); --hi: max(100vh, calc(100vw / var(--t-r)));
    left: calc(var(--t-lx) * var(--wi) - var(--t-px) * (var(--wi) - 100vw));
    top: min(calc(var(--t-ly) * var(--hi) - var(--t-py) * (var(--hi) - 100vh) + 2vh), calc(100vh - 190px - var(--safe-bottom)));
    bottom: auto; width: clamp(240px, calc(var(--t-lw) * var(--wi) * .85), 420px);
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .ts-play { padding: 8px 14px 11px; font-size: 28px; }
  .ts-bottom { gap: 8px; top: min(calc(var(--t-ly) * var(--hi) - var(--t-py) * (var(--hi) - 100vh) + 2vh), calc(100vh - 90px - var(--safe-bottom))); }
  .ts-save { display: none; }
}
.save-card { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 10px 16px; box-shadow: var(--shadow); text-align: left; }
.save-card .sc-ico { font-size: 38px; }
.save-card b { display: block; font-size: 17px; }
.save-card span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.title-ranks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 12px; font-weight: 700; color: #2f5f1f; opacity: .85; }
.title-help { opacity: .9; }

@media (max-width: 640px) {
  .amoney { min-width: 0; font-size: 18px; padding: 0 12px 0 6px; }
  .amoney img { width: 32px; }
  .rank-card { min-width: 0; flex: 0 1 auto; }
  .rank-card .rc { min-width: 70px; }
  .rank-card .rc { min-width: 84px; }
  .rank-card .ri { width: 34px; height: 34px; font-size: 24px; }
  .minimap { width: 138px; height: 84px; }
  .acard .cb-ring { width: 50px; height: 50px; }
  .acard .cb-ring { font-size: 31px; }
  .amoney { height: 42px; }
  .amenu { width: 46px; height: 46px; }
  .aside { width: 178px; top: calc(62px + var(--safe-top)); }
  .agoal { font-size: 13px; padding: 6px 8px 7px; }
  .agoal .gi { width: 30px; height: 30px; font-size: 21px; }
  .aenter { bottom: calc(176px + var(--safe-bottom)); font-size: 15px; }
}
.fade { position: absolute; inset: 0; background: #fff7e8; z-index: 60; animation: fade .35s both; pointer-events: none !important; }
.fade.out { animation: fadeout .45s both; }
@keyframes fadeout { to { opacity: 0; } }

/* ---------- Geschichte (Figur spricht, antippen = weiter) */
.astory {
  position: absolute; inset: 0; z-index: 40; background: rgba(20, 30, 40, .28); display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px calc(92px + var(--safe-bottom)); cursor: pointer;
}
.st-card {
  width: 100%; max-width: 560px; display: flex; gap: 12px; align-items: flex-start; background: #fffaf0; border: 3px solid #fff;
  border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 12px 14px;
}
.st-card.in { animation: storyin .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes storyin { from { transform: translateY(30px); opacity: 0; } }
.st-ico { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #ffe9b8; display: grid; place-items: center; font-size: 42px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.st-body { flex: 1; min-width: 0; }
.st-name b { font-size: 17px; color: var(--blue-dark); }
.st-role { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.st-txt { margin: 4px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.38; color: var(--ink); }
.st-more { display: block; text-align: right; font-weight: 700; font-size: 14px; color: #e8743b; }
.st-card.paper { background: #f7f3e8; border-color: #e6dcc6; }
.st-card.paper .st-ico { background: #e9e2d0; }
.st-ico img.txt-face { width: 100%; height: 100%; vertical-align: top; }   /* Porträt füllt den Kreis */
.st-card.paper .st-txt { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 700; }
@media (max-width: 640px) {
  .astory { padding-bottom: calc(40px + var(--safe-bottom)); }
  .st-ico { width: 52px; height: 52px; font-size: 34px; }
  .st-txt { font-size: 14px; }
}

/* ---------- Menü (Kacheln) */
.menu-grid { display: flex; flex-direction: column; gap: 12px; }
.mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mtile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 10px; border: 2px solid var(--cream-line); border-radius: 16px;
  background: #fff; cursor: pointer; font: 700 14px var(--font); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.mtile:active { transform: translateY(2px); box-shadow: none; }
.mtile .mt-ico { font-size: 30px; line-height: 1; }
.mtile.gold { background: linear-gradient(#fff6d8, #ffe7a6); border-color: #f5c451; }

/* ---------- Einstellungen */
.set-list { display: flex; flex-direction: column; gap: 8px; }
.set-list h4 { margin: 6px 2px 0; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.set-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 8px 10px; }
.set-l { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.set-l b { font-size: 15px; }
.set-l small { font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
.seg { display: flex; background: #f1e3c6; border-radius: 12px; padding: 3px; gap: 2px; flex: none; }
.seg button { border: 0; background: none; font: 700 13px var(--font); color: var(--ink-soft); padding: 6px 9px; min-height: 36px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--blue-dark); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.tog { flex: none; width: 58px; height: 34px; border-radius: 15px; border: 0; background: #d9c9a8; position: relative; cursor: pointer; transition: background .2s; }
.tog i { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; }
.tog.on { background: var(--green); }
.tog.on i { transform: translateX(24px); }
.set-danger { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 2px 4px; }

/* ---------- Geschichte zum Nachlesen */
.chron { display: flex; flex-direction: column; gap: 6px; }
.chrow { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.chrow .ch-ico { font-size: 28px; width: 40px; height: 40px; border-radius: 50%; background: #ffe9b8; display: grid; place-items: center; flex: none; }
.chrow .ch-t { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chrow .ch-t b { font-size: 14px; color: var(--blue-dark); }
.chrow .ch-t span { font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.25; }
.chrow .ch-go { font-size: 18px; color: #e8743b; font-weight: 700; }

/* ---------- Stadtplan: die ganze Stadt passt auf einen Handy-Bildschirm (kein Scrollen) */
.panel.mapwide { width: min(720px, 100%); }
.mapview { display: flex; flex-direction: column; gap: 8px; }
.mhead { display: flex; gap: 8px; align-items: stretch; }
.mh-rank { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 6px 10px; }
.mh-rank > span { font-size: 30px; }
.mh-rank > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mh-rank b { font-size: 15px; }
.mh-rank small, .mh-count small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.mh-count { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 6px 10px; text-align: center; }
.mh-count b { font-size: 20px; color: var(--green-dark); }
.dbar { height: 8px; border-radius: 4px; background: #eadcbf; overflow: hidden; }
.dbar i { display: block; height: 100%; background: linear-gradient(#7fe05e, #3a9a2b); border-radius: 4px; }
.mmap { border-radius: 16px; background: #98a1a9; padding: 0 5px 5px; }
.mmap.mars { background: #c98a5e; padding-top: 5px; }
.msea { text-align: center; font-size: 12px; font-weight: 700; color: #e9f6ff; letter-spacing: 2px; background: linear-gradient(#3f8fe0, #6fb1e8); margin: 0 -5px 5px; padding: 4px 0; border-radius: 16px 16px 0 0; }
.mgrid { display: grid; gap: 3px; }
.mcell {
  position: relative; aspect-ratio: 1; border: 0; border-radius: 9px; cursor: pointer; font-family: var(--font); padding: 0; color: #2d3a22;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; min-width: 0; background: #c5ccd2;
}
.mcell .mc-ico { font-size: clamp(15px, 5.4vw, 30px); line-height: 1; }
.mcell .mc-name { display: none; font-size: 11px; font-weight: 700; line-height: 1.1; padding: 0 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcell.open { background: #d8f0c6; }
.mcell.ready { background: #fff4c4; color: #7a5200; box-shadow: inset 0 0 0 2px #ffc629; animation: readyglow 1.6s ease-in-out infinite; }
.mcell.locked { background: #aeb7be; color: #56606a; }
.mcell.locked .mc-ico { filter: grayscale(1); opacity: .45; }
.mcell .mc-lock { position: absolute; right: 1px; bottom: 0; font-size: 9px; line-height: 1.2; }
.mcell .mc-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: #e53935; color: #fff; font: 700 11px var(--font); display: grid; place-items: center; border: 2px solid #fff; z-index: 2; }
.mcell .mc-bar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.2); overflow: hidden; }
.mcell .mc-bar i { display: block; height: 100%; background: #2f9e3f; border-radius: 2px; }
.mcell.sel { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px #2467b0; z-index: 3; transform: scale(1.14); }
.mcell .mc-me, .mcell .mc-aim { position: absolute; top: -10px; left: 50%; margin-left: -9px; width: 18px; font-size: 16px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); z-index: 4; animation: aimbob 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes readyglow { 50% { box-shadow: inset 0 0 0 2px #ffc629, 0 0 10px rgba(255, 198, 41, .85); } }
@keyframes aimbob { 50% { transform: translateY(-3px); } }
.mlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.mlegend .lg::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 4px; vertical-align: -1px; }
.mlegend .lg.open::before { background: #b9e39f; }
.mlegend .lg.ready::before { background: #fff4c4; box-shadow: inset 0 0 0 2px #ffc629; }
.mlegend .lg.locked::before { background: #aeb7be; }
.minfo { background: #fff; border: 2px solid var(--cream-line); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 148px; }
.minfo.ready { border-color: #ffc629; background: #fffbe8; }
.mi-head { display: flex; gap: 10px; align-items: center; }
.mi-ico { font-size: 32px; width: 48px; height: 48px; border-radius: 14px; background: #f6ecd8; display: grid; place-items: center; flex: none; }
.mi-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mi-t b { font-size: 17px; line-height: 1.15; }
.mi-st { font-size: 13px; font-weight: 700; }
.mi-st.open { color: var(--green-dark); }
.mi-st.ready { color: #c77800; }
.mi-st.locked { color: var(--ink-soft); }
.mi-here { flex: none; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--blue-dark); background: #eaf4ff; border-radius: 9px; padding: 3px 8px; white-space: nowrap; }
.mi-about { margin: 0 !important; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.mi-acts:empty { display: none; }
/* breite Bildschirme (Tablet, Handy quer): größere Kacheln mit Namen */
@media (min-width: 700px) {
  .mcell { aspect-ratio: 1.25; }
  .mcell .mc-ico { font-size: 26px; }
  .mcell .mc-name { display: -webkit-box; }
  .mcell .mc-bar { bottom: 2px; }
}
@media (max-height: 460px) and (min-width: 600px) {
  .mapview { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-areas: 'map head' 'map info' 'legend info'; gap: 8px; align-items: start; }
  .mhead { grid-area: head; } .mmap { grid-area: map; } .mlegend { grid-area: legend; } .minfo { grid-area: info; min-height: 0; }
  .mcell { aspect-ratio: 1.5; }
  .mcell .mc-name { display: none; }
  .mcell .mc-ico { font-size: 20px; }
}
@media (max-width: 640px) {
  .mtiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mtile { font-size: 12.5px; padding: 10px 2px 8px; }
  .mtile .mt-ico { font-size: 26px; }
  .seg button { padding: 6px 7px; font-size: 12px; }
  .mhead { flex-direction: row; }
  .mh-rank b { font-size: 14px; }
}

/* ---------- Ablage ausbauen */
.upg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.upg-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--cream-line); border-radius: 16px; padding: 8px 10px; }
.upg-row.max { background: #f3fff0; border-color: #9fd98c; }
.upg-ico { font-size: 30px; width: 46px; height: 46px; border-radius: 14px; background: #f6ecd8; display: grid; place-items: center; flex: none; }
.upg-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upg-t b { font-size: 15px; }
.upg-t span { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.upg-t small { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
.upg-lv { display: flex; gap: 3px; }
.upg-lv i { width: 16px; height: 6px; border-radius: 3px; background: #e7d6b5; }
.upg-lv i.on { background: linear-gradient(#ffd45c, #f59f1b); }
.upg-row .btn img.bill { width: 22px; height: 15px; object-fit: contain; }
.upg-done { font-size: 22px; color: var(--green-dark); font-weight: 700; padding: 0 6px; }

/* Bildschärfe „Mittel“/„Spar“: keine Unschärfe hinter HUD-Kästen (teuer über dem bewegten 3D-Bild) */
body.lowfx .apill, body.lowfx .rank-card, body.lowfx .acap { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(28, 44, 52, .82); }

/* ---------- Hofstädter Bote: runder Knopf unter dem Shop-Knopf */
.abote { position: relative; align-self: flex-start; width: 66px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.abote .bt-ring { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; font-size: 25px;
  background: radial-gradient(circle at 35% 30%, #fffdf5, #e9dcc0 60%, #cdb88f); box-shadow: 0 4px 0 rgba(120, 90, 40, .45), 0 8px 16px rgba(0,0,0,.22); }
.abote .bt-badge { position: absolute; top: -4px; right: 4px; min-width: 22px; height: 22px; border-radius: 11px; background: #e53935; color: #fff; font: 700 13px var(--font); display: grid; place-items: center; border: 2px solid #fff; animation: badgepulse 1.4s ease-in-out infinite; }
.abote .bt-lbl { margin-top: -8px; position: relative; background: #5a3d1c; color: #fff; font: 700 11px var(--font); padding: 2px 8px; border-radius: 9px; border: 2px solid #fff; }
.abote:active { transform: scale(.94); }
@media (max-width: 640px) { .abote .bt-ring { width: 44px; height: 44px; font-size: 22px; } }

/* Kredit: kleiner roter Hinweis unter dem Geld */
.amoney { position: relative; }
.adebt { position: absolute; right: 6px; bottom: -13px; background: #c62828; color: #fff; font: 700 10px var(--font); padding: 1px 7px; border-radius: 8px; border: 2px solid #fff; white-space: nowrap; }

/* Menü: Kachel mit rotem Punkt */
.mtile { position: relative; }
.mtile.badge::after { content: ''; position: absolute; top: 6px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #e53935; border: 2px solid #fff; }

/* Wünsche der Einwohner */
.cbubble.wish { background: #fff5c2; border: 2px solid #f4c542; }
.cbubble.wish::before { content: '💬'; font-size: 15px; margin-right: 1px; }

/* Wissenskarten */
.wcard { text-align: center; }
.wcard .wc-ico { font-size: 54px; line-height: 1.1; }
.wcard h3 { margin: 4px 0 6px; font-size: 24px; color: var(--blue-dark); }
.wcard p { font-size: 16px; line-height: 1.35; font-weight: 600; margin: 6px 4px; }
.wlist { display: flex; flex-direction: column; gap: 8px; }
.wrow { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 8px 10px; border: 2px solid var(--cream-line); }
.wrow .wr-ico { font-size: 28px; line-height: 1.1; }
.wrow b { font-size: 15px; }
.wrow p { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.wrow.locked { opacity: .55; }

/* Hofstädter Bote */
.bote { display: flex; flex-direction: column; gap: 8px; }
.bote-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px double #b9a27a; padding-bottom: 4px; }
.bote-head b { font-size: 24px; font-family: Georgia, 'Times New Roman', serif; color: #3d2b16; }
.bote-head span { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.bote-fest { background: #fff1c9; border: 2px solid #f4c542; border-radius: 12px; padding: 6px 10px; font-weight: 700; font-size: 14px; }
.bote-lead { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.brow { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 10px; border: 2px solid var(--cream-line); }
.brow .br-ico { font-size: 26px; }
.brow .br-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brow .br-t b { font-size: 14px; }
.brow .br-t small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.brow .br-ok { font-size: 22px; color: #3a9a2b; font-weight: 700; }
.brow.done { border-color: #9fd98c; background: #f3ffee; }
.brow.claimed { opacity: .6; }
.brow.fest { border-color: #f4c542; }
.brow.bonus { background: #fffaf0; }
.btn .bill, .btn img.bill { width: 20px; height: 15px; vertical-align: -2px; margin-right: 3px; }

/* Kredit */
.loanbox { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.loanbox h4 { margin: 6px 0 0; }
.loanbox .loan-full { margin: 0; background: #fff4e0; border: 2px solid #f3c77a; border-radius: 12px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: #8a5a12; line-height: 1.3; }
.loanbox .row { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; background: #fff; border-radius: 10px; padding: 6px 10px; }
.loanbox b.debt { color: #c62828; }
.loanbox .btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.loanbox .btns .btn { min-width: 0; white-space: normal; line-height: 1.15; padding-left: 6px; padding-right: 6px; }
.tabview .loanbox { margin-top: 0; }
.tabview .loanbox h4 { display: none; }

.photo-prev img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 14px; background: #eee; }
.panel-foot a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Stadtchronik */
.chron-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.chron-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 6px; cursor: pointer; font-family: inherit; }
.chron-cell img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: #dfeee6; }
.chron-cell b { font-size: 14px; }
.chron-cell small { font-size: 11px; color: var(--ink-soft); font-weight: 600; }

/* Garderobe */
.wr-tabs { margin-bottom: 8px; flex-wrap: wrap; }
.wr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wr-card { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 3px solid var(--cream-line); border-radius: 14px; padding: 6px; text-align: center; }
.wr-card.on { border-color: #7cc4ff; background: #f0f8ff; }
.wr-card img { width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: contain; }
.wr-card b { font-size: 13px; }
.wr-card small { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.2; }
.wr-lock { font-size: 11px; font-weight: 700; color: var(--ink-soft); padding: 8px 0; }
@media (max-width: 380px) { .wr-grid { grid-template-columns: repeat(2, 1fr); } }

/* Spielstand sichern */
.save-tools { display: flex; flex-direction: column; gap: 8px; }
.save-tools p { margin: 0; font-weight: 600; font-size: 14px; }
.save-tools .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.save-tools a.btn { text-decoration: none; }
.save-code { width: 100%; border-radius: 12px; border: 2px solid var(--cream-line); padding: 8px; font: 12px ui-monospace, Menlo, monospace; resize: vertical; user-select: text; -webkit-user-select: text; }
.set-danger { flex-wrap: wrap; gap: 8px; }

/* Lastenrad-Knopf: rund am rechten Rand (gegenüber dem Aktions-Knopf) */
.abike {
  position: absolute; right: calc(10px + var(--safe-right)); top: 52%; transform: translateY(-50%); z-index: 22;
  display: flex; flex-direction: column; align-items: center; width: 92px; border: 0; background: none; padding: 0; cursor: pointer;
  color: #fff; font: 700 12px Fredoka, system-ui, sans-serif;
}
.abike .bk-ring {
  width: 62px; height: 62px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #bfe4ff, #3f8fe0 60%, #2a66b5); box-shadow: 0 4px 0 #1f4f8f, 0 8px 16px rgba(0,0,0,.28);
}
.abike .bk-lbl { margin-top: -9px; position: relative; background: #1f3f6a; padding: 3px 9px 4px; border-radius: 10px; border: 2px solid #fff; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.abike.on .bk-ring { background: radial-gradient(circle at 35% 30%, #ffe9a8, #f4a93b 60%, #d9801a); box-shadow: 0 4px 0 #a45e10, 0 8px 16px rgba(0,0,0,.28); }
.abike.off { opacity: .6; pointer-events: none; }
.abike:active .bk-ring { transform: translateY(3px); box-shadow: 0 1px 0 #1f4f8f; }

/* Bauarbeiter zuteilen */
.crew-need { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.crew-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 7px 10px; }
.crew-row b { display: block; }
.crew-row small { color: #4d7a3a; font-weight: 600; }
.crew-row.wait small { color: #b36b12; }
.crew-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.crew-btns .btn { min-width: 64px; }

/* ---------- Juice: Schwebetexte ploppen auf, Knöpfe geben nach, Blitz bei neuer Stadtstufe */
.ftext { animation: fpop .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fpop { 0% { scale: .2; } 55% { scale: 1.22; } 100% { scale: 1; } }
.btn, .aact, .abike, .tile-btn, .menu-tile, .hud-round, .bote-btn { transition: scale .12s ease-out, filter .12s; }
.btn:active, .aact:active, .abike:active, .menu-tile:active, .bote-btn:active { scale: .92; filter: brightness(1.08); }
.flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 250, 220, .95), rgba(255, 240, 180, .45) 45%, rgba(255, 240, 180, 0) 75%); animation: flash .7s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Korb voll: „Leeren“-Hinweis (Text in data-empty, je nach Sprache); Wünsche: Belohnung in der Blase, leuchtet, wenn man die Ware dabei hat */
.acap.full::after {
  content: attr(data-empty); position: absolute; top: -26px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: #e8543f; color: #fff; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25); animation: capPulse 1.1s ease-in-out infinite; pointer-events: none;
}
@keyframes capPulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.cbubble .bwr { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #eaf8e2; color: #2e7d32; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cbubble.wish.have { box-shadow: 0 0 0 3px #7ed36b, 0 3px 10px rgba(60, 170, 70, .5); animation: wishGlow 1s ease-in-out infinite; }
@keyframes wishGlow { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
.ftext.wish { color: #3b2a1e; background: #fff; padding: 5px 12px; border-radius: 14px; font-size: 15px; text-shadow: none; box-shadow: 0 3px 10px rgba(0,0,0,.2); }

/* GM-Modus (Test-Werkzeuge) */
.agm { font-size: 20px; background: #3a3f47; width: 44px; height: 44px; align-self: center; }
.gm .gm-state { background: #2f3542; color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.gm .gm-row, .gm .gm-ranks { display: flex; flex-wrap: wrap; gap: 6px; }
.gm .gm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; }
.gm .gm-it { border: 2px solid transparent; background: #f6ecd8; border-radius: 9px; padding: 3px; cursor: pointer; }
.gm .gm-it img { width: 100%; display: block; }
.gm .gm-it.on { border-color: #3f8fe0; background: #e3f0ff; }
.gm .gm-dists { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.gm .gm-d { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #f1e3c6; border-radius: 9px; padding: 4px 4px 4px 8px; font-size: 13px; opacity: .75; }
.gm .gm-d.open { background: #dff3d8; opacity: 1; }
.gm .gm-d span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm .gm-note { min-height: 1.2em; margin: 4px 0 0; font-weight: 600; color: #2e7d32; }
.gm-stats { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 30; pointer-events: none;
  background: rgba(20, 24, 32, .78); color: #fff; font: 600 12px/1.3 ui-monospace, Menlo, monospace; padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.agm[hidden] { display: none; }

/* ============================================================ Große Momente (world-celebrate.js) */
/* Filmbalken während der Kamerafahrt; die übrige Oberfläche tritt zurück */
.cine { position: absolute; inset: 0; pointer-events: none !important; z-index: 34; }
.cine i { position: absolute; left: 0; right: 0; height: 0; background: #111; transition: height .45s cubic-bezier(.3,.8,.3,1); }
.cine i:first-child { top: 0; } .cine i:nth-child(2) { bottom: 0; }
.cine.on i { height: 9vh; }
.cine-skip { position: absolute; right: 16px; bottom: calc(2vh + var(--safe-bottom)); color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .4s .6s; }
.cine.on .cine-skip { opacity: 1; }
.cine.noskip .cine-skip { display: none; }
.cinema .ahud-top, .cinema .aside, .cinema .acap, .cinema .aact, .cinema .abike, .cinema .tlabel, .cinema .cbubble, .cinema .obubble, .cinema .knowcard { opacity: 0 !important; transition: opacity .3s; pointer-events: none !important; }

/* Viertel-Titel: Wappen federt herein, Name mit Band, neue Waren ploppen nacheinander auf */
.dtitle { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 36; pointer-events: none !important;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; animation: dtin .6s cubic-bezier(.2,1.5,.4,1) both; }
.dtitle.out { animation: dtout .55s ease-in forwards; }
@keyframes dtin { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
@keyframes dtout { to { transform: translate(-50%, -120%) scale(.85); opacity: 0; } }
.dt-crest { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 50px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--dc) 70%); border: 5px solid #fff;
  box-shadow: 0 0 0 5px var(--dc), 0 12px 30px rgba(0,0,0,.35), 0 0 60px var(--dc); animation: crest 1.1s cubic-bezier(.2,1.6,.4,1) both; }
.dt-crest span { filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
@keyframes crest { 0% { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.12) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.dt-name { font-size: clamp(30px, 7vw, 52px); font-weight: 700; color: #fff; line-height: 1.05; letter-spacing: .5px;
  -webkit-text-stroke: 7px var(--dc); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.35); animation: fpop .5s .15s cubic-bezier(.2,1.6,.4,1) both; }
.dt-rib { position: relative; background: linear-gradient(#ffd94a, #f0a820); color: #5a3400; font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 26px; border-radius: 6px; box-shadow: 0 4px 0 #c47e10, 0 8px 18px rgba(0,0,0,.3); overflow: hidden; animation: fpop .45s .35s cubic-bezier(.2,1.6,.4,1) both; }
.dt-rib::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: shine 1.1s .8s ease-in-out; }
@keyframes shine { to { transform: translateX(120%); } }
.dt-new { display: flex; align-items: center; gap: 6px; background: rgba(255,247,232,.95); border: 3px solid #fff; border-radius: 16px; padding: 4px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.2); animation: fpop .4s .5s both; }
.dt-new small { font-weight: 700; color: var(--ink-soft); font-size: 13px; margin-right: 2px; white-space: nowrap; }
.dt-new img { width: 34px; height: 34px; animation: fpop .45s cubic-bezier(.2,1.8,.4,1) both; }

/* Stufen-Abzeichen über einem Gebäude */
.lvbadge { position: absolute; left: 0; top: 0; z-index: 26; pointer-events: none !important; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lvbadge b { background: linear-gradient(#6fd06a, #2f9e3f); color: #fff; font-size: 20px; padding: 4px 14px; border-radius: 14px; border: 3px solid #fff;
  box-shadow: 0 4px 0 #1f7a2d, 0 8px 18px rgba(0,0,0,.3); animation: badgein .55s cubic-bezier(.2,1.8,.4,1) both; white-space: nowrap; }
@keyframes badgein { from { transform: scale(0) translateY(20px); } }
.lv-stars { display: flex; gap: 1px; }
.lv-stars i { font-style: normal; color: #ffd23f; font-size: 22px; -webkit-text-stroke: 2px #b77a00; paint-order: stroke fill; animation: starin .5s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes starin { from { transform: scale(0) rotate(-120deg); opacity: 0; } }
.lvbadge { animation: badgeout .45s 2.75s ease-in forwards; }
.lv-chip { margin-top: 3px; color: #2a5a1f; background: #fff; padding: 3px 10px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px rgba(0,0,0,.2); border: 2px solid #8fd48a; white-space: nowrap; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; animation: fpop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes badgeout { to { opacity: 0; } }
.ftext.chip { color: #2a5a1f; background: #fff; padding: 3px 10px; border-radius: 12px; font-size: 15px; text-shadow: none; box-shadow: 0 3px 10px rgba(0,0,0,.2); border: 2px solid #8fd48a; }

/* Wissenskarte: unten, blockiert nicht */
.knowcard { position: absolute; left: 50%; bottom: calc(66px + var(--safe-bottom)); transform: translateX(-50%); z-index: 33; width: min(440px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; cursor: pointer;
  background: rgba(255,250,238,.97); border: 3px solid #fff; border-radius: 20px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  animation: kcin .5s cubic-bezier(.2,1.4,.4,1) both; }
.knowcard.out { animation: kcout .4s ease-in forwards; }
@keyframes kcin { from { transform: translate(-50%, 140%); } }
@keyframes kcout { to { transform: translate(-50%, 140%); opacity: 0; } }
.kc-ico { font-size: 38px; width: 54px; height: 54px; display: grid; place-items: center; background: #fff1c9; border-radius: 16px; grid-row: span 2; animation: crest .8s .2s both; }
.kc-t small { display: block; font-weight: 700; color: #c78a10; font-size: 12px; letter-spacing: .4px; }
.kc-t b { font-size: 17px; }
.kc-t p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kc-go { grid-column: 2; justify-self: start; margin-top: 4px; animation: kcpulse 1.4s 1s ease-in-out infinite; }
@keyframes kcpulse { 50% { transform: scale(1.06); } }
.coinfly { position: absolute; left: 0; top: 0; width: 34px; height: 26px; margin: -13px 0 0 -17px; z-index: 60; pointer-events: none !important; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
/* Aufgabenkarte: „Hinlaufen“ und „Hinfahren“ (Stadtbus) nebeneinander */
.agoal .gacts { display: flex; gap: 6px; flex-wrap: wrap; }
.agoal .gbus { background: #f4a93b; cursor: pointer; }
.agoal .gbus[hidden] { display: none; }
/* Aufgabenkarte: Bedarf als Symbole (abgeliefert / nötig); grün = fertig, „+3🧺“ = trägst du schon */
.agoal .gneeds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.agoal .gneeds[hidden] { display: none; }
.agoal .gn { display: inline-flex; align-items: center; gap: 3px; background: #f1e3c6; border-radius: 9px; padding: 2px 7px 2px 3px; font-size: 12px; }
.agoal .gn img { width: 20px; height: 20px; object-fit: contain; }
.agoal .gn b { font-variant-numeric: tabular-nums; }
.agoal .gn small { font-weight: 700; color: #2f7d3a; }
.agoal .gn.ok { background: #d8f0cf; color: #2f7d3a; }
.agoal .gn.ok b::after { content: ' ✓'; }
.agoal .gn.carry { background: #fff3c4; }
/* Info-Karte „Woher bekomme ich …?“ (unter der Aufgabenkarte) */
.agoal .gn { cursor: pointer; }
.srccard { position: relative; margin-top: 8px; background: rgba(255,250,238,.98); border: 3px solid #fff; border-radius: 18px; padding: 10px 12px 10px; box-shadow: 0 8px 22px rgba(0,0,0,.22);
  font-size: 13px; line-height: 1.35; pointer-events: auto; animation: fpop .35s cubic-bezier(.2,1.5,.4,1) both; max-width: 100%; }
.srccard .close { position: absolute; right: 6px; top: 6px; border: 0; background: transparent; font-size: 15px; cursor: pointer; color: var(--ink-soft); }
.src-h { display: flex; align-items: center; gap: 8px; padding-right: 20px; }
.src-h img { width: 30px; height: 30px; object-fit: contain; }
.src-h b { font-size: 15px; }
.srccard p { margin: 6px 0 0; }
.src-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.src-in span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.src-in img { width: 20px; height: 20px; }
.src-st { font-weight: 700; }
.src-st.ready { color: #2f7d3a; } .src-st.build { color: #b36b00; } .src-st.district { color: #a0442f; }
.src-acts { display: flex; gap: 6px; margin-top: 8px; }
.src-acts:empty { display: none; }
.ffrom { font-size: 13px; }
.fcard.locked { opacity: .6; filter: grayscale(.5); }
.ftag.flock { background: #f6dcd3; color: #a0442f; font-size: 12px; }
/* Nebenbei-Karte unter der Hauptaufgabe: kleiner, grün abgesetzt */
.aside2 { display: flex; flex-direction: column; gap: 2px; text-align: left; margin-top: 8px; width: 100%; cursor: pointer; font-family: inherit;
  background: rgba(236, 248, 230, .96); border: 3px solid #fff; border-radius: 16px; padding: 7px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.15); color: var(--ink); }
.aside2[hidden] { display: none; }
.aside2 .sd-h { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #3f8a3a; }
.aside2 .sd-t { font-size: 13px; font-weight: 600; line-height: 1.25; }
.aside2 .gacts { display: flex; gap: 6px; margin-top: 3px; }
.aside2 .ggo { font-size: 12px; font-weight: 700; color: #fff; background: #4caf50; border-radius: 10px; padding: 2px 9px; }
.aside2 .gbus { background: #f4a93b; }
.aside2 .gbus[hidden] { display: none; }
.aside2.walking .ggo:first-child { background: #e8743b; }
.aside2:active { transform: scale(.98); }

/* ============================================================ Handy-Überarbeitung: nichts scrollt, klare Kategorien */
/* ---------- Einstellungen: Kacheln, Unterseiten, Sprachwahl */
.set-tiles { grid-template-columns: repeat(3, 1fr); }
.set-row.col { flex-direction: column; align-items: stretch; gap: 6px; }
.set-row.col .seg { align-self: stretch; }
.set-row.col .seg button { flex: 1; min-height: 40px; font-size: 14px; }
.set-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px;
  padding: 8px 12px; cursor: pointer; font: 700 15px var(--font); color: var(--ink); text-align: left; box-shadow: 0 3px 0 rgba(0,0,0,.06);
}
.set-link:active { transform: translateY(2px); box-shadow: none; }
.set-link .sl-i { font-size: 22px; line-height: 1; }
.set-link .sl-t { flex: 1; min-width: 0; }
.set-link .sl-go { font-size: 20px; color: var(--ink-soft); }
.set-link.danger { color: #c23b33; }
.set-link.slim { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lang-b {
  min-height: 46px; border: 2px solid var(--cream-line); border-radius: 14px; background: #fff; cursor: pointer; color: var(--ink);
  font: 700 16px var(--font), system-ui, sans-serif; box-shadow: 0 3px 0 rgba(0,0,0,.06);
}
.lang-b.on { border-color: var(--blue); background: #eaf4ff; color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue); }
.acc-box { text-align: center; background: #fff; border: 2px solid var(--cream-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.acc-ico { font-size: 40px; line-height: 1; }
.acc-box b { font-size: 17px; }
.acc-box p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.legal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.legal-list .set-link { line-height: 1.15; }
.legal-foot { margin: 4px 0 0 !important; font-size: 12px; }

/* ---------- Shop im Vollbild (js/arcade/game-shop.js): ein Angebot groß, unten alle Angebote zum Wechseln */
.shopfs {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; overflow: hidden; animation: fade .18s;
  padding: calc(6px + var(--safe-top)) calc(14px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(14px + var(--safe-left));
  background: radial-gradient(130% 75% at 50% 0%, #7cc7ff, #3f8de0 55%, #2a62b4); color: #fff; touch-action: none;
}
.shopfs[data-offer="nightshift"] { background: radial-gradient(130% 75% at 50% 0%, #4b5fb0, #27357a 55%, #141c48); }
.shopfs[data-offer="starter"] { background: radial-gradient(130% 75% at 50% 0%, #ffd77a, #f29a2e 55%, #c96a14); }
.shopfs[data-offer="boost"] { background: radial-gradient(130% 75% at 50% 0%, #ff9db0, #e8506a 55%, #b52f4f); }
.sf-rays { position: absolute; left: 50%; top: 38%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none; opacity: .13;
  background: repeating-conic-gradient(#fff 0 9deg, transparent 9deg 18deg); animation: sfspin 60s linear infinite; }
@keyframes sfspin { to { transform: rotate(360deg); } }
.sf-top { position: relative; flex: none; width: 100%; max-width: 460px; height: 50px; display: grid; place-items: center; }
.sf-title { font-size: 30px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 6px 12px rgba(0,0,0,.25); }
.sf-close { position: absolute; right: 0; top: 3px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(var(--red), var(--red-dark)); color: #fff;
  font: 700 22px var(--font); line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.sf-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Name des Angebots: dicke weiße Schrift mit farbigem Rand, ragt in die Karte hinein */
.sf-name { position: relative; z-index: 2; flex: none; margin: 6px 0 -16px; padding: 0 6px; max-width: 100%; text-align: center; text-wrap: balance;
  font-size: clamp(30px, 10vw, 46px); line-height: .98; font-weight: 700; color: #fff; --o: #2b5fb5;
  text-shadow: 3px 0 0 var(--o), -3px 0 0 var(--o), 0 3px 0 var(--o), 0 -3px 0 var(--o), 2px 2px 0 var(--o), -2px 2px 0 var(--o), 2px -2px 0 var(--o), -2px -2px 0 var(--o), 0 7px 0 var(--o), 0 10px 10px rgba(0,0,0,.35); }
.shopfs[data-offer="nightshift"] .sf-name { --o: #6a3fc0; }
.shopfs[data-offer="starter"] .sf-name { --o: #d8760c; }
.shopfs[data-offer="boost"] .sf-name { --o: #b3243f; }
.sf-card { position: relative; flex: 1 1 auto; min-height: 0; max-height: 640px; width: 100%; display: flex; flex-direction: column; border-radius: 30px; border: 7px solid #ffe9c4;
  background: var(--cream); box-shadow: 0 0 0 3px #b9814a, 0 9px 0 3px rgba(0,0,0,.18), 0 20px 34px rgba(0,0,0,.3); color: var(--ink); }
.sf-card.in { animation: pop .22s ease-out; }
/* Bild: Himmel und Wiese (Nachtschicht: Nachthimmel mit Sternen); gibt Höhe ab, wenn die Texte darunter länger sind */
.sf-scene { position: relative; flex: 1 1 0; min-height: 96px; border-radius: 22px 22px 0 0; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(60% 46% at 22% 108%, #7ed957 0 99%, transparent 100%), radial-gradient(70% 50% at 82% 112%, #5cc446 0 99%, transparent 100%),
    radial-gradient(18% 10% at 20% 24%, rgba(255,255,255,.9) 0 99%, transparent 100%), radial-gradient(24% 12% at 78% 36%, rgba(255,255,255,.75) 0 99%, transparent 100%),
    linear-gradient(#69bdff, #c9ecff 78%); }
.shopfs[data-offer="nightshift"] .sf-scene { background: radial-gradient(60% 46% at 22% 108%, #2f6b4a 0 99%, transparent 100%), radial-gradient(70% 50% at 82% 112%, #245a3f 0 99%, transparent 100%),
    radial-gradient(2px 2px at 16% 22%, #fff 0 99%, transparent 100%), radial-gradient(2px 2px at 34% 12%, #fff 0 99%, transparent 100%), radial-gradient(3px 3px at 72% 18%, #fff 0 99%, transparent 100%),
    radial-gradient(2px 2px at 86% 40%, #fff 0 99%, transparent 100%), radial-gradient(2px 2px at 60% 8%, #fff 0 99%, transparent 100%), radial-gradient(2px 2px at 8% 48%, #fff 0 99%, transparent 100%),
    linear-gradient(#1c2a66, #4a5cb8 80%); }
.sf-scene > * { grid-area: 1 / 1; }
.sf-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 52%, rgba(255, 246, 190, .95), rgba(255, 226, 130, .4) 34%, transparent 60%); }
.sf-art { position: relative; height: 80%; max-width: 82%; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); animation: shbob 2.6s ease-in-out infinite; -webkit-user-drag: none; }
.shopfs[data-offer="mayor"] .sf-art { height: 88%; max-width: 94%; }
/* Goldkarte: Geldscheine regnen durch den Rahmen (game-shop.js, .sf-rain) */
.sf-rain { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sf-rain img { position: absolute; top: -14%; width: var(--w, 13%); filter: drop-shadow(0 3px 3px rgba(0,0,0,.22)); animation: billfall var(--d, 3.2s) linear var(--t, 0s) infinite; opacity: 0; }
@keyframes billfall { 0% { top: -14%; transform: translateX(0) rotate(var(--r0, -20deg)); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateX(var(--sx, 18px)) rotate(var(--r1, 30deg)); } 90% { opacity: 1; } 100% { top: 104%; transform: translateX(0) rotate(var(--r0, -20deg)); opacity: 0; } }
.shopfs[data-offer="starter"] .sf-art { height: 94%; max-width: 100%; align-self: end; object-position: 50% 100%; animation: none; }
.sf-art2 { position: absolute; inset: auto 5% 5% auto; height: 30%; filter: drop-shadow(0 6px 5px rgba(0,0,0,.28)); animation: shbob 2.6s ease-in-out infinite; }
.sf-x2 { position: absolute; right: 8%; top: 9%; min-width: 58px; padding: 6px 10px; border-radius: 18px; border: 3px solid #fff; background: linear-gradient(#ffb42e, #e2841a); color: #fff;
  font-size: 26px; font-weight: 700; text-align: center; rotate: 9deg; text-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
@keyframes shbob { 50% { transform: translateY(-6px); } }
.sf-perks { flex: none; margin: 10px 10px 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 2px solid var(--cream-line); border-radius: 16px; }
.sf-perk { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.22; text-align: left; }
.sf-pi { flex: none; width: 34px; font-size: 27px; line-height: 1; text-align: center; }
.sf-pimg { display: block; width: 34px; height: 34px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; background: #ffe08a; }
.sf-buybox { flex: none; display: flex; justify-content: center; margin: 12px 0 -28px; }
/* Preis-Knopf: groß und grün, mit hellem Rand wie die Karte */
.sf-buy, .sf-run { position: relative; z-index: 2; min-width: 64%; min-height: 60px; padding: 8px 26px; border-radius: 22px; border: 4px solid #ffe9c4; color: #fff; cursor: pointer;
  font: 700 clamp(24px, 7.4vw, 32px) var(--font); line-height: 1.1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(#8be04a, #46b62a 55%, #3a9a2b); box-shadow: 0 0 0 3px #b9814a, inset 0 3px 0 rgba(255,255,255,.4), 0 7px 0 3px rgba(0,0,0,.2);
  text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 0 4px rgba(0,0,0,.35); transition: transform .08s; }
.sf-buy:active { transform: translateY(3px); }
.sf-buy.video { font-size: clamp(19px, 5.6vw, 24px); }
.sf-buy.own { background: linear-gradient(#cfd6dc, #9aa3ab); cursor: default; font-size: clamp(19px, 5.6vw, 24px); }
.sf-buy.disabled { filter: grayscale(.85); opacity: .75; pointer-events: none; }
.sf-run { background: linear-gradient(#ffb42e, #e2841a); cursor: default; font-size: clamp(18px, 5.2vw, 22px); font-variant-numeric: tabular-nums; }
.sf-note { flex: none; margin: 40px 0 0; min-height: 17px; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Alle Angebote: runde Knöpfe; das gezeigte ist größer und golden umrandet, Gekauftes trägt einen Haken */
.sf-tabs { position: relative; flex: none; display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.sf-tab { position: relative; width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 4px solid #fff; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6d0, #ffd86b 70%, #f0a820); box-shadow: 0 4px 0 rgba(0,0,0,.22); transition: transform .12s; }
.sf-tab img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; }
.sf-tab[data-offer="starter"] img { width: 96%; height: 96%; border-radius: 50%; object-position: 50% 100%; }
.sf-tab[data-offer="nightshift"] { background: radial-gradient(circle at 35% 30%, #6f83d6, #2f3f8e 75%); }
.sf-tab.on { transform: scale(1.14); border-color: #ffe14a; box-shadow: 0 0 0 3px #d8760c, 0 5px 0 3px rgba(0,0,0,.22); }
.sf-tab.own::after { content: '✓'; position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--green-dark); color: #fff;
  font: 700 15px var(--font); line-height: 20px; text-align: center; }
.sf-foot { position: relative; flex: none; min-height: 40px; margin-top: 4px; display: grid; place-items: center; }
.sf-restore { background: none; border: 0; color: #fff; font: 600 14px var(--font); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding: 6px 14px; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* kleine Handys: alles etwas enger */
@media (max-height: 700px) {
  .sf-top { height: 44px; } .sf-title { font-size: 26px; } .sf-close { width: 40px; height: 40px; top: 2px; }
  .sf-name { font-size: clamp(26px, 8.6vw, 38px); margin: 4px 0 -13px; }
  .sf-perks { margin: 8px 8px 0; padding: 6px 8px; gap: 4px; } .sf-perk { font-size: 13.5px; gap: 8px; } .sf-pi { width: 28px; font-size: 22px; }
  .sf-buy, .sf-run { min-height: 52px; } .sf-buybox { margin: 9px 0 -25px; } .sf-note { margin-top: 34px; font-size: 12px; }
  .sf-tab { width: 52px; height: 52px; border-width: 3px; } .sf-tabs { gap: 10px; margin-top: 7px; } .sf-foot { min-height: 34px; margin-top: 2px; } .sf-restore { min-height: 34px; font-size: 13px; }
}
/* Handy quer: Bild links, Text und Knopf rechts */
@media (max-height: 500px) and (min-aspect-ratio: 13/10) {
  .shopfs { padding-top: calc(4px + var(--safe-top)); }
  .sf-top { position: absolute; right: calc(10px + var(--safe-right)); top: calc(6px + var(--safe-top)); width: auto; height: auto; } .sf-title { display: none; } .sf-close { position: static; }
  .sf-stage { max-width: 640px; } .sf-name { font-size: 30px; margin-bottom: -12px; }
  .sf-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; }
  .sf-scene { grid-row: span 2; height: 100%; min-height: 150px; border-radius: 22px 0 0 22px; }
  .sf-perks { margin: 10px; } .sf-buybox { margin: 0 0 10px; } .sf-note { margin-top: 8px; }
  .sf-foot { position: absolute; left: calc(10px + var(--safe-left)); bottom: calc(6px + var(--safe-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .sf-rays, .sf-art, .sf-art2 { animation: none; } .sf-rain { display: none; } }

/* ---------- Wissenskarten: Raster mit Symbolen, Karte darunter */
.wcards { display: flex; flex-direction: column; gap: 8px; }
.wcards > .muted { margin: 0; }
.wc-grid, .wc-grid.pg-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wc-cell { aspect-ratio: 1; border: 2px solid var(--cream-line); border-radius: 12px; background: #fff; font-size: clamp(18px, 5.6vw, 26px); cursor: pointer; padding: 0; line-height: 1; font-family: var(--font); }
.wc-cell.locked { background: #efe6d2; opacity: .6; }
.wc-cell.sel { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 143, 224, .35); }
.wc-detail { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid var(--cream-line); border-radius: 16px; padding: 10px 12px; min-height: 132px; }
.wc-detail .wc-ico { font-size: 40px; line-height: 1.1; flex: none; }
.wc-detail .wc-t { flex: 1; min-width: 0; }
.wc-detail b { font-size: 16px; color: var(--blue-dark); }
.wc-detail p { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }

/* ---------- Blättern in Listen und Rastern */
.chron-grid.pg-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wr-grid.pg-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wr-card { min-width: 0; justify-content: space-between; }
.wr-card .btn { white-space: normal; line-height: 1.1; padding: 6px 8px; font-size: 13px; max-width: 100%; }
.wr-card b { line-height: 1.15; overflow-wrap: anywhere; }
.wr-tabs { display: flex; }
.wr-tabs button { flex: 1; min-width: 0; padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrow .ch-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tips.pg-list { gap: 8px; }
.tips .tip { margin: 0; background: #fff; border: 2px solid var(--cream-line); border-radius: 14px; padding: 10px 12px; font-weight: 600; font-size: 15px; line-height: 1.35; }
.br-acts { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.wb-night { font-weight: 700; color: #2b3f7a; }
.bankbox .btns .btn { min-width: 0; white-space: normal; line-height: 1.15; }
.panel-foot .btn { min-height: 44px; }

/* ---------- Lesbarkeit: keine winzigen Schriften im Spielbild */
.tlabel { font-size: 14px; padding: 4px 11px; background: rgba(15, 55, 85, .86); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.tlabel small { font-size: 12.5px; color: #f0f9ff; }
.tlabel.near { background: rgba(15, 55, 85, .94); }
.cbubble { font-size: 15px; }
.obubble { font-size: 14px; } .obubble .oh { font-size: 13px; }
.rank-card b { font-size: 16px; } .rank-card .pt { font-size: 13px; }
.agoal .gh { font-size: 13px; } .agoal .ggo, .aside2 .ggo { font-size: 13px; padding: 4px 11px; border-radius: 11px; }
.agoal .gstep { font-size: 13px; } .agoal .gn { font-size: 13px; }
.aside2 .sd-h { font-size: 12px; } .aside2 .sd-t { font-size: 14px; }
.acard .cb-lbl, .abote .bt-lbl { font-size: 12px; padding: 2px 9px; }
.adebt { font-size: 11.5px; }
.aquest .qh, .aquest .qrow { font-size: 14px; }
.mtile { min-height: 72px; }
.wr-card small, .fcard .fstyle, .chron-cell small, .upg-t small { font-size: 12px; }
.req .nm { font-size: 12px; }
@media (max-width: 640px) {
  .aside { width: 188px; }
  .agoal { font-size: 14px; }
  .mtile { font-size: 13px; }
}
/* sehr schmale Handys (320 px): Aufgabenkarte etwas schmaler, damit links Platz bleibt */
@media (max-width: 350px) {
  .aside { width: 160px; }
  .minimap { width: 120px; height: 73px; }
  .rank-card .rc { min-width: 70px; }
  .wc-grid { gap: 4px; }
}

/* ---------- Kopfzeile auf dem Handy: passt auch bei großen Beträgen und mit allen Symbolen (nichts ragt über den Rand) */
@media (max-width: 640px) {
  .ahud-top { gap: 6px; padding: calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left)); }
  .hud-left { min-width: 0; flex: 0 1 auto; }
  .rank-card { max-width: 150px; }
  .amoney { font-size: 17px; padding: 0 10px 0 5px; gap: 5px; min-width: 0; height: 44px; }
  .amoney img { width: 28px; height: 22px; }
  .amoney.card::after { font-size: 13px; margin-left: 0; }
  .aside { top: calc(66px + var(--safe-top)); right: calc(8px + var(--safe-right, 0px)); }
}

/* ============================================================ Nie scrollen
   Das Fenster misst nach (js/ui/dom.js → fitPanel): Listen werden geblättert; reicht das nicht, wird es „eng“ (.tight):
   weniger Abstand, kleinere Bilder, Neben-Hinweise (.opt) ausgeblendet. Die Schrift bleibt gleich groß. */
.panel.tight .panel-body { padding: 10px; }
.panel.tight .panel-body p { margin-bottom: 6px; }
.panel.tight .panel-foot { padding: 0 10px 10px; gap: 8px; }
.panel.tight .opt, .panel.tight .set-l small { display: none !important; }
.panel.tight .menu-grid { gap: 8px; }
.panel.tight .mtiles { gap: 6px; }
.panel.tight .mtile { min-height: 60px; padding: 7px 2px 6px; }
.panel.tight .mtile .mt-ico { font-size: 23px; }
.panel.tight .bote { gap: 6px; }
.panel.tight .brow { padding: 6px 8px; }
.panel.tight .bote-head b { font-size: 20px; }
.panel.tight .bankbox, .panel.tight .loanbox, .panel.tight .set-list, .panel.tight .tabs { gap: 6px; }
.panel.tight .bankbox .big { font-size: 24px; }
.panel.tight .bankbox .row, .panel.tight .loanbox .row { padding: 5px 9px; }
.panel.tight .set-row { padding: 6px 9px; }
.panel.tight .tab { min-height: 40px; }
.panel.tight .celebrate .big-ico { font-size: 56px; }
.panel.tight .wc-detail { min-height: 0; padding: 8px 10px; }
.panel.tight .wc-detail .wc-ico { font-size: 30px; }
.panel.tight .minfo { min-height: 0; padding: 8px 10px; }
.panel.tight .mi-ico { width: 40px; height: 40px; font-size: 26px; }
.panel.tight .fcard .fthumb, .panel.tight .wr-card img { max-width: 84px; }
.panel.tight .acc-ico { font-size: 30px; }
.panel.tight .acc-box { padding: 9px 10px; }
.panel.tight .upg-list, .panel.tight .crew-need { gap: 6px; }

.fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcard { min-width: 0; }
.fcard b { overflow-wrap: anywhere; line-height: 1.15; }
/* Garderobe: Reiter dürfen umbrechen (Symbol oben, Wort darunter), statt abgeschnitten zu werden */
.wr-tabs button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; min-height: 40px; overflow-wrap: anywhere; }

/* ---------- Handy quer (wenig Höhe, viel Breite): Fenster breiter, Inhalt in Spalten statt untereinander */
@media (max-height: 500px) and (min-aspect-ratio: 13/10) {
  .panel.narrow { width: min(700px, 100%); }
  .menu-grid { gap: 8px; }
  .menu-grid .btn.big { min-height: 42px; font-size: 18px; padding: 6px 12px; }
  .menu-grid .mtiles { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .mtile { min-height: 58px; padding: 6px 2px; }
  .mtile .mt-ico { font-size: 22px; }
  .set-tiles { grid-template-columns: repeat(5, 1fr); }
  .set-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .set-list > p, .set-list > .lang-grid, .set-list > .legal-list { grid-column: 1 / -1; }
  .set-list > .acc-box { grid-row: span 2; align-self: stretch; justify-content: center; }
  .lang-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lang-b { font-size: 15px; min-height: 44px; }
  .legal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .wcards > .muted { display: none; }
  .wc-cell { font-size: 18px; border-radius: 9px; }
  .wc-detail { min-height: 0; align-self: stretch; }
  .bote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bote-head, .bote-fest { grid-column: 1 / -1; }
  .bote-lead { display: none; }
  .bote-head b { font-size: 19px; }
  .bankbox, .loanbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .bankbox .big, .bankbox .btn.wide, .bankbox .btns, .bankbox p, .loanbox h4, .loanbox p, .loanbox .btns, .loanbox .btn.wide { grid-column: 1 / -1; }
  .bankbox .big { font-size: 22px; }
  .wr-grid.pg-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .wr-card { padding: 5px; gap: 2px; }
  .wr-card img, .panel.tight .wr-card img { max-width: 50px; }
  .wr-card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wr-card .btn { min-height: 34px; padding: 4px 5px; }
  .wr-tabs { margin-bottom: 6px; }
  .fcard .fthumb { max-width: 64px; }
  .celebrate .big-ico { font-size: 44px; }
  .celebrate h3 { margin: 2px 0 4px; font-size: 19px; }
  .req-row { margin: 4px 0; }
  .mapview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 10px; align-items: start; }
  .mapview .mhead, .mapview .mlegend { grid-column: 2; }
  .mapview .mmap { grid-column: 1; grid-row: 1 / span 3; }
  .mapview .minfo { grid-column: 2; min-height: 0; }
  .mlegend { font-size: 12px; gap: 2px 10px; }
  .chron-grid.pg-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tips.pg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-list.pg-list, .chron .pg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ Feinschliff fürs Handy (iPhone-Prüfung)
   Knöpfe groß genug für den Finger, Meldungen umbrechen, nichts liegt übereinander, Schrift mit Kontrast. */
.btn.small { min-height: 44px; }
.wr-card .btn.small, .fcard .btn.small { min-height: 40px; }
.tog { width: 64px; height: 40px; border-radius: 20px; }
.tog i { left: 4px; top: 4px; width: 32px; height: 32px; }
.tog.on i { transform: translateX(24px); }
.srccard .close, .aquest .qx { min-width: 40px; min-height: 40px; }
/* weiße Schrift auf hellen Knöpfen (orange, grün): dunkler Schein, damit sie auch in der Sonne lesbar bleibt */
.btn, .ts-play { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 3px rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.2); }
.btn.orange { background: linear-gradient(#ffab24, #d9760f); }
.agoal .gbus, .aside2 .gbus, .aboost { color: #4a2a00; text-shadow: none; }
.agoal .ggo, .aside2 .ggo { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.agoal .ggo { background: #2f78c9; }
.aside2 .ggo { background: #2f8f3c; }
.agoal .gbus, .aside2 .gbus { background: #f4a93b; }
/* Schwebetexte (+Geld, Hinweise) mit dunklem Rand: auf Wiese und Sand lesbar */
.ftext { -webkit-text-stroke: 3px rgba(20, 40, 20, .8); paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.ftext.warn, .ftext.max, .ftext.good, .ftext.wish, .ftext.chip { -webkit-text-stroke: 0; }
/* Meldungen: umbrechen statt abschneiden */
.toasts { width: calc(100% - 24px - var(--safe-left) - var(--safe-right)); }
.toast { white-space: normal; text-align: center; max-width: 100%; line-height: 1.25; }
/* Ränder mit Notch/Home-Balken */
.cine-skip { right: calc(16px + var(--safe-right)); }
.acap { max-width: calc(100vw - 24px - var(--safe-left) - var(--safe-right)); }
.knowcard { width: min(440px, calc(100vw - 32px - var(--safe-left) - var(--safe-right))); }
/* iPhone im Browser: kein Bild-Menü bei langem Druck, Bilder lassen sich nicht ziehen */
html { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
/* Stadtplan: höhere Felder = größere Tippfläche (9 Spalten bleiben, wie die Stadt gebaut ist) */
@media (max-width: 480px) and (min-height: 600px) { .mcell { aspect-ratio: 1; } }
/* Ankündigungen (Fest, neue Stufe) unter dem HUD statt darüber */
@media (max-width: 640px) { .abanner { top: 60%; } }
/* Kleine Bildschirme: Aktions- und Rad-Knopf rücken nach unten an die Seiten, sonst liegen sie auf Karte, Shop oder Aufgaben */
@media (max-height: 700px) {
  .aact, .abike { top: auto; bottom: calc(80px + var(--safe-bottom)); transform: none; }
  .aact.pop { animation-name: actpop2; }
}
@keyframes actpop2 { from { transform: scale(.5); opacity: 0; } }
/* Handy quer: die Nebenbei-Karte passt nicht mehr unter die Aufgabe; Aktions-Knopf neben die linke Spalte */
@media (max-height: 460px) {
  .aside2 { display: none !important; }
  .aact { left: calc(176px + var(--safe-left)); bottom: calc(10px + var(--safe-bottom)); }
  .abike { bottom: calc(10px + var(--safe-bottom)); }
  .knowcard { display: none; }
}
.rank-card .pt { white-space: nowrap; }
@media (max-width: 350px) { .rank-card .pt { font-size: 12px; } .rank-card b { font-size: 14.5px; } }
.set-row.dns .set-l b { font-size: 13.5px; line-height: 1.2; }
@media (max-height: 500px) and (min-aspect-ratio: 13/10) { .set-list > .set-row.dns { grid-column: 1 / -1; } }
/* Aufgaben-Karte: „Hinlaufen“ und „Hinfahren“ sind eigene Tippflächen – hoch genug für den Finger */
.agoal .ggo, .aside2 .ggo { padding: 7px 12px; min-height: 32px; display: inline-flex; align-items: center; }
.agoal .ggo[hidden], .aside2 .ggo[hidden], .agoal .gbus[hidden], .aside2 .gbus[hidden] { display: none; }
.acard[hidden], .abote[hidden] { display: none; }
.legal-list { grid-auto-flow: dense; }
.legal-list .set-link.wide { grid-column: 1 / -1; }
.legal-list .set-link .sl-t { overflow-wrap: anywhere; }
.rank-card b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rank-card .rc { min-width: 0; }
@media (min-width: 351px) { .rank-card .rc { min-width: 96px; } }
/* Ankündigung: volle Breite nutzen (mit left: 50 % bräche der Text schon bei halber Bildschirmbreite um) */
.abanner { left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: min(90vw, 460px); transform: translateY(-50%); }
.abanner.show { animation-name: bannerin2; }
@keyframes bannerin2 { from { transform: translateY(-50%) scale(.5); opacity: 0; } }
/* sehr schmale Handys: kleineres Stufen-Symbol, damit lange Stufennamen (andere Sprachen) Platz haben */
@media (max-width: 350px) {
  .rank-card { gap: 6px; padding: 4px 8px 4px 4px; }
  .rank-card .ri { width: 28px; height: 28px; font-size: 20px; border-radius: 9px; }
}
.rank-card b.wrap2 { white-space: normal; line-height: 1.05; font-size: 12px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- Karten oben rechts: nur eine ist aufgeklappt, die anderen sind eine Zeile hoch (Antippen klappt auf) */
.aside { gap: 6px; }
.agoal.shut > :not(.ghd) { display: none; }
.agoal.shut { padding-top: 4px; padding-bottom: 4px; animation: none; }
.agoal.shut .gi { width: 24px; height: 24px; font-size: 16px; }
.agoal.shut .gh, .aside2.shut .sd-t, .aquest.shut .qh b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agoal.shut .ghd { min-width: 0; }
.agoal .gshort { display: none; }
/* Name und Nummer nur weg, wenn der Schritt auch Text hat (nie eine leere Zeile) */
.agoal.shut .ghd:has(.gshort:not(:empty)) :is(.gh:not(.gshort), .gi) { display: none; }
/* bis zu drei Zeilen, damit z. B. „Kautschuk & Reifenwerk erschließen“ ganz lesbar bleibt */
.agoal.shut .gshort:not(:empty) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; flex: 1; font-size: 13px; line-height: 1.18; }
.aside2 { margin-top: 0; }
.aside2.shut .sd-h, .aside2.shut .gacts { display: none; }
.aside2.shut { padding-top: 6px; padding-bottom: 6px; }
.aside2.shut .sd-t::before { content: '👉 '; }
.aquest.shut .qi, .aquest.shut .qx { display: none; }
.aquest.shut { cursor: pointer; padding-top: 6px; padding-bottom: 6px; }

/* ---------- Fenster im Stil des Shops (Rahmen, Titel, Knöpfe: css/base.css) */
/* Farbe des Titelrands je Fenster: modal({ cls: 't-green' }) */
.panel.t-green { --o: #2e7d32; }
.panel.t-brown { --o: #7a4e1d; }
.panel.t-purple { --o: #6a3fc0; }
.panel.t-red { --o: #b3243f; }
.panel.t-orange { --o: #d8760c; }
.panel.t-teal { --o: #127a74; }
/* Große Momente (Willkommen zurück, Traumstadt): Lichtstrahlen hinter dem Fenster */
.modal-back:has(> .panel.celebr) { overflow: hidden; }
.modal-back:has(> .panel.celebr)::before { content: ''; position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none;
  opacity: .14; background: repeating-conic-gradient(#ffe9a0 0 9deg, transparent 9deg 18deg); animation: sfspin 60s linear infinite; }
.celebrate p { font-weight: 600; }
.celebrate .wb-sum { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 4px 18px; font-size: 34px; color: #2e7d32; background: #fff; border-radius: 18px; box-shadow: 0 0 0 2px var(--cream-line), 0 4px 0 2px #ead7b0; font-variant-numeric: tabular-nums; }
/* Kacheln (Menü, Einstellungen): dicke Karten mit Kante, große Symbole */
.mtile { border: 0; border-radius: 18px; box-shadow: 0 0 0 2px var(--cream-line), 0 5px 0 2px #e2cc9f; gap: 6px; }
.mtile:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--cream-line), 0 2px 0 2px #e2cc9f; }
.mtile .mt-ico { font-size: 34px; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.mtile.gold { background: linear-gradient(#fff8dc, #ffe39a); box-shadow: 0 0 0 2px #f2b93b, 0 5px 0 2px #d99a1c; }
.menu-grid > .btn.big { min-height: 58px; font-size: 24px; border-radius: 20px; border: 3px solid #ffe9c4; box-shadow: 0 0 0 2px #b9814a, inset 0 3px 0 rgba(255,255,255,.4), 0 6px 0 2px rgba(0,0,0,.18); }
/* Zeilen und Karten im Fenster: weiß mit weicher Kante unten (wie die Angebotskarte im Shop) */
.set-link, .lang-b, .set-row, .chrow, .brow, .minfo, .mh-rank, .mh-count, .acc-box, .req, .bankbox .row { box-shadow: 0 3px 0 #ead7b0; }
.set-link:active, .chrow:active, .lang-b:active { transform: translateY(2px); box-shadow: 0 1px 0 #ead7b0; }
.set-link .sl-i, .brow .br-ico, .chrow .ch-ico { filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.bankbox .big { font-size: 34px; text-shadow: 0 2px 0 rgba(0,0,0,.08); }
/* Erzählung unten: Karte im Stil der Fenster, das Porträt ragt oben links heraus, „Weiter“ als kleiner Knopf */
.st-card { background: var(--cream); border: 6px solid #ffe9c4; border-radius: 26px; padding: 10px 14px 12px;
  box-shadow: 0 0 0 3px #b9814a, 0 8px 0 3px rgba(0,0,0,.18), 0 18px 32px rgba(0,0,0,.32); }
.st-ico { width: 76px; height: 76px; margin: -32px 0 0 -8px; border: 4px solid #fff; box-shadow: 0 0 0 2px #b9814a, 0 4px 0 2px rgba(0,0,0,.15); }
.st-name b { font-size: 18px; }
.st-more { display: table; margin-left: auto; padding: 5px 14px; border-radius: 13px; color: #fff; font-size: 15px;
  background: linear-gradient(#ffc855, #f59a1e 55%, #e2841a); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 rgba(0,0,0,.2); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.st-card.paper { background: #f7f3e8; border-color: #efe6d2; }
@media (max-height: 460px) { .st-ico { width: 60px; height: 60px; margin-top: -22px; } }

/* Karten oben rechts zuklappen: Pfeil oben rechts (offen ▴, zu ▾) */
.gfold { flex: none; margin: -4px -4px -4px auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.07); color: var(--ink-soft);
  display: grid; place-items: center; font: 700 15px var(--font); line-height: 1; cursor: pointer; }
.gfold:active { background: rgba(0,0,0,.14); }
.aside2 .sd-h { display: flex; align-items: center; }
.aquest .qh .gfold { margin-left: 2px; }
.aquest.shut .gfold, .agoal.shut .gfold { background: rgba(63, 143, 224, .14); color: var(--blue-dark); }
/* Stimmung (world-mood.js): Herz-Knopf wie der Bote; Ring grün bei guter, rot bei schlechter Stimmung */
.amood .bt-ring { background: radial-gradient(circle at 35% 30%, #fff6f8, #ffd6e0); }
.amood.good .bt-ring { box-shadow: 0 0 0 3px #4fc936, 0 4px 10px rgba(0,0,0,.25); }
.amood.bad .bt-ring { box-shadow: 0 0 0 3px #e53935, 0 4px 10px rgba(0,0,0,.25); animation: moodpulse 1.4s ease-in-out infinite; }
@keyframes moodpulse { 50% { transform: scale(1.08); } }
.bote.mood .brow.low .dbar i { background: linear-gradient(#ff8a80, #e53935); }
.bote.mood .br-pct { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 44px; text-align: right; }
/* Saison-Fest und Pass (game-panels.js: showFest) */
.afest .bt-ring { background: radial-gradient(circle at 35% 30%, #fffdf2, #ffe9a8 60%, #f4c542); }
.fest { display: flex; flex-direction: column; gap: 8px; }
.fest-head { display: flex; gap: 10px; align-items: center; }
.fest-head .fh-ico { font-size: 34px; }
.fest-head b { display: block; font-size: 18px; color: var(--ink); }
.fest-head small { display: block; font-size: 12.5px; color: #6a5a46; line-height: 1.25; }
.fest-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.fest-steps .fs { background: #f3ead8; border: 2px solid #e2d3b4; border-radius: 12px; padding: 3px 8px; font: 600 12.5px var(--font); color: #6a5a46; }
.fest-steps .fs.done { background: #dff5d2; border-color: #8fd36f; color: #2f7a1f; }
.fest-pass .fp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fest-pass .fp-top b { font-size: 15px; color: var(--ink); }
.fest-pass .fp-top small { font-size: 12px; color: #6a5a46; }
.fp-rows { display: flex; justify-content: space-between; font: 700 11.5px var(--font); color: #6a5a46; }
.fp-rows .prem { color: #b8891e; }
.fp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fp-col2 { display: flex; flex-direction: column; gap: 5px; }
.fp-cell { position: relative; border: 2px solid #e2d3b4; background: #fffaf0; border-radius: 12px; padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 11px var(--font); color: #6a5a46; min-height: 54px; cursor: pointer; }
.fp-cell b { font-size: 12px; color: var(--ink); }
.fp-cell span { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.fp-cell .bill { width: 15px; height: 15px; }
.fp-cell .fp-col { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.fp-cell.prem { background: linear-gradient(#fff7da, #ffe9a3); border-color: #e8c46a; }
.fp-cell.ready { border-color: #4fc936; box-shadow: 0 0 0 2px rgba(79,201,54,.35); animation: badgepulse 1.4s ease-in-out infinite; }
.fp-cell.got { opacity: .55; }
.fp-cell .fp-ok, .fp-cell .fp-lock { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 13px; }
.fp-cell[disabled] { cursor: default; }
/* Zufriedenheit: Reiter „Verlauf“ mit kleinen Kurven (game-panels.js statRows) */
.mood-tabs { align-self: center; margin-bottom: 6px; }
.brow.stat .br-t { min-width: 0; }
.spark { height: 26px; margin-top: 3px; background: #f7efdf; border-radius: 8px; overflow: hidden; }
.spark svg { width: 100%; height: 100%; display: block; }
/* Raketenflug: Ausblenden zwischen Erde und Mars (world-space.js) */
.space-fade { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at 50% 40%, #1b2550, #070a18 70%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .9s ease; pointer-events: all; }
.space-fade.on { opacity: 1; }
.space-fade .sf-in { text-align: center; color: #fff; font: 700 22px var(--font); padding: 0 24px; }
.space-fade .sf-rocket { font-size: 64px; animation: sfrocket 1.2s ease-in-out infinite alternate; }
.space-fade .sf-t { margin-top: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@keyframes sfrocket { from { transform: translateY(6px) rotate(-8deg); } to { transform: translateY(-6px) rotate(8deg); } }
html[data-planet="mars"] body { background: #f4c9a0; }

/* Meldung zu einem fertigen Bau: unteres Drittel, über Korb und Joystick (hud.banner low) */
.abanner.low { top: 74%; }
@media (max-width: 640px) { .abanner.low { top: 74%; } }

/* Krank: rote Zeile unter der Aufgabe (hud.sick) */
.aside2.asick { border-color: #e57373; background: #fff1f0; }
.aside2.asick .sd-h { color: #c62828; }
/* Geldtransporter: wartet er noch, ist der Knopf blass (hud.cash) */
.abote.acash.wait .bt-ring { filter: grayscale(.7); opacity: .75; }

/* Krank: großes, pulsierendes Fieber-Zeichen über dem Mitarbeiter (world-staff.js) */
.sickmark { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; font-size: 40px; line-height: 1;
  background: #fff1f0; border: 3px solid #e53935; border-radius: 50%; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: sickpulse 1.1s ease-in-out infinite; }
.sickmark img { width: 40px; height: 40px; }
@keyframes sickpulse { 50% { scale: 1.12; } }

/* Vorteile aus Tätigkeiten (world-acts.js) */
.abuffs { position: absolute; left: 50%; bottom: calc(64px + var(--safe-bottom)); transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; z-index: 30; }
@media (max-width: 520px) { .abuff-n { display: none; } .abuff { padding: 2px 8px; } }
.abuff { padding: 3px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); border: 2px solid #ffd76a; color: #4a3200; font: 700 13px var(--font); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.cinema .abuffs { opacity: 0; }

/* Meldungen (hud.banner): kompakt über dem Korb statt groß in der Bildmitte – sie verdeckten die Stadt und die Baufreude.
   Liegt unten eine Wissenskarte, rückt die Meldung nach oben (.up). */
.abanner { top: auto; bottom: calc(104px + var(--safe-bottom)); transform: none; padding: 6px 14px; gap: 1px; border-width: 2px; border-radius: 16px;
  max-width: min(84vw, 340px); box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.abanner b { font-size: 17px; line-height: 1.2; }
.abanner span { font-size: 12.5px; line-height: 1.25; }
.abanner.big b { font-size: 20px; }
.abanner.low { top: auto; }
.abanner.up { bottom: auto; top: 30%; }
.abanner.show { animation-name: bannerin3; }
@keyframes bannerin3 { from { transform: translateY(14px) scale(.85); opacity: 0; } }
@media (max-width: 640px) { .abanner, .abanner.low { top: auto; } .abanner.up { top: 30%; } }
/* Stadtstufe wartet auf Versorgung (hud.mood): Zeile „💧 Wasser fehlt“ statt der Einwohnerzahl, Karte leuchtet orange */
.rank-card.wait { box-shadow: 0 0 0 3px #ffb42e, var(--shadow); animation: rankwait 1.6s ease-in-out infinite; }
.rank-card.wait .pt { color: #ffd88a; }
.rank-card.wait .pt img { width: 16px; height: 16px; vertical-align: -3px; }
@keyframes rankwait { 50% { box-shadow: 0 0 0 5px rgba(255, 180, 46, .55), var(--shadow); } }
/* ---------- Erfolge (game-panels.js › showProgress) */
.pr-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 700; }
.pr-bar { flex: 1; height: 12px; border-radius: 8px; background: #efe6d2; overflow: hidden; }
.pr-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8bd86a, #2e8b3e); }
.pr-list.pg-list { gap: 5px; }
.pr-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; color: var(--green-dark); }
.pr-row { min-height: 46px; }
.pr-row.locked { opacity: .62; }
.pr-row .pr-i { font-size: 26px; width: 36px; text-align: center; flex: none; }
.pr-row .bk-t { flex: 1; min-width: 0; }
.pr-row .pr-ok { font-size: 18px; flex: none; }
.pr-board { display: flex; flex-direction: column; gap: 5px; }
.pr-lb { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--cream-line); border-radius: 12px; padding: 6px 10px; }
.pr-lb.me { border-color: #9fd98c; background: #f3fff0; }
.pr-lb .pr-pl { width: 44px; font-weight: 700; }
.pr-lb .pr-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-seg { margin-bottom: 6px; flex-wrap: wrap; }
.pr-seg button { flex: 1 1 40%; }
.pr-seg button { font-size: 13px; padding: 6px 4px; }
.pr-lb .pr-rep { flex: none; border: 0; background: transparent; font-size: 16px; padding: 2px 4px; cursor: pointer; opacity: .75; }
.pr-row .pr-i img { width: 36px; height: 36px; display: block; }
.pr-row .pr-i.off img { filter: grayscale(1); opacity: .75; }