.home { max-width: 1040px; margin: 0 auto; padding: 52px 16px 60px; }

.hero { position: relative; margin-bottom: 40px; padding-right: 170px; }
.hero h1 { margin: 6px 0 14px; font-size: clamp(2.8rem, 8vw, 4.6rem); }
.hero .label { color: var(--on-sky, var(--muted)); }
.hero p { margin: 0; display: inline-block; padding: 8px 18px; border-radius: 999px; color: var(--ink); max-width: 46ch; line-height: 1.5; font-size: 1.1rem; font-weight: 600; }

/* The arcade joystick next to the title. */
.hero-mark { position: absolute; right: 10px; top: -10px; width: 150px; height: 142px; }
.hero-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-mark .stick { transform-box: view-box; transform-origin: 44px 84px; animation: wiggle 2.6s ease-in-out infinite; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: inset 0 2px 0 #fff, inset 0 0 0 3px #fff, 0 11px 0 var(--cream-dark), 0 26px 36px -16px rgba(90, 50, 150, 0.6); }

/* Cover: the game's colour with clouds and a few bouncing dice. */
.card-cover {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: var(--card-accent);
  background:
    radial-gradient(ellipse 70px 30px at 16% 26%, rgba(255, 255, 255, 0.85) 98%, transparent),
    radial-gradient(ellipse 50px 24px at 26% 22%, rgba(255, 255, 255, 0.85) 98%, transparent),
    radial-gradient(ellipse 80px 32px at 86% 18%, rgba(255, 255, 255, 0.7) 98%, transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 45%, #fff), var(--card-accent));
  margin: 3px 3px 0;
  border-radius: 25px 25px 0 0;
}
.card-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 70%, #2a1a40);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 5px 0 color-mix(in srgb, var(--card-accent) 55%, #fff);
}
.card-cover .die { position: absolute; z-index: 1; width: 62px; height: 62px; padding: 0; bottom: 20px; }
.card-cover .die:nth-child(1) { left: 22px; rotate: -4deg; }
.card-cover .die:nth-child(2) { left: 88px; rotate: 3deg; }
.card-cover .die:nth-child(3) { left: 154px; bottom: 74px; rotate: 8deg; animation: bob 2s ease-in-out infinite; }
a.card:hover .card-cover .die:nth-child(3) { animation-duration: 0.8s; }
.card-cover .cover-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* "Nieuw!": a record or sticker came in since the card was last tapped */
.card-new {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: var(--lemon);
  color: #8a3a00;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px #fff, 0 4px 0 3px rgba(90, 50, 150, 0.25);
  rotate: -6deg;
  animation: new-pop 1.8s ease-in-out infinite;
}
.card-new .art { vertical-align: 0; }
@keyframes new-pop { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.12; } 90% { scale: 0.96; } }

.card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.card-body p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 1.02rem; }

.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-dark);
}
.best { font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.best strong { color: var(--ink); }

/* "Verras me!": the last card picks a game by chance */
.card--surprise { width: 100%; padding: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.card--surprise:hover { transform: translateY(-5px) rotate(1deg); box-shadow: inset 0 2px 0 #fff, inset 0 0 0 3px #fff, 0 11px 0 var(--cream-dark), 0 26px 36px -16px rgba(90, 50, 150, 0.6); }
.card--surprise .card-cover {
  --card-accent: var(--purple);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.35) 0 7px, transparent 8px),
    radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.3) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.25) 0 9px, transparent 10px),
    radial-gradient(circle at 28% 78%, rgba(255, 255, 255, 0.25) 0 4px, transparent 5px),
    linear-gradient(180deg, color-mix(in srgb, var(--purple) 45%, #fff), var(--purple));
}
.surprise-gift { position: relative; z-index: 1; display: block; line-height: 0; margin-bottom: 18px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.15)); animation: gift-hop 2.6s ease-in-out infinite; }
.surprise-gift .art { display: block; }
.surprise-q { position: absolute; z-index: 1; color: #fff; font-size: 2rem; font-weight: 700; line-height: 1; text-shadow: 0 3px 0 var(--purple-dark); animation: q-float 3s ease-in-out infinite; }
.surprise-q.q1 { left: 18%; top: 22%; rotate: -14deg; }
.surprise-q.q2 { right: 17%; top: 16%; font-size: 2.5rem; rotate: 12deg; animation-delay: -1s; }
.surprise-q.q3 { right: 26%; bottom: 36px; font-size: 1.6rem; rotate: 6deg; animation-delay: -2s; }
@keyframes gift-hop { 0%, 62%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-10px) rotate(-6deg); } 78% { transform: translateY(0) rotate(4deg); } 86% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes q-float { 50% { translate: 0 -7px; } }

