:root { --ink:#25133f; --ink-soft:#523a72; --violet:#5f2a91; --violet-deep:#39205e; --lavender:#f2edfa; --red:#ae1e37; --red-dark:#86132a; --gold:#b16e00; --cream:#fffdf8; --line:#ddd3e9; --shadow:0 16px 45px rgba(37,19,63,.13); --radius:1.25rem; --content:72rem; --header-height:4.6rem; --sticky-header-offset:calc(var(--header-height) + 1.5rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.65; }
body > p { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:var(--violet-deep); text-underline-offset:.18em; }
a:hover { color:var(--red-dark); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #8a4d00; outline-offset:4px; }
.skip-link { position:absolute; left:1rem; top:-5rem; padding:.65rem 1rem; color:#fff; background:var(--ink); z-index:100; }
.skip-link:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width:min(calc(100% - 2rem),var(--content)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,248,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.header-inner { min-height:var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:.02em; }
.brand img { width:2.9rem; height:2.9rem; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:.2rem; }
.site-nav[hidden] { display:none !important; }
.site-nav a { padding:.65rem .8rem; color:var(--ink); font-weight:700; text-decoration:none; border-radius:.55rem; }
.site-nav a[aria-current="page"], .site-nav a:hover { color:#fff; background:var(--violet-deep); }
.menu-toggle { display:none; min-width:44px; min-height:44px; border:1px solid var(--ink); border-radius:.6rem; color:var(--ink); background:#fff; font-weight:700; }
.eyebrow { margin:0 0 .6rem; color:var(--red); font-size:.76rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { color:var(--ink); line-height:1.12; }
h1 { max-width:15ch; margin:.15rem 0 1rem; font-size:clamp(2.35rem,5vw,5.45rem); letter-spacing:-.055em; }
.hero h1 { letter-spacing:.015em; }
h2 { margin:0 0 .8rem; font-size:clamp(1.8rem,3vw,3.25rem); letter-spacing:-.04em; }
h3 { margin:.5rem 0; font-size:1.25rem; }
.lede { max-width:61ch; margin:0; font-size:clamp(1.03rem,1.8vw,1.28rem); }
.button-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.centered-actions { justify-content:center; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:.68rem 1.05rem; border:2px solid var(--red); border-radius:.65rem; color:#fff; background:var(--red); font-weight:800; text-align:center; text-decoration:none; }
.button:hover { color:#fff; background:var(--red-dark); border-color:var(--red-dark); }
.button.secondary { color:var(--violet-deep); background:transparent; border-color:var(--violet-deep); }
.button.secondary:hover { color:#fff; background:var(--violet-deep); }
.hero { overflow:hidden; background:linear-gradient(135deg,#eee8fb 0%,#f9f4e7 100%); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(2rem,5vw,6rem); min-height:min(41rem,calc(100vh - 4.6rem)); padding-block:clamp(3.25rem,8vw,7rem); }
.hero-logo { width:min(100%,31rem); margin-inline:auto; filter:drop-shadow(0 20px 20px rgba(65,32,97,.2)); }
.section { padding-block:clamp(3.5rem,8vw,7rem); }
.section.alt { background:var(--lavender); }
.section-heading { max-width:47rem; margin-bottom:2.2rem; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.principle { padding:1.45rem; background:#fff; border:1px solid var(--line); border-top:6px solid var(--red); border-radius:var(--radius); box-shadow:0 7px 20px rgba(37,19,63,.06); }
.principle p { margin:0; }
.home-games { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.feature-game { display:grid; grid-template-columns:9rem 1fr; align-items:center; gap:1rem; min-height:11rem; padding:1rem; color:inherit; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 20px rgba(37,19,63,.06); text-decoration:none; }
.feature-game:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.feature-game img { width:8rem; max-height:8rem; object-fit:contain; }
.feature-game span { display:block; color:var(--red); font-size:.78rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,7vw,8rem); align-items:start; }
.quote { margin:1.5rem 0; padding-left:1rem; border-left:4px solid var(--gold); font-size:1.08rem; }
.faq { display:grid; gap:.75rem; }
details { background:#fff; border:1px solid var(--line); border-radius:.75rem; padding:0 1rem; }
summary { min-height:52px; display:flex; align-items:center; color:var(--ink); font-weight:800; cursor:pointer; }
details p { padding-bottom:1rem; }
.page-hero { padding-block:clamp(3.5rem,7vw,6rem); background:linear-gradient(135deg,var(--lavender),#f8f4e9); border-bottom:1px solid var(--line); }
.page-hero h1 { max-width:19ch; }
.news-post { max-width:48rem; }
.news-post h2 { max-width:19ch; }
.news-post p { max-width:70ch; }
.filters { display:grid; grid-template-columns:repeat(2,minmax(0,18rem)); gap:1rem; padding:1.2rem; margin-bottom:1.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 20px rgba(37,19,63,.06); }
.filters { min-inline-size:0; }
.filters legend { padding:0 .3rem; color:var(--ink); font-weight:900; }
.field-label { display:grid; gap:.35rem; color:var(--ink); font-weight:800; }
select,input,textarea { width:100%; min-height:46px; padding:.65rem .75rem; color:var(--ink); background:#fff; border:1px solid #9b8caf; border-radius:.55rem; }
textarea { min-height:9rem; resize:vertical; }
.filter-status { min-height:1.6rem; margin:0 0 1rem; font-weight:700; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; }
.game-card { display:flex; flex-direction:column; min-width:0; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 20px rgba(37,19,63,.06); }
.game-card[hidden] { display:none; }
.game-card img { width:100%; aspect-ratio:1 / .86; object-fit:contain; margin-bottom:.85rem; }
.game-logo-placeholder { display:grid; place-content:center; width:100%; aspect-ratio:1 / .86; margin-bottom:.85rem; padding:1.2rem; color:#fff; background:linear-gradient(135deg,var(--violet-deep),var(--red)); border-radius:.85rem; font-size:clamp(1.25rem,3vw,2rem); font-weight:900; line-height:1.05; text-align:center; }
.game-card h2 { margin:0; font-size:1.22rem; }
.game-meta { display:flex; flex-wrap:wrap; gap:.35rem; margin:.7rem 0; }
.tag { padding:.2rem .5rem; color:var(--violet-deep); background:#eee7f8; border-radius:99px; font-size:.76rem; font-weight:800; }
.tag.status { color:#6a3e00; background:#fff0cf; }
.card-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:auto; padding-top:.55rem; }
.text-link { font-weight:800; }
.game-hero { display:grid; grid-template-columns:minmax(13rem,.65fr) minmax(0,1fr); gap:clamp(2rem,7vw,7rem); align-items:center; padding-block:clamp(3rem,7vw,6rem); }
.game-hero-media { padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.game-hero-media img { width:100%; max-height:24rem; object-fit:contain; }
.game-hero-media .game-logo-placeholder { min-height:18rem; margin:0; font-size:clamp(1.8rem,5vw,3.8rem); }
.stat-list { display:flex; flex-wrap:wrap; gap:.65rem; margin:1.25rem 0; }
.stat { padding:.35rem .65rem; color:var(--violet-deep); background:#eee7f8; border-radius:.5rem; font-weight:800; }
.game-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--line); }
.game-facts div { padding:1rem; background:#fff; }
.game-facts dt { margin-bottom:.2rem; color:var(--violet-deep); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.game-facts dd { margin:0; color:var(--ink); font-weight:700; }
.page-note { margin:1.2rem 0 0; color:var(--ink-soft); font-size:.94rem; }
.components { margin-top:1.2rem; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:.75rem; }
.content-stack { display:grid; gap:1.1rem; max-width:49rem; }
.content-stack p { margin:0; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,7vw,7rem); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid .full { grid-column:1 / -1; }
.radio-group { display:flex; flex-wrap:wrap; gap:.7rem 1rem; }
.radio-group label { display:flex; align-items:center; gap:.45rem; font-weight:700; }
.radio-group input { width:auto; min-height:1rem; }
.form-status { min-height:2rem; margin:.75rem 0 0; font-weight:700; }
.site-footer { padding-block:2.5rem; color:#fff; background:var(--ink); }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.footer-brand { display:flex; align-items:center; gap:.6rem; font-weight:900; }
.footer-brand img { width:3rem; height:3rem; object-fit:contain; }
.site-footer a { color:#fff; }
.footer-social { display:inline-flex !important; flex-flow:row nowrap !important; align-items:center; align-self:center; width:max-content; min-width:0; gap:.75rem; white-space:nowrap; }
.footer-social a { display:grid; flex:0 0 auto; place-items:center; min-width:44px; min-height:44px; border-radius:.55rem; }
.footer-social a:hover { background:rgba(255,255,255,.14); }
.footer-social img { width:auto; max-width:80px; max-height:38px; }
.footer-social a:last-child img { width:32px; height:32px; }
.site-footer p { max-width:58ch; margin:.7rem 0 0; color:#efeaff; }
@media (max-width: 1020px) { .home-games { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 780px) { :root { --header-height:4.2rem; } .header-inner { min-height:var(--header-height); } .menu-toggle { display:block; } .site-nav { position:absolute; top:calc(100% + 1px); left:0; right:0; display:grid; padding:1rem; background:#fffdf8; border-bottom:1px solid var(--line); box-shadow:var(--shadow); } .site-nav a { min-height:44px; display:flex; align-items:center; } .hero-grid,.split,.contact-grid,.game-hero { grid-template-columns:1fr; } .hero-grid { min-height:unset; } .hero-logo { width:min(75%,23rem); grid-row:1; } .principles,.home-games,.game-facts { grid-template-columns:1fr; } .filters { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } .footer-grid { align-items:flex-start; flex-direction:column; } .footer-social { align-self:flex-start; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }