/* PRODIGEEK ARENA — motion layer. Purely visual: never changes votes, phases or timers.
   Scenes are triggered by effects.js after the server confirms a state; colours come from the theme tokens. */

/* Ambient particles: fixed positions, CSS-only drift (the theme may hide them). */
.fx-particles { position: absolute; inset: 0; display: var(--particles, block); }
.fx-particle { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: var(--a); opacity: .0; animation: fxDrift var(--duration) linear var(--delay) infinite; }
.fx-particle--pink { background: var(--b); }
.fx-particle--green { background: var(--brand); width: 4px; height: 4px; }
@keyframes fxDrift { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--particle-opacity, .45); } 85% { opacity: var(--particle-opacity, .45); } 100% { transform: translate3d(var(--drift), -120px, 0); opacity: 0; } }
@media(max-width:720px) { .fx-particle:nth-child(n+17) { display: none; } }

/* Entrances driven by phase classes from client.js. */
.fighter.enter { animation: fxFighterIn 620ms var(--ease-out) both; }
.fighter.enter.right { animation-delay: 90ms; }
@keyframes fxFighterIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.fx-verdict-entered .fighter.victory { animation: fxVictory 900ms var(--ease-out) both; }
.fx-verdict-entered .fighter.defeat { animation: fxDefeat 900ms var(--ease-out) both; }
@keyframes fxVictory { 0% { transform: scale(.96); } 45% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes fxDefeat { from { opacity: 1; filter: none; } to { opacity: .55; filter: grayscale(.6); } }
.fx-verdict-entered .split-bar span { animation: fxSplit 900ms var(--ease-out) both; transform-origin: left; }
.fx-verdict-entered .split-b { transform-origin: right; }
@keyframes fxSplit { from { transform: scaleX(0); } }
.verdict .result-callout { animation: fxRise 520ms var(--ease-out) both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(8px); } }

