.collection-page .win-caps, .clog-h { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; font: 400 .79rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.clog-h small { font-size: .86rem; letter-spacing: .01em; text-transform: none; color: var(--text-3); }
.clog-overall { display: grid; gap: .6rem; min-width: 0; }
.clog-fill { position: relative; height: .8rem; border-radius: .5rem; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); overflow: hidden; }
.clog-fill > i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.clog-ladder { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) auto; gap: .35rem; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.clog-tier { display: grid; min-width: 0; }
.clog-tier > button, .clog-tier > .clog-tier-lock { display: grid; justify-items: center; align-content: center; gap: .1rem; padding: .32rem .1rem .26rem; border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .22); color: var(--text-3); font-family: inherit; }
.clog-tier .item-img { width: 1.75rem; height: 1.75rem; object-fit: contain; filter: grayscale(1) brightness(.5); }
.clog-tier small { font: 400 .72rem var(--font-num); }
.clog-tier.is-reached > button { border-color: rgba(242, 198, 106, .3); color: var(--text-2); cursor: pointer; transition: border-color .12s, background .12s; }
.clog-tier.is-reached .item-img { filter: drop-shadow(0 0 .3rem rgba(242, 198, 106, .35)); }
.clog-tier.is-reached > button:hover, .clog-tier.is-reached > button:focus-visible { border-color: var(--edge-strong); background: rgba(242, 198, 106, .09); }
.clog-tier.is-worn > button { border-color: var(--gold-2); background: rgba(242, 198, 106, .15); color: var(--gold-1); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .25); }
.clog-tier.is-none > button { padding: .4rem .7rem; font: 400 .8rem var(--font-ui); color: var(--text-2); border-color: rgba(255, 255, 255, .12); cursor: pointer; }
.clog-tier.is-none > button[aria-pressed="true"] { border-color: var(--gold-2); color: var(--gold-1); background: rgba(242, 198, 106, .12); }
.clog-next { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.clog-latest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.clog-latest > small { flex-basis: 100%; font-size: .72rem; letter-spacing: .12em; color: var(--gold-3); }
.clog-latest-item { display: block; width: 2.5rem; }
.clog-recent-open { margin-left: .6rem; padding: 0; border: 0; background: none; color: var(--gold-1); font: inherit; letter-spacing: .06em; cursor: pointer; text-transform: none; }
.clog-recent-open .ia-glyph { width: .7rem; height: .7rem; vertical-align: -.05rem; }
.clog-recent-open:hover, .clog-recent-open:focus-visible { text-decoration: underline; }
.clog-cat.is-recent .clog-cat-line small { color: var(--text-4); }
.clog-recent { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.clog-recent-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; border-radius: .65rem; border: 1px solid var(--edge-soft); background: rgba(255, 255, 255, .03); }
.clog-recent-row > .well { flex: none; width: 2.6rem; }
.clog-recent-mark { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .55rem; background: rgba(242, 198, 106, .1); }
.clog-recent-mark .ia-emblem, .clog-recent-mark img { width: 1.7rem; height: 1.7rem; }
.clog-recent-copy { display: grid; gap: .15rem; min-width: 0; }
.clog-recent-copy b { font-size: .9rem; }
.clog-recent-copy small { font-size: .75rem; color: var(--text-3); }
.clog-recent-items { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.clog-recent-item { display: block; width: 2.3rem; }
.collection-page .win-head { align-items: flex-start; }
.collection-page .win-emblem { margin-top: .15rem; }
.win-aside .clog-latest { justify-content: flex-end; max-width: 33rem; }
.win-aside .clog-latest > small { text-align: right; }
.clog-cape { margin-top: .2rem; }
.clog-cape .ia-glyph { width: 1rem; height: 1rem; color: var(--gold-1); }
.clog-cape.is-on { border-color: var(--gold-2); }
.clog-pct { font: 400 1.3rem var(--font-num); color: var(--gold-1); }

.clog-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .6rem; }
.clog-cat { display: grid; align-content: start; gap: .45rem; padding: .7rem .85rem .75rem; text-align: left; border-radius: .7rem; border: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(22, 36, 60, .7), rgba(9, 15, 27, .82)); color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s; font-family: inherit; }
.clog-cat:hover, .clog-cat:focus-visible { border-color: var(--edge); }
.clog-cat.is-on { border-color: var(--gold-2); background: linear-gradient(180deg, rgba(64, 48, 20, .55), rgba(18, 26, 42, .88)); box-shadow: inset 0 -2px 0 var(--gold-2); }
.clog-cat.is-complete { border-color: var(--gold-1); }
.clog-cat.is-soon { opacity: .78; }
.clog-cat-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.clog-cat-top .ia-emblem { flex: none; width: 1.55rem; height: 1.55rem; }
.clog-cat-top b { font: 400 1.05rem/1.1 var(--font-display); color: var(--gold-1); }
.clog-cat-top > .ia-glyph { flex: none; width: 1rem; height: 1rem; margin-left: auto; color: var(--gold-1); }
.clog-cat-bar { display: block; height: .42rem; border-radius: .3rem; background: rgba(255, 255, 255, .09); overflow: hidden; }
.clog-cat-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.clog-cat-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem .5rem; font-size: .92rem; }
.clog-cat-line small { color: var(--text-3); font-size: .86rem; }

