*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#02070c}
body{display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif}

.stage{
  position:relative;
  width:min(100vw,calc(100vh * 4 / 3));
  aspect-ratio:4/3;
  overflow:hidden;
  background:#06121d;
  box-shadow:0 0 90px rgba(0,0,0,.85)
}

.poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none
}

.counter-area{
  position:absolute;
  left:15.25%;
  top:56.5%;
  width:69.5%;
  height:15.6%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start
}

.counter-area h2{
  margin:0 0 1.2%;
  color:#fff;
  font-size:clamp(10px,1.42vw,23px);
  line-height:1;
  font-weight:500;
  letter-spacing:.14em;
  text-shadow:0 2px 4px rgba(0,0,0,.9)
}

.counter-shell{
  width:90%;
  flex:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2.35%;
  padding:2.1% 3.2% 2.3%;
  border:2px solid rgba(255,255,255,.94);
  border-left-color:#20dcff;
  border-right-color:#ffda1c;
  border-radius:5%;
  background:
    linear-gradient(90deg,rgba(1,79,112,.43),rgba(3,18,28,.84) 49%,rgba(88,61,0,.46));
  box-shadow:
    0 0 8px rgba(255,255,255,.80),
    -12px 0 30px rgba(18,210,255,.55),
    12px 0 30px rgba(255,211,28,.55),
    inset 0 0 18px rgba(255,255,255,.08)
}

.counter-card{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-rows:1fr 24%;
  overflow:hidden;
  border-radius:5.5%;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(180deg,rgba(3,35,51,.98) 0 49%,rgba(1,16,25,.99) 50% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 10px 18px rgba(255,255,255,.025),
    0 5px 15px rgba(0,0,0,.45)
}

.counter-card.gold{
  background:linear-gradient(180deg,rgba(111,79,0,.96) 0 49%,rgba(47,33,0,.99) 50% 100%)
}

.counter-card::before{
  content:"";
  position:absolute;
  left:0;right:0;top:49.4%;
  height:1px;
  background:rgba(255,255,255,.19);
  box-shadow:0 1px 0 rgba(0,0,0,.94)
}

.counter-card strong{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:clamp(26px,5.85vw,75px);
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
  text-shadow:0 3px 0 #000,0 0 10px rgba(255,255,255,.18)
}

.counter-card span{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:clamp(8px,1.17vw,19px);
  line-height:1;
  font-weight:700;
  letter-spacing:.055em;
  background:rgba(0,0,0,.30);
  border-top:1px solid rgba(255,255,255,.09)
}

.counter-card.cyan{box-shadow:inset 0 0 0 1px rgba(18,203,246,.25),0 5px 15px rgba(0,0,0,.45)}
.counter-card.gold{box-shadow:inset 0 0 0 1px rgba(255,210,22,.27),0 5px 15px rgba(0,0,0,.45)}

@media(prefers-reduced-motion:no-preference){
  .counter-card.changed strong{animation:tick .28s ease}
}
@keyframes tick{
  0%{transform:translateY(-8%) scale(.985);filter:brightness(.78)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}