/*
 * MeowTarot — Phase 5: Daily Page Structural Theme
 * css/daily.css
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Translates two design-doc components into real CSS scoped to
 * body[data-page='daily']:
 *   - ScreenDailyBefore  → State 1 markup (.daily-state--before)
 *   - ScreenCardBoardDaily → State 2 markup (.daily-state--board)
 *
 * The third state (ScreenDailyAfter, the post-reveal interpretation) lives
 * on /reading.html (data-page='reading') and is styled by css/reading.css.
 *
 * STATE MACHINE:
 *   - .daily-shell carries a data-daily-phase attribute set by JS.
 *   - Initial value 'before' is in the HTML; main.js renderDaily()'s
 *     dealShuffleBtn.onclick flips it to 'board'.
 *   - This CSS shows the matching <section.daily-state--X> and hides
 *     the other. No JS DOM manipulation required for the visual swap.
 *
 * REQUIRES: css/theme-tokens.css (provides --mt-* namespace, Phase 3 + 5).
 * LOAD ORDER: LAST. After css/phase-3-redesign.css.
 *
 * SECTIONS:
 *   §1  Page background + shell layout (max-width centered, bottom padding)
 *   §2  State machine (which .daily-state shows for which phase)
 *   §3  State 1 — top bar (Today / วันนี้)
 *   §4  State 1 — streak strip (chip + text + 7-day bar)
 *   §5  State 1 — deck label (eyebrow + name + Thai name)
 *   §6  State 1 — big card-back (aura halo + plum-to-rose gradient card
 *       with gold inner border + M monogram + bottom wordmark)
 *   §7  State 1 — ceremony copy (Tap to reveal / แตะเพื่อเปิดไพ่)
 *   §8  State 1 + 2 — gold draw button (#daily-deal-shuffle)
 *   §9  State 2 — top bar (deck label + streak chip)
 *   §10 State 2 — board title (Choose your card / เลือกไพ่ของคุณ)
 *   §11 State 2 — counter + continue button
 *
 * The .card-slot fallback gradient is owned by phase-3-redesign.css §2
 * and remains in effect on this page.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* §1 — Page background + shell layout */
body[data-page='daily'] {
  background: var(--mt-bg-gradient-daily);
  color: var(--mt-plum);
  font-family: var(--mt-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-page='daily'] .daily-shell {
  max-width: 420px;
  margin: 0 auto;
  /* Top clears the fixed .site-header. Bottom clears the fixed .bottom-nav
   * + the iOS safe-area-inset, so the CTA button at the end of content
   * isn't covered. Adapts to global --nav-height / --bottom-nav-height
   * vars; falls back to sensible mobile values otherwise. */
  padding:
    calc(var(--nav-height, 64px) + 12px) 24px
    calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 24px);
  min-height: calc(100dvh - 60px);
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}

/* Phase 5 mobile review fix v2: styles.css's pre-Phase-5 mobile rules pin
 * body[data-page='daily'] to 100dvh + overflow: hidden at @media ≤640px
 * AND @media ≤480px, which prevents the new .daily-shell from scrolling
 * — cards 7-12 stayed clipped below the fold with no way to reach them.
 *
 * The earlier :has(.daily-shell) attempt (commit 1d3a81a) was unreliable
 * for body-level overflow on mobile Safari. main.js renderDaily now adds
 * body.daily-shell-active when the Phase 5 markup is present; class-based
 * targeting gives the cascade a hook every browser honors.
 *
 * Scoped to ≤640px so mid-size phones / small tablets are covered too,
 * not just iPhone-Pro-class widths. Desktop behavior untouched. /today/
 * never gets daily-shell-active so its legacy fixed-height stays intact. */
@media (max-width: 640px) {
  body.daily-shell-active {
    height: auto;
    overflow: visible;
  }
  body.daily-shell-active .page-shell.board-page {
    height: auto;
  }
  body.daily-shell-active .daily-shell {
    min-height: 0;
  }
}

body[data-page='daily'] .thai           { font-family: var(--mt-font-thai); }
body[data-page='daily'] .thai-serif     { font-family: var(--mt-font-display-th); }


/* §2 — Phase 5 review: the Before-Draw state was removed. Only
 * .daily-state--board remains in the markup; just ensure it renders.
 * The state-machine attribute (data-daily-phase) is no longer set in JS
 * or HTML. Rules for .daily-state--before / data-daily-phase= are dead
 * code at this point; left in §3-§7 since they match nothing and don't
 * cost anything. */
body[data-page='daily'] .daily-state--board {
  display: block;
}


/* §3 — State 1 top bar */
body[data-page='daily'] .daily-topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  min-height: 36px;
}

body[data-page='daily'] .daily-topbar__date-block {
  text-align: center;
}

