.modal.profile-card.pc { position: relative; display: flex; flex-direction: column; min-height: 0; max-height: calc(100% - 1rem); padding: 0; overflow: hidden; border-radius: 1.35rem; border: 1px solid rgba(242, 198, 106, .32); background: linear-gradient(180deg, #101a2b 0%, #0a111d 30%, #080d16 100%); color: var(--text-1); text-align: left; }
.modal.profile-card.pc::before { display: none; }
.modal.profile-card.pc-a { width: min(70rem, 100%); }
.pc-close { position: absolute; z-index: 4; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .85rem; border: 1px solid rgba(242, 198, 106, .3); background: rgba(8, 13, 22, .6); color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s; }
.pc-close:hover, .pc-close:focus-visible { border-color: var(--gold-2); color: var(--gold-1); }
.pc-close .ia-glyph { width: 1.3rem; height: 1.3rem; }
.pc-head.is-waiting { padding: 2rem 5rem 2rem 1.8rem; }
.pc .pc-caps { margin: 0 0 .65rem; font: 400 1rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }

.pc .pc-portrait { position: relative; flex: none; width: 6.4rem; height: 6.4rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #2b4163, #0f1827 75%); box-shadow: 0 0 0 .16rem #c9953f, 0 0 0 .36rem rgba(0, 0, 0, .72), 0 .5rem 1.2rem rgba(0, 0, 0, .55); }
.pc .pc-portrait .q-host { position: absolute; inset: 0; min-height: 0; }
.pc .q-host canvas { display: block; width: 100%; height: 100%; }
.pc .q-host[data-status="loading"]::after { content: none; }
.pc .pc-portrait .initial { font: 400 2.6rem var(--font-display); color: var(--gold-1); }
.pc-who { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: .5rem; }
.modal.pc .pc-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: 0; margin: 0; text-align: left; font: 400 2.35rem/1.08 var(--font-display); letter-spacing: .01em; color: var(--gold-0); text-shadow: 0 1px 0 #000; }
.pc-name-text { overflow-wrap: anywhere; }
.pc .pc-name .epithet { font-size: .8em; }
.pc-you { align-self: center; padding: .12rem .5rem; border-radius: .4rem; border: 1px solid rgba(242, 198, 106, .4); font: 600 1rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); text-shadow: none; }
.pc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.pc .role-mark { gap: .3rem; padding: .24rem .6rem .24rem .45rem; border-radius: .45rem; font-size: 1rem; }
.pc .role-mark .ia-glyph { width: 1.05rem; height: 1.05rem; }
.pc-clan { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; max-width: 100%; min-height: 2.35rem; padding: .2rem .75rem .2rem .3rem; border-radius: .65rem; border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 34%, transparent); background: color-mix(in srgb, var(--clan, var(--gold-2)) 10%, rgba(0, 0, 0, .25)); color: var(--text-1); font: 400 1.05rem/1.2 var(--font-ui); text-align: left; cursor: pointer; transition: border-color .15s; }
.pc-clan:hover, .pc-clan:focus-visible { border-color: var(--clan-edge, var(--gold-2)); }
.pc-clan .clan-name-badge { font-size: 1rem; padding: .12rem .45rem .12rem .32rem; }
.pc-clan .clan-name-badge .ia-emblem { width: 1.1rem; height: 1.1rem; }
.pc-clan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.15rem/1.2 var(--font-display); color: var(--text-1); }
.pc-clan small { flex: none; font-size: 1rem; color: var(--text-3); white-space: nowrap; }
.pc-clan-name + small::before { content: "·"; margin-right: .45rem; color: var(--text-3); }
.modal.pc .pc-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; text-align: left; font-size: 1.05rem; color: var(--text-2); }
.pc-dot { flex: none; width: .72rem; height: .72rem; border-radius: 50%; background: #5d5f68; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); }
.pc-dot.is-online { background: var(--online); }
.pc-doing { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; padding: .2rem .85rem .2rem .22rem; border-radius: 2rem; border: 1px solid color-mix(in srgb, var(--skill, var(--gold-2)) 36%, transparent); background: color-mix(in srgb, var(--skill, var(--gold-2)) 11%, transparent); }
.pc-doing b { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.pc-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.pc-where::before { content: "·"; margin-right: .45rem; }
.pc-rest { flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; }
.pc-rest .ia-emblem { width: 100%; height: 100%; }

.pc-acts { flex: none; display: flex; align-items: center; gap: .5rem; }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.9rem; padding: 0 1.1rem; border-radius: .8rem; border: 1px solid rgba(242, 198, 106, .42); background: rgba(242, 198, 106, .09); color: var(--gold-1); font: 600 1.05rem var(--font-ui); white-space: nowrap; cursor: pointer; transition: filter .15s, border-color .15s; }
.pc-btn .ia-glyph { width: 1.15rem; height: 1.15rem; }
.pc-btn:hover, .pc-btn:focus-visible { filter: brightness(1.18); border-color: var(--gold-2); }
.pc-btn.is-pm { border-color: color-mix(in srgb, var(--pm) 52%, transparent); background: color-mix(in srgb, var(--pm) 11%, transparent); color: var(--pm-strong); }
.pc-btn.is-quiet { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04); color: var(--text-2); }
.pc-btn.is-icon { width: 2.9rem; padding: 0; }
.pc-friend-mark { display: inline-flex; align-items: center; gap: .4rem; height: 2.9rem; padding: 0 .7rem; font: 600 1.05rem var(--font-ui); color: var(--online); white-space: nowrap; }
.pc-friend-mark .ia-glyph { width: 1.15rem; height: 1.15rem; }
.pc-friend-mark.is-sent { color: var(--text-3); }
.pc .ev-title-pick { margin: 0; flex-wrap: nowrap; justify-content: flex-end; gap: .6rem; }
.pc .ev-title-pick .t-caps { font-size: 1rem; font-weight: 400; letter-spacing: .12em; }
.pc .ev-title-pick .segmented { padding: .2rem; border-radius: .7rem; border-color: rgba(242, 198, 106, .25); }
.pc .ev-title-pick .segmented button { min-height: 2.35rem; padding: 0 .9rem; border-radius: .55rem; font-size: 1.02rem; font-weight: 600; }

