/* Pollen Parade · Oberfläche „Honigglanz“ (Handy zuerst, UI-LEITLINIE von ARI GG ATO)
   Vorlage: Canvas „Pollen Parade UI-Entwürfe“ (design/ui-canvas). Regeln: nichts überlappt, sichere Zonen über --sat/--sab,
   Schrift weiß mit Kante im Flächenton (nie Schwarz), Bilder in Fenstern stehen ganz sichtbar über dem Band. */
/* Fredoka und Nunito sind variable Schriften: eine Datei deckt alle Stärken ab. */
@font-face { font-family: 'Fredoka'; font-weight: 400 700; font-display: swap; src: url(../media/fonts/fredoka-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-weight: 400 700; font-display: swap; src: url(../media/fonts/fredoka-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(../media/fonts/nunito-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(../media/fonts/nunito-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --honey: #ffb81c; --honey-hi: #ffe27a; --amber: #e8870e;
  --rim: #d27a0c; --lip: #a95a06; --edge: #cf6a04;
  --cream: #fff8e6; --wax: #fff1c9;
  --ink: #4a2a08; --ink-soft: #6b4720;
  --leaf: #4cc03a; --leaf-rim: #2f8f22; --leaf-lip: #22701a; --leaf-edge: #2a8a1c;
  --berry-rim: #c8352a; --berry-lip: #962015; --berry-edge: #b8281c;
  --violet-rim: #6a3fc8; --violet-lip: #4b2a96; --violet-edge: #5a34b8;
  /* sichere Ränder: Notch/Home-Leiste, sonst mindestens etwas Abstand (abgerundete Displayecken, Stefan 12.10.2026) */
  /* Android-App (Capacitor SystemBars) liefert die Ränder als --safe-area-inset-*, iOS und Browser als env().
     Ohne gemeldete Ränder in der Desktop-Spalte und im iframe des Hubs (.safe-min, js/main.js) wie im Entwurf oben 47, unten 34 px */
  --sat-min: 12px; --sab-min: 14px;
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px), var(--sat-min)); --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px), var(--sab-min));
  --title: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root.safe-min { --sat-min: 47px; --sab-min: 34px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2d3a24; overflow: hidden; overscroll-behavior: none; }
body { font: 700 15px/1.35 var(--text); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #6d8a4a 0%, #34452a 60%, #1f2a19 100%); }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2b8fd6; outline-offset: 2px; }
img { -webkit-user-drag: none; }
h1, h2, h3 { font-family: var(--title); font-weight: 700; margin: 0; }

#app { position: fixed; top: 0; bottom: 0; left: 50%; width: min(100vw, 500px); transform: translateX(-50%); overflow: hidden; background: #e9dcb6; }
@media (min-width: 520px) { #app { top: 12px; bottom: 12px; height: auto; border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); } }
#bg { position: absolute; inset: 0; background: #efe2bd center / cover no-repeat; transition: opacity .3s; }
#bg[data-scene='game'] { background-image: url(../media/img/garden.webp); }
#bg[data-scene='home'] { background-image: url(../media/img/home.webp); }

#bg[data-scene='title'] { background-image: url(../media/img/title.webp); }
#bg[data-scene='game']::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,250,230,0) 45%, rgba(60,30,0,.22) 100%); }
/* Beet: Wabenplatte im Honigrahmen, unter der 3D-Ebene */
#plate { position: absolute; display: none; border-radius: 30px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 L28 8.1 L28 24.25 L14 32.35 L0 24.25 L0 8.1 Z M14 32.35 L14 48.5' fill='none' stroke='%23e6cb8e' stroke-width='1.3' opacity='.7'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 35%, #fffcee, #f7e4b4);
  background-size: var(--hs, 28px 48.5px), auto; background-position: var(--hp, 0 0), center; /* Wabenmuster so groß wie die Steine (ui.js) */
  box-shadow: inset 0 0 0 4px #fff8de, inset 0 0 0 7px #f0b450, inset 0 0 0 9px var(--rim), inset 0 10px 18px rgba(150,90,10,.2), 0 0 0 2.5px var(--rim), 0 7px 0 2.5px var(--lip), 0 16px 28px rgba(60,30,0,.3); }
#plate.on { display: block; }
#plate.sting { border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), inset 0 8px 16px rgba(150,90,10,.22); }
#plate.vol { background: radial-gradient(ellipse at 50% 42%, rgba(255,250,230,.9), rgba(255,240,200,.35) 55%, rgba(255,240,200,0) 72%); box-shadow: none; }
/* Bienenkörbe (Körper und Brett) liegen unter der 3D-Ebene: Bienen fliegen davor ins Flugloch */
#nestbed { position: absolute; inset: 0; pointer-events: none; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html[data-scene='game'] #stage { z-index: 3; } /* im Garten Bienen vor der Oberfläche (Stefan 15.10.2026); Hinweise, Finger, Zähler, Fenster darüber. Auf dem Start bleiben die Deko-Bienen hinter den Knöpfen */
#ui { position: absolute; inset: 0; }
#ovl { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#ovl > * { pointer-events: auto; }
#toasts { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 118px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 30; }
.toast { max-width: 86%; padding: 9px 16px; border-radius: 16px; background: rgba(74,42,8,.92); color: #fff; font: 600 15px/1.3 var(--title); text-align: center; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 18px rgba(0,0,0,.25); animation: toastIn .25s ease-out, toastOut .3s ease-in 2.6s forwards; }
.toast.good { background: linear-gradient(#55c63e, #2f9a22); }
.toast.bad { background: linear-gradient(#f2554a, #c8352a); }
@keyframes toastIn { from { transform: translateY(-10px) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-8px); opacity: 0; } }

/* Laden */
#loader { position: absolute; inset: 0; z-index: 40; background: #e8d49c url(../media/img/title.webp) center / cover; display: flex; align-items: flex-end; justify-content: center; transition: opacity .4s; }
#loader.gone { opacity: 0; pointer-events: none; }
/* Erster Start im Browser: Hinweis und Anmelde-Angebot vor dem Startbildschirm, Hintergrund wie das Ladebild */
.welcomebg { position: absolute; inset: 0; background: #e8d49c url(../media/img/title.webp) center / cover; }
.welcometext a { color: var(--rim); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.loader-bar { width: 62%; height: 18px; margin-bottom: calc(var(--sab) + 9%); border-radius: 10px; background: #b9650c; box-shadow: inset 0 2px 3px rgba(0,0,0,.35), 0 0 0 2.5px #fff4d0, 0 0 0 5px var(--rim); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(#fff3b0, #ffc12e 60%, #f29a0c); box-shadow: inset 0 2px 0 rgba(255,255,255,.6); transition: width .25s; }

/* ---------- Grundbausteine ---------- */
.ttl { font-family: var(--title); font-weight: 700; color: #fff; -webkit-text-stroke: var(--sw, 5px) var(--ts, #e07a06); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ts, #e07a06), 0 5px 10px rgba(110,50,0,.22); letter-spacing: .2px; }
.cap { font: 900 11px/1.2 var(--text); text-transform: uppercase; letter-spacing: 1.3px; color: #9a5a12; }
/* Knöpfe: Glanz liegt hinter der Schrift, Kante in der Knopffarbe, sinkt beim Drücken ein */
.btn { --bs: var(--leaf-edge); --lp: var(--leaf-lip); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 20px; border-radius: 20px;
  font: 700 21px/1 var(--title); color: #fff; white-space: nowrap; -webkit-text-stroke: 4px var(--bs); paint-order: stroke fill; text-shadow: 0 2px 0 var(--bs);
  background: linear-gradient(#97e866, #55c63e 55%, #3aa628); box-shadow: inset 0 -4px 0 rgba(0,80,0,.15), 0 5px 0 var(--lp), 0 10px 18px rgba(30,80,10,.28); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn::before { content: ''; position: absolute; z-index: -1; left: 6px; right: 6px; top: 4px; height: 42%; border-radius: 15px 15px 30px 30px; background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.08)); pointer-events: none; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.1), 0 1px 0 var(--lp), 0 3px 6px rgba(80,40,0,.25); }
.btn.honey { --bs: var(--edge); --lp: var(--lip); background: linear-gradient(#ffe684, #ffbd26 55%, #f5a012); box-shadow: inset 0 -4px 0 rgba(150,70,0,.14), 0 5px 0 var(--lp), 0 10px 18px rgba(120,60,0,.28); }
.btn.purple { --bs: var(--violet-edge); --lp: var(--violet-lip); background: linear-gradient(#c7a6ff, #9364ee 55%, #7848d8); box-shadow: inset 0 -4px 0 rgba(40,0,90,.16), 0 5px 0 var(--lp), 0 10px 18px rgba(60,20,90,.28); }
.btn.red { --bs: var(--berry-edge); --lp: var(--berry-lip); background: linear-gradient(#ff9483, #f2554a 55%, #dc3e2e); box-shadow: inset 0 -4px 0 rgba(90,0,0,.15), 0 5px 0 var(--lp), 0 10px 18px rgba(100,20,10,.28); }
.btn.cream { --lp: #c9a46a; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; background: linear-gradient(#fffef8, #f7e8c6); box-shadow: inset 0 -4px 0 rgba(150,100,30,.12), 0 5px 0 var(--lp), 0 10px 18px rgba(120,80,20,.18); }
.btn.wide { width: 100%; }
.btn.small { min-height: 44px; font-size: 17px; padding: 0 14px; border-radius: 16px; -webkit-text-stroke-width: 3.5px; }
.btn.cream.small { -webkit-text-stroke-width: 0; }
.btn[disabled] { filter: grayscale(.85) brightness(1.02); opacity: .6; pointer-events: none; }
.btn img { width: 28px; height: 28px; object-fit: contain; }
.btn .cost { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; -webkit-text-stroke-width: 3.5px; font-size: 18px; } /* Preis ohne eigenes Schild (Stefan 15.10.2026: kein zweiter Hintergrund im Knopf) */
.btn .cost img { width: 26px; height: 26px; }
.btn .shine { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.btn .shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 5px; border-radius: 20px; background: linear-gradient(#fffef8, #fcebc4);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2.5px var(--rim), 0 4px 0 2.5px var(--lip), 0 8px 14px rgba(80,40,0,.28); font: 700 18px/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.pill img { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.pill b { font-weight: 700; padding-right: 3px; }
.pill b:last-child { padding-right: 8px; }
.pill .unit { font: 900 11px/1 var(--text); letter-spacing: .6px; color: #9a5a12; padding-right: 8px; }
.pill .plus, .plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(#97e866, #3aa628); color: #fff; font: 700 21px/1 var(--title); -webkit-text-stroke: 3px var(--leaf-edge); paint-order: stroke fill; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--leaf-lip); }
.pill:has(.coin3d) { perspective: 180px; }
.coin3d { position: relative; width: 30px; height: 30px; flex: none; transform-style: preserve-3d; animation: coinspin 4.6s cubic-bezier(.45,.05,.35,1) infinite; }
.coin3d i { position: absolute; inset: 0; border-radius: 50%; }
.coin3d .f, .coin3d .b { background: url(../media/ui/coin.svg) center / contain no-repeat; backface-visibility: hidden; }
.coin3d .f { transform: translateZ(3px); }
.coin3d .b { transform: rotateY(180deg) translateZ(3px); }
.coin3d .e { inset: 1px; background: linear-gradient(90deg, #9a5604, #e9a01a 30%, #ffd75a 50%, #e9a01a 70%, #9a5604); }
@keyframes coinspin { 0%, 62% { transform: rotateY(0deg); } 88% { transform: rotateY(360deg) scale(1.08); } 100% { transform: rotateY(360deg); } }
.ani-heart { animation: heartbeat 1.9s ease-in-out infinite; }
@keyframes heartbeat { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(1.16); } 75% { transform: scale(.97); } 85% { transform: scale(1.08); } }
.round, .rnd { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 50% 28%, #fff8d2, #ffd04a 55%, #f5a412);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.8), 0 0 0 2.5px var(--rim), 0 4px 0 2.5px var(--lip), 0 8px 14px rgba(80,40,0,.3); transition: transform .08s; }
.round:active, .rnd:active { transform: translateY(3px); }
.round img, .rnd img { width: 34px; height: 34px; object-fit: contain; }
.round svg, .rnd svg { width: 24px; height: 24px; }
.round.sm, .rnd.sm { width: 42px; height: 42px; }
.round .q, .rnd .q { font: 700 24px/1 var(--title); color: #fff; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: linear-gradient(#ff7a6a, #e8443a); color: #fff; font: 700 13px/22px var(--title); text-align: center; box-shadow: 0 0 0 2.5px #fff, 0 2px 4px rgba(0,0,0,.3); }
.lbl { display: inline-block; padding: 2px 8px; border-radius: 9px; background: rgba(74,42,8,.84); color: #fff; font: 600 11.5px/1.25 var(--title); white-space: nowrap; }

/* ---------- Spiel ---------- */
.game { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.game > * { pointer-events: auto; }
.hud { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 10px; align-items: center; min-height: 46px; padding: calc(var(--sat) + 6px) 16px 0; }
.hud > :first-child { justify-self: start; }
.hud > :last-child { justify-self: end; }
.hside { display: flex; align-items: center; gap: 6px; }
.hud .coins { padding-right: 4px; }
.lvc { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 120px; padding: 3px 10px 6px; border-radius: 18px; background: linear-gradient(#ffe896, #ffc534 60%, #f6a614);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 2.5px var(--rim), 0 4px 0 2.5px var(--lip), 0 8px 14px rgba(80,40,0,.28); }
.lvc.hard1 { background: linear-gradient(#ff9a8a, #f2554a 60%, #d83c2e); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 2.5px var(--berry-rim), 0 4px 0 2.5px var(--berry-lip), 0 8px 14px rgba(80,20,0,.3); }
.lvc.hard2 { background: linear-gradient(#c7a6ff, #9364ee 60%, #7848d8); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 2.5px var(--violet-rim), 0 4px 0 2.5px var(--violet-lip), 0 8px 14px rgba(40,10,80,.3); }
.lvc.hard1 .ttl { --ts: var(--berry-edge); } .lvc.hard2 .ttl { --ts: var(--violet-edge); }
.tune { padding: 10px 12px 6px; }
.tunerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 6px 0; font: 800 14px/1.2 var(--text); color: var(--ink); }
.seg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; padding: 3px; border-radius: 12px; background: #f3e3c1; }
.seg button { padding: 6px 9px; border-radius: 9px; font: 700 13px/1 var(--title); color: var(--ink-soft); white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 0 #e2c486; }
.leftchip { position: absolute; z-index: 5; left: 50%; top: -13px; transform: translateX(-50%); padding: 2px 9px; border-radius: 9px; background: rgba(255,250,235,.92); box-shadow: 0 0 0 2px #e6c27a, 0 2px 4px rgba(80,40,0,.25); font: 700 15px/1.3 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.hardban { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: hardIn .45s ease-out both; }
.hardban b { font-size: 46px; line-height: 1; white-space: nowrap; --sw: 7px; --ts: var(--berry-edge); }
.hardban.h2 b { --ts: var(--violet-edge); }
.hardban small { white-space: nowrap; padding: 3px 12px; border-radius: 10px; background: rgba(40,10,0,.75); color: #fff; font: 600 14px/1.3 var(--title); }
@keyframes hardIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.95); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.hardban.out { opacity: 0; transition: opacity .35s; }
.lvc .ttl { font-size: 15px; line-height: 1.15; --sw: 4px; --ts: var(--edge); white-space: nowrap; max-width: 112px; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 5px 3px; margin: -3px -5px -3px; } /* Luft für die Kontur: sonst sind erster und letzter Buchstabe angeschnitten */
.prog { position: relative; width: 70px; height: 8px; border-radius: 5px; background: #b9650c; box-shadow: inset 0 2px 2px rgba(0,0,0,.35), 0 0 0 2px #fff4d0; overflow: hidden; }
.prog i { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 0; min-width: 7px; border-radius: 4px; background: linear-gradient(#ffffff, #ffe680); transition: width .3s; }
.boardhit { flex: 1; min-height: 120px; margin: 18px 8px 10px; position: relative; }
.boardhit.spin { cursor: grab; touch-action: none; }
/* Bienennester hängen direkt am Spielfeld (Entscheidung Stefan 15.10.2026: kein Ast), links Regeln, rechts Tempo.
   Lücken zwischen den Nestern: dort steigen die Bienen auf, darum breit */
.shelf { position: relative; height: 74px; flex: none; }
.nests { position: absolute; left: 16px; right: 16px; top: 0; height: 72px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
.nest { position: relative; width: 56px; height: 68px; flex: 0 0 56px; }
.nests.many { gap: 30px; }
.nests.many .nest { width: 52px; height: 66px; flex-basis: 52px; }
.nests.lots { gap: 24px; }
.nests.lots .nest { width: 48px; height: 62px; flex-basis: 48px; }
.nests.xl { gap: 16px; }
.nests.xl .nest { width: 44px; height: 58px; flex-basis: 44px; }
.nest .n { position: absolute; z-index: 2; left: 50%; top: 19px; transform: translateX(-50%); color: #fff; font: 700 22px/1 var(--title); text-align: center; white-space: nowrap;
  -webkit-text-stroke: 5px color-mix(in srgb, var(--c, #888) 50%, #000); paint-order: stroke fill; text-shadow: 0 2px 2px rgba(0,0,0,.25); transition: transform .15s; pointer-events: none; }
.nests.many .nest .n { top: 19px; font-size: 20px; -webkit-text-stroke-width: 4.5px; }
.nests.lots .nest .n { top: 17px; font-size: 19px; -webkit-text-stroke-width: 4.5px; }
.nests.xl .nest .n { top: 16px; font-size: 17px; -webkit-text-stroke-width: 4px; }
.nest .n.bump { transform: translateX(-50%) scale(1.25); }
.nest .ok { position: absolute; z-index: 2; right: -6px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#97e866, #3aa628); color: #fff; font: 900 13px/1 var(--text); box-shadow: 0 0 0 2px #fff, 0 2px 3px rgba(0,0,0,.3); animation: okpop .25s ease-out; }
@keyframes okpop { from { transform: scale(.3); } }
.nest .tag { position: absolute; z-index: 2; right: -8px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rim); display: grid; place-items: center; font: 700 15px/1 var(--title); color: var(--leaf-rim); }
.nest.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* Körper der Nester in #nestbed (SVG aus js/ui.js): Wachs hell, mit Schwarm ganz in seiner Farbe; kurzer Stiel am Spielfeldrand */
.nestb { position: absolute; --n1: #ffdc8a; --n2: #e09a35; --n3: #a35a10; filter: drop-shadow(0 3px 3px rgba(60,30,0,.3)); transition: transform .2s; transform-origin: 50% 0; }
.nestb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nestb .stalk { fill: none; stroke: #7d4a1d; stroke-width: 3.6; stroke-linecap: round; }
.nestb .nb { fill: var(--n1); }
.nestb .band { fill: none; stroke: var(--n2); stroke-width: 2.6; }
.nestb .gloss { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .35; }
.nestb .rim { fill: none; stroke: var(--n3); stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.nestb .lip { fill: var(--n1); stroke: var(--n3); stroke-width: 2; vector-effect: non-scaling-stroke; }
.nestb.on { --n1: color-mix(in srgb, var(--c) 80%, #fff); --n2: color-mix(in srgb, var(--c) 82%, #000); --n3: color-mix(in srgb, var(--c) 48%, #000); }
.nestb.extra:not(.on) { --n1: #d2f7b0; --n2: #7ccb58; --n3: #2f8f22; }
.nestb.done { filter: drop-shadow(0 0 9px rgba(255,230,120,.95)) drop-shadow(0 3px 3px rgba(60,30,0,.3)); }
.nestb.shake { animation: sway .35s; }
@keyframes sway { 25% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } 85% { transform: rotate(-2deg); } }
.nestb.enter, .nest.enter { animation: nestIn .35s ease-out; }
.nest { transform-origin: 50% 0; }
@keyframes nestIn { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } }
.tempo { position: relative; flex: none; display: grid; place-items: center; }
.tempo .dial small { display: none; margin-top: 1px; font: 800 9.5px/1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; } /* Restzeit im Knopf, nichts hängt darunter */
.tempo.on .dial small, .tempo.paused .dial small { display: block; }
.tempo.on .dial b, .tempo.paused .dial b { font-size: 15px; }
.tempo.on .dial small { color: #fff; text-shadow: 0 1px 1px rgba(20,80,10,.7); }
.tempo .dial { position: relative; width: 42px; height: 42px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 28%, #fffdf0, #ffe7a6 60%, #f7c25a);
  box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 2.5px var(--rim), 0 4px 0 2.5px var(--lip), 0 8px 14px rgba(80,40,0,.3); transition: transform .08s; }
.tempo:active .dial { transform: translateY(3px); }
.tempo .dial b { font: 700 18px/1 var(--title); color: #fff; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.tempo.on .dial { background: radial-gradient(circle at 50% 28%, #e9ffd6, #93e660 55%, #3fae2a); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.85), 0 0 0 2.5px var(--leaf-rim), 0 4px 0 2.5px var(--leaf-lip), 0 0 18px 5px rgba(160,240,110,.7); animation: pulse 1.2s ease-in-out infinite; }
.tempo.on .dial b { -webkit-text-stroke-color: var(--leaf-edge); }
.tempo.paused .dial { filter: grayscale(.6); }
@keyframes pulse { 50% { transform: scale(1.06); } }
/* Spuren: drei Bahnen mit Waben-Schwärmen */
.queue { position: relative; flex: none; margin: 0 10px; padding: 8px; border-radius: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: linear-gradient(#ffd468, #eb9416);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.6), 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 12px 22px rgba(60,30,0,.3); }
.lane { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 136px; padding: 6px 0 5px; border-radius: 19px; background: radial-gradient(ellipse at 50% 0, #fffaf0, #f7e2b2); box-shadow: inset 0 3px 7px rgba(150,90,10,.28); }
.lane .row2 { display: flex; gap: 4px; }
/* 4 Spuren (Prototyp großes Brett): schmalere Spuren, kleinere Waben, Vorschau-Reihe etwas blasser */
.queue.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { --c: #999; position: relative; width: 66px; height: 72px; display: grid; place-items: center; flex: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); transition: transform .12s; }
.tile .o, .tile .i { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tile .o { inset: 0; background: #fff; }
.tile .i { inset: 4px; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--c); }
.tile span { position: relative; font: 700 26px/1 var(--title); color: #fff; -webkit-text-stroke: 5px rgba(0,0,0,.3); -webkit-text-stroke: 5px color-mix(in srgb, var(--c) 50%, #000); paint-order: stroke fill; }
.tile.light span { color: #3b2a12; -webkit-text-stroke: 0; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.tile.front { cursor: pointer; filter: drop-shadow(0 0 8px rgba(255,236,150,.95)) drop-shadow(0 4px 0 rgba(0,0,0,.24)); animation: tileIn .3s ease-out; }
.tile.front:active { transform: scale(.94); }
.tile.next { width: 46px; height: 50px; }
.tile.next .i { inset: 3px; }
.tile.next span { font-size: 18px; -webkit-text-stroke-width: 4px; }
.tile.next.light span { -webkit-text-stroke-width: 0; }
.tile.unknown { width: 40px; height: 44px; }
.tile.unknown .i { inset: 3px; background: radial-gradient(circle at 50% 30%, #fffaf0, #e9d7ae); }
.tile.unknown span { font-size: 17px; color: #a07a44; -webkit-text-stroke: 0; }
.tile .link { position: absolute; z-index: 1; top: -6px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#fff6c8, #ffcd4a); box-shadow: 0 0 0 2.5px var(--rim), 0 2px 3px rgba(0,0,0,.3); display: grid; place-items: center; }
.tile .link svg { width: 17px; height: 17px; }
.tile.locked .i { filter: saturate(.35) brightness(.82); }
.tile.pickable { animation: wiggle 1s ease-in-out infinite; cursor: pointer; }
@keyframes wiggle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes tileIn { from { transform: translateY(14px) scale(.85); opacity: .4; } }
.tile.denied { animation: shake .35s; }
/* Gesperrte Spur: Holzgitter mit Schloss und Schlüssel-Fortschritt */
.gate { position: absolute; z-index: 3; inset: 0; border-radius: 19px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 13px, #b9783c 13px 21px, rgba(0,0,0,0) 21px 34px), linear-gradient(rgba(70,36,6,.42), rgba(70,36,6,.58)); box-shadow: inset 0 0 0 3px #9a5f2b; }
.gate::before, .gate::after { content: ''; position: absolute; left: -4px; right: -4px; height: 12px; background: linear-gradient(#dba262, #9a5f2b); box-shadow: 0 3px 0 #7a4418; }
.gate::before { top: 30%; transform: rotate(-8deg); }
.gate::after { bottom: 22%; transform: rotate(8deg); }
.gate svg { position: relative; z-index: 1; width: 46px; height: 52px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.gate .kp { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 5px; border-radius: 12px; background: linear-gradient(#fff6c8, #ffd24a); box-shadow: 0 0 0 2px #b8620a, 0 2px 4px rgba(0,0,0,.35); font: 700 14px/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.gate .kp svg { width: 18px; height: 18px; filter: none; }
.gate.open { animation: gateOpen .6s ease-in forwards; }
@keyframes gateOpen { 30% { transform: scale(1.06); } 100% { transform: translateY(-110%); opacity: 0; } }
/* Helfer-Blasen */
/* Kompakte Spuren (Stefan 15.10.2026: „unten extrem viel Platz mit diesen Zahlen“): je Spur vorne der Schwarm zum Antippen,
   die nächsten klein rechts daneben (2 übereinander, ab 3 in zwei Spalten) – kaum leere Fläche, Platz geht an Brett und Nester */
.queue { padding: 6px; gap: 6px; border-radius: 22px; }
.queue .lane { min-height: 0; flex-direction: row; justify-content: center; align-items: center; gap: 5px; padding: 6px 4px; border-radius: 16px; }
.queue .lane .row2 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 3px; }
.queue .tile.front { width: 50px; height: 55px; }
.queue .tile.front span { font-size: 21px; -webkit-text-stroke-width: 4.5px; }
.queue .tile.next { width: 31px; height: 34px; opacity: 1; }
.queue .tile.next span { font-size: 14px; -webkit-text-stroke-width: 3.5px; }
.queue .tile.unknown { width: 31px; height: 34px; }
.queue .tile.unknown span { font-size: 14px; }
.queue .row2:has(> :nth-child(3)) .tile { width: 26px; height: 29px; } /* Späherblick: zwei Spalten */
.queue .row2:has(> :nth-child(3)) .tile span { font-size: 12px; }
.queue .tile .i { inset: 3px; }
.queue .tile.light span { -webkit-text-stroke-width: 0; } /* dunkle Schrift auf hellen Steinen ohne Kante */
.queue .tile .link { width: 20px; height: 20px; top: -4px; right: auto; left: -7px; } /* links oben: rechts liegen die nächsten Schwärme */ .queue .tile .link svg { width: 13px; height: 13px; }
.queue.four { gap: 5px; padding: 6px; }
.queue.four .lane { min-height: 0; gap: 4px; padding: 6px 3px; }
.queue.four .tile.front { width: 44px; height: 49px; }
.queue.four .tile.front span { font-size: 18px; -webkit-text-stroke-width: 4px; }
.queue.four .tile.next, .queue.four .tile.unknown { width: 27px; height: 30px; }
.queue.four .tile.next span { font-size: 12px; -webkit-text-stroke-width: 3px; }
.queue.four .tile.light span { -webkit-text-stroke-width: 0; }
.queue .gate { flex-direction: row; gap: 6px; } .queue .gate svg { width: 30px; height: 34px; } .queue .gate .kp { height: 20px; font-size: 12px; }
.boosters { display: flex; justify-content: space-around; align-items: center; flex: none; padding: 13px 16px calc(var(--sab) + 6px); }
.boost { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ffffff, #fff1c9 60%, #f5d690);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 10px 16px rgba(60,30,0,.3); transition: transform .1s; }
.boost:active { transform: translateY(3px); }
.boost img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.22)); }
.boost .n { position: absolute; right: -6px; bottom: -4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: linear-gradient(#97e866, #3aa628); color: #fff; font: 700 16px/26px var(--title); text-align: center; -webkit-text-stroke: 3px var(--leaf-edge); paint-order: stroke fill; box-shadow: 0 0 0 2.5px #fff, 0 2px 4px rgba(0,0,0,.3); }
.boost .n.buy { background: linear-gradient(#ffe27a, #f29a0c); -webkit-text-stroke-color: var(--edge); }
.boost.locked img { filter: grayscale(1) opacity(.4); }
.boost.locked .lockv { position: absolute; inset: 0; display: grid; place-items: center; }
.boost.locked .lockv b { padding: 3px 8px; border-radius: 10px; background: rgba(74,42,8,.86); color: #fff; font: 600 12.5px/1.2 var(--title); }
.boost.armed { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 0 22px 7px rgba(255,214,74,.9); }
/* Hinweise, Finger */
/* Schneise wählen: Leiste über den Spuren (das Brett bleibt ganz frei zum Antippen), über den Bienen */
.rowpick { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: calc(var(--sab) + 82px); padding: 10px 12px 12px; border-radius: 20px; background: #fffef8; text-align: center;
  box-shadow: 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 12px 24px rgba(60,30,0,.3); animation: up .2s ease-out; }
.rowpick p { margin: 0 0 9px; font: 800 14.5px/1.3 var(--text); color: var(--ink); }
.rowpick .rowbtns { display: flex; gap: 10px; justify-content: center; }
.rowpick .btn { flex: 1; max-width: 170px; }
.hint { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: 88%; padding: 11px 15px; border-radius: 20px; background: #fffef8; color: var(--ink-soft); font: 800 14.5px/1.32 var(--text); text-align: center;
  box-shadow: 0 0 0 3px #ffcd4a, 0 0 0 5.5px var(--rim), 0 10px 20px rgba(40,20,0,.3); pointer-events: none; animation: toastIn .3s ease-out; }
.hint b { display: block; font: 700 19px/1.2 var(--title); color: var(--ink); }
.hint.tut::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -13px; width: 20px; height: 20px; margin-left: -10px; background: #fffef8; transform: rotate(45deg); box-shadow: 3px 3px 0 0 #ffcd4a, 5.5px 5.5px 0 0 var(--rim); }
.spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at var(--x) var(--y), rgba(30,15,0,0) 50px, rgba(30,15,0,.55) 56px); animation: fade .4s; }
.finger { position: absolute; width: 74px; height: 74px; z-index: 6; pointer-events: none; background: url(../media/ui/finger.svg) center / contain no-repeat; transform: rotate(-25deg); animation: tap 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0,0,0,.32)); }
@keyframes tap { 0%, 100% { translate: 0 0; } 50% { translate: -6px -10px; } }
.pickbar { position: absolute; left: 12px; right: 12px; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 16px; border-radius: 18px; background: #fffef8; box-shadow: 0 0 0 3px #ffcd4a, 0 0 0 5.5px var(--rim), 0 6px 18px rgba(60,40,10,.25); font: 700 16px/1.2 var(--title); }

/* ---------- Fenster und Blätter ---------- */
.veil { position: absolute; inset: 0; background: rgba(36,20,4,.55); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.veil.center { align-items: center; padding: calc(var(--sat) + 12px) 0 calc(var(--sab) + 12px); }
@keyframes fade { from { opacity: 0; } }
/* Fenster (Honigglas) mit Band; ein Bild steht ganz sichtbar über dem Band */
.dialog { position: relative; width: min(86%, 360px); border-radius: 32px; padding: 24px 20px 22px; text-align: center; background: linear-gradient(#fffef8, #fbeac6);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px #f2b752, 0 0 0 6.5px var(--rim), 0 8px 0 6.5px var(--lip), 0 26px 50px rgba(30,15,0,.45); animation: pop .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.dialog.rib { padding-top: 52px; }
.dialog.has-art { margin-top: 128px; }
.dialog .art { position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 10px); width: 150px; height: 150px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.3)); }
.dialog.rib .art { bottom: calc(100% + 14px); }
.dialog h2 { font-size: 25px; margin: 2px 0 8px; color: #fff; -webkit-text-stroke: 5px #e07a06; paint-order: stroke fill; text-shadow: 0 2px 0 #e07a06; }
.dialog p { margin: 4px 0 14px; color: var(--ink-soft); font: 700 15.5px/1.38 var(--text); }
.dialog .stack { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.dialog .note { font: 700 13px/1.3 var(--text); color: var(--ink-soft); }
.ribbon { position: absolute; left: -18px; right: -18px; top: -28px; min-height: 62px; padding: 8px 12px; border-radius: 18px; display: grid; place-items: center; --ts: var(--leaf-edge);
  font: 700 28px/1.05 var(--title); color: #fff; -webkit-text-stroke: 5px var(--ts); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ts);
  background: linear-gradient(#97e866, #55c63e 55%, #3aa628); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 2.5px var(--leaf-rim), 0 6px 0 2.5px var(--leaf-lip); }
.ribbon.red { --ts: var(--berry-edge); background: linear-gradient(#ff9483, #f2554a 55%, #dc3e2e); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 2.5px var(--berry-rim), 0 6px 0 2.5px var(--berry-lip); }
.ribbon.honey { --ts: var(--edge); background: linear-gradient(#ffe684, #ffbd26 55%, #f5a012); box-shadow: inset 0 3px 0 rgba(255,255,255,.6), 0 0 0 2.5px var(--rim), 0 6px 0 2.5px var(--lip); }
.ribbon.violet { --ts: var(--violet-edge); background: linear-gradient(#c7a6ff, #9364ee 55%, #7848d8); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 0 0 2.5px var(--violet-rim), 0 6px 0 2.5px var(--violet-lip); }
.reward { display: flex; justify-content: center; gap: 12px; margin: 12px 0 6px; }
.reward .r { display: flex; flex-direction: column; align-items: center; min-width: 104px; padding: 10px 6px 8px; border-radius: 20px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.22), 0 0 0 2.5px #f0d394; }
.reward .r img { width: 54px; height: 54px; object-fit: contain; }
.reward .r b { font: 700 27px/1.1 var(--title); color: var(--ink); }
.reward .r small { font: 800 12px/1.2 var(--text); color: var(--ink-soft); }
.picframe { width: 140px; height: 140px; margin: 0 auto 10px; border-radius: 26px; display: grid; place-items: center; background: radial-gradient(circle, #fffbea, #f6e2b0); box-shadow: inset 0 0 0 4px #fff8de, inset 0 0 0 7px #f0b450, 0 0 0 2.5px var(--rim); }
.picframe canvas { image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(150,90,10,.35)); }
.picframe.big { width: 168px; height: 168px; background: radial-gradient(circle, #fffef6 30%, #fbe7b0 75%, #f3cf7c); overflow: hidden; }
.picframe .pic3d { width: 152px; height: 152px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(120,60,0,.35)); animation: picin .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes picin { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.stuckrow { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; padding: 12px 8px 10px; border-radius: 18px; background: rgba(240,78,62,.08); box-shadow: inset 0 0 0 2px rgba(240,78,62,.35); }
.stuckrow .nestb { position: relative; width: 46px; height: 60px; filter: drop-shadow(0 0 7px rgba(240,78,62,.9)); }
.stuckrow .nestb b { position: absolute; z-index: 2; left: 50%; top: 17px; transform: translateX(-50%); color: #fff; font: 700 18px/1 var(--title); white-space: nowrap; -webkit-text-stroke: 4px color-mix(in srgb, var(--c) 50%, #000); paint-order: stroke fill; text-shadow: 0 2px 2px rgba(0,0,0,.25); }
.heartsrow { display: flex; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.heartsrow img { width: 38px; height: 38px; object-fit: contain; }
.heartsrow img.gone { filter: grayscale(1) opacity(.35); }
.timer { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 -3px 0 rgba(200,150,60,.18), 0 0 0 2.5px #f0d394; font: 700 22px/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.timer svg { width: 24px; height: 24px; }
.sheet { position: relative; width: 100%; max-height: 88%; display: flex; flex-direction: column; border-radius: 32px 32px 0 0; background: linear-gradient(#fffef8, #fbedcf);
  box-shadow: inset 0 3px 0 #fff, 0 -2.5px 0 #f2b752, 0 -5px 0 var(--rim), 0 -18px 40px rgba(30,15,0,.4); padding: 12px 16px calc(var(--sab) + 18px); animation: up .26s cubic-bezier(.2,.9,.3,1.1); }
.sheet::before { content: ''; display: block; width: 48px; height: 6px; margin: 0 auto 10px; border-radius: 3px; background: rgba(170,110,40,.35); }
@keyframes up { from { transform: translateY(100%); } }
.sheet header { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.sheet header h2 { flex: 1; font-size: 26px; color: #fff; -webkit-text-stroke: 5px #e07a06; paint-order: stroke fill; text-shadow: 0 2px 0 #e07a06; }
.sheet .x { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ff9c8c, #e8443a); color: #fff; font: 700 26px/1 var(--title);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.65), 0 0 0 2.5px var(--berry-rim), 0 3px 0 2.5px var(--berry-lip); }
.sheet .body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 6px; -webkit-overflow-scrolling: touch; }
.card { position: relative; border-radius: 22px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.16), 0 0 0 2px #f0d394, 0 4px 10px rgba(120,80,20,.1); padding: 14px; margin-bottom: 12px; }
.card h3 { font-size: 18px; margin-bottom: 6px; color: var(--ink); }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.row .grow b { display: block; font: 700 17px/1.15 var(--title); color: var(--ink); }
.row .grow small { display: block; color: var(--ink-soft); font: 700 13px/1.28 var(--text); }
.item-ic { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.section-title { margin: 18px 4px 8px; font-size: 20px; color: #fff; -webkit-text-stroke: 4.5px #c86204; paint-order: stroke fill; text-shadow: 0 2px 0 #c86204; }
.colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.colorbtn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 20px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.18), 0 0 0 2.5px #f0d394; font: 700 15px/1.2 var(--title); color: var(--ink); }
.colorbtn i { width: 48px; height: 48px; border-radius: 14px; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.5), rgba(255,255,255,0) 50%), var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 2.5px #fff, 0 4px 6px rgba(0,0,0,.25); }
.colorbtn small { font: 800 12px/1.2 var(--text); color: var(--ink-soft); }
.colorbtn[disabled] { opacity: .4; }
.toggle { position: relative; width: 56px; height: 32px; border-radius: 16px; background: #e3d3b2; box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 0 0 2px #cdb48a; transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: left .2s; }
.toggle[aria-checked='true'] { background: linear-gradient(#97e866, #3aa628); box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 0 0 2px var(--leaf-rim); }
.toggle[aria-checked='true']::after { left: 27px; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 2px; border-bottom: 1.5px solid #f3e3c1; font: 800 16px/1.2 var(--text); color: var(--ink); }
.setrow:last-child { border-bottom: 0; }
.linkrow { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 46px; padding: 10px 2px; border-bottom: 1.5px solid #f3e3c1; font: 800 15px/1.2 var(--text); color: var(--ink); text-decoration: none; text-align: left; }
.linkrow::after { content: '›'; font-size: 22px; color: var(--rim); }
.danger { color: #c23b2a; }
.hintline { font: 700 12.5px/1.3 var(--text); color: var(--ink-soft); margin: -4px 2px 8px; }
select, input[type=text] { font: 700 16px/1 var(--text); color: var(--ink); padding: 10px 12px; border-radius: 14px; border: 0; background: #fff; box-shadow: inset 0 3px 4px rgba(150,100,30,.15), 0 0 0 3px #f0b450; min-width: 0; }
.footer { text-align: center; font: 700 12px/1.3 var(--text); color: var(--ink-soft); margin: 14px 0 4px; }

/* ---------- Start, Bienenstock ---------- */
.home { position: absolute; inset: 0; pointer-events: none; }
.home > * { pointer-events: auto; }
.topbar { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--sat) + 10px) 16px 0; display: flex; align-items: center; gap: 12px; }
.topbar .sp { flex: 1; }
.topbar .tbmid { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* schmale Handys: engere Abstände, damit auch 12.345 Honig neben das Zahnrad passt */
@media (max-width: 420px) {
  .topbar { gap: 6px; }
  .topbar .tbmid { gap: 5px; }
  .topbar .pill { gap: 4px; }
  .topbar .pill b:last-child, .topbar .pill .unit { padding-right: 5px; }
  .topbar .pill .unit { letter-spacing: .3px; }
}
.topbar .pbtn, .topbar > .round { width: 50px; flex: none; } /* gleich breit links und rechts, damit die Mitte wirklich die Mitte ist */
/* Honigwabe mit tropfendem Honig (Start) */
.lvhex { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 12px; animation: lvfloat 3.2s ease-in-out infinite; }
.lvhex::before { content: ''; position: absolute; z-index: -1; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,140,.8), rgba(255,206,70,.35) 42%, rgba(255,206,70,0) 68%); animation: lvhalo 3.2s ease-in-out infinite; }
.lvhex .art2 { position: absolute; inset: 0; background: url(../media/ui/honey-hex.webp) center / contain no-repeat; filter: drop-shadow(0 14px 16px rgba(70,30,0,.45)); }
.lvhex .l1 { position: relative; font-size: 24px; line-height: 1; --ts: #c86204; --sw: 5px; }
.lvhex .l2 { position: relative; font-size: 84px; line-height: .98; --ts: #c86204; --sw: 7px; }
.lvhex .nm { position: relative; margin-top: 4px; max-width: 150px; padding: 3px 12px; border-radius: 12px; background: rgba(120,58,4,.82); color: #fff; font: 600 14px/1.15 var(--title); text-align: center; }
.lvhex .chal { position: absolute; bottom: -6px; padding: 4px 10px; border-radius: 10px; background: linear-gradient(#c7a6ff, #7848d8); color: #fff; font: 700 12px/1 var(--title); text-transform: uppercase; letter-spacing: .8px; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.3); }
.lvhex:active { scale: .97; }
.drip { position: absolute; z-index: 1; width: 12px; height: 28px; border-radius: 45% 45% 55% 55%; background: linear-gradient(90deg, #e99a07, #ffdb59 42%, #fff3a6 55%, #e7a00a); box-shadow: inset 2px 0 2px rgba(255,255,255,.55), 0 0 8px rgba(255,186,41,.5); transform-origin: 50% 0; animation: honeyfall 3.2s cubic-bezier(.4,0,.8,1) infinite; pointer-events: none; }
.drip.d1 { left: 20%; top: 86%; }
.drip.d2 { left: 68%; top: 90%; width: 9px; animation-delay: -1.4s; }
.drip.d3 { left: 47%; top: 95%; width: 10px; animation-delay: -2.4s; }
.drip.d4 { left: 84%; top: 79%; width: 7px; animation-delay: -.7s; }
@keyframes honeyfall { 0% { transform: translateY(-8px) scale(.7,.1); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateY(0) scale(1,1.3); } 60% { transform: translateY(16px) scale(.8,1.1); opacity: 1; } 90%, 100% { transform: translateY(110px) scale(.55,.5); opacity: 0; } }
@keyframes lvfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes lvhalo { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.playbtn { position: absolute; left: 50%; transform: translateX(-50%); width: min(72%, 290px); min-height: 74px; font-size: 36px; border-radius: 26px; -webkit-text-stroke-width: 5px; }
.playbtn:active { transform: translateX(-50%) translateY(3px); }
.side { position: absolute; display: flex; flex-direction: column; gap: 12px; }
.side.l { left: 10px; } .side.r { right: 10px; }
.sidebtn { position: relative; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sidebtn .ic { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(#fffef8, #fbe7b9); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2.5px var(--rim), 0 4px 0 2.5px var(--lip), 0 8px 14px rgba(60,30,0,.28); transition: transform .1s; }
.sidebtn:active .ic { transform: translateY(2px); }
.sidebtn img { width: 46px; height: 46px; object-fit: contain; }
.sidebtn small { padding: 2px 8px; border-radius: 9px; background: rgba(74,42,8,.84); font: 600 11.5px/1.25 var(--title); color: #fff; white-space: nowrap; }
.dock { position: absolute; left: 12px; right: 12px; bottom: calc(var(--sab) + 12px); height: 74px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; padding: 0 4px 7px; border-radius: 26px; background: linear-gradient(#fffef8, #f7e2b2); box-shadow: inset 0 2px 0 #fff, 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 14px 26px rgba(40,20,0,.38); }
.dock button { position: relative; z-index: 0; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font: 600 13px/1 var(--title); color: var(--ink-soft); }
.dock button img { position: relative; z-index: 1; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(80,40,0,.22)); }
.dock button span { position: relative; z-index: 1; }
.dock button.on { color: #fff; font-weight: 700; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; }
.dock button.on::before { content: ''; position: absolute; left: 50%; bottom: 4px; width: 80px; height: 88px; margin-left: -40px; z-index: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(#e3901a, var(--lip)); }
.dock button.on::after { content: ''; position: absolute; left: 50%; bottom: 10px; width: 72px; height: 80px; margin-left: -36px; z-index: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: radial-gradient(circle at 50% 22%, #fffbe0, #ffd24a 50%, #f5a412); }
.dock button.on img { width: 58px; height: 58px; margin-bottom: 6px; }
.dock .badge { top: 0; right: 16px; z-index: 2; }
.flyer { position: absolute; width: 56px; height: 56px; pointer-events: none; background: url(../media/ui/b-pick.svg) center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.hive { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.hive > * { pointer-events: auto; }
.hive .head { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) 16px 6px; min-height: 56px; }
.hive .head .hic { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(80,40,0,.3)); }
.pill.pollen { cursor: pointer; padding-right: 6px; }
.hive .head .sp { flex: 1; }
.hive .head h1 { font-size: 30px; color: #fff; -webkit-text-stroke: 5px #c86204; paint-order: stroke fill; text-shadow: 0 2px 0 #c86204; white-space: nowrap; }
/* Bienenstock (Stefan 16.10.2026: „das Gelbe … deutlich besser“): heller Honig mit Wabenmuster, kein dunkles Bild */
#bg[data-scene='hive'] { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 L56 48.5 L28 64.7 L0 48.5 L0 16.2 Z M28 64.7 L28 97' fill='none' stroke='%23ffffff' stroke-width='2' opacity='.5'/%3E%3C/svg%3E") center top / 56px 97px, radial-gradient(ellipse at 50% 38%, #fff7dc, #ffe4a4 42%, #f9c868 78%, #eba43c); }
#bg[data-scene='hive']::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,250,230,0) 55%, rgba(150,80,0,.22)); }
.tree { position: relative; flex: 1; min-height: 0; margin: 10px 0 calc(var(--sab) + 100px); padding-bottom: 16px; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Talentbaum „Wabe“ (Variante A): 37 Waben in Ringen um die Königin; Honig füllt die Wabe Stufe für Stufe */
.combwrap { position: relative; margin-top: 4px; }
.comb { position: absolute; left: 50%; top: 0; transform-origin: 50% 0; }
.c { position: absolute; width: 52px; height: 60px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; filter: drop-shadow(0 3px 0 rgba(150,80,0,.35)) drop-shadow(0 5px 6px rgba(110,60,0,.18)); transition: transform .12s; }
.c:active { transform: translate(-50%, -50%) scale(.94); }
:is(.c, .tinfo .hx, .hhelp .hx) i { position: absolute; display: block; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
:is(.c, .tinfo .hx, .hhelp .hx) .rim { inset: 0; background: linear-gradient(#ffeaa0, #e8960e 60%, #b85e06); }
:is(.c, .tinfo .hx, .hhelp .hx) .in { inset: 3px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #fffdf3, #f6e2b0); }
:is(.c, .tinfo .hx, .hhelp .hx) .in .fill { left: 0; right: 0; bottom: 0; clip-path: none; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 30%), linear-gradient(#ffd24a, #f39a0c); box-shadow: inset 0 2px 0 rgba(255,255,255,.6); }
:is(.c, .tinfo .hx, .hhelp .hx) > img { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 1px rgba(0,0,0,.22)); }
:is(.c, .tinfo .hx, .hhelp .hx):is(.own, .max) .rim { background: linear-gradient(#fff3b0, #f5a412 55%, #a95a06); }
:is(.c, .tinfo .hx, .hhelp .hx).can .rim { background: linear-gradient(#c9f59e, #3aa628); }
.c.can { filter: drop-shadow(0 0 5px rgba(110,230,70,.75)); animation: combcan 1.8s ease-in-out infinite; }
@keyframes combcan { 50% { filter: drop-shadow(0 0 10px rgba(110,230,70,1)); } }
:is(.c, .tinfo .hx, .hhelp .hx):is(.far, .r2) .rim { background: linear-gradient(#e9dcc0, #c9b48c); }
:is(.c, .tinfo .hx, .hhelp .hx):is(.far, .r2) .in { background: radial-gradient(circle at 50% 30%, #f7efdc, #e3d3ae); }
:is(.c, .tinfo .hx, .hhelp .hx).far > img { filter: grayscale(1) opacity(.6); }
:is(.c, .tinfo .hx, .hhelp .hx).r2:not(.far) > img { filter: grayscale(1) opacity(.5); }
:is(.c, .tinfo .hx, .hhelp .hx).ring.r3 .rim { background: linear-gradient(#cdbd9c, #9c8862); }
:is(.c, .tinfo .hx, .hhelp .hx).ring.r3 .in { background: radial-gradient(circle at 50% 30%, #d9cba9, #b8a47c); }
:is(.c, .tinfo .hx, .hhelp .hx).ring.r3 > img { filter: grayscale(1) brightness(.85) opacity(.4); }
.c.far.r3 .rim { background: linear-gradient(#e9dcc0, #c9b48c); }
.c.far.r3 .in { background: radial-gradient(circle at 50% 30%, #f7efdc, #e3d3ae); }
.c.key { z-index: 2; }
:is(.c, .tinfo .hx, .hhelp .hx).key .rim { background: linear-gradient(#fff6c8, #ffc12e 45%, #c86a06); }
:is(.c, .tinfo .hx, .hhelp .hx).key:is(.ring, .far) .rim { background: linear-gradient(#f3e3b0, #d6a64a 50%, #9a6a1c); }
.c.key > img { width: 34px; height: 34px; }
.cbadges { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cbadges .lk { position: absolute; transform: translateX(-50%); height: 18px; padding: 0 6px 0 4px; border-radius: 9px; display: flex; align-items: center; gap: 2px; background: rgba(80,50,10,.82); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.cbadges .lk i { display: grid; place-items: center; }
.cbadges .lk svg { width: 11px; height: 11px; }
.cbadges .lk b { font: 700 11px/1 var(--title); color: #fff; }
.cbadges .pr { position: absolute; transform: translateX(-50%); display: flex; align-items: center; gap: 1px; min-width: 20px; height: 16px; padding: 0 5px 0 2px; border-radius: 8px; background: linear-gradient(#97e866, #3aa628); font: 700 11px/16px var(--title); color: #fff; -webkit-text-stroke: 2.5px #2a8a1c; paint-order: stroke fill; box-shadow: 0 0 0 1.5px #fff; white-space: nowrap; }
.cbadges .pr.no { background: linear-gradient(#f3ecdc, #cdbd9c); -webkit-text-stroke-color: #7a6a52; }
.cbadges .pr img { width: 13px; height: 13px; flex: none; filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); }
.cbadges .pr b { font: inherit; }
.c.queen { width: 64px; height: 74px; z-index: 3; filter: drop-shadow(0 0 14px rgba(255,214,74,.95)); }
.c.queen > img { width: 40px; height: 40px; }
.c.queen.can { animation: combcan 1.8s ease-in-out infinite; }
.c.sel { z-index: 4; animation: none; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 2.5px #fff) drop-shadow(0 0 2.5px #fff) drop-shadow(0 4px 6px rgba(80,40,0,.4)); }
.c.pop, .c.sel.pop { animation: combpop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes combpop { 0% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(1); } }
/* Legende und Infokarte der gewählten Wabe */
.thint { margin: 8px 16px 0; text-align: center; font: 800 12.5px/1.3 var(--text); color: #8a5a12; }
.tinfo { position: relative; width: min(440px, calc(100% - 28px)); margin: 12px auto 0; padding: 12px 14px 14px; border-radius: 24px; background: linear-gradient(#fffef8, #fcebc4); box-shadow: inset 0 2px 0 #fff, 0 0 0 2.5px var(--rim), 0 5px 0 2.5px var(--lip), 0 12px 22px rgba(80,40,0,.28); display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.tinfo .hx { position: relative; width: 58px; height: 67px; filter: drop-shadow(0 3px 0 rgba(150,80,0,.3)); }
.tinfo .hx > img { width: 36px; height: 36px; }
.tinfo h2 { margin: 0; font: 700 21px/1.15 var(--title); color: var(--ink); }
.tinfo .rk { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 800 12.5px/1.2 var(--text); color: #6b4720; }
.tinfo .bar { display: flex; gap: 3px; }
.tinfo .bar i { width: 22px; height: 9px; border-radius: 5px; background: #ead9b4; box-shadow: inset 0 1px 2px rgba(120,70,10,.3); }
.tinfo .bar i.on { background: linear-gradient(#ffe27a, #f29a0c); }
.tinfo .eff { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 700 15px/1.3 var(--title); color: var(--ink); }
.tinfo .eff .nx { color: #22701a; }
.tinfo .eff .ar svg { display: block; width: 18px; height: 18px; }
.tinfo :is(.go, .why, .wsrow) { grid-column: 1 / -1; }
.tinfo .go .cost.no { opacity: .65; }
.tinfo .why { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 6px 12px; border-radius: 21px; background: rgba(140,90,20,.1); font: 700 14.5px/1.25 var(--title); color: #7a5420; text-align: center; }
.tinfo .why.mx { background: linear-gradient(#ffe684, #f5a012); color: #fff; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; font-size: 17px; }
.tinfo .why .lkb { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(80,50,10,.7); }
.tinfo .why .lkb svg { width: 13px; height: 13px; }
.tinfo .wsrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; background: rgba(255,255,255,.75); font: 700 14px/1.25 var(--title); color: var(--ink); }
.tinfo .wsrow > img { width: 30px; height: 30px; flex: none; }
.tinfo .wsrow .grow { flex: 1; }
/* Pollen erklären (Fenster) */
.hero { position: relative; width: 96px; height: 108px; margin: 2px auto 6px; filter: drop-shadow(0 4px 0 var(--lip)) drop-shadow(0 0 16px rgba(255,214,74,.85)); }
.hero::before, .hero::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hero::before { inset: 0; background: linear-gradient(#fff0a6, #f5a412 55%, #c86a06); }
.hero::after { inset: 5px; background: radial-gradient(circle at 50% 30%, #fffdf2, #f4dc9e); }
.hero > img { position: absolute; z-index: 1; left: 50%; top: 50%; width: 66px; height: 66px; transform: translate(-50%, -50%); }

/* ---------- Seiten mit Kopf (Shop, Gärten, Fest) ---------- */
.page { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.page > * { pointer-events: auto; }
.page .head { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 10px) 16px 6px; min-height: 56px; }
.page .head .sp { flex: 1; }
.page .head h1 { font-size: 30px; color: #fff; -webkit-text-stroke: 5px #c86204; paint-order: stroke fill; text-shadow: 0 2px 0 #c86204; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page .head .hic { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(80,40,0,.3)); }
.page .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 24px; -webkit-overflow-scrolling: touch; }
/* mit Dock: Inhalt endet über dem Dock (nichts scrollt darunter durch) und läuft sanft aus */
.page .scroll:has(~ .dock) { margin-bottom: calc(var(--sab) + 100px); -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.page .foot { padding: 8px 16px calc(var(--sab) + 18px); }
/* Seiten mit Bildlauf (Stefan 16.10.2026: Talente und Shop-Karten verschwanden mitten im Bild an harten Kanten, der Rollbalken
   sah schlecht aus): Inhalt läuft über die ganze Höhe, verschwindet weich hinter dem Titelbereich (leicht verschwommen) und
   hinter der Leiste unten; kein sichtbarer Rollbalken */
.page .head, .hive .head { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.page .head::before, .hive .head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,0) 45%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 L28 8.1 L28 24.25 L14 32.35 L0 24.25 L0 8.1 Z M14 32.35 L14 48.5' fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='.28'/%3E%3C/svg%3E") center top / 28px 48.5px,
    linear-gradient(var(--hb1, #ffd45e), var(--hb2, #f6a91c) calc(100% - 6px), var(--hrim, #e48a0c) calc(100% - 6px));
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.25); }
/* Honig tropft vom unteren Rand der Leiste (gleiche Farbe wie der Rand), ganz deckend: dahinter verschwindet der Inhalt */
.page .head::after, .hive .head::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 26px; z-index: -1; pointer-events: none;
  background: var(--hrim, #ef9612); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='20' viewBox='0 0 132 20'%3E%3Cpath d='M0 0H132V5C126 5 124 6 123 8C122 11 121 15 117.5 15C114 15 113 11 112 8C111 6 108 5 100 5C90 5 88 6 87.5 8C87 10 86.5 12 84 12C81.5 12 81 10 80.5 8C80 6 77 5 66 5C54 5 50 6 49 9C48 13 47.5 18 43.5 18C39.5 18 39 13 38 9C37 6 33 5 22 5C14 5 11 6 10.5 8C10 10 9.5 11.5 7.5 11.5C5.5 11.5 5 10 4.5 8C4 6 2.5 5 0 5Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 26px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='20' viewBox='0 0 132 20'%3E%3Cpath d='M0 0H132V5C126 5 124 6 123 8C122 11 121 15 117.5 15C114 15 113 11 112 8C111 6 108 5 100 5C90 5 88 6 87.5 8C87 10 86.5 12 84 12C81.5 12 81 10 80.5 8C80 6 77 5 66 5C54 5 50 6 49 9C48 13 47.5 18 43.5 18C39.5 18 39 13 38 9C37 6 33 5 22 5C14 5 11 6 10.5 8C10 10 9.5 11.5 7.5 11.5C5.5 11.5 5 10 4.5 8C4 6 2.5 5 0 5Z' fill='%23000'/%3E%3C/svg%3E") repeat-x 0 0 / 160px 26px;
  filter: drop-shadow(0 3px 3px rgba(80,40,0,.25)); }
.page.album .head { --hb1: #ffe07a; --hb2: #f7b02a; --hrim: #e48a0c; }
.page.evpage .head { --hb1: color-mix(in srgb, var(--evc, #f5a012) 45%, #fff); --hb2: var(--evc, #f5a012); --hrim: color-mix(in srgb, var(--evc, #f5a012) 70%, #000); }
/* Titel mit Platz für die dicke Kontur und Unterlängen (Stefan 16.10.2026: beim „Shop“ waren S und p abgeschnitten) */
.page .head h1, .hive .head h1 { padding: 4px 6px 7px; margin: -4px -6px -7px; }
.page .scroll { padding-top: calc(var(--sat) + 84px); }
.page .panel { margin-top: calc(var(--sat) + 84px); } /* Gärten: Kasten beginnt unter der Honigleiste (vorher lagen Garten 1–4 dahinter) */
.page .scroll:has(~ .dock) { margin-bottom: 0; padding-bottom: calc(var(--sab) + 112px); --fade: linear-gradient(#000 calc(100% - var(--sab) - 60px), transparent calc(100% - var(--sab) - 14px));
  -webkit-mask-image: var(--fade); mask-image: var(--fade); } /* verschwindet hinter der schwebenden Leiste, im Randstreifen darunter nichts */
.tree { margin: 0 !important; padding: calc(var(--sat) + 78px) 0 calc(var(--sab) + 112px) !important; --fade: linear-gradient(#000 calc(100% - var(--sab) - 60px), transparent calc(100% - var(--sab) - 14px));
  -webkit-mask-image: var(--fade) !important; mask-image: var(--fade) !important; }
/* Kein sichtbarer Rollbalken im ganzen Spiel (Stefan 16./17.10.2026: „dieser Balken … zum Kotzen“); Wischen und Mausrad scrollen weiter */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
#bg[data-scene='shop'] { background: radial-gradient(circle at 50% 4%, rgba(255,240,180,.95), rgba(255,240,180,0) 30%), repeating-conic-gradient(from 0deg at 50% 4%, #ffc23a 0deg 9deg, #ffae22 9deg 18deg); }
#bg[data-scene='album'] { background-image: url(../media/img/garden.webp); }
#bg[data-scene='event'] { background-image: url(../media/img/garden.webp); }
#bg[data-scene='event']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--evc, #f5a012) 55%, transparent), color-mix(in srgb, var(--evc, #f5a012) 25%, rgba(30,15,0,.4))); }
.sheet header .hic img { width: 44px; height: 44px; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(80,40,0,.2)); }
.sheet header .hbtn { min-height: 38px; font-size: 15px; padding: 0 12px; border-radius: 14px; }

/* ---------- Shop ---------- */
.offer { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 14px 16px 10px; border-radius: 26px; margin-bottom: 16px; }
.offer.gold { background: linear-gradient(135deg, #fff9e0, #ffe39a); box-shadow: 0 0 0 3px #ffd24a, 0 6px 0 3px var(--lip), 0 16px 28px rgba(120,60,0,.28); }
.offer.violet { background: linear-gradient(135deg, #f8f1ff, #e2d2ff); box-shadow: 0 0 0 3px #b99af2, 0 6px 0 3px var(--violet-rim), 0 16px 28px rgba(50,20,100,.24); }
.offer.free .pic { position: relative; }
.offer.free .pic .play { position: absolute; right: 2px; bottom: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2.5px var(--violet-rim), 0 3px 4px rgba(40,10,80,.3); }
.offer.free .pic .play img { width: 28px; height: 28px; filter: none; }
.offer .amount { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.offer .amount img { width: 30px; height: 30px; }
.offer .amount b { font: 700 26px/1 var(--title); color: #fff; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; }
.offer .dots { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; }
.offer .dots i { width: 15px; height: 17px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(106,63,200,.22); }
.offer .dots i.on { background: linear-gradient(#ffe27a, #f2a50c); }
.offer .dots small { margin-left: 6px; font: 800 13px/1.2 var(--text); color: var(--violet-lip); white-space: nowrap; }
.offer .btn img { width: 22px; height: 22px; margin-right: 6px; }
.offer.leaf { background: linear-gradient(135deg, #f3fdea, #cdf0b4); box-shadow: 0 0 0 3px #8ad86a, 0 6px 0 3px var(--leaf-rim), 0 16px 28px rgba(30,70,10,.26); }
.offer .pic { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); }
.offer .pic img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); }
.offer h3 { margin: 0 0 6px; font: 700 22px/1.05 var(--title); color: var(--ink); }
.offer ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.offer li { display: flex; align-items: center; gap: 7px; font: 800 13.5px/1.2 var(--text); color: var(--ink); }
.offer li img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.flag { display: inline-block; padding: 2px 9px; margin-bottom: 5px; border-radius: 9px; background: #f04e3e; color: #fff; font: 900 11px/1.4 var(--text); letter-spacing: .4px; }
.srow { padding: 10px 10px 10px 12px; margin-bottom: 10px; }
.srow .item-ic { width: 46px; height: 46px; }
.btn.price { min-width: 112px; }
.btn.price img { width: 24px; height: 24px; }
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hc { margin: 0; padding: 12px 10px; text-align: center; }
.hc img.ic { display: block; width: 68px; height: 68px; margin: 0 auto 2px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.22)); }
.hc > b { display: block; font: 700 16px/1.15 var(--title); color: var(--ink); margin-bottom: 2px; }
.hc > small { display: block; margin-bottom: 8px; font: 800 12px/1.2 var(--text); color: var(--ink-soft); }
.hc .btn img { width: 24px; height: 24px; }
.pk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pk3 .card { margin: 0; padding: 10px 6px; text-align: center; }
.pk3 img { width: 58px; height: 58px; object-fit: contain; }
.pk3 b { display: block; margin: 2px 0 8px; font: 700 17px/1 var(--title); color: var(--ink); }
.pk3 .btn { font-size: 15px; padding: 0 6px; }
.previewnote { margin: 0 2px 14px; padding: 8px 12px; border-radius: 14px; background: rgba(74,42,8,.78); color: #fff; font: 800 12.5px/1.35 var(--text); text-align: center; }
.shopnote { margin: 16px 4px 0; text-align: center; font: 800 12.5px/1.3 var(--text); color: #fff; text-shadow: 0 1px 2px rgba(120,60,0,.75); }
.page.shop .section-title { margin-top: 22px; }

/* ---------- Gärten ---------- */
.panel { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 6px 12px calc(var(--sab) + 122px); padding: 14px 12px 18px; border-radius: 30px; background: linear-gradient(#fffdf5, #fbeccb);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px #f2b752, 0 0 0 6.5px var(--rim), 0 8px 0 6.5px var(--lip), 0 14px 26px rgba(40,20,0,.3); }
.ptxt { margin: 0 2px 4px; font: 700 14px/1.35 var(--text); color: var(--ink-soft); }
.ch { display: flex; align-items: center; gap: 8px; margin: 14px 2px 8px; font: 700 17px/1 var(--title); color: var(--ink); }
.ch .ln { flex: 1; height: 3px; border-radius: 2px; background: #f0d394; }
.ch small { font: 800 12px/1 var(--text); color: var(--ink-soft); }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gc { position: relative; aspect-ratio: 1; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.2), 0 0 0 2.5px #f0d394; }
.gc canvas { margin: 0 !important; }
.gc b { font: 700 13px/1 var(--title); color: var(--ink-soft); }
.gc .ok { position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#8fe35c, #36a024); color: #fff; font: 900 12px/1 var(--text); box-shadow: 0 0 0 2px #fff; }
.gc.cur { background: radial-gradient(circle, #fff6b0, #ffd34a); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--amber), 0 0 16px rgba(255,200,60,.9); animation: curpulse 1.8s ease-in-out infinite; }
.gc.cur b { color: #6b3500; }
.gc .tri { font: 700 28px/1 var(--title); color: #fff; -webkit-text-stroke: 5px #c86204; paint-order: stroke fill; }
.gc.lk { background: #f3eadb; box-shadow: inset 0 -3px 0 rgba(150,120,70,.15), 0 0 0 2px #e4d6bd; }
.gc.lk b { font-size: 18px; color: #a8977a; }
.gc:active:not(.lk) { transform: scale(.96); }
@keyframes curpulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--amber), 0 0 26px rgba(255,200,60,1); } }

/* ---------- Einstellungen, Rechtliches ---------- */
.setcard { padding: 2px 12px; }
.setrow .lk { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.setrow .r { display: flex; align-items: center; gap: 6px; font: 800 14px/1 var(--text); color: var(--ink-soft); }
.setrow.nav { width: 100%; color: var(--ink); text-decoration: none; }
.setrow .gl svg, .setrow .gl, .setrow img.gi { width: 30px; height: 30px; flex: none; display: block; object-fit: contain; }
.setrow .cv svg, .chev { width: 18px; height: 18px; display: block; }
.setrow select { max-width: 52%; }
.badge.inl { position: static; }
.tight .setrow { min-height: 46px; font-size: 15px; }
.dangercard { background: #fff1ee; box-shadow: inset 0 -4px 0 rgba(200,80,60,.12), 0 0 0 2px #f5c3b8; }
.dangercard .setrow { border-color: #f5d6cf; }
.dangercard .col { display: flex; flex-direction: column; gap: 2px; }
.dangercard .col b { font: 800 15px/1.2 var(--text); color: #c23b2a; }
.dangercard .col small { font: 700 12px/1.25 var(--text); color: #8a4a3a; }
.player { padding: 12px; }
.player .ava { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff6d0, #ffd34a); box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--rim); }
.player .ava img { width: 44px; height: 44px; object-fit: contain; }
.player .grow .t { font: 700 18px/1.25 var(--title); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .cap { display: block; }
.linkish { display: inline; padding: 0; font: 900 13px/1.3 var(--text); color: #22701a; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fenster: Code, Spielstand löschen, Geschenke ---------- */
.dialog > .x { position: absolute; z-index: 5; right: -10px; top: -14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ff9c8c, #e8443a); color: #fff; font: 700 26px/1 var(--title);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.65), 0 0 0 2.5px var(--berry-rim), 0 3px 0 2.5px var(--berry-lip); }
.dialog.rib > .x { top: -84px; right: -12px; }
.dtitle { margin: 2px 0 6px; font: 700 21px/1.15 var(--title); color: #e07a06; }
.dialog p.dtext { margin: 2px 0 12px; }
.codein { display: block; width: 100%; margin-bottom: 14px; text-align: left; font: 700 22px/1 var(--title) !important; letter-spacing: 2px; text-transform: uppercase; padding: 14px 14px !important; }
.codein::placeholder { letter-spacing: 0; text-transform: none; font: 700 17px/1 var(--text); color: #b9a07a; }
.coderes { margin-top: 12px; }
.okcard { margin: 0; text-align: left; box-shadow: inset 0 -4px 0 rgba(80,170,50,.15), 0 0 0 3px #3aa628; }
.okcard .item-ic { width: 44px; height: 44px; }
.errline { margin: 0 !important; font: 800 14px/1.3 var(--text) !important; color: #c23b2a !important; }
.keeps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; font: 600 13px/1 var(--title); color: #fff; flex: none; }
.okchip { background: linear-gradient(#8fe35c, #36a024); box-shadow: 0 0 0 2px #fff; }
.gchip { background: linear-gradient(#b48cff, #8250e6); box-shadow: 0 0 0 2px #fff; }
.giftrow { display: flex; flex-wrap: wrap; gap: 6px; }
.gift { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px 0 4px; border-radius: 15px; background: #fff7df; box-shadow: inset 0 0 0 2px #f0d394; font: 700 14px/1 var(--title); color: var(--ink); }
.gift img { width: 24px; height: 24px; object-fit: contain; }
.gtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 116px)); justify-content: center; gap: 8px; margin: 6px 0 16px; }
.gt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.2), 0 0 0 2.5px #f0d394; }
.gt img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.gt b { font: 700 19px/1.1 var(--title); color: var(--ink); }
.gt small { font: 800 11.5px/1.2 var(--text); color: var(--ink-soft); }
.evgift { margin: 4px 0 12px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, #ffd24a 22%, #fff); box-shadow: 0 0 0 2.5px #f0b450; }
.evgift .giftrow { justify-content: center; margin-top: 6px; }
.mailimg { width: 100%; border-radius: 14px; margin: 0 0 12px; }

/* ---------- Aufgaben ---------- */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sechead .section-title { margin-bottom: 8px; }
.sechead .cap { white-space: nowrap; }
.daystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0 0 12px; padding: 6px 2px 4px; }
.day { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 -3px 0 rgba(200,150,60,.18), 0 0 0 2px #f0d394; }
.day small { font: 900 9.5px/1 var(--text); color: #9a5a12; text-transform: uppercase; white-space: nowrap; }
.day img { width: 28px; height: 28px; object-fit: contain; }
.day b { font: 700 11px/1 var(--title); color: var(--ink); white-space: nowrap; }
.day .more { position: absolute; top: -6px; right: -4px; padding: 1px 5px; border-radius: 8px; background: #8250e6; color: #fff; font: 700 10px/1.3 var(--title); font-style: normal; box-shadow: 0 0 0 1.5px #fff; }
.day.big { background: linear-gradient(#fff6c8, #ffe08a); box-shadow: inset 0 -3px 0 rgba(200,120,0,.2), 0 0 0 2px #f2b752; }
.day.today { background: radial-gradient(circle at 50% 30%, #fffbe0, #ffd85a 60%, #f5a412); box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--amber), 0 0 14px rgba(255,200,60,.9); animation: curpulse 1.8s ease-in-out infinite; }
.day.got { opacity: .55; }
.day.got img { filter: grayscale(.6); }
.day .ok { position: absolute; inset: auto 50% -7px auto; transform: translateX(50%); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#8fe35c, #36a024); color: #fff; font: 900 11px/1 var(--text); box-shadow: 0 0 0 2px #fff; }
.card.today { text-align: center; padding: 12px 12px 14px; }
.card.today .giftrow { justify-content: center; margin: 8px 0 12px; }
.quest { padding: 12px 14px; margin-bottom: 10px; }
.quest .row { gap: 8px; }
.quest .grow b { font-size: 15.5px; }
.qbar { position: relative; height: 12px; margin-top: 8px; border-radius: 6px; background: #f3e3c1; box-shadow: inset 0 2px 3px rgba(120,80,20,.18); overflow: hidden; }
.qbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(#ffe27a, #f29a0c); box-shadow: inset 0 -2px 0 rgba(150,70,0,.2); }
.quest.done { box-shadow: inset 0 -4px 0 rgba(80,170,50,.15), 0 0 0 2.5px #3aa628; }
.quest.done .qbar i { background: linear-gradient(#97e866, #3aa628); }
.quest.ready { background: linear-gradient(#fbfff5, #e6f9d6); animation: curpulse 1.8s ease-in-out infinite; }
.qrew { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.qrew .cap { margin-right: 2px; }
.qrew .gift { height: 26px; font-size: 12.5px; padding: 0 8px 0 3px; }
.qrew .gift img { width: 20px; height: 20px; }
.qrew .gg { font: 800 11.5px/1 var(--text); color: #6a3fc8; }
.btn.qclaim { min-height: 40px; padding: 0 14px; }
.evlink { width: 100%; margin-top: 8px; text-align: left; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 0 0 3px var(--evc, #f2b752); }
.evlink .chev { font: 700 26px/1 var(--title); color: var(--rim); }
.empty { text-align: center; padding: 24px 10px; }
.empty img { width: 72px; height: 72px; opacity: .7; }
.empty p { font: 800 15px/1.35 var(--text); color: var(--ink-soft); }

/* ---------- Start: Fest-Knopf ---------- */
.sidebtn.ev .ic { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--evc, var(--rim)), 0 4px 0 3px color-mix(in srgb, var(--evc, #a95a06) 60%, #000), 0 8px 14px rgba(60,30,0,.28); background: radial-gradient(circle at 50% 30%, #fff, color-mix(in srgb, var(--evc, #ffd24a) 30%, #fff)); }
.sidebtn.ev.live .ic { animation: evglow 2.2s ease-in-out infinite; }
@keyframes evglow { 50% { transform: translateY(-2px); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--evc, #ffd24a) 80%, #fff)); } }
.sidebtn .evtime { margin-top: -1px; padding: 1px 7px; border-radius: 8px; background: var(--evc, #e8870e); color: #fff; font: 700 11px/1.3 var(--title); white-space: nowrap; box-shadow: 0 0 0 1.5px #fff; }

/* ---------- Fest-Seite ---------- */
.evpage .head h1 { -webkit-text-stroke-color: color-mix(in srgb, var(--evc) 70%, #000); text-shadow: 0 2px 0 color-mix(in srgb, var(--evc) 70%, #000); }
.evclock { padding: 5px 10px; border-radius: 12px; background: rgba(40,20,4,.78); color: #fff; font: 700 13px/1.1 var(--title); white-space: nowrap; }
.evhero { display: flex; gap: 12px; align-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 0 0 3px var(--evc), 0 6px 14px rgba(40,20,0,.2); }
.evhero .evicon { width: 76px; height: 76px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.evhero p { margin: 0 0 4px; font: 700 14px/1.35 var(--text); color: var(--ink); }
.evhero small { font: 800 12px/1.2 var(--text); color: var(--ink-soft); }
.evpage .scroll { padding-bottom: 12px; }
.evpage .section-title { -webkit-text-stroke-color: color-mix(in srgb, var(--evc) 70%, #000); text-shadow: 0 2px 0 color-mix(in srgb, var(--evc) 70%, #000); }
.evpage .hintline { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin-top: 2px; }
.evpage .cap { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mtrack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ms { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 18px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.2), 0 0 0 2.5px #f0d394; }
.ms .at { display: flex; align-items: baseline; gap: 4px; }
.ms .at b { font: 700 22px/1 var(--title); color: var(--ink); }
.ms .at small { font: 800 11px/1 var(--text); color: var(--ink-soft); }
.ms .giftrow { justify-content: center; gap: 4px; }
.ms .gift { height: 26px; padding: 0 7px 0 3px; font-size: 12.5px; }
.ms .gift img { width: 20px; height: 20px; }
.ms.ready { background: linear-gradient(#fffbe6, #ffe9a6); box-shadow: inset 0 -4px 0 rgba(200,150,60,.2), 0 0 0 2.5px #f5b224, 0 0 14px rgba(255,200,60,.75); animation: pulse 1.4s ease-in-out infinite; }
.ms .msclaim { min-height: 34px; font-size: 15px; }
.evgift .evhint { display: block; margin-top: 4px; font: 800 12.5px/1.2 var(--text); color: var(--ink-soft); }
/* 7-Tage-Geschenk: Tag 1–6 in zwei Reihen, Tag 7 groß über die ganze Breite */
.daystrip.week { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 4px 4px; }
.daystrip.week .day { gap: 4px; padding: 9px 4px 11px; }
.daystrip.week .day small { font-size: 11px; }
.daystrip.week .day img { width: 36px; height: 36px; }
.daystrip.week .day b { font-size: 14px; }
.daystrip.week .day .ok { inset: -6px -6px auto auto; transform: none; width: 22px; height: 22px; font-size: 12px; }
.daystrip.week .day.seven { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; background: linear-gradient(#fff3c4, #ffd76a); box-shadow: inset 0 -4px 0 rgba(200,120,0,.22), 0 0 0 2.5px #f2b752; }
.daystrip.week .day.seven .chest img { width: 60px; height: 60px; }
.daystrip.week .day.seven .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.daystrip.week .day.seven .giftrow { flex-wrap: wrap; gap: 4px; }
.daystrip.week .day.seven.today { background: radial-gradient(circle at 30% 30%, #fffbe0, #ffd85a 60%, #f5a412); }
.ms.got { background: linear-gradient(#f3fdea, #d8f5c4); box-shadow: inset 0 -4px 0 rgba(80,170,50,.15), 0 0 0 2.5px #3aa628; }
.ms .ok { position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#8fe35c, #36a024); color: #fff; font: 900 12px/1 var(--text); box-shadow: 0 0 0 2px #fff; }
.evgrid { padding: 4px 2px; }

/* ---------- Postfach ---------- */
.mlist { display: flex; flex-direction: column; gap: 10px; }
.ml { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 72px; margin: 0; padding: 10px 12px 10px 10px; text-align: left; }
.ml .ico { width: 48px; height: 48px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.ml .t { flex: 1; min-width: 0; }
.ml .t b { display: block; font: 700 16px/1.25 var(--title); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml .t small { display: block; font: 800 12.5px/1.25 var(--text); color: var(--ink-soft); }
.ml.read .t b { color: var(--ink-soft); }
.ml.sel { background: #f2fbe9; box-shadow: inset 0 -4px 0 rgba(80,170,50,.15), 0 0 0 3px #3aa628; }
.chk { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2.5px #e2c486; }
.chk.on { background: linear-gradient(#97e866, #3aa628); box-shadow: inset 0 0 0 2.5px var(--leaf-rim), 0 2px 0 var(--leaf-lip); }
.chk.no { background: #f3eadb; box-shadow: inset 0 0 0 2.5px #e2d3b6; }
.chk svg { width: 18px; height: 18px; }
.dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #f04e3e; box-shadow: 0 0 0 2.5px #fff; }
.bar2 { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.bar2 .linkish { color: #c86204; }
.mact { position: sticky; bottom: -6px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; padding: 10px 0 4px; background: linear-gradient(rgba(251,237,207,0), #fbedcf 30%); }
.mact .trash svg { width: 22px; height: 22px; display: block; }

/* ---------- Rangliste ---------- */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 16px; background: #f3e3c1; box-shadow: inset 0 2px 3px rgba(120,80,20,.15); }
.tabs button { height: 38px; border-radius: 12px; font: 700 15px/1 var(--title); color: var(--ink-soft); }
.tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 0 #e2c486, 0 3px 6px rgba(120,80,20,.15); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 4px 4px 12px; }
.pd { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pd .ava { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff6d0, #ffd34a); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rim); }
.pd.p1 .ava { width: 58px; height: 58px; }
.pd .ava img { width: 80%; height: 80%; object-fit: contain; }
.pd small { max-width: 100%; font: 800 12px/1.3 var(--text); color: var(--ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .step { width: 100%; display: grid; place-items: center; border-radius: 12px 12px 6px 6px; }
.pd .step b { font: 700 26px/1 var(--title); color: #fff; -webkit-text-stroke: 4px rgba(0,0,0,.25); paint-order: stroke fill; }
.pd.p1 .step { height: 70px; background: linear-gradient(#ffe684, #f5a012); box-shadow: inset 0 -4px 0 rgba(150,70,0,.2); }
.pd.p2 .step { height: 52px; background: linear-gradient(#eef0f5, #b7bccb); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.pd.p3 .step { height: 40px; background: linear-gradient(#f2c49a, #c27a44); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.pd.me small { color: #22701a; }
.lbrows { padding: 2px 12px; }
.lbr, .lbyou { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1.5px solid #f3e3c1; font: 800 14.5px/1.2 var(--text); color: var(--ink); }
.lbr:last-child { border-bottom: 0; }
.lbr .rk, .lbyou .rk { width: 34px; font: 700 15px/1 var(--title); color: var(--rim); }
.lbr .nm, .lbyou .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbr.me { color: #22701a; }
.lbyou { padding: 6px 14px; border: 0; background: linear-gradient(#fff6c8, #ffe08a); box-shadow: 0 0 0 3px #f2b752; }

/* ---------- Willkommen zurück ---------- */
.wb { margin-bottom: 10px; padding: 10px 10px 10px 12px; text-align: left; }
.wb .item-ic { width: 42px; height: 42px; }
.wb .btn { min-height: 40px; }
.dialog .wb + .btn, .dialog .wb:last-of-type { margin-bottom: 14px; }

@media (max-height: 700px) {
  .boardhit { margin-top: 12px; }
  .shelf { height: 66px; }
  .nest { width: 48px; height: 58px; flex-basis: 48px; }
  .boost { width: 48px; height: 48px; } .boost img { width: 38px; height: 38px; }
  .boosters { padding-top: 7px; }
  .lvhex .l2 { font-size: 66px; }
}
.calm *, .calm *::before, .calm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }
/* Sieg: Talente, die gewirkt haben (Symbol, Name, Wert) */
.tbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; }
.tbon span { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 4px; border-radius: 14px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1.5px rgba(200,140,40,.5); font: 700 14px/1 var(--title); color: var(--ink); white-space: nowrap; }
.tbon img { width: 22px; height: 22px; }
.tbon small { font: 800 11.5px/1 var(--text); color: #8a5a12; }
/* Honig fliegt in die Anzeige */
#fx { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.flycoin { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; filter: drop-shadow(0 3px 3px rgba(80,40,0,.35)); will-change: transform; }
.pill.bump { animation: pillbump .2s ease-out; }
@keyframes pillbump { 45% { transform: scale(1.1); } }
/* Stachelflug: Flugbahn um das Bild, Zahl an jeder Wächterbiene, Stachel als kurzer Strich in der Bienenfarbe */
#gfx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: none; }
html[data-scene='game'] #gfx { display: block; z-index: 4; }
#track { position: absolute; inset: 0; pointer-events: none; }
#track .ring { position: absolute; inset: 0; }
#track .ring svg { position: absolute; left: 0; top: 0; overflow: visible; }
#track .ring polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
/* Runde 3: leuchtende Pollenspur statt Band – weicher Lichtschein, Punkte, kleine Pfeile in Flugrichtung */
#track .ring .glow { stroke: rgba(255,214,110,.35); stroke-width: 14; filter: blur(3px); }
#track .ring .dots { stroke: #fff6d8; stroke-width: 5; stroke-dasharray: 0 11; filter: drop-shadow(0 0 2px rgba(240,160,30,.9)); }
@media (prefers-reduced-motion: no-preference) { #track .ring .dots { animation: trailFlow 1.1s linear infinite; } }
@keyframes trailFlow { to { stroke-dashoffset: -11; } }
.ringchip { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px 0 3px; border-radius: 11px; background: linear-gradient(#fffef8, #fcebc4); box-shadow: 0 0 0 2px var(--rim), 0 2px 0 2px var(--lip); font: 700 12px/1 var(--title); color: var(--ink); white-space: nowrap; }
.ringchip img { width: 18px; height: 18px; }
/* Stachel-Zahl direkt auf dem Bienenkörper (wie die Zahl auf den Figuren bei Pixel Flow) */
.gnum { position: absolute; left: 0; top: 0; margin: -9px 0 0 -14px; width: 28px; height: 18px; display: grid; place-items: center; font: 700 15px/1 var(--title); color: #fff; -webkit-text-stroke: 3.5px rgba(30,15,0,.75); paint-order: stroke fill; transition: opacity .25s; will-change: transform; }
.gnum.gone { opacity: 0; }
.stingshot { position: absolute; left: 0; top: 0; width: 24px; height: 5px; margin: -2.5px 0 0 -22px; transform-origin: 22px 50%; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8) 45%, #fff); box-shadow: 0 0 7px 2px var(--c); pointer-events: none; will-change: transform; }
/* Stachelflug: eigene Spielfläche (Stefan 16.10.2026 nach Pixel Flow): Band ums Bild, darunter Zähler und Warte-Waben, darunter die Schwärme als Spalten */
.ringgate { position: absolute; transform: translate(-62%, -38%); filter: drop-shadow(0 3px 3px rgba(80,40,0,.35)); pointer-events: none; }
.ringgate img { width: 100%; height: 100%; }
.ringgate .pips { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: flex; gap: 3px; margin-top: 2px; }
.ringgate .pips i { width: 8px; height: 9px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(150,90,10,.35); }
.ringgate .pips i.on { background: linear-gradient(#ffe27a, #f29a0c); box-shadow: 0 0 4px #ffcf4a; }
.game.sting .shelf { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 14px; }
.game.sting .shelf .ringchip { position: static; transform: none; flex: none; height: 28px; padding: 0 9px 0 4px; font-size: 14px; }
.game.sting .shelf .ringchip img { width: 22px; height: 22px; }
.game.sting .nests { position: static; height: auto; gap: 8px; align-items: center; }
.game.sting .nest.slot { width: 48px; height: 54px; flex: 0 0 48px; }
.nest.slot i.o, .nest.slot i.i { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nest.slot .o { inset: 0; background: rgba(150,90,10,.4); }
.nest.slot .i { inset: 3px; background: radial-gradient(circle at 50% 35%, #fffaf0, #efd8a4); box-shadow: inset 0 3px 6px rgba(150,90,10,.3); }
.nest.slot.full .o { background: #fff; }
.nest.slot.full .i { background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--c); box-shadow: none; }
.nest.slot .sb { position: absolute; z-index: 1; left: 50%; top: 5px; width: 24px; height: 24px; transform: translateX(-50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.game.sting .nest.slot .n { top: auto; bottom: 7px; font-size: 16px; -webkit-text-stroke-width: 3.5px; }
.game.sting .queue .lane { flex-direction: column; gap: 4px; }
.game.sting .queue .lane .row2 { grid-auto-flow: column; grid-template-rows: none; }
.nest.tap { cursor: pointer; pointer-events: auto; }
/* Stachelflug: wartende Biene im Nest – Zahl hüpft leicht, damit klar ist: antippen */
.nest.tap .n { animation: nesttap 1.6s ease-in-out infinite; }
@keyframes nesttap { 0%, 70%, 100% { transform: translateX(-50%) scale(1); } 80% { transform: translateX(-50%) scale(1.18); } 90% { transform: translateX(-50%) scale(.96); } }

/* Stachelflug: Biene fliegt beim Antippen zum Tor; Warte-Waben leuchten rot, wenn keine mehr frei ist und eine Biene zurückkommt */
.flybee { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.game.sting .nests.danger .nest.slot .o { background: #e5383b; animation: dangerPulse .6s ease-in-out infinite alternate; }
@keyframes dangerPulse { to { background: #ff8a6a; } }
.gc.test { background: #fffaf0; box-shadow: inset 0 -3px 0 rgba(150,120,70,.12), 0 0 0 2px #e4d6bd; }
.gc .kind { position: absolute; left: -4px; top: -4px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(#b08cff, #7848d8); color: #fff; font: 800 10px/1 var(--text); box-shadow: 0 0 0 2px #fff; }
.ptxt.testall { color: #7848d8; font-weight: 800; }
.flykey { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(80,40,0,.45)); }
.flykey svg { width: 100%; height: 100%; display: block; }
/* Zweifarbige Schwärme: kleine Wabe in der zweiten Farbe hängt unten rechts an der Kachel bzw. am Nest, mit eigener Zahl */
.tile .nx, .nest .nx { position: absolute; z-index: 2; right: -9%; bottom: -7%; width: 52%; height: 56%; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.tile .nx::before, .nest .nx::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--c); }
.tile .nx b, .nest .nx b { position: relative; font: 700 13px/1 var(--title); color: #fff; -webkit-text-stroke: 3px color-mix(in srgb, var(--c) 50%, #000); paint-order: stroke fill; }
.tile .nx.light b, .nest .nx.light b { color: #3b2a12; -webkit-text-stroke: 0; }
.queue .tile.next .nx b { font-size: 9px; -webkit-text-stroke-width: 2px; }
.queue .row2:has(> :nth-child(3)) .tile .nx b { display: none; }
.tile.mixed span { translate: -8% -6%; }
.nest .nx { width: 44%; height: 42%; right: -14%; bottom: 8%; }
.dialog .mixdemo { display: grid; place-items: center; }
.dialog .mixdemo .tile { width: 100px; height: 110px; animation: none; }
.dialog .mixdemo .tile span { font-size: 40px; -webkit-text-stroke-width: 7px; }
.dialog .mixdemo .tile .nx b { font-size: 24px; -webkit-text-stroke-width: 5px; }
.tourskip { position: absolute; z-index: 6; right: 10px; top: -13px; padding: 3px 11px; border: 0; border-radius: 11px; background: linear-gradient(#fff6c8, #ffd24a); box-shadow: 0 0 0 2px #b8620a, 0 2px 4px rgba(80,40,0,.3); font: 700 14px/1.3 var(--title); color: var(--ink); cursor: pointer; }
/* Hüllen-Wabe im Erklärfenster: Goldband übers Kreuz, Punkt in der Farbe darunter */
.tile .rb { position: absolute; inset: 14% 12%; background: linear-gradient(90deg, transparent 41%, #5a2e02 41% 43.5%, #ffc21f 43.5% 56.5%, #5a2e02 56.5% 59%, transparent 59%), linear-gradient(0deg, transparent 41%, #5a2e02 41% 43.5%, #ffc21f 43.5% 56.5%, #5a2e02 56.5% 59%, transparent 59%); }
.tile .dot { position: absolute; left: 50%; top: 50%; width: 20%; height: 18%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--d); box-shadow: 0 0 0 4px #ffc21f, 0 0 0 6px #5a2e02; }
/* Erklärung mehrerer Mechaniken auf einen Blick */
.dialog.mechs { width: min(92%, 400px); }
.mlist { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; margin: 4px -4px 14px; padding: 2px 4px; text-align: left; }
.mrow { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1.5px rgba(214,160,60,.35); }
.mart { width: 58px; height: 58px; display: grid; place-items: center; }
.mart img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.mart .mixdemo .tile { width: 46px; height: 50px; animation: none; }
.mart .mixdemo .tile span { font-size: 18px; -webkit-text-stroke-width: 4px; }
.mart .mixdemo .tile .nx b { font-size: 11px; -webkit-text-stroke-width: 2.5px; }
.mtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtxt b { font: 700 16px/1.2 var(--title); color: var(--ink); }
.mtxt span { font: 700 13px/1.35 var(--text); color: var(--ink-soft); }
/* Stachelflug: wie viele Bienen fliegen (rot, wenn die Bahn voll ist) */
.flycount { flex: none; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 4px; align-items: center; padding: 4px 10px 4px 6px; border-radius: 14px; background: linear-gradient(#fffaf0, #f7e2b2); box-shadow: 0 0 0 2px #d9a441, 0 2px 4px rgba(80,40,0,.25); transition: background .2s, box-shadow .2s; }
.flycount img { grid-row: 1 / 3; width: 26px; height: 26px; }
.flycount span { font: 700 20px/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.flycount span i { font-style: normal; font-size: 15px; color: var(--ink-soft); }
.flycount small { font: 700 11px/1 var(--text); color: var(--ink-soft); }
.flycount.full { background: linear-gradient(#ffd9cf, #ff9f8a); box-shadow: 0 0 0 2px #d8432f, 0 2px 4px rgba(120,20,0,.3); animation: dangerPulse .6s ease-in-out infinite alternate; }
.flycount.full span, .flycount.full span i, .flycount.full small { color: #7a1606; }
/* Zwillingsschwarm: zwei Waben nebeneinander in einer Kachel, goldenes Band darüber */
.tile.twin { display: block; }
.tile.twin .tw { position: absolute; top: 0; bottom: 0; width: 58%; display: grid; place-items: center; }
.tile.twin .tw:first-child { left: 0; } .tile.twin .tw:nth-child(2) { right: 0; }
.tile.twin .tw .o, .tile.twin .tw .i { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tile.twin .tw .o { inset: 0; background: #ffd24a; }
.tile.twin .tw .i { inset: 3px; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--c); }
.tile.twin .tw span { position: relative; font: 700 17px/1 var(--title); color: #fff; -webkit-text-stroke: 4px color-mix(in srgb, var(--c) 50%, #000); paint-order: stroke fill; }
.tile.twin .tw.light span { color: #3b2a12; -webkit-text-stroke: 0; }
.tile.twin .tw:first-child span { translate: -10% 0; } .tile.twin .tw:nth-child(2) span { translate: 10% 0; }
.tile.twin .band { position: absolute; z-index: 1; left: 50%; top: 2%; width: 24%; height: 17%; transform: translateX(-50%); border-radius: 6px; background: linear-gradient(#fff6b8, #ffc21f 55%, #e08c06); box-shadow: 0 0 0 1.5px #5a2e02, 0 2px 3px rgba(0,0,0,.3); }
.queue .tile.twin.front { width: 80px; height: 55px; }
.queue .tile.twin.next { width: 52px; height: 34px; }
.queue .tile.twin.next .tw span { font-size: 11px; -webkit-text-stroke-width: 2.5px; }
.queue .row2:has(> :nth-child(3)) .tile.twin { width: 44px; height: 29px; }
.queue .row2:has(> :nth-child(3)) .tile.twin .tw span { display: none; }
.dialog .mixdemo .tile.twin { width: 150px; height: 104px; }
.dialog .mixdemo .tile.twin .tw span { font-size: 30px; -webkit-text-stroke-width: 6px; }
.mart .mixdemo .tile.twin { width: 58px; height: 42px; }
.mart .mixdemo .tile.twin .tw span { font-size: 13px; -webkit-text-stroke-width: 3px; }
/* Bienenstock: Info-Knopf unten rechts im Talentbereich; „So funktioniert’s“ mit je einer Zeile pro Farbe und Ring (Stefan 17.10.2026) */
.tinfoq { position: absolute; z-index: 6; right: 16px; bottom: -4px; }
.hhelp { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.hsec { padding: 7px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(214,160,60,.35); }
.hsec h3 { margin: 0 0 4px; font: 700 16px/1.2 var(--title); color: var(--ink); text-align: center; } /* mittig (Stefan 17.10.2026) */
.hsec h3 small { font: 700 12.5px/1.2 var(--text); color: var(--ink-soft); }
.hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.hgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hcell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.hcell .hart { height: 46px; display: grid; place-items: center; }
.hcell b { font: 700 13.5px/1.15 var(--title); color: var(--ink); }
.hcell span { font: 700 11.5px/1.2 var(--text); color: var(--ink-soft); }
.hhelp .hx { position: relative; width: 36px; height: 42px; filter: drop-shadow(0 2px 0 rgba(150,80,0,.3)); }
.hhelp .hx > img { width: 23px; height: 23px; }
.hhelp .hx .in { inset: 2.5px; }
.hstack { display: grid; justify-items: center; }
.hstack .hx { width: 32px; height: 37px; }
.hstack .hchip { margin-top: -8px; position: relative; height: 18px; padding: 0 5px 0 2px; }
.hstack .hchip img { width: 14px; height: 14px; }
.hstack .hchip b { font-size: 12px; -webkit-text-stroke-width: 2.5px; }
.hchip { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px 0 3px; border-radius: 11px; background: linear-gradient(#97e866, #3aa628); box-shadow: 0 0 0 1.5px #fff, 0 2px 3px rgba(60,40,0,.25); }
.hchip img { width: 17px; height: 17px; }
.hchip b { font: 700 14px/1 var(--title); color: #fff; -webkit-text-stroke: 3px #2a8a1c; paint-order: stroke fill; }
.hchip.lock { padding: 0 8px 0 6px; background: rgba(80,50,10,.85); }
.hchip.lock svg { width: 13px; height: 13px; display: block; }
.hchip.lock b { -webkit-text-stroke: 0; }
.hreset { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.hreset .btn.price { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hreset .btn.price > span { margin-right: 4px; }
.hreset .btn[disabled] { opacity: .5; }
.hreset .hintline { margin: 0; text-align: center; }
.hask { margin: 0; text-align: center; font: 700 15px/1.35 var(--text); color: var(--ink); }
.hbtns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.hbtns .btn { min-width: 0; }
/* ---------- Profil (Stefan 17.10.2026, Vorbild Food Hunt): Profilbild im Rahmen, Titel, Banner, Erfolge ---------- */
.pbtn { position: relative; flex: none; padding: 0; border: 0; background: none; filter: drop-shadow(0 3px 0 rgba(150,80,0,.35)); }
.pbtn:active { transform: translateY(2px); }
.pbtn .badge { top: -6px; right: -8px; }
.pava { position: relative; display: block; flex: none; border-radius: 30%; background: linear-gradient(145deg, var(--f1), var(--f2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 0 0 2px #fff; }
.pava .face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 24%; overflow: hidden; object-fit: cover; }
.pava .face.ph { background: radial-gradient(circle at 50% 30%, var(--a1), var(--a2)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); }
.pava .face.ph img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }
.pava.real { background: none; box-shadow: none; }
.pava.real .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.profile { display: flex; flex-direction: column; gap: 10px; }
.pcard { position: relative; display: flex; align-items: center; gap: 12px; min-height: 108px; padding: 14px; border-radius: 22px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.75), 0 0 0 2px #f0d394, 0 4px 10px rgba(120,80,20,.15); overflow: hidden; }
.pinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.prow { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 14px; background: rgba(255,252,240,.94); box-shadow: 0 2px 4px rgba(80,40,0,.15); }
.pname { font: 700 18px/1.25 var(--title); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedit { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #b8f08a, #3aa628); color: #fff; font: 700 16px/1 var(--title); box-shadow: 0 2px 0 #2a8a1c; }
.ptitle { padding: 3px 12px; border-radius: 12px; background: linear-gradient(#ffd24a, #f39a0c); font: 700 14px/1.3 var(--title); color: #fff; -webkit-text-stroke: 3px #b85e06; paint-order: stroke fill; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(80,40,0,.2); }
.achbtn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.achbtn img { width: 30px; height: 30px; }
.achbtn b { font: inherit; opacity: .95; }
.achbtn .chev { font-size: 26px; line-height: 1; margin-left: 2px; }
.ptabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: rgba(214,160,60,.18); }
.ptabs button { border: 0; padding: 8px 0; border-radius: 12px; background: #fffdf5; font: 700 15px/1.2 var(--title); color: var(--ink-soft); box-shadow: 0 2px 0 rgba(170,110,40,.25); }
.ptabs button.on { background: linear-gradient(#ffd24a, #f39a0c); color: #fff; -webkit-text-stroke: 3px #b85e06; paint-order: stroke fill; box-shadow: 0 2px 0 #b85e06; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px 2px 6px; }
.pgrid.banner, .pgrid.title { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pitem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 -4px 0 rgba(200,150,60,.16), 0 0 0 2px #f0d394; }
.pitem.cur { box-shadow: inset 0 -4px 0 rgba(200,150,60,.16), 0 0 0 3px #3aa628; }
.pitem.locked > :first-child { filter: grayscale(1) opacity(.55); }
.pitem .iname { font: 800 12px/1.2 var(--text); color: var(--ink-soft); text-align: center; }
.pitem .ok { position: absolute; right: -4px; bottom: 18px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #b8f08a, #3aa628); color: #fff; font: 700 15px/1 var(--title); box-shadow: 0 0 0 2.5px #fff; }
.pitem .lockp { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 2px 8px; border-radius: 10px; background: rgba(80,50,10,.86); color: #fff; font: 700 11.5px/1.3 var(--title); white-space: nowrap; }
.pitem .newp { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 700 14px/1 var(--title); color: #fff; -webkit-text-stroke: 3px #e8443a; paint-order: stroke fill; }
.pgrid.title .pitem .lockp, .pgrid.title .pitem .newp { bottom: auto; top: -8px; }
.bthumb { display: block; width: 100%; aspect-ratio: 3 / 1; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.tname { display: grid; place-items: center; width: 100%; min-height: 44px; padding: 4px 8px; border-radius: 12px; background: linear-gradient(#ffe68a, #ffc21a); font: 700 15px/1.2 var(--title); color: #fff; -webkit-text-stroke: 3px #b85e06; paint-order: stroke fill; text-align: center; }
.navp { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; }
/* Erfolge */
.alist { display: flex; flex-direction: column; gap: 10px; }
.alist .hintline { margin: 0; text-align: center; }
.achap { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(214,160,60,.35); }
.achap h3 { margin: 0 0 2px; font: 700 16px/1.2 var(--title); color: var(--ink); }
.arow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 0; }
.arow + .arow { border-top: 1.5px dashed rgba(214,160,60,.3); padding-top: 8px; }
.amedal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #eee5d2, #c9b48c); box-shadow: 0 0 0 2px #fff, 0 2px 3px rgba(80,40,0,.2); }
.amedal img { width: 32px; height: 32px; }
.amedal .q { font: 700 20px/1 var(--title); color: #fff; }
.arow.ok .amedal { background: radial-gradient(circle at 50% 30%, #fff3b0, #f5a412); }
.atx b { display: block; font: 700 15px/1.2 var(--title); color: var(--ink); }
.atx > span { display: block; font: 700 12.5px/1.3 var(--text); color: var(--ink-soft); }
.arow:not(.ok) .atx b { color: var(--ink-soft); }
.abar { position: relative; display: block; height: 14px; margin-top: 4px; border-radius: 7px; background: rgba(170,110,40,.18); overflow: hidden; }
.abar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(#ffd24a, #f39a0c); }
.abar em { position: relative; display: block; text-align: center; font: 700 10.5px/14px var(--title); font-style: normal; color: var(--ink); }
.areward { font: 700 12px/1.2 var(--title); color: #8a5a12; white-space: nowrap; }
.arow.ok .areward { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #b8f08a, #3aa628); color: #fff; font-size: 15px; }
.sheet.centered header h2 { text-align: center; padding-left: 44px; } /* Platz wie der Schließen-Knopf rechts, damit der Titel wirklich in der Mitte steht */