/* a tapped card's picture wiggles (home.js adds .wiggle on the press) */
.card-cover.wiggle > :is(.die, .surprise-gift) { animation: card-wiggle 0.3s ease-in-out; }
/* a picture that fills the cover tilts less and zooms in, so its corners never come loose */
.card-cover.wiggle > .cover-art { animation: card-wiggle-fill 0.3s ease-in-out; }
@keyframes card-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.04); } 60% { transform: rotate(4deg) scale(1.04); } 85% { transform: rotate(-1.5deg) scale(1.01); } }
@keyframes card-wiggle-fill { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-2.5deg) scale(1.1); } 60% { transform: rotate(2deg) scale(1.1); } 85% { transform: rotate(-0.8deg) scale(1.04); } }

/* the twinkling star on "Nieuw!" */
.card-new-star { flex: none; display: block; overflow: visible; animation: star-twinkle 1.6s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.85; } 45% { transform: scale(1.2) rotate(20deg); opacity: 1; } 60% { transform: scale(0.95) rotate(30deg); } }

/* The curtain between the frontpage and a game (home.js): a circle in the theme colour wipes over the page with
   the game's picture bouncing in the middle. The frame waits hidden behind it while the game loads. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  clip-path: circle(0 at 50% 50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28) 0 22%, transparent 22.2%),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 5px, transparent 6px) 0 0 / 56px 56px,
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pink) 75%, #fff), var(--pink) 55%, var(--pink-dark));
  touch-action: none;
}
.curtain-figure { display: grid; place-items: center; width: min(52vw, 230px); aspect-ratio: 1; border-radius: 50%; background: #fff8ec; box-shadow: inset 0 0 0 6px #fff, 0 8px 0 rgba(0, 0, 0, 0.15); overflow: hidden; animation: curtain-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s backwards, curtain-bounce 0.9s ease-in-out 0.65s infinite; }
.curtain-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.curtain-figure .art { width: 64%; height: 64%; }
.curtain-dice { display: flex; gap: 6px; }
.curtain-dice .die { width: min(13vw, 56px); height: min(13vw, 56px); }
.curtain-dice .die:nth-child(2) { translate: 0 -14px; }
.curtain.is-back .curtain-figure { animation: curtain-in 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.05s backwards; }
.curtain.is-opening .curtain-figure { animation: curtain-out 0.3s ease-in forwards; }
@keyframes curtain-in { from { transform: scale(0) rotate(-20deg); } }
@keyframes curtain-bounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.03, 0.97); } 55% { transform: translateY(-16px) scale(0.98, 1.03); } 90% { transform: translateY(0) scale(1.05, 0.95); } }
@keyframes curtain-out { to { transform: scale(0.6); opacity: 0; } }
.game-frame.is-hidden { visibility: hidden; }
.game-frame.is-fading-in { animation: frame-fade 0.15s ease-out; }
.game-frame.is-leaving { opacity: 0; transition: opacity 0.15s ease-in; }
@keyframes frame-fade { from { opacity: 0; } }

@keyframes bob { 50% { translate: 0 -8px; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -9deg; } 60% { rotate: 7deg; } }

@media (max-width: 560px) {
  .hero { padding-right: 0; padding-top: 130px; }
  .hero-mark { left: 0; right: auto; top: 0; transform: scale(0.8); transform-origin: top left; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark *, .card-cover .die, .card-new, .card-new-star, .surprise-gift, .surprise-q, .card-cover.wiggle > * { animation: none !important; }
}

/* Theme button and picker */
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 10px; }
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 10px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.theme-btn:hover { transform: translateY(-2px); }
.theme-btn:active { transform: translateY(2px); }
.theme-btn b { color: var(--pink-dark); }
.theme-btn-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink-soft); }
.theme-btn-icon .avatar { width: 34px; height: 34px; }
.theme-btn-icon svg, .theme-tile .preview svg { display: block; }

