:root {
  color-scheme: dark;
  --card-ratio: 1800 / 2782;
  --page-gap: clamp(10px, 2.5vmin, 24px);
  --radius: clamp(14px, 2.5vmin, 24px);
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: max(var(--page-gap), env(safe-area-inset-top)) max(var(--page-gap), env(safe-area-inset-right)) max(var(--page-gap), env(safe-area-inset-bottom)) max(var(--page-gap), env(safe-area-inset-left));
  background: #080a11;
}

.card-shell {
  position: relative;
  width: min(
    900px,
    calc(100vw - (2 * var(--page-gap))),
    calc((100vh - (2 * var(--page-gap))) * 1800 / 2782),
    calc((100dvh - (2 * var(--page-gap))) * 1800 / 2782)
  );
  aspect-ratio: var(--card-ratio);
}

.card-shell::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius) + 8px);
  background: conic-gradient(
    from var(--border-angle),
    #7d4c08 0deg,
    #d99a24 42deg,
    #fff3a6 66deg,
    #f6c84c 82deg,
    #8b5208 126deg,
    #d99a24 205deg,
    #fff8bd 234deg,
    #e5a52a 250deg,
    #7d4c08 310deg,
    #d99a24 360deg
  );
  box-shadow:
    0 0 14px rgba(255, 196, 57, .5),
    0 0 36px rgba(211, 136, 24, .24);
  animation: border-shine 4.5s linear infinite;
}

.card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgba(255, 239, 171, .55);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .62), 0 5px 18px rgba(0, 0, 0, .5);
  transform: translateZ(0);
}

.artwork,
.reveal-layer,
#scratchCanvas,
.completion-bloom,
.loading-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.artwork { display: block; object-fit: cover; }
.reveal-layer {
  background: #000 url('assets/reveal.webp') center / cover no-repeat;
}

#scratchCanvas {
  cursor: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Sits above everything (including the canvas) until script.js has actually
   drawn the real foil texture, then fades out and is removed. This — not a
   background on the canvas itself — is what hides .reveal-layer during the
   load race: a background painted on the canvas element would also show
   through once scratched-away pixels go transparent, permanently blocking
   the real reveal underneath. This veil is a separate layer, so scratching
   is unaffected once it's gone. */
.loading-veil {
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
  background: linear-gradient(
    135deg,
    #b6c2d2 0%,
    #f8fbfc 20%,
    #a9b4c5 48%,
    #f4f8fa 72%,
    #8e9bae 100%
  );
}

.loading-veil.hidden {
  opacity: 0;
}

.completion-bloom {
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 247, 201, .5), transparent 60%);
}

.card.complete .completion-bloom { animation: bloom 1.1s ease-out; }

@keyframes bloom {
  0% { opacity: 0; transform: scale(.8); }
  35% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes border-shine {
  to { --border-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; }
}