/* Whiteboard Arcade — shared game engine styles
 * Used by every team-vs-team game (rechenspiel, wortspiel, uhrzeitspiel, ...).
 * Games link this file and add only their own game-specific CSS inline.
 */

:root{
  --sky-top:#BFE6FF;
  --sky-bottom:#FFEFC7;
  --field-left:#E9F4FF;
  --field-right:#FFF1F1;
  --blue:#2D6CDF;
  --blue-dark:#1E4FAE;
  --red:#EF4444;
  --red-dark:#B91C1C;
  --rope-a:#C69A5B;
  --rope-b:#A2753C;
  --gold:#FFC93C;
  /* Neutrales Whiteboard-Arcade-Grunddesign (wie auf der Startseite) */
  --bg:#F6F6F7;
  --surface:#FFFFFF;
  --muted:#636A77;
  --muted-soft:#69707D;
  --border:#E4E5E9;
  --accent:#4B5563;
  --accent-soft:#EEF0F2;
  --shadow-sm:0 2px 8px rgba(20,20,25,.06);
  --shadow-lg:0 18px 40px rgba(20,20,25,.10);
  --ink:#1E2125;
  --white:#FFFFFF;
  --font-display:'Fredoka','Baloo 2','Comic Sans MS',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans','Noto Sans Arabic','Noto Sans SC','Noto Sans JP','Noto Sans KR','Noto Sans Devanagari','Helvetica Neue',Arial,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; width:100%;
  /* Nur horizontal fest verriegelt. Vertikal darf gescrollt werden, falls
     Topbar+Szene+Spielfeld auf einem kleinen/kurzen Bildschirm (Handy) nicht
     komplett in die Bildschirmhöhe passen - sonst wären z.B. der "Prüfen"-
     Button oder die Antwort-Buttons unerreichbar ohne jede Möglichkeit,
     dorthin zu scrollen. */
  overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain;
  font-family:var(--font-body);
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}
button{ font-family:var(--font-body); touch-action:manipulation; }

body{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  background:var(--field-left);
}

/* ---------- HEADER ---------- */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:.6vh 2vw;
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:relative; z-index:20;
}
.title-wrap h1{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  color:var(--ink);
}
.title-wrap p{
  margin:0; font-size:clamp(.6rem,1vw,.85rem); color:var(--muted);
}
.top-controls{ display:flex; gap:.5vw; flex-wrap:wrap; align-items:center; }
.icon-btn{
  display:flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); background:var(--white);
  border-radius:999px; cursor:pointer;
  padding:.5vh .9vw; font-size:clamp(.65rem,1.1vw,.95rem); font-weight:600;
  color:var(--ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration:none;
}
.icon-btn:hover{ box-shadow:var(--shadow-sm); border-color:var(--muted-soft); }
.icon-btn:active{ transform:scale(.93); }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.brand-mark{ width:22px; height:22px; color:var(--ink); flex:0 0 auto; }

/* ---------- SCENE (SKY + ANIMATION) ---------- */
.scene{
  flex:0 0 42vh;
  position:relative; overflow:hidden;
  background:linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}
.cloud{
  position:absolute; background:rgba(255,255,255,.85); border-radius:50px;
  filter:blur(.5px);
  animation:drift 40s linear infinite;
}
.cloud::before, .cloud::after{
  content:""; position:absolute; background:inherit; border-radius:50%;
}
.cloud1{ width:90px; height:34px; top:10%; left:-10%; }
.cloud1::before{ width:50px; height:50px; top:-22px; left:10px; }
.cloud1::after{ width:40px; height:40px; top:-16px; left:45px; }
.cloud2{ width:70px; height:26px; top:24%; left:-15%; animation-duration:55s; animation-delay:-10s; }
.cloud2::before{ width:38px; height:38px; top:-16px; left:8px; }
.cloud2::after{ width:30px; height:30px; top:-12px; left:34px; }
.cloud3{ width:60px; height:24px; top:6%; left:-20%; animation-duration:65s; animation-delay:-30s; }
.cloud3::before{ width:32px; height:32px; top:-14px; left:6px; }
.cloud3::after{ width:26px; height:26px; top:-10px; left:28px; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(140vw); } }

.sun{
  position:absolute; top:6%; right:6%; width:9vh; height:9vh; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFE79A, var(--gold));
  box-shadow:0 0 40px 10px rgba(255,201,60,.45);
}

