.game-home-page main { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); background: radial-gradient(circle at 8% 17%,#fff 0 3px,transparent 4px), linear-gradient(#bfeaf2 0 330px,#fff8e7 330px); }
.game-home-page .topbar { position: relative; }
.parent-tool { padding: 9px 13px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 900; text-decoration: none; }
.parent-tool:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.home-hero { width: min(1120px,calc(100% - 40px)); margin: auto; padding: 38px 0 48px; position: relative; z-index: 1; text-align: center; }
.home-eyebrow { display: inline-block; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 900; }
.home-hero h1 { margin: 18px 0 12px; font-size: clamp(42px,6vw,70px); line-height: 1.02; letter-spacing: -.05em; }
.home-hero h1 span { color: var(--pink); text-shadow: 2px 2px 0 #fff,4px 4px 0 var(--ink); }
.home-hero p { margin: 0; color: #43576a; font-size: 14px; }
.game-library { width: min(1120px,calc(100% - 40px)); margin: 0 auto 64px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; position: relative; z-index: 2; }
.game-card { min-height: 132px; padding: 18px; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); color: var(--ink); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-decoration: none; transition: transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.game-card:hover { filter: brightness(1.03); transform: translateY(-3px); }
.game-card:active { transform: translate(3px,3px) scale(.99); box-shadow: 2px 2px 0 var(--ink); }
.game-icon { width: 62px; height: 62px; border: 2px solid var(--ink); border-radius: 18px; background: #fff9; display: grid; place-items: center; font-size: 34px; }
.game-copy { min-width: 0; display: grid; gap: 6px; }
.game-copy strong { font-size: 20px; }
.game-copy small { color: #4f5b6c; font-size: 11px; line-height: 1.4; }
.play-arrow { width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 900; }
.card-pink { background: #ffdbe4; }.card-purple { background: #e8dcff; }.card-green { background: #dff5e5; }.card-yellow { background: #fff2bd; }.card-blue { background: #d7f2f7; }.card-orange { background: #ffe2bd; }

@media (max-width: 860px) {
  .game-library { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .game-home-page main { background: linear-gradient(#bfeaf2 0 270px,#fff8e7 270px); }
  .game-home-page .topbar,.home-hero,.game-library,.game-home-page footer { width: calc(100% - 22px); }
  .game-home-page .topbar .brand { font-size: 17px; }
  .game-home-page .topbar .brand-mark { width: 28px; height: 28px; }
  .home-hero { padding: 27px 0 38px; }
  .home-hero h1 { margin-top: 14px; font-size: 42px; }
  .home-hero p { font-size: 12px; }
  .game-library { gap: 12px; margin-bottom: 44px; }
  .game-card { min-height: 150px; padding: 14px 10px; grid-template-columns: 1fr; gap: 8px; justify-items: center; text-align: center; border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
  .game-icon { width: 54px; height: 54px; border-radius: 15px; font-size: 29px; }
  .game-copy { gap: 3px; }
  .game-copy strong { font-size: 16px; }
  .game-copy small { font-size: 9px; }
  .play-arrow { display: none; }
}
@media (max-width: 350px) {
  .game-library { grid-template-columns: 1fr; }
  .game-card { min-height: 94px; grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card { transition: none; }
}