/* Atsumio main stylesheet. Gallery-like, card-first (design.md §1). */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

:lang(ja) body, [lang="ja"] {
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
}

h1, h2, h3 { font-family: "Poppins", "Inter", system-ui, sans-serif; line-height: 1.2; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* --- Background full-art card + scrim (design.md §6) ---
   Absolute (not fixed): the art scrolls with the page and covers the whole
   scrollable document height, wrapping all content. */
.bg-stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  /* The single card art is ~600px wide; when it covers the full document it is
     upscaled heavily, so blur it into a soft, premium ambient wash. */
  filter: blur(28px) saturate(1.15);
  transform: scale(1.08);
  animation: bg-fade 1.2s ease forwards;
}
.bg-scrim { position: absolute; inset: 0; background: var(--bg-scrim); }
@keyframes bg-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bg-stage { animation: none; opacity: 1; } }

/* --- Top bar + search bar (sticky, translucent) --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-bars);
  background: rgba(10, 14, 26, .62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: calc(var(--space) * 4);
  max-width: 1280px;
  margin: 0 auto;
  padding: calc(var(--space) * 3) calc(var(--space) * 5);
}
.brand { display: flex; align-items: center; gap: calc(var(--space) * 2); font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-lg); }
.brand__logo { height: 30px; width: auto; display: block; }
.topnav { display: flex; gap: calc(var(--space) * 4); margin-left: calc(var(--space) * 2); }
.topnav a { color: var(--text-dim); font-weight: 500; }
.topnav a:hover { color: var(--text); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--space) * 3); }

.langswitch { display: flex; gap: 2px; padding: 2px; background: rgba(255,255,255,.05); border-radius: 999px; }
.langswitch__item { padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
.langswitch__item.is-active { background: var(--brand-blue); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--space) * 2.5) calc(var(--space) * 4);
  border-radius: 999px; font-weight: 600; font-size: var(--fs-sm);
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand-yellow); color: #1a1400; }
.btn--ghost { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); }
.btn--block { width: 100%; }

.searchbar {
  display: flex; gap: calc(var(--space) * 2);
  max-width: 1280px; margin: 0 auto;
  padding: 0 calc(var(--space) * 5) calc(var(--space) * 3);
}
.searchbar__input {
  flex: 1; padding: calc(var(--space) * 3) calc(var(--space) * 4);
  background: rgba(255,255,255,.07); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: var(--fs-md);
}
.searchbar__input::placeholder { color: var(--text-dim); }
.searchbar__input:focus-visible { outline: 2px solid var(--brand-blue); border-color: transparent; }
.searchbar__btn { background: var(--brand-blue); color: #fff; border: 0; border-radius: var(--radius); padding: 0 calc(var(--space) * 5); font-weight: 600; cursor: pointer; }

/* --- Content --- */
.content { position: relative; z-index: var(--z-content); max-width: 1280px; margin: 0 auto; padding: calc(var(--space) * 10) calc(var(--space) * 5) calc(var(--space) * 16); }
.section-title { font-size: var(--fs-xl); margin-bottom: calc(var(--space) * 5); }

.hero { text-align: center; padding: calc(var(--space) * 16) 0 calc(var(--space) * 12); }
.hero__title { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; }
.hero__sub { color: var(--text-dim); font-size: var(--fs-lg); margin: calc(var(--space) * 4) auto 0; max-width: 42ch; }
.hero__actions { margin-top: calc(var(--space) * 6); }

/* --- Card grid + tile --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: calc(var(--space) * 5); }
.card-tile { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.card-tile__frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; transform-style: preserve-3d; will-change: transform; }
.card-tile:hover .card-tile__frame { box-shadow: var(--shadow-2); }
.card-tile__img { width: 100%; aspect-ratio: 245 / 342; object-fit: cover; background: var(--surface-2); }
.card-tile__holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity .2s ease;
  background: radial-gradient(circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255,255,255,.55), transparent 45%);
}
.card-tile:hover .card-tile__holo { opacity: 1; }
.card-tile__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); }

/* --- Empty / error state --- */
.state { text-align: center; padding: calc(var(--space) * 20) 0; }
.state__title { font-size: var(--fs-2xl); margin-bottom: calc(var(--space) * 3); }
.state__body { color: var(--text-dim); margin-bottom: calc(var(--space) * 6); }