.ground{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  height:clamp(34px,11vh,110px);
  background:linear-gradient(to bottom, #8FE066 0%, #63BE45 50%, #3E8A26 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.3) inset;
}
.ground::before{
  content:"";
  position:absolute; top:calc(7px - clamp(16px,3vh,30px)); left:0; right:0; height:clamp(16px,3vh,30px);
  background:linear-gradient(to bottom, #A6F27D, #74CB52);
  clip-path:polygon(
    0% 100%, 2% 42%, 4% 100%, 6% 8%, 9% 100%, 11% 48%, 13% 100%, 15% 22%,
    18% 100%, 20% 5%, 23% 100%, 25% 38%, 27% 100%, 29% 15%, 32% 100%, 34% 44%,
    36% 100%, 38% 10%, 41% 100%, 43% 30%, 46% 100%, 48% 6%, 51% 100%, 53% 40%,
    55% 100%, 57% 18%, 60% 100%, 62% 46%, 64% 100%, 66% 12%, 69% 100%, 71% 34%,
    74% 100%, 76% 8%, 79% 100%, 81% 42%, 83% 100%, 85% 20%, 88% 100%, 90% 48%,
    92% 100%, 94% 14%, 97% 100%, 99% 36%, 100% 100%
  );
}

.grass-tuft{ position:absolute; bottom:6px; width:22px; height:26px; }
.grass-tuft .blade{
  position:absolute; bottom:0; width:4px; border-radius:5px 5px 0 0;
  background:linear-gradient(to top, #3E8A26, #8FE066);
  transform-origin:bottom center;
  animation-name:bladeSway; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.grass-tuft .blade:nth-child(1){ left:1px; height:16px; }
.grass-tuft .blade:nth-child(2){ left:9px; height:23px; }
.grass-tuft .blade:nth-child(3){ left:16px; height:14px; }
@keyframes bladeSway{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(9deg); } }

/* --- space theme (rocket mode) --- */
.scene.mode-space{
  background:linear-gradient(to bottom, #0B1030 0%, #1B1454 55%, #2A1A5E 100%);
}
.scene.mode-space .sun,
.scene.mode-space .cloud,
.scene.mode-space .ground{ display:none; }
.stars-layer{
  position:absolute; inset:0; display:none; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 18% 42%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 28% 12%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 38% 55%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 48% 28%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 65%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 68% 20%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 48%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 15%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 94% 60%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 75%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 62% 85%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 78%, #fff, transparent 60%);
  opacity:.85;
  animation:starTwinkle 3.2s ease-in-out infinite;
}
@keyframes starTwinkle{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.scene.mode-space .stars-layer{ display:block; }
.moon-badge{
  position:absolute; top:5%; left:50%; transform:translateX(-50%);
  font-size:clamp(38px,6.6vw,68px); display:none; z-index:2;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.55));
}
.scene.mode-space .moon-badge{ display:block; }

/* --- bird's-eye theme (car race mode): grass field instead of sky --- */
.scene.mode-car{
  background:linear-gradient(to bottom, #8FE066 0%, #63BE45 50%, #3E8A26 100%);
}
.scene.mode-car .sun,
.scene.mode-car .cloud,
.scene.mode-car .ground{ display:none; }

/* --- rocket animation (no emoji, SVG rocket) --- */
.space-area{
  position:absolute; inset:0; display:none; align-items:flex-end;
  justify-content:space-between; padding:0 8vw 1.5vh; gap:1vw;
}
.rocket-col{
  position:relative; display:flex; flex-direction:column; align-items:center;
  flex:0 0 auto; z-index:3; min-height:10vh;
  transition:transform .5s ease-out, opacity .5s ease-in;
}
.rocket-col.shaking{ animation:rocketShake .12s ease-in-out infinite; }
.rocket-col.idle-shake{ animation:rocketShake .5s ease-in-out infinite; }
@keyframes rocketShake{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  25%{ transform:translateX(calc(-1 * var(--shake-amt,1px))) rotate(-1deg); }
  75%{ transform:translateX(var(--shake-amt,1px)) rotate(1deg); }
}
.rocket-wrap{
  position:relative; width:clamp(46px,7vw,84px);
  display:flex; flex-direction:column; align-items:center;
}
.rocket-svg-wrap{ position:relative; width:100%; }
.rocket-rider{
  /* cy=42 of the rocket SVG's 0-100 viewBox height: percentage is relative to
     .rocket-svg-wrap (sized to the SVG alone), not .rocket-wrap (which also
     includes the flame below and would shift the rider as the flame grows). */
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(15px,2.4vw,26px); line-height:1; z-index:2;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.rocket-svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.rocket-col:not(.shaking):not(.idle-shake) .rocket-wrap{ animation:rocketHover 2.4s ease-in-out infinite; }
@keyframes rocketHover{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.flame-shape{
  width:clamp(8px,1.3vw,15px); height:clamp(14px,2.2vw,24px);
  margin-top:-4px;
  background:radial-gradient(circle at 50% 25%, #FFE79A 0%, #FFA53E 45%, #EF4444 85%);
  border-radius:50% 50% 60% 60% / 55% 55% 100% 100%;
  opacity:0; transform:scaleY(.6);
  transition:opacity .2s ease, width .2s ease, height .2s ease;
}
.rocket-col.flame-small .flame-shape{
  opacity:1; animation:flameFlicker .18s ease-in-out infinite;
}
.rocket-col.ignite .flame-shape{
  opacity:1; width:clamp(18px,2.8vw,30px); height:clamp(34px,5vw,56px);
  animation:flameFlicker .1s ease-in-out infinite;
}
@keyframes flameFlicker{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(.82,1.25); } }
.smoke-particle{
  position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(150,150,160,.55));
}
.launch-pad{
  width:clamp(56px,8.4vw,102px); height:9px; border-radius:6px; margin-top:2px;
  background:linear-gradient(to bottom, #4b4b63, #2c2c40);
  box-shadow:0 3px 6px rgba(0,0,0,.3);
}

/* --- car race animation, bird's-eye view (no emoji, SVG vehicle) --- */
.race-area{
  position:absolute; inset:0; display:none;
  flex-direction:column; justify-content:space-evenly; align-items:stretch;
  gap:1.5vh; padding:2vh 3vw; z-index:3;
}
.lane{ display:flex; align-items:center; gap:1.2vw; }
.lane .team-tag{ flex:0 0 auto; }
.race-track{
  position:relative; flex:1 1 auto; height:clamp(48px,8.4vh,86px);
  border-bottom:4px dashed rgba(43,37,64,.28);
}
#carArea .race-track{ height:clamp(64px,15vh,150px); }
#carArea .race-track{
  border-bottom:3px solid #22232c;
  border-radius:10px;
  background:linear-gradient(to bottom, #55586b 0%, #3c3e4d 100%);
  box-shadow:inset 0 0 0 3px #22232c, inset 0 3px 8px rgba(0,0,0,.35);
  overflow:hidden;
}
#carArea .race-track::before{
  content:"";
  position:absolute; left:5%; right:5%; top:50%; height:4px; transform:translateY(-50%);
  background-image:repeating-linear-gradient(to right, #fff 0 16px, transparent 16px 32px);
  opacity:.8;
}
.start-line{
  position:absolute; left:0; top:-4px; bottom:0; width:5px;
  background:repeating-linear-gradient(to bottom, #2B2540 0 7px, #fff 7px 14px);
  border-radius:2px;
}
#carArea .start-line, #carArea .finish-line{ top:0; }
.finish-line{
  position:absolute; right:0; top:-4px; bottom:0; width:9px;
  background-image:
    linear-gradient(45deg,#2B2540 25%,transparent 25%),
    linear-gradient(-45deg,#2B2540 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#2B2540 75%),
    linear-gradient(-45deg,transparent 75%,#2B2540 75%);
  background-size:8px 8px; background-color:#fff;
  border-radius:2px;
}
.vehicle-wrap{
  position:absolute; bottom:0; left:4%; transform:translateX(-50%);
  transition:left .65s cubic-bezier(.4,0,.2,1); z-index:3;
}
.vehicle-wrap .rider-badge{
  position:absolute; top:50%; left:48%; transform:translate(-50%,-50%);
  font-size:clamp(16px,2.6vw,28px); line-height:1; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.vehicle-wrap .exhaust-pipe{
  position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  width:10px; height:15px; border-radius:3px;
  background:linear-gradient(to bottom, #55586b, #2c2c40);
  z-index:1;
}
.car-svg{
  display:block; position:relative; z-index:1;
  width:clamp(66px,9.6vw,124px); height:auto;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.32));
}
.vehicle-wrap.racing .car-svg{ animation:carBounce .28s ease-in-out infinite; }
@keyframes carBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

/* --- rope animation --- */
.rope-area{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  justify-content:space-between; padding:0 .8vw 2vh;
  gap:.2vw;
}
.character-col{ display:flex; flex-direction:column; align-items:center; gap:.5vh; flex:0 0 auto; z-index:3; }

.kids-group{
  display:flex; align-items:flex-end; transform-origin:bottom center;
}
.character-emoji{
  font-size:clamp(46px,8vw,100px); display:block; line-height:1;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.2));
}
.kids-left{ transform:rotate(-8deg) translateX(-4px); }
.kids-right{ transform:rotate(8deg) translateX(4px); }
.kids-left.pulling{ animation:pullLeft .7s ease; }
.kids-right.pulling{ animation:pullRight .7s ease; }
@keyframes pullLeft{
  0%{ transform:rotate(-8deg) translateX(-4px) scale(1,1); }
  15%{ transform:rotate(-15deg) translateX(-9px) scale(.96,1.05); }
  40%{ transform:rotate(-30deg) translateX(-22px) scale(1.08,.93); }
  65%{ transform:rotate(-18deg) translateX(-13px) scale(1,1); }
  85%{ transform:rotate(-11deg) translateX(-6px) scale(1,1); }
  100%{ transform:rotate(-8deg) translateX(-4px) scale(1,1); }
}
@keyframes pullRight{
  0%{ transform:rotate(8deg) translateX(4px) scale(1,1); }
  15%{ transform:rotate(15deg) translateX(9px) scale(.96,1.05); }
  40%{ transform:rotate(30deg) translateX(22px) scale(1.08,.93); }
  65%{ transform:rotate(18deg) translateX(13px) scale(1,1); }
  85%{ transform:rotate(11deg) translateX(6px) scale(1,1); }
  100%{ transform:rotate(8deg) translateX(4px) scale(1,1); }
}

.team-tag{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.7rem,1.3vw,1.05rem);
  padding:.25em .8em; border-radius:999px; color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.team-tag.blue{ background:var(--blue); }
.team-tag.red{ background:var(--red); }

.rope-track{
  position:relative; flex:1 1 auto; height:clamp(34px,6vh,58px); align-self:center;
  margin-bottom:4.5vh;
}
.rope-svg{
  position:absolute; inset:0; width:100%; height:100%;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.18));
  animation:ropeSway 2.8s ease-in-out infinite;
}
@keyframes ropeSway{ 0%,100%{ transform:translateY(0) scaleY(1); } 50%{ transform:translateY(4px) scaleY(1.06); } }
.flag-marker{
  position:absolute; top:50%; left:50%;
  font-size:clamp(30px,4.5vw,52px);
  transform:translate(-50%,-65%);
  transition:left .8s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));
}
.flag-marker.bounce{ animation:flagBounce .7s ease; }
@keyframes flagBounce{
  0%{ transform:translate(-50%,-65%) scale(1) rotate(0deg); }
  22%{ transform:translate(-50%,-98%) scale(1.2) rotate(-10deg); }
  45%{ transform:translate(-50%,-58%) scale(1.28) rotate(8deg); }
  68%{ transform:translate(-50%,-82%) scale(1.08) rotate(-4deg); }
  100%{ transform:translate(-50%,-65%) scale(1) rotate(0deg); }
}
.particle{ position:absolute; border-radius:50%; pointer-events:none; z-index:5; }

/* --- balloon animation --- */
.balloon-area{
  position:absolute; inset:0; display:none; align-items:flex-end;
  justify-content:space-between; padding:0 5vw 2vh; gap:1vw;
}
.balloon-col{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; gap:.6vh; flex:0 0 auto; z-index:3; min-height:20vh;
  transition:transform .5s ease-out, opacity 1s ease-in;
}
.balloon-cluster{
  position:relative;
  width:clamp(160px,23vw,250px); height:clamp(130px,22vh,210px);
}
.tie-frame{ position:relative; width:80px; height:22px; flex:0 0 auto; }
.tie-ring{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36px; height:14px; border:4px solid #8B5E34; border-radius:50%;
  background:rgba(139,94,52,.2);
}
.tie-rope{
  position:absolute; top:8px; width:3px; height:88px; background:#8B5E34;
  transform-origin:top center;
}
.tie-rope.left{ left:calc(50% - 8px); transform:rotate(-17deg); }
.tie-rope.right{ right:calc(50% - 8px); transform:rotate(17deg); }
.balloon-anchor{ position:absolute; width:0; height:0; transform-origin:0 0; }
.balloon-sway{
  position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0;
  animation-name:balloonSway; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes balloonSway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
.balloon-string{ position:absolute; left:-1px; width:2px; background:#9c958a; }
.balloon-shape{
  position:absolute; left:0;
  border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  box-shadow:inset -4px -4px 7px rgba(0,0,0,.18), inset 3px 3px 6px rgba(255,255,255,.4);
}
.balloon-knot{
  position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:6px solid transparent;
}
.basket-group{ position:relative; width:88px; height:98px; }
.basket-animal{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-size:clamp(34px,5.4vw,64px); line-height:1; z-index:2;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.2));
}
.hot-air-basket{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:70px; height:42px; z-index:1;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 3px, transparent 3px 8px),
    linear-gradient(to bottom, #C9985F, #A9764A);
  border-radius:5px 5px 11px 11px;
  border:3px solid #8B5E34;
  box-shadow:inset 0 -6px 8px rgba(0,0,0,.25);
}
.hot-air-basket::before{
  content:"";
  position:absolute; top:-7px; left:-4px; right:-4px; height:8px;
  background:#8B5E34; border-radius:4px;
}

/* ---------- BATTLEFIELD ---------- */
.battlefield{
  flex:1 1 auto; display:flex; min-height:0;
  position:relative;
}
.team-panel{
  position:relative;
  flex:1 1 50%; display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly; padding:1.5vh 1.5vw; min-width:0;
  overflow:visible;
}
.team-panel.team-blue{ --team-color:var(--blue); --team-color-dark:var(--blue-dark); background:var(--field-left); }
.team-panel.team-red{ --team-color:var(--red); --team-color-dark:var(--red-dark); background:var(--field-right); }

.team-name{
  margin:0; display:flex; align-items:center; gap:.4em;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.1rem,2.6vw,2rem);
  color:var(--team-color-dark);
}

.score-dots{ display:flex; gap:.6vw; flex-wrap:wrap; justify-content:center; }
.dot{
  width:clamp(18px,2.4vw,32px); height:clamp(18px,2.4vw,32px);
  border-radius:50%; border:3px solid #d8d3e6; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.65rem,1.3vw,1rem); color:transparent; font-weight:800;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.dot.filled{ background:var(--team-color); border-color:var(--team-color-dark); color:#fff; transform:scale(1.1); }

.problem-card{
  background:#fff; border:4px solid var(--team-color);
  border-radius:26px; box-shadow:0 8px 0 rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.08);
  padding:1vh 3vw; text-align:center;
  font-family:var(--font-display); font-weight:600;
  color:var(--ink); letter-spacing:1px;
  min-width:min(90%,320px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2vh;
}
.problem-card.math-mode{ min-width:min(90%,480px); }
.problem-emoji{
  font-size:clamp(3.4rem,9vw,6.4rem);
  line-height:1;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.15));
}
.problem-emoji.math-text{
  font-size:clamp(1.6rem,4.6vw,3.9rem);
  letter-spacing:1px;
  white-space:nowrap;
  filter:none;
}
.problem-hint{
  font-size:clamp(.65rem,1.3vw,.95rem); color:#8b84a0; font-weight:600;
}
.problem-hint.problem-hint-big{
  font-size:clamp(1.15rem,3.2vw,2.1rem); color:var(--ink); font-weight:700;
}
/* Galgenmännchen: das Kategorie-Icon ist nur ein kleiner Hinweis (verrät das
   Wort nicht), die Frage soll deutlich größer/wichtiger wirken als das Icon -
   die Wertebereiche überschneiden sich bewusst nicht (Icon max 1.8rem,
   Frage min 1.9rem), damit die Frage bei jeder Bildschirmgröße größer bleibt. */
.problem-emoji.cat-icon-small{
  font-size:clamp(1.4rem,3vw,1.8rem); filter:none;
}
.problem-hint.hangman-hint-big{
  font-size:clamp(1.9rem,3.8vw,2.6rem); color:var(--ink); font-weight:700;
}

.choices{ display:flex; gap:1.2vw; flex-wrap:wrap; align-items:center; justify-content:center; min-height:10vh; max-width:min(96%,620px); }
.choice-btn{
  min-width:clamp(90px,11vw,160px);
  padding:1.2vh 1.6vw;
  border-radius:20px; border:3px solid var(--team-color);
  background:#fff; color:var(--team-color-dark);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1rem,2.6vw,1.7rem);
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow:0 5px 0 rgba(0,0,0,.08);
}
.choice-btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,.15); }
.choice-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.08); }
.choice-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
/* Ziehbare Sortier-Kacheln (z.B. Kalenderspiel "Sortieren"-Modus): echtes
   Drag & Drop per Pointer Events, analog zum Münzen-Ziehen im Geldspiel -
   ein "Geist"-Element folgt dem Finger/Mauszeiger, die Original-Kachel bleibt
   an Ort und Stelle, bis beim Loslassen mit der Ziel-Kachel getauscht wird. */
