/* ============================================================
   JACKIES COUPLE GAMES — Neal.fun layout + game-covers card styles
   ============================================================ */

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

:root {
  --font-body: 'Fredoka', 'Inter', system-ui, sans-serif;
  --max-width: 1375px;
  --grid-gap: 22px;
  --card-radius: 16px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: #f5f0eb;
  color: #000;
  min-height: 100vh;
  padding: 0 20px 0;
  -webkit-font-smoothing: antialiased;
}

/* Subtle paper texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ---------- Header / Logo ---------- */
.logo-section {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.site-title-img {
  display: block;
  margin: 20px auto 0;
  width: 650px;
  height: auto;
  /* Crop whitespace from the PNG — show only the text region */
  object-fit: cover;
  object-position: center 48%;
  max-height: 130px;
}

.site-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: #999;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

/* ---------- Home Tabs ---------- */
.home-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px auto 20px;
  max-width: var(--max-width);
  position: relative;
  z-index: 1;
}
.home-tab {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}
.home-tab:hover {
  border-color: #bbb;
  color: #555;
}
.home-tab-active {
  background: #333;
  color: #fff;
  border-color: #333;
}
.home-tab-active:hover {
  background: #444;
  border-color: #444;
  color: #fff;
}

/* ---------- Game Grid ---------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---------- Category Divider ---------- */
.category-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 10px;
}

.category-divider::before,
.category-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ccc5ba;
}

.category-divider span {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: #b0a899;
  letter-spacing: 1px;
  text-transform: lowercase;
}

/* ============================================================
   BASE CARD STYLES
   ============================================================ */
.card {
  border-radius: var(--card-radius);
  aspect-ratio: 23 / 10;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.card:active {
  transform: scale(0.98);
}

/* ============================================================
   STYLE 1: JOURNAL — vintage naturalist journal (lined paper)
   ============================================================ */
.card-style-journal {
  background: #faf6f0;
  border: 2px solid #d4c5a9;
  background-image:
    repeating-linear-gradient(transparent, transparent 27px, #e8dcc8 28px);
  flex-direction: column;
  padding: 20px 30px;
}
.card-style-journal .deco {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 42px;
  transform: rotate(-15deg);
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.1));
  animation: journalWobble 3s ease-in-out infinite;
}
.card-style-journal .deco-2 {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 28px;
  transform: rotate(10deg);
  animation: journalWobble2 3.5s ease-in-out infinite;
}
.card-style-journal .deco-3 {
  position: absolute;
  top: 12px;
  right: 30px;
  font-size: 22px;
  transform: rotate(20deg);
  opacity: 0.7;
  animation: journalWobble3 4s ease-in-out infinite;
}
@keyframes journalWobble {
  0%, 100% { transform: rotate(-15deg) scale(1); }
  50% { transform: rotate(-5deg) scale(1.08); }
}
@keyframes journalWobble2 {
  0%, 100% { transform: rotate(10deg) translateY(0); }
  50% { transform: rotate(18deg) translateY(-4px); }
}
@keyframes journalWobble3 {
  0%, 100% { transform: rotate(20deg) scale(1); opacity: 0.7; }
  50% { transform: rotate(12deg) scale(1.1); opacity: 0.9; }
}
.card-style-journal h2 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  color: #3a3225;
  z-index: 1;
}

/* ============================================================
   STYLE 2: ARCADE — bold red arcade
   ============================================================ */
.card-style-arcade {
  background: #e63228;
  border: 3px solid #1a1a1a;
  position: relative;
  overflow: hidden;
}
.card-style-arcade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.05) 3px,
    rgba(0,0,0,0.05) 4px
  );
}
.card-style-arcade h2 {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: #fff;
  text-shadow: 3px 3px 0 #1a1a1a, -1px -1px 0 #1a1a1a;
  letter-spacing: 3px;
  z-index: 1;
  transform: rotate(-3deg);
  text-align: center;
  line-height: 1.05;
}
.card-style-arcade .deco {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 14px;
  color: #ffeb3b;
  font-family: 'Press Start 2P', monospace;
  z-index: 1;
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.card-style-arcade .deco-2 {
  position: absolute;
  bottom: 15px;
  left: 25px;
  font-size: 32px;
  transform: rotate(-20deg);
  z-index: 1;
  animation: clickPulse 0.6s ease infinite;
}
@keyframes clickPulse {
  0%, 100% { transform: rotate(-20deg) scale(1); }
  50% { transform: rotate(-20deg) scale(0.85); }
}
.card-style-arcade .deco-3 {
  position: absolute;
  font-size: 18px;
  z-index: 1;
  top: 15px;
  left: 20px;
  transform: rotate(30deg);
}

/* ---------- TYPEWRITER HOVER TAGLINE (first card) ---------- */
.card.typing h2,
.card.typing .sub {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.card.typing .deco,
.card.typing .deco-2,
.card.typing .deco-3 {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hover-tagline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Bangers', cursive;
  font-size: 30px;
  color: #ffeb3b;
  letter-spacing: 1.5px;
  z-index: 2;
  pointer-events: none;
  text-shadow: 2px 2px 0 #1a1a1a, -1px -1px 0 #1a1a1a;
  padding: 20px;
}

/* Inner span keeps cursor inline with text */
.hover-tagline-text {
  display: inline;
}

/* Blinking cursor right after last character */
.card:hover .hover-tagline-text::after {
  content: '|';
  animation: blink 0.6s step-end infinite;
}

/* Free Online Games variant — white on rich sky blue */
.hover-tagline-gnp {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 1px 2px 4px rgba(0,50,90,0.5);
}
.hover-tagline-gnp .hover-tagline-text::after {
  color: rgba(255,255,255,0.6);
}

/* Guess that Quote variant — warm brown Playfair Display on journal cream */
.hover-tagline-gtq {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  color: #3a3225;
  letter-spacing: 0.01em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}
.hover-tagline-gtq .hover-tagline-text::after {
  color: #8b6f47;
}

/* ---- Cute "complete" post-it sticker ---- */
.card:has(.card-sticker-complete) {
  overflow: visible;
}
.card-sticker-complete {
  position: absolute;
  bottom: -14px;
  right: -16px;
  background: #fff9a8;
  color: #5a4e2f;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 3px;
  transform: rotate(6deg);
  box-shadow: 2px 3px 8px rgba(0,0,0,0.18);
  z-index: 5;
  pointer-events: none;
  border: 1.5px solid #e8dd82;
  letter-spacing: 0.02em;
}

/* ---- "drinks required" warning sticker ---- */
.card:has(.card-sticker-warning) {
  overflow: visible;
}
.card-sticker-warning {
  position: absolute;
  top: -12px;
  right: -10px;
  left: auto;
  background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%);
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 14px;
  font-weight: 400;
  padding: 7px 14px;
  border-radius: 3px 3px 0 3px;
  transform: rotate(3deg);
  box-shadow: 2px 3px 12px rgba(200,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  z-index: 6;
  pointer-events: none;
  border: 2px solid #aa0000;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.card-sticker-warning::before {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 0;
  width: 0;
  height: 0;
  border-right: 6px solid #990000;
  border-bottom: 6px solid transparent;
}
.card-sticker-warning::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.06) 4px,
    rgba(255,255,255,0.06) 5px
  );
  border-radius: inherit;
  pointer-events: none;
}

/* ============================================================
   STYLE 3: ROADSIGN — green road sign
   ============================================================ */
.card-style-roadsign {
  background: linear-gradient(135deg, #2d8c4e 0%, #1a6b35 100%);
  border: 4px solid #f0f0f0;
  outline: 3px solid #1a6b35;
  position: relative;
}
.card-style-roadsign::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.3) 50%, transparent 90%);
}
.card-style-roadsign h2 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 42px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.card-style-roadsign .deco {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #fff;
}
.card-style-roadsign .deco-2 {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 28px;
}

/* ============================================================
   STYLE 4: KITCHEN — warm kitchen collage
   ============================================================ */
.card-style-kitchen {
  background: #fff8e7;
  border: 2px solid #e8d5b7;
  position: relative;
  flex-direction: column;
  gap: 4px;
}
.card-style-kitchen::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed #d4c09e;
  border-radius: 10px;
  pointer-events: none;
}
.card-style-kitchen h2 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 44px;
  color: #8b4513;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.card-style-kitchen .sub {
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: #b8860b;
  z-index: 1;
}
.card-style-kitchen .deco { position: absolute; font-size: 30px; }
.card-style-kitchen .deco:nth-of-type(1) { top: 10px; left: 15px; transform: rotate(-10deg); }
.card-style-kitchen .deco:nth-of-type(2) { bottom: 10px; right: 15px; transform: rotate(15deg); }
.card-style-kitchen .deco:nth-of-type(3) { top: 10px; right: 20px; transform: rotate(5deg); }

/* ============================================================
   STYLE 5: MINIMAL — clean minimal with dots
   ============================================================ */
.card-style-minimal {
  background: #fafafa;
  border: 1.5px solid #e0e0e0;
  position: relative;
  flex-direction: column;
  gap: 6px;
}
.card-style-minimal .dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: absolute;
  top: 15px;
  right: 15px;
}
.card-style-minimal .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ccc;
}
.card-style-minimal .dot.filled { background: #4CAF50; border-color: #4CAF50; animation: dotPulse 2s ease-in-out infinite; }
.card-style-minimal .dot.filled-b { background: #2196F3; border-color: #2196F3; animation: dotPulse 2s ease-in-out 0.3s infinite; }
.card-style-minimal .dot.filled-r { background: #FF5722; border-color: #FF5722; animation: dotPulse 2s ease-in-out 0.6s infinite; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
}
.card-style-minimal h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: #333;
  z-index: 1;
  text-align: center;
  line-height: 1.15;
}
.card-style-minimal .check {
  position: absolute;
  bottom: 12px;
  left: 20px;
  width: 22px;
  height: 22px;
  border: 2px solid #4CAF50;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4CAF50;
  font-size: 14px;
  font-weight: bold;
}

/* ============================================================
   STYLE 6: PARCHMENT — aged parchment / letter
   ============================================================ */
.card-style-parchment {
  background: #f0e6d3;
  border: 2px solid #c4a97d;
  position: relative;
}
.card-style-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(139,90,43,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,90,43,0.06) 0%, transparent 50%);
}
.card-style-parchment h2 {
  font-family: 'Special Elite', cursive;
  font-size: 34px;
  color: #5c3d1e;
  letter-spacing: 2px;
  z-index: 1;
  text-align: center;
  line-height: 1.2;
}
.card-style-parchment .deco {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 28px;
  transform: rotate(-30deg);
}
.card-style-parchment .deco-2 {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 24px;
}

/* ============================================================
   STYLE 7: SKY — sky blue playful / balloon
   ============================================================ */
.card-style-sky {
  background: linear-gradient(180deg, #4a9bc8 0%, #6ab4dc 35%, #92cce8 70%, #bce0f4 100%);
  border: 2.5px solid #3a8bbf;
  position: relative;
  overflow: hidden;
}
/* Fluffy cloud shapes on the card */
.card-style-sky::before,
.card-style-sky::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  z-index: 0;
  pointer-events: none;
}
.card-style-sky::before {
  width: 120px; height: 50px;
  bottom: 18px; left: -15px;
  border-radius: 50px;
  box-shadow:
    30px -15px 0 10px rgba(255,255,255,0.4),
    60px -5px 0 15px rgba(255,255,255,0.35),
    90px -10px 0 8px rgba(255,255,255,0.3);
}
.card-style-sky::after {
  width: 100px; height: 40px;
  bottom: 30px; right: -10px;
  border-radius: 40px;
  box-shadow:
    -25px -12px 0 8px rgba(255,255,255,0.35),
    -55px -5px 0 12px rgba(255,255,255,0.3);
}
.card-style-sky h2 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,60,100,0.4), 0 0 20px rgba(0,100,180,0.15);
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.card-style-sky .deco {
  position: absolute;
  font-size: 36px;
  animation: float 3s ease-in-out infinite;
  z-index: 1;
}
.card-style-sky .deco:nth-of-type(1) { left: 15px; top: 5px; animation-delay: 0s; }
.card-style-sky .deco:nth-of-type(2) { right: 20px; top: 15px; animation-delay: 0.8s; }
.card-style-sky .deco-2 {
  position: absolute;
  left: 35%;
  bottom: 5px;
  animation: float 3s ease-in-out infinite;
  animation-delay: 1.5s;
  font-size: 24px;
  z-index: 1;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   STYLE 8: BLUEPRINT — blueprint / graph paper
   ============================================================ */
.card-style-blueprint {
  background: #e8f4fc;
  border: 2px solid #1a1a1a;
  position: relative;
  overflow: hidden;
}
.card-style-blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(100,160,210,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,160,210,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}
.card-style-blueprint h2 {
  font-family: 'Permanent Marker', cursive;
  font-size: 38px;
  color: #1565C0;
  z-index: 1;
  transform: rotate(-2deg);
  text-align: center;
  line-height: 1.1;
}
.card-style-blueprint .deco {
  position: absolute;
  bottom: 8px;
  left: 20px;
  z-index: 1;
}
.card-style-blueprint .deco svg {
  width: 40px;
  height: 50px;
}
.card-style-blueprint .deco-2 {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Courier Prime', monospace;
  font-size: 12px;
  color: #90a4ae;
  z-index: 1;
  text-align: right;
  line-height: 1.4;
}

/* ============================================================
   STYLE 9: SPACE — dark dramatic / cosmos
   ============================================================ */
.card-style-space {
  background: radial-gradient(ellipse at 30% 40%, #1a1a2e 0%, #0d0d1a 100%);
  border: 2px solid #333;
  position: relative;
  overflow: hidden;
}
.card-style-space::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 12%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(240,230,208,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: spaceBob 8s ease-in-out infinite;
}
.card-style-space::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.4), transparent);
}
.card-style-space h2 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 34px;
  color: #f0e6d0;
  z-index: 1;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.15;
}
.card-style-space .deco {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 26px;
  animation: spaceFloat 5s ease-in-out infinite;
  z-index: 1;
}
.card-style-space .deco-2 {
  position: absolute;
  bottom: 14px;
  left: 18px;
  font-size: 28px;
  z-index: 1;
  animation: spaceBob 6s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes spaceFloat {
  0% { transform: translate(0, 0) rotate(-10deg); }
  50% { transform: translate(-6px, 4px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(-10deg); }
}
@keyframes spaceBob {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes streak {
  0% { transform: translate(0, 0) rotate(-25deg); opacity: 1; }
  70% { transform: translate(-40px, 25px) rotate(-25deg); opacity: 1; }
  85% { opacity: 0; }
  86% { transform: translate(0, 0) rotate(-25deg); opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   STYLE 10: PIXEL — retro pixel / gameboy
   ============================================================ */
.card-style-pixel {
  background: #c8e6c9;
  border: 3px solid #333;
  position: relative;
  image-rendering: pixelated;
}
.card-style-pixel h2 {
  font-family: 'Silkscreen', cursive;
  font-size: 26px;
  color: #1b5e20;
  z-index: 1;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.3;
}
.card-style-pixel .deco {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 36px;
  animation: hop 0.8s ease infinite;
}
.card-style-pixel .deco-2 {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 36px;
  z-index: 1;
  animation: hop 0.8s ease infinite;
}

/* ============================================================
   STYLE 11: MUSIC — purple gradient, musical
   ============================================================ */
.card-style-music {
  background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 50%, #ce93d8 100%);
  border: 2px solid #6a1b9a;
  position: relative;
  overflow: hidden;
}
.card-style-music::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    rgba(255,255,255,0.02) 0deg 10deg,
    transparent 10deg 20deg
  );
}
.card-style-music h2 {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  color: #fff;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  text-align: center;
  line-height: 1.15;
}
.card-style-music .deco {
  position: absolute;
  font-size: 32px;
  z-index: 1;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.card-style-music .deco:nth-of-type(1) { top: 10px; left: 15px; transform: rotate(-15deg); animation: chaosFloat 1.2s ease-in-out infinite; }
.card-style-music .deco:nth-of-type(2) { bottom: 12px; right: 18px; transform: rotate(20deg); animation: chaosFloat 1.2s ease-in-out infinite 0.4s; }
.card-style-music .deco-2 {
  position: absolute;
  bottom: 14px;
  left: 18px;
  font-size: 28px;
  z-index: 1;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.card-style-music .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 0;
}
.card-style-music .wave svg { width: 100%; height: 40px; }

/* ============================================================
   STYLE 12: DICE — cream with bold black border
   ============================================================ */
.card-style-dice {
  background: #fffdf5;
  border: 3px solid #1a1a1a;
  position: relative;
}
.card-style-dice h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 40px;
  color: #1a1a1a;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}
.card-style-dice .deco {
  position: absolute;
  font-size: 40px;
  z-index: 1;
}
.card-style-dice .deco:nth-of-type(1) {
  top: 8px;
  left: 12px;
  transform: rotate(-20deg);
  animation: diceJiggle1 2.5s ease-in-out infinite;
}
.card-style-dice .deco:nth-of-type(2) {
  bottom: 8px;
  right: 15px;
  transform: rotate(15deg);
  animation: diceJiggle2 3s ease-in-out infinite;
}
@keyframes diceJiggle1 {
  0%, 100% { transform: rotate(-20deg) scale(1); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(-25deg) scale(0.95); }
}
@keyframes diceJiggle2 {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-5px); }
}

/* ============================================================
   STYLE 13: GAME NIGHT PICKS — warm charcoal + cream curated
   ============================================================ */
.card-style-gamenightpicks {
  background: #2a2a2a;
  border: 2.5px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 6px;
}
.card-style-gamenightpicks::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.card-style-gamenightpicks h2 {
  font-family: 'Bangers', cursive;
  font-size: 42px;
  color: #fffdf9;
  z-index: 1;
  text-align: center;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.card-style-gamenightpicks .sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #a89f94;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.card-style-gamenightpicks .deco {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 28px;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}
.card-style-gamenightpicks .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 24px;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
  animation-delay: 1s;
}
.card-style-gamenightpicks .deco-3 {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 20px;
  z-index: 1;
  opacity: 0.7;
}

/* ============================================================
   STYLE 14: LAVA — hot red/orange gradient, bold
   ============================================================ */
.card-style-chaos {
  background: #3b5998;
  background: linear-gradient(135deg, #2c3e7a 0%, #4a69bd 50%, #3b5998 100%);
  border: 3px solid #1e2d5e;
  position: relative;
  overflow: hidden;
}
.card-style-chaos::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px
    );
  pointer-events: none;
}
.card-style-chaos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 8px,
    rgba(255,255,255,0.04) 8px,
    rgba(255,255,255,0.04) 10px
  );
  pointer-events: none;
  animation: chaosRain 1.5s linear infinite;
}
@keyframes chaosRain {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px); }
}
.card-style-chaos h2 {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: #ffb88c;
  text-shadow:
    0 0 7px rgba(255,160,114,0.8),
    0 0 15px rgba(255,160,114,0.5),
    0 0 30px rgba(255,140,80,0.35),
    0 0 50px rgba(255,120,60,0.2),
    2px 2px 0 rgba(0,0,0,0.15);
  letter-spacing: 3px;
  z-index: 2;
  text-align: center;
  line-height: 1.05;
}
.card-style-chaos .deco {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-size: 34px;
  z-index: 2;
  animation: chaosFloat 1.2s ease-in-out infinite;
}
.card-style-chaos .deco-2 {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 28px;
  z-index: 2;
  animation: chaosFloat 1.2s ease-in-out infinite 0.4s;
}
@keyframes chaosFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.1); }
}

