/* Flyleaf look — rami ∞ in header BR + cornice. Paid skins swap the frame, not the buttons. */
:root {
  --look-stroke: color-mix(in srgb, #6b5434 72%, var(--gold, #d4b46a));
  --look-stroke-2: color-mix(in srgb, #3a2c1c 78%, var(--gold, #d4b46a));
  --look-leaf: color-mix(in srgb, #4a6a38 78%, var(--gold, #d4b46a));
}

html[data-look="rami"] .look-infinity,
html[data-look="atelier"][data-frame="rami"] .look-infinity {
  display: block;
}
.look-infinity {
  display: none;
  position: absolute;
  inset-inline-end: -4px;
  top: calc(100% - 6px);
  bottom: auto;
  width: min(228px, 58vw);
  height: auto;
  z-index: 0;
  pointer-events: none;
  color: var(--look-stroke);
  overflow: visible;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
}
.look-infinity__wood {
  fill: var(--look-stroke);
  stroke: color-mix(in srgb, var(--look-stroke) 55%, #140e08);
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.look-infinity__under,
.look-infinity__trunk2 { fill: var(--look-stroke-2); }
.look-infinity__cross { fill: #120e0a; opacity: 0.55; }
.look-wood { fill: currentColor; }
.look-wood--thin { opacity: 0.72; }
.wrap > header .brand,
.wrap > header .end,
.wrap > header .chrome-leaf { position: relative; z-index: 1; }

.look-cornice {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}
html[data-look="rami"] .look-cornice,
html[data-look="atelier"][data-frame="rami"] .look-cornice { display: block; }
.look-cornice svg {
  position: absolute;
  width: 92px;
  height: 92px;
  color: var(--look-stroke);
  opacity: 0.9;
  overflow: visible;
}
.look-cornice__tl { top: 118px; inset-inline-start: -8px; }
.look-cornice__tr { top: 118px; inset-inline-end: -8px; transform: scaleX(-1); }
.look-cornice__bl { top: auto; bottom: 4px; inset-inline-start: -14px; transform: scaleY(-1); }
.look-cornice__br { top: auto; bottom: 4px; inset-inline-end: -14px; transform: scale(-1); }
html[dir="rtl"] .look-cornice__tr { transform: none; }
html[dir="rtl"] .look-cornice__tl { transform: scaleX(-1); }

html[data-look="carta"] .look-cornice--rule,
html[data-look="atelier"][data-frame="rule"] .look-cornice--rule {
  display: block;
  pointer-events: none;
  position: absolute;
  inset: 52px 0 10px;
  border: 1px solid color-mix(in srgb, var(--gold, #d4b46a) 38%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--paper, #0e1812) 100%, transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--gold, #d4b46a) 22%, transparent);
  border-radius: 2px;
  z-index: 0;
}
.look-cornice--rule { display: none; }

html[data-look="mare"] .look-cornice--arc,
html[data-look="atelier"][data-frame="arc"] .look-cornice--arc { display: block; }
.look-cornice--arc {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 56px 0 12px;
  z-index: 0;
  border-radius: 28px 28px 18px 18px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #9fd4e0 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--gold, #7eb8c4) 28%, transparent);
}

html[data-look="inchiostro"] .look-cornice--ink,
html[data-look="atelier"][data-frame="ink"] .look-cornice--ink { display: block; }
.look-cornice--ink {
  display: none;
  pointer-events: none;
  position: absolute;
  inset: 58px 6px 14px;
  z-index: 0;
}
.look-cornice--ink i {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: color-mix(in srgb, var(--gold, #c48454) 70%, transparent);
  border-style: solid;
  border-width: 0;
}
.look-cornice--ink i:nth-child(1) { top: 0; inset-inline-start: 0; border-top-width: 1.5px; border-inline-start-width: 1.5px; }
.look-cornice--ink i:nth-child(2) { top: 0; inset-inline-end: 0; border-top-width: 1.5px; border-inline-end-width: 1.5px; }
.look-cornice--ink i:nth-child(3) { bottom: 0; inset-inline-start: 0; border-bottom-width: 1.5px; border-inline-start-width: 1.5px; }
.look-cornice--ink i:nth-child(4) { bottom: 0; inset-inline-end: 0; border-bottom-width: 1.5px; border-inline-end-width: 1.5px; }

/* Paid palettes — buttons keep their radii; only tokens + frame change. */
html[data-look="carta"][data-light="day"] {
  --paper: #1a2218; --ink: #eadcc2; --muted: #8a7a60; --gold: #c4a66a;
  --card: #2a2418; --card-ink: #f0e4cc; --pane: #32281c; --btn: #c4a66a;
}
html[data-look="carta"][data-light="night"],
html[data-look="carta"][data-light="dark"] {
  --paper: #1b1710; --ink: #eadcc2; --muted: #8a7a60; --gold: #c4a66a;
  --card: #262017; --card-ink: #f0e4cc; --pane: #2e261c; --btn: #c4a66a;
}
html[data-look="carta"][data-light="black"] {
  --paper: #0c0a08; --ink: #e2d4b8; --muted: #7a6c54; --gold: #b4924a;
  --card: #16130e; --card-ink: #eadcc2; --pane: #1c1812; --btn: #b4924a;
}

html[data-look="mare"][data-light="day"] {
  --paper: #102228; --ink: #d5eaee; --muted: #7a9aa2; --gold: #6aa8b4;
  --card: #163038; --card-ink: #e4f2f4; --pane: #1c3a42; --btn: #6aa8b4;
}
html[data-look="mare"][data-light="night"],
html[data-look="mare"][data-light="dark"] {
  --paper: #07141a; --ink: #d5eaee; --muted: #7a9aa2; --gold: #6aa8b4;
  --card: #0e222a; --card-ink: #e4f2f4; --pane: #143038; --btn: #6aa8b4;
}
html[data-look="mare"][data-light="black"] {
  --paper: #02080b; --ink: #cfe4e8; --muted: #6a8a90; --gold: #5a98a4;
  --card: #081418; --card-ink: #dff0f2; --pane: #0c1c22; --btn: #5a98a4;
}

html[data-look="inchiostro"][data-light="day"] {
  --paper: #161410; --ink: #e6d8c6; --muted: #8a7c6c; --gold: #c48454;
  --card: #221c16; --card-ink: #efe4d4; --pane: #2a221a; --btn: #c48454;
}
html[data-look="inchiostro"][data-light="night"],
html[data-look="inchiostro"][data-light="dark"] {
  --paper: #0e0c0a; --ink: #e6d8c6; --muted: #8a7c6c; --gold: #c48454;
  --card: #1a1612; --card-ink: #efe4d4; --pane: #241e18; --btn: #c48454;
}
html[data-look="inchiostro"][data-light="black"] {
  --paper: #000; --ink: #ddd0be; --muted: #7a6e60; --gold: #b47444;
  --card: #12100c; --card-ink: #e8dcc8; --pane: #181410; --btn: #b47444;
}

html[data-look="carta"] .forest,
html[data-look="mare"] .forest,
html[data-look="inchiostro"] .forest {
  opacity: 1;
  background:
    linear-gradient(to bottom, var(--paper) 0%, var(--paper) 28px, transparent 200px),
    linear-gradient(to top, var(--paper) 0%, var(--paper) 88px, transparent 200px),
    radial-gradient(ellipse 58% 92% at 16% 6%, color-mix(in srgb, var(--gold) 22%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 70% 80% at 92% 96%, color-mix(in srgb, var(--paper) 40%, #000) 0%, transparent 52%),
    linear-gradient(168deg, color-mix(in srgb, var(--paper) 78%, var(--gold)) 0%, var(--paper) 48%, #070b09 100%);
}
html[data-look="carta"] .beam,
html[data-look="mare"] .beam,
html[data-look="inchiostro"] .beam { opacity: 0.55; }

.look-shop { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.look-open-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold, #d4b46a) 32%, transparent);
  background: color-mix(in srgb, var(--pane, #323028) 88%, transparent);
  color: var(--card-ink, #eee6d4);
  text-align: left;
  cursor: pointer;
}
.look-open-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.look-open-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.look-open-copy b {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink, #d4cbb0);
}
.look-open-copy small {
  font-size: 12px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.look-open-chev {
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
  transform: rotate(-45deg);
  margin-top: -4px;
  flex: 0 0 auto;
  opacity: 0.75;
}
.look-shop .label { margin-bottom: 8px; }
.look-skins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.look-skin {
  position: relative;
  min-height: 64px;
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(243, 239, 230, 0.14);
  background: rgba(10, 16, 12, 0.35);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.look-skin.on {
  background: var(--gold);
  color: #1a1610;
  border-color: var(--gold);
  font-weight: 600;
}
.look-skin b { display: block; font-size: 15px; font-weight: 650; }
.look-skin small { display: block; margin-top: 2px; font-size: 11px; opacity: 0.78; font-weight: 500; }
.look-skin .look-lock {
  position: absolute;
  top: 8px;
  inset-inline-end: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.look-skin.on .look-lock { color: #1a1610; opacity: 0.55; }
.look-atelier {
  display: none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  background: color-mix(in srgb, var(--pane, #323028) 88%, transparent);
}
.look-atelier.on { display: block; }
.look-atelier .look-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.look-atelier label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.look-atelier input[type="color"] {
  width: 100%;
  height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.look-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

html[data-light="day"] .look-skin:not(.on) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
@media (max-width: 359px) {
  .look-infinity { width: 168px; top: calc(100% - 2px); }
  .look-cornice svg { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .look-infinity, .look-cornice svg { filter: none; }
}


/* —— 20-skin gallery + rarity —— */
.look-rarity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.look-rarity-chip {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--r);
  border: 1px solid color-mix(in srgb, var(--r) 55%, transparent);
  background: color-mix(in srgb, var(--r) 14%, transparent);
}
.look-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 400px) {
  .look-gallery { grid-template-columns: 1fr 1fr; }
}
.look-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--rarity, var(--gold)) 38%, transparent);
  background: color-mix(in srgb, var(--pane, #323028) 70%, transparent);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rarity, transparent) 18%, transparent);
}
.look-card.on {
  outline: 2px solid var(--rarity, var(--gold));
  outline-offset: 1px;
}
.look-card.locked { opacity: 0.72; }
.look-card-preview {
  position: relative;
  height: 108px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, color-mix(in srgb, var(--g) 28%, transparent), transparent 60%),
    linear-gradient(165deg, var(--p), color-mix(in srgb, var(--p) 70%, #000));
  border: 1px solid color-mix(in srgb, var(--g) 25%, transparent);
  padding: 8px;
  box-sizing: border-box;
}
.look-mini-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.look-mini-orb {
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 70%, #fff);
}
.look-mini-brand {
  flex: 1; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--i) 45%, transparent);
}
.look-mini-glass {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.look-mini-card {
  height: 28px; border-radius: 8px;
  background: var(--c);
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--i) 12%, transparent);
}
.look-mini-row { display: flex; gap: 4px; margin-bottom: 6px; }
.look-mini-row i {
  flex: 1; height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 80%, var(--g));
  opacity: 0.85;
}
.look-mini-cta {
  height: 14px; border-radius: 7px;
  background: var(--b);
}
.look-card-meta b { display: block; font-size: 14px; font-weight: 650; margin-top: 2px; }
.look-card-meta small { display: block; font-size: 11px; opacity: 0.78; margin-top: 2px; }
.look-rarity {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.look-card .look-lock,
.look-card .look-open {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.look-card .look-open { color: var(--rarity, var(--gold)); }
.look-skins { display: none; }

/* Full-page forest accents per skin */
html[data-look="oliva"] .forest {
  background:
    radial-gradient(ellipse 58% 70% at 18% 8%, rgba(120, 160, 70, .28), transparent 55%),
    linear-gradient(168deg, #1a2418, #121a12 50%, #0e140e);
}
html[data-look="creta"] .forest {
  background:
    radial-gradient(ellipse 50% 60% at 80% 10%, rgba(196, 116, 74, .22), transparent 55%),
    linear-gradient(168deg, #241810, #1c1410);
}
html[data-look="miele"] .forest {
  background:
    radial-gradient(ellipse 55% 50% at 50% 0%, rgba(224, 176, 80, .25), transparent 60%),
    linear-gradient(168deg, #221808, #1a140c);
}
html[data-look="sabbia"] .forest {
  background:
    radial-gradient(ellipse 70% 45% at 30% 100%, rgba(200, 176, 128, .18), transparent 55%),
    linear-gradient(168deg, #221c14, #1c1812);
}
html[data-look="lava"] .forest {
  background:
    radial-gradient(ellipse 50% 55% at 70% 90%, rgba(224, 80, 48, .32), transparent 55%),
    linear-gradient(168deg, #1c0a08, #140808);
}
html[data-look="aurora"] .forest {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(192, 96, 160, .28), transparent 60%),
    linear-gradient(168deg, #1a101e, #120e18);
}
html[data-look="ghiaccio"] .forest {
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(112, 176, 208, .26), transparent 55%),
    linear-gradient(168deg, #0c1820, #0a1218);
}
html[data-look="bronzo"] .forest {
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(160, 112, 48, .24), transparent 55%),
    linear-gradient(168deg, #1a140c, #14100c);
}
html[data-look="nebbia"] .forest {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(136, 152, 168, .2), transparent 60%),
    linear-gradient(168deg, #16181a, #121416);
}
html[data-look="corallo"] .forest {
  background:
    radial-gradient(ellipse 55% 50% at 75% 80%, rgba(224, 96, 88, .28), transparent 55%),
    linear-gradient(168deg, #1c1012, #160e10);
}
html[data-look="ametista"] .forest {
  background:
    radial-gradient(ellipse 55% 55% at 30% 10%, rgba(144, 48, 208, .3), transparent 55%),
    linear-gradient(168deg, #160c22, #100818);
}
html[data-look="notte"] .forest {
  background:
    radial-gradient(ellipse 60% 50% at 70% 0%, rgba(64, 96, 192, .28), transparent 55%),
    linear-gradient(168deg, #080e1a, #040810);
}
html[data-look="oroantico"] .forest {
  background:
    radial-gradient(ellipse 50% 45% at 50% 0%, rgba(232, 192, 96, .3), transparent 55%),
    linear-gradient(168deg, #1c1408, #120e08);
}
html[data-look="forja"] .forest {
  background:
    radial-gradient(ellipse 45% 50% at 20% 90%, rgba(176, 80, 32, .32), transparent 55%),
    linear-gradient(168deg, #181010, #100c0c);
}
html[data-look="sole"] .forest {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 192, 64, .38), transparent 58%),
    linear-gradient(168deg, #241808, #181208);
}
html[data-look="smeraldo"] .forest {
  background:
    radial-gradient(ellipse 55% 48% at 20% 0%, rgba(61, 190, 122, .26), transparent 58%),
    linear-gradient(168deg, #0c1c14, #07140e);
}
html[data-look="rame"] .forest {
  background:
    radial-gradient(ellipse 50% 46% at 80% 10%, rgba(196, 106, 48, .28), transparent 56%),
    linear-gradient(168deg, #1e120c, #160e0a);
}
html[data-look="opale"] .forest {
  background:
    radial-gradient(ellipse 48% 40% at 12% 8%, rgba(255, 160, 210, .16), transparent 58%),
    radial-gradient(ellipse 48% 40% at 88% 20%, rgba(140, 180, 255, .16), transparent 58%),
    linear-gradient(168deg, #16161e, #101016);
}
html[data-look="anime"] .forest {
  background:
    radial-gradient(ellipse 46% 36% at 82% 0%, rgba(255, 120, 180, .22), transparent 60%),
    radial-gradient(ellipse 40% 30% at 8% 90%, rgba(80, 190, 255, .16), transparent 58%),
    linear-gradient(168deg, #18101c, #100c14);
}
html[data-look="hanami"] .forest {
  background:
    radial-gradient(ellipse 50% 42% at 15% 0%, rgba(240, 160, 184, .22), transparent 58%),
    radial-gradient(ellipse 40% 36% at 90% 80%, rgba(90, 30, 50, .28), transparent 55%),
    linear-gradient(168deg, #1c1016, #140c12);
}
html[data-look="supernova"] .forest {
  background:
    radial-gradient(ellipse 42% 36% at 70% 0%, rgba(240, 176, 64, .3), transparent 58%),
    linear-gradient(168deg, #180e1c, #100c14);
}
html[data-look="onda"] .forest {
  background:
    radial-gradient(ellipse 60% 45% at 80% 0%, rgba(58, 168, 176, .24), transparent 58%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(20, 90, 100, .3), transparent 55%),
    linear-gradient(168deg, #08191e, #061418 55%, #040e11);
}
html[data-look="cometa"] .forest {
  background:
    radial-gradient(ellipse 55% 45% at 85% 5%, rgba(106, 134, 232, .26), transparent 58%),
    radial-gradient(ellipse 45% 40% at 10% 90%, rgba(60, 50, 140, .22), transparent 55%),
    linear-gradient(168deg, #0a0e1e, #070a16 55%, #04060e);
}
html[data-look="prisma"] .forest {
  background:
    radial-gradient(ellipse 45% 38% at 15% 5%, rgba(255, 138, 216, .14), transparent 58%),
    radial-gradient(ellipse 45% 38% at 88% 30%, rgba(138, 180, 255, .14), transparent 58%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(138, 255, 208, .1), transparent 58%),
    linear-gradient(168deg, #100e18, #0c0b12 55%, #08070c);
}
html[data-look="fenice"] .forest {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(224, 106, 42, .3), transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 0%, rgba(160, 50, 30, .22), transparent 55%),
    linear-gradient(168deg, #1a0a08, #140806 55%, #0c0403);
}
html[data-look="lucciola"] .forest {
  background:
    radial-gradient(ellipse 55% 45% at 18% 6%, rgba(168, 192, 80, .16), transparent 58%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(40, 80, 40, .3), transparent 55%),
    linear-gradient(168deg, #0a120b, #070d08 55%, #040804);
}
html[data-look="atelier"] .forest { opacity: 0.55; }

.gold, .ghost.on, .chip.on, .sizes button.on, .tone button.on, .slab button.on {
  /* keep radii; color follows --btn/--gold tokens from skin */
}

/* Student: redeem a teacher scholarship code (teacher UI lives in prof.html) */
.borsa-redeem { margin-top: 10px; }
#accountPop .borsa-ask {
  display: block; width: 100%; min-height: 32px; padding: 4px 0;
  font-size: 12px; color: var(--gold); text-align: center;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(212,180,106,.4);
}
.borsa-form .field {
  margin: 6px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .03em; text-transform: uppercase;
}
.borsa-form .field::placeholder { font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.borsa-msg { min-height: 1.2em; margin-top: 6px; font-size: 12px; text-align: center; color: var(--muted); }
.borsa-msg[data-ok="1"] { color: var(--gold); }
.borsa-msg:empty { display: none; }

/* —— Rarity depth (identity beyond palette; no layout shift) —— */
html[data-rarity] {
  --rarity-ring: color-mix(in srgb, var(--gold, #d4b46a) 42%, transparent);
}
html[data-rarity="uncommon"] {
  --rarity-ring: color-mix(in srgb, #4caf6a 40%, var(--gold, #d4b46a));
}
html[data-rarity="rare"] {
  --rarity-ring: color-mix(in srgb, #4a90e8 50%, var(--gold, #d4b46a));
}
html[data-rarity="epic"] {
  --rarity-ring: color-mix(in srgb, #9b5de5 55%, var(--gold, #d4b46a));
}
html[data-rarity="legendary"] {
  --rarity-ring: color-mix(in srgb, #f0d060 70%, var(--gold, #d4b46a));
}

/* Uncommon: fine gold thread on cards / panes */
html[data-rarity="uncommon"] .pane,
html[data-rarity="uncommon"] .kept-bar {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
html[data-rarity="uncommon"] .forest {
  --rar-filter: contrast(1.02) saturate(1.04);
}

/* Rare: glass orbs tint + slower sheen */
html[data-rarity="rare"] .wrap > header .chrome-circlet--lang,
html[data-rarity="rare"] .wrap > header .chrome-circlet--account {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -8px 10px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px color-mix(in srgb, #7ab0f0 55%, rgba(255, 255, 255, 0.45)),
    0 8px 16px -10px rgba(0, 0, 0, 0.48);
}
html[data-rarity="rare"] .wrap > header .chrome-circlet--lang::before,
html[data-rarity="rare"] .wrap > header .chrome-circlet--account::before {
  background: none;
  filter: none;
  opacity: 0;
  animation: none;
}
html[data-rarity="rare"] .pane {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #4a90e8 18%, transparent);
}

/* Epic: ambient beam pulse + violet frame edge */
html[data-rarity="epic"] .beam {
  animation: flyleafEpicBeam 14s ease-in-out infinite;
}
@keyframes flyleafEpicBeam {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.72; }
}
html[data-rarity="epic"] .pane,
html[data-rarity="epic"] .kept-bar {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #9b5de5 32%, transparent),
    0 0 0 1px color-mix(in srgb, #9b5de5 12%, transparent);
}
html[data-rarity="epic"] .forest {
  --rar-filter: saturate(1.08);
}
@keyframes flyleafEpicForest {
  0%, 100% { opacity: 1; }
  50% { opacity: 1; }
}

/* Legendary: soft halo on leaf + second orb sparkle */
html[data-rarity="legendary"] .wrap > header .chrome-circlet--mark {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px color-mix(in srgb, #f0d060 45%, transparent),
    0 0 14px -2px color-mix(in srgb, #f0d060 35%, transparent);
}
html[data-rarity="legendary"] .wrap > header .chrome-circlet--mark .chrome-mark-leaf {
  filter:
    drop-shadow(1px 2px 1px rgba(8, 14, 8, 0.28))
    drop-shadow(0 0 6px color-mix(in srgb, #f0d060 40%, transparent));
}
html[data-rarity="legendary"] .wrap > header .chrome-circlet--lang::after,
html[data-rarity="legendary"] .wrap > header .chrome-circlet--account::after {
  background: none;
  opacity: 0;
}
html[data-rarity="legendary"] .gold {
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0d060 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-rarity="epic"] .beam,
  html[data-rarity="epic"] .forest,
  html[data-rarity="rare"] .wrap > header .chrome-circlet--lang::before,
  html[data-rarity="rare"] .wrap > header .chrome-circlet--account::before {
    animation: none;
  }
}