/* ===== "Would you eat this?" swipe game — page styles =====
   Builds on style.css design tokens (--primary, --radius, shadows, fonts).
   Mobile-first: on the play screen the progress, question, card and ✗/✓ buttons
   share one viewport height, so nothing needs scrolling mid-game. */

/* The `hidden` attribute must win over any author `display` (e.g. flex). */
[hidden] { display: none !important; }

.game-main {
  min-height: 100vh;
  padding: calc(var(--header-h) + 16px) 0 56px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--primary-bg) 0%, transparent 55%),
    var(--bg);
}

.game-container { max-width: 640px; }

/* ---- 1. Intro ---- */
.game-intro {
  text-align: center;
  padding: 24px 0 24px;
}
/* Judy + her speech bubble */
.game-intro-judy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.game-intro-avatar {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-light);
  box-shadow: 0 0 0 6px var(--primary-glow);
}
.game-intro-bubble {
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 18px;
  border-end-start-radius: 5px;
  padding: 10px 14px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text);
  box-shadow: var(--shadow-md);
  text-align: start;
  max-width: 270px;
}
.game-title {
  font-size: clamp(2rem, 7vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.game-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 34ch;
  margin: 0 auto 32px;
  text-wrap: balance;
}
.game-start {
  margin-top: 24px;
  display: inline-block;
  padding: 16px 40px;
  border: none;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s var(--ease), background 0.2s var(--ease);
}
.game-start:hover { background: #374151; transform: translateY(-2px); }

.game-time {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Fanned peek at the cards */
.game-fan {
  /* Card size follows the screen height so the start button stays above the
     fold on short phone viewports (browser bars, in-app browsers). */
  --fan-h: clamp(120px, 24vh, 228px);
  --fan-h: clamp(120px, 24svh, 228px);
  --fan-w: calc(var(--fan-h) * 0.745);
  position: relative;
  width: calc(var(--fan-w) * 1.78);
  height: calc(var(--fan-h) + 30px);   /* room for the tilted back cards' corners */
  margin: 0 auto;
  cursor: pointer;
}
.game-fan .game-card.game-fan-card {
  inset: auto;
  top: 4px;
  left: 50%;
  width: var(--fan-w);
  height: var(--fan-h);
  margin-left: calc(var(--fan-w) / -2);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  touch-action: auto;
}
.game-fan .game-card-name {
  font-size: 1.05rem;
  padding: 28px 12px 10px;
}
.game-fan .fan-back-left  { transform: translateX(calc(var(--fan-w) * -0.39)) translateY(10px) rotate(-12deg); }
.game-fan .fan-back-right { transform: translateX(calc(var(--fan-w) * 0.39)) translateY(10px) rotate(12deg); }
/* Only the front card is labelled; the ones behind just peek */
.game-fan .fan-back-left .game-card-name,
.game-fan .fan-back-right .game-card-name { display: none; }
.game-fan .fan-front {
  transform: rotate(-2deg);
  box-shadow: var(--shadow-lg);
  /* A little "swipe me" nudge after the page settles */
  animation: fan-nudge 1.4s var(--ease) 0.9s 2;
}
@keyframes fan-nudge {
  0%, 100% { transform: rotate(-2deg); }
  30%      { transform: translateX(16px) rotate(5deg); }
  60%      { transform: translateX(-8px) rotate(-5deg); }
}

/* ---- 2. Play ---- */
.game-play {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h) - 32px);
  height: calc(100svh - var(--header-h) - 32px);
  min-height: 480px;
  max-height: 820px;
}

.game-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.game-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.game-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.3s var(--ease);
}
.game-progress-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  direction: ltr;           /* keep "3/12" reading the same in Hebrew */
}

.game-question {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 12px auto 14px;
  max-width: 28ch;
  text-wrap: balance;
}

