.character-search-panel { max-width: 760px; margin-inline: auto; }
.character-search { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; padding: 26px 32px; }
.character-search label { margin: 0; }
.character-search .button { min-height: 46px; }
.character-profile + .panel, .inventory-panel + .panel { margin-top: 18px; }
div.info-table { width: auto; margin: 20px 24px 24px; border: 1px solid #a78146; }
.info-table > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-bottom: 1px solid rgba(255,255,255,.55); background: rgba(255,247,218,.35); }
.info-table > div:nth-child(even) { background: rgba(128,83,31,.09); }
.info-table > div:last-child { border-bottom: 0; }
.info-table b, .info-table span { padding: 8px 12px; }
.info-table span { overflow-wrap: anywhere; }
.info-table b { border-right: 1px solid rgba(126,87,38,.35); color: #4d2806; }
.account-status { font-weight: 700; color: #70471b; }
.account-status--vip { color: #11833a !important; text-shadow: 0 0 8px rgba(36,171,83,.18); }
.inventory-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.4fr); gap: 24px; padding: 24px; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, minmax(68px, 1fr)); align-content: start; gap: 7px; }
.inventory-hidden { min-height: 218px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border: 1px dashed #956d35; background: rgba(76,43,14,.09); text-align: center; }
.inventory-hidden span { font-size: 36px; margin-bottom: 8px; }
.inventory-hidden b { color: #4d2806; font: 700 18px Cinzel, serif; }
.inventory-hidden small { max-width: 240px; margin-top: 8px; color: #75552f; line-height: 1.5; }
.equipment-slot { position: relative; min-height: 68px; padding: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #a77a38; background: rgba(76,43,14,.09); }
.equipment-slot--8 { grid-column: 2; }
.equipment-slot span { color: #815b2d; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.equipment-slot img { width: 32px; height: 32px; margin-top: 2px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(46,23,4,.35)); }
.equipment-slot b { color: #4d2806; font-size: 12px; }
.equipment-slot .missing-item-icon { width: 30px; height: 30px; margin-top: 3px; display: grid; place-items: center; border: 1px dashed #9c733b; color: #9c733b; }
.equipment-slot small { position: absolute; right: 5px; bottom: 3px; padding: 1px 3px; color: #fff4c8; background: rgba(92,28,12,.85); font-size: 9px; }
.character-vitals > div { margin-bottom: 15px; }
.character-vitals b, .character-vitals span { display: block; margin-bottom: 5px; color: #4d2806; }
.character-vitals progress { width: 100%; height: 10px; accent-color: #b54037; }
.character-vitals progress.mana { accent-color: #4d70bf; }
.character-vitals progress.experience { accent-color: #369657; }
.skills { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; padding-top: 10px; }
.skills span { padding: 8px 3px; text-align: center; border: 1px solid rgba(126,87,38,.35); font-size: 10px; }
.skills span b { font-size: 16px; color: #8d2014; }
.character-deaths td:first-child { white-space: nowrap; width: 170px; }
.account-character-list { margin: 20px 24px 24px; border: 1px solid #a78146; }
.account-character-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 14px; color: #0750a0; border-bottom: 1px solid rgba(126,87,38,.35); text-decoration: none; }
.account-character-list a:last-child { border-bottom: 0; }
.account-character-list a:nth-child(even) { background: rgba(128,83,31,.09); }
.account-character-list span { color: #62411e; }
.account-character-list small { color: #a21b12; font-weight: 700; }
.account-character-list .online-status { color: #16823a; }
@media (max-width: 760px) {
  .character-search, .inventory-layout { grid-template-columns: 1fr; }
  .info-table > div { grid-template-columns: 125px minmax(0, 1fr); }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .account-character-list a { grid-template-columns: 1fr auto; }
  .account-character-list span { grid-column: 1 / -1; }
}