html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

main {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

main > *,
header > div,
footer > span {
  min-width: 0;
  max-width: 100%;
}

footer > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) and (orientation: portrait) {
  footer > span {
    max-width: calc(100vw - 8.6rem);
    font-size: 0;
  }

  footer > span::before {
    content: "MÓVIL: STICK + FUEGO + DASH";
    font-size: 0.52rem;
  }

  .touch-controls {
    max-width: 100%;
  }
}


/* manual-aim-controls-v12 */
.right-controls {
  display: flex;
  align-items: end;
  gap: 0.7rem;
  pointer-events: auto;
}
.right-controls .dash {
  display: grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #7c3aed;
  color: #fde047;
  font-size: 1.45rem;
  font-weight: 1000;
  box-shadow: 0 6px 0 #111, 0 0 25px #a78bfa;
  touch-action: none;
}
.right-controls .dash:active {
  translate: 0 5px;
  box-shadow: 0 1px 0 #111, 0 0 35px #a78bfa;
}
.aim-stick {
  border-color: #f0abfc;
  background: rgba(46, 16, 101, 0.72);
  box-shadow: inset 0 0 25px rgba(236, 72, 153, 0.24), 0 0 18px rgba(236, 72, 153, 0.25);
}
.aim-stick i {
  background: rgba(219, 39, 119, 0.76);
  box-shadow: 0 0 25px #f472b6;
}
.aim-stick span { white-space: nowrap; }
@media (max-width: 760px) {
  .touch-controls { gap: 0.5rem; }
  .right-controls { gap: 0.45rem; }
  .right-controls .dash { width: 3.9rem; height: 3.9rem; font-size: 1.15rem; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .right-controls .dash { width: 3.45rem; height: 3.45rem; }
  .aim-stick { width: 6.45rem; height: 6.45rem; }
  .aim-stick i { width: 2.75rem; height: 2.75rem; left: 1.78rem; top: 1.78rem; }
}


/* compact-mobile-header-v12 */
@media (max-width: 560px) {
  main { grid-template-rows: 3.25rem minmax(0, 1fr) 2.1rem; }
  main > header { gap: 0.42rem; padding-inline: 0.65rem; }
  header a { flex: 0 0 auto; font-size: 0.72rem; }
  header div { min-width: 0; gap: 0.3rem; overflow: hidden; }
  header div b { display: none; }
  header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; letter-spacing: 0.025em; }
  header button { flex: 0 0 auto; min-width: 2.25rem; padding: 0.35rem 0.5rem; }
  .top-hud { max-width: calc(100% - 1.2rem); gap: 0.38rem; padding: 0.38rem 0.5rem; }
  .top-hud meter { width: 4.25rem; }
}

/* explicit-fire-control-v13 */
.right-controls .shoot { display:grid; place-items:center; width:4.75rem; height:4.75rem; border:3px solid #fff; border-radius:50%; background:#c026d3; color:#fff; box-shadow:0 6px 0 #111,0 0 25px #f472b6; touch-action:none; font-size:1.35rem; font-weight:950; }
.right-controls .shoot span { display:block; font-size:.52rem; letter-spacing:.06em; }
.right-controls .shoot:active { translate:0 5px; box-shadow:0 1px 0 #111,0 0 35px #f472b6; }
@media (max-width:760px) { .right-controls .shoot { width:3.9rem; height:3.9rem; } }
@media (max-width:560px) and (orientation:portrait) { .right-controls .shoot { width:3.45rem; height:3.45rem; } }

/* alternate-castle-route */
.castle-alternative { border:1px solid #c4b5fd; background:#2e1065; color:#f5f3ff; padding:.52rem .7rem; text-decoration:none; font-size:.68rem; font-weight:900; letter-spacing:.055em; box-shadow:0 0 16px rgba(167,139,250,.3); }
.castle-alternative:hover,.castle-alternative:focus-visible { background:#5b21b6; color:#fff; }
@media (max-width:760px) { .castle-alternative { display:none; } }