/* SKY SLASH - page shell + designed desktop letterbox. Owner: director. */
:root {
  --bg: #0c1021;
  --bg2: #1b1440;
  --ink: #16132b;
  --cream: #fff4e0;
  --crimson: #de2c3c;
  --gold: #ffc93c;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--cream);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: none;
}
body {
  /* designed backdrop: dusk gradient + seigaiha wave pattern, only visible around the portrait game on wide screens */
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(222,44,60,.28), transparent 70%),
    radial-gradient(circle at 0 100%, transparent 18px, rgba(255,244,224,.035) 19px, rgba(255,244,224,.035) 22px, transparent 23px) 0 0 / 48px 24px,
    radial-gradient(circle at 24px 100%, transparent 18px, rgba(255,244,224,.035) 19px, rgba(255,244,224,.035) 22px, transparent 23px) 0 12px / 48px 24px,
    linear-gradient(180deg, #0a0d1d 0%, #1b1440 55%, #3a1a3f 100%);
  font-family: 'Fredoka', system-ui, sans-serif;
}
#backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#backdrop .bd-sun {
  position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,201,60,.16) 0%, rgba(222,44,60,.08) 35%, transparent 65%);
}
#backdrop .bd-title {
  position: absolute; left: 3vw; bottom: 6vh; font-family: 'Dela Gothic One', Impact, sans-serif;
  font-size: clamp(28px, 5vw, 84px); line-height: .9; color: rgba(255,244,224,.08); letter-spacing: .02em;
  max-width: calc(50vw - 300px);
}
#backdrop .bd-kana { display: block; font-size: .35em; color: rgba(222,44,60,.35); letter-spacing: .3em; margin-bottom: .3em; }
/* the shipped AI logo (local file, no CDN) replaces the text title on wide screens; the text stays as an invisible fallback */
#backdrop .bd-title { width: min(calc(50vw - 300px), 440px); aspect-ratio: 640 / 300; font-size: 0; color: transparent;
  background: url(../img/ui/logo.webp) left bottom / contain no-repeat; opacity: .32; }
#backdrop .bd-hint {
  position: absolute; right: 3vw; bottom: 6vh; font-size: 14px; color: rgba(255,244,224,.35);
  max-width: calc(50vw - 300px); text-align: right;
}
@media (max-aspect-ratio: 4/5) { #backdrop .bd-title, #backdrop .bd-hint { display: none; } }
/* Phaser Scale.FIT + CENTER_BOTH positions the canvas inside #game; no extra centering here. */
#game { position: fixed; inset: 0; z-index: 1; }
#game canvas {
  display: block; touch-action: none; outline: none;
  box-shadow: 0 0 0 1px rgba(255,244,224,.06), 0 30px 80px rgba(0,0,0,.55), 0 0 120px rgba(222,44,60,.18);
}
/* DOM overlays (mock ads etc.) live here, above the canvas. */
#overlay-root { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#overlay-root > * { pointer-events: auto; }