:root { color-scheme: dark; --orange: #fd8c0a; }
@font-face { font-family:Oxanium; src:url('./assets/Oxanium-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:Oxanium; src:url('./assets/Oxanium-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:Niramit; src:url('https://fonts.gstatic.com/s/niramit/v12/I_uuMpWdvgLdNxVLbbQ.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Niramit; src:url('https://fonts.gstatic.com/s/niramit/v12/I_urMpWdvgLdNxVLVQh_tig.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
* { box-sizing: border-box; }
html { width:100%; height:100%; margin:0; overflow:hidden; background:#111; }
body {
  width:100%;
  height:100svh;
  height:100dvh;
  min-height:100%;
  margin:0;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#111;
  overscroll-behavior:none;
  touch-action:none;
}
button { -webkit-tap-highlight-color:transparent; }
.sr-only { 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; }

.app {
  position:relative;
  --bar-height:14.933cqw;
  width:min(100%, 430px);
  height:min(100%, 932px);
  max-height:100%;
  overflow:hidden;
  background:#171717;
  box-shadow:0 0 60px rgba(0,0,0,.65);
  user-select:none;
  container-type:size;
}
.pages { position:absolute; inset:0 0 var(--bar-height); overflow:hidden; }
.screen { position:absolute; inset:0; display:none; width:100%; height:100%; overflow:hidden; background:#171717; }
.screen[aria-hidden="false"] { display:block; }
[data-entry] { visibility:hidden; }
.screen-fill { position:absolute; inset:0; background:#050506; }
.fig-layer {
  position:absolute;
  z-index:1;
  display:block;
  left:calc(var(--x) / 375 * 100%);
  top:calc(var(--y) / 606 * 100%);
  width:calc(var(--w) / 375 * 100%);
  height:auto;
  max-width:none;
  pointer-events:none;
  -webkit-user-drag:none;
  transform-origin:center;
}
.home-hero-hd { z-index:1; }
.hd-title-art, .hd-copy-art, .subtitle-art, .tail-heading-art, .tail-copyright-art { z-index:4; }
.subtitle-art {
  top:calc(var(--decor-y) / 606 * 100% + var(--offset-y) / 375 * 100cqw);
}
.raw-bg { height:100%; object-fit:fill; }
.screen-shade { position:absolute; inset:0; z-index:1; background:rgba(36,36,36,.7); }
.game-background, .game-overlay { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; pointer-events:none; }
.game-background { object-fit:cover; }
.game-overlay { z-index:2; }
.game-tab-art {
  z-index:3;
  height:11.2cqw;
  transition:none;
  transform:none;
}
.game-tab-state {
  position:absolute;
  inset:0;
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.game-tab-state.is-active { display:block; }
.outline-art {
  position:absolute;
  z-index:2;
  right:calc(2 / 375 * 100%);
  bottom:0;
  height:22.667cqw;
  width:auto;
  display:block;
  pointer-events:none;
}
.screen-heading, .screen-title, .screen-copy { position:absolute; z-index:4; margin:0; font-family:Oxanium, sans-serif; }
.screen-heading { left:calc(24 / 375 * 100%); top:calc(33 / 606 * 100%); transform:skewX(-5deg); letter-spacing:.293cqw; line-height:.98; }
.screen-heading strong, .screen-heading span { display:block; white-space:nowrap; }
.screen-heading strong { color:#fc8809; font-size:14.667cqw; font-weight:700; }
.screen-heading span { margin-top:1.1cqw; color:#fff; font-size:12cqw; font-weight:400; }
.games-heading span, .ask-heading span, .multi-heading span { font-size:10.667cqw; }
.screen-copy { left:calc(24 / 375 * 100%); top:calc(161 / 606 * 100% + 3.04cqw); color:#aaa; font-family:Niramit,Oxanium,sans-serif; font-size:4.267cqw; font-weight:400; line-height:1.35; letter-spacing:.085cqw; }
.screen-copy em { color:var(--orange); font-style:normal; }
.home-title { left:9.07%; top:66.17%; color:#fefefe; font-size:14.667cqw; line-height:.82; font-weight:700; letter-spacing:.293cqw; transform:skewX(-5deg); }
.home-copy { left:10.13%; top:76.9%; color:#fffcf9; font-size:3.733cqw; line-height:1.2; letter-spacing:.075cqw; }
.platform-layer { z-index:3; }
.product-layer, .exact-material { z-index:4; }
.multi-title-art {
  z-index:4;
  left:calc(24 / 375 * 100%);
  top:calc(33 / 606 * 100%);
}
.multi-info {
  position:absolute;
  z-index:4;
  left:calc(21 / 375 * 100%);
  top:calc(396 / 606 * 100%);
  width:calc(342 / 375 * 100%);
  height:calc(193 / 606 * 100%);
  color:#e5e3e3;
  font-family:Niramit,Oxanium,sans-serif;
  pointer-events:none;
}
.multi-info-card { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; }
.multi-info-logo {
  position:absolute;
  left:calc(27 / 342 * 100%);
  top:calc(47 / 193 * 100%);
  width:calc(41 / 342 * 100%);
  aspect-ratio:1;
  object-fit:contain;
}
.multi-info-copy {
  position:absolute;
  left:calc(82 / 342 * 100%);
  top:calc(39 / 193 * 100%);
  width:calc(244 / 342 * 100%);
}
.multi-info-copy h2 {
  margin:0 0 1.867cqw;
  color:var(--orange);
  font-size:4.267cqw;
  line-height:1;
  font-weight:700;
  letter-spacing:.085cqw;
  white-space:nowrap;
}
.multi-info-copy p {
  width:calc(209 / 244 * 100%);
  margin:0;
  font-size:2.133cqw;
  line-height:1.25;
  font-weight:400;
  letter-spacing:.043cqw;
}
.multi-info-copy .multi-info-developed { margin-top:2.133cqw; font-weight:700; }
.decor-layer { z-index:5; }
.arrow-layer { z-index:7; mix-blend-mode:screen; will-change:transform, opacity, filter; }
.games-state-art { position:absolute; inset:0; z-index:3; pointer-events:none; }
.game-swipe-zone {
  position:absolute;
  z-index:6;
  left:0;
  top:calc(280 / 606 * 100%);
  width:100%;
  height:calc(230 / 606 * 100%);
  touch-action:none;
  cursor:grab;
}
.game-swipe-zone:active { cursor:grabbing; }
.state-piece, .state-text { position:absolute; display:block; }
.state-piece { object-fit:fill; }
.state-text { margin:0; color:#faf7f7; font-family:Oxanium,sans-serif; line-height:1.2; letter-spacing:.06cqw; white-space:pre-line; }
.brand-wordmark { z-index:5; }
.screen-home .arrow-layer { z-index:7; }
.games-state-art { transition:none; will-change:transform, opacity; }

.tail-background {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.tail-brand {
  z-index:4;
  left:calc((375 - 149) / 2 / 375 * 100%);
}
.tail-heading {
  position:absolute;
  z-index:4;
  left:0;
  top:calc(93 / 606 * 100%);
  width:100%;
  height:calc(100 / 606 * 100%);
  margin:0;
  color:#fff;
  font-family:Oxanium,sans-serif;
  line-height:.96;
  text-align:center;
  letter-spacing:.213cqw;
  transform:none;
}
.tail-heading span,
.tail-heading strong {
  display:block;
  width:max-content;
  margin-inline:auto;
  white-space:nowrap;
  transform:skewX(-5deg);
  transform-origin:center;
}
.tail-heading span { font-size:10.667cqw; font-weight:400; }
.tail-heading strong { color:var(--orange); font-size:12cqw; font-weight:700; }
.tail-socials {
  position:absolute;
  z-index:4;
  left:calc(68 / 375 * 100%);
  top:calc(228 / 606 * 100%);
  width:calc(240 / 375 * 100%);
  height:14.933cqw;
  display:flex;
  gap:9.6cqw;
}
.tail-socials a {
  position:relative;
  z-index:1;
  display:block;
  flex:0 0 calc(56 / 240 * 100%);
  width:calc(56 / 240 * 100%);
  height:100%;
  border-radius:12px;
  outline:none;
  transition:filter .16s ease, transform .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.tail-socials-art { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.tail-socials a:active { filter:brightness(1.2); transform:translateY(1px); }
.tail-socials a:focus-visible { box-shadow:0 0 0 2px var(--orange); }
.tail-socials img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.tail-info {
  position:absolute;
  z-index:4;
  top:calc(360 / 606 * 100%);
  height:36.267cqw;
  color:#fff;
  font-family:Niramit,Oxanium,sans-serif;
}
.tail-legal { left:calc(33 / 375 * 100%); width:calc(115 / 375 * 100%); height:36.667cqw; }
.tail-contact { left:calc(176 / 375 * 100%); width:calc(153 / 375 * 100%); height:42cqw; }
.tail-info > img { display:block; width:100%; height:auto; object-fit:contain; }
.tail-info h2 { margin:0; font-size:6.667cqw; line-height:1.2; font-weight:400; letter-spacing:.133cqw; white-space:nowrap; }
.tail-info p { position:absolute; left:0; margin:0; font-size:4cqw; line-height:1.25; font-weight:400; letter-spacing:.08cqw; white-space:nowrap; }
.tail-info p:nth-of-type(1) { top:calc(58 / 136 * 100%); }
.tail-info p:nth-of-type(2) { top:calc(117 / 136 * 100%); }
.tail-copyright {
  position:absolute;
  z-index:4;
  left:calc(34 / 375 * 100%);
  top:calc(544 / 606 * 100%);
  width:calc(307 / 375 * 100%);
  margin:0;
  color:#aaa;
  font:400 2.667cqw/1.2 Niramit,Oxanium,sans-serif;
  letter-spacing:.053cqw;
}

.hotspot { position:absolute; z-index:8; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.hotspot:active { background:rgba(252,136,9,.18); box-shadow:inset 0 0 0 2px rgba(252,136,9,.9); transform:scale(.975); }
.hotspot:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.download-hotspot { left:8%; top:80.8%; width:84.7%; height:10.5%; }
.arrow-hotspot { left:39.5%; top:87.5%; width:21%; height:10%; border-radius:0; }
.game-tab { top:calc(240 / 606 * 100%); width:calc(65.5 / 375 * 100%); height:11.2cqw; }
.tab-delta { left:calc(42 / 375 * 100%); }
.tab-tft { left:calc(107.5 / 375 * 100%); }

.dot-hotspots {
  position:absolute;
  z-index:9;
  left:calc(234 / 375 * 100%);
  top:calc((436 - 8) / 606 * 100%);
  width:calc(88 / 375 * 100%);
  height:4.8cqw;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(8 / 375 * 100%);
}
.state-page-indicator {
  position:absolute;
  z-index:7;
  left:calc(234 / 375 * 100%);
  top:calc(436 / 606 * 100%);
  width:calc(88 / 375 * 100%);
  height:.533cqw;
  display:flex;
  gap:calc(8 / 88 * 100%);
}
.state-page-indicator i { display:block; flex:0 0 calc(24 / 88 * 100%); height:100%; background:#969696; }
.state-page-indicator i.is-active { background:var(--orange); }
.dot-hotspots .hotspot { position:relative; width:100%; height:100%; border-radius:0; background:transparent; transform:none; }
.dot-hotspots .hotspot:active { background:rgba(253,140,10,.2); box-shadow:none; }
.dot-hotspots .hotspot:focus-visible { outline:none; }

.persistent-bar { position:absolute; z-index:50; left:0; right:0; bottom:0; height:var(--bar-height); overflow:hidden; background:#fff; }
.persistent-bar-art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; }
.persistent-bar-logo { position:absolute; z-index:2; left:4.8%; top:12.5%; width:10.933%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.persistent-bar button { position:absolute; z-index:3; right:5.3%; top:21%; width:30.4%; height:54%; border:0; background:transparent; border-radius:6px; cursor:pointer; }
.persistent-bar button:active { box-shadow:inset 0 0 0 2px var(--orange); transform:scale(.98); }
.gesture-toast { position:absolute; z-index:60; left:50%; bottom:10%; padding:6px 10px; border-radius:999px; color:#fff; background:rgba(0,0,0,.7); font:11px/1.2 system-ui,sans-serif; opacity:0; transform:translate(-50%,8px); transition:opacity 180ms,transform 180ms; pointer-events:none; }
.gesture-toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:430px) and (orientation:portrait) { body { background:#171717; } }

@media (orientation:landscape) {
  .app {
    width:min(430px, calc(100dvh * 375 / 662));
    height:auto;
    aspect-ratio:375 / 662;
  }
}