/* ─── TipDeck — game SEO landing pages ─────────────────────────────────────
   Layered on top of /guides/styles.css. Adds per-game accent palettes
   (body[data-game="…"]) and a small set of components specific to the
   "tool-deep-dive" page shape (wheel mock, video placeholder, slices strip).
*/

/* ─── per-game accent palettes ───────────────────────────────────────────── */
body[data-game="wheel"] {
  --accent: #F59E0B;
  --accent-2: #D97706;
  --accent-soft: rgba(245,158,11,0.12);
  --accent-ring: rgba(245,158,11,0.32);
  --accent-text: #FCD34D;
}
body[data-game="lucky"] {
  --accent: #22D3EE;
  --accent-2: #0891B2;
  --accent-soft: rgba(34,211,238,0.12);
  --accent-ring: rgba(34,211,238,0.32);
  --accent-text: #A5F3FC;
}
body[data-game="timer"] {
  --accent: #EF4444;
  --accent-2: #DC2626;
  --accent-soft: rgba(239,68,68,0.12);
  --accent-ring: rgba(239,68,68,0.32);
  --accent-text: #FCA5A5;
}
body[data-game="goal"] {
  --accent: #22C55E;
  --accent-2: #16A34A;
  --accent-soft: rgba(34,197,94,0.12);
  --accent-ring: rgba(34,197,94,0.32);
  --accent-text: #BBF7D0;
}
body[data-game="hype"] {
  --accent: #EC4899;
  --accent-2: #DB2777;
  --accent-soft: rgba(236,72,153,0.12);
  --accent-ring: rgba(236,72,153,0.32);
  --accent-text: #FBCFE8;
}
body[data-game="vote"] {
  --accent: #3B82F6;
  --accent-2: #2563EB;
  --accent-soft: rgba(59,130,246,0.12);
  --accent-ring: rgba(59,130,246,0.32);
  --accent-text: #BFDBFE;
}
body[data-game="alert"] {
  --accent: #8B5CF6;
  --accent-2: #7C3AED;
  --accent-soft: rgba(139,92,246,0.12);
  --accent-ring: rgba(139,92,246,0.30);
  --accent-text: #C4B5FD;
}
body[data-game="feed"] {
  --accent: #06B6D4;
  --accent-2: #0891B2;
  --accent-soft: rgba(6,182,212,0.12);
  --accent-ring: rgba(6,182,212,0.32);
  --accent-text: #A5F3FC;
}
body[data-game="menu"] {
  --accent: #A855F7;
  --accent-2: #7C3AED;
  --accent-soft: rgba(168,85,247,0.12);
  --accent-ring: rgba(168,85,247,0.32);
  --accent-text: #DDD6FE;
}

/* ─── crumb pill, repurposed ─────────────────────────────────────────────── */
.crumb .g-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  color: var(--accent-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}