.game-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.game-card {
  --yes: 0;
  --no: 0;
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.game-card:active { cursor: grabbing; }

/* The card waiting underneath */
.game-card.is-next {
  transform: scale(0.94) translateY(14px);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.game-card-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Hard split hidden behind the photo: its backdrop color above, below */
  background: linear-gradient(var(--edge-top, var(--bg-alt)) 40%, var(--edge-bottom, var(--bg-alt)) 40%);
}
.game-card-img {
  position: absolute;
  inset-inline: 0;
  top: 40%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  /* Fade the photo's top/bottom into the matching backdrop */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* Shown until the real photo exists */
.game-card-img.is-placeholder {
  inset: 0;
  top: 0;
  height: 100%;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
  display: grid;
  place-items: center;
  font-size: clamp(5rem, 28vw, 8rem);
  background: linear-gradient(160deg, var(--primary-bg), #FEF3C7);
}

.game-card-name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 56px 22px 20px;
  background: linear-gradient(to top, rgba(17,24,39,0.72), transparent);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: start;
  pointer-events: none;
}

/* YES / NO stamps — physical sides, since swipe direction is physical */
.game-stamp {
  position: absolute;
  top: 22px;
  padding: 4px 14px;
  border: 3px solid currentColor;
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.game-stamp-yes {
  left: 18px;
  color: var(--primary-dark);
  transform: rotate(-12deg);
  opacity: var(--yes);
}
.game-stamp-no {
  right: 18px;
  color: #E2554F;
  transform: rotate(12deg);
  opacity: var(--no);
}
.game-card.show-yes .game-stamp-yes,
.game-card.show-no .game-stamp-no { opacity: 1; }

/* ✗ left, ✓ right in both languages */
.game-buttons {
  direction: ltr;
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 16px 0 0;
}
.game-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.game-btn svg { width: 28px; height: 28px; }
.game-btn-no { color: #E2554F; }
.game-btn-yes { color: var(--primary); }
.game-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.game-btn:active { transform: scale(0.94); }

/* ---- 3. Result ---- */
.game-result { padding-top: 24px; }

.game-profile { text-align: center; margin-bottom: 32px; }
.game-profile-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-light);
  box-shadow: 0 0 0 8px var(--primary-glow);
}
.game-profile-name {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.game-profile-desc {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.game-notes {
  background: linear-gradient(160deg, var(--primary-bg), color-mix(in srgb, var(--primary-bg) 40%, var(--bg)));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-lg);
  padding: 20px 20px 8px;
  margin-bottom: 28px;
}
.game-notes-label {
  display: inline-block;
  font-family: 'Caveat', 'Gveret Levin AlefAlefAlef', cursive;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.game-notes-list { list-style: none; }
.game-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
}
.game-note + .game-note { border-top: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); }
.game-note-img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.game-note-img.is-placeholder {
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: var(--bg);
}
.game-note-name {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.game-note-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

/* Judy's closing words, as a chat bubble */
.game-closing {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 32px;
}
.game-closing-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-light);
}
.game-closing-text {
  background: var(--bg);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 20px;
  border-end-start-radius: 6px;
  padding: 16px 18px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.game-cta { text-align: center; }

.game-again-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.game-again,
.game-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.game-again:hover,
.game-share:hover { border-color: var(--primary); color: var(--primary-dark); }
.game-share svg { width: 17px; height: 17px; }

/* ---- Small phones: tighten the play screen so it fits one viewport ---- */
@media (max-width: 600px) {
  .game-main { padding-top: calc(var(--header-h) + 12px); }
  .game-intro { padding-top: 6px; }
  .game-intro-judy { gap: 10px; margin-bottom: 14px; }
  .game-intro-avatar { width: 68px; height: 68px; box-shadow: 0 0 0 5px var(--primary-glow); }
  .game-intro-bubble { margin-bottom: 12px; font-size: 0.92rem; padding: 9px 13px; }
  .game-title { margin-bottom: 8px; }
  .game-sub { font-size: 1rem; margin-bottom: 16px; }
  .game-start { margin-top: 16px; }
  .game-time { margin-top: 10px; }
  .game-play {
    height: calc(100vh - var(--header-h) - 24px);
    height: calc(100svh - var(--header-h) - 24px);
  }
  .game-question { font-size: 1.05rem; margin: 10px auto 12px; }
  .game-card-name { font-size: 1.55rem; padding: 48px 18px 16px; }
  .game-btn { width: 58px; height: 58px; }
  .game-buttons { padding-top: 12px; }
  .game-notes { padding: 18px 16px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-fan .fan-front { animation: none; }
  .game-card,
  .game-progress-bar span,
  .game-start,
  .game-btn { transition: none; }
}