/* ---------- stage ---------- */
.stage{
  position:relative;
  overflow:hidden;
  height: min(52vh, 440px);
  min-height:300px;
  /*margin-top: 0.1rem;*/
  perspective: 1700px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  user-select:none;
}
.ring-mark{
  position:absolute; left:50%; top:52%; width:520px; height:520px;
  transform: translate(-50%,-50%);
  border:1px solid var(--ink-14); border-radius:50%;
  opacity:.5; pointer-events:none;
}
.ring-mark.small{ width:400px; height:400px; opacity:.35; }
@media (max-width:560px){
  .ring-mark{ width:320px; height:320px; }
  .ring-mark.small{ width:240px; height:240px; }
}

.carousel-arc{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  outline:none;
  cursor: grab;
}
.carousel-arc:active{ cursor:grabbing; }
.carousel-arc:focus-visible{ outline:2px solid var(--blue); outline-offset:8px; }

.plate{
  position:absolute; top:50%; left:50%;
  width: 263px; height: 350px;
  margin: -175px 0 0 -131px;
  border-radius: 18px;
  overflow:hidden;
  background: linear-gradient(155deg, var(--card-a), var(--card-b));
  box-shadow: 0 22px 40px -20px rgba(13,27,51,.45);
  will-change: transform, opacity;
  pointer-events:none;
}
.plate.is-live{ pointer-events:auto; cursor:pointer; }
.plate .grid-overlay{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(25deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
}
.plate .art{
  position:absolute; width:100%; height:100%;
  /*position:absolute; left:29%; top:32%; width:100%; height:100%;*/
  /*position:absolute; left:50%; top:44%; width:64%; height:64%;*/
  /*transform: translate(-5%,-5%, -5%,-5%);*/
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.plate .scrim{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background: linear-gradient(180deg, transparent, rgba(4,8,16,.75));
}
.plate .no{
  position:absolute; top:.85rem; left:.95rem;
  color: rgba(255,255,255,.85); font-size:.72rem; font-weight:600; letter-spacing:.03em;
}
.plate .name{
  position:absolute; left:.95rem; bottom:.85rem;
  color:#fff; font-size:1.05rem; font-weight:600;
}

@media (max-width: 900px){
  .stage{ margin-top: 2.2rem; }
}
@media (max-width:560px){
  .stage{ margin-top:1.5rem; height:min(46vh, 360px); min-height:260px; }
  .plate{ width:188px; height:250px; margin:-125px 0 0 -94px; border-radius:14px; }
  .plate .name{ font-size:.86rem; }
}

.arc-nav{
  position:absolute; top:50%; width:42px; height:42px; margin-top:-21px;
  border-radius:50%; border:1px solid var(--ink-14); background: rgba(255,255,255,.75);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:60;
}
.arc-nav.prev{ left: max(1%, 6px); } .arc-nav.next{ right: max(1%, 6px); }
.arc-nav{ display:none; } /* stage-level arrows hidden; bottom-right pair used, matching reference */

.hint{
  text-align:center; margin-top:0.6rem;
  font-size:.7rem; letter-spacing:.16em; font-weight:600; color: var(--ink-40);
}