body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(ellipse at center, #060d1f 0%, #050810 50%, #020306 100%);
  color: #fff5f7;
  text-align: center;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 380 520' xmlns='http://www.w3.org/2000/svg'> <g fill='none' stroke-linecap='round' stroke-linejoin='round'> <path d='M5,520 C-5,505 5,495 15,482 C25,470 35,460 28,445 C22,432 5,425 2,410 C-2,395 12,385 22,372 C32,360 38,348 30,333 C22,318 5,312 3,297 C1,282 15,272 25,258 C35,245 40,232 32,217 C24,203 8,197 6,182 C4,167 18,157 28,143 C38,130 42,117 34,102 C26,88 10,82 8,67 C6,53 20,42 18,25 C16,12 8,4 5,0' stroke='rgba(201,169,122,0.45)' stroke-width='2.4'/> <path d='M38,520 C48,505 38,495 28,482 C18,470 8,460 15,445 C21,432 38,425 40,410 C43,395 30,385 20,372 C10,360 4,348 12,333 C20,318 37,312 38,297 C40,282 26,272 16,258 C6,245 2,232 10,217 C18,203 34,197 36,182 C38,167 24,157 14,143 C4,130 0,117 8,102 C16,88 32,82 34,67 C36,53 22,42 24,25 C26,12 34,4 38,0' stroke='rgba(200,205,214,0.45)' stroke-width='2.4'/> <path d='M15,482 C22,478 28,482 28,482' stroke='rgba(201,169,122,0.2)' stroke-width='1'/> <path d='M22,445 C22,445 22,445 15,445' stroke='rgba(200,205,214,0.2)' stroke-width='1'/> <path d='M2,410 C12,407 22,410 22,410' stroke='rgba(201,169,122,0.18)' stroke-width='1'/> <path d='M22,372 C22,372 12,372 3,372' stroke='rgba(200,205,214,0.18)' stroke-width='1'/> <path d='M3,297 C12,294 22,297 22,297' stroke='rgba(201,169,122,0.18)' stroke-width='1'/> <path d='M22,258 C22,258 12,258 3,258' stroke='rgba(200,205,214,0.18)' stroke-width='1'/> <path d='M6,182 C15,179 25,182 25,182' stroke='rgba(201,169,122,0.16)' stroke-width='1'/> <path d='M25,143 C25,143 15,143 6,143' stroke='rgba(200,205,214,0.16)' stroke-width='1'/> <path d='M8,67 C18,64 28,67 28,67' stroke='rgba(201,169,122,0.16)' stroke-width='1'/> <path d='M28,25 C28,25 18,25 8,25' stroke='rgba(200,205,214,0.16)' stroke-width='1'/> <path d='M5,482 C-5,474 -8,477 -4,484' stroke='rgba(201,169,122,0.28)' stroke-width='1'/> <path d='M2,410 C-8,402 -11,405 -7,412' stroke='rgba(201,169,122,0.25)' stroke-width='1'/> <path d='M3,297 C-7,289 -10,292 -6,299' stroke='rgba(201,169,122,0.23)' stroke-width='0.9'/> <path d='M6,182 C-4,174 -7,177 -3,184' stroke='rgba(201,169,122,0.21)' stroke-width='0.9'/> <path d='M8,67 C-2,59 -5,62 -1,69' stroke='rgba(201,169,122,0.19)' stroke-width='0.8'/> <path d='M38,482 C48,474 51,477 47,484' stroke='rgba(200,205,214,0.28)' stroke-width='1'/> <path d='M40,410 C50,402 53,405 49,412' stroke='rgba(200,205,214,0.25)' stroke-width='1'/> <path d='M38,297 C48,289 51,292 47,299' stroke='rgba(200,205,214,0.23)' stroke-width='0.9'/> <path d='M36,182 C46,174 49,177 45,184' stroke='rgba(200,205,214,0.21)' stroke-width='0.9'/> <path d='M34,67 C44,59 47,62 43,69' stroke='rgba(200,205,214,0.19)' stroke-width='0.8'/> <path d='M22,333 C45,318 62,328 60,348 C58,366 38,370 28,358' stroke='rgba(201,169,122,0.16)' stroke-width='1.1'/> <path d='M22,217 C45,202 62,212 60,232 C58,250 38,254 28,242' stroke='rgba(201,169,122,0.14)' stroke-width='1'/> <path d='M22,102 C45,88 62,98 60,118 C58,136 38,140 28,128' stroke='rgba(201,169,122,0.13)' stroke-width='1'/> <path d='M20,333 C-2,318 -18,328 -18,348' stroke='rgba(200,205,214,0.15)' stroke-width='1'/> <path d='M20,217 C-2,202 -18,212 -18,232' stroke='rgba(200,205,214,0.13)' stroke-width='1'/> <path d='M20,102 C-2,88 -18,98 -18,118' stroke='rgba(200,205,214,0.12)' stroke-width='1'/> <path d='M375,520 C385,505 375,495 365,482 C355,470 345,460 352,445 C358,432 375,425 378,410 C382,395 368,385 358,372 C348,360 342,348 350,333 C358,318 375,312 377,297 C379,282 365,272 355,258 C345,245 340,232 348,217 C356,203 372,197 374,182 C376,167 362,157 352,143 C342,130 338,117 346,102 C354,88 370,82 372,67 C374,53 360,42 362,25 C364,12 372,4 375,0' stroke='rgba(201,169,122,0.45)' stroke-width='2.4'/> <path d='M342,520 C332,505 342,495 352,482 C362,470 372,460 365,445 C359,432 342,425 340,410 C337,395 350,385 360,372 C370,360 376,348 368,333 C360,318 343,312 342,297 C340,282 354,272 364,258 C374,245 378,232 370,217 C362,203 346,197 344,182 C342,167 356,157 366,143 C376,130 380,117 372,102 C364,88 348,82 346,67 C344,53 358,42 356,25 C354,12 346,4 342,0' stroke='rgba(200,205,214,0.45)' stroke-width='2.4'/> <path d='M365,482 C358,478 352,482 352,482' stroke='rgba(201,169,122,0.2)' stroke-width='1'/> <path d='M358,445 C358,445 358,445 365,445' stroke='rgba(200,205,214,0.2)' stroke-width='1'/> <path d='M378,410 C368,407 358,410 358,410' stroke='rgba(201,169,122,0.18)' stroke-width='1'/> <path d='M358,372 C358,372 368,372 377,372' stroke='rgba(200,205,214,0.18)' stroke-width='1'/> <path d='M377,297 C368,294 358,297 358,297' stroke='rgba(201,169,122,0.18)' stroke-width='1'/> <path d='M358,258 C358,258 368,258 377,258' stroke='rgba(200,205,214,0.18)' stroke-width='1'/> <path d='M374,182 C365,179 355,182 355,182' stroke='rgba(201,169,122,0.16)' stroke-width='1'/> <path d='M355,143 C355,143 365,143 374,143' stroke='rgba(200,205,214,0.16)' stroke-width='1'/> <path d='M372,67 C362,64 352,67 352,67' stroke='rgba(201,169,122,0.16)' stroke-width='1'/> <path d='M352,25 C352,25 362,25 372,25' stroke='rgba(200,205,214,0.16)' stroke-width='1'/> <path d='M375,482 C385,474 388,477 384,484' stroke='rgba(201,169,122,0.28)' stroke-width='1'/> <path d='M378,410 C388,402 391,405 387,412' stroke='rgba(201,169,122,0.25)' stroke-width='1'/> <path d='M377,297 C387,289 390,292 386,299' stroke='rgba(201,169,122,0.23)' stroke-width='0.9'/> <path d='M374,182 C384,174 387,177 383,184' stroke='rgba(201,169,122,0.21)' stroke-width='0.9'/> <path d='M372,67 C382,59 385,62 381,69' stroke='rgba(201,169,122,0.19)' stroke-width='0.8'/> <path d='M342,482 C332,474 329,477 333,484' stroke='rgba(200,205,214,0.28)' stroke-width='1'/> <path d='M340,410 C330,402 327,405 331,412' stroke='rgba(200,205,214,0.25)' stroke-width='1'/> <path d='M342,297 C332,289 329,292 333,299' stroke='rgba(200,205,214,0.23)' stroke-width='0.9'/> <path d='M344,182 C334,174 331,177 335,184' stroke='rgba(200,205,214,0.21)' stroke-width='0.9'/> <path d='M346,67 C336,59 333,62 337,69' stroke='rgba(200,205,214,0.19)' stroke-width='0.8'/> <path d='M358,333 C335,318 318,328 320,348 C322,366 342,370 352,358' stroke='rgba(201,169,122,0.16)' stroke-width='1.1'/> <path d='M358,217 C335,202 318,212 320,232 C322,250 342,254 352,242' stroke='rgba(201,169,122,0.14)' stroke-width='1'/> <path d='M358,102 C335,88 318,98 320,118 C322,136 342,140 352,128' stroke='rgba(201,169,122,0.13)' stroke-width='1'/> <path d='M360,333 C382,318 398,328 398,348' stroke='rgba(200,205,214,0.15)' stroke-width='1'/> <path d='M360,217 C382,202 398,212 398,232' stroke='rgba(200,205,214,0.13)' stroke-width='1'/> <path d='M360,102 C382,88 398,98 398,118' stroke='rgba(200,205,214,0.12)' stroke-width='1'/> <path d='M58,45 C58,31 67,26 70,38 C73,50 65,57 58,45Z' fill='rgba(201,169,122,0.2)' transform='rotate(-28 64 41)'/> <path d='M75,118 C75,104 84,99 87,111 C90,123 82,130 75,118Z' fill='rgba(201,169,122,0.17)' transform='rotate(42 81 114)'/> <path d='M52,195 C52,181 61,176 64,188 C67,200 59,207 52,195Z' fill='rgba(201,169,122,0.16)' transform='rotate(-52 58 191)'/> <path d='M82,268 C82,254 91,249 94,261 C97,273 89,280 82,268Z' fill='rgba(201,169,122,0.18)' transform='rotate(22 88 264)'/> <path d='M62,345 C62,331 71,326 74,338 C77,350 69,357 62,345Z' fill='rgba(201,169,122,0.15)' transform='rotate(-38 68 341)'/> <path d='M88,422 C88,408 97,403 100,415 C103,427 95,434 88,422Z' fill='rgba(201,169,122,0.14)' transform='rotate(55 94 418)'/> <path d='M108,72 C108,58 117,53 120,65 C123,77 115,84 108,72Z' fill='rgba(200,205,214,0.18)' transform='rotate(32 114 68)'/> <path d='M128,148 C128,134 137,129 140,141 C143,153 135,160 128,148Z' fill='rgba(200,205,214,0.16)' transform='rotate(-42 134 144)'/> <path d='M95,225 C95,211 104,206 107,218 C110,230 102,237 95,225Z' fill='rgba(200,205,214,0.15)' transform='rotate(52 101 221)'/> <path d='M118,302 C118,288 127,283 130,295 C133,307 125,314 118,302Z' fill='rgba(200,205,214,0.17)' transform='rotate(-25 124 298)'/> <path d='M98,378 C98,364 107,359 110,371 C113,383 105,390 98,378Z' fill='rgba(200,205,214,0.15)' transform='rotate(40 104 374)'/> <path d='M125,455 C125,441 134,436 137,448 C140,460 132,467 125,455Z' fill='rgba(200,205,214,0.14)' transform='rotate(-55 131 451)'/> <path d='M155,38 C155,24 164,19 167,31 C170,43 162,50 155,38Z' fill='rgba(201,169,122,0.14)' transform='rotate(18 161 34)'/> <path d='M172,488 C172,474 181,469 184,481 C187,493 179,500 172,488Z' fill='rgba(201,169,122,0.13)' transform='rotate(-33 178 484)'/> <path d='M322,45 C322,31 331,26 334,38 C337,50 329,57 322,45Z' fill='rgba(201,169,122,0.2)' transform='rotate(28 328 41)'/> <path d='M305,118 C305,104 314,99 317,111 C320,123 312,130 305,118Z' fill='rgba(201,169,122,0.17)' transform='rotate(-42 311 114)'/> <path d='M328,195 C328,181 337,176 340,188 C343,200 335,207 328,195Z' fill='rgba(201,169,122,0.16)' transform='rotate(52 334 191)'/> <path d='M298,268 C298,254 307,249 310,261 C313,273 305,280 298,268Z' fill='rgba(201,169,122,0.18)' transform='rotate(-22 304 264)'/> <path d='M318,345 C318,331 327,326 330,338 C333,350 325,357 318,345Z' fill='rgba(201,169,122,0.15)' transform='rotate(38 324 341)'/> <path d='M292,422 C292,408 301,403 304,415 C307,427 299,434 292,422Z' fill='rgba(201,169,122,0.14)' transform='rotate(-55 298 418)'/> <path d='M272,72 C272,58 281,53 284,65 C287,77 279,84 272,72Z' fill='rgba(200,205,214,0.18)' transform='rotate(-32 278 68)'/> <path d='M252,148 C252,134 261,129 264,141 C267,153 259,160 252,148Z' fill='rgba(200,205,214,0.16)' transform='rotate(42 258 144)'/> <path d='M285,225 C285,211 294,206 297,218 C300,230 292,237 285,225Z' fill='rgba(200,205,214,0.15)' transform='rotate(-52 291 221)'/> <path d='M262,302 C262,288 271,283 274,295 C277,307 269,314 262,302Z' fill='rgba(200,205,214,0.17)' transform='rotate(25 268 298)'/> <path d='M282,378 C282,364 291,359 294,371 C297,383 289,390 282,378Z' fill='rgba(200,205,214,0.15)' transform='rotate(-40 288 374)'/> <path d='M255,455 C255,441 264,436 267,448 C270,460 262,467 255,455Z' fill='rgba(200,205,214,0.14)' transform='rotate(55 261 451)'/> <path d='M225,38 C225,24 234,19 237,31 C240,43 232,50 225,38Z' fill='rgba(201,169,122,0.14)' transform='rotate(-18 231 34)'/> <path d='M208,488 C208,474 217,469 220,481 C223,493 215,500 208,488Z' fill='rgba(201,169,122,0.13)' transform='rotate(33 214 484)'/> <path d='M187,32 C187,18 196,13 199,25 C202,37 194,44 187,32Z' fill='rgba(201,169,122,0.12)' transform='rotate(-20 193 28)'/> <path d='M198,32 C198,18 207,13 210,25 C213,37 205,44 198,32Z' fill='rgba(200,205,214,0.12)' transform='rotate(20 204 28)'/> <path d='M187,492 C187,478 196,473 199,485 C202,497 194,504 187,492Z' fill='rgba(201,169,122,0.11)' transform='rotate(25 193 488)'/> <path d='M198,492 C198,478 207,473 210,485 C213,497 205,504 198,492Z' fill='rgba(200,205,214,0.11)' transform='rotate(-25 204 488)'/> <path d='M190,260 C190,246 199,241 202,253 C205,265 197,272 190,260Z' fill='rgba(201,169,122,0.1)' transform='rotate(35 196 256)'/> <path d='M200,260 C200,246 209,241 212,253 C215,265 207,272 200,260Z' fill='rgba(200,205,214,0.1)' transform='rotate(-35 206 256)'/> </g> </svg>");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Top bar */
.topbar {
  background: rgba(20, 20, 24, 0.95);
  padding: 16px;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.menu-btn {
  font-size: 60px;
  cursor: pointer;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topbar-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  white-space: nowrap;
}

/* Side menu */
.menu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 260px;
  height: 100%;
  background: #171015;
  transition: 0.3s;
  padding-top: 65px;
  text-align: left;
  z-index: 10;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}

.menu a {
  display: block;
  padding: 20px 22px;
  color: #fff5f7;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 32px;
  line-height: 1.25;
}

.menu a:hover {
  background: #2a1722;
  color: #c9a97a;
}

/* Menu discovery cue — first-run only, cleared permanently once the
   user opens the menu (see toggleMenu in script.js). The button's base
   size now already reads as prominent, so first-run only adds the glow. */
.menu-btn.menu-discovery {
  display: inline-block;
  animation: menuDiscoveryGlow 3s ease-in-out infinite;
}
@keyframes menuDiscoveryGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(201,169,122,0.35)); }
  50%      { filter: drop-shadow(0 0 12px rgba(201,169,122,0.9)); }
}

