/* ─── Home Page Styles ─── */
/* Jackie's Couple Games V2 — Homepage */

/* ─── SVG Squiggly Filter Utility ─── */
.sketchy-btn {
  background: transparent;
  border: 2px solid #000;
  border-radius: 2px;
  filter: url(#squiggly);
  transition: all 0.2s ease;
}

.sketchy-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ─── Header ─── */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 0;
  position: relative;
  max-width: 1375px;
  margin: 0 auto;
}

.banner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 900px;
  width: 100%;
}

.banner-text {
  height: auto;
  max-width: 780px;
  width: 92%;
}

.banner-dice {
  height: auto;
  max-width: 120px;
  width: 16%;
  margin-left: -11%;
  transform: translateY(-18px);
}

/* ─── Drinking Mode Toggle — Inline in player-picker ─── */
.drinking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  font-size: 0.55rem;
  font-weight: 600;
  color: #2d2a26;
  cursor: pointer;
  user-select: none;
  border-radius: 16px;
  border: 1.5px solid #000;
  transition: all 0.3s ease;
  background: transparent;
  filter: url(#squiggly);
}

.drinking-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.drinking-toggle-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.drinking-toggle-emoji {
  font-size: 0.7rem;
}

/* Pill toggle track */
.drinking-toggle-track {
  width: 24px;
  height: 14px;
  background: #e0d9d1;
  border-radius: 7px;
  position: relative;
  transition: background 0.3s ease;
  flex-shrink: 0;
  border: 1px solid #000;
}

.drinking-toggle-track .toggle-thumb {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.3s ease;
  border: 1px solid #000;
}

.drinking-toggle.active .drinking-toggle-track {
  background: #f59e0b;
}

.drinking-toggle.active .drinking-toggle-track .toggle-thumb {
  left: 11px;
}

/* ─── Search Bar (top-right of header) ─── */
.search-bar {
  position: absolute;
  top: 30px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1.5px solid #000;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  filter: url(#squiggly);
  transition:
    background 0.2s ease,
    width 0.25s ease;
  width: 240px;
  z-index: 10;
}

.search-bar:focus-within {
  background: rgba(255, 255, 255, 0.85);
  width: 320px;
}

.search-icon {
  flex-shrink: 0;
  color: #8b8580;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Patrick Hand', cursive;
  font-size: 0.8rem;
  color: #2d2a26;
  outline: none;
  min-width: 0;
}

.search-input::placeholder {
  color: #b0a99f;
  font-family: 'Patrick Hand', cursive;
}

.search-clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #8b8580;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
}

.search-clear:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #2d2a26;
}

/* No results message */
.search-no-results {
  text-align: center;
  padding: 40px 20px;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.3rem;
  color: #8b8580;
}

.search-no-results-emoji {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 8px;
}

