/* ...existing styles... */
/* starfield sits behind the game canvas and covers the viewport */

/* noto-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

#starfield {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  display: block;
  z-index: 0;
  pointer-events: none;
  background: #000; /* base for stars, stays neutral with app style */
}
/* ensure game canvas is above starfield */
canvas#game { position: relative; z-index: 1; }
@font-face {
  font-family: "Blissful Thinking";
  src: url("./Blissful Thinking.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root { --bg: #2A2A2A; --fg: #f2f2f2; --muted: #aaaaaa; }
* { box-sizing: border-box; }
html, body { height: 100%; }
html, body {
  /* prevent pull-to-refresh while allowing scroll normally */
  overscroll-behavior-y: contain;
}
/* prevent selection and long-press menu globally (inputs allowed) */
body { -webkit-user-select: none; user-select: none; }
/* allow text selection in inputs/textarea/contenteditable */
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* simple modal styles */
.app-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.5); z-index: 2000; }
.app-modal.hidden { display: none; }
.app-modal__panel { background: #111; border: 1px solid #222; border-radius: 12px; padding: 16px; width: min(92vw, 420px); box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.app-modal__text { margin: 0 0 12px; color: #fff; font-weight: 700; }
.app-modal__btn { width: 100%; border: 1px solid #111; background: #111; color: #fff; border-radius: 12px; padding: 10px; font-weight: 700; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Blissful Thinking", "Noto Sans", system-ui, -apple-system, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase; /* ensure all game text is capitalized */
}
.wrap { position: relative; height: 100svh; display: grid; place-items: center; }
canvas#game { width: 100vw; height: 100svh; display: block; touch-action: manipulation; }

.hud, .panel, .tips, .panel button, .panel p, .panel #statusText, .panel #bestText {
  text-transform: uppercase;
}
.hud { position: fixed; top: env(safe-area-inset-top, 8px); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; pointer-events: none; z-index: 999; }
.hud .score { font-weight: 700; font-size: clamp(24px, 6vw, 72px); pointer-events: auto; padding-right: 24px; }
.hud .lives {
  font-weight: 700;
  font-size: clamp(24px, 4.8vw, 48px);
  pointer-events: auto;
  margin-left: auto;
  padding-left: 16px;
  padding-right: 20px;
  text-align: right;
  color: #F6DF0E;
}
.hud #pauseBtn { pointer-events: auto; border: 1px solid #ddd; background: #fff; color: var(--fg); border-radius: 10px; padding: 6px 10px; font-weight: 700; }

/* subtle light layer behind overlay panel (appears behind menu / game-over) */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1001; /* sits above menuFx canvas (1000) and below .panel (1002) */
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 50%, transparent 70%);
  transition: opacity 240ms ease;
  opacity: 1;
}
.overlay { position: absolute; inset: 0; display: grid; place-items: center; backdrop-filter: blur(6px); z-index: 1001; }
.overlay.hidden { display: none; }
.panel { background: transparent; border: none; position: relative; z-index: 1002; }
.panel #logo { width: 140px; max-width: 42%; height: auto; display: block; margin: 0 auto 12px; filter: drop-shadow(0 8px 22px rgba(0,0,0,0.5)); }
/* add floating animation and larger default size for the menu logo */
@keyframes floatLogo {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.panel #logo {
  width: 280px; /* twice as big */
  max-width: 84%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  /* stronger, softer layered shadow for depth */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)) drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  animation: floatLogo 3.8s ease-in-out infinite;
}
.panel h1 { margin: 0 0 8px; font-size: 24px; }
.panel p { margin: 0 0 16px; color: var(--muted); }
.panel button {
  width: 100%;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  font-weight: 700;
  font-family: "Blissful Thinking", "Noto Sans", system-ui, -apple-system, Arial, sans-serif;
  font-size: 22px; /* make Play/Restart text bigger */
  transition: color 200ms linear, background-color 750ms ease; /* smooth color and background fade (750ms ease) */
  color: #8C13FB; /* start color for the cycle */
}
.panel #bestText { color: #F39734; }
.panel #statusText, .panel #bestText {
    text-align: center;
    display: block;
    margin-top: 8px;
    margin-bottom: 12px;
}
/* add extra spacing between logo and texts, and between texts and play button */
.panel #logo { margin: 0 auto 38px; }
.panel button { margin-top: 12px; }