/* Sections */
.section {
  display: none;
  padding: 24px;
}

.active {
  display: block;
}

/* Headings */
h1 {
  font-family: 'Playfair Display', serif;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 24px;
}

/* App name — the name itself is the hook, so it stands in wherever a
   subtitle/tagline would otherwise go (onboarding hero, feedback page). */
.brand-name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin: 0 0 6px;
}

/* ========================= */
/* HOME GAME SELECTION       */
/* ========================= */

#home {
  position: relative;
}

.home-ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  overflow: hidden;
  pointer-events: none;
}

.home-content {
  position: relative;
  z-index: 1;
}

.home-ember, .home-petal {
  position: absolute;
  will-change: transform, opacity;
}

.home-ember {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,122,0.55) 0%, rgba(201,169,122,0) 70%);
  animation: emberDrift 26s ease-in-out infinite;
}

.home-petal {
  width: 10px;
  height: 10px;
  border-radius: 50% 0 50% 50%;
  background: rgba(200,205,214,0.18);
  animation: petalDrift 34s ease-in-out infinite;
}

.home-ember.e1 { top: 12%; left: 12%; }
.home-ember.e2 { top: 30%; left: 82%; animation-delay: -8s; }
.home-ember.e3 { top: 55%; left: 22%; animation-delay: -16s; }
.home-petal.p1 { top: 8%; left: 70%; animation-delay: -4s; }
.home-petal.p2 { top: 42%; left: 8%; animation-delay: -20s; }
.home-petal.p3 { top: 60%; left: 88%; animation-delay: -12s; }

