*,
*::after,
*::before {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  position: relative;
  width: 100%;
  min-height: 100svh;
  text-rendering: optimizeSpeed;
}

:is(a) {
  background-color: transparent;
  text-decoration: none;
}
:is(a):link {
  color: inherit;
}
:is(a):visited {
  color: inherit;
}
:is(a):hover, :is(a):active {
  outline: 0;
}
:is(a):focus {
  outline: thin dotted;
}
:is(a):not([class]) {
  text-decoration-skip-ink: auto;
}

:is(button) {
  background: none;
  color: inherit;
  line-height: 1em;
  cursor: pointer;
}
:is(button) > * {
  pointer-events: none;
}

:is(img, picture) {
  border: 0;
  border-style: none;
  display: block;
  max-width: 100%;
}

:where(figure, picture) > img {
  height: auto;
}

:is(input, button, textarea, select) {
  font: inherit;
}

:root {
  --page-rem-size: 16px;
  --rem: 0.0625rem;
  --em: 0.0625em;
  --vmax: 0.05208333333333vmax;
  --vmin: 0.09259259259259vmin;
  --grid-container: var(--em) * 1420;
  --grid-padding: 5dvw;
}

html {
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media (width < 37.5rem) {
  html {
    font-size: max(16px, 4vw);
  }
}
@media (width >= 37.5625rem) {
  html {
    font-size: 1rem;
  }
}
@media (width > 1920px) {
  html {
    font-size: 0.8333333333vmax;
  }
}

@media (width < 37.5rem) {
  [desktop] {
    display: none !important;
    visibility: hidden;
  }
}

@media (width >= 37.5625rem) {
  [mobile] {
    display: none !important;
    visibility: hidden;
  }
}

@media (width < 64rem) {
  [expanded] {
    display: none !important;
    visibility: hidden;
  }
}

@media (width >= 64.0625rem) {
  [collapsed] {
    display: none !important;
    visibility: hidden;
  }
}

.container-grid {
  --padding-inline: 1.25rem;
  --fixed-max-width: var(--grid-container);
  --breakout-max-width: 2dvw;
  display: grid;
  grid-template-columns: [fluid-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-max-width)) [fixed-start] min(100% - var(--padding-inline) * 2, var(--fixed-max-width)) [fixed-end] minmax(0, var(--breakout-max-width)) [breakout-end] minmax(var(--padding-inline), 1fr) [fluid-end];
}
.container-grid > :not(.breakout, .fluid),
.container-grid > .fixed {
  grid-column: fixed;
}
.container-grid > .breakout {
  grid-column: breakout;
}
.container-grid > .fluid {
  grid-column: fluid;
}
.container-grid > .padded {
  padding: 1.25rem;
}

.stack-grid {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
}
.stack-grid > .stacked {
  grid-area: stack;
}

.column-grid {
  --_grid-column-count: var(--grid-column-count, 1);
  --_grid-column-gap: var(--grid-column-gap, 1rem);
  --_grid-row-gap: var(--grid-row-gap, 1rem);
  display: grid;
  grid-template-columns: repeat(var(--_grid-column-count), 1fr);
  grid-template-columns: repeat(var(--_grid-column-count), minmax(0, 1fr));
  column-gap: var(--_grid-column-gap);
  row-gap: var(--_grid-row-gap);
}
.column-grid.col-2 {
  --grid-column-count: 2;
}
.column-grid.col-3 {
  --grid-column-count: 3;
}
.column-grid.col-4 {
  --grid-column-count: 4;
}
.column-grid.col-5 {
  --grid-column-count: 5;
}
.column-grid.col-6 {
  --grid-column-count: 6;
}
@media (width < 100rem) {
  .column-grid.col-4, .column-grid.col-5, .column-grid.col-6 {
    --grid-column-count: 4;
  }
}
@media (width < 80rem) {
  .column-grid.col-3, .column-grid.col-4, .column-grid.col-5, .column-grid.col-6 {
    --grid-column-count: 3;
  }
}
@media (width < 37.5rem) {
  .column-grid.col-2, .column-grid.col-3, .column-grid.col-4, .column-grid.col-5, .column-grid.col-6 {
    --grid-column-count: 2;
  }
  .column-grid.mobile-grid-3 {
    --grid-column-count: 3;
  }
  .column-grid.mobile-grid-4 {
    --grid-column-count: 4;
  }
  .column-grid.mobile-grid-5 {
    --grid-column-count: 5;
  }
  .column-grid.mobile-grid-6 {
    --grid-column-count: 6;
  }
  .column-grid.mobile-list {
    --grid-column-count: 1;
  }
}

