:root {
  /* ========================================
     THEME TOKENS
     Change these values first when you want to tune the global look.
     ======================================== */
  --bg: #070708;
  --surface: #111114;
  --ink: #f6f1f2;
  --muted: #aaa1a5;
  --red: #ff2449;
  --red-dark: #b80f2d;
  --pink: #ff2449;
  --pink-dark: #ff4d67;
  --purple: #8a5cff;
  --cream: #171316;
  --line: rgba(255,255,255,.1);
  --shadow: 0 28px 90px rgba(0,0,0,.5);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(255,36,73,.08), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(138,92,255,.07), transparent 25%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(255,36,73,.45); outline-offset: 3px; }

/* ========================================
   TYPOGRAPHY + CINEMATIC TEXTURE
   Headings use a dramatic serif; labels use compact gaming-style type.
   ======================================== */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.logo, .eyebrow, .game-meta, .play-link, .intensity, .brand-small, .flip-text, .front-header, .front-bottom {
  font-family: "DM Sans", sans-serif;
  text-transform: uppercase;
}

.ambient {
  position: fixed; width: 420px; height: 420px; border-radius: 50%;
  filter: blur(70px); opacity: .18; pointer-events: none; z-index: -1;
}
/* ========================================
   CINEMATIC AMBIENT GLOW
   These soft lights create the dark cinematic stage.
   ======================================== */
.ambient-1 { background: var(--red); top: -180px; right: -120px; }
.ambient-2 { background: var(--purple); bottom: -220px; left: -150px; }

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
  height: 82px; padding: 0 6vw; display: flex; align-items: center;
  justify-content: space-between; position: relative; z-index: 5;
}
.logo { text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -.04em; display:flex; align-items:center; gap:9px; }
.logo > span:last-child span { color: var(--red); }
.logo-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-size:19px; box-shadow:0 0 25px rgba(255,36,73,.35); }
.nav-actions { display:flex; align-items:center; gap:20px; }

/* Favorites badge in header */
#nav-favorites { color: var(--muted); background: transparent; border:0; font-weight:800; display:flex; align-items:center; gap:6px; }
#nav-favorites:hover { color: var(--ink); }
#favorites-count { background:var(--red); color:#fff; font-weight:900; font-size:11px; padding:2px 6px; border-radius:999px; margin-left:6px; }
#favorites-count.hidden { display:none; }

/* Improve wrapping for long course text in course detail */
.course-lessons li { max-width: 70ch; word-wrap: break-word; white-space: normal; line-height:1.5; }

/* Primary navigation (desktop) */
.primary-nav { display:block; }
.nav-list { display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-item { position:relative; }
.nav-link { background:transparent; border:0; color:var(--muted); font-weight:800; padding:8px 6px; cursor:pointer; }
.nav-link:hover, .nav-link:focus { color:var(--ink); }
.mega-menu { position:absolute; left:0; top:100%; min-width:560px; display:none; background:linear-gradient(145deg, rgba(16,16,18,.98), rgba(9,9,11,.98)); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); z-index:40; }
.mega-menu[role="menu"] { display:none; }
.mega-col { display:inline-block; vertical-align:top; width:180px; margin-right:18px; }
.mega-col h4 { margin:0 0 8px; font-size:12px; color:var(--pink); }
.mega-col ul { list-style:none; padding:0; margin:0; }
.mega-col ul li { margin:6px 0; }
.mega-col ul li a { color:var(--muted); text-decoration:none; font-weight:600; }
.mega-col ul li a:hover { color:var(--ink); }