.sort-board{ display:flex; flex-wrap:wrap; gap:.8vw; justify-content:center; max-width:min(96%,680px); }
.sort-tile{
  position:relative;
  display:inline-flex; align-items:center; gap:.5em;
  min-width:clamp(64px,7.5vw,120px); padding:.9vh 1vw .9vh .6vw; border-radius:16px;
  border:3px solid var(--team-color); background:#fff; color:var(--team-color-dark);
  font-family:var(--font-display); font-weight:700; font-size:clamp(.8rem,1.9vw,1.25rem);
  text-align:center; cursor:grab; touch-action:none; user-select:none;
  transition:box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.sort-tile.drag-source{ opacity:.35; }
.sort-tile.drop-hover{ box-shadow:0 0 0 4px var(--gold) inset, 0 4px 0 rgba(0,0,0,.08); }
.sort-tile.correct-slot{ background:#3FCC66; border-color:#2FA352; color:#fff; }
.sort-tile-number{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  min-width:1.9em; padding:.15em .25em;
  border-radius:9px; border:2px solid currentColor;
  background:rgba(0,0,0,.07); color:inherit;
  font-size:.75em; font-weight:800;
  pointer-events:none;
}
.sort-tile.correct-slot .sort-tile-number{ background:rgba(255,255,255,.3); border-color:#fff; }
.sort-tile-label{ flex:1 1 auto; display:block; pointer-events:none; }
.sort-tile-ghost{
  position:fixed; z-index:250; pointer-events:none;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9vh 1vw .9vh .6vw; border-radius:16px;
  border:3px solid var(--team-color); background:#fff; color:var(--team-color-dark);
  font-family:var(--font-display); font-weight:700; font-size:clamp(.8rem,1.9vw,1.25rem);
  text-align:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.sort-tile-ghost .sort-tile-number{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  min-width:1.9em; padding:.15em .25em; border-radius:9px; border:2px solid currentColor;
  background:rgba(0,0,0,.07); font-size:.75em; font-weight:800;
}
/* Galgenmännchen: Leben-Anzeige, Wort-Kacheln und antippbare Buchstaben-Bank
   (kein Tippen nötig - wichtig, da Whiteboards nur eine Tastatur haben).
   Kompakt gehalten (kleinere Kacheln/Buttons, engere Abstände), damit das
   volle Alphabet auch im nicht-Vollbild-Fenstermodus noch ohne Scrollen
   passt - siehe auch body.compact-scene weiter unten. */
.hangman-wrap{ display:flex; flex-direction:column; align-items:center; gap:1vh; max-width:min(96%,620px); }
.hangman-word{ display:flex; flex-wrap:wrap; gap:.3em; justify-content:center; }
.hangman-tile{
  min-width:1.4em; height:1.9em; padding:0 .1em;
  border-bottom:4px solid var(--team-color);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:.08em;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1rem,2.4vw,1.6rem); color:var(--team-color-dark);
}
.hangman-tile.gap{ border-bottom:none; min-width:.7em; }
@keyframes hmPop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.2); } 100%{ transform:scale(1); } }
.hangman-tile:not(.gap):not(:empty){ animation:hmPop .35s ease; }
/* Leben als eigene SVG-Icons statt Emoji (einheitliche Darstellung auf jedem
   Gerät/Betriebssystem, passend zum sonstigen Linien-Icon-Stil der Seite). */
