/* ===== Basic CSS Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* ===== CSS Variables ===== */
:root {
  --base: #600;
  --gold: #D4AF37;
}

/* ===== Webfont ===== */
@font-face {
  font-family: 'Uniqlo Pro';
  src:
    url('https://s3.ap-southeast-2.amazonaws.com/edmcdn.1000heads.com/UniqloPro-Bold.woff2') format('woff2'),
    url('https://s3.ap-southeast-2.amazonaws.com/edmcdn.1000heads.com/UniqloPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Base Layout ===== */
body {
  background: #6F0900;
  color: #fff;
  font-family: 'Uniqlo Pro', Arial, sans-serif;
  font-weight: 700;
}

main {
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main > div {
  display: none;
}

main > div.active {
  display: block;
}

/* ===== Tile Styles ===== */
.tile,
#game > div {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;

  font-weight: 600;
  font-size: 50px;
  color: var(--gold);

  background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--base), white 10%) 50%,
    color-mix(in srgb, var(--base), black 20%) 50%
  );

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.15);

  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tile > span,
#game > div > span {
  display: block;
  line-height: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  user-select: none;
}

/* Animation / state helpers */
.tile.is-animating,
#game > div.is-animating {
  pointer-events: none;
}

.tile.is-hidden,
.tile.is-faded,
#game > div.is-hidden,
#game > div.is-faded {
  opacity: 0;
  visibility: hidden;
}

/* ===== Game Grid ===== */
#game {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;

  position: relative;
  overflow: hidden;
}

#game.active {
  display: grid;
}

/* ===== Result Video ===== */
#result #resultVideo {
  width: 100%;
  height: auto;
  display: block;

  pointer-events: none;
  user-select: none;
}