/* ─── WHEEL hero mock ────────────────────────────────────────────────────── */
.wheel-mock {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--r-lg);
  background:
    radial-gradient(700px 400px at 60% 35%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #08080F, #03030A);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255,255,255,0.03),
              inset 0 0 0 1px var(--accent-ring);
}
.wheel-mock::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%);
  filter: blur(40px); opacity: .55;
}
.wheel-mock .chip-row {
  position: absolute; top: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 3;
}
.wheel-mock .game-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--accent-ring);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--accent-text);
  backdrop-filter: blur(8px);
}
.wheel-mock .game-chip .live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--red);
  color: white; font-size: 10px;
}
.wheel-mock .game-chip .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: white; box-shadow: 0 0 0 0 white;
  animation: pulse 1.4s ease-in-out infinite;
}
.wheel-mock .pot {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.wheel-mock .pot b { color: var(--accent-text); }

.wheel-mock .wheel-stage {
  position: absolute;
  left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  width: 65%;
  aspect-ratio: 1 / 1;
  z-index: 2;
}
.wheel-mock .wheel-stage svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 30px var(--accent-ring));
  /* Lands cleanly on DJ PICK (slice centre = 180°, so final rotation ≡ 180° mod 360).
     Decelerates into the slice and settles with a tiny bounce that stays well
     inside the ±22.5° slice — no more boundary jump from one label to the next. */
  animation: wheel-spin 14s cubic-bezier(.16,.74,.2,1) infinite;
}
@keyframes wheel-spin {
  0%   { transform: rotate(0deg); }
  62%  { transform: rotate(1266deg); }   /* coast just past DJ PICK centre */
  72%  { transform: rotate(1256deg); }   /* settle back */
  80%, 100% { transform: rotate(1260deg); } /* rest exactly on DJ PICK */
}
.wheel-mock .wheel-ptr {
  position: absolute;
  /* The wheel-stage is centered at top:54%, width 65% (aspect 1:1).
     Mock aspect 4/3.2 ⇒ stage half-height (in % of mock height) = 65 × 1.25 / 2 ≈ 40.6%.
     So wheel rim top sits at 54% − 40.6% = ~13.4% of mock height.
     We anchor the pointer center there so its tip pokes slightly into the rim. */
  left: 50%;
  top: 13.4%;
  transform: translate(-50%, -50%);
  width: 22px; height: 32px;
  z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.wheel-mock .wheel-ptr svg { width: 100%; height: 100%; }
.wheel-mock .wheel-hub {
  position: absolute;
  left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  width: 14%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a36, #0c0c12);
  border: 2px solid var(--accent-ring);
  box-shadow: 0 0 24px var(--accent-ring), inset 0 0 12px rgba(0,0,0,0.6);
  z-index: 3;
}

.wheel-mock .tip-feed {
  position: absolute; right: 16px; bottom: 90px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 56%; align-items: flex-end;
  z-index: 4;
}
.wheel-mock .tip {
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--accent-ring);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text);
  font-family: var(--font-mono);
  backdrop-filter: blur(8px);
  animation: tip-in 8s ease infinite;
  white-space: nowrap;
}
.wheel-mock .tip:nth-child(2) { animation-delay: 2s; }
.wheel-mock .tip:nth-child(3) { animation-delay: 4s; }
.wheel-mock .tip b { color: var(--accent-text); }
.wheel-mock .tip i { color: var(--accent); font-style: normal; font-weight: 700; }

.wheel-mock .result-ovl {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.78);
  border-radius: 10px;
  border: 1px solid var(--accent-ring);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  z-index: 4;
}
.wheel-mock .result-ovl .lbl {
  font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 700;
}
.wheel-mock .result-ovl .prize {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700;
  color: var(--accent-text);
  text-shadow: 0 0 12px var(--accent-ring);
}
.wheel-mock .result-ovl .badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  padding: 3px 7px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-ring);
}

/* ─── VIDEO placeholder block ────────────────────────────────────────────── */
.video-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 320px at 50% 30%, var(--accent-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid; place-items: center;
}
.video-wrap::before {
  /* a subtle "filmstrip" pattern to imply video */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,0.014) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.012) 38px 39px);
  pointer-events: none;
}
.video-wrap .v-inner {
  position: relative;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  padding: 0 28px;
}
.video-wrap .play-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: #0B0B10;
  box-shadow: 0 14px 32px -8px var(--accent-ring), 0 0 0 8px var(--accent-soft);
  cursor: not-allowed;
  position: relative;
}
.video-wrap .play-btn svg { width: 28px; height: 28px; margin-left: 4px; }
.video-wrap .play-btn::after {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent-ring);
  animation: ring-pulse 2.2s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%   { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
.video-wrap .v-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
}
.video-wrap .v-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
  max-width: 540px;
  text-wrap: balance;
}
.video-wrap .v-meta {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--text-faint);
  letter-spacing: 0.04em;
}
.video-wrap .v-meta b { color: var(--text-muted); }

/* corner timecodes for the filmstrip vibe */
.video-wrap .tc {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}
.video-wrap .tc.tl { top: 14px; left: 16px; }
.video-wrap .tc.tr { top: 14px; right: 16px; }
.video-wrap .tc.bl { bottom: 14px; left: 16px; }
.video-wrap .tc.br { bottom: 14px; right: 16px; }

/* ─── SLICES strip (wheel composition example) ───────────────────────────── */
.slices-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 24px;
}
.slice-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.slice-pill .sw {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--c, var(--accent));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.slice-pill .wt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
}

/* ─── SCREENSHOT placeholder ─────────────────────────────────────────────── */
.shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(255,255,255,0.025) 14px 15px),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px dashed var(--border-strong);
  display: grid; place-items: center;
  text-align: center;
  padding: 20px;
  position: relative;
}
.shot .label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  max-width: 240px;
  line-height: 1.5;
}
.shot .label b {
  display: block;
  color: var(--accent-text);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Real screenshot — override placeholder styles */
.shot:has(img) {
  aspect-ratio: unset;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  place-items: unset;
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r) var(--r) 0 0;
  cursor: zoom-in;
}
.shot:has(img) .label {
  padding: 10px 14px;
  max-width: none;
}
.shots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0 0;
}
.shots-grid.shots-solo {
  grid-template-columns: 1fr;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .shots-grid { grid-template-columns: 1fr; }
}

