:root { color-scheme: dark; font-family: Inter, ui-rounded, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #06111d; }
body { display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #18314a, #050b12 70%); }
#game-shell { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; display: grid; place-items: center; }
#game { width: 100%; height: 100%; display: block; background: #10283b; box-shadow: 0 24px 80px #000a; image-rendering: auto; }
#game-shell:fullscreen { width: 100vw; height: 100vh; background: #000; }

/* ---- Boot intro (MyNFTool logo video) ---- */
#boot-intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}
#boot-intro video { width: 100%; height: 100%; object-fit: contain; }
#boot-intro .boot-intro__hint {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  margin: 0;
  color: #ffffff66;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.12em;
  animation: boot-intro-hint 0.4s ease 2s backwards;
}
@keyframes boot-intro-hint { from { opacity: 0; } to { opacity: 1; } }
#boot-intro.boot-intro--out { opacity: 0; pointer-events: none; }

/* ---- Touch controls (mobile) ---- */
.touch-controls { display: none; }

body.touch-enabled {
  --controls-space: 300px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body.touch-enabled {
  padding-bottom: var(--controls-space);
}

body.touch-enabled #game-shell {
  width: min(100vw, calc((100vh - var(--controls-space)) * 16 / 9));
}

body.touch-enabled .touch-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 10px 12px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
  z-index: 10;
  pointer-events: none;
}

.touch-pad { pointer-events: auto; }

.touch-pad--stick {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  place-items: center;
}

.touch-stick {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 2px solid #6be8f24d;
  background:
    radial-gradient(circle at 50% 50%, #14374d99 0%, #0a1c2bcc 62%, #08161fdd 100%);
  box-shadow: 0 8px 22px #0009, inset 0 0 22px #0b2a3a80;
  touch-action: none;
  backdrop-filter: blur(3px);
}

/* faint crosshair so the neutral centre is readable at a glance */
.touch-stick::before,
.touch-stick::after {
  content: '';
  position: absolute;
  background: #6be8f224;
}
.touch-stick::before { left: 12%; right: 12%; top: 50%; height: 2px; transform: translateY(-50%); }
.touch-stick::after { top: 12%; bottom: 12%; left: 50%; width: 2px; transform: translateX(-50%); }

.touch-stick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #9df4ffb0;
  background: linear-gradient(#1d4f6fee, #0f3247ee);
  box-shadow: 0 4px 14px #000a, inset 0 2px 6px #ffffff1f;
  pointer-events: none;
  transition: background 80ms ease;
}

.touch-stick.is-active { border-color: #9df4ff8a; }
.touch-stick.is-active .touch-stick__knob { background: linear-gradient(#2b6f97f2, #164863f2); }

.touch-pad--actions {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  grid-template-areas: '. jump' 'attack .';
  gap: 12px;
  justify-self: end;
}

.touch-pad--system {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.touch-button {
  appearance: none;
  border: 2px solid #6be8f26b;
  background: linear-gradient(#123044e0, #0a1c2be0);
  color: #dff8ff;
  font: 900 20px/1 Inter, system-ui, sans-serif;
  border-radius: 18px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  touch-action: none;
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px #0009;
  transition: transform 60ms ease, background 60ms ease, border-color 60ms ease;
}

.touch-button:active {
  transform: scale(0.93);
  background: linear-gradient(#1d4f6ff0, #103146f0);
  border-color: #9df4ff;
}

.touch-button--attack {
  grid-area: attack;
  width: 86px;
  height: 86px;
  border-color: #ff9a6b8c;
  background: linear-gradient(#5a2033e0, #34131fe0);
  color: #ffd9c6;
  font-size: 30px;
}
.touch-button--attack:active { background: linear-gradient(#9b3550f0, #58202ff0); border-color: #ffb694; }

.touch-button--jump {
  grid-area: jump;
  width: 86px;
  height: 86px;
  border-color: #7bffb18c;
  background: linear-gradient(#14472ee0, #0b2a1ce0);
  color: #d6ffe6;
  font-size: 30px;
}
.touch-button--jump:active { background: linear-gradient(#227d4ff0, #124a2ff0); border-color: #a5ffc8; }

.touch-button--block {
  background: linear-gradient(#2a5d9bf0, #17365ef0);
  border: 2px solid #7db9ff;
  color: #eaf4ff;
}
.touch-button--block:active { background: linear-gradient(#3a76c2f0, #204a80f0); border-color: #b9dcff; }

.touch-button--start,
.touch-button--restart,
.touch-button--fullscreen {
  width: auto;
  min-width: 62px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.82;
}

@media (max-width: 560px), (max-height: 460px) {
  .touch-pad--actions { gap: 8px; }
  .touch-stick { width: 124px; height: 124px; }
  .touch-stick__knob { width: 58px; height: 58px; }
  .touch-button { width: 54px; height: 54px; border-radius: 15px; font-size: 16px; }
  .touch-button--attack, .touch-button--jump, .touch-button--block { width: 66px; height: 66px; font-size: 24px; }
  .touch-button--start, .touch-button--restart, .touch-button--fullscreen {
    min-width: 52px; height: 34px; padding: 0 10px; font-size: 11px;
  }
}

@media (orientation: landscape) {
  body.touch-enabled { --controls-space: 0px; }
  body.touch-enabled .touch-controls { bottom: max(8px, env(safe-area-inset-bottom)); }
  body.touch-enabled { padding-bottom: 0; }
  /* keep the utility row out of the play area: park it at the bottom centre */
  body.touch-enabled .touch-pad--system {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    opacity: 0.7;
  }
  body.touch-enabled .touch-button { opacity: 0.88; }
  body.touch-enabled .touch-button:active { opacity: 1; }
}

/* ---- Rotate hint (touch, portrait only) ---- */
#rotate-hint { display: none; }

body.touch-enabled #rotate-hint {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #6be8f24d;
  background: #06111de6;
  color: #cdeff7;
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
  text-align: center;
  max-width: min(92vw, 420px);
  z-index: 20;
  pointer-events: none;          /* never blocks play */
  backdrop-filter: blur(3px);
}

@media (orientation: portrait) {
  body.touch-enabled #rotate-hint { display: block; }
}


/* pause button rides the top-right safe area during play */
.touch-button--pause {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  min-width: 52px;
  min-height: 52px;
  font-size: 18px;
  background: linear-gradient(#20415af0, #122636f0);
  border-color: #9fd9e8;
}

/* translucent pause menu; only visible while the game is paused */
.touch-pause-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(3, 11, 19, 0.55);
  pointer-events: auto;
}

body.game-paused .touch-pause-menu { display: flex; }

.touch-pause-menu__title {
  color: #f4fbff;
  font: 900 44px system-ui;
  letter-spacing: 4px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}

.touch-pause-menu .touch-button {
  min-width: 220px;
  min-height: 58px;
  font-size: 20px;
}

.touch-pause-menu__pause {
  background: linear-gradient(#1c5a44f0, #0d3327f0);
  border-color: #8fffc9;
}

.touch-pause-menu__quit {
  background: linear-gradient(#5a2030f0, #331019f0);
  border-color: #ff8f9d;
}