/* ============================================================================
   Match recap page — public, shareable, on-brand (Cinzel + Sora, abyss/cyan).
   ============================================================================ */
.mr-page, .mr-page * { box-sizing: border-box; }
.mr-page { font-family: 'Sora', sans-serif; min-height: 70vh; padding: 120px 18px 70px; color: #eaf4fb; }
.mr-wrap { max-width: 860px; margin: 0 auto; }

.mr-loading { text-align: center; color: #9fb6c9; padding: 80px 0; font-size: 14px; }
.mr-spin { width: 26px; height: 26px; border: 3px solid rgba(162,231,238,.2); border-top-color: #a2e7ee; border-radius: 50%;
  margin: 0 auto 14px; animation: mrspin 0.9s linear infinite; }
@keyframes mrspin { to { transform: rotate(360deg); } }

/* hero */
.mr-hero { text-align: center; margin-bottom: 26px; }
.mr-result { display: inline-block; font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: 4px;
  padding: 9px 30px; border-radius: 100px; margin-bottom: 18px;
  background: rgba(255,255,255,.06); color: #9fb6c9; border: 1px solid rgba(255,255,255,.14); }
.mr-result.win  { background: rgba(63,191,134,.14); color: #87e6b8; border-color: rgba(63,191,134,.4); box-shadow: 0 0 34px -8px rgba(63,191,134,.5); }
.mr-result.loss { background: rgba(224,88,79,.12); color: #ff9a8d; border-color: rgba(224,88,79,.35); }
/* flex centering keeps the avatar+name link and the "'s match recap" text on
   one true vertical center (inline-flex vs text baseline used to misalign) */
.mr-title { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 4vw, 2.1rem); color: #fff; margin: 0 0 14px; font-weight: 700;
  text-transform: none; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
.mr-title .mr-title-rest { text-transform: none; }
.mr-title a { color: #a2e7ee; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.mr-title a:hover span { text-decoration: underline; }
.mr-title-rest { color: #fff; }
.mr-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(162,231,238,.4); object-fit: cover; vertical-align: middle; }
.mr-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mr-chip { font-size: 12px; color: #9fb6c9; background: rgba(0,0,0,.25); border: 1px solid rgba(162,231,238,.15);
  border-radius: 100px; padding: 6px 14px; }
.mr-chip a { color: #a2e7ee; text-decoration: none; }
.mr-chip a:hover { text-decoration: underline; }
.mr-chip b { color: #eaf4fb; }

/* stats strip */
.mr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mr-stat { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.008) 60%), #081f33;
  border: 1px solid rgba(162,231,238,.12); border-radius: 14px; padding: 16px 10px; text-align: center; }
.mr-stat b { display: block; font-family: 'Cinzel', serif; font-size: 24px; color: #fff; line-height: 1.15; }
.mr-stat span { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #6f879b; }
.mr-stat.you b { color: #a2e7ee; } .mr-stat.opp b { color: #ffb0b0; }

/* cards */
.mr-card { background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.008) 60%), #081f33;
  border: 1px solid rgba(162,231,238,.12); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.mr-h { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #a2e7ee; margin: 0 0 14px; }

/* deck row */
.mr-deck { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mr-deck-name { font-size: 16px; font-weight: 700; color: #fff; }
.mr-deck-meta { font-size: 12.5px; color: #9fb6c9; margin-top: 3px; }
.mr-deck-meta .w { color: #87e6b8; font-weight: 700; } .mr-deck-meta .l { color: #ff9a8d; font-weight: 700; }
.mr-deck-link { font-size: 13px; font-weight: 700; color: #05101c !important; text-decoration: none; padding: 10px 20px;
  border-radius: 10px; background: linear-gradient(135deg, #a2e7ee, #4196e0); white-space: nowrap; }
.mr-deck-link:hover { filter: brightness(1.08); }

/* opponent revealed */
.mr-opp { display: flex; flex-wrap: wrap; gap: 7px; }
.mr-opp-card { font-size: 12px; color: #cfe4f2; background: rgba(0,0,0,.25); border: 1px solid rgba(162,231,238,.14);
  border-radius: 100px; padding: 6px 13px; }

/* timeline */
.mr-turn { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #a2e7ee;
  margin: 18px 0 8px; padding-top: 12px; border-top: 1px dashed rgba(162,231,238,.14); }
.mr-timeline .mr-turn:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.mr-ev { font-size: 12.5px; color: #9fb6c9; padding: 3px 0 3px 16px; position: relative; line-height: 1.55; }
.mr-ev::before { content: ''; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: rgba(162,231,238,.35); }
.mr-coach { font-size: 13px; color: #eaf4fb; background: rgba(162,231,238,.07); border: 1px solid rgba(162,231,238,.16);
  border-radius: 12px; padding: 10px 14px; margin: 7px 0; line-height: 1.6; max-width: 92%;
  white-space: pre-wrap; overflow-wrap: anywhere; } /* coach replies are multi-line (Read/Aim/Think) — keep the breaks */
.mr-coach b { display: block; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #a2e7ee; margin-bottom: 3px; }

/* footer */
.mr-foot { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.mr-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; text-decoration: none;
  padding: 13px 26px; border-radius: 12px; transition: transform .15s, filter .15s; }
.mr-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mr-btn--primary { background: linear-gradient(135deg, #a2e7ee, #4196e0); color: #05101c !important; }
.mr-btn--ghost { border: 1px solid rgba(162,231,238,.3); color: #a2e7ee !important; background: rgba(162,231,238,.05); }

/* private / not found */
.mr-private { text-align: center; padding: 70px 0; }
.mr-private-ico { font-size: 40px; margin-bottom: 12px; }
.mr-private h2 { font-family: 'Cinzel', serif; color: #fff; margin: 0 0 8px; }
.mr-private p { color: #9fb6c9; font-size: 14px; margin: 0 0 22px; }

@media (max-width: 640px) {
  .mr-page { padding-top: 100px; }
  .mr-coach { max-width: 100%; }
}

/* ============================================================================
   Replay theater — launcher on the recap page, fullscreen modal viewer.
   Desktop-only (the launcher card is hidden on mobile).
   ============================================================================ */

/* ---- launcher ---- */
.rp-card { padding: 16px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rp-quality { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffd9a8;
  background: rgba(255, 178, 82, .08); border: 1px solid rgba(255, 178, 82, .3); border-radius: 100px;
  padding: 4px 12px; cursor: help; white-space: nowrap; }

.rp-launch { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 22px; border-radius: 14px; color: #eaf4fb; font-family: 'Sora', sans-serif;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(65, 150, 224, .16), transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 60%), #04101e;
  border: 1px solid rgba(162, 231, 238, .22);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.rp-launch:hover { border-color: #a2e7ee; transform: translateY(-2px); box-shadow: 0 16px 44px -18px rgba(65, 150, 224, .55); }
.rp-launch-orb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%; font-size: 17px; color: #05101c; padding-left: 4px;
  background: linear-gradient(135deg, #a2e7ee, #4196e0);
  box-shadow: 0 0 0 6px rgba(162, 231, 238, .1), 0 8px 26px rgba(65, 150, 224, .45); }
.rp-launch:hover .rp-launch-orb { animation: rpOrb 1.4s ease infinite; }
@keyframes rpOrb { 0%, 100% { box-shadow: 0 0 0 6px rgba(162, 231, 238, .1), 0 8px 26px rgba(65, 150, 224, .45); }
  50% { box-shadow: 0 0 0 11px rgba(162, 231, 238, .05), 0 8px 30px rgba(65, 150, 224, .6); } }
.rp-launch-txt { flex: 1; min-width: 0; }
.rp-launch-txt b { display: block; font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.rp-launch-txt span { font-size: 12.5px; color: #9fb6c9; line-height: 1.5; }
.rp-launch-meta { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #a2e7ee; white-space: nowrap;
  background: rgba(162, 231, 238, .07); border: 1px solid rgba(162, 231, 238, .22); border-radius: 100px; padding: 7px 14px; }

/* mobile launcher: tighter paddings (the theater opens fullscreen landscape) */
@media (max-width: 900px) {
  .rp-launch { gap: 13px; padding: 14px 15px; }
  .rp-launch-orb { width: 46px; height: 46px; font-size: 15px; }
  .rp-launch-txt b { font-size: 15px; }
  .rp-launch-txt span { font-size: 11.5px; }
  .rp-launch-meta { display: none; }
}

/* ---- modal shell ---- */
.rpm-lock { overflow: hidden; }
.rpm { position: fixed; inset: 0; z-index: 8000;
  background: radial-gradient(120% 100% at 50% 0%, #0a2a47 0%, #04101e 55%, #020a14 100%);
  animation: rpmIn .3s ease; }
@keyframes rpmIn { from { opacity: 0; } to { opacity: 1; } }
.rpm-shell { display: flex; width: 100%; height: 100%; }

.rpm-close { position: absolute; top: 16px; right: 18px; z-index: 20; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(162, 231, 238, .3); background: rgba(2, 16, 30, .7);
  color: #a2e7ee; font-size: 17px; transition: background .15s, border-color .15s, transform .15s; }
.rpm-close:hover { background: rgba(162, 231, 238, .14); border-color: #a2e7ee; transform: scale(1.05); }

/* ---- narration feed (left) ---- */
.rpm-feed { width: 330px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid rgba(162, 231, 238, .12); background: rgba(2, 13, 24, .55); }
.rpm-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 18px 12px; border-bottom: 1px solid rgba(162, 231, 238, .1); }
.rpm-feed-title { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #a2e7ee; }
.rpm-feed-list { flex: 1; overflow-y: auto; padding: 12px 14px 24px; scroll-behavior: smooth; }
.rpm-feed-list::-webkit-scrollbar { width: 7px; }
.rpm-feed-list::-webkit-scrollbar-thumb { background: rgba(162, 231, 238, .18); border-radius: 4px; }
.rpm-turnhead { font-family: 'Cinzel', serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: #6f95ad; margin: 14px 2px 6px; padding-top: 10px; border-top: 1px dashed rgba(162, 231, 238, .12); }
.rpm-feed-list .rpm-turnhead:first-child { border-top: none; margin-top: 2px; padding-top: 0; }
.rpm-item { display: block; width: 100%; text-align: left; cursor: pointer; font-family: 'Sora', sans-serif;
  font-size: 12px; line-height: 1.5; color: #9fb6c9; background: transparent; border: none;
  border-left: 2px solid transparent; border-radius: 0 8px 8px 0; padding: 6px 10px; margin: 1px 0;
  transition: background .15s, color .15s, border-color .15s; overflow-wrap: anywhere; }
.rpm-item:hover { background: rgba(162, 231, 238, .06); color: #cfe4f2; }
.rpm-item--on { background: rgba(162, 231, 238, .1); color: #fff; border-left-color: #a2e7ee; }
.rpm-item--coach { background: rgba(162, 231, 238, .04); border-radius: 10px; margin: 5px 0; padding: 8px 11px;
  border: 1px solid rgba(162, 231, 238, .12); border-left: 2px solid transparent; color: #b9d4e4;
  white-space: pre-wrap; }
.rpm-item--coach b { display: block; font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #a2e7ee; margin-bottom: 3px; }
.rpm-item--coach.rpm-item--on { border-color: rgba(162, 231, 238, .4); border-left-color: #a2e7ee; color: #eaf4fb; }

/* ---- main column ---- */
.rpm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px; }

/* board fills the theater — fields NEVER scroll; autoFit() shrinks the tiles.
   The battlefield itself is Arena-style: stone-blue depth, a grain of noise,
   soft arcane glows and a vignette — all generated, no image assets. */
.rp--theater { --rp-w: clamp(64px, 7vw, 96px);
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(85% 46% at 50% 50%, rgba(140, 70, 190, .10), transparent 62%),
    radial-gradient(120% 70% at 50% 0%, rgba(65, 150, 224, .12), transparent 55%),
    radial-gradient(120% 70% at 50% 100%, rgba(65, 150, 224, .09), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0a2138 0%, #071829 46%, #081c30 54%, #060f1d 100%);
  border: 1px solid rgba(162, 231, 238, .14); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 0 130px rgba(0, 0, 0, .55); }
.rp--theater .rp-field { flex: 1; min-height: 0; overflow: hidden; }
/* keep the close button clear of the opponent's life orb */
.rp--theater .rp-bar--opp { padding-right: 76px; }

/* player bars */
.rp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; }
.rp-bar--opp { background: linear-gradient(180deg, rgba(224, 88, 79, .08), transparent); }
.rp-bar--you { background: linear-gradient(0deg, rgba(65, 150, 224, .09), transparent); }
.rp-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.rp-face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(162, 231, 238, .35); flex-shrink: 0; }
.rp-face--opp { display: inline-flex; align-items: center; justify-content: center; background: rgba(224, 88, 79, .14);
  border-color: rgba(224, 88, 79, .4); font-size: 15px; }
.rp-name { font-size: 14px; font-weight: 700; color: #eaf4fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Sora', sans-serif; }
/* life medallions — soft inner shading + a glow in the side's color */
.rp-life { position: relative; font-family: 'Cinzel', serif; font-weight: 700; font-size: 23px; line-height: 1; padding: 10px 18px;
  border-radius: 100px; border: 1px solid; min-width: 66px; text-align: center;
  background: radial-gradient(130% 130% at 50% 12%, rgba(255, 255, 255, .1), transparent 55%), rgba(2, 14, 26, .78);
  box-shadow: 0 0 20px -6px currentColor, inset 0 2px 10px rgba(0, 0, 0, .55); }
.rp-life--you { color: #a2e7ee; border-color: rgba(162, 231, 238, .45); }
.rp-life--opp { color: #ff9a8d; border-color: rgba(224, 88, 79, .45); }
.rp-gy { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #9fb6c9;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(162, 231, 238, .14); border-radius: 100px;
  padding: 6px 12px; cursor: help; font-family: 'Sora', sans-serif; }
.rp-gy i { font-size: 10px; color: #6f879b; }

/* battlefields — no hard borders; the glowing divider does the separating */
.rp-field { display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; padding: 10px 16px; }
.rp-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; justify-content: center; }
.rp-empty { font-size: 11px; color: #45607a; letter-spacing: 1px; text-align: center; align-self: center; }

/* card tiles */
.rp-tile { position: relative; width: var(--rp-w); aspect-ratio: 5 / 7; border-radius: 7%/5%;
  background-color: #0b2742; background-size: 100% 100%; background-repeat: no-repeat;
  border: 1px solid rgba(162, 231, 238, .22); box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rp-tile:hover { transform: translateY(-4px) scale(1.07); z-index: 2; }
.rp-tile--back { width: calc(var(--rp-w) * .72); opacity: .96; }
.rp-tile--pile { box-shadow:
  3px -3px 0 -1px #0b2742, 3.5px -3.5px 0 0 rgba(162, 231, 238, .3),
  7px -7px 0 -1px #0b2742, 7.5px -7.5px 0 0 rgba(162, 231, 238, .18),
  0 3px 12px rgba(0, 0, 0, .5); margin-top: 8px; margin-right: 6px; }
.rp-tile--text { display: flex; align-items: center; justify-content: center; padding: 5px; }
.rp-tile-name { font-size: 9.5px; line-height: 1.3; color: #cfe4f2; text-align: center; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rp-tile--atk { border-color: rgba(255, 138, 101, .85); box-shadow: 0 0 0 1px rgba(255, 138, 101, .5), 0 0 22px rgba(255, 106, 61, .5); }
.rp-field--you .rp-tile--atk { transform: translateY(-8px); }
.rp-field--opp .rp-tile--atk { transform: translateY(8px); }
.rp-cnt { position: absolute; top: -7px; left: -7px; font-size: 11px; font-weight: 800; color: #05101c;
  background: #a2e7ee; border-radius: 100px; padding: 1px 7px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.rp-pt { position: absolute; bottom: -7px; right: -6px; font-size: 11px; font-weight: 800; color: #fff;
  background: #123655; border: 1px solid rgba(162, 231, 238, .4); border-radius: 8px; padding: 1px 6px; }
.rp-atk { position: absolute; top: -8px; right: -6px; font-size: 10px; color: #ffb28a;
  background: rgba(80, 24, 10, .9); border: 1px solid rgba(255, 138, 101, .5); border-radius: 100px;
  width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; }

/* center divider — Arena's glowing beam between the two battlefields */
.rp-ribbon { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; background: rgba(2, 12, 22, .74); }
.rp-ribbon::before, .rp-ribbon::after { content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(162, 231, 238, .65) 32%, rgba(236, 121, 220, .55) 50%, rgba(162, 231, 238, .65) 68%, transparent 96%);
  filter: drop-shadow(0 0 7px rgba(162, 231, 238, .55)); }
.rp-ribbon::before { top: 0; }
.rp-ribbon::after { bottom: 0; }
.rp-turn { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: #eaf4fb; white-space: nowrap; text-shadow: 0 0 14px rgba(162, 231, 238, .65); }
/* phone-only narration line inside the divider (the feed is hidden there) */
.rpm-capmini { display: none; }

/* hand — Arena-style fan tucked into the bottom edge; cards rise on hover so
   the battlefield keeps the vertical space */
.rp-hand { position: relative; display: flex; align-items: flex-end; justify-content: center;
  height: calc(var(--rp-w) * 1.06); padding: 0 16px; flex-shrink: 0; overflow: visible; z-index: 5;
  background: linear-gradient(0deg, rgba(65, 150, 224, .07), transparent); }
.rp-hand .rp-tile { flex-shrink: 0; width: calc(var(--rp-w) * 1.04);
  margin: 0 calc(var(--rp-w) * -0.16);
  transform: translateY(26%) rotate(var(--fan, 0deg));
  transform-origin: bottom center;
  box-shadow: -6px 0 14px rgba(0, 0, 0, .45);
  transition: transform .22s ease, box-shadow .22s ease; }
.rp-hand .rp-tile:hover { transform: translateY(-30%) rotate(0deg) scale(1.45); z-index: 40;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .65); }
.rp-hand .rp-empty { align-self: center; padding-bottom: 8px; }

/* compact transport strip at the bottom of the narration feed */
.rpm-feed-controls { display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-top: 1px solid rgba(162, 231, 238, .1); background: rgba(2, 16, 30, .6); flex-shrink: 0; }
.rp-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; border: 1px solid rgba(162, 231, 238, .3); background: rgba(162, 231, 238, .06);
  color: #a2e7ee; font-size: 12px; cursor: pointer; flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .15s; }
.rp-btn:hover { background: rgba(162, 231, 238, .14); border-color: #a2e7ee; transform: translateY(-1px); }
.rp-btn--play { background: linear-gradient(135deg, #a2e7ee, #4196e0); color: #05101c; border: none; width: 36px; height: 36px; font-size: 13px; }
.rp-prog { flex: 1; height: 4px; border-radius: 2px; background: rgba(162, 231, 238, .12); overflow: hidden; min-width: 40px; }
.rp-prog-fill { height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, #4196e0, #a2e7ee); transition: width .25s ease; }
.rp-step { font-size: 10.5px; color: #6f879b; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- animation FX ---- */
.rp-fx-enter-up { animation: rpEnterUp .5s cubic-bezier(.2, .9, .3, 1.2); }
.rp-fx-enter-down { animation: rpEnterDown .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes rpEnterUp { from { transform: translateY(46px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rpEnterDown { from { transform: translateY(-46px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.rp-fx-draw { animation: rpDraw .45s cubic-bezier(.2, .9, .3, 1.15); }
/* no `to` frame — the card settles into its natural fanned transform */
@keyframes rpDraw { from { transform: translateX(70px) translateY(60%) rotate(8deg) scale(.55); opacity: 0; } }
.rp-fx-lunge-up { animation: rpLungeUp .55s ease; }
.rp-fx-lunge-down { animation: rpLungeDown .55s ease; }
@keyframes rpLungeUp { 0% { transform: translateY(-8px); } 45% { transform: translateY(-26px) scale(1.08); } 100% { transform: translateY(-8px); } }
@keyframes rpLungeDown { 0% { transform: translateY(8px); } 45% { transform: translateY(26px) scale(1.08); } 100% { transform: translateY(8px); } }
.rp-fx-die { position: absolute; left: 50%; top: 42%; margin-left: calc(var(--rp-w) / -2); z-index: 8;
  width: var(--rp-w); aspect-ratio: 5 / 7; border-radius: 7%/5%;
  background-color: #0b2742; background-size: 100% 100%;
  animation: rpDie .85s ease forwards; pointer-events: none; }
@keyframes rpDie { 0% { transform: none; opacity: 1; filter: none; }
  100% { transform: translateY(70px) rotate(10deg) scale(.45); opacity: 0; filter: grayscale(1); } }
.rp-fx-pulse { animation: rpPulse .6s ease; }
@keyframes rpPulse { 0% { transform: none; } 35% { transform: scale(1.18); } 100% { transform: none; } }
.rp-float { position: absolute; top: -8px; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800;
  pointer-events: none; animation: rpFloat 1.1s ease forwards; z-index: 9; }
.rp-float--hit { color: #ff8a76; }
.rp-float--gain { color: #87e6b8; }
@keyframes rpFloat { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }

/* spell showcase — the cast card sweeps through center stage */
.rpm-cast { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 46%, rgba(2, 10, 20, .78), transparent 75%);
  animation: rpCastIn .35s ease; }
@keyframes rpCastIn { from { opacity: 0; } to { opacity: 1; } }
.rpm-cast img { width: min(240px, 24vw); border-radius: 4.6%/3.4%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8), 0 0 60px rgba(65, 150, 224, .35);
  animation: rpCastCard .45s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes rpCastCard { from { transform: translateY(60px) scale(.5) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.rpm-cast-name { font-family: 'Cinzel', serif; font-size: 26px; color: #fff; }
.rpm-cast-verb { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: #a2e7ee;
  background: rgba(2, 16, 30, .85); border: 1px solid rgba(162, 231, 238, .3); border-radius: 100px; padding: 8px 18px; }
.rpm-cast--out { animation: rpCastOut .4s ease forwards; }
@keyframes rpCastOut { to { opacity: 0; } }

/* tap-to-zoom card preview */
.rp-zoom { position: fixed; inset: 0; z-index: 9000; background: rgba(2, 10, 20, .82);
  display: flex; align-items: center; justify-content: center; padding: 26px; cursor: zoom-out;
  animation: rpzoom .16s ease; }
@keyframes rpzoom { from { opacity: 0; } to { opacity: 1; } }
.rp-zoom img { max-width: min(86vw, 360px); max-height: 84vh; border-radius: 4.6%/3.4%;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .75); }
.rp-zoom-text { background: #081f33; border: 1px solid rgba(162, 231, 238, .3); border-radius: 16px;
  padding: 26px 30px; text-align: center; max-width: 320px; }
.rp-zoom-text b { display: block; font-family: 'Cinzel', serif; color: #fff; font-size: 17px; margin-bottom: 6px; }
.rp-zoom-text span { font-size: 12.5px; color: #9fb6c9; }

/* ============================================================================
   Phone theater — fullscreen landscape, Arena-app layout: no sidebar, the
   divider carries the narration, controls float bottom-left, rotate gate
   in portrait (iOS can't lock orientation).
   ============================================================================ */
.rpm-rotate { display: none; position: absolute; inset: 0; z-index: 60;
  background: rgba(2, 10, 20, .96); flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; color: #a2e7ee; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; text-align: center; padding: 30px; }
.rpm-rotate i { font-size: 42px; animation: rpRotHint 1.8s ease infinite; }
@keyframes rpRotHint { 0%, 100% { transform: rotate(0deg); } 55% { transform: rotate(90deg); } }

/* floating transport bar (phones — the feed that hosts it on desktop is hidden) */
.rpm-ctr-float { position: absolute; left: 12px; bottom: 10px; z-index: 30;
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  background: rgba(2, 14, 26, .85); border: 1px solid rgba(162, 231, 238, .25); border-radius: 100px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); width: min(46vw, 340px); }
.rpm-ctr-float .rp-btn { width: 30px; height: 30px; font-size: 11px; }
.rpm-ctr-float .rp-btn--play { width: 34px; height: 34px; font-size: 12px; }
.rpm-ctr-float .rp-step { font-size: 9.5px; }

@media (max-width: 940px) {
  .rpm-feed { display: none; }
  .rpm-main { padding: 6px; }
  .rpm-close { top: 6px; right: 6px; width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
  .rp--theater { border-radius: 12px; }
  .rp--theater .rp-bar--opp { padding-right: 52px; }
  .rp-bar { padding: 4px 12px; gap: 8px; }
  .rp-face { width: 25px; height: 25px; }
  .rp-name { font-size: 11.5px; }
  .rp-life { font-size: 15px; padding: 6px 13px; min-width: 48px; }
  .rp-gy { padding: 3px 9px; font-size: 10px; }
  .rp-field { padding: 4px 10px; gap: 5px; }
  .rp-row { gap: 5px; }
  .rp-ribbon { padding: 4px 12px; gap: 10px; }
  .rp-turn { font-size: 9.5px; letter-spacing: 1.4px; }
  /* current narration inside the divider — fixed two-line clamp so the board
     never shifts when a long coach call comes through */
  .rpm-capmini { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1; min-width: 0; max-width: 62vw; height: 26px;
    font-family: 'Sora', sans-serif; font-size: 10px; line-height: 1.3; color: #cfe4f2; text-align: left; }
  .rp-hand { height: calc(var(--rp-w) * 0.9); padding: 0 12px; }
  .rp-hand .rp-tile { width: calc(var(--rp-w) * 1.0); margin: 0 calc(var(--rp-w) * -0.2); }
  .rp-hand .rp-tile:hover { transform: translateY(-16%) rotate(0deg) scale(1.22); }
  .rp-cnt { font-size: 9px; padding: 0 5px; }
  .rp-pt { font-size: 9px; padding: 0 4px; }
  .rp-atk { width: 15px; height: 15px; font-size: 8px; }
  .rpm-cast img { width: min(150px, 30vh); }
  .rpm-cast-verb { font-size: 11px; padding: 6px 13px; }
  .rp-zoom img { max-height: 88vh; max-width: 70vw; }
}
@media (max-width: 940px) and (orientation: portrait) {
  .rpm-rotate { display: flex; }
}