/* =========================================================
   ROOT
========================================================= */

:root {
  --black: #05070d;
  --black-2: #080c14;
  --black-3: #0d131e;

  --white: #ffffff;
  --white-soft: #e8edf6;

  --blue: #075ce8;
  --blue-bright: #1874ff;
  --blue-soft: #8db4ff;

  --red: #e3173e;
  --red-bright: #ff204f;
  --red-dark: #9d001f;

  --muted: #8994a8;

  --line:
    rgba(255, 255, 255, 0.16);

  --soft-line:
    rgba(255, 255, 255, 0.09);

  --shadow:
    0 40px 110px
    rgba(0, 0, 0, 0.72);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;

  width: 100%;

  min-height: 100%;

  background:
    var(--black);
}

body {
  min-height: 100dvh;

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--white);

  overflow-x:
    hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;

  max-width: 100%;
}


/* =========================================================
   APP
========================================================= */

#app {
  width: 100%;

  min-height: 100dvh;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(7, 92, 232, 0.17),
      transparent 32rem
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(227, 23, 62, 0.15),
      transparent 30rem
    ),
    #03050a;
}


/* =========================================================
   LOADING
========================================================= */

.loading-screen {
  width: 100%;

  min-height: 100dvh;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 16px;

  color:
    #a8b0c0;
}

.loader {
  width: 42px;
  height: 42px;

  border-radius: 999px;

  border:
    4px solid
    rgba(255, 255, 255, 0.1);

  border-top-color:
    #ffffff;

  animation:
    spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* =========================================================
   BASEBALL PAGE

   DESKTOP:
   THE CARD IS A REAL PORTRAIT CARD SHAPE.

   MOBILE:
   IT EXPANDS TO FILL THE PHONE.
========================================================= */

.baseball-page {
  width: 100%;

  min-height: 100dvh;

  padding:
    4vh
    20px;

  display: flex;

  align-items: center;

  justify-content: center;

  perspective:
    2200px;

  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(9, 92, 232, 0.2),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(227, 23, 62, 0.16),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #020409,
      #060911 55%,
      #03050a
    );
}


/* =========================================================
   OPTIONAL PAGE BACKGROUND IMAGE
========================================================= */

.baseball-page.has-background {
  background-image:
    linear-gradient(
      rgba(2, 4, 9, 0.84),
      rgba(2, 4, 9, 0.9)
    ),
    var(--page-background);

  background-size:
    cover;

  background-position:
    center;
}


/* =========================================================
   ACTUAL TRADING CARD

   Desktop width is calculated from viewport height so the
   whole card stays visible and keeps trading-card proportions.
========================================================= */

.baseball-flip-card {
  position: relative;

  width:
    min(
      720px,
      92vw,
      calc(92vh * 5 / 7)
    );

  aspect-ratio:
    5 / 7;

  transform-style:
    preserve-3d;

  transition:
    transform
    0.78s
    cubic-bezier(
      0.19,
      1,
      0.22,
      1
    );

  cursor:
    pointer;

  filter:
    drop-shadow(
      0 40px 45px
      rgba(0, 0, 0, 0.55)
    );
}

.baseball-flip-card.is-flipped {
  transform:
    rotateY(180deg);
}


/* =========================================================
   CARD FACES
========================================================= */

.card-face {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding:
    clamp(
      15px,
      2vw,
      24px
    );

  overflow:
    hidden;

  border:
    clamp(
      3px,
      0.4vw,
      5px
    )
    solid
    #ffffff;

  border-radius:
    clamp(
      22px,
      3vw,
      34px
    );

  background:
    linear-gradient(
      145deg,
      #0b111d,
      #050810 62%,
      #07090f
    );

  box-shadow:
    var(--shadow);

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}


/* =========================================================
   INNER WHITE OUTLINE
========================================================= */

.card-face::before {
  content: "";

  position:
    absolute;

  inset:
    10px;

  z-index:
    20;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    22px;

  pointer-events:
    none;
}


/* =========================================================
   RED / BLUE BOTTOM EDGE DETAIL
========================================================= */

