html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: transparent; font-family: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
#vox-mini-root { position: absolute; inset: 0; pointer-events: none; }
.hidden, .mode-hidden { display: none !important; }
.game-panel { pointer-events: none; }

/* Identité Twitch */
.identity-panel {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 18px 5.5%; pointer-events: none;
}
.identity-card {
  width: min(560px, 100%); padding: 14px 18px 15px; text-align: center;
  color: #f5efe2; background: rgba(11,10,16,.92); border: 1px solid rgba(192,151,255,.72);
  border-radius: 18px; box-shadow: 0 8px 26px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events: auto;
}
.identity-title {
  font: 800 clamp(15px,1.8vw,22px)/1.05 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing: .055em; margin-bottom: 7px;
}
.identity-text {
  font: 600 clamp(12px,1.35vw,16px)/1.3 Inter,"Segoe UI",Arial,sans-serif;
  opacity: .94; margin-bottom: 11px;
}
.identity-button {
  appearance: none; border: 1px solid rgba(211,184,255,.88); border-radius: 999px;
  padding: 8px 16px; background: rgba(121,64,207,.92); color: #fff; cursor: pointer;
  font: 800 clamp(12px,1.3vw,15px)/1 Inter,"Segoe UI",Arial,sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.identity-button:hover:not(:disabled) { transform: translateY(-1px); }
.identity-button:disabled { opacity: .65; cursor: default; }

/* Titres de jeu */
.game-heading,
.game-instruction,
.card-question {
  width: max-content; max-width: calc(100% - 24px); margin-left: auto; margin-right: auto;
  color: #f5efe2; background: rgba(11,10,16,.88); border: 1px solid rgba(192,151,255,.62);
  border-radius: 999px; box-shadow: 0 5px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow: 0 2px 3px rgba(0,0,0,.7); text-align: center;
}
.game-heading {
  margin-bottom: 7px; padding: 6px 14px;
  font: 800 clamp(13px,1.55vw,20px)/1.1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing: .045em;
}
.game-instruction,
.card-question {
  margin-top: 0; margin-bottom: 12px; padding: 7px 16px;
  font: 700 clamp(14px,1.7vw,22px)/1.15 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing: .02em;
}

/* PPC */
#ppc-panel {
  position: absolute; left: 50%; bottom: 7.5%; transform: translateX(-50%);
  width: min(760px, calc(100% - 40px));
}
.ppc-choices { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,36px); }
.ppc-choice {
  appearance:none; width:clamp(130px,17vw,210px); aspect-ratio:1/1;
  padding:0; border:0; background:transparent; cursor:default; opacity:1;
  pointer-events:none; transform:translateY(0) scale(1);
  transition:transform 140ms ease, opacity 180ms ease, filter 140ms ease;
}
#ppc-panel.owner { pointer-events:auto; }
#ppc-panel.owner .ppc-choice:not(:disabled) { pointer-events:auto; cursor:pointer; }
.hand { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.38)) drop-shadow(0 0 4px rgba(105,52,190,.22));
  transition:transform 140ms ease, filter 140ms ease, opacity 180ms ease; }
.ppc-choice.selected { transform:translateY(-4px) scale(1.09); z-index:2; }
.ppc-choice.selected .hand { filter:drop-shadow(0 9px 12px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(138,72,255,.85)) drop-shadow(0 0 24px rgba(138,72,255,.52)); }
.ppc-choice.not-selected { opacity:0; pointer-events:none !important; transform:scale(.88); }

/* CARD */
#card-panel {
  position:absolute; left:50%; bottom:4.5%; transform:translateX(-50%);
  width:min(1040px, calc(100% - 30px));
}
.card-choices { display:flex; justify-content:center; align-items:flex-end; gap:clamp(10px,1.9vw,24px); perspective:1100px; }
.card-choice {
  appearance:none; position:relative; width:clamp(105px,12.6vw,158px); aspect-ratio:543/988;
  padding:0; border:0; background:transparent; pointer-events:none; cursor:default;
  opacity:1; transform:translateY(0) scale(1); transition:opacity 220ms ease, transform 180ms ease, filter 180ms ease;
}
#card-panel.mode-color .card-choice { width:clamp(135px,17vw,205px); }
#card-panel.owner:not(.dealing) { pointer-events:auto; }
#card-panel.owner:not(.dealing) .card-choice:not(:disabled) { pointer-events:auto; cursor:pointer; }
.card-flipper { position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(0deg); }
.card-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.card-face.card-back { transform:rotateY(180deg); }
.card-face img { display:block; width:100%; height:100%; object-fit:fill; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.38)); }

/* Chaque carte part dos visible, puis se retourne avec un léger décalage. */
#card-panel.dealing .card-flipper {
  animation:voxCardDealFlip 620ms cubic-bezier(.16,.82,.28,1) both;
  animation-delay:calc(var(--deal-index, 0) * 95ms);
}
@keyframes voxCardDealFlip {
  0% { transform:translateY(14px) scale(.92) rotateY(180deg); opacity:.2; }
  52% { transform:translateY(-3px) scale(1.025) rotateY(86deg); opacity:1; }
  100% { transform:translateY(0) scale(1) rotateY(0deg); opacity:1; }
}
.card-choice.selected { transform:translateY(-8px) scale(1.055); z-index:3; }
.card-choice.selected .card-front img { filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)) drop-shadow(0 0 12px rgba(146,82,255,.9)) drop-shadow(0 0 28px rgba(146,82,255,.48)); }
.card-choice.not-selected { opacity:0; pointer-events:none !important; transform:translateY(8px) scale(.90); }

.ppc-choice:focus-visible, .card-choice:focus-visible, .identity-button:focus-visible { outline:3px solid rgba(153,87,255,.9); outline-offset:5px; border-radius:18px; }

@media (hover:hover) and (pointer:fine) {
  #ppc-panel.owner .ppc-choice:not(:disabled):hover { transform:translateY(-5px) scale(1.06); }
  #card-panel.owner:not(.dealing) .card-choice:not(:disabled):hover { transform:translateY(-7px) scale(1.045); }
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .identity-panel { padding: 0 10px 4%; }
  .identity-card { padding: 11px 12px 12px; }
  #ppc-panel { bottom:4%; width:calc(100% - 20px); }
  .game-heading { margin-bottom:5px; padding:5px 10px; }
  .game-instruction, .card-question { margin-bottom:8px; padding:6px 11px; }
  .ppc-choices { gap:6px; }
  .ppc-choice { width:min(30vw,150px); }
  #card-panel { bottom:3%; width:calc(100% - 14px); }
  .card-choices { gap:6px; }
  .card-choice { width:min(22.3vw,125px); }
  #card-panel.mode-color .card-choice { width:min(35vw,175px); }
}
@media (prefers-reduced-motion:reduce) {
  .ppc-choice,.hand,.card-choice,.identity-button { transition:none; }
  #card-panel.dealing .card-flipper { animation:none; }
}


/* FEED V2 */
#feed-panel {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  --feed-mouth-x:10.73%;
  --feed-mouth-y:83.88%;
  --vox-gold:#e2aa38;
  --vox-gold-bright:#ffd875;
  --vox-black:#111014;
  --vox-ivory:#fff6df;
}

#feed-panel.owner { pointer-events:none; }
.feed-arena { position:absolute; inset:0; pointer-events:none; }

/* Vox FEED V2 au Action Spot. Position volontairement exposée pour calibration. */
.feed-vox-video {
  position:absolute;
  left:4%;
  bottom:-2%;
  width:28%;
  aspect-ratio:1/1;
  object-fit:contain;
  z-index:4;
  pointer-events:none;
  background:transparent;
  /* Pas de filter CSS sur une vidéo alpha animée : Chromium le recalculait à chaque frame. */
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:opacity, transform, -webkit-mask-image, mask-image;
  contain:layout paint style;
  opacity:0;
}


.feed-vox-result-video {
  opacity:0;
}

#feed-panel.feed-result-playing .feed-vox-wait-video {
  opacity:0;
}

#feed-panel.feed-result-playing .feed-vox-result-video {
  opacity:1;
}

.feed-owner-instruction {
  position:absolute;
  left:50%;
  top:4.8%;
  transform:translateX(-50%);
  z-index:35;
  padding:7px 14px;
  border-radius:999px;
  color:var(--vox-ivory);
  background:rgba(17,16,20,.88);
  border:1px solid rgba(226,170,56,.72);
  box-shadow:0 5px 16px rgba(0,0,0,.35);
  font:800 clamp(11px,1.1vw,15px)/1.1 Inter,"Segoe UI",Arial,sans-serif;
  text-align:center;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#feed-panel.owner.feed-prestart .feed-owner-instruction {
  opacity:1;
  visibility:visible;
}

/* Le délai de clic bocal existe côté logique, mais n'est jamais affiché. */
#feed-panel.feed-prestart .feed-countdown,
#feed-panel.feed-opening .feed-countdown {
  opacity:0;
  visibility:hidden;
}

