/* The regulations page follows the photo + paper layout of the other UOC pages. */
.rules-main { color: #191919; background: #eeece7; }
.rules-page {
  --rules-red: #c92327;
  --rules-gold: #f5d548;
  --rules-panel: #fff;
  --rules-border: #cbc8c1;
  --rules-muted: #66625d;
}
.rules-page section[id] { scroll-margin-top: 68px; }

.rules-cover {
  min-height: 570px;
  padding: 0;
  border-bottom: 0;
  isolation: isolate;
  background: #15100e url('img/rules/rules-cover-2027.png') center center / cover no-repeat fixed;
}
.rules-cover::before {
  z-index: -1;
  background: linear-gradient(90deg, rgba(8,7,7,.88) 0%, rgba(8,7,7,.66) 43%, rgba(8,7,7,.12) 80%), linear-gradient(0deg, rgba(8,7,7,.57), transparent 48%);
}
.rules-cover-inner {
  min-height: 570px;
  align-items: start;
  padding-block: 70px 55px;
}
.rules-cover-copy { max-width: 730px; }
.rules-overline { color: #ff6967; }
#rules-title { font-size: clamp(3.5rem, 7vw, 7rem); text-wrap: balance; }
.rules-lead { max-width: 620px; color: #f2efeb; text-wrap: pretty; }
.rules-cover-actions { align-self: end; justify-self: end; width: min(100%, 310px); }
.rules-cover .btn-rules-ext {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  background: rgba(10,9,9,.62);
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rules-cover .btn-rules-ext:hover,
.rules-cover .btn-rules-ext:focus-visible { background: #c92327; border-color: #c92327; }

.rules-metrics-band { color: #191919; background: #f8f7f3; border-bottom-color: #cbc8c1; padding-block: 26px; }
.rules-metric-card { border-left-color: #cbc8c1; }
.metric-tag { color: #a52225; }
.metric-value { color: #191919; }
.metric-note { color: #625e59; }

.rules-viewer-wrap {
  --rules-panel: #1d1d21;
  --rules-border: #414147;
  --rules-muted: #aaa8ad;
  --rules-red: #f24946;
  color: #f5f3ef;
  background: #111114;
  border-bottom-color: #cbc8c1;
  padding-block: clamp(55px, 6vw, 88px);
}
.rules-viewer-topline { color: #aaa8ad; border-bottom: 2px solid #f5f3ef; padding-bottom: 17px; margin-bottom: 20px; }
.rules-viewer-tag { color: #f5f3ef; }
.tag-sub { color: #aaa8ad; border-left-color: #535359; }
.rules-viewer-pagemeta { color: #ff6967; }

.rules-sidebar-toc, .rules-action-box, .rules-micro-thumbs-bar { background: #1d1d21; border-color: #414147; }
.sidebar-box-head { color: #aaa8ad; background: #26262b; border-bottom-color: #414147; }
.rules-toc-vertical, .rules-thumbs-track { scrollbar-color: #626168 transparent; }
.rules-toc-vertical::-webkit-scrollbar-thumb, .rules-thumbs-track::-webkit-scrollbar-thumb { background: #626168; }
.rules-toc-vbtn { color: #d4d1d0; border-bottom-color: #35353b; }
.rules-toc-vbtn:hover, .rules-toc-vbtn:focus-visible { color: #fff; background: #303036; border-color: #626168; }
.rules-toc-vbtn.is-active { color: #fff; background: #3c2023; border-color: #f24946; }
.vbtn-num { color: #ff6967; }

.rules-stage-container { background: #08080a; border-color: #414147; box-shadow: none; }
.rules-slide-sheet { background: #fff; border-color: #414147; box-shadow: 0 14px 38px rgba(0,0,0,.35); }
.rules-micro-thumb.is-active { background: #3c2023; }
.micro-thumb-preview { background: #323238; border-color: #626168; }
.micro-thumb-index { color: #c8c5c5; }

.rules-counter-v strong { color: #f5f3ef; }
.btn-side-prev, .btn-side-next, .btn-side-fs { color: #f5f3ef; background: #29292e; }
.btn-side-prev:hover:not(:disabled), .btn-side-next:hover:not(:disabled), .btn-side-fs:hover { color: #fff; background: #c92327; border-color: #c92327; }
.btn-side-prev:disabled, .btn-side-next:disabled { opacity: .45; }
.btn-side-docs { color: #d4d1d0 !important; background: #29292e; }
.btn-side-docs:hover { color: #fff !important; background: #c92327; border-color: #c92327; }
.side-hotkey-list { color: #aaa8ad; }
.side-hotkey-list code { color: #f5f3ef; background: #29292e; border-color: #535359; }

.rules-summary-section { color: #191919; background: #f8f7f3; border-bottom-color: #cbc8c1; }
.rules-summary-head h2, .rules-prose-head h2 { color: #191919; }
.rules-summary-head p { color: #625e59; }
.rules-cards-grid { gap: 0; border-top: 2px solid #191919; border-left: 1px solid #cbc8c1; }
.rules-card { background: #f8f7f3; border: 0; border-right: 1px solid #cbc8c1; border-bottom: 1px solid #cbc8c1; }
.rules-card:hover { background: #fff; }
.rules-card-index { color: #e3dfd8; }
.rules-card h3, .rules-list li strong { color: #191919; }
.rules-list { color: #5b5752; }
.rules-prose-section { color: #191919; background: #eeece7; border-bottom-color: #cbc8c1; }

.rules-bottom-cta { color: #fff; background: #171719; }
.rules-bottom-copy p { color: #ccc8c2; }
.rules-bottom-cta .btn-rules-ext { color: #fff !important; background: #c92327; border-color: #c92327; }
.rules-bottom-cta .btn-rules-ext:hover { color: #191919 !important; background: #f5d548; border-color: #f5d548; }
.rules-page a:focus-visible, .rules-page button:focus-visible { outline: 2px solid #c92327; outline-offset: 3px; }

@media (max-width: 900px) {
  .rules-cover-inner { min-height: 620px; }
  .rules-cover-actions { justify-self: start; }
}
@media (max-width: 768px) {
  .rules-cover { min-height: 680px; background-position: 52% center; }
  .rules-cover::before { background: linear-gradient(180deg, rgba(8,7,7,.9), rgba(8,7,7,.73) 40%, rgba(8,7,7,.14) 72%, rgba(8,7,7,.75)); }
  .rules-cover-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 680px; padding-block: 42px 36px; }
  #rules-title { font-size: clamp(2.55rem, 9.5vw, 4rem); }
  .rules-lead { max-width: 500px; }
  .rules-cover-actions { width: 100%; }
  .rules-cover .btn-rules-dl { color: #fff !important; background: #c92327; border-color: #c92327; box-shadow: none; }
  .rules-stage-container { background: #08080a !important; border-radius: 0; }
  .rules-mobile-tap-hint { color: #f5f3ef; background: #1d1d21; border-color: #414147; border-radius: 0; }
  .rules-mobile-tap-hint:active { background: #303036; }
  .mobile-hint-badge { color: #ff6967; }
  .mobile-hint-text { color: #aaa8ad; }
  .rules-cards-grid { border-left: 0; }
  .rules-card { border-left: 1px solid #cbc8c1; }
}