/* ===== tic-tac-toe widget — /css/ttt.css
   One file, 7 theme skins via [data-template] attribute.
   The widget inherits its font + background from the profile theme CSS
   that loads first. These rules only control widget-specific elements.
======================================================= */

/* ---------- per-template tokens ---------- */
/* Each block sets 4 custom properties read by the rules below.
   CSS custom properties cascade into the widget from the data-template
   attribute on the <section class="ttt-widget"> element. */

.ttt-widget[data-template="y2k-pink"] {
  --ttt-x:          "✨";
  --ttt-o:          "💖";
  --ttt-board-bg:   linear-gradient(180deg, #FFB6C1, #FF1493);
  --ttt-sq-bg:      #FFE6F0;
  --ttt-sq-border:  #FF69B4;
  --ttt-btn:        #FF69B4;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "u lost 💕 send him one →";
}
.ttt-widget[data-template="dark-edgy"] {
  --ttt-x:          "🖤";
  --ttt-o:          "⛓️";
  --ttt-board-bg:   #1A1A1A;
  --ttt-sq-bg:      #2D0000;
  --ttt-sq-border:  #FF0000;
  --ttt-btn:        #FF0000;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "L. now u owe me 🥀";
}
.ttt-widget[data-template="baddie"] {
  --ttt-x:          "🤎";
  --ttt-o:          "✨";
  --ttt-board-bg:   #DCC6A9;
  --ttt-sq-bg:      #F5E6D3;
  --ttt-sq-border:  #8B7355;
  --ttt-btn:        #8B7355;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "denied 💔";
}
.ttt-widget[data-template="boujee-luxury"] {
  --ttt-x:          "👑";
  --ttt-o:          "💎";
  --ttt-board-bg:   #0D0D0D;
  --ttt-sq-bg:      #2C2C2C;
  --ttt-sq-border:  #D4AF37;
  --ttt-btn:        #D4AF37;
  --ttt-btn-text:   #000;
  --ttt-roast:      "better luck next time, babe ✨";
}
.ttt-widget[data-template="bbw-bold"] {
  --ttt-x:          "🌟";
  --ttt-o:          "🦋";
  --ttt-board-bg:   linear-gradient(180deg, #FF6B35, #7C4DFF);
  --ttt-sq-bg:      #FFE0CC;
  --ttt-sq-border:  #FF4081;
  --ttt-btn:        #FF4081;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "L bestie 💛";
}
.ttt-widget[data-template="bratz-girl"],
.ttt-widget[data-template="bratz"] {
  --ttt-x:          "💋";
  --ttt-o:          "💜";
  --ttt-board-bg:   #1A1A2E;
  --ttt-sq-bg:      #4A0E4E;
  --ttt-sq-border:  #FF1493;
  --ttt-btn:        #FF1493;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "sit down. text me. 💋";
}
.ttt-widget[data-template="barbie-girl"] {
  --ttt-x:          "💖";
  --ttt-o:          "🎀";
  --ttt-board-bg:   #FFB6C1;
  --ttt-sq-bg:      #FFE6F0;
  --ttt-sq-border:  #FF69B4;
  --ttt-btn:        #FF69B4;
  --ttt-btn-text:   #FF1493;
  --ttt-roast:      "you lost the game, win me 💕";
}
/* batman theme: adapt to the dark profile context */
.ttt-widget[data-template="batman"] {
  --ttt-x:          "🦇";
  --ttt-o:          "⚡";
  --ttt-board-bg:   #0a0a0a;
  --ttt-sq-bg:      #1a0000;
  --ttt-sq-border:  #e50914;
  --ttt-btn:        #e50914;
  --ttt-btn-text:   #fff;
  --ttt-roast:      "the night always wins. 🦇";
}

/* 8th template: tic-tac-toe-challenge — red/pink "game show" vibe, ❌⭕ glyphs */
.ttt-widget[data-template="tic-tac-toe-challenge"] {
  --ttt-x:         "❌";
  --ttt-o:         "⭕";
  --ttt-board-bg:  #FF69B4;
  --ttt-sq-bg:     #FFE6F0;
  --ttt-sq-border: #FF1493;
  --ttt-btn:       #FF1493;
  --ttt-btn-text:  #fff;
  --ttt-roast:     "u can't win 💕";
}

/* ---------- widget shell ---------- */
.ttt-widget {
  position: relative;       /* stacking context so the overlay covers only this section */
}

.ttt-sub {
  margin: 0 0 12px;
  font-size: 13px;
  opacity: 0.8;
  text-align: center;
}

/* ---------- board ---------- */
.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--ttt-board-bg, #1A1A2E);
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 12px;
  max-width: 240px;
}

/* ---------- squares ---------- */
.ttt-square {
  width: 100%;
  aspect-ratio: 1;
  min-height: 60px;         /* minimum tap target per brief */
  background: var(--ttt-sq-bg, #4A0E4E);
  border: 2px solid var(--ttt-sq-border, #FF1493);
  border-radius: 8px;
  font-size: 0;             /* hide the empty button text */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease;
  padding: 0;
}
.ttt-square:hover:not(:disabled) { transform: scale(1.05); }
.ttt-square:disabled { cursor: default; }

/* Glyphs are rendered via ::before with CSS content property — zero markup per brief. */
.ttt-square.x::before { content: var(--ttt-x, "💋"); font-size: 2rem; }
.ttt-square.o::before { content: var(--ttt-o, "💜"); font-size: 2rem; }

/* ---------- status line ---------- */
.ttt-status {
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 8px;
  min-height: 18px;
}

/* ---------- overlay (YOU LOST / draw) ---------- */
.ttt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  text-align: center;
  z-index: 10;
  gap: 12px;
  opacity: 0;
  animation: ttt-fadein 0.35s ease forwards;
}
.ttt-overlay[hidden] { display: none; }

@keyframes ttt-fadein {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.ttt-result {
  margin: 0;
  font-size: 24px;
  color: var(--ttt-btn, #FF1493);
  text-shadow: 0 0 12px var(--ttt-btn, #FF1493);
}

.ttt-roast-text {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}

/* ---------- circular reveal video (samszn v1) ---------- */
.ttt-reveal {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ttt-btn, #FF1493);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: ttt-reveal-drop 0.5s ease-out 0.5s forwards; /* 500ms delay per brief */
}
@keyframes ttt-reveal-drop {
  from { transform: translateY(-60px) scale(0.6); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}

.ttt-reveal-caption {
  font-size: 13px;
  opacity: 0.75;
  margin: 0;
  max-width: 260px;
}

/* ---------- overlay CTAs ---------- */
.ttt-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ttt-btn, #FF1493);
  color: var(--ttt-btn-text, #fff);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  text-transform: lowercase;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 14px var(--ttt-btn, #FF1493);
}
.ttt-btn-secondary {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  opacity: 0.7;
  cursor: pointer;
}

/* CTAs that need a delay to appear (after video plays) */
.ttt-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: ttt-fadein 0.4s ease forwards;
}
/* default: show immediately for non-reveal overlays */
.ttt-ctas.instant { animation-delay: 0s; }
/* delayed for reveal-video overlays: N + 200ms after video ends (video ~3-5s + 500ms drop + 200ms) */
.ttt-ctas.delayed { animation-delay: 5.2s; }

/* ---------- draw overlay ---------- */
.ttt-draw-text {
  font-size: 20px;
  margin: 0;
}

/* ---------- mobile tweaks ---------- */
@media (max-width: 375px) {
  .ttt-board { max-width: 210px; }
  .ttt-reveal { width: 180px; height: 180px; }
  .ttt-result { font-size: 20px; }
}