/* District Basic Rules */

.rules-wrap{max-width:1100px}
.rule-page{display:none}
.rule-page.active{display:flex;flex-direction:column;gap:22px}

.rules-hero .panel-body{padding-top:28px;padding-bottom:28px}
.rule-title{margin:0 0 18px;font-size:38px;letter-spacing:.12em}
.rule-copy{max-width:82ch;line-height:1.65}
.rule-copy p{margin:0 0 15px}
.rule-copy p:last-child{margin-bottom:0}
.rule-section{scroll-margin-top:18px}

.sub-rule{margin:28px 0 12px;font-size:14px;letter-spacing:.16em;color:var(--txt)}
.example-box{margin-top:24px;padding:18px;border:1px solid rgba(111,215,163,.28);background:rgba(0,0,0,.18)}
.example-title{margin-bottom:12px;font-size:11px;color:var(--dim)}
.rule-callout{margin-top:20px!important;padding-top:15px;border-top:1px solid rgba(111,215,163,.18)}
.rule-question{margin:20px 0;padding:18px 20px;border-left:3px solid var(--dim);background:rgba(0,0,0,.18);color:var(--txt);font-weight:700}
.rule-question.large{font-size:20px}
.rule-list{margin:18px 0;padding-left:26px}
.rule-list li{margin-bottom:8px}
.formula-box{margin:22px 0;padding:18px;text-align:center;border:1px solid rgba(111,215,163,.32);background:rgba(0,0,0,.22);font-size:18px;letter-spacing:.08em}
.dual-principle{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.dual-principle>div{padding:18px;border:1px solid rgba(111,215,163,.25);background:rgba(0,0,0,.18)}
.dual-principle span,.dual-principle strong{display:block}
.dual-principle strong{margin-top:8px}

/* Compact version of the District flip controls */
.rule-switcher{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}

.rule-flip{
  position:relative;
  height:58px;
  padding:0;
  border:0;
  perspective:700px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit;
}

.rule-flip-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}

.rule-flip:hover .rule-flip-inner,
.rule-flip:focus-visible .rule-flip-inner{
  transform:rotateX(180deg);
}

.rule-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:6px 8px;
  border:1px solid rgba(14,42,28,.95);
  background:linear-gradient(to bottom,rgba(10,25,16,.82),rgba(6,14,10,.74));
  box-shadow:0 0 0 1px rgba(140,255,205,.06) inset,0 8px 22px rgba(0,0,0,.35);
  backface-visibility:hidden;
  overflow:hidden;
  font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:10px;
  line-height:1.15;
  letter-spacing:.13em;
  text-align:center;
  text-transform:uppercase;
}

.rule-face::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.15) 3px);
}

.rule-face>span{position:relative;z-index:1}

.rule-back{
  transform:rotateX(180deg);
  color:#ffe6a3;
  background:linear-gradient(to bottom,rgba(48,38,8,.94),rgba(24,18,4,.88));
  border-color:rgba(255,210,95,.58);
  box-shadow:0 0 0 1px rgba(255,220,120,.10) inset,0 8px 22px rgba(0,0,0,.35),0 0 18px rgba(255,205,90,.10);
}

.rule-flip.active .rule-front{
  border-color:rgba(191,255,215,.62);
  box-shadow:0 0 0 1px rgba(140,255,205,.12) inset,0 0 18px rgba(140,255,205,.12);
}

.rule-flip.future{opacity:.38;cursor:default}
.rule-flip.future:hover .rule-flip-inner{transform:none}

@media(max-width:760px){
  .rule-title{font-size:28px}
  .rule-switcher{grid-template-columns:repeat(2,1fr)}
  .rule-flip{height:54px}
  .dual-principle{grid-template-columns:1fr}
  .formula-box{font-size:15px}
  @media(hover:none){
    .rule-flip:hover .rule-flip-inner{transform:none}
  }
}


.rule-table-wrap{
  overflow-x:auto;
  margin-top:20px;
}

.rule-table{
  width:100%;
  border-collapse:collapse;
  font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;
}

.rule-table th,
.rule-table td{
  padding:12px 14px;
  border:1px solid rgba(111,215,163,.22);
  text-align:left;
}

.rule-table th{
  color:var(--dim);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(0,0,0,.22);
}

.rule-table td{
  background:rgba(0,0,0,.12);
}


/* Grouped rules navigation */
.grouped-switcher{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.grouped-switcher .rule-nav-row{
  display:grid;
  gap:6px;
}

.grouped-switcher .core-row{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.grouped-switcher .stats-row{
  grid-template-columns:repeat(7,minmax(0,1fr));
}

.grouped-switcher .creation-row{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grouped-switcher .rule-flip{
  min-height:42px;
  height:42px;
}

.grouped-switcher .rule-face{
  padding:5px 8px;
}

.grouped-switcher .rule-label,
.grouped-switcher .rule-face span{
  line-height:1.05;
}

@media (max-width:900px){
  .grouped-switcher .stats-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .grouped-switcher .core-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grouped-switcher .creation-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .grouped-switcher .stats-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grouped-switcher .rule-flip{
    min-height:38px;
    height:38px;
  }

  .grouped-switcher .rule-face{
    padding:4px 5px;
  }
}


/* Keep the rules navigation available on every rule view */
.grouped-switcher{
  position:sticky;
  top:0;
  z-index:40;
  padding:6px 0;
  background:
    linear-gradient(to bottom,
      rgba(4,8,6,.98) 0%,
      rgba(5,12,8,.96) 82%,
      rgba(5,12,8,0) 100%);
  backdrop-filter:blur(2px);
}


/* Character Creator -> Character Sheets link */
.creator-flip{
  position:relative;
  display:block;
  width:min(420px,100%);
  height:64px;
  margin-top:18px;
  perspective:700px;
  text-decoration:none;
  color:inherit;
}

.creator-flip-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}

.creator-flip:hover .creator-flip-inner,
.creator-flip:focus-visible .creator-flip-inner{
  transform:rotateX(180deg);
}

.creator-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:8px 12px;
  border:1px solid rgba(14,42,28,.95);
  background:linear-gradient(to bottom,rgba(10,25,16,.82),rgba(6,14,10,.74));
  box-shadow:
    0 0 0 1px rgba(140,255,205,.06) inset,
    0 8px 22px rgba(0,0,0,.35);
  backface-visibility:hidden;
  overflow:hidden;
  font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:11px;
  line-height:1.1;
  letter-spacing:.13em;
  text-align:center;
  text-transform:uppercase;
}

.creator-face::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,.15) 3px
  );
}

.creator-face>span{
  position:relative;
  z-index:1;
}

.creator-back{
  transform:rotateX(180deg);
  color:#ffe6a3;
  background:linear-gradient(to bottom,rgba(48,38,8,.94),rgba(24,18,4,.88));
  border-color:rgba(255,210,95,.58);
  box-shadow:
    0 0 0 1px rgba(255,220,120,.10) inset,
    0 8px 22px rgba(0,0,0,.35),
    0 0 18px rgba(255,205,90,.10);
}

@media(hover:none){
  .creator-flip:hover .creator-flip-inner{
    transform:none;
  }
}