.vrc-wrap{width:100%;contain:layout style;--vrc-pulse-strength:28%}
.vrc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:100%}
.vrc-card{--vrc-radius:26px;--vrc-border:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:300px;padding:30px 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--vrc-bg) 95%,transparent),color-mix(in srgb,var(--vrc-bg) 83%,transparent));border-radius:var(--vrc-radius);isolation:isolate;transform:translateZ(0) scale(1);will-change:transform;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.42)}
.vrc-border{position:absolute;inset:0;border-radius:inherit;padding:var(--vrc-border);pointer-events:none;z-index:4;background:linear-gradient(135deg,var(--vrc-cyan) 0%,var(--vrc-cyan-dark) 42%,var(--vrc-runner) 58%,var(--vrc-cyan) 72%,var(--vrc-cyan-dark) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--vrc-cyan) 60%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--vrc-cyan) 22%,transparent));opacity:.96}
.vrc-inner-glow{position:absolute;inset:7px;border-radius:calc(var(--vrc-radius) - 7px);z-index:1;pointer-events:none;box-shadow:inset 0 0 20px color-mix(in srgb,var(--vrc-cyan) 12%,transparent),inset 0 0 5px color-mix(in srgb,var(--vrc-runner) 24%,transparent);opacity:.72}
.vrc-card:before,.vrc-card:after{content:"";position:absolute;pointer-events:none;z-index:0}
.vrc-card:before{inset:-20%;background:radial-gradient(circle at 50% 6%,color-mix(in srgb,var(--vrc-cyan) 16%,transparent),transparent 42%),radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--vrc-cyan-dark) 15%,transparent),transparent 45%);opacity:.78}
.vrc-card:after{left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--vrc-cyan-dark),var(--vrc-cyan),var(--vrc-runner),var(--vrc-cyan),transparent);filter:blur(.15px) drop-shadow(0 0 8px var(--vrc-cyan));opacity:.8}
.vrc-glass{position:absolute;left:-8%;top:-6%;width:42%;height:58%;z-index:2;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 34%,transparent 35%);clip-path:polygon(0 0,100% 0,52% 100%,0 100%);opacity:.32}
.vrc-content{position:relative;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vrc-number-row{display:flex;align-items:baseline;justify-content:center;line-height:.9;white-space:nowrap;margin:0}
.vrc-number{font-family:inherit;font-weight:800;color:var(--vrc-text);font-size:clamp(72px,7.4vw,132px);letter-spacing:-.06em;text-shadow:0 2px 0 rgba(255,255,255,.08),0 0 0 transparent}
.vrc-suffix{font-family:inherit;font-weight:800;color:var(--vrc-cyan);font-size:clamp(34px,3.5vw,62px);letter-spacing:-.03em;margin-left:8px;text-shadow:0 0 0 transparent}
.vrc-mini-line{display:block;width:76px;height:2px;margin:22px 0 18px;background:linear-gradient(90deg,transparent,var(--vrc-cyan-dark) 15%,var(--vrc-cyan) 35%,var(--vrc-runner) 50%,var(--vrc-cyan) 70%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--vrc-cyan) 46%,transparent)}
.vrc-label{color:var(--vrc-text);font-size:clamp(13px,1.08vw,18px);font-weight:500;text-transform:uppercase;letter-spacing:.19em;opacity:.92;line-height:1.3}

.vrc-card.vrc-finish{animation:vrcCardFinish .62s cubic-bezier(.2,.75,.25,1) 1}
.vrc-card.vrc-finish .vrc-number,.vrc-card.vrc-finish .vrc-suffix{animation:vrcNumberFinish .62s ease-out 1}
.vrc-card.vrc-finish .vrc-border{animation:vrcBorderFinish .62s ease-out 1}
.vrc-number-row.vrc-pulse .vrc-number,.vrc-number-row.vrc-pulse .vrc-suffix{animation:vrcNumberPulse .56s ease-out 1}

@keyframes vrcCardFinish{0%{transform:translateZ(0) scale(1);filter:brightness(1)}38%{transform:translateZ(0) scale(1.012);filter:brightness(1.11);box-shadow:0 0 16px color-mix(in srgb,var(--vrc-cyan) 40%,transparent),0 0 36px color-mix(in srgb,var(--vrc-cyan) 18%,transparent),0 18px 50px rgba(0,0,0,.42)}100%{transform:translateZ(0) scale(1);filter:brightness(1);box-shadow:0 18px 50px rgba(0,0,0,.42)}}
@keyframes vrcNumberFinish{0%{text-shadow:0 2px 0 rgba(255,255,255,.08),0 0 0 transparent}38%{text-shadow:0 0 10px #fff,0 0 24px var(--vrc-cyan),0 0 48px color-mix(in srgb,var(--vrc-cyan) 72%,transparent)}100%{text-shadow:0 2px 0 rgba(255,255,255,.08),0 0 0 transparent}}
@keyframes vrcNumberPulse{0%,100%{filter:brightness(1);text-shadow:0 2px 0 rgba(255,255,255,.08),0 0 0 transparent}42%{filter:brightness(1.08);text-shadow:0 0 5px color-mix(in srgb,#fff var(--vrc-pulse-strength),transparent),0 0 12px color-mix(in srgb,var(--vrc-cyan) var(--vrc-pulse-strength),transparent),0 0 24px color-mix(in srgb,var(--vrc-cyan) 16%,transparent)}}
@keyframes vrcBorderFinish{0%,100%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--vrc-cyan) 60%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,var(--vrc-cyan) 22%,transparent));opacity:.96}38%{filter:drop-shadow(0 0 7px var(--vrc-runner)) drop-shadow(0 0 20px color-mix(in srgb,var(--vrc-cyan) 58%,transparent));opacity:1}}

@media (max-width:767px){
  .vrc-grid{grid-template-columns:1fr;gap:8px}
  .vrc-card{min-height:150px;padding:10px 14px;border-radius:18px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
  .vrc-content{display:flex;justify-content:center;align-items:center;text-align:center}
  .vrc-number{font-size:clamp(48px,15vw,68px)}
  .vrc-suffix{font-size:clamp(24px,7vw,34px);margin-left:6px}
  .vrc-mini-line{width:54px;margin:10px 0 9px}
  .vrc-label{font-size:10px;letter-spacing:.12em;line-height:1.15}
  .vrc-glass{width:34%;height:70%;opacity:.24}
  .vrc-inner-glow{inset:5px}
}
@media (prefers-reduced-motion:reduce){.vrc-card.vrc-finish,.vrc-card.vrc-finish .vrc-number,.vrc-card.vrc-finish .vrc-suffix,.vrc-card.vrc-finish .vrc-border,.vrc-number-row.vrc-pulse .vrc-number,.vrc-number-row.vrc-pulse .vrc-suffix{animation:none!important}}