/* Les spectateurs sont interpolés en JavaScript pour rester fluides sans doubler les transitions CSS. */
/* HUD */
.feed-hud {
  position:absolute;
  inset:0;
  z-index:34;
  pointer-events:none;
}

.feed-hardcore {
  position:absolute;
  left:2.2%;
  top:2.2%;
  padding:5px 10px;
  border-radius:999px;
  color:var(--vox-ivory);
  background:rgba(17,16,20,.88);
  border:1px solid rgba(226,170,56,.82);
  box-shadow:0 5px 16px rgba(0,0,0,.35);
  font:900 clamp(10px,1vw,14px)/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.10em;
}

.feed-countdown {
  position:absolute;
  right:2%;
  top:1.2%;
  width:clamp(74px,7.1vw,108px);
  aspect-ratio:1/1;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.42));
}

.feed-countdown-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.feed-countdown-mask {
  position:absolute;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  width:48%;
  height:43%;
  border-radius:48%;
  background:radial-gradient(circle, rgba(20,18,20,.99) 0 62%, rgba(20,18,20,.95) 78%, rgba(20,18,20,0) 100%);
}

.feed-timer-text {
  position:absolute;
  left:50%;
  top:51%;
  transform:translate(-50%,-50%);
  min-width:42%;
  text-align:center;
  color:#fff8df;
  font:900 clamp(18px,2.1vw,31px)/1 Georgia,"Times New Roman",serif;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 3px rgba(0,0,0,.85),0 0 7px rgba(255,207,92,.35);
}

.feed-timer-bar {
  position:absolute;
  left:26%;
  right:26%;
  bottom:18%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff2b9,#e5ac36);
  transform-origin:left center;
  box-shadow:0 0 5px rgba(255,205,88,.65);
}

/* Bocal : seul élément interactif pendant la phase pré-start. */
.feed-cookie-jar {
  appearance:none;
  position:absolute;
  left:50%;
  top:13%;
  transform:translate(-50%,-50%);
  width:clamp(102px,10.4vw,152px);
  aspect-ratio:1/1;
  padding:0;
  border:0;
  background:transparent;
  z-index:24;
  pointer-events:none;
  cursor:pointer;
  touch-action:manipulation;
  transform-origin:50% 82%;
  animation:feedJarIdle 1.65s ease-in-out infinite;
}

#feed-panel.owner.feed-prestart .feed-cookie-jar:not(:disabled) {
  pointer-events:auto;
}

#feed-panel.owner.feed-prestart .feed-cookie-jar:not(:disabled):hover {
  filter:drop-shadow(0 0 11px rgba(255,215,105,.62));
}

.feed-jar-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.40));
  transition:opacity 90ms ease;
}

.feed-jar-closed { opacity:1; }
.feed-jar-open { opacity:0; }

@keyframes feedJarIdle {
  0%,100% { transform:translate(-50%,-50%) rotate(-1.3deg) translateY(0); }
  36% { transform:translate(-50%,-50%) rotate(1.6deg) translateY(-3px); }
  66% { transform:translate(-50%,-50%) rotate(-.5deg) translateY(-1px); }
}

/* Clic bocal : d'abord ouverture. Le chrono jeu n'est pas encore parti. */
#feed-panel.feed-opening .feed-cookie-jar {
  animation:feedJarOpen 420ms ease-out forwards;
  pointer-events:none;
}

#feed-panel.feed-opening .feed-jar-closed {
  opacity:0;
}

#feed-panel.feed-opening .feed-jar-open {
  opacity:1;
}

@keyframes feedJarOpen {
  0% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  50% { transform:translate(-50%,-54%) scale(1.04) rotate(2deg); }
  100% { transform:translate(-50%,-57%) scale(.98) rotate(-1deg); }
}

/* Une fois le gameplay démarré, le bocal sort de l'écran. */
#feed-panel.feed-started .feed-cookie-jar {
  animation:feedJarExit 360ms ease-in forwards;
  pointer-events:none;
}

#feed-panel.feed-started .feed-jar-closed { opacity:0; }
#feed-panel.feed-started .feed-jar-open { opacity:1; }

@keyframes feedJarExit {
  0% { opacity:1; transform:translate(-50%,-57%) scale(.98) rotate(-1deg); }
  60% { opacity:1; transform:translate(-50%,-62%) scale(.88) rotate(3deg); }
  100% { opacity:0; transform:translate(-50%,-73%) scale(.70) rotate(6deg); }
}

/* Cible invisible sur la bouche de Vox. */
.feed-mouth-target {
  position:absolute;
  left:var(--feed-mouth-x);
  top:var(--feed-mouth-y);
  transform:translate(-50%,-50%);
  width:clamp(42px,4.5vw,66px);
  aspect-ratio:1/1;
  border-radius:50%;
  z-index:6;
  pointer-events:none;
  opacity:0;
}

/* Couloir dynamique : plus de debug visible. On garde seulement quelques paillettes diffuses dans toute la largeur du corridor,
   sans ligne centrale, avec la vague pixel locale lorsqu'on s'approche trop d'un mur. */
.feed-corridor-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:30;
  pointer-events:none;
}

/* Obstacles : plus lisibles au-dessus du stream, petit glow + animation légère. */
.feed-obstacles {
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
}

.feed-obstacle {
  position:absolute;
  transform:translate(-50%,-50%);
  aspect-ratio:1/1;
  pointer-events:none;
  filter:
    drop-shadow(0 5px 7px rgba(0,0,0,.48))
    drop-shadow(0 0 6px rgba(255,210,92,.70))
    drop-shadow(0 0 12px rgba(255,210,92,.34));
}

.feed-obstacle img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  transform-origin:50% 50%;
}

.feed-obstacle.move-y { animation:feedMoveY var(--move-duration,2.2s) ease-in-out infinite alternate; }
.feed-obstacle.move-x { animation:feedMoveX var(--move-duration,2.2s) ease-in-out infinite alternate; }

.feed-obstacle.idle-tilt img { animation:feedObstacleTilt 2.7s ease-in-out infinite alternate; }
.feed-obstacle.idle-pulse img { animation:feedObstaclePulse 1.85s ease-in-out infinite alternate; }
.feed-obstacle.idle-spin img { animation:feedObstacleSpin 4.8s ease-in-out infinite alternate; }

@keyframes feedMoveY {
  from { translate:0 calc(var(--move-range,2vh) * -1); }
  to { translate:0 var(--move-range,2vh); }
}

@keyframes feedMoveX {
  from { translate:calc(var(--move-range,2vw) * -1) 0; }
  to { translate:var(--move-range,2vw) 0; }
}

@keyframes feedObstacleTilt {
  from { transform:rotate(-4deg) scale(.98); }
  to { transform:rotate(4deg) scale(1.02); }
}

@keyframes feedObstaclePulse {
  from { transform:scale(.94); filter:brightness(.94); }
  to { transform:scale(1.05); filter:brightness(1.12); }
}

@keyframes feedObstacleSpin {
  from { transform:rotate(-7deg) scale(.98); }
  to { transform:rotate(7deg) scale(1.02); }
}

/* Cookie caché jusqu'à ce que le bocal ait été cliqué et le start serveur validé. */
.feed-cookie {
  appearance:none;
  position:absolute;
  left:50%;
  top:17%;
  transform:translate(-50%,-50%) rotate(-7deg);
  width:clamp(50px,5.3vw,78px);
  aspect-ratio:1/1;
  padding:0;
  border:0;
  background:transparent;
  z-index:22;
  pointer-events:none;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  opacity:0;
  visibility:hidden;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.40));
}

#feed-panel.feed-started .feed-cookie,
#feed-panel.cookie-locked .feed-cookie {
  opacity:1;
  visibility:visible;
}

.feed-cookie img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}

#feed-panel.owner.feed-started .feed-cookie:not(:disabled) {
  pointer-events:auto;
  cursor:grab;
}

#feed-panel.owner.feed-started .feed-cookie.dragging {
  cursor:grabbing;
  filter:drop-shadow(0 0 10px rgba(255,213,94,.92));
}

#feed-panel.cookie-locked .feed-cookie {
  filter:drop-shadow(0 0 9px rgba(255,213,94,.78));
  animation:feedCookieWaiting 700ms ease-in-out infinite alternate;
}

@keyframes feedCookieWaiting {
  from { transform:translate(-50%,-50%) scale(.96); }
  to { transform:translate(-50%,-50%) scale(1.04); }
}

.feed-arena.feed-hit .feed-cookie {
  animation:feedCookieHit 140ms ease-out;
}

@keyframes feedCookieHit {
  0%,100% { filter:drop-shadow(0 6px 8px rgba(0,0,0,.40)); }
  50% { filter:brightness(1.35) drop-shadow(0 0 10px rgba(255,211,89,.92)); }
}

