/* ==========================================================================
   Münze – modul-spezifische Styles
   Alle Selektoren unter #view-coin. Die Münze ist 3D-CSS: gestapelte Scheiben
   bilden die Kante, zwei Seiten mit backface-visibility: hidden.
   Gold bleibt Gold (Materialfarbe) – nur Schatten & Bühne folgen dem Farbschema.
   ========================================================================== */

#view-coin {
  /* Flughöhe: Am Scheitelpunkt reicht die Münze bis 1,79 × ihre Größe über den Bühnenboden
     (0,1 Abstand + 1 Münze + 0,5 Anhebung + 0,18 Vergrößerung + Neigung in der Perspektive,
     siehe LIFT_Y/LIFT_SCALE in coin.js). Die Bühne ist 1,8 × so hoch – der ganze Flug bleibt in
     ihr: nie über den Tabs und nach revealStage nie über dem Bildschirmrand. */
  --coin-reach: 1.8;
  /* Unter der Bühne: 2 Abstände + Ergebnis + Hauptbutton (60px) + Luft */
  --coin-below: calc(2 * 20px + var(--result-h) + 60px + 16px);
  --coin-vh: 100vh;
  /* So groß, wie Breite und Höhe unter der App-Shell (--shell-h) es erlauben: Bühne, Ergebnis und
     Knopf passen auf den ersten Bildschirm (erst unterhalb der Mindestgröße nicht mehr). */
  --coin-size: clamp(
    132px,
    min(52vw, calc((var(--coin-vh) - var(--shell-h) - var(--coin-below)) / var(--coin-reach))),
    224px
  );
  --coin-thick: calc(var(--coin-size) * 0.078);

  --gold-hi: #fff4c7;
  --gold-1: #f9df86;
  --gold-2: #eec25a;
  --gold-3: #d9a53a;
  --gold-4: #b98420;
  --gold-5: #8c5f12;
  --gold-ink: #6b460a;

  --silver-1: #f5f3ef;
  --silver-2: #cfcabf;
  --silver-3: #8f897d;
  --silver-ink: #3f3a33;

  --coin-cast: rgb(29 27 34 / 0.36);
  --coin-glow: rgb(255 196 70 / 0.16);
  --coin-pulse: rgb(255 196 70 / 0.36); /* × 0,45 ≈ --coin-glow */
}

@media (prefers-color-scheme: dark) {
  #view-coin {
    --coin-cast: rgb(0 0 0 / 0.62);
    --coin-glow: rgb(255 196 70 / 0.1);
    --coin-pulse: rgb(255 196 70 / 0.23);
  }
}

/* svh (ohne ein- und ausfahrende Browserleisten), wo verfügbar – in Custom Properties greift die
   übliche vh-vor-svh-Rückfallebene nicht, daher per @supports */
@supports (height: 1svh) {
  #view-coin {
    --coin-vh: 100svh;
  }
}

/* ---------- Bühne ---------- */
#view-coin .coin-stage {
  min-height: calc(var(--coin-size) * var(--coin-reach));
  place-items: end center;
  padding-bottom: calc(var(--coin-size) * 0.1);
  /* revealStage lässt über der Bühne etwas Luft – auch unter einer Statusleiste */
  scroll-margin-top: max(8px, env(safe-area-inset-top));
  user-select: none;
  -webkit-user-select: none;
}

/* dezenter, warmer Lichtkegel unter der Münze */
#view-coin .coin-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--coin-size) * -0.1);
  width: min(calc(var(--coin-size) * 2.3), 100%); /* nie breiter als die Bühne (kein Querscrollen) */
  height: calc(var(--coin-size) * 1.3);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--coin-glow), transparent);
  pointer-events: none;
}

#view-coin .coin-hit {
  position: relative;
  width: var(--coin-size);
  height: var(--coin-size);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#view-coin .coin-stage.is-flipping .coin-hit {
  cursor: default;
}

/* Spannend-Modus: Ein zweiter Druck – auch auf die Münze – löst den Wurf auf */
#view-coin .coin-stage.is-skippable .coin-hit {
  cursor: pointer;
}