@keyframes emberDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(10px, -16px); opacity: 0.9; }
}

@keyframes petalDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.35; }
  50% { transform: translate(-12px, 14px) rotate(20deg); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .home-ember, .home-petal {
    animation: none !important;
  }
}

.home-hero {
  max-width: 480px;
  margin: 0 auto 20px;
  text-align: center;
}

.home-hero-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 42px;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 24px 0 10px;
}

.home-hero-sub {
  font-size: 14.5px;
  color: rgba(255,245,247,0.6);
  line-height: 1.6;
  margin: 0;
}

.home-hero-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #16110c;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(201,169,122,0.25);
  transition: transform 0.18s, box-shadow 0.18s;
}

.home-hero-cta:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(201,169,122,0.4);
}

.home-trust-strip {
  max-width: 480px;
  margin: 0 auto 26px;
  font-size: 12.5px;
  color: rgba(255,245,247,0.45);
  letter-spacing: 0.2px;
}

.home-current-game {
  max-width: 440px;
  margin: 0 auto 26px;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(201,169,122,0.25);
  background: linear-gradient(145deg, rgba(201,169,122,0.08), rgba(184,188,196,0.05));
  text-align: center;
}

.home-current-game.hidden { display: none; }

.home-current-game-label {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #c9a97a;
  margin-bottom: 10px;
}

.home-current-game-scores {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 14px;
}

.home-current-game-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.home-current-game-score-name {
  font-size: 12px;
  color: rgba(255,245,247,0.55);
}

.home-current-game-score-val {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  color: #fff5f7;
}

.home-current-game-btn {
  border: 1px solid rgba(201,169,122,0.35);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #c9a97a;
  background: rgba(201,169,122,0.12);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}

.home-current-game-btn:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(201,169,122,0.3);
}

.home-feedback-invite {
  max-width: 440px;
  margin: 28px auto 0;
  padding: 16px 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}

.home-feedback-invite-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: #c9a97a;
  margin: 0 0 6px;
}

.home-feedback-invite-text {
  font-size: 13px;
  color: rgba(255,245,247,0.55);
  line-height: 1.5;
  margin: 0;
}

.home-feedback-invite-text a {
  color: #c9a97a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-feedback-invite-text a:hover {
  color: #d8bd94;
}

.site-footer {
  max-width: 440px;
  margin: 22px auto 4px;
  padding-top: 18px;
  font-size: 12px;
  color: rgba(255,245,247,0.35);
}

.site-footer-brand {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  color: rgba(201,169,122,0.6);
}

.site-footer a {
  color: rgba(255,245,247,0.45);
  text-decoration: none;
}

.site-footer a:hover {
  color: #c9a97a;
}

.install-nudge {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(20,20,24,0.96);
  border: 1px solid rgba(201,169,122,0.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-width: 440px;
  margin: 0 auto;
}

.install-nudge.hidden { display: none; }

.install-nudge-text {
  flex: 1;
  font-size: 12.5px;
  color: rgba(255,245,247,0.85);
  line-height: 1.4;
  text-align: left;
}

.install-nudge-dismiss {
  border: none;
  background: transparent;
  color: rgba(255,245,247,0.5);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px;
}

.install-nudge-dismiss:hover { color: #fff5f7; }

.home-game-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 440px;
  margin: 0 auto;
}

.home-game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 26px 24px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.home-game-card:hover {
  border-color: rgba(201,169,122,0.35);
  transform: translateX(3px);
}
.home-game-card:active {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 28px rgba(201,169,122,0.18);
}

.home-game-card-featured {
  border-color: rgba(201,169,122,0.4);
  box-shadow: 0 0 0 1px rgba(201,169,122,0.15), 0 12px 30px rgba(201,169,122,0.12);
}

.home-game-chip {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #16110c;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
}

.home-game-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-game-icon {
  font-size: 56px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(201,169,122,0.25));
}

.home-game-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  color: #c9a97a;
}

.home-game-desc {
  font-size: 14.5px;
  color: rgba(255,245,247,0.55);
  line-height: 1.55;
}

h3 {
  font-family: 'Playfair Display', serif;
  color: #ffd1dc;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

/* Inputs & buttons */
button,
input {
  padding: 14px;
  margin: 8px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  color: #12070d;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(201, 169, 122, 0.25);
  transition: all 0.2s ease;
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: scale(0.97);
}

input {
  width: 80%;
  max-width: 360px;
  background: #24151d;
  color: white;
  border: 1px solid #4a2637;
}

input::placeholder {
  color: #c99aaa;
}

hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 24px 0;
}