.card-face::after {
  content: "";

  position:
    absolute;

  left:
    20%;

  right:
    20%;

  bottom:
    0;

  height:
    4px;

  z-index:
    15;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #ffffff 50%,
      var(--red)
    );

  opacity:
    0.85;

  pointer-events:
    none;
}


/* =========================================================
   FRONT
========================================================= */

.card-front {
  display: flex;

  flex-direction: column;
}


/* =========================================================
   TOP BAR
========================================================= */

.card-topbar {
  position: relative;

  z-index: 5;

  flex:
    0 0 auto;

  min-height:
    clamp(
      44px,
      6vh,
      58px
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding:
    0
    clamp(
      14px,
      2vw,
      22px
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius:
    8px 8px 3px 3px;

  background:
    linear-gradient(
      100deg,

      var(--blue) 0%,
      var(--blue-bright) 41%,

      #ffffff 41%,
      #ffffff 44%,

      var(--red-bright) 44%,
      var(--red) 100%
    );

  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, 0.3);
}

.card-topbar-left,
.card-topbar-right {
  font-family:
    "Montserrat",
    sans-serif;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.4);
}

.card-topbar-left {
  font-size:
    clamp(
      0.75rem,
      1.4vw,
      1rem
    );
}

.card-topbar-right {
  font-size:
    clamp(
      0.62rem,
      1.1vw,
      0.82rem
    );
}


/* =========================================================
   PHOTO FRAME
========================================================= */

.player-photo-frame {
  position: relative;

  flex:
    1 1 auto;

  min-height: 0;

  margin-top:
    clamp(
      12px,
      1.6vw,
      18px
    );

  overflow:
    hidden;

  border:
    2px solid
    rgba(255, 255, 255, 0.3);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #0b1428,
      #111827 47%,
      #04070d
    );

  box-shadow:
    inset
    0 0 0 1px
    rgba(0, 0, 0, 0.85),
    0 10px 25px
    rgba(0, 0, 0, 0.22);
}


/* inner dotted/dashed frame */

.player-photo-frame::before {
  content: "";

  position:
    absolute;

  inset:
    clamp(
      12px,
      1.6vw,
      18px
    );

  z-index:
    4;

  border:
    1px dashed
    rgba(255, 255, 255, 0.2);

  border-radius:
    11px;

  pointer-events:
    none;
}


/* diagonal glass glare */

.player-photo-frame::after {
  content: "";

  position:
    absolute;

  z-index:
    5;

  top:
    -45%;

  left:
    31%;

  width:
    24%;

  height:
    195%;

  transform:
    rotate(34deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.03),
      transparent
    );

  pointer-events:
    none;
}


/* =========================================================
   PLAYER PHOTO
========================================================= */

.player-photo {
  position:
    absolute;

  inset: 0;

  z-index:
    1;

  width: 100%;
  height: 100%;

  object-fit:
    cover;

  object-position:
    center;

  background:
    #080c15;
}

.photo-placeholder {
  position:
    absolute;

  inset: 0;

  z-index:
    1;

  display:
    grid;

  place-items:
    center;

  color:
    rgba(255, 255, 255, 0.48);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.9rem,
      2vw,
      1.3rem
    );

  font-weight:
    900;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(14, 91, 225, 0.2),
      transparent 35%
    ),
    radial-gradient(
      circle at 75% 80%,
      rgba(227, 23, 62, 0.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0b1428,
      #05080f
    );
}


/* =========================================================
   NUMBER BADGE
========================================================= */

.card-number {
  position:
    absolute;

  z-index:
    10;

  right:
    clamp(
      18px,
      2.6vw,
      30px
    );

  bottom:
    clamp(
      18px,
      2.6vw,
      30px
    );

  width:
    clamp(
      48px,
      7vw,
      64px
    );

  height:
    clamp(
      48px,
      7vw,
      64px
    );

  display:
    grid;

  place-items:
    center;

  border-radius:
    999px;

  border:
    3px solid
    #ffffff;

  background:
    linear-gradient(
      145deg,
      var(--red-bright),
      var(--red-dark)
    );

  color:
    #ffffff;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.7rem,
      1.2vw,
      0.9rem
    );

  font-weight:
    900;

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.48),
    0 0 20px
    rgba(227, 23, 62, 0.16);
}


