/* Aspetto sheet: tall centred sheet, phone-ratio preview, info cards, scrollable chip rows. */

/* Kept words stay gold on every aspetto and tema */
html[data-look] .kept,
html[data-theme] .kept {
  color: #d9b862;
  background: linear-gradient(transparent 62%, rgba(212, 180, 106, 0.3) 62%);
}
html[data-light="day"][data-look] .kept {
  color: #c9a24e;
}

#lookPop.bugpop {
  left: max(10px, calc(50% - 290px));
  right: max(10px, calc(50% - 290px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding: 10px 14px 16px;
  min-width: 0;
  overflow-x: hidden;
}
#lookPop .sheet-title { margin-bottom: 8px; }
body:has(#lookPop.on) #hbHelpBtn { visibility: hidden; }
#lookPop #lookBody { min-width: 0; max-width: 100%; }

/* —— Preview —— */
#lookPop .look-pop-preview {
  margin: 0 0 10px;
  display: flex;
  justify-content: center;
}
.look-stage {
  --p: #0e1812; --g: #d4b46a; --c: #2a2822; --i: #d4cbb0; --ci: #eee6d4; --pn: #323028; --b: #d4b46a;
  position: relative;
  width: min(100%, calc(46dvh * 16 / 11));
  aspect-ratio: 16 / 11;
  border-radius: 18px;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--g) 30%, transparent);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
  color: var(--i);
}
.look-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 70% at 14% 0%, color-mix(in srgb, var(--g) 22%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 60% at 94% 100%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--p) 80%, var(--g) 8%), var(--p) 50%, color-mix(in srgb, var(--p) 70%, #000));
}
.look-stage-deco,
.look-stage-tile {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.look-stage-deco {
  inset: 0;
  background: var(--th-mini, none);
}
.look-stage-tile {
  --th-tile-size: var(--th-tile-mini, 0px);
  left: 0;
  right: 0;
  top: calc(-1 * var(--th-tile-size));
  bottom: 0;
  background: var(--th-tile, none) 0 0 / var(--th-tile-size) var(--th-tile-size) repeat;
  opacity: var(--th-tile-op, 0.6);
  animation: var(--th-anim, none) var(--th-dur, 60s) linear infinite;
}
.look-stage-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 4cqw 4.4cqw 4.4cqw;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.look-stage-header {
  display: flex;
  align-items: center;
  gap: 2cqw;
}
.look-stage-orb {
  flex: 0 0 auto;
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.5cqw;
  font-weight: 700;
  color: #f7f2e6;
}
.look-stage-orb--mark {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), transparent 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 40%, transparent);
}
.look-stage-leaf {
  width: 80%;
  height: 80%;
  background: center / contain no-repeat url("/flyleaf-mark-leaf.png?v=1");
}
.look-stage-orb--glass {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08) 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px color-mix(in srgb, var(--th-ring, rgba(255, 255, 255, 0.4)) 70%, transparent);
}
.look-stage-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.look-stage-brand b {
  font-family: "Source Serif 4", serif;
  font-size: 4.4cqw;
  font-weight: 650;
  color: var(--g);
}
.look-stage-brand small {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 2.4cqw;
  color: color-mix(in srgb, var(--g) 70%, var(--i));
}
.look-stage-panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4cqw;
}
.look-stage-card {
  min-height: 0;
  overflow: hidden;
  border-radius: 3cqw;
  background: var(--pn);
  color: var(--ci);
  box-shadow: inset 0 0 0 1px var(--th-edge, color-mix(in srgb, var(--g) 22%, transparent));
  padding: 2.6cqw 3cqw;
  display: flex;
  flex-direction: column;
  gap: 1.8cqw;
}
.look-stage-card small {
  font-size: 2.3cqw;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ci) 55%, transparent);
}
.look-stage-card p {
  margin: 0;
  font-family: "Source Serif 4", serif;
  font-size: 3.2cqw;
  line-height: 1.35;
}
.look-stage-kept {
  color: #d9b862;
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(212, 180, 106, 0.3) 62%);
}
.look-stage-line {
  display: block;
  height: 1.5cqw;
  border-radius: 1cqw;
  background: color-mix(in srgb, var(--ci) 34%, transparent);
  width: 92%;
}
.look-stage-line.mid { width: 76%; }
.look-stage-line.short { width: 54%; }
.look-stage-cta {
  height: 8.6cqw;
  border-radius: 2.6cqw;
  background: var(--th-btn, var(--b));
  color: var(--th-btn-ink, #1a1610);
  font-size: 3.2cqw;
  font-weight: 650;
  display: grid;
  place-items: center;
}
.look-stage-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6cqw;
}
.look-stage-row span {
  height: 6.4cqw;
  border-radius: 2cqw;
  display: grid;
  place-items: center;
  font-size: 2.4cqw;
  color: var(--ci);
  background: color-mix(in srgb, var(--pn) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 18%, transparent);
}

/* Rarity on the preview (small, like the page) */
.look-stage[data-rarity-preview="rare"] .look-stage-orb--glass {
  background: radial-gradient(circle at 32% 28%, rgba(180, 210, 255, 0.45), rgba(255, 255, 255, 0.08) 60%);
}
.look-stage[data-rarity-preview="epic"] .look-stage-card {
  box-shadow: inset 0 0 0 1px var(--th-edge, color-mix(in srgb, var(--g) 45%, transparent)), 0 0 0 1px rgba(155, 93, 229, 0.25);
}
.look-stage[data-rarity-preview="legendary"] .look-stage-orb--mark {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 60%, transparent), 0 0 3cqw 0.4cqw rgba(240, 208, 96, 0.4);
}