/* Status message */
.status-message {
  margin-top: 10px;
  font-size: 14px;
  color: #c9a97a;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ========================= */
/* 🔥 CARD SYSTEM */
/* ========================= */

.game-card {
  perspective: 1000px;
  width: 85%;
  max-width: 360px;
  height: 220px;
  margin: 24px auto;
  position: relative;
  z-index: 1;
}

.hidden-card {
  display: none;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Flip effect */
.game-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Card faces */
.card-front,
.card-back {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  padding: 20px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Front style */
.card-front {
  background: linear-gradient(145deg, #1f2428, #2c3338, #15191c);
  border: 2px solid rgba(255, 122, 162, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Back style */
.card-back {
  background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
  transform: rotateY(180deg);
}

/* Card label */
.card-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 18px;
  font-weight: bold;
}

/* Card text */
.card-front p {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  color: #fff5f7;
}

/* Back text */
#answerReveal p {
  margin: 6px 0;
  font-size: 18px;
}

/* ========================= */
/* 🎭 TRUTH vs DARE STYLES */
/* ========================= */

#truthBtn,
#dareBtn {
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%) padding-box,
              linear-gradient(135deg, #c9a97a, #c8cdd6) border-box;
  border: 1.5px solid transparent;
}

.truth-card .card-front {
  border-color: #ff7aa2;
}

.dare-card .card-front {
  border-color: #ff4f87;
}

/* ========================= */
/* ✨ TEXT ANIMATION */
/* ========================= */

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s ease forwards;
}

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

#tierSelect,
#personalizeTierSelect {
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(#24151d, #24151d) padding-box,
              linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%) border-box;
  color: white;
  border: 1.5px solid transparent;
  margin: 10px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  outline: none;
  cursor: pointer;
}

/* ========================= */
/* 🚻 GENDER CARD STYLES */
/* ========================= */

#todCard.male-card .card-front {
  border: 3px solid #c8cdd6;
  box-shadow: 0 0 18px rgba(200, 205, 214, 0.7);
}

#todCard.female-card .card-front {
  border: 3px solid #c9a97a;
  box-shadow: 0 0 18px rgba(201, 169, 122, 0.7);
}

#todCard.neutral-card .card-front {
  border: 3px solid #d6b36a;
  box-shadow: 0 0 18px rgba(214, 179, 106, 0.6);
}

/* ========================= */
/* 🔥 SLOW BURN REVEAL ANIMATION */
/* ========================= */

.card-front {
  overflow: hidden;
}

/* Keep real card content underneath burn layer */
.card-front > * {
  position: relative;
  z-index: 2;
}

/* Default ember color */
#todCard {
  --ember-color: rgba(214, 179, 106, 0.95);
  --ember-glow: rgba(214, 179, 106, 0.55);
}

/* Ember color by card type */
#todCard.male-card {
  --ember-color: rgba(200, 205, 214, 0.95);
  --ember-glow: rgba(200, 205, 214, 0.6);
}

#todCard.female-card {
  --ember-color: rgba(201, 169, 122, 0.95);
  --ember-glow: rgba(201, 169, 122, 0.6);
}

#todCard.neutral-card {
  --ember-color: rgba(214, 179, 106, 0.95);
  --ember-glow: rgba(214, 179, 106, 0.6);
}

/* ========================= */
/* CARD DRAW REVEAL (WebGL)  */
/* ========================= */
/* Overlays #todCard on draw. The canvas renders the shader tier (a hole
   igniting at the center and spreading outward); #revealFallback is the
   CSS tier used when WebGL is unavailable or falters — a clip-path
   "keyhole" polygon (a rect minus a growing circle, via opposite-wound
   loops) opens the same way, with a radial-gradient ember ring
   synchronized to the same keyframe stops. Both sit above the card text
   and never intercept input. */

.reveal-canvas,
.reveal-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  border-radius: 20px;
}

.reveal-canvas.hidden,
.reveal-fallback.hidden {
  display: none;
}

.reveal-fallback {
  --reveal-hot: #ffdea6;
  --reveal-ember: #c9a97a;
  --reveal-face: #07090d;
  opacity: 1;
  background: var(--reveal-face);
  overflow: hidden;
}

@keyframes revealFallbackDissolve {
  0% {
    clip-path: polygon(6.00% 0.00%, 94.00% 0.00%, 96.30% 0.69%, 98.24% 2.64%, 99.54% 5.56%, 100.00% 9.00%, 99.54% 94.44%, 98.24% 97.36%, 96.30% 99.31%, 94.00% 100.00%, 3.70% 99.31%, 1.76% 97.36%, 0.46% 94.44%, 0.00% 91.00%, 0.46% 5.56%, 1.76% 2.64%, 3.70% 0.69%, 6.00% 0.00%, 0.00% 50.00%, 48.78% 50.00%, 48.88% 50.36%, 48.98% 50.74%, 49.32% 50.93%, 49.68% 50.98%, 50.00% 51.12%, 50.33% 51.00%, 50.44% 50.61%, 50.90% 50.65%, 51.10% 50.36%, 51.12% 50.00%, 50.86% 49.72%, 50.92% 49.33%, 50.74% 48.99%, 50.39% 48.79%, 50.00% 48.78%, 49.75% 49.22%, 49.53% 49.36%, 49.12% 49.36%, 48.87% 49.63%, 0.00% 50.00%);
    background: radial-gradient(circle at 50% 50%, var(--reveal-hot) 0%, var(--reveal-hot) 1.0%, var(--reveal-ember) 4.0%, var(--reveal-face) 10.0%, var(--reveal-face) 100%);
  }
  15% {
    clip-path: polygon(6.00% 0.00%, 94.00% 0.00%, 96.30% 0.69%, 98.24% 2.64%, 99.54% 5.56%, 100.00% 9.00%, 99.54% 94.44%, 98.24% 97.36%, 96.30% 99.31%, 94.00% 100.00%, 3.70% 99.31%, 1.76% 97.36%, 0.46% 94.44%, 0.00% 91.00%, 0.46% 5.56%, 1.76% 2.64%, 3.70% 0.69%, 6.00% 0.00%, 0.00% 50.00%, 31.76% 50.00%, 33.20% 55.46%, 34.75% 61.08%, 39.85% 63.97%, 45.20% 64.76%, 50.00% 66.86%, 54.88% 65.03%, 56.61% 59.10%, 63.51% 59.82%, 66.51% 55.36%, 66.77% 50.00%, 62.84% 45.83%, 63.77% 39.99%, 61.03% 34.82%, 55.92% 31.79%, 50.00% 31.69%, 46.19% 38.27%, 42.99% 40.35%, 36.81% 40.42%, 33.08% 44.50%, 0.00% 50.00%);
    background: radial-gradient(circle at 50% 50%, var(--reveal-hot) 0%, var(--reveal-hot) 15.0%, var(--reveal-ember) 18.0%, var(--reveal-face) 24.0%, var(--reveal-face) 100%);
  }
  40% {
    clip-path: polygon(6.00% 0.00%, 94.00% 0.00%, 96.30% 0.69%, 98.24% 2.64%, 99.54% 5.56%, 100.00% 9.00%, 99.54% 94.44%, 98.24% 97.36%, 96.30% 99.31%, 94.00% 100.00%, 3.70% 99.31%, 1.76% 97.36%, 0.46% 94.44%, 0.00% 91.00%, 0.46% 5.56%, 1.76% 2.64%, 3.70% 0.69%, 6.00% 0.00%, 0.00% 50.00%, 8.65% 50.00%, 11.91% 62.38%, 15.42% 75.12%, 27.00% 81.66%, 39.13% 83.46%, 50.00% 88.21%, 61.07% 84.07%, 64.99% 70.64%, 80.63% 72.26%, 87.42% 62.16%, 88.00% 50.00%, 79.10% 40.54%, 81.22% 27.32%, 74.99% 15.60%, 63.41% 8.73%, 50.00% 8.50%, 41.36% 23.41%, 34.10% 28.12%, 20.11% 28.28%, 11.65% 37.54%, 0.00% 50.00%);
    background: radial-gradient(circle at 50% 50%, var(--reveal-hot) 0%, var(--reveal-hot) 34.0%, var(--reveal-ember) 37.0%, var(--reveal-face) 43.0%, var(--reveal-face) 100%);
  }
  70% {
    clip-path: polygon(6.00% 0.00%, 94.00% 0.00%, 96.30% 0.69%, 98.24% 2.64%, 99.54% 5.56%, 100.00% 9.00%, 99.54% 94.44%, 98.24% 97.36%, 96.30% 99.31%, 94.00% 100.00%, 3.70% 99.31%, 1.76% 97.36%, 0.46% 94.44%, 0.00% 91.00%, 0.46% 5.56%, 1.76% 2.64%, 3.70% 0.69%, 6.00% 0.00%, 0.00% 50.00%, -22.97% 50.00%, -17.21% 71.84%, -11.02% 94.33%, 9.40% 105.88%, 30.82% 109.04%, 50.00% 117.43%, 69.54% 110.13%, 76.46% 86.42%, 104.06% 89.28%, 116.04% 71.46%, 117.06% 50.00%, 101.36% 33.31%, 105.10% 9.97%, 94.11% -10.71%, 73.66% -22.83%, 50.00% -23.23%, 34.75% 3.08%, 21.94% 11.38%, -2.75% 11.67%, -17.67% 28.01%, 0.00% 50.00%);
    background: radial-gradient(circle at 50% 50%, var(--reveal-hot) 0%, var(--reveal-hot) 60.0%, var(--reveal-ember) 63.0%, var(--reveal-face) 69.0%, var(--reveal-face) 100%);
  }
  100% {
    clip-path: polygon(6.00% 0.00%, 94.00% 0.00%, 96.30% 0.69%, 98.24% 2.64%, 99.54% 5.56%, 100.00% 9.00%, 99.54% 94.44%, 98.24% 97.36%, 96.30% 99.31%, 94.00% 100.00%, 3.70% 99.31%, 1.76% 97.36%, 0.46% 94.44%, 0.00% 91.00%, 0.46% 5.56%, 1.76% 2.64%, 3.70% 0.69%, 6.00% 0.00%, 0.00% 50.00%, -57.02% 50.00%, -48.58% 82.03%, -39.49% 115.02%, -9.54% 131.95%, 21.86% 136.60%, 50.00% 148.89%, 78.65% 138.19%, 88.80% 103.41%, 129.29% 107.61%, 146.85% 81.47%, 148.36% 50.00%, 125.33% 25.52%, 130.81% -8.71%, 114.69% -39.04%, 84.71% -56.81%, 50.00% -57.40%, 27.64% -18.82%, 8.85% -6.64%, -27.37% -6.21%, -49.26% 17.75%, 0.00% 50.00%);
    background: radial-gradient(circle at 50% 50%, var(--reveal-hot) 0%, var(--reveal-hot) 88.0%, var(--reveal-ember) 91.0%, var(--reveal-face) 97.0%, var(--reveal-face) 100%);
  }
}

