/* Tenebris account center and RPG directory layouts. v1 */
.tn-account-hub,
.tn-directory-page,
.tn-character-sheet { display: grid; gap: 17px; min-width: 0; color: #dce5ef; }
.tn-account-hub > *,
.tn-directory-page > *,
.tn-character-sheet > * { min-width: 0; }
.tn-section-eyebrow {
  display: block; margin-bottom: 6px;
  font: 700 10px/1.4 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #a7b7cb;
}
.tn-account-hub-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 21px; border: 1px solid #40536d; border-radius: 5px;
  background: linear-gradient(120deg, #1c2b40, #121e31);
}
.tn-account-hub-header h2 { margin: 0 0 5px; font: normal 27px/1.22 Georgia, serif; color: #f0d39a; }
.tn-account-hub-header p { margin: 0; color: #bdcadb; font-size: 13px; line-height: 1.55; }
.tn-account-hub-badge { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border: 1px solid #80643c; border-radius: 50%; color: #c9a86f; font: 15px Georgia,serif; background: #101a2a; }
.tn-account-overview {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px;
}
.tn-account-overview > div {
  min-width: 0; padding: 15px; border: 1px solid #3a4b63; border-radius: 4px;
  background: #1a2a40; text-align: left;
}
.tn-account-overview span { display: block; color: #aabacd; font-size: 11px; }
.tn-account-overview strong { display: block; margin-top: 3px; font: normal 20px/1.3 Georgia,serif; color: #eed19c; overflow-wrap: anywhere; }
.tn-account-overview .tn-needs-attention { color: #e8b18b; }
.tn-account-hub-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 0 1px;
}
.tn-account-hub-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 11px;
  border: 1px solid #465a77; border-radius: 4px; background: #18283c;
  color: #d6e0eb !important; font-size: 12px; font-weight: 600; line-height: 1.3;
}
.tn-account-hub-actions a:hover { background: #263a54; border-color: #bc9556; color: #f1d9a6 !important; }
.tn-account-hub-actions .tn-account-hub-primary { border-color: #d6ac66; background: #b68d4c; color: #131925 !important; font-weight: 750; }
.tn-account-hub-actions .tn-account-hub-primary:hover { background: #ebc579; color: #111927 !important; }
.tn-account-section,
.tn-directory-card,
.tn-character-card,
.tn-guild-actions {
  padding: 19px;
  border: 1px solid #34465e; border-radius: 5px;
  background: linear-gradient(180deg, #16263b 0%, #121e30 100%);
}
.tn-account-section-heading,
.tn-directory-card-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 7px; border-bottom: 1px solid #384960; }
.tn-account-section-heading h3,
.tn-directory-card h2,
.tn-character-card h3,
.tn-guild-actions h2 {
  margin: 0; color: #ebcb90; font: normal 20px/1.3 Georgia,serif;
}
.tn-account-section-heading h3 small { font: normal 12px system-ui,sans-serif; color: #aebed0; }
.tn-account-section-heading > a { color: #e4c48a !important; font-size: 12px; }
.tn-account-info { display: grid; gap: 0; margin: 0; }
.tn-account-info > div { display: grid; grid-template-columns: minmax(100px, 37%) minmax(0, 1fr); gap: 12px; align-items: baseline; min-height: 36px; padding: 10px 2px; border-bottom: 1px solid #ffffff10; font-size: 13px; line-height: 1.45; }
.tn-account-info > div:last-child { border-bottom: 0; }
.tn-account-info dt { min-width: 0; color: #aab9ca; font-weight: 550; }
.tn-account-info dd { min-width: 0; margin: 0; color: #e8e6e3; overflow-wrap: anywhere; }
.tn-account-info form { display: inline-block; max-width: 100%; margin: 5px 0 0; }
.tn-account-info button { min-height: 30px; padding: 6px 9px; font-size: 11px; }
.tn-account-alert {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px; border: 1px solid #8b6a3e;
  border-left: 3px solid #ce9f52; border-radius: 4px;
  background: linear-gradient(110deg, #352b26, #202637);
}
.tn-account-alert > div { min-width: 0; }
.tn-account-alert strong { color: #f0d197; font: 18px Georgia,serif; }
.tn-account-alert p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: #d8cfbd; }
.tn-account-alert form { flex: 0 0 auto; }
.tn-account-alert button { min-height: 34px; padding: 8px 12px; font-size: 11px; }

.tn-account-character-list { display: grid; gap: 9px; margin-top: 15px; }
.tn-account-character {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-width: 0;
  padding: 11px 12px; border: 1px solid #394b63; border-radius: 4px;
  background: #192940;
}
.tn-account-character-mark {
  display: grid; place-items: center; height: 42px; width: 42px; flex-shrink: 0;
  border: 1px solid #9f8357; border-radius: 4px; background: #122038;
  color: #e0bf83; font: 23px/1 Georgia,serif;
}
.tn-account-character-description { display: grid; min-width: 0; gap: 2px; }
.tn-account-character-description > a { width: fit-content; max-width: 100%; overflow-wrap: anywhere; color: #e8c98c !important; font: 17px/1.35 Georgia,serif; }
.tn-account-character-description > span { min-width: 0; color: #afc0d1; font-size: 12px; line-height: 1.5; }
.tn-account-character-trailing { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 12px; }
.tn-account-character-trailing form { margin: 0; }
.tn-account-character-trailing button { padding: 6px 10px; min-height: 31px; }
.tn-player-presence { display: inline-flex; align-items: center; gap: 5px; color: #adbdca; font: 600 11px/1.5 system-ui,sans-serif; }
.tn-presence-online { color: #8adba4; }
.tn-presence-offline { color: #bdabb0; }
.tn-player-presence::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tn-account-character-tools { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-top: 13px; padding-top: 14px; border-top: 1px solid #394960; font-size: 12px; }
.tn-account-character-tools > a { color: #d9be8a !important; }
.tn-account-empty { padding: 19px; text-align: center; color: #bec9d8; }
.tn-account-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-color: #455975 #111b29; }
.tn-inner-content table.tn-modern-table,
.tn-inner-content table.tn-account-logs { min-width: 430px; width: 100%; border-collapse: collapse; table-layout: auto; }
.tn-inner-content .tn-modern-table th, .tn-inner-content .tn-modern-table td,
.tn-inner-content .tn-account-logs th, .tn-inner-content .tn-account-logs td {
  padding: 10px 11px; white-space: nowrap; overflow-wrap: normal; word-break: normal;
  background: transparent !important; border-bottom: 1px solid #364962;
  font-size: 12px;
}
.tn-inner-content .tn-modern-table th, .tn-inner-content .tn-account-logs th {
  background: #20334c !important; color: #edcf98; text-align: left; font-weight: 700;
}
.tn-inner-content .tn-modern-table tr:nth-child(even), .tn-inner-content .tn-account-logs tr:nth-child(even) { background: #1c2c41; }
.tn-inner-content .tn-modern-table tr:hover, .tn-inner-content .tn-account-logs tr:hover { background: #27394e; }

/* Online page: status first, never use absolute-positioned outfit images. */
.tn-online-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px,1fr)); gap: 10px; }
.tn-online-stats > div, .tn-vocation-grid > div { padding: 15px; border: 1px solid #41506a; border-radius: 4px; background: #1b2c43; }
.tn-online-stats small, .tn-vocation-grid small { display: block; color: #adbdce; font-size: 11px; }
.tn-online-stats strong, .tn-vocation-grid strong { display: block; margin-top: 4px; color: #f0d49e; font: 21px Georgia,serif; }
.tn-online-text { color: #8addac !important; } .tn-offline-text { color: #e5a7a7 !important; }
.tn-directory-note { margin: 0; color: #b6c6d7; font-size: 13px; line-height: 1.6; }
.tn-directory-card h2 { margin-bottom: 13px; }
.tn-directory-card-header { margin-bottom: 10px; }
.tn-directory-card-header h2 { margin: 0; }
.tn-directory-card-header span { font-size: 12px; color: #9fafc3; }
.tn-vocation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap: 9px; }
.tn-inner-content .tn-online-outfit { display: block; width: 46px; height: 46px; max-width: 46px; object-fit: contain; image-rendering: pixelated; }
.tn-inner-content .tn-online-table td { height: 51px; }
.tn-inner-content .tn-online-table a { color: #edcd8e; }
.tn-online-skulls { border: 1px solid #35485f; border-radius: 4px; color: #becadb; font-size: 12px; }
.tn-online-skulls summary { cursor: pointer; padding: 11px 15px; color: #e4c48b; }
.tn-online-skulls > div { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 14px; border-top: 1px solid #35485f; }
.tn-online-skulls > div span { display: inline-flex; align-items: center; gap: 5px; }
.tn-online-skulls img { width: 13px; height: 13px; object-fit: contain; }
.tn-table-empty { text-align: center; color: #b4c0d1; }

/* Guild directory: real guild emblems, no old spacer assets. */
.tn-guild-list { display: grid; gap: 10px; }
.tn-guild-entry { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid #3d4e66; border-radius: 4px; background: #16273e; }
.tn-guild-emblem { display: grid; place-items: center; width: 64px; height: 64px; padding: 5px; border: 1px solid #425571; background: #0c1828; border-radius: 4px; }
.tn-guild-emblem img { display: block; width: 54px; height: 54px; object-fit: contain; }
.tn-guild-copy { min-width: 0; }
.tn-guild-copy h2 { margin: 0 0 5px; font: 21px Georgia,serif; color: #ebcb8f; }
.tn-guild-copy p { margin: 0; color: #bec9d9; font-size: 12px; overflow-wrap: anywhere; }
.tn-guild-entry button { min-height: 35px; padding: 8px 12px; }
.tn-guild-actions { text-align: center; }
.tn-guild-actions h2 { margin-bottom: 6px; }
.tn-guild-actions p { margin: 6px 0 14px; color: #bcc8d7; font-size: 13px; }
.tn-guild-actions > form, .tn-guild-actions > a { display: inline-flex; margin: 0 auto; }
.tn-guild-actions .tn-button { min-height: 36px; }
.tn-guild-help { margin: 12px 0 0; font-size: 12px; color: #c3cedc; }
.tn-guild-help summary { cursor: pointer; color: #d6b983; }
.tn-directory-empty { padding: 24px 18px; text-align: center; border: 1px solid #394c64; background: #192940; border-radius: 4px; }
.tn-directory-empty strong { display: block; color: #e8c98c; font: 19px Georgia,serif; }
.tn-directory-empty p { color: #bac5d4; margin-bottom: 0; }

/* Character sheet: hero and carefully grouped RPG data. */
.tn-character-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0;
  padding: 19px; border: 1px solid #43556e; border-radius: 5px;
  background: linear-gradient(115deg, #21334b, #101e31);
}
.tn-character-hero-copy { flex: 1 1 auto; min-width: 0; }
.tn-character-hero h2 { margin: 3px 0 6px; font: 27px/1.3 Georgia,serif; color: #f0d59e; overflow-wrap: anywhere; }
.tn-character-hero p { margin: 0 0 12px; color: #ccd7e3; font-size: 13px; }
.tn-character-hero-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; color: #b3c1d1; font-size: 11px; }
.tn-character-hero-labels > span:not(.tn-player-presence) { border: 1px solid #4c5870; padding: 4px 8px; border-radius: 3px; }
.tn-character-admin { display: inline-block; margin-top: 9px; font-size: 12px; }
.tn-character-outfit { flex: 0 0 110px; display: grid; place-items: center; width: 110px; height: 110px; overflow: hidden; border: 1px solid #94774a; border-radius: 6px; background: #121f30; }
.tn-character-outfit img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.tn-character-card h3 { padding: 0 0 11px; margin-bottom: 10px; border-bottom: 1px solid #3e4e64; }
.tn-character-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; align-items: start; }
.tn-character-skills > div { grid-template-columns: minmax(0,1fr) auto; }
.tn-equipment-card { grid-column: 1 / -1; }
.tn-equipment-slots { display: grid; grid-template-columns: repeat(5, 56px); justify-content: center; gap: 9px; padding: 12px 0; }
.tn-equipment-slot { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid #4d5c74; border-radius: 4px; background: #0c1524; }
.tn-equipment-slot img { max-width: 100%; max-height: 100%; height: auto; image-rendering: pixelated; }
.tn-character-signature summary { color: #efcf8f; cursor: pointer; font: 20px/1.3 Georgia,serif; }
.tn-character-signature-content { display: grid; gap: 12px; padding-top: 16px; }
.tn-character-signature-content > img { display: block; max-width: 100%; }
.tn-character-signature-content .tn-field { min-width: 0; }
.tn-character-signature-content input { width: 100%; min-width: 0; font-size: 12px; }
.tn-character-search-bottom { border: 1px solid #354861; background: #14243a; padding: 18px; border-radius: 5px; }
.tn-character-search-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.tn-character-search-form .tn-field { flex: 1 1 170px; }
.tn-character-search-form button { min-height: 41px; }
.tn-character-sheet .tn-account-character-trailing a { color: #e5c58b; }

@media (max-width: 850px) {
  .tn-account-overview { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tn-character-detail-grid { grid-template-columns: minmax(0,1fr); }
  .tn-equipment-card { grid-column: auto; }
}
@media (max-width: 600px) {
  .tn-account-hub-header { padding: 16px; }
  .tn-account-hub-badge { display: none; }
  .tn-account-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tn-account-alert { flex-direction: column; align-items: stretch; }
  .tn-account-section, .tn-directory-card, .tn-character-card, .tn-guild-actions { padding: 14px; }
  .tn-account-character { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; }
  .tn-account-character-mark { width: 36px; height: 36px; }
  .tn-account-character-trailing { grid-column: 2; justify-items: start; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; text-align: left; }
  .tn-guild-entry { grid-template-columns: 52px minmax(0,1fr); }
  .tn-guild-emblem { width: 52px; height: 52px; }
  .tn-guild-emblem img { width: 43px; height: 43px; }
  .tn-guild-entry form { grid-column: 2; }
  .tn-character-outfit { width: 72px; height: 88px; flex-basis: 72px; }
  .tn-equipment-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .tn-equipment-slot { width: 100%; height: auto; aspect-ratio: 1; }
  .tn-account-info > div { grid-template-columns: minmax(90px, 36%) minmax(0,1fr); gap: 9px; }
}
@media (max-width: 390px) {
  .tn-account-overview { grid-template-columns: 1fr; }
  .tn-account-hub-header h2 { font-size: 23px; }
  .tn-character-hero h2 { font-size: 23px; }
}


/* v2: Restore a single-column account page. The old theme still declares
   #account-manage as a two-column grid and was squeezing every word vertically. */
.tn-inner-content #account-manage.tn-account-hub {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 17px !important;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.tn-account-hub > *,
.tn-account-hub-header > div,
.tn-account-overview > div,
.tn-account-character > *,
.tn-account-info > div > * {
  min-width: 0;
}
.tn-account-hub .tn-account-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-account-hub .tn-account-section,
.tn-account-hub .tn-account-overview,
.tn-account-hub .tn-account-character-list { width: 100%; min-width: 0; }
.tn-account-hub .tn-account-info > div {
  grid-template-columns: minmax(115px, 34%) minmax(0, 1fr);
  overflow-wrap: normal;
  word-break: normal;
}
.tn-account-hub .tn-account-info dd,
.tn-account-hub .tn-account-character-description { overflow-wrap: anywhere; }
.tn-account-hub .tn-account-character {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

/* With the directory removed, left rail is now the account and world rail. */
.tn-activity-sidebar .tn-panel { width: 100%; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-headline { padding: 12px 12px 0; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-headline strong { font-size: 15px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-headline p { font-size: 11px; margin-top: 3px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-form { padding: 8px 12px 10px; gap: 4px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-form label { font-size: 11px; margin-top: 3px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-form input { min-height: 35px; padding: 7px 9px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-login-form button { min-height: 35px; margin-top: 7px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-forgot-link { font-size: 11px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-register-prompt { padding: 9px 12px 12px; gap: 5px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-register-prompt > span { font-size: 11px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-register-prompt > a { min-height: 34px; padding: 6px 9px; font-size: 11px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-shortcuts { padding: 12px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-status { padding-bottom: 10px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-status strong { font-size: 14px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-shortcut-list { gap: 5px; margin-top: 10px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-shortcut { min-height: 34px; padding: 7px 9px; }
.tn-activity-sidebar .tn-login-panel-compact .tn-account-signout { margin-top: 7px; padding: 5px; }
.tn-quickstart-links { display: grid; padding: 7px 12px 10px; }
.tn-quickstart-links a { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 35px; padding: 8px 3px; border-bottom: 1px solid #34465a; color: #c7d4e4; font-size: 12px; }
.tn-quickstart-links a:last-child { border-bottom: none; }
.tn-quickstart-links a > span:last-child { color: #d9b779; }
.tn-quickstart-links a:hover { color: #f2d59a; }

/* Character creation: first row account/email, second password/repeat, third country. */
.tn-create-account .tn-field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tn-create-account .tn-country-field { grid-column: 1 / 2; }

/* Two cards on the same row: skills and equipment, not one huge inventory row. */
.tn-character-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 13px;
  align-items: start;
}
.tn-character-detail-grid > .tn-skills-card {
  grid-column: 1;
  grid-row: 1;
}
.tn-character-detail-grid > .tn-equipment-card {
  grid-column: 2;
  grid-row: 1;
}
.tn-character-detail-grid > .tn-quests-card {
  grid-column: 1 / -1;
  grid-row: 2;
}
.tn-character-detail-grid:not(:has(.tn-skills-card)) > .tn-equipment-card {
  grid-column: 1 / -1;
  grid-row: auto;
}
.tn-character-detail-grid .tn-equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(4, 44px);
  gap: 5px;
  justify-content: center;
  padding: 8px 0;
}
.tn-character-detail-grid .tn-equipment-slot {
  width: 44px;
  height: 44px;
  border-radius: 3px;
}

/* Limit duplication when there is less horizontal space. */
@media (max-width: 950px) {
  .tn-character-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tn-character-detail-grid > .tn-equipment-card { grid-column: 2; grid-row: 1; }
  .tn-character-detail-grid > .tn-skills-card { grid-column: 1; grid-row: 1; }
}
@media (max-width: 730px) {
  .tn-activity-sidebar { width: 100%; }
  .tn-character-detail-grid { grid-template-columns: minmax(0,1fr); }
  .tn-character-detail-grid > .tn-skills-card,
  .tn-character-detail-grid > .tn-equipment-card,
  .tn-character-detail-grid > .tn-quests-card {
    grid-column: 1;
    grid-row: auto;
  }
  .tn-account-hub .tn-account-character { grid-template-columns: 38px minmax(0,1fr); }
}
@media (max-width: 600px) {
  .tn-create-account .tn-field-grid { grid-template-columns: minmax(0, 1fr); }
  .tn-create-account .tn-country-field { grid-column: 1; }
  .tn-account-hub .tn-account-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tn-account-hub .tn-account-info > div { grid-template-columns: minmax(92px, 35%) minmax(0,1fr); }
}
@media (max-width: 390px) {
  .tn-account-hub .tn-account-overview { grid-template-columns: 1fr; }
}


/* v3: slim login sidebar, centered full login, correctly aligned Tibia equipment. */
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-form {
  padding: 11px 12px 12px;
  gap: 3px;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-form label {
  margin: 5px 0 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-form input:not([type="hidden"]) {
  height: 34px;
  min-height: 34px !important;
  padding: 6px 9px !important;
  font-size: 12px;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-form .tn-button {
  min-height: 34px;
  margin-top: 9px;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-simple-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 10px;
  padding-top: 8px;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-simple-links a {
  color: #cbb17e;
  font-size: 11px;
  text-decoration: none;
}
.tn-site .tn-activity-sidebar .tn-login-panel-compact .tn-login-simple-links a:hover {
  color: #f2d8a6;
}
.tn-site .tn-activity-sidebar .tn-login-current-page {
  display: grid;
  gap: 10px;
  padding: 15px 13px 16px;
  text-align: center;
}
.tn-site .tn-activity-sidebar .tn-login-current-page p {
  margin: 0;
  color: #b9c9d9;
  font-size: 12px;
  line-height: 1.5;
}
.tn-site .tn-activity-sidebar .tn-login-current-page a {
  display: block;
  padding: 9px 8px;
  border: 1px solid #a78450;
  border-radius: 3px;
  color: #e6c48b;
  background: #17263b;
  font-size: 12px;
}
.tn-site .tn-activity-sidebar .tn-login-current-page a:hover {
  color: #f7dcaa;
  background: #25374e;
}

/* Center the actual Login page inside the content column, not the sidebar. */
.tn-inner-content .tn-login-screen {
  width: min(100%, 470px);
  max-width: 470px;
  margin: 4px auto 0;
}
.tn-inner-content .tn-login-screen .tn-form-lead {
  margin: 0 auto 18px;
  max-width: 44ch;
  text-align: center;
  line-height: 1.65;
}
.tn-inner-content .tn-login-screen .tn-form-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 4px;
  padding: 23px 25px;
}
.tn-inner-content .tn-login-screen .tn-form-card-title {
  text-align: center;
}
.tn-inner-content .tn-login-screen .tn-check-line {
  margin-top: 11px;
}
.tn-inner-content .tn-login-screen .tn-form-actions {
  margin-top: 18px;
  justify-content: center;
}

/* The game equipment has 12 fixed cells (2 transparent helmet corners).
   CSS no longer guesses grid positions from dynamically indexed item nodes. */
.tn-character-detail-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.tn-character-detail-grid > .tn-skills-card,
.tn-character-detail-grid > .tn-equipment-card {
  min-width: 0;
  min-height: 100%;
}
.tn-character-detail-grid > .tn-equipment-card {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
}
.tn-character-detail-grid .tn-equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  grid-template-rows: repeat(4, 42px);
  gap: 5px;
  align-content: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 9px auto 0;
  padding: 5px 0 8px;
}
.tn-character-detail-grid .tn-equipment-void {
  display: block;
  width: 42px;
  height: 42px;
  visibility: hidden;
}
.tn-character-detail-grid .tn-equipment-slot {
  display: grid;
  grid-area: auto;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid #465873;
  border-radius: 3px;
  background: #0e1827;
}
.tn-character-detail-grid .tn-equipment-slot img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}
@media (max-width: 730px) {
  .tn-character-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .tn-character-detail-grid > .tn-equipment-card { min-height: 0; }
  .tn-character-detail-grid .tn-equipment-slots { margin: 8px auto; }
}
@media (max-width: 480px) {
  .tn-inner-content .tn-login-screen { width: 100%; }
  .tn-inner-content .tn-login-screen .tn-form-card { padding: 19px 17px; }
}

/* v4: Character sprite display in account/profile character lists. */
.tn-account-character { grid-template-columns: 48px minmax(0, 1fr) auto; }

.tn-account-character .tn-account-character-mark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 48px;
  height: 48px;
}
.tn-account-character .tn-avatar-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tn-account-character .tn-account-character-sprite {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  background: #122038;
}
.tn-account-character:hover .tn-account-character-mark {
  border-color: #ddb568;
  box-shadow: 0 0 12px rgba(201, 157, 86, .18);
}
@media (max-width: 600px) {
  .tn-account-character { grid-template-columns: 44px minmax(0, 1fr); }
  .tn-account-character .tn-account-character-mark { width: 44px; height: 44px; }
}