* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: none;
}
body { overflow: hidden; font-family: 'Courier New', monospace; position: fixed; width: 100%; height: 100%; }
#background { position: fixed; inset: 0; background-image: url("assets/images/fondo_juego.png"); background-size: cover; background-position: center; background-repeat: no-repeat; transition: filter 0.5s ease; z-index: 0; }
#background.playing { filter: brightness(0.35) blur(8px); }
#gameContainer { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
canvas { display: block; image-rendering: pixelated; border: 3px solid #444; box-shadow: 0 0 40px #0008; touch-action: none; }
#ui { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; align-items: center; pointer-events: none; z-index: 10; }
.stat { background: #000a; color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 18px; font-weight: 700; letter-spacing: 1px; border: 2px solid #fff3; }
.music-btn { pointer-events: all; touch-action: manipulation; background: #000a; color: #fff; border: 2px solid #fff3; border-radius: 20px; padding: 6px 14px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; line-height: 1; letter-spacing: 1px; }
.music-btn:hover { background: #fff2; }
.music-btn:active { transform: scale(0.93); }
.music-btn.playing { border-color: #FFD700; color: #FFD700; }

#overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); z-index: 20; overflow-y: auto; padding: 16px 0; }
.menuCard { width: 90vw; max-width: 500px; background: linear-gradient(180deg,#fff8d6,#ffeaa0); border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.6); border: 4px solid #e0b400; margin: auto; }

.menuGif { width: 150px; margin-bottom: 10px; border-radius: 50%; }
.empresa { font-size: 14px; color: #555; margin-top: 8px; font-style: italic; }
.gameTitle { font-size: 32px; color: #8a6400; margin-bottom: 14px; text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,0.15); }
.instructions { background: #fff7cc; border-radius: 12px; padding: 14px; font-size: 15px; color: #333; margin-bottom: 16px; line-height: 1.6; border: 2px dashed #e0b400; }
.instructions hr { border: none; height: 2px; background: #e0b400; margin: 10px 0; }
.best { font-size: 18px; font-weight: bold; color: #8a6400; margin-bottom: 10px; }
.newRecord { font-size: 22px; font-weight: bold; color: #e74c3c; margin-bottom: 10px; }
.menuBtn { background: #fff7cc; border: 2px solid #e0b400; padding: 10px 28px; font-size: 16px; font-weight: bold; border-radius: 20px; cursor: pointer; margin: 6px; }
.menuBtn:hover { background: #ffeaa0; }
#startBtn, #btnReplay, #btnResume { background: #ffcc00; border: none; padding: 14px 36px; font-size: 20px; font-weight: bold; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 0 #caa000, 0 10px 20px rgba(0,0,0,0.4); transition: 0.15s; }
#startBtn:hover, #btnReplay:hover, #btnResume:hover { transform: scale(1.05); }
#startBtn:active, #btnReplay:active, #btnResume:active { transform: translateY(3px); box-shadow: 0 2px 0 #caa000; }
#mobileControls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 60px 60px 60px; grid-template-rows: 60px 60px; gap: 8px; z-index: 10; }
@keyframes borderGlow { 0%{border-color:#ff4d4d}25%{border-color:#ffd84d}50%{border-color:#4dff88}75%{border-color:#4da6ff}100%{border-color:#ff4df2} }
.dpad { background: #fff2; border: 2px solid #fff4; border-radius: 12px; font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.1s; touch-action: manipulation; animation: borderGlow 3s linear infinite; box-shadow: 0 0 10px rgba(255,255,255,0.4); }
.dpad:active { background: #fff4; }
#btn-up    { grid-column: 2; grid-row: 1; }
#btn-left  { grid-column: 1; grid-row: 2; }
#btn-down  { grid-column: 2; grid-row: 2; }
#btn-right { grid-column: 3; grid-row: 2; }
.settingsList { text-align: left; padding: 10px 0; }
.settingsList label { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 16px; color: #8a6400; border-bottom: 1px dashed #e0b400; }
.settingsList input[type="range"] { width: 140px; accent-color: #ffcc00; }
.settingsList select { background: #fff7cc; border: 2px solid #e0b400; border-radius: 10px; padding: 4px 8px; font-size: 15px; color: #8a6400; }
.settingsList input[type="checkbox"] { width: 20px; height: 20px; accent-color: #ffcc00; }