/* ============================================================
   STYLE: AU-CASINO — dark casino / gold awards aesthetic
   ============================================================ */
.card-style-au-casino {
  background: linear-gradient(180deg, #4a1520 0%, #5a1a28 20%, #6a2030 50%, #5a1a28 80%, #3a0e16 100%);
  border: 2px solid #d4a844;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 4px;
}
.card-style-au-casino::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 75% 55%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(1px 1px at 25% 70%, rgba(255, 255, 255, 0.06), transparent),
    radial-gradient(1.5px 1.5px at 60% 80%, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
  z-index: 0;
}
.card-style-au-casino::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}
.card-style-au-casino h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 38px;
  background: linear-gradient(135deg, #f0d060 0%, #d4a844 40%, #c49030 60%, #e8c860 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 1;
  text-align: center;
  line-height: 1.2;
  padding: 4px 0;
  filter: drop-shadow(0 2px 6px rgba(212, 168, 68, 0.3));
}
.card-style-au-casino .sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(212, 168, 68, 0.7);
  z-index: 1;
}
.card-style-au-casino .deco {
  position: absolute;
  top: 10px;
  left: 15px;
  font-size: 28px;
  z-index: 2;
  animation: auCardFloat 3s ease-in-out infinite;
}
.card-style-au-casino .deco-2 {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 26px;
  z-index: 2;
  animation: auCardFloat 3s ease-in-out infinite 0.5s;
}
.card-style-au-casino .deco-3 {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  z-index: 2;
  animation: auCardFloat 3s ease-in-out infinite 1s;
}
/* Sparkle dots that fade in and out */
.au-card-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 2;
  opacity: 0;
  animation: auSparkle 2.5s ease-in-out infinite;
  pointer-events: none;
}
.au-card-sparkle-1 { top: 30%; left: 20%; animation-delay: 0s; }
.au-card-sparkle-2 { top: 60%; right: 25%; animation-delay: 0.8s; }
.au-card-sparkle-3 { bottom: 25%; left: 45%; animation-delay: 1.6s; }
@keyframes auCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes auSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* --- Real or Fake graffiti card doodles --- */
.rof-card-graf {
  position: absolute;
  z-index: 2;
  display: inline-block;
  pointer-events: none;
}
.rof-card-graf svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Heart — top left, hot pink */
.rof-card-graf-1 {
  top: 8px;
  left: 12px;
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 5px rgba(255,70,130,0.6));
  animation: rofCardFloat 2.5s ease-in-out infinite;
}
/* Star — bottom right, yellow */
.rof-card-graf-2 {
  bottom: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 5px rgba(255,230,50,0.6));
  animation: rofCardFloat 2.8s ease-in-out infinite 0.4s;
}
/* Lightning — top right, lime green */
.rof-card-graf-3 {
  top: 10px;
  right: 16px;
  width: 28px;
  height: 42px;
  filter: drop-shadow(0 0 5px rgba(120,255,70,0.6));
  animation: rofCardFloat 2.2s ease-in-out infinite 0.8s;
}
@keyframes rofCardFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  50% { transform: translateY(-5px) scale(1.08) rotate(3deg); }
}

.hover-tagline-hs {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 22px !important;
  color: #f0e6d0 !important;
}

/* ============================================================
   GAME SCREEN — BASE LAYOUT
   ============================================================ */
.game-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 30px 40px;
  animation: gsFadeIn 0.3s ease;
}

.game-screen::-webkit-scrollbar { width: 6px; }
.game-screen::-webkit-scrollbar-track { background: transparent; }
.game-screen::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 3px; }

@keyframes gsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Back button */
.game-screen-back {
  position: fixed;
  top: 20px;
  left: 24px;
  background: none;
  border: 2px solid rgba(128,128,128,0.3);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  z-index: 110;
  transition: transform 0.15s ease, background 0.15s ease;
  color: inherit;
}
.game-screen-back:hover {
  transform: scale(1.05);
  background: rgba(128,128,128,0.1);
}

/* Intro content wrapper */
.game-screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 650px;
  width: 100%;
  flex: 1;
  justify-content: center;
}

/* Title */
.game-screen-title {
  font-size: 3.2rem;
  line-height: 1.1;
  margin-bottom: 12px;
  z-index: 1;
  opacity: 0;
  animation: slideInTitle 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: font-size 0.4s ease, margin 0.4s ease;
}

@keyframes slideInTitle {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tagline */
.game-screen-tagline {
  font-size: 1.1rem;
  margin-bottom: 24px;
  z-index: 1;
  opacity: 0;
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* Description */
.game-screen-description {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: 36px;
  z-index: 1;
  opacity: 0;
  animation: fadeInUp 0.4s ease 0.3s forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Play button */
.game-screen-play-btn {
  padding: 16px 40px;
  font-size: 1.15rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  animation: scaleIn 0.4s ease 0.45s forwards;
  transition: transform 0.15s ease, filter 0.15s ease;
  letter-spacing: 0.5px;
}
.game-screen-play-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.game-screen-play-btn:active {
  transform: scale(0.97);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Warning */
.game-screen-warning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  z-index: 1;
  opacity: 0;
  animation: fadeInUp 0.4s ease 0.35s forwards;
}

/* ============================================================
   GAME SCREEN — 12 THEMES
   ============================================================ */

/* --- ARCADE --- */
.game-screen-arcade {
  background: #e63228;
  color: #fff;
}
.game-screen-arcade::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px);
  pointer-events: none;
  z-index: 0;
}
.game-screen-arcade .game-screen-back {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}
.game-screen-arcade .game-screen-back:hover { background: rgba(255,255,255,0.1); }
.game-screen-arcade .game-screen-title {
  font-family: 'Bangers', cursive;
  text-shadow: 3px 3px 0 #1a1a1a, -1px -1px 0 #1a1a1a;
  letter-spacing: 4px;
}
.game-screen-arcade .game-screen-tagline {
  font-family: 'Press Start 2P', monospace;
  color: #ffeb3b;
  font-size: 0.75rem;
  letter-spacing: 1px;
}
.game-screen-arcade .game-screen-description {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
}
.game-screen-arcade .game-screen-play-btn {
  background: #ffeb3b;
  color: #1a1a1a;
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  letter-spacing: 2px;
  border: 3px solid #1a1a1a;
}
.game-screen-arcade .game-screen-warning { color: #ffeb3b; }

/* --- JOURNAL --- */
.game-screen-journal {
  background: #faf6f0;
  background-image: repeating-linear-gradient(transparent, transparent 27px, #e8dcc8 28px);
  color: #3a3225;
}
.game-screen-journal .game-screen-back {
  color: #3a3225;
  border-color: #d4c5a9;
}
.game-screen-journal .game-screen-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
}
.game-screen-journal .game-screen-tagline {
  font-family: 'Playfair Display', serif;
  color: #8b7355;
  font-style: italic;
}
.game-screen-journal .game-screen-description {
  color: #5c4a32;
  font-family: 'Courier Prime', monospace;
  font-size: 0.95rem;
}
.game-screen-journal .game-screen-play-btn {
  background: #3a3225;
  color: #faf6f0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

/* --- ROADSIGN --- */
.game-screen-roadsign {
  background: linear-gradient(135deg, #2d8c4e 0%, #1a6b35 100%);
  color: #fff;
}
.game-screen-roadsign .game-screen-back {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}
.game-screen-roadsign .game-screen-back:hover { background: rgba(255,255,255,0.1); }
.game-screen-roadsign .game-screen-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}
.game-screen-roadsign .game-screen-tagline {
  font-family: 'Fredoka', sans-serif;
  color: rgba(255,255,255,0.7);
}
.game-screen-roadsign .game-screen-description {
  color: rgba(255,255,255,0.85);
}
.game-screen-roadsign .game-screen-play-btn {
  background: #fff;
  color: #1a6b35;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

/* --- KITCHEN --- */
.game-screen-kitchen {
  background: #fff8e7;
  color: #8b4513;
}
.game-screen-kitchen::before {
  content: '';
  position: fixed;
  inset: 20px;
  border: 2px dashed #d4c09e;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
}
.game-screen-kitchen .game-screen-back {
  color: #8b4513;
  border-color: #d4c09e;
}
.game-screen-kitchen .game-screen-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}
.game-screen-kitchen .game-screen-tagline {
  font-family: 'Caveat', cursive;
  color: #b8860b;
}
.game-screen-kitchen .game-screen-description {
  color: #6d4c30;
}
.game-screen-kitchen .game-screen-play-btn {
  background: #8b4513;
  color: #fff8e7;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 700;
}

/* --- MINIMAL --- */
.game-screen-minimal {
  background: #fafafa;
  color: #333;
  border: 1.5px solid #e0e0e0;
}
.game-screen-minimal .game-screen-back {
  color: #555;
  border-color: #ddd;
}
.game-screen-minimal .game-screen-title {
  font-family: 'DM Serif Display', serif;
}
.game-screen-minimal .game-screen-tagline {
  font-family: var(--font-body);
  color: #888;
}
.game-screen-minimal .game-screen-description {
  color: #666;
}
.game-screen-minimal .game-screen-play-btn {
  background: #222;
  color: #fff;
  font-family: 'DM Serif Display', serif;
}

/* --- PARCHMENT --- */
.game-screen-parchment {
  background: #f0e6d3;
  color: #5c3d1e;
}
.game-screen-parchment::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(139,90,43,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139,90,43,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.game-screen-parchment .game-screen-back {
  color: #5c3d1e;
  border-color: #c4a97d;
}
.game-screen-parchment .game-screen-title {
  font-family: 'Special Elite', cursive;
  letter-spacing: 3px;
}
.game-screen-parchment .game-screen-tagline {
  font-family: 'Special Elite', cursive;
  color: #8b6f47;
}
.game-screen-parchment .game-screen-description {
  font-family: 'Courier Prime', monospace;
  color: #7a5c3a;
  font-size: 0.95rem;
}
.game-screen-parchment .game-screen-play-btn {
  background: #5c3d1e;
  color: #f0e6d3;
  font-family: 'Special Elite', cursive;
  letter-spacing: 2px;
}

/* --- SKY --- */
.game-screen-sky {
  background: linear-gradient(180deg, #87CEEB 0%, #b8e4f9 60%, #e8f4fc 100%);
  color: #fff;
}
.game-screen-sky .game-screen-back {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
}
.game-screen-sky .game-screen-back:hover { background: rgba(255,255,255,0.15); }
.game-screen-sky .game-screen-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  text-shadow: 2px 2px 0 rgba(0,100,150,0.3);
}
.game-screen-sky .game-screen-tagline {
  font-family: 'Fredoka', sans-serif;
  color: rgba(255,255,255,0.8);
}
.game-screen-sky .game-screen-description {
  color: rgba(0,80,120,0.7);
}
.game-screen-sky .game-screen-play-btn {
  background: #fff;
  color: #2196F3;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,100,150,0.2);
}

/* --- BLUEPRINT --- */
.game-screen-blueprint {
  background: #e8f4fc;
  color: #1565C0;
}
.game-screen-blueprint::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(100,160,210,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,160,210,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.game-screen-blueprint .game-screen-back {
  color: #1565C0;
  border-color: rgba(21,101,192,0.3);
}
.game-screen-blueprint .game-screen-title {
  font-family: 'Permanent Marker', cursive;
  transform: rotate(-1deg);
}
.game-screen-blueprint .game-screen-tagline {
  font-family: 'Courier Prime', monospace;
  color: #42a5f5;
  font-size: 0.9rem;
}
.game-screen-blueprint .game-screen-description {
  font-family: 'Courier Prime', monospace;
  color: #5c8db5;
  font-size: 0.95rem;
}
.game-screen-blueprint .game-screen-play-btn {
  background: #1565C0;
  color: #fff;
  font-family: 'Permanent Marker', cursive;
  letter-spacing: 1px;
}

/* --- SPACE --- */
.game-screen-space {
  background: radial-gradient(ellipse at 30% 40%, #1a1a2e 0%, #0d0d1a 100%);
  color: #f0e6d0;
}
.game-screen-space::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}
.game-screen-space .game-screen-back {
  color: rgba(240,230,208,0.7);
  border-color: rgba(240,230,208,0.2);
}
.game-screen-space .game-screen-back:hover { background: rgba(255,255,255,0.05); }
.game-screen-space .game-screen-title {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  letter-spacing: 2px;
}
.game-screen-space .game-screen-tagline {
  font-family: 'Libre Baskerville', serif;
  color: rgba(240,230,208,0.6);
  font-style: italic;
}
.game-screen-space .game-screen-description {
  color: rgba(240,230,208,0.7);
}
.game-screen-space .game-screen-play-btn {
  background: #f0e6d0;
  color: #1a1a2e;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
}

/* --- PIXEL --- */
.game-screen-pixel {
  background: #c8e6c9;
  color: #1b5e20;
  image-rendering: pixelated;
}
.game-screen-pixel .game-screen-back {
  color: #1b5e20;
  border-color: rgba(27,94,32,0.3);
  font-family: 'Silkscreen', cursive;
  font-size: 12px;
}
.game-screen-pixel .game-screen-title {
  font-family: 'Silkscreen', cursive;
  font-size: 2.4rem;
  letter-spacing: 2px;
}
.game-screen-pixel .game-screen-tagline {
  font-family: 'Silkscreen', cursive;
  color: #388e3c;
  font-size: 0.75rem;
}
.game-screen-pixel .game-screen-description {
  font-family: 'Silkscreen', cursive;
  font-size: 0.8rem;
  color: #2e7d32;
}
.game-screen-pixel .game-screen-play-btn {
  background: #1b5e20;
  color: #c8e6c9;
  font-family: 'Silkscreen', cursive;
  border: 3px solid #333;
}

/* --- MUSIC --- */
.game-screen-music {
  background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 50%, #ce93d8 100%);
  color: #fff;
}
.game-screen-music::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-conic-gradient(rgba(255,255,255,0.02) 0deg 10deg, transparent 10deg 20deg);
  pointer-events: none;
}
.game-screen-music .game-screen-back {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.2);
}
.game-screen-music .game-screen-back:hover { background: rgba(255,255,255,0.1); }
.game-screen-music .game-screen-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 2px 15px rgba(0,0,0,0.3);
}
.game-screen-music .game-screen-tagline {
  font-family: 'Lora', serif;
  color: rgba(255,255,255,0.7);
  font-style: italic;
}
.game-screen-music .game-screen-description {
  color: rgba(255,255,255,0.8);
}
.game-screen-music .game-screen-play-btn {
  background: rgba(255,255,255,0.95);
  color: #6a1b9a;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-style: italic;
}

/* --- DICE --- */
.game-screen-dice {
  background: #fffdf5;
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
}
.game-screen-dice .game-screen-back {
  color: #1a1a1a;
  border-color: #1a1a1a;
}
.game-screen-dice .game-screen-title {
  font-family: 'DM Serif Display', serif;
}
.game-screen-dice .game-screen-tagline {
  font-family: 'DM Serif Display', serif;
  color: #666;
}
.game-screen-dice .game-screen-description {
  color: #555;
}
.game-screen-dice .game-screen-play-btn {
  background: #1a1a1a;
  color: #fffdf5;
  font-family: 'DM Serif Display', serif;
  border: 3px solid #1a1a1a;
}

/* ============================================================
   GAME SCREEN — PLAY MODE
   ============================================================ */

/* Title shrinks in play mode */
.game-screen.play-mode .game-screen-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  opacity: 1;
  animation: none;
}

/* Play mode container */
.play-mode-container {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 1;
}

/* Past questions stack */
.play-past-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.play-question-past {
  font-size: 0.85rem;
  opacity: 0.4;
  padding: 8px 0;
  border-bottom: 1px solid rgba(128,128,128,0.15);
  line-height: 1.5;
  animation: fadeInUp 0.3s ease forwards;
}
.play-question-past:last-child {
  opacity: 0.55;
}

/* Current question — large, centered */
.play-question-current {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  padding: 40px 20px;
  cursor: pointer;
  user-select: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  animation: questionEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 1;
}

@keyframes questionEnter {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Tap hint */
.play-tap-hint {
  font-size: 0.8rem;
  opacity: 0.35;
  text-align: center;
  padding: 16px 0;
  z-index: 1;
}

/* Completion state */
.play-complete {
  font-size: 1.5rem;
  text-align: center;
  padding: 40px 20px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.5s ease forwards;
  z-index: 1;
  cursor: default;
}

/* Question counter */
.play-counter {
  font-size: 0.75rem;
  opacity: 0.4;
  text-align: center;
  margin-bottom: 8px;
  z-index: 1;
}

/* ============================================================
   RAGEBAIT QUESTIONS — CUSTOM GAME SCREEN
   ============================================================ */
.game-screen-ragebait {
  --rb-cream: #f5f0e8;
  --rb-cream-dark: #ece5d9;
  --rb-red: #d93025;
  --rb-red-dark: #b8271e;
  --rb-red-light: #ff4d3a;
  --rb-charcoal: #2a2a2a;
  --rb-warm-gray: #8a8076;
  --rb-white: #fffdf9;

  background: var(--rb-cream) !important;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  overflow-y: scroll;
}

/* Subtle cross texture */
.game-screen-ragebait::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4b89a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ---- Floating emojis ---- */
.rb-floating-emoji {
  position: fixed;
  font-size: 1.8rem;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: rbFloatEmoji 20s ease-in-out infinite;
}
.rb-floating-emoji:nth-child(1) { top: 8%; left: 5%; animation-delay: 0s; }
.rb-floating-emoji:nth-child(2) { top: 15%; right: 8%; animation-delay: -4s; font-size: 2.2rem; }
.rb-floating-emoji:nth-child(3) { bottom: 20%; left: 10%; animation-delay: -8s; }
.rb-floating-emoji:nth-child(4) { bottom: 10%; right: 5%; animation-delay: -12s; font-size: 1.4rem; }
.rb-floating-emoji:nth-child(5) { top: 50%; left: 3%; animation-delay: -6s; font-size: 1.6rem; }
.rb-floating-emoji:nth-child(6) { top: 40%; right: 4%; animation-delay: -16s; }

@keyframes rbFloatEmoji {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(5deg); }
  50% { transform: translateY(5px) rotate(-3deg); }
  75% { transform: translateY(-8px) rotate(2deg); }
}

/* ---- Back nav ---- */
.game-screen-ragebait .rb-back-nav {
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.game-screen-ragebait .rb-back-nav a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rb-warm-gray);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.game-screen-ragebait .rb-back-nav a:hover { color: var(--rb-charcoal); }
.game-screen-ragebait .rb-back-nav svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.game-screen-ragebait .rb-back-nav a:hover svg { transform: translateX(-3px); }

/* ---- Hero / Intro ---- */
.game-screen-ragebait .rb-hero {
  text-align: center;
  padding: 2rem 1.5rem 2.5rem;
  animation: rbFadeInUp 0.6s ease-out;
  position: relative;
  z-index: 1;
}

.rb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--rb-red);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}

