/* Arcade home: a Poki-style wall of big picture tiles. Nothing to read before you can play —
   the chrome shrinks to one slim row and every destination is a tile you can tap. */
.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; }

/* --- chrome ------------------------------------------------------------------- */
.browse-page.arcade .topbar { padding:12px 36px; min-height:72px; }
/* The home wall is the navigation; other shelves keep the tabs, slimmed. */
@media (min-width:601px) {
  .browse-page.arcade-home .browse-nav { display:none; }
  .browse-page.arcade .browse-nav { padding:0 0 12px; margin-bottom:6px; }
  .browse-page.arcade .browse-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .browse-page.arcade .browse-tabs a { min-height:44px; padding:8px 14px; font-size:14px; white-space:nowrap; }
}
.browse-page.arcade .app-layout { min-height:0; }
/* The greeting and the category chips share one row; everything else spans the page. */
.browse-page.arcade .playground { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:16px; padding-top:4px; }
.browse-page.arcade .playground>* { grid-column:1/-1; }
.browse-page.arcade .welcome { grid-column:1; grid-row:1; margin:0; gap:8px; }
.browse-page.arcade .welcome .eyebrow { display:none; }
.browse-page.arcade .welcome h1 { font-size:24px; line-height:1.1; margin:0; letter-spacing:-.6px; gap:9px; white-space:nowrap; }
.browse-page.arcade .welcome h1 em { display:none; }
.browse-page.arcade .hello-button { width:42px; height:42px; min-width:42px; }
.browse-page.arcade .welcome .surprise-button { min-height:42px; padding:8px 14px; font-size:13px; border-radius:14px; }
.browse-page.arcade .shelf-heading { margin:14px 0 0; align-items:center; }
.browse-page.arcade .shelf-heading .eyebrow { display:none; }
.browse-page.arcade .shelf-heading h2 { font-size:22px; }
.browse-page.arcade .sticker-shelf { margin-top:12px; }
.browse-page.arcade .filters { grid-column:2; grid-row:1; display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0; padding:4px 2px; gap:7px; }
.browse-page.arcade .filters::-webkit-scrollbar { display:none; }
.browse-page.arcade .filters>button:first-child { margin-left:auto; }
.browse-page.arcade .filters>button { flex:none; flex-direction:row; min-height:46px; padding:5px 13px 5px 6px; gap:7px; font-size:13px; line-height:1; border-radius:24px; white-space:nowrap; }
.browse-page.arcade .filters .category-picture { width:32px; height:32px; border-radius:50%; }