.theme-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(58, 31, 74, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.theme-sheet { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 18px 22px; }
.theme-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-head h2 { margin: 0; font-size: 1.6rem; }
.theme-head .btn { padding: 10px 22px; font-size: 1.05rem; }
.theme-sub { margin: 4px 0 14px; color: var(--muted); font-weight: 500; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 0 var(--cream-dark);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.theme-tile:hover { transform: translateY(-3px); }
.theme-tile.on { box-shadow: 0 0 0 4px var(--pink), 0 5px 0 var(--cream-dark); }
.theme-tile .preview { height: 86px; background: center bottom / cover no-repeat; display: grid; place-items: center; }
.theme-tile .preview > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.theme-tile .preview span { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.18)); }
.theme-tile .name { padding: 8px 6px 10px; font-weight: 700; font-size: 1.02rem; }
.theme-tile .check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: var(--pink); color: #fff; font-weight: 700; }
.theme-tile.on .check { display: grid; }

/* The evening switch in the theme picker */
.evening-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 8px 10px 8px 8px; border-radius: 22px; background: var(--cream-2); }
.evening-moon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #2c3a78; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.evening-moon .art { display: block; }
.evening-text { flex: 1 1 160px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evening-text b { color: var(--ink); font-size: 1.1rem; }
.evening-text small { color: var(--muted); font-weight: 500; font-size: 0.9rem; line-height: 1.25; }
.evening-chips { display: flex; gap: 6px; }
.evening-chip { min-height: 44px; padding: 6px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.98rem; font-weight: 600; box-shadow: 0 3px 0 var(--cream-dark); cursor: pointer; }
.evening-chip[aria-pressed="true"] { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-dark); }
/* phones: the chips get their own line; the hint keeps room for two lines, so the chips don't jump under the finger */
@media (max-width: 420px) { .evening-chips { flex: 1 1 100%; } .evening-chip { flex: 1 1 auto; padding: 6px 8px; } .evening-text small { min-height: 2.5em; } }