.reveal-fallback-play {
  animation: revealFallbackDissolve 1.45s ease-out forwards;
}

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

.reveal-fallback-quick {
  background: var(--reveal-face, #07090d);
  animation: revealFallbackQuick 0.35s ease-in forwards;
}

/* ========================= */
/* CARD BURN-AWAY (WebGL)    */
/* ========================= */
/* Overlays #todCard on resolution. The canvas renders the shader tier;
   #burnFallback is the CSS tier used when WebGL is unavailable or
   falters, and also for the reduced-motion quick fade. Both sit above
   every other card layer and never intercept input. */

.burn-canvas,
.burn-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  border-radius: 20px;
}

.burn-canvas.hidden,
.burn-fallback.hidden {
  display: none;
}

.burn-fallback {
  opacity: 0;
  background: radial-gradient(circle at 50% 55%,
    rgba(201, 169, 122, 0.6) 0%,
    rgba(90, 32, 12, 0.85) 35%,
    rgba(5, 3, 3, 0.97) 72%);
}

@keyframes burnFallbackDissolve {
  0%   { opacity: 0;    filter: brightness(1)    saturate(1); }
  20%  { opacity: 0.5;  filter: brightness(1.15) saturate(1.3); }
  60%  { opacity: 0.85; filter: brightness(0.75) saturate(0.6); }
  100% { opacity: 0.96; filter: brightness(0.5)  saturate(0.35); }
}

.burn-fallback-play {
  animation: burnFallbackDissolve 1.2s ease-in forwards;
}

@keyframes burnFallbackQuick {
  from { opacity: 0; }
  to   { opacity: 0.94; }
}

.burn-fallback-quick {
  animation: burnFallbackQuick 0.35s ease-out forwards;
}

/* ========================= */
/* ONBOARDING OVERLAY        */
/* ========================= */

#onboarding {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 6, 0.93);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#onboarding.hidden {
  display: none;
}

.onboarding-card {
  background: linear-gradient(145deg, #170e14, #1e1520, #130c12);
  border: 1px solid rgba(201, 169, 122, 0.3);
  border-radius: 24px;
  padding: 32px 24px 28px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(201, 169, 122, 0.07);
}

.onboarding-card h2 {
  font-family: 'Playfair Display', serif;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 4px 0 20px;
  font-size: 1.6rem;
}

.onboarding-field {
  margin: 12px 0;
  text-align: left;
}

.onboarding-field label {
  display: block;
  font-size: 14px;
  color: #c9a97a;
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.onboarding-field input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.onboarding-card > button {
  margin-top: 20px;
  width: 100%;
  padding: 16px;
  font-size: 17px;
}

/* ========================= */
/* AUTH & COUPLE LINKING     */
/* ========================= */

.auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 3, 6, 0.9);
  backdrop-filter: blur(6px);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-modal.hidden {
  display: none;
}

.auth-modal-card {
  background: linear-gradient(145deg, #170e14, #1e1520, #130c12);
  border: 1px solid rgba(201, 169, 122, 0.3);
  border-radius: 24px;
  padding: 32px 24px 28px;
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(201, 169, 122, 0.07);
}

#acctAuthArea.hidden,
#acctProfileArea.hidden,
.auth-form.hidden,
#coupleChoiceButtons.hidden,
#coupleChoiceJoinForm.hidden,
#coupleChoiceCreateResult.hidden,
#coupleChoiceSkip.hidden {
  display: none;
}

#account .auth-form,
#acctProfileArea {
  max-width: 380px;
  margin: 0 auto;
}

#account .auth-form button,
#acctProfileArea > button,
#acctCoupleArea button {
  width: 100%;
  box-sizing: border-box;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto 20px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 245, 247, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  border-radius: 14px;
}

.auth-tab:hover {
  transform: none;
}

.auth-tab.active {
  background: rgba(201, 169, 122, 0.16);
  border-color: rgba(201, 169, 122, 0.55);
  color: #c9a97a;
  font-weight: 600;
}

.auth-link {
  font-size: 12.5px;
  color: #c9a97a;
  text-align: center;
  cursor: pointer;
  margin: 10px 0 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link:hover {
  color: #d8bd94;
}

.auth-error.success {
  color: #c9a97a;
}

.couple-choice-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
  padding: 16px;
}

.couple-choice-btn small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.75;
}

.couple-choice-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 245, 247, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.auth-title {
  font-family: 'Playfair Display', serif;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 4px 0 14px;
  font-size: 1.5rem;
  padding-right: 20px;
}

.auth-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 245, 247, 0.72);
  margin: 0 0 18px;
}

.auth-sub.small {
  font-size: 12px;
  margin: 10px 0 0;
  color: rgba(255, 245, 247, 0.5);
}

.auth-error {
  min-height: 18px;
  font-size: 13px;
  color: #ff7aa2;
  margin: 8px 0 0;
}

.auth-secondary-btn {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 245, 247, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  width: 100%;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(255, 245, 247, 0.4);
  font-size: 12px;
  margin: 20px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.auth-divider span {
  padding: 0 12px;
}

.invite-code-display {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(201, 169, 122, 0.08);
  border: 1px solid rgba(201, 169, 122, 0.3);
}

.invite-code-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c9a97a;
  font-weight: 600;
  margin-bottom: 8px;
}