/* Contender perimeter: a slow light sweep along the card edge while the vote is open. */
.fighter::before {
  content: ""; position: absolute; inset: calc(var(--border-w) * -1); border-radius: inherit; padding: var(--contender-w, 2px); pointer-events: none;
  background: conic-gradient(from var(--pg-angle, 0deg), transparent 0 70%, var(--pg-border-color, var(--side)) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 400ms var(--ease-out);
}
.pg-contender-border, .fx-playing .fighter::before { opacity: var(--contender-opacity, 1); animation: fxPerimeter 4.5s linear infinite; }
.fighter.victory::before { --pg-border-color: var(--brand); opacity: var(--contender-opacity, 1); animation: fxPerimeter 2.6s linear infinite; }
@property --pg-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxPerimeter { to { --pg-angle: 360deg; } }

/* Last 10 seconds of voting. */
body:has(.fx-critical) .timer-value { animation: fxTick 1s steps(1) infinite; }
@keyframes fxTick { 50% { opacity: .55; } }

/* Counter bump */
.fx-count-bump { display: inline-block; animation: fxBump 420ms var(--ease-out); }
@keyframes fxBump { 30% { transform: translateY(-3px); color: var(--brand); } }

/* ---------- Full-stage scenes ---------- */
.fx-stage { position: absolute; inset: -2px; z-index: 4; pointer-events: none; display: grid; place-items: center; border-radius: var(--radius-m); overflow: hidden; }
.fx-stage:empty { display: none; }
.fx-stage > * { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.fx-portals, .fx-energy-clash, .fx-transmission { justify-items: stretch; }
.fx-transmission b { justify-self: center; }
.fx-stage b, .fx-stage strong { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--display-tracking); }
.fx-stage small, .fx-boot-eyebrow { font-family: var(--label-font); font-size: .72rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-2); }
.fx-stage--boot, .fx-stage--complete { background: color-mix(in oklch, var(--bg) 92%, transparent); animation: fxSceneFade 2s var(--ease-out) both; }
.fx-stage--complete { animation-duration: 1.8s; }
@keyframes fxSceneFade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-boot-screen strong, .fx-complete-screen strong { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1; }
.fx-boot-bar { width: min(260px, 60vw); height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.fx-boot-bar span { display: block; height: 100%; background: var(--brand); transform-origin: left; animation: fxBar 1.5s var(--ease-out) .2s both; }
@keyframes fxBar { from { transform: scaleX(0); } }
.fx-complete-screen span { font-size: 2rem; color: var(--brand); }

.fx-portals { position: absolute !important; inset: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; }
.fx-portal { display: grid; place-items: center; background: var(--a); color: var(--a-ink); animation: fxPortalL 1.6s var(--ease-out) both; }
.fx-portal--omega { background: var(--b); color: var(--b-ink); animation-name: fxPortalR; }
.fx-portal b { font-size: clamp(1.2rem, 1rem + 1.4vw, 2.2rem); }
.fx-portal i { display: none; }
@keyframes fxPortalL { 0% { transform: translateX(-100%); } 30%, 62% { transform: none; } 100% { transform: translateX(-100%); } }
@keyframes fxPortalR { 0% { transform: translateX(100%); } 30%, 62% { transform: none; } 100% { transform: translateX(100%); } }

.fx-voting-wave b { font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); padding: 10px 22px; background: var(--ink); color: var(--bg); border-radius: var(--radius-s); animation: fxStamp 1.15s var(--ease-out) both; }
.fx-voting-wave span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 2px solid var(--ink); animation: fxRing 1.1s var(--ease-out) both; }
@keyframes fxStamp { 0% { opacity: 0; transform: scale(1.25); } 18% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxRing { from { transform: scale(.2); opacity: .9; } to { transform: scale(14); opacity: 0; } }

.fx-transmission { grid-template-columns: auto 1fr auto; align-items: center; width: min(560px, 90%); gap: 10px 14px !important; }
.fx-transmission .fx-source, .fx-transmission .fx-destination { font-family: var(--label-font); font-size: .72rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-2); }
.fx-beam { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.fx-beam i { display: block; height: 100%; background: var(--a); animation: fxBeam .8s var(--ease-out) both; transform-origin: left; }
.fx-transmission--omega .fx-beam i { background: var(--b); }
.fx-transmission b { grid-column: 1 / -1; color: var(--brand-ink); background: var(--brand); padding: 8px 16px; border-radius: var(--radius-s); animation: fxRise .35s var(--ease-out) .45s both; }
@keyframes fxBeam { from { transform: scaleX(0); } }
.fx-stage--signal-left, .fx-stage--signal-right { background: color-mix(in oklch, var(--bg) 55%, transparent); animation: fxSceneFade 1.1s var(--ease-out) both; }

.fx-energy-clash { position: absolute !important; inset: 0; display: grid !important; place-items: center; }
.fx-energy-left, .fx-energy-right { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--a); animation: fxClashL 1.1s var(--ease-out) both; }
.fx-energy-left { left: 0; } .fx-energy-right { right: 0; background: var(--b); animation-name: fxClashR; }
.fx-energy-impact { position: relative; z-index: 1; font-size: 2.6rem; color: var(--brand); animation: fxStamp 2s var(--ease-out) .5s both; }
.fx-energy-clash b { position: relative; z-index: 1; margin-top: 90px; font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); animation: fxStamp 2s var(--ease-out) .5s both; }
@keyframes fxClashL { 0% { transform: translateX(-100%); } 45% { transform: none; } 70% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes fxClashR { 0% { transform: translateX(100%); } 45% { transform: none; } 70% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ---------- COMMS ---------- */
.comms-emoji-picker[hidden] { display: none; }
.comms-emoji-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.chat-msg:not(.bot) .chat-name { color: var(--chat-user-color, var(--ink)); }
@supports (color: oklch(from red l c h)) {
  .chat-msg:not(.bot) .chat-name { color: oklch(from var(--chat-user-color, var(--ink)) var(--chat-name-l, l) var(--chat-name-c, c) h); }
}
.chat-msg.bot .chat-name { color: var(--brand); }
.chat-msg--incoming { animation: commsReceive 360ms var(--ease-out) both; }
.chat-msg--incoming.chat-msg--mine { animation-name: commsMineReceive; }
.chat-msg--incoming.bot { animation-name: commsBotReceive; animation-duration: 520ms; }
@keyframes commsReceive { from { opacity: 0; transform: translateY(8px); } }
@keyframes commsMineReceive { from { opacity: 0; transform: translateX(10px); } }
@keyframes commsBotReceive { 0% { opacity: 0; transform: translateY(8px); background: var(--brand); } 60% { opacity: 1; } }
#chatForm.comms-sending .send-btn { animation: commsTransmitting .8s linear infinite; }
#chatForm.comms-delivered #chatInput { animation: commsDelivered .7s var(--ease-out); }
#chatForm.comms-error #chatInput { animation: commsError .4s var(--ease-out); border-color: var(--danger); }
#chatForm.comms-error ~ #chatNote { color: var(--danger); }
#chatForm.comms-delivered ~ #chatNote { color: var(--brand); }
@keyframes commsTransmitting { 50% { opacity: .5; } }
@keyframes commsDelivered { 30% { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } }
@keyframes commsError { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fx-bot-speaking { animation: fxBump 520ms var(--ease-out); }
.fx-chat-activity { animation: fxBump 420ms var(--ease-out); }

/* Mobile: COMMS drawer above everything, launcher pinned to the viewport corner. */
@media(max-width:1300px) {
  .chat { z-index:31!important; }
  .shell { padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)); }
  body > #chatFab.chat-fab {
    position:fixed !important; display:flex !important; z-index:25 !important;
    right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media(prefers-reduced-motion:reduce) {
  .fx-stage, .fx-particles { display: none !important; }
  .fighter::before{animation:none!important;}
  .chat-msg--incoming, .fighter.enter, .fx-count-bump { animation: none !important; }
}