.rulebook .rule-board{display:block;width:100%;height:auto;background:#fff;border-radius:8px}
.rulebook .rule-nav{max-height:calc(100vh - 40px);overflow-y:auto}
.rulebook .catalog-card h3{padding-right:52px}
.rulebook .rule-section h3{scroll-margin-top:20px}
@media screen{
  body:has(.rulebook)>#app>header{position:sticky;top:0;z-index:11}
  .rulebook .rule-nav{top:104px;max-height:calc(100dvh - 124px)}
  .rulebook .rule-section,.rulebook .rule-section h3{scroll-margin-top:104px}
}
@media screen and (max-width:800px){
  .rulebook .rule-section,.rulebook .rule-section h3{scroll-margin-top:173px}
}
@media print{
  @page{size:A4;margin:14mm}
  body:has(.rulebook){background:#fff!important;background-image:none!important;color:#111}
  body:has(.rulebook) .page-fullscreen{display:none!important}
  .rulebook{font-family:Arial,sans-serif;font-size:10pt;line-height:1.4}
  .rulebook h1,.rulebook h2,.rulebook h3{font-family:Arial,sans-serif;color:#111}
  .rulebook .catalog-card,.rulebook .rule-callout{background:#fff!important;color:#111}
  .rulebook .rule-grid{display:block}
  .rulebook .catalog-card{margin-bottom:4mm;padding:3mm;border:1px solid #bbb}
  .rulebook .perk-card,.rulebook .perk-school{display:block!important}
  .rulebook .rule-section h2,.rulebook .rule-section h3{break-after:avoid}
  .rulebook .table-wrap{overflow:visible}
  .rulebook table{width:100%;min-width:0;font-size:7.5pt}
  .rulebook th,.rulebook td{padding:4px;white-space:normal}
  .rulebook thead{display:table-header-group}
  .rulebook tr{break-inside:avoid}
  .rulebook .rule-board{break-inside:avoid;max-height:245mm;object-fit:contain}
  .rulebook .cost{color:#111}
  .rulebook #perk-empty{display:none!important}
}