/* One leather material, a transparent bird, and CSS book-binding layers. */
.ze-header,
.ze-leather-rendering {
  --binding-inset: 90px;
  --header-gutter: 32px;
  --header-divider-height: 36px;
  --panel-top: 13px;
  --stitch-inset: 7px;
  --stitch-colour: #91a07970;
  --leather: image-set(url("https://assets.zeldaelements.net/assets/ze/header-fine-leather-768.3dcec86f92cc.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/header-fine-leather-768.90e67a8f0c14.webp") 1x type("image/webp"));
  --leather-patina: image-set(url("https://assets.zeldaelements.net/assets/ze/leather-cloud-patina-768.2843deb27b46.webp") 1x type("image/webp"));
  --face-wash: linear-gradient(#1d453e45, #132c2599);
  --panel-material:
    linear-gradient(#a5cdbb66, #77a28e38 1px, #08271c20 2px, transparent 3px),
    linear-gradient(90deg, #97bea54d, transparent 2px), var(--face-wash),
    var(--leather-patina) center / 768px 768px,
    #12362a var(--leather) center / 512px 512px;
  --panel-blend: normal, normal, normal, soft-light, normal;
  --panel-edge:
    inset 0 1px 0 #b5d4bf33, inset -1px 0 1px #001a1266,
    inset 0 -1px 1px #6b9e8080, inset 0 -2px 2px #001b1370;
  --panel-shadow: drop-shadow(0.25px 0.5px 0.4px #00160ecc)
    drop-shadow(0.75px 1.5px 1px #00160e80)
    drop-shadow(1.5px 3px 2.5px #00160e40);
  --chamfer: polygon(
    0 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    16px 100%,
    0 calc(100% - 15px)
  );
}
.ze-header {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 0 0 16px 16px;
  background:
    radial-gradient(ellipse at 8% 100%, #cc78602e, transparent 42%),
    radial-gradient(ellipse at 92% 100%, #cc78602e, transparent 42%),
    linear-gradient(#69273360, #581c2870 78%, #87394b55 94%, #3e172bc0),
    #692733 var(--leather) center / 512px 512px;
  background-blend-mode: normal, normal, normal, luminosity;
  box-shadow:
    inset 0 -1px #d08b6655,
    inset 0 -3px #36101c99,
    inset 0 -4px #bf715c44,
    0 2px 3px #27191530;
  isolation: isolate;
}
.ze-header::before,
.ze-header::after {
  content: none;
}
.ze-header-inner {
  position: relative;
  height: 104px;
  min-height: 104px;
  max-width: none;
  padding: 20px calc(var(--binding-inset) + var(--header-gutter)) 15px;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  flex-wrap: nowrap;
  isolation: isolate;
}
.ze-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  border: 0;
  background:
    var(--face-wash),
    #12362a var(--leather) center / 512px 512px;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    calc(100% - 16px) 12px,
    100% 12px,
    100% 82px,
    calc(100% - 12px) 93px,
    calc(100% - var(--binding-inset) - 10px) 93px,
    calc(100% - var(--binding-inset) - 16px) 99px,
    calc(var(--binding-inset) + 16px) 99px,
    calc(var(--binding-inset) + 10px) 93px,
    12px 93px,
    0 82px,
    0 12px,
    16px 12px
  );
  border-radius: 0;
  box-shadow: none;
}
/* The green roll ends at the gold tips; the bird patches sit on oxblood. */
@media (min-width: 801px) {
  .ze-header {
    background: none;
    box-shadow: none;
  }
  .ze-header-inner::before {
    /* Opaque seam bed closes the pinholes between the rounded panel shoulders. */
    content: "";
    inset: 12px calc(var(--binding-inset) - 4px) auto;
    height: 8px;
    clip-path: none;
    background: #092b20;
  }
}
.ze-header-binding {
  position: absolute;
  inset: 0 0 1px;
  z-index: -4;
  pointer-events: none;
  filter: drop-shadow(0 1px 0.6px #26141580) drop-shadow(0 2px 2px #26141540);
  /* The hem steps down along the gold trim's own curve, 1.5px below its centreline,
     so the 3.4px metal always covers the oxblood edge at any zoom or density. */
  --binding-shape: polygon(
    0 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 8px) calc(100% - 9px),
    calc(100% - var(--binding-inset) - 10.93px) calc(100% - 9px),
    calc(100% - var(--binding-inset) - 11.93px) calc(100% - 7.97px),
    calc(100% - var(--binding-inset) - 12.94px) calc(100% - 6.99px),
    calc(100% - var(--binding-inset) - 13.96px) calc(100% - 6.07px),
    calc(100% - var(--binding-inset) - 14.98px) calc(100% - 5.24px),
    calc(100% - var(--binding-inset) - 16px) calc(100% - 4.5px),
    calc(100% - var(--binding-inset) - 17.56px) calc(100% - 3.39px),
    calc(100% - var(--binding-inset) - 19.56px) calc(100% - 2.72px),
    calc(100% - var(--binding-inset) - 22px) calc(100% - 2.5px),
    calc(var(--binding-inset) + 22px) calc(100% - 2.5px),
    calc(var(--binding-inset) + 19.56px) calc(100% - 2.72px),
    calc(var(--binding-inset) + 17.56px) calc(100% - 3.39px),
    calc(var(--binding-inset) + 16px) calc(100% - 4.5px),
    calc(var(--binding-inset) + 14.98px) calc(100% - 5.24px),
    calc(var(--binding-inset) + 13.96px) calc(100% - 6.07px),
    calc(var(--binding-inset) + 12.94px) calc(100% - 6.99px),
    calc(var(--binding-inset) + 11.93px) calc(100% - 7.97px),
    calc(var(--binding-inset) + 10.93px) calc(100% - 9px),
    8px calc(100% - 9px),
    0 calc(100% - 18px)
  );
}
@supports (clip-path: shape(from 0 0, line to 100% 100%, close)) {
  .ze-header-binding {
    --binding-shape: shape(
      from 0 0,
      line to 100% 0,
      line to 100% calc(100% - 25px),
      curve to calc(100% - 16px) calc(100% - 9px) with 100% calc(100% - 9px),
      line to calc(100% - var(--binding-inset) - 10.93px) calc(100% - 9px),
      curve to calc(100% - var(--binding-inset) - 16px) calc(100% - 4.5px) with
        calc(100% - var(--binding-inset) - 12.59px) calc(100% - 7.26px) /
        calc(100% - var(--binding-inset) - 14.29px) calc(100% - 5.64px),
      curve to calc(100% - var(--binding-inset) - 22px) calc(100% - 2.5px) with
        calc(100% - var(--binding-inset) - 18px) calc(100% - 2.5px),
      line to calc(var(--binding-inset) + 22px) calc(100% - 2.5px),
      curve to calc(var(--binding-inset) + 16px) calc(100% - 4.5px) with
        calc(var(--binding-inset) + 18px) calc(100% - 2.5px),
      curve to calc(var(--binding-inset) + 10.93px) calc(100% - 9px) with
        calc(var(--binding-inset) + 14.29px) calc(100% - 5.64px) /
        calc(var(--binding-inset) + 12.59px) calc(100% - 7.26px),
      line to 16px calc(100% - 9px),
      curve to 0 calc(100% - 25px) with 0 calc(100% - 9px),
      close
    );
  }
}
.ze-header-binding::before,
.ze-header-binding::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--binding-shape);
  border-radius: 0 0 10px 10px;
}
.ze-header-binding::before {
  background: #a16c4a;
}
.ze-header-binding::after {
  bottom: 1px;
  background:
    radial-gradient(ellipse at 50% 110%, #b956432e, transparent 65%),
    linear-gradient(#601b2bd9, #691c2dcc),
    #692733 var(--leather) center / 512px 512px;
  background-blend-mode: normal, normal, luminosity;
  box-shadow: inset 0 -2px 1px #3d1127a0;
}
@media (max-width: 800px) {
  .ze-header-binding {
    display: none;
  }
}
.ze-header-inner::after {
  content: "";
  position: absolute;
  /* The roll sits behind every patch, including the centre's top bevel. */
  z-index: -3;
  inset: 0 4px auto;
  height: 14px;
  border-radius: 0 0 14px 14px / 0 0 7px 7px;
  /* Grazing light on the same leather grain, rather than an opaque green strip. */
  background:
    linear-gradient(
      #aecdbd25 0%,
      #a6cab74a 13%,
      #83b59d24 37%,
      #648f7308 72%,
      transparent 100%
    ),
    linear-gradient(transparent 40%, #03191080),
    var(--leather-patina) center / 768px 768px,
    #12362a var(--leather) center / 512px 512px;
  background-blend-mode: screen, multiply, soft-light, normal;
  box-shadow: inset 0 1px #a7bd8e14;
  pointer-events: none;
}
/* A CSS bevel around the cut leather face; fixed corners and a flexible centre. */
.ze-header-frame {
  position: absolute;
  inset: var(--panel-top) var(--binding-inset) 6px;
  z-index: -2;
  border-radius: 4px 4px 0 0;
  filter: var(--panel-shadow);
  pointer-events: none;
}
.ze-header-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: var(--chamfer);
  background: var(--panel-material);
  background-blend-mode: var(--panel-blend);
  box-shadow: var(--panel-edge);
}
@supports (corner-shape: bevel) {
  .ze-header-frame::before {
    clip-path: none;
    border-radius: 4px 4px 15px 16px;
    corner-shape: round round bevel bevel;
  }
}
.ze-header-stitches {
  position: absolute;
  inset: calc(var(--panel-top) + var(--stitch-inset) + 1px)
    calc(var(--binding-inset) + var(--stitch-inset) + 1px) 14px;
  z-index: -1;
  border: 1px dashed var(--stitch-colour);
  border-radius: 2px 2px 13px 13px;
  filter: drop-shadow(0 -0.8px 0 #00170fe6);
  pointer-events: none;
}
/* Let the dashed border follow the leather's cut, including its diagonal turns. */
@supports (corner-shape: bevel) {
  @media (min-width: 801px) {
    .ze-header-stitches {
      corner-shape: round round bevel bevel;
    }
  }
}
/* Only the four tiny metal fittings use inline SVG. */
.ze-header-gold {
  position: absolute;
  z-index: 0;
  display: block;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0.6px #211c12b3);
  pointer-events: none;
}
.ze-header-gold .ze-metal-shadow {
  stroke: #5a421d;
  stroke-width: 4.2;
  transform: translateY(0.5px);
}
.ze-header-gold .ze-metal-body {
  stroke: url(#ze-metal-body);
  stroke-width: 3.4;
}
.ze-header-gold .ze-metal-light {
  stroke: url(#ze-metal-light);
  stroke-width: 1.1;
  transform: translate(-0.35px, -0.65px);
}
.ze-header-gold--top {
  width: 16px;
  height: 14px;
  top: 0;
  left: 2px;
}
.ze-header-gold--bottom {
  width: 28px;
  height: 19px;
  top: 82px;
  left: calc(var(--binding-inset) - 1px);
}
.ze-header-gold--right {
  left: auto;
  transform: scaleX(-1);
}
.ze-header-gold--top.ze-header-gold--right {
  right: 2px;
}
.ze-header-gold--bottom.ze-header-gold--right {
  right: calc(var(--binding-inset) - 1px);
}
.ze-endcap {
  --stamp-size: 74px;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--stamp-size);
  height: var(--stamp-size);
  top: 50%;
  left: calc(var(--binding-inset) - var(--stamp-size));
  transform: translateY(-50%);
  padding: 0;
  border: 1px solid #587662;
  border-radius: 3px 3px 9px 9px;
  background:
    linear-gradient(145deg, #34624b40, #06291e65),
    #173d2e var(--leather) center / 512px 512px;
  box-shadow:
    inset 0 1px 2px #071f17cc,
    inset 0 -1px 1px #96aa8360,
    0 1px 2px #001e18b3;
  pointer-events: none;
}
.ze-endcap:last-child {
  left: auto;
  right: calc(var(--binding-inset) - var(--stamp-size));
}
.ze-endcap::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed #8ba0858c;
  border-radius: 1px 1px 6px 6px;
  filter: drop-shadow(0 -0.7px 0 #001b16);
}
.ze-endcap img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.ze-logo {
  width: 280px;
  max-width: none;
  flex: none;
  margin: 0;
}
.ze-nav {
  display: flex;
  position: relative;
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0 0 0 var(--header-gutter);
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  font:
    400 20px/1.2 var(--ze-font-nav);
}
.ze-nav::before {
  content: "";
  width: 1px;
  height: var(--header-divider-height);
  flex: none;
  align-self: center;
  background: #b7a87788;
  margin-right: 10px;
}
.ze-nav > a,
.ze-nav > details > summary {
  position: relative;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 2px;
  font: inherit;
  text-shadow: 0 1px 1px #001c1833;
  color: #f2ecd9;
  text-decoration: none;
}
.ze-nav > a:hover,
.ze-nav > details > summary:hover {
  background: #b7bc8610;
}
.ze-nav > details:not(.ze-search-menu) > summary > svg {
  width: 14px;
  height: 14px;
  flex: none;
  stroke-width: 2.8;
  transform: translateY(1px);
}
.ze-nav > a[aria-current],
.ze-nav > details.is-current > summary,
.ze-nav > details[open] > summary {
  border-color: #984d407a;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 35% 0%, #bd563520, transparent 68%),
    radial-gradient(ellipse at 50% 110%, #ad422a12, transparent 65%),
    linear-gradient(90deg, #30091235, transparent 22% 78%, #30091235),
    linear-gradient(#681523df, #601220df),
    #691725 var(--leather) center / 512px 512px;
  background-blend-mode: normal, normal, normal, normal, luminosity;
  box-shadow:
    inset 0 1px 1px #cf765a40,
    inset 0 -2px 3px #31091270,
    inset 1px 0 2px #c989621a,
    0 1px 2px #02171180;
}
/* Recessed rivets and a softly tapered gold lower edge, on an independent layer. */
.ze-nav > a[aria-current]::before,
.ze-nav > details.is-current > summary::before,
.ze-nav > details[open] > summary::before {
  --tab-rivet: radial-gradient(
    circle at 40% 35%,
    #c4826f99 0 0.45px,
    #96534d88 0.8px,
    #35121dc4 1.5px,
    transparent 2.4px
  );
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    var(--tab-rivet), var(--tab-rivet), var(--tab-rivet), var(--tab-rivet),
    linear-gradient(
      90deg,
      transparent,
      #b39151 18%,
      #ebd59a 50%,
      #b39151 82%,
      transparent
    ),
    radial-gradient(ellipse at 50% 100%, #e4b66b28, transparent 72%);
  background-position:
    left 4px top 4px,
    right 4px top 4px,
    left 4px bottom 4px,
    right 4px bottom 4px,
    center bottom,
    center bottom;
  background-size:
    5px 5px,
    5px 5px,
    5px 5px,
    5px 5px,
    calc(100% - 10px) 1px,
    100% 4px;
  background-repeat: no-repeat;
}
.ze-nav > a[aria-current]::after,
.ze-nav > details.is-current > summary::after,
.ze-nav > details[open] > summary::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 16px;
  bottom: -8px;
  left: calc(50% - 6px);
  background: linear-gradient(135deg, #fff0c4, #e8cf91);
  border: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  /* site.js animates the individual `scale` and `translate` properties, which apply outside `transform`; centring
     with a transform would shift the diamond away from its origin, so it grows from off-centre. */
  transform: none;
  transform-origin: 50% 0%;
}
.ze-nav .ze-search-menu {
  margin-left: auto;
  padding-left: var(--header-gutter);
  border-left: 0;
  background: linear-gradient(#b7a87788, #b7a87788) left center / 1px
    var(--header-divider-height) no-repeat;
}
/* The magnifier's circle leaves ~3px of air inside its viewBox, so the leading
   inset is trimmed to keep icon and label optically centred in the tab. */
.ze-nav .ze-search-menu > summary {
  gap: 8px;
  padding: 11px 17px 11px 13px;
  min-width: 46px;
  justify-content: center;
}
.ze-nav .ze-search-menu > summary > svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.6;
  transform: translateY(0.5px);
}
.ze-nav .ze-mega {
  top: calc(100% + 22px);
  right: 0;
  background: #11372b var(--leather);
  border: 1px solid #a29465;
  box-shadow: 0 7px 14px #07190f35;
}
.ze-game-menu > summary {
  display: none;
}
@media (max-width: 1200px) and (min-width: 801px) {
  .ze-header {
    --header-gutter: 24px;
  }
  .ze-logo {
    width: 235px;
  }
  .ze-nav {
    gap: 2px;
    margin-left: var(--header-gutter);
    font-size: 19px;
  }
  .ze-nav::before {
    margin-right: 4px;
  }
  .ze-nav > a,
  .ze-nav > details > summary {
    padding-inline: 10px;
  }
  .ze-search-label {
    display: none;
  }
  .ze-nav .ze-search-menu > summary {
    padding-inline: 12px;
  }
}
@media (min-width: 801px) {
  .ze-menu-button {
    display: none;
  }
  .js .ze-nav[data-collapsed="true"] {
    display: flex;
  }
  .ze-game-menu:not([open]) > .ze-sidebar-inner {
    display: block;
  }
}
@media (min-width: 801px) and (max-width: 920px) {
  .ze-header {
    --header-gutter: 14px;
  }
  .ze-logo {
    width: clamp(190px, calc(100vw - 610px), 235px);
  }
  .ze-nav {
    font-size: 17px;
  }
  .ze-nav > a,
  .ze-nav > details > summary {
    padding-inline: 8px;
  }
}
@media (max-width: 800px) {
  .ze-header {
    height: auto;
    padding: 0 0 3px;
    border-radius: 0;
    box-shadow: inset 0 -1px #b07855;
  }
  .ze-header-inner {
    height: auto;
    min-height: 76px;
    padding: 16px 20px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ze-header-inner::before {
    clip-path: none;
    border-radius: 0;
    background: var(--panel-material);
    background-blend-mode: var(--panel-blend);
    box-shadow: inset 0 -1px #74917a55;
  }
  .ze-header-frame,
  .ze-header-gold,
  .ze-endcap,
  .ze-header-inner::after {
    display: none;
  }
  .ze-header-stitches {
    inset: auto 16px 4px;
    height: 1px;
    border: 0;
    border-bottom: 1px dashed #83967a70;
    border-radius: 0;
    filter: none;
  }
  .ze-logo {
    width: 230px;
    margin: 0;
  }
  .ze-menu-button {
    position: static;
    display: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    padding: 10px;
    background: none;
    color: #f2ecd9;
    box-shadow: none;
  }
  .js .ze-menu-button {
    display: flex;
  }
  .ze-menu-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ze-nav {
    flex: 1 0 100%;
    width: 100%;
    margin: 14px 0 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    font-size: 20px;
  }
  .js .ze-nav[data-collapsed="true"] {
    display: none;
  }
  .ze-nav::before {
    content: none;
  }
  .ze-nav > a,
  .ze-nav > details > summary {
    justify-content: center;
    white-space: normal;
  }
  .ze-nav .ze-search-menu {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ze-nav .ze-search-menu > summary {
    justify-content: center;
  }
  .ze-search-label {
    display: inline;
  }
  .ze-nav .ze-mega {
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    width: auto;
    max-height: 65svh;
  }
  .ze-game-menu > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 20px;
    font:
      600 19px/1.2 var(--ze-font-display);
    cursor: pointer;
  }
  .ze-game-menu > summary::-webkit-details-marker {
    display: none;
  }
  .ze-game-menu > summary svg {
    width: 16px;
    height: 16px;
  }
  .ze-game-menu[open] > summary svg {
    transform: rotate(180deg);
  }
  .ze-sidebar {
    padding: 0;
  }
  .ze-sidebar-inner {
    display: block;
    position: static;
    padding: 10px 20px 24px;
  }
  .ze-sidebar h2 {
    white-space: normal;
  }
  .ze-sidebar ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .ze-sidebar li {
    min-width: 0;
  }
  .ze-sidebar a {
    font-size: 14px;
    white-space: normal;
  }
}
@media (max-width: 370px) {
  .ze-logo {
    width: 205px;
  }
  .ze-header-inner {
    padding-inline: 16px;
  }
}

@media (min-width: 801px) {
  .ze-sidebar-inner {
    display: block;
  }
  .ze-sidebar ul {
    display: block;
    overflow: visible;
    white-space: normal;
  }
  .ze-sidebar h2 {
    white-space: normal;
  }
}
@media (min-width: 801px) and (max-width: 900px) {
  .ze-shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
}

/* Hover grazes the material; the oxblood tab continues to mean selected/open. */
.ze-nav > a:not([aria-current]):hover,
.ze-nav > details:not([open]):not(.is-current) > summary:hover {
  background: radial-gradient(ellipse at 50% 115%, #c6b87526, transparent 72%);
  box-shadow: inset 0 -1px 2px #051d1755;
  border-color: transparent;
}
.ze-nav > a:not([aria-current]):hover::before,
.ze-nav > details:not([open]):not(.is-current) > summary:hover::before {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d0b979aa, transparent);
  pointer-events: none;
}
/* The folded parchment index is contained by the header's inner binding. */
.ze-nav .ze-games-index {
  width: min(720px, calc(100vw - 40px));
  top: calc(100% + 23px);
  right: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.1fr);
  gap: 0 26px;
  padding: 25px 27px 14px;
  border: 1px solid #a28b59;
  border-radius: 2px 2px 6px 6px;
  color: #20382d;
  text-shadow: none;
  background:
    radial-gradient(ellipse at top, #fff9eb66, transparent 70%),
    #f3e2c7 image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) center / 600px;
  box-shadow:
    inset 0 0 0 3px #ead8ad,
    inset 0 0 0 4px #ae95665c,
    0 8px 15px #051a173b;
  overscroll-behavior: contain;
  scrollbar-color: #998057 #e9d8b6;
}
.ze-games-index h3 {
  margin: 0 0 14px;
  font:
    400 23px/1.15 var(--ze-font-nav);
  color: #20382d;
}
.ze-game-choices {
  border-right: 1px solid #bba5788c;
  padding-right: 23px;
}
.ze-game-options {
  display: grid;
  gap: 4px;
}
.ze-game-options button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  padding: 9px 11px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: #24372d;
  text-align: left;
  font:
    400 18px/1.2 var(--ze-font-nav);
}
.ze-game-options button > span {
  flex: 1;
}
.ze-game-options svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: #927b48;
}
.ze-game-options button[aria-expanded="true"] {
  background: linear-gradient(90deg, #b69a5b33, #b69a5b10);
  box-shadow: inset 3px 0 #792f3c;
  color: #6a2430;
}
.ze-game-options button:hover {
  background-color: #bca27026;
}
.ze-nav .ze-games-index a {
  color: #24372d;
  text-decoration: none;
  font:
    400 18px/1.25 var(--ze-font-nav);
}
.ze-nav .ze-games-index a:hover {
  color: #782e3b;
  background-color: #bca27020;
}
.ze-nav .ze-games-index :focus-visible {
  outline: 2px solid #234c6a;
  outline-offset: 2px;
}
.ze-nav .ze-menu-browse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 21px;
  border-top: 1px solid #bba5788c;
  padding-top: 16px;
}
.ze-menu-browse svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.ze-menu-art {
  display: block;
  width: 100%;
  height: 102px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 11px;
  mask-image: linear-gradient(transparent, #000 10% 86%, transparent);
}
.ze-menu-emblem {
  height: 102px;
  display: grid;
  place-items: center;
  color: #aa8a50;
}
.ze-menu-emblem svg {
  width: 48px;
  height: 48px;
}
.ze-game-preview ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ze-game-preview li {
  border-top: 1px solid #bba57866;
}
.ze-nav .ze-game-preview a {
  min-height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
}
.ze-game-preview a svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: #8e7043;
}
.ze-game-preview[hidden] {
  display: none;
}
.ze-menu-note {
  grid-column: 1 / -1;
  margin: 19px 0 0;
  border-top: 1px solid #bba57866;
  padding-top: 10px;
  color: #65573e;
  font:
    400 12px/1.45 var(--ze-font-body);
}
.ze-game-back {
  display: none;
}
html:not(.js) .ze-game-options {
  display: none;
}
html:not(.js) .ze-game-preview + .ze-game-preview {
  margin-top: 25px;
}
@media (max-width: 800px) {
  .ze-nav .ze-games-index {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
    gap: 0;
    max-height: calc(100svh - 220px);
    align-content: start;
  }
  .ze-game-choices {
    border-right: 0;
    padding: 0;
  }
  .ze-game-options button {
    min-height: 54px;
    font-size: 20px;
  }
  .js .ze-games-index[data-view="list"] .ze-game-previews,
  .js .ze-games-index[data-view="detail"] .ze-game-choices {
    display: none;
  }
  .js .ze-game-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid #bba57866;
    width: 100%;
    background: none;
    box-shadow: none;
    color: #24372d;
    font:
      400 18px/1.2 var(--ze-font-nav);
  }
  .ze-game-back svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
  }
  .ze-menu-art {
    height: 108px;
  }
  html:not(.js) .ze-game-previews {
    margin-top: 22px;
  }
}
/* Anchor flyouts to the whole header, so neither edge escapes at tablet widths. */
.ze-nav {
  position: static;
}
.ze-nav .ze-mega {
  top: calc(100% - 3px);
  right: var(--binding-inset);
}
.ze-nav .ze-games-index {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
@media (max-width: 800px) {
  .ze-nav .ze-mega {
    left: 20px;
    right: 20px;
    width: auto;
    top: calc(100% - 3px);
  }
  .ze-nav .ze-games-index {
    transform: none;
  }
}

/* NAV8 fidelity: stamps share the binding's upper and lower datum. */
.ze-endcap {
  top: var(--panel-top);
  transform: none;
  border: 0;
  border-radius: 4px 4px 7px 7px;
  background: var(--panel-material);
  background-blend-mode: var(--panel-blend);
  box-shadow: var(--panel-edge);
  filter: var(--panel-shadow);
}
.ze-endcap::before {
  inset: calc(var(--stitch-inset) + 1px);
  border-color: var(--stitch-colour);
  filter: drop-shadow(0 -0.8px 0 #00170fe6);
  border-radius: 1px 1px 5px 5px;
}
.ze-endcap img {
  width: 76%;
  height: 76%;
  filter: drop-shadow(0 0.5px 0 #8fa78c55);
}
/* Recessed joins between the three opaque leather panels. */
@media (min-width: 801px) {
  .ze-endcap::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 1px;
    bottom: 2px;
    right: -2px;
    width: 4px;
    background: linear-gradient(
      90deg,
      #719d8055,
      #05281ce6 25%,
      #00160ff2 50%,
      #173f2fe6 75%,
      #87ae9166
    );
    mask-image: linear-gradient(
      transparent,
      #000 3px,
      #000 calc(100% - 3px),
      transparent
    );
    pointer-events: none;
  }
  .ze-endcap:last-child::after {
    right: auto;
    left: -2px;
  }
}
/* Parchment index A: rolled brass edge, separate wear layer, cast corner caps. As in the search panel, the rows sit
   in from the frame's vertical borders by --ze-region-inset plus the selection tab in front of them. */
.ze-nav .ze-games-index {
  --ze-region-inset: 16px;
  --ze-tab-width: 17px;
  --ze-games-pad-x: calc(var(--ze-region-inset) + var(--ze-tab-width) + 3px);
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.08fr);
  gap: 0 27px;
  padding: 28px var(--ze-games-pad-x) 17px;
}
.ze-nav .ze-games-index,
.ze-nav .ze-search {
  border: 1px solid #796030;
  border-radius: 5px 5px 9px 9px;
  background: #f3e2c7 image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) center / 600px;
  box-shadow:
    inset 0 1px 0 1px #fff0c8,
    inset 0 0 0 3px #bca16b,
    inset 0 0 0 4px #f5e5bd,
    inset 0 -7px 12px #ac843129,
    0 2px 2px #46341d66,
    0 10px 18px #10251a40;
}
.ze-paper-frame {
  position: absolute;
  z-index: 2;
  inset: 6px;
  border: 1px solid #a98c5466;
  border-radius: 1px 1px 4px 4px;
  pointer-events: none;
  box-shadow: 0 1px #fff7d7a0;
}
.ze-paper-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  max-width: none;
  filter: drop-shadow(0 0.7px 0.6px #57401940);
}
.ze-paper-corner.is-top-left {
  top: -7px;
  left: -7px;
}
.ze-paper-corner.is-top-right {
  top: -7px;
  right: -7px;
  transform: scaleX(-1);
}
.ze-paper-corner.is-bottom-left {
  bottom: -7px;
  left: -7px;
  transform: scaleY(-1);
}
.ze-paper-corner.is-bottom-right {
  bottom: -7px;
  right: -7px;
  transform: scale(-1);
}
.ze-game-choices {
  position: relative;
  z-index: 3;
  padding-right: 25px;
  border-color: #aa8d557d;
}
/* The mock starts directly with the game index; retain its accessible heading. */
.ze-game-choices > h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ze-game-options {
  gap: 8px;
}
.ze-game-options button {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  padding: 10px 12px 10px 4px;
  gap: 15px;
  font-size: 20px;
}
.ze-game-options button > svg:first-of-type {
  width: 27px;
  height: 27px;
  color: #393b28;
}
.ze-game-options button > svg:last-child {
  display: none;
}
.ze-game-options button[aria-expanded="true"] {
  background: none;
  box-shadow: none;
  color: #722b31;
}
.ze-game-options button[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -6px 0 -8px;
  background:
    linear-gradient(0deg, #a1844214, transparent 12% 90%, #fff3cf24),
    linear-gradient(100deg, #bfa36616, #c4a75f20 72%, #b5975020);
  mask-image: linear-gradient(100deg, #000 0 80%, transparent 98%);
  box-shadow:
    inset 0 1px #a78c4f33,
    inset 0 -1px #aa8c4840;
}
.ze-game-options button > .ze-selection-tab {
  display: none;
  position: absolute;
  left: calc(var(--ze-region-inset) - var(--ze-games-pad-x));
  top: 5px;
  bottom: 5px;
  width: var(--ze-tab-width);
  flex: none;
  background: linear-gradient(#e2c38a, #967042 28%, #57381e 80%, #e0b46c);
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.ze-game-options button[aria-expanded="true"] > .ze-selection-tab {
  display: block;
}
.ze-selection-tab::after {
  content: "";
  position: absolute;
  inset: 1px 1px 1px 0;
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
  background:
    radial-gradient(
      circle at 54% 50%,
      #cca25d 0 1px,
      #3d1920 1.3px 2px,
      transparent 2.6px
    ),
    linear-gradient(90deg, #36111980, transparent 28% 75%, #31131988),
    linear-gradient(#bc6a5933, transparent 20% 75%, #280d2055),
    #762a35 image-set(url("https://assets.zeldaelements.net/assets/ze/header-fine-leather-768.3dcec86f92cc.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/header-fine-leather-768.90e67a8f0c14.webp") 1x type("image/webp")) center / 512px;
  background-blend-mode: normal, normal, normal, luminosity;
  box-shadow:
    inset 0 1px #c9946170,
    inset 0 -1px #38151c;
}
.ze-game-bird {
  width: 27px;
  height: 27px;
  object-fit: contain;
  flex: none;
}
.ze-game-preview > h3 {
  font:
    600 25px/1.15 var(--ze-font-display);
  font-variant-caps: small-caps;
  letter-spacing: 0.025em;
  margin: 0 0 13px;
}
.ze-menu-art {
  height: 125px;
  margin-bottom: 12px;
}
.ze-menu-art--oracle {
  max-width: 360px;
  height: auto;
  aspect-ratio: 2.4;
  object-fit: contain;
  mask-image: none;
}
.ze-game-preview > .ze-game-intro {
  margin: 0 0 17px;
  font:
    400 18px/1.35 var(--ze-font-nav);
  color: #363829;
  max-width: 30ch;
}
.ze-game-preview li {
  border-top: 0;
}
.ze-game-preview ul {
  border-top: 1px solid #a98b5870;
  padding-top: 7px;
}
.ze-nav .ze-game-preview a {
  justify-content: flex-start;
  padding: 6px 0;
  gap: 13px;
  min-height: 35px;
  font-size: 19px;
}
.ze-game-preview a > span {
  flex: 1;
}
.ze-game-preview a .ze-menu-link-icon {
  width: 20px;
  height: 20px;
  color: #393b28;
}
.ze-game-preview a > svg:last-child {
  width: 12px;
  opacity: 0.65;
}
.ze-nav .ze-menu-browse {
  position: relative;
  margin-top: 43px;
  border-top: 0;
  padding: 12px;
  min-height: 48px;
  font-size: 18px;
}
.ze-nav .ze-menu-browse::before {
  content: "";
  position: absolute;
  inset: -14px 0 auto;
  height: 1px;
  background: #bba5788c;
  pointer-events: none;
}
.ze-menu-note {
  border-top: 0;
  margin-top: 19px;
  padding-top: 0;
  font-size: 11px;
  color: #6a593d;
}
@media (max-width: 800px) {
  .ze-nav .ze-games-index {
    grid-template-columns: minmax(0, 1fr);
    width: min(420px, calc(100vw - 40px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 25px 25px 17px;
  }
  .ze-game-choices {
    padding-right: 0;
    border: 0;
  }
  .ze-game-options button {
    min-height: 54px;
  }
  .ze-game-options button > svg:last-child {
    display: block;
    width: 12px;
    height: 12px;
    color: #82693e;
  }
  .ze-menu-art {
    height: 116px;
  }
  .ze-menu-art--oracle {
    height: auto;
  }
  .ze-nav .ze-game-preview a {
    min-height: 44px;
  }
}
/* Mobile index A: one leather toolbar, with the parchment directly below it. */
.ze-mobile-search,
.ze-mobile-site-links {
  display: none;
}
/* Compact toolbar geometry. The bird stamp and the stitched panel share one top and bottom line, as on desktop,
   and the logo and both icon glyphs sit --toolbar-air in from the stitching: a 22px icon in a 44px button leaves
   14.7px between the button edge and its glyph, so the logo gets the same margin and butts onto the search button. */
@media (max-width: 800px) {
  .ze-header-inner {
    --toolbar-inset: 6px;
    --toolbar-stamp: 52px;
    --toolbar-air: 15px;
    --toolbar-logo: 220px;
    display: grid;
    grid-template-columns: var(--toolbar-stamp) minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 0;
    min-height: calc(var(--toolbar-stamp) + 2 * var(--toolbar-inset));
    padding: var(--toolbar-inset);
  }
  .ze-header-inner > .ze-endcap:not(:last-child) {
    display: grid;
    position: relative;
    inset: auto;
    transform: none;
    width: var(--toolbar-stamp);
    height: var(--toolbar-stamp);
    grid-column: 1;
    grid-row: 1;
    border-radius: 2px 2px 5px 5px;
  }
  .ze-header-inner > .ze-endcap::before {
    inset: 4px;
    border-radius: 1px 1px 3px 3px;
  }
  .ze-logo {
    display: flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: calc(var(--toolbar-logo) + var(--toolbar-inset) + var(--toolbar-air));
    min-height: 44px;
    padding: 0 0 0 calc(var(--toolbar-inset) + var(--toolbar-air));
  }
  .ze-logo img {
    width: 100%;
  }
  .ze-header-stitches {
    inset: var(--toolbar-inset) var(--toolbar-inset) var(--toolbar-inset)
      calc(2 * var(--toolbar-inset) + var(--toolbar-stamp));
    height: auto;
    border: 1px dashed #83967a55;
    border-radius: 2px 2px 5px 5px;
  }
  .js .ze-mobile-search,
  .js .ze-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #f2ecd9;
    grid-row: 1;
  }
  .ze-mobile-search {
    grid-column: 3;
  }
  .ze-menu-button {
    grid-column: 4;
  }
  .ze-mobile-search svg,
  .ze-menu-button svg {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 359px) {
  .ze-header-inner {
    --toolbar-stamp: 44px;
  }
}
/* Tablets: a taller toolbar with the desktop logo size and a stamp at each end. */
@media (min-width: 600px) and (max-width: 800px) {
  .ze-header-inner {
    --toolbar-inset: 8px;
    --toolbar-stamp: 60px;
    --toolbar-logo: 235px;
    grid-template-columns:
      var(--toolbar-stamp) minmax(0, 1fr) 44px 44px
      calc(var(--toolbar-inset) + var(--toolbar-stamp));
  }
  .ze-header-inner > .ze-endcap:last-child {
    display: grid;
    position: relative;
    inset: auto;
    width: var(--toolbar-stamp);
    height: var(--toolbar-stamp);
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    border-radius: 2px 2px 5px 5px;
  }
  .ze-header-stitches {
    right: calc(2 * var(--toolbar-inset) + var(--toolbar-stamp));
  }
}
@media (max-width: 800px) {
  .js .ze-mobile-search[aria-expanded="true"],
  .js .ze-menu-button[aria-expanded="true"] {
    color: #e8cf91;
  }
  .js .ze-nav,
  .js .ze-nav > details {
    display: contents;
  }
  .js .ze-nav[data-collapsed="true"],
  .js .ze-nav > a,
  .js .ze-nav > details > summary,
  .js .ze-nav > details:not([open]) > .ze-mega {
    display: none;
  }
  /* As in the search panel, the index never scrolls as a whole: the game list, or the open game's links under the
     pinned back button, scroll inside the frame, and the site links and note stay put below. The regions sit
     --ze-region-inset in from both sides, clear of the frame's vertical borders and its corner brackets, with the
     selection tab inside them in front of the rows. */
  .ze-nav .ze-games-index {
    --ze-region-inset: 16px;
    --ze-tab-width: 15px;
    --ze-games-pad-x: calc(var(--ze-region-inset) + var(--ze-tab-width) + 3px);
    top: calc(100% - 3px);
    width: min(420px, calc(100vw - 16px));
    max-height: calc(100svh - var(--toolbar-stamp) - 2 * var(--toolbar-inset) - 16px);
    padding: 23px var(--ze-games-pad-x) 20px;
    display: flex;
    flex-direction: column;
    overflow: clip;
  }
  .ze-nav .ze-games-index > * {
    flex: none;
  }
  .js .ze-nav .ze-games-index .ze-game-choices,
  .js .ze-nav .ze-games-index .ze-game-preview:not([hidden]),
  html:not(.js) .ze-nav .ze-games-index .ze-game-previews {
    flex: 0 1 auto;
    min-height: 88px;
    margin: calc(-1 * var(--ze-fade-top)) calc(var(--ze-region-inset) - var(--ze-games-pad-x))
      calc(-1 * var(--ze-fade-bottom));
    padding-inline: calc(var(--ze-games-pad-x) - var(--ze-region-inset));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #998057 #e9d8b6;
  }
  /* Edges: the game list runs from the frame line (16px above the panel's content) to the site links' rule (19px
     below it); an open game from the back button's rule (12px) to the frame line (13px); without JS, the stacked
     previews from under "All games" (22px) to the site links' rule. */
  .js .ze-nav .ze-games-index .ze-game-choices {
    --ze-fade-top: 16px;
    --ze-fade-bottom: 19px;
  }
  .js .ze-nav .ze-games-index .ze-game-preview {
    --ze-fade-top: 12px;
    --ze-fade-bottom: 13px;
  }
  html:not(.js) .ze-nav .ze-games-index .ze-game-previews {
    --ze-fade-top: 22px;
    --ze-fade-bottom: 19px;
    min-height: 0;
    margin-top: 0;
  }
  .js .ze-nav .ze-games-index[data-view="detail"] .ze-game-previews {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
  }
  .ze-game-preview > * {
    flex: none;
  }
  .ze-nav .ze-search {
    left: 8px;
    right: 8px;
    top: calc(100% - 3px);
    max-height: calc(100svh - var(--toolbar-stamp) - 2 * var(--toolbar-inset) - 16px);
  }
  .ze-mobile-site-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #a98b5855;
    padding-top: 10px;
    margin-top: 19px;
  }
  .ze-nav .ze-mobile-site-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 18px;
  }
  .ze-games-index[data-view="detail"] .ze-mobile-site-links {
    display: none;
  }
  .ze-game-back {
    margin-bottom: 10px;
  }
  .ze-game-preview > .ze-menu-art {
    margin-top: 0;
  }
  /* Put the vista above the title in the compact detail, as in the mobile mock. */
  .ze-game-preview:not([hidden]) {
    display: flex;
    flex-direction: column;
  }
  .ze-game-preview > .ze-menu-art,
  .ze-game-preview > .ze-menu-emblem {
    order: -1;
  }
  .ze-game-preview > .ze-game-intro {
    font-size: 17px;
    margin-bottom: 13px;
  }
  html:not(.js) .ze-nav {
    grid-column: 1 / -1;
  }
}
/* Search index: the games index's parchment, rows and selection tab, as a combobox. */
/* The panel itself never scrolls: its frame and stain are drawn to its edges, so only the results list scrolls,
   clipped inside them. */
.ze-nav .ze-search {
  --ze-region-inset: 16px;
  --ze-tab-width: 17px;
  --ze-search-pad-x: calc(var(--ze-region-inset) + var(--ze-tab-width) + 3px);
  display: flex;
  flex-direction: column;
  width: min(452px, calc(100vw - 40px));
  padding: 25px var(--ze-search-pad-x) 15px;
  /* clip, not hidden: a hidden overflow can still be scrolled by focus or script, which would move the frame. */
  overflow: clip;
  color: #20382d;
  text-shadow: none;
}
.ze-search-title,
.ze-search-field,
.ze-nav .ze-search-results,
.ze-search-empty,
.ze-nav .ze-search-browse,
.ze-search-hint {
  position: relative;
  z-index: 3;
}
.ze-nav .ze-search-title {
  display: block;
  margin: 0 0 13px;
  font:
    600 25px/1.15 var(--ze-font-display);
  font-variant-caps: small-caps;
  letter-spacing: 0.025em;
  color: #20382d;
}
.ze-search-field {
  display: flex;
  align-items: center;
}
.ze-search-field > svg {
  position: absolute;
  left: 14px;
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
  color: #5d5237;
  pointer-events: none;
}
.ze-nav .ze-search input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 43px;
  border: 1px solid #a98b58;
  border-radius: 3px;
  background: linear-gradient(#fffaf0b8, #fbf1dccc);
  box-shadow:
    inset 0 1px 2px #6e552a2e,
    0 1px 0 #fff7dc;
  color: #24372d;
  font:
    400 19px/1.2 var(--ze-font-nav);
}
.ze-nav .ze-search input::placeholder {
  color: #74674e;
  opacity: 1;
}
.ze-nav .ze-search input::-webkit-search-cancel-button {
  appearance: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
  background: #6a593d;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 5 14 14M5 19 19 5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.ze-nav .ze-search :focus-visible {
  outline: 2px solid #234c6a;
  outline-offset: 2px;
}
.ze-nav .ze-search input:focus-visible {
  border-color: #234c6a;
}
/* The list sits --ze-region-inset in from both sides, so neither its fades nor the selection tab (inside it, in
   front of the rows) reach the frame's vertical borders, and its scrollbar sits inside the frame. Its top edge is the
   divider under the field; its bottom edge reaches down to the rule above "All games". */
.ze-search-field::after {
  content: "";
  position: absolute;
  inset: auto 0 -17px;
  height: 1px;
  background: #a98b5870;
}
.ze-nav .ze-search-results {
  --ze-fade-top: 9px;
  --ze-fade-bottom: 15px;
  display: grid;
  align-content: start;
  gap: 2px;
  flex: 0 1 auto;
  margin: 17px calc(var(--ze-region-inset) - var(--ze-search-pad-x)) calc(-1 * var(--ze-fade-bottom));
  padding-inline: calc(var(--ze-search-pad-x) - var(--ze-region-inset));
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #998057 #e9d8b6;
}
.ze-nav .ze-search-results:has(> li:not([hidden])) {
  min-height: 92px;
}
/* The paper panels' scrolling regions (search results; the phone games index's list and detail). Each region's edges
   sit on a rule or the frame line, and the fade covers only the padding it adds there (--ze-fade-top/bottom, taken
   back out of its margins so the layout is unchanged): at rest, or scrolled to either end, nothing is faded or cut,
   and while scrolling, rows fade out before they reach the edge rather than being sliced by it. */
.ze-nav .ze-search-results,
.js .ze-nav .ze-games-index .ze-game-choices,
.js .ze-nav .ze-games-index .ze-game-preview,
html:not(.js) .ze-nav .ze-games-index .ze-game-previews {
  padding-top: var(--ze-fade-top);
  padding-bottom: var(--ze-fade-bottom);
  scroll-padding-block: var(--ze-fade-top) var(--ze-fade-bottom);
  mask-image: linear-gradient(
    transparent calc(0.3 * var(--ze-fade-top)),
    #000 var(--ze-fade-top),
    #000 calc(100% - var(--ze-fade-bottom)),
    transparent calc(100% - 0.3 * var(--ze-fade-bottom))
  );
}
/* On wider screens the games index lays out in two columns and does not scroll inside; a mask would clip its
   selection tab. */
@media (min-width: 801px) {
  .js .ze-nav .ze-games-index .ze-game-choices,
  .js .ze-nav .ze-games-index .ze-game-preview,
  html:not(.js) .ze-nav .ze-games-index .ze-game-previews {
    padding-block: 0;
    mask-image: none;
  }
}
.ze-nav .ze-search-results a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 7px 10px 7px 4px;
  color: #24372d;
  text-decoration: none;
  font:
    400 19px/1.25 var(--ze-font-nav);
}
.ze-nav .ze-search-results a > span:last-child {
  flex: 1;
}
.ze-search-results .ze-menu-link-icon {
  width: 21px;
  height: 21px;
  color: #393b28;
}
.ze-nav .ze-search-results a:hover,
.ze-nav .ze-search-results a[aria-selected="true"] {
  color: #722b31;
}
.ze-search-results a:hover::after,
.ze-search-results a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -6px 0 -8px;
  background:
    linear-gradient(0deg, #a1844214, transparent 12% 90%, #fff3cf24),
    linear-gradient(100deg, #bfa36616, #c4a75f20 72%, #b5975020);
  mask-image: linear-gradient(100deg, #000 0 80%, transparent 98%);
  box-shadow:
    inset 0 1px #a78c4f33,
    inset 0 -1px #aa8c4840;
}
.ze-search-results .ze-selection-tab {
  display: none;
  position: absolute;
  left: calc(var(--ze-region-inset) - var(--ze-search-pad-x));
  top: 5px;
  bottom: 5px;
  width: var(--ze-tab-width);
  background: linear-gradient(#e2c38a, #967042 28%, #57381e 80%, #e0b46c);
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}
.ze-search-results a[aria-selected="true"] > .ze-selection-tab {
  display: block;
}
.ze-search-empty {
  margin: 14px 0 0;
  font:
    italic 400 18px/1.4 var(--ze-font-nav);
  color: #5f5139;
}
.ze-nav .ze-search-browse {
  margin-top: 29px;
  padding: 12px 4px;
  color: #24372d;
  text-decoration: none;
  font:
    400 18px/1.25 var(--ze-font-nav);
}
.ze-nav .ze-search-browse:hover {
  color: #782e3b;
  background-color: #bca27020;
}
.ze-search-hint {
  margin-top: 10px;
}
html:not(.js) .ze-search-hint {
  display: none;
}
/* A phone on its side has no room for the search title (kept as the field's label) or the keyboard hint beside the
   results, and the games list only fits (rather than scrolling) if the index is wide enough to keep each game on one
   line. */
@media (max-width: 800px) and (max-height: 500px) {
  .ze-nav .ze-search .ze-search-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ze-search-hint {
    display: none;
  }
  .ze-nav .ze-search-results:has(> li:not([hidden])) {
    min-height: 70px;
  }
  .ze-nav .ze-games-index {
    width: min(560px, calc(100vw - 16px));
    max-height: calc(100svh - var(--toolbar-stamp) - 2 * var(--toolbar-inset) - 5px);
  }
  .ze-nav .ze-games-index .ze-game-options button {
    min-height: 50px;
  }
  .ze-nav .ze-games-index .ze-menu-browse {
    margin-top: 29px;
  }
}
@media (max-width: 800px) {
  .ze-nav .ze-search {
    --ze-tab-width: 15px;
    width: auto;
    padding: 22px var(--ze-search-pad-x) 16px;
  }
  .ze-nav .ze-search-title {
    font-size: 23px;
  }
}

/* The bare header (homepage, archive viewer): the binding and logo, with no navigation. */
.ze-header-inner--bare {
  justify-content: space-between;
}
.ze-header-inner--centred {
  justify-content: center;
}
.ze-header-aside {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.ze-header-aside > a,
.ze-header-aside > button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #f2ecd9;
  font: 400 19px/1.2 var(--ze-font-nav);
  text-decoration: none;
  cursor: pointer;
}
.ze-header-aside > a:hover,
.ze-header-aside > button:hover,
.ze-header-aside > button[aria-expanded="true"] {
  color: #fff6d6;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.ze-header-aside svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}
@media (max-width: 800px) {
  .ze-header-inner--bare {
    flex-wrap: nowrap;
  }
  .ze-header-inner--centred {
    justify-content: center;
  }
  .ze-header-inner--bare {
    grid-template-columns: var(--toolbar-stamp) minmax(0, 1fr) auto;
  }
  .ze-header-aside {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }
  .ze-header-aside > a,
  .ze-header-aside > button {
    font-size: 17px;
    gap: 6px;
    padding: 8px var(--toolbar-air) 8px 8px;
    white-space: nowrap;
  }
  .ze-header-aside-more {
    display: none;
  }
  .ze-header-inner--centred .ze-logo {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: min(
      var(--toolbar-logo),
      100% - 2 * (var(--toolbar-stamp) + var(--toolbar-inset) + var(--toolbar-air))
    );
    padding: 0;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .ze-header-inner--bare {
    grid-template-columns:
      var(--toolbar-stamp) minmax(0, 1fr) auto
      calc(var(--toolbar-inset) + var(--toolbar-stamp));
  }
  .ze-header-inner--bare > .ze-endcap:last-child {
    grid-column: 4;
  }
}