/* Author: goodjava@qq.com */
.paper.wide.codex-book { width: min(1040px,96%); max-width: 1040px; }
.codex-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid #cfc09c; border-radius: 9px; background: #e2d8bd; margin-bottom: 20px; }
.codex-tabs button { flex: 1; min-height: 42px; padding: 7px 12px; border-radius: 6px; font-size: 14px; color: #69705a; }
.codex-tabs button[aria-selected="true"] { color: #fff1d3; background: #315747; box-shadow: 0 2px 5px #142f2426; }
.codex-tabs button:hover:not([aria-selected="true"]) { background: #f4ebd5; }
.codex-intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.codex-intro p { color: #405a45; font-size: 14px; }
.codex-intro > span { font-size: 11px; color: #8c7954; }
.codex-filters { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; margin: 18px 0; align-items: end; }
.codex-filters label > span { display: block; font-size: 10px; color: #7b795f; margin-bottom: 6px; }
.codex-filters input[type="search"], .codex-filters select { box-sizing: border-box; width: 100%; min-height: 40px; border: 1px solid #c6b794; border-radius: 6px; background: #fff8e9; padding: 8px 11px; color: #334c3b; font: 12px -apple-system,"PingFang SC",sans-serif; }
.codex-owned { display: flex; gap: 5px; font-size: 11px; color: #647056; align-items: center; min-height: 40px; white-space: nowrap; }
.codex-owned input { accent-color: #315747; }
.codex-count { color: #8a7b5c; font-size: 11px; margin: 18px 0; line-height: 1.7; }
.codex-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(156px,1fr)); gap: 24px 14px; }
.codex-card { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.codex-card > .card-slot { flex: none; }
.codex-card-meta { width: 156px; margin-top: 8px; text-align: center; }
.codex-card-meta span, .codex-card-meta small { display: block; }
.codex-card-meta span { font-size: 11px; color: #53664b; }
.codex-card-meta small { font-size: 10px; color: #938463; margin-top: 4px; }
.codex-build { padding: 15px 18px; background: #e2e0c8; border: 1px solid #b6bc93; border-radius: 7px; margin: 16px 0; color: #3b573e; }
.codex-build b { font-size: 15px; }
.codex-build p { font-size: 12px; }
.codex-build small { font-size: 11px; color: #82734e; line-height: 1.7; }
.codex-glossary { padding: 12px 16px; border: 1px solid #cfc19c; border-radius: 7px; font-size: 12px; background: #f7efdc; }
.codex-glossary summary { cursor: pointer; color: #486047; }
.codex-glossary > p { font-size: 12px; line-height: 1.9; color: #7a745b; }
.codex-glossary dl { display: grid; grid-template-columns: 85px 1fr; gap: 10px 12px; font-size: 12px; line-height: 1.8; }
.codex-glossary dt { color: #37583c; font-weight: 600; }
.codex-glossary dd { margin: 0; color: #7c755f; }
.codex-empty { grid-column: 1 / -1; padding: 30px 0; color: #887b60; text-align: center; }
.face[data-rarity="uncommon"] { border-color: #668d91; }
.face[data-rarity="rare"] { border-color: #bc953e; box-shadow: inset 0 0 0 3px #fbf1d7,inset 0 0 0 4px #d2b572,0 5px 12px #08171140; }
.face[data-rarity="forbidden"] { border-color: #91709c; }
.detail-art { display: block; width: calc(100% + 64px); height: 200px; object-fit: cover; margin: -32px -32px 22px; border-radius: 12px 12px 0 0; }
.card-detail .detail-close { background: #102e26db; color: #fff1d5; border-radius: 50%; z-index: 1; }
.detail-rules { border-block: 1px solid #d2c4a6; padding: 16px 0; }
.detail-rules > p { margin: 5px 0; color: #344d3a; font-size: 15px; line-height: 1.8; }
.detail-tip { border-left: 3px solid #b39d64; background: #e5dfc4; padding: 12px; color: #6c6f51; font-size: 12px; line-height: 1.9; }
.detail-keywords { font-size: 11px; line-height: 1.8; color: #84785d; }
@media (max-width:700px) {
  .paper.wide.codex-book { width: 100%; max-width: none; }
  .codex-tabs { gap: 2px; }
  .codex-tabs button { font-size: 12px; padding-inline: 5px; }
  .codex-intro { display: block; }
  .codex-intro > span { display: block; margin-top: 7px; }
  .codex-filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .codex-search { grid-column: 1 / -1; }
  .codex-owned { grid-column: 1 / -1; min-height: 30px; }
  .codex-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 10px; }
  .codex-card .card-slot { --card-width: min(144px,100%); }
  .codex-card-meta { width: 100%; }
  .codex-glossary { padding: 11px 12px; }
  .codex-glossary dl { grid-template-columns: 55px 1fr; gap: 10px; }
  .detail-art { height: 180px; }
}