/* World v4: Look closer, Full view and room restyle (docs/WORLD-V4.md §8.5, §9). Built by WP3.
   The build is the picture: the bar sits along the bottom, never over it. */

/* -------------------------------------------------------------- look closer -- */
.ulook {
  position: absolute; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 24;
  display: flex; align-items: center; gap: 0.6rem; max-width: calc(100vw - 2rem); padding: 0.45rem 0.5rem;
  background: rgb(10 12 17 / 0.94); border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), var(--sc-edge);
}
.ulook[hidden] { display: none; }
.ulook__t { display: grid; gap: 0.1rem; min-width: 0; padding: 0 0.3rem; }
.ulook__t b { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 660; font-size: 0.98rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.ulook__t span { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ulook__acts { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.ulook__nav {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-sm);
  background: rgb(14 18 24 / 0.9); color: var(--sc-ink); font: 600 1.3rem/1 var(--sc-font-text); cursor: pointer;
}
.ulook__nav:hover { border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.ulook__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .ulook { flex-wrap: wrap; justify-content: center; width: calc(100vw - 2rem); }
  .ulook__t { order: -1; flex: 1 1 100%; text-align: center; }
  .ulook__t b { max-width: none; }
  .ulook__acts { flex-wrap: wrap; justify-content: center; }
}
/* phones: a compact bar, so the build keeps the screen (Try it and the rest are one tap away in Full view) */
@media (max-width: 760px) {
  .ulook { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem 0.4rem; width: calc(100vw - 1.5rem); padding: 0.4rem; }
  .ulook > .ulook__nav:first-child { grid-area: 1 / 1; }
  .ulook__t { grid-area: 1 / 2; order: 0; text-align: center; }
  .ulook > .ulook__nav:last-child { grid-area: 1 / 3; }
  .ulook__acts { grid-column: 1 / -1; justify-content: center; }
  .ulook__more { display: none; }
}

/* ---------------------------------------------------------------- full view -- */
.ufull { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(0.8rem, env(safe-area-inset-top)) 0.8rem max(0.8rem, env(safe-area-inset-bottom)); }
.ufull__bg { position: absolute; inset: 0; border: 0; background: rgb(3 4 6 / 0.86); backdrop-filter: blur(4px); cursor: pointer; }
.ufull__box {
  position: relative; z-index: 1; width: min(1280px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; gap: 0.6rem;
  padding: 0.8rem; background: #0b0d12; border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3);
}
.ufull__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.ufull__h { margin: 0.1rem 0 0.1rem; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 660; font-size: 1.2rem; line-height: 1.2; }
.ufull__head .umuted { margin: 0; font-size: 0.84rem; }
/* every image and video whole: contain on a dark mat */
.ufull__stage { min-height: 0; height: min(70vh, 760px); display: grid; place-items: center; background: #05070a; border-radius: var(--sc-r-md); overflow: hidden; touch-action: pan-y; }
.ufull__stage img, .ufull__stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ufull__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.ufull__text { max-width: 40rem; padding: 2rem; }
.ufull__text h2 { font-family: var(--sc-font-display); font-weight: 660; }
.ufull__alt { margin: 0; min-height: 1.2em; font-size: 0.84rem; line-height: 1.45; color: var(--sc-ink-soft); }
.ufull__thumbs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: thin; }
.ufull__thumbs[hidden] { display: none; }
.ufull__th { position: relative; flex: none; width: 5.5rem; height: 3.6rem; padding: 0; border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-sm); background: #05070a; cursor: pointer; overflow: hidden; }
.ufull__th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ufull__th i { position: absolute; inset: auto 0.25rem 0.2rem auto; font-style: normal; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 3px #000; }
.ufull__th.is-on { border-color: var(--gc-neon); box-shadow: var(--gc-neon-glow); }
.ufull__note { margin: 0; font-size: 0.84rem; color: var(--sc-ink-soft); }
.ufull__acts { margin-top: 0; }
@media (max-width: 760px) { .ufull__stage { height: min(62vh, 640px); } .ufull__h { font-size: 1.05rem; } }

/* ------------------------------------------------- restyle (the owner only) -- */
.urestyle { position: absolute; left: 50%; top: calc(4.2rem + env(safe-area-inset-top)); translate: -50% 0; z-index: 12; display: grid; justify-items: center; gap: 0.5rem; max-width: calc(100vw - 2rem); }
.urestyle__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; padding: 0.4rem 0.5rem 0.4rem 0.8rem; background: rgb(10 12 17 / 0.94); border: 1px solid var(--gc-neon); border-radius: 999px; box-shadow: var(--gc-neon-glow); font-size: 0.86rem; }
.urestyle__strip { display: flex; gap: 0.5rem; max-width: calc(100vw - 2rem); overflow-x: auto; padding: 0.5rem; background: rgb(10 12 17 / 0.95); border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3); scrollbar-width: thin; }
.urestyle__strip[hidden] { display: none; }
.urestyle__card { flex: none; width: 10rem; display: grid; gap: 0.2rem; padding: 0.35rem; border: 1px solid var(--gc-line-2); border-radius: var(--sc-r-md); color: var(--sc-ink); text-decoration: none; background: rgb(14 18 24 / 0.9); }
.urestyle__card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; border-radius: var(--sc-r-sm); background: #05070a; }
.urestyle__card b { font-size: 0.84rem; }
.urestyle__card small { font-size: 0.72rem; line-height: 1.3; color: var(--sc-ink-soft); }
.urestyle__card.is-on { border-color: var(--gc-neon); box-shadow: var(--gc-neon-glow); }
.urestyle__card:hover { border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
@media (max-width: 760px) { .urestyle { top: calc(3.8rem + env(safe-area-inset-top)); } .urestyle__card { width: 8.5rem; } }
@media (prefers-reduced-motion: reduce) { .ufull__bg { backdrop-filter: none; } }
/* touch: 44 px targets */
@media (pointer: coarse) {
  .ulook__nav { width: 2.75rem; height: 2.75rem; }
  .ulook .ubtn, .ufull .ubtn, .urestyle .ubtn { min-height: 2.75rem; }
}