/* Münzwurf: Wurf-Fläche mit 3D-Münzen, Ergebnis, Statistik. */


.buehne-muenze {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 10px;
}

.wurf-flaeche {
  --muenz-groesse: min(52vw, 34dvh, 260px);
  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: calc(var(--muenz-groesse) * 2.2);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  align-content: flex-end;
  gap: 4% 8%;
  padding-bottom: 12px;
  perspective: 900px;
  cursor: pointer;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Bodenfläche: ein weicher Lichtfleck, auf dem die Münzen landen */
.wurf-flaeche::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -4%;
  height: calc(var(--muenz-groesse) * .55);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .2), rgba(236, 72, 153, .08) 60%, transparent);
  z-index: -1;
  pointer-events: none;
}
.wurf-flaeche[data-anzahl="2"] { --muenz-groesse: min(40vw, 30dvh, 220px); }
.wurf-flaeche[data-anzahl="3"], .wurf-flaeche[data-anzahl="4"] { --muenz-groesse: min(36vw, 22dvh, 180px); }
.wurf-flaeche:focus-visible { outline: 3px solid var(--himmel); outline-offset: 4px; border-radius: 20px; }

.muenz-platz {
  position: relative;
  width: var(--muenz-groesse);
  height: var(--muenz-groesse);
  transform-style: preserve-3d;
}
.muenz-schatten {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9%;
  height: 14%;
  border-radius: 50%;
  background: rgb(28, 29, 34);
  opacity: .28;
  filter: blur(8px);
}
.muenz-flug, .muenze { position: absolute; inset: 0; transform-style: preserve-3d; }

.muenz-schicht, .muenz-seite {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Die Kante: dünne Scheiben übereinander, 7 % der Münzgröße dick. */
.muenz-schicht {
  background: var(--dunkel);
  transform: translateZ(calc(var(--z) * var(--muenz-groesse) * .07));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.muenz-seite {
  container-type: inline-size;
  display: grid;
  place-items: center;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Feld: gedrehtes Metall (feine Kreisrillen), Licht schräg von links oben, ein Glanzpunkt */
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55) 0 4%, transparent 30%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .035) 0 .4cqw, rgba(0, 0, 0, .028) .4cqw .8cqw),
    linear-gradient(145deg, var(--hell), var(--mitte) 48%, var(--dunkel));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