.invite-code-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, #c9a97a 0%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ========================= */
/* POSITIONS PAGE            */
/* ========================= */

.pos-progress {
  margin: 4px 0 24px;
}
.pos-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,245,247,0.4);
  margin-bottom: 8px;
}
.pos-progress-bar {
  height: 7px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.pos-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pos-section-title {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: #c9a97a;
  text-align: left;
  margin: 20px 0 10px;
  letter-spacing: 0.04em;
}

.pos-featured-card {
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(201,169,122,0.35);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pos-featured-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(201,169,122,0.14);
}
.pos-featured-name {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  background: linear-gradient(90deg, #c9a97a 0%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.pos-featured-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pos-browse-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pos-browse-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  color: #fff5f7;
  border-left: 3px solid transparent;
  transition: background 0.18s, border-color 0.18s;
}
.pos-browse-row:hover  { background: rgba(201,169,122,0.08); }
.pos-browse-row.active { background: rgba(201,169,122,0.12); border-left-color: #c9a97a; }
.pos-count {
  font-size: 13px;
  color: #c9a97a;
  font-weight: 600;
}

.pos-filter-group  { text-align: left; }
.pos-filter-group.hidden { display: none; }
.pos-filter-label  {
  font-size: 11px;
  color: rgba(255,245,247,0.4);
  margin: 14px 0 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pos-filter-chips  { display: flex; flex-wrap: wrap; gap: 7px; }
.pos-chip {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,245,247,0.65);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s;
  text-transform: capitalize;
}
.pos-chip:hover  { background: rgba(201,169,122,0.1); border-color: rgba(201,169,122,0.35); }
.pos-chip.active { background: rgba(201,169,122,0.18); border-color: #c9a97a; color: #c9a97a; font-weight: 600; }

.pos-list { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.pos-list-item {
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, transform 0.15s;
}
.pos-list-item:hover { border-color: rgba(201,169,122,0.3); transform: translateX(3px); }
.pos-list-name { font-size: 15px; font-weight: 600; color: #fff5f7; margin-bottom: 7px; }
.pos-list-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pos-tag       { font-size: 14px; }
.pos-dots      { font-size: 12px; color: #c9a97a; letter-spacing: 2px; }

.pos-vibe-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.pos-difficulty-dots {
  font-size: 13px;
  color: #c9a97a;
  letter-spacing: 2px;
}
.pos-vibe-intimate { background: rgba(201,169,122,0.14); color: #c9a97a;  border: 1px solid rgba(201,169,122,0.3); }
.pos-vibe-playful  { background: rgba(200,205,214,0.1);  color: #c8cdd6;  border: 1px solid rgba(200,205,214,0.28); }
.pos-vibe-intense  { background: rgba(255,100,130,0.1);  color: #ff8fa3;  border: 1px solid rgba(255,100,130,0.28); }

.pos-modal {
  position: fixed;
  inset: 0;
  background: rgba(2,3,6,0.88);
  backdrop-filter: blur(5px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pos-modal.hidden { display: none; }
.pos-modal-card {
  background: linear-gradient(145deg, #18151e, #1f1c28, #161320);
  border: 1px solid rgba(201,169,122,0.3);
  border-radius: 24px;
  padding: 28px 22px 24px;
  width: 100%;
  max-width: 400px;
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.pos-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,245,247,0.7);
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  line-height: 32px;
  text-align: center;
}
.pos-close-btn:hover { background: rgba(255,255,255,0.14); transform: none; }
.pos-modal-name {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  background: linear-gradient(90deg, #c9a97a 0%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  padding-right: 40px;
  line-height: 1.3;
}
.pos-modal-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.pos-category-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,245,247,0.55);
  text-transform: capitalize;
}
.pos-modal-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,245,247,0.82);
  margin-bottom: 16px;
}
.pos-tips-box {
  background: rgba(201,169,122,0.06);
  border: 1px solid rgba(201,169,122,0.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.pos-tips-label {
  display: block;
  font-size: 11px;
  color: #c9a97a;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.pos-tips-box p {
  font-size: 13px;
  color: rgba(255,245,247,0.72);
  line-height: 1.65;
  margin: 0;
}
.pos-toggle-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pos-toggle-buttons button {
  padding: 10px 4px;
  font-size: 13px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,245,247,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
}
.pos-toggle-buttons button:hover { transform: scale(1.04); }
.pos-toggle-buttons button.active-toggle {
  background: rgba(201,169,122,0.18);
  border-color: rgba(201,169,122,0.6);
  color: #c9a97a;
  font-weight: 600;
}

.pos-rating-box {
  margin-top: 18px;
}
.pos-rating-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 7px;
}
.pos-rating-buttons button {
  padding: 10px 2px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,245,247,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
}
.pos-rating-buttons button:hover { transform: scale(1.04); }
.pos-rating-buttons button.active-toggle[data-rating="no"] {
  background: rgba(200,205,214,0.14);
  border-color: rgba(200,205,214,0.5);
  color: #c8cdd6;
  font-weight: 600;
}
.pos-rating-buttons button.active-toggle[data-rating="maybe"] {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
  color: #fff5f7;
  font-weight: 600;
}
.pos-rating-buttons button.active-toggle[data-rating="yes"] {
  background: rgba(201,169,122,0.18);
  border-color: rgba(201,169,122,0.6);
  color: #c9a97a;
  font-weight: 600;
}
.pos-rating-buttons button.active-toggle[data-rating="love"] {
  background: rgba(255,79,135,0.16);
  border-color: rgba(255,79,135,0.55);
  color: #ff7aa2;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(255,79,135,0.3);
}

.pos-mutual-section.hidden {
  display: none;
}
.pos-mutual-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pos-mutual-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(201,169,122,0.3);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.pos-mutual-item:hover { transform: translateX(3px); }
.pos-mutual-name { font-size: 14px; font-weight: 600; color: #fff5f7; }
.pos-mutual-tag {
  font-size: 11px;
  font-weight: 600;
  color: #c9a97a;
  background: rgba(201,169,122,0.14);
  border: 1px solid rgba(201,169,122,0.3);
  border-radius: 12px;
  padding: 3px 10px;
}
.pos-mutual-glow-badge {
  font-size: 11px;
  font-weight: 600;
  color: #ff7aa2;
  background: rgba(255,79,135,0.14);
  border: 1px solid rgba(255,79,135,0.4);
  border-radius: 12px;
  padding: 3px 10px;
}
.pos-mutual-item.pos-mutual-love {
  border-color: rgba(255,79,135,0.6);
  box-shadow: 0 0 18px rgba(255,79,135,0.25);
  animation: mutualLoveGlow 2.4s ease-in-out infinite;
}
@keyframes mutualLoveGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255,79,135,0.22); }
  50% { box-shadow: 0 0 24px rgba(255,79,135,0.4); }
}

/* ========================= */
/* DRINK MODE + SKIP SYSTEM  */
/* ========================= */

.drink-mode-toggle {
  background: rgba(255,255,255,0.06);
  color: rgba(255,245,247,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  padding: 7px 18px;
  box-shadow: none;
  transition: all 0.2s;
}
.drink-mode-toggle:hover { background: rgba(255,255,255,0.1); transform: none; }
.drink-mode-toggle.active-drink-mode {
  background: rgba(230,160,40,0.18);
  border-color: rgba(230,160,40,0.55);
  color: #e6a028;
  box-shadow: 0 0 12px rgba(230,160,40,0.15);
}

.drink-mode-toggle.hidden {
  display: none;
}

#matchedOnlyBtn.active-drink-mode {
  background: rgba(255, 79, 135, 0.16);
  border-color: rgba(255, 79, 135, 0.5);
  color: #ff7aa2;
  box-shadow: 0 0 12px rgba(255, 79, 135, 0.18);
}

.drink-mode-indicator {
  font-size: 12px;
  font-weight: 700;
  color: #e6a028;
  letter-spacing: 0.06em;
  margin: 2px 0 6px;
  text-align: center;
}

/* These sections must paint above the 3D card stacking context (z-index: 1) */
#pointSection,
#passFailSection,
#skipSection,
#judgeWaitSection {
  position: relative;
  z-index: 2;
}

#skipSection {
  margin-top: 14px;
}

/* ========================= */
/* GAME SYNC — SHARED        */
/* ========================= */

.conn-indicator {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 12px;
  margin: 2px 0 10px;
}

.conn-indicator.hidden {
  display: none;
}

.conn-indicator.conn-synced {
  color: #7ddc97;
  background: rgba(125, 220, 151, 0.1);
  border: 1px solid rgba(125, 220, 151, 0.3);
}

.conn-indicator.conn-solo {
  color: rgba(255, 245, 247, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.drawn-by-label {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 245, 247, 0.55);
  text-align: center;
  margin: 4px 0 2px;
}

.drawn-by-label.hidden {
  display: none;
}

.judge-wait-text {
  font-size: 14px;
  color: #c9a97a;
  text-align: center;
  margin: 0;
  animation: judgeWaitPulse 1.8s ease-in-out infinite;
}

@keyframes judgeWaitPulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* Private in-game rating strip — compact, dismissible, never seen by
   the partner (Backend.saveRating only, no game event). */
.ingame-rating-strip {
  max-width: 360px;
  margin: 16px auto 0;
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(201, 169, 122, 0.25);
  border-radius: 16px;
  padding: 14px 16px 16px;
  position: relative;
  z-index: 2;
}

.ingame-rating-strip.hidden {
  display: none;
}

.ingame-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ingame-rating-label {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  color: #c9a97a;
  font-weight: 600;
}

.ingame-rating-dismiss {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 245, 247, 0.7);
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
  line-height: 24px;
  text-align: center;
}

.ingame-rating-dismiss:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: none;
}

@keyframes syncCelebratePulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(201,169,122,0)); }
  35%  { transform: scale(1.04); filter: drop-shadow(0 0 26px rgba(201,169,122,0.85)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(201,169,122,0)); }
}

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

.sync-celebrate {
  animation: syncCelebratePulse 1.4s ease-out;
}

.sync-fail {
  animation: syncFailShake 0.5s ease-in-out;
  filter: grayscale(0.35);
}

/* Truth/dare preference matches — never attributed to a partner, just
   a neutral "you both loved this" glow, matching the Positions page's
   mutual-love treatment. */
.love-match-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #ff7aa2;
  background: rgba(255, 79, 135, 0.14);
  border: 1px solid rgba(255, 79, 135, 0.4);
  border-radius: 12px;
  padding: 3px 10px;
  margin: 0 0 10px;
}

.love-match-badge.hidden {
  display: none;
}

#todCard.love-match .card-front {
  border-color: rgba(255, 79, 135, 0.65);
  animation: loveMatchGlow 2.4s ease-in-out infinite;
}