.tips { position: fixed; bottom: env(safe-area-inset-bottom, 8px); left: 0; right: 0; text-align: center; color: var(--muted); font-size: 12px; padding: 8px 12px; }
/* ensure footer links are white and underlined for visibility */
.tips a { color: #ffffff; text-decoration: underline; }
.canvas-blur, .wrap.blur canvas#game {
  filter: blur(6px);
  transition: filter 240ms ease;
}

#menuFx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1000;
}

.promo {
  position: absolute; left: env(safe-area-inset-left, 12px); bottom: env(safe-area-inset-bottom, 12px);
  display: flex; align-items: flex-end; gap: 10px; z-index: 1002;
}
.promo-img { height: 68px; width: auto; display: block; cursor: pointer; }

/* popup menu */
.promo-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 6px;
  min-width: 220px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.promo.open .promo-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.promo-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-family: "Blissful Thinking", "Noto Sans", system-ui, -apple-system, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
/* remove old promo-actions and promo-btn (no longer used) */
.promo-actions { display: none; }
.promo-btn { display: none; }

/* gear button over canvas */
.gear-btn {
  position: absolute;
  right: calc(env(safe-area-inset-right, 18px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 12px) + 56px);
  z-index: 1003;
  width: 40px; /* 75% of 54px */
  height: 40px; /* 75% of 54px */
  border-radius: 50%;
  border: 1px solid #222;
  background: rgba(17,17,17,0.70); /* changed to 70% semi-transparent */
  color: #fff;
  font-size: 16px; /* 75% of 22px */
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
  transition: transform 160ms ease;
  pointer-events: auto;
}
.gear-btn:active { transform: scale(0.96); }

/* help button (mirror of gear but left) */
.help-btn {
  position: absolute;
  left: calc(env(safe-area-inset-left, 18px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 12px) + 56px);
  z-index: 1003;
  width: 40px; /* 75% of 54px */
  height: 40px; /* 75% of 54px */
  border-radius: 50%;
  border: 1px solid #222;
  background: rgba(17,17,17,0.70); /* changed to 70% semi-transparent */
  color: #fff;
  font-size: 16px; /* 75% of 22px */
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
  transition: transform 160ms ease;
  pointer-events: auto;
}
.help-btn:active { transform: scale(0.96); }

/* help modal styles (scrollable content for small screens) */
.help-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.5); z-index: 3001; }
.help-modal.hidden { display: none; }
.help-panel {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 12px;
  width: min(92vw, 420px);
  max-height: 78vh;
  box-shadow: 0 18px 32px rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-panel h2 { margin: 0; font-size: 18px; text-transform: uppercase; }
.help-content {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* enable smooth touch scrolling on iOS */
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  padding-right: 6px;
}
.help-actions { display:flex; gap:8px; }
.help-actions button { padding:10px; border-radius:10px; border:1px solid #222; background:#111; color:#fff; font-weight:700; cursor:pointer; width:100%; }

/* config modal (simple, accessible) */
.config-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.5); z-index: 3000; }
.config-modal.hidden { display: none; }
.config-panel {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 16px;
  width: min(92vw, 420px);
  box-shadow: 0 18px 32px rgba(0,0,0,0.6);
  color: #fff;
}
.config-panel h2 { margin: 0 0 8px; font-size: 18px; text-transform: uppercase; }
.config-desc { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.config-list {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 6px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch; /* smooth native scrolling on iOS */
  touch-action: pan-y; /* allow vertical touch scrolling */
}
.config-item { display:flex; align-items:center; gap:10px; background:#0f0f0f;border:1px solid #1a1a1a;padding:8px;border-radius:10px; font-weight:700; }
.config-actions { display:flex; gap:8px; }
.config-actions button { flex:1; padding:10px; border-radius:10px; border:1px solid #222; background:#111; color:#fff; font-weight:700; cursor:pointer; }