.card-detail-page { --card-accent: #7d735f; }
.card-detail-page.color-red { --card-accent: #a64e46; }
.card-detail-page.color-blue { --card-accent: #41799d; }
.card-detail-page.color-green { --card-accent: #507b50; }
.card-detail-page.color-purple { --card-accent: #6e508a; }
.card-page-shell { width: min(1120px, calc(100% - 28px)); padding-top: 29px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 23px; color: #f0ddba; font-size: .69rem; }
.breadcrumbs a { text-underline-offset: 3px; }
.card-hero { display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); align-items: stretch; gap: 22px; }
.card-art-sheet, .card-title-sheet, .paper-panel {
  position: relative;
  border: 1px solid rgba(87, 65, 39, .3);
  border-radius: 4px 13px 5px 10px;
  background: linear-gradient(145deg, #f2e6be, #d5c18e);
  box-shadow: 8px 10px 0 rgba(53, 30, 16, .15), 0 20px 42px rgba(43, 24, 12, .18);
}
.card-art-sheet { display: grid; padding: 35px 28px 24px; place-items: center; }
.art-tape, .paper-panel::before { position: absolute; top: -10px; left: 50%; width: 92px; height: 21px; background: rgba(225, 202, 152, .84); content: ""; transform: translateX(-50%) rotate(-2deg); }
.card-art-sheet img { display: block; width: min(100%, 315px); max-height: 440px; object-fit: contain; filter: drop-shadow(0 13px 10px rgba(43, 25, 13, .25)); }
.card-art-sheet > a { margin-top: 19px; color: #345d43; font-size: .7rem; font-weight: 900; }
.card-title-sheet { padding: clamp(34px, 5vw, 59px); border-top: 6px solid var(--card-accent); }
.card-title-sheet h1 { margin: 0 0 19px; font-size: clamp(2.7rem, 6vw, 5rem); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-badges > span { padding: 5px 9px; border: 1px solid rgba(77, 59, 37, .22); border-radius: 99px; color: #5e503c; background: rgba(255, 250, 225, .4); font-size: .63rem; font-weight: 900; }
.detail-badges .color-badge { color: #fff2da; background: var(--card-accent); }
.detail-stats { display: grid; grid-template-columns: repeat(3, minmax(80px, 1fr)); gap: 9px; margin-top: 22px; }
.detail-stats div { padding: 12px; border-left: 3px solid var(--card-accent); background: rgba(255, 250, 225, .38); }
.detail-stats span, .detail-stats strong { display: block; }
.detail-stats span { color: #806f56; font-size: .56rem; font-weight: 900; text-transform: uppercase; }
.detail-stats strong { font: 700 1.25rem Georgia, serif; }
.printing-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 22px 0 0; }
.printing-list div { padding: 10px 0; border-bottom: 1px dashed rgba(77, 59, 37, .25); }
.printing-list dt { color: #816f54; font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.printing-list dd { margin: 3px 0 0; font: 700 .78rem Georgia, serif; }
.pal-bridge { display: inline-flex; margin-top: 22px; padding: 10px 13px; border-radius: 3px 8px 3px 7px; color: #f8edcf; background: #365c43; font-size: .7rem; font-weight: 900; text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); gap: 20px; margin-top: 38px; }
.paper-panel { padding: 35px 31px 29px; }
.paper-panel h2 { margin: 0 0 18px; font: 700 1.9rem Georgia, serif; }
.full-rules { color: #4f4333; font: 700 1rem/1.7 Georgia, serif; }
.ruling-note, .empty-note { color: #786a52; font: italic .75rem/1.55 Georgia, serif; }
.work-panel { background: linear-gradient(145deg, #dce1b3, #bdc78f); }
.work-panel ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; list-style: none; }
.work-panel li { padding: 7px 9px; border: 1px solid rgba(67, 91, 57, .28); border-radius: 99px; color: #3f5639; background: rgba(249, 249, 215, .42); font-size: .68rem; font-weight: 900; }
.related-panel { margin-top: 38px; }
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.related-grid a { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid rgba(77, 59, 37, .23); background: rgba(255, 250, 225, .35); text-decoration: none; }
.related-grid img { width: 62px; height: 84px; object-fit: contain; }
.related-grid span, .related-grid strong { display: block; font-size: .59rem; }
.related-grid strong { color: var(--card-accent); font-size: .68rem; }
.card-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 28px; }
.card-pagination a { display: grid; padding: 16px; border: 1px solid rgba(234, 204, 155, .25); color: #efdcbc; background: rgba(48, 31, 19, .42); text-decoration: none; }
.card-pagination a:last-child { text-align: right; }
.card-pagination small { color: #bea986; font-size: .54rem; font-weight: 900; text-transform: uppercase; }
.card-pagination strong { margin-top: 4px; font: 700 .75rem Georgia, serif; }
@media (max-width: 800px) {
  .card-hero, .detail-grid { grid-template-columns: 1fr; }
  .card-art-sheet img { max-height: 390px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .card-title-sheet, .paper-panel { padding-inline: 21px; }
  .printing-list { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .card-pagination { grid-template-columns: 1fr; }
  .card-pagination a:last-child { text-align: left; }
}