.pc-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-figures > div { display: grid; justify-items: center; align-content: center; gap: .25rem; min-width: 0; padding: .2rem .4rem; text-align: center; }
.pc-figures > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.pc-figures b { display: inline-flex; align-items: center; gap: .2rem; font: 400 1.95rem/1.05 var(--font-num); color: var(--gold-0); white-space: nowrap; }
.pc-figures small { font: 400 1rem/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-3); white-space: nowrap; }
.pc-figures .is-power b { color: #ffd98a; }
.pc-figures .is-power .ia-glyph { width: 1.35rem; height: 1.35rem; color: var(--gold-2); }

.pc-skill { display: flex; align-items: center; gap: .6rem; min-width: 0; height: 2.45rem; padding: 0 .6rem 0 .25rem; border-radius: .65rem; }
.pc-skill-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; color: var(--text-2); }
.pc-skill b { flex: none; font: 400 1.3rem var(--font-num); color: var(--gold-1); }
.pc-skill.is-best { background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 18%, transparent), transparent 85%); }
.pc-skill.is-best .pc-skill-name { color: var(--text-1); }
.pc-skill.is-best b { color: var(--gold-0); }

.pc-slot-cell { position: relative; display: grid; justify-items: center; align-content: start; gap: .35rem; min-width: 0; }
.pc .pc-slot { width: 100%; border-radius: .75rem; }
.pc .pc-slot:not([class*=" r-"]) { border-color: rgba(255, 255, 255, .08); }
.pc .pc-slot > img { width: 74%; height: 74%; }
.pc .pc-slot.is-ghost > img { width: 56%; height: 56%; opacity: .45; }
.pc-slot-cell small { font-size: 1rem; line-height: 1.2; color: var(--text-3); white-space: nowrap; }
.pc .pc-slot.is-best { border-color: rgba(255, 214, 120, .8); box-shadow: inset 0 .15rem .45rem rgba(0, 0, 0, .75), inset 0 -.9rem 1.2rem -.6rem var(--rar), 0 0 0 1px rgba(255, 214, 120, .35), 0 0 1rem rgba(255, 190, 80, .28); }
.pc-star { position: absolute; z-index: 2; top: -.45rem; right: -.45rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff1c4, #e6b453 60%, #9c6b1c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 .1rem .3rem rgba(0, 0, 0, .6); color: #3a2506; }
.pc-star .ia-glyph { width: 1rem; height: 1rem; }
.modal.pc .pc-best { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .5rem; margin: .85rem 0 0; font-size: 1.05rem; color: var(--text-3); text-align: center; }
.pc-best .ia-glyph { align-self: center; width: 1rem; height: 1rem; color: var(--gold-2); }
.pc-best b { font-weight: 600; }
.pc-best small { font-size: 1rem; color: var(--text-3); }

.pc-feat { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: .85rem .95rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); color: inherit; font: inherit; text-align: left; }
button.pc-feat { cursor: pointer; transition: border-color .15s; }
button.pc-feat:hover, button.pc-feat:focus-visible { border-color: rgba(242, 198, 106, .5); }
.pc-feat-art { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; }
.pc-feat-art > .ia-emblem { width: 100%; height: 100%; filter: drop-shadow(0 .15rem .25rem rgba(0, 0, 0, .6)); }
.pc .pc-feat-well { width: 2.8rem; border-radius: .6rem; }
.pc-feat-copy { display: grid; gap: .15rem; min-width: 0; }
.pc-feat-copy b { font: 600 1.15rem/1.2 var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; }
.pc-feat-copy b .t-num { font: 400 1.5rem/1.05 var(--font-num); color: var(--gold-0); }
.pc-feat.is-skill .pc-feat-copy b .t-num { font-size: 1.15rem; color: var(--gold-1); }
.pc-feat-copy small { font-size: 1rem; line-height: 1.2; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-of { font: 400 1rem var(--font-num); color: var(--text-3); }
.pc-feat.is-top-1 { border-color: rgba(255, 207, 92, .6); background: radial-gradient(circle at 20% 50%, rgba(255, 207, 92, .2), transparent 70%), rgba(255, 255, 255, .035); }
.pc-feat.is-top-2 { border-color: rgba(206, 216, 232, .5); background: radial-gradient(circle at 20% 50%, rgba(206, 216, 232, .16), transparent 70%), rgba(255, 255, 255, .035); }
.pc-feat.is-top-3 { border-color: rgba(214, 140, 80, .55); background: radial-gradient(circle at 20% 50%, rgba(214, 140, 80, .18), transparent 70%), rgba(255, 255, 255, .035); }
.pc-feat:is(.g-epic, .g-legendary, .g-mythic) { border-color: color-mix(in srgb, var(--g) 40%, transparent); background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--g) 16%, transparent), transparent 70%), rgba(255, 255, 255, .035); }
.pc-feat.g-epic { --g: var(--rar-epic); }
.pc-feat.g-legendary { --g: var(--rar-legendary); }
.pc-feat.g-mythic { --g: var(--rar-mythic); }

