@import url('/fonts/fonts.css');

:root {
  --ink: #24124a;
  --ink-soft: #3b2470;
  --bg1: #1e0b45;
  --bg2: #3a1680;
  --paper: #fffaf0;
  --paper-2: #f3ecff;
  --pink: #ff4f8b;
  --blue: #3b82f6;
  --yellow: #fbbf24;
  --green: #22c55e;
  --orange: #f97316;
  --teal: #14b8a6;
  --purple: #a855f7;
  --red: #ef4444;
  --gold: #ffc53d;
  --silver: #cfd8e6;
  --bronze: #e39a5b;
  --opt-0: #ff4f8b;
  --opt-1: #3b82f6;
  --opt-2: #f5a70a;
  --opt-3: #16b364;
  --accent: #ff4f8b;
  --shadow: 0 6px 0 rgba(12, 3, 36, 0.45);
  --shadow-sm: 0 3px 0 rgba(12, 3, 36, 0.45);
  --radius: 22px;
  --outline: 3px solid var(--ink);
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg1);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

h1, h2, h3, .head { font-family: var(--font-head); font-weight: 600; letter-spacing: 0.01em; margin: 0; }

/* ------------------------------------------------------------ Hintergrund */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, #5b21b6 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #86198f 0%, transparent 50%),
    linear-gradient(160deg, var(--bg2), var(--bg1) 70%);
  transition: background 1s;
}
.bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='0.05' font-family='Arial Black,Arial' font-weight='900'%3E%3Ctext x='10' y='50' font-size='44' transform='rotate(-15 30 40)'%3E%3F%3C/text%3E%3Ctext x='95' y='130' font-size='36' transform='rotate(12 110 120)'%3E!%3C/text%3E%3Ccircle cx='120' cy='40' r='6'/%3E%3Ccircle cx='40' cy='125' r='4'/%3E%3C/g%3E%3C/svg%3E");
  animation: bgdrift 60s linear infinite;
}
.bg .blob {
  position: absolute;
  width: 45vmax;
  height: 45vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  animation: blob 22s ease-in-out infinite alternate;
}
.bg .blob.b1 { background: var(--pink); left: -10vmax; top: -12vmax; }
.bg .blob.b2 { background: #06b6d4; right: -14vmax; top: 20vh; animation-delay: -7s; opacity: 0.3; }
.bg .blob.b3 { background: var(--orange); left: 25vw; bottom: -22vmax; animation-delay: -13s; opacity: 0.3; }
.bg.tinted .blob.b1 { background: var(--accent); }

@keyframes bgdrift { to { transform: translate(160px, 160px); } }
@keyframes blob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
  100% { transform: translate(-6vw, 10vh) scale(0.9); }
}

