/* Full-screen entry into the interactive glossary. */
.glossary-promo{
  position:relative;
  display:grid;
  width:100%;
  height:calc(100svh - 72px);
  min-height:calc(100svh - 72px);
  max-height:calc(100svh - 72px);
  place-items:center start;
  padding:clamp(28px,6svh,72px) 7vw;
  overflow:hidden;
  isolation:isolate;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#091018;
}
.glossary-promo::before{
  position:absolute;
  z-index:3;
  inset:clamp(8px,1vw,16px);
  border:1px solid rgba(204,170,107,.48);
  content:"";
  pointer-events:none;
}
.glossary-promo-art,.glossary-promo-shade{position:absolute;inset:0}
.glossary-promo-art{z-index:0}
.glossary-promo-art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:saturate(.9) brightness(.92)}
.glossary-promo-shade{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(4,10,16,.03) 0%,rgba(5,12,20,.08) 27%,rgba(5,12,20,.28) 58%,rgba(5,10,16,.58) 100%),
    linear-gradient(0deg,rgba(4,9,14,.5) 0%,transparent 28%,rgba(4,9,14,.06) 72%,rgba(4,9,14,.18) 100%);
}
.glossary-promo-copy{
  position:relative;
  z-index:4;
  width:min(620px,52vw);
  padding:clamp(20px,3vw,38px) 0;
}
.glossary-promo h2{
  max-width:10ch;
  margin:0 0 clamp(14px,2svh,22px);
  color:#f0e9dd;
  font:400 clamp(54px,min(7vw,10svh),102px)/.94 var(--display,Georgia,serif);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.glossary-promo p{max-width:48ch;margin:0 0 clamp(22px,3.4svh,38px);color:#b7bec2;font:400 var(--site-text-body,16px)/1.65 Arial,sans-serif;text-wrap:pretty}
.glossary-promo-button{
  position:relative;
  display:inline-flex;
  width:min(310px,100%);
  height:62px;
  align-items:center;
  justify-content:center;
  gap:12px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(91,58,40,.26),rgba(39,25,19,.34)),url('/assets/ui/game-button-texture.webp') center/cover;
  color:#e3c48e;
  font:400 var(--site-text-button,15px)/1 Arial,sans-serif;
  letter-spacing:.015em;
  text-decoration:none;
  -webkit-mask:url('/assets/ui/game-button-shape.svg') center/100% 100% no-repeat;
  mask:url('/assets/ui/game-button-shape.svg') center/100% 100% no-repeat;
  transition:filter 180ms ease,transform 130ms cubic-bezier(.23,1,.32,1);
}
.glossary-promo-button::before,.glossary-promo-button::after{position:absolute;z-index:2;inset:0;content:"";pointer-events:none;-webkit-mask:url('/assets/ui/game-button-frame.svg') center/100% 100% no-repeat;mask:url('/assets/ui/game-button-frame.svg') center/100% 100% no-repeat}
.glossary-promo-button::before{background:linear-gradient(180deg,#f5d99e,#b87d3e 54%,#ecc176)}
.glossary-promo-button::after{background:linear-gradient(105deg,transparent 10%,rgba(255,220,134,.12) 35%,#fff5bd 50%,#ffc759 60%,transparent 86%);background-position:-75% 0;background-repeat:no-repeat;background-size:38% 100%;animation:gameButtonFrameShimmer 3.8s linear infinite}
.glossary-promo-button span{color:#e4bd75;font-size:20px;line-height:.7}
.glossary-promo-button:focus-visible{outline:2px solid #e2bb76;outline-offset:5px}
.glossary-promo-button:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){.glossary-promo-button:hover{filter:brightness(1.1)}}
@supports(animation-timeline:view()){
  .glossary-promo-copy{animation:glossaryPromoReveal both cubic-bezier(.23,1,.32,1);animation-timeline:view();animation-range:entry 10% cover 34%}
  @keyframes glossaryPromoReveal{from{opacity:.35;filter:blur(3px);transform:translateY(20px)}to{opacity:1;filter:none;transform:none}}
}
@media(max-width:767px){
  .glossary-promo{
    width:100%;
    height:100svh;
    min-height:100svh;
    max-height:100svh;
    align-items:end;
    padding:92px 20px 34px;
  }
  .glossary-promo::before{inset:8px}
  .glossary-promo-art img{object-position:center 42%;filter:saturate(.9) brightness(.92)}
  .glossary-promo-shade{background:linear-gradient(90deg,rgba(4,10,16,.07),rgba(5,11,18,.34) 48%,rgba(4,9,15,.68)),linear-gradient(0deg,rgba(4,9,14,.52),transparent 42%,rgba(4,9,14,.14))}
  .glossary-promo-copy{width:100%;padding:20px 0 2px}
  .glossary-promo h2{max-width:100%;font-size:clamp(42px,13vw,56px)}
  .glossary-promo p{max-width:34ch;margin-bottom:22px;font-size:clamp(13px,3.7vw,16px);line-height:1.55}
  .glossary-promo-button{display:flex;width:min(292px,100%);height:60px;margin-inline:auto}
}
@media(max-width:360px) and (max-height:700px){
  .glossary-promo{padding:80px 16px 22px}
  .glossary-promo-copy{padding-top:12px}
  .glossary-promo h2{margin-bottom:9px;font-size:43px}
  .glossary-promo p{margin-bottom:14px;font-size:13px;line-height:1.42}
  .glossary-promo-button{height:52px}
}
@media(prefers-reduced-motion:reduce){.glossary-promo-copy{animation:none!important}.glossary-promo-button,.glossary-promo-button::after{animation:none;transition:none}}
@media(min-width:1921px) and (min-height:1081px){body .glossary-promo{width:calc(100vw / var(--desktop-ui-scale))!important;height:calc(100svh / var(--desktop-ui-scale) - var(--site-header-height))!important;min-height:calc(100svh / var(--desktop-ui-scale) - var(--site-header-height))!important;max-height:calc(100svh / var(--desktop-ui-scale) - var(--site-header-height))!important}}