.feed-result {
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  z-index:40;
  min-width:156px;
  padding:8px 16px;
  border-radius:999px;
  text-align:center;
  color:var(--vox-ivory);
  background:rgba(17,16,20,.94);
  border:1px solid rgba(226,170,56,.88);
  box-shadow:0 8px 28px rgba(0,0,0,.44),0 0 16px rgba(226,170,56,.18);
  font:900 clamp(14px,1.7vw,21px)/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.04em;
}

.feed-result.win { border-color:rgba(255,216,111,.96); }
.feed-result.lose { border-color:rgba(180,180,180,.86); }

#feed-panel.resolved .feed-cookie,
#feed-panel.resolved .feed-cookie-jar,
#feed-panel.resolved .feed-obstacles,
#feed-panel.resolved .feed-mouth-target,
#feed-panel.resolved .feed-corridor-canvas {
  opacity:0;
  pointer-events:none!important;
}

/* Early WIN keeps the progressively eaten cookie over Vox's chewing clip until cleanup. */
#feed-panel.resolved.feed-early-win .feed-cookie {
  opacity:1;
  visibility:visible;
  pointer-events:none!important;
}


.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .feed-cookie-jar { width:clamp(88px,16vw,122px); }
  .feed-countdown { width:clamp(68px,13vw,94px); }
  .feed-mouth-target { width:clamp(40px,8vw,60px); }
  .feed-cookie { width:clamp(46px,9vw,68px); }
}

@media (prefers-reduced-motion:reduce) {
  .feed-obstacle,
  .feed-obstacle img,
  .feed-arena.feed-hit .feed-cookie,
  .feed-cookie-jar,
  #feed-panel.cookie-locked .feed-cookie,
  .feed-corridor-canvas {
    animation:none!important;
  }
}

/* PLAY V2 */
#play-panel {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  --play-gold:#e2aa38;
  --play-gold-bright:#ffd875;
  --play-ivory:#fff6df;
  --play-black:#111014;
}

.play-arena { position:absolute; inset:0; pointer-events:none; }

.play-vox-video {
  position:absolute;
  aspect-ratio:1/1;
  object-fit:contain;
  pointer-events:none;
  background:transparent;
  opacity:0;
  z-index:4;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:opacity,transform,-webkit-mask-image,mask-image;
  contain:layout paint style;
}

.play-target {
  position:absolute;
  z-index:8;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transform-origin:50% 50%;
}
.play-target img {
  display:block;
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.48)) drop-shadow(0 0 9px rgba(255,210,96,.42));
  user-select:none; -webkit-user-drag:none;
}
.play-target.hit img { animation:playTargetHit 540ms cubic-bezier(.18,.88,.32,1); }
@keyframes playTargetHit {
  0% { transform:scale(1); filter:drop-shadow(0 7px 10px rgba(0,0,0,.48)) drop-shadow(0 0 9px rgba(255,210,96,.42)); }
  32% { transform:scale(1.12); filter:brightness(1.22) drop-shadow(0 0 20px rgba(255,225,125,.94)); }
  100% { transform:scale(1); filter:drop-shadow(0 7px 10px rgba(0,0,0,.48)) drop-shadow(0 0 9px rgba(255,210,96,.42)); }
}

.play-launcher {
  position:absolute;
  z-index:10;
  pointer-events:none;
  transform-origin:68% 60%;
}
.play-launcher img {
  position:absolute;
  inset:0;
  width:100%; height:100%; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.50)) drop-shadow(0 0 6px rgba(255,210,90,.34));
}
.play-launcher-base { clip-path:inset(56% 0 0 0); }
.play-launcher-aim {
  clip-path:polygon(0 0,100% 0,100% 67%,78% 67%,68% 61%,55% 67%,0 67%);
  transform-origin:68% 60%;
  will-change:transform;
}

.play-ball {
  position:absolute;
  z-index:13;
  pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:left,top,transform;
}
.play-ball img {
  display:block;
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.48)) drop-shadow(0 0 7px rgba(255,213,92,.48));
  user-select:none; -webkit-user-drag:none;
}

.play-controls {
  position:absolute;
  z-index:20;
  width:420px;
  max-width:calc(100% - 28px);
  padding:12px 14px 13px;
  border-radius:18px;
  color:var(--play-ivory);
  background:rgba(12,11,15,.91);
  border:1px solid rgba(226,170,56,.78);
  box-shadow:0 8px 24px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.035);
  pointer-events:none;
  transform:translate(-50%,-100%);
}
#play-panel.owner:not(.shot-fired) .play-controls { pointer-events:auto; }
.play-control-row { margin:0 0 9px; }
.play-control-row label {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:5px;
  font:800 13px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.055em;
  text-shadow:0 2px 3px rgba(0,0,0,.65);
}
.play-control-row label span { color:var(--play-gold-bright); min-width:54px; text-align:right; }
.play-control-row input[type="range"] {
  appearance:none;
  width:100%; height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(226,170,56,.72),rgba(255,220,116,.95));
  outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.48),0 0 7px rgba(226,170,56,.18);
}
.play-control-row input[type="range"]::-webkit-slider-thumb {
  appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:#17151b;
  border:2px solid #f0bd4b;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 0 8px rgba(255,210,91,.45);
  cursor:pointer;
}
.play-control-row input[type="range"]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#17151b; border:2px solid #f0bd4b;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 0 8px rgba(255,210,91,.45);
  cursor:pointer;
}
.play-fire {
  appearance:none;
  display:block;
  width:100%;
  margin-top:3px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,222,126,.95);
  color:#17120a;
  background:linear-gradient(180deg,#ffd875,#d99625);
  font:900 14px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.07em;
  box-shadow:0 5px 12px rgba(0,0,0,.32),0 0 10px rgba(226,170,56,.20);
  cursor:pointer;
}
.play-fire:disabled,
.play-control-row input:disabled { opacity:.55; cursor:default; }
#play-panel.shot-fired .play-controls {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease,visibility 180ms ease;
}


.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .play-controls { width:min(360px,calc(100% - 20px)); padding:9px 11px 10px; }
  .play-control-row label { font-size:11px; }
  .play-fire { font-size:12px; padding:8px 12px; }
}

@media (prefers-reduced-motion:reduce) {
  .play-target.hit img { animation:none!important; }
}

/* === PLAY V2 final asset HUD 0.6.4 === */
.play-controls {
  position: absolute;
  z-index: 20;
  width: 180px;
  height: 173px;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: translate(-50%, -100%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#play-panel.owner:not(.shot-fired) .play-controls {
  opacity: 1;
  visibility: visible;
}
#play-panel.shot-fired .play-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.play-gauges-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.38));
}
.play-angle-needle {
  position: absolute;
  left: 26.37%;
  top: 81.90%;
  width: 34%;
  height: 2px;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff1c8 0%, #f4c35b 52%, #d99b2a 100%);
  box-shadow: 0 0 5px rgba(255,208,95,.35);
  transform-origin: 100% 50%;
  pointer-events: none;
}
.play-angle-needle::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 7px solid #ffe6a2;
  filter: drop-shadow(0 0 3px rgba(255,208,95,.28));
}
.play-angle-hitarea {
  position: absolute;
  left: 0;
  top: 9%;
  width: 77%;
  height: 82%;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  appearance: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  opacity: 1;
  pointer-events: none;
  cursor: pointer;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="angle"] .play-angle-hitarea {
  pointer-events: auto;
}
.play-power-track {
  position: absolute;
  left: 84.5%;
  top: 17.2%;
  width: 9.2%;
  height: 67.0%;
  z-index: 1;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: rgba(24,22,27,.58);
  box-shadow: none;
  touch-action: none;
  pointer-events: none;
  cursor: ns-resize;
}
.play-power-fill {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  width: auto;
  height: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #ffe88d 0%, #ffc247 46%, #d78b16 100%);
  box-shadow: 0 0 6px rgba(255,196,58,.34);
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track {
  pointer-events: auto;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track.is-holding {
  box-shadow: 0 0 7px rgba(255,202,65,.20);
}
.play-hidden-inputs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.play-hidden-inputs input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .play-controls {
    width: 158px;
    height: 152px;
  }
  .play-angle-needle {
    height: 2px;
  }
}


/* === PLAY V2 0.6.6 compact 0-90 degree controls === */
.play-controls {
  width: 108px !important;
  height: 104px !important;
}
.play-gauges-art {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.32));
}
.play-angle-needle {
  left: 26.37%;
  top: 81.90%;
  width: 34%;
  height: 1.5px;
  transform-origin: 100% 50%;
  z-index: 3;
}
.play-angle-needle::before {
  left: -3px;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-right-width: 5px;
}
.play-angle-hitarea {
  left: 20.4%;
  top: 76.5%;
  width: 40%;
  height: 11%;
  transform-origin: 100% 50%;
  border-radius: 999px;
  z-index: 5;
}
.play-power-track {
  left: 84.5%;
  top: 17.2%;
  width: 9.2%;
  height: 67%;
  border-radius: 3px;
}
.play-power-fill {
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 0;
  border-radius: 2px 2px 0 0;
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .play-controls {
    width: 96px !important;
    height: 92px !important;
  }
}


