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

html, body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  background-image:
    linear-gradient(rgba(20,13,6,0.22), rgba(20,13,6,0.28)),
    url("assets/tao-bg.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ── App shell ─────────────────────────────────────────────── */

.app {
  width: 100%;
  max-width: 700px;
  min-height: calc(100svh - 88px);
  margin: 0 auto;
  padding: 72px 20px 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: "Zen Antique Soft", serif;
}

/* ── Titel ─────────────────────────────────────────────────── */

.title{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Tafel ─────────────────────────────────────────────────── */

.table {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 6vw, 56px);
  width: 100%;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slot-label {
  margin: 0;
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  letter-spacing: 0.07em;
  color: rgba(255,244,220,0.6);
}

/* ── Kaartafmetingen ───────────────────────────────────────── */

:root {
  --cw: clamp(110px, 30vw, 220px);  /* breedte */
  --cr: clamp(9px, 2vw, 16px);       /* border-radius */
}

/* ── DECK ──────────────────────────────────────────────────── */

.deck {
  position: relative;
  width: var(--cw);
  aspect-ratio: 2 / 3;
  cursor: pointer;
  overflow: visible;
}

.deck-layer {
  position: absolute;
  inset: 0;
  border-radius: var(--cr);
  background-image: url("assets/tao-card-back.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,244,220,0.55);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  overflow: hidden;
}

.l3 { transform: translate(4px, 7px);   opacity: 0.48; }
.l2 { transform: translate(2px, 3.5px); opacity: 0.70; }
.l1 { transform: none;                   opacity: 1;    }

.deck:hover .l1,
.deck:focus-visible .l1 {
  transform: translateY(-5px);
  transition: transform 0.2s ease;
}

.deck.exhausted {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

/* ── OPEN STAPEL ───────────────────────────────────────────── */

.open-pile {
  position: relative;
  width: var(--cw);
  aspect-ratio: 2 / 3;
  overflow: visible;
}

/* Placeholder outline — altijd zichtbaar als de stapel leeg is */
.open-pile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cr);
  border: 2px dashed rgba(255,244,210,0.30);
  pointer-events: none;
  z-index: 0;
}

.pile-ghost {
  position: absolute;
  inset: 0;
  border-radius: var(--cr);
  background-image: url("assets/tao-card.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,244,220,0.35);
  box-shadow: 0 5px 16px rgba(0,0,0,0.24);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.g2 { transform: translate(-3px, 6px); }
.g1 { transform: translate(-1.5px, 3px); }

.open-pile.has-cards .g2 { opacity: 0.32; }
.open-pile.has-cards .g1 { opacity: 0.55; }

/* Bovenste zichtbare kaart */
.top-card {
  position: absolute;
  inset: 0;
  border-radius: var(--cr);
  background-image: url("assets/tao-card.png");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,244,220,0.75);
  box-shadow: 0 14px 38px rgba(0,0,0,0.36);
  display: grid;
  place-items: center;
  padding: clamp(12px, 3.5vw, 24px) clamp(10px, 3vw, 18px);
  /* Geen overflow:hidden — dat clipt de tekst in sommige browsers */
  overflow: visible;
  /* Verborgen totdat een kaart landt */
  opacity: 0;
  transition: opacity 0.4s ease 0.05s;
  z-index: 2;
}

.top-card.show {
  opacity: 1;
}

/* Subtiele gloed achter tekst */
.top-card::before {
  content: "";
  position: absolute;
  inset: 13% 7%;
  border-radius: calc(var(--cr) - 2px);
  background: radial-gradient(
    ellipse at center,
    rgba(255,248,225,0.40) 0%,
    rgba(240,220,185,0.15) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.top-card-text {
  position: relative;
  /* Expliciet z-index boven ::before */
  z-index: 3;
  margin: 0;
  max-width: 88%;
  /* Groter zodat tekst zichtbaar is */
  font-size: clamp(0.78rem, 2.4vw, 1.05rem);
  line-height: 1.55;
  color: #2a160c;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  /* Zorg dat tekst nooit achter kaartrand verdwijnt */
  word-break: break-word;
}

/* ── VLIEGENDE KAART ───────────────────────────────────────── */
/*
  position:fixed — vrij van alle containers.
  JS stuurt top/left/width, en gebruikt CSS transitions
  voor de vlucht-animatie (betrouwbaarder dan keyframes).
*/

.fly-wrap {
  position: fixed;
  /* Beginpositie wordt door JS ingesteld */
  top: 0;
  left: 0;
  width: var(--cw);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  z-index: 2000;
  /* 3D context */
  perspective: 1000px;
  /* Verborgen in rust */
  visibility: hidden;
  opacity: 0;
}

.fly-wrap.ready {
  /* Zichtbaar, geen transitie (we positioneren eerst) */
  visibility: visible;
  opacity: 1;
  transition: none;
}

.fly-wrap.flying {
  /* JS zet top/left naar bestemming; deze transitie maakt de vlucht */
  transition:
    top  0.75s cubic-bezier(.4,0,.2,1),
    left 0.75s cubic-bezier(.4,0,.2,1);
}

.fly-wrap.done {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* De kaart zelf: flip via rotateY */
.fly-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: var(--cr);
  box-shadow: 0 18px 48px rgba(0,0,0,0.44);
  /* Flip-animatie */
  transition: transform 0.5s ease 0.25s; /* delay: flip start na 0.25s vlucht */
}

.fly-wrap.flip .fly-inner {
  transform: rotateY(180deg);
}

.fly-back,
.fly-front {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  overflow: hidden;
  border: 1px solid rgba(255,244,220,0.75);
}

.fly-back {
  background-image: url("assets/tao-card-back.png");
  background-size: cover;
  background-position: center;
}

.fly-front {
  background-image: url("assets/tao-card.png");
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  padding: clamp(12px,3.5vw,24px) clamp(10px,3vw,18px);
}

.fly-front::before {
  content: "";
  position: absolute;
  inset: 13% 7%;
  border-radius: calc(var(--cr) - 2px);
  background: radial-gradient(
    ellipse at center,
    rgba(255,248,225,0.40) 0%,
    rgba(240,220,185,0.15) 60%,
    transparent 100%
  );
}

.fly-text {
  position: relative;
  z-index: 3;
  margin: 0;
  max-width: 88%;
  font-size: clamp(0.78rem, 2.4vw, 1.05rem);
  line-height: 1.55;
  color: #2a160c;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  word-break: break-word;
}

/* ── Knoppen ───────────────────────────────────────────────── */

.app button,
.limit-box button {
  display: block;
  margin: 24px auto 0;
  border: 1px solid rgba(95,62,28,0.55);
  border-radius: 999px;
  padding: clamp(11px,2.8vw,15px) clamp(22px,5.5vw,38px);
  font-family: "Zen Antique Soft", serif;
  font-size: clamp(0.88rem,2.4vw,1.05rem);
  letter-spacing: 0.08em;
  cursor: pointer;
  background: linear-gradient(135deg, #d0a85e, #8b5a2b 55%, #5d351d);
  color: #fff4df;
  box-shadow: 0 12px 30px rgba(45,30,14,0.36),
              inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.nav-toggle{
  margin: 0;
  box-shadow: none;
}

button:hover  { transform: translateY(-2px); filter: brightness(1.08); }
button:active { transform: translateY(1px); }

.share-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.share-actions[hidden] { display: none; }

.share-button {
  margin: 0;
  min-width: 136px;
  padding: clamp(10px,2.5vw,13px) clamp(14px,3.5vw,22px);
  border: 1px solid rgba(107,75,55,0.3);
  background: rgba(255,255,255,0.9);
  color: #6b4b37;
  font-size: clamp(0.78rem,1.9vw,0.95rem);
}

.share-button.loading { opacity: 0.6; cursor: wait; }

/* ── Limiet popup ──────────────────────────────────────────── */

.limit-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12,8,4,0.72);
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.limit-modal[hidden] { display: none; }

.limit-box {
  width: min(88vw,440px);
  padding: clamp(26px,6vw,40px) clamp(20px,5vw,32px);
  text-align: center;
  background: linear-gradient(180deg,rgba(255,248,238,0.98),rgba(240,224,203,0.96));
  border-radius: 26px;
  border: 1px solid rgba(120,88,46,0.18);
  box-shadow: 0 28px 72px rgba(0,0,0,0.4);
}

.limit-box h2 {
  margin-top: 0;
  font-size: clamp(1.3rem,4vw,1.9rem);
  font-weight: 400;
  color: #5b3b24;
}

.limit-box p {
  margin: 14px 0 22px;
  font-size: clamp(0.88rem,2.4vw,1rem);
  line-height: 1.8;
  color: #6a4b36;
}

.site-header .brand-name,
.site-footer .footer-mantra{
  font-family: var(--font-script);
}

.limit-box button { margin-top: 0; }