.clog-page { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.is-hud .stage .collection-page.win-page > .clog-page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: .3rem; }
.clog-group { display: grid; gap: .55rem; min-width: 0; }
.clog-grid { display: grid; gap: .55rem; min-width: 0; }
.clog-grid.is-skills { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.clog-grid.is-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.clog-grid.is-pets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.clog-grid.is-monsters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.clog-note { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--text-3); }
.clog-note b { font-weight: 400; color: var(--gold-1); }
.clog-empty, .clog-more { margin: 0; padding: .9rem 1rem; border-radius: .65rem; border: 1px dashed rgba(255, 255, 255, .12); color: var(--text-3); font-size: .95rem; }
.clog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; }
.clog-tools .clog-note { flex: 1 1 12rem; }
.clog-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.clog-tab { display: inline-flex; align-items: baseline; gap: .4rem; padding: .32rem .7rem; border-radius: .55rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .2); color: var(--text-2); font: 400 .88rem var(--font-ui); cursor: pointer; transition: border-color .12s, background .12s; }
.clog-tab small { font: 400 .78rem var(--font-num); color: var(--text-3); }
.clog-tab:hover, .clog-tab:focus-visible { border-color: var(--edge); }
.clog-tab.is-on { border-color: var(--gold-2); background: rgba(242, 198, 106, .13); color: var(--gold-1); }
.clog-search { position: relative; flex: 1 1 14rem; display: flex; align-items: center; min-width: 0; max-width: 24rem; }
.clog-search .ia-glyph { position: absolute; left: .6rem; width: 1rem; height: 1rem; color: var(--text-3); pointer-events: none; }
.clog-search .input { padding-left: 2rem; }

.clog-skill { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .7rem; padding: .6rem .75rem; text-align: left; border-radius: .65rem; border: 1px solid var(--edge-soft); background: rgba(10, 16, 27, .55); color: var(--text-2); cursor: pointer; font-family: inherit; transition: border-color .12s; }
.clog-skill:hover, .clog-skill:focus-visible { border-color: color-mix(in srgb, var(--skill) 60%, transparent); }
.clog-skill .medal, .clog-skill .gd-crest { grid-row: span 2; }
.clog-skill-copy { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-width: 0; }
.clog-skill-copy b { font-weight: 600; color: var(--text-1); }
.clog-skill-copy span { font: 400 .95rem var(--font-num); color: var(--text-2); white-space: nowrap; }
.clog-skill-bar { position: relative; display: block; grid-column: 2; height: .42rem; border-radius: .3rem; background: rgba(255, 255, 255, .09); }
.clog-skill-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--skill); }
.clog-skill-bar > em { position: absolute; left: 82.5%; top: -.14rem; bottom: -.14rem; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .45); }
.clog-skill > .ia-glyph { position: absolute; left: 2.2rem; top: .35rem; width: 1rem; height: 1rem; color: var(--gold-1); filter: drop-shadow(0 0 .2rem rgba(0, 0, 0, .8)); }
.clog-skill.is-crowned { border-color: color-mix(in srgb, var(--gold-1) 55%, transparent); }

