* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000;
  font-family: 'Barlow', 'Courier New', monospace;
}

/* ── Game wrapper – sizes itself to 16:9 of available width ── */
#game-wrap {
  position: relative;
  background: var(--bs-body-color);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  overflow: hidden;
  /* height set by JS */
}
@media (max-width: 768px) {
#game-wrap {
  border-radius: 12px;
}
}
/* Canvas fills the wrap exactly – pixel art drawn at native DPR */
#gc {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── HTML overlay – sits over canvas, pointer-events none by default ── */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

/* ── HUD bar (bottom strip, always visible during play) ── */
#hud {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 19.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5% 0 1.5%;
  pointer-events: none;
}
#hud-btns {
  display: flex;
  gap: 1.2%;
  pointer-events: all;
}
.hbtn {
  width: clamp(32px, 6.5vw, 56px);
  height: clamp(32px, 6.5vw, 56px);
  border: 2px solid #fff;
  background: #000;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(14px, 2.8vw, 24px);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .08s;
  line-height: 1;
}
.hbtn:active, .hbtn.pressed { background: #333; }

/* ── Lives (střed HUD) ── */
#hud-lives-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(6px, 1.2vw, 14px);
}
#hud-lives-label {
  color: #666;
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}
#hud-lives {
  display: flex;
  gap: clamp(4px, .9vw, 8px);
  align-items: center;
}
.life-dot {
  width: clamp(7px, 1.5vw, 13px);
  height: clamp(7px, 1.5vw, 13px);
  background: #fff;
  transition: background .1s;
}
.life-dot.dead { background: #333; }

/* ── Score (vpravo) ── */
#hud-score-wrap {
  text-align: right;
  line-height: 1.1;
}
#hud-score-label {
  color: #888;
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 400;
  letter-spacing: .08em;
  display: block;
}
#hud-score-val {
  color: #fff;
  font-size: clamp(18px, 4.5vw, 38px);
  font-weight: 900;
  letter-spacing: .04em;
  display: block;
}

/* ── Combo flash ── */
#combo-flash {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: clamp(12px, 2.8vw, 22px);
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
#combo-flash.show { opacity: 1; }

/* ── Start overlay: průhledná, pouze tlačítko HRÁT uprostřed ── */
#screen-start {
  position: absolute;
  inset: 0 0 19.259% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#screen-start.hidden { display: none; }

.px-btn {
  border: 2px solid #fff;
  background: #000;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(12px, 2.2vw, 18px);
  font-weight: 700;
  letter-spacing: .18em;
  padding: clamp(8px,1.5vh,14px) clamp(24px,5vw,48px);
  cursor: pointer;
  pointer-events: all;
  transition: background .08s;
}
.px-btn:hover { background: #222; }
.px-btn:active { background: #333; }

/* Tlačítko HRÁT – zelené pulsování */
@keyframes play-pulse {
  0%,100% { border-color: #fff; color: #fff; box-shadow: none; }
  50%      { border-color: #35D535; color: #35D535; box-shadow: 0 0 12px #35D535; }
}
#btn-play {
  animation: play-pulse 1.4s ease-in-out infinite;
}

/* ── Obrazovka Konec hry ── */
#screen-over {
  position: absolute;
  inset: 0;
  background: rgba(29,29,29,.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.5vh, 16px);
  pointer-events: all;
}
#screen-over.hidden { display: none; }

.go-title {
  color: #fff;
  font-size: clamp(20px, 5.5vw, 48px);
  font-weight: 900;
  letter-spacing: .2em;
}
.go-label {
  color: #666;
  font-size: clamp(9px, 1.6vw, 14px);
  letter-spacing: .15em;
}
.go-score {
  color: #fff;
  font-size: clamp(28px, 8vw, 68px);
  font-weight: 900;
  line-height: 1;
}
.go-best {
  color: #555;
  font-size: clamp(9px, 1.6vw, 13px);
  letter-spacing: .1em;
}

/* ── Kočka: rozměry a pozice svázány s logickou mřížkou ──
   CAT_W=52, LW=480  → width  = 52/480 = 10.833%
   CAT_H=46, LH=270  → height = 46/270 = 17.037%
   FLOOR_Y=218       → bottom = (270-218)/270 = 19.259%  */
#cat-wrap {
  position: absolute;
  bottom: 19.259%;
  left: 0;
  width: 10.833%;
  height: 17.037%;
  pointer-events: none;
}
#cat-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transform-origin: center center;
}
/* Animace chůze řešena JS přepínáním src snímků – žádné CSS keyframes */