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

/* ── Hide native cursor everywhere – JS cursor handles it ── */
html, body, *, *::before, *::after { cursor: none !important; }

/* ── JS cursor element – 78px, always visible ── */
#custom-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 78px; height: 78px;
  background: url('Cursor.png') no-repeat left top / contain;
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  will-change: transform;
}

:root {
  --bg:           #bbeaff;
  --cream:        #fef8f0;
  --saucy-cream:  #f8f0fb;
  --text:         #1a1218;
  --mid:          #8a7080;
  --deck-pink:    #DF93C6;
  --sweet-accent: #d4a0b8;
  --saucy-accent: #b07acc;
  --r:            20px;
  --title:        'Cormorant Garamond', Georgia, serif;
  --body:         'DM Sans', 'Helvetica Neue', sans-serif;
}

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

/* ── Screens ── */
.screen {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}
.screen.active { display: flex; }


/* ════════════════════════════════════════
   WELCOME SCREEN
════════════════════════════════════════ */

#screen-welcome {
  align-items: stretch;
  justify-content: stretch;
}

/* Centered container – caps at phone width, stays centered on MacBook */
.welcome-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
}

/* All decorative images */
.deco {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

/* ── Title – centered ── */
.splash-title {
  position: absolute;
  top: calc(8% + 50px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font-family: var(--title);
  font-size: clamp(83px, 21.85vw, 143px);
  font-weight: 700;
  font-style: italic;
  line-height: 0.88;
  color: #fff;
  letter-spacing: -2px;
  text-shadow: 0 4px 28px rgba(40,120,180,0.28);
  z-index: 4;
}

/* ── "No waaay" bubble – left, 20% bigger, pushed away from cup ── */
.w-noway {
  top: calc(48% - 115px);
  left: -6%;
  width: clamp(132px, 36vw, 216px);
  animation: floatA 4.6s ease-in-out infinite 0.3s;
  z-index: 6;
}

/* ── Drops bubble – right, 30% bigger ── */
.w-drop {
  top: 30%;
  right: -4%;
  width: clamp(182px, 44vw, 304px);
  animation: floatB 3.9s ease-in-out infinite 0.7s;
  z-index: 6;
}

/* ── Cup – 30% bigger, shifted down 40px ── */
.cup-wrap {
  position: absolute;
  top: calc(35% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(286px, 94vw, 442px);
  z-index: 3;
  animation: cupBob 4.2s ease-in-out infinite;
}

.cup-img {
  width: 100%;
  display: block;
}

.cup-wrap:hover .cup-img {
  animation: cupWobble 0.55s ease-in-out forwards;
}

/* "play the game" – pill button, sits between title and cup */
.play-cup-btn {
  position: absolute;
  top: calc(14% + 15px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(236, 33, 12, 0.6);
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(236, 33, 12, 0.22);
  border-radius: 50px;
  padding: 10px 26px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, background 0.15s ease;
  text-shadow: none;
}
.play-cup-btn:hover {
  transform: translateX(-50%) scale(1.05);
  background: rgba(255, 255, 255, 0.42);
}
.play-cup-btn:active {
  transform: translateX(-50%) scale(0.96);
}

/* ── Strawberry emoji – lower-left ── */
.w-emoji {
  top: calc(70% - 100px);
  left: -4%;
  width: clamp(150px, 37vw, 244px);
  animation: floatC 4.8s ease-in-out infinite 1s;
  z-index: 6;
}

/* ── Sugar cubes – down 30%, right 10px, static ── */
.w-sugar {
  bottom: calc(-2% - 10px);
  right: calc(-6% - 25px);
  width: clamp(320px, 88vw, 480px);
  image-rendering: auto;
  z-index: 4;
}


/* ════════════════════════════════════════
   DECK SELECTION SCREEN
════════════════════════════════════════ */

/* Crochet side decorations – hidden by default, shown only on deck screen */
.crochet-left,
.crochet-right {
  position: fixed;
  top: 0;
  height: 100vh;
  width: auto;
  max-width: 28vw;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  display: none;
}
.crochet-left  { left: 0; }
.crochet-right { right: 0; }
#screen-home.active .crochet-left,
#screen-home.active .crochet-right { display: block; }

/* Back button – fixed top-left, like a browser tab's back arrow */
.home-top {
  position: fixed; top: 0; left: 0; right: 0;
  padding: max(48px, env(safe-area-inset-top, 48px)) 24px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: linear-gradient(to bottom, var(--bg) 60%, transparent);
  z-index: 10;
}

/* Cards — vertically centered, two cards stacked with spacing */
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 80px 20px 32px;
  z-index: 2;
}

/* Cards container — centered stack */
.decks-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 36px);
}

/* Deck card */
.deck-btn {
  width: clamp(312px, 86vw, 507px);
  aspect-ratio: 0.68;
  background: none;
  border: none;
  padding: 0;
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(.22,.68,0,1.2);
  position: relative;
}

/* Stagger: Honeypot down, Dirty Chai up */
.sweet-btn { top:  120px; }
.saucy-btn { top: -100px; }

.deck-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(40,80,140,0.22));
}