.hangman-lives{ display:flex; gap:.3em; }
.life-icon{ width:clamp(20px,2.6vw,28px); height:clamp(20px,2.6vw,28px); transition:transform .2s ease; }
.life-icon.filled{ color:var(--team-color-dark); }
.life-icon.filled path{ fill:currentColor; stroke:currentColor; stroke-width:3; }
.life-icon.empty{ color:#D8D3E6; }
.life-icon.empty path{ fill:none; stroke:currentColor; stroke-width:3; }
.hangman-bank{ display:flex; flex-wrap:wrap; gap:.4vw; justify-content:center; }
.hangman-letter-btn{
  min-width:clamp(30px,3.6vw,44px); min-height:clamp(30px,3.6vw,44px);
  padding:.15em; border-radius:10px; border:3px solid var(--team-color);
  background:#fff; color:var(--team-color-dark);
  font-family:var(--font-display); font-weight:800; font-size:clamp(.8rem,1.8vw,1.1rem);
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.08);
}
.hangman-letter-btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,.15); }
.hangman-letter-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.08); }
.hangman-letter-btn:disabled{ cursor:default; }
.hangman-letter-btn.correct{ background:#3FCC66; border-color:#2FA352; color:#fff; }
.hangman-letter-btn.wrong{ background:#FF5C5C; border-color:#D63E3E; color:#fff; opacity:.7; }
.choice-btn.correct{ background:#3FCC66; border-color:#2FA352; color:#fff; animation:pop .5s ease; }
.choice-btn.wrong{ background:#FF5C5C; border-color:#D63E3E; color:#fff; animation:shake .45s ease; }
@keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.18);} 100%{transform:scale(1);} }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(6px); }
}

