/* Full-bleed elemental portrait. Atlas tiles retain their native 3:4 proportions. */
.pokemon-card { --scene-ink: #100e20; }
.pokemon-card__artwork { background: none; isolation: auto; }
.pokemon-card__artwork::before,
.pokemon-card__artwork::after,
.pokemon-card__orb { display: none; }
.element-scene {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; background: #171422;
}
.element-scene__texture {
  position: absolute; width: 100%; aspect-ratio: 3 / 4;
  left: 0; top: 45%; transform: translateY(-45%) scale(1.04);
  background-image: url('./assets/elemental-background-atlas-v1.png');
  background-size: 400% 400%; background-position: var(--type-atlas-position);
  filter: saturate(.9) brightness(.8);
}
.element-scene__light {
  position: absolute; inset: 0; opacity: .8;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--pokemon-accent) 38%, transparent), transparent 53%),
    linear-gradient(120deg, transparent 25%, #ffffff0b 32%, transparent 39%);
  mix-blend-mode: screen;
}
.element-scene__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #0c0a1b88, transparent 22% 48%, #100e2077 66%, #100e20 97%),
    linear-gradient(90deg, #100e2044, transparent 22% 78%, #100e2044);
}
.element-scene__particles { position: absolute; inset: 0; }
.element-scene__particles i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff5dd; box-shadow: 0 0 9px 2px var(--pokemon-accent);
  left: var(--x); top: var(--y); opacity: .5;
}
.element-scene__particles i:nth-child(1) { --x: 12%; --y: 58%; --delay: -2s; }
.element-scene__particles i:nth-child(2) { --x: 22%; --y: 34%; --delay: -5s; }
.element-scene__particles i:nth-child(3) { --x: 80%; --y: 47%; --delay: -1s; }
.element-scene__particles i:nth-child(4) { --x: 90%; --y: 25%; --delay: -7s; }
.element-scene__particles i:nth-child(5) { --x: 68%; --y: 61%; --delay: -4s; }
.element-scene__particles i:nth-child(6) { --x: 35%; --y: 16%; --delay: -6s; }
.element-scene__particles i:nth-child(7) { --x: 8%; --y: 22%; --delay: -3s; }
.element-scene__particles i:nth-child(8) { --x: 74%; --y: 18%; --delay: -8s; }
.element-scene__particles i:nth-child(9) { --x: 31%; --y: 72%; --delay: -9s; }
.element-scene__particles i:nth-child(10) { --x: 88%; --y: 73%; --delay: -2.5s; }
.pokemon-card[data-pokemon-type="water"] .element-scene__particles i {
  width: 9px; height: 9px; background: transparent; border: 1px solid #c7f0ff99;
}
.pokemon-card[data-pokemon-type="grass"] .element-scene__particles i,
.pokemon-card[data-pokemon-type="bug"] .element-scene__particles i {
  width: 8px; height: 4px; border-radius: 90% 0; background: #b5e98b;
}
.pokemon-card[data-pokemon-type="ice"] .element-scene__particles i { border-radius: 1px; transform: rotate(45deg); }
.pokemon-card__artwork img {
  filter: drop-shadow(0 22px 14px #08071288) drop-shadow(0 0 24px color-mix(in srgb, var(--pokemon-accent) 28%, transparent));
}
.pokemon-card__identity h3 { text-shadow: 0 4px 28px #080617aa; }
.pokemon-card__mark {
  border: 0; color: #ffffffbb; background: #ffffff0a;
}
@media (orientation: portrait) {
  .screen[data-screen="result"] { padding: 10px 18px 14px; }
  .result-layout {
    width: min(100%, 860px); grid-template-rows: minmax(0, 64fr) minmax(0, 36fr);
    border-radius: 30px; border: 1px solid #ffffff28; background: #100e20;
    box-shadow: 0 26px 70px #08061488, 0 0 50px color-mix(in srgb, var(--pokemon-accent) 9%, transparent);
  }
  .pokemon-card { grid-template-rows: 52px minmax(0, 1fr) 140px; isolation: isolate; }
  .pokemon-card::before { display: none; }
  .pokemon-card__artwork { position: static; overflow: visible; }
  .pokemon-card__artwork img {
    width: min(83%, 500px); height: calc(100% - 160px); max-height: none;
    position: absolute; top: 29px; bottom: auto; left: 0; right: 0;
    margin: 0 auto; object-fit: contain; z-index: 2;
  }
  .pokemon-card__topline {
    z-index: 4; padding: 10px 24px 0; min-height: 44px;
    color: #ffffffa6; font-size: .7rem; text-shadow: 0 2px 12px #0009;
  }
  .result-kicker { font-size: .6rem; letter-spacing: .26em; }
  .pokemon-card__identity {
    z-index: 3; position: relative; padding: 4px 22px 13px;
    background: none; align-content: end; gap: 4px;
  }
  .pokemon-card__identity h3 {
    font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 950;
    letter-spacing: -.045em; line-height: 1; margin: 0;
  }
  .pokemon-card__identity p { margin: 0 0 3px; font-size: .72rem; color: #fff9; }
  .type-badges { gap: 6px; }
  .type-badges span {
    padding: 5px 12px; font-size: .63rem; border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--pokemon-accent) 42%, transparent);
    background: color-mix(in srgb, var(--pokemon-accent) 14%, #151324);
    color: #fff;
  }
  .result-identity-line { margin-top: 5px; gap: 10px; }
  .result-identity-line strong { font-size: .86rem; font-weight: 650; color: #fff9; }
  .result-identity-line .score {
    font-size: .74rem; border-radius: 7px; padding: 5px 9px;
    background: #ffffff0d; border: 1px solid #ffffff26;
    color: var(--pokemon-accent);
  }
  .result-copy {
    background: #100e20; border-top: 0; position: relative;
    padding: 0 26px 16px;
  }
  .result-copy::before {
    content: ''; height: 1px; position: absolute; top: 0; left: 14%; right: 14%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pokemon-accent) 45%, transparent), transparent);
  }
  .result-tabs { margin-bottom: 6px; border-bottom-color: #ffffff0b; }
  .result-tabs button { min-height: 42px; font-size: .72rem; }
  .result-tabs button.is-active::after { background: var(--pokemon-accent); box-shadow: none; height: 2px; }
  .trait-list { gap: 3px; }
  .trait-list div { min-height: 25px; }
  .trait-meter { height: 7px; border-radius: 10px; background: #ffffff0c; }
  .trait-meter::after {
    border-radius: 10px; filter: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pokemon-accent) 50%, #373047), var(--pokemon-accent));
  }
  .result-actions { margin-top: 8px; gap: 10px; }
  .result-actions .primary-button,
  .result-actions .secondary-button { min-height: 50px; border-radius: 14px; font-size: .73rem; }
  .result-actions .primary-button { box-shadow: 0 7px 28px #cf224f25; }
}
@media (orientation: portrait) and (max-height: 950px) {
  .result-layout { grid-template-rows: minmax(0, 57fr) minmax(0, 43fr); }
  .pokemon-card { grid-template-rows: 38px minmax(0, 1fr) 105px; }
  .pokemon-card__topline { padding: 5px 18px 0; min-height: 34px; }
  .pokemon-card__artwork img { top: 22px; height: calc(100% - 118px); width: 78%; }
  .pokemon-card__identity { gap: 2px; padding: 0 16px 8px; }
  .pokemon-card__identity h3 { font-size: 2.5rem; }
  .pokemon-card__identity p { font-size: .6rem; }
  .type-badges span { padding: 3px 8px; font-size: .56rem; }
  .result-identity-line strong { font-size: .72rem; }
  .result-identity-line .score { padding: 3px 7px; font-size: .65rem; }
  .result-tabs button { min-height: 35px; }
  .result-copy { padding: 0 18px 10px; }
  .trait-list div { min-height: 22px; }
  .result-actions .primary-button,
  .result-actions .secondary-button { min-height: 44px; font-size: .63rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .screen--entered .element-scene__texture { animation: scene-drift 20s ease-in-out infinite alternate; }
  .screen--entered .element-scene__particles i { animation: scene-particle 10s var(--delay) linear infinite; }
  .screen--entered .pokemon-card__artwork img { animation: companion-float 7s ease-in-out infinite alternate; }
}
@keyframes scene-drift {
  from { transform: translateY(-45%) scale(1.04); }
  to { transform: translateY(-43%) scale(1.08); }
}
@keyframes scene-particle {
  0% { translate: 0 35px; opacity: 0; }
  20%, 65% { opacity: .5; }
  100% { translate: 14px -65px; opacity: 0; }
}
/* Keep the independent translate property reserved for horizontal centering. */
@keyframes companion-float { from { transform: translateY(2px); } to { transform: translateY(-5px); } }