/* ============ SCREEN 1: FIGHTER SELECT ============ */
#screen-select {
  padding: clamp(.5rem, 1.5vh, 1.2rem) clamp(.6rem, 2vw, 2rem);
  gap: clamp(.4rem, 1.2vh, 1rem);
  overflow-y: auto; overflow-x: hidden;
}
.select-header { text-align: center; flex: none; }
.logo {
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
  font-style: italic; letter-spacing: .01em;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(255,196,0,.55);
  color: var(--gold);
}
.logo em { color: var(--white); font-style: italic; }
.logo-star { display: inline-block; animation: starSpin 4s linear infinite; -webkit-text-stroke: 0; text-shadow: none; }
@keyframes starSpin { 50% { transform: rotate(14deg) scale(1.15); } }
.tagline {
  font-size: clamp(.7rem, 1.8vw, 1rem); letter-spacing: .35em;
  color: var(--gold-hi); opacity: .9; margin-top: .1em;
}

/* ---- config bar ---- */
.config-bar {
  flex: none; align-self: center;
  display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 2.2rem);
  padding: .5rem clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap; justify-content: center;
}
.cfg { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.cfg label { font-size: clamp(.55rem, 1.3vw, .75rem); letter-spacing: .12em; color: #6b5f44; }
.cfg input[type="number"] {
  font-family: inherit; font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  width: 3.2em; text-align: center;
  border: 3px solid var(--ink); border-radius: .25em;
  background: var(--white); color: var(--ink); padding: .1em;
}
.time-inputs { display: flex; align-items: center; gap: .2em; font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.time-inputs input { width: 2.7em !important; }
.time-inputs span { font-weight: 900; }
.stepper { display: flex; align-items: center; gap: .4em; }
.stepper output { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 900; min-width: 1.6em; text-align: center; }
.step-btn {
  width: 1.7em; height: 1.7em; font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight: 900;
  background: linear-gradient(180deg, #ffd94d, #ff9d00);
  border: 3px solid var(--ink); border-radius: .3em;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4); line-height: 1;
}
.step-btn:active { transform: scale(.9); box-shadow: none; }
.config-bar .mute-btn { border-color: rgba(0,0,0,.4); }

/* ---- roster grid ---- */
.roster {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(92px, 10.5vw, 150px), 1fr));
  grid-auto-rows: max-content;
  gap: clamp(.4rem, 1vw, .9rem);
  align-content: safe center;
  overflow-y: auto;
  padding: .4rem 1rem;
}
.fighter-card {
  position: relative;
  aspect-ratio: 5 / 6;
  border: var(--outline); border-radius: 6px;
  transform: skewX(-4deg);
  overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  transition: transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.fighter-card:hover { transform: skewX(-4deg) translateY(-4px) scale(1.03); box-shadow: 6px 8px 0 rgba(0,0,0,.5); z-index: 2; }
.fighter-card .card-bg { position: absolute; inset: 0; }
.fighter-card .portrait {
  position: absolute; inset: 4% 4% 18% 4%;
  display: flex; align-items: flex-end; justify-content: center;
  transform: skewX(4deg);
}
.fighter-card .portrait .sprite-box { height: 92%; max-width: 94%; }
.fighter-card .char-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .22em .4em .18em;
  background: linear-gradient(180deg, rgba(15,10,30,.92), rgba(15,10,30,.99));
  color: var(--white); text-align: center;
  font-size: clamp(.6rem, 1.4vw, .85rem); letter-spacing: .1em; font-style: italic;
  border-top: 3px solid var(--ink);
}
.fighter-card.dropTarget { outline: 5px dashed var(--gold); outline-offset: -5px; }

/* locked state */
.fighter-card.locked { cursor: default; box-shadow: 0 0 0 4px var(--pcolor), 6px 6px 0 rgba(0,0,0,.5); }
.fighter-card.locked .card-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(255,255,255,.28) 42%, transparent 55%);
}
.fighter-card .stamp {
  position: absolute; top: 4%; left: 6%; z-index: 3;
  width: clamp(28px, 3.4vw, 44px); height: clamp(28px, 3.4vw, 44px);
  transform: skewX(4deg);
  animation: stampIn 320ms cubic-bezier(.2,1.6,.4,1) both;
  cursor: pointer;
}
@keyframes stampIn { 0% { transform: skewX(4deg) scale(3.4) rotate(-160deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: skewX(4deg) scale(1) rotate(0); } }
.fighter-card .stamp-flash {
  position: absolute; inset: -30%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95), transparent 60%);
  animation: flashOut 380ms ease-out both;
}
@keyframes flashOut { to { opacity: 0; transform: scale(1.6); } }
.fighter-card .name-entry {
  position: absolute; left: 3%; right: 3%; bottom: 8%; z-index: 3;
  transform: skewX(4deg);
}
.fighter-card .name-entry input {
  width: 100%; font-family: inherit; font-weight: 900;
  font-size: clamp(.75rem, 1.6vw, 1rem); text-align: center;
  padding: .3em .2em;
  border: 3px solid var(--ink); border-radius: .3em;
  background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 3px var(--pcolor), 0 3px 0 rgba(0,0,0,.4);
}
.fighter-card .name-entry input::placeholder { color: #999; font-weight: 700; }
.fighter-card.locked .char-name { opacity: 0; }

/* ---- coin dock ---- */
.dock-wrap { flex: none; text-align: center; padding-bottom: .4rem; }
.dock-hint { font-size: clamp(.6rem, 1.5vw, .85rem); letter-spacing: .25em; color: var(--gold-hi); opacity: .85; margin-bottom: .35rem; }
.coin-dock {
  display: flex; justify-content: center; gap: clamp(.5rem, 1.5vw, 1rem);
  min-height: clamp(48px, 6vw, 72px); flex-wrap: wrap;
}
.pcoin {
  width: clamp(44px, 5.5vw, 66px); height: clamp(44px, 5.5vw, 66px);
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: radial-gradient(circle at 32% 28%, #fff8, transparent 45%), var(--pcolor);
  color: var(--white);
  font-weight: 900; font-size: clamp(.85rem, 1.8vw, 1.2rem);
  display: flex; align-items: center; justify-content: center;
  text-shadow: 1px 2px 0 rgba(0,0,0,.55);
  box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 -4px 0 rgba(0,0,0,.25);
  cursor: grab; touch-action: none;
  transition: transform 150ms ease;
}
.pcoin:hover { transform: translateY(-4px) scale(1.06); }
.pcoin.dragging {
  position: fixed; z-index: 90; margin: 0;
  cursor: grabbing; transition: none;
  transform: scale(1.25); box-shadow: 0 14px 22px rgba(0,0,0,.55);
}
.pcoin.placed { width: 100%; height: 100%; font-size: clamp(.6rem, 1.2vw, .85rem); cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.5); }
.pcoin.returning { transition: transform 260ms cubic-bezier(.2,.9,.3,1.2); }

/* ---- READY TO RACE banner-button ---- */
.ready-banner {
  position: fixed; left: 50%; top: 50%; z-index: 55;
  transform: translate(-50%, -50%) skewX(-10deg);
  padding: .35em 1.2em .5em;
  background: linear-gradient(180deg, #ff4b3a, #c40e1d);
  border: 6px solid var(--ink); border-radius: .15em;
  box-shadow: 0 0 0 5px var(--gold), 10px 12px 0 rgba(0,0,0,.5), 0 0 70px rgba(255,80,40,.75);
  display: flex; flex-direction: column; align-items: center;
  animation: readyPulse 700ms ease-in-out infinite alternate, readyIn 400ms cubic-bezier(.17,.89,.32,1.5) both;
}
@keyframes readyIn {
  from { transform: translate(-50%, -50%) skewX(-10deg) scale(2.6); opacity: 0; }
  to   { transform: translate(-50%, -50%) skewX(-10deg) scale(1); opacity: 1; }
}
.ready-banner span {
  font-size: clamp(2rem, 7vw, 4.6rem); font-style: italic; font-weight: 900;
  color: var(--white); -webkit-text-stroke: 2px var(--ink);
  text-shadow: 0 4px 0 var(--ink);
  transform: skewX(2deg);
}
.ready-banner small { font-size: clamp(.7rem, 1.6vw, 1rem); letter-spacing: .4em; color: var(--gold-hi); }
@keyframes readyPulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.ready-banner:active { transform: translate(-50%, -50%) skewX(-10deg) scale(.95); }