/* --- the wall ----------------------------------------------------------------- */
.browse-page.arcade .game-grid,.browse-page.arcade .game-grid.mosaic { grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr)); grid-auto-rows:auto; gap:14px; margin-top:14px; }
.browse-page.arcade .empty-shelf { grid-column:1/-1; }
.browse-page.arcade .game-grid .game-card:not(.featured),.browse-page.arcade .game-card { aspect-ratio:1; min-height:0; justify-self:stretch; border-radius:22px; border:3px solid #fffdf8; background:var(--game-color,#e2eada); box-shadow:0 4px 0 #dedccf,0 8px 18px #374b3212; }
.browse-page.arcade .game-card:hover { transform:translateY(-3px); box-shadow:0 7px 0 #d5d6c6,0 14px 24px #374b3218; border-color:#fffdf8; }
.browse-page.arcade .game-card .launch-game { display:block; position:relative; width:100%; height:100%; min-height:0; padding:0; background:transparent; color:#fff; font:inherit; }
.browse-page.arcade .game-art { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; transition:transform .4s; }
.browse-page.arcade .game-card:hover .game-art { transform:scale(1.04); filter:none; }
.browse-page.arcade .card-caption { position:absolute; inset:auto 0 0 0; display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:space-between; gap:6px; padding:36px 12px 11px; background:linear-gradient(transparent,#14303a99 55%,#14303ad4); }
.browse-page.arcade .card-caption-text { display:grid; gap:2px; width:auto; min-width:0; }
.browse-page.arcade .card-title { font-size:17px; line-height:1.1; color:#fff; font-weight:550; letter-spacing:-.2px; text-shadow:0 1px 2px #0007; }
.browse-page.arcade :is(.skill-label,.card-subtitle,.level-pill,.play-disc),.browse-page.arcade .game-card:not(.featured) .play-disc { display:none; }
.browse-page.arcade .card-meta { margin:2px 0 0; gap:4px; font-size:10px; }
.browse-page.arcade .card-meta>span:not(.stars) { display:none; }
.browse-page.arcade .card-meta .stars { display:inline-flex; font-size:11px; color:#ffffff9c; }
.browse-page.arcade .card-meta .stars .star.on { color:#ffd166; }
.browse-page.arcade .favorite-button { width:44px; height:44px; top:8px; right:8px; color:#24464b; background:#fffdf4; border:2px solid #54766b; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:none; }
.browse-page.arcade .favorite-button .ui-icon { width:18px; height:18px; }
.browse-page.arcade .favorite-button.saved { color:#a52b49; background:#fff0ef; border-color:#a52b49; }
.browse-page.arcade .favorite-button:hover { box-shadow:0 0 0 3px #ffffff66; }
.browse-page.arcade .game-tag { top:9px; left:9px; max-width:calc(100% - 58px); font-size:9px; padding:5px 7px; border-radius:8px; line-height:1.2; transform:rotate(-3deg); }
.browse-page.arcade .game-tag .ui-icon { display:none; }

/* "Let's try this!": the one big tile. */
.browse-page.arcade .game-card.featured { grid-column:span 2; grid-row:span 2; border-color:#ffe6a3; }
.browse-page.arcade .featured .launch-game { display:block; grid-template-columns:none; }
.browse-page.arcade .featured .game-art { height:100%; min-height:0; }
.browse-page.arcade .featured .card-caption { flex-direction:row; align-items:flex-end; justify-content:space-between; padding:70px 18px 16px; gap:12px; background:linear-gradient(transparent,#14303a99 50%,#14303adb); }
.browse-page.arcade .featured .card-title { font-size:30px; letter-spacing:-.6px; }
.browse-page.arcade .featured .card-subtitle { display:block; margin-top:4px; font-size:14px; line-height:1.3; color:#fffd; }
.browse-page.arcade .featured .skill-label { display:block; font-size:10px; color:#ffffffd0; }
.browse-page.arcade .featured .card-meta .stars { font-size:13px; }
.browse-page.arcade .featured .play-disc { display:grid; width:56px; height:56px; min-width:56px; padding-left:3px; background:#f8d88b; color:#725b31; box-shadow:0 4px 0 #dcc082; }
.browse-page.arcade .featured .play-disc .ui-icon { width:22px; height:22px; }
.browse-page.arcade .featured .favorite-button { top:10px; right:10px; bottom:auto; width:44px; height:44px; }
.browse-page.arcade .recommendation-badge { position:absolute; top:12px; left:12px; max-width:calc(100% - 70px); padding:9px 13px; border-radius:12px; font-size:14px; font-weight:600; color:#725c2e; background:#fff0b8; box-shadow:0 3px 0 #e9cd7d; transform:rotate(-3deg); }

/* Tiles that are not quiz games: Pick for me, Little Days, the books, the worlds. */
.browse-page.arcade .special .tile-art { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.browse-page.arcade .special .tile-art svg,.browse-page.arcade .special .tile-art img { display:block; width:100%; height:100%; object-fit:cover; }
.browse-page.arcade .special .tile-icon .ui-icon { width:46%; height:46%; filter:drop-shadow(0 4px 0 #0000001c); }
.browse-page.arcade .tile-pick { background:radial-gradient(circle at 30% 25%,#fff3c4,#f7c65a 70%); color:#7a5a1c; }
.browse-page.arcade .tile-pick .ui-icon { box-sizing:border-box; width:52%; height:52%; padding:10%; border-radius:50%; background:#fffaf0d9; box-shadow:0 4px 0 #d8a93a55; animation:arcade-shuffle 4s ease-in-out infinite; }
@keyframes arcade-shuffle { 0%,80%,100% { transform:rotate(0); } 85% { transform:rotate(-12deg) scale(1.08); } 92% { transform:rotate(10deg) scale(1.08); } }
.quiet .browse-page.arcade .tile-pick .ui-icon { animation:none; }
.browse-page.arcade .tile-heart { background:radial-gradient(circle at 30% 25%,#ffe4e7,#f2909f 72%); color:#8f1e3a; }
.browse-page.arcade .tile-star { background:radial-gradient(circle at 30% 25%,#fff6d2,#f4bd55 72%); color:#7c5314; }
.browse-page.arcade .tile-leaf { background:radial-gradient(circle at 30% 25%,#e4f2d7,#8fc07d 72%); color:#2c5a2e; }
.browse-page.arcade .tile-shelf { background:radial-gradient(circle at 30% 25%,#f7efdd,#d5b98a 72%); color:#5d4324; }
/* Books look like books: the cover picture on paper, the title on the spine below. */
.browse-page.arcade .special.book .tile-art { display:block; background:#f4ead6; }
.browse-page.arcade .special.book .tile-art svg { height:auto; aspect-ratio:600/360; border-radius:0 0 14px 14px; box-shadow:0 3px 0 #0000000f; }
.browse-page.arcade .special.book .card-caption { padding-top:10px; background:linear-gradient(#f4ead600,#c9a978 40%,#b6925f); }
.browse-page.arcade .special.book .card-title { text-shadow:0 1px 1px #0005; }
.browse-page.arcade .special.days .tile-art { background:#bfd2a6; }
.browse-page.arcade .special.pete .tile-art { background:#3a4a8f; }
.browse-page.arcade .special.pete .tile-art img { object-position:center 30%; }

/* Grown-ups' row below the wall. */
.browse-page.arcade .arcade-foot { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 18px; margin-top:20px; }
.browse-page.arcade .arcade-foot .recommendation-details { margin:0 auto 0 0; font-size:12px; color:#6f8378; max-width:640px; }
.browse-page.arcade .arcade-foot .recommendation-details[hidden] { display:none; }
.browse-page.arcade .arcade-foot .browse-quiet { display:flex; }
.browse-page.arcade .arcade-foot .soft-button { min-height:44px; font-size:14px; padding:10px 16px; }
.browse-page.arcade .footer { margin-top:26px; }

/* --- tablets ----------------------------------------------------------------- */
@media (max-width:1100px) {
  .browse-page.arcade .game-grid,.browse-page.arcade .game-grid.mosaic { grid-template-columns:repeat(auto-fill,minmax(min(164px,100%),1fr)); gap:13px; }
  .browse-page.arcade .featured .card-title { font-size:27px; }
}
@media (max-width:800px) {
  .browse-page.arcade .topbar { padding:12px 24px; }
  .browse-page.arcade .playground { padding-top:2px; column-gap:12px; }
  .browse-page.arcade .welcome h1 { font-size:22px; }
  .browse-page.arcade .filters>button { min-height:44px; font-size:12px; padding:4px 11px 4px 5px; }
  .browse-page.arcade .filters .category-picture { width:30px; height:30px; }
}

/* --- phones: greeting on top, chips below, a wide hero, then the wall ----------- */
@media (max-width:600px) {
  .browse-page.arcade .topbar { padding:10px 18px; min-height:64px; }
  .browse-page.arcade .playground { grid-template-columns:minmax(0,1fr); padding:8px 14px 20px; row-gap:0; }
  .browse-page.arcade .welcome { grid-column:1; grid-row:1; margin:0 0 6px; align-items:center; flex-wrap:nowrap; }
  .browse-page.arcade .welcome h1 { font-size:21px; margin:0; }
  .browse-page.arcade .hello-button { width:38px; height:38px; min-width:38px; }
  .browse-page.arcade .filters { grid-column:1; grid-row:2; margin:0 -14px; padding:4px 14px; }
  .browse-page.arcade .filters>button:first-child { margin-left:0; }
  .browse-page.arcade .filters>button { min-height:42px; font-size:11px; gap:6px; padding:4px 10px 4px 4px; }
  .browse-page.arcade .filters .category-picture { width:29px; height:29px; }
  .browse-page.arcade .game-grid,.browse-page.arcade .game-grid.mosaic { grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:11px; margin-top:10px; }
  .browse-page.arcade .game-card { border-radius:19px; border-width:2px; }
  .browse-page.arcade .card-caption { padding:30px 10px 9px; }
  .browse-page.arcade .card-title { font-size:15px; }
  .browse-page.arcade .favorite-button { width:44px; height:44px; top:7px; right:7px; }
  .browse-page.arcade .game-card.featured { grid-column:1/-1; grid-row:auto; aspect-ratio:2.05; }
  .browse-page.arcade .featured .card-caption { padding:40px 14px 12px; }
  .browse-page.arcade .featured .card-title { font-size:24px; }
  .browse-page.arcade .featured .card-subtitle { font-size:12px; }
  .browse-page.arcade .featured .play-disc { width:46px; height:46px; min-width:46px; }
  .browse-page.arcade .recommendation-badge { top:10px; left:10px; font-size:12px; padding:7px 10px; }
  .browse-page.arcade .arcade-foot { margin-top:16px; }
  .browse-page.arcade .arcade-foot .browse-quiet { display:none; }
}
@media (max-width:370px) {
  .browse-page.arcade .playground { padding-inline:12px; }
  .browse-page.arcade .filters { margin-inline:-12px; padding-inline:12px; }
  .browse-page.arcade .game-grid,.browse-page.arcade .game-grid.mosaic { gap:9px; }
  .browse-page.arcade .card-title { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .browse-page.arcade .tile-pick .ui-icon { animation:none; } }

/* A bounded invitation alongside the free-choice shelf. */
.practice-path { background:#fff9e9; border:2px solid #decfa7; border-radius:24px; display:flex; align-items:center; gap:22px; padding:20px 24px; margin:0 0 22px; color:#23444b; }
.practice-path-heading { flex:1; }.practice-path h2 { font-size:clamp(20px,2vw,27px); margin:5px 0; }.practice-path p { font-size:14px; margin:0; color:#48645e; }.practice-path .eyebrow { font-size:10px; color:#626c43; }
.practice-path-track { display:flex; gap:9px; list-style:none; margin:0; padding:0; }.practice-path-track li { border:2px solid #809987; border-radius:30px; padding:8px 12px; font-size:13px; font-weight:750; white-space:nowrap; }.practice-path-track .complete { background:#d5ebd7; border-color:#376746; }
.practice-path .btn { min-height:48px; white-space:nowrap; }
@media(max-width:850px) { .practice-path { flex-wrap:wrap; padding:16px; gap:12px; }.practice-path-heading { flex-basis:100%; }.practice-path-track { flex:1; gap:5px; }.practice-path-track li { font-size:12px; padding:7px; } }
@media(max-width:360px) { .practice-path-track { flex-basis:100%; }.practice-path>.btn { width:100%; } }