/* ------------------------------------------------------------ Bausteine */
.card {
  background: var(--paper);
  color: var(--ink);
  border: var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn {
  --c: var(--pink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  border: var(--outline);
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow);
  transition: transform 0.12s var(--ease-back), box-shadow 0.12s, filter 0.2s;
  user-select: none;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(12, 3, 36, 0.45); }
.btn:disabled { filter: grayscale(0.8) brightness(0.8); cursor: not-allowed; transform: none; }
.btn.big { font-size: 1.5rem; padding: 0.75em 1.8em; }
.btn.ghost { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); box-shadow: none; }
.btn.white { --c: #fff; color: var(--ink); text-shadow: none; }
.btn.green { --c: var(--green); }
.btn.blue { --c: var(--blue); }
.btn.yellow { --c: var(--yellow); color: var(--ink); text-shadow: none; }
.btn.purple { --c: var(--purple); }
.btn.icon { padding: 0; width: 2.6em; height: 2.6em; font-size: 1.1rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 800;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------ Avatare */
.avatar {
  --size: 64px;
  --pc: var(--pink);
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  background: var(--pc);
  border: calc(var(--size) * 0.05 + 1px) solid var(--ink);
  box-shadow: 0 calc(var(--size) * 0.05) 0 rgba(12, 3, 36, 0.4), inset 0 calc(var(--size) * -0.08) 0 rgba(0, 0, 0, 0.15);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: calc(var(--size) * 0.56);
  line-height: 1;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .emo { transform: translateY(4%); }
.avatar.off { filter: grayscale(1) opacity(0.5); }

/* ------------------------------------------------------------ Timer */
.timer-ring {
  --size: 84px;
  --p: 1;
  --tc: #fff;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer-ring .track { fill: var(--paper); stroke: var(--ink); stroke-width: 7; }
.timer-ring .bar { fill: none; stroke: var(--tc); stroke-width: 9; stroke-linecap: round; transition: stroke 0.3s; }
.timer-ring .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--size) * 0.38);
  color: var(--ink);
}
.timer-ring.urgent { animation: pulse 0.5s ease-in-out infinite alternate; }
.timer-ring.urgent .bar { stroke: var(--red); }
.timer-ring.done .num { font-size: calc(var(--size) * 0.32); }

.timer-bar {
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.timer-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 99px;
  transform-origin: left center;
}
.timer-bar.urgent > i { background: var(--red); }

/* ------------------------------------------------------------ Antwortfarben & Formen */
.shape { display: inline-block; width: 1em; height: 1em; flex: none; }
.shape svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ Animationen */
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes popIn { 0% { transform: scale(0.6) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideLeft { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes jelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.18, 0.82); }
  45% { transform: scale(0.88, 1.12); }
  60% { transform: scale(1.06, 0.94); }
  75% { transform: scale(0.98, 1.02); }
  100% { transform: scale(1, 1); }
}
@keyframes stamp { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(0.92) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }

.anim-pop { animation: pop 0.5s var(--ease-back) both; }
.anim-up { animation: slideUp 0.55s var(--ease-out) both; }
.anim-down { animation: slideDown 0.55s var(--ease-out) both; }
.anim-fade { animation: fadeIn 0.5s ease both; }
.anim-shake { animation: shake 0.45s ease; }
.anim-jelly { animation: jelly 0.7s ease; }

/* ------------------------------------------------------------ Diverses */
.hidden { display: none !important; }
.muted { opacity: 0.7; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  z-index: 1000;
  padding: 0.7em 1.2em;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  border: var(--outline);
  box-shadow: var(--shadow);
  font-weight: 800;
  animation: slideUp 0.35s var(--ease-back) both;
  max-width: calc(100vw - 32px);
  text-align: center;
  pointer-events: none; /* nur Hinweis: Knöpfe darunter bleiben antippbar */
}

.conn-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  padding: 8px;
  background: var(--red);
  color: #fff;
  text-align: center;
  font-weight: 800;
  border-bottom: var(--outline);
  animation: slideDown 0.3s ease both;
}

canvas.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 900;
}

/* Pixel-Puzzle */
.pixel-frame {
  position: relative;
  border: var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #111;
}
.pixel-frame canvas { display: block; width: 100%; height: 100%; }
.pixel-frame .credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px #000;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Karte */
.mapbox {
  position: relative;
  overflow: hidden;
  border: var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--map-sea, #6ec6e8);
  touch-action: none;
  user-select: none;
}
.mapbox .mapinner {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.mapbox .mapinner > svg { display: block; width: 100%; height: 100%; }
.mapbox .overlay { position: absolute; inset: 0; pointer-events: none; }
.pin {
  --pc: var(--pink);
  position: absolute;
  width: 0;
  height: 0;
  z-index: 2;
}
.pin .head {
  position: absolute;
  left: -17px;
  top: -41px;
  width: 34px;
  height: 34px;
  transform: rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  background: var(--pc);
  border: 3px solid var(--ink);
  box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.3);
}
.pin .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  left: -4px;
  top: -4px;
  border-radius: 50%;
  background: var(--ink);
}
.pin.drop { animation: pinDrop 0.5s var(--ease-back) both; }
@keyframes pinDrop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.pin.target { z-index: 6; }
.pin.target .head { background: #fff; }
.pin.target .star { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 34px; animation: pop 0.6s var(--ease-back) both, pulse 0.8s 0.6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 0 var(--ink)); }

