/* Andika (SIL OFL): für Leseanfänger gestaltete Schrift, selbst gehostet */
@font-face { font-family: Andika; font-weight: 400; font-display: swap; src: url(fonts/andika-400.woff2) format('woff2'); }
@font-face { font-family: Andika; font-weight: 700 900; font-display: swap; src: url(fonts/andika-700.woff2) format('woff2'); }

/* MojiBlast 2 – Layout: 16:9-Bühne, Overlays skalieren mit der Bühnenhöhe (cqh) */

:root {
  --bg: #2a1458;
  --panel: rgba(40, 14, 70, 0.72);
  --cyan: #ff8fb8;
  --pink: #ff5fd2;
  --yellow: #ffd84f;
  --text: #eef2ff;
  --muted: #9aa3c7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Andika, "Arial Rounded MT Bold", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  container-type: size;
  overflow: hidden;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hidden, [hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8cqh;
  background: rgba(40, 14, 70, 0.6);
  text-align: center;
  padding: 3cqh;
}

.overlay p { margin: 0; }

h1 {
  margin: 0;
  font-size: 13cqh;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 0 3cqh rgba(255, 143, 184, 0.7);
}
h1 span { color: var(--yellow); }

h2 {
  margin: 0;
  font-size: 10cqh;
  font-weight: 900;
}

.sub { font-size: 4cqh; color: var(--muted); }

.group { display: flex; flex-direction: column; align-items: center; gap: 1cqh; }
.label { font-size: 3.2cqh; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.row { display: flex; gap: 1.6cqh; flex-wrap: wrap; justify-content: center; }

.chip {
  font-size: 4.4cqh;
  font-weight: 700;
  padding: 1.2cqh 2.6cqh;
  border-radius: 2cqh;
  background: rgba(255, 255, 255, 0.08);
  border: 0.4cqh solid rgba(255, 255, 255, 0.18);
  transition: transform 0.1s, background 0.15s;
}
.chip:hover { background: rgba(255, 255, 255, 0.16); }
.chip[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #3a0a24;
  box-shadow: 0 0 2.5cqh rgba(255, 143, 184, 0.5);
}
.chip.shake { animation: shake 0.3s; }

@keyframes shake {
  25% { transform: translateX(-1cqh); }
  75% { transform: translateX(1cqh); }
}

.big {
  font-size: 5.5cqh;
  font-weight: 900;
  padding: 1.6cqh 5cqh;
  border-radius: 2.5cqh;
  background: linear-gradient(180deg, #ffe680, #ffb93f);
  color: #2a1600;
  box-shadow: 0 0.8cqh 0 #b9711b, 0 0 3cqh rgba(255, 200, 80, 0.4);
  transition: transform 0.1s;
}
.big:hover { transform: translateY(-0.3cqh); }
.big:active { transform: translateY(0.6cqh); box-shadow: 0 0.2cqh 0 #b9711b; }
.big.small { font-size: 4cqh; padding: 1cqh 3.4cqh; border-radius: 2cqh; }
.big.alt {
  background: linear-gradient(180deg, #8fe3ff, #3fa9e0);
  color: #04203a;
  box-shadow: 0 0.8cqh 0 #23709c;
}

.best { font-size: 4.2cqh; color: var(--yellow); font-weight: 700; }
.hint { font-size: 3cqh; color: var(--muted); }
.hint.touch { display: none; }
.mode { font-size: 3.6cqh; color: var(--muted); }
.score { font-size: 7cqh; font-weight: 900; }
.stats { font-size: 4cqh; }

/* ---------- Spiel-Buttons ---------- */
#hudButtons {
  position: absolute;
  top: 2cqh;
  right: 2cqh;
  display: flex;
  gap: 1.4cqh;
}
.iconBtn {
  width: 9cqh;
  height: 9cqh;
  font-size: 4.6cqh;
  border-radius: 50%;
  background: var(--panel);
  border: 0.3cqh solid rgba(255, 255, 255, 0.2);
}

#btnFire {
  position: absolute;
  right: 1.5cqh;
  bottom: 1.5cqh;
  width: 15cqh;
  height: 15cqh;
  border-radius: 50%;
  font-size: 7cqh;
  opacity: 0.7;
  background: radial-gradient(circle at 40% 35%, rgba(255, 200, 80, 0.6), rgba(200, 40, 100, 0.6));
  border: 0.5cqh solid rgba(255, 200, 150, 0.6);
  touch-action: none;
}
#btnFire.down { transform: scale(0.92); filter: brightness(1.3); }

/* Touch-Geräte: Feuerknopf und Touch-Hinweis zeigen */
@media (pointer: coarse) {
  .hint.keys { display: none; }
  .hint.touch { display: block; }
}
@media (pointer: fine) {
  #btnFire { display: none !important; }
}

/* ---------- Hochformat-Hinweis ---------- */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 7vw;
  line-height: 1.6;
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

/* ---------- Profile, Einstellungen, Album ---------- */
.chip.avatar { font-size: 5.6cqh; padding: 0.6cqh 1.6cqh; line-height: 1.2; }
.group.dim { opacity: 0.4; }
.stickers { font-size: 4.2cqh; line-height: 1.3; max-width: 90%; }

#albumGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11cqh, 1fr));
  gap: 1cqh;
  width: 92%;
  max-height: 56cqh;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 1cqh;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2cqh;
}
.stk {
  background: rgba(255, 255, 255, 0.12);
  border: 0.3cqh solid rgba(255, 255, 255, 0.2);
  border-radius: 1.6cqh;
  padding: 0.6cqh 0.2cqh;
  font-size: 6cqh;
  line-height: 1.1;
}
.stk small { display: block; font-size: 2cqh; font-weight: 700; color: var(--muted); }
.stk.locked { cursor: default; }
.stk.locked span { filter: brightness(0); opacity: 0.25; }
.stk:not(.locked):hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Emoji-Bilder ---------- */
.emo { height: 1.15em; width: 1.15em; vertical-align: -0.2em; object-fit: contain; pointer-events: none; }

/* ---------- Album-Seiten, Eltern-Ansicht ---------- */
.chip.small { font-size: 2.9cqh; padding: 0.7cqh 1.3cqh; border-radius: 1.6cqh; }
.chip.done { border-color: var(--yellow); box-shadow: 0 0 1.6cqh rgba(255, 216, 79, 0.5); }
#albumTabs { gap: 1cqh; }
#album h2, #parent h2 { font-size: 7cqh; }
#albumGrid { max-height: 40cqh; }
.stk.gold { border-color: var(--yellow); box-shadow: 0 0 1.2cqh rgba(255, 216, 79, 0.45); }

#parentGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8cqh;
  width: 92%;
}
.ptile { width: 9.4cqh; padding: 0.6cqh 0; border-radius: 1.2cqh; line-height: 1.1; }
.ptile.wide { width: 14cqh; }
.pbreak { flex-basis: 100%; height: 0; }
.ptile b { display: block; font-size: 4.4cqh; }
.ptile small { display: block; font-size: 2.2cqh; color: var(--muted); }