/* --- Footer --- */
.footer { position: relative; z-index: var(--z-content); border-top: 1px solid var(--border); background: rgba(10,14,26,.7); backdrop-filter: blur(10px); }
.footer__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space) * 8) calc(var(--space) * 5); display: flex; flex-wrap: wrap; gap: calc(var(--space) * 4); align-items: center; }
.footer__links, .footer__lang { display: flex; gap: calc(var(--space) * 4); color: var(--text-dim); }
.footer__lang { margin-left: auto; }
.footer__legal { flex-basis: 100%; color: var(--text-dim); font-size: var(--fs-xs); margin: calc(var(--space) * 2) 0 0; }

/* --- Responsive (implementation-spec.md §4.3): primary >=1280, graceful down to mobile --- */
@media (max-width: 900px) {
  .topbar__inner { flex-wrap: wrap; gap: calc(var(--space) * 3); }
  .topnav { order: 3; margin-left: 0; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hero__title { font-size: var(--fs-2xl); }
}

/* --- Type badges + energy pips (own icon language, type colors; design.md §5) --- */
.type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: var(--type-colorless); }
.type-badge__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.85); }
.energy-pip { display: inline-block; width: 14px; height: 14px; border-radius: 999px; background: var(--type-colorless); box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; vertical-align: middle; }
.type--fire { background: var(--type-fire); } .type--water { background: var(--type-water); }
.type--grass { background: var(--type-grass); } .type--lightning { background: var(--type-lightning); color: #3a2f00; }
.type--psychic { background: var(--type-psychic); } .type--fighting { background: var(--type-fighting); }
.type--darkness { background: var(--type-darkness); } .type--metal { background: var(--type-metal); color: #23252e; }
.type--dragon { background: var(--type-dragon); } .type--fairy { background: var(--type-fairy); }
.type--colorless { background: var(--type-colorless); color: #2a2a24; }

/* --- Pills --- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: rgba(255,255,255,.1); border: 1px solid var(--border); }
.pill--muted { background: transparent; color: var(--text-dim); }

/* --- Card detail --- */
.card-detail__hero { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: calc(var(--space) * 10); align-items: start; }
.card-hero { position: sticky; top: 140px; }
.card-hero__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); transform-style: preserve-3d; transition: transform .2s ease; will-change: transform; }
.card-hero__img { width: 100%; height: auto; display: block; }
.card-hero__holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity .2s ease; background: radial-gradient(circle at var(--holo-x,50%) var(--holo-y,50%), rgba(255,255,255,.6), transparent 45%); }
.card-hero:hover .card-hero__holo { opacity: 1; }
.card-detail__name { font-size: var(--fs-2xl); }
.card-detail__meta { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); align-items: center; color: var(--text-dim); margin: calc(var(--space) * 2) 0 calc(var(--space) * 4); }
.card-detail__meta a { color: var(--brand-yellow); font-weight: 600; }
.type-row { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 5); }
.stat-grid { display: flex; gap: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 5); }
.stat { display: flex; flex-direction: column; }
.stat__k { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.stat__v { font-size: var(--fs-xl); font-weight: 700; font-family: "Poppins", sans-serif; }
.block { background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 4) calc(var(--space) * 5); margin-bottom: calc(var(--space) * 4); }
.block__title { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: calc(var(--space) * 3); }
.attack { padding: calc(var(--space) * 2) 0; border-top: 1px solid var(--border); }
.attack:first-of-type { border-top: 0; }
.attack__head { display: flex; align-items: center; gap: calc(var(--space) * 3); }
.attack__cost { display: inline-flex; gap: 3px; }
.attack__name { font-weight: 600; }
.attack__dmg { margin-left: auto; font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-lg); }
.attack__text, .ability__text { color: var(--text-dim); font-size: var(--fs-sm); margin: calc(var(--space) * 1) 0 0; }
.ability__name { font-weight: 600; color: var(--brand-yellow); }
.kv-list { display: grid; gap: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 5); }
.kv { display: flex; gap: calc(var(--space) * 3); }
.kv__k { color: var(--text-dim); min-width: 110px; }

/* --- Related rail --- */
.rail { margin-top: calc(var(--space) * 12); }
.rail__track { display: flex; gap: calc(var(--space) * 4); overflow-x: auto; padding-bottom: calc(var(--space) * 3); scroll-snap-type: x proximity; }
.rail__item { flex: 0 0 160px; scroll-snap-align: start; }