/* === PLAY V2 0.6.7 moving needle + scaled HUD + natural projectile physics === */
.play-controls {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.play-gauges-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
/* Only keep the annular quarter-gauge from the source art. This removes the baked static arrow. */
.play-gauges-arc-art {
  z-index: 2;
  clip-path: inset(0 20% 0 0);
  -webkit-mask-image: radial-gradient(circle at 60.8% 78.1%, transparent 0 34%, #000 35% 69%, transparent 70% 100%);
  mask-image: radial-gradient(circle at 60.8% 78.1%, transparent 0 34%, #000 35% 69%, transparent 70% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Keep the exact original center star, but not the original arrow shaft. */
.play-gauges-hub-art {
  z-index: 4;
  clip-path: circle(4.6% at 60.8% 78.1%);
}
/* Keep the exact original vertical frame/stars. */
.play-gauges-power-art {
  z-index: 2;
  clip-path: inset(0 0 0 80%);
}
.play-angle-needle {
  display: block !important;
  position: absolute;
  left: 26.0%;
  top: 77.95%;
  width: 35.0%;
  height: 1.5%;
  min-height: 1px;
  z-index: 5;
  border-radius: 999px;
  background: linear-gradient(90deg,#fff0c0 0%,#f4c35b 56%,#d99925 100%);
  box-shadow: 0 0 3px rgba(255,210,95,.35);
  transform-origin: 100% 50%;
  pointer-events: none;
}
.play-angle-needle::before {
  content:"";
  position:absolute;
  left:-6%;
  top:50%;
  width:0;
  height:0;
  transform:translateY(-50%);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-right:7px solid #ffe7a5;
  filter:drop-shadow(0 0 2px rgba(255,210,95,.28));
}
.play-angle-hitarea {
  display:block !important;
  position:absolute;
  left:24.5%;
  top:73.2%;
  width:37.0%;
  height:10.5%;
  z-index:7;
  margin:0;
  padding:0;
  border:0;
  outline:none;
  appearance:none;
  background:transparent;
  color:transparent;
  font-size:0;
  transform-origin:100% 50%;
  border-radius:999px;
  pointer-events:none;
  cursor:pointer;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="angle"] .play-angle-hitarea {
  pointer-events:auto;
}
.play-power-track {
  display:block !important;
  position:absolute;
  left:85.7%;
  top:22.4%;
  width:6.8%;
  height:58.3%;
  z-index:5;
  overflow:hidden;
  border:0;
  border-radius:2px;
  background:rgba(22,20,25,.96);
  box-shadow:none;
  touch-action:none;
  pointer-events:none;
  cursor:ns-resize;
}
.play-power-fill {
  display:block !important;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:0;
  border-radius:1px 1px 0 0;
  background:linear-gradient(180deg,#ffe98e 0%,#ffc247 48%,#d68814 100%);
  box-shadow:0 0 3px rgba(255,196,58,.34);
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track {
  pointer-events:auto;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track.is-holding {
  box-shadow:0 0 4px rgba(255,202,65,.20);
}


/* === PLAY V2 0.6.9 cannon-click + power-right === */
.play-controls {
  width: 34px !important;
  height: 74px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  transform: none !important;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#play-panel.owner:not(.shot-fired) .play-controls {
  opacity: 1;
  visibility: visible;
}
.play-gauges-art,
.play-gauges-arc-art,
.play-gauges-hub-art,
.play-angle-needle,
.play-angle-hitarea {
  display: none !important;
}
.play-gauges-power-art {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.26));
}
.play-power-track {
  display: block !important;
  position: absolute;
  left: 22.0%;
  top: 15.0%;
  width: 56.0%;
  height: 68.5%;
  z-index: 5;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: rgba(22,20,25,.96);
  box-shadow: none;
  touch-action: none;
  pointer-events: none;
  cursor: ns-resize;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track {
  pointer-events: auto;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track.is-holding {
  box-shadow: 0 0 5px rgba(255,202,65,.24);
}
.play-power-fill {
  display: block !important;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg,#ffe98e 0%,#ffc247 48%,#d68814 100%);
  box-shadow: 0 0 3px rgba(255,196,58,.34);
}
.play-launcher-hitarea {
  position: absolute;
  inset: 0;
  z-index: 14;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  appearance: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  pointer-events: none;
  cursor: pointer;
}
#play-panel.owner:not(.shot-fired)[data-play-phase="angle"] .play-launcher-hitarea {
  pointer-events: auto;
  cursor:url("assets/play/CURSOR_A_PLAY.png") 18 8, pointer;
}
.play-angle-cue {
  position: absolute;
  left: 68%;
  top: 60%;
  width: 26%;
  height: 26%;
  z-index: 15;
  transform-origin: 0% 100%;
  pointer-events: none;
}
.play-angle-cue.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}
.play-angle-cue-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 76px;
  margin: 0;
  padding: 0;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  transform: translate(-50%,-50%) rotate(-8deg) !important;
  background-image: url('assets/play/CURSOR_A_PLAY.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,222,140,.95)) drop-shadow(0 0 18px rgba(255,200,90,.72));
  animation: playFleshHandCue 1050ms ease-in-out infinite !important;
}
.play-angle-cue-hand::before {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:54px;
  height:54px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,223,140,.42) 0%, rgba(255,205,110,.22) 38%, rgba(255,188,84,.10) 58%, rgba(255,170,60,0) 74%);
  filter: blur(3px);
  animation: playCueGlow 1000ms ease-in-out infinite;
}
.play-angle-cue-hand::after {
  content:"";
  position:absolute;
  inset:0;
  background:url('assets/play/CURSOR_B_PLAY.png') center/contain no-repeat;
  opacity:0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,222,140,.95)) drop-shadow(0 0 18px rgba(255,200,90,.72));
  animation: playCursorAB 760ms steps(1,end) infinite;
}

.play-angle-cue-ripple {
  left: 50%;
  top: 34%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-color: rgba(255,213,124,.82);
  box-shadow: 0 0 8px rgba(255,196,86,.35);
}
@keyframes playCueGlow {
  0%, 100% { opacity: .78; transform: translate(-50%,-50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.10); }
}

@keyframes playCursorAB {
  0%, 49.999% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes playFleshHandCue {
  0%,100% { transform:translate(-50%,-50%) rotate(-8deg) scale(1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(255,210,126,.42)); }
  50% { transform:translate(-50%,-48%) rotate(-8deg) scale(1.07); filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,222,151,.7)); }
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .play-angle-cue { width:62px; height:62px; }
  .play-angle-cue-hand { width:48px; height:60px; }
}


/* === PLAY V2 0.7.4 target float + cue/bar reposition === */
.play-target {
  animation: playTargetFloat 2.6s ease-in-out infinite;
}
@keyframes playTargetFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - 4px)); }
  50% { transform: translate(-50%, calc(-50% + 4px)); }
}
.play-angle-cue {
  left: 51% !important;
  top: 66% !important;
  width: 18% !important;
  height: 18% !important;
  transform: none !important;
}
.play-angle-cue-hand {
  width: 100% !important;
  height: 100% !important;
}
.play-angle-cue-ripple {
  left: 50% !important;
  top: 50% !important;
  width: 34% !important;
  height: 34% !important;
  margin-left: -17% !important;
  margin-top: -17% !important;
}
.play-controls {
  width: 66px !important;
  height: 224px !important;
  transform: none !important;
}
.play-gauges-power-art {
  object-fit: contain !important;
}
.play-power-track {
  left: 22.0% !important;
  top: 15.0% !important;
  width: 56.0% !important;
  height: 68.5% !important;
  border-radius: 5px !important;
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .play-angle-cue { width: 18% !important; height: 18% !important; }
}

/* === PLAY V2 0.7.5 power-gauge stray-fragment fix === */
/* The cropped power-gauge source still contains a tiny piece of the angle ornament
   on its far-left edge. Hide only that unused strip without changing the bar geometry. */
.play-gauges-power-art {
  clip-path: inset(0 0 0 20%) !important;
}


