/* Castelo Encantado: palco e botões de toque.
   Retrato: os botões ficam numa faixa embaixo do jogo (o chão da fase termina
   acima deles). Deitado: ficam por cima, nos cantos, meio transparentes. */

.game-stage--castle { background: #070418; touch-action: none; }

.castle-pad {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: none; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 10px max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  pointer-events: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.has-castle-pad .castle-pad { display: flex; }

.castle-pad__dpad {
  position: relative; width: 148px; height: 112px; flex: 0 0 auto;
  border-radius: 28px; pointer-events: auto; touch-action: none;
  background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.castle-pad__arrow {
  position: absolute; display: grid; place-items: center;
  color: rgba(255, 255, 255, .85); font: 700 1.5rem/1 var(--font-display, system-ui);
  border-radius: 18px; transition: background .08s, transform .08s;
  pointer-events: none;
}
.castle-pad__arrow.is-left { left: 6px; top: 6px; width: 62px; height: 70px; }
.castle-pad__arrow.is-right { right: 6px; top: 6px; width: 62px; height: 70px; }
.castle-pad__arrow.is-down { left: 50%; bottom: 4px; width: 44px; height: 28px; margin-left: -22px; font-size: .9rem; opacity: .7; }
.castle-pad__arrow.is-on { background: rgba(255, 255, 255, .28); transform: scale(.94); }

.castle-pad__actions {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 10px;
  align-items: end; pointer-events: none;
}
.castle-pad__btn {
  pointer-events: auto; touch-action: none;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .35); border-radius: 50%;
  color: #fff; font: 700 .82rem/1 var(--font-display, system-ui); letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
  transition: transform .06s, box-shadow .06s, filter .06s;
  -webkit-tap-highlight-color: transparent;
}
.castle-pad__btn.is-on { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .2); filter: brightness(1.15); }
.castle-pad__btn.is-jump { width: 74px; height: 74px; background: linear-gradient(160deg, #34d399, #059669); grid-column: 2; grid-row: 2; }
.castle-pad__btn.is-shoot { width: 74px; height: 74px; background: linear-gradient(160deg, #fbbf24, #ea580c); grid-column: 1; grid-row: 2; }
.castle-pad__btn.is-dash { width: 64px; height: 64px; background: linear-gradient(160deg, #60a5fa, #4338ca); grid-column: 2; grid-row: 1; justify-self: center; font-size: .72rem; }
.castle-pad__btn[hidden] { display: none; }
.castle-pad__btn.is-weapon { width: 46px; height: 46px; background: rgba(15, 12, 40, .7); grid-column: 1; grid-row: 1; justify-self: center; font-size: 1.25rem; }

/* Deitado: os botões ficam por cima do jogo, mais discretos. */
@media (orientation: landscape) {
  .castle-pad { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .castle-pad__dpad { width: 136px; height: 96px; background: rgba(255, 255, 255, .06); }
  .castle-pad__arrow.is-left, .castle-pad__arrow.is-right { width: 56px; height: 60px; }
  .castle-pad__btn { opacity: .82; }
  .castle-pad__btn.is-jump, .castle-pad__btn.is-shoot { width: 64px; height: 64px; }
}

/* A bandeja de poderes (⚡🔥❄️💥) do canto de cima. */
.game-stage--castle .castle-powers { z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .castle-pad__btn, .castle-pad__arrow { transition: none; }
}

/* Tutorial de cada poder: janela com a animação do poder e os controles.
   Fecha pelo botão, pelo ✕ ou clicando fora — e o jogo volta na hora. */
.castle-tutorial {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 14px;
  background: rgba(6, 4, 20, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: castle-tutorial-in .22s ease-out;
}
.castle-tutorial__card {
  position: relative; width: min(100%, 360px); max-height: 100%; overflow: auto;
  padding: 16px 16px 14px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(49, 46, 129, .96), rgba(30, 27, 75, .97));
  border: 2px solid rgba(196, 181, 253, .55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  color: #fff; text-align: center;
  animation: castle-tutorial-pop .32s cubic-bezier(.2, 1.4, .4, 1);
}
.castle-tutorial__x {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1rem; cursor: pointer;
}
.castle-tutorial__kicker { margin: 0; font: 700 .7rem/1.2 var(--font-display, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.castle-tutorial__title { margin: 2px 0 8px; font: 700 1.35rem/1.15 var(--font-display, system-ui); }
.castle-tutorial__demo { display: block; width: 100%; aspect-ratio: 300 / 140; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); }
.castle-tutorial__text { margin: 10px 0 8px; font: 600 .86rem/1.35 var(--font-display, system-ui); color: rgba(255, 255, 255, .9); }
.castle-tutorial__controls { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; text-align: left; }
.castle-tutorial__controls li {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .08);
  font: 500 .8rem/1.3 var(--font-display, system-ui);
}
.castle-tutorial__controls b { color: #fde68a; margin-right: 4px; }
.castle-tutorial__how { font-size: 1.1rem; text-align: center; }
.castle-tutorial__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.castle-tutorial__nav[hidden] { display: none; }
.castle-tutorial__nav button { width: 36px; height: 32px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.castle-tutorial__dots { letter-spacing: 3px; font-size: .7rem; color: #c4b5fd; }
.castle-tutorial__ok {
  width: 100%; padding: 12px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(160deg, #34d399, #059669); color: #fff;
  font: 700 1rem/1 var(--font-display, system-ui); box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.castle-tutorial__ok:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }

/* Botão "?" para rever os tutoriais. */
.castle-help {
  position: absolute; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); background: rgba(8, 10, 30, .65); color: #fff;
  font: 700 1rem/1 var(--font-display, system-ui); cursor: pointer;
}

@keyframes castle-tutorial-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes castle-tutorial-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .castle-tutorial, .castle-tutorial__card { animation: none; }
}