.deck-btn:hover {
  transform: translateY(-5px) scale(1.015);
}
.deck-btn:active {
  transform: scale(0.97);
}


/* ════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════ */

#screen-game {
  background: url('Towel.png') center/cover no-repeat;
}

.game-top {
  position: fixed; top: 0; left: 0; right: 0;
  padding: max(48px, env(safe-area-inset-top, 48px)) 24px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, transparent 100%);
  z-index: 10;
}

.back-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: none; border: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.back-btn:hover { transform: translateX(-2px); }

.counter {
  font-family: var(--body);
  font-size: 11px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.18);
  border-radius: 50px; padding: 5px 14px;
}

.game-body {
  width: 100%; max-width: 460px;
  padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
}

.q-stack { position: relative; width: 100%; }

.q-ghost {
  position: absolute; inset: 0;
  width: 100%;
  min-height: clamp(360px, 55vh, 460px);
  border-radius: var(--r);
  background: var(--cream);
}
.q-ghost1 { transform: rotate(2deg) translateY(6px);     opacity: 0.55; }
.q-ghost2 { transform: rotate(-1.5deg) translateY(11px); opacity: 0.3; }
.q-stack.saucy-stack .q-ghost1,
.q-stack.saucy-stack .q-ghost2 { background: var(--saucy-cream); }

.q-card {
  position: relative; z-index: 3;
  width: 100%;
  min-height: clamp(360px, 55vh, 460px);
  background: var(--cream);
  border-radius: var(--r);
  box-shadow: 0 16px 48px rgba(60,120,170,0.18), 0 3px 10px rgba(60,120,170,0.10);
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column;
  padding: 40px 32px 32px;
  gap: 20px;
  user-select: none;
  transition: transform 0.15s ease;
  overflow: hidden;
}
.q-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none; opacity: 0.6;
  mix-blend-mode: multiply;
}
.q-card:active { transform: scale(0.975); }
.q-card.saucy-q { background: var(--saucy-cream); }

.q-mode, .q-tagline {
  position: relative; z-index: 1;
}
.q-mode {
  font-family: var(--body);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sweet-accent); font-weight: 400;
}
.q-card.saucy-q .q-mode { color: var(--saucy-accent); }

.q-tagline {
  font-family: var(--title);
  font-style: italic;
  font-size: 13px;
  color: var(--mid);
  margin-top: -14px;
}

.q-text {
  position: relative; z-index: 1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 300; line-height: 1.55;
  color: var(--text); flex: 1;
  display: flex; align-items: center;
  letter-spacing: -0.01em;
}

.card-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  position: relative; z-index: 1;
}

.done-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 400; letter-spacing: 0.08em;
  color: var(--sweet-accent);
  background: rgba(212,160,184,0.12);
  border: 1px solid rgba(212,160,184,0.3);
  border-radius: 50px; padding: 7px 16px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.done-btn:active { transform: scale(0.95); }

.q-card.saucy-q .done-btn {
  color: var(--saucy-accent);
  background: rgba(176,122,204,0.12);
  border-color: rgba(176,122,204,0.3);
}

.nav-btns { display: flex; gap: 8px; }

.nav-btn {
  font-family: var(--body); font-size: 15px;
  color: var(--mid);
  background: rgba(138,112,128,0.10);
  border: 1px solid rgba(138,112,128,0.2);
  border-radius: 50px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}
.nav-btn:active { transform: scale(0.92); }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.q-card.in { animation: slideIn 0.28s cubic-bezier(.22,.68,0,1.2) forwards; }

.prog-wrap {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.2);
}
.prog-bar {
  height: 100%; background: rgba(255,255,255,0.65);
  transition: width 0.4s ease;
  border-radius: 0 2px 2px 0;
}


/* ════════════════════════════════════════
   END SCREEN
════════════════════════════════════════ */

