@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@700&family=Nunito:wght@900&display=swap");

:root {
  color-scheme: dark;
  --frame-width: 1811;
  --frame-height: 8151;
  --ink: #d9d9d6;
  --chalk: rgba(217, 217, 214, 0.96);
  --card: #d9d9d9;
  --card-inner: #252827;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #202322;
  overflow-x: hidden;
}

html {
  overflow-y: hidden;
}

body {
  font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  overflow: hidden;
}

.page-scroll {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.site-frame {
  position: relative;
  width: 100%;
  height: 450.138045vw;
  min-height: 100vh;
  overflow: hidden;
  background: #202322;
  color: var(--ink);
  container-type: inline-size;
}

.layer {
  position: absolute;
  left: calc(var(--x) * 100% / var(--frame-width));
  top: calc(var(--y) * 100% / var(--frame-height));
  width: calc(var(--w) * 100% / var(--frame-width));
  height: calc(var(--h) * 100% / var(--frame-height));
}

.fill {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}

.label,
.subtitle,
.section-title,
.footer-brand,
.recruitment li,
.platform-pill {
  font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chalk);
}

.label-left {
  font-size: calc(20 * 100cqw / var(--frame-width));
  line-height: 1.2;
  white-space: nowrap;
}

.platform-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(20 * 100cqw / var(--frame-width));
  background: #d9d9d9;
  color: #353636;
  font-size: calc(20 * 100cqw / var(--frame-width));
  line-height: 1;
  white-space: nowrap;
}

.title {
  margin: 0;
  font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-size: calc(200 * 100cqw / var(--frame-width));
  line-height: 0.8;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--chalk);
  white-space: nowrap;
}

.subtitle {
  margin: 0;
  font-size: calc(32 * 100cqw / var(--frame-width));
  line-height: 1.05;
  white-space: nowrap;
}

.section-title {
  margin: 0;
  font-size: calc(96 * 100cqw / var(--frame-width));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.section-battle,
.section-recruit {
  text-align: left;
}

.character-sheet {
  display: block;
}

.board {
  filter: drop-shadow(0 calc(12 * 100cqw / var(--frame-width)) calc(10 * 100cqw / var(--frame-width)) rgb(0 0 0 / 0.22));
}

.env-card {
  margin: 0;
  padding: calc(20 * 100cqw / var(--frame-width));
  border-radius: calc(30 * 100cqw / var(--frame-width));
  background: #d9d9d9;
}

.env-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(29 * 100cqw / var(--frame-width));
}

.recruitment {
  display: grid;
  place-items: center;
}

.recruitment img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.recruitment ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(58 * 100cqw / var(--frame-width));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  transform: translateY(calc(-30 * 100cqw / var(--frame-width)));
}

.recruitment li {
  color: rgb(48 48 49 / 0.85);
  font-size: calc(48 * 100cqw / var(--frame-width));
  line-height: 0.8;
}

.footer-left,
.footer-right {
  color: var(--chalk);
}

.footer-brand {
  font-size: calc(55 * 100cqw / var(--frame-width));
  line-height: 0.8;
  margin-left: calc(58 * 100cqw / var(--frame-width));
}

.footer-line {
  display: flex;
  align-items: center;
  gap: calc(8 * 100cqw / var(--frame-width));
  margin-top: calc(58 * 100cqw / var(--frame-width));
  font-size: calc(24 * 100cqw / var(--frame-width));
  font-weight: 900;
  letter-spacing: 0.06em;
}

.footer-line img {
  width: calc(172 * 100cqw / var(--frame-width));
  height: auto;
}

.footer-line span {
  transform: translateX(calc(-36 * 100cqw / var(--frame-width)));
}

.footer-right {
  display: flex;
  align-items: center;
  gap: calc(8 * 100cqw / var(--frame-width));
  font-size: calc(24 * 100cqw / var(--frame-width));
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.footer-right img {
  width: calc(158 * 100cqw / var(--frame-width));
  height: auto;
  flex: 0 0 auto;
}

.footer-right span {
  transform: translateX(calc(-30 * 100cqw / var(--frame-width)));
}

@media (max-width: 640px) {
  body {
    background: #202322;
  }

  .site-frame {
    width: 100vw;
  }
}