@supports not (display: grid) {
  .container-grid {
    width: min(90dvw, var(--fixed-max-width));
    margin-inline: auto;
  }
  .stack-grid {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stack-grid > .stacked {
    position: absolute;
  }
  .column-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
#page-top-navigation {
  position: sticky;
  z-index: 1010;
  top: 0;
  opacity: 1 !important;
  transition: transform 200ms ease-in-out, translate 200ms ease-in-out;
}

#page-top-navigation.topped {
  translate: 0;
}

#page-top-navigation.pushed {
  translate: 0 -3.125rem;
}
@media (width <= 600px) {
  #page-top-navigation.pushed {
    translate: 0 -2.5rem;
  }
}

#sgw-top-navigation {
  position: sticky;
  z-index: 1010;
  opacity: 1 !important;
  top: 0;
  width: 100%;
  justify-content: center;
  background-color: hsl(0, 0%, 0%);
}
#sgw-top-navigation #sgw_gnb_div {
  position: static;
}

#stickyHamburger {
  position: fixed;
  z-index: 1010;
  top: 0;
  left: 0;
  max-width: 70%;
  cursor: pointer;
}
#stickyHamburger a > div {
  height: 40px;
  padding: 0 0.625rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media (width > 600px) {
  #stickyHamburger {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  #sgw_gnb_div.lightboxmode {
    overflow: unset !important;
  }
}
nav.sticky {
  transition: transform 200ms ease-in-out, translate 200ms ease-in-out;
  isolation: isolate;
  display: flex;
  align-items: center;
}

nav.sticky.topped,
nav.sticky.bottomed {
  position: sticky;
}

nav.sticky.topped {
  top: 0;
}

nav.sticky.bottomed {
  bottom: 0;
}

:root {
  --letterset-margin: 1rem;
  --letterset-gap: 0.25rem;
}

header {
  width: 100%;
}

header picture {
  width: 100%;
}

header picture img {
  margin-inline: auto;
}

@media (width > 1920px) {
  header picture img {
    width: 88.75rem;
    height: auto;
  }
}
#gameboard,
#howtoplay {
  padding-block: 0 6.25rem;
}

.letterset {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--letterset-margin);
  margin-bottom: var(--letterset-margin);
  gap: var(--letterset-gap);
}

.letterbox {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.letterbox::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.letterrow {
  display: flex;
  justify-content: center;
  width: 100%;
}

.letterbox figure {
  width: 10%;
  height: fit-content;
}

.letterbox figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.rewardbox {
  flex: 0 1 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  text-align: center;
}

.letterset img {
  user-select: none;
  pointer-events: none;
}

.rewardbox figure {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.375rem;
}

.rewardbox figure img {
  width: auto;
  height: 100%;
  max-height: 11.25rem;
  align-self: center;
}

.rewardbox p {
  padding: 0.5em;
  text-wrap: balance;
  line-height: 1.1;
}

.btn-claim {
  margin: 0.625em;
  padding: 0.5rem;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  isolation: isolate;
}

.btn-claim span::before {
  content: var(--button-label);
}

.btn-claim::after,
.btn-claim::before {
  content: "";
  position: absolute;
}

@media (width <= 760px) {
  .letterbox {
    grid-column: 1/-1;
  }
  .rewardbox {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
  }
  .rewardbox figure {
    grid-row: span 2;
    max-height: 30vw;
    align-self: center;
  }
  .rewardbox p {
    grid-column: 2/span 2;
    align-self: center;
    padding-block-start: 1em;
  }
  .btn-claim {
    grid-column: 2/span 2;
    grid-row: 2;
    align-self: center;
  }
}
@media (pointer: coarse) {
  .btn-claim {
    align-self: stretch;
  }
}
.letterbox figure:not(.earned) {
  filter: grayscale(1) contrast(0.5) brightness(1.5) opacity(0.5);
}

.letterbox figure.earned {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, black, transparent 50%));
}

.letterset.locked .btn-claim,
.finalrewardbox.locked .btn-claim {
  user-select: none;
  pointer-events: none;
  filter: grayscale(0.2) brightness(0.8) opacity(0.3);
}

