/* ===== SPACE CAT: TACO RUSH (DELUXE) — full-bleed arcade shell ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --neon: #7ef9ff;
  --amber: #ffd166;
  --danger: #ff4d6d;
  --ink: #0a0c22;
}

html, body {
  height: 100%;
  background: #06071c;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  font-family: "Courier New", ui-monospace, Menlo, monospace;
  color: #fff;
}

/* full-bleed stage */
#wrap { position: fixed; inset: 0; overflow: hidden; background: #0a0d2a; }
#game  { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: none; }

/* HUD buttons — bottom-right thumb zone, safe-area aware */
#hudBtns {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  right: calc(12px + env(safe-area-inset-right));
  display: flex; gap: 8px;
  z-index: 30;
}
#hudBtns button {
  pointer-events: auto;
  cursor: pointer;
  min-width: 46px; min-height: 46px;
  font: bold 20px/1 "Courier New", monospace;
  color: #cfe0ff;
  background: rgba(10, 13, 42, 0.78);
  border: 2px solid #39407c;
  border-radius: 10px;
  box-shadow: 0 3px 0 #000, inset 0 0 12px rgba(126, 249, 255, 0.12);
  text-shadow: 0 0 8px rgba(126, 249, 255, 0.6);
  touch-action: manipulation;
}
#hudBtns button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, rgba(6, 8, 28, 0.72) 0%, rgba(4, 5, 20, 0.9) 100%);
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }

.card {
  text-align: center;
  max-width: min(92vw, 620px);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 26px;
  background: rgba(9, 12, 38, 0.88);
  border: 3px solid #232a5c;
  border-radius: 14px;
  box-shadow:
    0 0 0 3px #05061a,
    0 0 0 6px #39407c,
    0 0 42px rgba(126, 249, 255, 0.22),
    inset 0 0 46px rgba(0, 0, 0, 0.65);
}

/* pixel-font titles (hydrated to crisp <img>) */
.px-title { display: flex; justify-content: center; }
.px-title.sub { margin-top: 10px; }
.px-img {
  display: block;
  max-width: min(84vw, 520px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55));
  animation: floaty 3.2s ease-in-out infinite;
}
/* font fallback if JS never hydrated (progressive enhancement) */
.px-title:not(.px-hydrated) {
  font-weight: bold; font-size: clamp(24px, 7vw, 46px); letter-spacing: 4px;
  text-shadow: 0 0 8px var(--neon), 3px 3px 0 #000;
}

.caption {
  margin: 14px 0 10px;
  min-height: 2.4em;
  font-size: clamp(12px, 3.4vw, 17px);
  font-style: italic;
  color: #ffe9a8;
  text-shadow: 1px 1px 0 #000;
}

.rules {
  display: grid; gap: 7px;
  margin: 6px auto 18px;
  font-size: clamp(12px, 3.2vw, 15px);
  color: #b9c9ee;
  text-shadow: 1px 1px 0 #000;
}
.rules p { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rules .k {
  display: inline-block; min-width: 66px;
  padding: 3px 8px;
  font-size: 0.82em; letter-spacing: 2px; text-align: center;
  color: #7ef9ff;
  border: 2px solid #2b3a7a; border-radius: 6px;
  background: rgba(26, 34, 84, 0.85);
  text-shadow: 0 0 8px rgba(126, 249, 255, 0.5);
}
.rules i { font-style: normal; color: #fff; }
.rules em { font-style: normal; color: var(--amber); font-weight: bold; }

.go-score { font-size: clamp(14px, 4vw, 18px); color: #b9c9ee; letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
.go-score .big { display: block; margin-top: 6px; font-size: clamp(34px, 9vw, 54px); font-weight: bold; color: #fff; letter-spacing: 3px; text-shadow: 0 0 16px rgba(255, 209, 102, 0.7), 3px 3px 0 #000; }

.newbest { margin: 10px 0 2px; font-weight: bold; color: var(--amber); letter-spacing: 2px; text-shadow: 0 0 12px rgba(255, 209, 102, 0.9); animation: blink 0.7s steps(2, jump-none) infinite; }
.newbest.hidden { display: none; }

.best { margin-top: 10px; font-size: clamp(11px, 3vw, 14px); letter-spacing: 3px; color: #8fa7c8; }

/* chunky arcade button */
.btn {
  cursor: pointer;
  font: bold clamp(17px, 4.6vw, 24px)/1 "Courier New", monospace;
  letter-spacing: 3px;
  color: #221500;
  padding: 15px 34px;
  margin-top: 8px;
  background: linear-gradient(180deg, #fff3a6, #ffd166 52%, #ffb703);
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 6px 0 #7a5500, 0 9px 0 #000, 0 0 26px rgba(255, 209, 102, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.1s;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #7a5500, 0 3px 0 #000; }
.btn .tri { margin-right: 6px; }

/* CRT scanlines + faint flicker */
#scanlines {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  mix-blend-mode: overlay;
  animation: flicker 4s steps(60) infinite;
}
@keyframes flicker { 0%,100% { opacity: 1; } 3% { opacity: 0.86; } 6% { opacity: 1; } 52% { opacity: 0.93; } 55% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes floaty { 50% { transform: translateY(-5px); } }

/* notch safe-area probe (zero-size) */
#safeProbe {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@media (max-height: 430px) {           /* short landscape phones */
  .card { padding: 12px 18px; }
  .caption { min-height: 1.6em; margin: 8px 0 6px; }
  .rules { gap: 4px; margin-bottom: 10px; font-size: 11px; }
  .btn { padding: 11px 22px; }
  .px-img { max-width: 70vw; }
}

/* touch DASH button — only on coarse-pointer devices */
#dashBtns { display: none; }
@media (pointer: coarse) {
  #dashBtns {
    display: flex;
    position: absolute;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: calc(14px + env(safe-area-inset-left));
    z-index: 30;
  }
  #dashBtns button {
    pointer-events: auto;
    cursor: pointer;
    width: 64px; height: 64px;
    border-radius: 50%;
    font: bold 30px/1 "Courier New", monospace;
    color: #7ef9ff;
    background: rgba(13, 22, 60, 0.82);
    border: 3px solid #2f9fc4;
    box-shadow: 0 4px 0 #000, 0 0 18px rgba(126, 249, 255, 0.4), inset 0 0 14px rgba(126, 249, 255, 0.25);
    text-shadow: 0 0 10px rgba(126, 249, 255, 0.9);
    touch-action: manipulation;
  }
  #dashBtns button:active { transform: translateY(3px) scale(0.94); box-shadow: 0 1px 0 #000, 0 0 22px rgba(126, 249, 255, 0.6); }
}

.stats { margin-top: 12px; font-size: clamp(11px, 3.2vw, 15px); letter-spacing: 2px; color: #9fb7e8; text-shadow: 1px 1px 0 #000; }
.stats span { color: #ffd166; font-weight: bold; }