@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/jakarta-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #14161c; --panel: #1d2029; --panel-2: #262a36; --line: #3a3f50; --tier-box: #11131a;
  --text: #eceef5; --muted: #a2a9bc; --accent: #ff6f9f; --on-accent: #1b1e27;
  --warn: #ff9f5a; --warn-bg: #3a2616; --ok: #5ccf9a; --danger: #ff5d6c; --heart-off: #3a3f50;
  /* rating colors, bad to best */
  --v1: #ff5d6c; --v2: #ff9f5a; --v3: #f2c94c; --v4: #5ccf9a; --v5: #ff6f9f;
  --shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, .38);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 50%);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  /* spacing scale: every gap and padding uses one of these */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.75rem;
  --r: .95rem; --r-m: .7rem; --r-s: .5rem; --r-xs: .35rem; --r-l: 1.15rem; --h: 2.5rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f4f8; --panel: #ffffff; --panel-2: #eef0f6; --line: #d3d7e3; --tier-box: #1b1e27;
    --text: #1b1e27; --muted: #5d6479; --accent: #d6246f; --on-accent: #ffffff;
    --warn: #a64b00; --warn-bg: #fff0e0; --ok: #1f8f5f; --danger: #d4283a; --heart-off: #d3d7e3;
    --v1: #d4283a; --v2: #c4600a; --v3: #a77b00; --v4: #1f8f5f; --v5: #d6246f;
    --shadow: 0 0.7rem 1.8rem rgba(40, 50, 90, .18);
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 50%);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}
* { box-sizing: border-box; }
html { font-size: 17px; scrollbar-gutter: stable; }
:root:has(dialog[open]) { overflow: hidden; }
/* JS sets the root size (bigger on big screens, for the popups) and --mz, a zoom below 1 that keeps the main page calmer */
header, main, footer { zoom: var(--mz, 1); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* icons */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.heart { width: 1em; height: 1em; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* tier colors: one set of variables drives badges and the big letter */
.S { --t1: #fff4b8; --t2: #ffd23f; --t3: #e39a00; --ts: #8f5d00; --tg: rgba(255, 190, 20, .55); }
.A { --t1: #ffe0d2; --t2: #ff8a5c; --t3: #d6451c; --ts: #8a2a0d; --tg: rgba(255, 110, 60, .5); }
.B { --t1: #d9ffec; --t2: #5ccf9a; --t3: #1f9462; --ts: #0e5a3a; --tg: rgba(60, 220, 150, .45); }
.C { --t1: #dcecff; --t2: #6aa9ff; --t3: #2b66d0; --ts: #163f8a; --tg: rgba(80, 150, 255, .45); }
.D { --t1: #eef0f6; --t2: #9aa2b6; --t3: #596074; --ts: #333847; --tg: rgba(150, 160, 185, .4); }
/* small badge: dark box, colored letter */
.tier { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border-radius: var(--r-s); padding: 0 var(--s2); font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--t2); background-color: var(--tier-box);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t2) 45%, transparent); text-shadow: 0 0 .6rem var(--tg); }

/* the letter is nudged so the middle of the glyph (not of its text box) is in the middle of the badge or circle */
.tl { display: inline-block; translate: calc(var(--ox, 0) * 1em) calc(var(--oy, 0) * 1em); }

/* page */
header { max-width: 92rem; margin: 0 auto; padding: var(--s6) var(--s5) var(--s6); }
h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s3); line-height: 1.2; }
h1 .heart { width: 1.8rem; height: 1.8rem; color: var(--accent); transition: transform .4s var(--bounce); }
h1:hover .heart { transform: scale(1.2) rotate(-8deg); }
h1 span { color: var(--accent); }
.tag { margin-top: var(--s1); font-size: 1.1rem; color: var(--muted); }
main { max-width: 92rem; margin: 0 auto; padding: var(--s3) var(--s5) var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--s5); align-items: start; }
@media (max-width: 1100px) { main { grid-template-columns: 1fr; } }
section { background-color: var(--panel); background-image: var(--sheen); border: 1px solid var(--line); box-shadow: var(--edge); border-radius: var(--r); padding: var(--s5); }
h2 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
h2 .ic { color: var(--accent); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s4); }
.search { flex: 1 1 12rem; position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: var(--s3); color: var(--muted); pointer-events: none; transition: color .3s var(--ease); }
.search input { -webkit-appearance: none; appearance: none; width: 100%; height: 3rem; background-color: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 0 var(--s4) 0 2.4rem; font: inherit; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input::placeholder { color: var(--muted); }
.search:focus-within .ic { color: var(--accent); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.75rem, 1fr)); gap: var(--s4); }
.card { background-color: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: center;
  transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s), box-shadow .35s var(--ease), border-color .35s var(--ease); }