/* ─── Drinking mode search overrides ─── */
body.drinking-mode .search-bar {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

body.drinking-mode .search-bar:focus-within {
  background: rgba(255, 255, 255, 0.14);
}

body.drinking-mode .search-icon {
  color: rgba(255, 255, 255, 0.5);
}

body.drinking-mode .search-input {
  color: #fff;
}

body.drinking-mode .search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

body.drinking-mode .search-clear {
  color: rgba(255, 255, 255, 0.5);
}

body.drinking-mode .search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

body.drinking-mode .search-no-results {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Home Content Container ─── */
.home-content {
  max-width: 1375px;
  margin: 6px auto 40px;
  padding: 0;
  overflow: visible;
}

/* ─── Mood Sections ─── */
.mood-section {
  width: 100%;
  margin-top: 10px;
}

.mood-section:first-child {
  margin-top: 0;
}

.mood-label {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem;
  font-weight: 400;
  padding-left: 24px;
  margin-bottom: 6px;
  color: #2d2a26;
  filter: url(#squiggly);
}

.mood-row {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 0 24px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mood-row::-webkit-scrollbar {
  display: none;
}

/* ─── Category Page Header ─── */
.category-header {
  max-width: 1375px;
  margin: 0 auto;
  padding: 10px 24px 0;
}

.category-back {
  font-size: 0.85rem;
  color: #8b8580;
  text-decoration: none;
}

.category-back:hover {
  color: #2d2a26;
}

.category-title {
  font-family: 'Patrick Hand', cursive;
  font-size: 2rem;
  font-weight: 400;
  color: #2d2a26;
  margin: 8px 0 0;
}

body.drinking-mode .category-title {
  color: #fff;
}

body.drinking-mode .category-back {
  color: rgba(255, 255, 255, 0.6);
}

body.drinking-mode .category-back:hover {
  color: #fff;
}

/* ─── Category Card Overrides ─── */
.game-card.category-card .card-title {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  width: 80%;
  margin: 0 !important;
}

.game-card.category-card .card-tagline {
  text-shadow: none;
  text-align: center;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game-card.category-card.crystal-ball .card-tagline {
  color: #3d2b56;
}
.game-card.category-card.spectrum .card-tagline {
  color: #1a1a24;
}
.game-card.category-card.chemistry-lab .card-tagline {
  color: #1a1e2e;
}
.game-card.category-card.splitscreen .card-tagline {
  color: #fff;
}
.game-card.category-card.blueprint .card-tagline {
  color: #e0ecf8;
}
.game-card.category-card.treasure-map .card-tagline {
  color: #3b2314;
}
.game-card.category-card.liquorshelf .card-tagline {
  color: #f0e6d0;
}

/* Chemistry-lab category card — spread tubes wider so they don't overlap title */
.game-card.category-card.chemistry-lab .cl-tube-left {
  left: 4%;
}
.game-card.category-card.chemistry-lab .cl-tube-right {
  right: 4%;
}

/* Splitscreen category card — shrink title and allow wrapping, add black outline */
.game-card.category-card.splitscreen .card-title {
  font-size: clamp(20px, 3vw, 32px);
  white-space: normal;
  text-shadow:
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    2px 0 0 #000,
    -2px 0 0 #000;
}
.game-card.category-card.splitscreen .card-tagline {
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

/* Liquorshelf category card — add black outline to title and tagline */
.game-card.category-card.liquorshelf .card-title {
  text-shadow:
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000,
    2px 0 0 #000,
    -2px 0 0 #000;
}
.game-card.category-card.liquorshelf .card-tagline {
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  z-index: 12;
}

/* Treasure-map category card — make compass more transparent */
.game-card.category-card.treasure-map .tm-compass {
  opacity: 0.35;
}

/* Spectrum category card — move drawing below centered title */
.game-card.category-card.spectrum .sp-bar {
  bottom: 18%;
}
.game-card.category-card.spectrum .sp-marker {
  bottom: calc(18% - 8px);
}
.game-card.category-card.spectrum .sp-ticks {
  bottom: calc(18% + 14px);
}
.game-card.category-card.spectrum .sp-label {
  bottom: calc(18% - 28px);
}

/* ─── Featured Section with Bracket ─── */
.featured-section {
  position: relative;
  margin-bottom: 30px;
}

/* Featured label — vertical text just outside left bracket */
.featured-label {
  position: absolute;
  left: -38px;
  top: calc(50% - 88px);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  rotate: 180deg;
  font-family: 'Patrick Hand', cursive;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.04em;
  white-space: nowrap;
  filter: url(#squiggly);
  z-index: 2;
}

/* Left bracket */
.featured-section::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 4px;
  width: 8px;
  border: 2px solid #000;
  border-right: none;
  border-radius: 4px 0 0 4px;
  filter: url(#squiggly);
}

/* Right bracket */
.featured-section::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 4px;
  width: 8px;
  border: 2px solid #000;
  border-left: none;
  border-radius: 0 4px 4px 0;
  filter: url(#squiggly);
}

/* ─── Game Grid ─── */
.game-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 1px;
  margin-top: 20px;
  justify-content: flex-start;
}

.game-grid .game-card {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 200px;
}

/* ─── Category Sections ─── */
.category-section {
  margin-top: 40px;
}

.category-heading {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 12px 4px;
}

/* ─── Game Card — Big colorful tiles with hand-drawn border ─── */
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 26px;
  aspect-ratio: 23 / 10;
  border-radius: 16px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 3.5px solid #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 0 rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Sticker shine — glossy diagonal sheen */
.game-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Card annotation — hidden globally (styles preserved per-card for future tagline use) */
.card-annotation {
  display: none;
}

/* Cards inside mood rows — fixed width, no shrink */
.mood-row .game-card {
  flex-shrink: 0;
  width: calc((100% - 44px) / 3);
  min-width: 320px;
}

.game-card:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 0 rgba(0, 0, 0, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Card title — large, centered, prominent */
.card-title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.15;
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

/* On hover: card scales up only (no tagline) */

.card-tagline,
.game-card .card-tagline {
  display: none !important;
}

/* Lock overlay for drinking-mode-only games */
.card-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 24px;
  z-index: 20;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.card-lock-overlay .lock-icon {
  font-size: 2rem;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  padding: 6px 10px;
}

.card-lock-overlay .lock-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
}

/* Drink badge (shown in drinking mode) */
.drink-badge {
  display: none;
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  letter-spacing: 0.03em;
  z-index: 2;
}

/* Category badge on category cards */
.category-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
}

/* Under construction sticker */
.construction-sticker {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  letter-spacing: 0.02em;
  z-index: 2;
  text-transform: uppercase;
  filter: url(#squiggly);
}

/* ─── More Games Link ─── */
.more-games-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  width: 180px;
  aspect-ratio: auto;
  align-self: stretch;
  border: 2px dashed #bbb;
  border-radius: 16px;
  text-decoration: none;
  color: #999;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.02);
}

.more-games-card:hover {
  border-color: #888;
  color: #666;
  background: rgba(0, 0, 0, 0.04);
}

.more-games-card .more-emoji {
  font-size: 1.5rem;
}

/* ─── Footer ─── */
.site-footer {
  text-align: center;
  padding: 20px 20px 40px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #2d2a26;
  border: 2px solid #000;
  filter: url(#squiggly);
  border-radius: 2px;
  background: transparent;
  transition: all 0.2s ease;
}

.footer-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}

.footer-btn .yt-icon {
  flex-shrink: 0;
}

.btn-emoji {
  font-size: 1.45rem;
  line-height: 1;
}

.footer-credit {
  margin-top: 40px;
  font-size: 0.75rem;
  color: #b0a99f;
}

.footer-credit a {
  color: #8b8580;
  text-decoration: underline;
}

.footer-credit a:hover {
  color: #2d2a26;
}

/* ═══════════════════════════════════════════ */
/* ─── DRINKING MODE — Dark Theme Override ── */
/* ═══════════════════════════════════════════ */

body.drinking-mode {
  background: #2e1f0f;
  color: #ffffff;
}

body.drinking-mode .drinking-toggle {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

body.drinking-mode .drinking-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.drinking-mode .game-card .drink-badge {
  display: block;
}

body.drinking-mode .card-lock-overlay {
  display: none;
}

body.drinking-mode .banner-text {
  filter: brightness(0) invert(1) drop-shadow(0 0 2px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000);
}

body.drinking-mode .mood-label {
  color: rgba(255, 255, 255, 0.85);
}

body.drinking-mode .more-games-card {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

body.drinking-mode .more-games-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

body.drinking-mode .footer-btn {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

body.drinking-mode .footer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
}

body.drinking-mode .footer-btn .yt-icon rect {
  fill: rgba(255, 80, 80, 0.8);
}

body.drinking-mode .featured-section::before,
body.drinking-mode .featured-section::after {
  border-color: rgba(255, 255, 255, 0.4);
}

body.drinking-mode .featured-label {
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Featured Collection Card (mobile only) ─── */
.featured-collection-card {
  background: #f5f0eb;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.featured-collection-card .card-title {
  font-size: 1.5rem;
  opacity: 1;
}

.featured-collection-card:hover .card-title {
  opacity: 1;
}

.featured-collection-count {
  font-family: 'Patrick Hand', cursive;
  font-size: 0.85rem;
  color: #8b8580;
  position: relative;
  z-index: 2;
}

body.drinking-mode .featured-collection-card {
  background: #3d2a1e;
}

body.drinking-mode .featured-collection-card .card-title {
  color: #fff;
}

body.drinking-mode .featured-collection-count {
  color: rgba(255, 255, 255, 0.5);
}

/* ─── Responsive ─── */

@media (max-width: 1100px) {
  .mood-row .game-card {
    min-width: 300px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 16px 16px 0;
  }

  /* Move player picker above banner on mobile */
  .player-picker {
    order: -1;
    margin-bottom: 8px;
    width: 100%;
    justify-content: space-between;
  }

  .banner-wrap {
    max-width: 100%;
  }

  .banner-text {
    width: 80%;
    max-width: 320px;
  }

  .banner-dice {
    max-width: 55px;
    width: 14%;
    margin-left: -35px;
    transform: translateY(-5px);
  }

  .drinking-toggle {
    margin-left: auto;
    margin-top: 0;
    font-size: 0.5rem;
    padding: 5px 8px;
  }

  .home-content {
    margin: 4px auto 30px;
  }

  /* Hide featured bracket + label on mobile (replaced by collection card) */
  .featured-section::before,
  .featured-section::after,
  .featured-label {
    display: none;
  }

  .featured-section {
    margin-bottom: 0;
  }

  /* Game grid — single column on mobile */
  .game-grid {
    gap: 10px;
    padding: 0 14px;
  }

  .game-grid .game-card {
    flex: 0 0 100%;
    min-width: unset;
  }

  /* Vertical stack — no horizontal scroll on mobile */
  .mood-section {
    margin-top: 12px;
  }

  .mood-label {
    padding-left: 14px;
    font-size: 1.05rem;
    margin-bottom: 4px;
  }

  .mood-row {
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 6px;
    overflow-x: visible;
  }

  .mood-row .game-card {
    min-width: unset;
    width: 100%;
    flex-shrink: 1;
  }

  .game-card {
    aspect-ratio: 5 / 2;
    min-height: unset;
    padding: 16px 20px;
  }

  .card-title {
    font-size: 1.5rem;
  }

  /* Disable hover effects on mobile */
  .card-tagline {
    display: none !important;
  }

  .game-card:hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 4px 0 rgba(0, 0, 0, 0.08),
      0 8px 16px rgba(0, 0, 0, 0.06);
  }

  .more-games-card {
    min-width: unset;
    width: 100%;
    aspect-ratio: auto;
    height: 60px;
    font-size: 0.85rem;
  }

  .search-bar {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
  }

  .search-bar:focus-within {
    width: 100%;
  }

  .search-input {
    font-size: 0.85rem;
  }

  .footer-btn {
    font-size: 0.8rem;
    padding: 8px 16px;
  }
}