:root {
  --ink: #102c3a;
  --muted: #60727b;
  --paper: #f7f2e8;
  --cream: #fffdf8;
  --yellow: #ffd45c;
  --mint: #9ddbcf;
  --blue: #8dcce0;
  --coral: #ff8f70;
  --line: rgba(16, 44, 58, 0.18);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100svh; background: var(--paper); }
a, button { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; left: 20px; top: 12px; transform: translateY(-150%); padding: 12px 18px; border-radius: 999px; color: #fff; background: var(--ink); font-weight: 800; }
.skip-link:focus { transform: none; }
.site-head { width: min(1440px, calc(100% - 40px)); margin: 0 auto; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-head > p { color: var(--muted); font-weight: 650; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 1.05rem; }
.brand > span { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid currentColor; border-radius: 15px; background: var(--yellow); font-weight: 900; letter-spacing: -.05em; transform: rotate(-3deg); }
.brand strong { font-size: 1.15rem; }
main { overflow: hidden; }
.hero { width: min(1440px, calc(100% - 40px)); min-height: min(680px, calc(100svh - 112px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); align-items: center; gap: clamp(30px, 7vw, 110px); padding: 52px clamp(0px, 2vw, 28px) 88px; }
.eyebrow { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 900; color: #35788d; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: .98; letter-spacing: -.045em; }
h1 { font-size: clamp(3.2rem, 7.8vw, 7.8rem); }
h1 em { color: #2f7f72; font-style: normal; }
.hero-intro { max-width: 650px; margin: 30px 0 0; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.55; color: var(--muted); }
.hero-world { position: relative; aspect-ratio: 1.08; max-height: 610px; }
.shape { position: absolute; display: block; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.hero-world:hover .shape-sun { transform: translate(-18px, 14px) rotate(-12deg); }
.hero-world:hover .shape-card-a { transform: translate(16px, -22px) rotate(-4deg); }
.hero-world:hover .shape-card-b { transform: translate(-10px, 20px) rotate(8deg); }
.hero-world:hover .shape-arrow { transform: translate(12px, -12px) rotate(8deg); }
.shape-orbit { inset: 8% 4% 7% 5%; border-radius: 50%; border: 3px dashed rgba(16,44,58,.35); box-shadow: none; animation: orbit 20s linear infinite; }
.shape-sun { width: 42%; aspect-ratio: 1; right: 8%; top: 7%; border-radius: 50%; background: var(--yellow); }
.shape-card-a { width: 48%; height: 40%; left: 7%; top: 18%; border-radius: 42% 58% 46% 54%; background: var(--mint); transform: rotate(5deg); }
.shape-card-b { width: 53%; height: 42%; right: 4%; bottom: 7%; border-radius: 36px; background: var(--coral); transform: rotate(-5deg); }
.shape-dot-a, .shape-dot-b { width: 48px; aspect-ratio: 1; border-radius: 50%; box-shadow: 5px 5px 0 var(--ink); }
.shape-dot-a { left: 2%; bottom: 17%; background: var(--blue); }
.shape-dot-b { right: 33%; top: 1%; width: 28px; background: #fff; }
.shape-arrow { left: 31%; bottom: 15%; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 30px; background: #fff; font-size: 54px; font-weight: 900; }
@keyframes orbit { to { transform: rotate(360deg); } }
.catalogue-section { padding: clamp(70px, 10vw, 140px) max(20px, calc((100vw - 1400px) / 2)); background: #fffdf8; border-top: 2px solid var(--ink); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 42px; }
.section-heading h2 { font-size: clamp(2.5rem, 5vw, 5.4rem); }
.live-note { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; color: var(--muted); }
.live-note i { width: 12px; height: 12px; border-radius: 50%; background: #32a476; box-shadow: 0 0 0 6px rgba(50,164,118,.12); }
.catalogue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.collection-card { min-height: 510px; display: grid; grid-template-rows: 260px 1fr auto; overflow: hidden; border: 2px solid var(--ink); border-radius: 36px; background: #fff; box-shadow: 10px 10px 0 var(--ink); animation: card-in .6s both; animation-delay: calc(var(--card-index) * .08s); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
.collection-art { position: relative; overflow: hidden; border-bottom: 2px solid var(--ink); background: #152f5a; }
.art-moon { position: absolute; width: 170px; aspect-ratio: 1; border-radius: 50%; right: 10%; top: 14%; background: var(--yellow); box-shadow: 0 0 0 25px rgba(255,212,92,.12); transition: transform .45s ease; }
.collection-card:hover .art-moon { transform: translate(-16px, 12px) scale(1.05); }
.art-cloud { position: absolute; width: 60%; height: 70px; left: -3%; bottom: 15%; border-radius: 50px; background: var(--mint); box-shadow: 80px -30px 0 10px var(--mint); transition: transform .45s ease; }
.collection-card:hover .art-cloud { transform: translateX(24px); }
.art-star { position: absolute; color: #fff; font-size: 32px; }
.art-star.one { left: 18%; top: 20%; }.art-star.two { right: 40%; bottom: 18%; font-size: 22px; }
.collection-copy { padding: 32px 34px 24px; }
.collection-copy h3, .game-copy h3 { font-size: clamp(2.1rem, 4vw, 4.2rem); }
.collection-copy > p:last-child, .game-copy > p { margin: 18px 0 0; color: var(--muted); line-height: 1.55; font-size: 1.08rem; }
.card-action { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 34px; border-top: 2px solid var(--ink); color: var(--ink); background: var(--yellow); text-decoration: none; font-weight: 900; font-size: 1.08rem; }
.card-action b, .play-button b { font-size: 1.8rem; transition: transform .25s ease; }
.card-action:hover b, .play-button:hover b { transform: translateX(7px); }
.collection-card.is-locked { filter: saturate(.25); box-shadow: 10px 10px 0 #75838a; }
.card-action.locked { background: #e8e6df; color: #64747c; }
.skeleton-card { min-height: 420px; padding: 30px; border: 2px solid var(--line); border-radius: 36px; background: #fff; overflow: hidden; }
.skeleton-card span, .skeleton-card i { display: block; border-radius: 999px; background: linear-gradient(90deg,#e9e5dd,#f6f2eb,#e9e5dd); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
.skeleton-card span { height: 220px; border-radius: 24px; }.skeleton-card i { height: 22px; margin-top: 22px; }.skeleton-card i:nth-child(2){width:45%}.skeleton-card i:nth-child(3){width:75%}.skeleton-card i:nth-child(4){width:60%}
@keyframes shimmer { to { background-position: -220% 0; } }
.empty-card { grid-column: 1 / -1; min-height: 260px; display: flex; align-items: center; gap: 28px; padding: clamp(28px,5vw,52px); border: 2px dashed var(--ink); border-radius: 36px; background: #fff; }
.empty-card .card-icon { flex: 0 0 auto; display: grid; place-items: center; width: 84px; height: 84px; border: 2px solid var(--ink); border-radius: 28px; background: var(--yellow); font-size: 40px; }
.empty-card h3 { font-size: clamp(1.7rem,4vw,3rem); }.empty-card p:last-child { color: var(--muted); line-height: 1.5; }
.empty-card a, .empty-card button { margin-left: auto; min-height: 52px; padding: 12px 20px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 850; text-decoration: none; cursor: pointer; }
footer { width: min(1400px, calc(100% - 40px)); min-height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-weight: 700; }

.category-page { background: #102c3a; color: #fff; }
.site-head-dark { color: #fff; }.site-head-dark .brand > span { color: var(--ink); }.back-link { color: #fff; font-weight: 800; text-underline-offset: 5px; }
.category-hero { width: min(1400px, calc(100% - 40px)); min-height: 620px; margin: 0 auto; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 30px; padding: 50px 0 90px; }
.category-hero .eyebrow { color: #8fd8e7; }.category-hero h1 { font-size: clamp(4rem,9vw,9rem); }.category-hero h1 em { color: var(--yellow); }.category-hero p:last-child { margin: 26px 0 0; color: #bcd0d9; font-size: 1.25rem; }
.moon-scene { position: relative; min-height: 510px; }.moon { position: absolute; width: min(430px,70%); aspect-ratio: 1; right: 8%; top: 2%; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 35px rgba(255,212,92,.08), 0 0 100px rgba(255,212,92,.35); }
.cloud { position: absolute; height: 76px; border-radius: 999px; background: #9ddbcf; box-shadow: 70px -28px 0 9px #9ddbcf, 145px 1px 0 -4px #9ddbcf; }.cloud.one{width:270px;left:0;bottom:25%;}.cloud.two{width:220px;right:2%;bottom:9%;transform:scale(.8);opacity:.8}.rabbit{position:absolute;right:30%;bottom:18%;display:grid;place-items:center;width:120px;height:150px;border:3px solid var(--ink);border-radius:52% 52% 42% 42%;background:#fff;color:var(--ink);font-size:72px;box-shadow:9px 9px 0 var(--ink);transform:rotate(-5deg)}
.category-catalogue { color: var(--ink); }.activity-grid { display: grid; gap: 28px; }.game-card { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(300px,1fr); grid-template-rows: 1fr auto; overflow: hidden; border: 2px solid var(--ink); border-radius: 36px; background: #fff; box-shadow: 10px 10px 0 var(--ink); }
.game-preview { position: relative; grid-row: 1 / 3; min-height: 480px; overflow: hidden; border-right: 2px solid var(--ink); background: linear-gradient(#274674 0 62%,#172f56 62%); }
.preview-moon{position:absolute;width:190px;aspect-ratio:1;border-radius:50%;right:12%;top:10%;background:var(--yellow);box-shadow:0 0 0 20px rgba(255,212,92,.1)}.preview-platform{position:absolute;height:42px;border:3px solid var(--ink);border-radius:15px;background:#9ddbcf;box-shadow:0 9px 0 rgba(0,0,0,.2)}.preview-platform.one{width:48%;left:-4%;bottom:24%}.preview-platform.two{width:42%;right:-3%;bottom:42%}.preview-rabbit{position:absolute;left:24%;bottom:31%;display:grid;place-items:center;width:82px;height:100px;border:3px solid var(--ink);border-radius:50% 50% 40% 40%;background:#fff;color:var(--ink);font-size:45px;transition:transform .4s ease}.game-card:hover .preview-rabbit{transform:translate(16px,-24px) rotate(7deg)}.preview-star{position:absolute;right:20%;top:47%;color:#fff;font-size:44px}
.game-copy { padding: clamp(32px,5vw,64px); }.game-copy ul { display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:28px 0 0;list-style:none}.game-copy li{padding:9px 13px;border:2px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:800;color:#4d626c}.play-button{grid-column:2;min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:16px 34px;border-top:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-weight:900;text-decoration:none;font-size:1.15rem}.play-button.locked{background:#e8e6df;color:#64747c}.game-card.is-locked .game-preview{filter:grayscale(.7);opacity:.75}
.category-page footer { color: #bcd0d9; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }.hero-world { width: min(630px,100%); margin: 0 auto; }.catalogue-grid { grid-template-columns: 1fr; }.category-hero { grid-template-columns: 1fr; }.moon-scene { min-height: 440px; }.game-card { grid-template-columns: 1fr; }.game-preview { grid-row: auto; min-height: 390px; border-right: 0; border-bottom: 2px solid var(--ink); }.play-button { grid-column: 1; }
}
@media (max-width: 600px) {
  .site-head { width: min(100% - 28px,1400px); min-height: 78px; }.site-head > p { display:none; }.hero,.category-hero { width: min(100% - 28px,1400px); }.hero { min-height:0;padding:38px 0 70px}.hero-world{margin-top:15px}.shape{box-shadow:6px 6px 0 var(--ink);}.shape-arrow{width:68px;height:68px;border-radius:22px;font-size:38px}.catalogue-section{padding:70px 14px}.section-heading{align-items:flex-start;flex-direction:column}.live-note{font-size:.85rem}.collection-card{min-height:470px;border-radius:28px;box-shadow:6px 6px 0 var(--ink)}.collection-art{height:220px}.collection-copy{padding:26px 24px 20px}.card-action{padding:14px 24px}.category-hero{min-height:0;padding:40px 0 70px}.moon-scene{min-height:350px}.moon{width:250px}.cloud{transform:scale(.75);transform-origin:left}.cloud.two{transform:scale(.58)}.rabbit{width:88px;height:112px;font-size:52px;right:29%}.game-card{border-radius:28px;box-shadow:6px 6px 0 var(--ink)}.game-preview{min-height:310px}.game-copy{padding:30px 24px}.play-button{padding:14px 24px}.empty-card{align-items:flex-start;flex-direction:column}.empty-card a,.empty-card button{margin-left:0}footer{width:calc(100% - 28px);align-items:flex-start;flex-direction:column;justify-content:center;padding:30px 0}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }