/* Character roster and creation window use the same obsidian/brass game artwork. */
#screen-chars .chars-topbar {
  gap: 10px;
  padding: 6px 8px;
  border: 5px solid transparent;
  border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 5px stretch;
  border-radius: 0;
  background: #0b0a09;
  color: #dfd0ae;
}
#screen-chars .chars-topbar .muted { color: #d5c39b; }
#screen-chars .chars-topbar button,
#screen-chars .chars-actions button,
#screen-chars #char-delete-confirm button,
#screen-chars .chars-create-actions button {
  min-height: 34px;
  padding: 4px 10px;
  border: 6px solid transparent;
  border-image: url('/client/assets/hud-v2/btn.webp') 8 fill / 6px stretch;
  border-radius: 0;
  background: none;
  color: #e6d3aa;
  font: 600 11px/1.2 'Segoe UI', Arial, sans-serif;
}
#screen-chars :is(#char-enter, #char-create-confirm) { border-image-source: url('/client/assets/hud-v2/btn-active.webp'); color: #fff0c4; }
#screen-chars :is(#char-delete-btn, #char-delete-confirm-btn) { color: #efad9a; }
#screen-chars button:not(:disabled):hover { filter: brightness(1.16); }
#screen-chars .chars-panel,
#screen-chars .chars-create-window {
  border: 12px solid transparent;
  border-image: url('/client/assets/hud-v2/frame.webp') 23 8 16 8 / 12px / 9px stretch;
  border-radius: 0;
  background: url('/client/assets/hud-v2/bg.webp') repeat, #0b0a09;
  color: #e7dcc4;
  box-shadow: 0 18px 40px #000c;
  backdrop-filter: none;
  scrollbar-color: #806a45 #100e0c;
}
#screen-chars .chars-panel { width: 330px; padding: 16px 15px 13px; }
#screen-chars .chars-panel > h2,
#screen-chars .chars-create-head {
  min-height: 40px;
  margin: 0 0 11px;
  border: 6px solid transparent;
  border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 6px stretch;
  color: #efd9a0;
}
#screen-chars .chars-panel > h2 { display: grid; place-items: center; padding: 4px 8px; font: 600 15px/1.2 'Segoe UI', Arial, sans-serif; }
#screen-chars .char-detail {
  min-height: 0;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #75613d;
  border-radius: 0;
  background: #0a0908d9;
  box-shadow: inset 0 0 14px #0008;
}
#screen-chars .char-detail:empty { display: none; }
#screen-chars .char-detail-identity { display: grid; gap: 2px; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #655333; }
#screen-chars .char-detail-identity strong { color: #f2dfb3; font: 700 15px/1.2 'Segoe UI', Arial, sans-serif; }
#screen-chars .char-detail-identity span { color: #c3ae83; font-size: 10px; }
#screen-chars .char-state { color: #d9c28d; }
#screen-chars .char-state.online { color: #f0a08d; }
#screen-chars .char-state.offline { color: #add0dc; }
#screen-chars .char-state-time { color: #e2d1ae; font-size: 12px; }
#screen-chars .char-offline-stats { color: #b7a98b; }
#screen-chars .char-offline-stats b { color: #e9d4a2; }
#screen-chars #char-list { gap: 5px; margin-bottom: 8px; }
#screen-chars #char-list li {
  min-height: 51px;
  padding: 7px 9px;
  border: 5px solid transparent;
  border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 5px stretch;
  border-radius: 0;
  background: #0b0a09;
  color: #e5d9bd;
}
#screen-chars #char-list li:not(.empty):hover { filter: brightness(1.18); }
#screen-chars #char-list li.sel { outline: 1px solid #d6af62; outline-offset: -5px; }
#screen-chars #char-list li.char-card::before { left: 5px; width: 2px; border-radius: 0; }
#screen-chars #char-list li .char-cls { color: #d4b479; }
#screen-chars #char-list li .char-level { color: #c6b894; }
#screen-chars #char-list li .char-offline { color: #a99f85; }
#screen-chars #char-list li.empty { color: #c1ad85; font-style: normal; }
#screen-chars #char-list li.empty:hover { filter: brightness(1.16); }
#screen-chars #char-blurb { margin: 0 0 8px; color: #b9aa8a; font-size: 10px; line-height: 1.4; }
#screen-chars .chars-actions { gap: 5px; margin-top: 0; }
#screen-chars #chars-status { margin: 7px 0 0; color: #d9c9a3; }
#screen-chars #chars-status:empty { display: none; }
#screen-chars #char-delete-confirm { border-top-color: #755b3b; }
#screen-chars #char-delete-confirm input { border: 1px solid #80663e; border-radius: 0; background: #0b0a09; color: #f0e1c3; }

/* Creating a character is a distinct dialog over the 3D character preview. */
#screen-chars .chars-create-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px min(4vw, 60px);
  background: #03050475;
}
#screen-chars .chars-create-window {
  width: min(440px, calc(100vw - 32px));
  min-width: 0;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 17px 20px 18px;
}
#screen-chars .chars-create-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 3px 34px; }
#screen-chars .chars-create-head h3 { margin: 0; color: #efd9a0; font: 600 15px/1.2 'Segoe UI', Arial, sans-serif; text-align: center; }
#screen-chars .chars-create-head #char-create-x {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  background: none;
  color: #d8bf8d;
  font: 24px/1 Georgia, serif;
}
#screen-chars .chars-create-window .field { margin: 10px 0; }
#screen-chars .chars-create-window .field > span:first-child { color: #d7c39e; font-size: 11px; }
#screen-chars .chars-create-window .field-hint { color: #ab9c7e; }
#screen-chars .chars-create-window input:not([type=checkbox]) { border: 1px solid #80663e; border-radius: 0; background: #0b0a09; color: #f0e1c3; }
#screen-chars .class-cards { gap: 5px; }
#screen-chars .class-card,
#screen-chars .gender-opt { border: 5px solid transparent; border-image: url('/client/assets/hud-v2/slot.webp') 6 fill / 5px stretch; border-radius: 0; background: #0b0a09; color: #dacbaa; }
#screen-chars .class-card { min-height: 55px; padding: 5px 7px; }
#screen-chars .class-card.sel,
#screen-chars .gender-opt.active { outline: 1px solid #d7b467; outline-offset: -5px; }
#screen-chars .class-card b { color: #efd9a0; }
#screen-chars .class-card .class-role { color: #caa567; }
#screen-chars .class-card .class-skill { color: #aa9a7d; }
#screen-chars .gender-opt { min-height: 33px; padding: 3px 8px; }
#screen-chars #new-blurb { margin: 8px 0; color: #c9b995; font-size: 11px; }
#screen-chars #char-create-status { min-height: 0; margin: 5px 0; color: #f0ae9d; font-size: 11px; }
#screen-chars #char-create-status:empty { display: none; }
#screen-chars .chars-create-actions { margin-top: 12px; }
#screen-chars .chars-create-actions button { flex: 1; }
@media (max-width: 900px) {
  #screen-chars .chars-create-overlay { justify-content: center; padding: 8px; }
  #screen-chars .chars-create-window { width: min(440px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 13px 14px; }
}
body.m-portrait #screen-chars .chars-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; transform: none; max-height: 52dvh; padding: 10px 11px; }
body.m-landscape #screen-chars .chars-panel { left: 8px; top: 8px; bottom: 8px; transform: none; width: min(330px, 46vw); max-height: none; padding: 10px 11px; }