.panorama-screen {
  --mint: #75edc5;
  --cyan-line: #315e7a;
  --ease: cubic-bezier(.22, .72, .24, 1);
  position: relative;
  width: min(100vw, calc(100vh * 1465 / 1074));
  aspect-ratio: 1465 / 1074;
  overflow: hidden;
  container-type: inline-size;
  color: #f5f8fa;
  background: #061a2b;
  font-family: "PT Sans", sans-serif;
}

.panorama-bg { position: absolute; inset: 0; background: url("/assets/backgrounds/panorama-clean.png") center/cover no-repeat; }
.panorama-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 14, 27, .05), rgba(0, 12, 23, .18) 65%, rgba(0, 8, 17, .46)); }

.panorama-header { position: absolute; z-index: 4; inset: 0 0 auto; height: 12.2%; display: flex; align-items: center; justify-content: space-between; padding: 1.8% 2%; background: linear-gradient(180deg, rgba(2, 18, 33, .97), rgba(3, 22, 39, .93)); border-bottom: 1px solid rgba(94, 155, 191, .26); }
.panorama-title { display: flex; align-items: center; gap: 1.25cqw; }
.panorama-title > img { width: 6.15cqw; filter: drop-shadow(0 5px 7px rgba(0,0,0,.48)); }
.panorama-title span { color: var(--mint); font-size: 1.12cqw; font-weight: 700; }
.panorama-title h1 { margin: .2cqw 0 .25cqw; color: white; font-family: "Exo 2", sans-serif; font-size: 3.05cqw; font-style: italic; line-height: .98; letter-spacing: -.07cqw; }
.panorama-title p { margin: 0; color: #aec2d0; font-size: 1.16cqw; }
.panorama-header__right { display: flex; align-items: center; gap: 1.1cqw; }
.panorama-wallet { height: 5.2cqw; display: flex; align-items: center; gap: 1.7cqw; padding: 0 1.65cqw; border: .1cqw solid #3c6c89; border-radius: 1cqw; background: rgba(4, 22, 37, .84); }
.panorama-wallet > div { display: flex; align-items: center; gap: .8cqw; }
.panorama-wallet strong { font-family: "Exo 2"; font-size: 1.85cqw; }
.panorama-wallet i { width: 1px; height: 2.6cqw; background: #4d7d98; }
.panorama-wallet svg { font-size: 1.75cqw; }
.panorama-wallet__coin { color: #ffbd21; filter: drop-shadow(0 1px 0 #7c4d00); }
.panorama-wallet__gem { color: #35c6ff; }
.panorama-settings { width: 5.1cqw; height: 5.1cqw; display: grid; place-items: center; border: .1cqw solid #4c7d98; border-radius: 1cqw; background: rgba(8, 31, 50, .82); cursor: pointer; }
.panorama-settings svg { font-size: 2.2cqw; color: #a8c4d4; }

/* ---------------------------------------------------------------------------
   Palco da equipe.

   Toda a fileira e derivada de duas medidas: a largura da placa (--pw) e a
   linha de chao. Altura, rotulo, tipografia, sombra e o tamanho do sprite sao
   calculados a partir de --pw, entao a placa selecionada e exatamente a mesma
   peca vista de perto - nada precisa ser reajustado a mao.

   As coordenadas horizontais vem do JS (PanoramaVariant.jsx), que distribui as
   seis placas com folga constante e mantem as bordas externas da fileira
   ancoradas: trocar de selecionado so redistribui o espaco interno.
   --------------------------------------------------------------------------- */

/* Registradas para que a troca de selecionado interpole a placa inteira -
   escala, inclinacao, profundidade e pose - num unico movimento. Todas
   herdam: sprite, rotulo e piso leem os mesmos valores do pai. */
@property --pw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --art { syntax: "<number>"; inherits: true; initial-value: .98; }
@property --depth { syntax: "<number>"; inherits: true; initial-value: .353; }
@property --stand { syntax: "<number>"; inherits: true; initial-value: .42; }
@property --tilt { syntax: "<angle>"; inherits: true; initial-value: 48deg; }

.panorama-lineup { position: absolute; z-index: 2; inset: 0; pointer-events: none; }

.panorama-platform {
  --primary: #71bd34;
  --secondary: #9b5a98;
  --ph: calc(var(--pw) * .97);  /* altura da placa */
  --face: .22;                  /* fatia da altura ocupada pela frente/rotulo */
  --depth: .353;                /* fatia da altura ocupada pelo topo visivel */
  --stand: .42;                 /* onde as patas pousam, do fio da frente para o fundo */
  --foot: .16;                  /* linha de contato do sprite, em lados de sprite */
  --art: .98;                   /* lado do sprite, em larguras de placa */
  --tilt: 48deg;
  position: absolute;
  bottom: 33.82cqw;             /* linha de chao compartilhada */
  width: var(--pw);
  height: var(--ph);
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 calc(var(--pw) * .083) calc(var(--pw) * .075) rgba(0, 0, 0, .48));
  transition: left .42s var(--ease), bottom .42s var(--ease), --pw .42s var(--ease), --art .42s var(--ease), --depth .42s var(--ease), --stand .42s var(--ease), --tilt .42s var(--ease);
}

.panorama-platform__art { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--ph) * (var(--face) + var(--depth) * var(--stand)) - var(--pw) * var(--art) * var(--foot)); width: calc(var(--pw) * var(--art)); aspect-ratio: 1; transform: translateX(-50%); }
.panorama-platform__art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 calc(var(--pw) * .037) calc(var(--pw) * .029) rgba(0, 0, 0, .55)); transition: transform .18s ease; }
.panorama-platform__floor { position: absolute; z-index: 1; inset: 0 0 18%; overflow: hidden; border-radius: calc(var(--pw) * .04) calc(var(--pw) * .04) 0 0; background-color: var(--primary); background-image: url("/assets/patterns/square-pattern-30.svg"), linear-gradient(145deg, var(--primary) 0 50%, var(--secondary) 50% 100%); background-size: calc(var(--pw) * .58), auto; transform: perspective(calc(var(--pw) * 1.49)) rotateX(var(--tilt)); transform-origin: bottom; box-shadow: inset 0 0 calc(var(--pw) * .1) rgba(255, 255, 255, .12); }
.panorama-platform > strong { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: calc(var(--ph) * var(--face)); display: grid; place-items: center; border-radius: 0 0 calc(var(--pw) * .037) calc(var(--pw) * .037); color: #f7f6f9; background: #1a082d; font-family: "Exo 2"; font-size: calc(var(--pw) * .11); font-style: italic; line-height: 1; box-shadow: 0 calc(var(--pw) * .025) calc(var(--pw) * .05) rgba(0, 0, 0, .34); }
.panorama-platform:hover .panorama-platform__art img { transform: translateY(calc(var(--pw) * -.037)) scale(1.04); }
.panorama-platform:focus-visible { outline: 0; }
.panorama-platform:focus-visible > strong { outline: .16cqw solid #bff4e4; outline-offset: .16cqw; }

.panorama-platform.is-selected { --depth: .52; --tilt: 30deg; bottom: 26.48cqw; z-index: 5; }
.panorama-platform.is-selected .panorama-platform__floor { border: calc(var(--pw) * .008) solid var(--mint); box-shadow: 0 0 calc(var(--pw) * .055) rgba(93, 255, 204, .55), inset 0 0 calc(var(--pw) * .075) rgba(255, 255, 255, .14); }
.panorama-platform.is-selected > strong { border: calc(var(--pw) * .008) solid var(--mint); border-top: 0; color: white; box-shadow: 0 0 calc(var(--pw) * .052) rgba(93, 255, 204, .42); }
.panorama-platform.is-dragging { opacity: .4; }
.panorama-platform.is-drop-target .panorama-platform__floor { border-color: #ffe26e; box-shadow: 0 0 calc(var(--pw) * .085) rgba(255, 226, 110, .72), inset 0 0 calc(var(--pw) * .075) rgba(255,255,255,.14); }

.panorama-details { position: absolute; z-index: 5; left: 1.55%; right: 1.7%; bottom: 14%; height: 16.4%; display: grid; grid-template-columns: 31.5cqw 9.35cqw 10.3cqw 13.1cqw 12.3cqw 1fr; align-items: center; padding: 1.2cqw 2.3cqw; border: .1cqw solid #447894; border-radius: 1cqw; background: rgba(3, 25, 43, .9); backdrop-filter: blur(9px); box-shadow: 0 1cqw 2cqw rgba(0,0,0,.2); }
.panorama-details__identity { min-width: 0; height: 100%; display: grid; grid-template-columns: 11.8cqw 1fr; align-items: center; gap: 1.1cqw; }
.panorama-details__identity > img { width: 11.4cqw; height: 9.7cqw; object-fit: contain; image-rendering: pixelated; }
.panorama-details__identity span, .panorama-fact > span { color: #87a6bb; font-family: "Exo 2"; font-size: .9cqw; font-weight: 700; }
.panorama-details__identity > div > span { color: var(--mint); }
.panorama-details h2 { display: flex; align-items: center; gap: .8cqw; margin: .45cqw 0 .5cqw; font-family: "Exo 2"; font-size: 2.35cqw; font-style: italic; line-height: 1; }
.panorama-sex { font-size: 1.65cqw; }
.panorama-sex--female { color: #ef5e9e; }
.panorama-sex--male { color: #4fc4ff; }
.panorama-details__identity p { margin: 0; display: flex; gap: 1.35cqw; font-size: 1.45cqw; }
.panorama-quality { --iv-quality: #98a9b3; align-items: center; }
.panorama-quality.is-quality-common, .panorama-quality-meter.is-quality-common { --iv-quality: #d3e0e5; }
.panorama-quality.is-quality-uncommon, .panorama-quality-meter.is-quality-uncommon { --iv-quality: #67e3a5; }
.panorama-quality.is-quality-rare, .panorama-quality-meter.is-quality-rare { --iv-quality: #55c5ff; }
.panorama-quality.is-quality-epic, .panorama-quality-meter.is-quality-epic { --iv-quality: #d184f4; }
.panorama-quality.is-quality-legendary, .panorama-quality-meter.is-quality-legendary { --iv-quality: #ffd45f; }
.panorama-quality.is-quality-mythic, .panorama-quality-meter.is-quality-mythic { --iv-quality: #ff8bcf; }
.panorama-quality.is-quality-perfect, .panorama-quality-meter.is-quality-perfect { --iv-quality: #9df8ff; }
.panorama-quality.is-quality-unknown, .panorama-quality-meter.is-quality-unknown { --iv-quality: #98a9b3; }
.panorama-details__identity .panorama-quality b { color: var(--iv-quality); }
.panorama-quality.is-quality-perfect b { padding: .18cqw .6cqw; border: .08cqw solid #ffe16b; border-radius: 999px; background: rgba(5, 38, 55, .86); box-shadow: 0 0 .75cqw rgba(111, 245, 255, .58); }
.panorama-quality.is-quality-perfect b::before { content: "★ "; color: #ffe16b; }
.panorama-meter { height: .85cqw; margin-top: .65cqw; overflow: hidden; border-radius: 999px; background: rgba(0, 8, 15, .72); }
.panorama-meter i { display: block; height: 100%; border-radius: inherit; background: #3da9ea; }
.panorama-quality-meter i { background: var(--iv-quality); box-shadow: 0 0 .7cqw color-mix(in srgb, var(--iv-quality), transparent 35%); }
.panorama-meter--xp i { background: #65e2b3; }
.panorama-meter--hp i { background: #65e2b3; }
.panorama-fact { min-width: 0; height: 65%; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; padding: 0 1.8cqw; border-left: 1px solid rgba(83, 122, 145, .48); }
.panorama-fact strong { font-family: "Exo 2"; font-size: 1.48cqw; line-height: 1.15; white-space: nowrap; }
.panorama-fact .panorama-meter { width: 100%; margin-top: 0; }
.panorama-fact--ivs { gap: .48cqw; padding-right: .35cqw; padding-left: 1.1cqw; }
.panorama-fact--ivs > span { display: flex; align-items: center; justify-content: space-between; gap: .5cqw; }
.panorama-fact--ivs > span b { color: #67e2b5; font-size: .72cqw; letter-spacing: .035em; text-transform: uppercase; }
.panorama-quick-ivs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .28cqw; }
.panorama-quick-ivs > span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .25cqw; padding: .28cqw .38cqw; border: 1px solid rgba(86, 145, 172, .34); border-radius: .34cqw; background: rgba(0, 12, 23, .5); }
.panorama-quick-ivs small { overflow: hidden; color: #789bae; font-size: .58cqw; font-weight: 800; text-overflow: ellipsis; }
.panorama-quick-ivs b { color: #f4fbff; font-family: "Exo 2"; font-size: .78cqw; line-height: 1; }
.panorama-ability { display: flex; align-items: center; gap: .55cqw; }
.panorama-ability img { width: 1.55cqw; height: 1.55cqw; object-fit: contain; }

.panorama-actions { position: absolute; z-index: 6; left: 35.5%; right: 35.5%; bottom: 3.5%; display: grid; grid-template-columns: 1fr; gap: 2.5cqw; }
.panorama-button { height: 6.3cqw; display: flex; align-items: center; justify-content: center; gap: 1.25cqw; border-radius: 1.65cqw; font-family: "Exo 2"; font-size: 1.75cqw; font-style: italic; font-weight: 700; cursor: pointer; box-shadow: 0 .55cqw 0 rgba(0, 10, 19, .62), inset 0 .12cqw .2cqw rgba(255,255,255,.16); }
.panorama-button--secondary { border: .13cqw solid #426f8c; color: #f1f5f8; background: rgba(3, 26, 44, .94); }
.panorama-button--secondary span { display: flex; align-items: center; gap: -.2cqw; font-size: 1.8cqw; }
.panorama-button--primary { border: .16cqw solid #d5fff1; color: #07394a; background: linear-gradient(180deg, #91f3d3, #5dd8b0); }
.panorama-button--primary svg { font-size: 2.35cqw; }
.panorama-settings > span { color: #b8d2e0; font: 400 2.5cqw/1 "Segoe UI", sans-serif; }
.panorama-toast { position: absolute; z-index: 10; top: 12.8%; left: 50%; transform: translateX(-50%); padding: .85cqw 1.4cqw; border: .08cqw solid var(--mint); border-radius: 999px; color: #eafff7; background: rgba(2, 31, 42, .94); font-weight: 700; box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.35); }

@media (max-aspect-ratio: 4 / 3) {
  .panorama-screen { width: 100vw; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .panorama-platform,
  .panorama-platform__art img { transition: none; }
}

/* Painel rápido do Pokémon selecionado: mantém o panorama limpo e revela
   genética, treino, item e golpes somente quando o treinador pedir. */
.panorama-details__expanded {
  position: absolute;
  right: 0;
  bottom: calc(100% + .7cqw);
  left: 0;
  display: grid;
  min-height: 11.8cqw;
  grid-template-columns: 1.05fr 1.2fr 1.2fr 1.55fr;
  gap: .65cqw;
  padding: .8cqw;
  border: .08cqw solid rgba(102, 224, 194, .62);
  border-radius: .9cqw;
  background: linear-gradient(135deg, rgba(3, 27, 45, .98), rgba(6, 37, 54, .96));
  box-shadow: 0 1.2cqw 2.8cqw rgba(0, 0, 0, .46), inset 0 .08cqw rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.panorama-details__expanded > article {
  min-width: 0;
  padding: .72cqw;
  border-radius: .62cqw;
  background: rgba(2, 20, 34, .72);
  box-shadow: inset 0 0 0 .06cqw rgba(88, 151, 181, .32);
}
.panorama-details__expanded header { display: flex; align-items: center; justify-content: space-between; gap: .5cqw; margin-bottom: .55cqw; }
.panorama-details__expanded header span,
.panorama-held-item small { color: var(--mint); font: 800 .82cqw/1 "Exo 2", sans-serif; letter-spacing: .04em; }
.panorama-details__expanded header b { color: #edf9fc; font: 800 .9cqw/1 "Exo 2", sans-serif; }
.panorama-held-item { display: grid; grid-template-columns: 3.2cqw minmax(0, 1fr); align-items: center; gap: .7cqw; }
.panorama-held-item__icon { display: grid; width: 3.2cqw; height: 3.2cqw; place-items: center; border-radius: .65cqw; background: rgba(9, 52, 66, .86); box-shadow: inset 0 0 0 .08cqw rgba(101, 221, 190, .4); }
.panorama-held-item__icon img { width: 2.5cqw; height: 2.5cqw; object-fit: contain; image-rendering: pixelated; }
.panorama-held-item__icon.is-empty { opacity: .58; }
.panorama-held-item > span:last-child { display: grid; min-width: 0; gap: .3cqw; }
.panorama-held-item b { overflow: hidden; color: #fff; font: 800 1.18cqw/1.1 "Exo 2", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.panorama-held-item em { color: #8caabb; font: normal .82cqw/1.25 "PT Sans", sans-serif; }
.panorama-expanded-ivs,
.panorama-quick-evs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .34cqw; }
.panorama-expanded-ivs > span,
.panorama-quick-evs > span { position: relative; display: grid; min-width: 0; grid-template-columns: auto auto; justify-content: center; gap: .25cqw; padding: .45cqw .25cqw .62cqw; overflow: hidden; border-radius: .36cqw; background: rgba(1, 15, 27, .7); }
.panorama-expanded-ivs > span::after { position: absolute; right: .22cqw; bottom: .2cqw; left: .22cqw; height: .12cqw; border-radius: 999px; content: ""; background: linear-gradient(90deg, var(--iv-tone, #7895a7) var(--iv-pct), rgba(117, 145, 161, .18) var(--iv-pct)); }
.panorama-expanded-ivs > span.is-perfect { --iv-tone: #ffe16b; }
.panorama-expanded-ivs > span.is-high { --iv-tone: #68e4bd; }
.panorama-expanded-ivs > span.is-mid { --iv-tone: #62bfe9; }
.panorama-expanded-ivs > span.is-low { --iv-tone: #ef8178; }
.panorama-expanded-ivs small,
.panorama-quick-evs small { color: #82a2b4; font: 800 .68cqw/1 "Exo 2", sans-serif; }
.panorama-expanded-ivs b,
.panorama-quick-evs b { color: #eff9fc; font: 800 .86cqw/1 "Exo 2", sans-serif; }
.panorama-moves > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35cqw; }
.panorama-moves > div > span { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .28cqw; padding: .35cqw; border-radius: .38cqw; background: rgba(1, 16, 27, .76); }
.panorama-moves .rds-type { min-height: 1.15cqw; padding: .12cqw .3cqw; font-size: .58cqw; }
.panorama-moves .rds-type img { width: .8cqw; height: .8cqw; }
.panorama-moves b { overflow: hidden; color: #fff; font: 800 .78cqw/1 "Exo 2", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.panorama-moves small { color: #86a5b5; font: 700 .62cqw/1 "PT Sans", sans-serif; white-space: nowrap; }
.panorama-moves em { color: #8da8b6; font: normal .76cqw/1.2 "PT Sans", sans-serif; }

.panorama-actions { left: 1.55%; right: 1.7%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65cqw; }
.panorama-button { height: 5.5cqw; gap: .65cqw; border-radius: 1.05cqw; font-size: 1.08cqw; }
.panorama-button img { width: 1.55cqw; height: 1.55cqw; object-fit: contain; }
.panorama-button:disabled { cursor: default; filter: grayscale(.7); opacity: .42; box-shadow: none; }
.panorama-button--open-pc { box-shadow: 0 .55cqw 0 rgba(0, 10, 19, .62), 0 0 1.2cqw rgba(98, 226, 186, .16), inset 0 .12cqw .2cqw rgba(255,255,255,.2); }
.panorama-platform[data-party-open-manager] { touch-action: manipulation; }