/* style.css - Retro Arcade Styling & Responsive Mobile Controls */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Outfit:wght@400;600;800&display=swap');

:root {
  --primary-red: #d90429;
  --primary-green: #006341;
  --accent-gold: #ffd166;
  --neon-cyan: #06d6a0;
  --dark-bg: #0d0f12;
  --cabinet-bezel: #1b1e24;
  --cabinet-border: #2a2e39;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  background-color: var(--dark-bg);
  background-image: radial-gradient(circle at 50% 20%, #201a30 0%, #0d0f12 70%);
  color: #fff;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  padding: 10px;
}

/* Header & Podcast Branding */
.game-header {
  text-align: center;
  margin-bottom: 8px;
}

.podcast-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.25);
}

.podcast-badge .dot {
  width: 8px;
  height: 8px;
  background: #ff0054;
  border-radius: 50%;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 8px #ff0054; }
}

.game-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 4vw, 32px);
  background: linear-gradient(180deg, #ffd166 0%, #ff8800 50%, #d90429 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.sub-tagline {
  font-size: 13px;
  color: #adb5bd;
  font-weight: 500;
}

/* Arcade Cabinet Frame */
.arcade-cabinet {
  position: relative;
  background: var(--cabinet-bezel);
  border: 4px solid var(--cabinet-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9),
              0 0 20px rgba(217, 4, 41, 0.2),
              inset 0 0 15px rgba(0, 0, 0, 0.8);
  padding: 12px;
  max-width: 960px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Top Toolbar */
.cabinet-toolbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}

.attraction-tags {
  color: var(--neon-cyan);
  display: flex;
  gap: 12px;
  align-items: center;
}

.tools-group {
  display: flex;
  gap: 8px;
}

.tool-btn {
  background: #2b2d42;
  border: 1px solid #4a4e69;
  color: #edf2f4;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  transition: all 0.15s ease;
}

.tool-btn:hover {
  background: #3d405b;
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* Screen Wrapper */
.screen-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

/* CRT Scanlines & Screen Curvature Overlay */
.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  ),
  linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 6px 100%;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.crt-overlay.disabled {
  opacity: 0;
}

/* Mobile Touch Controls */
.touch-controls {
  width: 100%;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.dpad {
  display: flex;
  gap: 12px;
}

.action-buttons {
  display: flex;
  gap: 16px;
}

.touch-btn {
  background: linear-gradient(145deg, #2b2d42, #181926);
  border: 2px solid #4a4e69;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 0 #111, 0 8px 15px rgba(0, 0, 0, 0.6);
  touch-action: manipulation;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.touch-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #111, 0 3px 6px rgba(0, 0, 0, 0.8);
}

.touch-btn.jump-btn {
  background: linear-gradient(145deg, #06d6a0, #008f68);
  border-color: #2ec4b6;
  color: #0d1b2a;
}

.touch-btn.punch-btn {
  background: linear-gradient(145deg, #d90429, #9d0208);
  border-color: #ef233c;
  color: #fff;
}

.touch-btn.kick-btn {
  background: linear-gradient(145deg, #f77f00, #d62828);
  border-color: #fcbf49;
  color: #fff;
}

.touch-btn.duck-btn {
  background: linear-gradient(145deg, #3a506b, #1c2541);
  border-color: #48cae4;
  color: #fff;
}

.btn-sub {
  font-size: 8px;
  margin-top: 2px;
  opacity: 0.85;
}

/* Desktop Instruction Card */
.instructions-card {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 18px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #ced4da;
}

.inst-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.key-badge {
  background: #343a40;
  border: 1px solid #495057;
  color: #ffd166;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 0 #212529;
}

/* Footer */
.game-footer {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: #6c757d;
}

.game-footer a {
  color: var(--accent-gold);
  text-decoration: none;
  font-weight: 600;
}

.game-footer a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (min-width: 800px) {
  .touch-controls {
    display: none; /* Hide touch buttons on desktop monitors with mouse/keyboard */
  }
}

@media (max-width: 600px) {
  body {
    padding: 4px;
  }
  .arcade-cabinet {
    padding: 6px;
  }
  .touch-btn {
    width: 56px;
    height: 56px;
    font-size: 10px;
  }
  .instructions-card {
    display: none;
  }
}