.rb-hero h1 {
  font-family: 'Bangers', cursive;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  color: var(--rb-red);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.08);
  transform: rotate(-1deg);
  white-space: nowrap;
}

.rb-hero-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--rb-warm-gray);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---- Compact hero (during play mode) ---- */
.rb-hero-compact {
  padding: 0.75rem 1.5rem 0.5rem;
}

.rb-hero-compact h1 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  transform: none;
  margin-bottom: 0;
  line-height: 1.1;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.06);
}

/* ---- Intro play button ---- */
.rb-play-btn {
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  background: var(--rb-red);
  color: white;
  border: 2.5px solid var(--rb-charcoal);
  border-radius: 14px;
  padding: 0.9rem 2.5rem;
  cursor: pointer;
  box-shadow: 4px 4px 0px var(--rb-charcoal);
  transition: all 0.15s ease;
  margin-top: 2rem;
  position: relative;
  z-index: 1;
}
.rb-play-btn:hover {
  background: var(--rb-red-light);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px var(--rb-charcoal);
}
.rb-play-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--rb-charcoal);
}

/* ---- Intro section with TikToks ---- */
.rb-intro-section {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  text-align: center;
  animation: rbFadeInUp 0.6s ease-out 0.2s both;
}

.rb-intro-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--rb-warm-gray);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 1.5rem;
}
.rb-intro-italic {
  font-style: italic;
}

.rb-tiktok-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.rb-tiktok-thumb {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  background: #1a1a1a;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rb-tiktok-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.rb-tiktok-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rb-tiktok-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.rb-tiktok-thumb:hover .rb-tiktok-play {
  opacity: 1;
}
.rb-tiktok-author {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 6px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .rb-tiktok-grid {
    gap: 8px;
    max-width: 100%;
  }
  .rb-intro-section {
    padding: 0 1rem 2rem;
  }
}

/* ---- Intro content wrapper ---- */
.rb-intro-wrap {
  position: relative;
  z-index: 1;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Scroll indicator line (right side) ---- */
.rb-scroll-line {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  animation: rbScrollFade 3s ease-in-out infinite;
  pointer-events: none;
}
.rb-scroll-line-track {
  width: 2px;
  height: 60px;
  background: rgba(42,42,42,0.12);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.rb-scroll-line-dot {
  width: 2px;
  height: 16px;
  background: var(--rb-red);
  border-radius: 2px;
  position: absolute;
  top: 0;
  animation: rbScrollDot 2s ease-in-out infinite;
}
.rb-scroll-line-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(42,42,42,0.3);
  writing-mode: vertical-rl;
}
@keyframes rbScrollDot {
  0% { top: 0; opacity: 0.6; }
  50% { top: 44px; opacity: 1; }
  100% { top: 44px; opacity: 0; }
}
@keyframes rbScrollFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Hide scroll indicator on small screens */
@media (max-width: 768px) {
  .rb-scroll-line { right: 12px; }
}
@media (max-width: 480px) {
  .rb-scroll-line { display: none; }
}

/* ---- Question preview card (compact) ---- */
.rb-question-preview {
  background: var(--rb-white);
  border: 2.5px solid var(--rb-charcoal);
  border-radius: 14px;
  padding: 14px 20px;
  max-width: 360px;
  margin: 0 auto 20px;
  box-shadow: 4px 4px 0px var(--rb-charcoal);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: rbFadeInUp 0.6s ease-out 0.3s both;
}
.rb-question-preview-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a89f94;
  margin-bottom: 6px;
}
.rb-question-preview-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  color: var(--rb-charcoal);
  line-height: 1.4;
  margin-bottom: 4px;
}
.rb-question-preview-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--rb-red);
  font-weight: 600;
}

/* ---- Reassurance text ---- */
.rb-reassurance {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #a89f94;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 12px 0 0;
  position: relative;
  z-index: 1;
}

/* ---- Divider ---- */
.rb-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  position: relative;
  z-index: 1;
}
.rb-divider-line {
  flex: 1;
  height: 1.5px;
  background: #e0d9ce;
}
.rb-divider-emoji {
  font-size: 14px;
  color: #a89f94;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}

/* ---- How to play ---- */
.rb-how-to-play {
  text-align: center;
  padding-bottom: 12px;
  position: relative;
  z-index: 1;
}
.rb-section-title {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  color: var(--rb-charcoal);
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}
.rb-steps-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.rb-step {
  flex: 1 1 140px;
  max-width: 160px;
  text-align: center;
}
.rb-step-num {
  font-family: 'Bangers', cursive;
  font-size: 28px;
  color: var(--rb-red);
  margin-bottom: 4px;
}
.rb-step-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5a5550;
  line-height: 1.45;
  font-weight: 500;
}

/* ---- Bottom CTA ---- */
.rb-bottom-cta {
  text-align: center;
  padding: 20px 0 0;
  position: relative;
  z-index: 1;
}

/* ---- Progress bar ---- */
.rb-progress-section {
  display: flex;
  justify-content: center;
  padding: 0 2rem 1.5rem;
  animation: rbFadeInUp 0.6s ease-out 0.15s both;
  position: relative;
  z-index: 1;
}

.rb-progress-bar-container {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rb-progress-track {
  flex: 1;
  height: 6px;
  background: var(--rb-cream-dark);
  border-radius: 100px;
  overflow: hidden;
}

.rb-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--rb-red);
  border-radius: 100px;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rb-progress-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rb-warm-gray);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ---- Play topbar ---- */
.rb-play-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 1rem 2rem;
  position: relative;
  z-index: 1;
}
.rb-play-topbar a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rb-warm-gray);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s;
}
.rb-play-topbar a:hover { color: var(--rb-charcoal); }
.rb-play-topbar svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}
.rb-play-topbar a:hover svg { transform: translateX(-3px); }
.rb-play-topbar-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rb-warm-gray);
  letter-spacing: 0.02em;
}

/* ---- Centered play block ---- */
.rb-play-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 0.5rem 2.5rem 1.5rem;
}
.rb-play-block {
  max-width: 1120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---- Progress bar ---- */
.rb-play-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
}
.rb-play-progress-bar {
  flex: 1;
  height: 10px;
  background: var(--rb-cream-dark);
  border-radius: 3px;
  overflow: hidden;
  min-width: 0;
}
.rb-play-progress-fill {
  height: 100%;
  background: var(--rb-red);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.rb-play-progress-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rb-warm-gray);
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Question card (playing card style) ---- */
.rb-question-card-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}
.rb-question-card {
  background: var(--rb-white);
  border: 4px solid var(--rb-charcoal);
  border-radius: 16px;
  width: 380px;
  height: 540px;
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 10px 10px 0px var(--rb-charcoal);
  overflow: hidden;
}

/* Fire emoji on card */
.rb-card-fire {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 2rem;
  animation: rbFireFlicker 2s ease-in-out infinite;
}

@keyframes rbFireFlicker {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.1); }
}

/* Title at top of card */
.rb-card-title {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  color: var(--rb-red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

/* Previous question faded at top */
.rb-card-prev {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rb-warm-gray);
  line-height: 1.4;
  text-align: left;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px dashed var(--rb-cream-dark);
  flex-shrink: 0;
  opacity: 0.6;
}

/* Main question text — CAH style */
.rb-question-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rb-charcoal);
  text-align: left;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Bottom of card branding */
.rb-card-bottom {
  font-family: 'Bangers', cursive;
  font-size: 0.75rem;
  color: var(--rb-warm-gray);
  letter-spacing: 0.1em;
  text-align: right;
  flex-shrink: 0;
  margin-top: 1rem;
}

/* ---- Controls ---- */
.rb-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  min-height: 60px;
}

.rb-btn-next {
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  background: var(--rb-red);
  color: white;
  border: 2.5px solid var(--rb-charcoal);
  border-radius: 14px;
  padding: 0.9rem 2.5rem;
  cursor: pointer;
  box-shadow: 4px 4px 0px var(--rb-charcoal);
  transition: all 0.15s ease;
}
.rb-btn-next:hover {
  background: var(--rb-red-light);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px var(--rb-charcoal);
}
.rb-btn-next:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--rb-charcoal);
}

.rb-btn-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  color: var(--rb-warm-gray);
  border: 2px solid var(--rb-cream-dark);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.rb-btn-secondary:hover {
  border-color: var(--rb-warm-gray);
  color: var(--rb-charcoal);
}
.rb-btn-invisible {
  visibility: hidden;
  pointer-events: none;
}

/* ---- End screen ---- */
.rb-end-screen {
  text-align: center;
  padding: 1rem 2rem 2rem;
  animation: rbFadeInUp 0.6s ease-out;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
}

.rb-end-emoji {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  animation: rbFireFlicker 2s ease-in-out infinite;
}

.rb-end-screen h2 {
  font-family: 'Bangers', cursive;
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--rb-red);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.rb-end-screen p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: var(--rb-warm-gray);
  font-style: italic;
  max-width: 380px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}

.rb-btn-restart {
  font-family: 'Bangers', cursive;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  background: var(--rb-white);
  color: var(--rb-red);
  border: 2.5px solid var(--rb-charcoal);
  border-radius: 14px;
  padding: 0.8rem 2rem;
  cursor: pointer;
  box-shadow: 4px 4px 0px var(--rb-charcoal);
  transition: all 0.15s ease;
  margin-right: 0.75rem;
}
.rb-btn-restart:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px var(--rb-charcoal);
}
.rb-btn-restart:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--rb-charcoal);
}

.rb-btn-home {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  color: var(--rb-warm-gray);
  border: 2px solid var(--rb-cream-dark);
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.rb-btn-home:hover {
  border-color: var(--rb-warm-gray);
  color: var(--rb-charcoal);
}

/* End screen TikTok section */
.rb-end-tiktok-section {
  margin: 2rem 0 1.5rem;
  width: 100%;
  max-width: 680px;
}
.rb-end-tiktok-heading {
  font-family: 'Bangers', cursive;
  font-size: 1.5rem;
  color: var(--rb-warm-gray);
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}
.rb-end-tiktok-intro {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--rb-warm-gray);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.rb-tiktok-grid-end {
  max-width: 680px;
  margin: 0 auto;
}
.rb-end-buttons {
  margin-top: 1.5rem;
  padding-bottom: 2rem;
}
.rb-tiktok-thumb:not(:has(img)) {
  background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 50%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rb-tiktok-thumb:not(:has(img)) .rb-tiktok-play {
  opacity: 1;
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: rgba(0,0,0,0.6);
}

/* Card enter animation */
.rb-card-enter {
  animation: rbCardEnter 0.25s ease-out;
}

@keyframes rbCardEnter {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

@keyframes rbFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Ragebait mobile ---- */
@media (max-width: 600px) {
  .rb-hero { padding: 1.5rem 1.25rem 1.75rem; }
  .rb-hero h1 { font-size: 3rem; }
  .rb-question-card { width: 320px; height: 460px; padding: 1.5rem 1.5rem; border-radius: 12px; }
  .rb-question-text { font-size: 1.4rem; }
  .rb-controls { flex-direction: column; gap: 0.75rem; }
  .rb-btn-next { width: 100%; max-width: 320px; }
  .rb-btn-secondary { width: 100%; max-width: 320px; }
  .rb-play-topbar { padding: 0.75rem 1.25rem; }
  .rb-play-center { padding: 0 1rem 1.5rem; }
  .rb-floating-emoji { display: none; }
}

/* ============================================================
   GAME NIGHT PICKS — CUSTOM GAME SCREEN
   ============================================================ */
.game-screen-gamenightpicks {
  background: linear-gradient(180deg, #4a9bc8 0%, #6ab4dc 20%, #92cce8 45%, #bbe0f2 70%, #dceef8 100%) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  font-family: 'Fredoka', sans-serif;
  color: #1e3a4a;
}

/* Fluffy storybook clouds */
.gnp-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gnp-texture::before,
.gnp-texture::after {
  content: '';
  position: absolute;
  border-radius: 100px;
  background: rgba(255,255,255,0.5);
}
/* Big fluffy cloud left */
.gnp-texture::before {
  width: 280px; height: 80px;
  top: 120px; left: -40px;
  border-radius: 80px;
  box-shadow:
    50px -30px 0 20px rgba(255,255,255,0.45),
    110px -15px 0 35px rgba(255,255,255,0.4),
    170px -25px 0 15px rgba(255,255,255,0.35),
    220px -10px 0 25px rgba(255,255,255,0.3);
  animation: cloudDriftLeft 45s linear infinite;
}
/* Big fluffy cloud right */
.gnp-texture::after {
  width: 240px; height: 70px;
  top: 280px; right: -60px;
  border-radius: 70px;
  box-shadow:
    -40px -25px 0 15px rgba(255,255,255,0.4),
    -100px -12px 0 30px rgba(255,255,255,0.35),
    -160px -20px 0 18px rgba(255,255,255,0.3);
  animation: cloudDriftRight 55s linear infinite;
}
@keyframes cloudDriftLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(60px); }
  100% { transform: translateX(0); }
}
@keyframes cloudDriftRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px); }
  100% { transform: translateX(0); }
}

/* Wrapper */
.gnp-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
}

/* Back nav */
.gnp-back-nav {
  padding: 20px 0;
}
.gnp-back-nav a {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.gnp-back-nav a:hover { color: #e0f0fa; }
.gnp-back-nav svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.gnp-back-nav a:hover svg { transform: translateX(-3px); }

/* Hero / Header */
.gnp-hero {
  text-align: center;
  padding: 12px 0 20px;
  animation: gnpFadeInUp 0.6s ease-out;
}

.gnp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  color: #2a7ba8;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,80,130,0.12);
}

.gnp-hero h1 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  color: #fff;
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  text-shadow: 2px 3px 0px rgba(0,50,90,0.45), 0 1px 0 rgba(0,80,130,0.2);
}

.gnp-subtitle {
  font-size: 15px;
  font-weight: 500;
  color: #1a3a4a;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.55;
}

/* How it works */
.gnp-how {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 0 32px;
  flex-wrap: wrap;
}

.gnp-how-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1a4a60;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.gnp-how-step span {
  font-size: 16px;
}

.gnp-how-arrow {
  color: #2a6a85;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* ---- Horizontal Row Layout ---- */

/* Section */
.gnp-section {
  margin-top: 28px;
}

/* Row header: title + count */
.gnp-row-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 32px 10px;
}

.gnp-row-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px rgba(0,30,60,0.55);
  text-shadow: 0 2px 8px rgba(0,30,60,0.2);
}

.gnp-row-count {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  background: rgba(0,40,80,0.12);
  padding: 1px 8px;
  border-radius: 10px;
}

/* Scrollable card row */
.gnp-scroll-row {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}

.gnp-scroll-row::-webkit-scrollbar { height: 4px; }
.gnp-scroll-row::-webkit-scrollbar-track { background: transparent; }
.gnp-scroll-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }

.gnp-card-row {
  display: flex;
  gap: 14px;
  padding-left: 32px;
  padding-right: 32px;
  width: max-content;
}

/* Game card (shared) */
.gnp-card {
  width: 148px;
  min-width: 148px;
  border-radius: 16px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* Active card */
.gnp-card-active {
  background: rgba(255,255,255,0.92);
  border: 2.5px solid #2a2a2a;
  box-shadow: 4px 4px 0px rgba(42,42,42,0.7);
}

.gnp-card-active:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px rgba(42,42,42,0.7);
}

/* Placeholder / coming soon card */
.gnp-card-placeholder {
  background: rgba(255,255,255,0.45);
  border: 2px dashed rgba(0,50,80,0.15);
  cursor: default;
  backdrop-filter: blur(4px);
}

/* Card icon */
.gnp-card-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.5);
  border: 2px solid rgba(0,0,0,0.06);
}

.gnp-icon-placeholder {
  background: rgba(255,255,255,0.4);
  border-color: rgba(0,50,80,0.08);
}

.gnp-card-icon-img {
  padding: 0;
  overflow: hidden;
}

.gnp-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.gnp-card-icon {
  font-size: 30px;
  line-height: 1;
}

/* Card name */
.gnp-card-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 3px;
  min-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gnp-card-active .gnp-card-name {
  color: #2a2a2a;
}

.gnp-card-placeholder .gnp-card-name {
  color: rgba(30,60,80,0.45);
}

/* Site label */
.gnp-card-site {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  color: #b0a898;
  margin-bottom: 2px;
}

/* Tags (PLAY / Coming Soon) */
.gnp-card-tag {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 10px;
  text-transform: uppercase;
}

.gnp-tag-play {
  background: #2d8f5e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(45,143,94,0.3);
  transition: background 0.15s, transform 0.15s;
}

.gnp-card-active:hover .gnp-tag-play {
  background: #237a4e;
  transform: scale(1.05);
}

.gnp-tag-soon {
  color: rgba(30,60,80,0.35);
  border: 1.5px solid rgba(30,60,80,0.12);
  background: rgba(255,255,255,0.25);
  font-size: 9px;
}

/* Content area */
.gnp-content {
  padding: 0 0 20px;
}

/* Footer card */
.gnp-footer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 20px 32px 0;
  backdrop-filter: blur(4px);
}

.gnp-footer-card span {
  font-size: 28px;
}

.gnp-footer-card p {
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0,30,60,0.2);
}

/* Fade in animation */
.gnp-fade-in {
  animation: gnpFadeIn 0.25s ease;
}

@keyframes gnpFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gnpFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer text */
.gnp-footer {
  text-align: center;
  padding: 0 20px 48px;
  font-size: 12px;
  color: #d0ecf8;
  line-height: 1.6;
}

/* ---- GNP mobile (rows) ---- */
@media (max-width: 600px) {
  .gnp-hero h1 { font-size: 2.4rem; }
  .gnp-card { width: 130px; min-width: 130px; padding: 14px 10px 12px; }
  .gnp-card-icon-wrap { width: 54px; height: 54px; }
  .gnp-card-icon { font-size: 26px; }
  .gnp-card-name { font-size: 12px; min-height: 28px; }
  .gnp-row-header { padding: 0 20px 8px; }
  .gnp-card-row { padding-left: 20px; padding-right: 20px; gap: 10px; }
  .gnp-row-title { font-size: 17px; }
  .gnp-footer-card { margin: 20px 20px 0; }
}

@media (max-width: 400px) {
  .gnp-card { width: 120px; min-width: 120px; }
}


/* ============================================================
   HOT SEAT — CUSTOM GAME SCREEN
   ============================================================ */