/* === PLAY V2 0.7.6 clean power gauge + golden exit poof === */
.play-gauges-power-art {
  clip-path: none !important;
  object-fit: fill !important;
}
.play-power-track {
  left: 35% !important;
  top: 19% !important;
  width: 30% !important;
  height: 64% !important;
  border-radius: 2px !important;
  background: rgba(17,16,20,.96) !important;
  overflow: visible !important;
  cursor:url("assets/play/CURSOR_G_72.png") 18 8, pointer !important;
}
.play-power-track::before {
  content:"";
  position:absolute;
  left:-45%;
  right:-45%;
  top:-10%;
  bottom:-10%;
  background:transparent;
  pointer-events:none;
  cursor:url("assets/play/CURSOR_G_72.png") 18 8, pointer;
}
#play-panel.owner:not(.shot-fired) .play-controls[data-phase="power"] .play-power-track::before {
  pointer-events:auto;
}
.play-power-fill {
  pointer-events:none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 1px 1px 0 0 !important;
}
.play-poof-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: visible;
}
.play-poof-particle {
  position: absolute;
  display: block;
  border-radius: 1px;
  background: #ffe7a0;
  box-shadow: 0 0 4px rgba(255,215,104,.95), 0 0 9px rgba(220,157,42,.55);
  transform: translate(-50%,-50%) rotate(45deg) scale(.65);
  animation: playGoldenPoof 310ms cubic-bezier(.16,.72,.26,1) forwards;
  animation-delay: var(--poof-delay, 0ms);
}
.play-poofing {
  opacity: 0 !important;
  filter: brightness(1.55) blur(.7px) !important;
  transition: opacity 190ms ease-out, filter 210ms ease-out !important;
}
.play-poof-entering {
  opacity:0 !important;
  filter:brightness(1.55) blur(.7px) !important;
}
.play-poof-arrive {
  animation:playPoofArrive 260ms cubic-bezier(.18,.78,.25,1) both;
}
@keyframes playPoofArrive {
  0% { opacity:0; filter:brightness(1.55) blur(.7px); }
  45% { opacity:1; filter:brightness(1.18) blur(0); }
  100% { opacity:1; filter:none; }
}
@keyframes playGoldenPoof {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(45deg) scale(.45);
  }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--poof-x)), calc(-50% + var(--poof-y))) rotate(135deg) scale(1.05);
  }
}

/* === PET V2 0.8.4 === */
.pet-panel,
.pet-arena {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.pet-panel { pointer-events:none; }
.pet-arena { overflow:hidden; pointer-events:none; }
.pet-panel.owner .pet-arena {
  pointer-events:auto;
  cursor:none;
}
.pet-vox-video {
  position:absolute;
  z-index:8;
  display:block;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:opacity,transform;
  filter:none;
}
.pet-spot {
  position:absolute;
  z-index:18;
  transform:translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,1) 0 15%,rgba(181,244,255,1) 16% 34%,rgba(98,220,255,.78) 35% 58%,rgba(76,202,246,0) 78%);
  box-shadow:0 0 10px rgba(255,255,255,1),0 0 24px rgba(139,235,255,.98),0 0 46px rgba(73,204,249,.76),0 0 72px rgba(88,205,255,.34);
  filter:brightness(1.18) saturate(1.12);
  animation:none;
}
.pet-spot > span {
  position:absolute;
  inset:-46%;
  border-radius:inherit;
  border:2px solid rgba(179,242,255,.88);
  box-shadow:0 0 15px rgba(112,224,255,.62);
  opacity:.9;
}
.pet-spot.gesture-lr > span,
.pet-spot.gesture-ud > span,
.pet-spot.gesture-spiral > span { animation:none; }
.pet-spot.gesture-spiral > span { border-style:dashed; }
.pet-spot::before { display:none; }

.pet-gesture-indicator {
  position:absolute;
  z-index:20;
  transform:translate(-50%,-50%) scale(var(--pet-gesture-scale,1));
  transform-origin:50% 50%;
  pointer-events:none;
  width:118px;
  height:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:url("assets/pet/PET_GESTURE_FRAME.png") center/contain no-repeat;
}
.pet-gesture-symbol {
  position:relative;
  width:44px;
  height:44px;
  display:block;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:drop-shadow(0 0 3px rgba(255,222,136,.45));
}
.pet-gesture-indicator.gesture-lr .pet-gesture-symbol {
  width:48px;
  height:30px;
  background-image:url("assets/pet/PET_GESTURE_LR.svg");
}
.pet-gesture-indicator.gesture-ud .pet-gesture-symbol {
  width:30px;
  height:48px;
  background-image:url("assets/pet/PET_GESTURE_UD.svg");
}
.pet-gesture-indicator.gesture-spiral .pet-gesture-symbol {
  width:42px;
  height:42px;
}
.pet-gesture-indicator.gesture-spiral.spiral-cw .pet-gesture-symbol {
  background-image:url("assets/pet/PET_GESTURE_SPIRAL_CW.svg");
}
.pet-gesture-indicator.gesture-spiral.spiral-ccw .pet-gesture-symbol {
  background-image:url("assets/pet/PET_GESTURE_SPIRAL_CCW.svg");
}

.pet-cursor {
  position:absolute;
  z-index:25;
  width:53px;
  height:72px;
  transform:translate(-38%,-16%);
  pointer-events:none;
  user-select:none;
  will-change:left,top,transform,filter;
}
.pet-cursor img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) drop-shadow(0 0 4px rgba(128,76,255,.22));
}
.pet-cursor.pet-confirm {
  animation:petCursorConfirm 300ms cubic-bezier(.18,.82,.28,1);
}
@keyframes petCursorConfirm {
  0% { transform:translate(-38%,-16%) scale(1); }
  42% { transform:translate(-38%,-16%) scale(.86); filter:drop-shadow(0 0 6px rgba(255,211,82,.65)); }
  100% { transform:translate(-38%,-16%) scale(1); }
}
.pet-success-burst {
  position:absolute;
  z-index:19;
  width:1px;
  height:1px;
  pointer-events:none;
}
.pet-success-burst span {
  position:absolute;
  left:0; top:0;
  width:4px; height:4px;
  border-radius:50%;
  background:#dff9ff;
  box-shadow:0 0 7px rgba(105,220,252,.88);
  opacity:0;
}
.pet-success-burst.bursting span {
  animation:petBurstParticle 390ms cubic-bezier(.17,.78,.28,1) var(--pet-burst-delay,0ms) forwards;
}
@keyframes petBurstParticle {
  0% { transform:translate(-50%,-50%) scale(.35); opacity:1; }
  70% { opacity:.85; }
  100% { transform:translate(calc(-50% + var(--pet-burst-x)),calc(-50% + var(--pet-burst-y))) scale(.95); opacity:0; }
}

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .pet-cursor { width:36px; height:60px; }
}
@media (prefers-reduced-motion:reduce) {
  .pet-spot,.pet-spot > span,.pet-spot::before,.pet-cursor.pet-confirm,.pet-success-burst.bursting span,.pet-gesture-indicator,.pet-gesture-indicator .pet-gesture-symbol { animation:none!important; }
}



/* VOX FIGHT V0.9.5 — compact symbol + keyboard sequence; no on-screen arrow pad */
.fight-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 18px max(170px, 15.5vh);
  pointer-events: none;
  z-index: 80;
}
.fight-panel.owner { pointer-events: none; }
.fight-card {
  position: relative;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.fight-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.fight-symbol-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#fight-symbol-canvas {
  width: clamp(148px, 18vw, 190px);
  height: clamp(148px, 18vw, 190px);
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: none;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(168, 92, 255, .28));
}
.fight-panel.owner #fight-symbol-canvas { pointer-events: auto; }


.fight-feedback-badge {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
  pointer-events: none;
  opacity: 0;
}
.fight-feedback-badge.hidden { display: none; }
.fight-feedback-badge.show { animation: fightBadgePop .95s ease-out forwards; }
.fight-feedback-badge-art { width: clamp(118px, 14vw, 168px); height: auto; display:block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.48)); }
.fight-feedback-badge-detail { color:#fff7dc; font:900 18px/1 Inter,Arial,sans-serif; letter-spacing:.03em; white-space:nowrap; text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 10px rgba(255,210,110,.28); }
@keyframes fightBadgePop {
  0% { opacity:0; transform:translateY(-50%) scale(.84); }
  14% { opacity:1; transform:translateY(-50%) scale(1.03); }
  72% { opacity:1; transform:translateY(-50%) scale(1); }
  100% { opacity:0; transform:translateY(calc(-50% - 8px)) scale(.98); }
}
.fight-keys-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  pointer-events: none;
  touch-action: none;
  min-width: 190px;
  min-height: 96px;
}
.fight-key-sequence {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  margin: 0;
  pointer-events: none;
}
.fight-sequence-key {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(214, 184, 245, .58);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(58, 43, 73, .96), rgba(28, 21, 37, .98));
  color: rgba(255,255,255,.92);
  font: 900 21px/1 Inter, "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  box-shadow: 0 5px 0 rgba(7, 5, 10, .78), 0 8px 13px rgba(0,0,0,.28);
  transition: transform 90ms ease, opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.fight-sequence-key.is-current {
  border-color: rgba(255, 215, 106, .96);
  box-shadow: 0 5px 0 rgba(7, 5, 10, .78), 0 0 12px rgba(255, 202, 77, .32);
}
.fight-sequence-key.is-done {
  opacity: .34;
  transform: translateY(2px) scale(.94);
}
.fight-sequence-key.is-wrong {
  border-color: rgba(255, 91, 118, .95);
  box-shadow: 0 5px 0 rgba(7, 5, 10, .78), 0 0 14px rgba(255, 73, 106, .5);
}

