@property --c {
  syntax: '<color>';
  inherits: true;
  initial-value: #ff2d95;
}

.n3d-stage {
  --c: #ff2d95;
  --sx: 10px;
  --sy: 14px;
  --hl: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #07070b;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.75);
  touch-action: pan-y;
  user-select: none;
}

.n3d-svg { position: absolute; width: 0; height: 0; }

.n3d-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.n3d-rig > * { position: absolute; left: 50%; top: 50%; pointer-events: none; }

.n3d-wall {
  width: 190%;
  height: 190%;
  transform: translate(-50%, -50%);
  background-color: #14141c;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.07), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%);
}

.w-brick .n3d-wall {
  background-color: #2b1a17;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255, 190, 150, 0.1), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='56'><rect width='72' height='56' fill='%232b1a17'/><g fill='%23402621'><rect x='2' y='2' width='68' height='24' rx='2'/><rect x='-34' y='30' width='68' height='24' rx='2'/><rect x='38' y='30' width='68' height='24' rx='2'/></g><g fill='%23ffffff' fill-opacity='.04'><rect x='2' y='2' width='68' height='7'/><rect x='-34' y='30' width='68' height='7'/><rect x='38' y='30' width='68' height='7'/></g></svg>");
}

.w-light .n3d-wall {
  background-color: #cfcbc4;
  background-image: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.55), transparent 65%);
}

.w-wood .n3d-wall {
  background-color: #3b271a;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(255, 220, 170, 0.04) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 45%, rgba(255, 190, 120, 0.12), transparent 60%);
}

.n3d-wallglow {
  transform: translate(-50%, -50%) translateZ(2px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 50%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity 0.4s;
}
.is-lit .n3d-wallglow { opacity: 0.85; }
.w-light .n3d-wallglow { opacity: 0 !important; }

.n3d-shadow,
.n3d-contour {
  white-space: pre;
  text-align: center;
  line-height: 1.18;
}

.n3d-shadow {
  transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) translateZ(1px);
  color: rgba(0, 0, 0, 0.55);
  filter: blur(7px);
}

.n3d-contour {
  transform: translate(-50%, -50%) translateZ(10px);
  color: rgba(200, 230, 255, 0.2);
  text-shadow: 0 0 0 transparent;
  display: none;
}

.n3d-board {
  transform: translate(-50%, -50%) translateZ(10px);
  border-radius: 10px;
  display: none;
}
.n3d-board.b-rect,
.n3d-board.b-mirror { display: block; }

