/* ============================================================
   Human-gate overlay + locked coffee-chat card — DELIBERATELY
   ISOLATED (with js/dino.js), same contract as stories.css:
   nothing outside this file may style .dino-* elements; nothing
   in here may style anything else. Theme tokens only, so the
   game re-skins with all five themes.
   ============================================================ */

/* locked-state bits inside the coffee card (card grammar: main.css) */
.dino-gate-title { margin: 0; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.dino-gate-sub { margin: .3rem 0 .8rem; font-size: .85rem; color: var(--muted); }
.dino-gate-btn { width: 100%; border: none; font-family: inherit; cursor: pointer; }

/* full-screen overlay, stories-style */
.dino-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}
.dino-overlay[data-open="true"] { display: flex; }

.dino-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 0 16px;
}
.dino-title { margin: 0; font-size: .95rem; font-weight: 800; }
.dino-close {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* the playfield — a tap anywhere in here jumps */
.dino-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 0 1rem;
  touch-action: manipulation;     /* no double-tap zoom while jumping */
}
/* wrapper is built in js/dino.js (index.html stays untouched); it positions
   the pause button over the canvas's top-left corner */
.dino-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  line-height: 0;                 /* no descender gap under the canvas */
}
.dino-canvas {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

/* pixel ⏸/▶ pause button — top-left of the canvas, ≥44px thumb target */
.dino-pause {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  image-rendering: pixelated;
}
.dino-pause[hidden] { display: none; }
.dino-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dino-msg {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  color: var(--accent);
}
.dino-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }

/* on-screen control legend (owner 2026-07-12): keycap ↑ jump / ↓ duck — shows
   how to navigate AND works (js/dino-game.js). Matches the pause button look;
   the whole pad is hidden under reduced motion with the rest of the game. */
.dino-ctrls {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 0;
}
.dino-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 68px;
  min-height: 48px;              /* thumb target */
  padding: .4rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-display);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.dino-key .cap {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.dino-key:active {              /* press feedback: invert to the accent */
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.dino-key:active .cap { color: var(--surface); }
.dino-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* v2.4.3: persistent verified state — ✓ VERIFIED badge + Weiter button,
   shown by unlock() the moment the visitor passes (replaces .dino-alt) */
.dino-done {
  display: flex;
  flex-direction: column;      /* Weiter-Button oben, Verified-Badge darunter */
  justify-content: center;
  align-items: center;
  gap: .8rem;
  padding: 0 1rem max(20px, env(safe-area-inset-bottom));
}
.dino-verified-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .35rem .8rem;
}
.dino-next { min-height: 44px; }  /* thumb target */
/* author display:flex beats the UA [hidden]{display:none} — restore it */
.dino-done[hidden], .dino-alt[hidden] { display: none; }

/* arcade door (owner 2026-07-12): the machine is a pure glory run, so the
   human-check UI stays out — no Verified badge, no Weiter button, no hold
   fallback. js/dino.js flags the overlay with .dino-arcade; unlock() still
   runs underneath (reaching 4,0 silently unlocks the coffee chat). Exit is
   the × in the header. !important beats the JS-set display:flex on unlock. */
.dino-overlay.dino-arcade .dino-done,
.dino-overlay.dino-arcade .dino-alt { display: none !important; }

/* accessible alternative: press-and-hold proof with progress ring */
.dino-alt {
  display: flex;
  justify-content: center;
  padding: 0 1rem max(20px, env(safe-area-inset-bottom));
}
.dino-hold {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;               /* thumb target */
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;    /* no long-press menu while holding */
}
.dino-hold svg { flex: none; }
.dino-hold .dino-ring-track { stroke: var(--border); }
.dino-hold .dino-ring { stroke: var(--accent); }

/* people who can't/won't play a reflex game: under reduced motion the
   game hides entirely and the press-and-hold proof is the one path */
@media (prefers-reduced-motion: reduce) {
  .dino-canvas, .dino-hint, .dino-pause, .dino-ctrls { display: none; }
}