.codex-layout { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr); gap: 8px; height: 100%; min-height: 0; }
.codex-profile { display: grid; grid-template-columns: minmax(92px, 30%) minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #b7c5dc; border-radius: 8px; background: #fff; }
.codex-art { display: grid; place-items: center; min-width: 0; min-height: 0; padding: 6px; background: #e6ecf8; }
.codex-art img { display: block; width: 100%; height: 100%; max-width: 160px; max-height: 160px; object-fit: contain; }
.codex-copy { display: grid; grid-template-rows: auto minmax(31.2px, auto) auto minmax(15.6px, 1fr) auto; gap: 5px; min-width: 0; min-height: 0; padding: 8px 10px; }
.codex-title { display: flex; grid-row: 1; align-items: baseline; gap: 8px; }
.codex-title h2 { margin: 0; color: #17243c; font: 700 17px/1.2 NexonKart, sans-serif; }
.codex-title span { color: #52617a; font-size: 12px; font-weight: 700; }
.codex-copy p { margin: 0; color: #40577c; font-size: 12px; line-height: 1.3; }
.codex-description { grid-row: 2; }
.codex-stats { display: grid; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; margin: 0; font-size: 12px; }
.codex-stats div { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.codex-stats dt { color: #52617a; }
.codex-stats dd { margin: 0; color: #17243c; font-weight: 700; }
.codex-copy .codex-extra { grid-row: 4; align-self: start; color: #19478f; font-weight: 700; }
.codex-copy .codex-source { grid-row: 5; align-self: end; color: #52617a; }
.codex-browser { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-width: 0; min-height: 0; }
.codex-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.codex-factions { display: flex; gap: 5px; }
.codex-factions button { min-height: 34px; padding: 0 12px; border: 1px solid #a8b9d2; border-radius: 6px; background: #fff; color: #17243c; font-weight: 700; cursor: pointer; }
.codex-factions button[aria-pressed='true'] { border-color: #2359b6; background: #2359b6; color: #fff; }
.codex-factions button:hover { border-color: #19478f; }
.codex-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5px; min-height: 0; }
.codex-unit { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 0; padding: 4px 6px; border: 1px solid #b7c5dc; border-radius: 7px; background: #fff; color: #17243c; font-size: 12px; font-weight: 700; cursor: pointer; }
.codex-unit img { width: min(54%, 66px); height: 100%; min-height: 0; max-height: 70px; object-fit: contain; }
.codex-unit span { min-width: 0; overflow-wrap: anywhere; }
.codex-unit:hover { background: #edf3fc; }
.codex-unit[aria-pressed='true'] { border: 2px solid #2359b6; background: #e3edfc; }
.codex-factions button:focus-visible, .codex-unit:focus-visible { outline: 3px solid #19478f; outline-offset: 2px; }
.codex-empty { padding: 12px; color: #52617a; }
@media (max-width: 800px) {
  .codex-layout { grid-template-columns: minmax(245px, 1fr) minmax(245px, 1fr); gap: 5px; }
  .codex-profile { grid-template-columns: minmax(65px, 27%) minmax(0, 1fr); }
  .codex-copy { gap: 3px; padding: 6px; }
  .codex-stats { gap: 1px 5px; }
  .codex-unit { flex-direction: column; gap: 1px; padding: 2px; }
  .codex-unit img { width: 100%; max-height: 46px; }
}
@media (max-height: 500px) {
  .codex-layout { gap: 4px; }
  .codex-art { padding: 2px; }
  .codex-copy { grid-template-rows: auto minmax(24.2px, auto) auto minmax(12.1px, 1fr) auto; gap: 1px; padding: 3px 5px; }
  .codex-title h2 { font-size: 14px; }
  .codex-title span, .codex-copy p, .codex-stats { font-size: 11px; line-height: 1.1; }
  .codex-factions button { min-height: 28px; }
  .codex-unit img { max-height: 34px; }
}
@media (max-width: 650px) and (orientation: portrait) {
  .game-shell.is-codex { grid-template-rows: auto minmax(90px, 1fr) minmax(0, 52dvh); }
  .game-shell.is-codex .map-frame { bottom: calc(52dvh + 7px); }
  .codex-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.15fr) minmax(0, .85fr); }
  .codex-profile { grid-template-columns: minmax(82px, 25%) minmax(0, 1fr); }
  .codex-copy { grid-template-rows: auto minmax(26.4px, auto) auto minmax(13.2px, 1fr) auto; gap: 2px; padding: 5px; }
  .codex-title h2 { font-size: 15px; }
  .codex-title span, .codex-copy p, .codex-stats { font-size: 11px; line-height: 1.2; }
}
@media (max-width: 650px) and (max-height: 420px) {
  .game-shell.is-codex { grid-template-rows: auto minmax(70px, 1fr) minmax(0, 56dvh); }
  .game-shell.is-codex .map-frame { bottom: calc(56dvh + 7px); }
  .codex-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .codex-profile { grid-template-columns: minmax(45px, 17%) minmax(0, 1fr); }
  .codex-units { grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 650px) and (max-height: 420px) and (orientation: landscape) {
  .codex-copy { grid-template-rows: auto minmax(24.2px, auto) auto minmax(12.1px, 1fr) minmax(24.2px, auto); }
  .codex-copy .codex-source { align-self: start; }
}
@media (max-width: 650px) and (max-height: 720px) {
  .codex-units { grid-template-rows: minmax(0, 1fr); }
  .codex-unit img { max-height: 45px; }
}
@media (max-width: 650px) {
  .game-shell.is-base-selected .capacity { display: none; }
  #base-tabs button { flex: 1 1 44px; min-width: 44px; }
  .game-shell.is-base-selected #base-tabs button { min-height: 44px; }
  #base-menu [data-base-close] { min-width: 44px; }
}
@media (pointer: coarse) {
  .codex-factions button, .codex-unit { min-height: 44px; }
}