/* Profiles */
.profile-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.profile-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cream-dark); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.profile-tile.on { box-shadow: 0 0 0 4px var(--pink), 0 4px 0 var(--cream-dark); }
.profile-tile .avatar { width: 52px; height: 52px; }
.profile-tile-name { max-width: 100%; overflow-wrap: anywhere; }
.profile-tile .edit { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--cream-2); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 22px; text-align: center; cursor: pointer; }
.profile-tile .edit::before { content: ""; position: absolute; inset: -9px; } /* a 44px touch target */
.profile-tile.none .avatar { background: var(--cream-2); }
.profile-form { padding: 14px; border-radius: 20px; background: var(--cream-2); display: flex; flex-direction: column; gap: 8px; }
.profile-form h3 { margin: 0 0 4px; font-size: 1.15rem; }
.profile-form .label { margin: 6px 0 0; }
.profile-name-field { display: flex; align-items: center; gap: 10px; }
.profile-name-field span { font-weight: 600; color: var(--muted); }
.profile-name-field input { flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 14px; background: #fff; font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--ink); box-shadow: inset 0 2px 4px rgba(120, 80, 40, 0.18); }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.avatar-grid button, .colour-row button { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 3px 0 var(--cream-dark); }
.avatar-grid button[aria-checked="true"], .colour-row button[aria-checked="true"] { box-shadow: 0 0 0 4px var(--pink), 0 3px 0 var(--cream-dark); }
.avatar-grid .art { width: 70%; height: 70%; vertical-align: 0; }
.colour-row { display: flex; flex-wrap: wrap; gap: 8px; }
.colour-row button { width: 36px; height: 36px; background: var(--c); aspect-ratio: auto; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.profile-actions .btn { flex: 1 1 auto; text-align: center; padding-left: 14px; padding-right: 14px; font-size: 1.05rem; }

/* Sticker book */
.stickers { margin-top: 30px; padding: 18px 20px 20px; border-radius: 28px; }
.stickers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stickers-head h2 { margin: 0; font-size: 1.5rem; }
.stickers-head p { margin: 2px 0 0; color: var(--muted); font-weight: 500; }
.stickers-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 4px 0 var(--cream-dark); }
.sticker .sticker-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff3c4; box-shadow: inset 0 0 0 3px #ffd23a; }
.sticker b { font-size: 0.95rem; color: var(--ink); }
.sticker small { font-size: 0.78rem; line-height: 1.25; color: var(--muted); font-weight: 500; }
/* a sticker still to earn: pressed into the page, like an empty spot in the book */
.sticker.locked { background: var(--cream); box-shadow: inset 0 3px 5px rgba(150, 100, 50, 0.16), inset 0 -2px 0 #fff; }
.sticker.locked b { color: var(--muted); }
.sticker.locked .sticker-icon { background: var(--cream-2); box-shadow: inset 0 3px 4px rgba(150, 100, 50, 0.22), inset 0 -2px 0 rgba(255, 255, 255, 0.9), 0 1px 0 #fff; }
.sticker.locked .sticker-icon .art { opacity: 0.42; filter: grayscale(1) sepia(0.35) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 rgba(120, 80, 40, 0.35)); }
.stickers-preview .sticker { padding: 6px; }
/* a desktop shows two more stickers to earn (home.js) */
.stickers-preview .sticker.extra { display: none; }
.stickers-preview .sticker-icon { width: 46px; height: 46px; }
.sticker-book { display: flex; flex-direction: column; gap: 16px; }
.sticker-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 1.1rem; color: var(--ink); }
.sticker-group h3::before { content: ""; flex: none; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--group-accent, var(--pink)); box-shadow: 0 0 0 3px #fff; }
.sticker-group h3 small { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.sticker-grid .sticker { min-height: 0; padding: 10px 6px 12px; }
.sticker-grid .sticker b { font-size: 0.92rem; line-height: 1.15; }

/* Removing a player: a small dialog with the parents' hold button */
.remove-sheet { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 20px; }
.remove-sheet h2 { margin: 0; font-size: 1.45rem; overflow-wrap: anywhere; }
.remove-sheet .theme-sub { margin: 0 0 4px; }
.remove-sheet .btn { width: 100%; }
.remove-avatar .avatar { width: 64px; height: 64px; }

/* Parent settings */
.home-foot { margin-top: 28px; text-align: center; }
.link-btn { border: 0; background: none; font: inherit; font-weight: 600; color: var(--on-sky, var(--muted)); text-decoration: underline; cursor: pointer; padding: 10px 14px; }
.parent-sheet { width: min(520px, 100%); }
.parent-contact { margin-top: 14px; }
.parent-contact a { color: inherit; font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
.setting { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 18px; background: var(--cream-2); cursor: pointer; }
.setting input[type="checkbox"] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--pink); flex: none; }
.setting span { display: flex; flex-direction: column; gap: 2px; }
.setting b { color: var(--ink); }
.setting small { color: var(--muted); font-weight: 500; line-height: 1.3; }
.setting small.played-today { margin-top: 4px; color: var(--ink); font-weight: 700; }
.setting--select { align-items: center; justify-content: space-between; }
.setting--select select { padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-weight: 600; color: var(--ink); }
.hold { position: relative; overflow: hidden; }
.hold::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(45, 141, 255, 0.25); pointer-events: none; }
.hold.holding::after { animation: hold-fill var(--hold, 2000ms) linear forwards; }
@keyframes hold-fill { to { width: 100%; } }

/* ---------- Desktop: a big screen, also a big tablet on its side (the media query of style.css) ----------
   The page grows with the UI scale (zoom: var(--ui); inside it vw and dvh grow too, hence the divisions) and
   uses the width: the hero is one band (joystick, title and text, the buttons stacked on the right), the cards stand
   in the page's own grid, four across from 1200px (three below), and the sticker book fills what is left of the
   last row of cards (home.js sets its span) or gets a row of its own. */
