:root { --bg:#090609; --panel:#130d13; --panel-2:#1a1018; --line:#36202f; --text:#f7eff4; --muted:#aa98a5; --wine:#8f244b; --rose:#f05578; --violet:#9655e7; --gold:#d8ad72; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); background:var(--bg); font-family:"DM Sans",sans-serif; }
button, a { font:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid var(--rose); outline-offset:4px; }
.ambient { position:fixed; width:34rem; height:34rem; border-radius:50%; filter:blur(120px); opacity:.12; pointer-events:none; z-index:-1; }
.ambient-one { top:-15rem; left:-10rem; background:var(--rose); }
.ambient-two { right:-15rem; top:30rem; background:var(--violet); }
.site-header { max-width:1240px; margin:auto; padding:24px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.07); }
.brand { display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--wine); color:#ffdce7; border-radius:50%; font-family:"Italiana",serif; background:#160b11; }
.header-note { color:var(--muted); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
main { max-width:1240px; margin:auto; padding:0 28px; }
.hero { min-height:530px; padding:110px 0 88px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.eyebrow { margin:0 0 18px; color:#df839d; font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1, h2 { font-family:"Italiana",serif; font-weight:400; }
h1 { max-width:900px; margin:0; font-size:clamp(3.1rem,7.7vw,6.9rem); line-height:.92; letter-spacing:-.04em; }
h1 em { color:#e26a8c; font-weight:400; }
.hero-copy { max-width:650px; margin:30px auto 24px; color:var(--muted); font-size:clamp(1rem,2vw,1.2rem); line-height:1.7; }
.hero-link { color:var(--text); text-decoration:none; border-bottom:1px solid var(--wine); padding:8px 2px; font-size:.88rem; }
.hero-link span { margin-left:10px; color:var(--rose); }
.catalog { padding:70px 0 90px; border-top:1px solid rgba(255,255,255,.07); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.section-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,4.3rem); line-height:1; }
.result-count { color:var(--muted); font-size:.85rem; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:34px 0; }
.filter-button { padding:10px 17px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; transition:.2s ease; }
.filter-button:hover, .filter-button.active { color:white; border-color:#ad3d64; background:rgba(143,36,75,.18); }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.game-card { min-height:420px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,rgba(28,17,25,.98),rgba(15,10,15,.98)); transition:transform .25s,border-color .25s; animation:reveal .35s both; }
.game-card:hover { transform:translateY(-5px); border-color:#6e3553; }
.card-art { position:relative; display:grid; place-items:center; height:185px; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(circle at 50% 100%,#392033 0,transparent 60%); }
.card-art::after { content:""; width:110px; height:110px; border:1px solid rgba(240,85,120,.28); border-radius:50%; box-shadow:0 0 50px rgba(240,85,120,.12); }
.art-symbol { position:absolute; font-family:"Italiana",serif; color:#ffd9e4; font-size:3rem; z-index:1; }
.category-badge { position:absolute; z-index:2; top:18px; left:18px; padding:6px 9px; border:1px solid rgba(255,255,255,.12); border-radius:5px; background:rgba(5,3,5,.65); color:#e799b0; font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.card-body { display:flex; flex:1; flex-direction:column; padding:25px; }
.card-body h3 { margin:0 0 10px; font-family:"Italiana",serif; font-size:1.85rem; font-weight:400; }
.card-description { margin:0 0 26px; color:var(--muted); line-height:1.65; font-size:.92rem; }
.card-footer { margin-top:auto; padding-top:19px; display:flex; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid rgba(255,255,255,.07); }
.price { font-weight:700; letter-spacing:.04em; }
.original-price { margin-right:7px; color:#806e7a; font-size:.78rem; font-weight:400; text-decoration:line-through; }
.play-button, .primary-button { border:0; border-radius:8px; color:white; background:linear-gradient(100deg,#98274f,#e34669); font-weight:700; cursor:pointer; box-shadow:0 8px 26px rgba(143,36,75,.2); }
.play-button { padding:11px 18px; }
.play-button:hover, .primary-button:hover { filter:brightness(1.12); }
.load-error { padding:30px; border:1px solid var(--line); color:var(--muted); text-align:center; }
footer { padding:30px 20px 50px; color:#776873; text-align:center; font-size:.82rem; }
footer span { margin:0 8px; color:var(--wine); }
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:22px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(4,2,4,.86); backdrop-filter:blur(8px); }
.modal-panel { position:relative; width:min(590px,100%); max-height:calc(100vh - 44px); overflow-y:auto; padding:38px; border:1px solid #573047; border-radius:20px; background:#140d13; box-shadow:0 30px 100px #000; animation:modal-in .25s both; }
.modal-close { position:absolute; right:18px; top:15px; border:0; color:var(--muted); background:none; cursor:pointer; font-size:2rem; line-height:1; }
.modal-kicker { margin:0 0 8px; color:#e17d9b; font-size:.69rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.modal-panel h2 { margin:0; padding-right:30px; font-size:clamp(2.1rem,7vw,3.4rem); line-height:1; }
.modal-description { color:var(--muted); line-height:1.55; }
.game-stage { min-height:190px; margin:25px 0 18px; display:flex; align-items:stretch; justify-content:center; perspective:900px; }
.prompt-card { width:100%; display:grid; place-items:center; padding:30px; border:1px solid #64324b; border-radius:14px; color:#fff2f6; background:radial-gradient(circle at top,#3a1d2d,#170d14 65%); text-align:center; font-family:"Italiana",serif; font-size:1.45rem; line-height:1.45; animation:flip .35s both; }
.task-list { width:100%; display:grid; gap:10px; }
.task-item { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:10px; color:#dbcdd6; background:#0e090d; cursor:pointer; }
.task-item input { margin-top:4px; accent-color:var(--rose); }
.task-item:has(input:checked) span { color:#776873; text-decoration:line-through; }
.bingo-grid { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.bingo-cell { min-height:92px; padding:8px; border:1px solid var(--line); border-radius:8px; color:#cbbbc5; background:#100a0f; cursor:pointer; font-size:.72rem; }
.bingo-cell.marked { color:white; border-color:var(--rose); background:#6e1d3a; }
.bingo-grid.won { filter:drop-shadow(0 0 14px rgba(240,85,120,.4)); }
.primary-button { width:100%; padding:14px; font-size:1rem; }
.consent-note { margin:14px 0 0; color:#756670; text-align:center; font-size:.72rem; }
body.modal-open { overflow:hidden; }
@keyframes reveal { from { opacity:0; transform:translateY(10px); } }
@keyframes modal-in { from { opacity:0; transform:translateY(18px) scale(.98); } }
@keyframes flip { from { opacity:.2; transform:rotateY(25deg) translateY(5px); } }
@media (max-width:720px) { .header-note { display:none; } main { padding:0 18px; } .site-header { padding:18px; } .hero { min-height:480px; padding:80px 0 65px; } .game-grid { grid-template-columns:1fr; } .section-heading { align-items:start; flex-direction:column; } .result-count { margin:0; } .modal-panel { padding:30px 20px 24px; } .bingo-cell { min-height:76px; font-size:.63rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }