/* Seasonal decor and the Display menu.
   Sizes are written for a 1770px-wide screen and scale with the screen width:
   1 unit of --sd is 1px at 1770px (capped at 1.4x on very wide screens). */

:root { --sd: min(calc(100vw / 1770), 1.4px); }

/* ---------- shared ---------- */
.sd {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.sd img, .sd .sd-ground {
  position: absolute; display: block; height: auto; max-width: none;
  pointer-events: none;
}
html[data-decor="off"] .sd { display: none !important; }

/* falling pieces are placed and animated by the script */
.sd .sd-leaf { z-index: 1; opacity: 0; will-change: transform, opacity; }

/* ---------- FALL: homepage hero ---------- */
.sd-hero { z-index: 1; }
.sd-fall .sd-ground {
  left: 0; right: 0; bottom: calc(-4 * var(--sd)); height: calc(58 * var(--sd));
  background-repeat: repeat-x; background-position: left bottom; background-size: auto 100%;
  z-index: 2;
}
.sd-fall .sd-c-left  { left: 0;  bottom: calc(-4 * var(--sd)); width: calc(330 * var(--sd)); z-index: 2; }
.sd-fall .sd-c-right { right: 0; bottom: calc(-4 * var(--sd)); width: calc(330 * var(--sd)); z-index: 2; }
/* the menu bar above the hero keeps its size on every screen, so these two
   offsets are fixed: the branch starts just under the logo, the right piece
   starts below the menu links */
.sd-fall.sd-hero .sd-t-left  { left: 0;  top: 46px; width: calc(270 * var(--sd)); z-index: 2; }
.sd-fall.sd-hero .sd-t-right { right: 0; top: 60px; width: calc(104 * var(--sd)); z-index: 2; }

/* ---------- FALL: Choose Your Game ---------- */
#browse { position: relative; isolation: isolate; }
.sd-browse { z-index: -1; }
.sd-fall .sd-s-branch { left: 0; top: 4px; width: calc(235 * var(--sd)); }
.sd-fall .sd-s-l1  { left: 19.6%; top: 104px; width: calc(30 * var(--sd)); transform: rotate(-20deg); }
.sd-fall .sd-s-r1  { left: 82.2%; top: 118px; width: calc(38 * var(--sd)); transform: rotate(15deg); }
.sd-fall .sd-s-r2  { left: 87.9%; top: 92px;  width: calc(26 * var(--sd)); transform: rotate(-35deg); }
.sd-fall .sd-s-big { right: 1.2%; top: 128px; width: calc(118 * var(--sd)); transform: rotate(-12deg); }

/* ---------- FALL: app header corners (set list and set pages) ---------- */
.sd-head { overflow: visible; z-index: 0; }
.sd-head ~ .header-container { position: relative; z-index: 1; }
.sd-fall.sd-head .sd-t-left { left: 0; top: 0; width: calc(205 * var(--sd)); }
/* never wider than the empty margin beside the menu, so it stops before the
   first button at every width */
.sd-fall.sd-head .sd-t-right {
  right: 0; top: 0;
  width: min(calc(92 * var(--sd)), max(0px, calc((100vw - 1400px) / 2 - 12px)));
}
.sd-fall.sd-head--set .sd-t-left  { width: calc(195 * var(--sd)); }
.sd-fall.sd-head--set .sd-t-right { width: min(calc(90 * var(--sd)), max(0px, calc((100vw - 1400px) / 2 - 12px))); }

/* ---------- FALL: Collection Overview box ---------- */
.sd-box { z-index: 0; border-radius: inherit; }
.sd-fall.sd-box .sd-c-right { width: calc(250 * var(--sd)); }

/* ---------- FALL: footer corners, inside the side margins ---------- */
.site-footer { position: relative; isolation: isolate; }
.sd-foot {
  z-index: -1;
  left: calc(var(--sd-sbw, 0px) / 2); right: calc(var(--sd-sbw, 0px) / 2);
}
.sd-fall .sd-f-left {
  left: 0; bottom: calc(-3 * var(--sd));
  width: min(calc(215 * var(--sd)), max(0px, calc((100vw - 1368px) / 2 + 14px)));
}
.sd-fall .sd-f-right {
  right: 0; bottom: calc(-3 * var(--sd));
  width: min(calc(220 * var(--sd)), max(0px, calc((100vw - 1368px) / 2 + 19px)));
}

/* ---------- card gallery: pieces fall in the empty side margins ---------- */
.sd.sd-gutters { position: fixed; z-index: 1; }
.footer-wrapper { z-index: 2; }

/* ---------- narrower screens ----------
   Below 1440px the footer has no side margin left for its corner piles. */
@media (max-width: 1439px) {
  .sd-foot { display: none; }
}
/* Below 1200px: the right-side pieces and the Collection Overview pile go
   (the margin pieces are stopped by the script at the same width). */
@media (max-width: 1199px) {
  .sd-hero .sd-t-right,
  .sd-head .sd-t-right,
  .sd-browse .sd-right,
  .sd-box { display: none; }
}
/* Phones: nothing. */
@media screen and (max-width: 767px) {
  .sd { display: none !important; }
}
@media print {
  .sd, .sd-disp { display: none !important; }
}

/* ---------- Display menu (theme + seasonal decor) ---------- */
.sd-disp {
  position: relative; display: inline-flex; align-items: center; margin-left: 8px; flex: none;
  --m-bg: #ffffff; --m-panel: #ffffff; --m-line: #d8dee9; --m-text: #16233a; --m-muted: #5c6b82; --m-on: #2b6ef2;
  font-family: inherit; font-size: 13px; line-height: 1.3;
}
html.dark-mode .sd-disp {
  --m-bg: #182434; --m-panel: #16233a; --m-line: #2c3c58; --m-text: #e8eef8; --m-muted: #93a3bd;
}
.sd-disp-btn {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0;
  border-radius: 50%; background: var(--m-bg); border: 1px solid var(--m-line); color: var(--m-text);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.sd-disp-btn:hover { border-color: var(--m-muted); }
.sd-disp-btn:focus-visible { outline: 2px solid var(--m-on); outline-offset: 2px; }
.sd-disp-btn .sd-ico { width: 21px; height: 21px; display: block; }
html.dark-mode .sd-ico-sun { display: none; }
html:not(.dark-mode) .sd-ico-moon { display: none; }
.sd-disp-leaf { position: absolute; right: -6%; top: -6%; width: 42%; height: auto; pointer-events: none; }
html[data-decor="off"] .sd-disp-leaf { display: none; }

.sd-disp-menu {
  position: absolute; right: 0; top: 44px; z-index: 1200; width: 250px; padding: 12px; border-radius: 12px;
  background: var(--m-panel); border: 1px solid var(--m-line); color: var(--m-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.sd-disp-menu[hidden] { display: none; }
.sd-disp-h {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted);
}
.sd-seg { display: flex; border: 1px solid var(--m-line); border-radius: 8px; overflow: hidden; }
.sd-seg button {
  flex: 1; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--m-text);
  font: 600 13px/1.2 inherit; font-family: inherit; padding: 7px 4px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sd-seg button + button { border-left: 1px solid var(--m-line); }
.sd-seg button:hover { background: rgba(43, 110, 242, .12); }
.sd-seg button:focus-visible { outline: 2px solid var(--m-on); outline-offset: -2px; }
.sd-seg button[aria-pressed="true"] { background: var(--m-on); color: #fff; }