* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  background: #87c7ef;
}
#game, #game canvas { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#topbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(18, 62, 30, .6); border: 3px solid #fff; border-radius: 14px;
  padding: 8px 18px;
}
#hud-level { font-weight: bold; font-size: 18px; white-space: nowrap; }
#hud-score { font-weight: bold; font-size: 18px; color: #ffe27a; }
#hud-timer-wrap { width: 140px; height: 14px; background: rgba(0,0,0,.4); border: 2px solid #fff; border-radius: 8px; overflow: hidden; }
#hud-timer-bar { height: 100%; width: 100%; background: #7ddc5a; transition: width .2s linear, background .3s; }
#hud-timer-bar.low { background: #ef5a5a; }
#hud-time { font-weight: bold; min-width: 44px; font-size: 16px; }
#hud-pen {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(18, 62, 30, .6); border: 3px solid #fff; border-radius: 12px;
  padding: 8px 16px; font-weight: bold; font-size: 18px;
}
#hud-bark {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(18, 62, 30, .6); border: 3px solid #fff; border-radius: 12px;
  padding: 8px 16px; font-weight: bold; font-size: 16px;
}
#hud-bark.ready { color: #ffe27a; }
#hud-bark.cooling { color: #bcd8c8; }
#hud-controls { position: absolute; right: 16px; bottom: 66px; font-size: 13px; opacity: .9; }

/* ---------- Banner ---------- */
#banner {
  position: fixed; top: 21%; left: 50%; transform: translateX(-50%);
  font-size: 30px; font-weight: bold; color: #fff;
  text-shadow: 0 3px 0 rgba(0,0,0,.4); opacity: 0;
  transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
#banner.show { opacity: 1; animation: pop .3s ease; }
@keyframes pop {
  0% { transform: translateX(-50%) scale(.6); }
  60% { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ---------- Screens ---------- */
#menu, #overlay, #intro {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8, 38, 18, .6); color: #fff; text-align: center;
}
#menu h1, #overlay h2 {
  font-size: 54px; color: #ffe27a; text-shadow: 0 4px 0 rgba(0,0,0,.35);
  letter-spacing: 1px;
}
#menu .sub { font-size: 18px; margin-top: 6px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#menu h2 { font-size: 22px; margin-top: 22px; }
#breeds { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 16px 0 20px; max-width: 900px; }
.breed-card {
  width: 200px; padding: 14px; cursor: pointer;
  border: 4px solid #fff; border-radius: 16px;
  background: rgba(255,255,255,.14);
  transition: transform .12s, background .12s;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.breed-card:hover { transform: translateY(-4px); }
.breed-card.selected { background: rgba(255, 236, 140, .4); transform: scale(1.07); }
.dog-chip {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 8px;
  border: 3px solid #fff; box-shadow: inset -6px -6px 0 rgba(0,0,0,.25);
}
.breed-name { font-weight: bold; font-size: 17px; }
.breed-desc { font-size: 13px; opacity: .9; margin-top: 2px; }
.breed-stats { font-size: 12px; margin-top: 8px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 4px; }
button {
  font: inherit; font-weight: bold; font-size: 22px;
  padding: 12px 36px; border-radius: 14px; cursor: pointer;
  border: 4px solid #fff; background: #5aa84a; color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.3);
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
#howto {
  margin-top: 20px; max-width: 660px; line-height: 1.55; font-size: 15px;
  background: rgba(0,0,0,.35); border-radius: 12px; padding: 12px 22px;
}
#intro h2 { font-size: 44px; color: #ffe27a; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
#intro p {
  font-size: 19px; max-width: 640px; margin-top: 14px; line-height: 1.5;
  background: rgba(0,0,0,.4); padding: 12px 22px; border-radius: 12px;
}
#overlay p { font-size: 20px; margin: 12px 0 6px; }
#overlay-stats { font-size: 16px; opacity: .9; margin-bottom: 16px; }