/* ==========================================================================
   Idhu Enna? Round Timer — Layout und Zustaende
   Fast alle visuellen Unterschiede haengen an [data-phase] auf #app. Nur
   Werte, die sich laufend aendern (Uhrzeit, Sandhoehe, Punkte, Labels),
   setzt js/app.js. Struktur und Reihenfolge folgen Sand Dice.dc.html.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-subset.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito-subset.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;      /* verhindert Chrome-Android "Pull to Refresh" */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 900;
  color: var(--ink);
  background: var(--ground-normal);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;     /* kein Doppeltipp-Zoom */
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0;
         cursor: pointer; touch-action: manipulation; }
input  { font: inherit; color: inherit; }
img    { display: block; }
p      { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Tap-Ziele: die sichtbare Groesse folgt dem Design und skaliert mit --u,
   die Trefferflaeche bleibt aber immer mindestens 48 x 48 CSS-Pixel.
   Auf einem 360-px-Android waeren 48 Design-Pixel sonst nur 43 echte. */
.tap { position: relative; transition: transform .09s ease; }
.tap::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 48px); height: max(100%, 48px);
  transform: translate(-50%, -50%);
}
.tap:active { transform: scale(.94); }
.tap[disabled], .tap[aria-disabled="true"] { cursor: default; }
.tap[disabled]:active, .tap[aria-disabled="true"]:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tap { transition: none; }
  .tap:active { transform: none; }
}

/* --- Buehne -------------------------------------------------------------- */

#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--ground-normal);
}
#app[data-phase="alarm"] { background: var(--ground-alarm); }
#app[data-phase="over"]  { background: var(--ground-over); }

/* Sand: laeuft im Teamfarbton von oben nach unten leer. --fill-h kommt aus JS. */
.sand { position: absolute; inset: 0; pointer-events: none; }
.sand__fill { position: absolute; left: 0; right: 0; top: 0; height: var(--fill-h);
              background: var(--team); }
/* Bewusste Abweichung vom Export: dort ist die Sandkante eine 6 px starke
   deckende Linie. Als Fuellstand, der die ganze Runde ueber sichtbar
   mitwandert, war sie zu schwer. Jetzt fein und gestrichelt -- sie zeigt
   den Stand an, ohne den Bildschirm zu teilen. */
.sand__edge {
  position: absolute; left: 0; right: 0; top: var(--fill-h);
  height: var(--edge-h); opacity: .55;
  background: repeating-linear-gradient(to right,
    var(--ink) 0 calc(11 * var(--u)),
    transparent calc(11 * var(--u)) calc(19 * var(--u)));
}

#app[data-phase="idle"]   .sand__fill,
#app[data-phase="rolling"] .sand__fill { background: transparent; }
#app[data-phase="alarm"]  .sand__fill { background: var(--pink); }
#app[data-phase="skip"]   .sand__fill { background: var(--wash-skip); }

#app[data-phase="idle"]    .sand__edge,
#app[data-phase="rolling"] .sand__edge,
#app[data-phase="rolled"]  .sand__edge,
#app[data-phase="skip"]    .sand__edge { opacity: 0; }

.screen {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-block-start: max(var(--pad-top),    calc(env(safe-area-inset-top)    + 12 * var(--u)));
  padding-block-end:   max(var(--pad-bottom), calc(env(safe-area-inset-bottom) + 12 * var(--u)));
  padding-inline-start: max(var(--pad-x), env(safe-area-inset-left));
  padding-inline-end:   max(var(--pad-x), env(safe-area-inset-right));
}

.pane { display: contents; }   /* nur im Querformat echte Spalten, siehe unten */

/* --- Kopfzeile ----------------------------------------------------------- */

.bar { display: flex; align-items: center; gap: var(--gap-bar);
       height: var(--ctl); flex: none; }

.chip {
  flex: 1; min-width: 0; height: var(--ctl); border-radius: var(--r-pill);
  padding-inline: calc(14 * var(--u));
  display: flex; align-items: center; gap: var(--gap-chip);
  background: transparent; border: var(--bw-2) solid var(--ink-25);
  color: var(--ink-50);
}
#app:not([data-phase="idle"]):not([data-phase="rolling"]) .chip {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.chip__icon { flex: none; width: var(--icon-22); height: var(--icon-22); display: none; }
.chip__icon img { width: 100%; height: 100%; object-fit: contain; }
#app:not([data-phase="idle"]):not([data-phase="rolling"]) .chip__icon { display: block; }
.chip__label {
  flex: 1; min-width: 0; font-size: var(--fs-chip); font-weight: 900;
  letter-spacing: calc(1.2 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bar__utils { flex: none; display: flex; gap: var(--gap-utils); }
.ub {
  width: var(--ctl); height: var(--ctl); border-radius: var(--r-pill);
  display: grid; place-items: center; flex: none;
  border: var(--bw-2) solid var(--ink-50); color: var(--ink-80);
}
.ub--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ub--new { font-size: var(--fs-new); font-weight: 900; letter-spacing: calc(.4 * var(--u)); }
.ub svg { width: var(--icon-22); height: var(--icon-22); }
/* Stummschaltung sichtbar machen, ohne das Design zu verlassen */
.ub--solid[aria-pressed="true"] { background: transparent; color: var(--ink-50);
                                  border-color: var(--ink-25); }

/* --- Wer ist dran, Uhr ---------------------------------------------------- */

.turn { flex: none; margin-top: var(--mt-turn);
        display: flex; flex-direction: column; align-items: center; }
.turn__label {
  font-size: var(--fs-turn); font-weight: 900; letter-spacing: calc(1.8 * var(--u));
  white-space: nowrap; color: var(--ink-65);
}
.clock {
  margin-top: var(--mt-clock); font-family: var(--font-display); font-weight: 400;
  font-size: var(--clock-run); line-height: 1; letter-spacing: var(--clock-track);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
#app[data-phase="idle"]    .clock,
#app[data-phase="rolling"] .clock,
#app[data-phase="skip"]    .clock { font-size: var(--clock-pre); opacity: .6; }
#app[data-phase="alarm"]   .clock { font-size: var(--clock-alarm); }
#app[data-phase="over"]    .clock,
#app[data-phase="over"]    .turn__label { color: var(--pink); }

/* --- Der Kreis: Wuerfel, Ergebnis, Buzzer --------------------------------- */

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column;
         align-items: center; justify-content: center; gap: var(--gap-stage); }
/* Basis statt flex:1 — dadurch zentriert die Buehne die Gruppe aus Kreis und
   "ROLL AGAIN" wie im Export, und der Kreis schrumpft erst, wenn es eng wird. */
.stage__slot { flex: 0 1 var(--hero); min-height: 0; width: 100%;
               display: grid; place-items: center; }

.hero {
  height: 100%; max-width: 100%; aspect-ratio: 1;
  border-radius: 50%; border: var(--hero-border) solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(10 * var(--u));
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-hero);
  container-type: size;           /* Inhalt skaliert mit dem Kreis, nicht mit --u */
  transition: transform .09s ease, box-shadow .09s ease;
}
.hero:active {
  transform: translateY(calc(5 * var(--u)));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
}
#app[data-phase="run"]  .hero,
#app[data-phase="over"] .hero,
#app[data-phase="skip"] .hero { background: var(--pink); }
#app[data-phase="alarm"] .hero { color: var(--pink); box-shadow: var(--shadow-alarm); }
#app[data-phase="alarm"] .hero:active { box-shadow: var(--shadow-alarm); }
#app[data-phase="over"]  .hero { color: var(--paper-40); box-shadow: none; }
#app[data-phase="over"]  .hero:active { box-shadow: none; }
#app[data-phase="skip"]  .hero { color: var(--ink); }

/* Nur der eine passende Inhalt ist sichtbar */
.hero__die, .hero__cycle, .hero__face { display: none; }
#app[data-phase="idle"]    .hero__die   { display: grid; }
#app[data-phase="rolling"] .hero__cycle { display: flex; }
#app[data-phase="rolled"]  .hero__face,
#app[data-phase="skip"]    .hero__face  { display: flex; }

/* Der gezeichnete Wuerfel im Ruhezustand — 96/236 der Kreisbreite */
.hero__die {
  width: 40.678cqmin; height: 40.678cqmin; border-radius: 9.322cqmin;
  border: 2.542cqmin solid var(--paper);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 4.661cqmin;
}
.hero__die i { display: block; width: 6.356cqmin; height: 6.356cqmin;
               border-radius: 50%; background: var(--paper); }
.hero__die span { display: grid; }
.hero__die span:nth-child(5) { place-items: center; }
.hero__die span:nth-child(9) { place-items: end; }

/* Der laufende Wurf */
.hero__cycle { align-items: center; gap: 6.780cqmin; height: 22.881cqmin; }
.hero__cycle img { width: 16.949cqmin; height: 16.949cqmin;
                   animation: diceCycle var(--cycle) steps(1, end) infinite; }
.hero__cycle img:nth-child(2) { animation-delay: calc(var(--cycle) / 3); }
.hero__cycle img:nth-child(3) { animation-delay: calc(var(--cycle) / 3 * 2); }
@keyframes diceCycle {
  0%, 26%   { opacity: 1;   transform: scale(1.18); }
  33%, 100% { opacity: .22; transform: scale(.86); }
}

/* Das gewuerfelte Ergebnis */
.hero__face { align-items: center; justify-content: center;
              width: 38.983cqmin; height: 38.983cqmin; }
.hero__face img { width: 100%; height: 100%; object-fit: contain; }

.hero__text {
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  text-align: center; letter-spacing: .212cqmin;
  font-size: 12.712cqmin;                       /* Ergebnis-Label, 30/236 */
}
#app[data-phase="idle"]    .hero__text { font-size: 14.407cqmin; letter-spacing: .424cqmin; }
#app[data-phase="rolling"] .hero__text { font-size: 11.017cqmin; }
#app[data-phase="run"]     .hero__text,
#app[data-phase="alarm"]   .hero__text,
#app[data-phase="over"]    .hero__text { font-size: 20.339cqmin; letter-spacing: .847cqmin; }
#app[data-face="double"][data-phase="rolled"] .hero__text { font-size: 10.593cqmin; }
#app[data-phase="skip"]    .hero__text { font-size: 11.864cqmin; }

.stage__reroll { height: var(--reroll-h); flex: none; display: grid; place-items: center; }
.reroll {
  height: var(--reroll-h); border-radius: var(--r-pill);
  padding-inline: calc(22 * var(--u));
  display: flex; align-items: center; gap: calc(9 * var(--u));
  border: var(--bw-3) solid var(--ink-45);
  font-size: var(--fs-reroll); font-weight: 900; letter-spacing: calc(1 * var(--u));
  color: var(--ink-80);
}
.reroll svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
/* Neuwurf auch nach "Miss your turn" -- ein Fehlwurf muss sich korrigieren
   lassen, solange die Runde nicht laeuft. */
.stage__reroll { visibility: hidden; }
#app[data-phase="rolled"] .stage__reroll,
#app[data-phase="skip"]   .stage__reroll { visibility: visible; }

/* --- Punktestand ---------------------------------------------------------- */

.scores { flex: none; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.row { display: flex; align-items: center; gap: var(--gap-row); padding-block: calc(6 * var(--u)); }
.row[data-team="1"] { border-bottom: var(--bw-2) solid var(--ink-18); }

.row__pill {
  flex: none; width: var(--pill-w); height: var(--pill-h); border-radius: var(--r-pill);
  border: var(--bw-2) solid var(--ink-55);
}
.row[data-team="1"] .row__pill { background: var(--teal); }
.row[data-team="2"] .row__pill { background: var(--yellow); }
/* Wenn der Sand die Zeilen erreicht, darf keine Team-Kapsel auf ihrer
   eigenen Farbe sitzen — sie kippt dann auf Dunkel. */
#app[data-covered="1"][data-active="1"]:not([data-phase="alarm"]):not([data-phase="skip"])
  .row[data-team="1"] .row__pill { background: var(--ink); }
#app[data-covered="1"][data-active="2"]:not([data-phase="alarm"]):not([data-phase="skip"])
  .row[data-team="2"] .row__pill { background: var(--ink); }

.row__namewrap { flex: 1; min-width: 0; }
.row__name {
  width: 100%; min-width: 0; display: block;
  font-family: var(--font-ui); font-weight: 900;
  /* Bewusste Abweichung vom Export (dort 14 px): iOS zoomt beim Fokussieren
     automatisch in jedes Eingabefeld unter 16 px. Das Layout wuerde beim
     Antippen wegspringen und muesste beim Verlassen zurueckzoomen. Zwei
     Pixel Abweichung an einem Label sind der kleinere Preis. */
  font-size: max(16px, var(--fs-name));
  letter-spacing: calc(.6 * var(--u)); text-transform: uppercase;
  padding: calc(3 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u));
  border: 0; border-bottom: var(--bw-2) solid transparent;
  border-radius: var(--r-name); background: transparent;
  color: var(--ink-50); text-overflow: ellipsis;
  outline: none; -webkit-user-select: text; user-select: text;
}
#app:not([data-phase="over"])[data-active="1"] .row[data-team="1"] .row__name,
#app:not([data-phase="over"])[data-active="2"] .row[data-team="2"] .row__name { color: var(--ink); }
/* Umbenennen ist nur vor dem Rundenstart erlaubt — dann zeigt die
   gestrichelte Linie, dass das Feld anfassbar ist. */
#app[data-phase="idle"]    .row__name,
#app[data-phase="rolling"] .row__name { border-bottom-color: var(--ink-28);
                                        border-bottom-style: dashed; }