.letterset.locked .btn-claim span::before,
.finalrewardbox.locked .btn-claim span::before {
  content: var(--button-label-locked);
}

.letterset.claimed .btn-claim,
.finalrewardbox.claimed .btn-claim {
  user-select: none;
  pointer-events: none;
  background: none;
  border: none;
  filter: none;
}

.letterset.claimed .btn-claim::before,
.letterset.claimed .btn-claim::after,
.finalrewardbox.claimed .btn-claim::before,
.finalrewardbox.claimed .btn-claim::after {
  display: none;
}

.letterset.claimed .btn-claim span::before,
.finalrewardbox.claimed .btn-claim span::before {
  content: var(--button-label-claimed);
}

.finalrewardbox {
  display: flex;
  justify-content: center;
}

.finalreward-text,
.finalreward-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.finalreward-text {
  flex: 0 1 40%;
  padding: 1rem;
  gap: 1rem;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.finalreward-image {
  flex: 0 1 auto;
}

.finalreward-text .btn-claim {
  min-width: 14rem;
  max-width: 14rem;
  margin-inline: auto;
  font-size: 1.625em;
}

@media (width <= 1200px) {
  .finalreward-text,
  .finalreward-image {
    flex: 1 1 50%;
  }
}
@media (width <= 1024px) {
  .finalrewardbox {
    flex-direction: column;
  }
}
#howtoplay > div.howtoplay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1rem;
}

#howtoplay > div.howtoplay .last-mission {
  grid-column: 2;
}

#howtoplay h1,
#howtoplay h2,
#howtoplay h2 + p {
  grid-column: 1/-1;
}

#howtoplay h2 {
  margin-block-start: -2rem;
}

#howtoplay .mission {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

#howtoplay .mission::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

#howtoplay .mission p {
  grid-column: 2;
  text-wrap: pretty;
}

#howtoplay .mission span {
  font-size: 0.6667em;
  text-transform: uppercase;
  opacity: 0.5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
  align-self: stretch;
}

#howtoplay .mission span::before,
#howtoplay .mission span::after {
  content: "";
  top: 50%;
  width: 50%;
  height: 1px;
  background-color: currentColor;
}

@media (width <= 1366px) {
  #howtoplay > div.howtoplay {
    grid-template-columns: repeat(2, 1fr);
  }
  #howtoplay > div.howtoplay .last-mission {
    grid-column: 1;
  }
}
@media (width <= 760px) {
  #howtoplay > div.howtoplay {
    grid-template-columns: 1fr;
  }
}
#events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  grid-column: 1/-1;
  margin-block-end: 2rem;
}

#events:has(a:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

#events:has(a:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

#events figure {
  overflow: clip;
}

#singleevent {
  grid-column: 1/-1;
  margin-block-end: 2rem;
}

#singleevent img {
  width: 100%;
}

@media (width <= 1366px) {
  #events {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  #events:has(a:nth-child(3):last-child) {
    grid-template-columns: repeat(4, 1fr);
  }
  #events:has(a:nth-child(3):last-child) a {
    grid-column: span 2;
  }
  #events:has(a:nth-child(3):last-child) a:last-child {
    grid-column: 2/span 2;
  }
}
@media (width <= 760px) {
  #events {
    gap: 0.5rem;
  }
}
dialog {
  margin: auto;
  max-width: 360px;
  padding: 1rem;
  padding-block-start: 1.25rem;
}

dialog .modal-close {
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: 0;
}

dialog p {
  text-align: center;
}

dialog p:first-of-type {
  text-wrap: balance;
}

dialog .modal-ui {
  display: flex;
  justify-content: center;
  margin-block-start: 1rem;
  gap: 0.5rem;
}

dialog .modal-ui button {
  flex: 1 1 100%;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

dialog .modal-ui button::after,
dialog .modal-ui button::before {
  content: "";
  position: absolute;
}

dialog .modal-ui button:only-child {
  width: fit-content;
  max-width: 10rem;
}

dialog::backdrop {
  background-color: color-mix(in srgb, black, transparent 50%);
}

#timer {
  margin-inline: auto;
  text-align: center;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#timer::before {
  font-size: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#timer span {
  width: 3ch;
}

@media (width <= 760px) {
  #timer::before {
    flex: 1 0 100%;
  }
}
.disclaimers {
  margin-inline: auto;
  padding-block: 1rem;
}

.disclaimers p {
  text-align: center;
  font-family: sans-serif;
  font-size: 0.75rem;
}