/* Wide desktop planner (planner.html): the panels stay left-aligned at a sensible width instead of stretching over the whole page,
 * and an advertisement column (rail.html in a sandboxed iframe) sits at the right edge of the page. */
.rail { display: none; }
body.page-builds .tabbar { display: none; }   /* the Builds page replaces the planner: no tab buttons above it */
.rail-frame { display: block; width: 160px; height: 630px; border: 0; background: transparent; }
@media (min-width: 1251px) {
  .layout { display: flex; align-items: flex-start; gap: 14px; }
  .char-panel { flex: 0 0 clamp(600px, 40vw, 780px); }
  .right-panel { flex: 0 1 1180px; min-width: 0; }
  body[data-tab="stats"] .right-panel { flex-basis: 900px; }
  /* the two maps use all the room that is left, and the ability map is taller */
  body[data-tab="trans"] .right-panel, body[data-tab="abil"] .right-panel { flex-basis: 1560px; }
  body[data-tab="abil"] .abil-map { height: clamp(680px, 82vh, 900px); }
  /* the Builds page: the planner panels are hidden, the advertisement column stays at the right edge of the window and the page leaves room for it */
  body.page-builds .layout { display: block; padding: 0; }
  body.page-builds .char-panel, body.page-builds .right-panel { display: none; }
  body.page-builds .layout > .rail { position: fixed; right: 20px; top: 74px; margin: 0; align-self: auto; }
  body.page-builds .builds-page { margin: 14px 200px 40px 20px; }
  body.page-builds footer.foot { margin: 0; max-width: none; }   /* the footer and the advertisement below the Builds page are centered in the window, like on the planner */
  .layout > .rail { display: block; flex: none; width: 160px; margin-left: auto; align-self: stretch; }
  .layout > .rail .rail-frame { position: sticky; top: 74px; }
}
/* the advertisement below the planner content (ad.html in an iframe): 728x90 on wide screens, 300x250 on phones */
.ad-bottom { text-align: center; margin: 0 0 6px; }
.ad-frame { border: 0; background: transparent; max-width: 100%; }
.ad-300 { display: none; }
@media (max-width: 759px) { .ad-728 { display: none; } .ad-300 { display: block; margin: 0 auto; width: 320px; height: 294px; } }