/* Character selection and creation use the same silhouettes as the game. */
#char-select-screen { overflow-y: auto; bottom: var(--steam-widget-height); }
.char-select-shell { max-height: calc(100dvh - var(--steam-widget-height) - 48px); overflow-y: auto; }
.char-select-header-row { flex-wrap: wrap; }
.char-select-header-row .login-user { overflow-wrap: anywhere; }
.char-select-layout .slot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.char-select-layout .slot-card { padding: 20px; }
.slot-item { border-radius: 4px; padding: 16px; min-width: 0; }
.slot-name { overflow-wrap: anywhere; }
.slot-item.empty { font: inherit; align-items: center; justify-content: center; cursor: pointer; min-height: 290px; background: radial-gradient(ellipse at center, #302319 0%, #140f0a 75%); transition: border-color 150ms, background-color 150ms; }
.slot-item.empty:hover { border-color: #d3a864; background-color: #332516; }
.slot-item.empty .slot-top { align-self: start; }
.empty-slot-symbol { font: 52px Georgia, serif; color: #937447; margin: 20px 0; }
.empty-slot-title { color: #e6d2ac; font-size: 16px; }
.slot-portrait { display: block; width: 100%; height: 160px; background: radial-gradient(ellipse at 50% 75%, #493b284f, transparent 68%); }
.slot-actions { margin-top: auto; flex-wrap: wrap; }
.slot-actions .slot-btn { min-width: 75px; }
.slot-item:focus-visible, .slot-btn:focus-visible, .appearance-option:has(input:focus-visible) { outline: 2px solid #dfbc77; outline-offset: 3px; }
.login-card { width: min(440px, 100%); align-self: center; padding: 26px; }
.login-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.login-actions #guest-login-btn { flex-basis: 100%; }
.guest-login-note { color: #bda987; font-size: 12px; line-height: 1.6; }
.login-actions button { flex: 1; }
#create-character-dialog { width: min(610px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 0; color: #f4e3c0; border: 1px solid #947244; border-radius: 8px; background: #160f0a; box-shadow: 0 25px 100px #000c; }
#create-character-dialog::backdrop { background: #05040380; }
#create-character-dialog .create-card { border: 0; padding: 26px; gap: 12px; }
.create-dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.create-dialog-heading p { margin: 0 0 8px; }
#create-character-close { flex: none; width: 34px; height: 34px; font-size: 24px; }
.appearance-fieldset { padding: 0; border: 0; margin: 6px 0 0; min-width: 0; }
.appearance-fieldset legend { font-size: 12px; color: #dcc7a0; margin-bottom: 10px; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.appearance-option { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 8px 4px 12px; border: 1px solid #50412f; border-radius: 5px; background: #21190f; }
.appearance-option:has(input:checked) { border-color: #e4be76; background: radial-gradient(ellipse at center, #5a482b, #302617); box-shadow: inset 0 0 0 1px #e4be7640; }
.appearance-option input { position: absolute; left: 8px; top: 8px; margin: 0; accent-color: #ddba76; }
.appearance-option canvas { display: block; width: 100%; height: 105px; }
.appearance-option span { font-size: 12px; color: #e6d2ac; }
.appearance-hint { color: #b6a283; font-size: 11px; margin: 0; }
#create-character-btn:disabled, #create-character-close:disabled { opacity: 0.5; cursor: wait; }
@media (max-width: 640px) {
  #char-select-screen { padding: 12px; }
  .char-select-shell { padding: 14px; max-height: calc(100dvh - var(--steam-widget-height) - 24px); }
  .char-select-header h1 { font-size: 24px; }
  .char-select-layout .slot-list { grid-template-columns: 1fr; }
  .char-select-layout .slot-card { padding: 12px; }
  .slot-item.empty { min-height: 160px; }
  .empty-slot-symbol { margin: 4px 0; font-size: 36px; }
  #create-character-dialog .create-card { padding: 18px; }
  .appearance-options { gap: 7px; }
  .appearance-option span { font-size: 11px; }
  .appearance-option canvas { height: 90px; }
}

/* Isolated non-interactive attract-mode canvas behind login and character creation. */
.char-select-bg { position:fixed; overflow:hidden; pointer-events:none; }
.menu-battle-canvas { display:block; width:100%; height:100%; pointer-events:none; opacity:.85; }
.char-select-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#05060835,#05060810,#05060835); pointer-events:none; }
.char-select-shell { background:rgba(14,10,7,.76); }
#game-title { overflow-wrap:anywhere; }