:root {
  --paper: #f5f0e4;
  --paper-edge: #e6dcc6;
  --ink: #1b1814;
  --back: #1f3a38;
  --back-line: #e8dcc0;
  --table-hi: #52402f;
  --table-mid: #2b221b;
  --table-lo: #130e0b;
  --text-dim: #b9a98f;

  --card-w: min(88vw, 560px, calc((100dvh - 120px) * 1.4));
  --radius: 14px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  /* Solid colour on the root: Safari tints its status bar and toolbar from this. */
  background-color: var(--table-lo);
}
body { height: 100%; }

body {
  margin: 0;
  display: grid;
  min-height: 100dvh;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text-dim);
  font-family: var(--sans);
}

/* The table: pinned to the whole screen, including the area under browser bars.
   It fades to the solid root colour before reaching the top and bottom edges, so it blends
   seamlessly into Safari's tinted status bar and toolbar. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 50% at 50% 46%, var(--table-hi) 0%, var(--table-mid) 45%, var(--table-lo) 82%);
}

/* Grain over the whole table */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Info ---------- */

.info {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
}

.info-btn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  color: var(--text-dim);
  background: none;
  border: 0;
  border-radius: 50%;
  opacity: 0.55;
  cursor: help;
  transition: opacity 0.2s, color 0.2s;
}
.info-btn:hover, .info-btn:focus-visible, .info.open .info-btn { opacity: 1; color: var(--paper); }
.info-btn:focus-visible { outline: 1px solid var(--paper); outline-offset: 2px; }

.credit {
  position: absolute;
  right: 0; bottom: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  margin: 0 0 8px;
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--text-dim);
  background: rgba(19, 14, 11, 0.94);
  border: 1px solid rgba(185, 169, 143, 0.25);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.credit em { font-style: normal; color: var(--paper); }
.info:hover .credit, .info:focus-within .credit, .info.open .credit {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Stage & deck ---------- */

.stage {
  display: grid;
  place-items: center;
  min-height: 0;
  cursor: pointer;
}

/* Countdown to the next card, centred along the bottom of the screen
   (vertically aligned with the info button in the corner). */
.timer {
  position: fixed;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 10px);
  z-index: 20;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.8s;
  pointer-events: none;
}
.timer.show { opacity: 0.7; }

.deck-wrap.idle { animation: bob 5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.deck {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 7 / 5;
  perspective: 1500px;
  outline: none;
}
.deck:focus-visible .pile .face:nth-child(1) {
  outline: 2px solid var(--paper);
  outline-offset: 5px;
}

.pile, .card { position: absolute; inset: 0; }
.pile .face { position: absolute; inset: 0; }
.pile .face:nth-child(1) { transform: translate(7px, 8px) rotate(1.2deg); }
.pile .face:nth-child(2) { transform: translate(5px, 6px) rotate(-0.8deg); }
.pile .face:nth-child(3) { transform: translate(3px, 4px) rotate(0.6deg); }
.pile .face:nth-child(4) { transform: translate(1.5px, 2px) rotate(-0.3deg); }

.card, .tilt, .flip { transform-style: preserve-3d; }
.card { will-change: transform; }
.tilt {
  position: absolute; inset: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.18s ease-out;
}
.flip { position: absolute; inset: 0; }

/* ---------- Faces ---------- */

.face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.45),
    0 10px 22px -6px rgba(0, 0, 0, 0.55),
    0 28px 48px -12px rgba(0, 0, 0, 0.4);
}

.face.back {
  background:
    radial-gradient(120% 120% at 30% 20%, #2b4d4a 0%, var(--back) 60%, #162b29 100%);
  color: var(--back-line);
}
.face > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Firefox keeps drawing a hidden face's children, so app.js also records which side is up
   (data-side on .flip) and these rules hide the other face outright. */
.flip:not([data-side="front"]) .face.front,
.flip[data-side="front"] .face.back { visibility: hidden; }

.face.back::after {
  content: "";
  position: absolute;
  inset: 3.4%;
  border: 1px solid rgba(232, 220, 192, 0.8);
  border-radius: 6px;
  pointer-events: none;
}
.horse {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.face.front {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  padding: 11% 12%;
  container-type: inline-size;
  color: var(--ink);
  background: var(--paper);
}
.text {
  position: relative;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  hyphens: auto;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 9cqi, 3rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.text[data-len="m"] { font-size: clamp(1.1rem, 8.2cqi, 2.6rem); }
.text[data-len="l"] { font-size: clamp(1rem, 7.4cqi, 2.2rem); line-height: 1.15; }
.text[data-len="xl"] { font-size: clamp(0.95rem, 6.4cqi, 1.9rem); line-height: 1.2; }

@media (hover: none) {
  .tilt { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-wrap.idle { animation: none; }
  .tilt { transition: none; }
}

/* Portrait phones: a tall card fills the screen instead of a landscape one floating in it. */
@media (orientation: portrait) and (max-width: 700px) {
  :root {
    --card-w: min(86vw, 460px, calc((100dvh - 150px) / 1.4));
  }
  .deck { aspect-ratio: 5 / 7; }
  .face.front { padding: 12% 11%; }
  .text { font-size: clamp(1.3rem, 12.5cqi, 3rem); }
  .text[data-len="m"] { font-size: clamp(1.2rem, 11cqi, 2.6rem); }
  .text[data-len="l"] { font-size: clamp(1.1rem, 9.6cqi, 2.2rem); }
  .text[data-len="xl"] { font-size: clamp(1rem, 8.4cqi, 1.9rem); }
  .horse { width: 76%; }
}