/* ============================================================
   Bloodstream Run — platformer shell
   ============================================================ */

.advbody {
  overflow: hidden;
}
.stage {
  width: min(1100px, 100% - 1.6rem);
  margin-inline: auto;
  padding: 0.9rem 0 1rem;
}

/* ---------- HUD -------------------------------------------- */
.ahud {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-1);
  background: linear-gradient(160deg, var(--surface-1), var(--surface-0));
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}
.ahud__group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ahud__icon {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.7));
}
.ahud__label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.ahud__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}
.ahud__group--score .ahud__value {
  font-size: 1.4rem;
  color: var(--blood-300);
}
.ahud .heart {
  width: 20px;
  height: 20px;
}

/* ---------- canvas viewport -------------------------------- */
.viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--stroke-2);
  background: #12030a;
  box-shadow: var(--sh-lg), 0 0 90px -30px rgba(210, 30, 60, 0.7);
}
#game {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
}
/* soft vignette + top sheen so the canvas sits inside the page */
.viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07), transparent 12%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4, 1, 3, 0.6));
}

/* floating "press E" prompt above the player */
.prompt {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -100%);
  padding: 0.34rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(52, 233, 176, 0.6);
  background: rgba(8, 30, 24, 0.9);
  color: var(--mint-400);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  animation: floatY 1.6s var(--e-in-out) infinite;
  box-shadow: 0 0 22px -4px var(--mint-glow);
}
.prompt[hidden] {
  display: none;
}
.prompt .kbd {
  margin-inline-start: 0.35rem;
}

/* transient message line (hurt, gate open, …) */
.toastline {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: 12%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  pointer-events: none;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.8);
  animation: lineIn 0.4s var(--e-spring) both;
}
.toastline[hidden] {
  display: none;
}
.toastline--good {
  color: var(--mint-400);
}
.toastline--bad {
  color: var(--blood-300);
}
@keyframes lineIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- overlays --------------------------------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(8, 2, 5, 0.78);
  backdrop-filter: blur(9px);
  animation: fadeIn var(--t-med) var(--e-out) both;
}
.overlay[hidden] {
  display: none;
}
.overlay__box {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: clamp(1.1rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke-2);
  background: linear-gradient(160deg, rgba(46, 14, 24, 0.96), rgba(18, 6, 11, 0.96));
  box-shadow: var(--sh-lg);
  animation: popIn 0.5s var(--e-spring) both;
}
.overlay__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--stroke-1);
  font-size: 2.6rem;
}
.overlay__box h1 {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
}
.overlay__rules {
  max-width: 46ch;
  font-size: 0.94rem;
}
.overlay__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

.controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1rem;
  width: 100%;
  margin: 0.3rem 0 0.5rem;
}
.controls li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--stroke-1);
}
.keys {
  display: flex;
  gap: 0.22rem;
  flex: none;
}
.keys .kbd {
  font-style: normal;
}
.controls__t {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-200);
  text-align: start;
}

.endstats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.3rem 0;
}
.endsave {
  display: flex;
  gap: 0.5rem;
  width: min(430px, 100%);
  margin-top: 0.4rem;
}
.endsave[hidden] {
  display: none;
}
.endsave .input {
  flex: 1;
  min-width: 0;
}
.endsave .btn {
  flex: none;
}

