*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #11093a;
  --accent:   #f97316;
  --accent-h: #fb923c;
  --purple:   #7c3aed;
  --card:     rgba(255,255,255,0.07);
  --card-b:   rgba(255,255,255,0.13);
  --white:    #ffffff;
  --muted:    rgba(255,255,255,0.55);
  --radius:   20px;
  --gap:      16px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Mesh Gradient Background ── */
.mesh-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
}
.mb1 {
  width: 600px; height: 600px;
  background: #7c3aed;
  top: -100px; left: -100px;
  animation: blob1 18s ease-in-out infinite alternate;
}
.mb2 {
  width: 500px; height: 500px;
  background: #f97316;
  top: 20%; right: -120px;
  animation: blob2 22s ease-in-out infinite alternate;
}
.mb3 {
  width: 700px; height: 700px;
  background: #4f1ca8;
  bottom: 10%; left: 20%;
  animation: blob3 26s ease-in-out infinite alternate;
}
.mb4 {
  width: 400px; height: 400px;
  background: #ff1493;
  top: 50%; left: 60%;
  animation: blob4 20s ease-in-out infinite alternate;
}
.mb5 {
  width: 450px; height: 450px;
  background: #0ea5e9;
  bottom: -80px; right: 10%;
  animation: blob5 24s ease-in-out infinite alternate;
}
@keyframes blob1 { 0%{transform:translate(0,0) scale(1)}   100%{transform:translate(180px,120px) scale(1.2)} }
@keyframes blob2 { 0%{transform:translate(0,0) scale(1)}   100%{transform:translate(-140px,160px) scale(0.9)} }
@keyframes blob3 { 0%{transform:translate(0,0) scale(1)}   100%{transform:translate(100px,-180px) scale(1.15)} }
@keyframes blob4 { 0%{transform:translate(0,0) scale(1)}   100%{transform:translate(-160px,80px) scale(1.3)} }
@keyframes blob5 { 0%{transform:translate(0,0) scale(1)}   100%{transform:translate(-120px,-140px) scale(0.85)} }

/* ── Stars ── */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.star { position: absolute; color: rgba(255,255,255,0.3); animation: twinkle 3s ease-in-out infinite alternate; }
.s1{top:8%;left:12%;font-size:.7rem;animation-delay:0s}
.s2{top:20%;left:82%;font-size:1.1rem;animation-delay:.8s}
.s3{top:45%;left:5%;font-size:.8rem;animation-delay:1.5s}
.s4{top:65%;left:90%;font-size:.6rem;animation-delay:.4s}
.s5{top:80%;left:20%;font-size:.9rem;animation-delay:1.2s}
.s6{top:90%;left:70%;font-size:.7rem;animation-delay:.2s}
@keyframes twinkle{0%{opacity:.2;transform:scale(.8)}100%{opacity:1;transform:scale(1.2)}}