/* --- Article (blog under card) --- */
.article { max-width: 70ch; margin: calc(var(--space) * 14) auto 0; }
.article__title { font-size: var(--fs-xl); margin-bottom: calc(var(--space) * 4); }
.article__body p { margin: 0 0 calc(var(--space) * 4); color: var(--text); line-height: 1.8; }

/* --- Search layout --- */
.search-layout { display: grid; grid-template-columns: 260px 1fr; gap: calc(var(--space) * 8); align-items: start; }
.filters { position: sticky; top: 140px; background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 5); }
.filters__title { font-size: var(--fs-md); margin-bottom: calc(var(--space) * 4); }
.filters__group { display: flex; flex-direction: column; gap: 4px; margin-bottom: calc(var(--space) * 3); }
.filters__label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.filters__select { padding: calc(var(--space) * 2) calc(var(--space) * 3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.filters__clear { display: block; text-align: center; margin-top: calc(var(--space) * 3); color: var(--text-dim); font-size: var(--fs-sm); }
.results__count { color: var(--text-dim); margin: 0 0 calc(var(--space) * 5); }
.pagination { display: flex; align-items: center; justify-content: center; gap: calc(var(--space) * 4); margin: calc(var(--space) * 10) 0 0; }
.pagination__link { padding: calc(var(--space) * 2) calc(var(--space) * 4); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-lg); }
.pagination__status { color: var(--text-dim); }

/* --- Sets --- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(var(--space) * 5); }
.set-card { display: flex; flex-direction: column; gap: calc(var(--space) * 3); background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 4); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.set-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: rgba(255,203,5,.4); }
.set-card__logo { height: 96px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(42,117,187,.16), rgba(10,14,26,.5)); border: 1px solid var(--border); border-radius: 12px; }
.set-card__logo img { max-height: 72px; max-width: 82%; width: auto; object-fit: contain; }
.set-card__mono { font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-2xl); color: var(--brand-yellow); letter-spacing: .04em; }
.set-card__title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: var(--fs-lg); line-height: 1.25; }
.set-card__sub { color: var(--text-dim); font-size: var(--fs-sm); }
.set-head { display: flex; align-items: center; gap: calc(var(--space) * 5); margin-bottom: calc(var(--space) * 8); }
.set-head__logo { max-height: 90px; width: auto; }
.set-head__title { font-size: var(--fs-2xl); }
.set-head__sub { color: var(--text-dim); }

/* --- Pro + legal --- */
.pro { display: flex; justify-content: center; padding: calc(var(--space) * 10) 0; }
.pro__card { max-width: 480px; text-align: center; background: rgba(20,26,43,.7); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(var(--space) * 12) calc(var(--space) * 10); box-shadow: var(--shadow-2); }
.pro__title { font-size: var(--fs-2xl); }
.pro__sub { color: var(--text-dim); margin: calc(var(--space) * 3) 0 calc(var(--space) * 6); }
.pro__features { list-style: none; padding: 0; margin: 0 0 calc(var(--space) * 8); }
.pro__features li { padding: calc(var(--space) * 3); border-top: 1px solid var(--border); }
.legal { max-width: 72ch; margin: 0 auto; }
.legal h1 { font-size: var(--fs-2xl); margin-bottom: calc(var(--space) * 5); }
.legal h2 { font-size: var(--fs-lg); margin: calc(var(--space) * 7) 0 calc(var(--space) * 2); }
.legal p { color: var(--text-dim); }

@media (max-width: 900px) {
  .card-detail__hero { grid-template-columns: 1fr; }
  .card-hero { position: static; }
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}

/* --- Auth --- */
.auth { display: flex; justify-content: center; padding: calc(var(--space) * 10) 0; }
.auth__card { width: 100%; max-width: 420px; background: rgba(20,26,43,.78); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(var(--space) * 9) calc(var(--space) * 8); box-shadow: var(--shadow-2); }
.auth__card--center { text-align: center; }
.auth__title { font-size: var(--fs-xl); margin-bottom: calc(var(--space) * 5); }
.auth__body { color: var(--text-dim); margin-bottom: calc(var(--space) * 6); }
.auth__form { display: grid; gap: calc(var(--space) * 4); }
.field { display: grid; gap: 6px; }
.field > span { font-size: var(--fs-sm); color: var(--text-dim); }
.field input { padding: calc(var(--space) * 3) calc(var(--space) * 4); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: var(--fs-md); }
.field input:focus-visible { outline: 2px solid var(--brand-blue); border-color: transparent; }
.field__hint { color: var(--text-dim); font-size: var(--fs-xs); }
.auth__google { margin-bottom: calc(var(--space) * 2); }
.auth__or { display: flex; align-items: center; text-align: center; color: var(--text-dim); font-size: var(--fs-sm); margin: calc(var(--space) * 4) 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth__or span { padding: 0 calc(var(--space) * 3); }
.auth__links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 5); font-size: var(--fs-sm); }
.auth__links a { color: var(--text-dim); }
.auth__links a:hover { color: var(--text); }
.auth__err { background: rgba(238,21,21,.14); border: 1px solid rgba(238,21,21,.4); color: #ffb4b4; padding: calc(var(--space) * 3); border-radius: 10px; margin-bottom: calc(var(--space) * 4); font-size: var(--fs-sm); }
.auth__ok { background: rgba(122,199,76,.14); border: 1px solid rgba(122,199,76,.4); color: #c8f0b0; padding: calc(var(--space) * 3); border-radius: 10px; margin-bottom: calc(var(--space) * 4); font-size: var(--fs-sm); }

/* --- Account --- */
.account { max-width: 1040px; margin: 0 auto; }
.account__row { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--space) * 4) 0; border-bottom: 1px solid var(--border); }
.account__label { color: var(--text-dim); }
.account__actions { display: flex; gap: calc(var(--space) * 3); margin-top: calc(var(--space) * 6); }
.pill--pro { background: var(--brand-yellow); color: #1a1400; }

/* --- Compare (Pro) --- */
.compare__heads { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 6); }
.compare__head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space) * 2); font-weight: 600; }
.compare__head img { max-width: 220px; border-radius: var(--radius); box-shadow: var(--shadow-2); }
.compare__head--empty { min-height: 200px; border: 2px dashed var(--border); border-radius: var(--radius); }
.compare__table { width: 100%; border-collapse: collapse; }
.compare__table th { text-align: left; color: var(--text-dim); font-weight: 500; padding: calc(var(--space) * 3) calc(var(--space) * 3) calc(var(--space) * 3) 0; width: 22%; vertical-align: top; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.compare__table td { padding: calc(var(--space) * 3); border-top: 1px solid var(--border); vertical-align: top; width: 39%; }
.compare__table td.is-hi { color: var(--brand-yellow); font-weight: 700; }
.cmp-atk { margin-bottom: 4px; }
.cmp-cost { display: inline-flex; gap: 2px; margin-left: 4px; }
.compare--locked { filter: blur(7px); pointer-events: none; user-select: none; opacity: .6; }
.paywall { position: relative; margin-top: calc(var(--space) * -30); display: flex; justify-content: center; z-index: var(--z-content); }
.paywall__card { text-align: center; background: rgba(20,26,43,.92); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(var(--space) * 10); box-shadow: var(--shadow-2); max-width: 460px; }
.paywall__title { font-size: var(--fs-xl); margin-bottom: calc(var(--space) * 3); }
.paywall__body { color: var(--text-dim); margin-bottom: calc(var(--space) * 6); }

/* --- Sets page enhancements --- */
.sets-intro { color: var(--text-dim); font-size: var(--fs-lg); margin: 0 0 calc(var(--space) * 8); max-width: 60ch; }
.set-grid--large { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--space) * 6); }
.set-grid--large .set-card { padding: calc(var(--space) * 5); }
.set-grid--large .set-card__logo { height: 140px; }
.set-grid--large .set-card__logo img { max-height: 104px; }
.set-grid--large .set-card__mono { font-size: var(--fs-3xl); }
.set-grid--large .set-card__title { font-size: var(--fs-lg); }
.set-stats { display: flex; gap: calc(var(--space) * 8); margin: calc(var(--space) * 4) 0 calc(var(--space) * 3); }
.set-stat { display: flex; flex-direction: column; }
.set-stat__n { font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-2xl); color: var(--brand-yellow); }
.set-stat__l { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.rarity-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(var(--space) * 2); }