.pc-extras { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; min-width: 0; }
.pc .pc-extras .profile-keeps { margin: 0; gap: .45rem; }
.pc .pc-extras .profile-keep { gap: .4rem; padding: .2rem .6rem .2rem .25rem; font-size: 1.02rem; }
.pc .pc-extras .profile-keep small { font-size: 1rem; }
.pc .pc-extras .profile-keep .ev-icon { width: 1.6rem; height: 1.6rem; }
.pc .pc-pets { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: 1rem; color: var(--text-3); }
.pc .pc-pets .ia-glyph { width: 1rem; height: 1rem; color: var(--gold-2); }
.pc .pc-pets span { padding: .1rem .45rem; border-radius: .35rem; border: 1px solid color-mix(in srgb, var(--rar-legendary) 35%, transparent); color: var(--gold-1); }
.pc-since { margin-left: auto; font-size: 1rem; color: var(--text-3); white-space: nowrap; }
.pc .profile-cape { margin: 0; }

.pc-staff { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: .95rem 1.6rem 1.05rem; border-top: 1px solid rgba(255, 120, 105, .32); background: linear-gradient(180deg, rgba(255, 93, 87, .09), rgba(255, 93, 87, .035)); }
.pc-staff-mark { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem .28rem .45rem; border-radius: .5rem; font: 800 1rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #ffcabf; background: linear-gradient(180deg, rgba(255, 128, 108, .26), rgba(168, 42, 38, .16)); box-shadow: inset 0 0 0 1px rgba(255, 140, 120, .5); }
.pc-staff-mark .ia-glyph { width: 1.05rem; height: 1.05rem; }
.pc-staff-tools { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; }
.pc-tool { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.65rem; padding: 0 .95rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--text-1); font: 600 1.02rem var(--font-ui); white-space: nowrap; cursor: pointer; transition: filter .15s, border-color .15s; }
.pc-tool:hover, .pc-tool:focus-visible { filter: brightness(1.2); border-color: rgba(255, 255, 255, .3); }
.pc-tool .ia-emblem { width: 1.35rem; height: 1.35rem; }
.pc-tool.is-danger { border-color: rgba(255, 93, 87, .55); background: rgba(255, 93, 87, .14); color: #ffaaa4; }
.pc-mute { display: inline-flex; align-items: stretch; }
.pc .pc-mute .profile-mute { display: flex; }
.pc .pc-mute .select { height: 2.65rem; min-height: 0; padding: 0 2.1rem 0 .8rem; border-radius: .7rem 0 0 .7rem; border: 1px solid rgba(255, 255, 255, .15); border-right: 0; color: var(--text-1); font: 400 1.02rem var(--font-ui); }
.pc-mute .pc-tool { border-radius: 0 .7rem .7rem 0; }
.pc-muted { display: inline-flex; align-items: center; gap: .6rem; }
.pc .profile-muted { font-size: 1.02rem; color: #ffcfae; white-space: nowrap; }

.pc-a .pc-head { flex: none; display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 5.2rem 1.35rem 1.7rem; border-bottom: 1px solid rgba(242, 198, 106, .18); background: radial-gradient(90% 160% at 0% 0%, rgba(242, 198, 106, .11), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)); }
.pc-a .pc-portrait.is-large { width: 6.8rem; height: 6.8rem; }
.pc-a .pc-body.profile-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 1.35rem; padding: 1.35rem 1.7rem 1.5rem; }
.pc-a-main { display: grid; grid-template-columns: 25rem minmax(0, 1fr); gap: 1.6rem; min-width: 0; }
.pc-a-doll { padding: 1.1rem 1.2rem 1.05rem; border-radius: 1.1rem; border: 1px solid rgba(255, 255, 255, .07); background: radial-gradient(55% 50% at 50% 46%, rgba(242, 198, 106, .11), transparent 72%), rgba(255, 255, 255, .025); }
.pc-doll { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.6rem; gap: .7rem; }
.pc-doll-side { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.pc-doll-side.is-right { justify-content: space-between; }
.pc-figure { position: relative; min-width: 0; min-height: 25.4rem; }
.pc-figure .q-host { position: absolute; inset: -.3rem -.8rem .5rem; min-height: 0; }
.pc-plinth { position: absolute; left: 10%; right: 10%; bottom: -.1rem; height: 1.7rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 198, 106, .3), rgba(242, 198, 106, .08) 60%, transparent); pointer-events: none; }
.pc-a-side { display: grid; align-content: start; gap: 1.35rem; min-width: 0; }
.pc-a .pc-figures { padding: .95rem .3rem; border-radius: 1.1rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
.pc-a-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.1rem; }
.pc-group { display: grid; align-content: start; gap: .12rem; min-width: 0; }
.pc-group .pc-caps { margin: 0 0 .45rem .3rem; }
.pc-feat-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7rem; }
.pc-feat-row .pc-feat { flex-direction: column; gap: .45rem; padding: .8rem .5rem .75rem; text-align: center; }
.pc-feat-row .pc-feat-copy { justify-items: center; }
.pc-a .pc-extras { padding-top: .1rem; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .modal-scrim:has(> .pc) { padding: max(.45rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left)); }
  .modal-scrim:has(> .pc.has-deco) { padding: max(1.4rem, env(safe-area-inset-top)) max(1.4rem, env(safe-area-inset-right)) max(1.4rem, env(safe-area-inset-bottom)) max(1.4rem, env(safe-area-inset-left)); }
  .modal.profile-card.pc { width: 100%; max-height: calc(100% - .2rem); border-radius: 1.15rem; }
  .modal.pc .pc-name { font-size: 1.8rem; }
  .pc .pc-caps { font-size: .92rem; }
  .pc-close { top: .75rem; right: .75rem; width: 3.3rem; height: 3.3rem; }
  .pc-btn { height: 3.3rem; }
  .pc-btn.is-icon { width: 3.3rem; }
  .pc-acts { width: 100%; flex-wrap: wrap; }
  .pc-acts .pc-btn:not(.is-icon) { flex: 1 1 auto; padding: 0 .8rem; }
  .pc-acts.is-own { justify-content: flex-start; }
  .pc .ev-title-pick { flex-wrap: wrap; justify-content: flex-start; }
  .pc .ev-title-pick .segmented button { min-height: 3.1rem; }
  .pc-figures > div { padding: .2rem .15rem; }
  .pc-figures b { font-size: 1.45rem; }
  .pc-figures small { font-size: .92rem; letter-spacing: .04em; }
  .pc-figures .is-power .ia-glyph { width: 1.05rem; height: 1.05rem; }
  .pc-feat-copy small, .pc-slot-cell small, .pc-coin small, .pc-since, .pc-best small { font-size: .92rem; }
  .pc-staff { padding: .85rem 1rem 1rem; }
  .pc-staff-tools { justify-content: flex-start; flex-basis: 100%; }
  .pc-tool { height: 3.3rem; }
  .pc .pc-mute .select { height: 3.3rem; }
  .pc-since { margin-left: 0; }
  .pc-doing b, .pc-where, .pc-clan-name { white-space: normal; }

  .pc-a .pc-head { flex-wrap: wrap; gap: .9rem 1rem; padding: 1.1rem 4.5rem .95rem 1rem; }
  .pc-a .pc-portrait.is-large { width: 4.8rem; height: 4.8rem; }
  .pc-a .pc-acts { order: 3; width: calc(100% + 3.5rem); margin-right: -3.5rem; }
  .pc-a .pc-body { gap: 1.1rem; padding: 1rem 1rem 1.2rem; }
  .pc-a-main { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pc-a .pc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .85rem; order: -1; }
  .pc-a .pc-figures > div:nth-child(odd) { border-left: 0; }
  .pc-a-side { display: contents; }
  .pc-a-doll { padding: .9rem .8rem .85rem; }
  .pc-doll { grid-template-columns: 4.3rem minmax(0, 1fr) 4.3rem; }
  .pc-figure { min-height: 23.9rem; }
  .pc-a-skills { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .pc-group { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .6rem; }
  .pc-group .pc-caps { grid-column: 1 / -1; }
  .pc-feat-row { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .pc-doing, .pc-clan { flex-wrap: wrap; row-gap: 0; }
  .pc-clan { min-height: 3.3rem; }
  .pc .title-dd[open] { flex: 1 1 100%; }
  .pc .title-dd > summary { min-height: 3.3rem; }
  .pc .td-list { position: static; width: 100%; max-height: none; margin-top: .4rem; box-shadow: none; }
  .pc .td-item { min-height: 3.3rem; }
  .pc .td-item.is-locked { flex-wrap: wrap; }
  .pc .td-how { font-size: .9rem; line-height: 1.35; }
  .pc :is(.title-dd > summary small, .td-now, .td-group, .gd-profile > small) { font-size: .9rem; }
}

@media (max-width: 380px) {
  .pc-clan-name { display: none; }
}

.title-pick { position: relative; }
.title-dd { position: relative; }
.title-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.2rem; padding: 0 .75rem; border-radius: .6rem; border: 1px solid rgba(242, 198, 106, .3); background: rgba(255, 255, 255, .04); color: var(--text-1); cursor: pointer; font-weight: 600; }
.title-dd > summary::-webkit-details-marker { display: none; }
.title-dd > summary small { color: var(--text-3); font-weight: 400; font-size: .8rem; }
.title-dd > summary .ia-glyph { width: .8rem; height: .8rem; color: var(--gold-2); }
.title-dd[open] > summary { border-color: var(--gold-2); }
.td-list { position: absolute; z-index: 30; right: 0; top: calc(100% + .3rem); width: min(19rem, 80vw); max-height: 20rem; overflow-y: auto; padding: .4rem; border-radius: .7rem; border: 1px solid rgba(242, 198, 106, .4); background: rgba(9, 14, 24, .98); box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .55); display: grid; gap: .1rem; scrollbar-width: thin; }
.td-group { margin: .5rem .3rem .15rem; font-size: .72rem; letter-spacing: .1em; color: var(--gold-3); }
.td-item { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .4rem .6rem; border-radius: .45rem; border: 0; background: none; color: var(--text-1); text-align: left; font: 500 .95rem var(--font-ui); cursor: pointer; }
.td-item:hover:not(.is-locked), .td-item:focus-visible { background: rgba(242, 198, 106, .12); }
.td-item.is-worn { color: var(--gold-1); box-shadow: inset 2px 0 0 var(--gold-2); }
.td-item.is-locked { color: var(--text-3); cursor: help; }
.td-item.is-locked .ia-glyph { width: .8rem; height: .8rem; opacity: .8; }