/* =========================================================
   NAME PANEL
========================================================= */

.player-name-panel {
  flex:
    0 0 auto;

  margin-top:
    clamp(
      12px,
      1.5vw,
      17px
    );

  padding:
    clamp(
      14px,
      1.8vw,
      20px
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius:
    13px;

  background:
    linear-gradient(
      110deg,
      #111720 0%,
      #0a0e15 65%,
      #10131a 100%
    );

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.035);
}

.player-name {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      1.35rem,
      3vw,
      2.15rem
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    0.01em;

  text-transform:
    uppercase;

  color:
    #ffffff;
}

.player-profile-label {
  margin:
    7px 0 0;

  color:
    var(--blue-soft);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.62rem,
      1.15vw,
      0.78rem
    );

  font-weight:
    900;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


/* =========================================================
   CLICK TO FLIP
========================================================= */

.flip-label {
  flex:
    0 0 auto;

  padding-top:
    clamp(
      8px,
      1.1vw,
      12px
    );

  text-align:
    center;

  color:
    rgba(255, 255, 255, 0.34);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.52rem,
      0.9vw,
      0.65rem
    );

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


/* =========================================================
   BACK
========================================================= */

.card-back {
  transform:
    rotateY(180deg);

  display: flex;

  flex-direction: column;
}


/* =========================================================
   BACK HEADER
========================================================= */

.back-topbar {
  flex:
    0 0 auto;

  min-height:
    clamp(
      44px,
      6vh,
      58px
    );

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    0
    clamp(
      14px,
      2vw,
      22px
    );

  border-radius:
    8px;

  background:
    linear-gradient(
      100deg,

      var(--blue) 0%,
      var(--blue-bright) 41%,

      #ffffff 41%,
      #ffffff 44%,

      var(--red-bright) 44%,
      var(--red) 100%
    );
}

.back-topbar h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.75rem,
      1.4vw,
      1rem
    );

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.back-topbar span {
  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.58rem,
      1vw,
      0.75rem
    );

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   BACK CONTENT
========================================================= */

.back-content {
  flex:
    1 1 auto;

  min-height: 0;

  margin-top:
    clamp(
      12px,
      1.5vw,
      17px
    );

  display: grid;

  grid-template-columns:
    1.25fr
    0.75fr;

  gap:
    clamp(
      10px,
      1.5vw,
      16px
    );
}


/* =========================================================
   BACK PANELS
========================================================= */

.back-main,
.back-side {
  min-height: 0;

  overflow:
    auto;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #101722,
      #070b12
    );
}

.back-main {
  padding:
    clamp(
      18px,
      2.5vw,
      30px
    );
}

.back-side {
  padding:
    clamp(
      15px,
      2vw,
      23px
    );

  display: flex;

  flex-direction: column;
}


/* =========================================================
   BACK NAME
========================================================= */

.back-eyebrow {
  margin:
    0 0 8px;

  color:
    var(--blue-soft);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.56rem,
      0.9vw,
      0.68rem
    );

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}

.back-name {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      1.8rem,
      4.6vw,
      3.5rem
    );

  line-height:
    0.92;

  font-weight:
    900;

  letter-spacing:
    -0.04em;

  text-transform:
    uppercase;
}

.back-title {
  margin:
    12px 0 0;

  color:
    #b6c6e6;

  font-size:
    clamp(
      0.75rem,
      1.2vw,
      0.95rem
    );

  font-weight:
    700;
}


/* =========================================================
   RED / WHITE / BLUE DIVIDER
========================================================= */

.back-divider {
  width:
    90px;

  height:
    5px;

  margin:
    clamp(
      16px,
      2vw,
      22px
    )
    0;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--blue) 0%,
      var(--blue) 32%,
      #ffffff 32%,
      #ffffff 66%,
      var(--red) 66%,
      var(--red) 100%
    );
}


/* =========================================================
   BIO
========================================================= */

.back-bio {
  margin: 0;

  color:
    #c6cedd;

  font-size:
    clamp(
      0.72rem,
      1.15vw,
      0.9rem
    );

  line-height:
    1.65;
}


/* =========================================================
   STATS
========================================================= */

.stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    8px;

  margin-top:
    clamp(
      16px,
      2vw,
      22px
    );
}

.stat-box {
  padding:
    11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, 0.035);
}

.stat-label {
  display: block;

  margin-bottom:
    5px;

  color:
    #78869f;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.46rem,
      0.75vw,
      0.56rem
    );

  font-weight:
    900;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}

.stat-value {
  display: block;

  color:
    #ffffff;

  font-size:
    clamp(
      0.68rem,
      1vw,
      0.82rem
    );

  font-weight:
    800;
}


/* =========================================================
   SIDE
========================================================= */

.side-section {
  margin-bottom:
    19px;
}

.side-title {
  margin:
    0 0 10px;

  color:
    #ffffff;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.56rem,
      0.85vw,
      0.68rem
    );

  font-weight:
    900;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


/* =========================================================
   SKILLS
========================================================= */

.skill-list {
  display: flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin: 0;

  padding: 0;

  list-style:
    none;
}

.skill-list li {
  padding:
    6px
    8px;

  border:
    1px solid
    rgba(24, 116, 255, 0.28);

  border-radius:
    999px;

  background:
    rgba(7, 92, 232, 0.12);

  color:
    #cfddff;

  font-size:
    clamp(
      0.54rem,
      0.8vw,
      0.66rem
    );

  font-weight:
    700;
}


/* =========================================================
   LESSONS
========================================================= */

.lesson-list {
  display: grid;

  gap:
    7px;

  margin: 0;

  padding: 0;

  list-style:
    none;
}

.lesson-list li {
  position: relative;

  padding-left:
    15px;

  color:
    #adb7c9;

  font-size:
    clamp(
      0.56rem,
      0.85vw,
      0.7rem
    );

  line-height:
    1.4;
}

.lesson-list li::before {
  content: "";

  position:
    absolute;

  left: 0;

  top:
    0.48em;

  width:
    6px;

  height:
    6px;

  border-radius:
    999px;

  background:
    var(--red);
}


/* =========================================================
   SCHEDULE BUTTON
========================================================= */

.schedule-button {
  width: 100%;

  margin-top:
    auto;

  padding:
    13px
    14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  border-radius:
    10px;

  color:
    #ffffff;

  background:
    linear-gradient(
      100deg,

      var(--blue) 0%,
      var(--blue-bright) 46%,

      var(--red) 46%,
      var(--red-bright) 100%
    );

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.6rem,
      0.9vw,
      0.72rem
    );

  font-weight:
    900;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;

  box-shadow:
    0 12px 25px
    rgba(0, 0, 0, 0.32);

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.schedule-button:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.08);
}

.schedule-button:active {
  transform:
    translateY(0);
}


/* =========================================================
   FLIP BACK LABEL
========================================================= */

.back-flip-label {
  flex:
    0 0 auto;

  margin-top:
    9px;

  text-align:
    center;

  color:
    rgba(255, 255, 255, 0.33);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      0.48rem,
      0.75vw,
      0.58rem
    );

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   MODAL
========================================================= */

.modal-overlay {
  position:
    fixed;

  inset: 0;

  z-index:
    9999;

  padding:
    20px;

  display: grid;

  place-items:
    center;

  background:
    rgba(1, 3, 8, 0.87);

  backdrop-filter:
    blur(16px);

  animation:
    modalFade
    0.2s ease;
}

@keyframes modalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.schedule-modal {
  width:
    min(
      680px,
      100%
    );

  max-height:
    90dvh;

  overflow-y:
    auto;

  border:
    3px solid
    #ffffff;

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      #0e1522,
      #06090f
    );

  box-shadow:
    0 40px 120px
    rgba(0, 0, 0, 0.75);

  animation:
    modalRise
    0.24s ease;
}

@keyframes modalRise {
  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   MODAL HEADER
========================================================= */

.modal-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding:
    22px 24px;

  background:
    linear-gradient(
      100deg,

      var(--blue) 0%,
      var(--blue-bright) 42%,

      #ffffff 42%,
      #ffffff 45%,

      var(--red) 45%,
      var(--red-bright) 100%
    );
}

.modal-header-text h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    1.25rem;

  font-weight:
    900;

  text-transform:
    uppercase;
}