/* Desktop stays keyboard-only. Touch devices get an invisible swipe surface over the sequence area. */
@media (pointer: coarse) {
  .fight-panel.owner .fight-keys-wrap { pointer-events: auto; }
}
@media (max-width: 700px) {
  .fight-panel { padding-bottom: max(138px, 13vh); }
  #fight-symbol-canvas { width: 150px; height: 150px; }
  .fight-key-sequence { gap: 5px; }
  .fight-sequence-key { width: 34px; height: 34px; font-size: 19px; }
  .fight-keys-wrap { min-width: 220px; min-height: 120px; }
}

/* =========================================================
   V0.12.34 — PUBLIC FEED / PET / PLAY
   The three short Vox interactions are public: every viewer with the
   Extension sees the same full scene. Only the owner can interact.
   ========================================================= */
#play-panel.spectator,
#pet-panel.spectator,
#feed-panel.spectator {
  pointer-events: none !important;
}
#play-panel.spectator input,
#play-panel.spectator button,
#pet-panel.spectator input,
#pet-panel.spectator button,
#feed-panel.spectator input,
#feed-panel.spectator button {
  pointer-events: none !important;
}

/* VOX SHOP V0.9.21 — lightweight themed floating window */
.vp-shop-window {
  --vp-gold: #d9b66d;
  --vp-gold-bright: #f3d48d;
  --vp-violet: #8e66c9;
  position: fixed;
  left: 68%;
  top: 58%;
  width: min(448px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 28px));
  z-index: 180;
  overflow: hidden;
  color: #f8f3e7;
  pointer-events: auto;
  user-select: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(142,102,201,.07), transparent 34%),
    linear-gradient(160deg, rgba(10,13,18,.985), rgba(12,14,19,.99));
  border: 1px solid rgba(217,182,109,.72);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  box-shadow: 0 22px 56px rgba(0,0,0,.62), 0 0 0 1px rgba(243,212,141,.08) inset, 0 0 24px rgba(142,102,201,.08);
}
.vp-shop-window::before {
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(217,182,109,.18);
  clip-path: inherit;
  z-index:0;
}
.vp-shop-titlebar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 22px auto 1fr auto 32px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 7px 6px 10px;
  border-bottom: 1px solid rgba(217,182,109,.32);
  background: linear-gradient(90deg, rgba(15,17,22,.98), rgba(18,18,24,.96));
  cursor: grab;
  touch-action: none;
}
.vp-shop-titlebar.dragging { cursor: grabbing; }
.vp-shop-grip {
  width:16px;
  height:16px;
  display:grid;
  grid-template-columns:repeat(3,3px);
  grid-auto-rows:3px;
  gap:2px;
  align-content:center;
  justify-content:center;
  opacity:.82;
}
.vp-shop-grip i { width:4px; height:4px; border-radius:50%; background:rgba(244,244,246,.9); box-shadow:0 0 4px rgba(255,255,255,.12); }
.vp-shop-title {
  white-space: nowrap;
  font: 500 20px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .055em;
  color: #eeeef2;
}
.vp-shop-title span { color: var(--vp-gold-bright); }
.vp-shop-title-rule { display:flex; align-items:center; min-width:40px; opacity:.7; }
.vp-shop-title-rule::before { content:"✦"; color:var(--vp-gold-bright); font-size:8px; margin-right:7px; }
.vp-shop-title-rule span { height:1px; flex:1; background:linear-gradient(90deg, rgba(217,182,109,.7), rgba(217,182,109,0)); }
.vp-shop-balance-shell {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:23px;
  padding:3px 10px 3px 6px;
  border:1px solid rgba(217,182,109,.58);
  background:linear-gradient(180deg, rgba(24,27,34,.96), rgba(10,12,17,.96));
  clip-path:polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.vp-shop-vp-logo {
  display:block;
  width:22px;
  height:23px;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(235,191,83,.18));
}
.vp-shop-balance {
  color: #f3efe7;
  font: 600 14px/1 Georgia, "Times New Roman", serif;
  letter-spacing:.04em;
  white-space: nowrap;
}