body[data-page='daily'] .daily-topbar__date {
  font-size: 11px;
  color: var(--mt-plum-mid);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

body[data-page='daily'] .daily-topbar__day {
  font-size: 11px;
  color: var(--mt-plum-pale);
  margin-top: 2px;
}


/* §4 — Streak strip */
body[data-page='daily'] .daily-streak-strip {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--mt-soft-shadow);
}

body[data-page='daily'] .daily-streak-strip__chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--mt-rose) 0%, var(--mt-gold-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-cream);
  font-family: var(--mt-font-display);
  font-weight: 600;
  font-size: 14px;
  font-style: italic;
  flex-shrink: 0;
}

body[data-page='daily'] .daily-streak-strip__text {
  flex: 1;
  min-width: 0;
}

body[data-page='daily'] .daily-streak-strip__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mt-plum);
}

body[data-page='daily'] .daily-streak-strip__subtitle {
  font-size: 11px;
  color: var(--mt-ink-soft);
  margin-top: 1px;
}

body[data-page='daily'] .daily-streak-strip__bar {
  display: flex;
  gap: 3px;
}

body[data-page='daily'] .daily-streak-strip__bar-cell {
  width: 6px;
  height: 12px;
  border-radius: 2px;
  background: rgba(61, 26, 92, 0.15);
}

body[data-page='daily'] .daily-streak-strip__bar-cell.is-filled {
  background: var(--mt-gold-deep);
}


/* §5 — Deck label */
body[data-page='daily'] .daily-deck-label {
  text-align: center;
  margin-top: 32px;
}

body[data-page='daily'] .daily-deck-label__eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--mt-gold-deep);
  font-weight: 600;
  text-transform: uppercase;
}

body[data-page='daily'] .daily-deck-label__name {
  font-family: var(--mt-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--mt-plum);
  margin-top: 4px;
  font-style: italic;
  letter-spacing: -0.01em;
}

body[data-page='daily'] .daily-deck-label__name-th {
  font-size: 12px;
  color: var(--mt-plum-mid);
  margin-top: 2px;
}


/* §6 — Big card-back */
body[data-page='daily'] .daily-bigcard {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  position: relative;
  height: 320px;
}

body[data-page='daily'] .daily-bigcard__aura {
  position: absolute;
  width: 280px;
  height: 280px;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 103, 138, 0.35), transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}

body[data-page='daily'] .daily-bigcard__card {
  position: relative;
  width: 208px;
  height: 320px;
  border-radius: 14px;
  background: var(--mt-card-back-deep);
  border: 1px solid rgba(232, 196, 120, 0.55);
  box-shadow:
    0 26px 56px -18px rgba(61, 26, 92, 0.60),
    0 6px 14px -6px rgba(61, 26, 92, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

/* Real card-back PNG fills the card; z-index sits above the gradient and the
 * gold border pseudo-elements so the asset takes over when it loads. The
 * gradient + monogram/wordmark CSS rules below remain as image-load fallback. */
body[data-page='daily'] .daily-bigcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 2;
  display: block;
}

/* Phase 5 BUG 1 fix: when the real card-back <img> is in the DOM, strip the
 * CSS frame so the image displays at its natural 1568:2720 aspect ratio
 * without double-framing or cropping. The outer border, gradient, and
 * ::before/::after gold rings become invisible. The fallback path (no <img>,
 * e.g. image-load failure or legacy markup) keeps the gradient + borders
 * intact via the un-overridden base rules above.
 *
 * Browser support note: :has() ships in Chrome 105+, Safari 15.4+, Firefox
 * 121+. Acceptable for the current site audience; degrades to the existing
 * (slightly-clipped) framed visual on older browsers, not broken. */
body[data-page='daily'] .daily-bigcard:has(.daily-bigcard__img) {
  height: auto;
}

body[data-page='daily'] .daily-bigcard__card:has(.daily-bigcard__img) {
  background: transparent;
  border: none;
  height: auto;
  aspect-ratio: 1568 / 2720;
  box-shadow:
    0 26px 56px -18px rgba(61, 26, 92, 0.60),
    0 6px 14px -6px rgba(61, 26, 92, 0.40);
}

body[data-page='daily'] .daily-bigcard__card:has(.daily-bigcard__img)::before,
body[data-page='daily'] .daily-bigcard__card:has(.daily-bigcard__img)::after {
  content: none;
}

body[data-page='daily'] .daily-bigcard__card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  border: 1px solid var(--mt-gold-pale);
  opacity: 0.6;
  pointer-events: none;
}

body[data-page='daily'] .daily-bigcard__card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 6px;
  border: 0.5px solid var(--mt-gold-deep);
  opacity: 0.42;
  pointer-events: none;
}