.divider{
  position:absolute; top:0; bottom:0; left:50%; width:0;
  border-left:3px dashed rgba(43,37,64,.18);
  transform:translateX(-50%);
  z-index:2;
}
.vs-badge{
  position:absolute; top:1.4vh; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--ink); font-family:var(--font-display); font-weight:700;
  font-size:clamp(.8rem,1.6vw,1.2rem);
  padding:.3em .9em; border-radius:999px; box-shadow:0 4px 10px rgba(0,0,0,.15);
  z-index:3;
}

.mini-confetti{ position:absolute; width:8px; height:12px; border-radius:2px; pointer-events:none; z-index:6; }

/* ---------- WIN OVERLAY ---------- */
.win-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(20,15,35,.6); z-index:100;
  transition:background .4s ease;
}
.win-overlay.show{ display:flex; }
.confetti-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece{
  position:absolute; top:-5vh; width:10px; height:16px; opacity:.95;
  animation-name:confettiFall; animation-timing-function:linear; animation-iteration-count:infinite;
}
@keyframes confettiFall{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(110vh) rotate(720deg); }
}
.win-card{
  position:relative; background:#fff; border-radius:32px; padding:5vh 6vw; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35); max-width:520px; width:90%;
  animation:cardIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cardIn{
  0%{ transform:scale(.7); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.trophy{ font-size:clamp(3rem,7vw,5rem); }
.win-card h2{
  font-family:var(--font-display); font-weight:600; margin:.2em 0 .8em;
  font-size:clamp(1.3rem,3.4vw,2.2rem);
}
.win-actions{ display:flex; gap:1vw; justify-content:center; flex-wrap:wrap; }
.play-again-btn, .settings-btn-win{
  border:none; border-radius:999px; padding:1.1vh 2.2vw; cursor:pointer;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(.9rem,2vw,1.3rem);
}
.play-again-btn{ background:var(--accent); color:#fff; box-shadow:var(--shadow-lg); }
.settings-btn-win{ background:var(--accent-soft); color:var(--ink); }
.play-again-btn:active, .settings-btn-win:active{ transform:scale(.94); }

/* ---------- PAUSE OVERLAY ---------- */
.pause-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,25,.55); z-index:105;
}
.pause-overlay.show{ display:flex; }
.pause-card{
  background:#fff; border-radius:32px; padding:5vh 6vw; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35); animation:cardIn .3s ease;
}
.pause-icon{ font-size:clamp(2.6rem,6vw,4rem); }
.pause-card h2{
  font-family:var(--font-display); font-weight:600; margin:.3em 0 .8em;
  font-size:clamp(1.3rem,3.4vw,2.2rem);
}
.resume-btn{
  border:none; border-radius:999px; padding:1.1vh 2.4vw; cursor:pointer;
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(1rem,2.2vw,1.5rem);
  background:var(--accent);
  box-shadow:var(--shadow-lg);
}
.resume-btn:active{ transform:scale(.94); }

/* ---------- SETUP OVERLAY ---------- */
.start-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,25,.55); z-index:120; padding:2vh 2vw;
}
.start-overlay.show{ display:flex; }
.start-card{
  background:#fff; border-radius:32px; padding:6vh 7vw; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35); max-width:520px; width:100%;
  animation:cardIn .4s cubic-bezier(.34,1.56,.64,1);
}
.start-card h2{
  font-family:var(--font-display); font-weight:600; margin:0 0 .4em;
  font-size:clamp(1.8rem,5vw,2.8rem); color:var(--ink);
}
.start-card p{
  margin:0 0 1.6em; color:var(--muted); font-size:clamp(.9rem,2vw,1.15rem);
}
.start-btn{
  border:none; border-radius:999px; padding:1.6vh 4vw; cursor:pointer;
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(1.2rem,3vw,1.7rem);
  background:var(--accent);
  box-shadow:var(--shadow-lg);
  transition:transform .15s ease;
}
.start-btn:active{ transform:scale(.96); }
.more-games{
  margin-top:1.8vh; padding-top:1.6vh; border-top:1px solid var(--accent-soft, #EEF0F2);
  font-size:.8rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4em .7em; justify-content:center; align-items:center;
}
.more-games a{ color:var(--accent); font-weight:600; text-decoration:underline; }
.more-games a:hover{ color:var(--ink); }

.setup-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(20,20,25,.55); z-index:110; padding:2vh 2vw;
}
.setup-overlay.show{ display:flex; }
.setup-card{
  position:relative;
  background:#fff; border-radius:28px; padding:3vh 3vw; max-width:900px; width:100%;
  max-height:94vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.setup-close-btn{
  position:absolute; top:1.4vh; right:1.4vw;
  width:clamp(34px,5vw,44px); height:clamp(34px,5vw,44px);
  border-radius:50%; border:none; background:var(--accent-soft); color:var(--ink);
  font-size:1.3rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.setup-close-btn:active{ transform:scale(.9); }
.setup-close-btn.hidden{ display:none; }
.setup-section.hidden{ display:none; }
.setup-card h2{
  font-family:var(--font-display); text-align:center; margin:0 0 2.4vh;
  font-size:clamp(1.2rem,3vw,1.9rem);
}
.setup-section{ margin-bottom:2.4vh; }
.setup-section label, .setup-section h3{
  display:block; font-family:var(--font-display); font-weight:600; margin-bottom:1vh;
  font-size:clamp(.9rem,1.8vw,1.15rem); color:var(--ink); text-align:center;
}
.stepper{ display:flex; align-items:center; justify-content:center; gap:1.2vw; }
.stepper-btn{
  width:clamp(38px,6vw,54px); height:clamp(38px,6vw,54px); border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:1.5rem; font-weight:700; cursor:pointer;
}
.stepper-btn:active{ transform:scale(.9); }
.stepper-value{
  font-family:var(--font-display); font-size:clamp(1.5rem,3.6vw,2.2rem); font-weight:700;
  min-width:2ch; text-align:center;
}
.mode-toggle{ display:flex; gap:1vw; justify-content:center; flex-wrap:wrap; }
.mode-btn{
  border:3px solid var(--border); background:#fff; border-radius:16px; padding:1.2vh 1.6vw;
  font-family:var(--font-display); font-weight:600; font-size:clamp(.85rem,1.7vw,1.1rem);
  cursor:pointer; transition:all .2s ease;
}
.mode-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chip-row{ display:flex; gap:1vw; justify-content:center; flex-wrap:wrap; }
.chip{
  border:3px solid var(--border); background:#fff; border-radius:999px; padding:1vh 1.6vw;
  font-family:var(--font-display); font-weight:600; font-size:clamp(.78rem,1.6vw,1.05rem);
  cursor:pointer; transition:all .2s ease;
}
.chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.custom-words-textarea{
  display:block; width:100%; max-width:480px; margin:0 auto;
  border:3px solid var(--border); border-radius:16px; padding:1.2vh 1.4vw;
  font-family:var(--font-display); font-weight:500; font-size:clamp(.85rem,1.7vw,1.05rem);
  color:var(--ink); resize:vertical; box-sizing:border-box;
}
.custom-words-textarea:focus{ outline:none; border-color:var(--accent); }
.animal-section{ display:flex; gap:2vw; flex-wrap:wrap; }
.animal-col{ flex:1 1 260px; }
.animal-col h3{ text-align:center; margin-bottom:1vh; }
.animal-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.6vw;
  border-radius:16px; padding:.8vh; border:3px solid transparent;
}
.animal-grid.team-blue{ background:#EAF1FF; border-color:#CFE0FF; }
.animal-grid.team-red{ background:#FFEEEE; border-color:#FFD6D6; }
.animal-btn{
  font-size:clamp(1.3rem,2.8vw,2.1rem); border:3px solid var(--border); background:#fff;
  border-radius:14px; padding:.5vh; cursor:pointer; transition:all .15s ease;
}
.animal-btn.selected{ border-color:var(--accent); background:var(--accent-soft); transform:scale(1.08); }
.animal-grid.team-blue .animal-btn.selected{ border-color:var(--blue); background:#DCE9FF; }
.animal-grid.team-red .animal-btn.selected{ border-color:var(--red); background:#FFE0E0; }
.start-game-btn{
  display:block; margin:1.2vh auto 0; border:none; border-radius:999px; padding:1.6vh 3vw;
  cursor:pointer; font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  background:var(--accent);
  box-shadow:var(--shadow-lg);
}
.start-game-btn:active{ transform:scale(.96); }

/* ---------- SOLO-MODUS: nur Team Blau, keine Gegner-Seite ---------- */
body.solo-mode .team-panel.team-red,
body.solo-mode .divider,
body.solo-mode .vs-badge{ display:none; }
body.solo-mode .team-panel.team-blue{
  flex:1 1 100%;
  /* Kein "Team Blau" mehr in Solo - neutrales Grau statt Blau, passend zum
     Rest der Seite (--accent), statt der Team-Farbe eines nicht vorhandenen Gegners. */
  --team-color:#8B94A3;
  --team-color-dark:var(--accent);
  background:var(--accent-soft);
}
/* Solo hat nur ein Team - der Name ("Team Blau") ist überflüssig, das Tier-Icon reicht,
   dafür darf es deutlich größer sein. */
body.solo-mode #teamNameLeft{ display:none; }
body.solo-mode #iconLeft{ font-size:clamp(3rem,10vw,6rem); }
body.solo-mode .character-emoji{ font-size:clamp(70px,14vw,180px); }

/* "Keine Animation": die ganze Himmel-Szene weglassen statt sie leer stehen zu
   lassen - die Bilanzfläche (.battlefield) füllt den frei werdenden Platz
   automatisch via flex:1 1 auto. Gilt unabhängig von Solo/Team. */
body.no-scene #scene{ display:none; }

/* Für Spiele mit besonders viel Inhalt pro Runde (z.B. Galgenmännchen mit
   vollem Alphabet + Leben + Wort-Kacheln) nimmt die Szenen-Animation oben
   bewusst weniger Höhe ein, damit im Fenstermodus (nicht Vollbild) mehr vom
   Spielbrett ohne Scrollen sichtbar bleibt. */
body.compact-scene .scene{ flex-basis:26vh; }

body.solo-mode .rope-area{ justify-content:center; }
body.solo-mode .rope-area .character-col:last-child,
body.solo-mode .rope-area .rope-track{ display:none; }

body.solo-mode .balloon-area{ justify-content:center; }
body.solo-mode .balloon-area .balloon-col:last-child{ display:none; }

body.solo-mode .space-area{ justify-content:center; }
body.solo-mode .space-area .rocket-col:last-child{ display:none; }

body.solo-mode .race-area .lane:last-child{ display:none; }

/* Auch die "Team Blau"-Pille unter dem Tier in der Szene weglassen - in Solo
   gibt es kein zweites Team, gegen das man sich abgrenzen müsste. */
body.solo-mode .scene .team-tag{ display:none; }

/* Live-Vorschau im Einstellungen-Bildschirm: Tier-Auswahl fürs zweite Team
   ausblenden, solange "Solo" (statt "Team gegen Team") gewählt ist. */
.animal-section.solo-setup .animal-col:last-child{ display:none; }
.animal-section.solo-setup .team-tag.blue{ background:var(--accent); }
.animal-section.solo-setup .animal-grid.team-blue{ background:var(--accent-soft); border-color:var(--border); }
.animal-section.solo-setup .animal-grid.team-blue .animal-btn.selected{ border-color:var(--accent); background:var(--accent-soft); }

@media (prefers-reduced-motion: reduce){
  .cloud, .flag-marker, .trophy, .rope-svg, .balloon-sway, .grass-tuft .blade{ animation:none !important; }
  .choice-btn.correct, .choice-btn.wrong, .kids-left.pulling, .kids-right.pulling{ animation:none !important; }
  .flag-marker{ transition:left .2s linear; }
  .balloon-col{ transition:none !important; }
}

@media (max-width:700px){
  .team-tag{ display:none; }
  .choices{ gap:2vw; }
}

/* Kurze Bildschirme (Handys, v.a. quer, aber auch viele Hochkant-Handys):
   Topbar+Szene sollen dem Spielfeld (Antwort-/Prüfen-Buttons) nicht die Höhe
   wegnehmen. Überschreibt bewusst die pro-Spiel angepasste Szenenhöhe (z.B.
   28vh/36vh/42vh) mit !important, damit das für JEDES Spiel gilt, ohne dass
   jede einzelne Spieldatei eine eigene Media Query pflegen müsste. Als
   zusätzliches Sicherheitsnetz bleibt die Seite trotzdem vertikal scrollbar
   (siehe html,body oben), falls es selbst dann noch zu knapp wird. */
@media (max-height:700px){
  .scene{ flex:0 0 16vh !important; }
  .topbar{ padding:.4vh 2vw; gap:6px; }
  .title-wrap p{ display:none; }
  .icon-btn{ padding:.4vh .7vw; font-size:.72rem; }
  .team-panel{ padding:.8vh 1.5vw !important; }
  .problem-card{ padding:.6vh 2.5vw !important; }
}
@media (max-height:520px){
  .scene{ flex:0 0 10vh !important; }
}