/* ReyBox patch: static video card + smoother horizontal minigames. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

.header .logoImg{
  height:50px;
}

.hero{
  min-height:calc(100svh - 112px);
  display:flex;
  align-items:center;
  padding:clamp(44px,6.5svh,78px) 0 clamp(86px,10svh,120px);
}

.heroInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-block:auto;
}

.heroTitle{
  margin-top:clamp(14px,2svh,22px);
}

.heroCopy{
  margin-top:clamp(16px,2.4svh,22px);
}

.hero .ctaRow{
  margin-top:clamp(22px,3svh,30px);
}

.hero + .videoScroll{
  margin-top:clamp(-96px,-7vw,-56px);
}

.footer{
  background:#0e203f;
  padding-top:clamp(28px,4.5vw,58px);
}

.footerBeam{
  font-size:clamp(5.8rem,27vw,21rem);
  line-height:.74;
  margin:0 0 clamp(26px,4.5vw,64px);
}

.footerGrid{
  padding-top:0;
}

.videoScroll{
  position:relative;
  z-index:7;
  height:auto;
  min-height:0;
  padding:0 0 clamp(46px,7vw,86px);
  overflow:visible;
  background:linear-gradient(180deg, rgba(244,102,30,0) 0%, var(--cream) 42%, var(--cream) 100%);
  isolation:isolate;
}

.videoSticky{
  position:relative;
  top:auto;
  width:100%;
  height:auto;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0 clamp(16px,5vw,40px);
  overflow:visible;
  perspective:none;
  background:transparent;
}

.videoSticky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(80% 64% at 50% 44%, rgba(255,199,44,.22), rgba(255,199,44,0) 62%);
  pointer-events:none;
}

.laptopShell{
  position:relative;
  width:min(1040px,90vw);
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:#050b14;
  box-shadow:0 50px 90px -40px rgba(7,16,30,.85), 0 0 0 2px rgba(255,255,255,.04) inset;
  transform-origin:center center;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  contain:layout paint;
}

.laptopShell video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  background:#000;
  display:block;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.videoDramaText{
  position:absolute;
  inset:50% auto auto 50%;
  z-index:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  user-select:none;
  text-align:center;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.1rem,6vw,6.5rem);
  line-height:.88;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
  text-shadow:0 18px 44px rgba(0,0,0,.42);
  mix-blend-mode:screen;
  letter-spacing:0;
  white-space:nowrap;
}

.browserBar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  background:linear-gradient(180deg, rgba(20,35,60,.96), rgba(20,35,60,.82));
  border-bottom:1px solid rgba(255,255,255,.08);
  transform-origin:top center;
  pointer-events:none;
}

.browserBar strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.videoScroll video{
  object-fit:cover;
}

@media (max-width:900px){
  .laptopShell{
    width:min(920px,92vw);
  }
}

@media (max-width:560px){
  .hero{
    min-height:calc(100svh - 100px);
    padding:clamp(38px,7svh,56px) 0 clamp(86px,10svh,112px);
  }

  .heroPills{
    display:none;
  }

  .heroTitle{
    width:100%;
    max-width:none;
    font-size:clamp(4.6rem,21vw,6rem);
    line-height:.86;
  }

  .heroTitle span{white-space:nowrap}

  .heroCopy{
    max-width:31ch;
  }

  .hero .ctaRow{
    gap:10px;
  }

  .videoScroll{
    margin-top:-74px;
    padding-bottom:clamp(38px,8vw,64px);
  }

  .videoSticky{
    padding-inline:14px;
  }

  .laptopShell{
    width:min(76vw,340px);
    aspect-ratio:9 / 16;
    border-radius:14px;
  }

  .header .logoImg{
    height:44px;
  }

  .videoDramaText{
    font-size:clamp(1.8rem,11vw,3rem);
  }

  .browserBar{
    min-height:34px;
    padding:9px 12px;
  }

  .browserBar strong{
    font-size:.72rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .videoScroll{
    height:auto;
    min-height:0;
    overflow:visible;
  }

  .videoSticky{
    height:auto;
    min-height:0;
    overflow:visible;
  }

  .laptopShell{
    width:min(920px,92vw);
    transform:none !important;
    border-radius:16px;
    will-change:auto;
  }

  .browserBar{
    transform:none !important;
    opacity:1 !important;
    will-change:auto;
  }

  .videoDramaText{
    opacity:.32 !important;
    transform:translate(-50%,-50%) !important;
    will-change:auto;
  }
}

/* Shared pre-footer artwork, assistant and lightweight cookie notice. */
.topbarTrack.marqueeTrack{gap:0;padding:0;animation:reyboxMarquee 30s linear infinite}
.marqueeGroup{display:flex;align-items:center;flex:none;min-width:max-content;padding-block:9px}
.marqueeGroup span{padding-inline:24px}
@keyframes reyboxMarquee{to{transform:translate3d(-50%,0,0)}}
.prefooterArt{
  position:relative;
  z-index:8;
  width:100%;
  margin-top:0;
  overflow:hidden;
  background:var(--prefooter-bg,#faf3e4);
  line-height:0;
}
.prefooterArt img{width:100%;height:auto;min-height:190px;object-fit:cover;object-position:center bottom}
.commerceGateBody main{padding-bottom:80px;margin-bottom:-98px;background:#102a4c}
body:not(.commerceGateBody) main > section:last-child{padding-bottom:80px;margin-bottom:-98px}
.homePage main > .section{content-visibility:auto;contain-intrinsic-size:auto 820px}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.reyChatLauncher{
  position:fixed;right:18px;bottom:18px;z-index:84;
  height:58px;padding:0 18px 0 52px;border:0;border-radius:999px;
  background:#102a4c;color:#fff;box-shadow:0 18px 42px rgba(2,11,25,.52),0 0 0 4px rgba(255,199,44,.38),0 0 28px rgba(255,199,44,.34);
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  display:flex;align-items:center;
}
.reyChatLauncher img{position:absolute;left:-9px;bottom:0;width:64px;height:78px;object-fit:contain;object-position:left bottom;pointer-events:none}
.reyChat{position:fixed;right:18px;bottom:88px;z-index:85;width:min(390px,calc(100vw - 24px));height:min(610px,calc(100svh - 118px));background:#faf3e4;border:1px solid rgba(16,42,76,.14);border-radius:8px;box-shadow:0 24px 60px rgba(16,42,76,.28);display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.reyChat.open{opacity:1;visibility:visible;transform:none}
.reyChat header{position:static;background:#102a4c;color:#fff;padding:15px 16px;display:flex;align-items:center;justify-content:space-between}
.reyChat header strong{display:block;font-family:var(--display);font-size:1.25rem;text-transform:uppercase}.reyChat header span{display:block;font-size:.7rem;color:#ffc72c;font-weight:800}.reyChat header button{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;color:#fff;font-size:1.4rem;display:grid;place-items:center}
.reyChatMessages{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:9px;overscroll-behavior:contain}
.reyMessage{max-width:88%;padding:11px 12px;border-radius:8px;font-size:.86rem;line-height:1.45}.reyMessage.bot{align-self:flex-start;background:#fff;color:#263244}.reyMessage.user{align-self:flex-end;background:#f4661e;color:#fff}.reyMessage a{display:block;margin-top:10px;color:#f4661e;font-weight:900}
.reyChatQuick{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:none}.reyChatQuick::-webkit-scrollbar{display:none}.reyChatQuick button{flex:none;border:1px solid rgba(16,42,76,.16);border-radius:999px;background:#fff;padding:7px 9px;color:#102a4c;font-size:.72rem;font-weight:800}
.reyChatForm{display:grid;grid-template-columns:1fr 42px;gap:7px;padding:10px 12px 12px;background:#fff;border-top:1px solid rgba(16,42,76,.1)}.reyChatForm input{width:100%;border:1px solid rgba(16,42,76,.18);border-radius:6px;padding:10px;font:inherit}.reyChatForm button{border:0;border-radius:6px;background:#f4661e;color:#fff;font-size:1.25rem}
.cookieNotice{position:fixed;left:16px;bottom:16px;z-index:82;width:min(420px,calc(100vw - 32px));background:#fff;color:#102a4c;border:1px solid rgba(16,42,76,.14);border-radius:8px;box-shadow:0 14px 32px rgba(16,42,76,.2);padding:13px;display:flex;align-items:center;gap:12px;font-size:.77rem}.cookieNotice p{flex:1}.cookieNotice a{text-decoration:underline;font-weight:800}.cookieNotice button{border:0;border-radius:6px;background:#102a4c;color:#fff;padding:8px 11px;font-weight:800}

@media (max-width:620px){
  .prefooterArt img{min-height:150px;width:140%;max-width:none;margin-left:-20%;object-fit:cover}
  .footerBeam{padding-bottom:4px}
  .reyChatLauncher{right:12px;bottom:12px;height:52px;padding-right:14px;font-size:.84rem}
  .reyChat{right:12px;bottom:72px;height:min(570px,calc(100svh - 88px))}
  .cookieNotice{bottom:74px}
}

@media (prefers-reduced-motion:reduce){.reyChat{transition:none}.topbarTrack.marqueeTrack{animation:none;transform:none}.marqueeGroup[aria-hidden="true"]{display:none}}

.reybox-video-static .videoScroll{
  height:auto;
  min-height:0;
  overflow:visible;
}

.reybox-video-static .videoSticky{
  height:auto;
  min-height:0;
  overflow:visible;
}

.reybox-video-static .laptopShell{
  transform:none !important;
}

.minigameSection{
  --reybox-minigame-distance:2400px;
  position:relative;
  height:calc(100svh + var(--reybox-minigame-distance));
  min-height:280svh;
  overflow:visible;
  background:var(--orange);
  color:#fff;
  z-index:4;
}

.minigameSticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  width:100%;
  overflow:hidden;
}

.minigameTrack{
  display:flex;
  width:max-content;
  height:100%;
  overflow:visible;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.minigamePanel{
  flex:0 0 100vw;
  width:100vw;
  min-width:100vw;
  height:100vh;
  height:100svh;
  min-height:620px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;
  gap:clamp(22px,5vw,64px);
  padding:clamp(44px,6.5vw,78px) clamp(18px,7vw,88px);
}

.panelOrange{ background:var(--orange); }
.panelYellow{ background:var(--yellow); color:var(--navy); }
.panelCyan{ background:#10a6d8; color:#fff; }

.minigamePanelText{
  max-width:520px;
}

.miniKicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.88rem;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.miniKicker .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.miniTitle{
  margin-top:18px;
  font-family:var(--display);
  font-weight:900;
  line-height:.92;
  text-transform:uppercase;
  font-size:clamp(3.2rem,12vw,8rem);
}

.miniCopy{
  max-width:34ch;
  margin-top:18px;
  color:currentColor;
  opacity:.82;
  font-size:clamp(1rem,1.7vw,1.22rem);
}

.minigameVisual{
  width:min(42vw,520px);
  height:min(72svh,680px);
  aspect-ratio:3 / 4;
  justify-self:center;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 34px 70px -42px rgba(0,0,0,.55);
}

.minigameVisual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (max-width:760px){
  .minigameSection{
    --reybox-minigame-distance:1850px;
    min-height:250svh;
  }

  .minigamePanel{
    grid-template-columns:1fr;
    align-content:center;
    min-height:100svh;
    gap:24px;
    padding:38px 20px;
  }

  .minigameVisual{
    order:-1;
    width:min(78vw,340px);
    height:auto;
    min-height:0;
    aspect-ratio:3 / 4;
    border-radius:14px;
  }

  .miniTitle{
    font-size:clamp(3rem,16vw,5.1rem);
  }

  .miniCopy{
    max-width:30ch;
  }
}

@media (prefers-reduced-motion:reduce){
  .minigameSection{
    height:auto;
    min-height:auto;
    overflow-x:auto;
  }

  .minigameSticky{
    position:relative;
    top:auto;
    height:auto;
    overflow-x:auto;
  }

  .minigameTrack{
    height:auto;
    overflow-x:auto;
    transform:none !important;
    will-change:auto;
  }

  .minigamePanel{
    height:auto;
    min-height:0;
  }
}