@keyframes loveMatchGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 79, 135, 0.22), 0 12px 30px rgba(0, 0, 0, 0.35); }
  50%      { box-shadow: 0 0 32px rgba(255, 79, 135, 0.42), 0 12px 30px rgba(0, 0, 0, 0.35); }
}

.skip-btn {
  background: rgba(255,255,255,0.05);
  color: rgba(255,245,247,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
  font-size: 14px;
  padding: 12px 20px;
}
.skip-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,245,247,0.8);
  box-shadow: 0 0 10px rgba(255,255,255,0.06);
  transform: none;
}

.drink-btn {
  background: rgba(230,160,40,0.14);
  color: #e6a028;
  border: 1px solid rgba(230,160,40,0.4);
  box-shadow: 0 0 10px rgba(230,160,40,0.1);
  font-size: 14px;
  padding: 12px 20px;
}
.drink-btn:hover {
  background: rgba(230,160,40,0.26);
  box-shadow: 0 0 16px rgba(230,160,40,0.3);
  transform: none;
}

.drink-toast {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #e6a028;
  color: #12070d;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 40px;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 200;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(230,160,40,0.45);
}
.drink-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================= */
/* POWER CARDS               */
/* ========================= */
/* Right-side shop menu, mirroring .menu/.menu-btn but sliding in from
   the opposite edge — visible only on Truth or Dare while synced. */

.card-menu-btn {
  font-size: 60px;
  cursor: pointer;
  background: linear-gradient(90deg, #c8cdd6 0%, #c9a97a 57%, #c9a97a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-menu-btn.hidden { display: none; }

.card-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background: #171015;
  transition: 0.3s;
  padding: 65px 18px 24px;
  text-align: left;
  z-index: 10;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  border-left: 1px solid rgba(201, 169, 122, 0.15);
}

.card-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.card-menu-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  background: linear-gradient(90deg, #c9a97a 0%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.card-menu-balance {
  font-size: 14px;
  font-weight: 700;
  color: #c9a97a;
  background: rgba(201, 169, 122, 0.1);
  border: 1px solid rgba(201, 169, 122, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

.card-shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.card-shop-item {
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
}

.card-shop-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.card-shop-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff5f7;
}

.card-shop-cost {
  font-size: 13px;
  font-weight: 700;
  color: #c9a97a;
}

.card-shop-effect {
  font-size: 12px;
  color: rgba(255, 245, 247, 0.55);
  line-height: 1.5;
  margin-bottom: 10px;
}

.card-shop-owned {
  font-size: 11px;
  font-weight: 600;
  color: #7ddc97;
  margin-bottom: 8px;
}

.card-shop-buy-btn {
  width: 100%;
  padding: 9px;
  margin: 0;
  font-size: 13px;
}

.card-shop-buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.card-shop-hand-section { margin-top: 4px; }

.card-shop-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.card-shop-hand-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 16px;
  background: rgba(201, 169, 122, 0.14);
  border: 1px solid rgba(201, 169, 122, 0.35);
  color: #c9a97a;
  font-size: 12px;
  font-weight: 600;
}

.card-shop-empty {
  font-size: 12px;
  color: rgba(255, 245, 247, 0.4);
  margin: 0;
}

/* Contextual "play a card" tray on the Truth or Dare page itself */
.hand-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 360px;
}

.hand-tray.hidden { display: none; }

.hand-tray-card {
  padding: 10px 16px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(201, 169, 122, 0.22), rgba(200, 205, 214, 0.14));
  color: #c9a97a;
  border: 1px solid rgba(201, 169, 122, 0.5);
  box-shadow: 0 0 12px rgba(201, 169, 122, 0.18);
  cursor: pointer;
}

.hand-tray-card:hover {
  background: linear-gradient(135deg, rgba(201, 169, 122, 0.32), rgba(200, 205, 214, 0.2));
  transform: translateY(-1px);
}

.hand-tray-qty {
  opacity: 0.7;
  font-weight: 600;
}

/* Dramatic full-width "{name} played {CARD}!" banner */
.card-announcement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  text-align: center;
  pointer-events: none;
}

.card-announcement.hidden { display: none; }

.card-announcement span {
  display: inline-block;
  margin-top: 90px;
  padding: 18px 36px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #12070d;
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(201, 169, 122, 0.55);
  opacity: 0;
}

.card-announcement.card-announcement-show span {
  animation: cardAnnouncementPop 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardAnnouncementPop {
  0%   { opacity: 0; transform: scale(0.6) translateY(-20px); }
  15%  { opacity: 1; transform: scale(1.08) translateY(0); }
  25%  { opacity: 1; transform: scale(1) translateY(0); }
  85%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.9) translateY(-14px); }
}

