/* --- Fade safety override (do NOT disable transforms) --- */
body.no-fade #widget,
body.no-fade header,
body.no-fade .title,
body.no-fade .description {
  opacity: 1 !important;
  transition: none !important;
  /* intentionally NOT setting transform here */
}

h1, h2 {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

/* -------------------- GLOBAL -------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:#131318;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:center;
  overflow:hidden;
}

/* -------------------- LAYOUT -------------------- */
main {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100svh;
  max-width:1024px;
  margin:0 auto;
}

/* Scale only the card/coin, not all text */
#widget { font-size: clamp(5rem, 2vw + 5rem, 9rem); }

/* Ensure content sits above background */
main, #widget, header, canvas#coin, .description, .status { position: relative; z-index: 1; }

/* Lottie background (auto-hidden on mobile-simple) */
#lottie-bg {
  mix-blend-mode: screen;
  position:fixed;
  left:0; right:0; bottom:0;
  width:100vw; height:50vh;
  pointer-events:none; z-index:0; opacity:0.35;
  object-fit:cover;
}

/* -------------------- CARD / COIN -------------------- */
#widget {
  width:2.5em; height:2.3em;
  opacity:0;
  margin-top:0.3em; margin-bottom:0.4em;
  border-radius:0.44em; padding:0.12em;
  background:#21232a;
  box-shadow:2px 2px 1px -1px rgba(114,130,134,0.35) inset;
  transition: opacity 1.1s ease, transform 1.1s ease;
  transform: translate3d(0,0,0) scale3d(1.04,1.04,1);
}

header {
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-radius:0.35em;
  background:linear-gradient(180deg,#585c65 0%,#555961 100%);
  box-shadow:
    2px 2px 0 -1px rgba(255,255,255,0.3) inset,
    0 -0.06em 1px 2px #3d3d47 inset,
    0 -0.1em 0.2em 0.1em rgba(255,255,255,0.15) inset,
    0 0.4em 0.2em -0.1em rgba(19,23,24,0.45);
  transform: scale3d(0.95,0.95,1);
}

canvas#coin {
  width:100%;
  aspect-ratio:1;
  user-select:none; -webkit-user-drag:none; touch-action:none;
  margin-top:-1em; margin-bottom:-50%;
  filter:drop-shadow(25px 70px 20px rgba(34,38,48,0.5));
  cursor:grab;
}
canvas#coin.dragging { cursor:grabbing; }

/* -------------------- TITLES -------------------- */
.title {
  font-size:1em; font-weight:800;
  color:#b1b6c3; letter-spacing:0.2em; opacity:0;
  text-shadow:-1px -1px 0 rgba(255,255,255,0.6), 0 0.25em 0.2em rgba(9,12,15,0.2);
  transition: opacity 1s ease;
}
h2 { color:#a9aab5; font-size:0.125em; font-weight:600; letter-spacing:0.32em; }

/* -------------------- CTA + STATUS -------------------- */
.description { opacity:0; transition: opacity 1.6s ease; }
.description a[role="button"] {
  display:inline-block; padding:0.8rem 1.3rem;
  border-radius:999px; border:1px solid rgba(232,234,240,0.25);
  background:rgba(255,255,255,0.06); color:#e8eaf0;
  font-size:1rem; text-decoration:none; line-height:1.2;
}
.description a[role="button"]:hover { border-color:rgba(232,234,240,0.5); }
.status { font-size:0.9rem; margin-top:0.6rem; opacity:0.9; }

/* -------------------- LOADER -------------------- */
.loader {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:90%; max-width:150px; height:2px;
  background-color:rgba(255,255,255,0.2);
  transition: opacity 500ms ease, visibility 500ms ease;
}
.loader.hide { opacity:0 !important; visibility:hidden !important; }
.loader span {
  display:flex; width:25%; height:100%; background:#fff;
  animation: loader 1.3s infinite alternate ease-in-out;
}
@keyframes loader {
  0% { opacity:0; transform:translateX(0%); }
  50% { opacity:1; }
  100% { opacity:0; transform:translateX(300%); }
}

/* -------------------- MOBILE SIMPLE MODE -------------------- */
body.mobile-simple main > *:not(.description):not(.status) { display:none !important; }
body.mobile-simple main { justify-content:center; align-items:center; }
body.mobile-simple .description { opacity:1 !important; }
body.mobile-simple .description a[role="button"] {
  padding:1rem 2rem; font-size:1.2rem;
  border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.1);
}
body.mobile-simple .status { display:none; }
body.mobile-simple #lottie-bg { display:none !important; }