/* Spannend-Modus bei reduzierter Bewegung: Statt der Randdrehung pulsiert der Lichtkegel ruhig – nur
   Deckkraft, eine Welle in 2,6 s (kein Flackern). Er beginnt so hell wie der normale Lichtkegel. */
#view-coin .coin-stage.is-suspense::before {
  background: radial-gradient(closest-side, var(--coin-pulse), transparent);
  animation: coin-pulse 1.3s ease-in-out infinite alternate;
}

@keyframes coin-pulse {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

#view-coin .coin-hover {
  width: 100%;
  height: 100%;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  #view-coin .coin-stage:not(.is-flipping) .coin-hit:hover .coin-hover {
    transform: translateY(-4px) scale(1.02);
  }
}

#view-coin .coin-stage:not(.is-flipping) .coin-hit:active .coin-hover {
  transform: scale(0.97);
  transition-duration: var(--dur-fast);
}

/* Schatten auf dem „Tisch“ – Größe/Deckkraft setzt das Skript je nach Höhe */
#view-coin .coin-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -10%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--coin-cast), transparent);
  will-change: transform, opacity;
}

/* ---------- Münze (3D) ---------- */
#view-coin .coin-lift {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: calc(var(--coin-size) * 3.4);
  will-change: transform;
}

#view-coin .coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

#view-coin .coin-edge,
#view-coin .coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Kante: gestapelte Scheiben zwischen den beiden Seiten – jede sitzt mittig in ihrer Schicht,
   also knapp innerhalb der Seiten. Keine Scheibe liegt in derselben Ebene wie eine Seite
   (sonst Z-Fighting/Flackern in Safari). --n = Anzahl der Scheiben. */
#view-coin .coin-edge {
  transform: translateZ(calc(var(--coin-thick) * ((var(--i) + 0.5) / var(--n) - 0.5)));
  background: linear-gradient(180deg, var(--gold-2), var(--gold-4) 45%, var(--gold-5));
}

#view-coin .coin-face {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Riffelrand: feine Rillen + Rundung + Glanzlicht */
  background:
    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 0.5), transparent 46%),
    radial-gradient(circle, transparent 60%, rgb(120 78 10 / 0.35) 100%),
    /* 120 Rillen à 3° – die Periode muss 360° glatt teilen, sonst entsteht oben an der Naht
       (0°) ein doppelt breiter Streifen, der wie eine Lücke in der Riffelung aussieht. */
    repeating-conic-gradient(var(--gold-1) 0deg 1.5deg, var(--gold-4) 1.5deg 3deg);
  box-shadow:
    inset 0 0 0 1.5px var(--gold-5),
    inset 0 0 0 3px rgb(255 240 190 / 0.45);
}

#view-coin .coin-face--front {
  transform: translateZ(calc(var(--coin-thick) / 2));
}

#view-coin .coin-face--back {
  transform: rotateX(180deg) translateZ(calc(var(--coin-thick) / 2));
}

/* Randband: Genau von der Seite zeigen die gestapelten Scheiben nur dünne Linien mit Lücken dazwischen – und
   fast parallel zur Blickrichtung zeichnen Software-Renderer sie als riesige Keile. Dort blendet applyPose()
   dieses flache Band hinter der Münze ein (so breit und dick wie die Münze von der Seite, Klasse is-edge);
   ganz nah an der Kante ersetzt es die Scheiben (is-edge-only). Kein 3D: nichts schneidet sich (WebKit-sicher). */
#view-coin .coin-rim {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--coin-thick) / 2);
  height: var(--coin-thick);
  /* Farbe wie die Kanten der Scheiben von der Seite: bei 90° (+ k · 360°) zeigen sie ihr dunkles Ende … */
  background: linear-gradient(180deg, var(--gold-4), var(--gold-5));
  opacity: 0;
  pointer-events: none;
}

/* … bei 270° ihr helles – so springt die Farbe nicht, wenn das Band die Scheiben ablöst */
#view-coin .coin-lift.is-edge-light .coin-rim {
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
}

#view-coin .coin-lift.is-edge .coin-rim {
  opacity: 1;
}

#view-coin .coin-lift.is-edge-only .coin-edge {
  visibility: hidden;
}