@starting-style { .card.enter { opacity: 0; transform: translateY(1rem); } }
.card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.card:active { transform: scale(.99); }
.pic { aspect-ratio: 1 / 1; overflow: hidden; background: var(--line); display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--muted); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease), filter .5s var(--ease); }
.card:hover .pic img { transform: scale(1.07); }
.card.locked .pic img { filter: grayscale(.9) brightness(.75); }
.body { flex: 1; padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.nm { width: 100%; min-height: 3rem; display: flex; align-items: center; justify-content: center; gap: var(--s2); padding-right: 1.2rem; }
.nm.noicon { padding-right: 0; justify-content: center; }
.name { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 1.08rem; line-height: 1.25; text-align: center; }
.fic { flex: none; display: flex; align-items: center; justify-content: center; }
.fic img { height: 2.9rem; width: auto; max-width: 3.4rem; object-fit: contain; transition: transform .4s var(--ease); }
.card:hover .fic img { transform: scale(1.12); }
.fic span { font-size: .75rem; line-height: 1.15; color: var(--muted); max-width: 4rem; }
.fh { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s2); padding: .3rem .8rem .3rem .45rem; border: 1px solid var(--line); border-radius: var(--r-s); background-color: var(--panel-2); font-size: .9rem; font-weight: 600; color: var(--text); }
.fh img { height: 2rem; width: auto; max-width: 2.6rem; object-fit: contain; }
.status { margin-top: 0; min-height: 2.3rem; display: flex; align-items: center; justify-content: center; gap: var(--s3); font-weight: 700; font-size: .95rem; }
.status.todo { color: var(--muted); font-weight: 500; }
.status.prog { color: var(--accent); }
.card.rated { border-color: color-mix(in srgb, var(--t2) 70%, var(--line)); background-image: linear-gradient(180deg, color-mix(in srgb, var(--t2) 13%, transparent), transparent 70%); }
.card.rated:hover { border-color: var(--accent); }
.card.locked { border-color: var(--warn); background-color: var(--warn-bg); }
.warn { display: inline-flex; align-items: center; gap: var(--s2); color: var(--warn); font-weight: 700; }
.badge { font-size: .7rem; font-weight: 700; background: var(--line); border-radius: var(--r-xs); padding: 1px var(--s2); margin-left: var(--s2); vertical-align: middle; }


