/* Bey sekmesi: panel kâğıt/mürekkep temasını kullanır; açık zeminde koyu yazı. */
.bey-head { display: flex; gap: var(--space-3); align-items: center; }
.bey-portrait { font-size: 44px; line-height: 1; padding: var(--space-2); border: 2px solid var(--border); border-radius: 50%; background: var(--surface-inset); }
/* Stat-free outfit art layered on the emoji portrait (bey slot): hats sit above the head, the kaftan is a collar band clipped to the circle. */
.bey-head .bey-portrait { position: relative; }
.bey-outfit { display: block; flex: none; pointer-events: none; }
.bey-portrait > .bey-outfit { position: absolute; }
.bey-portrait > .bey-outfit-hat { left: 0; top: -14px; width: 100%; height: auto; }
.bey-portrait > .bey-outfit-robe { inset: 0; width: 100%; height: 100%; clip-path: circle(50%); }
.bey-points { color: var(--ink); font-weight: 700; }
.bey-adv button { display: block; width: 100%; margin-top: var(--space-2); text-align: left; }
.bey-adv button small { display: block; font-weight: 400; }
.bey-dots { letter-spacing: .15em; color: var(--ink); }
.bey-last { margin: var(--space-3) 0 0; padding: var(--space-2); border-left: 3px solid var(--border); background: var(--surface-inset); color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.bey-slots, .bey-inv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.bey-gear { --rarity: var(--rarity-common); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-soft); border-left: 4px solid var(--rarity); border-radius: 8px; background: var(--surface-raised); color: var(--ink); min-width: 0; }
.bey-gear.rare { --rarity: var(--rarity-rare); }
.bey-gear.epic { --rarity: var(--rarity-legendary); }
.bey-gear.empty { background: var(--surface-inset); border-left-color: var(--border-soft); }
.bey-gear-ico { font-size: 26px; }
.bey-gear-txt { flex: 1; min-width: 0; }
.bey-gear-txt small { display: block; color: var(--muted); font-size: var(--text-xs); }
.bey-gear button { flex: none; }
.bey-sub-row, .bey-back { width: 100%; min-height: 44px; text-align: left; cursor: var(--cursor-pointer, pointer); align-items: center; }
.bey-sub-note { font-size: var(--text-sm); font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.bey-pill { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #c99a2e; color: #1f1a0e; font-weight: 700; text-align: center; }
.bey-back { margin-bottom: var(--space-2); }
.bey-districts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.bey-district { text-align: left; padding: var(--space-2); }
.bey-district small { display: block; font-weight: 400; color: var(--muted); }
.bey-district.on { outline: 2px solid var(--ink); }
.bey-district.done { opacity: .7; }
.bey-lead { margin: var(--space-2) 0; padding: var(--space-2); border-left: 3px solid var(--border); background: var(--surface-inset); color: var(--ink); }
.bey-marks, .bey-hist { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: var(--space-1); }
.bey-marks li, .bey-hist li { padding: var(--space-1) var(--space-2); border-left: 3px solid var(--border-soft); color: var(--muted); font-size: var(--text-sm); }
.bey-marks li.is-done { border-left-color: var(--ink); color: var(--ink); }
.bey-hist li { color: var(--ink); }
.bey-keep { font-size: 26px; margin: var(--space-2) 0 0; letter-spacing: .2em; }