/* styles.css — стили для прототипа Chrome Dino
   Обновлено: блок контролов теперь размещён под игровым полем и адаптивно масштабируется.
*/

:root{
  --game-width: 100vw;
  --game-height: 28vh;
  --ground-height: 18%;
  --dino-size: calc(var(--game-height) * 0.55);
  --ui-gap: 0.75rem;
  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --bg: #f7f7f7;
  --ui-fore: #202124;
  --accent: #2b2b2b;
  --muted: #8a8a8a;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:var(--font-family);
  background:var(--bg);
  color:var(--ui-fore);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#app{max-width:1200px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem;align-items:center}

.hud{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:900px;padding:0.25rem 0}
.hud .score,.hud .highscore{display:flex;flex-direction:column;align-items:flex-end}
.hud span{font-size:0.85rem}
#score{font-weight:700;font-size:1.25rem}
#highscore{font-weight:700;font-size:1.0rem;color:var(--muted)}

.game-area{position:relative;width:var(--game-width);height:var(--game-height);background:linear-gradient(180deg,#fff 0%, #f3f3f3 100%);border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.06);max-width:900px;}

#gameCanvas{display:block;width:100%;height:100%;background:transparent}

/* Контролы теперь под полем */
.controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;z-index:10;flex-wrap:wrap}
.controls button{
  min-width:clamp(3rem, 4vw, 5rem);
  padding:clamp(0.4rem, 0.6vw, 0.8rem) clamp(0.6rem, 1vw, 1rem);
  border-radius:12px;
  border:0;
  background:rgba(0,0,0,0.08);
  font-weight:600;
  font-size:clamp(0.8rem, 1vw, 1.1rem);
  color:var(--ui-fore);
  cursor:pointer;
  transition:background 0.2s ease, transform 0.1s ease;
}
.controls button:hover{background:rgba(0,0,0,0.12)}
.controls button:active{transform:translateY(1px)}

@media (hover: hover) and (pointer: fine){
  .controls{opacity:0.9}
  .controls:hover{opacity:1}
}

.help{font-size:0.8rem;color:var(--muted);text-align:center;padding:0.5rem;max-width:900px}

@media (max-width: 900px){
  :root{ --game-height: 30vh; }
  #app{padding:0.75rem}
  .hud{gap:0.5rem}
}
@media (max-width: 600px){
  :root{ --game-height: 36vh; }
  #app{padding:0.5rem}
  .hud span{font-size:0.75rem}
  #score{font-size:1.05rem}
  .controls button{min-width:3.2rem;padding:0.45rem 0.6rem}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  :root{ --ui-gap: 0.6rem}
}

button:focus{outline:3px solid rgba(66,153,225,0.35);outline-offset:2px}

.game-area, #gameCanvas{ -webkit-transform: translateZ(0); transform: translateZ(0); }
.controls button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.overlay .panel{pointer-events:auto;background:rgba(255,255,255,0.98);padding:1rem 1.25rem;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.08)}

.game-area.is-playing{box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.game-area.is-gameover{opacity:0.9}
.hidden{display:none!important}

/* Конец styles.css */