.clog-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: .65rem; border: 1px solid var(--edge-soft); background: rgba(10, 16, 27, .5); min-width: 0; }
.clog-item-well { display: block; width: 2.8rem; }
.clog-item-copy { display: grid; gap: .08rem; min-width: 0; }
.clog-item-copy b { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.clog-item-copy small { font-size: .82rem; color: var(--text-3); }
.clog-item.is-missing { background: rgba(8, 12, 20, .4); }
.clog-item.is-missing .clog-item-copy b { color: var(--text-3); font-weight: 500; }
.clog-item.is-missing .well > img { filter: grayscale(1) brightness(.4); opacity: .85; }

.clog-pet { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem .8rem; padding: .65rem .8rem; border-radius: .7rem; border: 1px solid var(--edge-soft); background: rgba(10, 16, 27, .5); min-width: 0; }
.clog-pet-art { --pet-size: 3.5rem; }
.clog-pet-copy { display: grid; gap: .1rem; min-width: 0; }
.clog-pet-copy b { font: 400 1.08rem/1.15 var(--font-display); color: var(--gold-1); }
.clog-pet-copy small { font-size: .84rem; line-height: 1.3; color: var(--text-3); text-wrap: pretty; }
.clog-pet.is-missing { background: rgba(8, 12, 20, .4); }
.clog-pet.is-missing .clog-pet-copy b { color: var(--text-2); }
.clog-pet.is-following { border-color: var(--gold-2); background: rgba(242, 198, 106, .07); }
.clog-pet-follow { grid-column: 2; justify-self: start; }

.clog-mon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: .65rem; border: 1px solid var(--edge-soft); background: rgba(10, 16, 27, .5); min-width: 0; }
.clog-mon-art { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; object-fit: contain; filter: drop-shadow(0 .12rem .15rem rgba(0, 0, 0, .6)); }
.clog-mon-art.is-emblem .ia-emblem { width: 2rem; height: 2rem; }
.clog-mon-copy { display: grid; gap: .08rem; min-width: 0; }
.clog-mon-copy b { font-weight: 600; color: var(--text-1); }
.clog-mon-copy small { font-size: .82rem; color: var(--text-3); }
.clog-mon.is-missing { background: rgba(8, 12, 20, .4); }
.clog-mon.is-missing .clog-mon-art { filter: grayscale(1) brightness(.3); }
.clog-mon.is-missing .clog-mon-copy b { color: var(--text-3); font-weight: 500; }
.clog-mon.has-bronze { border-color: rgba(205, 127, 50, .4); }
.clog-mon.has-silver { border-color: rgba(200, 210, 225, .4); }
.clog-mon.has-gold { border-color: rgba(242, 198, 106, .5); }
.clog-mon.has-dawn { border-color: rgba(255, 179, 200, .55); }

.clog-phone { display: grid; gap: 1rem; align-content: start; }
.clog-phone .clog-hero { display: grid; gap: .8rem; }
.clog-phone .clog-hero .hero-copy h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .clog-ladder { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .clog-tier.is-none { grid-column: 1 / -1; justify-self: start; }
  .clog-tier small { font-size: .66rem; }
  .clog-tier .item-img { width: 1.5rem; height: 1.5rem; }
}

.pet-portrait { --pet-size: 3.2rem; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--pet-size); height: var(--pet-size); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #243652, #0f1827 75%); box-shadow: 0 0 0 1px rgba(242, 198, 106, .4), inset 0 -.3rem .6rem rgba(0, 0, 0, .45); }
.pet-portrait .pet-svg { width: 94%; height: 94%; }
.pet-portrait img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 .1rem .1rem rgba(0, 0, 0, .6)); }
.pet-portrait .ia-emblem { width: 60%; height: 60%; }
.pet-portrait.is-dim .pet-svg, .pet-portrait.is-dim img, .pet-portrait.is-dim .ia-emblem { filter: brightness(0) opacity(.55); }
.pet-portrait.is-dim { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -.3rem .6rem rgba(0, 0, 0, .45); }