table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; }
.r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .c { text-align: center; }
tr.click { cursor: pointer; }
tr.click td { transition: background-color .3s var(--ease); }
tr.click:hover td { background-color: var(--panel-2); }
.who { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.who img { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; flex: none; }
.who span { transition: transform .35s var(--ease); }
tr.click:hover .who span { transform: translateX(.25rem); }
.empty { color: var(--muted); padding: var(--s2) 0; }
.unlock { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s5); text-align: center; background-color: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-m); }
.unlock b { font-size: 1.05rem; }
.unlock .bar { height: .7rem; background-color: var(--line); }
.unlock-count { font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1; }
.info-btn { margin-left: auto; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; display: grid; place-items: center; background-color: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.info-btn:hover { transform: scale(1.12); color: var(--accent); border-color: var(--accent); }
.info-btn .ic { width: 1.05rem; height: 1.05rem; }
.rank-wrap { position: sticky; top: var(--s4); max-height: calc(var(--vh-eff, 100) * 1px - 2 * var(--s4)); overflow: auto; }
.note { margin-top: var(--s3); text-align: center; }
.rank-wrap td.r, .rank-wrap th.r { padding-right: var(--s6); }

/* buttons */
.btn { height: var(--h); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); background-color: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 var(--s4); font-weight: 600;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .35s var(--ease), filter .3s var(--ease), opacity .3s var(--ease), color .3s var(--ease); }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.96); }
.btn.primary { background-color: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--accent) 28%, transparent); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 .5rem 1.2rem color-mix(in srgb, var(--accent) 42%, transparent); }
.btn.danger { background-color: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--danger) 28%, transparent); }
.btn.danger:hover { filter: brightness(1.08); border-color: var(--danger); }
.btn:disabled, .btn.primary:disabled { background-color: var(--panel-2); color: var(--muted); border-color: var(--line); box-shadow: none; opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.icon-btn { width: var(--h); padding: 0; }
.icon-btn .ic { transition: transform .6s var(--ease); }
.icon-btn:hover .ic { transform: rotate(-140deg); }

/* dialogs */
dialog { color: var(--text); background-color: var(--panel); background-image: var(--sheen); border: 1px solid var(--line); border-radius: var(--r-l); padding: 0; box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; transform: translateY(1.2rem) scale(.97);
  transition: opacity .4s var(--ease), transform .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
dialog[open] { opacity: 1; transform: none; }
@starting-style { dialog[open] { opacity: 0; transform: translateY(1.2rem) scale(.97); } }
dialog::backdrop { background: rgba(8, 10, 16, .65); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
#dlg { width: min(76rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); transition: opacity .4s var(--ease), transform .4s var(--ease), width .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
#dlg.locked { width: min(36rem, calc(100vw - 2rem)); }
#dlg[open] { display: flex; flex-direction: column; }
#dlg.busy .dmain { pointer-events: none; }
#tinfo { width: min(26rem, calc(100vw - 2rem)); }
#tinfo .dhead h3 { font-size: 1.3rem; }
.tbody { padding: var(--s3) var(--s5) var(--s5); }
.trow { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) 0; }
.trow .tier { min-width: 3.4rem; height: 3.4rem; font-size: 2.1rem; border-radius: var(--r-m); }
.trow b { font-size: 1.05rem; }
.tbody p { margin-top: var(--s3); }
#confirm { width: min(25rem, calc(100vw - 2rem)); }
#confirm .cbody { padding: var(--s6) var(--s5) var(--s5); display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
#confirm .cicon { width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn); }
#confirm .cicon .ic { width: 1.5rem; height: 1.5rem; }
#confirm h3 { font-size: 1.25rem; }
#confirm .cbtns { display: flex; gap: var(--s3); margin-top: var(--s3); }

.dhead { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: none; }
.dhead .who { flex: 1; min-width: 0; display: block; font-weight: 400; }
.nrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dhead h3 { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.saved { font-size: .8rem; color: var(--muted); min-width: 4.2em; text-align: right; transition: color .3s var(--ease); }
.saved.ok { color: var(--ok); }
.actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
@media (max-width: 760px) { .dhead { flex-wrap: wrap; } .dhead .who { flex-basis: 100%; } .saved { display: none; } .actions { margin-left: auto; } }

.dmain { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); display: grid; grid-template-columns: 19rem minmax(0, 1fr) 21rem; grid-template-rows: 38rem; gap: var(--s5); align-items: stretch; scrollbar-width: thin; }
#dlg.locked .dmain { grid-template-columns: 1fr; grid-template-rows: none; }
@media (max-width: 1100px) { .dmain { grid-template-columns: 18rem minmax(0, 1fr); grid-template-rows: 38rem auto; } .outfits { grid-column: 1 / -1; } .ogrid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)) !important; } }
@media (max-width: 760px) { .dmain { grid-template-columns: 1fr; grid-template-rows: none; } .art { height: 26rem; } }
/* three panels, same top, same bottom, same padding */
.art, .cats, .outfits { background-color: var(--panel-2); border-radius: var(--r-m); padding: var(--s3); min-width: 0; }
.art { position: relative; overflow: hidden; cursor: zoom-in; }
/* every full body image gets the same fixed height; wide images (wings) are cut off on the sides */
.fit { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; display: block; transform: translateX(calc(var(--cx, .5) * -100%)) scale(var(--z, 1)); transition: transform .6s var(--ease); }
.art .fit { top: var(--s3); height: calc(100% - 2 * var(--s3)); }
.art:hover .fit { --z: 1.03; }
.zh { position: absolute; top: var(--s3); left: var(--s3); width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 12, 18, .65); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .3s var(--ease), transform .4s var(--bounce); pointer-events: none; z-index: 1; }
.timg .zh { top: .3rem; left: .3rem; }
.art:hover .zh, .timg:hover .zh { opacity: 1; transform: none; }