/* ---------- station question modal -------------------------- */
.qmodal {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: clamp(0.6rem, 2vw, 1.4rem);
  background: rgba(6, 2, 4, 0.66);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.22s var(--e-out) both;
}
.qmodal[hidden] {
  display: none;
}
.qmodal__box {
  width: min(720px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(0.9rem, 2.4vw, 1.5rem);
  border-radius: var(--r-lg);
  border: 1px solid rgba(52, 233, 176, 0.4);
  background: linear-gradient(160deg, rgba(20, 34, 32, 0.97), rgba(14, 8, 12, 0.97));
  box-shadow: var(--sh-lg), 0 0 70px -20px var(--mint-glow);
  animation: popIn 0.45s var(--e-spring) both;
}
.qmodal__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.chip--station {
  border-color: rgba(52, 233, 176, 0.55);
  background: rgba(31, 211, 156, 0.16);
  color: var(--mint-400);
}
.qtimer {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
}
.qtimer .ring__num {
  font-size: 1rem;
}
.qtimer.is-danger {
  animation: tickPulse 0.9s var(--e-in-out) infinite;
}
.qtimer.is-danger .ring__fg {
  stroke: var(--blood-400);
}
@keyframes tickPulse {
  50% {
    transform: scale(1.09);
  }
}
.ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.ring__bg,
.ring__fg {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.ring__bg {
  stroke: rgba(255, 255, 255, 0.09);
}
.ring__fg {
  stroke: var(--mint-400);
  stroke-dasharray: 169.65;
  filter: drop-shadow(0 0 6px var(--mint-glow));
}
.ring__num {
  font-family: var(--font-display);
  font-weight: 800;
  z-index: 1;
}

.qmodal__prompt {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* answer options (shared look with the quiz game) */
.opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: rgba(0, 0, 0, 0.34);
  text-align: start;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.32;
  overflow: hidden;
  transition: transform var(--t-fast) var(--e-spring), border-color var(--t-med) var(--e-out),
    background var(--t-med) var(--e-out), box-shadow var(--t-med) var(--e-out), opacity var(--t-med) linear;
}
.opt:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(52, 233, 176, 0.55);
  background: rgba(31, 211, 156, 0.12);
}
.opt__key {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--stroke-2);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-200);
}
.opt__text {
  flex: 1;
  min-width: 0;
}
.opt__mark {
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--t-med) var(--e-out), transform var(--t-med) var(--e-spring);
}
.opt.is-right {
  border-color: rgba(52, 233, 176, 0.75);
  background: rgba(31, 211, 156, 0.2);
  box-shadow: var(--glow-mint);
}
.opt.is-right .opt__key {
  background: var(--mint-400);
  color: #04231b;
}
.opt.is-wrong {
  border-color: rgba(240, 73, 106, 0.75);
  background: rgba(210, 30, 60, 0.22);
  box-shadow: var(--glow-blood);
}
.opt.is-wrong .opt__key {
  background: var(--blood-500);
  color: #fff;
}
.opt.is-right .opt__mark,
.opt.is-wrong .opt__mark {
  opacity: 1;
  transform: none;
}
.opt.is-dimmed {
  opacity: 0.34;
}

.qmodal__fb {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: rgba(0, 0, 0, 0.38);
  animation: fbIn 0.4s var(--e-spring) both;
}
.qmodal__fb[hidden] {
  display: none;
}
@keyframes fbIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.qmodal__fb--right {
  border-color: rgba(52, 233, 176, 0.5);
}
.qmodal__fb--wrong {
  border-color: rgba(240, 73, 106, 0.5);
}
.qmodal__fbicon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
}
.qmodal__fb--right .qmodal__fbicon {
  background: var(--mint-400);
  color: #04231b;
}
.qmodal__fb--wrong .qmodal__fbicon {
  background: var(--blood-500);
  color: #fff;
}
.qmodal__fb strong {
  display: block;
  font-size: 1rem;
}

/* ---------- touch controls --------------------------------- */
.touch {
  display: none;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.touch__btn {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-2);
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cream);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.touch__btn:active {
  background: rgba(210, 30, 60, 0.3);
  transform: scale(0.94);
}
.touch__btn--jump {
  background: rgba(210, 30, 60, 0.24);
}
@media (hover: none) and (pointer: coarse) {
  .touch {
    display: flex;
  }
}

.stage__keys {
  margin-top: 0.6rem;
  text-align: center;
}

/* ---------- responsive ------------------------------------- */
@media (max-width: 700px) {
  .opts {
    grid-template-columns: 1fr;
  }
  .controls {
    grid-template-columns: 1fr;
  }
  .ahud {
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
  }
  .ahud__label {
    display: none;
  }
  .stage__keys {
    display: none;
  }
}