/* ─── Lightbox ───────────────────────────────────────────────────────────── */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  padding: 24px;
}
.lb-img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(0,0,0,.7);
}

/* ─── games-related strip — color marks ──────────────────────────────────── */
.related-card[data-g="wheel"]  .pmark { background: linear-gradient(135deg,#F59E0B,#D97706); color: #1a1100; }
.related-card[data-g="lucky"]  .pmark { background: linear-gradient(135deg,#22D3EE,#0891B2); color: #00171a; }
.related-card[data-g="timer"]  .pmark { background: linear-gradient(135deg,#EF4444,#DC2626); }
.related-card[data-g="goal"]   .pmark { background: linear-gradient(135deg,#22C55E,#16A34A); color: #001a05; }
.related-card[data-g="hype"]   .pmark { background: linear-gradient(135deg,#EC4899,#DB2777); }
.related-card[data-g="vote"]   .pmark { background: linear-gradient(135deg,#3B82F6,#2563EB); }
.related-card[data-g="alert"]  .pmark { background: linear-gradient(135deg,#8B5CF6,#7C3AED); }
.related-card[data-g="feed"]   .pmark { background: linear-gradient(135deg,#06B6D4,#0891B2); }
.related-card[data-g="menu"]   .pmark { background: linear-gradient(135deg,#A855F7,#7C3AED); }

.hub-card[data-g="wheel"]  .pmark { background: linear-gradient(135deg,#F59E0B,#D97706); color: #1a1100; }
.hub-card[data-g="lucky"]  .pmark { background: linear-gradient(135deg,#22D3EE,#0891B2); color: #00171a; }
.hub-card[data-g="timer"]  .pmark { background: linear-gradient(135deg,#EF4444,#DC2626); }
.hub-card[data-g="goal"]   .pmark { background: linear-gradient(135deg,#22C55E,#16A34A); color: #001a05; }
.hub-card[data-g="hype"]   .pmark { background: linear-gradient(135deg,#EC4899,#DB2777); }
.hub-card[data-g="vote"]   .pmark { background: linear-gradient(135deg,#3B82F6,#2563EB); }

/* ─── SKIN STRIP — carousel of overlay variants below the main mock ──────── */
.skin-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.skin-strip[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.skin-strip[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }

.skin-thumb {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  padding: 8px 6px 6px;
  cursor: default;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.skin-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--accent-ring);
  box-shadow: 0 6px 18px -10px var(--accent-ring);
}
.skin-thumb.active {
  border-color: var(--accent-ring);
  box-shadow:
    0 0 0 1px var(--accent-ring) inset,
    0 8px 24px -12px var(--accent-ring);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.skin-thumb.active::after {
  content: "current";
  position: absolute; top: 4px; right: 4px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text);
  padding: 1px 5px; border-radius: 3px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
}

.skin-render {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #06060B;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.04);
}
.skin-label {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skin-thumb.active .skin-label { color: var(--accent-text); }

/* ─── reusable mini-overlay primitives inside .skin-render ───────────────── */
.skin-render .so-bar {
  position: absolute; left: 8%; right: 8%;
  height: 18%;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.skin-render .so-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.skin-render .so-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.skin-render .so-big {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  text-shadow: 0 0 10px var(--accent-ring);
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  .skin-strip { grid-template-columns: repeat(2, 1fr); }
  .skin-strip[data-cols="3"],
  .skin-strip[data-cols="5"] { grid-template-columns: repeat(2, 1fr); }
}

/* ─── text width + justify — timer (pending approval before rollout) ─────── */
body[data-game] .guide-section .lead,
body[data-game] .guide-section p {
  max-width: none;
  text-align: justify;
}
body[data-game] .guide-section ul.bullets {
  max-width: none;
}
body[data-game] .guide-section ul.bullets li {
  text-align: justify;
}

/* ─── responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .wheel-mock .wheel-stage { width: 78%; }
  /* stage width 78% ⇒ half-height ≈ 48.75% of mock height ⇒ rim top ≈ 5.25% */
  .wheel-mock .wheel-ptr { top: 5.25%; }
  .wheel-mock .tip-feed { max-width: 70%; }
  .video-wrap .v-title { font-size: 18px; }
}