body[data-page='daily'] .daily-bigcard__monogram {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  font-family: var(--mt-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 87px;
  color: var(--mt-gold-pale);
  text-shadow: 0 2px 12px rgba(212, 154, 44, 0.5);
  line-height: 1;
}

body[data-page='daily'] .daily-bigcard__wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--mt-font-display);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--mt-gold-pale);
  opacity: 0.75;
  text-transform: uppercase;
}


/* §7 — Ceremony copy */
body[data-page='daily'] .daily-ceremony {
  text-align: center;
  margin-top: 28px;
}

body[data-page='daily'] .daily-ceremony__cta {
  font-family: var(--mt-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--mt-plum);
  font-style: italic;
  letter-spacing: -0.01em;
}

body[data-page='daily'] .daily-ceremony__cta-th {
  font-size: 16px;
  color: var(--mt-plum-mid);
  margin-top: 2px;
  font-weight: 600;
}

body[data-page='daily'] .daily-ceremony__hint {
  font-size: 12px;
  color: var(--mt-ink-soft);
  margin: 10px 0 0;
  padding: 0 30px;
  line-height: 1.55;
}


/* §8 — Gold draw / continue buttons (shared across State 1 + 2)
 * Phase 5 mobile review revert: sticky positioning floated the button over
 * the card grid. Back to normal document flow. The .daily-shell padding-
 * bottom + the body overflow override below ensure the button is reachable
 * via natural scroll on mobile. */
body[data-page='daily'] .daily-state__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

body[data-page='daily'] .daily-draw-button,
body[data-page='daily'] .daily-continue-button {
  font-family: var(--mt-font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: var(--mt-radius-pill);
  border: none;
  background: var(--mt-cta-grad);
  color: var(--mt-cream);
  box-shadow: var(--mt-cta-shadow);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body[data-page='daily'] .daily-draw-button:hover,
body[data-page='daily'] .daily-continue-button:not(:disabled):hover,
body[data-page='daily'] .daily-draw-button:focus-visible,
body[data-page='daily'] .daily-continue-button:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 20px 36px -8px rgba(209, 40, 120, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  outline: none;
}

body[data-page='daily'] .daily-continue-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* §9 — State 2 top bar (deck label + streak chip) */
body[data-page='daily'] .daily-topbar--board {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

body[data-page='daily'] .daily-topbar--board::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
}

body[data-page='daily'] .daily-topbar__deck {
  text-align: center;
}

body[data-page='daily'] .daily-topbar__deck-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--mt-gold-deep);
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page='daily'] .daily-topbar__deck-name {
  font-family: var(--mt-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--mt-plum);
  font-style: italic;
  margin-top: 1px;
  letter-spacing: -0.01em;
}

body[data-page='daily'] .daily-topbar__streak-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--mt-soft-shadow);
}

body[data-page='daily'] .daily-topbar__streak-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--mt-rose) 0%, var(--mt-gold-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mt-cream);
  font-family: var(--mt-font-display);
  font-weight: 600;
  font-size: 11px;
  font-style: italic;
}

body[data-page='daily'] .daily-topbar__streak-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mt-plum);
  letter-spacing: 0.04em;
}


/* §10 — Board title */
body[data-page='daily'] .daily-board-title {
  text-align: center;
  margin-top: 14px;
}

