/* Collection tab: Dream Shop and My Collection (js/dreamShopUi.js,
   GAME_SPEC §4.12). Real elements with ids for the UI layer tool
   (web-ui-style.md §6); no pseudo-elements, no forced priority.
   Surface tokens (--cs-*) live in css/contentScreens.css. */

/* ---------- Containers (layout only) ---------- */
.dream-shop,
.my-collection {
  width: min(var(--cs-content-width), 100%);
  margin: 0 auto;
}

/* ---------- Dream Shop field buttons (2.5.2): the shop's small category buttons, one per field ---------- */
/* All fields in one row (css/shop.css sets five columns for the shop's own buttons). */
.shop-tabs.dream-field-tabs {
  grid-template-columns: repeat(var(--dream-field-count, 7), minmax(0, 1fr));
  gap: 3px;
  padding: 0;
}

.dream-field-tab {
  position: relative;
}

.dream-field-tab .dream-buy-badge {
  position: absolute;
  top: -6px;
  right: -4px;
}

/* ---------- Shop tab switch: Shop / Dream Shop (2.5.2 design §8; was the Collection sub-tabs) ---------- */
.shop-modes {
  width: min(420px, 100%);
  /* 8px under the sign's board (owner 2026-10-31); drawn over its hanging vines. */
  position: relative;
  z-index: 1;
  margin: 8px auto 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shop-mode {
  position: relative;
  min-width: 0;
  min-height: 46px;
  padding: 6px 12px;
  border: 2px solid var(--cs-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  color: var(--cs-brown);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cs-gold-lo);
}

.shop-mode .notification-badge {
  top: -7px;
  right: -6px;
}

.shop-mode[aria-current="page"] {
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--cs-blue-edge);
}

.shop-mode:focus-visible,
.my-subtab:focus-visible,
.dream-category-card:focus-visible,
.dream-node:focus-visible,
.dream-back:focus-visible,
.my-section-link:focus-visible,
.collection-card-show:focus-visible,
.dream-owned-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.dream-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dream-category-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 12px;
  border: 2px solid var(--cs-gold);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  color: var(--cs-brown);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cs-gold-lo), var(--cs-shadow);
}

.dream-category-notice {
  top: 2px;
  right: 2px;
}

/* A field that is not ready shows the gallery lock as its art, in colour
   (only icons turn gray on not-ready menus, lobby-hybrid.css). */
.dream-category-card[data-state="soon"] {
  cursor: default;
}

.dream-category-art {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 60%, #fff6dc, #ecd29b);
}

.dream-category-card[data-category="car"] .dream-category-art {
  object-fit: contain;
  padding: 6% 8%;
  box-sizing: border-box;
}

/* Coming-soon fields show their own picture at full size, a little muted (the hint says "준비 중"). */
.dream-category-card[data-state="soon"] .dream-category-art {
  filter: saturate(0.6);
}

.dream-category-name { font-size: 18px; font-weight: 900; }
.dream-category-hint { font-size: 12px; font-weight: 700; color: var(--cs-brown-soft); }

/* ---------- Tree view ---------- */
.dream-tree-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dream-back[hidden] {
  display: none;
}

.dream-back,
.my-section-link {
  min-height: 44px;
  padding: 4px 14px;
  border: 2px solid var(--cs-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  color: var(--cs-brown);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 var(--cs-gold-lo);
}

.dream-tree-title {
  margin: 0;
  color: #fff;
  font-size: 24px;
}

.dream-tree-complete {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 2px solid var(--cs-gold);
  border-radius: 14px;
  background: #fff3a4;
  color: var(--cs-brown);
  font-weight: 800;
}

.dream-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* Showcase stages (My Collection fields): picture, shade, hero object and
   text are separate layers. */
.my-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(200px, 32vh, 380px);
  border: 2px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: #3a2414;
  box-shadow: 0 3px 0 var(--cs-gold-lo), var(--cs-shadow);
}