/* Erhabener Rand: außen hell nach links oben, mit kleiner Fase */
.muenz-seite::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, color-mix(in oklab, var(--hell) 70%, #fff), var(--mitte) 45%, var(--dunkel) 90%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 86%, #000 87% 94.5%, transparent 95%);
  mask: radial-gradient(circle closest-side, transparent 0 86%, #000 87% 94.5%, transparent 95%);
  pointer-events: none;
}
/* Innenwand des Rands: im Licht verkehrt herum (oben links im Schatten) */
.muenz-wand {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--dunkel), var(--mitte) 55%, color-mix(in oklab, var(--hell) 70%, #fff));
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 83%, #000 84% 87%, transparent 87.5%);
  mask: radial-gradient(circle closest-side, transparent 0 83%, #000 84% 87%, transparent 87.5%);
  pointer-events: none;
}
.muenz-umschrift {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.muenz-umschrift text {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 5.6px;
  letter-spacing: .02em;
  fill: var(--schrift);
  opacity: .62;
}
.muenz-perlkreis { fill: none; stroke: var(--schrift); stroke-width: .9; stroke-dasharray: .1 2.2; stroke-linecap: round; opacity: .45; }
/* Riffelrand wie bei einer echten Münze: feine Kerben im äußersten Ring */
.muenz-seite::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(0, 0, 0, .2) 0 1.25deg, rgba(255, 255, 255, .28) 1.25deg 2.5deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 94.5%, #000 95.5%);
  mask: radial-gradient(circle closest-side, transparent 0 94.5%, #000 95.5%);
  pointer-events: none;
}
/* Lichtreflex: wischt einmal über die Münze, wenn sie aufsetzt */
.muenz-glanz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat;
  pointer-events: none;
}
.muenz-platz.gelandet .muenz-glanz { animation: muenz-glanz .9s .05s ease-out; }
.muenz-platz.fliegt .muenz-glanz { animation: muenz-blitz .26s linear infinite; }
@keyframes muenz-blitz { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes muenz-glanz { to { background-position: -40% 0; } }
/* Aufprall: ein Ring läuft auf dem Boden auseinander */
.muenz-aufprall {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -8%;
  height: 12%;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, .55);
  opacity: 0;
  pointer-events: none;
}
.muenz-platz.gelandet .muenz-aufprall { animation: muenz-aufprall .65s ease-out; }
@keyframes muenz-aufprall { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) {
  .muenz-platz.gelandet .muenz-glanz, .muenz-platz.gelandet .muenz-aufprall, .muenz-platz.fliegt .muenz-glanz { animation: none; }
}

.muenz-seite.vorne { transform: translateZ(calc(var(--muenz-groesse) * .036)); }
.muenz-seite.hinten { transform: rotateX(180deg) translateZ(calc(var(--muenz-groesse) * .036)); }
.muenz-seite img {
  position: absolute;
  inset: 22%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hell);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.muenz-text {
  position: relative;
  max-width: 58%;
  font-family: var(--schrift-titel);
  font-weight: 650;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--schrift);
  /* erhaben geprägt: Licht von links oben, Schatten nach rechts unten */
  text-shadow: -.35cqw -.35cqw 0 color-mix(in oklab, var(--hell) 60%, #fff), .45cqw .5cqw 0 color-mix(in oklab, var(--dunkel) 70%, transparent), .6cqw .8cqw 1.4cqw rgba(0, 0, 0, .18);
}
.muenz-text.mit-bild {
  position: absolute;
  bottom: 9%;
  max-width: 64%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hell);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  text-shadow: none;
}

.muenz-ergebnis {
  margin: 0;
  min-height: 1.15em;
  font-family: var(--schrift-titel);
  font-size: clamp(2.1rem, 9vw, 3.3rem);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.muenz-ergebnis.neu { animation: aufploppen .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes aufploppen { from { transform: scale(.5); opacity: 0; } }

.wurf-knopf {
  min-width: min(80vw, 300px);
  min-height: 60px;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.statistik {
  width: min(100%, 460px);
  display: grid;
  gap: 8px;
  font-weight: 550;
  color: var(--tusche-weich);
}
.statistik-balken {
  display: flex;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--papier-2);
  box-shadow: inset 0 2px 4px rgba(80, 60, 160, .1);
  color: var(--tusche);
  font-weight: 600;
}
.statistik-balken span {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: .85rem;
  white-space: nowrap;
  transition: flex-grow .4s ease;
}
/* Getönt statt satt: ein satter Verlaufsbalken las sich als zweiter Knopf unter „Werfen“. */
.statistik-balken .a { background: rgba(139, 92, 246, .2); color: #5b21b6; }
.statistik-balken .b { background: rgba(236, 72, 153, .18); color: #9d174d; box-shadow: -2px 0 0 rgba(255, 255, 255, .9); }
.statistik-zeile { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.statistik-zeile .knopf.leise { min-height: 28px; padding: 0 4px; font-size: .9rem; }
.verlauf-punkte { display: flex; flex-wrap: wrap; gap: 4px; }
.verlauf-punkte i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.verlauf-punkte i.a { background: var(--akzent); }
.verlauf-punkte i.b { background: var(--akzent-2); }

/* Werkbank: die zwei Seiten */
.seite-karte {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
}
.seite-karte .vorschau {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--rand, rgba(0, 0, 0, .2)), inset 0 0 0 6px rgba(255, 255, 255, .25), 0 3px 8px rgba(80, 60, 160, .22);
  background: var(--papier-2);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  overflow: hidden;
}
.seite-karte .vorschau.lang { font-size: .72rem; }
.seite-karte .knopf-reihe { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.material-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.material-wahl .schema-scheibe { box-shadow: inset -4px -4px 8px rgba(0, 0, 0, .2), 0 2px 6px rgba(80, 60, 160, .2); }
.eigene-farbe { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; }
.eigene-farbe input { width: 52px; height: 40px; border: 0; border-radius: 12px; padding: 3px; background: var(--flaeche); box-shadow: var(--schatten-klein); }

@media (min-width: 980px) {
  /* Statistik soll bei 900 px Höhe noch ins Bild passen. */
  .wurf-flaeche { --muenz-groesse: min(28vw, 28dvh, 280px); }
}
.seite-karte .feld-text { grid-area: auto; }

/* ---------- Handy quer: Wurffläche links, Ergebnis, Knopf und Statistik rechts ---------- */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-muenze {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    column-gap: 24px;
    row-gap: 10px;
    padding: 0 16px 8px;
  }
  .buehne-muenze { grid-template-rows: 1fr repeat(4, auto) 1fr; }
  .buehne-muenze > :first-child { grid-row: 1 / -1; grid-column: 1; }
  .buehne-muenze > :not(:first-child) { grid-column: 2; }
  .buehne-muenze > :nth-child(2) { grid-row: 2; }
  .buehne-muenze > :nth-child(3) { grid-row: 3; }
  .buehne-muenze > :nth-child(4) { grid-row: 4; }
  .buehne-muenze > :nth-child(5) { grid-row: 5; }
  .wurf-flaeche, .wurf-flaeche[data-anzahl] { --muenz-groesse: calc((100dvh - 90px) / 2.3); }
  .wurf-flaeche[data-anzahl="3"], .wurf-flaeche[data-anzahl="4"] { --muenz-groesse: calc((100dvh - 90px) / 3.6); }
}