/* Phase 2: extend the approved Luna composition; no main-site imports. */
.dg-chrome-brand { gap: 10px; min-height: 44px; }
.dg-chrome-logo { width: 28px; height: 28px; object-fit: cover; }
.dg-chrome-wordmark {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.dg-chrome { align-items: center; padding-top: max(10px,env(safe-area-inset-top)); }
.dg-chrome-back { min-height: 44px; display: flex; align-items: center; }
.gallery-mask-definitions { position: absolute; pointer-events: none; }
.flor-cutout, .flor-contour {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; user-select: none; opacity: 0;
}
.flor-cutout { mask: url(#flor-mask); -webkit-mask: url(#flor-mask); }
.flor-cutout.is-decoded { opacity: 1; }
.flor-contour { transition: opacity 480ms ease; }
.flor-contour use { fill: none; stroke: #fff8e0; stroke-width: 1.8px; stroke-linejoin: round; }
body.flor-discovered .flor-contour { opacity: .32; }
body.flor-keyboard .flor-contour { opacity: .85; }
body.flor-discovered .flor-cutout { filter: brightness(1.025); }
body.luna-active .flor-contour { opacity: 0; }
body.luna-active .flor-cutout { filter: none; }
body.luna-active[data-artwork="001"] .flor-cutout,
body.luna-active[data-artwork="002"] .luna-cutout { opacity: 0; }
.hotspot[data-id="002"], .hotspot[data-id="002"]:hover, .hotspot[data-id="002"]:focus-visible {
  opacity: 1; border-radius: 0; background: transparent; box-shadow: none; cursor: zoom-in;
}
.hotspot[data-id="002"]::after { display: none; }
.flor-world-label {
  position: absolute; left: 66%; top: 83%; transform: translateX(-50%);
  font: 400 11px var(--font-mono); letter-spacing: .17em; text-transform: uppercase;
  color: #332921; padding: 7px 10px; background: rgba(248,239,219,.9);
  opacity: 0; transition: opacity 300ms; pointer-events: none; white-space: nowrap;
}
.flor-world-label span { margin-left: 10px; }
body.flor-discovered .flor-world-label { opacity: 1; }
body.flor-keyboard .flor-world-label { outline: 2px solid #3c2b1f; outline-offset: 4px; }
body.luna-active .flor-world-label { opacity: 0; }
/* The shared crop stays still; ambient depth uses the Phase 1 bounded planes. */
#world { will-change: auto; }
body.luna-active #world { will-change: transform; }
.gallery-views { display: flex; gap: 12px; align-items: center; pointer-events: auto; }
.gallery-views button {
  font: 400 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  min-height: 44px; min-width: 44px; border-bottom: 1px solid transparent;
}
.gallery-views button[aria-pressed="true"] { border-bottom-color: rgba(255,250,240,.65); }
#gallery-framing { border-bottom-color: transparent; }
#gallery-framing[aria-pressed="true"] { border-bottom-color: rgba(255,250,240,.65); }
body.reduce-motion .flor-contour, body.reduce-motion .flor-world-label { transition: none; }
@media (max-width: 720px) {
  .dg-chrome-wordmark { letter-spacing: .14em; }
}
@media (max-width: 900px) {
  .flor-world-label { display: none; }
  #luna-discovery { padding-left: max(22px,env(safe-area-inset-left)); padding-right: max(22px,env(safe-area-inset-right)); gap: 12px; }
  #luna-explore { gap: 8px; }
  .dg-chrome { padding-left: max(18px,env(safe-area-inset-left)); padding-right: max(18px,env(safe-area-inset-right)); }
}
@media (max-width: 420px) {
  .dg-chrome { gap: 12px; }
  .dg-chrome-back { max-width: 104px; font-size: 8px; letter-spacing: .08em; }
  #luna-discovery { flex-wrap: wrap; row-gap: 0; padding-top: 36px; padding-bottom: max(18px,env(safe-area-inset-bottom)); }
  #luna-explore { font-size: 15px; }
  .gallery-views { gap: 5px; }
}
@media (max-width: 340px) {
  .dg-chrome-wordmark { font-size: 9px; }
  .dg-chrome-brand { gap: 7px; }
  .dg-chrome-back { max-width: 83px; font-size: 7px; }
  .dg-chrome-logo { width: 24px; height: 24px; }
}