.my-stage-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-stage-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The tree keeps readable cards and scrolls inside this box when wider. */
.dream-tree-scroll {
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 12px 0;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(222, 236, 255, 0.95), rgba(192, 217, 250, 0.95));
  box-shadow: inset 0 2px 0 #fff, var(--cs-shadow);
  scrollbar-width: thin;
}

.dream-tree {
  position: relative;
  /* Its own layer: badges on the cards (z-index 4-6) stay above the cards but
     under the buy bar that slides over the list (.dream-detail, z-index 5). */
  isolation: isolate;
  margin: 0 auto;
}

.dream-node {
  position: relative;
  width: 100%;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  box-sizing: border-box;
  border: 2px solid var(--cs-gold);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  color: var(--cs-brown);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cs-gold-lo), 0 4px 8px rgba(20, 40, 80, 0.2);
}

/* NEW marks use the same text outline and card corner across collection types. */
.content-new-badge {
  position: absolute;
  z-index: 4;
  top: -8px;
  right: -6px;
  min-width: 34px;
  padding: 2px 5px;
  border: 2px solid #fff6b0;
  border-radius: 999px;
  background: linear-gradient(#ff6654, #d91f27);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 2px #6b0909;
  pointer-events: none;
}

/* Locked: only the car picture is gray with the gallery lock in front. */
.dream-node[data-state="owned"] { border-color: #2fb514; }
.dream-node[data-goal="true"] { border-color: #46c41a; }
.dream-node[data-goal-path="true"] { border-color: #8fdc6e; }
.dream-node[aria-current="true"] { border-color: #1f8bff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1f8bff, 0 6px 14px rgba(10, 60, 150, 0.4); }

.dream-node-art-slot {
  width: 84px;
  height: 56px;
}

.dream-node-art {
  width: 84px;
  height: 56px;
  object-fit: contain;
}

.dream-node-art-slot > .menu-lock {
  width: 30px;
}

.dream-node-name {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.dream-node-status {
  font-size: 11px;
  font-weight: 800;
  color: #0053c5;
}

.dream-node[data-state="owned"] .dream-node-status { color: #1b7a0f; }

/* Can be bought: a green price button centred under the picture (owner 2026-11-10). */
.dream-node-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 64px;
  margin-top: 3px;
  padding: 3px 10px 4px;
  border: 2px solid #1f7a0c;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fe23a, #22a40f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #1f7a0c;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px #145a07;
}

.dream-node-price-coin {
  width: 16px;
  height: 16px;
}

/* Not enough coins yet: the same button, muted, the price in a warm red. */
.dream-node-price[data-state="insufficient"] {
  border-color: #8c9a86;
  background: linear-gradient(180deg, #e9eee6, #c9d3c4);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #8c9a86;
  color: #b23a00;
  text-shadow: none;
}
.dream-node[data-state="locked"] .dream-node-status { color: #6b7f99; }
.dream-node[data-state="insufficient"] .dream-node-status { color: #b23a00; }

.dream-node-goal {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: #20b900;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- Action bar: conditions, goal path, buy / goal ----------
   On phones it stays at the bottom of the scrolling view; at the end of the
   view it sits after the tree, so it never covers the last card or the menu. */
.dream-detail {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px 12px;
  border: 2px solid var(--cs-gold);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  color: var(--cs-brown);
  box-shadow: inset 0 2px 0 #fff, 0 -4px 14px rgba(20, 10, 2, 0.35);
}

.dream-detail:empty { display: none; }

.dream-detail-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}


.dream-detail-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dream-detail-text:empty { display: none; }
.dream-detail-balance,
.dream-detail-requires { margin: 0; font-size: 13px; font-weight: 800; }
.dream-detail-requires[data-met="false"] { color: #b23a00; }

.dream-path {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
  font-size: 13px;
  font-weight: 700;
}

.dream-path-step[data-now="true"] { font-weight: 900; color: #0053c5; }

.dream-detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

/* Tall phones: the bar follows the view bottom while the tree scrolls. */
@media (max-width: 899px) and (min-height: 700px) {
  .dream-detail {
    position: sticky;
    bottom: 0;
  }
}

.dream-action {
  min-height: 50px;
  min-width: 0;
  padding: 6px 12px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
}

/* Secondary action (goal / showcase): blue, below the green buy button in weight. */
.dream-action--goal {
  border: 2px solid #ffd34e;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--cs-blue-edge);
  font-size: 15px;
}

.dream-action--goal:disabled {
  background: linear-gradient(180deg, #a9b4c4, #7c899b);
  box-shadow: 0 2px 0 #5d6878;
  cursor: default;
}

.dream-suggest {
  min-height: 44px;
  border: 2px dashed #20b900;
  border-radius: 12px;
  background: #f0ffe6;
  color: #1b7a0f;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- My Collection ---------- */
.my-subtabs {
  display: grid;
  /* One even column per visible field tab (hidden tabs take no column). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0 0 8px;
  padding: 4px;
  border: 2px solid var(--cs-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cs-gold-lo);
}

.my-subtab {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cs-brown);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.my-subtab[aria-current="page"] {
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 var(--cs-blue-edge);
}

.my-subtab-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  object-fit: contain;
}

.my-subtab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-subtab .notification-badge {
  top: -6px;
  right: 2px;
}

.my-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.my-stage-shade {
  background: linear-gradient(180deg, rgba(20, 10, 2, 0.5) 0, rgba(20, 10, 2, 0) 28%, rgba(20, 10, 2, 0) 58%, rgba(20, 10, 2, 0.7) 100%);
}

.my-stage-bg { object-position: center 68%; }

.my-stage-top {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

/* Narrow phones: a long map-button label takes two balanced lines rather than
   half the row, so the count beside it keeps room for its longest word
   (Polish at 320px put "przyjaciele" under the button). Moving the button
   under the count would put it over the friend's picture instead. Wider
   screens keep the one-line button. */
@media (max-width: 420px) {
  .my-stage-top > .my-section-link {
    max-width: 9.5em;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.15;
    text-align: center;
  }
  .my-stage-top > .my-section-link:lang(ja) {
    word-break: auto-phrase;
  }
  /* "9 / 15" was split over two lines; balanced lines keep the count together. */
  .my-stage-top > .my-stage-summary {
    text-wrap: balance;
  }
}

.my-stage-summary {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

/* The animal stands on the rug (its centre is near 74% of the picture height). */
.my-stage-hero {
  position: absolute;
  left: 50%;
  bottom: 14%;
  height: 66%;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.35));
}

/* Not rescued yet: the friend being collected is faded; one not met yet is a silhouette. */
.my-stage[data-state="collecting"] .my-stage-hero {
  filter: saturate(0.55) drop-shadow(0 10px 6px rgba(0, 0, 0, 0.35));
}

.my-stage[data-state="missing"] .my-stage-hero {
  filter: brightness(0) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.3));
  opacity: 0.45;
}

/* Owned office objects drawn over the room (positions only; art is the office's own). */
.my-interior-objects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.my-interior-object {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35));
}

#my-interior-object-evidence-board { left: 6%; top: 12%; width: 26%; }
#my-interior-object-desk { left: 50%; bottom: 16%; width: 46%; transform: translateX(-50%); }
#my-interior-object-lamp { left: 60%; bottom: 40%; width: 16%; }

.my-stage-hero--car {
  left: 45%;
  bottom: 18%;
  height: auto;
  width: 62%;
  max-width: none;
  max-height: 70%;
}

.my-stage-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-stage-caption--cta {
  justify-content: space-between;
}

.my-stage-check {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #5fdc2a, #1f9a0c);
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.my-stage-check-mark {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.my-stage-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-stage-name {
  color: #fff;
  font-size: clamp(20px, 5.6vw, 26px);
  font-weight: 900;
  line-height: 1.1;
}

.my-stage-sub {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.my-stage-cta {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 6px 16px;
  font-size: 16px;
  white-space: nowrap;
}

.my-empty {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(20, 10, 2, 0.4);
  text-align: center;
}

/* Animal cards: a list that grows with the collection (no fixed 3-up row). */
.collection-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.collection-card {
  min-width: 0;
  padding: 10px 10px 12px;
  border: 2px solid var(--cs-gold);
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  text-align: center;
  box-shadow: 0 3px 0 var(--cs-gold-lo), 0 4px 10px rgba(20, 10, 2, 0.25);
}

.collection-card[aria-current="true"] {
  border-color: #1f8bff;
  box-shadow: 0 0 0 3px rgba(31, 139, 255, 0.5), 0 3px 0 var(--cs-gold-lo), 0 4px 10px rgba(20, 10, 2, 0.25);
}

.collection-card-show {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}

.collection-card-art {
  width: 100%;
  max-width: 128px;
  aspect-ratio: 1;
  object-fit: contain;
}

.collection-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5fdc2a, #1f9a0c);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.collection-card-name {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

/* Owned interior objects and cars. */
.dream-owned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.dream-owned-grid:empty { display: none; }

.dream-owned-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 8px 10px;
  border: 2px solid var(--cs-gold);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  color: var(--cs-brown);
  font: inherit;
  text-align: center;
  box-shadow: 0 3px 0 var(--cs-gold-lo), 0 4px 10px rgba(20, 10, 2, 0.25);
}

button.dream-owned-card { cursor: pointer; }
.dream-owned-card[aria-current="true"] { border-color: #2fb514; }

.dream-owned-art {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: contain;
}

.dream-owned-name { font-size: 14px; font-weight: 900; }
.dream-owned-desc { font-size: 11px; font-weight: 700; color: var(--cs-brown-soft); }

.dream-owned-badge {
  position: absolute;
  top: -8px;
  right: -4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #20b900;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.dream-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #fff;
  font-weight: 700;
}

/* ---------- Item popup ---------- */
.popup-dream-confirm-art {
  width: min(240px, 64vw);
  height: min(150px, 22vh);
  margin: 0 auto;
  object-fit: contain;
}

.popup-dream-confirm-body {
  margin: 0;
  white-space: pre-line;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ui-brown);
}

.popup-dream-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
  .collection-grid,
  .dream-owned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shop-mode { font-size: 15px; }
  .my-subtab { font-size: 14px; gap: 4px; }
  .dream-action { font-size: 15px; }
}

@media (max-height: 700px) {
  .my-stage { height: clamp(170px, 32vh, 240px); }
}

/* ---------- Wide screens: showcase beside the list, not a stretched phone ---------- */
@media (min-width: 900px) {
  .dream-shop,
  .my-collection { width: min(var(--cs-content-width-wide), 100%); }

  .dream-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .dream-tree-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tree" "detail";
    gap: 14px;
  }

  .dream-tree-scroll { grid-area: tree; }
  /* The suggestion bar after a purchase follows the view bottom, as on tall phones. */
  .dream-detail { grid-area: detail; position: sticky; bottom: 0; box-shadow: inset 0 2px 0 #fff, var(--cs-shadow); }
  .dream-detail-title { display: none; }

  .my-subtabs { width: min(560px, 100%); margin-inline: auto; }

  .my-section { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
  .my-stage { height: clamp(320px, 50vh, 460px); }
  .my-section > .collection-grid,
  .my-section > .dream-owned-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .collection-card-art { max-width: 104px; }
}

/* A field with no owned objects yet keeps its stage full width on wide screens. */
@media (min-width: 900px) {
  .my-section:has(> .dream-owned-grid:empty) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Header note line (a coming-soon field's note; no gauges since 2026-11-10) ---------- */
.dream-tree-progress,
.my-stage-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  width: 100%;
}

.dream-progress-text {
  font-size: 13px;
  font-weight: 800;
  color: #0053c5;
  white-space: nowrap;
}

/* Tree header: title on the left, completion to the right. */
.dream-tree-header {
  flex-wrap: wrap;
}

.dream-tree-progress {
  flex: 1 1 160px;
  justify-content: flex-end;
  width: auto;
}

.dream-tree-progress .dream-progress-text,
.my-stage-progress .dream-progress-text {
  color: #fff;
  text-shadow: var(--bp-text-outline);
  -webkit-text-stroke: var(--bp-text-stroke);
  paint-order: stroke fill;
}

/* My Collection stage: field name, then completion across the top. */
.my-stage-progress {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

/* Four field tabs on a phone: words only, so no label is cut in any language. */
/* (Phones keep the tab icons: the tabs stack icon over name and the strip scrolls sideways.) */

/* ---------- The field's tiles (2026-11-10: one grid, no group titles, counts or gauges) ---------- */
.dream-tree-scroll[data-grouped="true"] {
  overflow-x: hidden;
  padding: 10px;
}

.dream-tree[data-grouped="true"] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dream-group-tree {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  padding: 10px 2px 4px;
  isolation: isolate; /* same as .dream-tree: card badges never rise over the buy bar */
}

/* Type / theme chip, or "Pick" on a recommended start. */
.dream-node-tag {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 3px;
  max-width: 88px;
  overflow: hidden;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(40, 92, 170, 0.85);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dream-node-tag[data-recommended="true"] {
  background: linear-gradient(180deg, #ffb238, #f07d0c);
}

/* Landmark visit stamp in My Collection. */
.dream-owned-visit {
  position: absolute;
  top: -8px;
  left: -4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

/* ---------- Animal ability (GAME_SPEC §4.15): bring a rescued animal along ---------- */
.my-companion-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 4px 12px;
  font-size: 14px;
  white-space: nowrap;
}

.my-companion-btn:disabled {
  background: linear-gradient(180deg, #5fdc2a, #1f9a0c);
  opacity: 1;
}

/* ---------- Step-by-step reveal (GAME_SPEC §4.12, 2026-10-19) ----------
   owned: colour · next: grey · hidden: dark silhouette + lock + '???' · coming soon: shared
   silhouette + lock. State is also told by the lock and the words, never by colour alone. */
.dream-art--next {
  filter: grayscale(1);
}

.dream-art--hidden {
  filter: brightness(0);
  opacity: 0.5;
}

.dream-node[data-visibility="hidden"] .dream-node-name {
  letter-spacing: 0.12em;
}

.dream-node--upcoming {
  position: relative;
  border-style: dashed;
  background: linear-gradient(180deg, #f7f1e3, #ebe0c6);
  cursor: default;
}

.dream-node--upcoming .dream-node-name,
.dream-node--upcoming .dream-node-status {
  color: #7a6a52;
}

.dream-soon-note {
  margin: 4px 4px 12px;
  padding: 12px 14px;
  border: 2px solid var(--cs-gold);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  color: var(--cs-brown);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Animals: emerald / mint, apart from the gold-brown shop (same shapes) ---------- */
#my-subtab-animals {
  background: linear-gradient(180deg, #8eeccd, #4fd2a6);
  color: #064330;
}

#my-subtab-animals[aria-current="page"] {
  background: linear-gradient(180deg, #3ad8a4, #0f9b72);
  border-color: #ffd34e;
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #087052;
}

#my-animals .my-stage {
  border-color: #3cc99a;
  box-shadow: 0 3px 0 #1e8a69, var(--cs-shadow);
}

#my-animals .collection-card {
  border-color: #3cc99a;
  background: linear-gradient(180deg, #f5fffb, #dcf6ec);
  box-shadow: 0 3px 0 #1e8a69, 0 4px 10px rgba(4, 40, 30, 0.22);
}

#my-animals .collection-card[aria-current="true"] {
  border-color: #0fa877;
  box-shadow: 0 0 0 3px rgba(15, 168, 119, 0.45), 0 3px 0 #1e8a69, 0 4px 10px rgba(4, 40, 30, 0.22);
}

/* Being collected: a round play button on the picture's top right (owner 2026-11-10). */
#my-animals .collection-card-play {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #0d6b2a;
  border-radius: 50%;
  background: linear-gradient(180deg, #5fdc2a, #1f9a0c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #0d6b2a;
  cursor: pointer;
}

#my-animals .collection-card-play:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 #0d6b2a;
}

#my-animals .collection-card-play:focus-visible {
  outline: 3px solid #1f8bff;
  outline-offset: 2px;
}

.collection-card-play-icon {
  width: 18px;
  height: 18px;
  margin-left: 3px; /* the triangle's weight sits left of its box */
}

/* Being collected: grey; not met yet: silhouette with the lock (cards and stage). */
#my-animals .collection-card[data-state="collecting"] .collection-card-art {
  filter: grayscale(1);
  opacity: 1;
}

#my-animals .collection-card[data-state="missing"] .collection-card-art {
  filter: brightness(0);
  opacity: 0.45;
}

.my-stage[data-state="collecting"] .my-stage-hero {
  filter: grayscale(1) drop-shadow(0 10px 6px rgba(0, 0, 0, 0.35));
}

.my-stage-lock {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------- Collection redesign (2026-10-19): icon tabs, 3D field cards, item states ---------- */
/* My Collection: one tab per field with its icon over its name; the strip scrolls sideways on a
   narrow screen, so a new field never squeezes the others. */
.my-subtabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Drawn over the title ribbon's hanging tails (2.5.2 8px rhythm). */
  position: relative;
  z-index: 1;
  border-radius: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* A tab is at least as wide as its longest word ("Fahrzeuge" was split as
   "Fahrzeug / e" at 320px); the strip already scrolls if the tabs get wider. */
.my-subtab {
  flex: 1 0 66px;
  min-width: min-content;
  min-height: 62px;
  flex-direction: column;
  gap: 2px;
  padding: 5px 4px 4px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.1;
}

.my-subtab-icon {
  width: 32px;
  height: 32px;
}

.my-subtab-label {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}

.my-subtab[aria-current="page"] {
  border-color: var(--cs-gold);
  background: linear-gradient(180deg, #fffbe0, #ffe48f);
  color: var(--cs-brown);
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 var(--cs-gold-lo);
}

.my-subtab[data-state="soon"] .my-subtab-icon {
  filter: saturate(0.55);
}

.my-subtab .notification-badge {
  top: -4px;
  right: -2px;
}

/* Dream Shop field cards: warm cream, gold rim, inner light and a little depth. */
.dream-category-card {
  border-width: 3px;
  background: linear-gradient(180deg, #fffaf0 0%, #fbecc9 100%);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 rgba(185, 129, 31, 0.28), 0 4px 0 var(--cs-gold-lo), 0 8px 14px rgba(20, 10, 2, 0.28);
}

.dream-category-art {
  border: 2px solid rgba(185, 129, 31, 0.35);
  box-shadow: inset 0 2px 6px rgba(90, 51, 19, 0.22);
  box-sizing: border-box;
}

.dream-category-card[data-state="soon"] .dream-category-hint {
  padding: 2px 10px;
  border-radius: 999px;
  background: #ebe2cd;
  color: #7a6a52;
}

/* My Collection cards: owned in colour, next in grey, '???' as a silhouette with the lock,
   coming soon as the shared silhouette (dashed). */
.dream-owned-art-slot {
  width: 100%;
}

.dream-owned-art-slot > .dream-owned-lock {
  width: 30px;
}

/* A My Collection card's list item: it wraps the button without being a grid box itself. */
.dream-owned-cell {
  display: contents;
}

/* My Collection: an item not owned yet shows the lock and "Locked" only (2026-11-10). */
.dream-owned-card--locked .dream-owned-art-slot {
  aspect-ratio: 8 / 5;
}

.dream-owned-card--locked .dream-owned-art-slot > .dream-owned-lock {
  width: 40px;
}

.dream-owned-card--locked .dream-owned-name {
  color: #6b7f99;
}

/* A locked item the coins can buy now: the shop's green price button under "Locked" (owner 2026-11-10). */
.dream-owned-card--locked .dream-owned-price {
  align-self: center;
}

.dream-owned-card[data-visibility="next"] {
  background: linear-gradient(180deg, #fbf8f1, #efe7d6);
}

.dream-owned-card[data-visibility="hidden"],
.dream-owned-card--upcoming {
  background: linear-gradient(180deg, #f1ebdd, #e2d8c2);
}

.dream-owned-card--upcoming {
  border-style: dashed;
}

.dream-owned-card[data-visibility="next"] .dream-owned-desc {
  color: #0053c5;
  font-weight: 900;
}

.dream-owned-card[data-visibility="hidden"] .dream-owned-name,
.dream-owned-card--upcoming .dream-owned-name {
  color: #6f604a;
}

/* ---------- Group chips (GAME_SPEC §4.12 세부 분류) ----------
   One row per screen, scrolls sideways when there are many. A chip with nothing in it yet shows
   the lock and "soon" (words as well as colour). */
.dream-chips {
  /* Never squeezed by the scrolling area below (it would cut the chips off). */
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin: 0 0 2px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dream-chip {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border: 2px solid var(--cs-gold);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf5, var(--cs-cream));
  color: var(--cs-brown);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 var(--cs-gold-lo);
}

.dream-chip[aria-selected="true"] {
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  border-color: #ffd34e;
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 var(--cs-blue-edge);
}

.dream-chip[data-state="soon"] {
  background: linear-gradient(180deg, #f1ebdd, #e2d8c2);
  color: #6f604a;
}

.dream-chip[data-state="soon"][aria-selected="true"] {
  background: linear-gradient(180deg, #a9b4c4, #7c899b);
  color: #fff;
}

.dream-chip-lock {
  width: 16px;
  height: 16px;
}

.dream-chip-soon {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
}

/* Right under the menu above them (field header). My Collection (2.5.2, owner 2026-10-31): 8px from the
   tab strip's outer bottom, its 3px gold shadow included (strip margin 8 + 1 - the chip row's 2px top
   padding + the 3px shadow = 8px to the chips). */
#my-chips {
  margin-top: 1px;
}

#dream-chips {
  margin-top: -6px;
}

/* The animal book's chips are emerald, like its tab. */
#my-chips[data-section="animals"] .dream-chip[aria-selected="true"] {
  background: linear-gradient(180deg, #3ad8a4, #0f9b72);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #087052;
}

#my-chips[data-section="animals"] .dream-chip {
  border-color: #3cc99a;
}

/* A soon chip's note spans the whole card grid. */
.dream-owned-grid > .dream-soon-note {
  grid-column: 1 / -1;
}

/* ---------- Animal book upgrade (GAME_SPEC §4.18): grade, ability, reward effects ----------
   Grade = small star marks (text) + name; the reward star picture only marks a rescued friend.
   Effects never move, sit behind or beside the art, and take no taps. */
.animal-grade {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 1px 7px 2px;
  border: 1.5px solid #ffd34e;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f6a58, #154536);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.animal-grade-stars {
  color: #ffd34e;
  letter-spacing: -1px;
}

.animal-grade[data-stars="0"] .animal-grade-stars {
  color: #d6efe6;
  letter-spacing: 0;
}

/* Five stars and a long grade name (pl "Legendarny") do not fit one line on
   narrow cards: the name moves under the stars instead of being cut. */
.animal-grade {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0;
}

.animal-grade-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-card-show {
  position: relative;
  isolation: isolate;
}

.collection-card-show .collection-card-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 132%;
  max-width: none;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  pointer-events: none;
}

.collection-card-show .collection-card-star {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 26%;
  max-width: 34px;
  aspect-ratio: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

#my-animals .collection-card[data-companion="true"] {
  border-color: #ffc421;
  background: linear-gradient(180deg, #fffbea, #fdeeb8);
  box-shadow: 0 0 0 3px rgba(255, 196, 33, 0.55), 0 3px 0 #b77d00, 0 4px 12px rgba(60, 40, 0, 0.3);
}

.collection-card[data-companion="true"] .collection-card-badge {
  background: linear-gradient(180deg, #ffcf3a, #f08a00);
  color: #fff;
}

.collection-card-preview {
  color: #11795a;
  font-size: clamp(10px, 1.6vh, 12px);
  font-weight: 800;
  line-height: 1.2;
}

/* Coming soon: the shared "?" mark, a lock and the words; nothing to press. */
#my-animals .collection-card--upcoming {
  justify-content: center;
  border-style: dashed;
  background: linear-gradient(180deg, #eef6f2, #d9e9e2);
  box-shadow: none;
}

#my-animals .collection-card--upcoming .collection-card-mystery {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64%;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(40, 80, 66, 0.14);
  color: rgba(40, 80, 66, 0.45);
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 900;
}

#my-animals .collection-card--upcoming .collection-card-name {
  color: #4f6f63;
  font-size: 14px;
}

/* Showcase: grade beside the name, rays behind the companion, the ability under the stage. */
.my-stage-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}

.my-stage-rays {
  position: absolute;
  left: 50%;
  bottom: 4%;
  height: 86%;
  width: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
  opacity: 0.8;
  pointer-events: none;
}

.my-animal-ability {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 2px solid #3cc99a;
  border-radius: 16px;
  background: linear-gradient(180deg, #f5fffb, #dcf6ec);
  box-shadow: 0 2px 0 #1e8a69;
  color: #24453a;
}

.my-animal-ability-name {
  color: #0f7d5c;
  font-size: 15px;
  font-weight: 900;
}

.my-animal-ability-desc {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 900px) {
  #my-animals > .collection-grid { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  #my-animals > .my-stage,
  #my-animals > .my-animal-ability,
  #my-animals > .my-empty { grid-column: 1; }
}

/* ---------- Red "buy" badge (GAME_SPEC §4.12): something can be bought now ----------
   The shared red "!" badge; on the opposite corner from NEW marks and green counts, so
   both can show. It stays until coins run short. */
/* An item card: top right (NEW only marks owned items, so the two never meet); the left has the tag. */
.dream-node .dream-buy-badge {
  top: -7px;
  right: -6px;
}

/* A field card: top left, opposite its green NEW count. */
.dream-category-card .dream-buy-badge {
  top: -6px;
  left: -6px;
  right: auto;
}

.shop-mode .dream-buy-badge {
  top: -7px;
  left: -6px;
  right: auto;
}

.bottom-nav-btn .dream-buy-badge {
  top: 1px;
  left: auto;
  right: calc(50% + 12px);
  z-index: 4;
}

.btn-lobby-icon .dream-buy-badge {
  top: -4px;
  right: -4px;
}

/* An animal opened from the rescue map (DreamShopUi.showAnimal, 2.5.2 design §4): its card is outlined
   for a moment. The outline is the moving part, so the card's own look stays editable. */
.collection-card[data-spotlight="true"] {
  outline: 4px solid #ffe066;
  outline-offset: 3px;
  animation: collection-card-spotlight 1.6s ease-out both;
}

@keyframes collection-card-spotlight {
  0%, 60% { outline-color: #ffe066; }
  100% { outline-color: rgba(255, 224, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .collection-card[data-spotlight="true"] { animation: none; }
}