@media (min-width: 1100px) and (min-height: 650px) {
  .home {
    zoom: var(--ui);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    width: min(1760px, calc(94vw / var(--ui)));
    max-width: none;
    padding: 24px 0 36px;
  }
  .home > .grid { display: contents; }
  .home > :is(.hero, .home-foot) { grid-column: 1 / -1; }

  .hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "mark label buttons" "mark title buttons" "mark text buttons";
    align-items: center;
    column-gap: 28px;
    margin: 0 0 4px;
    padding: 0;
  }
  .hero-mark { position: relative; grid-area: mark; top: auto; right: auto; width: 172px; height: 163px; margin: -4px 0 0 4px; }
  .hero .label { grid-area: label; align-self: end; font-size: 1.15rem; }
  .hero h1 { grid-area: title; margin: 2px 0 10px; font-size: 4.3rem; white-space: nowrap; }
  .hero p { grid-area: text; justify-self: start; max-width: 60ch; font-size: 1.15rem; }
  .hero-buttons { grid-area: buttons; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
  .theme-btn { min-height: 56px; padding: 8px 22px 8px 9px; font-size: 1.15rem; }
  .theme-btn-icon, .theme-btn-icon .avatar, .theme-btn.fs-home .fs-icon { width: 38px; height: 38px; }

  .card-cover { height: 158px; }
  .card-body { padding: 14px 20px 18px; gap: 8px; }
  .card-body h2 { font-size: 1.55rem; }
  .card-body p { font-size: 1.13rem; line-height: 1.38; }
  .tag { padding: 4px 13px; font-size: 1.13rem; }
  .best { font-size: 1.13rem; }
  a.card:focus-visible, .card--surprise:focus-visible { outline-width: 4px; outline-offset: 5px; }

  .stickers { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 0; padding: 20px 22px; }
  .stickers-head h2 { font-size: 1.6rem; }
  .stickers-head p { font-size: 1.13rem; }
  .stickers-preview { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; gap: 10px; margin-top: 16px; }
  .stickers-preview .sticker, .stickers-preview .sticker.extra { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 2px; padding: 10px 14px 10px 10px; text-align: left; }
  .stickers-preview .sticker-icon { grid-row: 1 / span 2; width: 58px; height: 58px; }
  .stickers-preview .sticker b { align-self: end; font-size: 1.13rem; line-height: 1.15; }
  .stickers-preview .sticker small { align-self: start; font-size: 1.13rem; line-height: 1.2; }
  .home-foot { margin: 0; }
  .link-btn { font-size: 1.15rem; min-height: 56px; }

  /* the dialogs: zoomed like the page, the theme picker and the sticker book wide */
  .theme-modal { padding: 24px; }
  .theme-sheet { zoom: var(--ui); max-height: calc((100dvh - 48px) / var(--ui)); padding: 22px 26px 28px; }
  #theme-modal .theme-sheet, #stickers-modal .theme-sheet { width: min(1100px, calc((100vw - 48px) / var(--ui))); }
  .theme-head h2 { font-size: 1.8rem; }
  .theme-head .btn { min-height: 52px; padding: 10px 28px; font-size: 1.15rem; }
  .theme-sub { font-size: 1.05rem; }
  .theme-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
  /* a lift under the mouse (a finger on a big tablet would leave it stuck after the tap) */
  @media (hover: hover) {
    .theme-tile:hover { transform: translateY(-4px); box-shadow: 0 9px 0 var(--cream-dark), 0 16px 20px -12px rgba(90, 50, 150, 0.5); }
    .theme-tile.on:hover { box-shadow: 0 0 0 4px var(--pink), 0 9px 0 var(--cream-dark); }
  }
  .evening-chip { min-height: 48px; padding: 6px 18px; font-size: 1.02rem; }
  /* games with up to four stickers side by side, the bigger books across the whole sheet */
  .sticker-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(470px, 1fr)); gap: 18px 30px; }
  .sticker-group:has(.sticker-grid > :nth-child(5)) { grid-column: 1 / -1; }
  .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); gap: 10px; }
  .sticker-grid .sticker b { font-size: 1.1rem; }
  .sticker small, .sticker-group h3 small { font-size: 1.05rem; }
  .sticker-group h3 { font-size: 1.25rem; }
  .profile-tile, .avatar-grid button, .colour-row button, .setting { transition: transform 0.12s ease-out; }
  @media (hover: hover) {
    .profile-tile:hover, .avatar-grid button:hover, .colour-row button:hover { transform: translateY(-3px); }
  }

  /* the curtain's picture on the way to a game */
  .curtain-figure { width: min(30vw, 320px); }
  .curtain-dice .die { width: min(6vw, 76px); height: min(6vw, 76px); }
}
@media (min-width: 1200px) and (min-height: 650px) {
  .home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}