@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');
:root { --ink:#101827; --paper:#f8faf4; --lime:#c8ff4d; --aqua:#6bddff; --sun:#ffd557; --muted:#657184; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:#f7f9ff; background:radial-gradient(circle at 10% 0%,rgba(107,221,255,.15),transparent 28rem),var(--ink); font:16px/1.6 'DM Sans',system-ui,sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; top:.7rem; left:.7rem; z-index:5; padding:.6rem .9rem; color:var(--ink); background:var(--lime); border-radius:.6rem; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
header,main,footer { width:min(980px,calc(100% - 2rem)); margin-inline:auto; }
header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; font:600 1.15rem/1 'Fredoka',sans-serif; text-decoration:none; }
.brand span { width:34px; aspect-ratio:1; display:grid; place-items:center; color:var(--ink); background:var(--lime); border-radius:.65rem; }
.play-link { padding:.65rem .9rem; color:var(--ink); background:white; border-radius:.75rem; font-weight:800; text-decoration:none; }
.breadcrumbs { display:flex; gap:.55rem; margin:1rem 0; color:#aeb8c8; font-size:.82rem; }
.play-now { margin-bottom:1rem; padding:clamp(1rem,3vw,1.4rem); color:var(--ink); background:linear-gradient(135deg,#eaf7c9,#cdefff); border-radius:1.4rem; box-shadow:0 22px 60px rgba(2,7,18,.25); }
.play-now-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.play-now-heading h1 { margin:0; }
.game-frame { display:block; width:100%; min-height:720px; background:var(--ink); border:0; border-radius:1rem; box-shadow:inset 0 0 0 1px rgba(16,24,39,.12); }
.game-hero { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; padding:clamp(1.3rem,4vw,2.7rem); color:var(--ink); background:var(--paper); border-radius:1.6rem; box-shadow:0 22px 60px rgba(2,7,18,.32); }
.game-summary { padding:clamp(1rem,3vw,1.5rem); box-shadow:none; }
.game-icon { width:100px; aspect-ratio:1; display:grid; place-items:center; background:linear-gradient(145deg,var(--lime),var(--aqua)); border-radius:1.4rem; font-size:3rem; }
.eyebrow { margin:0 0 .35rem; color:#5d6878; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1,h2 { font-family:'Fredoka',sans-serif; letter-spacing:-.025em; }
h1 { margin:0; font-size:clamp(2.4rem,7vw,4.5rem); line-height:.95; }
h2 { margin:.15rem 0 .7rem; font-size:clamp(1.4rem,4vw,2rem); line-height:1.1; }
.answer { max-width:760px; margin:1rem 0; color:#4f5b6d; font-size:1.05rem; }
.primary-button { display:inline-block; padding:.8rem 1.1rem; color:white; background:var(--ink); border-radius:.85rem; font-weight:800; text-decoration:none; }
.trust-line { margin:.7rem 0 0; color:#6c7788; font-size:.76rem; }
.ad-slot { min-height:310px; margin:1rem 0; display:grid; place-content:center; gap:.35rem; padding:.8rem 0; color:#aeb8c8; text-align:center; background:rgba(255,255,255,.035); border:1px dashed rgba(255,255,255,.13); border-radius:1rem; }
.ad-slot>span { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.ad-slot>p { margin:0; font-size:.78rem; }
.ad-unit { width:300px; min-height:250px; margin-inline:auto; }
.ad-unit [data-admedia-spot] { width:300px; min-height:250px; margin-inline:auto; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.guide-grid article,.faq,.related { padding:clamp(1.1rem,3vw,1.6rem); color:var(--ink); background:#edf0e7; border-radius:1.2rem; }
.guide-grid li { margin:.45rem 0; color:#536071; }
.faq { margin-bottom:1rem; }
.faq details { padding:.8rem 0; border-top:1px solid #ccd3c4; }
.faq details:first-of-type { border-top:0; }
.faq summary { cursor:pointer; font-weight:800; }
.faq p { margin:.45rem 0 0; color:#536071; }
.related { margin-bottom:1rem; }
.related>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.related a { display:grid; gap:.15rem; padding:.75rem; background:white; border-radius:.8rem; text-decoration:none; }
.related a span { font-size:1.35rem; }
.related a strong { font-size:.85rem; }
.related a small { color:#667184; font-size:.78rem; }
.source-note { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 2rem; padding:.8rem 1rem; color:#b4bece; border:1px solid rgba(255,255,255,.13); border-radius:.8rem; font-size:.78rem; }
.collection-hero { margin-bottom:1rem; padding:clamp(1.4rem,4vw,2.7rem); color:var(--ink); background:linear-gradient(135deg,#eaf7c9,#cdefff); border-radius:1.6rem; }
.collection-hero h1,.legal-card h1 { margin:.15rem 0 .8rem; font-size:clamp(2.3rem,7vw,4.4rem); line-height:.95; }
.collection-hero>p:last-child { max-width:760px; margin:0; color:#4f5b6d; font-size:1.05rem; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; }
.collection-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem; color:var(--ink); background:#edf0e7; border-radius:1rem; text-decoration:none; }
.collection-card>span { width:56px; aspect-ratio:1; display:grid; place-items:center; background:white; border-radius:.8rem; font-size:1.7rem; }
.collection-card strong,.collection-card small { display:block; }
.collection-card small { margin-top:.15rem; color:#667184; font-size:.8rem; }
.collection-card p { margin:.45rem 0 0; color:#536071; font-size:.88rem; }
.collection-card b { align-self:center; color:#465268; font-size:.8rem; white-space:nowrap; }
.collection-card:hover { background:white; transform:translateY(-2px); }
.collection-nav { display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 2rem; }
.collection-nav a { padding:.55rem .75rem; color:#dce5f2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:999px; font-size:.82rem; text-decoration:none; }
.legal-main { max-width:860px; }
.legal-card { margin-bottom:2rem; padding:clamp(1.3rem,4vw,2.5rem); color:var(--ink); background:var(--paper); border-radius:1.5rem; }
.legal-intro { max-width:700px; color:#4f5b6d; font-size:1.06rem; }
.legal-card section { padding:1rem 0; border-top:1px solid #dce2d5; }
.legal-card section h2 { margin:0 0 .45rem; font-size:1.3rem; }
.legal-card section p { margin:0; color:#536071; }
.legal-card section p+p { margin-top:.8rem; }
.legal-updated { margin:1rem 0 0; color:#748092; font-size:.8rem; }
.site-footer { display:grid; grid-template-columns:minmax(170px,.65fr) minmax(0,2fr); gap:1.35rem 2rem; padding:1.5rem 0 2rem; color:#9ca8bb; border-top:1px solid rgba(255,255,255,.13); font-size:.8rem; }
.footer-summary,.footer-network { display:grid; align-content:start; gap:.45rem; }
.footer-summary strong,.footer-network>strong { color:white; font:600 .94rem/1.3 'Fredoka',sans-serif; }
.footer-summary a,.footer-projects a { color:#b7c1d0; text-decoration:none; }
.footer-projects { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.footer-summary a:hover,.footer-projects a:hover { color:white; text-decoration:underline; }
.footer-legal { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); }
.footer-legal a { color:#b7c1d0; text-decoration:none; }
.footer-legal a:hover { color:white; text-decoration:underline; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; }
@media(max-width:680px){.play-now-heading{align-items:flex-start;flex-direction:column}.play-now-heading .primary-button{width:100%;text-align:center}.game-frame{min-height:780px}.game-hero{grid-template-columns:1fr}.game-icon{width:76px}.guide-grid,.collection-grid{grid-template-columns:1fr}.collection-card{grid-template-columns:auto minmax(0,1fr)}.collection-card b{grid-column:2}.related>div{grid-template-columns:repeat(2,1fr)}.source-note{align-items:flex-start;flex-direction:column}.site-footer{grid-template-columns:1fr}}
.game-thumbnail{width:min(280px,100%);height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:16px;background:#101827}.collection-card{grid-template-columns:minmax(0,1fr) auto}.collection-card .collection-thumbnail{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;grid-column:1/-1;border-radius:12px;background:#101827}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}