.row__name:focus { border-bottom-style: solid; border-bottom-color: var(--ink); }
.row[data-team="1"] .row__name:focus { background: var(--tint-team1); }
.row[data-team="2"] .row__name:focus { background: var(--tint-team2); }
.row__name[readonly] { cursor: default; }

.row__score {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-score);
  line-height: .9; color: var(--ink); min-width: calc(44 * var(--u)); text-align: right;
  font-variant-numeric: tabular-nums;
}
.minus {
  flex: none; width: var(--ctl); height: var(--ctl); border-radius: var(--r-minus);
  border: var(--bw-2) solid var(--ink-35);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-minus); color: var(--ink-65);
}
.plus {
  flex: none; width: var(--plus-w); height: var(--plus-h); border-radius: var(--r-btn);
  background: var(--ink); display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-plus); color: var(--paper);
}

/* Nur das Team, das dran ist, kann Punkte bekommen. Die Zeile des anderen
   Teams bleibt sichtbar, tritt aber zurueck -- gleiche Abstufung, die der
   Export schon fuer den inaktiven Teamnamen benutzt. */
.plus[disabled]  { background: var(--ink-20); color: var(--paper); }
.minus[disabled] { border-color: var(--ink-12); color: var(--ink-25); }

/* --- Hauptbedienung ------------------------------------------------------- */

