* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a2e; font-family: 'Courier New', monospace; color: #e0e0e0; }
canvas { display: block; margin: 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }

/* Screens */
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Menu */
#menu-screen { background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%); }
.menu-title { font-size: 32px; color: #f0c040; text-shadow: 2px 2px #805020; margin-bottom: 8px; letter-spacing: 2px; }
.menu-subtitle { font-size: 14px; color: #80a0c0; margin-bottom: 32px; }
.menu-btn { width: 200px; padding: 12px; margin: 6px; background: #0f3460; border: 2px solid #e94560; color: #f0f0f0; font-family: inherit; font-size: 16px; cursor: pointer; text-align: center; transition: background 0.15s; }
.menu-btn:hover { background: #e94560; }
.menu-btn:active { transform: scale(0.96); }

/* HUD */
#hud { position: absolute; top: 0; left: 0; width: 100%; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; background: rgba(15,20,40,0.85); z-index: 10; font-size: 13px; flex-wrap: wrap; min-height: 44px; }
#hud .hud-left, #hud .hud-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hud-btn { background: #0f3460; border: 1px solid #e94560; color: #fff; padding: 8px 12px; font-family: inherit; font-size: 14px; cursor: pointer; min-width: 44px; min-height: 36px; }
.hud-btn:hover { background: #e94560; }
.hud-btn .count { color: #f0c040; }
.hud-btn.disabled { opacity: 0.35; pointer-events: none; }
@media (max-width: 400px) {
  #hud { font-size: 11px; padding: 4px 6px; }
  #hud .hud-left, #hud .hud-right { gap: 4px; }
  .hud-btn { padding: 6px 8px; font-size: 12px; min-width: 38px; min-height: 32px; }
  .hud-btn .btn-label { display: none; }
}

/* Slots */
#slot-bar { position: absolute; bottom: 40px; left: 0; width: 100%; height: 56px; background: rgba(15,20,40,0.9); display: flex; justify-content: center; align-items: center; gap: 4px; z-index: 10; border-top: 2px solid #e94560; transition: background 0.3s, border-color 0.3s; }
#slot-bar.danger { background: rgba(60,10,15,0.95); border-color: #ff4060; animation: slotDanger 0.5s infinite; }
@keyframes slotDanger { 0%,100% { border-color: #ff4060; } 50% { border-color: #e94560; } }
#temp-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 38px; background: rgba(10,15,30,0.95); display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 10; border-top: 1px solid #405080; }
#temp-bar .temp-label { font-size: 11px; color: #607090; margin-right: 4px; }
.temp-slot { width: 32px; height: 32px; border: 1px dashed #405080; background: rgba(255,255,255,0.03); cursor: pointer; position: relative; }
.temp-slot.filled { border-color: #80a0c0; background: rgba(40,60,100,0.3); }
.temp-slot.filled:hover { border-color: #f0c040; }
.slot { width: 48px; height: 48px; border: 1px dashed #405080; background: rgba(255,255,255,0.05); }
.slot.filled { border-color: #f0c040; }
.slot-pop { animation: slotPop 0.25s ease-out; }
@keyframes slotPop { 0% { transform: scale(0.6); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Overlay panels */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.panel { background: #16213e; border: 2px solid #e94560; padding: 24px; min-width: 280px; max-width: 90%; max-height: 80vh; overflow-y: auto; text-align: center; }
.panel h2 { color: #f0c040; font-size: 20px; margin-bottom: 16px; }
.panel p { margin: 8px 0; font-size: 14px; }
.panel .btn { display: inline-block; padding: 8px 20px; margin: 6px; background: #0f3460; border: 1px solid #e94560; color: #fff; font-family: inherit; cursor: pointer; font-size: 14px; }
.panel .btn:hover { background: #e94560; }
.panel .btn.primary { background: #e94560; }
.win-stars { font-size: 28px; margin: 8px 0; }

/* Leaderboard */
.lb-row { display: flex; justify-content: space-between; padding: 4px 8px; font-size: 13px; border-bottom: 1px solid #203050; }
.lb-row .rank { color: #f0c040; width: 30px; }
.lb-row .name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .val { color: #80f080; width: 60px; text-align: right; }

/* Level select */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.level-cell { width: 52px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0f3460; border: 2px solid #405080; font-size: 16px; cursor: default; position: relative; }
.level-cell .level-num { font-size: 14px; line-height: 1; }
.level-cell .level-stars { font-size: 7px; line-height: 1; margin-top: 2px; }
.level-cell.locked { opacity: 0.4; cursor: default; }
.level-cell:not(.locked) { cursor: pointer; }
.level-cell.current { border-color: #f0c040; color: #f0c040; }
.level-cell:not(.locked):hover { background: #e94560; }
.level-cell.tier-tutorial { border-color: #40c060; }
.level-cell.tier-beginner { border-color: #4080f0; }
.level-cell.tier-intermediate { border-color: #f0a030; }
.level-cell.tier-challenge { border-color: #e94560; }
.level-cell.tier-hard { border-color: #ff6b35; }
.level-cell.tier-expert { border-color: #9b59b6; }
.tier-header { grid-column: 1 / -1; color: #f0c040; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #304060; margin-top: 4px; text-align: left; }

/* Combo text */
.combo-text { position: absolute; font-size: 28px; color: #f0c040; font-weight: bold; text-shadow: 2px 2px #000; pointer-events: none; z-index: 30; animation: comboUp 0.8s ease-out forwards; }
@keyframes comboUp { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(1.5) translateY(-40px); } }
@keyframes bounceUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* Settings */
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.toggle { width: 44px; height: 24px; background: #405080; border-radius: 12px; position: relative; cursor: pointer; }
.toggle.on { background: #e94560; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: left 0.2s; }
.toggle.on::after { left: 22px; }

/* Timer */
.timer-normal { color: #80f080; font-weight: bold; }
.timer-danger { color: #e94560; font-weight: bold; animation: timerBlink 0.5s infinite; }
@keyframes timerBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Hint button */
.hud-btn.hint-btn { background: #2a5030; border-color: #40f080; }
.hud-btn.hint-btn:hover { background: #40f080; color: #000; }

/* Level name in grid */
.level-name { font-size: 10px; line-height: 1.1; margin-top: 1px; color: #80a0c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48px; display: block; text-align: center; font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* Star animation */
.star-slot { display: inline-block; font-size: 28px; transition: transform 0.3s; }
.star-slot.star-lit { animation: starPop 0.4s ease-out; }
@keyframes starPop { 0% { transform: scale(0.3); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* Tutorial overlay */
.tutorial-overlay { position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:60; }
.tutorial-box { background:#16213e;border:2px solid #f0c040;padding:24px;max-width:300px;text-align:center;color:#e0e0e0;font-size:15px;line-height:1.8; }
.tutorial-box .btn { margin-top:16px; }

/* Revive button - consistent with btn family */
.panel .btn.revive { background: #2a6040; border-color: #40c070; }
.panel .btn.revive:hover { background: #40c070; color: #000; }