/* HIT THE PAD (Roadmap / Step 1)
   - Lives INSIDE the Roadmap "screen" (the SOLPAD Everywhere - launch window)
   - Swap target images:
       img/game/beep.png
       img/game/fake.png
*/

.display-roadmap__item.game-host{
  position: relative;
  /* keep existing layout from main CSS; we only need positioning context */
}

/* IMPORTANT:
   The main site CSS has: .display-roadmap__item div{width:50%}
   That would squeeze our game to the left half.
   Override it for the game container and its internal divs.
*/
.display-roadmap__item.game-host .solpad-game,
.display-roadmap__item.game-host .solpad-game div{
  width: 100% !important;
}


/* Hide the title text while the game overlay is visible */
.display-roadmap__item.game-host.game-active > h3{
  opacity: 0;
  pointer-events: none;
}

.solpad-game{
  --accent: #00ffa8; /* override via :root if you have a brand token */
  position: absolute;
  transform: translate(-8px)
  inset: clamp(12px, 2vw, 22px);
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  display: none; /* shown on Step 1 */
}

/* Subtle CRT layer — only inside the screen */
.solpad-game::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    rgba(255,255,255,0.00) 2px,
    rgba(255,255,255,0.00) 6px
  );
  opacity: .35;
  pointer-events:none;
  z-index: 1;
}
.solpad-game::after{
  content:"";
  position:absolute;
  inset:-20%;
  background-image: radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .10;
  transform: rotate(6deg);
  pointer-events:none;
  z-index: 1;
}

.solpad-game__hud{
  position:absolute;
  left: 0;
  right: 16px;
  top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  z-index: 3;
  pointer-events:none;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
}

.solpad-game__hud > div{
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

.solpad-game__arena{
  position:absolute;
  inset:0;
  z-index: 2;
}

/* Targets */
.solpad-target{
  position:absolute;
  width: 72px;
  height: 72px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
  touch-action: manipulation;
}

.solpad-target::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  opacity: .0;
  transition: opacity .12s ease;
}

.solpad-target.is-real::before{
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: .9;
}

.solpad-target.is-fake::before{
  background: rgba(255, 70, 90, .25);
  opacity: .9;
}

.solpad-target img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  transform: scale(1);
  transition: transform .10s ease;
  z-index: 1;
}

.solpad-target:active img{
  transform: scale(.96);
}

/* Overlay (start/end) */
.solpad-game__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 4;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}

.solpad-game__panel{
  width: min(420px, calc(100% - 18px));
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.12);
}

.solpad-game__title{
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.85);
}

.solpad-game__hint{
  margin: 0 0 10px 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(0,0,0,.70);
}

.solpad-game__btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.80);
  color: rgba(0,0,0,.85);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor:pointer;
}

/* Shake */
.solpad-game.is-shake{
  animation: solpad-shake .14s linear 0s 2;
}
@keyframes solpad-shake{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(2px,-1px); }
  50%{ transform: translate(-2px,1px); }
  75%{ transform: translate(2px,1px); }
  100%{ transform: translate(0,0); }
}