:root {
  --ink: #211A2E;
  --soft-ink: #574B6B;
  --coral: #B01E6B;
  --coral-soft: #D987B4;
  --violet: #7A2BE0;
  --cream: #F5F3FA;
  --line: rgba(122, 43, 224, .14);
  --shadow: 0 24px 70px rgba(122, 43, 224, .16);
  --spring: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 8% 8%, rgba(122,43,224,.16), transparent 28rem), radial-gradient(circle at 92% 15%, rgba(176,30,107,.12), transparent 28rem), linear-gradient(180deg, #F5F3FA, #ECE7F5 58%, #F5F3FA); font-family: Prompt, system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ff8f9e; box-shadow: 0 0 22px currentColor; opacity: .5; animation: drift 8s ease-in-out infinite; }
.ambient i:nth-child(1) { left: 9%; top: 31%; }.ambient i:nth-child(2) { right: 14%; top: 55%; color: #9970c5; animation-delay: -2s; }.ambient i:nth-child(3) { left: 47%; top: 12%; animation-delay: -5s; }
.play-header { width: min(1160px, calc(100% - 40px)); height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }.brand img { border-radius: 10px; }.brand-dot { color: var(--coral); }
.chat-link { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 12px; font-weight: 500; box-shadow: inset 0 1px 0 white; transition: transform .2s var(--spring), background .2s; }.chat-link:hover { transform: translateY(-2px); background: white; }
main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; padding: 40px 0 64px; }
.eyebrow, .section-kicker { color: #a84955; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.eyebrow i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.hero h1 { margin: 18px 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(55px, 7vw, 92px); line-height: .98; letter-spacing: -.06em; }.hero h1 em { color: transparent; background: linear-gradient(100deg, #f04560, #9b55a8); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0; color: var(--soft-ink); font-size: 16px; line-height: 1.8; }.hero-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }.hero-notes span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--soft-ink); font-size: 11px; }
.hero-art { position: relative; width: min(450px, 94vw); aspect-ratio: 1; justify-self: end; }.play-orb { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: radial-gradient(circle at 34% 27%, #fff, #ffd7d2 38%, #ee7891 74%, #9f65b7); box-shadow: inset 0 0 40px rgba(255,255,255,.6), 0 36px 75px rgba(176,70,93,.28); animation: orbFloat 5s ease-in-out infinite; }.play-orb::after { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }.play-orb b { font-family: Georgia, serif; font-size: 45px; letter-spacing: -.04em; color: white; text-shadow: 0 4px 24px rgba(100,39,50,.2); }.play-orb span { position: absolute; right: 24%; top: 23%; color: white; font-size: 23px; animation: twinkle 2s ease-in-out infinite; }
.orbit { position: absolute; inset: 18% 3%; border: 1px solid rgba(240,68,96,.2); border-radius: 50%; transform: rotate(-18deg); animation: spin 16s linear infinite; }.orbit::after { content: ""; position: absolute; width: 11px; height: 11px; left: 8%; top: 27%; border-radius: 50%; background: #fc6881; box-shadow: 0 0 18px #fc6881; }.orbit-two { inset: 9% 22%; transform: rotate(32deg); border-color: rgba(134,96,180,.18); animation-direction: reverse; animation-duration: 21s; }.orbit-two::after { left: auto; right: 4%; top: 60%; background: #9268bd; box-shadow: 0 0 18px #9268bd; }
.float-card { position: absolute; padding: 13px 17px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 17px 40px rgba(100,43,42,.13); backdrop-filter: blur(12px); color: var(--soft-ink); font-size: 11px; animation: cardFloat 4.4s ease-in-out infinite; }.float-card strong { display: block; margin-top: 3px; color: var(--coral); font-size: 15px; }.card-a { left: 0; top: 30%; }.card-b { right: 0; bottom: 22%; animation-delay: -2s; }.card-b span { color: var(--coral); font-size: 18px; vertical-align: middle; }
.games { padding: 28px 0 95px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }.section-heading h2 { max-width: 700px; margin: 7px 0 0; font-family: Georgia, serif; font-size: clamp(32px, 5vw, 52px); line-height: 1.12; letter-spacing: -.035em; }.game-count { flex: none; padding: 8px 13px; border-radius: 999px; background: #fbe4e4; color: #a44753; font-size: 11px; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.66); box-shadow: 0 18px 55px rgba(100,43,42,.08), inset 0 1px 0 white; transition: transform .3s var(--spring), box-shadow .3s; }.game-card[href]:hover { transform: translateY(-7px); box-shadow: var(--shadow); }.card-visual { position: relative; height: 290px; overflow: hidden; }.love-visual { background: radial-gradient(circle at 50% 45%, #fff7f4, #fbe2df 65%, #eed8e6); }.love-visual img { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; object-fit: contain; transform: translate(-50%,-50%); mix-blend-mode: multiply; animation: orbFloat 5.5s ease-in-out infinite; }.visual-ring { position: absolute; left: 17%; right: 17%; top: 45%; height: 26%; border: 1px solid rgba(240,68,96,.2); border-radius: 50%; transform: rotate(-10deg); }.ring-b { transform: rotate(22deg); border-color: rgba(134,96,180,.18); }
.status-badge { position: absolute; z-index: 3; left: 18px; top: 18px; padding: 7px 11px; border-radius: 999px; color: white; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }.is-live { background: #db405b; box-shadow: 0 8px 20px rgba(219,64,91,.25); }.is-mock { background: #7652a0; box-shadow: 0 8px 20px rgba(118,82,160,.23); }
.daily-visual { background:#ffdeda; }.daily-visual>img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--spring); }.daily-card:hover .daily-visual>img { transform:scale(1.035); }.challenge-steps { position:absolute; z-index:2; left:50%; bottom:14px; width:max-content; max-width:calc(100% - 28px); padding:8px 11px; display:flex; align-items:center; gap:7px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.82); border-radius:999px; color:#75423f; background:rgba(255,255,255,.75); box-shadow:0 10px 25px rgba(100,43,42,.12); backdrop-filter:blur(10px); font-size:9px; }.challenge-steps i { color:var(--coral); font-style:normal; }
.card-copy { padding: 25px 27px 28px; }.game-type { display: block; color: #aa5961; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }.card-copy h3 { margin: 7px 0 8px; font-family: Georgia, serif; font-size: 31px; letter-spacing: -.03em; }.card-copy p { min-height: 47px; margin: 0 0 21px; color: var(--soft-ink); font-size: 13px; line-height: 1.65; }.play-button { display: inline-flex; align-items: center; gap: 15px; color: var(--coral); font-size: 13px; font-weight: 600; }.play-button b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--coral); transition: transform .25s var(--spring); }.game-card:hover .play-button b { transform: translateX(4px); }.mock-button { color: var(--violet); }.mock-button b { background: var(--violet); }
.soon-card { grid-column: 1 / -1; display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 190px; background: linear-gradient(120deg, rgba(255,255,255,.72), rgba(244,235,248,.68)); opacity: .78; }.soon-mark { width: 92px; height: 92px; margin-left: 35px; display: grid; place-items: center; border: 1px dashed rgba(134,96,180,.42); border-radius: 50%; color: #8d67b5; background: rgba(255,255,255,.5); font-family: Georgia, serif; font-size: 42px; }.soon-card .card-copy p { min-height: 0; margin-bottom: 14px; }.soon-label { color: var(--soft-ink); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.play-promise { margin-bottom: 85px; padding: 29px 34px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 17px; border: 1px solid rgba(240,68,96,.14); border-radius: 26px; background: linear-gradient(120deg, rgba(255,237,233,.75), rgba(244,235,248,.75)); }.play-promise > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--coral), var(--violet)); box-shadow: 0 10px 24px rgba(173,69,99,.22); }.play-promise h2 { margin: 0 0 4px; font-size: 18px; }.play-promise p { margin: 0; color: var(--soft-ink); font-size: 12px; line-height: 1.65; }
footer { width: min(1160px, calc(100% - 40px)); min-height: 82px; margin: 0 auto; padding: 18px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); color: #9a746c; font-size: 10px; }footer a { color: var(--ink); font-weight: 600; }
@keyframes drift { 50% { transform: translate(24px,-34px) scale(1.5); opacity: .9; } }@keyframes orbFloat { 50% { transform: translate(-50%,calc(-50% - 11px)) rotate(1deg); } }@keyframes cardFloat { 50% { translate: 0 -9px; } }@keyframes twinkle { 50% { transform: scale(1.5) rotate(16deg); opacity: .55; } }@keyframes spin { to { rotate: 360deg; } }
@media (max-width: 780px) { .play-header, main, footer { width: calc(100% - 28px); }.play-header { height: 68px; }.hero { min-height: 0; grid-template-columns: 1fr; padding: 32px 0 70px; text-align: center; }.hero-copy > p { margin-inline: auto; font-size: 14px; }.hero-notes { justify-content: center; }.hero-art { justify-self: center; width: min(380px, 100%); margin-top: 5px; }.game-grid { grid-template-columns: 1fr; }.soon-card { grid-column: auto; grid-template-columns: 100px 1fr; }.soon-mark { width: 70px; height: 70px; margin-left: 20px; }.section-heading { align-items: start; flex-direction: column; }.section-heading h2 { font-size: 36px; }.card-visual { height: 260px; } }
@media (max-width: 480px) { .chat-link span { display: none; }.hero h1 { font-size: clamp(50px, 15vw, 69px); }.hero-art { aspect-ratio: 1.05; }.play-orb { width: 190px; height: 190px; }.play-orb b { font-size: 38px; }.float-card { padding: 10px 12px; }.card-copy { padding: 22px 20px 25px; }.card-copy h3 { font-size: 28px; }.soon-card { display: block; padding-top: 24px; }.soon-mark { margin: 0 auto; }.soon-card .card-copy { text-align: center; }.play-promise { grid-template-columns: 1fr; text-align: center; }.play-promise > span { margin: 0 auto; } }
.power-visual { position: relative; overflow: hidden; background: #f0e1ef; }
.power-visual > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .5s var(--spring); }
.power-card:hover .power-visual > img { transform: scale(1.04); }
.power-score { position: absolute; left: 18px; bottom: 18px; display: grid; min-width: 83px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: rgba(255,255,255,.8); box-shadow: 0 10px 28px rgba(70,35,54,.16); backdrop-filter: blur(10px); }
.power-score.is-soft { left: auto; right: 18px; }
.power-score b { color: #e44954; font-size: 19px; }
.power-score.is-soft b { color: #76529c; }
.power-score small { color: #875448; font-size: 9px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.night-card .night-visual { background: #101934; }
.night-card .night-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.night-card:hover .night-visual img { transform: scale(1.04); transition: transform .5s ease; }