.game-screen-hotseat {
  background: radial-gradient(ellipse at 30% 40%, #1a1a2e 0%, #0d0d1a 100%);
  font-family: 'Libre Baskerville', serif;
  color: #f0e6d0;
}
.game-screen-hotseat::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 50% 85%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 30% 90%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 75% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 20% 25%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 45% 55%, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
  z-index: 0;
  animation: hsTwinkle 4s ease-in-out infinite alternate;
}
@keyframes hsTwinkle {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Floating space emojis */
.hs-space-floats {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hs-float {
  position: absolute;
  font-size: 28px;
  opacity: 0.18;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hs-float-1 {
  top: 8%;
  right: 12%;
  font-size: 36px;
  opacity: 0.22;
  animation: hsFloatDrift1 8s infinite;
}
.hs-float-2 {
  bottom: 15%;
  left: 8%;
  font-size: 24px;
  opacity: 0.15;
  animation: hsFloatDrift2 10s infinite;
}
.hs-float-3 {
  top: 35%;
  right: 6%;
  font-size: 18px;
  opacity: 0.2;
  animation: hsFloatDrift3 7s infinite;
}
.hs-float-4 {
  bottom: 25%;
  right: 15%;
  font-size: 30px;
  opacity: 0.14;
  animation: hsFloatDrift4 12s infinite;
}
.hs-float-5 {
  top: 18%;
  left: 10%;
  font-size: 16px;
  opacity: 0.2;
  animation: hsFloatDrift5 9s infinite;
}
.hs-float-6 {
  top: 60%;
  left: 5%;
  font-size: 14px;
  opacity: 0.18;
  animation: hsFloatDrift3 11s infinite reverse;
}
@keyframes hsFloatDrift1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-8px, 12px) rotate(8deg); }
  66% { transform: translate(6px, -6px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes hsFloatDrift2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(12px, -10px) rotate(15deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes hsFloatDrift3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5px, 8px) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes hsFloatDrift4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(6px, -8px) rotate(10deg); }
  50% { transform: translate(-4px, 4px) rotate(-5deg); }
  75% { transform: translate(8px, 6px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes hsFloatDrift5 {
  0% { transform: translate(0, 0); opacity: 0.2; }
  50% { transform: translate(6px, -10px); opacity: 0.3; }
  100% { transform: translate(0, 0); opacity: 0.2; }
}

.hs-back-btn {
  position: fixed;
  top: 16px;
  left: 20px;
  z-index: 50;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.hs-back-btn:hover { background: rgba(255,255,255,0.25); }
.hs-back-btn:active { transform: scale(0.96); }

/* Start screen */
.hs-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  text-align: center;
  padding: 15vh 20px 24px;
  position: relative;
  z-index: 1;
  animation: hsSlideUp 0.4s ease;
}
@keyframes hsSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hs-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  color: #f0e6d0;
  line-height: 0.95;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  text-shadow: 0 0 30px rgba(240,230,208,0.3);
  font-weight: 700;
}
.hs-blurb {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 400px;
  margin-bottom: 8px;
}
.hs-blurb-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
  font-style: italic;
}
.hs-highlight {
  font-family: 'Libre Baskerville', serif;
  color: #d4a574;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-style: italic;
}
.hs-pick-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hs-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 36px;
  background: rgba(240,230,208,0.06);
  border: 2px solid rgba(240,230,208,0.2);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-width: 170px;
}
.hs-pick-btn:hover {
  transform: translateY(-3px);
  background: rgba(240,230,208,0.1);
  border-color: rgba(240,230,208,0.35);
  box-shadow: 0 0 20px rgba(240,230,208,0.1);
}
.hs-pick-btn:active {
  transform: translateY(1px);
}
.hs-pick-p1 { border-color: #d4a574; }
.hs-pick-p1:hover { border-color: #d4a574; background: rgba(212,165,116,0.12); }
.hs-pick-p1:active { border-color: #d4a574; }
.hs-pick-p2 { border-color: #8bb8d0; }
.hs-pick-p2:hover { border-color: #8bb8d0; background: rgba(139,184,208,0.12); }
.hs-pick-p2:active { border-color: #8bb8d0; }
.hs-pick-emoji { font-size: 32px; }
.hs-pick-label {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px;
  color: #f0e6d0;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.hs-pick-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

/* Swap screen */
.hs-swap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 24px 20px;
  position: relative;
  z-index: 1;
  animation: hsSlideUp 0.4s ease;
}
.hs-swap-emoji { font-size: 48px; margin-bottom: 8px; }
.hs-swap-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 38px;
  color: #f0e6d0;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  text-shadow: 0 0 25px rgba(240,230,208,0.25);
  font-weight: 700;
}
.hs-prev-score {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 6px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 500;
}
.hs-swap-card {
  background: rgba(240,230,208,0.06);
  border-radius: 16px;
  padding: 20px 28px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 340px;
}
.hs-swap-hot {
  border: 2px solid #d4a574;
}
.hs-swap-judge {
  border: 2px solid rgba(255,255,255,0.2);
}
.hs-swap-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 4px;
}
.hs-swap-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 28px;
  color: #f0e6d0;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.hs-swap-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin-top: 6px;
}
.hs-green { color: #6ddb8f; font-weight: 700; }
.hs-red { color: #ff7b7b; font-weight: 700; }
.hs-go-btn {
  font-family: 'Libre Baskerville', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 44px;
  border-radius: 14px;
  border: 2px solid #d4a574;
  cursor: pointer;
  margin-top: 20px;
  background: rgba(212,165,116,0.15);
  color: #f0e6d0;
  box-shadow: 0 0 20px rgba(212,165,116,0.15);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.hs-go-btn:hover { transform: translateY(-2px); background: rgba(212,165,116,0.25); box-shadow: 0 0 30px rgba(212,165,116,0.25); }
.hs-go-btn:active { transform: translateY(2px); box-shadow: 0 0 10px rgba(212,165,116,0.1); }

/* Game screen */
.hs-game {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 24px 20px;
  padding-top: 20px;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  gap: 12px;
}
.hs-timer-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 16px;
}
.hs-timer-fill {
  height: 100%;
  border-radius: 3px;
  background: #d4a574;
  transition: width 1s linear, background 0.3s;
}
.hs-timer-fill.hs-urgent { background: #ff7b7b; }
.hs-game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 6px;
  margin-bottom: 16px;
}
.hs-game-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-hot-badge {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  color: #d4a574;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.hs-as-text {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  font-style: italic;
}
.hs-timer-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: #f0e6d0;
  font-weight: 700;
}
.hs-urgent-text { color: #ff7b7b !important; animation: hsPulse 0.5s infinite alternate; }
@keyframes hsPulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
.hs-score-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.hs-pill-right {
  font-size: 14px;
  font-weight: 700;
  color: #6ddb8f;
  background: rgba(109,219,143,0.12);
  padding: 4px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(109,219,143,0.25);
}
.hs-pill-wrong {
  font-size: 14px;
  font-weight: 700;
  color: #ff7b7b;
  background: rgba(255,123,123,0.12);
  padding: 4px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,123,123,0.25);
}
.hs-q-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240,230,208,0.05);
  border: 2px solid rgba(240,230,208,0.15);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 12px;
  min-height: 180px;
  transition: background 0.15s, border-color 0.15s;
}
.hs-q-card.hs-flash-right { background: rgba(109,219,143,0.15); border-color: #6ddb8f; }
.hs-q-card.hs-flash-wrong { background: rgba(255,123,123,0.15); border-color: #ff7b7b; }
.hs-q-text {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: #f0e6d0;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  font-weight: 400;
}
.hs-btn-row {
  display: flex;
  gap: 12px;
}
.hs-wrong-btn, .hs-right-btn {
  flex: 1;
  padding: 20px 0;
  font-size: 36px;
  font-weight: 800;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.1s;
  line-height: 1.1;
  touch-action: manipulation;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.hs-wrong-btn {
  color: #fff;
  background: rgba(255,123,123,0.2);
  border: 2px solid #ff7b7b;
}
.hs-right-btn {
  color: #fff;
  background: rgba(109,219,143,0.2);
  border: 2px solid #6ddb8f;
}
.hs-wrong-btn:hover { background: rgba(255,123,123,0.3); }
.hs-right-btn:hover { background: rgba(109,219,143,0.3); }
.hs-wrong-btn:active, .hs-right-btn:active { transform: scale(0.96); }
.hs-btn-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
}
.hs-skip-btn {
  margin-top: 12px;
  padding: 8px 24px;
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  color: rgba(240,230,208,0.45);
  background: none;
  border: 1.5px solid rgba(240,230,208,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  align-self: center;
}
.hs-skip-btn:hover {
  color: rgba(240,230,208,0.7);
  border-color: rgba(240,230,208,0.3);
}

/* Overlay */
.hs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,13,26,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: hsSlideUp 0.3s ease;
}
.hs-overlay-card {
  background: radial-gradient(ellipse at 50% 50%, #1a1a2e 0%, #0d0d1a 100%);
  border: 2px solid rgba(240,230,208,0.2);
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
}
.hs-overlay-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 32px;
  color: #f0e6d0;
  margin-top: 8px;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(240,230,208,0.2);
}

/* Results */
.hs-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  text-align: center;
  padding: 80px 20px 24px;
  position: relative;
  z-index: 1;
  animation: hsSlideUp 0.4s ease;
}
.hs-results-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 42px;
  color: #f0e6d0;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  text-shadow: 0 0 30px rgba(240,230,208,0.25);
  font-weight: 700;
}
.hs-results-winner {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
  line-height: 1.5;
}
.hs-results-cards {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}
.hs-result-card {
  flex: 1;
  background: rgba(240,230,208,0.05);
  border: 2px solid rgba(240,230,208,0.15);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
}
.hs-result-card.hs-result-winner { border-color: #d4a574; box-shadow: 0 0 20px rgba(212,165,116,0.15); }
.hs-result-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  color: #f0e6d0;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  font-weight: 700;
}
.hs-result-big {
  font-family: 'Libre Baskerville', serif;
  font-size: 42px;
  color: #d4a574;
  line-height: 1;
  margin-bottom: 4px;
  font-weight: 700;
}
.hs-result-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.hs-result-vs {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  color: rgba(240,230,208,0.3);
  font-style: italic;
}

/* ---- Hot Seat: Instruction paragraph ---- */
.hs-instruction-paragraph {
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: hsInstrFadeIn 0.5s ease forwards;
  animation-delay: 0.3s;
}
@keyframes hsInstrFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Hot Seat: Ragebait-style question card ---- */
.hs-q-card-rb {
  flex-direction: column;
  gap: 8px;
  position: relative;
  background: rgba(240,230,208,0.06);
  border: 2.5px solid rgba(240,230,208,0.2);
  border-radius: 20px;
  padding: 32px 28px 28px;
}
.hs-card-fire {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 20px;
}
.hs-card-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,230,208,0.4);
  margin-bottom: 4px;
}

/* ---- Hot Seat: Delayed ready button (appears after instruction) ---- */
.hs-btn-delayed {
  opacity: 0;
  transform: translateY(8px);
  animation: hsInstrFadeIn 0.5s ease forwards;
  animation-delay: 2.0s;
}

/* ---- Hot Seat: Swap P2 screen ---- */
.hs-swap-p2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: hsSlideUp 0.4s ease;
}

/* ============================================================
   FOOTER
   ============================================================ */
.made-by {
  font-size: 21px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 60px;
  padding: 25px 20px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.made-by-desc {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #999;
}
.socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.social-btn {
  align-items: center;
  border: 2px solid #222;
  border-radius: 0;
  color: #222;
  cursor: pointer;
  display: flex;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 18px 8px 14px;
  text-decoration: none;
  transition: transform 75ms ease-in-out, box-shadow 75ms ease-in-out;
  gap: 8px;
  background: transparent;
  filter: url(#squiggly);
}
.social-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  transform: scale(1.03);
}
.social-btn-icon {
  font-size: 20px;
  line-height: 1;
}
.social-btn-icon-yt {
  color: #ff0000;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .card h2 { font-size: 24px !important; }

  /* Game screen tablet */
  .game-screen { padding: 50px 20px 30px; }
  .game-screen-title { font-size: 2.4rem !important; }
  .game-screen.play-mode .game-screen-title { font-size: 1.3rem !important; }
  .play-question-current { font-size: 1.3rem; padding: 30px 16px; }
}

@media (max-width: 500px) {
  .posts {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body {
    padding: 20px 12px 0;
  }
  .plant { font-size: 36px; }
  .site-title { font-size: 36px; }
  .socials { flex-direction: column; align-items: center; }

  /* Game screen mobile */
  .game-screen { padding: 50px 16px 24px; }
  .game-screen-back { top: 12px; left: 12px; padding: 6px 12px; font-size: 13px; }
  .game-screen-title { font-size: 1.8rem !important; }
  .game-screen.play-mode .game-screen-title { font-size: 1.1rem !important; }
  .game-screen-tagline { font-size: 0.9rem; }
  .game-screen-description { font-size: 0.9rem; }
  .game-screen-play-btn { padding: 14px 28px; font-size: 1rem; width: 100%; }
  .play-question-current { font-size: 1.15rem; padding: 24px 12px; }
}


/* ============================================================
   GUESS THAT QUOTE! — Sitcom Quiz Game Styles
   Aesthetic: Warm journal/notebook — cream paper, ruled lines,
   cozy browns, Playfair Display italic headers
   ============================================================ */

.game-screen-gtq {
  background: #faf6f0;
  background-image:
    repeating-linear-gradient(transparent, transparent 27px, #e8dcc8 28px);
  min-height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  padding-top: 0;
}

.gtq-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(212, 197, 169, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(193, 168, 125, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.gtq-wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ---- GTQ Back Nav ---- */
.gtq-back-nav {
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  align-self: flex-start;
}
.gtq-back-nav a,
.gtq-play-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #a89880;
  text-decoration: none;
  transition: color 0.2s;
}
.gtq-back-nav a:hover,
.gtq-play-topbar a:hover {
  color: #3a3225;
}
.gtq-back-nav svg,
.gtq-play-topbar svg {
  width: 18px;
  height: 18px;
}

/* ---- GTQ Hero ---- */
.gtq-hero {
  text-align: center;
  padding: 8px 0 18px;
}

.gtq-hero-badge {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b6f47;
  background: rgba(139, 111, 71, 0.1);
  border: 1.5px solid rgba(139, 111, 71, 0.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.gtq-hero h1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.8rem;
  color: #3a3225;
  margin-bottom: 8px;
  line-height: 1.1;
}

.gtq-hero-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  color: #a89880;
  font-weight: 500;
}
.gtq-hero-hint {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  color: #c4b8a5;
  font-weight: 400;
  margin-top: 6px;
  font-style: italic;
}

/* ---- GTQ Show Selection Grid ---- */
.gtq-select-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.gtq-show-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 2.5px solid #d4c5a9;
  border-radius: 16px;
  padding: 12px 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Fredoka', sans-serif;
  color: #3a3225;
  text-align: center;
  position: relative;
}

.gtq-show-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: #b8a68a;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(58, 50, 37, 0.1);
}

.gtq-show-selected {
  background: rgba(139, 111, 71, 0.12) !important;
  border-color: #8b6f47 !important;
  box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.18), 0 6px 16px rgba(58, 50, 37, 0.12);
}

.gtq-show-img-wrap {
  width: 80px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(58, 50, 37, 0.12);
  box-shadow: 0 2px 8px rgba(58, 50, 37, 0.08);
}

.gtq-show-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gtq-show-emoji {
  font-size: 24px;
  flex-shrink: 0;
}

.gtq-show-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.gtq-show-check {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: #8b6f47;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
}

.gtq-show-check:empty {
  display: none;
}

/* ---- GTQ Select Footer ---- */
.gtq-select-footer {
  text-align: center;
  padding: 8px 0 20px;
}

.gtq-select-count {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  color: #a89880;
  margin-bottom: 16px;
}

.gtq-start-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #8b6f47;
  border: 2.5px solid #3a3225;
  border-radius: 14px;
  padding: 14px 40px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #3a3225;
}

.gtq-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #3a3225;
}

.gtq-btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.gtq-btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ---- GTQ Play Topbar ---- */
.gtq-play-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gtq-score-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #8b6f47;
  background: rgba(139, 111, 71, 0.1);
  border: 1.5px solid rgba(139, 111, 71, 0.25);
  border-radius: 20px;
  padding: 5px 14px;
}

/* ---- GTQ Progress Bar ---- */
.gtq-play-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.gtq-play-progress-bar {
  flex: 1;
  height: 6px;
  background: #e8dcc8;
  border-radius: 3px;
  overflow: hidden;
}

.gtq-play-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b6f47, #c4a265);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.gtq-play-progress-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  color: #a89880;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---- GTQ Question Card ---- */
.gtq-question-card {
  background: #fff;
  border: 2.5px solid #3a3225;
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 4px 4px 0px rgba(58, 50, 37, 0.7);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.gtq-question-card-uniform {
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  overflow-y: auto;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.gtq-card-counter {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #a89880;
}
.gtq-done-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 14px;
  border: 2.5px solid #3a3225;
  background: #c4a265;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #3a3225;
  letter-spacing: 0.3px;
}
.gtq-done-btn:hover {
  background: #b8944f;
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #3a3225;
}
.gtq-bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.gtq-question-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a89880;
  margin-bottom: 16px;
}

.gtq-quote-text {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 400;
  color: #3a3225;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
  padding: 0;
  border: none;
}

/* ---- GTQ Choice Buttons ---- */
.gtq-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.gtq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2.5px solid #d4c5a9;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Fredoka', sans-serif;
  color: #3a3225;
  text-align: left;
}

.gtq-choice:hover:not(:disabled) {
  background: #fff;
  border-color: #8b6f47;
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px rgba(58, 50, 37, 0.5);
}

.gtq-choice-img-wrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(58, 50, 37, 0.12);
}

.gtq-choice-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gtq-choice-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.gtq-choice-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* Choice states after answer */
.gtq-choice-correct {
  background: #e8f5e9 !important;
  border-color: #4caf50 !important;
  box-shadow: 3px 3px 0px rgba(76, 175, 80, 0.5);
}

.gtq-choice-wrong {
  background: #ffebee !important;
  border-color: #e53935 !important;
  box-shadow: 3px 3px 0px rgba(229, 57, 53, 0.4);
  animation: gtqShake 0.4s ease;
}

.gtq-choice-dim {
  opacity: 0.3;
}

@keyframes gtqShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---- GTQ Feedback ---- */
.gtq-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  animation: gtqFadeIn 0.3s ease;
}

.gtq-feedback-correct {
  background: #e8f5e9;
  border: 2px solid #a5d6a7;
  color: #2e7d32;
}

.gtq-feedback-wrong {
  background: #ffebee;
  border: 2px solid #ef9a9a;
  color: #c62828;
}

.gtq-feedback-icon {
  font-size: 20px;
}

/* ---- GTQ Next Button ---- */
.gtq-next-btn {
  display: block;
  width: 100%;
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #8b6f47;
  border: 2.5px solid #3a3225;
  border-radius: 14px;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #3a3225;
  animation: gtqFadeIn 0.3s ease;
}

.gtq-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #3a3225;
}