/* --- Pro page: animated compare showcase --- */
.pro-hero { text-align: center; max-width: 760px; margin: 0 auto; padding: calc(var(--space) * 6) 0; }
.pro-stage { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; gap: calc(var(--space) * 6); perspective: 1200px; overflow: hidden; }
.pro-card { width: 210px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--surface-2); }
.pro-card img { width: 100%; display: block; }
.pro-vs { position: absolute; z-index: 5; width: 88px; height: 88px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 30px; color: #1a1400; background: linear-gradient(135deg, var(--brand-yellow), var(--accent-red)); box-shadow: 0 0 34px rgba(238,21,21,.55); }
.pro-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, rgba(255,203,5,.55), transparent 46%); }

.pro-stage.is-playing .pro-card--left { animation: slam-left .6s cubic-bezier(.2,.8,.2,1) both; }
.pro-stage.is-playing .pro-card--right { animation: slam-right .6s cubic-bezier(.2,.8,.2,1) both; }
.pro-stage.is-playing .pro-vs { animation: vs-pop .6s .42s both; }
.pro-stage.is-playing .pro-flash { animation: pro-flash .55s .42s; }
@keyframes slam-left { 0% { transform: translateX(-120vw) rotate(-26deg); opacity: 0; } 70% { transform: translateX(16px) rotate(5deg); } 100% { transform: none; } }
@keyframes slam-right { 0% { transform: translateX(120vw) rotate(26deg); opacity: 0; } 70% { transform: translateX(-16px) rotate(-5deg); } 100% { transform: none; } }
@keyframes vs-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.45) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes pro-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pro-stage .pro-card, .pro-stage .pro-vs { animation: none !important; } }

