[hidden] { display: none !important; }

/* ── pixel rendering ── */
* { image-rendering: pixelated; box-sizing: border-box; }

:root {
  --sky-top:      #5bb8f5;
  --sky-bottom:   #a8dff7;
  --ground:       #6abf3c;
  --ground-dark:  #4a9a20;
  --panel-bg:     #ffffff;
  --panel-border: #222222;
  --panel-shadow: #555555;
  --text-dark:    #222222;
  --text-white:   #ffffff;
  --btn-green:    #5cbf3e;
  --btn-green-d:  #3a9a20;
  --btn-orange:   #f07820;
  --btn-orange-d: #c05010;
  --btn-red:      #e03020;
  --btn-red-d:    #a01808;
  --btn-blue:     #3888e0;
  --btn-blue-d:   #1a60b0;
  --cloud-white:  #f0f8ff;
  --pixel:        4px;
}

/* ── reset ── */
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Press Start 2P', monospace;
  background: var(--sky-top);
}

/* ══════════════════════════════════
   TITLE SCREEN — sky + ground split
══════════════════════════════════ */
#title-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(env(safe-area-inset-top) + 8px)
           calc(env(safe-area-inset-right) + 12px)
           calc(env(safe-area-inset-bottom) + 8px)
           calc(env(safe-area-inset-left) + 12px);
  z-index: 5;
  /* sky gradient */
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-bottom) 62%,
    var(--ground) 62%,
    var(--ground-dark) 100%);
}

/* ── animated clouds ── */
.sky-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.cloud {
  position: absolute;
  background: var(--cloud-white);
  border-radius: 0;
  /* pixel-cloud shape via box-shadow */
}
/* cloud-1 */
.cloud-1 {
  width: 48px; height: 16px;
  top: 18%;
  box-shadow:
    4px -8px 0 var(--cloud-white),
    8px -8px 0 var(--cloud-white),
    12px -8px 0 var(--cloud-white),
    16px -12px 0 var(--cloud-white),
    20px -12px 0 var(--cloud-white),
    24px -8px 0 var(--cloud-white),
    28px -8px 0 var(--cloud-white),
    32px -8px 0 var(--cloud-white),
    -4px 0px 0 var(--cloud-white),
    52px 0px 0 var(--cloud-white);
  animation: cloud-scroll 18s linear infinite;
}
/* cloud-2 */
.cloud-2 {
  width: 32px; height: 12px;
  top: 10%;
  box-shadow:
    4px -8px 0 var(--cloud-white),
    8px -8px 0 var(--cloud-white),
    12px -4px 0 var(--cloud-white),
    20px -4px 0 var(--cloud-white),
    -4px 0px 0 var(--cloud-white),
    36px 0px 0 var(--cloud-white);
  animation: cloud-scroll 28s linear infinite;
  animation-delay: -10s;
}
/* cloud-3 */
.cloud-3 {
  width: 56px; height: 16px;
  top: 30%;
  box-shadow:
    4px -8px 0 var(--cloud-white),
    8px -12px 0 var(--cloud-white),
    12px -12px 0 var(--cloud-white),
    16px -12px 0 var(--cloud-white),
    20px -16px 0 var(--cloud-white),
    24px -16px 0 var(--cloud-white),
    28px -12px 0 var(--cloud-white),
    32px -12px 0 var(--cloud-white),
    36px -8px 0 var(--cloud-white),
    40px -8px 0 var(--cloud-white),
    -4px 0 0 var(--cloud-white),
    60px 0 0 var(--cloud-white);
  animation: cloud-scroll 22s linear infinite;
  animation-delay: -6s;
}

@keyframes cloud-scroll {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-120px); }
}

/* ── pixel ship ── */
.pixel-ship {
  position: absolute;
  bottom: 40%;
  right: 12%;
  width: 24px;
  height: 24px;
  /* orange/red pixel ship silhouette */
  background: #e05010;
  box-shadow:
    /* body */
    4px  0px 0 #f08030,
    8px  0px 0 #f08030,
    12px 0px 0 #e05010,
    4px -4px 0 #f08030,
    8px -4px 0 #ffffff,
    12px -4px 0 #f08030,
    0px  4px 0 #c03008,
    4px  4px 0 #e05010,
    8px  4px 0 #e05010,
    12px 4px 0 #c03008,
    16px 4px 0 #c03008,
    4px  8px 0 #c03008,
    8px  8px 0 #c03008,
    4px -8px 0 #f0a040,
    8px -8px 0 #f0a040;
  animation: ship-fly 3s ease-in-out infinite;
}
@keyframes ship-fly {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── title panel ── */
.title-panel {
  position: relative;
  z-index: 2;
  background: var(--panel-bg);
  border: 4px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px 24px;
  /* pixel drop-shadow */
  box-shadow: 4px 4px 0 var(--panel-shadow);
  text-align: center;
}

.title-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.0rem, 3.5vw, 2rem);
  margin: 0;
  color: var(--btn-orange);
  line-height: 1.6;
  /* black pixel outline */
  text-shadow:
    2px  0   0 var(--panel-border),
   -2px  0   0 var(--panel-border),
    0    2px 0 var(--panel-border),
    0   -2px 0 var(--panel-border),
    2px  2px 0 var(--panel-border),
   -2px  2px 0 var(--panel-border),
    2px -2px 0 var(--panel-border),
   -2px -2px 0 var(--panel-border);
}

