@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#05060a;
  --muted:#7c8aa5;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--bg);
  color:#e9edf5;
  font-family:'Press Start 2P', cursive;
  overflow:hidden;
}

body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  position:relative;
  gap:4vh;
}

/* --- ambient moving background --- */
.grid-bg{
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(127,216,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,216,255,0.1) 1px, transparent 1px);
  background-size:44px 44px;
  transform:perspective(500px) rotateX(60deg) scale(2) translateY(10%);
  transform-origin:bottom;
  opacity:.5;
  z-index:0;
  animation:gridMove 5s linear infinite;
}
@keyframes gridMove{ from{background-position:0 0,0 0;} to{background-position:0 44px,44px 0;} }

.scanlines{
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 2px, transparent 3px);
  pointer-events:none;
  z-index:5;
}

.scan-sweep{
  position:fixed;
  top:0; bottom:0; width:260px;
  left:-260px;
  background:linear-gradient(90deg, transparent, rgba(127,216,255,0.1), transparent);
  z-index:2;
  pointer-events:none;
  animation:sweep 5s linear infinite;
}
@keyframes sweep{
  0%{ left:-260px; }
  100%{ left:110%; }
}

/* --- title --- */
.title-block{
  position:fixed;
  top:1.5vh; left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
  background:rgba(5,6,10,.7);
  border-radius:14px;
  padding:1.2vh 4vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1vh;
}

.logo-title{
  font-size:clamp(1.3rem, 3.6vw, 2.4rem);
  letter-spacing:3px;
  color:#fff;
  white-space:nowrap;
  -webkit-text-stroke:1.5px #05060a;
  paint-order:stroke fill;
  text-shadow:
    0 0 10px rgba(127,216,255,.9),
    0 0 30px rgba(127,216,255,.6);
  animation:glowPulse 2.6s ease-in-out infinite;
  line-height:1.6;
}
.logo-title span{
  color:#8fce5c;
  -webkit-text-stroke:1.5px #05060a;
  text-shadow:0 0 10px rgba(104,152,64,1), 0 0 30px rgba(104,152,64,.7);
}

@keyframes glowPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.25); }
}

.subtitle{
  margin-top:2px;
  color:#dfe6ef;
  font-size:.85rem;
  letter-spacing:1px;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}

/* --- roster --- */
.roster{
  position:relative; z-index:1;
  display:flex;
  gap:1.6vw;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:stretch;
  width:100%;
  max-width:1700px;
  padding:0 1.5vw;
}

.card{
  --accent:#7fd8ff;
  --delay:0s;
  width:22vw;
  min-width:150px;
  max-width:380px;
  height:42vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.6vh 6px 1.6vh;
  position:relative;
  overflow:visible;
  opacity:0;
  transform:translateY(70px) scale(.9);
  animation:cardIn .7s cubic-bezier(.2,.9,.3,1.3) forwards;
  animation-delay:var(--delay);
  transition:box-shadow .4s ease;
}
@keyframes cardIn{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* diagonal color stripe behind each car */
.stripe{
  position:absolute;
  overflow:hidden;
  top:-16%; bottom:-16%;
  left:50%;
  width:78%;
  transform-origin:50% 83%;
  transform:translateX(-50%) skewX(-10deg);
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, black));
  opacity:.92;
  z-index:0;
  box-shadow:0 0 60px -6px var(--accent);
  animation:stripePulse 2.4s ease-in-out infinite;
  animation-delay:var(--delay);
  /* fade only the top and bottom tips into the background, keep the rest crisp */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
@keyframes stripePulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.18); }
}

/* Keep the moving highlight inside its own stripe, including its idle pause. */
.shine{
  position:absolute;
  top:0; bottom:0;
  left:-30%;
  width:24%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:shineMove 7s linear infinite;
  animation-delay:var(--delay);
  opacity:0;
  pointer-events:none;
}
@keyframes shineMove{
  0%{ transform:translateX(0); opacity:0; }
  1%,29%{ opacity:1; }
  30%,100%{ transform:translateX(600%); opacity:0; }
}

.card-frame{
  width:100%;
  height:32vh;
  min-height:220px;
  flex:0 0 32vh;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.4vh;
  position:relative;
  z-index:1;
}

.card-frame img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.65));
  animation:idleFloat 3.4s ease-in-out infinite;
  animation-delay:var(--delay);
}
.card-frame img.flip{ transform:scaleX(-1); }

@keyframes idleFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(-2deg); }
}
.card-frame img.flip{ animation-name:idleFloatFlip; }
@keyframes idleFloatFlip{
  0%,100%{ transform:scaleX(-1) translateY(0) rotate(0deg); }
  50%{ transform:scaleX(-1) translateY(-14px) rotate(2deg); }
}