.vp-shop-close {
  appearance:none;
  width:30px;
  height:30px;
  border:1px solid rgba(217,182,109,.34);
  background:rgba(10,12,16,.72);
  color:rgba(246,246,248,.94);
  font:300 24px/24px Arial,sans-serif;
  cursor:pointer;
  clip-path:polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.vp-shop-close:hover { color:#fff; background:rgba(142,102,201,.10); border-color:rgba(217,182,109,.58); }
.vp-shop-body {
  position:relative;
  z-index:1;
  padding: 10px 12px 12px;
  overflow:auto;
  max-height: calc(min(520px, 100vh - 28px) - 47px);
}
.vp-shop-items {
  display:grid;
  gap:8px;
  /* V0.9.43: keep exactly three product rows visible, then scroll the catalog. */
  max-height:274px; /* 3 × 86px rows + 2 × 8px gaps */
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(217,182,109,.72) rgba(7,9,13,.72);
}
.vp-shop-items::-webkit-scrollbar { width:7px; }
.vp-shop-items::-webkit-scrollbar-track {
  background:rgba(7,9,13,.72);
  border-left:1px solid rgba(217,182,109,.10);
}
.vp-shop-items::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg, rgba(243,212,141,.82), rgba(142,102,201,.76));
  border-radius:8px;
  border:1px solid rgba(9,11,16,.82);
}
.vp-shop-items::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg, rgba(243,212,141,.98), rgba(160,118,215,.90));
}
.vp-shop-item {
  display:grid;
  grid-template-columns: 93px minmax(0,1fr) 114px;
  align-items:center;
  min-height:86px;
  border:1px solid rgba(217,182,109,.42);
  background:
    linear-gradient(120deg, rgba(255,255,255,.018), transparent 48%),
    linear-gradient(180deg, rgba(12,15,21,.86), rgba(8,10,14,.9));
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  overflow:hidden;
}
.vp-shop-item-thumb {
  position:relative;
  width:93px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-right:1px solid rgba(217,182,109,.26);
  background:rgba(9,10,15,.7);
}
.vp-shop-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; will-change:transform,object-position; }
.vp-shop-item-meta { min-width:0; padding:10px 13px; }
.vp-shop-item-name {
  font: 500 18px/1.08 Georgia, "Times New Roman", serif;
  color:#f5f2ee;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vp-shop-item-desc {
  margin-top:6px;
  font: 600 8px/1.2 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(220,216,228,.55);
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  max-height:2.4em;
  overflow-wrap:anywhere;
}
.vp-shop-item-action {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  padding:10px 11px 10px 4px;
}
.vp-shop-item-price {
  text-align:center;
  color:#efe9df;
  font:600 15px/1 Georgia,"Times New Roman",serif;
  white-space:nowrap;
}
.vp-shop-item-price .vp-unit { color:var(--vp-gold-bright); margin-left:2px; }
.vp-shop-item-button {
  appearance:none;
  min-height:31px;
  padding:0 11px;
  border:1px solid rgba(226,190,112,.74);
  background:linear-gradient(180deg, rgba(24,27,34,.94), rgba(10,12,17,.98));
  color:#f3f1ee;
  cursor:pointer;
  font:800 10px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.14em;
  clip-path:polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  transition:filter .12s ease, background .12s ease, border-color .12s ease;
}
.vp-shop-item-button:hover:not(:disabled) { filter:brightness(1.15); border-color:rgba(243,212,141,.95); }
.vp-shop-item-button:disabled {
  cursor:default;
  opacity:1;
  color:rgba(220,212,230,.62);
  border-color:rgba(142,102,201,.58);
  background:linear-gradient(180deg, rgba(37,27,51,.74), rgba(16,15,24,.84));
}
.vp-shop-message { margin-top:8px; padding:8px 10px; border:1px solid rgba(217,182,109,.24); background:rgba(7,8,12,.76); color:#ede7f4; font:700 10px/1.3 Inter,"Segoe UI",Arial,sans-serif; }
.vp-shop-message.error { color:#ffabbc; border-color:rgba(255,90,122,.35); }
.vp-shop-message.success { color:#c8ffd4; border-color:rgba(96,221,128,.35); }
.vp-shop-confirm {
  position:absolute;
  inset:46px 0 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:22px;
  background:radial-gradient(circle at 50% 40%, rgba(42,30,55,.42), transparent 48%), rgba(8,10,14,.975);
  text-align:center;
  z-index:4;
}
.vp-shop-confirm-kicker { color:rgba(217,182,109,.72); font:800 9px/1 Inter,Arial,sans-serif; letter-spacing:.22em; }
.vp-shop-confirm-name { font:500 19px/1.12 Georgia,"Times New Roman",serif; }
.vp-shop-confirm-price { color:#f2eee7; font:600 20px/1 Georgia,"Times New Roman",serif; }
.vp-shop-confirm-actions { display:flex; gap:8px; }
.vp-shop-secondary,.vp-shop-primary { appearance:none; min-width:95px; min-height:32px; padding:0 13px; cursor:pointer; font:900 10px/1 Inter,"Segoe UI",Arial,sans-serif; letter-spacing:.1em; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.vp-shop-secondary { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); color:#fff; }
.vp-shop-primary { border:1px solid rgba(229,184,83,.76); background:linear-gradient(180deg,rgba(31,34,42,.98),rgba(11,13,18,.98)); color:#fff; }

.vp-shop-item-button.insufficient {
  font-size: 8px;
  letter-spacing: .08em;
}

.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-repeat:no-repeat;
}
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary { position:relative; }

.vp-shop-window::after {
  background-image:
    linear-gradient(135deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(225deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(315deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px),
    linear-gradient(45deg, transparent 8px, rgba(243,212,141,.95) 8px, rgba(243,212,141,.95) 9px, transparent 9px);
  background-size:16px 16px;
  background-position:top left, top right, bottom right, bottom left;
}
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  background-image:
    linear-gradient(135deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(225deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(315deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px),
    linear-gradient(45deg, transparent 6px, rgba(217,182,109,.88) 6px, rgba(217,182,109,.88) 7px, transparent 7px);
  background-size:12px 12px;
  background-position:top left, top right, bottom right, bottom left;
}

@media (max-width:700px) {
  .vp-shop-window { width:calc(100vw - 18px); max-height:calc(100vh - 18px); }
  .vp-shop-titlebar { grid-template-columns:22px auto 1fr auto 34px; gap:7px; }
  .vp-shop-title { font-size:19px; }
  .vp-shop-title-rule { display:none; }
  .vp-shop-vp-logo { width:23px; height:25px; }
  .vp-shop-balance { font-size:14px; }
  .vp-shop-item { grid-template-columns:88px minmax(0,1fr) 112px; min-height:92px; }
  .vp-shop-item-thumb { width:88px; height:92px; }
  .vp-shop-item-name { font-size:17px; }
  .vp-shop-item-desc { font-size:8px; letter-spacing:.12em; }
  .vp-shop-item-action { padding-right:9px; }
  .vp-shop-item-price { font-size:15px; }
  .vp-shop-item-button.insufficient { font-size:7px; letter-spacing:.06em; }
}


/* =========================================================
   V0.9.58 — VP SHOP BORDER POLISH
   One continuous pixel-aligned border system for all clipped
   shop surfaces. Replaces the old mixed border + corner ticks.
   ========================================================= */

/* Shared geometry / stroke tokens. */
.vp-shop-window,
.vp-shop-balance-shell,
.vp-shop-item,
.vp-shop-item-button,
.vp-shop-close,
.vp-shop-secondary,
.vp-shop-primary {
  --vp-cut: 8px;
  --vp-line-color: rgba(217,182,109,.72);
  border: 0 !important;
}

.vp-shop-window { --vp-cut: 13px; --vp-line-color: rgba(243,212,141,.82); }
.vp-shop-balance-shell { --vp-cut: 8px; --vp-line-color: rgba(217,182,109,.62); }
.vp-shop-item { --vp-cut: 10px; --vp-line-color: rgba(217,182,109,.46); }
.vp-shop-item-button { --vp-cut: 7px; --vp-line-color: rgba(226,190,112,.78); }
.vp-shop-close { --vp-cut: 7px; --vp-line-color: rgba(217,182,109,.44); }
.vp-shop-secondary { --vp-cut: 8px; --vp-line-color: rgba(255,255,255,.20); }
.vp-shop-primary { --vp-cut: 8px; --vp-line-color: rgba(229,184,83,.80); }

/* All interactive shop controls now use the same octagonal language. */
.vp-shop-item-button,
.vp-shop-secondary,
.vp-shop-primary {
  clip-path: polygon(
    var(--vp-cut) 0,
    calc(100% - var(--vp-cut)) 0,
    100% var(--vp-cut),
    100% calc(100% - var(--vp-cut)),
    calc(100% - var(--vp-cut)) 100%,
    var(--vp-cut) 100%,
    0 calc(100% - var(--vp-cut)),
    0 var(--vp-cut)
  );
}

/* Disable the old inner rectangular outline, which was clipped unevenly. */
.vp-shop-window::before {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/*
   Continuous 8-segment outline.
   Straight segments and diagonals are drawn by the same pseudo-element,
   so there are no doubled borders or detached corner ticks.
*/
.vp-shop-window::after,
.vp-shop-balance-shell::after,
.vp-shop-item::after,
.vp-shop-item-button::after,
.vp-shop-close::after,
.vp-shop-secondary::after,
.vp-shop-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--vp-line-color), var(--vp-line-color)),
    linear-gradient(var(--vp-line-color), var(--vp-line-color)),
    linear-gradient(var(--vp-line-color), var(--vp-line-color)),
    linear-gradient(var(--vp-line-color), var(--vp-line-color)),
    linear-gradient(to bottom right,
      transparent calc(50% - .85px),
      var(--vp-line-color) calc(50% - .85px),
      var(--vp-line-color) calc(50% + .85px),
      transparent calc(50% + .85px)),
    linear-gradient(to bottom left,
      transparent calc(50% - .85px),
      var(--vp-line-color) calc(50% - .85px),
      var(--vp-line-color) calc(50% + .85px),
      transparent calc(50% + .85px)),
    linear-gradient(to bottom right,
      transparent calc(50% - .85px),
      var(--vp-line-color) calc(50% - .85px),
      var(--vp-line-color) calc(50% + .85px),
      transparent calc(50% + .85px)),
    linear-gradient(to bottom left,
      transparent calc(50% - .85px),
      var(--vp-line-color) calc(50% - .85px),
      var(--vp-line-color) calc(50% + .85px),
      transparent calc(50% + .85px));
  background-size:
    calc(100% - var(--vp-cut) - var(--vp-cut)) 1px,
    1px calc(100% - var(--vp-cut) - var(--vp-cut)),
    calc(100% - var(--vp-cut) - var(--vp-cut)) 1px,
    1px calc(100% - var(--vp-cut) - var(--vp-cut)),
    var(--vp-cut) var(--vp-cut),
    var(--vp-cut) var(--vp-cut),
    var(--vp-cut) var(--vp-cut),
    var(--vp-cut) var(--vp-cut);
  background-position:
    left var(--vp-cut) top 0,
    right 0 top var(--vp-cut),
    left var(--vp-cut) bottom 0,
    left 0 top var(--vp-cut),
    left 0 top 0,
    right 0 top 0,
    right 0 bottom 0,
    left 0 bottom 0;
}

/* Cleaner hierarchy: cards stay subtle, controls sharpen on interaction. */
.vp-shop-item {
  box-shadow: inset 0 1px rgba(255,255,255,.015);
}
.vp-shop-item:hover { --vp-line-color: rgba(217,182,109,.58); }
.vp-shop-item-button:hover:not(:disabled) { --vp-line-color: rgba(243,212,141,.98); }
.vp-shop-close:hover { --vp-line-color: rgba(243,212,141,.78); }
.vp-shop-primary:hover { --vp-line-color: rgba(243,212,141,.96); }
.vp-shop-secondary:hover { --vp-line-color: rgba(255,255,255,.34); }
.vp-shop-item-button:disabled { --vp-line-color: rgba(142,102,201,.62); }

/* Header separator and thumbnail separator use the same restrained stroke. */
.vp-shop-titlebar {
  border-bottom-color: rgba(217,182,109,.26);
}
.vp-shop-item-thumb {
  border-right-color: rgba(217,182,109,.22);
}

/* Keep labels comfortably clear of the newly unified button cuts. */
.vp-shop-item-button { padding-left: 13px; padding-right: 13px; }

/* V0.9.96 — Haon Rush unlock indicator (automatic, no viewer click). */
.fight-special-indicator{
  position:fixed;
  right:max(22px,3.2vw);
  bottom:max(112px,10.5vh);
  width:76px;
  height:76px;
  padding:0;
  border:2px solid rgba(255,166,74,.92);
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgba(85,38,13,.98),rgba(22,9,9,.98) 64%,rgba(6,4,6,.98));
  box-shadow:0 8px 18px rgba(0,0,0,.55),0 0 15px rgba(255,130,31,.46),inset 0 0 0 2px rgba(255,222,153,.16);
  overflow:visible;
  pointer-events:none;
  transition:opacity .16s ease,filter .16s ease;
  z-index:95;
}
.fight-special-indicator img{width:100%;height:100%;display:block;object-fit:contain;padding:6px;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,170,72,.35));border-radius:50%}
.fight-special-indicator.used{opacity:.24;filter:grayscale(.75)}
.fight-special-auto-label{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:2px 6px;border-radius:8px;background:rgba(18,8,8,.96);border:1px solid rgba(255,176,83,.75);color:#ffd79d;font:800 10px/1.1 system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 2px 8px rgba(0,0,0,.45);white-space:nowrap}
.fight-special-indicator.used .fight-special-auto-label{opacity:.55}
@media(max-width:700px){.fight-special-indicator{width:64px;height:64px;right:14px;bottom:max(96px,9vh)}}

/* V0.12.16 — compact queue icon stack.
   The supplied icons are 75x75 on the 2560x1440 design canvas and scale down
   with the Twitch player instead of staying 75 browser CSS pixels. */
.minigame-queue-stack {
  --queue-icon-size:75px;
  --queue-gap:7px;
  --queue-font-size:18px;
  --queue-name-max:220px;
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:calc(var(--queue-icon-size) + var(--queue-gap) + var(--queue-name-max));
  height:480px;
  pointer-events:none;
  z-index:90;
}
.minigame-queue-entry {
  position:absolute;
  left:0;
  top:0;
  height:var(--queue-icon-size);
  display:flex;
  align-items:center;
  gap:var(--queue-gap);
  max-width:100%;
  opacity:1;
  transform:translateX(0) scale(1);
  transition:top 300ms cubic-bezier(.22,.75,.22,1), opacity 180ms ease, transform 220ms ease;
  will-change:top,transform,opacity;
}
.minigame-queue-entry.is-new { opacity:0; transform:translateX(-8px) scale(.97); }
.minigame-queue-entry.is-leaving { opacity:0; transform:translateX(-9px) scale(.96); }
.minigame-queue-icon-shell {
  position:relative;
  flex:0 0 var(--queue-icon-size);
  width:var(--queue-icon-size);
  height:var(--queue-icon-size);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.48));
}
.minigame-queue-icon,
.minigame-queue-icon-gray {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.minigame-queue-icon-gray {
  filter:grayscale(1) brightness(.62) contrast(.92);
  clip-path:inset(0 0 0 100%);
  will-change:clip-path;
}
.minigame-queue-name {
  min-width:0;
  max-width:var(--queue-name-max);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#fff7e9;
  font:850 var(--queue-font-size)/1.05 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.96),0 0 5px rgba(0,0,0,.78);
}
.minigame-queue-entry.is-waiting .minigame-queue-name { color:rgba(244,237,225,.82); }
.minigame-queue-entry.is-waiting .minigame-queue-icon-shell { opacity:.86; }

/* V0.12.17 — PPC/CARD private Event Bubble mirror.
   Geometry is copied from VOX_OVERLAYS/modules/ui/style.css. Only PPC/CARD use it. */
.private-minigame-bubble-layer {
  position:absolute;
  inset:0;
  z-index:72;
  pointer-events:none;
  overflow:visible;
}
.vox-private-event-bubble {
  --obs-bubble-scale:1;
  position:absolute;
  max-width:620px;
  min-width:220px;
  min-height:76px;
  padding:22px 28px;
  border-radius:28px;
  background:linear-gradient(180deg,#14151d,#0e0f15);
  border:4px solid #d6a836;
  box-shadow:0 0 18px rgba(214,168,54,.18),0 12px 28px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,235,175,.08);
  opacity:0;
  transform-origin:0 0;
  transform:scale(var(--obs-bubble-scale)) translateY(8px) scale(.98);
  transition:opacity 220ms ease,transform 220ms ease;
  box-sizing:content-box;
}
.vox-private-event-bubble.visible {
  opacity:1;
  transform:scale(var(--obs-bubble-scale)) translateY(0) scale(1);
}
.vox-private-event-bubble.hidden { display:none !important; }
.vox-private-event-bubble::before,
.vox-private-event-bubble::after {
  content:"";
  position:absolute;
  left:var(--tail-x,50%);
  transform:translateX(-50%);
  width:0;
  height:0;
}
.vox-private-event-bubble.tail-bottom::after {
  bottom:-30px;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-top:30px solid #d6a836;
}
.vox-private-event-bubble.tail-bottom::before {
  bottom:-19px;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:20px solid #0e0f15;
  z-index:2;
}
.vox-private-event-bubble.tail-top::after {
  top:-30px;
  border-left:22px solid transparent;
  border-right:22px solid transparent;
  border-bottom:30px solid #d6a836;
}
.vox-private-event-bubble.tail-top::before {
  top:-19px;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:20px solid #14151d;
  z-index:2;
}
.vox-private-event-content {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:max-content;
  height:max-content;
  line-height:0;
}
.vox-private-event-image {
  display:block;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.vox-private-event-bubble.event-image-only {
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  padding:10px !important;
  border-width:3px !important;
  border-radius:20px !important;
}
/* PPC cycle + final Vox choice: exact OBS 110 x 110 bubble. */
.vox-private-event-bubble.event-ppc-choice {
  width:110px !important;
  height:110px !important;
  min-width:110px !important;
  min-height:110px !important;
  max-width:110px !important;
  max-height:110px !important;
  box-sizing:border-box !important;
  padding:10px !important;
}
.vox-private-event-bubble.event-ppc-choice .vox-private-event-content {
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
}
.vox-private-event-bubble.event-ppc-choice .vox-private-event-image {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
/* PPC/CARD result: exact OBS 260 x 180 bubble. */
.vox-private-event-bubble.event-ppc-result {
  width:260px !important;
  height:180px !important;
  min-width:260px !important;
  min-height:180px !important;
  max-width:260px !important;
  max-height:180px !important;
  box-sizing:border-box !important;
  padding:0 !important;
}
.vox-private-event-bubble.event-ppc-result .vox-private-event-content {
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
}
.vox-private-event-bubble.event-ppc-result .vox-private-event-image {
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  object-fit:contain !important;
}
/* CARD: exact OBS 132 px card content and flip geometry. */
.vox-private-event-bubble.event-card-back,
.vox-private-event-bubble.event-card-reveal {
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  width:auto !important;
  height:auto !important;
  padding:10px !important;
  border-radius:18px !important;
}
.vox-private-event-bubble.event-card-back .vox-private-event-content,
.vox-private-event-bubble.event-card-reveal .vox-private-event-content {
  width:132px !important;
  height:auto !important;
  line-height:0 !important;
}
.vox-private-event-bubble.event-card-back .vox-private-event-image,
.vox-private-event-bubble.event-card-reveal .vox-private-event-image {
  display:block !important;
  width:132px !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:fill !important;
  transform-origin:50% 50% !important;
}
.vox-private-event-bubble.event-card-back .vox-private-event-image {
  animation:voxPrivateObsCardBackAppear 420ms cubic-bezier(.18,.82,.3,1) both;
}
.vox-private-event-bubble.event-card-back.event-card-flipping .vox-private-event-image {
  animation:voxPrivateObsCardFlipOut 110ms cubic-bezier(.42,0,.65,.58) both !important;
}
.vox-private-event-bubble.event-card-reveal .vox-private-event-image {
  animation:voxPrivateObsCardRevealFlip 170ms cubic-bezier(.15,.82,.28,1) both;
}
@keyframes voxPrivateObsCardBackAppear {
  0% { opacity:0; transform:translateY(8px) scale(.94); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes voxPrivateObsCardFlipOut {
  0% { opacity:1; transform:perspective(700px) rotateY(0deg) scale(1); }
  100% { opacity:.82; transform:perspective(700px) rotateY(90deg) scale(.98); }
}
@keyframes voxPrivateObsCardRevealFlip {
  0% { opacity:.25; transform:perspective(700px) rotateY(88deg) scale(.95); }
  62% { opacity:1; transform:perspective(700px) rotateY(-5deg) scale(1.025); }
  100% { opacity:1; transform:perspective(700px) rotateY(0deg) scale(1); }
}

/* V0.12.34 — public Vox scheduler monitor.
   FEED/PET/PLAY use the same 75x75 queue slot as PPC/CARD/FIGHT.
   The active first slot receives a restrained pulse so the viewer can see that
   Vox is now available for their turn. Missing custom icons get a text fallback. */
.minigame-queue-icon-fallback {
  position:absolute;
  inset:5%;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(54,45,74,.98),rgba(17,14,25,.98) 66%,rgba(7,6,10,.98));
  border:2px solid rgba(226,210,255,.58);
  color:#fff8ff;
  font:900 calc(var(--queue-font-size) * .72)/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.035em;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
  box-sizing:border-box;
}
.minigame-queue-icon-shell.icon-missing .minigame-queue-icon,
.minigame-queue-icon-shell.icon-missing .minigame-queue-icon-gray { display:none; }
.minigame-queue-icon-shell.icon-missing .minigame-queue-icon-fallback { display:flex; }

.minigame-queue-entry.is-current-turn .minigame-queue-icon-shell::before {
  content:"";
  position:absolute;
  inset:-7%;
  border-radius:50%;
  border:2px solid rgba(244,223,255,.76);
  box-shadow:
    0 0 8px rgba(230,202,255,.72),
    0 0 17px rgba(189,147,255,.52),
    0 0 28px rgba(139,104,230,.28);
  opacity:.72;
  pointer-events:none;
  animation:vox-queue-turn-glow 1.55s ease-in-out infinite;
}
@keyframes vox-queue-turn-glow {
  0%,100% { transform:scale(.98); opacity:.48; }
  50% { transform:scale(1.07); opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .minigame-queue-entry.is-current-turn .minigame-queue-icon-shell::before { animation:none; opacity:.8; }
}