/* ── LIVE BANNER ── */
.live-banner {
  position: relative;
  display: flex;
  align-items: center;
  background: #0e0020;
  border-bottom: 2px solid #9146ff;
  overflow: hidden;
  z-index: 101;
}
.live-info {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #1a0040 0%, #0e0020 100%);
}
.live-divider {
  font-size: 1.2rem;
  opacity: 0.4;
  flex-shrink: 0;
}
.live-desc { display: none; }
.live-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 8px #ff4444;
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}
.live-label {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: #ff4444;
  background: rgba(255,68,68,0.15);
  border: 1px solid rgba(255,68,68,0.4);
  border-radius: 4px;
  padding: 2px 8px;
}
.live-channel {
  font-size: 1.4rem;
  font-weight: 900;
  color: #9146ff;
}
.live-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 320px;
}
.live-watch-btn {
  display: inline-block;
  padding: 10px 22px;
  background: #9146ff;
  color: #fff;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  width: fit-content;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(145,70,255,0.4);
}
.live-watch-btn:hover { background: #a970ff; transform: translateY(-1px); }
/* TikTok side */
.live-info-tiktok {
  background: linear-gradient(135deg, #001020 0%, #00050f 100%);
  border-right: 1px solid rgba(254,44,85,0.25);
}
.live-dot-tiktok { background: #fe2c55; box-shadow: 0 0 8px #fe2c55; }
.live-label-tiktok { color: #fe2c55; background: rgba(254,44,85,0.15); border-color: rgba(254,44,85,0.4); }
.live-channel-tiktok { color: #69c9d0; }
.live-watch-tiktok {
  background: linear-gradient(90deg, #fe2c55, #ee1d52);
  box-shadow: 0 4px 18px rgba(254,44,85,0.4);
}
.live-watch-tiktok:hover { background: linear-gradient(90deg, #ff4d6d, #fe2c55); }

.live-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--muted);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.live-close:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 0 40px; height: 68px;
  background: rgba(17,9,58,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-logo { display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;font-size:1.05rem;flex-shrink:0; }
.logo-mark { width:38px;height:38px;background:linear-gradient(135deg,var(--purple),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.nav-links { display:flex;list-style:none;gap:4px;background:rgba(255,255,255,0.07);border-radius:100px;padding:4px;margin:0 auto; }
.nav-links a { display:block;padding:7px 18px;border-radius:100px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.9rem;transition:color .2s,background .2s; }
.nav-links a.active,.nav-links a:hover { color:#fff;background:rgba(255,255,255,0.12); }
.nav-actions { display:flex;gap:10px;align-items:center;flex-shrink:0; }
.btn-ghost { padding:8px 20px;border-radius:100px;border:1px solid rgba(255,255,255,0.25);background:transparent;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;transition:border-color .2s,background .2s;cursor:pointer; }
.btn-ghost:hover { background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.45); }
.btn-cta { padding:9px 22px;border-radius:100px;background:var(--accent);color:#fff;font-weight:800;font-size:.9rem;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s; }
.btn-cta:hover { background:var(--accent-h);transform:translateY(-1px); }
.btn-cta.large,.btn-ghost.large { padding:14px 32px;font-size:1rem; }
.nav-hamburger { display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;margin-left:auto; }
.nav-hamburger span { display:block;width:24px;height:2px;background:#fff;border-radius:2px; }

/* ── HERO ── */
.hero {
  position:relative;min-height:480px;display:grid;
  grid-template-columns:1fr 1fr;align-items:center;gap:40px;
  padding:60px 40px 80px;
  background:#0d0826;
  overflow:hidden;
}
.hero-video-bg {
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-video-bg video {
  width:100%; height:100%; object-fit:cover; opacity:0.72;
  object-position:center 0%;
  animation:video-scroll 8s ease-in-out infinite alternate;
}
@keyframes video-scroll {
  0%   { object-position: center 0%; }
  100% { object-position: center 80%; }
}
/* edge fades — top into nav, bottom into stats ribbon */
.hero-video-bg::before,
.hero-video-bg::after {
  content:''; position:absolute; left:0; right:0; z-index:1; pointer-events:none;
}
.hero-video-bg::before { top:0; height:100px; background:linear-gradient(to bottom, #0d0826, transparent); }
.hero-video-bg::after  { bottom:0; height:120px; background:linear-gradient(to top, var(--bg), transparent); }
.hero-content,.hero-visual,.hero-watermark { position:relative; z-index:1; }
.hero-eyebrow { font-size:.85rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:12px; }
.hero-title { font-weight:900;font-size:clamp(3rem,7vw,5.5rem);line-height:1;margin-bottom:20px; }
.hero-title em { font-style:italic;background:linear-gradient(90deg,#c4b5fd,#f9a8d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-sub { color:rgba(255,255,255,.75);font-size:1.05rem;line-height:1.65;margin-bottom:32px;max-width:420px; }
.hero-ctas { display:flex;gap:14px;flex-wrap:wrap; }
.hero-visual { display:flex;justify-content:center;align-items:center; }
.hero-photo-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  animation: float 5s ease-in-out infinite alternate;
}
@keyframes float{0%{transform:translateY(0)}100%{transform:translateY(-16px)}}
.hero-photo {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(249,115,22,.5), 0 0 40px rgba(249,115,22,.3), 0 8px 40px rgba(0,0,0,.5);
}
.hero-photo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(249,115,22,.35);
  animation: spin-slow 20s linear infinite;
}
@keyframes spin-slow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.orbit-icon { position:absolute;font-size:1.8rem;animation:orbit 8s linear infinite;z-index:2; }
.o1{animation-delay:0s}.o2{animation-delay:-2s}.o3{animation-delay:-4s}.o4{animation-delay:-6s}
@keyframes orbit{0%{transform:rotate(0) translateX(170px) rotate(0)}100%{transform:rotate(360deg) translateX(170px) rotate(-360deg)}}
.hero-watermark { position:absolute;bottom:-20px;left:-10px;font-size:clamp(5rem,15vw,10rem);font-weight:900;color:rgba(255,255,255,.04);pointer-events:none;white-space:nowrap; }

/* ── TILES SECTION ── */
.tiles-section { padding:60px 40px 80px;background:transparent;position:relative;z-index:1; }
/* ── MARQUEE ── */
.marquee-band {
  overflow: hidden;
  background: var(--accent);
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: .14em;
  color: #fff;
  white-space: nowrap;
}
.mq-dot { font-size: 1rem; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 320px 280px 320px 280px 340px 280px 300px 260px;
  gap: var(--gap);
  max-width: 1280px;
  margin:0 auto;
}

/* ── BENTO PLACEMENT ── */
/* — Zone 1: Music — */
.tile-spotify    { grid-column: 1 / 3; grid-row: 1; }
.tile-soundcloud { grid-column: 3;     grid-row: 1; }
.tiles-grid .tile:nth-child(7)  { grid-column: 1;     grid-row: 2; }   /* YT video */
.tile-dogfacts                  { grid-column: 2 / 4; grid-row: 2; }   /* YT music video wide */

/* — Zone 2: Follow — */
.tile-tiktok     { grid-column: 1;     grid-row: 3 / 5; }              /* tall */
.tile-shorts     { grid-column: 2;     grid-row: 3; }
.tiles-grid .tile:nth-child(8)  { grid-column: 3;     grid-row: 3; }   /* wallpack teaser */
.tile-mood       { grid-column: 2 / 4; grid-row: 4; }

/* — Zone 3: Shop — */
.tile-shop       { grid-column: 1 / 3; grid-row: 5; }
.tile-game       { grid-column: 3;     grid-row: 5 / 8; }              /* tall */
.tile-book       { grid-column: 1 / 3; grid-row: 6; }

/* — Zone 4: Play — */
.tile-art        { grid-column: 1 / 3; grid-row: 7; }
.tile-shoutout   { grid-column: 1 / 4; grid-row: 8; }                  /* full width */

/* ── BASE TILE ── */
.tile {
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s;
  backdrop-filter:blur(12px);
}
.tile:hover { transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(124,58,237,0.3), 0 0 40px rgba(124,58,237,0.12); }

/* ── LABEL BAR ── */
.tile-label {
  display:flex;align-items:center;gap:8px;
  padding:10px 14px 9px;
  font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.lbl-icon { width:15px;height:15px;flex-shrink:0; }
.spotify-green { color:#1db954; }
.yt-red        { color:#ff0000; }
.ig-icon       { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── SPOTIFY ── */
.tile-spotify iframe { flex:1;display:block;min-height:0; }

/* ── IFRAME EMBED (Game / Shop) ── */
.embed-wrap {
  position:relative;flex:1;min-height:0;
}
.embed-wrap iframe {
  position:absolute;inset:0;width:100%;height:100%;border:none;display:block;
}

.embed-loader {
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(17,9,58,.9);pointer-events:none;
  transition:opacity .4s;
}
.embed-loader p { font-size:.85rem;color:var(--muted); }

.spinner {
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.embed-fallback {
  display:none;
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  padding:10px 22px;background:var(--accent);color:#fff;
  border-radius:100px;font-weight:800;font-size:.85rem;
  text-decoration:none;white-space:nowrap;z-index:3;
  transition:background .2s;
}
.embed-fallback:hover { background:var(--accent-h); }
.embed-fallback.visible { display:block; }

/* ── SHOP CAROUSEL ── */
.tile-shop {
  background: linear-gradient(160deg, #0d0820 0%, #1a0a30 60%, #0d0820 100%);
  overflow: hidden;
}

.shop-carousel {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Neon "Shop Gear" — overlaid on white slide */
.shop-neon-header {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
.shop-neon-line {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
  color: #e91e8c;
  text-shadow:
    0 0 4px #fff,
    0 0 10px #ff69b4,
    0 0 22px #ff1493;
  line-height: 1;
}

/* Slide track — fills entire carousel area */
.shop-track-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
}

.shop-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Individual product card — fills tile */
.shop-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

/* Image fills remaining card height, shows full product */
.shop-slide-img-wrap {
  width: 100%;
  flex: 1;
  min-height: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 6px 0;
}

.shop-slide-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* full product always visible, no cropping */
  display: block;
  transition: transform 0.3s;
}
.shop-slide:hover .shop-slide-img-wrap img { transform: scale(1.03); }

/* Name bar — fixed at very bottom of tile */
.shop-slide-info {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  background: #fff;
  flex-shrink: 0;
  border-top: 1px solid #f0e0ec;
  display: flex;
  align-items: center;
}
.shop-slide-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #111;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}


/* Navigation — overlaid just above the name bar */
.shop-nav {
  position: absolute;
  bottom: 38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.shop-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,20,147,0.12);
  border: 1px solid rgba(255,20,147,0.3);
  color: #e91e8c;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.shop-arrow:hover { background: rgba(255,20,147,0.25); transform: scale(1.1); }

.shop-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: 180px; }
.shop-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(233,30,140,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none; flex-shrink: 0;
}
.shop-dot.active { background: #e91e8c; transform: scale(1.3); }


/* ── GAME PREVIEW ── */
.tile-game { overflow: hidden; }

.gp-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.gp-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.gp-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.25s;
  text-decoration: none;
}
.gp-play-overlay:hover { background: rgba(0,0,0,0.38); }

.gp-play-btn {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  padding: 14px 32px;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  pointer-events: none;
}
.gp-play-overlay:hover .gp-play-btn {
  opacity: 1;
  transform: scale(1);
}

/* ── MAKE ART ── */
.tile-art { background:rgba(10,6,40,.7); }
.art-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;flex-wrap:wrap;gap:8px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
}
.art-title { font-size:.85rem;font-weight:800;letter-spacing:.04em; }
.art-controls { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.color-swatches { display:flex;gap:5px;align-items:center; }
.swatch {
  width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform .15s,border-color .15s;font-size:.65rem;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.swatch:hover { transform:scale(1.2); }
.swatch.active { border-color:#fff;transform:scale(1.2); }
.brush-size { width:64px;accent-color:var(--accent);cursor:pointer; }
.art-clear { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;padding:3px 9px;cursor:pointer;font-size:.8rem;font-weight:700;transition:background .2s; }
.art-clear:hover { background:rgba(255,255,255,.22); }
.art-canvas { flex:1;width:100%;cursor:crosshair;display:block;touch-action:none;min-height:0; }
.art-hint { text-align:center;font-size:.72rem;color:var(--muted);padding:5px;flex-shrink:0;transition:opacity .4s; }

/* ── TIKTOK ── */
.tile-tiktok { background:linear-gradient(160deg,rgba(0,0,0,.5),rgba(105,56,229,.2),var(--card)); }
.tiktok-wrap {
  flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  min-height:0;
}
/* TikTok injects a blockquote that becomes an iframe */
.tiktok-wrap .tiktok-embed,
.tiktok-wrap iframe {
  width:100% !important;
  max-width:100% !important;
  flex:1;
  min-height:0;
}

/* ── INSTAGRAM WIDGET ── */
.tile-soundcloud {
  padding: 0;
  overflow: hidden;
}
.tile-soundcloud iframe {
  display: block;
  border: none;
}

/* ── VIDEO TILES ── */
.tile-video {
  padding: 0;
  overflow: hidden;
  background: #000;
}
.yt-thumb {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.yt-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.yt-thumb:hover img { transform: scale(1.04); }
.yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.yt-thumb:hover .yt-play { background: rgba(0,0,0,0.35); }
.yt-play svg {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transform: scale(1);
  transition: transform 0.2s;
}
.yt-thumb:hover .yt-play svg { transform: scale(1.12); }
.tile-shorts .yt-thumb img { object-position: center; }

/* ── MOOD BOARD ── */
.tile-mood {
  background: linear-gradient(160deg, #1a0540 0%, #2d0a6e 100%);
  transition: background 0.8s ease, box-shadow 0.8s ease;
}
.mood-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; perspective: 800px; }
.mood-card {
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 36px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  overflow: hidden;
  max-width: 420px;
  width: 100%;
}
.mood-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.12) 0%, transparent 65%);
  pointer-events: none;
  transition: opacity 0.3s;
  opacity: 0;
}
.mood-card:hover::after { opacity: 1; }
@keyframes mood-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.mood-emoji { font-size: 3.8rem; line-height:1; margin-bottom: 10px; display:block; transition: transform 0.3s ease; }
.mood-card:hover .mood-emoji { transform: scale(1.15); }
.mood-title { font-size: 0.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--mood-accent, var(--accent)); margin-bottom:8px; transition: color 0.6s; }
.mood-desc  { font-size: 1rem; font-weight:700; color:#fff; line-height:1.45; margin-bottom:12px; }
.mood-tags  { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.mood-tag   { font-size:0.7rem; font-weight:700; color:var(--mood-tag, #c4b5fd); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:100px; padding:3px 10px; transition: color 0.6s; }
.mood-dots  { display:flex; gap:6px; }
.mood-dot   { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.2); border:none; cursor:pointer; transition: background 0.3s, transform 0.2s; }
.mood-dot:hover { transform: scale(1.4); }
.mood-dot.active { background: var(--mood-accent, #c4b5fd); box-shadow: 0 0 8px var(--mood-accent, #c4b5fd); }

/* ── BOOK PROMO ── */
.tile-book {
  background: linear-gradient(135deg, #1a0e00 0%, #3d2200 60%, #1a0e00 100%);
  border-color: rgba(251,191,36,0.25);
  overflow: hidden;
  position: relative;
}
.tile-book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(251,191,36,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.book-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
  position: relative;
  z-index: 1;
}
.book-text {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fbbf24;
  opacity: 0.8;
}
.book-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
}
.book-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  max-width: 280px;
}
.book-byline {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .06em;
}
.book-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 26px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #1a0e00;
  border-radius: 100px;
  font-weight: 900;
  font-size: 0.88rem;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(251,191,36,0.4);
}
.book-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(251,191,36,0.55); }
.book-cover-wrap {
  flex: 0 0 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 16px 0;
}
.book-cover {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6));
  transition: transform 0.3s ease;
}
.tile-book:hover .book-cover { transform: scale(1.04) rotate(-1deg); }

/* ── SHOUTOUT WALL ── */
.tile-shoutout { background: linear-gradient(160deg, #0d0820 0%, #1a0a30 100%); }
.shoutout-inner { flex:1; display:flex; flex-direction:column; gap:10px; padding:14px 18px 16px; min-height:0; }
.shoutout-feed  { flex:1; overflow:hidden; display:flex; flex-direction:column; gap:7px; min-height:0; position:relative; }
.shoutout-item  {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:12px;
  background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.25);
  font-size:0.88rem; font-weight:700; color:#fff;
  animation: shout-in 0.4s ease;
}
@keyframes shout-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
.shoutout-item .shout-flag { font-size:1.1rem; }
.shoutout-item .shout-name { font-weight:900; color:#c4b5fd; }
.shoutout-item .shout-city { color:rgba(255,255,255,0.55); font-size:0.78rem; }
.shoutout-form  { display:flex; gap:8px; flex-shrink:0; }
.shoutout-form input {
  flex:1; padding:9px 14px; border-radius:100px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(124,58,237,0.3);
  color:#fff; font-size:0.82rem; font-family:inherit; outline:none;
  transition:border-color 0.2s;
}
.shoutout-form input::placeholder { color:rgba(255,255,255,0.35); }
.shoutout-form input:focus { border-color:rgba(196,181,253,0.6); }
.shoutout-form button {
  padding:9px 18px; border-radius:100px; border:none; cursor:pointer;
  background:linear-gradient(90deg, var(--purple), #a78bfa); color:#fff;
  font-weight:900; font-size:0.8rem; font-family:inherit;
  transition:opacity 0.2s, transform 0.15s; white-space:nowrap;
}
.shoutout-form button:hover { opacity:0.85; transform:translateY(-1px); }

/* ── DOG FACTS ── */
.tile-dogfacts { padding: 0; overflow: hidden; background: #0d0820; }
.tile-video:has(.wallpack-banner-link) { background: var(--bg); }
.wallpack-banner-link { display: block; width: 100%; height: 100%; }
.wallpack-banner-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform 0.4s ease; }
.wallpack-banner-link:hover .wallpack-banner-img { transform: scale(1.03); }

/* ── PLATFORM STRIP ── */
.platform-strip {
  position:relative; z-index:1;
  background:rgba(124,58,237,0.1);
  border-top:1px solid rgba(124,58,237,0.2);
  border-bottom:1px solid rgba(124,58,237,0.2);
  padding:16px 40px;
  backdrop-filter:blur(8px);
}
.platform-inner {
  display:flex; align-items:center; justify-content:center;
  gap:12px; max-width:1280px; margin:0 auto; flex-wrap:wrap;
}
.platform-label {
  font-size:0.75rem; font-weight:700; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase; margin-right:4px;
}
.platform-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 18px; border-radius:100px;
  font-size:0.82rem; font-weight:800; text-decoration:none;
  border:1px solid transparent;
  transition:transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.platform-badge svg { width:15px; height:15px; flex-shrink:0; }
.platform-badge:hover { transform:translateY(-2px); opacity:0.9; }
.platform-spotify    { background:rgba(29,185,84,0.15);  border-color:rgba(29,185,84,0.35);  color:#1db954; }
.platform-spotify:hover  { box-shadow:0 4px 20px rgba(29,185,84,0.3); }
.platform-tiktok     { background:rgba(254,44,85,0.15);  border-color:rgba(254,44,85,0.35);  color:#fe2c55; }
.platform-tiktok:hover   { box-shadow:0 4px 20px rgba(254,44,85,0.3); }
.platform-soundcloud { background:rgba(249,115,22,0.15); border-color:rgba(249,115,22,0.35); color:#f97316; }
.platform-soundcloud:hover { box-shadow:0 4px 20px rgba(249,115,22,0.3); }
.platform-youtube    { background:rgba(255,0,0,0.15);    border-color:rgba(255,0,0,0.35);    color:#ff4444; }
.platform-youtube:hover  { box-shadow:0 4px 20px rgba(255,0,0,0.3); }
.platform-twitch     { background:rgba(145,70,255,0.15); border-color:rgba(145,70,255,0.35); color:#9146ff; }
.platform-twitch:hover   { box-shadow:0 4px 20px rgba(145,70,255,0.3); }

/* ── CUSTOM PAW CURSOR ── */
.paw-cursor {
  position:fixed; pointer-events:none; z-index:99999;
  font-size:1.15rem; line-height:1;
  transform:translate(-50%,-50%) scale(0);
  transition:transform 0.12s ease, opacity 0.18s;
  opacity:0; will-change:left,top;
  filter:drop-shadow(0 0 6px rgba(249,115,22,0.6));
}
.paw-cursor.visible { opacity:1; transform:translate(-50%,-50%) scale(1); }
.paw-cursor.clicking { transform:translate(-50%,-50%) scale(0.8); }
.paw-cursor.hovering { transform:translate(-50%,-50%) scale(1.5); filter:drop-shadow(0 0 10px rgba(249,115,22,0.9)); }

/* ── NOW PLAYING PILL ── */
.now-playing {
  position:fixed; bottom:24px; right:24px; z-index:500;
  display:flex; align-items:center; gap:10px;
  background:rgba(17,9,58,0.92);
  border:1px solid rgba(249,115,22,0.35);
  border-radius:100px;
  padding:10px 18px 10px 14px;
  backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(249,115,22,0.08);
  animation:np-in 0.5s ease 1.5s both;
}
@keyframes np-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.np-eq { display:flex; align-items:flex-end; gap:2px; height:16px; }
.np-eq span { display:block; width:3px; background:var(--accent); border-radius:2px; animation:eq 0.9s ease-in-out infinite alternate; }
.np-eq span:nth-child(1){animation-delay:0s}
.np-eq span:nth-child(2){animation-delay:0.18s}
.np-eq span:nth-child(3){animation-delay:0.36s}
.np-eq span:nth-child(4){animation-delay:0.12s}
@keyframes eq { 0%{height:3px} 100%{height:15px} }
.np-text { font-size:0.78rem; font-weight:700; color:rgba(255,255,255,0.82); white-space:nowrap; }
.np-link { font-size:0.78rem; font-weight:800; color:var(--accent); text-decoration:none; transition:color 0.2s; }
.np-link:hover { color:var(--accent-h); }

/* ── FOOTER ── */
.footer { background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.08);padding:40px 40px 28px; }
.footer-inner { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;max-width:1280px;margin:0 auto 24px; }
.footer-brand { display:flex;flex-direction:column;gap:6px; }
.footer-logo { font-size:1.1rem;font-weight:900; }
.footer-brand p { color:var(--muted);font-size:.85rem; }
.footer-links { display:flex;gap:24px;flex-wrap:wrap;align-items:center; }
.footer-links a { color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:700;transition:color .2s; }
.footer-links a:hover { color:#fff; }
.footer-copy { text-align:center;color:rgba(255,255,255,.25);font-size:.8rem;max-width:1280px;margin:0 auto; }

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .tiles-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; }

  /* Reset all explicit placements — prevents implicit column creation */
  .tile-spotify,.tile-soundcloud,.tile-tiktok,.tile-shorts,
  .tiles-grid .tile:nth-child(7),.tiles-grid .tile:nth-child(8),
  .tile-dogfacts,.tile-mood,.tile-shop,.tile-game,.tile-book,
  .tile-art,.tile-shoutout {
    grid-column:auto; grid-row:auto;
  }

  /* Full-width tiles at tablet */
  .tile-spotify,.tile-mood,.tile-shop,.tile-book,.tile-art,.tile-shoutout {
    grid-column:1 / -1;
  }

  /* Heights for tiles that need a bound at tablet */
  .tile-spotify    { height:320px; }
  .tile-tiktok     { height:440px; }
  .tile-shop       { height:320px; }
  .tile-game       { height:320px; }
  .tile-art        { height:300px; }
}
@media(max-width:900px){
  .hero { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .nav { padding:0 20px; }
  .nav-links { display:none;position:absolute;top:68px;left:0;right:0;background:rgba(17,9,58,.98);flex-direction:column;border-radius:0 0 20px 20px;padding:16px;gap:2px;z-index:99; }
  .nav-links.open { display:flex; }
  .nav-links a { border-radius:12px; }
  .nav-actions { display:none; }
  .nav-hamburger { display:flex; }
  .hero { padding:48px 20px 60px; }
  .tiles-section { padding:40px 16px 60px; }
  .footer { padding:32px 20px 24px; }
}
@media(max-width:580px){
  .tiles-grid { grid-template-columns:1fr; }
  .hero-title  { font-size:2.8rem; }

  /* Reset ALL explicit grid placements so order values take effect */
  .tile-spotify,.tile-soundcloud,.tile-tiktok,.tile-shorts,
  .tiles-grid .tile:nth-child(7),.tiles-grid .tile:nth-child(8),
  .tile-dogfacts,.tile-mood,.tile-shop,.tile-game,.tile-book,
  .tile-art,.tile-shoutout {
    grid-column:auto; grid-row:auto;
  }

  /* Fixed heights — stops flex:1/height:100% children from growing unbounded */
  .tile-spotify    { height:340px; }
  .tile-soundcloud { height:300px; }
  .tile-tiktok     { height:420px; }
  .tile-shop       { height:320px; }
  .tile-game       { height:300px; }
  .tile-art        { height:280px; }
  .tile-mood       { height:auto; min-height:260px; }
  .tile-shoutout   { height:auto; }
  .tile-book       { height:auto; }

  /* Constrain inner carousel and canvas so they don't overflow tile */
  .shop-carousel { max-height:270px; }
  .gp-wrap       { max-height:240px; }

  /* Book tile — stack image below text */
  .book-inner      { flex-direction:column; }
  .book-cover-wrap { flex:none; width:100%; height:180px; padding:0 24px 16px; }
  .book-text       { padding:20px 20px 0; }
  .book-title      { font-size:1.6rem; }
  .book-sub        { font-size:0.82rem; }

  /* Shoutout form — wrap so button never gets cut off */
  .shoutout-form        { flex-wrap:wrap; }
  .shoutout-form button { width:100%; padding:10px 18px; }

  /* Live banner */
  .live-banner  { flex-direction:column; }
  .live-info    { padding:12px 20px; gap:10px; flex-wrap:wrap; }
  .live-divider { display:none; }
  .live-channel { font-size:1rem; }

  /* Platform strip */
  .platform-strip { padding:12px 16px; }
  .platform-label { width:100%; text-align:center; }

  /* Zone ordering — Music → Follow → Shop → Play */
  .tile-spotify                   { order:1; }
  .tile-soundcloud                { order:2; }
  .tiles-grid .tile:nth-child(7) { order:3; }
  .tile-dogfacts                  { order:4; }
  .tile-tiktok                    { order:5; }
  .tile-shorts                    { order:6; }
  .tiles-grid .tile:nth-child(8) { order:7; }
  .tile-mood                      { order:8; }
  .tile-shop                      { order:9; }
  .tile-book                      { order:10; }
  .tile-game                      { order:11; }
  .tile-art                       { order:12; }
  .tile-shoutout                  { order:13; }

  .now-playing { bottom:12px; right:12px; padding:8px 14px 8px 10px; }
  .np-text     { display:none; }
}