@font-face{font-family:"Anton SC";src:url("./assets/fonts/anton-sc.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url("./assets/fonts/inter-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url("./assets/fonts/inter-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap;}
:root{--brand-font:"Anton SC";--brand-line:1.5092592592592593;--brand-gap:0px;--intro-offset:-3px;}
* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: #000;
  font-family: Inter, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  min-height: max(680px, 100svh);
  overflow: hidden;
  background: #000;
  color: #fff;
}

.ambient {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  padding: 32px 24px;
}

.wordmark {
  width: max-content;
  max-width: 100%;
  font-family: var(--brand-font), Georgia, serif;
  font-weight: 400;
  line-height: var(--brand-line);
  color: #ff8a00;
  background: linear-gradient(0deg, #ff0000 7.1659%, #ffd400 86.216%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wordmark--small {
  font-size: 20px;
  background-image: linear-gradient(160.0586deg, #ff0000 1.0216%, #ffd400 77.069%);
}

.intro {
  position: absolute;
  z-index: 4;
  top: calc(50% + var(--intro-offset));
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(887px, calc(100% - 64px));
  text-align: center;
}

.wordmark--hero { font-size: clamp(72px, 6.75vw, 108px); }

.copy { width: 100%; }

h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-gap);
  width: 100%;
  margin: 0;
  color: #ffd400;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Keep the table's separator in the heading; the design uses a line break. */
.heading-separator {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

/* Equal outer rows center the intro while reserving room for the artwork. */
@media (max-width: 900px) {
  .hero {
    --edge-space: var(--scene-reserve, clamp(150px, 36vw, 340px));
    display: grid;
    grid-template-rows: minmax(var(--edge-space), 1fr) auto minmax(var(--edge-space), 1fr);
    min-height: 100vh;
    min-height: 100svh;
  }

  .header {
    position: absolute;
    top: 0;
    width: 100%;
    padding-block: 24px;
  }

  .intro {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-row: 2;
    width: min(640px, calc(100% - 48px));
    margin: 0 auto;
  }

  .wordmark--hero { font-size: clamp(64px, 10vw, 90px); }

  }

@media (max-width: 540px) {
  .wordmark--hero { font-size: clamp(58px, 15vw, 76px); }
  h1 { font-size: 20px; }
  }

/* On short landscape screens, show the copy immediately below the header. */
@media (max-height: 540px) and (min-width: 541px) and (orientation: landscape) {
  .hero {
    --edge-space: var(--scene-reserve, clamp(150px, 36vw, 340px));
    display: grid;
    grid-template-rows: 88px auto minmax(var(--edge-space), 1fr);
    min-height: 100vh;
    min-height: 100svh;
  }

  .header {
    position: absolute;
    top: 0;
    width: 100%;
    padding-block: 24px;
  }

  .intro {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-row: 2;
    margin: 0 auto;
  }

  }

.hero--4 .intro { top:80.05556%; }
.art { position:absolute; z-index:2; left:var(--x); top:calc(50% + var(--y)); width:var(--w); aspect-ratio:var(--ratio); transform:rotate(var(--rotation)) scaleX(var(--mirror)); filter:blur(var(--blur)); pointer-events:none; }
.art img { display:block; width:100%; height:100%; object-fit:cover; }
.art--under { z-index:0; }
.scene-background { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.intro--panel::before { content:""; position:absolute; z-index:-1; top:-32px; bottom:-32px; left:50%; transform:translateX(-50%); width:calc(100vw - 66px); border-radius:20px; background:rgba(0,0,0,.3); }
@media (max-width:900px), (max-height:540px) and (orientation:landscape) {
 .hero { --scene-reserve:clamp(185px,38vw,360px); }
 .hero--4 .intro { top:auto; }
 .art { top:auto; }
 .art--chips { width:min(75vw,480px); left:50%; bottom:-45px; transform:translateX(-50%); }
 .art--chest { width:min(58vw,400px); left:50%; bottom:-60px; transform:translateX(-50%); }
 .art--safe { width:min(46vw,350px); left:50%; bottom:-20px; transform:translateX(-50%); }
 .art--coins { width:45vw; max-width:380px; left:-8%; bottom:-28px; }
 .art--trophy, .art--slot { width:46vw; max-width:400px; left:auto; right:-8%; bottom:-28px; }
 .art--bottomchips { width:30vw; max-width:240px; left:35%; bottom:16px; }
 .art--topchips { width:24vw; max-width:170px; left:auto; right:8%; top:75px; }
 .hero--7 .art--bottomchips, .hero--8 .art--bottomchips, .hero--9 .art--bottomchips { width:44vw; max-width:360px; left:8%; bottom:-4px; }
 .hero--7 .art--topchips, .hero--8 .art--topchips, .hero--9 .art--topchips { width:28vw; max-width:240px; right:0; top:65px; }
 .intro--panel::before { width:calc(100vw - 32px); top:-24px; bottom:-24px; }
}
@media (max-height:540px) and (min-width:541px) and (orientation:landscape) {
 .hero { --scene-reserve:clamp(300px,62vw,460px); }
 .art--topchips { top:auto; bottom:48px; right:18%; }
 .hero--7 .art--topchips, .hero--8 .art--topchips, .hero--9 .art--topchips { top:auto; bottom:40px; right:8%; }
}

.wordmark--hero{background-image:linear-gradient(13.6263deg,#ffd400 28.645%,#ff0000 86.394%);}
.wordmark--small{background:none;color:#ffd400;-webkit-text-fill-color:currentColor;}