/* World and Collection screens: shared surface tokens, the view backdrop and
   the World scene cards. Collection details are in css/dreamShop.css.
   Real elements with ids (web-ui-style.md §6): no pseudo-elements, no forced
   priority on visual properties. Layout (grid, widths, breakpoints) is kept
   in the container rules; cards only carry their look. */

:root {
  --cs-cream: #fff8e6;
  --cs-cream-deep: #f6e6bf;
  --cs-gold: #f0bf45;
  --cs-gold-hi: #fff3b0;
  --cs-gold-lo: #b9811f;
  --cs-brown: #5a3313;
  --cs-brown-soft: #7a5432;
  --cs-blue-top: #2a95ff;
  --cs-blue-bottom: #0a55c9;
  --cs-blue-edge: #06348a;
  --cs-radius: 22px;
  --cs-shadow: 0 6px 16px rgba(20, 12, 4, 0.35);
  --cs-content-width: 560px;
  --cs-content-width-wide: 1080px;
}

/* The office stays visible behind World / Collection, dimmed and warm, with
   a blue band under the title (lower contrast so characters and text lead). */
.hybrid-lobby-view {
  background:
    linear-gradient(180deg, rgba(8, 66, 172, 0.9) 0, rgba(8, 66, 172, 0.5) 110px, rgba(46, 26, 10, 0.4) 240px, rgba(30, 15, 5, 0.74) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.hybrid-view-title {
  margin: 0 0 10px;
  text-align: center;
  color: #fff;
  font-size: clamp(28px, 4.4vh, 40px);
  line-height: 1.15;
}

/* Title ribbon (owner design 2026-10-29) behind the World and Collection titles; Home and the
   tournament keep their own headers, the shop has its sign. The title sits on the ribbon's blue
   panel (about 21-82% across and 36-75% down the art) and keeps one line. About half its first size
   (owner 2026-10-31, 2.5.2) so the content starts higher. */
.view-title-ribbon {
  position: relative;
  flex: 0 0 auto;
  width: min(190px, 50%);
  /* 8px from the band's bottom edge to the next row (owner 2026-10-31): the band ends 49/900 of the
     ribbon's width above the image bottom; the tails may run behind the row. */
  margin: 0 auto calc(8px - min(190px, 50%) * 49 / 900);
  container-type: inline-size;
}

.view-title-ribbon-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(10, 20, 60, 0.4));
}

.view-title-ribbon-text {
  position: absolute;
  left: 25%;
  right: 21%;
  top: 56%;
  margin: 0;
  transform: translateY(-50%);
  font-size: clamp(14px, 11cqw, 21px);
  line-height: 1;
  white-space: nowrap;
}

/* ---------- World ---------- */
.world-grid {
  width: min(var(--cs-content-width), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.world-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--cs-gold);
  border-radius: var(--cs-radius);
  background: var(--cs-cream);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cs-gold-lo), var(--cs-shadow);
  touch-action: manipulation;
}

.world-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.world-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cs-gold-lo), var(--cs-shadow);
}

/* Scene cards: picture fills the card, text sits on the shade at the bottom. */
.world-card--scene {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: space-between;
  gap: 8px 12px;
  aspect-ratio: 16 / 10;
  min-height: 188px;
  padding: 14px 16px;
}

.world-card-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.world-card-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(25, 12, 3, 0) 38%, rgba(25, 12, 3, 0.18) 55%, rgba(25, 12, 3, 0.8) 100%);
  pointer-events: none;
}

.world-card-copy {
  flex: 1 1 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.world-card-title {
  color: #fff;
  font-size: clamp(22px, 6.2vw, 32px);
  font-weight: 900;
  line-height: 1.1;
}

.world-card-desc {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.world-card-cta {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid #ffd34e;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cs-blue-top), var(--cs-blue-bottom));
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--cs-blue-edge), 0 6px 12px rgba(0, 0, 0, 0.3);
}

.world-card-cta-arrow {
  font-size: 1.35em;
  line-height: 1;
}

/* Not-ready scene card (Memory Challenge): same size and layout as the others;
   its picture is gray with the gallery lock in front, the card keeps its colours. */
.world-card--scene > .world-card-lock {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 64px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.world-card--locked {
  cursor: default;
}

/* Not-ready compact card (kept for other not-ready entries): only the icon is gray with the lock. */
.world-card--soon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--cs-cream), var(--cs-cream-deep));
  color: var(--cs-brown);
}

.world-card-icon-slot {
  width: 64px;
  height: 64px;
}

.world-card-icon-slot > img:first-child {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.world-card--soon .world-card-title {
  font-size: clamp(19px, 5vw, 24px);
}

.world-card--soon .world-card-desc {
  color: var(--cs-brown-soft);
  font-size: 13px;
  text-shadow: none;
}

.world-card-cta--soon {
  min-height: 40px;
  margin-left: 0;
  padding: 0 14px;
  border-color: #dfe6ef;
  background: linear-gradient(180deg, #a9b4c4, #7c899b);
  font-size: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #5d6878;
}

@media (hover: hover) and (pointer: fine) {
  .world-card--scene:hover .world-card-cta {
    filter: brightness(1.08);
  }
}

@media (max-width: 360px) {
  .world-card--scene {
    padding: 12px;
  }

  .world-card-cta {
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
  }

  .world-card--soon {
    gap: 8px;
    padding: 10px;
  }

  .world-card-icon-slot,
  .world-card-icon-slot > img:first-child {
    width: 52px;
    height: 52px;
  }
}

/* Wide screens: the two scene cards side by side, the not-ready card below. */
@media (min-width: 900px) {
  .world-grid {
    width: min(var(--cs-content-width-wide), 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }


  .world-card-title {
    font-size: 30px;
  }
}

/* Korean wraps at word boundaries (Japanese keeps the default line breaking). */
html:lang(ko) #screen-world,
html:lang(ko) #screen-collection {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- Scroll regions (layout only) ----------
   The view is a fixed column: title and tabs keep their place, and the list
   below them is the one vertical scroll box, so long lists flow naturally
   under the bottom menu instead of moving the whole screen. */
.hybrid-view-title,
.shop-modes,
.my-subtabs,
.dream-tree-header,
.dream-tree-complete {
  flex: 0 0 auto;
}

.dream-shop,
.my-collection,
.dream-tree-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.content-scroll,
#screen-world > .world-grid,
.dream-category-grid,
.dream-tree-layout,
.my-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  align-content: start;
  /* Rows keep their content height (a fixed-height grid would squeeze the cards). */
  grid-auto-rows: max-content;
  /* Room for card shadows and focus rings, and for the last card above the menu. */
  padding: 4px 4px calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.dream-category-grid,
.dream-tree-layout,
.my-section {
  width: 100%;
}