/* A quiet character ledger; artwork is sampled at the display resolution. */
#character-screen{max-width:1100px;margin:24px auto;padding:0 28px 28px;background:#211f1a;border:1px solid #706149;box-shadow:0 0 0 3px #141510;color:#e5ddc6}
#character-screen .page-heading{min-height:0;margin:0 -28px;padding:18px 28px;background:#292b22;background-image:none;border:0;border-bottom:1px solid #6b604a;box-shadow:none}
#character-screen .account-line{background:none;border:0;padding:0;gap:12px}
#character-screen .character-heading{padding:22px 0 18px;margin:0 0 20px;border-bottom:1px solid #524d3d}
#character-screen h1,#character-screen h2,#character-screen .character-entry strong,#character-screen .class-choice strong{font-family:Georgia,'Times New Roman',serif;letter-spacing:0;text-shadow:none}
#character-screen h1{font-size:28px;line-height:1.25;margin:0 0 8px}
#character-screen h2{font-size:21px}
#character-screen .character-heading p{margin:0;font-size:14px;color:#bcb79f}
#character-screen .character-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
#character-screen .panel{background:#29271f;background-image:none;border:1px solid #665c48;box-shadow:none;border-radius:0;padding:20px}
#character-screen .character-roster{padding:16px}
#character-screen .character-roster h2{font-size:18px;margin:0 0 16px;display:flex;justify-content:space-between}
#character-screen .character-list{display:grid;gap:8px;margin-bottom:16px}
#character-screen .character-entry{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;text-align:left;min-height:92px;padding:10px;background:#23241c;border:1px solid #514d3e;box-shadow:none;position:relative}
#character-screen .character-entry.selected{background:#343729;border-color:#b6a16b;box-shadow:inset 3px 0 #c9b16b}
#character-screen .character-mini{width:62px;height:62px;grid-row:1/3;image-rendering:auto;background:#1b201a;border:1px solid #605d46}
#character-screen .character-entry>span:not(.character-level){min-width:0;align-self:end;display:grid;gap:4px}
#character-screen .character-entry strong{font-size:16px;line-height:1.25;overflow-wrap:anywhere;color:#eee3c6}
#character-screen .character-entry small{font-size:12px;color:#bebba5}
#character-screen .character-level{grid-column:2;font:12px Arial,sans-serif;line-height:1.2;color:#c7b67d;margin-top:-8px}
#character-screen button{border-radius:0}
#character-screen .secondary,#character-screen .quiet,#character-screen .choice-button{background:#333429;background-image:none;box-shadow:none;border:1px solid #70654d}
#character-screen .selected-character-panel{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(220px,1.1fr);gap:22px;align-items:center;min-height:392px;padding:26px}
#character-screen .hero-illustration{display:flex;align-items:center;justify-content:center;min-height:330px;border-bottom:1px solid #777054;background:#20241d}
#character-screen #selected-character-preview{display:block;width:220px;height:310px;max-width:100%;image-rendering:auto}
#character-screen .eyebrow{font:11px Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#a49a79;margin:0 0 10px}
#character-screen #selected-character-name{font-size:27px;line-height:1.25;overflow-wrap:anywhere;margin:0 0 12px;color:#eee2bf}
#character-screen .hero-class{font-family:Georgia,serif;font-size:19px;margin:0 0 8px;color:#d7c898}
#character-screen .hero-level{font-size:13px;color:#b7bca3;margin:0}
#character-screen .hero-divider{height:1px;background:#5e5944;margin:22px 0}
#character-screen .hero-description{font-size:14px;line-height:1.6;color:#c7c1ab;margin:0 0 24px}
#character-screen .primary{background:#505d36;border:1px solid #a9ad78;box-shadow:inset 0 1px #707c50;color:#faf0d4;font-family:Georgia,serif;font-size:18px;min-height:46px;padding:10px 22px}
#character-screen .primary:hover{background:#637245}
#character-screen .field-help{font-size:12px;line-height:1.5;color:#a7a58e}
#character-screen .selected-character-detail .field-help{margin:13px 0 0}
#character-screen .count-pill{background:none;border:0;font:12px Arial,sans-serif;color:#b0ab94;padding:2px 0}
#character-screen .creation-panel{padding:22px}
#character-screen .section-heading{align-items:center;gap:16px;margin-bottom:20px;border-bottom:1px solid #59523f;padding-bottom:14px}
#character-screen .creation-panel .section-heading h2{margin:0}
#character-screen #cancel-character-creation{font:12px Arial,sans-serif;max-width:140px;padding:9px}
#character-screen #character-form{position:relative;padding-right:210px;min-height:530px}
#character-screen #character-name{height:42px;background:#1f211b;border:1px solid #75694d;box-shadow:none;color:#eee4cd;font-size:15px}
#character-screen fieldset{border:0;padding:0;margin:18px 0}
#character-screen legend,#character-screen label{font-family:Georgia,serif;font-size:14px;color:#d9cfb2;padding:0;margin-bottom:8px}
#character-screen .class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#character-screen .class-choice{display:flex;flex-direction:column;align-items:start;gap:4px;min-height:58px;padding:9px 11px;background:#24281f;border:1px solid #5b5c47;box-shadow:none;text-align:left}
#character-screen .class-choice strong{font-size:15px}
#character-screen .class-choice small{font:10px Arial,sans-serif;color:#a7ad98}
#character-screen .class-choice.selected,#character-screen .choice-button.selected{background:#465037;border-color:#aba878;box-shadow:inset 2px 0 #c4b775}
#character-screen .choice-button{font-size:12px;min-height:34px;padding:6px 9px}
#character-screen .choice-row{gap:5px}
#character-screen .appearance-grid{display:block;margin:0}
#character-screen .appearance-grid>section{min-width:0}
#character-screen .avatar-preview-wrap{position:absolute;right:0;top:0;width:180px;text-align:center}
#character-screen .avatar-stage{width:180px;height:290px;display:flex;align-items:center;justify-content:center;background:#20241d;background-image:none;box-shadow:none;border:0;border-bottom:1px solid #777054;min-height:0}
#character-screen #avatar-preview{width:168px;height:270px;max-width:100%;image-rendering:auto;filter:none}
#character-screen #avatar-preview-label{display:block;font:13px/1.5 Georgia,serif;color:#c8be9d;padding:12px 0}
#character-screen .class-detail{background:none;border:0;padding:10px 0 0;font-size:13px;line-height:1.5}
#character-screen .class-detail strong{font-family:Georgia,serif;font-size:16px;color:#dfd1a8}
#character-screen .color-choice{width:27px;height:27px;min-width:27px;min-height:27px;border:2px solid #686047;box-shadow:none;border-radius:50%}
#character-screen .color-choice.selected{outline:2px solid #d6ca96;outline-offset:2px}
#character-screen #create-character-submit{margin-top:16px}
@media(max-width:900px){
  #character-screen{margin:12px;max-width:none;padding:0 18px 18px}
  #character-screen .page-heading{margin:0 -18px;padding:14px 18px}
  #character-screen .character-layout{grid-template-columns:200px minmax(0,1fr);gap:14px}
  #character-screen .selected-character-panel{grid-template-columns:1fr;padding:20px;gap:18px}
  #character-screen .hero-illustration{min-height:260px}
  #character-screen #selected-character-preview{width:190px;height:250px}
  #character-screen #character-form{padding-right:0}
  #character-screen .avatar-preview-wrap{position:static;width:100%;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;margin:16px 0}
  #character-screen .avatar-stage{width:150px;height:220px}
  #character-screen #avatar-preview{width:140px;height:210px}
}
@media(max-width:620px){
  #character-screen{margin:0;min-height:100dvh;padding:0 14px 22px;border:0;box-shadow:none}
  #character-screen .page-heading{margin:0 -14px;padding:14px;gap:10px;align-items:center}
  #character-screen .account-line>span{display:none}
  #character-screen .wordmark{font-size:21px}
  #character-screen .wordmark small{display:none}
  #character-screen .character-heading{padding:18px 0 14px;margin-bottom:14px}
  #character-screen h1{font-size:24px}
  #character-screen .character-layout{display:flex;flex-direction:column;gap:14px}
  #character-screen .character-layout:has(.creation-panel:not([hidden])) .character-roster{display:none}
  #character-screen .character-roster,#character-screen .creation-panel,#character-screen .selected-character-panel{width:100%;min-width:0;box-sizing:border-box}
  #character-screen .character-roster{padding:12px}
  #character-screen .character-roster h2{font-size:16px;margin-bottom:10px}
  #character-screen .character-entry{min-height:78px;grid-template-columns:56px minmax(0,1fr);gap:9px;padding:8px}
  #character-screen .character-mini{width:56px;height:56px}
  #character-screen .character-entry strong{font-size:17px}
  #character-screen .character-roster>.field-help{display:none}
  #character-screen .selected-character-panel{grid-template-columns:118px minmax(0,1fr);gap:15px;padding:14px;min-height:285px}
  #character-screen .hero-illustration{min-height:230px}
  #character-screen #selected-character-preview{width:116px;height:218px}
  #character-screen #selected-character-name{font-size:20px;margin-bottom:9px}
  #character-screen .hero-class{font-size:16px}
  #character-screen .hero-description{font-size:12px;line-height:1.45;margin-bottom:16px}
  #character-screen .hero-divider{margin:14px 0}
  #character-screen #enter-selected-character{font-size:16px;padding:10px;width:100%}
  #character-screen .selected-character-detail .field-help{display:none}
  #character-screen .creation-panel{padding:15px}
  #character-screen .creation-panel .section-heading{gap:8px}
  #character-screen .choice-button{min-height:40px}
  #character-screen .color-choice{width:30px;height:30px;min-width:30px;min-height:30px}
  #character-screen .avatar-preview-wrap{grid-template-columns:145px minmax(0,1fr)}
}