/* ========================= */
/* 🎡 SPIN WHEEL             */
/* ========================= */

#wheelTierSelect {
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(#24151d, #24151d) padding-box,
              linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%) border-box;
  color: white;
  border: 1.5px solid transparent;
  margin: 10px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  outline: none;
  cursor: pointer;
}

.wheel-turn-display {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 6px 0 2px;
  font-weight: 600;
  text-align: center;
}

.wheel-score-display {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 245, 247, 0.78);
  text-align: center;
  margin: 0 0 4px;
}

.wheel-score-display.hidden {
  display: none;
}

.wheel-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 14px auto 0;
  display: block;
}

.wheel-pointer-arrow {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  z-index: 5;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(201,169,122,0.65));
}

#wheelCanvas {
  border-radius: 50%;
  box-shadow:
    0 14px 48px rgba(0,0,0,0.65),
    0 4px 16px rgba(0,0,0,0.45),
    0 0 36px rgba(201,169,122,0.14);
  display: block;
  width: 100%;
  height: 100%;
}

.wheel-center-pin {
  display: none;
}

#wheelSpinBtn {
  margin: 28px auto 14px;
  display: block;
  padding: 16px 52px;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  color: #12070d;
  box-shadow: 0 6px 22px rgba(201,169,122,0.42);
  border-radius: 50px;
  border: none;
}

#wheelSpinBtn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Result card */
.wheel-card-container {
  background: linear-gradient(145deg, #1a1e24, #242a30);
  border-radius: 20px;
  padding: 22px 20px 20px;
  width: 85%;
  max-width: 360px;
  margin: 20px auto 8px;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wheel-card-container > * {
  position: relative;
  z-index: 2;
}

.wheel-card-container .card-label {
  margin-bottom: 14px;
}

.wheel-card-container p {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  color: #fff5f7;
}

/* Player 1 = silver border/glow, Player 2 = rose gold */
#wheelCard {
  --wh-ember: rgba(200,205,214,0.95);
  --wh-glow:  rgba(200,205,214,0.6);
  border: 2px solid rgba(200,205,214,0.25);
}

#wheelCard.player1-card {
  border: 3px solid rgba(200,205,214,0.7);
  box-shadow: 0 0 22px rgba(200,205,214,0.28), 0 10px 28px rgba(0,0,0,0.38);
  --wh-ember: rgba(200,205,214,0.95);
  --wh-glow:  rgba(200,205,214,0.6);
}

#wheelCard.player2-card {
  border: 3px solid rgba(201,169,122,0.6);
  box-shadow: 0 0 22px rgba(201,169,122,0.26), 0 10px 28px rgba(0,0,0,0.38);
  --wh-ember: rgba(201,169,122,0.95);
  --wh-glow:  rgba(201,169,122,0.6);
}

/* Burn reveal — Spin Wheel only now; Truth or Dare's draw reveal moved
   to the WebGL center-out effect above. */
@keyframes burnMask {
  0% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 0%);
    mask-image: radial-gradient(circle at center, transparent 0%, black 0%);
    opacity: 1;
  }

  20% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 8%, black 9%);
    mask-image: radial-gradient(circle at center, transparent 8%, black 9%);
    opacity: 1;
  }

  50% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 32%, black 34%);
    mask-image: radial-gradient(circle at center, transparent 32%, black 34%);
    opacity: 1;
  }

  80% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 70%, black 72%);
    mask-image: radial-gradient(circle at center, transparent 70%, black 72%);
    opacity: 0.95;
  }

  100% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 150%, black 152%);
    mask-image: radial-gradient(circle at center, transparent 150%, black 152%);
    opacity: 0;
  }
}

@keyframes burnRing {
  0% {
    transform: scale(0.05);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  65% {
    opacity: 0.95;
  }

  100% {
    transform: scale(5.2);
    opacity: 0;
  }
}

@keyframes revealCardText {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#wheelCard.wheel-burn-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #020202;
  z-index: 10;
  pointer-events: none;
  animation: burnMask 2.4s ease-out forwards;
}

#wheelCard.wheel-burn-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: radial-gradient(circle at center,
    transparent 0%,
    transparent 13%,
    var(--wh-ember) 15%,
    var(--wh-glow) 18%,
    rgba(255,255,255,0.35) 19%,
    transparent 24%
  );
  filter: blur(0.5px) drop-shadow(0 0 8px var(--wh-glow));
  animation: burnRing 1.8s ease-out forwards;
}

#wheelCard.wheel-burn-reveal > * {
  opacity: 0;
  animation: revealCardText 1s ease forwards;
  animation-delay: 1.1s;
}

/* Timer */
.wheel-timer-area {
  margin: 4px 0 8px;
  text-align: center;
}

.wheel-timer-display {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(90deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 6px 0;
  display: block;
  line-height: 1;
}

.wheel-timer-display.wt-pulse {
  animation: wtPulse 1s ease-in-out infinite;
}

@keyframes wtPulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.07); opacity: 0.85; }
}

.wheel-timer-display.wt-done {
  background: linear-gradient(90deg, #ff9ab5 0%, #ff4f87 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: none;
  transform: none;
}

/* Screen flash on timer zero */
.wheel-screen-flash {
  position: fixed;
  inset: 0;
  background: rgba(255,245,247,0.72);
  z-index: 999;
  pointer-events: none;
  animation: wFlash 0.55s ease-out forwards;
}

@keyframes wFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Next turn button */
.wheel-next-btn {
  display: block;
  margin: 12px auto;
  padding: 14px 40px;
  font-size: 16px;
}

/* ========================= */
/* BETA FEEDBACK PAGE        */
/* ========================= */

.feedback-topbar-link {
  margin: 0;
  font-size: 14px;
}

.feedback-page {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

.feedback-header {
  text-align: center;
  margin-bottom: 8px;
}

.feedback-header h1 {
  margin-top: 0;
}

.feedback-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feedback-section:first-of-type {
  margin-top: 22px;
  padding-top: 0;
  border-top: none;
}

.feedback-required {
  color: #ff7aa2;
}

.feedback-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  padding: 14px;
  margin: 0;
  border-radius: 14px;
  border: 1px solid #4a2637;
  background: #24151d;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.feedback-form textarea::placeholder {
  color: #c99aaa;
}

.feedback-why-input {
  margin-top: 10px !important;
}

.score-scale {
  display: flex;
  gap: 8px;
}

.score-btn {
  flex: 1;
  padding: 14px 4px;
  margin: 0;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 245, 247, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.score-btn:hover {
  transform: scale(1.04);
}

.score-btn.active {
  background: linear-gradient(135deg, #c9a97a 0%, #c9a97a 43%, #b8bcc4 68%, #c8cdd6 100%);
  color: #12070d;
  font-weight: 700;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(201, 169, 122, 0.65), 0 4px 14px rgba(201, 169, 122, 0.35);
}

.score-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 245, 247, 0.45);
  margin-top: 8px;
}

.feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-chips .pos-chip {
  text-transform: none;
  font-size: 13px;
  padding: 8px 15px;
}

#fbSubmitBtn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 34px 0 0;
  padding: 16px;
  font-size: 17px;
}

#fbSubmitBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.feedback-form.hidden {
  display: none;
}

.feedback-thankyou {
  text-align: center;
  padding: 40px 26px;
  margin-top: 24px;
  border-radius: 24px;
  background: linear-gradient(145deg, #170e14, #1e1520, #130c12);
  border: 1px solid rgba(201, 169, 122, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(201, 169, 122, 0.07);
}

.feedback-thankyou.hidden {
  display: none;
}

.feedback-thankyou .auth-sub {
  margin-bottom: 22px;
}

.feedback-back-link {
  color: #c9a97a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13.5px;
  cursor: pointer;
}

.feedback-back-link:hover {
  color: #d8bd94;
}