.n3d-board.b-rect {
  background: linear-gradient(135deg, #17171d, #0b0b0f);
  border: 1px solid #2d2d38;
  box-shadow: var(--sx) var(--sy) 34px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.n3d-board.b-mirror {
  background:
    linear-gradient(115deg, transparent calc(var(--hl) - 18%), rgba(255, 255, 255, 0.28) var(--hl), transparent calc(var(--hl) + 18%)),
    linear-gradient(135deg, #8d95a3, #4b5260 55%, #8b93a1);
  border: 1px solid #c9ced8;
  box-shadow: var(--sx) var(--sy) 34px rgba(0, 0, 0, 0.6);
}

.n3d-so {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #a9aeb8 45%, #4d515a);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
  transform: translateZ(6px);
  transform-style: preserve-3d;
}
.n3d-so:nth-child(1) { left: 12px; top: 12px; }
.n3d-so:nth-child(2) { right: 12px; top: 12px; }
.n3d-so:nth-child(3) { left: 12px; bottom: 12px; }
.n3d-so:nth-child(4) { right: 12px; bottom: 12px; }
.n3d-board.no-standoffs .n3d-so { display: none; }

.n3d-chain {
  width: 3px;
  transform: translateX(-50%) translateZ(10px);
  background: repeating-linear-gradient(180deg, #c8ccd4 0 5px, #4d515a 5px 8px);
  top: auto;
  display: none;
}

.n3d-stand {
  transform: translate(-50%, 0) translateZ(10px);
  height: 16px;
  display: none;
}
.n3d-stand span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a4d56, #1c1d22);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.7);
}

.n3d-text {
  white-space: pre;
  text-align: center;
  line-height: 1.18;
}

.n3d-t-back {
  transform: translate(-50%, -50%) translateZ(14px);
  color: rgba(255, 255, 255, 0.1);
  -webkit-text-stroke: 0.05em rgba(255, 255, 255, 0.16);
}
.is-premium .n3d-t-back { -webkit-text-stroke-width: 0.085em; }

.n3d-t-mid {
  transform: translate(-50%, -50%) translateZ(20px);
  color: rgba(190, 190, 180, 0.4);
}

.n3d-t-front {
  transform: translate(-50%, -50%) translateZ(26px);
  color: rgba(235, 235, 225, 0.55);
  text-shadow: 0 0.015em 0.02em rgba(0, 0, 0, 0.7);
  transition: color 0.35s, text-shadow 0.35s;
}

.is-lit .n3d-t-mid {
  color: var(--c);
  text-shadow: 0 0 0.05em var(--c), 0 0 0.12em var(--c);
}

.is-lit .n3d-t-front {
  color: color-mix(in srgb, var(--c) 16%, #fff);
  text-shadow:
    0 0 0.02em #fff,
    0 0 0.06em var(--c),
    0 0 0.15em var(--c),
    0 0 0.32em var(--c),
    0 0 0.65em var(--c);
}

.w-light.is-lit .n3d-t-front {
  text-shadow: 0 0 0.02em #fff, 0 0 0.06em var(--c), 0 0 0.14em var(--c);
}

.is-rgb { animation: n3d-rgb 9s linear infinite; }

@keyframes n3d-rgb {
  0% { --c: #ff2d95; }
  17% { --c: #ff8a1f; }
  33% { --c: #ffe600; }
  50% { --c: #39ff14; }
  67% { --c: #00e5ff; }
  83% { --c: #b84dff; }
  100% { --c: #ff2d95; }
}

.is-igniting .n3d-t-mid,
.is-igniting .n3d-t-front { animation: n3d-ignite 1s steps(1, end); }

@keyframes n3d-ignite {
  0% { opacity: 0.1; }
  10% { opacity: 1; }
  18% { opacity: 0.2; }
  30% { opacity: 1; }
  38% { opacity: 0.35; }
  55% { opacity: 1; }
  62% { opacity: 0.6; }
  100% { opacity: 1; }
}

.n3d-dim {
  transform: translateZ(2px);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-family: system-ui, sans-serif;
  display: none;
}
.n3d-dim-w {
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  transform: translate(-50%, 0) translateZ(2px);
}
.n3d-dim-w span { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.n3d-dim-h {
  width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  transform: translate(0, -50%) translateZ(2px);
}
.n3d-dim-h span { position: absolute; top: 50%; left: -6px; transform: translate(-100%, -50%); white-space: nowrap; }
.w-light .n3d-dim { color: rgba(0, 0, 0, 0.6); }
.w-light .n3d-dim-w { border-top-color: rgba(0, 0, 0, 0.4); }
.w-light .n3d-dim-h { border-left-color: rgba(0, 0, 0, 0.4); }

.n3d-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.n3d-flat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  --c: #ff2d95;
}
.n3d-flat-text {
  white-space: pre;
  text-align: center;
  line-height: 1.18;
  color: color-mix(in srgb, var(--c) 16%, #fff);
  text-shadow:
    0 0 0.02em #fff,
    0 0 0.06em var(--c),
    0 0 0.15em var(--c),
    0 0 0.32em var(--c),
    0 0 0.65em var(--c);
}

@media (prefers-reduced-motion: reduce) {
  .is-rgb { animation: none; }
  .is-igniting .n3d-t-mid,
  .is-igniting .n3d-t-front { animation: none; }
}