.pro-controls { display: flex; gap: calc(var(--space) * 3); justify-content: center; margin: calc(var(--space) * 2) 0 calc(var(--space) * 8); }
.pro-headline { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; }
.pro-lede { color: var(--text-dim); font-size: var(--fs-lg); margin: calc(var(--space) * 4) auto calc(var(--space) * 8); max-width: 46ch; }
.pro-feats { list-style: none; padding: 0; margin: 0 auto calc(var(--space) * 8); display: inline-flex; flex-direction: column; gap: calc(var(--space) * 3); text-align: left; }
.pro-feats li { display: flex; align-items: center; gap: calc(var(--space) * 3); font-size: var(--fs-lg); }
.pro-feats__mark { color: var(--brand-yellow); font-size: var(--fs-xl); }
.btn--lg { padding: calc(var(--space) * 4) calc(var(--space) * 9); font-size: var(--fs-lg); }
.pro-cta { margin-top: calc(var(--space) * 4); }
.pro-note { color: var(--text-dim); font-size: var(--fs-sm); margin-top: calc(var(--space) * 4); }
@media (max-width: 700px) { .pro-card { width: 150px; } .pro-stage { height: 300px; } }

/* --- Account: trainer card + avatar picker --- */
.account-layout { display: grid; grid-template-columns: 340px 1fr; gap: calc(var(--space) * 10); align-items: start; }
.trainer-card { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: calc(var(--space) * 6); text-align: center; box-shadow: var(--shadow-2); position: relative; }
.trainer-card--pro { border-color: var(--brand-yellow); box-shadow: 0 0 0 1px var(--brand-yellow), var(--shadow-2); }
.trainer-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--space) * 5); }
.trainer-card__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.trainer-card__avatar { width: 170px; height: 170px; margin: 0 auto calc(var(--space) * 4); border-radius: 20px; overflow: hidden; border: 3px solid rgba(255,255,255,.12); background: var(--bg); }
.trainer-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.trainer-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 64px; color: var(--brand-yellow); }
.trainer-card__name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-xl); }
.trainer-card__email { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 4px; word-break: break-all; }
.trainer-card__since { color: var(--text-dim); font-size: var(--fs-xs); margin-top: calc(var(--space) * 3); }

.account-side { display: flex; flex-direction: column; gap: calc(var(--space) * 6); align-items: flex-start; }
.account-block { width: 100%; background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 5) calc(var(--space) * 6); }
.account__title-line { font-weight: 600; margin: 0 0 6px; }
.account__muted { color: var(--text-dim); margin: 0 0 calc(var(--space) * 4); line-height: 1.7; }
.account__fine { font-size: var(--fs-xs); margin: calc(var(--space) * 3) 0 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 3); }
.avatar-opt { padding: 0; border: 2px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); cursor: pointer; aspect-ratio: 1; transition: border-color .15s ease; }
.avatar-opt img { width: 100%; height: 100%; object-fit: cover; }
.avatar-opt:hover { border-color: var(--brand-blue); }
.avatar-opt.is-active { border-color: var(--brand-yellow); box-shadow: 0 0 0 2px var(--brand-yellow); }
@media (max-width: 800px) { .account-layout { grid-template-columns: 1fr; } }