.controls { flex: none; margin-top: var(--mt-ctl); display: flex; gap: var(--gap-ctl); }
.btn { height: var(--btn-h); border-radius: var(--r-btn); display: grid; place-items: center;
       font-weight: 900; text-align: center; }
.btn--primary {
  flex: 1; min-width: 0; font-size: var(--fs-primary); letter-spacing: calc(1.4 * var(--u));
  background: var(--ink); color: var(--paper); border: 0;
}
#app[data-phase="rolling"] .btn--primary { background: var(--ink-50); }
#app[data-phase="skip"] .btn--primary {
  background: transparent; color: var(--ink-35); border: var(--bw-3) solid var(--ink-20);
}
.btn--next {
  flex: none; width: var(--next-w); font-size: var(--fs-next); letter-spacing: calc(1 * var(--u));
  background: transparent; color: var(--ink-80); border: var(--bw-3) solid var(--ink-40);
}
#app[data-phase="over"] .btn--next,
#app[data-phase="skip"] .btn--next { background: var(--ink); color: var(--paper);
                                     border-color: var(--ink); }

/* --- Buzz: Vollbild-Unterbrechung ----------------------------------------- */

.buzz {
  position: absolute; inset: 0; background: var(--pink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(20 * var(--u)); z-index: 3;
}
.buzz[hidden] { display: none; }
.buzz__circle {
  width: min(var(--hero), 46dvh); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center;
}
/* Im Export ist das Kreuz 118 px in einem 236-px-Kreis, also die halbe
   Kreisbreite. Der Pfad spannt die halbe viewBox, darum 86 % Kantenlaenge. */
.buzz__circle svg { width: 86%; height: 86%; color: var(--pink); }
.buzz__word {
  font-family: var(--font-display); font-weight: 400; font-size: calc(60 * var(--u));
  letter-spacing: calc(4 * var(--u)); color: var(--ink);
}

/* Kurzer visueller Blitz beim Buzzer */
.flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0;
         pointer-events: none; z-index: 4; }
.flash--on { animation: flash .26s ease-out; }
@keyframes flash { from { opacity: .92; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .flash--on { animation-duration: .5s; }
}

/* --- Querformat: nicht das Ziel, muss aber benutzbar bleiben --------------- */

@media (orientation: landscape) {
  :root { --u: min(calc(100vw / 820), calc(100dvh / 470), 1.12px); }

  .screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "bar bar" "left right";
    column-gap: calc(26 * var(--u));
    row-gap: calc(10 * var(--u));
  }
  .bar { grid-area: bar; }
  .pane--left  { grid-area: left;  display: flex; flex-direction: column; min-height: 0; }
  .pane--right { grid-area: right; display: flex; flex-direction: column;
                 justify-content: center; min-height: 0; }
  .turn { margin-top: calc(6 * var(--u)); }
  .controls { margin-top: calc(12 * var(--u)); }
}