/* tier letter reveal (bottom right of the art, shown after Done) */
.reveal { position: absolute; right: .3rem; bottom: .3rem; width: 10.5rem; height: 10.5rem; display: grid; place-items: center; pointer-events: none; }
.tfx { font-size: 8.8rem; font-weight: 800; line-height: 1; translate: calc(var(--ox, 0) * 1em) calc(var(--oy, 0) * 1em);
  background-image: linear-gradient(180deg, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .2rem 0 var(--ts)) drop-shadow(0 .7rem 1.1rem var(--tg));
  opacity: 0; transform: scale(2.6) rotate(-16deg);
  transition: opacity .35s var(--ease), transform .9s var(--bounce); }
.ring { position: absolute; inset: 0; border-radius: 50%; border: .25rem solid var(--t2); box-shadow: 0 0 1.4rem var(--tg), inset 0 0 1.4rem var(--tg); opacity: 0; transform: scale(.3); }
/* the stamp: a circle that lands around the letter and stays */
.stamp { position: absolute; inset: .15rem; border-radius: 50%; border: .24rem solid var(--t2); box-shadow: 0 0 1rem var(--tg), inset 0 0 1.2rem var(--tg); background-image: radial-gradient(circle, color-mix(in srgb, var(--t2) 12%, transparent), transparent 70%);
  opacity: 0; transform: scale(1.6); transition: opacity .4s var(--ease), transform .8s var(--bounce); }
.reveal.show .stamp { opacity: .95; transform: none; }
.reveal.show .tfx { opacity: 1; transform: none; }
.reveal.pre .ring { opacity: .95; transition: none; }
.reveal.show .ring { opacity: 0; transform: scale(2.4); transition: opacity 1.1s ease-out, transform 1.1s var(--ease); }
.reveal.instant *, .reveal.instant { transition: none !important; }

