/* tokens
   case: #0c0705 to #1a0f0a, near-black shadow-box the plaque sits in
   plaque backing: #3a0e16 deep trophy-shop maroon velvet, #200709 edge
   gold: #f2b90f rim / #dc9916 base / #fbe6c4 hot highlight (sampled off assets/avatar.png)
   ink: #f4d98a warm cream (labels), #efe2b8 dimmer (plate line)
   type: Oswald (condensed, government-ID / cheap-plaque feel) for ticker + labels,
         IBM Plex Mono for the CA (real case, copyable, bundled locally)
   corner radius: 0 on the plaque/medallion frame (a stamped plate, not a UI card), 2px on the CA chip only
   motion: one metallic sweep across the medallion on load, then still. prefers-reduced-motion kills it.
*/

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1c110c 0%, #100a07 65%, #0a0605 100%);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3vh 4vw;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  color: #f4d98a;
}

.case {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(72vw, 62vh);
  padding: 3.2vh 3vw 2.6vh;
  background: linear-gradient(180deg, #3a0e16 0%, #2c0a10 100%);
  border: 1px solid #58151f;
  box-shadow:
    0 0 0 6px #0c0705,
    0 18px 40px rgba(0, 0, 0, 0.55);
}

.medallion {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 3px solid #f2b90f;
  box-shadow: inset 0 0 0 1px #7a5308;
}

.medal-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 250, 220, 0.55) 47%,
    rgba(255, 250, 220, 0.05) 54%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: sweep 2.6s 0.4s 1 ease-out;
}

@keyframes sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.plate-line {
  margin: 2.2vh 0 0;
  font-size: clamp(10px, 1.3vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9b877;
}

.id-row {
  margin: 1.3vh 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55em;
}

.tk {
  font-weight: 700;
  font-size: clamp(15px, 2.1vw, 20px);
  letter-spacing: 0.03em;
  color: #f2b90f;
}

.dv {
  color: #7a5308;
}

.ca {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0;
  text-transform: none;
  color: #efe2b8;
  background: #1a0a06;
  border: 1px solid #58151f;
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
  word-break: break-all;
}

.ca:hover {
  border-color: #f2b90f;
  color: #f2b90f;
}

.links {
  margin-top: 2.4vh;
  display: flex;
  gap: 1.6em;
}

.links a {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a9843f;
  text-decoration: none;
}

.links a:hover {
  color: #f2b90f;
}

.links svg {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .sweep { animation: none; display: none; }
}

@media (max-width: 480px) {
  .plaque { width: min(88vw, 58vh); padding: 2.6vh 5vw 2.2vh; }
}