/* vertieftes Feld innerhalb des erhabenen Rands */
#view-coin .coin-field {
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgb(255 250 225 / 0.75), transparent 58%),
    conic-gradient(
      from 210deg,
      #f7d676,
      #e2b041 18%,
      #fbe6a0 34%,
      #d7a43a 52%,
      #f5d06d 68%,
      #dcaa3f 84%,
      #f7d676
    );
  box-shadow:
    0 0 0 1.5px rgb(111 74 12 / 0.55),
    0 0 0 3px rgb(255 244 200 / 0.4),
    inset 0 3px 7px rgb(111 74 12 / 0.45),
    inset 0 -2px 4px rgb(255 248 220 / 0.55);
}

#view-coin .coin-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgb(255 248 220 / 0.75));
}

#view-coin .coin-art__beads {
  stroke: var(--gold-5);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  stroke-linecap: round;
}

#view-coin .coin-art__motif {
  stroke: var(--gold-5);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

#view-coin .coin-art__gem {
  fill: var(--gold-4);
  stroke-width: 0.6;
}

#view-coin .coin-art__stem {
  stroke: var(--gold-4);
  stroke-width: 1.1;
  stroke-linecap: round;
}

#view-coin .coin-art__leaf {
  stroke-width: 0.5;
}

/* ---------- Ergebnis ----------
   Wert und zwei unsichtbare Platzhalter (beide Seitennamen) liegen im selben Grid-Feld:
   Der Slot ist immer so hoch wie der längste Name (höchstens 2 Zeilen), die Detailzeile ist
   reserviert – so bleibt der Button beim Werfen und Aufdecken stehen. Wert und Hinweistext
   stehen oben im Slot, direkt unter „Ergebnis“ (wie in den anderen Werkzeugen). Lange Namen
   bekommen eine kleinere Schriftstufe (data-size, siehe resultSize() in coin.js). */
#view-coin .coin-result {
  --coin-rfs-l: clamp(1.6rem, 5.5vw, 2.6rem); /* wie .result__value */
  --coin-rfs-m: clamp(1.3rem, 4.4vw, 2.1rem);
  --coin-rfs-s: clamp(1.1rem, 3.6vw, 1.7rem);
}

#view-coin .coin-result__slot {
  display: grid;
  place-items: start center;
  max-width: 100%;
}

#view-coin .coin-result__slot > * {
  grid-area: 1 / 1;
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#view-coin .coin-result [data-size] {
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#view-coin .coin-result [data-size="l"] {
  font-size: var(--coin-rfs-l);
}

#view-coin .coin-result [data-size="m"] {
  font-size: var(--coin-rfs-m);
}

#view-coin .coin-result [data-size="s"] {
  font-size: var(--coin-rfs-s);
}

#view-coin .coin-result__ghost {
  visibility: hidden;
}

#view-coin .coin-result .result__detail {
  min-height: 1.5em;
}

/* Beschriftung auf der Münze (Nutzertext – nur per textContent gesetzt) */
#view-coin .coin-label {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 59%;
  height: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(var(--coin-size) * var(--fs, 0.15));
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-shadow:
    0 1px 0 rgb(255 246 210 / 0.8),
    0 -1px 0 rgb(100 62 5 / 0.25);
}

#view-coin .coin-label__text {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Licht: Glanz (zum Licht gekippt) und Schatten (weggekippt) – Deckkraft per Skript */
#view-coin .coin-gloss,
#view-coin .coin-shade,
#view-coin .coin-glint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

#view-coin .coin-gloss {
  opacity: 0;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.9), rgb(255 250 230 / 0.25) 45%, transparent 72%);
}

#view-coin .coin-shade {
  opacity: 0;
  background: radial-gradient(circle at 50% 30%, rgb(70 42 0 / 0.35), rgb(40 22 0 / 0.85));
}

/* Glanzstreif nach der Landung */
#view-coin .coin-glint {
  opacity: 0;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.8) 50%, transparent 62%);
  transform: translateX(-110%);
}

#view-coin .coin.is-glint .coin-glint {
  animation: coin-glint 850ms var(--ease-out) 40ms both;
}

