/* One-screen shelves: large touchable collectibles, one detail at a time. */
.kids-component-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 540px;
}
.kids-component-samples > button {
  min-height: 140px;
}
body:is([data-screen="collection"], [data-screen="trophies"]) .site-foot {
  display: none;
}
body:is([data-screen="collection"], [data-screen="trophies"]) .game-header {
  display: flex;
  height: 72px;
  gap: 12px;
  border-bottom: 0;
}
body:is([data-screen="collection"], [data-screen="trophies"]) .brand {
  display: none;
}
body:is([data-screen="collection"], [data-screen="trophies"]) .player-supplies {
  flex: 1;
  width: auto;
  margin: 0;
}
body:is([data-screen="collection"], [data-screen="trophies"]) .coin-pill {
  order: -1;
}
body:is([data-screen="collection"], [data-screen="trophies"])
  .inventory-summary {
  margin-left: auto;
}
.kids-page {
  max-width: 720px;
  margin: 0 auto;
  height: min(
    740px,
    calc(
      100dvh - 180px - var(--safe-top, env(safe-area-inset-top)) -
        var(--safe-bottom, env(safe-area-inset-bottom))
    )
  );
  min-height: 360px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 4px 0 12px;
}
.kids-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kids-heading h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}
.kids-heading h1 > .icon {
  color: #ba8034;
  flex-shrink: 0;
}
.kids-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid #cfad69;
  border-radius: 12px;
  background: var(--finish-honey);
  box-shadow:
    inset 0 2px 0 #fff9d4,
    0 2px 0 #cba66166;
  font-size: 14px;
  font-weight: 900;
  color: #694e24;
  font-variant-numeric: tabular-nums;
}
.kids-banner {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: 104px;
  text-align: left;
  color: var(--ink);
  border: 2px solid #d6b98c;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8cf, #ffeacb 50%, #f7dfe2);
  box-shadow:
    inset 0 2px 0 #fffce5,
    0 4px 0 #d7b88b77;
}
.kids-banner img {
  width: 92px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
}
.kids-banner > div {
  min-width: 0;
  flex: 1;
}
.kids-banner strong {
  display: block;
  font-family: var(--heading);
  font-size: 25px;
  line-height: 1.1;
}
.kids-banner span {
  font-size: 12px;
}
.kids-banner .spotlight-phrase {
  font-family: var(--quote);
  font-style: italic;
  font-size: 21px;
  line-height: 1.25;
  margin: 5px 0;
  overflow-wrap: anywhere;
}
.spotlight-open {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6e532d;
  font-weight: 900;
}
.spotlight-open .icon {
  width: 16px;
  height: 16px;
}
.kids-tabs {
  display: flex;
  gap: 6px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid #d4c29d;
  border-radius: 16px;
  background: linear-gradient(160deg, #e9d7b0, #f1dfc2, #f3d5bd);
  box-shadow: inset 0 2px 3px #b18c3f22;
}
.kids-tabs button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: none;
  border-radius: 12px;
  font-weight: 900;
  font-size: 15px;
  min-height: 44px;
  color: #70583c;
}
.kids-tabs .active {
  background: linear-gradient(150deg, #217f9e, #3475ad 55%, #4b60a3);
  color: #fff;
  box-shadow:
    inset 0 2px 0 #96d7e5aa,
    0 2px 0 #3b5683;
}
.kids-tabs .icon {
  width: 19px;
  height: 19px;
}
.kids-tabs button span {
  font-size: 12px;
}
.kids-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 3px 2px 7px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d6b478 transparent;
}
.book-grid,
.award-grid {
  grid-template-rows: repeat(3, minmax(96px, 1fr));
}
.medal-grid,
.page-grid {
  grid-template-rows: repeat(4, minmax(86px, 1fr));
}
.album-book,
.award-tile,
.phrase-tile {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid #d9b986;
  border-radius: 18px;
  background: linear-gradient(155deg, #fffdf2, #fff4d9 62%, #f8e1bd);
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 #cfb08477;
  color: var(--ink);
  text-align: center;
  transition: transform 130ms;
}
.album-book strong,
.award-tile strong {
  font-size: 15px;
  line-height: 1.12;
  font-weight: 900;
}
.album-book > span:not(.book-cover),
.award-count {
  font-size: 12px;
  font-weight: 800;
  color: #735733;
}
.album-book .progress,
.award-tile .progress {
  margin: 0;
  height: 5px;
  width: 85%;
  flex-shrink: 0;
  background: #e3d5b9;
}
.book-cover {
  position: relative;
  width: 44px;
  height: 43px;
  display: grid;
  place-items: center;
  color: var(--theme);
  background: linear-gradient(140deg, #fffef2, var(--tint));
  border: 1px solid #d9b675;
  border-left: 5px solid var(--theme);
  border-radius: 7px 12px 12px 7px;
  box-shadow:
    inset 0 -3px 0 #fffdf4,
    2px 3px 0 #ae87573d;
  transform: rotate(-5deg);
}
.book-cover .icon {
  width: 25px;
  height: 25px;
}
.book-complete,
.medal-pin {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid #dbbc7c;
  border-radius: 50%;
  background: #fff8dc;
  color: #80643a;
}
.book-complete .icon,
.medal-pin .icon {
  width: 12px;
  height: 12px;
}
.complete .book-complete,
.unlocked .medal-pin {
  background: #e1efc0;
  color: #3a714d;
  border-color: #b7cc88;
}
.award-tile .award-symbol,
.award-detail .award-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px double #d1b06e;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff5cf, #ecdab3, #e8cbb7);
  color: var(--theme, #90713e);
  box-shadow:
    inset 0 2px 0 #fffbe3,
    0 3px 0 #bf975566;
}
.award-tile .award-symbol > .icon {
  width: 26px;
  height: 26px;
}
.unlocked .award-symbol,
.award-detail .earned {
  background: var(--finish-honey);
  border-color: #c08e30;
  color: #9d6520;
  box-shadow:
    inset 0 2px 0 #fff7ca,
    0 3px 0 #b6813888,
    0 0 12px #ffcb5944;
}
.medal-grid .award-symbol {
  width: 40px;
  height: 40px;
}
.medal-grid .award-symbol > .icon {
  width: 22px;
  height: 22px;
}
.medal-grid .award-tile strong {
  font-size: 13px;
}
.award-detail {
  text-align: center;
  padding: 12px 0;
}
.award-detail .award-symbol {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
}
.award-detail .award-symbol > .icon {
  width: 54px;
  height: 54px;
}
.award-detail > strong {
  display: block;
  font-size: 23px;
  font-family: var(--heading);
}
.award-detail > .kids-counter {
  margin: 12px auto 0;
}
.award-detail > .progress {
  max-width: 250px;
  margin: 18px auto;
}
.album-banner {
  min-height: 94px;
  background: linear-gradient(140deg, #fff8de, var(--tint));
}
.album-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 64px !important;
  width: 64px;
  height: 64px;
  color: var(--theme);
}
.album-emblem .icon {
  width: 44px;
  height: 44px;
}
.album-banner strong {
  font-size: 21px;
}
.album-banner .progress {
  margin: 8px 0;
}
.kids-hint {
  margin: 0;
  text-align: center;
  color: #7e623e;
  font-size: 13px;
}
.phrase-tile {
  border-radius: 8px 16px 16px 8px;
  padding: 12px 6px 8px;
  min-height: 86px;
  border-left: 3px solid #d6b477;
}
.phrase-tile.found {
  background: linear-gradient(150deg, #fffef7, #fff3d8, #f5dcbd);
}
.tile-number {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 10px;
  font-weight: 900;
  color: #ae8444;
}
.tile-number > .icon {
  width: 13px;
  height: 13px;
}
.tile-phrase {
  font-family: var(--quote);
  font-style: italic;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tile-seal {
  color: #467954;
}
.tile-seal .icon {
  width: 14px;
  height: 14px;
}
.hidden-phrase {
  font-family: var(--heading);
  font-size: 36px;
  color: #b99156;
  line-height: 1;
}
.tile-caption {
  font-size: 11px;
  font-weight: 800;
  color: #866d47;
}
.phrase-tile.unfound {
  background: linear-gradient(150deg, #f9efd9, #eedfc1, #ecd1b8);
  border-style: dashed;
}
.saved-phrase-detail .result-phrase {
  padding: 22px 12px;
  font-family: var(--quote);
  font-style: italic;
  font-size: 30px;
  line-height: 1.4;
  margin: 16px 0 8px;
}
.saved-phrase-detail > .label {
  color: var(--theme);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}
.saved-phrase-detail .album-author {
  text-align: right;
  font-size: 12px;
  color: #856d4d;
}
.saved-phrase-detail .card-actions button {
  padding: 8px 12px;
  font-size: 13px;
}
.phrase-more {
  margin-top: 20px;
  border-top: 1px solid #dbc9ac;
  padding-top: 14px;
}
.phrase-more summary {
  cursor: pointer;
  color: #715b3c;
  font-size: 13px;
  font-weight: 900;
  min-height: 44px;
}
.kids-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.kids-empty > .icon {
  width: 64px;
  height: 64px;
  color: #c9846b;
  margin-bottom: 12px;
}
.kids-empty > strong {
  font-family: var(--heading);
  font-size: 25px;
}
.kids-empty p {
  font-size: 14px;
}
.kids-pagination {
  grid-row: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.kids-pagination .icon-btn {
  width: 44px;
  height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  :where(html:not(.touch-preview)) .album-book:hover,
  :where(html:not(.touch-preview)) .award-tile:hover,
  :where(html:not(.touch-preview)) .phrase-tile:hover {
    transform: translateY(-2px);
  }
}
.album-book:active,
.award-tile:active,
.phrase-tile:active {
  transform: translateY(2px);
}
@media (max-width: 760px) {
  body:is([data-screen="collection"], [data-screen="trophies"]) .app {
    padding-inline: max(16px, var(--safe-left, env(safe-area-inset-left)))
      max(16px, var(--safe-right, env(safe-area-inset-right)));
  }
  body:is([data-screen="collection"], [data-screen="trophies"]) .game-header {
    height: 64px;
    gap: 8px;
  }
  body:is([data-screen="collection"], [data-screen="trophies"]) #fullscreen {
    display: none;
  }
  body:is([data-screen="collection"], [data-screen="trophies"])
    .inventory-summary {
    gap: 6px;
    padding-inline: 8px;
  }
  body:is([data-screen="collection"], [data-screen="trophies"])
    .inventory-items {
    gap: 6px;
  }
  .kids-page {
    height: calc(
      100dvh - 158px - var(--safe-top, env(safe-area-inset-top)) -
        var(--safe-bottom, env(safe-area-inset-bottom))
    );
    min-height: 280px;
    gap: 10px;
    padding: 8px 0;
  }
  .kids-heading h1 {
    font-size: 27px;
  }
  .kids-heading h1 > .icon {
    display: none;
  }
  .kids-heading .icon-btn {
    width: 40px;
    height: 44px;
    flex-shrink: 0;
  }
  .kids-counter {
    font-size: 12px;
    padding-inline: 9px;
  }
  .kids-banner {
    padding: 6px 10px;
    gap: 8px;
    min-height: 100px;
    border-radius: 20px;
  }
  .kids-banner img {
    width: 78px;
    height: 94px;
  }
  .kids-banner strong {
    font-size: 23px;
  }
  .kids-banner .spotlight-phrase {
    font-size: 19px;
  }
  .kids-grid {
    gap: 8px;
  }
  .album-book,
  .award-tile {
    padding: 7px 5px;
    gap: 4px;
  }
  .album-book strong,
  .award-tile strong {
    font-size: 13px;
  }
  .album-banner .album-emblem {
    flex-basis: 44px !important;
  }
  .album-banner strong {
    font-size: 19px;
  }
  .album-page .kids-heading h1 {
    font-size: 22px;
  }
}
@media (max-width: 350px) {
  body:is([data-screen="collection"], [data-screen="trophies"])
    .inventory-caption {
    display: none;
  }
  .kids-heading h1 {
    font-size: 24px;
  }
  .kids-banner {
    min-height: 80px;
  }
  .kids-banner img {
    width: 60px;
    height: 76px;
  }
  .kids-banner strong {
    font-size: 20px;
  }
  .kids-banner .spotlight-phrase {
    font-size: 16px;
  }
  .kids-banner span {
    font-size: 11px;
  }
  .kids-page {
    gap: 8px;
  }
  .album-book strong,
  .award-tile strong {
    font-size: 12px;
  }
  .book-cover {
    width: 36px;
    height: 36px;
  }
}
@media (max-height: 600px) {
  .kids-grid {
    grid-auto-rows: minmax(88px, auto);
  }
}
@media (prefers-reduced-motion: reduce) {
  .album-book,
  .award-tile,
  .phrase-tile {
    transition: none;
  }
}