/* Character lobby: scoped above the game and themed through the existing tokens. */
#charModal {
  padding: 0;
  align-items: stretch;
  overflow: auto;
  background: var(--bg-deepest) url('/assets/characters/lobby/hall.webp') center / cover no-repeat;
  backdrop-filter: none;
  color: var(--text-1);
  font-family: var(--font-ui);
}
body[data-animated-theme] #charModal {
  --gold: var(--animated-theme-accent);
  --gold-b: var(--animated-theme-light);
  --gold-d: color-mix(in srgb, var(--animated-theme-accent) 60%, transparent);
  --gold-g: color-mix(in srgb, var(--animated-theme-accent) 18%, transparent);
  --bg-base: color-mix(in srgb, var(--animated-theme-base) 65%, #050608);
  --bg-deepest: color-mix(in srgb, var(--animated-theme-base) 40%, #020305);
}
#charModal[aria-hidden='true'] { display: none; }
#charModal.open { display: block; }
#charModal [hidden] { display: none !important; }
#charModal *, #charModal *::before, #charModal *::after { box-sizing: border-box; }
#charModal button, #charModal input { font: inherit; }
#charModal button { cursor: pointer; }
#charModal button:disabled { cursor: default; opacity: .5; }
#charModal button:focus-visible, #charModal input:focus-visible { outline: 2px solid var(--gold-b); outline-offset: 3px; }
#charModal .char-lobby-shell { position: relative; min-height: 100%; max-width: 1800px; margin: auto; padding: 20px 28px 24px; }
#charModal .char-lobby-top { height: 84px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
#charModal .char-brand { width: 220px; height: 78px; object-fit: contain; object-position: left top; }
#charModal button:not(.char-slot):not(.class-picker-option):not(.char-gender-choice):not(.char-equip-slot):not(.char-primary) { min-height: 44px; border: 1px solid var(--gold-d); border-radius: 5px; padding: 9px 16px; color: var(--gold-b); background: var(--bg-base); }
#charModal .char-lobby-layout { display: grid; grid-template-columns: minmax(220px, 290px) minmax(160px, 1fr) minmax(340px, 430px); gap: 24px; align-items: center; min-height: calc(100dvh - 130px); }
#charModal .char-lobby-panel { position: relative; border: 1px solid var(--gold-d); border-radius: 6px; background: color-mix(in srgb, var(--bg-base) 94%, transparent); box-shadow: 0 15px 50px #0009, inset 0 0 0 3px color-mix(in srgb, var(--gold-d) 20%, transparent); padding: 20px; }
#charModal .char-lobby-panel::before, #charModal .char-lobby-panel::after { content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none; opacity: .7; border-color: var(--gold-d); border-style: solid; }
#charModal .char-lobby-panel::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
#charModal .char-lobby-panel::after { right: 4px; bottom: 4px; border-width: 0 1px 1px 0; }
#charModal h1, #charModal h2, #charModal .char-name, #charModal .char-slot-empty b { font-family: 'Alegreya', Georgia, serif; font-weight: 500; color: var(--gold-b); }
#charModal h1 { font-size: clamp(27px, 2.45vw, 38px); line-height: 1.12; margin: 0; overflow-wrap: anywhere; }
#charModal h2 { font-size: 23px; line-height: 1.2; margin: 0 0 14px; }
#charModal p { color: var(--text-2); line-height: 1.5; }
#charModal .char-sidebar { z-index: 1; align-self: center; }
#charModal .char-slots { display: grid; grid-template-columns: 1fr; gap: 12px; }
#charModal .char-slot { width: 100%; min-height: 126px; height: auto; display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--gold-g); border-radius: 4px; background: var(--bg-base); text-align: left; overflow: hidden; }
#charModal .char-slot.active { border-color: var(--gold-b); box-shadow: 0 0 12px var(--gold-g), inset 0 0 0 1px var(--gold-d); }
#charModal .char-slot-portrait { width: 35%; max-width: 98px; align-self: stretch; flex: 0 0 35%; min-height: 126px; object-fit: cover; object-position: 50% 16%; }
#charModal .char-slot-identity { min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 12px 9px; }
#charModal .char-class-icon { flex: 0 0 36px; width: 36px; height: 36px; margin: 0; border-radius: 4px; }
#charModal .char-class-icon img, #charModal .class-picker-icon img, #charModal .char-detail-class-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
#charModal .char-slot-copy { display: grid; gap: 5px; min-width: 0; }
#charModal .char-name { grid-column: auto; grid-row: auto; font-size: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#charModal .char-slot-copy > span, #charModal .char-slot-empty > span { color: var(--text-2); font-size: 12px; }
#charModal .char-slot-copy small { color: var(--c-danger); font-size: 10px; }
#charModal .char-slot-empty { padding: 20px 14px; display: flex; align-items: center; gap: 12px; }
#charModal .char-slot-empty .char-empty-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid var(--gold-d); border-radius: 50%; color: var(--gold-b); font-family: Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1; }
#charModal .char-empty-copy { display: grid; gap: 7px; min-width: 0; }
#charModal .char-slot-empty b { font-size: 22px; }
#charModal .char-sidebar footer { display: grid; gap: 8px; border-top: 1px solid var(--gold-g); margin-top: 24px; padding-top: 14px; }
#charModal .char-sidebar footer button { width: 100%; padding-inline: 8px !important; }
#charModal .char-hero-stage { position: relative; align-self: stretch; min-width: 0; pointer-events: none; }
#charModal #charHero { position: absolute; width: calc(100% + 150px); max-width: none; height: calc(100% + 40px); left: -85px; bottom: -24px; object-fit: contain; object-position: center bottom; }
#charModal .char-context { position: relative; z-index: 1; max-height: calc(100dvh - 128px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--gold-d) transparent; }
#charModal .char-form, #charModal .char-form.open { display: flex; flex-direction: column; align-items: stretch; gap: 18px; margin: 0; padding: 0; border: 0; }
#charModal .char-form header { padding-bottom: 12px; border-bottom: 1px solid var(--gold-g); }
#charModal .char-form header p { margin: 6px 0 0; }
#charModal fieldset { min-width: 0; display: grid; gap: 20px; border: 0; padding: 0; margin: 0; }
#charModal .char-class-field { gap: 0; }
#charModal #charClassMenu { display: grid; gap: 7px; }
#charModal .class-picker-option { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 5px 8px; border: 1px solid var(--gold-g); border-radius: 4px; background: var(--bg-base); color: var(--text-1); text-align: left; }
#charModal .class-picker-icon { flex: 0 0 37px; width: 37px; height: 37px; display: block; }
#charModal .char-selected-label { display: none; margin-left: auto; color: var(--gold-b); font-size: 10px; }
#charModal .class-picker-option[aria-pressed='true'], #charModal .char-gender-choice[aria-pressed='true'] { border-color: var(--gold-b); box-shadow: inset 0 0 0 1px var(--gold-d), 0 0 9px var(--gold-g); }
#charModal .class-picker-option[aria-pressed='true'] .char-selected-label { display: inline; }
#charModal #charGender { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#charModal .char-gender-choice { position: relative; height: 92px; overflow: hidden; border: 1px solid var(--gold-g); border-radius: 4px; background: var(--bg-base); color: var(--text-1); text-align: right; padding: 0; }
#charModal .char-gender-choice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 13%; }
#charModal .char-gender-choice span { position: absolute; right: 0; bottom: 0; padding: 5px 9px; background: #090b10df; color: #f5eedf; }
#charModal .char-name-field { display: grid; gap: 8px; color: var(--gold-b); font-family: 'Alegreya', Georgia, serif; font-size: 21px; }
#charModal .char-name-field input, #charModal .char-rename-input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--gold-d); border-radius: 4px; padding: 10px 12px; background: var(--bg-base); color: var(--text-1); font-family: var(--font-ui); font-size: 16px; }
#charModal .char-name-field small { color: var(--text-2); font-family: var(--font-ui); font-size: 12px; }
#charModal .char-primary { width: 100%; min-height: 56px; border: 1px solid var(--gold-b); border-radius: 5px; background: linear-gradient(180deg, var(--gold-b), var(--gold) 48%, var(--gold-d)), var(--bg-base); box-shadow: inset 0 0 0 2px var(--gold-d), inset 0 0 0 3px var(--gold-b), 0 3px 15px #0007; color: var(--bg-deepest); padding: 12px; font-family: 'Alegreya', Georgia, serif; font-size: 26px; line-height: 1.1; }
#charModal .char-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
#charModal .char-detail-head > div { min-width: 0; }
#charModal .char-detail-head p { margin: 7px 0 0; font-size: 14px; }
#charModal .char-detail-class-icon { width: 66px; height: 66px; flex: 0 0 66px; display: block; }
#charModal .char-summary { border-block: 1px solid var(--gold-g); padding: 10px 0; margin-bottom: 16px; color: var(--text-2); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
#charModal .char-summary strong { color: var(--gold-b); }
#charModal .char-equipment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
#charModal .char-equip-slot { display: grid; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text-2); font-size: 12px; text-align: center; }
#charModal .char-equip-slot:disabled { opacity: .65; }
#charModal .char-equip-art { display: grid; place-items: center; position: relative; height: clamp(60px, 8.2dvh, 90px); min-height: 60px; border: 1px solid var(--gold-d); border-radius: 3px; background: var(--bg-deepest); }
#charModal .char-equip-art img { width: 82%; height: 82%; min-height: 0; object-fit: contain; }
#charModal .char-equip-art b { position: absolute; top: 2px; right: 4px; color: var(--gold-b); font-size: 17px; line-height: 1; text-shadow: 1px 1px 3px #000; }
#charModal .char-equip-art small { position: absolute; top: 3px; left: 4px; color: var(--gold-b); }
#charModal .char-equip-slot.selected .char-equip-art { border-color: var(--gold-b); box-shadow: 0 0 8px var(--gold-g); }
#charModal .char-equip-empty { font-size: 11px; color: var(--text-3); }
#charModal .char-item-context { min-height: 56px; padding: 10px 12px; margin: 15px 0; border: 1px solid var(--gold-g); border-radius: 4px; font-size: 12px; line-height: 1.45; color: var(--gold-b); }
#charModal .char-management { border-top: 1px solid var(--gold-g); padding-top: 15px; margin: 15px 0; }
#charModal .char-management-note { font-size: 12px; }
#charModal .char-rename-editor { display: flex; flex-wrap: wrap; gap: 8px; }
#charModal .char-rename-editor label { flex: 1 0 100%; display: grid; gap: 5px; font-size: 12px; }
#charModal .char-rename-error, #charModal .char-lobby-error { color: var(--c-danger); font-size: 13px; line-height: 1.45; }
#charModal .char-delete-actions { display: grid; gap: 8px; margin-top: 12px; }
#charModal button.char-delete { color: var(--c-danger) !important; border-color: var(--c-danger) !important; }
#charModal .char-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.character-lobby-open .device-guard { display: none !important; }
body.character-lobby-open #gameConfirmDlg { z-index: 3100; }
@media (max-width: 1100px) and (min-width: 761px) {
  #charModal .char-lobby-shell { padding-inline: 16px; }
  #charModal .char-lobby-layout { grid-template-columns: 225px minmax(0, 1fr) 340px; gap: 12px; }
  #charModal .char-lobby-panel { padding: 14px; }
  #charModal .char-slot { min-height: 108px; }
  #charModal .char-slot-portrait { width: 30%; flex-basis: 30%; min-height: 108px; }
  #charModal .char-class-icon { width: 28px; height: 28px; flex-basis: 28px; }
  #charModal .char-name { font-size: 18px; }
  #charModal .char-slot-identity { gap: 6px; padding-inline: 5px; }
  #charModal #charHero { width: calc(100% + 260px); left: -125px; }
}
@media (max-width: 760px) {
  #charModal { background-attachment: fixed; }
  #charModal .char-lobby-shell { padding: 12px max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  #charModal .char-lobby-top { height: 68px; }
  #charModal .char-brand { width: 155px; height: 56px; }
  #charModal .char-lobby-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #charModal .char-lobby-panel { padding: 14px; }
  #charModal .char-sidebar { padding: 12px; }
  #charModal .char-sidebar h2 { font-size: 22px; margin-bottom: 10px; }
  #charModal .char-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #charModal .char-slot { min-height: 135px; flex-direction: column; }
  #charModal .char-slot-portrait { width: 100%; max-width: none; min-height: 65px; height: 65px; flex: 0 0 65px; object-position: 50% 12%; }
  #charModal .char-slot-identity { align-items: flex-start; gap: 4px; padding: 8px 5px; }
  #charModal .char-class-icon { width: 23px; height: 23px; flex: 0 0 23px; }
  #charModal .char-name { font-family: var(--font-ui); font-size: 12px; }
  #charModal .char-slot-copy > span { font-size: 10px; line-height: 1.5; }
  #charModal .char-slot-empty { padding: 12px 6px; gap: 5px; height: 100%; }
  #charModal .char-slot-empty .char-empty-mark { width: 23px; height: 23px; flex-basis: 23px; font-size: 23px; }
  #charModal .char-slot-empty b { font-size: 16px; }
  #charModal .char-slot-empty > span { font-size: 11px; }
  #charModal .char-sidebar footer { margin-top: 12px; padding-top: 10px; }
  #charModal .char-hero-stage { height: 210px; overflow: hidden; }
  #charModal #charHero { width: 100%; height: 430px; left: 0; top: 0; bottom: auto; object-position: center top; }
  #charModal .char-context { max-height: none; overflow: visible; }
  #charModal h1 { font-size: 31px; }
  #charModal h2 { font-size: 23px; }
  #charModal .char-form, #charModal .char-form.open { gap: 18px; }
  #charModal .char-equipment { gap: 12px; }
  #charModal .char-equip-art { height: 82px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  #charModal .char-lobby-top { height: 66px; }
  #charModal .char-brand { height: 60px; }
  #charModal .char-lobby-layout { align-items: start; min-height: calc(100dvh - 104px); }
  #charModal .char-context, #charModal .char-sidebar { max-height: calc(100dvh - 110px); overflow: auto; }
}