/* ==========================================================================
   css/trade.css — trades (DECISIONS 230)
   1. The trade builder: one screen, your Pokémon on the left, theirs on the right, the two
      picks in a bar underneath (js/ui/trade.js openTradeFlow). Stacked on phones.
   2. The trade scene: the full-screen overlay both trainers see when a trade goes through
      (js/ui/tradescene.js), in the look of the hatch and evolution scenes: dark blue, turning
      light rays, the white dialogue box of the games, a Poké Ball that leaves and arrives.
   The pick rows and the Review dialog's two cards keep their rules in css/layout.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Builder
   -------------------------------------------------------------------------- */
.trade-builder { display: flex; flex-direction: column; gap: 12px; }
.trade-hint {
  margin: 0; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid rgba(214, 69, 69, 0.35); font-size: 0.85rem;
}
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.trade-col {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px; background: var(--panel-2); border: var(--panel-border); border-radius: var(--radius-sm);
}
.trade-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.trade-list { max-height: min(46vh, 420px); }
.trade-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.trade-slot {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 6px 10px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft);
}
.trade-slot.empty { justify-content: center; border-style: dashed; border-color: rgba(255, 255, 255, 0.2); background: none; }
.trade-slot img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.trade-slot .what { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.trade-bar .trade-arrow { color: var(--accent-light); display: flex; }
.trade-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .trade-cols { grid-template-columns: 1fr; }
  .trade-list { max-height: 30vh; }
  .trade-bar { grid-template-columns: 1fr; }
  .trade-bar .trade-arrow { justify-content: center; transform: rotate(90deg); }
  .trade-foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Scene
   -------------------------------------------------------------------------- */
.trade-overlay {
  position: fixed; inset: 0; z-index: 1150;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(circle at 50% 38%, #2a3470, #141a3a 70%);
  color: #fff; overflow: hidden; animation: trade-in 0.3s ease-out;
}
.trade-stage { position: relative; z-index: 1; width: min(70vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.trade-rays {
  position: absolute; inset: -45%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%);
          mask: radial-gradient(circle, #000 15%, transparent 62%);
  opacity: 0; transition: opacity 1.2s; animation: trade-spin 14s linear infinite;
}
.trade-stage.rays-on .trade-rays { opacity: 1; }

/* The Pokémon: pops in, turns from a white silhouette into its colours, or shrinks into its ball
   as it leaves (the red light of the games' ball, here white). */
.trade-mon {
  position: absolute; inset: 10%; z-index: 2; width: 80%; height: 80%;
  object-fit: contain; image-rendering: pixelated; opacity: 0; transform: scale(0.7);
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1), filter 0.9s ease 0.25s;
}
.trade-mon.show { opacity: 1; transform: scale(1); }
.trade-mon.silhouette { filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff); }
.trade-mon.into-ball {
  opacity: 0; transform: scale(0.08); filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff);
  transition: opacity 0.5s ease-in, transform 0.5s ease-in, filter 0.15s;
}

/* The ball: grows in the middle, flies off to the top right, and comes back from the top left
   (fly-in-start is the jump-off point, set without a transition). */
.trade-ball {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 22%; height: auto;
  opacity: 0; transform: translate(-50%, -50%) scale(0.2); pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
  transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.25s;
}
.trade-ball.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.trade-ball.show.fly-out {
  opacity: 0; transform: translate(260%, -420%) scale(0.35);
  transition: transform 0.9s ease-in, opacity 0.9s ease-in;
}
.trade-ball.fly-in-start { opacity: 0; transform: translate(-360%, -420%) scale(0.35); transition: none; }

.trade-text {
  position: relative; z-index: 1; width: min(92vw, 520px); min-height: 5.4rem;
  padding: 14px 18px; border: 4px solid #2b2f3a; border-radius: 10px;
  background: #fbfbf7; color: #2b2f3a; box-shadow: inset 0 0 0 3px #d6d8de;
  font-size: 1.1rem; line-height: 1.45;
}
.trade-title { font-weight: 700; }
.trade-sub { color: #555b6e; font-size: 0.95rem; }
.trade-variant { margin-top: 6px; }
.trade-note { margin-top: 4px; color: #6b7185; font-size: 0.85rem; }
.trade-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.trade-skip {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 4;
  color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.35);
}
.trade-skip[hidden] { display: none; }
.trade-flash { position: fixed; inset: 0; z-index: 10; background: #fff; opacity: 0; pointer-events: none; }
.trade-flash.on { animation: trade-flash 1.3s ease-out; }

@keyframes trade-in { from { opacity: 0; } }
@keyframes trade-spin { to { transform: rotate(360deg); } }
@keyframes trade-flash { 15% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 600px) {
  .trade-overlay { gap: 16px; }
  .trade-stage { width: min(62vw, 240px); }
  .trade-text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .trade-overlay, .trade-rays, .trade-flash.on { animation: none; }
  .trade-mon, .trade-ball { transition: none; }
}