/* tokens
   flat charcoal: #1e2326 (sampled off the avatar's own background, so page and coin fuse)
   gold: #d9a441   bronze shadow: #8a5a20   accent: #ccff00 (chain neon, used at 1 stroke of glow only)
   type: Cutive Mono only - a single struck-metal face, nothing else on this page needs a font
   corner radius: circles only, a coin has no straight edge to round
   spacing scale: none needed, one centered object
   motion: one highlight sweep across the coin on load, nothing idle after
*/

@font-face {
  font-family: "Cutive Mono";
  src: url("assets/fonts/cutive-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #1e2326;
  overflow: hidden;
}

body {
  display: flex;
  min-height: 100vh;
}

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vmin;
}

.coin-wrap {
  position: relative;
  width: min(94vw, 94vh, 940px);
  aspect-ratio: 1;
}

.coin-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: #1e2326;
}

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

.coin-frame::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    75deg,
    transparent 0%,
    rgba(255, 250, 230, 0.5) 45%,
    rgba(255, 250, 230, 0.85) 50%,
    rgba(255, 250, 230, 0.5) 55%,
    transparent 100%
  );
  transform: translateX(-40%) rotate(0deg);
  mix-blend-mode: overlay;
  animation: sweep 1.9s ease-out 0.6s 1 both;
  pointer-events: none;
}

@keyframes sweep {
  from { transform: translateX(-40%); }
  to { transform: translateX(260%); }
}

.ring-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ring {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ring-text {
  font-family: "Cutive Mono", ui-monospace, monospace;
  font-size: 4.6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  fill: #d9a441;
  filter: drop-shadow(0 0 1.1px #8a5a20);
  transition: fill 0.25s ease;
}

.ring-btn:hover .ring-text,
.ring-btn:focus-visible .ring-text {
  fill: #f2e6c9;
}

.ring-btn.copied .ring-text {
  fill: #ccff00;
}

.ring-btn:focus-visible {
  outline: 1px dashed rgba(204, 255, 0, 0.6);
  outline-offset: 4px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .coin-frame::after { animation: none; }
}

@media (max-width: 480px) {
  .ring-text { font-size: 5.1px; letter-spacing: 0.1em; }
}


/* на странице не было ни одной ссылки — ни X, ни кнопки купить (09.09.2026) */
.links {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 1.6em;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.links a {
  color: #d8b24a;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 178, 74, .45);
}
.links a:hover { border-bottom-color: #d8b24a; }