/* public/assets/css/tools/game/dino.css */
.dino-wrapper { background: var(--bg-surface); border-radius: 24px; padding: 24px; border: 1px solid var(--border-color); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); }
.dino-header { font-size: 1.6rem; font-weight: 800; color: var(--text-main); margin-bottom: 8px; text-align: center; }
.dino-subtitle { color: var(--text-muted); font-size: 0.95rem; padding-bottom: 20px; margin-bottom: 20px; text-align: center; }

.dino-controls-bar { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color); }
.dino-hint-badge { background: var(--bg-body); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 12px; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.dino-toggle-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-main); cursor: pointer; font-size: 0.9rem; }

.dino-canvas-container { position: relative; background: #f7f7f7; border-radius: 16px; border: 4px solid var(--border-color); padding: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; box-shadow: inset 0 4px 10px rgba(0,0,0,0.05); max-width: 900px; margin: 0 auto; transition: background 0.3s; }

/* 像素渲染优化 */
.dino-canvas { image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; height: auto; display: block; border-radius: 8px; position: relative; z-index: 1; }

/* 屏幕震动特效 */
.dino-shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 2px, 0); }
  20%, 80% { transform: translate3d(3px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 4px, 0); }
  40%, 60% { transform: translate3d(5px, -4px, 0); }
}

/* 复古 CRT 扫描线叠加层 */
.dino-crt-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%); background-size: 100% 4px; box-shadow: inset 0 0 50px rgba(0,0,0,0.2); }
.dino-crt-mode .dino-crt-overlay { opacity: 1; }

/* 移动端虚拟按键 */
.dino-mobile-btn { position: absolute; z-index: 3; top: 0; bottom: 0; width: 50%; opacity: 0; -webkit-tap-highlight-color: transparent; }
.dino-btn-duck { left: 0; }
.dino-btn-jump { right: 0; }

[data-theme="dark"] .dino-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .dino-hint-badge { background: #0f172a; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .dino-canvas-container { border-color: #475569; background: #0f172a; }