/* Mobile drawer and hamburger */
.hamburger { display:none; background:transparent; border:0; font-size:22px; color:var(--ink); padding:8px; }
.mobile-drawer { position:fixed; top:0; right:-100%; width:320px; height:100vh; background:#0b0b0d; box-shadow:-20px 0 60px rgba(0,0,0,.6); transition:right .32s ease; z-index:60; padding:24px; }
.mobile-drawer[aria-hidden="false"] { right:0; }
.drawer-close { background:transparent; border:0; color:var(--muted); font-size:28px; position:absolute; top:12px; right:14px; }
.drawer-nav ul { list-style:none; margin:48px 0 0; padding:0; }
.drawer-nav li { margin-bottom:12px; }
.drawer-link { background:transparent; border:0; color:var(--ink); font-weight:800; font-size:16px; text-align:left; padding:10px 0; width:100%; }
.drawer-divider { height:1px; background:var(--line); margin:18px 0; }

/* Responsive rules */
@media (max-width: 900px) {
  .primary-nav { display:none; }
  .hamburger { display:block; }
  .nav-actions .text-btn { display:none; }
  .nav-actions { gap:8px; }
}

@media (min-width: 901px) {
  .mobile-drawer { display:none; }
}

.text-btn, .ghost-btn, .back-btn {
  background: transparent; border: 0; color: var(--ink); font-weight: 600;
}
.text-btn { color: var(--muted); }
.pill-btn {
  border: 0; border-radius: 999px; padding: 15px 24px; background: linear-gradient(135deg, #ff2449, #c90f2f); color:#fff;
  font-weight: 700; box-shadow: 0 10px 28px rgba(23,19,22,.14); transition:.2s ease;
}
.pill-btn:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(255,36,73,.28); }
.pill-btn span { margin-left: 12px; }
.pill-btn.small { padding:11px 18px; font-size:14px; }
.pill-btn.wide { width:100%; margin-top:34px; }
.ghost-btn { padding: 15px 8px; color:var(--muted); }

/* ========================================
   ONLINE CTA
   ======================================== */
.online-btn { border:1px solid rgba(255,36,73,.35); background:rgba(255,36,73,.08); color:#ff6a7e; padding:15px 18px; border-radius:999px; font-weight:800; transition:.25s ease; }
.online-btn:hover { transform:translateY(-2px); background:rgba(255,36,73,.14); box-shadow:0 0 28px rgba(255,36,73,.16); }
.back-btn { padding: 8px 0; color:var(--muted); margin-bottom:28px; }

.page { display:none; animation: pageIn .45s ease both; }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ========================================
   HERO / CINEMATIC LANDING
   ======================================== */
.hero {
  max-width: 1250px; margin: 0 auto; min-height: 660px; padding: 65px 5vw 80px;
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:70px;
}
.eyebrow { font-size:11px; letter-spacing:.19em; font-weight:800; color:var(--pink); margin-bottom:16px; }
.hero h1, .page-heading h2, .complete-page h2 {
  font-family:"Playfair Display", serif; font-weight:700; letter-spacing:-.045em; line-height:.98;
}
.hero h1 { font-size:clamp(50px,6vw,84px); margin:0 0 24px; }
em { color:var(--red); font-style:normal; text-shadow:0 0 28px rgba(255,36,73,.25); }
.hero-sub { max-width:580px; font-size:18px; line-height:1.7; color:var(--muted); margin:0 0 30px; }
.hero-buttons { display:flex; gap:15px; align-items:center; }
.trust-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:25px; color:#8a8085; font-size:12px; }

.hero-card-stage { height:540px; position:relative; display:grid; place-items:center; perspective:1200px; }
.hero-card {
  width:min(330px, 72%); aspect-ratio: .69; border-radius:30px; position:absolute; padding:27px;
  box-shadow:var(--shadow); overflow:hidden;
}
.back-card { background:linear-gradient(150deg,#171316,#33222a); color:#fff; transform:rotate(9deg) translate(55px,-3px); }
.front-card { background:linear-gradient(145deg,#ffe6ef,#f4c9dc); color:#171316; transform:rotate(-8deg) translate(-35px,25px); transition: transform .35s ease, background .45s ease, box-shadow .35s ease, color .25s ease; position:relative; overflow:hidden; }
.front-card::after { content:""; position:absolute; inset:0; border-radius:30px; pointer-events:none; opacity:0; transform:scale(1); transition: opacity .45s ease, transform .45s ease; }
.front-card.mood-playful::after { background: radial-gradient(circle at 20% 20%, rgba(255,200,80,.06), transparent 40%); opacity:1; transform:scale(1.02); }
.front-card.mood-cozy::after { background: radial-gradient(circle at 30% 60%, rgba(239,224,222,.06), transparent 40%); opacity:1; transform:scale(1.01); }
.front-card.mood-intimate::after { background: radial-gradient(circle at 50% 30%, rgba(245,215,224,.06), transparent 40%); opacity:1; transform:scale(1.01); }
.front-card.mood-romantic::after { background: radial-gradient(circle at 30% 30%, rgba(255,76,103,.06), transparent 40%); opacity:1; transform:scale(1.01); }

/* Smooth text fade for sample hero question */
.hero-question { transition: opacity .32s ease; }

.card-top { font-size:12px; letter-spacing:.16em; font-weight:800; }
.card-symbol { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:105px; font-family:serif; }
.card-bottom { position:absolute; bottom:25px; left:27px; font-size:11px; letter-spacing:.18em; font-weight:800; }
.card-label { font-size:11px; letter-spacing:.18em; font-weight:800; color:var(--pink-dark); }
.hero-question { position:absolute; left:28px; right:28px; top:35%; font-family:"Playfair Display",serif; font-size:28px; line-height:1.15; }
.card-/* ========================================
   FOOTER
   ======================================== */
footer { position:absolute; left:28px; right:28px; bottom:27px; font-size:10px; letter-spacing:.14em; color:#8d6877; }
.floating-note { position:absolute; z-index:2; background:#fff; border:1px solid var(--line); box-shadow:0 12px 35px rgba(0,0,0,.08); padding:10px 14px; border-radius:999px; font-size:12px; }
.note-one { top:12%; right:8%; transform:rotate(4deg); }
.note-two { bottom:14%; left:4%; transform:rotate(-5deg); }

.section { max-width:1250px; margin:0 auto; padding:80px 5vw; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.section-heading h2 { margin:0; font-family:"Playfair Display",serif; font-size:44px; letter-spacing:-.04em; }
.section-heading p { max-width:350px; color:var(--muted); line-height:1.6; margin:0; }

/* ========================================
   MOOD SELECTOR
   ======================================== */
.mood-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; }
.mood-grid.large { grid-template-columns:repeat(2,1fr); max-width:900px; margin:auto; }
.mood-card {
  border:1px solid var(--line); background:linear-gradient(145deg, rgba(24,24,28,.94), rgba(12,12,14,.98)); border-radius:var(--radius);
  padding:24px; min-height:250px; display:flex; flex-direction:column; justify-content:space-between;
  text-align:left; transition:.25s ease; position:relative; overflow:hidden;
}
.mood-grid.large .mood-card { min-height:290px; }
.mood-card:hover { transform:translateY(-7px) scale(1.01); box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 35px rgba(255,36,73,.1); border-color:rgba(255,36,73,.35); }
.mood-icon { font-size:30px; margin-bottom:15px; }
.mood-title { font-family:"Playfair Display",serif; font-size:27px; margin:0 0 8px; letter-spacing:-.035em; color:var(--mood-title, var(--ink)); }
.online-mood strong { color:var(--mood-title, var(--ink)); }
.mood-desc { color:var(--muted); font-size:13px; line-height:1.55; }
.mood-bottom { display:flex; justify-content:space-between; align-items:end; margin-top:20px; }
.intensity { font-size:11px; letter-spacing:.05em; color:var(--muted); }
.play-link { color:var(--red); font-weight:800; font-size:12px; }
/* ========================================
   MOOD TYPOGRAPHY PATTERNS
   Each mood gets its own visual language without adding image assets.
   ======================================== */
.mood-pattern-label { position:absolute; top:18px; right:20px; font-size:9px; letter-spacing:.24em; font-weight:900; opacity:.34; }
.mood-card::before { content:""; position:absolute; inset:0; opacity:.11; pointer-events:none; background-size:22px 22px; }
.mood-card::after { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-70px; top:-70px; background:var(--mood,#ff2449); opacity:.22; filter:blur(2px); }
.mood-sweet::before { background-image:radial-gradient(circle, #ffd2df 1px, transparent 1px); }
.mood-romantic::before { background-image:radial-gradient(circle at 30% 30%, #ff4d67 1px, transparent 1px), linear-gradient(45deg, transparent 48%, #ff2449 49%, transparent 51%); }
.mood-deep::before { background-image:linear-gradient(rgba(138,92,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(138,92,255,.7) 1px, transparent 1px); }
.mood-flirty::before { background-image:repeating-linear-gradient(135deg, rgba(255,36,73,.8) 0 2px, transparent 2px 12px); }
.mood-spicy::before { background-image:repeating-linear-gradient(45deg, rgba(255,100,40,.8) 0 2px, transparent 2px 9px); }


.how-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:1250px; margin:0 auto 90px; padding:45px 5vw; display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.step span { color:var(--pink); font-weight:800; font-size:11px; }
.step h3 { margin:12px 0 6px; font-size:18px; }
.step p { margin:0; color:var(--muted); line-height:1.55; font-size:14px; }

.narrow { max-width:900px; margin:0 auto; padding:55px 5vw 100px; }
.page-heading h2 { font-size:clamp(44px,6vw,68px); margin:0 0 16px; }
.page-heading p { color:var(--muted); line-height:1.6; margin:0 0 40px; }

#setup-content { max-width:700px; margin:20px auto; text-align:center; }
.setup-icon { font-size:48px; margin-bottom:15px; }
.setup-title { font-family:"Playfair Display",serif; font-size:50px; margin:0 0 10px; }
.setup-desc { color:var(--muted); line-height:1.6; }
.length-options { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:30px 0; }
.length-btn { background:#111114; color:var(--ink); border:1px solid var(--line); padding:15px 20px; border-radius:16px; min-width:120px; font-weight:700; }
.length-btn.selected { background:linear-gradient(135deg,#ff2449,#b80f2d); color:#fff; border-color:#ff2449; box-shadow:0 0 28px rgba(255,36,73,.2); }
.start-btn { min-width:230px; }

/* ========================================
   GAME SCREEN
   ======================================== */
.game-page { min-height:calc(100vh - 82px); }
.game-top { max-width:850px; margin:0 auto; padding:28px 25px 0; display:flex; align-items:center; gap:18px; }
.icon-btn { border:0; width:42px; height:42px; border-radius:50%; background:#151518; color:#fff; font-size:24px; display:grid; place-items:center; color:var(--ink); box-shadow:0 7px 22px rgba(0,0,0,.06); }
.game-progress-wrap { flex:1; }
.game-meta { display:flex; justify-content:space-between; font-size:10px; font-weight:800; letter-spacing:.13em; margin-bottom:8px; }
.progress { height:5px; background:#eadfe3; border-radius:99px; overflow:hidden; }
#progress-fill { width:10%; height:100%; background:var(--pink); border-radius:99px; transition:.4s ease; }

.game-area { min-height:calc(100vh - 180px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 20px 70px; }
.game-hint { color:var(--muted); font-size:12px; margin-bottom:16px; }
.card-scene { width:min(390px,84vw); aspect-ratio:.68; position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease; cursor:pointer; }
.card-scene.flipped, .card-scene.revealed { transform:rotateY(180deg); }

/* ========================================
   CARD SWEEP ANIMATION
   Current card exits like a physical deck; the next card enters already revealed.
   ======================================== */
.card-scene.sweeping { animation:cardSweepOut .36s cubic-bezier(.7,0,.9,.4) both; filter:drop-shadow(0 0 26px rgba(255,36,73,.28)); }
.card-scene.card-enter { animation:cardSweepIn .42s cubic-bezier(.15,.8,.2,1) both; }

/* Reverse sweep (previous card) uses mirrored animations */
.card-scene.sweeping-back { animation:cardSweepOutBack .36s cubic-bezier(.7,0,.9,.4) both; filter:drop-shadow(0 0 26px rgba(255,36,73,.18)); }
.card-scene.card-enter-back { animation:cardSweepInBack .42s cubic-bezier(.15,.8,.2,1) both; }

@keyframes cardSweepOut { 0%{transform:rotateY(180deg) translateY(0) rotate(0) scale(1)} 45%{transform:rotateY(180deg) translateY(-12px) rotate(-4deg) scale(1.03)} 100%{transform:rotateY(180deg) translateX(120%) translateY(-30px) rotate(12deg) scale(.88); opacity:0} }
@keyframes cardSweepIn { 0%{transform:rotateY(180deg) translateX(-75%) translateY(20px) rotate(-9deg) scale(.9); opacity:0} 100%{transform:rotateY(180deg) translateX(0) translateY(0) rotate(0) scale(1); opacity:1} }

/* Mirror animations for backward navigation */
@keyframes cardSweepOutBack { 0%{transform:rotateY(180deg) translateY(0) rotate(0) scale(1)} 45%{transform:rotateY(180deg) translateY(-12px) rotate(4deg) scale(1.03)} 100%{transform:rotateY(180deg) translateX(-120%) translateY(-30px) rotate(-12deg) scale(.88); opacity:0} }
@keyframes cardSweepInBack { 0%{transform:rotateY(180deg) translateX(75%) translateY(20px) rotate(9deg) scale(.9); opacity:0} 100%{transform:rotateY(180deg) translateX(0) translateY(0) rotate(0) scale(1); opacity:1} }
.play-card { position:absolute; inset:0; border-radius:32px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 30px 70px rgba(43,20,31,.18); overflow:hidden; }
/* ========================================
   CARD TYPOGRAPHY PATTERN
   The pattern changes according to the selected mood.
   ======================================== */
.card-pattern { position:absolute; inset:18px; border:1px solid rgba(255,255,255,.12); border-radius:22px; overflow:hidden; }
.card-pattern::before { content:""; position:absolute; inset:0; opacity:.25; background-size:26px 26px; }
.mood-sweet .card-pattern::before { background-image:radial-gradient(circle, #ffd2df 1px, transparent 1px); }
.mood-romantic .card-pattern::before { background-image:radial-gradient(circle at 30% 30%, #ff2449 1px, transparent 1px), linear-gradient(45deg, transparent 48%, #ff2449 49%, transparent 51%); }
.mood-deep .card-pattern::before { background-image:linear-gradient(rgba(138,92,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(138,92,255,.8) 1px, transparent 1px); }
.mood-flirty .card-pattern::before { background-image:repeating-linear-gradient(135deg, rgba(255,36,73,.85) 0 2px, transparent 2px 13px); }
.mood-spicy .card-pattern::before { background-image:repeating-linear-gradient(45deg, rgba(255,100,40,.9) 0 2px, transparent 2px 10px); }

/* NEW: styles for additional moods added in script.js */
.mood-playful::before { background-image:radial-gradient(circle at 20% 20%, #ffe6a6 1px, transparent 1px), repeating-linear-gradient(135deg, rgba(255,200,80,.08) 0 2px, transparent 2px 12px); }
.mood-cozy::before { background-image:radial-gradient(circle, #efe0de 1px, transparent 1px); }
.mood-intimate::before { background-image:linear-gradient(rgba(245,215,224,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(245,215,224,.8) 1px, transparent 1px); }

.mood-playful .card-pattern::before { background-image:radial-gradient(circle at 20% 20%, #ffe6a6 1px, transparent 1px), repeating-linear-gradient(135deg, rgba(255,200,80,.12) 0 2px, transparent 2px 14px); }
.mood-cozy .card-pattern::before { background-image:radial-gradient(circle, #efe0de 1px, transparent 1px); }
.mood-intimate .card-pattern::before { background-image:linear-gradient(rgba(245,215,224,.9) 1px, transparent 1px), linear-gradient(90deg, rgba(245,215,224,.9) 1px, transparent 1px); }

.brand-small { position:absolute; top:30px; font-size:10px; letter-spacing:.2em; font-weight:800; }
.big-heart { font-family:serif; font-size:110px; line-height:1; }
.flip-text { position:absolute; bottom:35px; font-size:10px; letter-spacing:.18em; font-weight:800; opacity:.75; }
.card-front { transform:rotateY(180deg); background:linear-gradient(145deg,#17171b,#0d0d10); color:var(--ink); padding:28px; border:1px solid rgba(255,36,73,.2); }
.front-header { display:flex; justify-content:space-between; font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--pink-dark); }
.front-content { height:75%; display:flex; flex-direction:column; justify-content:center; }
.prompt-type { font-size:10px; letter-spacing:.18em; font-weight:800; color:#8f6d7b; margin-bottom:15px; }
.front-content h2 { font-family:"Playfair Display",serif; font-size:31px; color:#fff; line-height:1.16; letter-spacing:-.035em; margin:0; }
.front-bottom { position:absolute; bottom:28px; font-size:9px; letter-spacing:.15em; color:#94717e; }
.game-actions { display:flex; align-items:center; gap:12px; margin-top:24px; }
.secondary-action { border:1px solid var(--line); background:#121216; padding:14px 22px; border-radius:999px; font-weight:700; color:var(--muted); }
.next-btn { border:0; background:linear-gradient(135deg, var(--red), var(--red-dark)); color:#fff; padding:15px 26px; border-radius:999px; font-weight:800; box-shadow:0 12px 24px rgba(255,36,73,.25); transition:.2s ease; }
.next-btn:hover { transform:translateY(-2px); box-shadow:0 18px 32px rgba(255,36,73,.32); }
.next-btn span { margin-left:15px; color:#fff; }
.game-tip { font-size:11px; color:#988c92; margin-top:14px; }

/* ========================================
   PLAY ONLINE LOBBY
   Cinematic room setup and connection states.
   ======================================== */
.online-header { max-width:760px; margin-bottom:30px; }
.online-header h2 { font-family:"Playfair Display",serif; font-size:clamp(48px,7vw,76px); line-height:.95; letter-spacing:-.045em; margin:0 0 18px; }
.online-header p { color:var(--muted); max-width:600px; line-height:1.7; }
.online-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:35px 0; }
.online-step { padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:#0d0d10; color:#716b70; display:flex; gap:9px; align-items:center; font-size:11px; }
.online-step span { font-weight:900; }
.online-step.active { color:#fff; border-color:rgba(255,36,73,.35); box-shadow:0 0 24px rgba(255,36,73,.08); }
.online-step.active span { color:var(--red); }
.online-content { background:linear-gradient(145deg,rgba(20,20,24,.95),rgba(9,9,11,.98)); border:1px solid var(--line); border-radius:30px; padding:30px; box-shadow:var(--shadow); overflow:hidden; position:relative; }
.online-content::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; background-image:linear-gradient(45deg, transparent 48%, #ff2449 49%, transparent 51%); background-size:34px 34px; }
.online-mood, .online-content > * { position:relative; z-index:1; }
.online-card-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.online-mood { min-height:145px; border:1px solid var(--line); border-radius:20px; background:#111114; color:#fff; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:18px; gap:7px; text-align:left; transition:.25s ease; }
.online-mood span { font-size:30px; margin-bottom:auto; }
.online-mood strong { font-family:"Playfair Display",serif; font-size:20px; }
.online-mood small { color:#898187; letter-spacing:.12em; }
.online-mood.selected { border-color:var(--red); box-shadow:0 0 30px rgba(255,36,73,.14); transform:translateY(-3px); }

/* NEW: online-mood variants for the added moods */
.online-mood.mood-playful { background: linear-gradient(135deg, rgba(255,230,160,.06), rgba(255,200,120,.04)); border:1px solid rgba(255,200,80,.08); }
.online-mood.mood-cozy { background: linear-gradient(145deg, rgba(239,224,222,.06), rgba(239,224,222,.03)); border:1px solid rgba(238,224,222,.06); }
.online-mood.mood-intimate { background: linear-gradient(145deg, rgba(245,215,224,.07), rgba(245,215,224,.04)); border:1px solid rgba(245,215,224,.06); }

.online-mood.mood-playful.selected { box-shadow:0 0 36px rgba(255,200,80,.14); border-color: rgba(255,200,80,.18); }
.online-mood.mood-cozy.selected { box-shadow:0 0 36px rgba(160,140,130,.12); border-color: rgba(160,140,130,.16); }
.online-mood.mood-intimate.selected { box-shadow:0 0 36px rgba(245,215,224,.16); border-color: rgba(245,215,224,.18); }
.join-badge, .selected-vibe { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(255,36,73,.1); color:#ff6a7e; font-size:10px; font-weight:900; letter-spacing:.14em; margin-bottom:22px; }
.online-title { font-family:"Playfair Display",serif; font-size:32px; margin:0 0 20px; }
.room-card { max-width:680px; margin:auto; text-align:center; }
.room-orb { width:72px; height:72px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center; color:#fff; font-size:34px; background:radial-gradient(circle,#ff2449,#6d0c1d); box-shadow:0 0 45px rgba(255,36,73,.28); animation:roomPulse 2.2s ease-in-out infinite; }
@keyframes roomPulse { 50%{box-shadow:0 0 70px rgba(255,36,73,.48); transform:scale(1.04)} }
.room-code { font-family:"DM Sans",sans-serif; font-weight:900; font-size:clamp(36px,8vw,62px); letter-spacing:.16em; margin:5px 0; }
.room-card p { color:var(--muted); line-height:1.6; }
.share-row { display:flex; gap:10px; margin:25px 0 18px; }
.share-row input { min-width:0; flex:1; border:1px solid var(--line); background:#08080a; color:#fff; border-radius:999px; padding:14px 18px; }
.connection-status { display:flex; justify-content:center; align-items:center; gap:8px; color:#aaa1a5; font-size:10px; font-weight:900; letter-spacing:.16em; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#ff2449; box-shadow:0 0 15px #ff2449; animation:statusBlink 1.2s infinite; }
@keyframes statusBlink { 50%{opacity:.25} }
.connected-preview { display:none; margin:22px 0 0; padding:14px; border:1px dashed rgba(255,36,73,.35); border-radius:16px; color:#ff5a70; font-size:11px; font-weight:900; letter-spacing:.14em; }

/* ========================================
   COMPLETION SCREEN
   ======================================== */
.complete-page { text-align:center; padding-top:100px; }
.complete-heart { width:85px; height:85px; border-radius:50%; background:rgba(255,36,73,.12); color:var(--red); display:grid; place-items:center; font-size:50px; margin:0 auto 28px; font-family:serif; }
.complete-page h2 { font-size:65px; margin:0 0 18px; }
.complete-page > p { color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); max-width:600px; margin:40px auto; border:1px solid var(--line); border-radius:22px; background:#111114; overflow:hidden; }
.stats div { padding:22px; border-right:1px solid var(--line); }
.stats div:last-child { border-right:0; }
.stats strong { display:block; font-size:26px; }
.stats span { color:var(--muted); font-size:11px; }
.complete-actions { display:flex; justify-content:center; gap:15px; }
.tiny { font-size:11px; margin-top:40px; color:#9a8d93; }

/* ========================================
   HOW-IT-WORKS CARDS
   ======================================== */
.how-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }

/* ========================================
   COURSES — hero, sections and lesson cards
   Structured styles for course detail view added to support collapsible chapters.
   ======================================== */
.course-hero { margin-bottom:24px; }
.course-hero h2 { font-family:"Playfair Display",serif; font-size:44px; margin:8px 0 6px; }
.course-sub { color:var(--muted); margin-bottom:12px; }
.course-structure { display:flex; flex-direction:column; gap:18px; }
.course-section { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0f0f11; }
.chapter-toggle { width:100%; text-align:left; padding:16px 18px; background:transparent; border:0; color:var(--ink); font-weight:800; display:flex; justify-content:space-between; align-items:center; }
.chapter-toggle .chapter-count { color:var(--muted); font-weight:700; font-size:13px; }
.chapter-toggle.open { background:linear-gradient(90deg, rgba(255,36,73,.04), transparent); }
.chapter-content { padding:12px 18px 20px; }
.chapter-lessons { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lesson-card { display:flex; gap:12px; align-items:flex-start; background:#0a0a0b; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.03); }
.lesson-num { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--pink),var(--red-dark)); display:grid; place-items:center; color:#fff; font-weight:900; }
.lesson-body { color:var(--muted); line-height:1.5; }


.how-card { padding:30px; border:1px solid var(--line); border-radius:25px; background:#111114; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.how-card span { color:var(--pink); font-size:11px; font-weight:800; }
.how-card h3 { font-family:"Playfair Display",serif; font-size:25px; margin:15px 0 8px; }
.how-card p { color:var(--muted); line-height:1.6; margin:0; }
.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); background:#171316; color:#fff; padding:12px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:.25s; z-index:20; font-size:12px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal { position:fixed; inset:0; background:rgba(20,14,18,.48); display:grid; place-items:center; padding:20px; z-index:30; }
.modal.hidden { display:none; }
.modal-box { background:#111114; max-width:390px; width:100%; border-radius:28px; padding:30px; text-align:center; box-shadow:var(--shadow); }
.modal-box h3 { font-family:"Playfair Display",serif; font-size:30px; margin:0 0 8px; }
.modal-box p { color:var(--muted); }
.modal-actions { display:flex; justify-content:center; gap:10px; margin-top:25px; }

.auth-modal { position:fixed; inset:0; background:rgba(8,8,10,.7); display:grid; place-items:center; padding:20px; z-index:35; }
.auth-modal.hidden { display:none; }
.auth-card { position:relative; width:min(460px, 100%); border-radius:28px; background:linear-gradient(145deg, rgba(21,21,26,.97), rgba(11,11,13,.98)); border:1px solid var(--line); box-shadow:var(--shadow); padding:30px 24px 22px; }
.auth-close { position:absolute; top:12px; right:12px; color:var(--muted); }
.auth-card h3 { margin:0 0 18px; font-family:"Playfair Display",serif; font-size:36px; letter-spacing:-.04em; }
.auth-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.auth-tab { padding:10px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-weight:700; }
.auth-tab.active { background:rgba(255,36,73,.12); border-color:rgba(255,36,73,.35); color:#fff; }
.auth-form { display:grid; gap:16px; }
.auth-field { display:grid; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#c8bec2; }
.auth-field input { width:100%; border:1px solid var(--line); background:#0b0b0d; color:#fff; border-radius:16px; padding:14px 15px; font:inherit; }
.auth-field input:focus { outline:2px solid rgba(255,36,73,.28); border-color:rgba(255,36,73,.3); }
.auth-submit { margin-top:10px; }
.auth-status { min-height:22px; margin:12px 0 0; color:#d7d0d1; font-size:12px; line-height:1.5; }

footer { max-width:1250px; margin:0 auto; padding:30px 5vw 45px; display:flex; justify-content:space-between; color:#9b8f95; font-size:10px; letter-spacing:.06em; }

/* ========================================
   RESPONSIVE LAYOUT
   ======================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; gap:20px; padding-top:35px; }
  .hero-card-stage { height:480px; }
  .mood-grid { grid-template-columns:repeat(2,1fr); }
  .mood-grid.large { grid-template-columns:1fr; }
  .how-strip { grid-template-columns:1fr; }
  .online-card-grid { grid-template-columns:repeat(2,1fr); }
  .section-heading { display:block; }
  .section-heading p { margin-top:12px; }
}
@media (max-width: 600px) {
  .navbar { height:70px; padding:0 20px; }
  .nav-actions .text-btn { display:none; }
  .online-btn { width:100%; }
  .hero { padding:35px 20px 60px; min-height:auto; }
  .hero h1 { font-size:52px; }
  .hero-sub { font-size:16px; }
  .hero-buttons { flex-wrap:wrap; }
  .hero-card-stage { height:420px; }
  .hero-card { width:245px; border-radius:24px; }
  .hero-question { font-size:22px; }
  .section { padding:55px 20px; }
  .section-heading h2 { font-size:36px; }
  .mood-grid { grid-template-columns:1fr; }
  .mood-card { min-height:205px; }
  .how-strip { margin-bottom:55px; padding:40px 20px; }
  .narrow { padding:40px 20px 70px; }
  .page-heading h2 { font-size:48px; }
  .setup-title { font-size:42px; }
  .card-scene { width:min(340px,84vw); }
  .front-content h2 { font-size:27px; }
  .game-top { padding-left:16px; padding-right:16px; }
  .complete-page h2 { font-size:50px; }
  .stats { grid-template-columns:1fr; }
  .stats div { border-right:0; border-bottom:1px solid var(--line); }
  .stats div:last-child { border-bottom:0; }
  .complete-actions { flex-direction:column; }
  .complete-actions .pill-btn, .complete-actions .ghost-btn { width:100%; }
  .how-cards { grid-template-columns:1fr; }
  .online-flow { grid-template-columns:repeat(2,1fr); }
  .online-content { padding:22px; }
  .online-card-grid { grid-template-columns:1fr 1fr; }
  .share-row { flex-direction:column; }
  .share-row .pill-btn { width:100%; }
  footer { padding:25px 20px 35px; flex-direction:column; gap:8px; }
}

/* ========================================
   HERO BACK-CARD ACCENTS + IN-GAME SCENE OVERLAYS
   These provide a matching visual accent for the hero back-card and
   the in-game card scene to keep the experience consistent across screens.
   ======================================== */

.hero-card.back-card { transition: background .45s ease, box-shadow .35s ease, color .25s ease; position:relative; overflow:hidden; }
.hero-card.back-card::after { content: ""; position:absolute; inset:0; border-radius:30px; pointer-events:none; opacity:0; transform:scale(1); transition: opacity .45s ease, transform .45s ease; }

.hero-card.back-card.mood-playful { background: linear-gradient(145deg,#fff7e6,#ffeecb); color:#2b1b10; box-shadow:0 18px 60px rgba(255,200,80,.06); }
.hero-card.back-card.mood-cozy { background: linear-gradient(145deg,#faf4f2,#f1e8e6); color:#2b1b10; box-shadow:0 16px 46px rgba(150,130,120,.04); }
.hero-card.back-card.mood-intimate { background: linear-gradient(145deg,#fff0f6,#f7e0e9); color:#2b1b10; box-shadow:0 20px 68px rgba(245,215,224,.06); }
.hero-card.back-card.mood-romantic { background: linear-gradient(145deg,#ffeef2,#ffd6df); color:#2b1b10; box-shadow:0 20px 68px rgba(255,76,103,.06); }

.hero-card.back-card.mood-playful::after { background: radial-gradient(circle at 20% 20%, rgba(255,200,80,.06), transparent 40%); opacity:1; transform:scale(1.02); }
.hero-card.back-card.mood-cozy::after { background: radial-gradient(circle at 30% 60%, rgba(239,224,222,.06), transparent 40%); opacity:1; transform:scale(1.01); }
.hero-card.back-card.mood-intimate::after { background: radial-gradient(circle at 50% 30%, rgba(245,215,224,.06), transparent 40%); opacity:1; transform:scale(1.01); }
.hero-card.back-card.mood-romantic::after { background: radial-gradient(circle at 30% 30%, rgba(255,76,103,.06), transparent 40%); opacity:1; transform:scale(1.01); }

/* In-game card scene subtle ambient overlays */
.card-scene::after { content: ""; position:absolute; inset:-6%; border-radius:36px; pointer-events:none; opacity:0; transition: opacity .45s ease, transform .45s ease; z-index:-1; }
.card-scene.mood-playful::after { background: radial-gradient(circle at 40% 30%, rgba(255,200,80,.06), transparent 25%); opacity:1; transform:scale(1.02); filter:blur(26px); }
.card-scene.mood-cozy::after { background: radial-gradient(circle at 60% 70%, rgba(239,224,222,.06), transparent 25%); opacity:1; transform:scale(1.01); filter:blur(22px); }
.card-scene.mood-intimate::after { background: radial-gradient(circle at 50% 30%, rgba(245,215,224,.06), transparent 25%); opacity:1; transform:scale(1.01); filter:blur(24px); }
.card-scene.mood-romantic::after { background: radial-gradient(circle at 30% 30%, rgba(255,76,103,.06), transparent 25%); opacity:1; transform:scale(1.01); filter:blur(24px); }

/* Slightly tint the card pattern edge when mood changes for more cohesion */
.card-scene.mood-playful .card-front, .card-scene.mood-playful .card-back { box-shadow:0 28px 80px rgba(255,200,80,.06); }
.card-scene.mood-cozy .card-front, .card-scene.mood-cozy .card-back { box-shadow:0 24px 70px rgba(160,140,130,.045); }
.card-scene.mood-intimate .card-front, .card-scene.mood-intimate .card-back { box-shadow:0 30px 90px rgba(245,215,224,.06); }
.card-scene.mood-romantic .card-front, .card-scene.mood-romantic .card-back { box-shadow:0 30px 90px rgba(255,76,103,.06); }

/* Keep overlays subtle on smaller screens */
@media (max-width: 900px) {
  .card-scene::after { inset:-10%; opacity:.9; }
  .hero-card.back-card::after, .front-card::after { transform:scale(1); }
}