/* ── tap hint ── */
.tap-hint {
  position: relative;
  z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.45rem, 1.4vw, 0.6rem);
  color: var(--panel-border);
  margin: 0;
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 14px;
  box-shadow: 3px 3px 0 var(--panel-shadow);
  animation: hint-blink 1.2s step-end infinite;
}
@keyframes hint-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── howto button ── */
#howto-btn {
  position: relative;
  z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.5rem, 1.5vw, 0.65rem);
  color: var(--text-dark);
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 20px;
  box-shadow: 3px 3px 0 var(--panel-shadow);
  cursor: pointer;
}
#howto-btn:active {
  box-shadow: 1px 1px 0 var(--panel-shadow);
  transform: translate(2px, 2px);
}

.version-label {
  position: relative;
  z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--panel-border);
  margin: 0;
  opacity: 0.6;
}

/* ══════════════════════════════════
   HOWTO MODAL
══════════════════════════════════ */
#howto-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.howto-content {
  background: var(--sky-bottom);
  border: 4px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--panel-shadow);
  width: min(90vw, 480px);
  height: min(80vh, 540px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.howto-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  background: var(--btn-blue);
  color: var(--text-white);
  padding: 10px 16px;
  border-bottom: 3px solid var(--panel-border);
  text-shadow: 1px 1px 0 var(--btn-blue-d);
}

.howto-content iframe {
  flex: 1;
  border: 0;
  background: #fff;
}

#howto-close {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  background: var(--btn-orange);
  color: var(--text-white);
  border: 0;
  border-top: 3px solid var(--panel-border);
  padding: 12px;
  cursor: pointer;
  text-shadow: 1px 1px 0 var(--btn-orange-d);
  box-shadow: inset 0 -3px 0 var(--btn-orange-d);
}
#howto-close:active {
  box-shadow: none;
  padding-top: 14px;
  padding-bottom: 10px;
}

/* ══════════════════════════════════
   GAME FRAME
══════════════════════════════════ */
#game-frame {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #000;
  z-index: 1;
}

/* ══════════════════════════════════
   IN-GAME OVERLAY BUTTONS
══════════════════════════════════ */
#game-overlay-btns {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 8px);
  display: flex;
  gap: 6px;
  z-index: 15;
}

#home-btn,
#retry-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  color: var(--text-dark);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home-btn:active,
#retry-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* ── mute ── */
#mute-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  right: calc(env(safe-area-inset-right) + 8px);
  font-size: 1rem;
  width: 44px; height: 44px;
  border-radius: 6px;
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  color: var(--text-dark);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}
#mute-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* ══════════════════════════════════
   LOADING
══════════════════════════════════ */
#loading {
  position: fixed;
  inset: 0;
  background: var(--sky-top);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.loading-box {
  background: var(--panel-bg);
  border: 4px solid var(--panel-border);
  border-radius: 10px;
  padding: 20px 32px;
  box-shadow: 4px 4px 0 var(--panel-shadow);
}

.loading-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: 0.05em;
}

.dot { animation: dot-blink 1s step-end infinite; }
.dot:nth-child(2) { animation-delay: 0.25s; }
.dot:nth-child(3) { animation-delay: 0.5s; }

@keyframes dot-blink {
  0%, 80%, 100% { opacity: 0; }
  40%            { opacity: 1; }
}

/* ══════════════════════════════════
   TOUCH CONTROLS
══════════════════════════════════ */
#touch-controls {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 16px;
  pointer-events: none;
  z-index: 10;
}

#ctrl-dpad {
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.ctrl-dpad-row {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.ctrl-dpad-center {
  width: 56px;
  height: 56px;
}

#ctrl-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

/* base dpad button — dark blue/gray */
.ctrl-btn {
  pointer-events: auto;
  width: 56px; height: 56px;
  border-radius: 8px;
  background: #2255aa;
  border: 3px solid var(--panel-border);
  color: var(--text-white);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  box-shadow: 3px 3px 0 #112244;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 0 #112244;
}

.ctrl-btn:active,
.ctrl-btn--active {
  box-shadow: 1px 1px 0 #112244;
  transform: translate(2px, 2px);
  background: #3366cc;
}

/* BEAM — red/orange, stands out */
.ctrl-action {
  width: auto;
  min-width: 72px;
  height: 56px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--btn-red);
  box-shadow: 3px 3px 0 var(--btn-red-d);
  text-shadow: 1px 1px 0 var(--btn-red-d);
  border-color: var(--panel-border);
}

.ctrl-action:active {
  background: #ff4040;
  box-shadow: 1px 1px 0 var(--btn-red-d);
  transform: translate(2px, 2px);
}

/* ══════════════════════════════════
   ROTATE OVERLAY
══════════════════════════════════ */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--sky-top);
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.rotate-box {
  background: var(--panel-bg);
  border: 4px solid var(--panel-border);
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 4px 4px 0 var(--panel-shadow);
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: var(--text-dark);
  line-height: 2.2;
}

.rotate-box p { margin: 0; }

@media (orientation: portrait) {
  #rotate-overlay[data-orientation="landscape"] { display: flex; }
}
@media (orientation: landscape) {
  #rotate-overlay[data-orientation="portrait"] { display: flex; }
}