/* =====================================================================
   MAX – Coin mit Fortschrittsring (geteilte Komponente)
   ---------------------------------------------------------------------
   Runde „Münze“ mit der bestehenden Max-Figur (MaxCharacter) im Zentrum
   und einem animierbaren SVG-Fortschrittsring außen herum.

   Alles ist unter .max-coin gescoped – keine globalen Seiteneffekte.
   Zustände werden als Modifikator-Klasse am Wurzelelement gesetzt:

     .max-coin--ready      ruhiger, schwacher Ring
     .max-coin--detected   kurzer cyanfarbener Impuls
     .max-coin--scanning   umlaufender Scanner
     .max-coin--segments   segmentierter Fortschritt
     .max-coin--active     aktiver Datenring (Embedding-Simulation)
     .max-coin--warning    bernsteinfarben
     .max-coin--error      rot und unterbrochen
     .max-coin--complete   vollständig geschlossener Teal-Ring

   Farbsteuerung über --coin-accent; Fortschritt über stroke-dashoffset
   (per JS, max-coin.js). Erstverwendung: /max/embedding-engine/.
   Vorbereitet für spätere Übernahme in den Max System Scan.
   ===================================================================== */

.max-coin{
  --coin-accent: #12c5bc;          /* Teal – Max-Standard             */
  --coin-track:  rgba(255,255,255,.10);
  --coin-face-1: #131a26;
  --coin-face-2: #0a0f1a;
  --coin-rim-1:  #f6d996;          /* Messing hell                    */
  --coin-rim-2:  #d9a441;          /* Messing                        */
  --coin-rim-3:  #8a5a1e;          /* Messing dunkel                 */

  position:relative;
  display:inline-block;
  width:var(--coin-size, 180px);
  /* Quadratisches Verhältnis direkt am Element: robust gegen Seiten-
     Resets wie „*::before{padding:0}“, die den früheren padding-top-
     Trick neutralisiert haben (Live-Fehler: Coin kollabierte auf 0 px
     Höhe, nur das Prozentbadge blieb sichtbar). */
  aspect-ratio:1 / 1;
}

/* Ring-SVG liegt über allem, ist aber rein dekorativ */
.max-coin__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  transform:rotate(-90deg);        /* 0 % beginnt oben               */
  pointer-events:none;
}
.max-coin__track{
  fill:none;
  stroke:var(--coin-track);
  stroke-width:5;
}
.max-coin__bar{
  fill:none;
  stroke:var(--coin-accent);
  stroke-width:5;
  stroke-linecap:round;
  transition:stroke .45s ease, opacity .45s ease;
  filter:drop-shadow(0 0 6px var(--coin-accent));
}
/* Scanner-Segment: kurzer Bogen, der umläuft (nur --scanning) */
.max-coin__scanner{
  fill:none;
  stroke:var(--coin-accent);
  stroke-width:5;
  stroke-linecap:round;
  opacity:0;
  filter:drop-shadow(0 0 8px var(--coin-accent));
  transform-origin:50% 50%;
}

/* Münzkörper: Messing-Rand + dunkle Fläche, Max sitzt in der Mitte */
.max-coin__body{
  position:absolute;
  inset:9%;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, var(--coin-rim-1), var(--coin-rim-2) 55%, var(--coin-rim-3) 100%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.35);
}
.max-coin__face{
  position:absolute;
  inset:6%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, var(--coin-face-1), var(--coin-face-2) 75%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
/* Max-Figur füllt die Münzfläche, leicht nach unten versetzt,
   damit der Helm mittig wirkt */
.max-coin__mount{
  width:82%;
  transform:translateY(4%);
}

/* Fallback für Browser ohne aspect-ratio: padding-Trick, per !important
   gegen generische Seiten-Resets (*::before{padding:0}) abgesichert */
@supports not (aspect-ratio: 1){
  .max-coin::before{
    content:''; display:block; padding-top:100% !important;
  }
}

/* Prozentanzeige unter der Münze */
.max-coin__pct{
  position:absolute;
  left:50%; bottom:-8%;
  transform:translateX(-50%);
  font-family:'Courier Prime','Courier New',Courier,monospace;
  font-size:clamp(11px, calc(var(--coin-size,180px) * .085), 17px);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--coin-accent);
  background:rgba(7,9,12,.85);
  border:1px solid color-mix(in srgb, var(--coin-accent) 45%, transparent);
  border-radius:100px;
  padding:.2em .8em;
  white-space:nowrap;
  transition:color .45s ease, border-color .45s ease;
  text-shadow:0 0 8px color-mix(in srgb, var(--coin-accent) 60%, transparent);
}
/* Fallback für Browser ohne color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .max-coin__pct{ border-color:var(--coin-accent); }
}

/* ── Zustände ─────────────────────────────────────────────────────── */
.max-coin--ready    { --coin-accent:#12c5bc; }
.max-coin--ready .max-coin__bar{ opacity:.35; filter:none; }

.max-coin--detected { --coin-accent:#38e1ff; }
.max-coin--detected .max-coin__body{ animation:maxCoinPulse .9s ease-out 1; }

.max-coin--scanning { --coin-accent:#38e1ff; }
.max-coin--scanning .max-coin__bar{ opacity:.25; }
.max-coin--scanning .max-coin__scanner{
  opacity:1;
  animation:maxCoinOrbit 1.6s linear infinite;
}

.max-coin--segments { --coin-accent:#12c5bc; }
.max-coin--segments .max-coin__bar{
  stroke-dasharray:none; /* wird per JS segmentiert gesetzt */
}

.max-coin--active   { --coin-accent:#12c5bc; }
.max-coin--active .max-coin__bar{
  filter:drop-shadow(0 0 6px var(--coin-accent)) drop-shadow(0 0 14px var(--coin-accent));
}

.max-coin--warning  { --coin-accent:#f5b32b; }
.max-coin--error    { --coin-accent:#ff5d5d; }
.max-coin--error .max-coin__bar{
  stroke-dasharray:10 14 !important;   /* unterbrochener Ring */
  filter:none;
}
.max-coin--complete { --coin-accent:#12c5bc; }
.max-coin--complete .max-coin__bar{
  filter:drop-shadow(0 0 8px var(--coin-accent)) drop-shadow(0 0 18px var(--coin-accent));
}

@keyframes maxCoinOrbit{ to{ transform:rotate(360deg); } }
@keyframes maxCoinPulse{
  0%  { box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 0 rgba(56,225,255,.55); }
  100%{ box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 26px rgba(56,225,255,0); }
}

/* ── Bewegungsreduktion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .max-coin--scanning .max-coin__scanner{ animation:none; opacity:.8; }
  .max-coin--detected .max-coin__body{ animation:none; }
}