/* Layout: Hexenküche – oben Logo/Spieler/Level, Mitte Holzregale mit Trankfläschchen, unten Symbolleiste.
   Bewusst nur helles Erscheinungsbild wie harztor-erlebenswert.de (Logo-Schriftzug braun auf hell). */
.ff-spiel {
  --paper: #fbfaf6;
  --paper-2: #f1ede3;
  --ink: #3a3a36;
  --muted: #6f6a60;
  --green: #3eaa49;     /* erlebenswert-Grün */
  --green-dark: #2e8a38;
  --wood: #8b5d3c;      /* erlebenswert-Braun */
  --wood-dark: #6b4429;
  --wood-light: #a8774f;
  --cork: #c79a62;
  --glass: rgba(255,255,255,.55);
  --glass-edge: #8f8a7e;
  --neck-bg: #fdfcfa;      /* Glas über Papier, deckend – verdeckt die Bauchkante unter dem Hals */
  --card: #ffffff;
  --line: #ddd6c6;
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Poppins", Arial, Helvetica, sans-serif;
  color-scheme: light;
}
html.ff-solo, html.ff-solo body { height: 100%; margin: 0; }
html.ff-solo body { background: #f5f2ea; }
.ff-spiel { /* Spielbereich – fügt sich in die Seite ein, nimmt keine Regeln vom Theme an, gibt keine ab */
  background: radial-gradient(120% 70% at 50% 0%, var(--paper) 45%, var(--paper-2) 100%); background-color: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; text-align: left;
  box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ff-spiel *, .ff-spiel *::before, .ff-spiel *::after { box-sizing: border-box; }
.ff-spiel button { margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none; line-height: normal; min-width: auto; width: auto; }
.ff-spiel img { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.ff-feld { container-type: inline-size; container-name: hx; }
.ff-spiel .app { height: 600px; padding-inline: 10px; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto; position: relative; }

.ff-spiel .chip { font: 500 1rem var(--font-head); letter-spacing: .02em; color: var(--ink); background: var(--card); border: 2px solid var(--line);
  border-radius: 10px; padding: 4px 10px; min-height: 42px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ff-spiel .chip b { color: var(--green-dark); font-weight: 700; }
.ff-spiel .chip:focus-visible, .ff-spiel .tbtn:focus-visible, .ff-spiel .btn:focus-visible, .ff-spiel .cell:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.ff-spiel .titel { text-align: center; padding-block: 2px 0; }
.ff-spiel .titel h1 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--green);
  font-size: clamp(1.6rem, 6vw, 2.7rem); margin: 0; line-height: 1.1; }
.ff-spiel .titel p { margin: 4px 0 0; color: var(--muted); font-size: clamp(.98rem, 2.8vw, 1.15rem); min-height: 1.3em; line-height: 1.35; }

/* Regale */
.ff-spiel .board { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--rowgap, 26px); padding-block: 8px; position: relative; z-index: 1; }
.ff-spiel .shelf { display: flex; justify-content: center; align-items: flex-end; gap: var(--gapx, 14px); position: relative; padding: 0 10px 0; }
.ff-spiel .shelf::after { /* Regalbrett */
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood) 45%, var(--wood-dark));
  box-shadow: 0 6px 8px -4px rgba(60,40,20,.35);
}
.ff-spiel .cell { /* große Tippfläche um jede Flasche */
  appearance: none; border: 0; background: none; padding: 6px calc(var(--gapx, 14px) / 2) 0; margin: 0 calc(var(--gapx, 14px) / -2); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; border-radius: 10px;
}
.ff-spiel .tube { --tw: 52px; position: relative; width: var(--tw); height: calc(var(--tw) * 3.1); transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
/* Fläschchen: Bauch mit runden Schultern, Hals sitzt mittig darauf (deckt die obere Kante ab), Rand + Korken */
.ff-spiel .glass {
  position: absolute; inset: calc(var(--tw) * .3) 0 0 0; box-sizing: border-box;
  border: 2.5px solid var(--glass-edge);
  border-radius: calc(var(--tw) * .36) calc(var(--tw) * .36) calc(var(--tw) / 2) calc(var(--tw) / 2);
  padding-top: calc(var(--tw) * .2); /* Luft unter den Schultern */
  background: linear-gradient(90deg, rgba(120,108,90,.20) 0%, rgba(255,255,255,.80) 16%, rgba(255,255,255,.40) 42%, rgba(255,255,255,.18) 70%, rgba(120,108,90,.26) 100%), var(--glass);
  overflow: hidden; display: flex; flex-direction: column-reverse;
  box-shadow: inset 0 -8px 12px -8px rgba(60,45,30,.25);
}
.ff-spiel .glass::after { /* Glasreflex über der Flüssigkeit – macht den Zylinder rund */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 10%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 76%, rgba(255,255,255,.22) 86%, rgba(255,255,255,0) 96%);
}
.ff-spiel .tube::after { /* weicher Schatten auf dem Regalbrett */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -5px; height: 10px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(60,40,20,.38), rgba(60,40,20,0));
}
.ff-spiel .neck { position: absolute; z-index: 1; top: calc(var(--tw) * .1); left: 31%; right: 31%; height: calc(var(--tw) * .2 + 3px);
  border: 2.5px solid var(--glass-edge); border-top: none; border-bottom: none; background: linear-gradient(90deg, #e6e2da, #ffffff 35%, #f7f5f0 65%, #e2ddd3); }
.ff-spiel .lip { position: absolute; z-index: 2; top: calc(var(--tw) * .05); left: 25%; right: 25%; height: calc(var(--tw) * .1);
  border: 2.5px solid var(--glass-edge); border-radius: 999px; background: linear-gradient(180deg, #ffffff, #ece8e0); }
.ff-spiel .cork { position: absolute; z-index: 3; top: calc(var(--tw) * -.05); left: 33%; right: 33%; height: calc(var(--tw) * .24);
  border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #b5844f, var(--cork) 45%, #a9773f);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); transform: translateY(-40%); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.ff-spiel .cork::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px; border-radius: 50%; background: #d8b07c; }
.ff-spiel .shine { position: absolute; top: calc(var(--tw) * .62); bottom: calc(var(--tw) * .35); left: 17%; width: 12%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), transparent); pointer-events: none; z-index: 2; }
.ff-spiel .cell.sel .tube { transform: translateY(-16px); }
.ff-spiel .cell.sel .glass, .ff-spiel .cell.sel .neck, .ff-spiel .cell.sel .lip { border-color: var(--green); }
.ff-spiel .cell.done .cork { opacity: 1; transform: translateY(0); }
.ff-spiel .cell.done .glass { box-shadow: inset 4px 0 0 rgba(255,255,255,.6), 0 0 14px 2px color-mix(in srgb, var(--c-done, #fff) 45%, transparent); }
.ff-spiel .cell.shake .tube { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }

.ff-spiel .liq { flex: none; position: relative; display: grid; place-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 16%, rgba(255,255,255,.20) 30%, rgba(255,255,255,.04) 52%, rgba(0,0,0,.10) 78%, rgba(0,0,0,.34) 100%), var(--c);
  background-color: var(--c); }
.ff-spiel .liq.top::before { /* Oberfläche als Oval, leicht von oben gesehen */
  content: ""; position: absolute; top: calc(var(--tw) * -.07); left: 0; right: 0; height: calc(var(--tw) * .14); border-radius: 50%;
  background: radial-gradient(ellipse at 40% 45%, color-mix(in srgb, var(--c) 55%, #fff), color-mix(in srgb, var(--c) 85%, #000) 100%); }
.ff-spiel .liq + .liq { box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
.ff-spiel .liq.new { animation: fill .3s ease-out; transform-origin: bottom; }
@keyframes fill { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.ff-spiel .liq .sym { display: none; position: absolute; font-size: calc(var(--tw) * .34); color: rgba(0,0,0,.5); line-height: 1; transform: translateY(50%); }
.ff-spiel .symbols .liq .sym { display: block; }

/* Lara und Finn am Rand (nur auf breiten Bildschirmen) */
.ff-spiel .app { --side: 0px; }
.ff-spiel .kid { position: absolute; bottom: 78px; height: calc(var(--side) * 1.3); width: auto; pointer-events: none; z-index: 0; }
.ff-spiel .kid.l { left: 0; } .ff-spiel .kid.r { right: 4px; }
/* Lara & Finn leben: ruhiges Atmen, ab und zu zum Regal neigen, Glas schütteln, Hüpfer bei geschafftem Level */
.ff-spiel .kid { transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite; transition: rotate .7s cubic-bezier(.4,1.4,.5,1); }
.ff-spiel .kid.r { animation-delay: -1.7s; }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.01 1.022; } }
.ff-spiel .kid.l.lean { rotate: 5deg; } .ff-spiel .kid.r.lean { rotate: -5deg; }
.ff-spiel .kid.wiggle { animation: breathe 3.4s ease-in-out infinite, wiggle 1s ease-in-out; }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 15% { rotate: -2.6deg; } 30% { rotate: 2.6deg; } 45% { rotate: -2.2deg; } 60% { rotate: 2deg; } 75% { rotate: -1.2deg; } 90% { rotate: .6deg; } }
.ff-spiel .kid.hop { animation: breathe 3.4s ease-in-out infinite, hop .75s cubic-bezier(.3,.7,.4,1); }
@keyframes hop { 0%, 100% { translate: 0 0; scale: 1 1; } 10% { scale: 1.03 .96; } 35% { translate: 0 -22px; scale: .98 1.03; } 60% { translate: 0 0; scale: 1.03 .97; } 75% { translate: 0 -6px; scale: 1 1; } }
/* Lara und Finn nur, wenn der Spielbereich selbst breit genug ist (nicht das Fenster) */
.ff-spiel .kid { display: none; }
@container hx (min-width: 900px) { .ff-spiel .app { --side: clamp(150px, 16cqw, 220px); } .ff-spiel .board { padding-inline: var(--side); } .ff-spiel .kid { display: block; } }

/* Symbolleiste */
.ff-spiel .tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding-block: 8px 4px; max-width: 560px; width: 100%; margin: 0 auto; }
.ff-spiel .tbtn { appearance: none; border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; cursor: pointer;
  min-height: 54px; display: grid; place-items: center; gap: 0; padding: 4px 2px; font: 600 .7rem var(--font-body); }
.ff-spiel .tbtn .i { font-size: 1.3rem; line-height: 1; letter-spacing: -.05em; }
.ff-spiel .tbtn .n { color: var(--muted); font-weight: 400; }
.ff-spiel .tbtn:disabled { opacity: .4; cursor: default; }
.ff-spiel .tbtn[aria-pressed="true"] { border-color: var(--green); color: var(--green-dark); }
.ff-spiel .legal { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: .72rem; padding-block: 2px 8px; color: var(--muted); }
.ff-spiel .legal a { color: var(--muted); }

/* Fenster */
.ff-spiel .modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(58,58,54,.38); z-index: 100000;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ff-spiel .modal[hidden] { display: none; }
.ff-spiel .card { background: var(--card); border-radius: 20px; padding: 22px 22px 20px; text-align: center; width: min(420px, 100%); box-sizing: border-box;
  display: grid; gap: 12px; box-shadow: 0 18px 40px -12px rgba(40,30,20,.45); border-top: 6px solid var(--green); max-height: 92vh; overflow: auto; }
.ff-spiel .card h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green); font-size: 1.7rem; margin: 0; line-height: 1.1; }
.ff-spiel .card p { margin: 0; color: var(--muted); line-height: 1.5; }
.ff-spiel .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ff-spiel .btn { font: 600 1rem var(--font-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 12px;
  padding: 10px 18px; min-height: 50px; cursor: pointer; }
.ff-spiel .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.ff-spiel .btn:disabled { opacity: .4; cursor: default; }
.ff-spiel .duo { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.ff-spiel .duo img { height: 150px; width: auto; }
.ff-spiel .bubble { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; text-align: left; color: var(--ink); line-height: 1.5; font-size: .95rem; position: relative; }
.ff-spiel .bubble b { color: var(--wood); }
.ff-spiel .winimg { height: 150px; width: auto; justify-self: center; }
.ff-spiel .stepper { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ff-spiel .stepper .val { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; min-width: 3ch; color: var(--ink); }
.ff-spiel #nameIn { font: 700 2.4rem var(--font-head); letter-spacing: .3em; text-align: center; text-transform: uppercase; width: 5.6em; justify-self: center;
  padding: 6px 0 6px .3em; border: 3px solid var(--green); border-radius: 12px; background: var(--paper); color: var(--ink); }
.ff-spiel #nameIn:focus { outline: 3px solid var(--green); outline-offset: 2px; }
.ff-spiel .names { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ff-spiel .names .btn { font-family: var(--font-head); letter-spacing: .12em; min-height: 44px; padding: 6px 14px; }
.ff-spiel .codebox { display: grid; gap: 2px; padding: 8px; border: 2px dashed var(--line); border-radius: 12px; }
.ff-spiel .codebox span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ff-spiel .codebox b { font: 700 1.2rem var(--font-head); letter-spacing: .1em; color: var(--wood); -webkit-user-select: text; user-select: text; }
.ff-spiel .coderow { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ff-spiel #codeIn { font: 500 1.1rem var(--font-head); letter-spacing: .1em; text-align: center; text-transform: uppercase; padding: 10px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--paper); color: var(--ink); min-width: 0; }
.ff-spiel .err { color: #c0392b; font-weight: 600; }
.ff-spiel .confirm { display: grid; gap: 10px; }
.ff-spiel .net { margin: 0; text-align: center; font-size: .82rem; color: var(--wood); font-weight: 600; }
.ff-spiel .confirm[hidden], .ff-spiel .err[hidden], .ff-spiel .net[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ff-spiel .tube, .ff-spiel .liq.new, .ff-spiel .cell.shake .tube, .ff-spiel .cork, .ff-spiel .kid { transition: none; animation: none; } .ff-spiel .kid.lean { rotate: none; } }
/* Überschrift nur in der Einzelfassung (Chat); auf der Webseite steht der Titel schon im Seitentitel */
html:not(.ff-solo) .ff-spiel .titel h1 { display: none; }
/* Spieler und Level als Zeile unter der Überschrift; Ton in der Symbolleiste */
.ff-spiel .status { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 2px; }
.ff-spiel .slink { appearance: none; background: none; border: 0; border-radius: 8px; padding: 6px 8px; min-height: 36px; cursor: pointer;
  font: 500 1rem var(--font-head); letter-spacing: .03em; color: var(--muted); }
.ff-spiel .slink b { color: var(--green-dark); font-weight: 700; }
.ff-spiel .slink:hover, .ff-spiel .slink:focus-visible { background: var(--paper-2); outline: none; }
.ff-spiel .status .dot { color: var(--line); font-weight: 700; }
.ff-spiel #sndBtn[aria-pressed="false"] { border-color: var(--line); color: var(--muted); }
.ff-spiel #sndBtn[aria-pressed="false"] .i { text-decoration: line-through; text-decoration-thickness: 2px; }

/* Webseite, Handy: unten Platz für den „Nach oben“-Knopf des Themes, damit er keine Schaltfläche verdeckt */
@media (max-width: 600px) { html:not(.ff-solo) .ff-spiel .tools { margin-bottom: 58px; } }