/* Theme specifics on the preview */
.look-stage[data-theme-preview="pixel"] .look-stage-card,
.look-stage[data-theme-preview="pixel"] .look-stage-cta,
.look-stage[data-theme-preview="pixel"] .look-stage-row span {
  border-radius: 0.6cqw;
  box-shadow: 0.8cqw 0.8cqw 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--th-edge);
}
.look-stage[data-theme-preview="pixel"] .look-stage-orb {
  border-radius: 0;
  clip-path: polygon(30% 0, 70% 0, 70% 8%, 84% 8%, 84% 16%, 92% 16%, 92% 30%, 100% 30%, 100% 70%, 92% 70%, 92% 84%, 84% 84%, 84% 92%, 70% 92%, 70% 100%, 30% 100%, 30% 92%, 16% 92%, 16% 84%, 8% 84%, 8% 70%, 0 70%, 0 30%, 8% 30%, 8% 16%, 16% 16%, 16% 8%, 30% 8%);
}
.look-stage[data-theme-preview="noir"]::before,
.look-stage[data-theme-preview="noir"] .look-stage-deco {
  filter: grayscale(1) contrast(1.15);
}
.look-stage[data-theme-preview="neon"] .look-stage-card {
  box-shadow: inset 0 0 0 1px var(--th-edge), 0 0 3cqw -1cqw rgba(94, 240, 255, 0.6);
}
.look-stage[data-theme-preview="neon"] .look-stage-cta {
  box-shadow: 0 0 3cqw -0.6cqw rgba(255, 122, 216, 0.75);
}
.look-stage[data-theme-preview="neon"] .look-stage-brand b {
  text-shadow: 0 0 1.6cqw rgba(94, 240, 255, 0.8);
}
.look-stage[data-theme-preview="acquerello"] .look-stage-card {
  border-radius: 5cqw;
}
.look-stage[data-theme-preview="natale"] .look-stage-card {
  background-image: radial-gradient(ellipse 60% 1.4cqw at 50% 0, rgba(236, 244, 248, 0.4), transparent 100%);
  background-repeat: no-repeat;
}

/* —— Info —— */
.look-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 6px;
}
.look-info-card {
  min-width: 0;
  padding: 9px 11px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pane, #323028) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold, #d4b46a) 16%, transparent);
}
.look-info-card small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8a7d62);
}
.look-info-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 3px;
}
.look-info-head b {
  font-family: "Source Serif 4", serif;
  font-size: 17px;
  font-weight: 650;
  color: var(--card-ink, #eee6d4);
}
.look-rarity {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--rarity);
  background: color-mix(in srgb, var(--rarity) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity) 50%, transparent);
}
.look-info-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--card-ink, #eee6d4) 78%, transparent);
}
.look-info-card .look-info-state {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
}
.look-info-state.ok { color: color-mix(in srgb, var(--gold, #d4b46a) 90%, #fff); }
.look-info-state.lock { color: #e0a080; }

/* —— Chip rows —— */
#lookPop .look-pop-label {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
#lookPop .look-pop-label span { letter-spacing: 0; text-transform: none; font-weight: 500; }
.look-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  touch-action: pan-x;
  min-width: 0;
  width: 100%;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  cursor: grab;
}
.look-chip-row[data-dragging="1"] { cursor: grabbing; }
.look-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rarity, var(--gold)) 40%, transparent);
  background: color-mix(in srgb, var(--pane, #323028) 70%, transparent);
  color: var(--card-ink, #eee6d4);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.look-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rarity);
}
.look-chip-theme { --rarity: var(--gold, #d4b46a); }
.look-chip.on {
  background: color-mix(in srgb, var(--rarity, var(--gold)) 24%, transparent);
  border-color: var(--rarity, var(--gold));
  box-shadow: 0 0 0 1px var(--rarity, var(--gold));
}
.look-chip.locked { opacity: 0.55; }
.look-chip.peek {
  opacity: 1;
  border-style: dashed;
  border-color: var(--rarity);
}
.look-chip-lock:empty { display: none; }

/* —— Season pack: one fan, not a second gallery —— */
.look-season { margin: 12px 0 2px; }
.look-season-fan {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}
.look-season-fan i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--seed, #d4b46a) 46%, color-mix(in srgb, var(--seed, #d4b46a) 55%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.look-season-fan i.lock { opacity: 0.42; }
.look-season-fan i.open { opacity: 1; }
.look-season-line,
.look-season-note {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--card-ink, #eee6d4) 82%, transparent);
}
.look-season-note {
  font-size: 11.5px;
  color: var(--muted);
}
.look-season-buy {
  width: 100%;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold, #d4b46a) 58%, transparent);
  background: transparent;
  color: var(--gold, #d4b46a);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.look-season-buy[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .look-season-fan i.lock {
    animation: seasonSeed 7s ease-in-out infinite;
  }
  .look-season-fan i.lock:nth-child(3n) { animation-delay: -2s; }
  .look-season-fan i.lock:nth-child(3n + 2) { animation-delay: -4s; }
}
@keyframes seasonSeed {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.72; }
}

/* —— Atelier —— */
#lookPop .look-atelier { margin-top: 12px; }
.look-atelier-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}
#lookPop .look-atelier .look-fields { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 380px) {
  .look-info { grid-template-columns: 1fr; }
  #lookPop .look-atelier .look-fields { grid-template-columns: 1fr 1fr; }
}