/* PACKMAN · REAL WORLD — 8-bit styling */

:root {
  --maze: #2121de;
  --pac: #ffe600;
  --pellet: #ffb897;
  --text: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: 'Press Start 2P', monospace;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- Карта (собственный движок) ---------- */
#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000;
  touch-action: none;
  cursor: grab;
}
#map:active { cursor: grabbing; }

/* Обработка тайлов.
   dark — тёмная аркадная тема (инверсия классического OSM + синий тон лабиринта) */
#map.style-dark {
  filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(1.18) saturate(.3)
          sepia(.85) hue-rotate(180deg) saturate(1.7) brightness(1.05);
}
#map.style-osm {
  filter: contrast(1.08) saturate(1.15) brightness(1.02);
}
#map.style-hot {
  filter: grayscale(.85) brightness(.62) contrast(1.7) sepia(1) hue-rotate(190deg) saturate(2.8);
}
#map { transition: filter .35s ease; }

#attrib {
  position: fixed;
  right: 6px; bottom: 4px;
  z-index: 1050;
  font-size: 8px;
  color: #8a8ac8;
  background: rgba(0,0,0,.65);
  padding: 3px 6px;
  pointer-events: none;
  font-family: monospace;
}

/* ---------- Игровой canvas (спрайты, круги) ---------- */
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 450;
  pointer-events: none;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  pointer-events: none;
  text-shadow: 2px 2px 0 #000;
}
.hud-col { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.hud-col.center { align-items: center; }
.hud-col.right { align-items: flex-end; }
.hud-label { font-size: 8px; color: #9a9ad8; letter-spacing: 1px; }

#hud-lives { display: flex; gap: 6px; min-height: 16px; }
.life {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: conic-gradient(var(--pac) 0 55deg, transparent 55deg 125deg, var(--pac) 125deg 360deg);
  box-shadow: 0 0 0 2px #000;
}

#power-wrap {
  position: fixed;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 8px;
  z-index: 1100;
  border: 2px solid var(--pac);
  background: #000;
  pointer-events: none;
}
#power-bar { height: 100%; width: 100%; background: var(--pac); }

/* ---------- Кнопки ---------- */
#side-btns {
  position: fixed;
  right: 10px; bottom: 40px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iconbtn {
  width: 46px; height: 46px;
  font-family: inherit;
  font-size: 18px;
  color: var(--pac);
  background: #000;
  border: 3px solid var(--maze);
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
}
.iconbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  left: 50%; bottom: 90px;
  transform: translateX(-50%);
  z-index: 1200;
  padding: 10px 14px;
  font-size: 9px;
  background: #000;
  border: 3px solid var(--pac);
  color: var(--pac);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Оверлеи ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px 16px;
}
.overlay.solid { background: rgba(0, 0, 0, .93); }
.overlay.light { background: transparent; pointer-events: none; z-index: 1500; }

/* Заставка: кадр с гигантским Pacman (фон) + градиент затемнения */
.overlay.splash {
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.88) 100%),
    url('../img/splash.jpg') center 22% / cover no-repeat;
}
.overlay.splash .title {
  text-shadow: 0 0 18px rgba(255,230,0,.55), 4px 4px 0 var(--maze), 7px 7px 0 #000;
}
.hidden { display: none !important; }

.title {
  color: var(--pac);
  font-size: clamp(26px, 7vw, 46px);
  letter-spacing: 3px;
  text-shadow: 4px 4px 0 var(--maze), 7px 7px 0 #000;
}
.title.small { font-size: clamp(18px, 5vw, 28px); }
.title.red { color: #ff3b3b; text-shadow: 4px 4px 0 #600, 7px 7px 0 #000; }
.subtitle {
  color: var(--maze);
  font-size: clamp(10px, 2.6vw, 14px);
  letter-spacing: 6px;
  text-shadow: 2px 2px 0 #000;
}
.sub { font-size: clamp(9px, 2.4vw, 12px); line-height: 1.9; color: #cfcfff; }
.ready {
  font-size: clamp(18px, 5vw, 30px);
  color: var(--pac);
  background: rgba(0,0,0,.75);
  border: 4px solid var(--maze);
  padding: 14px 22px;
  text-shadow: 3px 3px 0 var(--maze);
}

.infobox {
  border: 3px solid var(--maze);
  padding: 14px 16px;
  max-width: 560px;
  font-size: 8px;
  line-height: 2;
  color: #b9b9ee;
  background: rgba(0,0,20,.5);
}
.infobox p { margin: 4px 0; }

.btn {
  font-family: inherit;
  font-size: 12px;
  color: var(--pac);
  background: var(--maze);
  border: 4px solid var(--pac);
  padding: 14px 22px;
  cursor: pointer;
  box-shadow: 0 6px 0 #000;
  letter-spacing: 1px;
}
.btn.big { font-size: 15px; padding: 18px 30px; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #000; }

.hint { font-size: 8px; color: #7a7ab8; line-height: 1.9; max-width: 560px; }
.hint b { color: #b9b9ee; }

.row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* Мобильные правки */
@media (max-width: 600px) {
  .hud-col { font-size: 9px; }
  .hud-label { font-size: 7px; }
  #power-wrap { top: 46px; width: 140px; }
  .iconbtn { width: 42px; height: 42px; }
}