@keyframes coin-glint {
  from {
    opacity: 1;
    transform: translateX(-110%);
  }
  to {
    opacity: 1;
    transform: translateX(110%);
  }
}

/* ---------- Panel: Münzseiten ---------- */
#view-coin .coin-settings .field__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#view-coin .coin-presets {
  margin-top: 16px;
}

#view-coin .coin-presets .seg__btn {
  padding-inline: 11px;
}

#view-coin .coin-same-hint {
  margin-top: 10px;
}

/* Farbcode der Seiten: Vorderseite gold, Rückseite silber */
#view-coin .coin-swatch {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

#view-coin .coin-swatch--front,
#view-coin .coin-history__item--front {
  --coin-rim: rgb(111 74 12 / 0.45);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold-2) 55%, var(--gold-4));
  box-shadow: inset 0 0 0 1px var(--coin-rim);
  color: var(--gold-ink);
}

#view-coin .coin-swatch--back,
#view-coin .coin-history__item--back {
  --coin-rim: rgb(60 55 48 / 0.35);
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--silver-2) 55%, var(--silver-3));
  box-shadow: inset 0 0 0 1px var(--coin-rim);
  color: var(--silver-ink);
}

/* ---------- Panel: Statistik ---------- */
#view-coin .coin-stat {
  min-width: 0;
}

#view-coin .coin-stat .stat__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

#view-coin .coin-stat__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-coin .coin-stat__pct {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Verteilung als geteilter Balken (nur transform animiert) */
#view-coin .coin-bar {
  position: relative;
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--silver-1), var(--silver-2));
  box-shadow: inset 0 0 0 1px rgb(60 55 48 / 0.18);
}

#view-coin .coin-bar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

#view-coin .coin-bar.is-empty {
  background: var(--surface-3);
  box-shadow: none;
}

#view-coin .coin-bar.is-empty .coin-bar__fill {
  opacity: 0;
}

#view-coin .coin-streak {
  margin: 10px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  /* Namen ohne Umbruchstelle (z. B. „WWWW…“) umbrechen statt über das Panel hinausragen */
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* „Werte für Kopf / Zahl“ – die Statistik gilt je Beschriftungspaar */
#view-coin .coin-stats-hint {
  margin-top: 8px;
  text-align: center;
  overflow-wrap: anywhere;
}

#view-coin .coin-history {
  gap: 6px;
}

/* Größe in rem: Münze und Kürzel wachsen bei größerer Schrift gemeinsam (nichts wird abgeschnitten) */
#view-coin .coin-history__item {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow: hidden;
}

/* Neuester Wurf: Akzentring mit schmalem Abstand – die runde Variante von .chip--latest */
#view-coin .coin-history__item.chip--latest {
  box-shadow:
    inset 0 0 0 1px var(--coin-rim),
    0 0 0 2px var(--surface),
    0 0 0 4px var(--accent);
}

#view-coin .coin-history__item.is-new {
  animation: chip-in var(--dur-slow) var(--ease-spring) both;
}

/* ---------- Kompaktes Querformat (Handy quer) ----------
   base.css stellt Ergebnis + Knopf neben die Bühne; die Bühne bekommt die ganze Höhe unter der
   App-Shell (--shell-h), und die Münze richtet sich allein nach dieser Höhe – mit derselben
   Flughöhe (--coin-reach) wie im Hochformat. */
@media (orientation: landscape) and (max-height: 540px) {
  #view-coin {
    --coin-stage-h: calc(var(--coin-vh) - var(--shell-h) - 16px);
    --coin-size: clamp(96px, calc(var(--coin-stage-h) / var(--coin-reach)), 224px);
  }

  #view-coin .coin-stage {
    min-height: var(--coin-stage-h);
  }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  #view-coin .coin-hover,
  #view-coin .coin-bar__fill {
    transition: none;
  }

  #view-coin .coin-stage:not(.is-flipping) .coin-hit:hover .coin-hover,
  #view-coin .coin-stage:not(.is-flipping) .coin-hit:active .coin-hover {
    transform: none;
  }

  #view-coin .coin.is-glint .coin-glint {
    animation: none;
  }

  #view-coin .coin-history__item.is-new {
    animation: fade-in 200ms ease both;
  }
}