/* tafel.css — Holzrahmen, Schiefertafel, Z-Notation, Bedienleiste.
   Referenzmasse 880×1240; proportionale Skalierung auf die iPad-Fläche
   über --scale (kein Scrollen). */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #14110c;
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Skalierungsfaktor: Tafel füllt die Hochformat-Fläche ohne zu scrollen. */
  --scale: min(
    calc(100vw / var(--tafel-w)),
    calc(100dvh / var(--tafel-h))
  );
}

@supports not (height: 100dvh) {
  #app {
    --scale: min(
      calc(100vw / var(--tafel-w)),
      calc(var(--app-h, 100vh) / var(--tafel-h))
    );
  }
}

/* ---------- Holzrahmen ---------- */
.holzrahmen {
  position: relative;
  width: var(--tafel-w);
  height: var(--tafel-h);
  flex: none;
  padding: var(--sp-60);
  border-radius: var(--radius-holz);
  background: repeating-linear-gradient(
    90deg,
    var(--holz-hell) 0px,
    var(--holz-hell) 3px,
    var(--holz-dunkel) 3px,
    var(--holz-dunkel) 6px
  );
  box-shadow: var(--shadow-holz), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: scale(var(--scale));
  transform-origin: center center;
}

.zierrahmen {
  position: absolute;
  pointer-events: none;
}
.zierrahmen--rund {
  inset: 22px;
  border: 1px solid var(--rahmen-linie-1);
  border-radius: var(--radius-zierrahmen);
}
.zierrahmen--eckig {
  inset: 44px;
  border: 1px solid var(--rahmen-linie-2);
}

/* Rahmenmarken = Strich-Total pro Partei (echte Daten, kein Dekor) */
.rahmenmarke {
  position: absolute;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  --strich-farbe: var(--rahmen-schrift);
}
.rahmenmarke--b {
  top: 14px;
  right: 34px;
}
.rahmenmarke--a {
  bottom: 14px;
  left: 34px;
}
.rahmenmarke .strich {
  height: 32px;
}
.rahmenmarke .querstrich {
  left: -6px;
  width: calc(100% + 12px);
}

/* ---------- Schiefertafel ---------- */
.schiefer {
  position: relative;
  height: 100%;
  border-radius: var(--radius-tafel);
  background: var(--schiefer);
  box-shadow: var(--shadow-tafel-innen), 0 2px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Tafelhälfte ---------- */
.tafelhaelfte {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 0;
}
.tafelhaelfte--b {
  transform: rotate(180deg);
}

.notation {
  position: relative;
  width: 740px;
  height: 440px;
  color: var(--kreide);
}

.z-linie {
  position: absolute;
  height: 2px;
  background: var(--kreide-linie);
}
.z-linie--oben {
  left: 40px;
  right: 40px;
  top: 20px;
}
.z-linie--unten {
  left: 40px;
  right: 40px;
  top: 420px;
}
.z-linie--diagonale {
  left: 40px;
  top: 420px;
  width: 772px;
  transform-origin: 0 50%;
  transform: rotate(-31.2deg);
}

.gruppe-xv {
  position: absolute;
  top: -1px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 40px/1 var(--font-cond);
  color: var(--kreide);
}
.notation--a .gruppe-xv {
  right: 40px;
}
.notation--b .gruppe-xv {
  left: -4px;
}

.reihe {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 18px;
}
.reihe--100 {
  left: 56px;
  top: -1px;
  height: 44px;
}
.reihe--50 {
  left: 40px;
  top: 420px;
  width: 772px;
  height: 44px;
  transform-origin: 0 0;
  transform: rotate(-31.2deg) translateY(-22px);
  padding-left: 230px;
}
.reihe--20 {
  left: 230px;
  top: 399px;
  height: 44px;
}
.rest {
  position: absolute;
  right: 40px;
  top: 198px;
  font: 600 34px/1 var(--font-cond);
  color: var(--kreide);
}

/* ---------- Kreidestriche ---------- */
.gruppe {
  position: relative;
  display: flex;
  gap: var(--strich-gap);
}
.strich {
  width: var(--strich-breite);
  height: var(--strich-hoehe);
  background: var(--strich-farbe, var(--kreide));
  transform: rotate(var(--strich-neigung));
}
.reihe--50 .strich {
  height: var(--strich-hoehe-50);
}
.querstrich {
  position: absolute;
  left: -7px;
  top: 50%;
  width: calc(100% + 14px);
  height: 3px;
  background: var(--strich-farbe, var(--kreide));
  transform: translateY(-50%) rotate(var(--querstrich-neigung));
}
.querstrich--doppelt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: translateY(6px);
}

/* ---------- Bedienleiste (Vorder- und Rückseite identisch) ---------- */
.bedienleiste {
  flex: none;
  background: var(--leiste-grund);
  border-top: 1px solid rgba(233, 232, 220, 0.18);
  border-bottom: 1px solid rgba(233, 232, 220, 0.18);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  width: 62px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-stark);
  background: var(--bedienflaeche);
  color: var(--kreide);
  font-size: 22px;
  border-radius: 0;
  cursor: pointer;
}
.icon-btn:active {
  background: #1b1f22;
}
.hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}
.hamburger-bars span {
  height: 2px;
  background: var(--kreide);
}

/* Trumpf-Combobox in der Leiste (dunkel) */
.trump-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--hairline-stark);
  background: var(--bedienflaeche);
  color: var(--kreide);
  font-size: 17px;
  cursor: pointer;
  flex: none;
}
.trump-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 30px/1 sans-serif;
  -webkit-text-stroke: 1.8px var(--kreide);
  color: var(--kreide);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.faktor-badge {
  padding: 4px 9px;
  background: var(--kreide);
  color: var(--leiste-grund);
  font-size: 14px;
  pointer-events: none;
}
.caret {
  font-size: 12px;
  color: rgba(233, 232, 220, 0.6);
  pointer-events: none;
}

.trump-dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 150px;
  background: var(--bedienflaeche);
  border: 1px solid var(--hairline-stark);
  z-index: 6;
}
.trump-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(233, 232, 220, 0.14);
  color: var(--kreide);
  cursor: pointer;
}
.trump-option:last-child {
  border-bottom: none;
}
.trump-option[aria-selected="true"] {
  background: var(--akzent);
  color: var(--papier);
}
.trump-option .trump-icon {
  width: 28px;
  height: 28px;
  font-size: 22px;
  -webkit-text-stroke-width: 1.4px;
  -webkit-text-stroke-color: currentColor;
  color: currentColor;
}

/* Doppelte Punktezeile */
.punktezeile {
  flex: 1;
  min-width: 210px;
  text-align: left;
}
.punktezeile__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  white-space: nowrap;
  font: italic 600 19px/1.2 var(--font-cond);
  color: var(--kreide);
}
.punktezeile__row--gedreht {
  transform: rotate(180deg);
}
.punktezeile__row--links {
  justify-content: flex-start;
}
.punktezeile__sep {
  height: 1px;
  background: rgba(233, 232, 220, 0.22);
  margin: 8px 0;
}

.hidden {
  display: none !important;
}

/* Hochformat erzwingen: im Querformat nur ein Hinweis. */
.rotate-hint {
  display: none;
}
@media (orientation: landscape) {
  #app {
    display: none;
  }
  .rotate-hint {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    background: var(--schiefer);
    color: var(--kreide);
    font: 600 26px/1.4 var(--font-cond);
  }
}