.modal-header-text p {
  margin:
    5px 0 0;

  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    0.78rem;

  font-weight:
    600;
}

.modal-close {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 auto;

  display: grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.3);

  border-radius:
    11px;

  background:
    rgba(0, 0, 0, 0.28);

  color:
    #ffffff;

  font-size:
    1.35rem;
}


/* =========================================================
   FORM
========================================================= */

.modal-body {
  padding:
    26px;
}

.schedule-form {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    15px;
}

.form-group {
  display: grid;

  gap:
    7px;
}

.form-group.full {
  grid-column:
    1 / -1;
}

.form-group label {
  color:
    #c8d0df;

  font-size:
    0.74rem;

  font-weight:
    800;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  padding:
    13px 14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius:
    10px;

  outline:
    none;

  background:
    #0d1420;

  color:
    #ffffff;
}

.form-group textarea {
  min-height:
    115px;

  resize:
    vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:
    var(--blue-bright);

  box-shadow:
    0 0 0 3px
    rgba(24, 116, 255, 0.15);
}

.form-group option {
  color:
    #111111;
}

.request-button {
  width: 100%;

  padding:
    15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-radius:
    11px;

  color:
    #ffffff;

  background:
    linear-gradient(
      100deg,

      var(--blue) 0%,
      var(--blue-bright) 47%,

      var(--red) 47%,
      var(--red-bright) 100%
    );

  font-family:
    "Montserrat",
    sans-serif;

  font-weight:
    900;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.form-note {
  margin:
    10px 0 0;

  color:
    #6f7a8f;

  text-align:
    center;

  font-size:
    0.68rem;
}


/* =========================================================
   ERROR
========================================================= */

.error-screen {
  width: 100%;

  min-height:
    100dvh;

  display: grid;

  place-items:
    center;

  padding:
    30px;
}

.error-box {
  width:
    min(
      520px,
      100%
    );

  padding:
    30px;

  text-align:
    center;

  border:
    3px solid
    #ffffff;

  border-radius:
    22px;

  background:
    #080d16;
}


/* =========================================================
   MOBILE

   KEEP THE BEHAVIOR YOU LIKED:
   CARD BECOMES THE PHONE SCREEN.
========================================================= */

@media (
  max-width: 700px
) {

  .baseball-page {
    min-height:
      100dvh;

    padding:
      8px;

    align-items:
      stretch;
  }

  .baseball-flip-card {
    width:
      100%;

    min-height:
      calc(
        100dvh -
        16px
      );

    aspect-ratio:
      auto;

    filter:
      none;
  }

  .card-face {
    min-height:
      100%;

    padding:
      13px;

    border-width:
      3px;

    border-radius:
      22px;
  }

  .card-face::before {
    inset:
      8px;

    border-radius:
      14px;
  }

  .card-topbar,
  .back-topbar {
    min-height:
      46px;

    padding:
      0 14px;
  }

  .player-photo-frame {
    margin-top:
      12px;
  }

  .player-photo-frame::before {
    inset:
      12px;
  }

  .player-name-panel {
    margin-top:
      12px;

    padding:
      16px;
  }

  .flip-label {
    padding-top:
      9px;
  }

  .back-content {
    margin-top:
      12px;

    grid-template-columns:
      1fr;

    gap:
      10px;

    overflow-y:
      auto;
  }

  .back-main,
  .back-side {
    overflow:
      visible;

    padding:
      18px;
  }

  .back-main {
    flex:
      0 0 auto;
  }

  .back-side {
    flex:
      0 0 auto;
  }

  .stat-grid {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }

  .schedule-form {
    grid-template-columns:
      1fr;
  }

  .modal-body {
    padding:
      18px;
  }

  .modal-header {
    padding:
      18px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (
  max-width: 440px
) {

  .player-name {
    font-size:
      1.35rem;
  }

  .player-profile-label {
    font-size:
      0.63rem;
  }

  .card-number {
    width:
      50px;

    height:
      50px;

    right:
      18px;

    bottom:
      18px;

    font-size:
      0.7rem;
  }

  .stat-grid {
    grid-template-columns:
      1fr;
  }

  .back-name {
    font-size:
      2.25rem;
  }

}