/* Reusable VelcroReveal · a genuine detachable fabric prop.
   No fullscreen modal is scaled into a tiny label; the accessible report
   appears only after this isolated prop has completed its two-sided flip. */

.vr-stage{
  position:fixed;
  inset:0;
  z-index:2147483000;
  overflow:hidden;
  touch-action:none;
  pointer-events:auto;
  perspective:1250px;
  isolation:isolate;
}
.vr-curtain{
  position:absolute;
  inset:0;
  opacity:0;
  background:#080a0fc7;
  pointer-events:auto;
}
.vr-card{
  position:fixed;
  z-index:1;
  box-sizing:border-box;
  perspective:1200px;
  transform-style:preserve-3d;
  border-radius:16px;
  filter:drop-shadow(7px 14px 13px #0008);
  contain:layout style;
}
.vr-rotor{
  position:relative;
  width:100%;height:100%;
  border-radius:inherit;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-origin:50% 92%;
  will-change:transform;
}
.vr-front,.vr-back{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  border-radius:inherit;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.vr-front{
  border:2px solid #c3c8d2;
  color:#111217;
  background:
    repeating-linear-gradient(90deg,#3846570b 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 43% -7%,#fff 0%,#f4f5f9 58%,#cbd1db 100%);
  box-shadow:inset 0 6px 8px #fff,inset 0 -12px 12px #a8aebba6,0 4px 12px #0009;
}
.vr-front:before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:12px;
  border:2px dashed #6b71818c;
  pointer-events:none;
}
.vr-crowd .vr-front{
  border-color:#d0b031;
  background:
    repeating-linear-gradient(90deg,#664b080b 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 43% -7%,#fff6b6 0%,#ffe557 61%,#d8b53d 100%);
  box-shadow:inset 0 6px 8px #fffae0,inset 0 -12px 12px #bd962fa6,0 4px 12px #0009;
}
.vr-front-title{
  display:block;
  max-width:94%;
  padding:10px 14px;
  text-align:center;
  font:950 clamp(13px,2.6vw,25px)/1.1 Inter,system-ui,sans-serif;
  text-wrap:balance;
  overflow-wrap:anywhere;
  position:relative;
  z-index:1;
}
.vr-must .vr-front-title{
  outline:3px solid #ff4545;
  outline-offset:-2px;
  border-radius:48% 52% 55% 45%;
  transform:rotate(-2deg);
}
.vr-like .vr-front-title{box-shadow:inset 0 -4px #ff781e}
.vr-corner{
  position:absolute;
  right:0;top:0;
  width:37px;height:37px;
  border-radius:0 13px 0 19px;
  background:linear-gradient(224deg,#fff 0%,#d3dae5 42%,#626c7d 49%,#131922 54%,transparent 56%);
  clip-path:polygon(0 0,100% 0,100% 100%);
  filter:drop-shadow(-3px 4px 3px #0007);
  opacity:0;
  transform-origin:top right;
  pointer-events:none;
}
.vr-crowd .vr-corner{
  background:linear-gradient(224deg,#fff7bf 0%,#ffe557 42%,#a7892b 49%,#171922 54%,transparent 56%);
}
.vr-back{
  transform:rotateX(180deg);
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(9px,2.5vw,26px);
  border:3px solid #686f7d;
  color:#e6e8f0;
  background:
    repeating-linear-gradient(90deg,#e0e6ed15 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,#f7f9ff0d 0 1px,transparent 1px 5px),
    url("./assets/vinyl-grain.svg"),
    linear-gradient(150deg,#4b5360,#252a34 38%,#10141c 87%);
  background-size:auto,auto,384px 384px,auto;
  box-shadow:inset 0 6px 12px #ffffff25,inset 0 -17px 20px #000c;
}
.vr-hook-top,.vr-hook-bottom{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:clamp(12px,4vh,39px);
  border:2px solid #9da7b5;
  border-radius:9px;
  background:
    repeating-linear-gradient(90deg,#ecf1f392 0 1px,#1b2029 1px 4px),
    repeating-linear-gradient(0deg,#f6f8fd4a 0 1px,transparent 1px 4px),
    #2d3540;
  box-shadow:inset 0 4px 7px #000b,0 5px 12px #0008;
}
.vr-back-patch{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:clamp(7px,2.6vh,20px);
  width:min(100%,440px);
  max-height:70%;
  min-height:95px;
  padding:clamp(12px,3vh,25px);
  box-sizing:border-box;
  border-radius:22px;
  border:3px solid #d4b63b;
  color:#111419;
  text-align:center;
  background:
    repeating-linear-gradient(90deg,#8d6e1f0d 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at top,#fff3a6,#ffe557 59%,#d9b83b);
  box-shadow:inset 0 5px 7px #fffae599,inset 0 -10px 10px #ab8d3099,
    0 11px 22px #000a;
  transform:rotate(-.8deg);
}
.vr-back-patch:after{
  content:"";position:absolute;inset:8px;
  border:2px dashed #5d522971;
  border-radius:14px;
  pointer-events:none;
}
.vr-back-kicker,.vr-back-subtitle{
  font:900 clamp(8px,1.7vw,13px)/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.11em;
  text-wrap:balance;
}
.vr-back-subtitle{color:#a43314}
.vr-back-title{
  display:block;
  max-width:100%;
  font:950 clamp(24px,7vw,52px)/1 Impact,"Arial Black",sans-serif;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
/* Real hook-and-loop backing is part of the fixed lineup even before a
   tap. It becomes visible when the removable fabric label is lifted. */
.velcro-mount .velcro-underlay{
  position:absolute;
  inset:5px;
  z-index:0;
  pointer-events:none;
  border-radius:15px;
  border:2px solid #707780;
  background:
    repeating-linear-gradient(0deg,#e0e6ee34 0 1px,#151820 1px 4px),
    repeating-linear-gradient(90deg,#e0e6ee24 0 1px,#0a0d13 1px 4px),
    linear-gradient(145deg,#4a4d59,#181a21);
  background-blend-mode:screen,normal,normal;
  box-shadow:inset 0 5px 9px #000c,inset 0 0 0 4px #292d35;
}
.velcro-mount .velcro-underlay:after{
  content:"";
  position:absolute;inset:9px;
  border:1px dashed #cbd2dc65;
  border-radius:7px;
}
.velcro-mount > .lineup-choice{z-index:1}
.velcro-mount.vr-peel-open{
  z-index:4;
  border-color:#ffe557;
  box-shadow:0 0 0 2px #ffe55766,0 8px 17px #000a;
}
.velcro-mount.vr-peel-open .velcro-underlay{
  opacity:1;
  border-color:#a4a9b5;
  box-shadow:inset 0 6px 11px #000e,inset 0 0 0 5px #252a32;
}
.velcro-mount > .lineup-choice.vr-source-hidden{
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
  transform:none!important;
}
/* Only the already completed physical prop is replaced by the native sheet.
   This overrides old bottom-slide/hinge animations for wall-origin reports. */
dialog.band-dialog.wall-detail-sheet[open].vr-arrived{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
}
dialog.band-dialog.wall-detail-sheet[open].vr-arrived .report-peel-band{display:none!important}
@media(max-width:700px){
  .vr-back-patch{border-radius:17px}
  .vr-back-title{font-size:clamp(25px,9vw,43px)}
  .vr-back-kicker,.vr-back-subtitle{font-size:clamp(8px,2vw,12px)}
}
@media(prefers-reduced-motion:reduce){
  .vr-stage{display:none!important}
  .vr-source-hidden{opacity:1!important;visibility:visible!important}
  dialog.band-dialog.wall-detail-sheet[open].vr-arrived{animation:none!important}
}