.mapbox svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Schatten-Versatz in Karteneinheiten: --lu (von MapView) = Karteneinheiten pro Bildschirmpixel, also immer 1 px */
.mapbox svg.lines .ln { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: fadeIn 0.7s ease forwards; filter: drop-shadow(0 calc(var(--lu, 1) * 1px) 0 rgba(0, 0, 0, 0.4)); }
.mapbox svg.lines .ln.dashed { stroke-dasharray: 2 7; stroke-width: 3.5; }
.mapbox svg.lines .ring { fill: rgba(255, 255, 255, 0.16); stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; opacity: 0; animation: fadeIn 0.6s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.mapbox .svgwrap { position: absolute; inset: 0; }
.mapbox .svgwrap.hidden { visibility: hidden; }
.mapbox .svgwrap > svg { width: 100%; height: 100%; display: block; }
/* Kartenflächen (scripts/build-maps.mjs): Länder in sieben Tönen, damit Nachbarn unterscheidbar sind */
.geomap .sea { fill: var(--map-sea, #6ec6e8); }
.geomap .grid { fill: none; stroke: var(--map-grid, rgba(255, 255, 255, 0.2)); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.geomap .c { fill: var(--map-land, #fbe7b2); stroke: var(--map-border, #c49a5c); stroke-width: 0.8px; stroke-linejoin: round; vector-effect: non-scaling-stroke; fill-rule: evenodd; transition: fill 0.4s ease; }
.geomap .c[data-k="2"] { fill: var(--map-land2, #f6dc9e); }
.geomap .c[data-k="3"] { fill: var(--map-land3, #fdf0cf); }
.geomap .c[data-k="4"] { fill: var(--map-land4, #f3d8a6); }
.geomap .c[data-k="5"] { fill: var(--map-land5, #f9e6bd); }
.geomap .c[data-k="6"] { fill: var(--map-land6, #efe1a9); }
.geomap .c[data-k="7"] { fill: var(--map-land7, #fae1ae); }
.geomap .c.other { fill: var(--map-other, #e9dcc0); stroke: var(--map-other-border, #c9b48a); }
.geomap .c.st { stroke: var(--map-state, #b8925a); stroke-width: 1.3px; }
.geomap .lake { fill: var(--map-sea, #6ec6e8); stroke: var(--map-water-line, #4fa3cc); stroke-width: 0.6px; vector-effect: non-scaling-stroke; }
.geomap .river { fill: none; stroke: var(--map-river, #5fb3db); stroke-width: 1.1px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Hervorhebungen für Runden (MapView.paint) */
.geomap .c.hl { fill: var(--map-hl, #ff4f8b); stroke: var(--ink); stroke-width: 2px; }
.geomap .c.dim { fill: var(--map-dim, #e7dcc4); opacity: 0.55; }
.geomap .c.blank { fill: #fffaf0; stroke: var(--ink); stroke-width: 1.6px; }
/* Zentrierung über translate (die Einblend-Animation nutzt transform); --dy: Ausweichen bei Überlappung */
.maplabel { position: absolute; translate: -50% calc(-50% + var(--dy, 0px)); transition: translate 0.35s var(--ease-out); white-space: nowrap; pointer-events: none; z-index: 4; animation: popIn 0.5s var(--ease-back) both; }
.maplabel.above { translate: -50% calc(-100% - 1.6rem + var(--dy, 0px)); }
/* ausgewichene Beschriftung: dünner Strich zurück zum Ort */
.maplabel.moved::before { content: ''; position: absolute; left: 50%; top: var(--lt); width: 2px; height: var(--lh); margin-left: -1px; background: var(--ink); opacity: 0.75; z-index: -1; }
/* Lupe beim Pinsetzen (Touch, Finger halten) */
.maploupe { position: fixed; z-index: 95; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--map-sea, #6ec6e8); box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0, 0, 0, 0.45); pointer-events: none; }
.maploupe > svg { position: absolute; left: 0; top: 0; display: block; }
.maploupe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--pink), var(--pink)) center / 2px 26px no-repeat, linear-gradient(var(--pink), var(--pink)) center / 26px 2px no-repeat; }
.flyer { position: absolute; width: 0; height: 0; z-index: 7; pointer-events: none; }
.flyer span { position: absolute; left: -0.8em; top: -0.8em; width: 1.6em; height: 1.6em; display: grid; place-items: center; font-size: 28px; transform: rotate(var(--ang, 45deg)); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.mapbox .zoomctl { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.mapbox .zoomctl button { width: 44px; height: 44px; border-radius: 12px; border: var(--outline); background: var(--paper); color: var(--ink); font-size: 24px; font-weight: 900; box-shadow: var(--shadow-sm); display: grid; place-items: center; padding: 0; }
.pinlabel { --lift: 0px; --dx: 0px; position: absolute; left: 0; top: -84px; transform: translate(calc(-50% + var(--dx)), calc(-1 * var(--lift))); transition: transform 0.5s var(--ease-back); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
/* Verbindungsstrich, wenn das Label wegen Platzmangel hochgestapelt wurde */
.pinlabel::after { content: ''; position: absolute; left: calc(50% - var(--dx)); top: 100%; width: 3px; margin-left: -1.5px; height: var(--lift); background: var(--pc); box-shadow: 0 0 0 1.5px var(--ink); border-radius: 2px; transition: height 0.5s var(--ease-back); z-index: -1; }
.pinlabel.below::after { display: none; }
.pinlabel span { background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.pin.mine .head { animation: jelly .6s ease; }

/* ------------------------------------------------------------ Quizzly */
.quizzly { width: 100%; height: 100%; display: block; overflow: visible; }
.quizzly .qz-all { transform-origin: 120px 240px; animation: qzIdle 3.2s ease-in-out infinite; }
.quizzly .qz-tassel { transform-origin: 120px 36px; animation: qzTassel 2.4s ease-in-out infinite; }
.quizzly .qz-ear-l { transform-origin: 58px 66px; }
.quizzly .qz-ear-r { transform-origin: 182px 66px; animation: qzEar 6s ease-in-out infinite; }
.quizzly .eye, .quizzly .m { display: none; }
.quizzly .eye-normal, .quizzly .m-smile { display: inline; }
.quizzly .eye-normal { transform-origin: 120px 120px; transition: transform 0.08s; }
.quizzly.blink .eye-normal { transform: scaleY(0.1); }
.quizzly .qz-brows path { transition: transform 0.3s; }
.quizzly .brow-l { transform-origin: 87px 92px; }
.quizzly .brow-r { transform-origin: 153px 92px; }
.quizzly .pupils { transition: transform 0.3s; }

.quizzly[data-mood="happy"] .eye-normal { display: none; }
.quizzly[data-mood="happy"] .eye-happy { display: inline; }
.quizzly[data-mood="happy"] .m-smile { display: none; }
.quizzly[data-mood="happy"] .m-open { display: inline; }
.quizzly[data-mood="happy"] .brow-l { transform: translateY(-5px); }
.quizzly[data-mood="happy"] .brow-r { transform: translateY(-5px); }

.quizzly[data-mood="shock"] .eye-normal { display: none; }
.quizzly[data-mood="shock"] .eye-shock { display: inline; }
.quizzly[data-mood="shock"] .m-smile { display: none; }
.quizzly[data-mood="shock"] .m-o { display: inline; }
.quizzly[data-mood="shock"] .brow-l { transform: translateY(-10px) rotate(-8deg); }
.quizzly[data-mood="shock"] .brow-r { transform: translateY(-10px) rotate(8deg); }

.quizzly[data-mood="sad"] .m-smile { display: none; }
.quizzly[data-mood="sad"] .m-frown { display: inline; }
.quizzly[data-mood="sad"] .brow-l { transform: rotate(-16deg) translateY(2px); }
.quizzly[data-mood="sad"] .brow-r { transform: rotate(16deg) translateY(2px); }
.quizzly[data-mood="sad"] .pupils { transform: translateY(4px); }

.quizzly[data-mood="think"] .m-smile { display: none; }
.quizzly[data-mood="think"] .m-flat { display: inline; }
.quizzly[data-mood="think"] .pupils { transform: translate(6px, -6px); }
.quizzly[data-mood="think"] .brow-r { transform: translateY(-7px) rotate(6deg); }

.quizzly[data-mood="wink"] .eye-normal { display: none; }
.quizzly[data-mood="wink"] .eye-wink { display: inline; }
.quizzly[data-mood="wink"] .m-smile { display: none; }
.quizzly[data-mood="wink"] .m-open { display: inline; }

.quizzly.talking .m-smile, .quizzly.talking .m-flat, .quizzly.talking .m-frown { display: none !important; }
.quizzly.talking .m-open { display: inline !important; animation: qzTalk 0.18s steps(1) infinite; }
.quizzly.talking[data-mood="shock"] .m-o { display: inline !important; }
.quizzly.talking[data-mood="shock"] .m-open { display: none !important; }

.quizzly.jump .qz-all { animation: qzJump 0.6s var(--ease-back), qzIdle 3.2s 0.6s ease-in-out infinite; }
.quizzly.shake .qz-all { animation: qzShake 0.5s ease, qzIdle 3.2s 0.5s ease-in-out infinite; }

@keyframes qzIdle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes qzTassel { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(8deg); } }
@keyframes qzEar { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-14deg); } 96% { transform: rotate(6deg); } }
@keyframes qzTalk { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
.quizzly .m-open { transform-origin: 120px 168px; }
@keyframes qzJump { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-22px) scale(0.95, 1.06); } 60% { transform: translateY(0) scale(1.06, 0.94); } 100% { transform: none; } }
@keyframes qzShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }

.mascot { position: relative; }
.mascot .mascot-body { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(12, 3, 36, 0.35)); }
.mascot .bubble {
  position: absolute;
  bottom: 62%;
  min-width: 180px;
  max-width: min(420px, 38vw);
  width: max-content;
  padding: 14px 18px;
  background: #fff;
  color: var(--ink);
  border: var(--outline);
  border-radius: 20px;
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(15px, 1.35vw, 24px);
  line-height: 1.3;
  z-index: 3;
}
.mascot.bubble-right .bubble { left: 88%; border-bottom-left-radius: 4px; }
.mascot.bubble-left .bubble { right: 88%; border-bottom-right-radius: 4px; }
.mascot .bubble.in { animation: bubbleIn 0.4s var(--ease-back) both; }
.mascot.bubble-right .bubble { transform-origin: 0 100%; }
.mascot.bubble-left .bubble { transform-origin: 100% 100%; }
@keyframes bubbleIn { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.quizzly-static { width: 120px; height: 125px; }

/* Karte als Karte in passender Form (Host) */
.mapbox.fit { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.mapbox.fit .svgwrap { outline: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 0 rgba(12, 3, 36, 0.45); }

/* ------------------------------------------------------------ Gamepad-Tasten (Combo-Meister) */
.gbtn { --gs: 3rem; position: relative; display: inline-grid; place-items: center; width: var(--gs); height: var(--gs); flex: none; border: 3px solid var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.25); color: #fff; font-family: var(--font-head); font-weight: 700; }
.gbtn.dpad { border-radius: 22%; background: #3a3357; }
.gbtn.dpad svg { width: 70%; height: 70%; }
.gbtn.face { border-radius: 50%; }
.gbtn.face b { font-size: calc(var(--gs) * 0.5); line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.gbtn.gb-A { background: #19c563; }
.gbtn.gb-B { background: #ff3860; }
.gbtn.gb-X { background: #2f80ff; }
.gbtn.gb-Y { background: #ffb400; }
.gbtn.ok { box-shadow: 0 0 0 3px #19c563, 0 3px 0 rgba(0, 0, 0, 0.45); }
.gbtn.bad { box-shadow: 0 0 0 3px #ff3860, 0 3px 0 rgba(0, 0, 0, 0.45); }
.gbtn.bad::after { content: '✗'; position: absolute; right: -0.35em; top: -0.45em; font-size: calc(var(--gs) * 0.42); color: #ff3860; font-weight: 900; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.gbtn.rest { opacity: 0.35; filter: grayscale(0.6); }

/* Kostüme für Quizzly (je nach Modus eingeblendet) */
.quizzly .qz-headset, .quizzly .qz-shades, .quizzly .qz-3d, .quizzly .qz-beret, .quizzly .qz-stars, .quizzly .qz-quiff, .quizzly .qz-mic, .quizzly .qz-pricetag, .quizzly .qz-pencil, .quizzly .qz-clipboard, .quizzly .qz-beanie, .quizzly .qz-nerd, .quizzly .qz-pith, .quizzly .qz-binos, .quizzly .qz-painter, .quizzly .qz-paperhat, .quizzly .qz-specs, .quizzly .qz-camera, .quizzly .qz-fedora, .quizzly .qz-partyhat, .quizzly .qz-phone { display: none; }