/* The look tint goes on .tint (its own layer) so the dark legibility veil behind the dialogue stays intact. */
/* Free color / outfit looks. Mild grades so faces stay clear and Hex's teal lantern stays teal. */
.look-dusk .layer img,
.look-dusk .stage img { filter: saturate(.92) brightness(.96) hue-rotate(-8deg); }
.look-dusk .tint { background: linear-gradient(180deg, rgba(40, 50, 90, .18), rgba(10, 12, 24, .35)); }

.look-ember .layer img,
.look-ember .stage img { filter: saturate(1.08) brightness(1.02) sepia(.12); }
.look-ember .tint { background: linear-gradient(180deg, rgba(80, 40, 16, .10), rgba(20, 10, 6, .28)); }

.look-steel .layer img,
.look-steel .stage img { filter: saturate(.78) contrast(1.06) brightness(1.02); }
.look-steel .tint { background: linear-gradient(180deg, rgba(36, 48, 60, .16), rgba(8, 10, 14, .32)); }

.look-forest .layer img,
.look-forest .stage img { filter: saturate(.9) brightness(.98) hue-rotate(12deg); }
.look-forest .tint { background: linear-gradient(180deg, rgba(20, 50, 36, .14), rgba(6, 12, 10, .32)); }

.look-midnight .layer img,
.look-midnight .stage img { filter: saturate(.86) brightness(.88) contrast(1.08); }
.look-midnight .tint { background: linear-gradient(180deg, rgba(8, 10, 24, .28), rgba(4, 6, 12, .5)); }

.look-default .tint { /* unchanged */ }

.look-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: .8rem 0 1rem; }
.look-pick {
  appearance: none; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: inherit;
  border-radius: .7rem; padding: .7rem .45rem .65rem;
  font: inherit; text-align: center; min-height: 44px;
}
.look-pick b { display: block; font-size: .92rem; }
.look-pick span { display: block; font-size: .72rem; opacity: .7; margin-top: .15rem; }
.look-pick.on { border-color: var(--acc, #b993ff); background: color-mix(in srgb, var(--acc, #b993ff) 18%, transparent); }
.look-swatch { width: 28px; height: 8px; border-radius: 99px; margin: 0 auto .35rem; }
.look-swatch.default { background: linear-gradient(90deg, #6f9bff, #b993ff); }
.look-swatch.dusk { background: linear-gradient(90deg, #3d4e8a, #7a6bb3); }
.look-swatch.ember { background: linear-gradient(90deg, #c47a3a, #8a3a22); }
.look-swatch.steel { background: linear-gradient(90deg, #8aa0b3, #4d5c6a); }
.look-swatch.forest { background: linear-gradient(90deg, #3d7a5a, #1e3d30); }
.look-swatch.midnight { background: linear-gradient(90deg, #2a2e55, #0d1020); }

.premium-later {
  margin-top: 1rem; padding: .9rem .95rem 1rem;
  border: 1px dashed rgba(255,255,255,.16); border-radius: .85rem;
  opacity: .85;
}
.premium-later h3 { margin: 0 0 .35rem; font-size: 1rem; }
.premium-later p, .premium-later li { font-size: .88rem; opacity: .88; }
.premium-later .locked { pointer-events: none; filter: grayscale(.2); opacity: .7; }

/* Hex keeps a true teal lantern in every look: no hue shift on his scene, only light and saturation. */
.look-dusk .layer.p-hex img { filter: saturate(.92) brightness(.96); }
.look-forest .layer.p-hex img { filter: saturate(.9) brightness(.98); }