.cats { display: flex; flex-direction: column; gap: var(--s1); }
.cats .cat { flex: 1; }
.cat { display: grid; grid-template-columns: minmax(0, 14.5rem) auto; justify-content: start; align-items: center; column-gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s); transition: background-color .35s var(--ease); }
@media (max-width: 560px) { .cat { grid-template-columns: 1fr; row-gap: var(--s2); } }
.cat:hover { background-color: color-mix(in srgb, var(--panel) 70%, transparent); }
.cl { display: flex; align-items: center; gap: var(--s3); }
.ci { width: 2.4rem; height: 2.4rem; border-radius: var(--r-s); display: grid; place-items: center; background-color: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); flex: none; transition: transform .4s var(--bounce); }
.cat:hover .ci { transform: scale(1.1) rotate(-6deg); }
.ct { display: flex; flex-direction: column; min-width: 0; }
.ct b { font-weight: 700; line-height: 1.3; }
.ct span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.pick { --hc: var(--v5); display: flex; flex-direction: column; align-items: stretch; }
.pick[data-v="1"] { --hc: var(--v1); } .pick[data-v="2"] { --hc: var(--v2); } .pick[data-v="3"] { --hc: var(--v3); }
.pick[data-v="4"] { --hc: var(--v4); } .pick[data-v="5"] { --hc: var(--v5); }
.hearts { display: flex; justify-content: center; gap: 0; }
.hbtn { background: none; border: 0; padding: .3rem; font-size: 2.1rem; line-height: 0; color: var(--heart-off); transition: color .3s var(--ease), filter .3s var(--ease); }
.hbtn svg { transform: scale(.82); transition: transform .45s var(--bounce); }
.hbtn.on { color: var(--hc); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--hc) 45%, transparent)); }
.hbtn.on svg { transform: scale(1); }
.hbtn:hover svg { transform: scale(1.2); }
.hbtn:active svg { transform: scale(.9); }
.txt { min-height: 1.3rem; font-size: .85rem; text-align: center; color: var(--hc); font-weight: 700; opacity: 0; transform: translateY(-3px); transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.txt.show { opacity: 1; transform: none; }

.outfits { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.noout { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: .9rem; padding-bottom: 2rem; }
.outfits h4 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.outfits h4 .ic { color: var(--accent); }
.outfits h4 .bonus { margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--accent); }
.ogrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2); background-color: var(--panel); border: 2px solid var(--line); border-radius: var(--r-s); padding: var(--s2) var(--s2) var(--s3); text-align: center; line-height: 1.3; font-size: .85rem; font-weight: 600;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease); }
.tile .timg { position: relative; width: 100%; aspect-ratio: 1 / 1.22; border-radius: var(--r-xs); background: var(--panel-2); overflow: hidden; cursor: zoom-in; flex: none; }
.tile .tname { flex: 1; display: grid; place-items: center; min-height: 2.6em; }
.tile:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.tile .fit { height: 200%; top: min(0%, calc(30% - var(--cy, 0) * 200%)); }
.tile:hover .fit { --z: 1.06; }
.tile:active { transform: scale(.97); }
.tile .pts { display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; min-width: 2.6rem; padding: 0 var(--s3); border-radius: 999px; font-size: .78rem; font-weight: 700; background-color: var(--panel-2); color: var(--muted); transition: background-color .3s var(--ease), color .3s var(--ease); }
.tile[aria-pressed="true"] { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.tile[aria-pressed="true"] .pts { background-color: var(--accent); color: var(--on-accent); }
#lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; background-image: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; cursor: zoom-out; }
#lb[open] { display: grid; place-items: center; }
#lb::backdrop { background: rgba(6, 8, 12, .85); }
#lb img { max-width: 94vw; max-height: 94dvh; object-fit: contain; filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, .55)); transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1)); user-select: none; -webkit-user-drag: none; touch-action: none; }
#lb.zoomed { cursor: grab; }
#lb.drag { cursor: grabbing; }

footer { max-width: 92rem; margin: 0 auto; padding: var(--s6) var(--s5); }
.foot { max-width: 38rem; margin: 0 auto; padding: var(--s5); display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; border: 1px solid var(--line); border-radius: var(--r); background-color: var(--panel); color: var(--muted); font-size: .85rem; }
.foot-brand { display: flex; align-items: center; gap: var(--s2); color: var(--text); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.foot-brand span:not(.verchip) { color: var(--accent); }
.foot-brand .heart { width: 1.2rem; height: 1.2rem; color: var(--accent); }
.verchip { padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line); background-color: var(--panel-2); color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.foot .legal { line-height: 1.55; }
.foot-links { display: flex; gap: var(--s4); }
.foot .copy { font-size: .78rem; opacity: .85; }
.agewarn { display: flex; align-items: center; gap: var(--s3); background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); border-radius: var(--r-m); padding: var(--s4); font-weight: 700; grid-column: 1 / -1; }
.agewarn .ic { width: 1.5em; height: 1.5em; flex: none; }
.agewarn div { display: flex; flex-direction: column; }
.agewarn small { font-weight: 500; font-size: .85rem; opacity: .9; }
.sprite { position: absolute; }

/* ranking tabs */
.seg { display: inline-flex; align-items: stretch; gap: .15rem; padding: .2rem; height: 2.25rem; border-radius: var(--r-s); background-color: var(--panel-2); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0 1rem; border-radius: calc(var(--r-s) - .2rem); font-weight: 600; color: var(--muted); transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.seg button:active { transform: scale(.97); }
.seg button:hover { color: var(--text); }
.toolbar .seg { height: 3rem; }
.toolbar .seg button { padding: 0 var(--s4); }
@media (max-width: 760px) { .toolbar .seg { width: 100%; } .toolbar .seg button { flex: 1; padding: 0 var(--s1); white-space: nowrap; font-size: .9rem; } }
.seg button[aria-pressed="true"] { background-color: var(--accent); color: var(--on-accent); }
td .sub { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); line-height: 1.2; }
.who > div { display: flex; flex-direction: column; }
.dhead .who > .nrow { flex-direction: row; align-items: center; justify-content: flex-start; }
h2 .seg { margin: 0 auto; font-size: .85rem; font-weight: 600; }
.rank-wrap h2 .info-btn { margin-left: 0; }
h2 .count { margin-left: auto; font-size: .85rem; font-weight: 400; }
h2 .seg button { padding: 0 .8rem; }

/* backup button in the top right corner of the window */
.corner-btn { position: absolute; top: var(--s4); right: var(--s4); z-index: 5; }
.corner-btn:hover .ic { transform: scale(1.12); }
.corner-btn .ic { transition: transform .3s var(--ease); }
@media (max-width: 600px) { header { padding-right: 4rem; } .corner-btn { width: var(--h); padding: 0; } .corner-btn span { display: none; } }

/* averages popup */
#avg { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
#avg[open] { display: flex; flex-direction: column; }
.avbody { overflow-y: auto; padding: var(--s4) var(--s5) var(--s5); scrollbar-width: thin; }
.avtop { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.avtop img { width: 4.2rem; height: 4.2rem; border-radius: var(--r-s); object-fit: cover; flex: none; border: 2px solid var(--accent); }
.avtop .big { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.avtop .big small { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: var(--s1); }
.avtop .tier { margin-left: auto; min-width: 3.4rem; height: 3.4rem; font-size: 2.1rem; border-radius: var(--r-m); }
.avrow { display: grid; grid-template-columns: 2.4rem minmax(6rem, 9rem) 1fr 3.2rem; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.avrow b { font-weight: 700; }
.avrow .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: .6rem; border-radius: 999px; background-color: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--w, 0) * 1%); border-radius: 999px; background-color: var(--accent); transition: width .7s var(--ease); }
.avbody h4 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s2); }
.avbody h4 .ic { color: var(--accent); }
.avo { display: grid; grid-template-columns: 3.4rem 1fr 3.2rem; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.avo .thumb { width: 3.4rem; height: 3.4rem; border-radius: var(--r-s); background-color: var(--panel-2); overflow: hidden; position: relative; }
.avo .thumb img { position: absolute; top: 0; left: 50%; height: 190%; width: auto; max-width: none; transform: translateX(calc(var(--cx, .5) * -100%)); }
.avo .nm2 { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.avo .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.avact { margin-top: var(--s4); display: flex; justify-content: center; }

/* privacy notice popup and footer link */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; transition: opacity .3s var(--ease); }
.linkbtn:hover { opacity: .7; }
#privacy { width: min(38rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
#privacy[open] { display: flex; flex-direction: column; }
#privacy .dhead h3 { font-size: 1.3rem; }
.pvbody { overflow-y: auto; padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); scrollbar-width: thin; }
.pvbody h4 { margin-top: var(--s3); font-size: 1rem; }
.pvbody b { color: var(--text); }
.pvbox { margin-top: var(--s1); padding: var(--s4); border: 1px solid var(--accent); border-radius: var(--r-m); background-color: var(--panel-2); }
.pvbox h4 { margin-top: 0; margin-bottom: var(--s2); color: var(--accent); }
.hl { color: var(--accent); font-weight: 800; }
.pvbody ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--s1); }

/* backup and restore popup */
#keydlg { width: min(34rem, calc(100vw - 2rem)); }
.keybody { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.klabel { font-weight: 700; margin-top: var(--s2); }
.krow { display: flex; gap: var(--s2); }
.krow input { flex: 1; min-width: 0; height: 2.6rem; background-color: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-s); padding: 0 var(--s3); font: inherit; font-size: .85rem; transition: border-color .3s var(--ease); }
.krow input:focus { border-color: var(--accent); outline: none; }
.kmsg { min-height: 1.3rem; color: var(--accent); }
.kdanger { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); flex-wrap: wrap; }