.car-name{
  position:relative; z-index:1;
  width:100%;
  min-height:1.3em;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:clamp(.75rem, 1.4vw, 1.1rem);
  letter-spacing:1px;
  color:#fff;
  text-shadow:
    2px 2px 0 #05060a, -2px -2px 0 #05060a,
    2px -2px 0 #05060a, -2px 2px 0 #05060a,
    0 0 18px var(--accent);
}

/* lifted state: figure detected on RFID */
.card.lifted{
  box-shadow:0 0 0 3px var(--accent), 0 0 60px var(--accent);
}
.card.lifted .card-frame img{
  animation:liftUp .5s ease forwards;
}
@keyframes liftUp{
  0%{ transform:translateY(0) scale(1); }
  100%{ transform:translateY(-30px) scale(1.15) rotate(3deg); }
}
.card.lifted .card-frame img.flip{ animation-name:liftUpFlip; }
@keyframes liftUpFlip{
  0%{ transform:scaleX(-1) translateY(0) scale(1); }
  100%{ transform:scaleX(-1) translateY(-30px) scale(1.15) rotate(-3deg); }
}

.selected-tag{
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  background:#fff;
  color:#05060a;
  font-size:.6rem;
  letter-spacing:1px;
  padding:6px 12px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  white-space:nowrap;
  z-index:2;
}
.card.lifted .selected-tag{ opacity:1; animation:tagPop .25s ease; }
@keyframes tagPop{ from{ transform:translateX(-50%) scale(.7); } to{ transform:translateX(-50%) scale(1); } }

/* dim the other cards once one is lifted */
.roster.locked .card:not(.lifted){
  opacity:.2;
  filter:saturate(.3);
}

/* --- header branding and pedestal guidance --- */
.brand-logo{
  height:3.5vh;
  min-height:20px;
  max-height:36px;
  width:auto;
  aspect-ratio:4 / 1;
  opacity:.95;
}
.hint{
  position:fixed;
  left:50%; bottom:2.5vh;
  transform:translateX(-50%);
  z-index:3;
  width:100%;
  max-width:1700px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5vh;
  text-align:center;
}
.hint .subtitle{
  margin:0;
  padding:0 16px;
  font-size:clamp(.85rem, 2vw, 1.55rem);
  line-height:1.7;
}
.pedestal-arrows{
  display:flex;
  justify-content:center;
  gap:1.6vw;
  width:100%;
  padding:0 1.5vw;
}
.pedestal-arrow{
  width:22vw;
  min-width:150px;
  max-width:380px;
  display:flex;
  justify-content:center;
}
.pedestal-arrow svg{
  display:block;
  width:clamp(22px, 2.2vw, 32px);
  height:clamp(30px, 4.5vh, 46px);
  fill:none;
  stroke:#8fce5c;
  stroke-width:4;
  stroke-linecap:square;
  stroke-linejoin:miter;
  filter:drop-shadow(0 0 8px rgba(143,206,92,.65));
}

/* --- launch overlay (auto, triggered by RFID lift) --- */
.launch-overlay{
  position:fixed; inset:0;
  background:rgba(2,3,6,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.launch-overlay.show{ opacity:1; pointer-events:auto; }

.launch-box{
  text-align:center;
  padding:40px;
  border-radius:18px;
  max-width:420px;
  width:90%;
  animation:pop .2s ease;
}
@keyframes pop{ from{ transform:scale(.85); opacity:0;} to{ transform:scale(1); opacity:1;} }

.launch-box img{
  max-width:100%;
  max-height:220px;
  object-fit:contain;
  margin-bottom:20px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));
}

.launch-box h2{
  font-size:1.4rem;
  letter-spacing:1px;
  color:#fff;
  text-shadow:
    3px 3px 0 #05060a, -3px -3px 0 #05060a,
    3px -3px 0 #05060a, -3px 3px 0 #05060a,
    0 0 30px var(--accent, #7fd8ff);
}

.launch-bar{
  margin-top:22px;
  width:100%;
  height:6px;
  border-radius:4px;
  background:#1c2333;
  overflow:hidden;
}
.launch-bar-fill{
  height:100%;
  width:0%;
  background:var(--accent, #7fd8ff);
  box-shadow:0 0 10px var(--accent, #7fd8ff);
  transition:width .4s linear;
}

@media (max-width:640px){
  .roster{ gap:1.2vw; padding:0 1vw; }
  .card{ min-width:80px; height:25vh; }
  .card-frame{ height:18vh; min-height:90px; }
  .pedestal-arrows{ gap:1.2vw; padding:0 1vw; }
  .pedestal-arrow{ min-width:80px; }
}