:root{
  --navy:#13295d;
  --navy2:#223867;
  --red:#ef233c;
  --gold:#c7952c;
  --line:#e9edf5;
  --muted:#61708b;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(19,41,93,.06), transparent 24%),
    radial-gradient(circle at bottom right, rgba(239,35,60,.05), transparent 22%),
    linear-gradient(180deg,#ffffff 0%, #fbfcff 100%);
  color:var(--navy);
}

.shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(820px, 100%);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:32px;
  box-shadow:0 24px 60px rgba(20,43,99,.08);
  padding:clamp(28px, 5vw, 56px);
  text-align:center;
  backdrop-filter:blur(8px);
}

.logo{
  width:min(420px, 78vw);
  height:auto;
  margin:0 auto 20px;
  display:block;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--red);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

h1{
  margin:0 0 14px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(40px, 8vw, 76px);
  line-height:.96;
  letter-spacing:-.04em;
}

.subhead{
  width:min(620px, 100%);
  margin:0 auto 24px;
  color:var(--muted);
  font-size:clamp(16px, 2.2vw, 20px);
  line-height:1.55;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0 0 24px;
}

.badges span{
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy2);
  border-radius:999px;
  padding:12px 16px;
  font-size:14px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(20,43,99,.04);
}

.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff7df 0%, #fff3c7 100%);
  color:#6b5310;
  padding:12px 16px;
  font-size:14px;
  font-weight:700;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(199,149,44,.16);
}

@media (max-width:640px){
  .card{border-radius:24px}
  .badges span{width:100%}
}


.status-diamond{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px 12px 12px;
}

.diamond-wrap{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  flex:0 0 64px;
}

.diamond-field{
  width:54px;
  height:54px;
  background:linear-gradient(180deg,#59b96a 0%, #3ea454 100%);
  border-radius:14px;
  position:relative;
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35);
}

.base{
  position:absolute;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:none !important;
}

.home{ left:22px; bottom:-2px; }   /* home plate */
.first{ right:-2px; top:22px; }    /* first base */
.second{ left:22px; top:-2px; }    /* second base */
.third{ left:-2px; top:22px; }     /* third base */

.pitcher{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c7952c;
  left:23px;
  top:23px;
}

