@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  src: url("../font/inter.woff2?h=e6608df09a") format("woff2");
}

:root {
  --bg: #111111;
  --card: #eeeeee;
  --txt: #eeeeee;
  --mut: #b4b4b4;
  --acc: #e54666;
  --acc-hi: #ec5a72;
  --on-acc: #ffffff;
}

body {
  align-items: center;
  background: var(--bg);
  color: var(--txt);
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

#stats {
  color: var(--mut);
  letter-spacing: 1px;
  padding: 12px;
  text-align: center;
}

#stats b {
  color: var(--txt);
}

#stats span + span {
  margin-left: 24px;
}

#level {
  background: var(--bg);
  border: 1px solid var(--mut);
  border-radius: 4px;
  color: var(--txt);
  margin-left: 6px;
  padding: 2px 6px;
}

/* Footer below the board: the wordmark plus links to the slides, the source and the license. */
.stat-links {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

/* The wordmark leads; the 3 links are sized to the same visible height (~12px, the wordmark's
   x-height at Inter 1.4rem) so they read balanced. Rescale the numbers if the font/size changes. */
.stat-links .mark {
  color: var(--mut);
  font-size: 1.4rem;
  font-weight: 600;
}

.stat-links a {
  color: var(--mut);
  position: relative;
  top: 2.45px; /* lower the 3 links onto the wordmark's x-height center (lowercase sits low in its box) */
}

.stat-links a:hover {
  color: var(--txt);
}

.stat-links .license {
  font-size: 16.65px; /* all-caps "MIT": cap-height (~0.73em) matches the icons' ~12px */
  text-decoration: none;
}

.stat-links .built,
.stat-links .github {
  -webkit-mask: center / contain no-repeat;
  background-color: currentColor;
  mask: center / contain no-repeat;
}

/* Icon boxes differ so both glyphs render ~12px tall (code.svg fills ~75% of its box, github ~98%). */
.stat-links .built {
  -webkit-mask-image: url("../image/code.svg?h=7a1de7a10e");
  height: 16px;
  mask-image: url("../image/code.svg?h=7a1de7a10e");
  width: 16px;
}

.stat-links .github {
  -webkit-mask-image: url("../image/github.svg?h=8596ac4d16");
  height: 12.4px;
  mask-image: url("../image/github.svg?h=8596ac4d16");
  width: 12.4px;
}

#win {
  align-items: center;
  background: rgba(17, 17, 17, 0.92);
  display: none;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 10; /* sit above the footer (a flex item) so it is the only active layer */
}

#win-close {
  -webkit-mask: url("../image/close.svg?h=82e5e95a77") center / contain no-repeat;
  background-color: var(--mut);
  border: 0;
  cursor: pointer;
  height: 22px;
  mask: url("../image/close.svg?h=82e5e95a77") center / contain no-repeat;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 22px;
}

#win-close:hover {
  background-color: var(--txt);
}

#win h1 {
  font-size: 3rem;
  margin: 0 0 16px;
}

#win p {
  color: var(--mut);
  font-size: 1.2rem;
  margin: 4px 0;
}

.win-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

#win button {
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  padding: 12px 28px;
}

#next {
  background: var(--acc);
  border: 0;
  color: var(--on-acc);
}

#next:hover {
  background: var(--acc-hi);
}

#replay {
  background: transparent;
  border: 1px solid var(--mut);
  color: var(--txt);
}

#replay:hover {
  border-color: var(--txt);
}

.board {
  box-sizing: border-box;
  display: grid;
  gap: clamp(8px, 2.2vw, 18px);
  grid-template-columns: repeat(var(--long), 1fr);
  margin: 0 auto;
  padding: 9px;
  width: min(calc(var(--long) * 108px), 100vw); /* --long and --short are set by JS */
}

@media (orientation: portrait) {
  .board {
    grid-template-columns: repeat(var(--short), 1fr);
    width: min(calc(var(--short) * 108px), 100vw);
  }
}

.card {
  aspect-ratio: 3 / 4;
  background: var(--card);
  border-radius: 9px;
  position: relative;
}

.card img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
}

[data-element="cover"] {
  background: url("../image/card-back.svg?h=92451b1db3") center / cover no-repeat;
  border-radius: 9px;
  cursor: pointer;
  inset: 0;
  position: absolute;
}