/* ---- GTQ Results Screen ---- */
.gtq-results {
  text-align: center;
  padding: 48px 0 20px;
}

.gtq-results-emoji {
  font-size: 64px;
  margin-bottom: 12px;
  animation: gtqBounce 0.6s ease;
}

.gtq-results-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.2rem;
  color: #3a3225;
  margin-bottom: 16px;
}

.gtq-results-score {
  font-family: 'Fredoka', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #8b6f47;
  margin-bottom: 4px;
}

.gtq-results-pct {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  color: #a89880;
  font-weight: 600;
  margin-bottom: 12px;
}

.gtq-results-msg {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  color: #5a4d3e;
  font-weight: 500;
  margin-bottom: 28px;
  line-height: 1.5;
}

/* Results progress bar */
.gtq-results-bar-wrap {
  max-width: 300px;
  margin: 0 auto 32px;
}

.gtq-results-bar {
  height: 10px;
  background: #e8dcc8;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid #d4c5a9;
}

.gtq-results-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b6f47, #c4a265);
  border-radius: 5px;
  transition: width 1s ease;
}

.gtq-back-to-games-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #8b6f47;
  border: 2.5px solid #3a3225;
  border-radius: 14px;
  padding: 14px 32px;
  cursor: pointer;
  margin-top: 24px;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #3a3225;
}
.gtq-back-to-games-btn:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #3a3225;
  background: #7a6240;
}

/* Results action buttons */
.gtq-results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.gtq-btn-replay {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #8b6f47;
  border: 2.5px solid #3a3225;
  border-radius: 14px;
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px #3a3225;
}

.gtq-btn-replay:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0px #3a3225;
}

.gtq-btn-home {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #5a4d3e;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid #d4c5a9;
  border-radius: 14px;
  padding: 14px 32px;
  cursor: pointer;
  transition: all 0.2s;
}

.gtq-btn-home:hover {
  background: #fff;
  border-color: #8b6f47;
}

/* ---- GTQ Animations ---- */
@keyframes gtqFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gtqBounce {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.15); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 900px) {
  .gtq-select-grid { grid-template-columns: repeat(3, 1fr); }
  .gtq-question-card-uniform { width: 100%; max-width: 600px; }
}

/* ---- GTQ Mobile ---- */
@media (max-width: 600px) {
  .gtq-hero h1 { font-size: 2rem; }
  .gtq-select-grid { grid-template-columns: repeat(2, 1fr); }
  .gtq-choices { grid-template-columns: 1fr; }
  .gtq-quote-text { font-size: 16px; }
  .gtq-wrapper { padding: 16px 16px 48px; }
  .gtq-question-card { padding: 20px 16px; }
  .gtq-question-card-uniform { width: 100%; }
  .gtq-results-score { font-size: 2.4rem; }
  .gtq-results-actions { flex-direction: column; align-items: center; }
  .gtq-btn-replay, .gtq-btn-home { width: 100%; }
}

/* ============================================================
   SPLURGE LIST — CUSTOM GAME SCREEN
   ============================================================ */

/* --- Game Screen Base --- */
.game-screen-splurgelist {
  background: #f5f0e8;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #2a2a2a;
  padding: 0;
}
.game-screen-splurgelist::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23c4b89a' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* --- Hover Tagline Variant --- */
.hover-tagline-sl {
  font-family: 'DM Serif Display', serif !important;
  font-size: 23px;
  font-weight: 400 !important;
  color: #2a2a2a !important;
  letter-spacing: 0.01em;
  font-style: normal;
  text-shadow: none !important;
}