.end-wrap {
  text-align: center; padding: 40px 36px;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.end-title {
  font-family: var(--title);
  font-size: clamp(52px, 14vw, 72px);
  font-weight: 700; font-style: italic; color: #fff;
  line-height: 0.95; letter-spacing: -1px;
  text-shadow: 0 4px 24px rgba(60,140,190,0.25);
}
.end-sub {
  font-family: var(--body); font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em; margin-bottom: 8px;
}
.play-again {
  font-family: var(--title);
  font-style: italic; font-size: 22px; font-weight: 700;
  color: var(--text); background: var(--cream);
  border: none; border-radius: 50px; padding: 16px 40px;
  box-shadow: 0 8px 28px rgba(60,120,170,0.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.play-again:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(60,120,170,0.24); }
.play-again:active { transform: scale(0.97); }

.new-session-btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 300;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px; padding: 12px 28px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.new-session-btn:active { opacity: 0.6; }


/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */

@keyframes floatA {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-9px) rotate(1.5deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(-3px) rotate(-1deg); }
  50%       { transform: translateY(5px)  rotate(2deg); }
}
@keyframes floatC {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  30%       { transform: translateY(-10px) rotate(1deg); }
  70%       { transform: translateY(3px) rotate(-0.5deg); }
}
@keyframes cupBob {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50%       { transform: translateX(-50%) translateY(-8px); }
}
@keyframes cupWobble {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-3deg); }
  40%  { transform: rotate(3deg); }
  60%  { transform: rotate(-2deg); }
  80%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}


/* ════════════════════════════════════════
   RESPONSIVE — tablet (768px+)
════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Welcome — slightly wider container, bigger decorations */
  .welcome-inner  { max-width: 580px; }
  .splash-title   { font-size: clamp(80px, 13vw, 120px); top: calc(6% + 40px); }
  .cup-wrap       { width: clamp(300px, 58vw, 460px); top: calc(33% + 10px); }
  .w-noway        { width: clamp(150px, 30vw, 220px); }
  .w-drop         { width: clamp(200px, 36vw, 280px); }
  .w-emoji        { width: clamp(160px, 30vw, 220px); }
  .w-sugar        { width: clamp(360px, 72vw, 500px); }

  /* Crochet */
  .crochet-left,
  .crochet-right  { max-width: 18vw; }

  /* Deck — side by side, aligned at bottom so the stagger reads as intentional */
  .home-content   { padding: 80px 40px 40px; }
  .decks-wrap     {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(40px, 6vw, 80px);
  }
  .deck-btn       { width: clamp(338px, 40vw, 520px); }

  /* Game */
  .game-body      { max-width: 580px; }
  .q-card         { min-height: clamp(400px, 52vh, 500px); }
  .q-text         { font-size: clamp(20px, 2.2vw, 25px); }
}

/* ════════════════════════════════════════
   RESPONSIVE — laptop / desktop (1200px+)
════════════════════════════════════════ */

@media (min-width: 1200px) {
  /* Welcome — give the container more room */
  .welcome-inner  { max-width: 680px; }
  .splash-title   { font-size: clamp(100px, 10vw, 140px); top: calc(5% + 30px); }
  .cup-wrap       { width: clamp(340px, 46vw, 500px); top: 32%; }
  .w-noway        { width: clamp(160px, 14vw, 220px); left: -4%; }
  .w-drop         { width: clamp(210px, 18vw, 290px); right: -3%; }
  .w-emoji        { width: clamp(170px, 14vw, 230px); }
  .w-sugar        { width: clamp(380px, 28vw, 500px); }

  /* Crochet */
  .crochet-left,
  .crochet-right  { max-width: 14vw; }

  /* Deck — bigger cards, tighter centered gap */
  .home-content   { padding: 80px 60px 60px; }
  .decks-wrap     { gap: clamp(48px, 5vw, 80px); }
  .deck-btn       { width: clamp(403px, 34vw, 575px); }

  /* Game */
  .game-body      { max-width: 640px; }
  .q-card         { min-height: clamp(420px, 50vh, 520px); padding: 44px 40px 36px; }
  .q-text         { font-size: clamp(21px, 1.8vw, 26px); }
}

/* ════════════════════════════════════════
   RESPONSIVE — wide (1920px+)
════════════════════════════════════════ */

@media (min-width: 1920px) {
  .welcome-inner  { max-width: 760px; }
  .splash-title   { font-size: 148px; }
  .cup-wrap       { width: 520px; }
  .deck-btn       { width: 624px; }
  .game-body      { max-width: 700px; }
  .crochet-left,
  .crochet-right  { max-width: 11vw; }
}

/* ════════════════════════════════════════
   Landscape phones
════════════════════════════════════════ */

@media (max-height: 600px) and (max-width: 900px) {
  .splash-title { top: 4%;  font-size: clamp(48px, 11vw, 76px); }
  .cup-wrap     { top: 28%; width: clamp(160px, 52vw, 260px); }
  .w-noway      { top: 40%; }
  .w-drop       { top: 22%; }
  .w-emoji      { top: 62%; }
  .decks-wrap   { flex-direction: row; gap: 20px; }
  .deck-btn     { width: clamp(169px, 36vw, 260px); }
  .sweet-btn    { top: 40px; }
  .saucy-btn    { top: -40px; }
  .q-card       { min-height: clamp(260px, 58vh, 340px); padding: 24px 22px 20px; }
}