.pet-cell { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .45rem .6rem; border-radius: .65rem; border: 1px solid var(--edge-soft); background: rgba(10, 16, 27, .5); }
.pet-cell-art { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; }
.pet-cell-art .ia-glyph { width: 1.2rem; height: 1.2rem; color: var(--text-4); }
.pet-cell-copy { flex: 1 1 6rem; display: grid; min-width: 0; }
.pet-cell-copy small { font-size: .68rem; letter-spacing: .12em; color: var(--gold-3); }
.pet-cell-copy b { font: 400 1rem/1.15 var(--font-display); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-cell.is-empty .pet-cell-copy b { color: var(--text-3); font-size: .92rem; }
.pet-cell-acts { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

.context-menu.pet-menu { width: min(23rem, calc(100vw - 1rem)); max-height: min(28rem, calc(100vh - 1rem)); overflow-y: auto; overscroll-behavior: contain; }
.pet-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .35rem; padding: .15rem; }
.context-menu .pet-menu-item { display: grid; justify-items: center; align-content: start; gap: .25rem; width: auto; padding: .45rem .25rem; text-align: center; font-size: .8rem; line-height: 1.2; border: 1px solid transparent; color: var(--text-2); }
.context-menu .pet-menu-item span { overflow-wrap: anywhere; }
.context-menu .pet-menu-item.is-on { border-color: var(--gold-2); background: rgba(242, 198, 106, .1); color: var(--gold-1); }
.pet-menu-home { margin-top: .1rem; }

.portrait.frame-1 { --frame: #c9b99c; } .portrait.frame-2 { --frame: #eaf5ff; } .portrait.frame-3 { --frame: #f0a24a; }
.portrait.frame-4 { --frame: #9db2ff; } .portrait.frame-5 { --frame: #ff6f4a; } .portrait.frame-6 { --frame: #3fa0ef; }
.portrait.frame-7 { --frame: #b98dff; --glow: rgba(185, 141, 255, .5); } .portrait.frame-8 { --frame: #5eead4; --glow: rgba(94, 234, 212, .5); } .portrait.frame-9 { --frame: #ffb3c8; --glow: rgba(255, 179, 200, .55); }
.portrait.has-frame { box-shadow: 0 0 0 2px var(--frame), 0 0 0 3px #000, 0 0 .6rem var(--glow, transparent); }
.is-hud .cb-id .portrait.has-frame { box-shadow: 0 0 0 .13rem var(--frame), 0 0 0 .26rem rgba(0, 0, 0, .7), 0 .3rem .8rem rgba(0, 0, 0, .5), 0 0 .9rem var(--glow, transparent); }
.cb-mid .portrait.has-frame { box-shadow: 0 0 0 2px var(--frame), 0 0 0 3.5px rgba(0, 0, 0, .7), 0 0 .6rem var(--glow, transparent); }
.pc .pc-portrait.has-frame { box-shadow: 0 0 0 .16rem var(--frame), 0 0 0 .36rem rgba(0, 0, 0, .72), 0 .5rem 1.2rem rgba(0, 0, 0, .55), 0 0 1.2rem var(--glow, transparent); }
.pc-feat.is-log .item-img { width: 2.3rem; height: 2.3rem; object-fit: contain; }

.level-up.is-clog { padding: 1.1rem 2.4rem 1.1rem 1.1rem; border-color: var(--gold-2); animation-delay: 0s, 4.4s; }
.level-up.is-clog .clog-gem { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; animation: clog-pop .6s var(--ease-spring) both; }
.level-up.is-clog .clog-gem img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .2rem .4rem rgba(0, 0, 0, .6)); }
.level-up.is-clog .lu-copy strong { font-size: 2.1rem; }
.level-up.is-clog .lu-copy small { color: var(--gold-1); }
.level-up.is-clog .lu-copy span { color: var(--text-2); font-weight: 600; font-size: .95rem; }
.level-up.is-clog.is-whole { animation-delay: 0s, 6.4s; box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(255, 231, 166, .45), 0 1.2rem 3.5rem rgba(0, 0, 0, .65), 0 0 4rem rgba(255, 231, 166, .45); }
@keyframes clog-pop { 0% { scale: .6; } 55% { scale: 1.25; } 100% { scale: 1; } }
.reduce-motion .level-up.is-clog .clog-gem { animation: none; }
@media (prefers-reduced-motion: reduce) { .level-up.is-clog .clog-gem { animation: none; } }

.level-up:is(.is-clog, .is-pet) ~ .level-up, .level-up ~ .level-up:is(.is-clog, .is-pet) { margin-top: 6.6rem; }
.level-up.has-follow ~ .level-up { margin-top: 9.8rem; }

.level-up.is-pet .lu-copy .btn { margin-top: .35rem; justify-self: start; pointer-events: auto; }

.pc.deco-1 { --d1: #c9b99c; --d2: #8a7d66; --d3: #efe6d2; }
.pc.deco-2 { --d1: #eaf5ff; --d2: #8fb4d8; --d3: #ffffff; }
.pc.deco-3 { --d1: #f0a24a; --d2: #b2621a; --d3: #ffd9a0; }
.pc.deco-4 { --d1: #9db2ff; --d2: #5a6fd0; --d3: #dfe6ff; }
.pc.deco-5 { --d1: #ff6f4a; --d2: #b8321a; --d3: #ffc08a; }
.pc.deco-6 { --d1: #3fa0ef; --d2: #1c5ca0; --d3: #a7dcff; }
.pc.deco-7 { --d1: #b98dff; --d2: #6a3fc8; --d3: #e8d6ff; }
.pc.deco-8 { --d1: #5eead4; --d2: #1a9a8a; --d3: #d4fff6; }
.pc.deco-9 { --d1: #ffb3c8; --d2: #e08a5a; --d3: #fff0d4; }
.modal.profile-card.pc.pc-a.has-deco { --u: 1rem; --deco-drop: 0 1.8rem 4.5rem rgba(0, 0, 0, .55); overflow: visible; isolation: isolate; border-color: color-mix(in srgb, var(--d1) 50%, transparent); max-height: calc(100% - 1rem - var(--u) * 1.4); }
.pc.has-deco .pc-head { border-radius: 1.35rem 1.35rem 0 0; }
.pc.has-deco .pc-staff { border-radius: 0 0 1.35rem 1.35rem; }

.modal.profile-card.pc.pc-a.deco-1 { box-shadow: 0 0 0 calc(var(--u) * .1) rgba(0, 0, 0, .7), 0 0 0 calc(var(--u) * .2) color-mix(in srgb, var(--d1) 50%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-2 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .22) color-mix(in srgb, var(--d1) 85%, transparent), inset 0 0 0 calc(var(--u) * .09) color-mix(in srgb, var(--d1) 14%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-3 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .26) var(--d1), 0 0 0 calc(var(--u) * .36) #000, inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d1) 22%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-4 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .28) var(--d1), 0 0 0 calc(var(--u) * .38) #000, 0 0 0 calc(var(--u) * .48) color-mix(in srgb, var(--d1) 42%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d1) 28%, transparent), inset 0 0 calc(var(--u) * 1.5) color-mix(in srgb, var(--d1) 8%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-5 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .3) var(--d1), 0 0 0 calc(var(--u) * .4) #000, 0 0 0 calc(var(--u) * .55) var(--d2), 0 0 calc(var(--u) * 1) color-mix(in srgb, var(--d1) 26%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d1) 32%, transparent), inset 0 0 calc(var(--u) * 1.8) color-mix(in srgb, var(--d1) 10%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-6 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .3) var(--d1), 0 0 0 calc(var(--u) * .4) #000, 0 0 0 calc(var(--u) * .55) var(--d2), 0 0 calc(var(--u) * 1.4) color-mix(in srgb, var(--d1) 32%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d1) 34%, transparent), inset 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--d1) 12%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-7 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .34) var(--d1), 0 0 0 calc(var(--u) * .44) #000, 0 0 0 calc(var(--u) * .6) var(--d2), 0 0 calc(var(--u) * 1.8) calc(var(--u) * .1) color-mix(in srgb, var(--d1) 46%, transparent), 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--d1) 18%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d3) 28%, transparent), inset 0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--d1) 14%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-8 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .34) var(--d1), 0 0 0 calc(var(--u) * .44) #000, 0 0 0 calc(var(--u) * .6) var(--d2), 0 0 calc(var(--u) * 2.2) calc(var(--u) * .15) color-mix(in srgb, var(--d1) 54%, transparent), 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--d1) 22%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d3) 32%, transparent), inset 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--d1) 16%, transparent), var(--deco-drop); }
.modal.profile-card.pc.pc-a.deco-9 { box-shadow: 0 0 0 calc(var(--u) * .1) #000, 0 0 0 calc(var(--u) * .36) var(--d3), 0 0 0 calc(var(--u) * .46) #000, 0 0 0 calc(var(--u) * .64) var(--d1), 0 0 calc(var(--u) * 2.2) calc(var(--u) * .2) color-mix(in srgb, var(--d1) 56%, transparent), 0 0 calc(var(--u) * 5.5) color-mix(in srgb, var(--d3) 30%, transparent), inset 0 0 0 calc(var(--u) * .1) color-mix(in srgb, var(--d3) 36%, transparent), inset 0 0 calc(var(--u) * 3.4) color-mix(in srgb, var(--d1) 18%, transparent), var(--deco-drop); }

.pc-deco-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.deco-2 .pc-deco-bg { background: radial-gradient(75% 34% at 50% 0%, color-mix(in srgb, var(--d1) 8%, transparent), transparent); }
.deco-3 .pc-deco-bg { background: radial-gradient(75% 34% at 50% 0%, color-mix(in srgb, var(--d1) 10%, transparent), transparent), radial-gradient(55% 40% at 0% 100%, color-mix(in srgb, var(--d1) 10%, transparent), transparent); }
.deco-4 .pc-deco-bg { background: radial-gradient(75% 34% at 50% 0%, color-mix(in srgb, var(--d1) 11%, transparent), transparent), radial-gradient(55% 40% at 100% 100%, color-mix(in srgb, var(--d1) 11%, transparent), transparent), repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 4%, transparent) 0 1px, transparent 1px 14px); }
.deco-5 .pc-deco-bg { background: radial-gradient(75% 34% at 50% 0%, color-mix(in srgb, var(--d1) 10%, transparent), transparent), radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--d1) 14%, transparent), transparent), repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 5%, transparent) 0 1px, transparent 1px 13px); }
.deco-6 .pc-deco-bg { background: radial-gradient(75% 34% at 50% 0%, color-mix(in srgb, var(--d1) 11%, transparent), transparent), repeating-conic-gradient(from 12deg at 50% 118%, color-mix(in srgb, var(--d1) 4.5%, transparent) 0 5deg, transparent 5deg 10deg); }
.deco-7 .pc-deco-bg { background: radial-gradient(70% 36% at 50% 0%, color-mix(in srgb, var(--d1) 13%, transparent), transparent), radial-gradient(70% 36% at 50% 100%, color-mix(in srgb, var(--d1) 13%, transparent), transparent), repeating-linear-gradient(45deg, color-mix(in srgb, var(--d1) 5%, transparent) 0 1px, transparent 1px 18px), repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 5%, transparent) 0 1px, transparent 1px 18px); }
.deco-8 .pc-deco-bg { background: radial-gradient(70% 36% at 50% 0%, color-mix(in srgb, var(--d1) 15%, transparent), transparent), radial-gradient(70% 36% at 50% 100%, color-mix(in srgb, var(--d1) 13%, transparent), transparent), repeating-conic-gradient(from 0deg at 50% -14%, color-mix(in srgb, var(--d1) 5%, transparent) 0 4deg, transparent 4deg 8deg), repeating-linear-gradient(45deg, color-mix(in srgb, var(--d1) 4%, transparent) 0 1px, transparent 1px 18px), repeating-linear-gradient(135deg, color-mix(in srgb, var(--d1) 4%, transparent) 0 1px, transparent 1px 18px); }
.deco-9 .pc-deco-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--d1) 11%, transparent), transparent 40%, transparent 66%, color-mix(in srgb, var(--d3) 8%, transparent)), repeating-conic-gradient(from 6deg at 50% 118%, color-mix(in srgb, var(--d3) 5.5%, transparent) 0 4deg, transparent 4deg 8deg), repeating-linear-gradient(45deg, color-mix(in srgb, var(--d3) 3.5%, transparent) 0 1px, transparent 1px 16px), repeating-linear-gradient(135deg, color-mix(in srgb, var(--d3) 3.5%, transparent) 0 1px, transparent 1px 16px); }

.pc-deco { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pc-deco-c { position: absolute; width: calc(var(--u) * 9); height: calc(var(--u) * 9); overflow: visible; }
.pc-deco-c.tl { left: calc(var(--u) * -2.7); top: calc(var(--u) * -2.7); }
.pc-deco-c.tr { right: calc(var(--u) * -2.7); top: calc(var(--u) * -2.7); transform: scaleX(-1); }
.pc-deco-c.bl { left: calc(var(--u) * -2.7); bottom: calc(var(--u) * -2.7); transform: scaleY(-1); }
.pc-deco-c.br { right: calc(var(--u) * -2.7); bottom: calc(var(--u) * -2.7); transform: scale(-1, -1); }
.pc-deco-crest { position: absolute; left: 50%; top: calc(var(--u) * -1.4); width: calc(var(--u) * 12); height: calc(var(--u) * 4); margin-left: calc(var(--u) * -6); overflow: visible; }
.pc-deco svg .f1 { fill: var(--d1); } .pc-deco svg .f2 { fill: var(--d2); } .pc-deco svg .f3 { fill: var(--d3); } .pc-deco svg .fk { fill: #070b13; }
.pc-deco svg .dim { opacity: .8; }
.pc-deco svg .o { fill: #070b13; stroke: #070b13; stroke-width: 1.8; stroke-linejoin: round; }
.pc-deco svg .k1, .pc-deco svg .k2, .pc-deco svg .k3 { fill: none; stroke-linecap: round; }
.pc-deco svg .k1 { stroke: var(--d1); stroke-width: 1.5; } .pc-deco svg .k1.thin { stroke-width: 1; } .pc-deco svg .k1.bold { stroke-width: 2.2; }
.pc-deco svg .k2 { stroke: var(--d2); stroke-width: 1.1; } .pc-deco svg .k2.thin { stroke-width: .75; }
.pc-deco svg .k3 { stroke: var(--d3); stroke-width: 1; opacity: .7; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .modal.profile-card.pc.pc-a.has-deco { --u: .5rem; max-height: calc(100% - .2rem); }
  .modal-scrim:has(> .pc.has-deco) { padding: 1.4rem; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .collection-page .clog-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .collection-page .clog-tier > :is(button, .clog-tier-lock) { min-height: 44px; }
  .collection-page .clog-tier.is-none > button { min-height: 44px; }
  .collection-page .clog-recent-open { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0 .4rem; }
  .collection-page .clog-latest-item { width: 44px; }
  .collection-page :is(.clog-tab, .segmented button, .btn) { min-height: 44px; }
  .collection-page .segmented button { min-width: 44px; justify-content: center; }
  .collection-page .clog-tab { align-items: center; }
  .collection-page .clog-search .input { min-height: 44px; }
  .collection-page .clog-item-well .well { width: 44px; height: 44px; }
  .collection-page .src-btn::after { width: max(100%, 44px); height: max(100%, 44px); }
  .collection-page :is(.hero-copy .t-caps, .clog-tier small, .clog-tier.is-none > button, .clog-latest > small, .clog-recent-open, .clog-cat-line small, .win-caps, .clog-h, .clog-h small, .clog-skill-copy b, .clog-tab, .clog-tab small,
    .segmented button, .clog-item-copy b, .clog-item-copy small, .well .qty, .clog-pet-copy small, .clog-mon-copy b, .clog-mon-copy small, .clog-note, .btn) { font-size: .9rem; }
  .collection-page :is(.hero-copy .t-caps, .clog-latest > small, .win-caps, .clog-h) { letter-spacing: .06em; }
}