:root {
  --sup-supporter: #ff8f73;
  --sup-patron: #ffc35c;
  --sup-champion: #ffe7a0;
}

.sup-badge { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-right: .18rem; border-radius: .3rem; vertical-align: -.18rem; }
.sup-badge .kofi-mark { width: .82rem; height: .82rem; }
.sup-badge.sup-supporter { color: var(--sup-supporter); background: rgba(255, 143, 115, .14); }
.sup-badge.sup-patron { color: var(--sup-patron); background: rgba(255, 195, 92, .16); box-shadow: inset 0 0 0 1px rgba(255, 195, 92, .35); }
.sup-badge.sup-champion { color: var(--sup-champion); background: linear-gradient(160deg, rgba(255, 231, 160, .3), rgba(255, 143, 177, .22)); box-shadow: inset 0 0 0 1px rgba(255, 231, 160, .55), 0 0 6px rgba(255, 210, 120, .45); }

.sup-tag { flex: none; align-self: center; display: inline-flex; align-items: center; padding: .02rem .38rem; margin-right: .22rem; border-radius: .55rem; font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; vertical-align: .05rem; white-space: nowrap; }
.sup-tag.sup-supporter { color: #ffd2c4; background: rgba(255, 143, 115, .16); }
.sup-tag.sup-patron { color: #ffe2a8; background: rgba(255, 195, 92, .18); }
.sup-tag.sup-given { color: #d8e6f0; background: rgba(150, 185, 210, .17); }
.sup-tag.sup-champion { color: #fff4d6; background: linear-gradient(90deg, rgba(255, 196, 92, .32), rgba(255, 143, 177, .3)); }

[data-sup-colour="gold"] { color: #f3c74f !important; }
[data-sup-colour="sky"] { color: #6fc3ff !important; }
[data-sup-colour="mint"] { color: #6fe0b0 !important; }
[data-sup-colour="rose"] { color: #ff8fb1 !important; }
[data-sup-colour="lilac"] { color: #c3a2ff !important; }
[data-sup-colour="coral"] { color: #ff9a6b !important; }
[data-sup-colour="amber"] { color: #ffb347 !important; }
[data-sup-colour="teal"] { color: #3fd6c9 !important; }
[data-sup-colour="orchid"] { color: #e07bff !important; }
[data-sup-colour="lime"] { color: #b8e65a !important; }
[data-sup-colour="dawnfire"] { color: #ffbd6e !important; text-shadow: 0 0 7px rgba(255, 120, 80, .75), 0 0 2px rgba(255, 210, 140, .9); }
[data-sup-colour="starlight"] { color: #fff3c8 !important; text-shadow: 0 0 7px rgba(255, 236, 170, .85), 0 0 2px rgba(255, 255, 255, .95); }

[data-sup-card] { position: relative; background-color: #0a111d !important; }
[data-sup-card]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; border: 2px solid var(--sup-frame, transparent); box-shadow: inset 0 0 28px var(--sup-glow, transparent), 0 0 22px var(--sup-glow, transparent); }
[data-sup-card="hearth"] { --sup-frame: rgba(255, 143, 115, .75); --sup-glow: rgba(255, 120, 90, .28); background-image: linear-gradient(180deg, rgba(255, 143, 115, .3), transparent 50%) !important; }
[data-sup-card="tide"] { --sup-frame: rgba(63, 214, 201, .75); --sup-glow: rgba(63, 214, 201, .26); background-image: linear-gradient(170deg, rgba(63, 214, 201, .32), transparent 55%), radial-gradient(120% 60% at 50% 110%, rgba(40, 120, 190, .4), transparent 70%) !important; }
[data-sup-card="grove"] { --sup-frame: rgba(184, 230, 90, .7); --sup-glow: rgba(120, 200, 90, .24); background-image: linear-gradient(170deg, rgba(184, 230, 90, .28), transparent 50%), radial-gradient(90% 50% at 15% 0%, rgba(243, 199, 79, .3), transparent 70%) !important; }
[data-sup-card="aurora"] { --sup-frame: rgba(170, 225, 255, .8); --sup-glow: rgba(150, 160, 255, .3); background-image: linear-gradient(160deg, rgba(111, 224, 176, .34), rgba(111, 195, 255, .24) 35%, rgba(224, 123, 255, .28) 70%, transparent) !important; }
[data-sup-card="starfall"] { --sup-frame: rgba(255, 243, 200, .8); --sup-glow: rgba(255, 236, 170, .26); background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 12%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 40% 30%, #fff3c8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 40%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 62%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 75%, #fff 50%, transparent 51%), linear-gradient(180deg, rgba(50, 56, 140, .6), transparent 75%) !important; }
[data-sup-card="royal"] { --sup-frame: rgba(255, 210, 120, .9); --sup-glow: rgba(200, 120, 255, .32); background-image: linear-gradient(180deg, rgba(150, 60, 210, .45), transparent 60%), radial-gradient(80% 40% at 50% 0%, rgba(255, 210, 120, .42), transparent 70%) !important; }

.sup-window { --sup-copper: #e8935f; --sup-gold: #f2c66a; --sup-opal: #b9a7ff; display: grid; gap: 1.1rem; }
.sup-window h2, .sup-window h3 { margin: 0; }
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .win-page > .sup-window { flex: 1; min-height: 0; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -.5rem; padding: .1rem .5rem .8rem 0; }
}

.sup-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 19rem); align-items: center; gap: 1.6rem; padding: 1.5rem 1.7rem; border-radius: 1.1rem;
  background: radial-gradient(55% 140% at 8% 50%, rgba(255, 128, 96, .26), transparent 62%), radial-gradient(45% 120% at 95% 0%, rgba(185, 167, 255, .24), transparent 60%), radial-gradient(40% 90% at 60% 120%, rgba(242, 198, 106, .16), transparent 70%), linear-gradient(180deg, #1b1531, #0c0f1e);
  box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .38), inset 0 1px 0 rgba(255, 238, 200, .12), 0 1.2rem 2.6rem rgba(0, 0, 0, .5); }
.sup-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background: radial-gradient(1.2px 1.2px at 14% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 33% 72%, #ffe7a0, transparent 60%), radial-gradient(1.4px 1.4px at 52% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 68% 64%, #cfe8ff, transparent 60%), radial-gradient(1.3px 1.3px at 84% 30%, #fff, transparent 60%), radial-gradient(1px 1px at 92% 78%, #ffd6ef, transparent 60%), radial-gradient(1px 1px at 41% 44%, #fff, transparent 60%); }
.sup-hero-art { position: relative; display: grid; place-items: center; width: 9rem; height: 9rem; }
.sup-aura { position: absolute; inset: -1.1rem; border-radius: 50%; filter: blur(16px); opacity: .9;
  background: conic-gradient(from 0deg, rgba(255, 128, 96, .1), rgba(255, 128, 96, .7), rgba(255, 231, 160, .75), rgba(185, 167, 255, .7), rgba(127, 224, 255, .6), rgba(255, 154, 214, .65), rgba(255, 128, 96, .1)); }
.sup-rays { position: absolute; inset: -2.4rem; opacity: .85; background: repeating-conic-gradient(from 0deg, rgba(255, 231, 160, .2) 0 5deg, transparent 5deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%); }
.sup-medal { position: relative; z-index: 1; display: grid; place-items: center; width: 6.3rem; height: 6.3rem; border-radius: 1.7rem; color: #fff;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 42%), linear-gradient(140deg, #ffa07f, #ff5d5d 52%, #b52f4b);
  box-shadow: 0 0 0 3px rgba(255, 231, 160, .9), 0 0 0 6px rgba(110, 36, 30, .65), 0 0 2.4rem rgba(255, 120, 90, .7), inset 0 -.45rem .9rem rgba(0, 0, 0, .28); }
.sup-medal .kofi-mark { width: 3.7rem; height: 3.7rem; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .35)); }
.sup-rise { position: absolute; inset: 0; pointer-events: none; }
.sup-rise i { position: absolute; bottom: 12%; width: .32rem; height: .32rem; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 .55rem #ffd27a; opacity: 0; }
.sup-rise i:nth-child(1) { left: 12%; } .sup-rise i:nth-child(2) { left: 30%; background: #ffd6ef; } .sup-rise i:nth-child(3) { left: 48%; }
.sup-rise i:nth-child(4) { left: 66%; background: #cfe8ff; } .sup-rise i:nth-child(5) { left: 82%; } .sup-rise i:nth-child(6) { left: 22%; background: #fff; }
.sup-hero-copy { display: grid; gap: .5rem; min-width: 0; }
.sup-hero-copy .t-caps { font-size: .72rem; letter-spacing: .18em; color: #ffb89c; }
.sup-hero-copy h2 { font: 700 2.3rem/1.05 var(--font-display); background: linear-gradient(180deg, #fff8df 0%, #ffe9ad 34%, #f3c76b 62%, #c28c38 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .15rem .4rem rgba(0, 0, 0, .55)); }
.sup-hero-copy p { margin: 0; max-width: 34rem; font-size: .98rem; line-height: 1.45; color: var(--text-2); }
.sup-promises { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.sup-promises li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 2rem; font-size: .82rem; color: var(--text-1); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .3); }
.sup-promises .ia-glyph { width: .85rem; height: .85rem; color: #8fe3a7; }
.sup-standing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .7rem; padding: .9rem 1rem; border-radius: .9rem; background: rgba(5, 8, 16, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sup-standing > p, .sup-standing > .sup-progress { grid-column: 1 / -1; }
.sup-standing p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--text-2); }
.sup-standing-copy { display: grid; gap: .05rem; min-width: 0; }
.sup-standing-copy .t-caps { font-size: .66rem; letter-spacing: .14em; color: var(--text-3); }
.sup-standing-copy b { font: 600 1.25rem/1.1 var(--font-display); color: var(--text-1); }
.sup-standing.is-supporter .sup-standing-copy b { color: #ffc3a3; } .sup-standing.is-patron .sup-standing-copy b { color: #ffe08a; } .sup-standing.is-champion .sup-standing-copy b { color: #e6dcff; }
.sup-window .sup-standing-cup .sup-badge { width: 2.6rem; height: 2.6rem; margin: 0; border-radius: .75rem; }
.sup-window .sup-standing-cup .sup-badge .kofi-mark { width: 1.75rem; height: 1.75rem; }
.sup-progress { height: .55rem; margin: .35rem 0 .15rem; border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sup-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8f73, #ffc35c 55%, #ffe7a0); box-shadow: 0 0 .6rem rgba(255, 195, 92, .6); }

.sup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.sup-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; padding: .85rem .95rem; border-radius: .85rem; background: linear-gradient(180deg, rgba(36, 30, 58, .7), rgba(12, 15, 28, .82)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sup-step > div { display: grid; gap: .35rem; min-width: 0; }
.sup-step b { font-size: .95rem; color: var(--text-1); }
.sup-step small { font-size: .8rem; line-height: 1.35; color: var(--text-3); }
.sup-step-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font: 700 1rem var(--font-display); color: #2a1606;
  background: radial-gradient(circle at 35% 30%, #fff6d0, #f3c76b 55%, #b07a2c); box-shadow: 0 0 0 2px rgba(80, 50, 15, .6), 0 .3rem .6rem rgba(0, 0, 0, .45); }
.sup-code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0; background: none; box-shadow: none; }
.sup-code > b { padding: .35rem .6rem; border-radius: .45rem; font: 700 1.15rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; color: #ffd8c7; background: rgba(255, 143, 115, .12); box-shadow: inset 0 0 0 1px rgba(255, 143, 115, .45); }
.sup-window a.btn { text-decoration: none; }
.sup-kofi { justify-self: start; gap: .45rem; color: #fff; background: linear-gradient(180deg, #ff8a7a, #ff5e5b); box-shadow: 0 0 0 1px #a1302f, 0 .35rem .9rem rgba(255, 94, 91, .4); }
.sup-kofi .kofi-mark { width: 1.1rem; height: 1.1rem; }
.sup-kofi:hover { filter: brightness(1.08); }

.sup-ladder-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: -.35rem; }
.sup-ladder-head h3 { font: 600 1.25rem var(--font-display); color: var(--gold-1); }
.sup-ladder-head p { margin: 0; font-size: .86rem; color: var(--text-3); }
.sup-ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: .9rem; }
.sup-rung { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: 1.25rem 1.1rem 1.05rem; border: 2px solid transparent; border-radius: 1.05rem;
  background: linear-gradient(180deg, var(--rung-top), transparent 58%) padding-box, linear-gradient(#0b0e19, #0b0e19) padding-box, var(--rung-edge) border-box;
  box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .5), 0 0 1.8rem var(--rung-glow); transition: transform .25s ease, box-shadow .25s ease; }
.sup-rung:hover { transform: translateY(-4px); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .55), 0 0 2.6rem var(--rung-glow); }
.sup-rung.is-supporter { --rung-edge: linear-gradient(160deg, #f6b088, #9a4a26 42%, #e2905e 68%, #6a2e16); --rung-top: rgba(200, 117, 74, .3); --rung-glow: rgba(255, 143, 115, .2); --rung-ink: #ffc3a3; }
.sup-rung.is-patron { --rung-edge: linear-gradient(160deg, #fff3c0, #c9922f 40%, #ffe08a 64%, #8a5a1a); --rung-top: rgba(242, 198, 106, .28); --rung-glow: rgba(255, 200, 90, .3); --rung-ink: #ffe08a; }
.sup-rung.is-champion { --rung-edge: conic-gradient(from 210deg, #b9a7ff, #7fe0ff, #9dffcf, #ffe7a0, #ff9ad6, #b9a7ff); --rung-top: rgba(150, 120, 255, .32); --rung-glow: rgba(185, 167, 255, .42); --rung-ink: #ece4ff; }
.sup-rung.is-champion { margin-top: -.6rem; padding-top: 1.6rem; }
.sup-rung.is-champion::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(1.4px 1.4px at 18% 30%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 72% 18%, #ffe7a0, transparent 60%), radial-gradient(1.6px 1.6px at 86% 52%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 40% 64%, #cfe8ff, transparent 60%), radial-gradient(1.4px 1.4px at 60% 82%, #ffd6ef, transparent 60%), radial-gradient(1px 1px at 28% 88%, #fff, transparent 60%); }
.sup-rung.is-here { box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .5), 0 0 0 3px rgba(143, 227, 167, .5), 0 0 2.2rem var(--rung-glow); }
.sup-rung-frame { position: absolute; z-index: -1; pointer-events: none; }
.sup-rung.is-patron .sup-rung-frame { inset: -30% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(255, 214, 120, .35), transparent); opacity: .55; }
.sup-rung.is-champion .sup-rung-frame { left: 50%; top: 32%; width: 170%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgba(185, 167, 255, 0), rgba(185, 167, 255, .28), rgba(127, 224, 255, .2), rgba(157, 255, 207, .16), rgba(255, 154, 214, .24), rgba(185, 167, 255, 0)); }
.sup-ribbon { position: absolute; z-index: 2; top: 1.2rem; right: -3.1rem; rotate: 38deg; padding: .3rem 3.4rem; font: 700 .68rem/1 var(--font-ui, inherit); letter-spacing: .12em; text-transform: uppercase; color: #2a1606; box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .45); }
.sup-rung.is-patron .sup-ribbon { background: linear-gradient(90deg, #ffe08a, #f3c76b, #ffe08a); }
.sup-rung.is-champion .sup-ribbon { color: #1c1238; background: linear-gradient(90deg, #ffd6ef, #e6dcff 35%, #c6f3ff 70%, #fff3c8); }
.sup-rung-head { display: flex; align-items: center; gap: .85rem; }
.sup-rung-head h3 { font: 700 1.55rem/1.05 var(--font-display); color: var(--rung-ink); text-shadow: 0 0 1rem var(--rung-glow), 0 .1rem .2rem rgba(0, 0, 0, .6); }
.sup-rung-price { margin: .2rem 0 0; font-size: .86rem; font-weight: 600; color: var(--text-2); }
.sup-window .sup-rung-cup .sup-badge { width: 3.5rem; height: 3.5rem; margin: 0; border-radius: .95rem; }
.sup-window .sup-rung-cup .sup-badge .kofi-mark { width: 2.35rem; height: 2.35rem; }
.sup-rung.is-champion .sup-rung-cup .sup-badge { width: 3.9rem; height: 3.9rem; }
.sup-rung-line { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; min-height: 2.5rem; margin: 0; padding: .5rem .65rem; border-radius: .6rem; background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); font-size: .95rem; }
.sup-rung-line .chat-name { font-weight: 700; }
.sup-rung-also { margin: 0; font-size: .78rem; font-style: italic; color: var(--text-3); }
.sup-rung-perks { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sup-rung-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .5rem; font-size: .88rem; line-height: 1.35; color: var(--text-1); }
.sup-rung-perks .ia-glyph { width: .95rem; height: .95rem; margin-top: .1rem; color: var(--rung-ink); filter: drop-shadow(0 0 .3rem var(--rung-glow)); }
.sup-rung-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.sup-chip { padding: .18rem .5rem; border-radius: 1rem; font-size: .78rem; font-weight: 700; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sup-rung-thumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.sup-thumb { display: grid; align-items: end; width: 5.2rem; height: 3.2rem; padding: .3rem .4rem; border-radius: .55rem; font-size: .72rem; overflow: hidden; }
.sup-thumb b { position: relative; z-index: 4; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; }
.sup-rung-foot { margin-top: auto; padding-top: .3rem; }
.sup-go { width: 100%; justify-content: center; gap: .5rem; font-weight: 700; }
.sup-go .kofi-mark { width: 1.2rem; height: 1.2rem; }
.sup-rung.is-supporter .sup-go { color: #2a1206; background: linear-gradient(180deg, #ffc09c, #e2865a); box-shadow: 0 0 0 1px #7a3a1e, 0 .4rem 1rem rgba(255, 128, 96, .35); }
.sup-rung.is-patron .sup-go { color: #2a1a04; background: linear-gradient(180deg, #ffeeb0, #e6b14a); box-shadow: 0 0 0 1px #8a5a1a, 0 .4rem 1rem rgba(255, 200, 90, .4); }
.sup-rung.is-champion .sup-go { color: #1c1238; background: linear-gradient(135deg, #ffd6ef, #e6dcff 30%, #c6f3ff 60%, #fff3c8); box-shadow: 0 0 0 1px rgba(120, 90, 200, .8), 0 .45rem 1.2rem rgba(185, 167, 255, .5); }
.sup-go:hover { filter: brightness(1.08); }
.sup-owned { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; border-radius: .7rem; font-weight: 700; color: #b9f5c8; background: rgba(60, 170, 100, .16); box-shadow: inset 0 0 0 1px rgba(143, 227, 167, .45); }
.sup-owned .ia-glyph { width: 1rem; height: 1rem; }

.sup-room { display: grid; gap: .8rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(28, 24, 46, .75), rgba(10, 13, 24, .9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.sup-room-head h3 { font: 600 1.25rem var(--font-display); color: var(--gold-1); }
.sup-room-head p { margin: .2rem 0 0; font-size: .86rem; color: var(--text-3); }
.sup-room-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: start; gap: 1.1rem; }
.sup-room-picks { display: grid; gap: .9rem; min-width: 0; }
.sup-room-mirror { position: sticky; top: 0; display: grid; gap: .65rem; padding: .9rem; border-radius: .85rem; background: rgba(4, 7, 14, .55); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .25); }
.sup-pick { display: grid; gap: .45rem; }
.sup-pick h3, .sup-room-mirror h3 { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sup-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.sup-swatch { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .3rem .65rem; border-radius: .6rem; border: 0; color: inherit; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .15s, box-shadow .15s; }
.sup-swatch:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.sup-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px rgba(255, 195, 92, .9), 0 0 .9rem rgba(255, 195, 92, .3); background: rgba(255, 195, 92, .1); }
.sup-swatch.is-locked { background: rgba(255, 255, 255, .025); }
.sup-swatch .ia-glyph { width: .8rem; height: .8rem; opacity: .6; }
.sup-swatch .sup-dot { width: .75rem; height: .75rem; border-radius: 50%; box-shadow: 0 0 .4rem currentColor; }
.sup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .5rem; }
.sup-card { display: grid; align-content: end; gap: .1rem; min-height: 4.2rem; padding: .5rem .6rem; border-radius: .7rem; border: 0; color: #fff; font: inherit; font-size: .84rem; text-align: left; cursor: pointer; background: rgba(18, 22, 34, .9); transition: transform .15s; }
.sup-card b, .sup-card small { position: relative; z-index: 4; text-shadow: 0 1px 2px #000; }
.sup-card small { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; opacity: .85; }
.sup-card small .ia-glyph { width: .7rem; height: .7rem; }
.sup-card:hover { transform: translateY(-2px); }
.sup-card[aria-pressed="true"] { outline: 2px solid rgba(255, 195, 92, .9); outline-offset: 2px; }
.sup-tagrow { display: flex; gap: .45rem; flex-wrap: wrap; }
.sup-tagrow input { flex: 1 1 10rem; min-width: 0; padding: .5rem .7rem; border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .3); color: inherit; font: inherit; }
.sup-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0; padding: .6rem .75rem; border-radius: .6rem; background: rgba(0, 0, 0, .4); font-size: .92rem; }
.sup-preview .chat-name { margin-right: .35rem; font-weight: 700; }
.sup-cardview { display: grid; align-content: end; justify-items: start; gap: .2rem; min-height: 8rem; padding: .85rem 1rem; border-radius: .85rem; background: linear-gradient(180deg, rgba(30, 38, 58, .9), rgba(10, 14, 24, .95)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sup-cardview > * { position: relative; z-index: 4; }
.sup-cv-name { font: 700 1.3rem var(--font-display); color: #fff; text-shadow: 0 1px 3px #000; }
.sup-cardview small { font-size: .75rem; color: var(--text-2); }
.sup-window .sup-cv-cup .sup-badge { width: 2.1rem; height: 2.1rem; margin: 0; border-radius: .6rem; }
.sup-window .sup-cv-cup .sup-badge .kofi-mark { width: 1.4rem; height: 1.4rem; }
.sup-lock-note { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; color: #ffd08a; }
.sup-lock-note .ia-glyph { width: .85rem; height: .85rem; }
.sup-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sup-actions .btn { flex: 1; }
.sup-error { color: #ff9a8a; font-size: .82rem; }

@keyframes sup-turn { to { transform: rotate(1turn); } }
@keyframes sup-turn-c { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes sup-breathe { 50% { transform: scale(1.045); } }
@keyframes sup-glow { 50% { opacity: .95; } }
@keyframes sup-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-6.5rem) scale(1); opacity: 0; } }
:root:not(.reduce-motion) .sup-aura { animation: sup-turn 16s linear infinite; }
:root:not(.reduce-motion) .sup-rays { animation: sup-turn 70s linear infinite reverse; }
:root:not(.reduce-motion) .sup-medal { animation: sup-breathe 4.4s ease-in-out infinite; }
:root:not(.reduce-motion) .sup-rise i { animation: sup-rise 5.2s ease-in infinite; }
:root:not(.reduce-motion) .sup-rise i:nth-child(2) { animation-delay: .9s; } :root:not(.reduce-motion) .sup-rise i:nth-child(3) { animation-delay: 1.8s; }
:root:not(.reduce-motion) .sup-rise i:nth-child(4) { animation-delay: 2.7s; } :root:not(.reduce-motion) .sup-rise i:nth-child(5) { animation-delay: 3.6s; } :root:not(.reduce-motion) .sup-rise i:nth-child(6) { animation-delay: 4.4s; }
:root:not(.reduce-motion) .sup-rung.is-patron .sup-rung-frame { animation: sup-glow 4.8s ease-in-out infinite; }
:root:not(.reduce-motion) .sup-rung.is-champion .sup-rung-frame { animation: sup-turn-c 22s linear infinite; }
:root:not(.reduce-motion) .sup-rung.is-champion::after { animation: sup-glow 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sup-window *, .sup-window *::before, .sup-window *::after { animation: none !important; transition: none !important; } }

@media (max-width: 1100px) { .sup-hero { grid-template-columns: auto minmax(0, 1fr); } .sup-standing { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .sup-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 1.3rem 1.1rem; gap: 1rem; }
  .sup-hero-art { width: 7.5rem; height: 7.5rem; } .sup-medal { width: 5.4rem; height: 5.4rem; border-radius: 1.45rem; } .sup-medal .kofi-mark { width: 3.1rem; height: 3.1rem; }
  .sup-hero-copy h2 { font-size: 1.9rem; } .sup-promises { justify-content: center; } .sup-standing { width: 100%; text-align: left; }
  .sup-steps, .sup-ladder, .sup-room-grid { grid-template-columns: minmax(0, 1fr); }
  .sup-rung.is-champion { margin-top: 0; }
  .sup-ladder-head { flex-direction: column; gap: .15rem; }
  .sup-room-mirror { position: static; }
}

button.cb-support, button.ln-support { font: inherit; cursor: pointer; }

.st-sup-grant, .st-sup-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .65rem; border-radius: .5rem; background: rgba(255, 255, 255, .04); margin-bottom: .45rem; }
.st-sup-grant h3 { flex: 1 0 100%; margin: 0; font-size: .9rem; }
.st-sup-grant .input, .st-sup-row .input { flex: 1 1 8rem; min-width: 0; }
.st-sup-row p { flex: 1 0 100%; margin: 0; font-size: .82rem; opacity: .8; }