/* „Durchschaut“ – Zahlenseite fürs Handy. Farben wie der Kartenrücken „Nacht“. */

@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/HankenGrotesk-500.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("fonts/HankenGrotesk-600.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 800; font-display: swap; src: url("fonts/HankenGrotesk-800.ttf") format("truetype"); }

:root {
  --nacht: #1f2226;
  --taste: #2b2f35;
  --linie: #30353c;
  --creme: #f3ede4;
  --grau: #8c9096;
  --akzent: #e07a3f;
  --text: #1d1d1f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--nacht);
  color: var(--creme);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

.ansicht {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
}
body[data-zustand="eingabe"] .eingabe,
body[data-zustand="verdeckt"] .verdeckt,
body[data-zustand="offen"] .offen { display: flex; }

.kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--grau); font-weight: 600;
}
.kopf .auge { width: 20px; height: 12px; color: var(--creme); }

.strich { width: 34px; height: 3px; background: var(--akzent); margin: 8px auto 0; border-radius: 2px; }
.strich.breit { width: 56px; height: 4px; margin-top: 18px; }

/* 1 · Eingeben */
.label { text-align: center; color: var(--grau); font-size: 14px; margin-top: 5vh; letter-spacing: .04em; }
.zahl {
  display: block; text-align: center; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-size: clamp(56px, 18vw, 92px); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.zahl.leer { color: #4a4f57; }
.tasten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: auto; padding-top: 22px;
}
.tasten button {
  height: clamp(52px, 8.5vh, 68px); border-radius: 16px; background: var(--taste);
  font-size: 24px; font-weight: 600;
}
.tasten button:active { background: #3a3f47; }
.tasten button.leise { color: var(--grau); font-size: 18px; }
.knopf {
  margin-top: 14px; height: 58px; border-radius: 18px; background: var(--akzent);
  color: var(--nacht); font-weight: 800; font-size: 19px;
}
.knopf:disabled { background: #3a2d25; color: #6b5a4f; cursor: default; }
.hinweis { text-align: center; color: #5d636b; font-size: 12px; margin-top: 12px; }

/* 2 · Verdeckt */
.verdeckt { position: relative; padding: 0; max-width: none; overflow: hidden; cursor: pointer; }
.nacht { position: absolute; inset: 0; width: 100%; height: 100%; }
.verdeckt-text {
  position: absolute; left: 0; right: 0; top: calc(41.25% + 120px); text-align: center;
}
.verdeckt-text .marke { font-weight: 800; font-size: 34px; letter-spacing: -.02em; }
.verdeckt-text .zustand { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grau); margin-top: 8px; }
.verdeckt-fuss {
  position: absolute; left: 0; right: 0; bottom: max(30px, env(safe-area-inset-bottom)); text-align: center;
}
.verdeckt-fuss .tippen { font-size: 16px; font-weight: 600; }
.verdeckt-fuss .spicken-hinweis { font-size: 12.5px; color: var(--grau); margin-top: 6px; }
.spicken {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(31, 34, 38, .94); border: 1px solid var(--linie); border-radius: 22px;
  padding: 18px 34px; font-weight: 800; font-size: 54px; letter-spacing: -.03em;
  display: none;
}
.spicken.an { display: block; }

/* 3 · Aufgedeckt */
.offen { background: var(--creme); color: var(--text); max-width: none; }
body[data-zustand="offen"] { background: var(--creme); }
.offen .kopf { color: #8a8a8a; }
.offen .kopf .auge { color: var(--text); }
.gross-rahmen { margin: auto 0; text-align: center; }
.riesig {
  font-weight: 800; letter-spacing: -.05em; line-height: .95; text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.knopf-leise {
  height: 54px; border-radius: 18px; border: 2px solid #cfc6b8; font-weight: 700; font-size: 17px;
  color: var(--text); width: 100%; max-width: 440px; align-self: center;
}

.ohne-js { padding: 24px; text-align: center; }