@font-face {
  font-family: "LabTitle";
  src: url("../pong/fonts/BureauGrotesque/BureauGrotesque.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("./fonts/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("./fonts/Rajdhani-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("./fonts/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LabHand";
  src: url("./fonts/PatrickHandSC.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(245, 229, 194, 0.96), rgba(165, 143, 104, 0.84) 58%, rgba(39, 42, 32, 0.72) 100%),
    linear-gradient(rgba(43, 60, 45, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 60, 45, 0.07) 1px, transparent 1px),
    #b8a77f;
  background-size: cover, 28px 28px, 28px 28px, cover;
  display: grid;
  place-items: center;
  color: #1d261e;
  font-family: "Rajdhani", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.shell {
  position: relative;
  width: min(100vw, 133.333vh);
  aspect-ratio: 4 / 3;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
  background: rgba(231, 211, 171, 0.96);
  border: 1px solid rgba(48, 43, 30, 0.58);
  box-shadow:
    0 22px 70px rgba(22, 20, 14, 0.42),
    inset 0 0 34px rgba(67, 45, 24, 0.18);
}

body.memory-attract {
  background: #101a15;
}

body.memory-attract .shell {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  overflow: hidden;
}

body.memory-attract canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 133.333vh);
  height: max(75vw, 100vh);
  transform: translate(-50%, -50%);
  border: 0;
  box-shadow: none;
  background: #101a15;
}

.qr {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36vw, 250px);
  height: min(36vw, 250px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 12px;
  background: #fbf6e7;
  border: 4px solid #2f7d63;
  box-shadow:
    0 16px 42px rgba(30, 34, 25, 0.34),
    inset 0 0 0 2px rgba(43, 36, 24, 0.18);
}

.qr.hidden {
  display: none;
}

.qr img,
.qr canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.qr.blurred img,
.qr.blurred canvas {
  filter: blur(14px);
  transform: scale(0.98);
}

.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  color: rgba(24, 40, 32, 0.56);
  font-size: min(12px, 2.25vw);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}