/* --- Back Button --- */
.sl-back-btn {
  position: fixed;
  top: 16px;
  left: 20px;
  z-index: 50;
  background: rgba(255,253,245,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s;
}
.sl-back-btn:hover { background: #fff; }

/* --- Floating Money/Shopping Emojis --- */
.sl-float-emojis {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sl-float {
  position: absolute;
  font-size: 28px;
  opacity: 0.22;
  animation: slFloatDrift 18s ease-in-out infinite;
}
.sl-float-1 { top: 8%; left: 5%; animation-delay: 0s; animation-duration: 20s; }
.sl-float-2 { top: 25%; right: 8%; animation-delay: -3s; animation-duration: 22s; }
.sl-float-3 { top: 50%; left: 10%; animation-delay: -6s; animation-duration: 18s; }
.sl-float-4 { top: 70%; right: 12%; animation-delay: -9s; animation-duration: 24s; }
.sl-float-5 { top: 15%; right: 20%; animation-delay: -12s; animation-duration: 19s; }
.sl-float-6 { top: 85%; left: 15%; animation-delay: -15s; animation-duration: 21s; }
@keyframes slFloatDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(5deg); }
  50% { transform: translateY(10px) rotate(-3deg); }
  75% { transform: translateY(-8px) rotate(2deg); }
}

/* --- Animations --- */
@keyframes slSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slPopIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
/* --- Results Screen Reveal Animations --- */
@keyframes slRevealDown {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slRevealScale {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slRevealRow {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slRevealRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slRevealFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Title drops in */
.sl-anim-title {
  opacity: 0;
  animation: slRevealDown 0.5s ease forwards;
  animation-delay: 0.1s;
}
/* Badge pops in */
.sl-anim-badge {
  opacity: 0;
  animation: slRevealScale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.5s;
}
/* Rankings card slides up */
.sl-anim-card {
  opacity: 0;
  animation: slSlideUp 0.5s ease forwards;
  animation-delay: 0.8s;
}
/* Individual ranking rows cascade in */
.sl-anim-row {
  opacity: 0;
  animation: slRevealRow 0.35s ease forwards;
}
/* Disagreements card slides in from right */
.sl-anim-fights {
  opacity: 0;
  animation: slRevealRight 0.5s ease forwards;
  animation-delay: 1.4s;
}
/* Individual fight rows stagger */
.sl-anim-fight-row {
  opacity: 0;
  animation: slRevealFade 0.4s ease forwards;
}
/* Back button fades up last */
.sl-anim-back {
  opacity: 0;
  animation: slSlideUp 0.4s ease forwards;
  animation-delay: 2.2s;
}

/* --- Start Screen --- */
.sl-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 24px 16px;
  position: relative;
  z-index: 1;
  animation: slSlideUp 0.4s ease;
}
.sl-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  color: #2a2a2a;
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
  margin-top: -50px;
}
.sl-rule-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
  max-width: 360px;
}
.sl-rule-step {
  font-size: 14px;
  color: #5a5550;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  animation: slInstrFadeIn 0.5s ease forwards;
}
.sl-instr-1 { animation-delay: 0.3s; }
.sl-instr-2 { animation-delay: 1.0s; }
.sl-instr-3 { animation-delay: 1.7s; }
@keyframes slInstrFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
.sl-btn-delayed {
  opacity: 0;
  transform: translateY(8px);
  animation: slInstrFadeIn 0.5s ease forwards;
  animation-delay: 2.4s;
}
.sl-rule-num {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  color: #d93025;
  background: #fef3f2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(217,48,37,0.19);
}
.sl-rule-bullet {
  font-size: 22px;
  color: #d93025;
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* --- Buttons --- */
.sl-big-btn {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: 0.03em;
  padding: 14px 40px;
  border-radius: 14px;
  border: 2.5px solid #2a2a2a;
  cursor: pointer;
  margin-top: 16px;
  transition: transform 0.1s;
  width: 100%;
  max-width: 400px;
}
.sl-big-btn:active { transform: scale(0.95); }
.sl-big-btn-primary {
  background: #d93025;
  color: #fff;
  box-shadow: 0 4px 0 #a82318;
}
.sl-big-btn-disabled {
  background: #ccc;
  color: #999;
  box-shadow: 0 4px 0 #bbb;
  cursor: default;
}

/* --- Subtitle --- */
.sl-subtitle-small {
  font-size: 14px;
  color: #8a8076;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 340px;
}

/* --- Swap Title --- */
.sl-swap-title {
  font-family: 'DM Serif Display', serif;
  font-size: 42px;
  color: #2a2a2a;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

/* --- Rank Screen --- */
.sl-rank-screen {
  padding: 50px 16px 80px;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
}
.sl-rank-header { margin-bottom: 8px; }
.sl-player-badge {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #d93025;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.sl-rank-instr {
  font-size: 13px;
  color: #8a8076;
  line-height: 1.5;
}
.sl-pass-warning {
  font-size: 12px;
  font-weight: 700;
  color: #d93025;
  background: #fef3f2;
  padding: 8px 14px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 14px;
  border: 1.5px solid rgba(217,48,37,0.15);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.sl-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a89f94;
  margin-bottom: 8px;
  margin-top: 16px;
}

/* --- Side by side layout --- */
.sl-side-by-side {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.sl-side-left {
  flex: 3;
  min-width: 0;
}
.sl-side-right {
  flex: 2;
  min-width: 0;
}
.sl-rank-wide {
  max-width: 100%;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}

/* --- Bank Grid (Photo Cards) --- */
.sl-bank-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.sl-bank-grid-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sl-bank-card {
  position: relative;
  border-radius: 14px;
  border: 2.5px solid #1a1a1a;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}
.sl-bank-card:active { transform: scale(0.97); opacity: 0.8; }
.sl-bank-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 10px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* --- Ranked List (drag-to-reorder photo cards) --- */
.sl-ranked-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sl-drag-card {
  position: relative;
  border-radius: 14px;
  border: 2.5px solid #2a2a2a;
  overflow: hidden;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.12);
  aspect-ratio: 3 / 3.2;
  background: #fffdf9;
}
.sl-drag-card:active { cursor: grabbing; }
.sl-drag-card.sl-dragging {
  opacity: 0.35;
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217,48,37,0.2);
}
.sl-drag-card.sl-drag-over {
  transform: scale(1.04);
  border-color: #8b6f47;
  box-shadow: 4px 4px 0 rgba(139,111,71,0.3);
}
.sl-drag-rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: #fff;
  background: #d93025;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  border: 2px solid #fff;
}
.sl-drag-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sl-drag-title-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.sl-drag-title {
  font-family: 'DM Serif Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.sl-drag-grip {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
/* Touch drag clone */
.sl-touch-clone {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.85;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-radius: 14px;
}

/* --- Empty State --- */
.sl-empty-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  border: 2.5px dashed #d0c9be;
  border-radius: 16px;
  background: #faf7f2;
  text-align: center;
}
.sl-empty-icon { font-size: 32px; margin-bottom: 8px; }
.sl-empty-text { font-size: 14px; font-weight: 600; color: #8a8076; }
.sl-empty-subtext { font-size: 12px; color: #b0a89e; margin-top: 4px; }

/* --- Sticky Bottom --- */
.sl-sticky-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  background: linear-gradient(transparent, #f5f0e8 30%);
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* --- Compare Screen --- */
.sl-compare-wrap {
  padding: 60px 16px 24px;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: slSlideUp 0.4s ease;
}
.sl-compare-wrap.sl-compare-wide {
  max-width: 1020px;
  padding: 80px 28px 24px;
}
.sl-compare-header { text-align: center; margin-bottom: 32px; }
.sl-compat-badge {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  color: #2d8f5e;
  background: #e8f5e9;
  padding: 4px 14px;
  border-radius: 8px;
  display: inline-block;
  border: 1.5px solid rgba(45,143,94,0.19);
  margin-bottom: 0;
}
/* Red-outlined card wrapping the compare grid */
.sl-compare-card {
  border: 2.5px solid #d93025;
  border-radius: 16px;
  padding: 12px 16px 10px;
  background: #fffdf9;
  box-shadow: 4px 4px 0 #d93025;
}
/* Two-column results layout: lists left, disagreements right */
.sl-results-columns {
  display: flex;
  gap: 28px;
  align-items: center;
}
.sl-results-left {
  flex: 1;
  min-width: 0;
}
.sl-results-right {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* --- Fight Box (Disagreements) --- */
.sl-fight-box {
  background: #fffdf9;
  border: 2.5px solid #d93025;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 0;
  box-shadow: 4px 4px 0 #d93025;
  width: 100%;
  max-width: 380px;
}
.sl-fight-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: #d93025;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.sl-fight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0ebe3;
}
.sl-fight-row:last-child { border-bottom: none; }
.sl-fight-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid #e0d8cc;
}
.sl-fight-name { font-size: 14px; font-weight: 600; color: #2a2a2a; }
.sl-fight-diff { font-size: 12px; color: #8a8076; font-weight: 500; }
.sl-fight-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sl-fight-comment {
  font-size: 13px;
  color: #d93025;
  font-style: italic;
  font-weight: 500;
}

/* (Old vertical bank cards removed — now using drag-to-reorder only) */

/* --- Direction labels (FIRST BUY / LAST BUY) --- */
.sl-direction-label {
  font-family: 'DM Serif Display', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 6px 0;
  color: #8a8076;
}
.sl-direction-first { color: #2e7d32; }
.sl-direction-last { color: #d93025; }

.sl-section-sublabel {
  font-size: 12px !important;
  color: #a89880 !important;
  margin-top: -4px;
  margin-bottom: 12px;
}

/* --- Compare Grid --- */
.sl-compare-grid {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  gap: 5px;
  margin-top: 0;
}
.sl-compare-col-header {
  font-family: 'DM Serif Display', serif;
  font-size: 16px;
  color: #2a2a2a;
  padding: 4px 4px 6px;
  letter-spacing: 0.02em;
}
.sl-compare-col-center { text-align: center; }
.sl-compare-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid #e0dbd3;
  background: #fffdf9;
  transition: background 0.15s;
}
.sl-compare-match {
  background: #e8f5e9;
  border-color: #2d8f5e;
}
.sl-compare-thumb {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.sl-compare-rank-num {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  color: #d93025;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-cell-name { font-size: 12.5px; font-weight: 600; color: #2a2a2a; line-height: 1.2; }

/* --- Results Back Button (smaller than game buttons) --- */
.sl-results-back-btn {
  font-family: 'DM Serif Display', serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #d93025;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  padding: 8px 22px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 2px 2px 0 #1a1a1a;
  letter-spacing: 0.02em;
}
.sl-results-back-btn:hover { transform: translateY(-1px); box-shadow: 4px 4px 0 #1a1a1a; }
.sl-results-back-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 #1a1a1a; }

/* --- Responsive: stack columns on small screens --- */
@media (max-width: 800px) {
  .sl-results-columns { flex-direction: column; gap: 16px; }
  .sl-results-left { flex: none; width: 100%; }
  .sl-results-right { flex: none; width: 100%; }
  .sl-compare-wrap.sl-compare-wide { max-width: 500px; padding: 50px 16px 16px; }
  .sl-ranked-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .sl-ranked-list { grid-template-columns: 1fr; }
}

/* --- Final Badge --- */
.sl-final-badge {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  color: #2d8f5e;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

/* --- Final Result List --- */
.sl-final-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-final-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #2a2a2a;
  background: #fffdf9;
}
.sl-final-rank-circle {
  font-family: 'DM Serif Display', serif;
  font-size: 14px;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sl-final-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #2a2a2a;
  flex: 1;
  line-height: 1.2;
}
.sl-first-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d93025;
  background: #fef3f2;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(217,48,37,0.19);
  flex-shrink: 0;
}
.sl-last-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a8076;
  background: #f0ebe3;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #d0c9be;
  flex-shrink: 0;
}

/* --- Mobile --- */
@media (max-width: 800px) {
  .sl-side-by-side {
    flex-direction: column;
  }
  .sl-bank-grid-5 {
    grid-template-columns: repeat(4, 1fr);
  }
  .sl-rank-wide {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 400px) {
  .sl-bank-grid { gap: 6px; }
  .sl-bank-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .sl-bank-card-title { font-size: 11px; padding: 24px 6px 8px; }
  .sl-compare-grid { grid-template-columns: 1fr 24px 1fr; }
  .sl-cell-name { font-size: 10px; }
  .sl-compare-thumb { width: 18px; height: 18px; }
}

/* ============================================================
   REAL OR FAKE? — Game Styles
   ============================================================ */

/* --- Hover tagline on card --- */
.hover-tagline-rof {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 22px !important;
  color: #f0e6d0 !important;
}
.hover-tagline-kc {
  font-family: 'Lora', serif !important;
  font-style: italic;
  font-size: 26px !important;
  color: #e1bee7 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4), 0 0 20px rgba(206,147,216,0.3) !important;
  letter-spacing: 0.5px !important;
}
.hover-tagline-pr {
  font-family: 'Permanent Marker', cursive !important;
  font-size: 26px !important;
  color: #fff !important;
  letter-spacing: 1px !important;
  -webkit-text-stroke: 1px #1a2a3a !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1px -1px 0 #1a2a3a,
     1px -1px 0 #1a2a3a,
    -1px  1px 0 #1a2a3a,
     1px  1px 0 #1a2a3a,
     0 2px 6px rgba(0,0,0,0.4) !important;
}

/* --- Game screen container --- */
.game-screen-realorfake {
  background: linear-gradient(135deg, #2c3e7a 0%, #4a69bd 50%, #3b5998 100%) !important;
  padding: 0 !important;
}

/* Brick / grid texture overlay (matches card cover) */
.game-screen-realorfake::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 18px,
      rgba(255,255,255,0.03) 18px,
      rgba(255,255,255,0.03) 19px
    );
  pointer-events: none;
  z-index: 0;
}

/* --- Graffiti spray-painted doodles --- */
.rof-deco {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}

/* Graffiti heart — hot pink — top left */
.rof-deco-1 {
  width: 100px; height: 100px;
  top: 20%; left: 2%;
  animation: rofFloat1 9s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,70,130,0.5)) drop-shadow(0 0 3px rgba(255,70,130,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cdefs%3E%3Cfilter id='g1' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='1' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g1)'%3E%3Cpath d='M40 68C40 68 10 49 10 28c0-11 8-18 17-15s13 13 13 13 4-10 13-13 17 4 17 15C70 49 40 68 40 68z' stroke='%23ff4682' stroke-width='4.5' stroke-linecap='round' fill='rgba(255,70,130,0.12)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti starburst — electric yellow — top right */
.rof-deco-2 {
  width: 85px; height: 85px;
  top: 18%; right: 4%;
  animation: rofFloat2 11s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,230,50,0.5)) drop-shadow(0 0 3px rgba(255,230,50,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'%3E%3Cdefs%3E%3Cfilter id='g2' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='3' seed='7' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g2)'%3E%3Cpath d='M30 3L34 23L55 20L37 30L55 40L34 37L30 57L26 37L5 40L23 30L5 20L26 23Z' stroke='%23ffe632' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='rgba(255,230,50,0.1)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti spiral — cyan/aqua — left middle */
.rof-deco-3 {
  width: 100px; height: 100px;
  top: 32%; left: 1%;
  animation: rofFloat3 10s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(0,220,255,0.5)) drop-shadow(0 0 3px rgba(0,220,255,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cdefs%3E%3Cfilter id='g3' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035' numOctaves='4' seed='12' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g3)'%3E%3Cpath d='M55 40c0 8.3-6.7 15-15 15s-15-6.7-15-15 6.7-15 15-15c5 0 9.3 2.5 12 6.3' stroke='%2300dcff' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M48 31c-2-4-6.3-7-11-7-8 0-14.5 6.5-14.5 14.5S29 53 37 53c10 0 18-8 18-18' stroke='%2300dcff' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti flower — lime green — right middle */
.rof-deco-4 {
  width: 90px; height: 90px;
  top: 28%; right: 2%;
  animation: rofFloat1 12s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 8px rgba(120,255,70,0.5)) drop-shadow(0 0 3px rgba(120,255,70,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'%3E%3Cdefs%3E%3Cfilter id='g4' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.045' numOctaves='3' seed='22' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g4)'%3E%3Ccircle cx='30' cy='30' r='5' stroke='%2378ff46' stroke-width='4' fill='rgba(120,255,70,0.2)'/%3E%3Cellipse cx='30' cy='15' rx='5' ry='10' stroke='%2378ff46' stroke-width='3.5' fill='none'/%3E%3Cellipse cx='30' cy='45' rx='5' ry='10' stroke='%2378ff46' stroke-width='3.5' fill='none'/%3E%3Cellipse cx='15' cy='30' rx='10' ry='5' stroke='%2378ff46' stroke-width='3.5' fill='none'/%3E%3Cellipse cx='45' cy='30' rx='10' ry='5' stroke='%2378ff46' stroke-width='3.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti smiley — coral orange — bottom left */
.rof-deco-5 {
  width: 75px; height: 75px;
  bottom: 20%; left: 3%;
  animation: rofFloat2 8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,140,50,0.5)) drop-shadow(0 0 3px rgba(255,140,50,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none'%3E%3Cdefs%3E%3Cfilter id='g5' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='33' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='3.5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g5)'%3E%3Ccircle cx='25' cy='25' r='18' stroke='%23ff8c32' stroke-width='4.5' fill='none'/%3E%3Ccircle cx='18' cy='20' r='3' fill='%23ff8c32'/%3E%3Ccircle cx='32' cy='20' r='3' fill='%23ff8c32'/%3E%3Cpath d='M16 31c3 5 12 5 18 0' stroke='%23ff8c32' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti star — lavender/purple — bottom right */
.rof-deco-6 {
  width: 90px; height: 90px;
  bottom: 25%; right: 2%;
  animation: rofFloat3 9.5s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 8px rgba(180,130,255,0.5)) drop-shadow(0 0 3px rgba(180,130,255,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none'%3E%3Cdefs%3E%3Cfilter id='g6' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='44' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g6)'%3E%3Cpath d='M30 4L37 21L55 21L41 33L46 51L30 41L14 51L19 33L5 21L23 21Z' stroke='%23b482ff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' fill='rgba(180,130,255,0.1)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti arrow — white — bottom center */
.rof-deco-7 {
  width: 100px; height: 55px;
  bottom: 8%; left: 38%;
  animation: rofFloat1 13s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)) drop-shadow(0 0 2px rgba(255,255,255,0.2));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' fill='none'%3E%3Cdefs%3E%3Cfilter id='g7' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='3' seed='55' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g7)'%3E%3Cpath d='M5 28C18 8 42 36 62 14' stroke='white' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M53 8L63 14L54 23' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti XOX — hot pink — right area */
.rof-deco-8 {
  width: 80px; height: 50px;
  top: 58%; right: 4%;
  animation: rofFloat2 8.5s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 8px rgba(255,70,130,0.5)) drop-shadow(0 0 3px rgba(255,70,130,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 35' fill='none'%3E%3Cdefs%3E%3Cfilter id='g8' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.045' numOctaves='3' seed='66' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g8)'%3E%3Cpath d='M4 4L19 24M19 4L4 24' stroke='%23ff4682' stroke-width='4.5' stroke-linecap='round'/%3E%3Ccircle cx='37' cy='14' r='11' stroke='%23ff4682' stroke-width='4.5' fill='none'/%3E%3Cpath d='M54 4L69 24M69 4L54 24' stroke='%23ff4682' stroke-width='4.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti lightning — electric yellow — left lower */
.rof-deco-9 {
  width: 60px; height: 85px;
  top: 65%; left: 5%;
  animation: rofFloat3 7s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,230,50,0.5)) drop-shadow(0 0 3px rgba(255,230,50,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none'%3E%3Cdefs%3E%3Cfilter id='g9' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='77' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g9)'%3E%3Cpath d='M26 3L11 28H22L14 57L34 24H21Z' stroke='%23ffe632' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='rgba(255,230,50,0.15)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti crown — coral orange — top center */
.rof-deco-10 {
  width: 80px; height: 60px;
  top: 22%; left: 45%;
  animation: rofFloat1 10s ease-in-out infinite 2s;
  filter: drop-shadow(0 0 8px rgba(255,140,50,0.5)) drop-shadow(0 0 3px rgba(255,140,50,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 45' fill='none'%3E%3Cdefs%3E%3Cfilter id='g10' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='88' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g10)'%3E%3Cpath d='M4 36L10 8L22 22L30 3L38 22L50 8L56 36Z' stroke='%23ff8c32' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' fill='rgba(255,140,50,0.1)'/%3E%3Cline x1='4' y1='36' x2='56' y2='36' stroke='%23ff8c32' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti hearts cluster — lavender — mid left */
.rof-deco-11 {
  width: 70px; height: 70px;
  top: 50%; left: 4%;
  animation: rofFloat2 11s ease-in-out infinite 1s;
  filter: drop-shadow(0 0 8px rgba(180,130,255,0.5)) drop-shadow(0 0 3px rgba(180,130,255,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none'%3E%3Cdefs%3E%3Cfilter id='g11' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='99' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='3.5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g11)'%3E%3Cpath d='M15 26c0 0-8-5-8-11s5-7 8-5 3 6 3 6 0-4 3-6 8-1 8 5-8 11-8 11z' stroke='%23b482ff' stroke-width='3.5' stroke-linecap='round' fill='rgba(180,130,255,0.12)'/%3E%3Cpath d='M33 19c0 0-6-4-6-8s3-5 6-3 2 4 2 4 0-2 2-4 6-1 6 3-6 8-6 8z' stroke='%23b482ff' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Graffiti peace sign — lime green — lower right */
.rof-deco-12 {
  width: 70px; height: 70px;
  bottom: 10%; right: 5%;
  animation: rofFloat3 9s ease-in-out infinite 3s;
  filter: drop-shadow(0 0 8px rgba(120,255,70,0.5)) drop-shadow(0 0 3px rgba(120,255,70,0.3));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' fill='none'%3E%3Cdefs%3E%3Cfilter id='g12' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='111' result='turb'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='turb' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g12)'%3E%3Ccircle cx='25' cy='25' r='18' stroke='%2378ff46' stroke-width='4.5' fill='none'/%3E%3Cline x1='25' y1='7' x2='25' y2='43' stroke='%2378ff46' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M25 25L11 39' stroke='%2378ff46' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M25 25L39 39' stroke='%2378ff46' stroke-width='3.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Doodle float animations — slow, subtle drift */
@keyframes rofFloat1 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  25% { transform: translateY(-12px) translateX(5px) rotate(1.5deg); }
  50% { transform: translateY(-5px) translateX(-4px) rotate(-1deg); }
  75% { transform: translateY(-15px) translateX(3px) rotate(1deg); }
}
@keyframes rofFloat2 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  30% { transform: translateY(10px) translateX(-7px) rotate(-1.5deg); }
  60% { transform: translateY(-8px) translateX(4px) rotate(1deg); }
}
@keyframes rofFloat3 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  20% { transform: translateY(-7px) translateX(8px) rotate(2deg); }
  50% { transform: translateY(10px) translateX(-5px) rotate(-1.5deg); }
  80% { transform: translateY(-4px) translateX(6px) rotate(1deg); }
}

@media (max-width: 800px) {
  .rof-deco { opacity: 0.3; }
  .rof-deco-7, .rof-deco-9, .rof-deco-10, .rof-deco-11, .rof-deco-12 { display: none; }
}

/* --- Back nav --- */
.rof-back-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 24px;
  background: rgba(44,62,122,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rof-done-btn {
  font-family: 'Bangers', cursive;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(135deg, #f7a072, #ff8a50);
  border: 2px solid #ffb88c;
  border-radius: 12px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow:
    0 3px 0 #c76a3a,
    0 0 10px rgba(255,160,114,0.5),
    0 0 25px rgba(255,160,114,0.25);
  transition: all 0.15s;
}
.rof-done-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 #c76a3a,
    0 0 14px rgba(255,160,114,0.6),
    0 0 30px rgba(255,160,114,0.35);
}
.rof-done-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #c76a3a, 0 2px 6px rgba(247,160,114,0.3);
}
.rof-done-inline {
  margin-top: 16px;
  font-size: 14px;
  padding: 7px 20px;
  opacity: 0.85;
}
.rof-done-inline:hover { opacity: 1; }
.rof-back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a0aac0;
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s;
}
.rof-back-nav a:hover { color: #f7a072; }
.rof-back-nav svg { width: 18px; height: 18px; }

/* --- Scorebar --- */
.rof-scorebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 110px 32px 18px;
  margin-top: 0;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  background: transparent;
  width: 100%;
  max-width: 900px;
}
.rof-score-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(0,0,0,0.25);
  padding: 8px 16px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.rof-score-right { text-align: right; }
.rof-score-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.rof-score-val {
  font-family: 'Bangers', cursive;
  font-size: 36px;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rof-progress-pill {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.25);
  padding: 6px 18px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}

/* --- Split layout --- */
.rof-split-layout {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: start;
  width: 100%;
  max-width: 900px;
  flex: 1;
  margin-top: 10px;
}

/* --- Player side panels --- */
.rof-player-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 16px;
  padding-top: 20px;
  border-right: none;
  transition: background 0.3s;
  background: transparent;
}
.rof-player-side:last-child {
  border-right: none;
  border-left: none;
}
.rof-player-side.rof-correct { background: rgba(45,143,94,0.15); }
.rof-player-side.rof-wrong { background: rgba(217,48,37,0.15); }

.rof-player-tag {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  color: #e0e4f0;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

/* --- Answer buttons --- */
.rof-button-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 280px;
}
.rof-answer-btn {
  font-family: 'Bangers', cursive;
  font-size: 24px;
  letter-spacing: 0.06em;
  padding: 20px 14px;
  border-radius: 16px;
  border: 3px solid;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.rof-answer-btn:hover { transform: translateY(-2px); }
.rof-answer-btn:active { transform: scale(0.95) translateY(0); }

.rof-btn-real {
  color: #fff;
  border-color: #34c778;
  background: linear-gradient(135deg, #2d8f5e 0%, #34c778 100%);
  box-shadow: 0 5px 0 #1d6b42, 0 6px 20px rgba(45,143,94,0.3);
}
.rof-btn-real:hover {
  background: linear-gradient(135deg, #34a368 0%, #3dd888 100%);
  box-shadow: 0 6px 0 #1d6b42, 0 8px 25px rgba(45,143,94,0.4);
}
.rof-btn-real.rof-selected {
  background: linear-gradient(135deg, #238c4e 0%, #2baf66 100%);
  color: #fff;
  box-shadow: 0 2px 0 #1d6b42, inset 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(3px);
}

.rof-btn-fake {
  color: #fff;
  border-color: #ff5c4d;
  background: linear-gradient(135deg, #d93025 0%, #ff5c4d 100%);
  box-shadow: 0 5px 0 #a82318, 0 6px 20px rgba(217,48,37,0.3);
}
.rof-btn-fake:hover {
  background: linear-gradient(135deg, #e54035 0%, #ff7066 100%);
  box-shadow: 0 6px 0 #a82318, 0 8px 25px rgba(217,48,37,0.4);
}
.rof-btn-fake.rof-selected {
  background: linear-gradient(135deg, #c22a1f 0%, #e84538 100%);
  color: #fff;
  box-shadow: 0 2px 0 #a82318, inset 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(3px);
}

/* --- Result badge (after reveal) --- */
.rof-result-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: rofPopIn 0.3s ease;
}
.rof-result-emoji {
  font-size: 40px;
  font-weight: 700;
}
.rof-correct .rof-result-emoji { color: #34c778; }
.rof-wrong .rof-result-emoji { color: #ff5c4d; }
.rof-result-text {
  font-family: 'Bangers', cursive;
  font-size: 24px;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.rof-choice-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #c0c8e0;
}

/* --- Quote center --- */
.rof-quote-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  gap: 20px;
  min-width: 0;
}
.rof-quote-card {
  background: #faf6f0;
  border: 3px solid #f7a072;
  border-radius: 20px;
  padding: 32px 36px;
  max-width: 560px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 8px rgba(255,160,114,0.4),
    0 0 20px rgba(255,160,114,0.2),
    0 0 40px rgba(255,140,80,0.1),
    0 8px 32px rgba(0,0,0,0.2);
  text-align: center;
}
.rof-quote-card.rof-animate {
  animation: rofPopIn 0.35s ease;
}
.rof-quote-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.rof-quote-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #3a3225;
  line-height: 1.6;
  font-style: italic;
}

/* --- Reveal button --- */
.rof-reveal-btn {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 14px 36px;
  border-radius: 14px;
  border: 2.5px solid #f7a072;
  background: #f7a072;
  color: #1a1f3e;
  cursor: pointer;
  box-shadow:
    0 4px 0 #c47a4a,
    0 0 10px rgba(255,160,114,0.5),
    0 0 25px rgba(255,160,114,0.25);
  transition: transform 0.1s;
  animation: rofPopIn 0.3s ease;
}
.rof-reveal-btn:hover { transform: scale(1.03); }
.rof-reveal-btn:active { transform: scale(0.95); }

/* --- Answer reveal --- */
.rof-answer-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid rgba(247,160,114,0.3);
  animation: rofPopIn 0.3s ease;
}
.rof-answer-tag {
  font-family: 'Bangers', cursive;
  font-size: 26px;
  color: #fff;
  padding: 10px 32px;
  border-radius: 12px;
  letter-spacing: 0.05em;
}
.rof-tag-real { background: #2d8f5e; }
.rof-tag-fake { background: #d93025; }
.rof-who-said {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #e8734a;
}
.rof-explanation {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: #5a5047;
  max-width: 400px;
  text-align: center;
  line-height: 1.5;
}

/* --- Next button --- */
.rof-next-btn {
  font-family: 'Bangers', cursive;
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 10px 28px;
  border-radius: 12px;
  border: 2.5px solid #f7a072;
  background: #f7a072;
  color: #1a1f3e;
  cursor: pointer;
  box-shadow:
    0 4px 0 #c47a4a,
    0 0 10px rgba(255,160,114,0.5),
    0 0 25px rgba(255,160,114,0.25);
  transition: transform 0.1s;
  margin-top: 4px;
}
.rof-next-btn:hover { transform: scale(1.03); }
.rof-next-btn:active { transform: scale(0.95); }

/* --- Waiting text --- */
.rof-waiting {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #ffb88c;
  text-shadow:
    0 0 7px rgba(255,160,114,0.8),
    0 0 15px rgba(255,160,114,0.5),
    0 0 30px rgba(255,140,80,0.3);
}

/* --- Results screen --- */
.rof-results-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 24px 16px;
  animation: rofSlideUp 0.4s ease;
}
.rof-results-card {
  background: #faf6f0;
  border: 3px solid #f7a072;
  border-radius: 28px;
  padding: 48px 52px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow:
    0 0 10px rgba(255,160,114,0.4),
    0 0 25px rgba(255,160,114,0.2),
    0 0 50px rgba(255,140,80,0.1),
    0 12px 40px rgba(0,0,0,0.25);
  max-width: 560px;
  width: 100%;
}
.rof-results-trophy { font-size: 56px; margin-bottom: 12px; }
.rof-results-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: #e8734a;
  line-height: 0.95;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  text-shadow:
    0 0 7px rgba(232,115,74,0.7),
    0 0 15px rgba(232,115,74,0.4),
    0 0 30px rgba(232,115,74,0.25),
    1px 1px 0 rgba(0,0,0,0.08);
}
.rof-results-cards {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.rof-result-card {
  background: rgba(247,160,114,0.08);
  border: 2.5px solid #f7a072;
  border-radius: 20px;
  padding: 28px 36px;
  text-align: center;
  min-width: 160px;
  box-shadow:
    0 0 8px rgba(255,160,114,0.3),
    0 0 18px rgba(255,160,114,0.15);
}
.rof-result-card-winner {
  border-color: #e8734a;
  background: rgba(247,160,114,0.15);
  box-shadow:
    0 0 10px rgba(232,115,74,0.5),
    0 0 25px rgba(232,115,74,0.25),
    0 0 45px rgba(232,115,74,0.12);
}
.rof-result-card-label {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  color: #3a3225;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.rof-result-card-score {
  font-family: 'Bangers', cursive;
  font-size: 42px;
  color: #e8734a;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow:
    0 0 7px rgba(232,115,74,0.6),
    0 0 15px rgba(232,115,74,0.3);
}
.rof-result-card-pct {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #7a6e60;
  margin-top: 4px;
}
.rof-results-vs {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 28px;
  color: #7a6e60;
  align-self: center;
}

/* --- Play again / Home buttons --- */
.rof-play-again-btn {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 14px 40px;
  border-radius: 14px;
  border: 2.5px solid #f7a072;
  background: #f7a072;
  color: #1a1f3e;
  cursor: pointer;
  box-shadow:
    0 4px 0 #c47a4a,
    0 0 10px rgba(255,160,114,0.5),
    0 0 25px rgba(255,160,114,0.25);
  transition: transform 0.1s;
  margin-bottom: 12px;
}
.rof-play-again-btn:hover { transform: scale(1.03); }
.rof-play-again-btn:active { transform: scale(0.95); }

.rof-home-btn {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6b7394;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s;
}
.rof-home-btn:hover { color: #f7a072; }

/* --- Animations --- */
@keyframes rofPopIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rofSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .rof-split-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: auto;
  }
  .rof-player-side {
    border-right: none !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 20px 16px;
    flex-direction: row;
    gap: 16px;
  }
  .rof-player-tag { margin-bottom: 0; }
  .rof-button-col {
    flex-direction: row;
    gap: 10px;
  }
  .rof-answer-btn { padding: 16px 10px; font-size: 20px; }
  .rof-quote-card { padding: 24px 20px; min-height: auto; }
  .rof-quote-text { font-size: 16px; }
  .rof-scorebar { padding: 110px 16px 14px; }
  .rof-results-cards { flex-direction: column; gap: 12px; }
  .rof-result-card { min-width: 140px; padding: 20px 28px; }
}

/* ════════════════════════════════════════════════════════════════
   KING'S CUP GAME
   ════════════════════════════════════════════════════════════════ */

/* --- Game screen background --- */
.game-screen-kingscup {
  background: linear-gradient(135deg, #3a1070 0%, #4a148c 40%, #5c1a9e 100%) !important;
  padding: 0 !important;
}
.game-screen-kingscup::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(156,39,176,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(206,147,216,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* --- Background decorations --- */
.kc-bg-decos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.kc-bg-deco {
  position: absolute;
  opacity: 0.14;
  font-size: 75px;
  animation: kcBgFloat 12s ease-in-out infinite;
}
.kc-bg-d1 { top: 8%; left: 5%; font-size: 64px; animation-delay: 0s; }
.kc-bg-d2 { top: 15%; right: 8%; font-size: 80px; animation-delay: -2s; }
.kc-bg-d3 { bottom: 20%; left: 8%; font-size: 70px; animation-delay: -4s; }
.kc-bg-d4 { bottom: 10%; right: 5%; font-size: 60px; animation-delay: -6s; }
.kc-bg-d5 { top: 45%; left: 3%; font-size: 85px; animation-delay: -1s; color: #ce93d8; }
.kc-bg-d6 { top: 30%; right: 3%; font-size: 75px; animation-delay: -3s; color: #e57373; }
.kc-bg-d7 { bottom: 35%; left: 12%; font-size: 70px; animation-delay: -5s; color: #e57373; }
.kc-bg-d8 { bottom: 45%; right: 10%; font-size: 80px; animation-delay: -7s; color: #ce93d8; }
@keyframes kcBgFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* --- Back nav --- */
.kc-back-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px 20px;
  background: transparent;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kc-back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e1bee7;
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.kc-back-nav a:hover { color: #e1bee7; }
.kc-back-nav svg { width: 18px; height: 18px; }
.kc-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-new-game-btn {
  font-family: 'Bangers', cursive;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(135deg, #ce93d8, #ab47bc);
  border: 2px solid #e1bee7;
  border-radius: 10px;
  padding: 6px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 #7b1fa2;
  transition: all 0.15s;
}
.kc-new-game-btn:hover { transform: translateY(-1px); }
.kc-new-game-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7b1fa2; }

/* --- Fullscreen game container --- */
.kc-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 56px 20px 20px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* --- Game center area --- */
.kc-game-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 900px;
  gap: 16px;
}

/* --- Top bar (cards counter) --- */
.kc-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
.kc-king-tracker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-king-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9e80b0;
}
.kc-king-dots {
  display: flex;
  gap: 6px;
}
.kc-king-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(206,147,216,0.3);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}
.kc-king-dot-filled {
  background: linear-gradient(135deg, #d32f2f, #f44336);
  border-color: #f44336;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(244,67,54,0.4);
}
.kc-cards-counter {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #9e80b0;
  letter-spacing: 0.04em;
}
.kc-king-alert {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  color: #ff6b8a;
  text-shadow: 0 0 20px rgba(255,107,138,0.5);
  animation: kcPulse 1s ease-in-out infinite;
}

/* --- Table area --- */
.kc-table {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kc-drawn-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kc-empty-slot {
  width: 260px;
  height: 374px;
  border-radius: 12px;
  border: 2.5px dashed rgba(206,147,216,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
}
.kc-empty-slot span {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #7a5f90;
  text-align: center;
  line-height: 1.5;
}
.kc-deck-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}
/* Stacked card layers behind the deck */
.kc-deck-stack {
  position: relative;
}
.kc-deck-stack::before,
.kc-deck-stack::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #fff;
  z-index: 0;
}
.kc-deck-stack::before {
  top: 5px;
  left: 3px;
  background: #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.kc-deck-stack::after {
  top: 10px;
  left: 5px;
  background: #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.kc-deck-stack .kc-card-back {
  position: relative;
  z-index: 1;
}
.kc-deck-stack-empty::before,
.kc-deck-stack-empty::after {
  display: none;
}

/* --- Playing card (realistic) --- */
.kc-card {
  position: relative;
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.kc-card-lg {
  width: 260px;
  height: 374px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(0,0,0,0.08);
}
.kc-card-sm {
  width: 48px;
  height: 68px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.kc-card-corner {
  position: absolute;
  text-align: center;
  line-height: 1;
}
.kc-card-tl { top: 14px; left: 16px; }
.kc-card-br { bottom: 14px; right: 16px; transform: rotate(180deg); }
.kc-card-sm .kc-card-tl { top: 3px; left: 4px; }
.kc-card-sm .kc-card-br { bottom: 3px; right: 4px; }
.kc-card-val {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
}
.kc-card-lg .kc-card-val { font-size: 28px; }
.kc-card-sm .kc-card-val { font-size: 10px; }
.kc-card-suit-small { line-height: 1.1; }
.kc-card-lg .kc-card-suit-small { font-size: 20px; }
.kc-card-sm .kc-card-suit-small { font-size: 8px; }

/* --- Pip layouts for number cards --- */
.kc-pips {
  position: absolute;
  top: 52px; bottom: 52px; left: 40px; right: 40px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
  gap: 0;
}
.kc-pip {
  font-size: 36px;
  line-height: 1;
  width: 50%;
  text-align: center;
}
.kc-pips-1 { align-content: center; }
.kc-pips-1 .kc-pip { font-size: 72px; width: 100%; }
.kc-pips-2 { flex-direction: column; align-items: center; justify-content: space-between; }
.kc-pips-2 .kc-pip { font-size: 52px; width: 100%; }
.kc-pips-3 { flex-direction: column; align-items: center; justify-content: space-between; }
.kc-pips-3 .kc-pip { font-size: 44px; width: 100%; }
.kc-pips-4 .kc-pip { font-size: 38px; }
.kc-pips-5 .kc-pip { font-size: 36px; }
.kc-pips-5 .kc-pip:last-child { width: 100%; }
.kc-pips-6 .kc-pip { font-size: 36px; }
.kc-pips-7 .kc-pip { font-size: 30px; }
.kc-pips-7 .kc-pip:last-child { width: 100%; }
.kc-pips-8 .kc-pip { font-size: 28px; }
.kc-pips-9 .kc-pip { font-size: 26px; }
.kc-pips-9 .kc-pip:last-child { width: 100%; }
.kc-pips-10 .kc-pip { font-size: 23px; }

/* --- Face card center --- */
.kc-face-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.kc-face-suit {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.kc-face-letter {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}
.kc-face-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* --- Small card center pip --- */
.kc-card-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.kc-card-sm .kc-card-center { font-size: 20px; }

/* --- Card back (classic playing card) --- */
.kc-card-back {
  width: 260px;
  height: 374px;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.kc-card-back:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 16px 40px rgba(0,0,0,0.25);
}
.kc-card-back:active { transform: scale(0.98); }
.kc-card-back-empty {
  opacity: 0.3;
  cursor: default;
}
.kc-card-back-empty:hover { transform: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.2); }
.kc-card-back-inner {
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  border: 2px solid #fff;
  background: #c62828;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.06) 8px,
      rgba(255,255,255,0.06) 9px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.06) 8px,
      rgba(255,255,255,0.06) 9px
    );
  box-shadow: inset 0 0 0 3px rgba(0,0,0,0.08);
}
.kc-card-back-inner::after {
  content: '♠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: rgba(255,255,255,0.2);
}

/* --- Medium card (discard pile) --- */
.kc-card-md {
  width: 80px;
  height: 112px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.kc-card-md .kc-card-tl { top: 4px; left: 6px; }
.kc-card-md .kc-card-br { bottom: 4px; right: 6px; }
.kc-card-md .kc-card-val { font-size: 14px; }
.kc-card-md .kc-card-suit-small { font-size: 11px; }
.kc-card-md .kc-card-center { font-size: 28px; }
.kc-card-center-md {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.kc-md-letter {
  font-family: 'Georgia', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.kc-md-suit { font-size: 20px; line-height: 1; }

/* --- Discard pile (scattered around the screen) --- */
.kc-discard-section {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.kc-discard-pile {
  position: relative;
}
.kc-discard-card {
  position: absolute;
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
}
.kc-discard-scatter {
  animation: kcScatterIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes kcScatterIn {
  from { opacity: 0.8; transform: translate(0,0) rotate(0deg) scale(0.9); }
}

/* --- Rules side button (right edge) --- */
/* --- Rules flip card --- */
.kc-rules-flipcard {
  perspective: 800px;
  width: 180px;
  height: 260px;
  flex-shrink: 0;
  cursor: pointer;
}
.kc-rules-flipcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.kc-rules-flipcard.flipped .kc-rules-flipcard-inner {
  transform: rotateY(180deg);
}
.kc-rules-flipcard-front,
.kc-rules-flipcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
/* Front = the "cover" side you see first */
.kc-rules-flipcard-front {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(206,147,216,0.15);
}
.kc-rules-flipcard-front::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 2px solid #e8d5f0;
  pointer-events: none;
}
.kc-rules-fc-emoji {
  font-size: 36px;
}
.kc-rules-fc-label {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  color: #4a148c;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kc-rules-fc-tap {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #9e80b0;
  margin-top: 4px;
}
/* Back = the rules list */
.kc-rules-flipcard-back {
  transform: rotateY(180deg);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(206,147,216,0.15);
}
.kc-rules-fc-header {
  font-family: 'Bangers', cursive;
  font-size: 14px;
  color: #4a148c;
  text-align: center;
  padding: 10px 8px 6px;
  border-bottom: 1.5px solid #f3e5f5;
  letter-spacing: 0.04em;
}
.kc-rules-fc-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 8px;
}
.kc-rules-fc-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  color: #3a2a50;
  border-bottom: 1px solid #faf5fd;
}
.kc-rules-fc-row:last-child { border-bottom: none; }
.kc-rules-fc-row-active {
  background: #f3e5f5;
  border-radius: 4px;
  padding: 3.5px 4px;
  margin: 0 -4px;
}
.kc-rules-fc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  border-radius: 3px;
  background: #f3e5f5;
  color: #6a1b9a;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 4px;
}
.kc-rules-fc-name {
  font-weight: 700;
  color: #4a148c;
  white-space: nowrap;
  font-size: 10.5px;
}
.kc-rules-fc-desc {
  color: #9e80b0;
  font-size: 9.5px;
}
.kc-rules-fc-tapback {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #9e80b0;
  text-align: center;
  padding: 5px 0 8px;
  border-top: 1.5px solid #f3e5f5;
}

/* --- Rules modal overlay (expanded cheat sheet) --- */
.kc-rules-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(10,2,20,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: kcFadeIn 0.25s ease;
  cursor: pointer;
}
.kc-rules-modal {
  background: #fff;
  border-radius: 20px;
  width: 92%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(206,147,216,0.2);
  animation: kcSlideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}
.kc-rules-modal-header {
  font-family: 'Bangers', cursive;
  font-size: 26px;
  color: #4a148c;
  text-align: center;
  padding: 22px 20px 14px;
  border-bottom: 2px solid #f3e5f5;
  letter-spacing: 0.04em;
}
.kc-rules-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 16px;
}
.kc-rules-modal-list .kc-rules-fc-row {
  font-size: 16px;
  padding: 10px 0;
  gap: 10px;
  border-bottom: 1px solid #f3e5f5;
}
.kc-rules-modal-list .kc-rules-fc-row:last-child { border-bottom: none; }
.kc-rules-modal-list .kc-rules-fc-badge {
  min-width: 44px;
  height: 28px;
  font-size: 14px;
  border-radius: 6px;
}
.kc-rules-modal-list .kc-rules-fc-name {
  font-size: 16px;
}
.kc-rules-modal-list .kc-rules-fc-desc {
  font-size: 14px;
}
.kc-rules-modal-list .kc-rules-fc-row-active {
  padding: 10px 8px;
  margin: 0 -8px;
}
.kc-rules-modal-tapclose {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #9e80b0;
  text-align: center;
  padding: 12px 0 16px;
  border-top: 2px solid #f3e5f5;
}
.kc-sheet-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-sheet-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.2s;
}
.kc-sheet-rule-active {
  background: rgba(206,147,216,0.15);
  border: 1px solid rgba(206,147,216,0.25);
}
.kc-sheet-card {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 12px;
  color: #ce93d8;
  background: rgba(206,147,216,0.1);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(206,147,216,0.2);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.kc-sheet-rule-active .kc-sheet-card {
  color: #fff;
  background: rgba(206,147,216,0.3);
  border-color: #ce93d8;
}
.kc-sheet-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #e1bee7;
  min-width: 80px;
}
.kc-sheet-rule-active .kc-sheet-name { color: #fff; }
.kc-sheet-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #8a6fa0;
  flex: 1;
}
.kc-sheet-rule-active .kc-sheet-desc { color: #c9a0e0; }

/* --- Instructions overlay --- */
.kc-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10,2,20,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: kcFadeIn 0.3s ease;
}
.kc-overlay-hiding {
  animation: kcFadeOut 0.3s ease forwards;
}
@keyframes kcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes kcFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.kc-instructions-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 36px 28px;
  max-width: 820px;
  width: 94%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(206,147,216,0.2);
  animation: kcSlideUp 0.4s ease;
}
.kc-instr-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.kc-instr-left {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.kc-instr-right {
  flex: 0 0 340px;
  border-left: 2px solid #f3e5f5;
  padding-left: 28px;
}
.kc-instr-rules-title {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  color: #4a148c;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  text-align: center;
}
.kc-instr-rules-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kc-instr-rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: #3a2a50;
  border-bottom: 1px solid #f8f0fc;
}
.kc-instr-rule-row:last-child {
  border-bottom: none;
}
.kc-instr-rule-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(135deg, #f3e5f5, #ede0f5);
  color: #6a1b9a;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  padding: 0 6px;
}
.kc-instr-rule-name {
  font-weight: 700;
  color: #4a148c;
  white-space: nowrap;
}
.kc-instr-rule-desc {
  color: #7a5f90;
  font-size: 11px;
}
.kc-instr-remember {
  font-family: 'Bangers', cursive;
  font-size: 17px;
  color: #c62828;
  text-align: center;
  margin: 16px 0 0;
  letter-spacing: 0.03em;
}
.kc-instr-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.kc-instr-title {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  color: #4a148c;
  margin-bottom: 4px;
}
.kc-instr-tagline {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 14px;
  color: #9e80b0;
  margin-bottom: 20px;
}
.kc-instr-steps {
  text-align: left;
  margin-bottom: 16px;
}
.kc-instr-step {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #3a2a50;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-instr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9c27b0, #ce93d8);
  color: #fff;
  font-family: 'Bangers', cursive;
  font-size: 14px;
  flex-shrink: 0;
}
.kc-instr-memory {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #7a5f90;
  background: #f3e5f5;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 20px;
  line-height: 1.4;
}
.kc-instr-start {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 14px 40px;
  border-radius: 14px;
  border: 2.5px solid #ce93d8;
  background: linear-gradient(135deg, #9c27b0 0%, #ce93d8 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 5px 0 #6a1b9a, 0 6px 20px rgba(156,39,176,0.3);
  transition: transform 0.1s;
}
.kc-instr-start:hover { transform: scale(1.03); }
.kc-instr-start:active { transform: translateY(3px); box-shadow: 0 2px 0 #6a1b9a; }

/* --- Staggered animation for instructions items --- */
.kc-anim-item {
  opacity: 0;
  transform: translateY(14px);
  animation: kcAnimIn 0.6s ease forwards;
}
@keyframes kcAnimIn {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Deal button (reused for restart) --- */
.kc-deal-btn {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 0.04em;
  padding: 14px 40px;
  border-radius: 14px;
  border: 2.5px solid #e1bee7;
  background: linear-gradient(135deg, #9c27b0 0%, #ce93d8 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 5px 0 #6a1b9a, 0 6px 20px rgba(156,39,176,0.3);
  transition: transform 0.1s;
  position: relative;
  z-index: 1;
}
.kc-deal-btn:hover { transform: scale(1.03); }
.kc-deal-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #6a1b9a; }

/* --- Game over --- */
.kc-deck-area-ended {
  justify-content: center;
  flex: 1;
}
.kc-game-over {
  text-align: center;
}
.kc-game-over-text {
  font-family: 'Bangers', cursive;
  font-size: 28px;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.kc-restart-btn {
  font-size: 18px !important;
  padding: 10px 28px !important;
}

/* --- Animations --- */
.kc-flip-in {
  animation: kcFlipIn 0.35s ease;
}
@keyframes kcFlipIn {
  0% { transform: rotateY(90deg) scale(0.9); opacity: 0; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
@keyframes kcSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kcPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .kc-rules-sheet { width: 100%; }
  .kc-card-lg, .kc-empty-slot { width: 180px; height: 260px; }
  .kc-card-back { width: 180px; height: 260px; }
  .kc-card-md { width: 50px; height: 70px; }
  .kc-table { gap: 10px; flex-wrap: wrap; }
  .kc-discard-card { display: none; }
  .kc-pips { top: 36px; bottom: 36px; left: 22px; right: 22px; }
  .kc-rules-flipcard { width: 130px; height: 188px; }
  .kc-instr-layout { flex-direction: column; gap: 20px; }
  .kc-instr-right { flex: none; border-left: none; padding-left: 0; border-top: 2px solid #f3e5f5; padding-top: 16px; }
  .kc-instructions-card { padding: 24px 20px 22px; }
}


/* ============================================================
   PUZZLE RACE
   ============================================================ */

/* --- Grid paper background --- */
.game-screen-puzzlerace {
  background: #f0f4f8;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.game-screen-puzzlerace::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(100,140,180,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,140,180,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* --- SVG Doodles container --- */
.pr-doodles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.pr-doodle {
  position: absolute;
  opacity: 0.10;
}
.pr-doodle-1 { width: 70px; top: 6%;  left: 4%;  transform: rotate(-15deg); }
.pr-doodle-2 { width: 50px; top: 12%; right: 6%; transform: rotate(10deg); }
.pr-doodle-3 { width: 65px; top: 35%; left: 2%;  transform: rotate(5deg); }
.pr-doodle-4 { width: 45px; top: 55%; right: 3%; transform: rotate(-8deg); }
.pr-doodle-5 { width: 55px; bottom: 20%; left: 5%; transform: rotate(12deg); }
.pr-doodle-6 { width: 40px; top: 8%;  left: 50%; transform: rotate(-20deg); }
.pr-doodle-7 { width: 42px; bottom: 8%; right: 8%; transform: rotate(6deg); }
.pr-doodle-8 { width: 60px; bottom: 35%; left: 45%; transform: rotate(-10deg); }

/* Back nav */
.pr-back-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 12px 20px;
  background: transparent;
  border-bottom: none;
}
.pr-back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5a7a8a;
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.2s;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}
.pr-back-nav a:hover { color: #1565C0; }
.pr-back-nav svg { width: 18px; height: 18px; }

/* --- Instruction item animation --- */
.pr-anim-item {
  opacity: 0;
  transform: translateY(14px);
  animation: prAnimIn 0.4s ease forwards;
}
@keyframes prAnimIn {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Start screen --- */
.pr-start-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 20px 24px;
  position: relative;
  z-index: 1;
}
.pr-start-card {
  background: #fff;
  border-radius: 20px;
  border: 2.5px solid #2a5080;
  box-shadow: 0 8px 32px rgba(21,101,192,0.12);
  padding: 32px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.pr-start-emoji { font-size: 44px; margin-bottom: 6px; }
.pr-start-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 36px;
  color: #1a3a5c;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.pr-start-tagline {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: #7a9bb5;
  margin-bottom: 22px;
}
.pr-start-howto {
  text-align: left;
  background: #f8fafc;
  border: 2px dashed #c8dce8;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.pr-start-howto-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  color: #1565C0;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.pr-start-step {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #4a6a7a;
  line-height: 1.6;
  margin-bottom: 5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pr-start-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1565C0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pr-start-info {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #90a4ae;
  margin-bottom: 16px;
}
.pr-start-btn {
  background: #1565C0;
  color: #fff;
  border: none;
  padding: 14px 36px;
  border-radius: 12px;
  font-family: 'Permanent Marker', cursive;
  font-size: 20px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 4px 12px rgba(21,101,192,0.3);
}
.pr-start-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21,101,192,0.4); }

/* --- Score row (inline, above the card) --- */
.pr-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 640px;
}
.pr-score-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #d0dce6;
  border-radius: 24px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pr-score-chip-p1 { border-color: #D4A373; }
.pr-score-chip-p2 { border-color: #7EB8DA; }
.pr-score-chip-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pr-score-chip-p1 .pr-score-chip-label { color: #D4A373; }
.pr-score-chip-p2 .pr-score-chip-label { color: #7EB8DA; }
.pr-score-chip-num {
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: 800;
}
.pr-score-chip-p1 .pr-score-chip-num { color: #D4A373; }
.pr-score-chip-p2 .pr-score-chip-num { color: #7EB8DA; }
.pr-score-chip-progress {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #90a4ae;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 4px;
}

/* --- Puzzle card stage (centered single card) --- */
.pr-card-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 56px 20px 40px;
  position: relative;
  z-index: 1;
}

/* Individual puzzle card — fixed dimensions */
.pr-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 2.5px solid #2a5080;
  box-shadow: 0 4px 20px rgba(21,101,192,0.1);
  max-width: 640px;
  width: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

/* Card enter animation */
.pr-card-enter {
  animation: prCardEnter 0.35s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes prCardEnter {
  from { opacity: 0; transform: translateX(60px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Card type badge header */
.pr-card-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}
.pr-card-type-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
}
.pr-card-type-num {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #90a4ae;
  font-weight: 700;
}

/* Card content — grows to fill space for fixed card size */
.pr-card-content {
  padding: 32px 28px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-card-question {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  line-height: 1.7;
  margin: 0;
  color: #1a2a3a;
  text-align: center;
  width: 100%;
}

/* Rebus container — darker, thicker outlines */
.pr-rebus-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 24px;
  width: 100%;
}
.pr-rebus-container div[style*="border"] {
  border-width: 4px !important;
}
.pr-rebus-container span[style*="color:#1565C0"] {
  color: #0d3b66 !important;
}
.pr-rebus-container div[style*="background:#1565C0"] {
  background: #0d3b66 !important;
}
.pr-rebus-container div[style*="height:3px"] {
  height: 4px !important;
  background: #0d3b66 !important;
}

/* Card bottom section */
.pr-card-bottom {
  padding: 0 28px 28px;
}

/* Hint box */
.pr-hint-box {
  padding: 12px 16px;
  background: #fff8e1;
  border-radius: 8px;
  margin-bottom: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #F57F17;
  font-style: italic;
  border: 1.5px solid #ffe082;
}

/* Answer box */
.pr-answer-box {
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.pr-answer-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #90a4ae;
  margin-bottom: 4px;
  font-weight: 700;
}
.pr-answer-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* Correct message */
.pr-correct-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 10px;
  padding: 8px 0;
  letter-spacing: 0.3px;
}

/* Next puzzle button (shown after scoring) */
.pr-btn-next {
  display: block;
  width: 100%;
  background: #1565C0;
  color: #fff;
  border: none;
  padding: 16px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 4px 12px rgba(21,101,192,0.25);
}
.pr-btn-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(21,101,192,0.35);
}

/* Button rows */
.pr-btn-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.pr-btn-p1, .pr-btn-p2 {
  flex: 1;
  border: none;
  padding: 16px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pr-btn-p1 { background: #D4A373; color: #fff; }
.pr-btn-p2 { background: #7EB8DA; color: #fff; }
.pr-btn-p1:hover { transform: translateY(-2px); box-shadow: 0 4px 12px #D4A37355; }
.pr-btn-p2:hover { transform: translateY(-2px); box-shadow: 0 4px 12px #7EB8DA55; }

.pr-btn-row-secondary {
  display: flex;
  gap: 8px;
}
.pr-btn-hint, .pr-btn-reveal, .pr-btn-skip {
  flex: 1;
  background: transparent;
  border: 2px solid #d0dce6;
  color: #6a8a9a;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.pr-btn-hint:hover, .pr-btn-reveal:hover { border-color: #1565C0; color: #1565C0; }
.pr-btn-skip:hover { border-color: #999; color: #999; }

/* Skip to results button */
.pr-skip-results {
  display: block;
  margin-top: 18px;
  background: transparent;
  border: 2px solid #c8dce8;
  color: #90a4ae;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.pr-skip-results:hover { border-color: #1565C0; color: #1565C0; }

/* --- Game over --- */
.pr-gameover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 60px 20px 40px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.pr-gameover-card {
  background: #fff;
  border-radius: 20px;
  border: 2.5px solid #2a5080;
  box-shadow: 0 8px 32px rgba(21,101,192,0.12);
  padding: 44px 48px;
  max-width: 540px;
  width: 100%;
}
.pr-gameover-flag { font-size: 56px; margin-bottom: 12px; }
.pr-gameover-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 42px;
  color: #1a3a5c;
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.pr-gameover-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #90a4ae;
  margin-bottom: 28px;
}
.pr-gameover-scores {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 22px;
  align-items: center;
}
.pr-gameover-num {
  font-family: 'Courier New', monospace;
  font-size: 56px;
  font-weight: 800;
}
.pr-gameover-plabel {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #90a4ae;
  letter-spacing: 1px;
  font-weight: 600;
}
.pr-gameover-dash {
  font-size: 32px;
  color: #c8dce8;
}
.pr-gameover-winner {
  font-family: 'Permanent Marker', cursive;
  font-size: 26px;
  margin-bottom: 8px;
}
.pr-gameover-skipped {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #90a4ae;
  margin-bottom: 16px;
}
.pr-gameover-btn {
  margin-top: 24px;
  padding: 16px 48px;
  font-size: 22px;
}

/* Responsive */
@media (max-width: 800px) {
  .pr-start-title { font-size: 28px; }
  .pr-start-card { padding: 24px 18px; }
  .pr-card { min-height: 360px; }
  .pr-card-content { padding: 24px 20px; }
  .pr-card-bottom { padding: 0 20px 20px; }
  .pr-score-row { gap: 10px; }
  .pr-score-chip { padding: 5px 12px; }
  .pr-score-chip-num { font-size: 18px; }
  .pr-gameover-card { padding: 28px 22px; }
  .pr-gameover-scores { gap: 20px; }
  .pr-gameover-num { font-size: 36px; }
}

/* ============================================================
   ACHIEVEMENT UNLOCKED
   ============================================================ */

/* --- Game Screen --- */
.game-screen-achievement {
  background: linear-gradient(180deg, #4a1520 0%, #5a1a28 20%, #6a2030 50%, #5a1a28 80%, #3a0e16 100%);
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 130px 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Instructions overlay --- */
.au-instr-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #4a1520 0%, #5a1a28 20%, #6a2030 50%, #5a1a28 80%, #3a0e16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 18px;
}
.au-instr-card {
  background: linear-gradient(160deg, #faf6ef 0%, #f0e8d4 100%);
  border: 2px solid #d4a844;
  border-radius: 20px;
  padding: 40px 44px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
.au-instr-emoji {
  font-size: 42px;
  margin-bottom: 12px;
}
.au-instr-title {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.2;
}
.au-instr-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4a844, transparent);
  margin: 0 auto 20px;
}
.au-instr-list {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.au-instr-list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
  padding: 6px 0 6px 20px;
  position: relative;
}
.au-instr-list li::before {
  content: '\2022';
  position: absolute;
  left: 4px;
  color: #d4a844;
  font-weight: 700;
}
.au-instr-play {
  background: linear-gradient(135deg, #f0d060, #d4a844);
  color: #2a1a00;
  border: none;
  border-radius: 12px;
  padding: 14px 36px;
  font-family: 'Caveat', cursive;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}
.au-instr-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.au-anim {
  opacity: 0;
  transform: translateY(12px);
  animation: auFadeUp 0.4s ease forwards;
}
@keyframes auFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Three-column layout --- */
.au-layout {
  display: flex;
  width: 100%;
  max-width: 1100px;
  height: 100%;
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, #faf6ef 0%, #f0e8d4 100%);
  border-radius: 14px;
  border: 2px solid #d4a844;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
.au-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.au-main-inner {
  padding: 30px 16px 16px;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.au-main-top {
  flex-shrink: 0;
}
.au-main-recent {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.au-sidebar {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.au-sidebar-left {
  border-right: 1px solid #d4a84430;
}
.au-sidebar-right {
  border-left: 1px solid #d4a84430;
}
.au-sidebar-inner {
  padding: 14px 12px;
  width: 100%;
}

/* --- Sidebar --- */
.au-sidebar-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  color: #1a1a1a;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.au-inspo-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d4a84425;
}
.au-inspo-item:last-child {
  border-bottom: none;
}
.au-inspo-border {
  border-bottom: 1px solid #d4a84425;
}
.au-inspo-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.au-inspo-emoji {
  font-size: 13px;
}
.au-inspo-cat {
  font-family: 'DM Serif Display', serif;
  font-size: 15px;
  font-weight: 400;
  color: #1a1a1a;
}
.au-inspo-prompt {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 3px;
}

/* --- Header --- */
.au-header {
  text-align: center;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #d4a84420;
  margin-bottom: 16px;
  position: relative;
}
.au-back-btn {
  position: fixed;
  top: 24px;
  left: 26px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s;
  z-index: 50;
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.au-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.au-title {
  font-family: 'DM Serif Display', serif;
  font-size: 30px;
  font-weight: 400;
  color: #1a1a1a;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  letter-spacing: 1px;
  margin: 0 0 6px;
  line-height: 1.2;
  text-shadow: none;
}
.au-scoreboard {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
}
.au-score-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d4a84440;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.au-score-p1 {}
.au-score-p2 {}
.au-score-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1a1a1a;
}
.au-score-p1 .au-score-label, .au-score-p1 .au-score-num { color: #1a1a1a; }
.au-score-p2 .au-score-label, .au-score-p2 .au-score-num { color: #1a1a1a; }
.au-score-num {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
}
.au-score-icon {
  font-size: 12px;
  opacity: 0.7;
}
.au-score-vs {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
}
.au-round {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #1a1a1a;
  margin-top: 4px;
}

/* --- How to play --- */
.au-howto {
  background: #1a1a1a;
  border: 1px solid #d4a84430;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #e8dcc8;
  line-height: 1.6;
}
.au-howto strong {
  color: #d4a844;
}

/* --- Double drinks banner --- */
.au-double-banner {
  background: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  border: 1px solid #d4a84440;
}
.au-double-title {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: #1a1a1a;
}
.au-double-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #1a1a1a;
  margin-top: 2px;
}

/* --- Turn card (input) --- */
.au-turn-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d4a84430;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.au-turn-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin-bottom: 4px;
  font-weight: 700;
}
.au-turn-player {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 2px;
  color: #1a1a1a;
}
.au-turn-prompt {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 14px;
}
.au-input-row {
  display: flex;
  gap: 8px;
}
.au-input {
  flex: 1;
  background: #faf6ef;
  border: 1px solid #d4a84440;
  border-radius: 8px;
  padding: 11px 14px;
  color: #1a1a1a;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.au-input:focus {
  border-color: #d4a844;
  box-shadow: 0 0 0 3px #d4a84425;
}
.au-input::placeholder {
  color: #888;
}
.au-btn-submit {
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  color: #2a1a00;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, filter 0.1s;
  background: linear-gradient(135deg, #f0d060, #d4a844) !important;
}
.au-btn-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.au-btn-end {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid #d4a84440;
  border-radius: 8px;
  padding: 8px;
  color: #1a1a1a;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.au-btn-end:hover {
  background: #f5edd5;
}

/* --- Pending card --- */
.au-pending-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d4a84430;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.au-pending-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: 700;
}
.au-pending-quote {
  background: #faf6ef;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-left: 4px solid;
}
.au-pending-text {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: #1a1a1a;
  line-height: 1.4;
}
.au-ruling-player {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.au-ruling-prompt {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.au-ruling-buttons {
  display: flex;
  gap: 10px;
}
.au-btn-accept, .au-btn-reject {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s, filter 0.1s;
}
.au-btn-accept:hover, .au-btn-reject:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.au-btn-accept {
  background: #eaf7f0;
  border: 1.5px solid #7EDAB880;
}
.au-btn-reject {
  background: #fcf0f0;
  border: 1.5px solid #DA7E7E80;
}
.au-btn-emoji {
  font-size: 22px;
  margin-bottom: 2px;
}
.au-btn-accept .au-btn-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2a7a5a;
}
.au-btn-reject .au-btn-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #b04040;
}
.au-btn-accept .au-btn-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #5a9a7a;
  margin-top: 2px;
}
.au-btn-reject .au-btn-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #c06060;
  margin-top: 2px;
}

/* --- Recent log --- */
.au-recent {
  margin-top: 10px;
}
.au-recent-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin-bottom: 8px;
  font-weight: 700;
}
.au-recent-entry {
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d4a84420;
  border-radius: 8px;
  margin-bottom: 5px;
  border-left: 3px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.au-log-accepted {
  border-left-color: #7EDAB8;
}
.au-log-rejected {
  border-left-color: #DA7E7E;
}
.au-recent-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.au-recent-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #1a1a1a;
}

/* --- Game Over --- */
.au-gameover-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #4a1520 0%, #5a1a28 20%, #6a2030 50%, #5a1a28 80%, #3a0e16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  overflow-y: auto;
}
.au-gameover-card {
  text-align: center;
  max-width: 520px;
  width: 100%;
  background: linear-gradient(160deg, #faf6ef 0%, #f0e8d4 100%);
  border: 2px solid #d4a844;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}
.au-gameover-emoji {
  font-size: 48px;
  margin-bottom: 12px;
}
.au-gameover-title {
  font-family: 'DM Serif Display', serif;
  font-size: 34px;
  font-weight: 400;
  color: #1a1a1a;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.au-gameover-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  font-style: italic;
  margin: 0 0 24px;
}
.au-gameover-scores {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.au-gameover-score {
  text-align: center;
}
.au-gameover-num {
  font-family: 'DM Serif Display', serif;
  font-size: 44px;
  font-weight: 400;
}
.au-p1-color { color: #1a1a1a; }
.au-p2-color { color: #1a1a1a; }
.au-gameover-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #1a1a1a;
  letter-spacing: 1px;
  font-weight: 700;
}
.au-gameover-dash {
  font-size: 20px;
  color: #1a1a1a;
}
.au-gameover-winner {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 8px;
}
.au-gameover-punishment {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0 0 12px;
}
.au-gameover-quote {
  background: linear-gradient(160deg, #faf6ef 0%, #f0e8d4 100%);
  border: 1px solid #d4a84430;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  color: #1a1a1a;
  font-style: italic;
}
.au-gameover-tie {
  font-family: 'DM Serif Display', serif;
  font-size: 19px;
  color: #1a1a1a;
  margin-bottom: 20px;
}
.au-gameover-log {
  margin-top: 20px;
  text-align: left;
}
.au-gameover-log-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin-bottom: 10px;
  font-weight: 700;
}
.au-log-entry {
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 5px;
  border-left: 3px solid;
}
.au-gameover-log .au-log-accepted {
  background: #f2faf6;
}
.au-gameover-log .au-log-rejected {
  background: #fdf5f5;
}
.au-log-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.au-log-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #1a1a1a;
}
.au-gameover-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.au-btn-play-again {
  background: linear-gradient(135deg, #f0d060, #d4a844);
  color: #111;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.1s, filter 0.1s;
}
.au-btn-play-again:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.au-btn-back {
  background: transparent;
  border: 1px solid #d4a84440;
  border-radius: 10px;
  padding: 12px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s;
}
.au-btn-back:hover {
  background: rgba(212, 168, 68, 0.08);
}

/* --- Drinks Required Sticker (wax seal) --- */
.card-sticker-drinks {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 62px;
  height: 62px;
  background: radial-gradient(circle at 40% 38%, #e6a832 0%, #c88a2e 55%, #a06b1e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  transform: rotate(-8deg);
  box-shadow:
    0 2px 8px rgba(168, 106, 20, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(120, 70, 10, 0.3);
  z-index: 5;
  pointer-events: none;
}
.card-sticker-drinks::before {
  content: '';
  position: absolute;
  inset: -5px;
  background: radial-gradient(circle at 40% 38%, #d49a28 0%, #b07a22 100%);
  border-radius: 50%;
  z-index: -1;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C56 8 64 5 70 10 C74 17 82 16 85 24 C86 32 93 36 92 44 C90 52 96 58 92 65 C87 71 90 79 84 84 C78 87 77 95 70 95 C63 94 58 100 50 100 C42 100 37 94 30 95 C23 95 22 87 16 84 C10 79 13 71 8 65 C4 58 10 52 8 44 C7 36 14 32 15 24 C18 16 26 17 30 10 C36 5 44 8 50 0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C56 8 64 5 70 10 C74 17 82 16 85 24 C86 32 93 36 92 44 C90 52 96 58 92 65 C87 71 90 79 84 84 C78 87 77 95 70 95 C63 94 58 100 50 100 C42 100 37 94 30 95 C23 95 22 87 16 84 C10 79 13 71 8 65 C4 58 10 52 8 44 C7 36 14 32 15 24 C18 16 26 17 30 10 C36 5 44 8 50 0Z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* --- Tagline for Achievement Unlocked card --- */
.hover-tagline-au {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: 22px !important;
  color: #d4a844 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .au-layout {
    flex-direction: column;
    height: auto;
  }
  .game-screen-achievement {
    height: auto;
    overflow: auto;
    padding: 16px;
    align-items: flex-start;
  }
  .au-sidebar {
    width: 100%;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #d4a84430;
    max-height: 300px;
  }
  .au-sidebar-left {
    border-right: none;
    order: 2;
  }
  .au-sidebar-right {
    border-left: none;
    order: 3;
  }
  .au-main {
    overflow-y: visible;
    order: 1;
  }
  .au-main-inner {
    padding: 0 16px 24px;
  }
  .au-title { font-size: 28px; }
  .au-turn-player { font-size: 24px; }
  .au-score-num { font-size: 22px; }
  .au-inspo-item { margin-bottom: 8px; padding-bottom: 8px; }
  .au-instr-card { padding: 28px 24px; }
  .au-instr-title { font-size: 32px; }
  .au-instr-play { font-size: 20px; padding: 12px 28px; }
}