body[data-page='daily'] .daily-board-title__en {
  font-family: var(--mt-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--mt-plum);
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

body[data-page='daily'] .daily-board-title__th {
  font-size: 15px;
  color: var(--mt-plum-mid);
  margin: 2px 0 0;
  font-weight: 600;
}

body[data-page='daily'] .daily-board-title__hint {
  font-size: 11.5px;
  color: var(--mt-ink-soft);
  margin: 6px 0 0;
  padding: 0 30px;
  line-height: 1.5;
}


/* §11 — Counter (between board and continue) */
body[data-page='daily'] .daily-board-counter {
  text-align: center;
  margin-top: 14px;
  font-family: var(--mt-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--mt-plum-mid);
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────────────────────
 * §12 — Selection board grid (State 2) — design-doc CardBoard component
 *
 * Translates the design's <CardBoard> JSX (line 1404 of the design doc)
 * into real CSS scoped to the rebuilt two-state daily layout. Matches:
 *   - 4-column grid with 14px row gap / 6px column gap
 *   - centered slots, max 64px wide each, aspect-ratio 1568/2720
 *     (so the real card-back PNG fills the slot without cropping)
 *   - card-slot fallback gradient comes from phase-3-redesign.css §2
 *     (visible only when the per-deck 00-back.webp fails to load)
 *   - selected: translateY(-4px) lift + radial gold-pink aura ::after
 *   - has-selection on parent: unselected slots dim to opacity 0.55
 *   - hover: subtle lift
 *
 * Rules scoped to .daily-state--board so they only apply on the rebuilt
 * daily.html / th/daily.html (not on /today/ which lacks .daily-shell).
 * Specificity (0,3,2) beats styles.css's .card-slot rules (0,2,0); source
 * order also wins (daily.css loads after styles.css).
 * ───────────────────────────────────────────────────────────────────────── */

/* All §12 rules use the #daily-board ID selector to win against the
 * styles.css mobile rules (line 6432-6498) that use the same ID at
 * specificity (1,3,1). Without the ID my class-only rules lose on mobile
 * even though source order favors me. With #daily-board mine reach
 * (1,4,2) — clean win on every viewport.
 *
 * Defensive pointer-events: none on the .is-selected ::before/::after so
 * neither the glow nor any future overlay can intercept taps on cards or
 * the Continue button below. */
body[data-page='daily'] .daily-state--board #daily-board.card-board--daily {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: none;
  gap: 14px 6px;
  place-items: center;
  width: auto;
  max-width: 320px;
  max-height: none;
  margin: 14px auto 0;
  padding: 4px 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

body[data-page='daily'] .daily-state--board #daily-board .card-slot {
  position: relative;
  width: 100%;
  max-width: 64px;
  height: auto;
  max-height: none;
  aspect-ratio: 1568 / 2720;
  border-radius: 6px;
  border: 0.5px solid var(--mt-gold-pale);
  overflow: hidden;
  background: var(--mt-card-back-deep);
  box-shadow: 0 6px 12px -6px rgba(61, 26, 92, 0.50);
  opacity: 1;
  transform: none;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  cursor: pointer;
  padding: 0;
}

body[data-page='daily'] .daily-state--board #daily-board .card-slot .card-back {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dim unselected slots once a selection exists. */
body[data-page='daily'] .daily-state--board #daily-board.has-selection .card-slot:not(.is-selected) {
  opacity: 0.55;
  transform: none;
}

/* Selected state: lift + warm aura glow behind the card. */
body[data-page='daily'] .daily-state--board #daily-board .card-slot.is-selected {
  transform: translateY(-4px);
  opacity: 1;
  border-color: var(--mt-gold-deep);
  box-shadow: 0 10px 24px -8px rgba(232, 103, 138, 0.55);
}

body[data-page='daily'] .daily-state--board #daily-board .card-slot.is-selected::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 12px;
  background: radial-gradient(
    circle,
    rgba(201, 147, 58, 0.60) 0%,
    rgba(232, 103, 138, 0.25) 45%,
    transparent 70%
  );
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}

/* Defensive: ensure ANY ::before / ::after on a selected slot is tap-
 * transparent, including the styles.css "✓" badge at line 1651 which
 * lacks pointer-events: none in its original definition. */
body[data-page='daily'] .daily-state--board #daily-board .card-slot.is-selected::before,
body[data-page='daily'] .daily-state--board #daily-board .card-slot.is-selected::after {
  pointer-events: none;
}

/* Subtle hover lift for unselected slots. */
body[data-page='daily'] .daily-state--board #daily-board .card-slot:hover:not(.is-selected):not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(61, 26, 92, 0.40);
  border-color: var(--mt-gold-deep);
}

body[data-page='daily'] .daily-state--board #daily-board .card-slot:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}


/* §13 — Shuffle button (above the board) */
body[data-page='daily'] .daily-shuffle-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

body[data-page='daily'] .daily-shuffle-btn {
  font-family: var(--mt-font-body);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px 9px 14px;
  border-radius: var(--mt-radius-pill);
  color: var(--mt-plum);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(212, 154, 44, 0.45);
  box-shadow: 0 6px 16px -8px rgba(61, 26, 92, 0.40),
              inset 0 1px 0 rgba(255, 255, 255, 0.70);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.2s ease;
}

body[data-page='daily'] .daily-shuffle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(61, 26, 92, 0.50),
              inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
body[data-page='daily'] .daily-shuffle-btn:active { transform: scale(0.97); }
body[data-page='daily'] .daily-shuffle-btn:disabled { cursor: default; opacity: 0.62; }

body[data-page='daily'] .daily-shuffle-btn__ico {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mt-gold-deep), var(--mt-rose));
  color: var(--mt-cream); font-size: 14px; font-weight: 700; line-height: 1;
}
body[data-page='daily'] .daily-shuffle-btn.is-spinning .daily-shuffle-btn__ico {
  animation: daily-shuffle-spin 0.62s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes daily-shuffle-spin { to { transform: rotate(360deg); } }

body[data-page='daily'] .daily-shuffle-btn__sep { opacity: 0.35; font-weight: 400; margin: 0 -2px; }
body[data-page='daily'] .daily-shuffle-btn .thai { font-family: var(--mt-font-thai); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  body[data-page='daily'] .daily-shuffle-btn.is-spinning .daily-shuffle-btn__ico { animation: none; }
}