.status-copy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:640px){
  .status-diamond{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}




/* Animated baseball field status block - triangular infield design */
.status-field{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px 12px 12px;
}

.field-thumb{
  width:78px;
  height:78px;
  flex:0 0 78px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, #8ad07d 0%, #66bd63 42%, #469d4a 100%);
  border:1px solid rgba(120,92,24,.16);
  box-shadow:
    0 8px 18px rgba(20,43,99,.08),
    inset 0 0 0 2px rgba(255,255,255,.22);
}

/* outfield arc */


/* triangular / diamond infield */


.base{
  position:absolute;
  width:9px;
  height:9px;
  background:#fffdf3;
  border:1px solid rgba(120,92,24,.18);
  transform:rotate(45deg);
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  z-index:2;
}

/* proper base placement around the infield */
.base.home{
  left:50%;
  bottom:8px;
  width:12px;
  height:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transform:translateX(-50%);
}
.base.first{
  right:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}
.base.second{
  left:50%;
  top:8px;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateX(-50%) rotate(45deg);
}
.base.third{
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}

.pitcher-mark{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f0dcc0;
  left:35px;
  top:35px;
  box-shadow:0 0 0 2px rgba(255,255,255,.28);
  z-index:2;
}

/* subtle base lines */
.basepath{
  position:absolute;
  inset:0;
  z-index:1;
}
.basepath::before,



.runner{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ef233c;
  box-shadow:0 0 0 3px rgba(255,255,255,.7);
  left:33px;
  bottom:10px;
  z-index:3;
  animation:runner-progress 3.6s ease-in-out infinite;
}

@keyframes runner-progress{
  0%   { transform:translate(0,0); }
  22%  { transform:translate(22px,-22px); }
  48%  { transform:translate(0,-44px); }
  74%  { transform:translate(-22px,-22px); }
  96%  { transform:translate(0,0); }
  100% { transform:translate(0,0); }
}

@media (max-width:640px){
  .status-field{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}




/* smaller home plate dirt */


/* replace runner dot with logo face */
.runner{
  width:20px;
  height:20px;
  background:url('assets/runner.png') center/cover no-repeat;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}


/* Premium runner animation */
.runner{
  animation: runner-advanced 4.2s cubic-bezier(.65,.05,.36,1) infinite;
}

@keyframes runner-advanced{
  0%   { transform:translate(0,0) scale(1); }
  15%  { transform:translate(22px,-22px) scale(1.1); }
  25%  { transform:translate(22px,-22px) scale(1); } /* pause at first */

  40%  { transform:translate(0,-44px) scale(1.1); }
  50%  { transform:translate(0,-44px) scale(1); } /* pause at second */

  65%  { transform:translate(-22px,-22px) scale(1.1); }
  75%  { transform:translate(-22px,-22px) scale(1); } /* pause at third */

  90%  { transform:translate(0,0) scale(1.1); }
  100% { transform:translate(0,0) scale(1); } /* home */
}


/* Fix dirt only under home plate */


/* ensure runner uses updated face */
.runner{
  width:22px;
  height:22px;
  background:url('assets/runner.png') center/cover no-repeat;
}


/* Premium touches: active base glow, runner trail, progress bar */
.base{
  transition: box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}

.base.active{
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.runner{
  position:absolute;
  z-index:4;
  transform:translate(-50%,-50%);
  transition: none;
}







.progress-wrap{
  margin-top:10px;
  width:min(320px, 100%);
}

.progress-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:800;
  color:#7a5b18;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.progress-bar{
  position:relative;
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(180deg,#f2e6be 0%, #ead99d 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}

.progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#ef233c 0%, #ff6a4d 50%, #f7b54a 100%);
  box-shadow:0 0 18px rgba(239,35,60,.28);
  transition:width .5s ease;
}


/* Runner alignment + dirt behind avatar */
.runner{
  z-index: 5;
  transform-origin: center center;
}



.pitcher-mark,
.basepath,
.base,



/* Center entire status block and align content */
.status-field{
  justify-content:center;
  margin:0 auto;
  width:fit-content;
  max-width:100%;
}

.centered-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.status-copy .dot{
  margin-right:0;
}

.status-copy > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Make status background use brand palette instead of yellow/brown */
.status{
  background:linear-gradient(180deg, rgba(19,41,93,0.08) 0%, rgba(239,35,60,0.08) 100%);
  color:#13295d;
  border:1px solid rgba(19,41,93,0.12);
}

/* Ensure field graphic is centered */
.field-thumb{
  margin:0 auto;
}

/* Progress colors shifted to brand palette */
.progress-label{
  color:#13295d;
}

.progress-bar{
  background:linear-gradient(180deg, rgba(19,41,93,0.14) 0%, rgba(19,41,93,0.08) 100%);
}

.progress-fill{
  background:linear-gradient(90deg,#13295d 0%, #ef233c 65%, #c7952c 100%);
  box-shadow:0 0 18px rgba(19,41,93,0.18);
}

/* Runner/dirt styling */
.runner{
  z-index:5;
  transform-origin:center center;
}









.runner{
  
  
  
  transform:translate(-50%,-50%) !important;
}

.runner::before,




/* outfield arc */


/* infield dirt */


/* bases positioned correctly */
.base.home{
  left:50%;
  bottom:8px;
  width:12px;
  height:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transform:translateX(-50%);
}
.base.first{
  right:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}
.base.second{
  left:50%;
  top:8px;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateX(-50%) rotate(45deg);
}
.base.third{
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}

/* pitcher mound */
.pitcher-mark{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

/* center everything visually */
.field-thumb, .status-field{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* --- PRO BASEBALL FIELD (FINAL VERSION) --- */
.field-thumb{
  width:78px;
  height:78px;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:
    repeating-linear-gradient(
      90deg,
      #4caf50 0px,
      #4caf50 6px,
      #3e8f42 6px,
      #3e8f42 12px
    );
  box-shadow:
    0 8px 18px rgba(20,43,99,.08),
    inset 0 0 0 2px rgba(255,255,255,.2);
}

/* Outfield arc */


/* Infield dirt */


/* Chalk base paths */
.basepath{
  position:absolute;
  inset:0;
}



/* Bases */
.base{
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  position:absolute;
  transform:rotate(45deg);
}

.base.home{
  left:50%;
  bottom:8px;
  width:12px;
  height:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  transform:translateX(-50%);
}

.base.first{
  right:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}

.base.second{
  left:50%;
  top:8px;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateX(-50%) rotate(45deg);
}

.base.third{
  left:10px;
  top:50%;
  width:8px;
  height:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  transform:translateY(-50%) rotate(45deg);
}

/* Pitcher mound */
.pitcher-mark{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff3d6;
  left:50%;
  top:50%;
  transform:translate(-50%,-30%);
}


/* Clean field: no infield triangles */
.field-thumb::after{
  content:none;
}

.basepath::before{
  content:none;
}


/* Diagonal base paths (clean lines between bases) */





/* Proper full diamond lines connecting all bases */
.basepath::after{
  content:"";
  position:absolute;
  width:48px;
  height:48px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:2px;
  box-sizing:border-box;
}

.runner{
  z-index:5;
}




/* v24 status indicator */
.status-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
}

.status-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ef233c;
  box-shadow:0 0 8px rgba(239,35,60,.6);
  animation:status-blink 1.2s infinite;
  flex:0 0 10px;
  position:relative;
  top:1px;
}

@keyframes status-blink{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

/* v24 moving face avatar */
.runner.moving-face{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:url('assets/runner.png') center/cover no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  z-index:6;
  transform:translate(-50%,-50%);
  will-change:left, top, transform;
}

/* Keep dirt near home plate only */
.field-thumb::after{
  width:18px !important;
  height:10px !important;
  left:30px !important;
  bottom:12px !important;
  top:auto !important;
  transform:none !important;
  border-radius:6px !important;
  background:#c99258 !important;
}


/* v25: clean avatar movement with no overlays */
.runner,
.runner.moving-face{
  position:absolute !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  background:url('assets/runner.png') center/cover no-repeat !important;
  box-shadow:0 2px 4px rgba(0,0,0,.14) !important;
  z-index:6 !important;
  left:39px;
  top:68px;
  transform:translate(-50%,-50%) !important;
  will-change:left, top !important;
  transition:none !important;
  animation:none !important;
}

.base{
  transition:none !important;
}

.base.active{
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}



/* v30 mobile backdrop/layout fix */
.card{
  overflow:hidden;
}

.status{
  width:min(100%, 560px);
  margin-left:auto;
  margin-right:auto;
}

.status-field{
  width:100%;
  max-width:100%;
  flex-wrap:wrap;
}

.status-copy{
  min-width:0;
}

.progress-wrap{
  width:min(100%, 320px);
}

@media (max-width: 640px){
  .card{
    width:100%;
    padding:24px 18px 28px;
  }

  .status{
    width:100%;
    padding:14px 12px;
    border-radius:20px;
  }

  .status-field{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .centered-status{
    width:100%;
  }

  .status-line{
    width:100%;
    justify-content:center;
    text-align:center;
    flex-wrap:nowrap;
  }

  .status-text{
    font-size:clamp(14px, 4vw, 18px);
    line-height:1.2;
  }

  .progress-wrap{
    width:100%;
    max-width:280px;
    margin-top:10px;
  }

  .progress-label{
    width:100%;
    font-size:11px;
  }

  .field-thumb{
    flex:0 0 auto;
  }
}



/* v31 desktop spacing fix for status block */
.status{
  width:min(100%, 720px);
}

.status-field{
  display:grid;
  grid-template-columns:72px 1fr;
  align-items:center;
  column-gap:18px;
  row-gap:0;
  width:100%;
}

.centered-status{
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}

.status-line{
  justify-content:flex-start;
  width:100%;
}

.progress-wrap{
  width:100%;
  max-width:none;
}

@media (max-width: 640px){
  .status-field{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .centered-status{
    align-items:center;
    text-align:center;
  }

  .status-line{
    justify-content:center;
  }

  .progress-wrap{
    max-width:280px;
  }
}


/* v32 reduce top whitespace for mobile fit */
.logo{
  margin-bottom:8px !important;
}

.hero{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.launching{
  margin-top:6px !important;
}

/* tighter mobile spacing */
@media (max-width: 640px){
  .logo{
    margin-bottom:4px !important;
  }

  .hero{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  .launching{
    margin-top:4px !important;
  }
}


/* v33 dynamic logo scaling for small screens */
.logo{
  width:min(420px, 78vw);
  height:auto;
}

@media (max-width: 640px){
  .logo{
    width:min(300px, 68vw);
    max-width:68vw;
    height:auto;
  }
}

@media (max-width: 420px){
  .logo{
    width:min(260px, 62vw);
    max-width:62vw;
    height:auto;
  }
}