:root {
  --bg: #000;
  --fg: #f1f1f1;
  font-family: Inter, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-synthesis: none;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); overscroll-behavior: none; }
body { overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; }
.stage:focus-visible { outline: none; }

.app { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: clip; background: var(--bg); }

/* WebGL ring background */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── Stage ───────────────────────────────── */
.stage { position: absolute; inset: 0; outline: none; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stage.dragging, .stage.dragging .card { cursor: grabbing; }
.stage-inner { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 50%; }

/* ── Card ────────────────────────────────── */
.card {
  --cw: 480px;
  --r: calc(var(--cw) * 0.0458);
  position: absolute; left: 50%; top: 0;
  width: var(--cw); height: calc(var(--cw) / 1.586);
  margin-left: calc(var(--cw) / -2); margin-top: calc(var(--cw) / -3.172);
  transform-style: preserve-3d; will-change: transform;
  cursor: pointer;
  visibility: hidden;
}
.card.ready { visibility: visible; }
.card.front-card { cursor: copy; }

/* thickness when the card turns edge-on + a soft drop shadow */
.edge { position: absolute; inset: 0; border-radius: var(--r); background: var(--edge); }
.edge.e1 { transform: translateZ(-1px); }
.edge.e2 { transform: translateZ(-2px); }
.edge.e3 { transform: translateZ(-3px); background: color-mix(in srgb, var(--edge) 55%, #000); box-shadow: 0 calc(var(--cw) * .06) calc(var(--cw) * .09) calc(var(--cw) * -.04) rgb(0 0 0 / .9); }

/* the face is flat: a pre-rendered canvas + two moving light layers */
.face { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; transform: translateZ(0); }
.face canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.spot, .streak { position: absolute; pointer-events: none; will-change: transform; }
.spot {
  left: -40%; top: -60%; width: 180%; height: 220%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .2), rgb(255 255 255 / .06) 45%, rgb(255 255 255 / 0) 75%);
}
.streak {
  left: -60%; top: -20%; width: 70%; height: 140%;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .08) 45%, rgb(255 255 255 / .14) 50%, rgb(255 255 255 / .08) 55%, rgb(255 255 255 / 0));
  transform: rotate(18deg);
}
.shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }

/* light sweep when a card is tapped/copied */
.flash {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 60%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 40%, rgb(255 255 255 / .42) 50%, rgb(255 255 255 / .16) 60%, rgb(255 255 255 / 0) 100%);
  transform: translateX(-110%) skewX(-14deg);
}
.card.tapped .flash { animation: sweep .62s cubic-bezier(.25, .7, .25, 1) .04s; }
@keyframes sweep {
  0% { opacity: 1; transform: translateX(-110%) skewX(-14deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(200%) skewX(-14deg); }
}

/* ── Bottom counter ──────────────────────── */
.bottom-bar { position: absolute; left: 0; right: 0; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 3; display: flex; justify-content: center; align-items: center; pointer-events: none; }
/* soft fade at the bottom edge so cards passing underneath never clash with the counter */
.app::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(150px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .6) 45%, rgb(0 0 0 / 0) 100%);
  pointer-events: none; z-index: 2;
}
.counter { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #6a6a6a; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.counter span:first-child { color: #fff; }
.counter i { width: 24px; height: 1px; background: #333; }

/* ── Toast: small, quiet confirmation above the counter ─ */
.toast {
  position: fixed; bottom: calc(62px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 6px) scale(.96);
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  background: rgb(22 22 22 / .78); border: 1px solid rgb(255 255 255 / .07);
  color: #bdbdbd; font-size: 11px; font-weight: 450; letter-spacing: .01em; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.toast svg { width: 11px; height: 11px; color: #fff; flex-shrink: 0; }
.toast b { color: #f1f1f1; font-weight: 500; }
.toast.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (min-width: 1600px) { .bottom-bar { bottom: 34px; } }
@media (max-width: 700px) { .bottom-bar { bottom: calc(22px + env(safe-area-inset-bottom)); } .toast { bottom: calc(52px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }