* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #1b1c1c;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
}

#viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px; /* base for rem units */
}

/* ---- stage scaling + true centering ---------------------------------
   The stage is 1920x1080; we scale it to fit the viewport while keeping
   it centered. Absolute positioning + translate avoids the grid-box
   centering bug where the unscaled layout box stays at full size. */
#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  /* scale set by JS: transform: translate(-50%, -50%) scale(var) */
}

/* ---- layer 1: the Rive touch app ---- */

#rive-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  display: block;
}

/* ---- logo hotspot: transparent, viewport-positioned overlay over the
   Limespark logo (upper-right of the 1920×1080 artboard).
   The .riv's own logo listener targets private triggers the web runtime never
   exposes — verified: logo-area clicks produce no state change. This hotspot
   is our proxy: a transparent clickable area that switches modes.
   Logo bbox from artboard: x≈1529–1837, y≈43–107.
   Hit area ≈ 320×70px, centred on the logo's centroid (1683, 75). */
#logo-hotspot {
  position: fixed;
  width: 320px;
  height: 70px;
  cursor: pointer;
  z-index: 5;
  pointer-events: all;
  background: transparent;
  border: none;
}
/* Centred on the Limespark logo: left ≈ 1683 − 160 = 1523, top ≈ 75 − 35 = 40 */
#logo-hotspot { left: 1523px; top: 40px; }

#back-hotspot {
  position: absolute;
  left: 32px;
  top: 32px;
  padding: 14px 22px;
  font: 600 20px "Segoe UI", system-ui, sans-serif;
  color: #f0efec;
  background: rgba(60, 73, 97, .85);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  cursor: pointer;
  z-index: 6;
  display: none;
}
body.in-memory #back-hotspot { display: block; }

#memory-game {
  position: absolute;
  inset: 0;
  background-image: url("background.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
#memory-game[hidden] { display: none; }

/* ---- video solved screen ---- */

#memory-game .solved-video {
  position: absolute;
  top: 208.5px;
  left: 298.5px;
  width: 1296px;
  height: 648px;
  object-fit: cover;
  z-index: 2;
}

#memory-game .solved-video[hidden] { display: none; }

/* ---- cards ----

#cards { position: absolute; inset: 0; z-index: 1; }

#cards[hidden] {
  display: none;
}

/* ---- boot / error ---- */

#boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1b1c1c;
  color: #bababa;
  font-size: 22px;
  z-index: 10;
}
#boot[hidden] { display: none; }
#boot code { color: #8fa8c8; }

.card {
  position: absolute;
  width: 216px;
  height: 216px;
  perspective: 900px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1);
}

.card.up .card-inner { transform: rotateY(180deg); }
.card.matched { cursor: default; }
/* matched cards stay face-up and fully visible — just stop accepting clicks */
.card.matched.up .card-inner { transition: transform 420ms cubic-bezier(.2,.7,.3,1); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: visible;
  /* face-front is transparent and must let the oversized faces overflow;
     face-back overrides this with hidden. */
}

/* Back face must fully cover whatever the front face is doing (4S/5S overflow
   the cell), so the back clips and paints opaquely over it. */
.face-back {
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .82);
}

/* front: fully transparent — the PNG alpha does the shaping, no white plate.
   Faces taller/wider than the cell (4S, 5S, 6S) are centred with absolute
   positioning so they overflow equally on both sides instead of hanging off
   one edge. */
.face-front {
  transform: rotateY(180deg);
  background: none;
}

.face-front img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- hud ---- */

/* HUD + win modal are memory-game surfaces: hidden whenever we're in the touch mode */
body:not(.in-memory) #hud,
body:not(.in-memory) #win {
  display: none;
}

#hud {
  position: absolute;
  left: 298px;
  top: 96px;
  display: flex;
  align-items: center;
  gap: 34px;
  color: #d7d7d7;
  font-size: 22px;
  letter-spacing: .04em;
  z-index: 4;
}

.stat { display: flex; align-items: baseline; gap: 10px; }
.stat .k { color: #8b8f96; font-size: 17px; text-transform: uppercase; }
.stat .v { font-variant-numeric: tabular-nums; font-size: 26px; color: #f0efec; }

#hud button, #again {
  font: inherit;
  font-size: 18px;
  color: #f0efec;
  background: #3c4961;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
}
#hud button:hover, #again:hover { background: #5e7299; }

/* ---- win ---- */

#win {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 21, 21, .82);
  z-index: 5;
}
#win[hidden] { display: none; }

#win .panel {
  text-align: center;
  color: #f0efec;
  background: #2d2e2e;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 54px 78px;
}
#win h1 { font-size: 54px; font-weight: 600; letter-spacing: .02em; }
#win p { margin: 18px 0 30px; font-size: 24px; color: #bababa; }