/* Pixel World War I — всё в пиксельном стиле: шрифт Press Start 2P, ступенчатые рамки, анимации по кадрам (steps) */
:root {
  --t: #2aabee; --t-dark: #0b5f8f;
  --r: #ff4500; --r-dark: #8f2600;
  --ink: #0b0f1a; --paper: #f4f1e8;
  --top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --bottom: max(12px, env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --px: 'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font: 12px/1.7 var(--px); -webkit-font-smoothing: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--top) + 16px) 16px var(--bottom); }
.screen[hidden] { display: none; }

/* ---------- кнопки: толстая пиксельная рамка, нажатие — сдвиг на пиксель ---------- */
.btn { position: relative; min-height: 48px; padding: 12px 18px; border: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset -4px -4px 0 0 #bdb7a6; }
.btn:active { transform: translateY(3px); box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 4px 4px 0 0 #bdb7a6; }
.btn:disabled { opacity: .55; }
.btn-play { background: #ffd635; font-size: 16px; }
.btn-r { background: var(--r); color: #fff; box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset -4px -4px 0 0 var(--r-dark); }
.btn-small { min-height: 44px; min-width: 44px; padding: 8px 12px; }

/* ---------- меню ---------- */
#menu { background: url(/assets/keyart.png) center bottom / cover no-repeat; image-rendering: pixelated; }
#menu::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 15, 26, .92) 0, rgba(11, 15, 26, .35) 45%, rgba(11, 15, 26, .75) 100%); pointer-events: none; }
#menu > * { position: relative; }
.title { margin: 18px 0 8px; text-align: center; line-height: 1.25; text-shadow: 4px 4px 0 var(--ink); }
.title span { display: block; font-size: clamp(26px, 9vw, 40px); }
.title span + span { font-size: clamp(14px, 4.8vw, 20px); color: #ffd635; }
.title b { color: var(--r); }
.clash { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.hero { width: 120px; height: 120px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .6)); animation: bob 1.2s steps(2) infinite; }
.hero-r { animation-delay: -.6s; }
.vs { font-size: 22px; color: #ffd635; text-shadow: 3px 3px 0 var(--ink); animation: pulse 1.6s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: scale(1.15); } }
.scorebar { display: flex; width: min(340px, 90vw); height: 16px; margin-top: 14px; background: var(--ink); box-shadow: 0 0 0 4px var(--ink); }
.scorebar i { display: block; height: 100%; transition: width .6s steps(8); }
.bar-t { background: var(--t); width: 50%; } .bar-r { background: var(--r); width: 50%; }
.scores { display: flex; justify-content: space-between; width: min(340px, 90vw); margin-top: 10px; font-size: 10px; text-shadow: 2px 2px 0 var(--ink); }
.scores .t b, .t { color: var(--t); } .scores .r b, .r { color: var(--r); }
.buttons { display: grid; gap: 18px; width: min(300px, 84vw); margin-top: auto; margin-bottom: 18px; }
.who { margin: 0 0 8px; font-size: 9px; text-align: center; color: #cfc9b8; text-shadow: 2px 2px 0 var(--ink); }
/* облака на небе — плывут по кадрам */
.sky { position: absolute !important; inset: 0; overflow: hidden; pointer-events: none; }
.sky i { position: absolute; width: 72px; height: 16px; background: rgba(244, 241, 232, .5); box-shadow: 16px -8px 0 0 rgba(244, 241, 232, .5), 32px 0 0 0 rgba(244, 241, 232, .5); animation: drift 26s steps(52) infinite linear; }
.sky i:nth-child(1) { top: 22%; left: -90px; }
.sky i:nth-child(2) { top: 31%; left: -90px; animation-delay: -9s; animation-duration: 34s; }
.sky i:nth-child(3) { top: 15%; left: -90px; animation-delay: -18s; animation-duration: 40s; }
@keyframes drift { to { transform: translateX(calc(100vw + 180px)); } }

/* ---------- битва ---------- */
#battle { padding-left: 0; padding-right: 0; background: #070a12; }
.hud { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 12px 10px; }
.hud-score { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 9px; }
.scorebar.mini { flex: 1; width: auto; min-width: 0; height: 10px; margin: 0; box-shadow: 0 0 0 3px var(--ink); }
.hud-score { min-width: 0; }
.ammo { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; }
.ammo b { font-size: 16px; color: #ffd635; }
.ammo span { font-size: 8px; color: #9a9483; }
.field { position: relative; flex: 1; width: 100%; overflow: hidden; touch-action: none; background:
  repeating-conic-gradient(#0d1220 0 25%, #0a0e19 0 50%) 0 0 / 16px 16px; }
.map { position: absolute; left: 0; top: 0; width: 96px; height: 96px; transform-origin: 0 0; box-shadow: 0 0 0 2px #2c3346; }
#board { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.cursor { position: absolute; width: 1px; height: 1px; outline: .18px solid #fff; box-shadow: 0 0 0 .3px #000; animation: blink 1s steps(2) infinite; pointer-events: none; }
@keyframes blink { 50% { outline-color: #ffd635; } }
.dock { width: 100%; padding: 10px 12px 0; background: #0b0f1a; box-shadow: 0 -4px 0 0 #1b2133; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
.palette button { aspect-ratio: 1; border: 0; box-shadow: 0 0 0 3px var(--ink); }
.palette button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); transform: translateY(-3px); }
.dock-row { display: flex; gap: 14px; align-items: center; padding: 4px 4px 6px; }
.btn-place { flex: 1; background: #ffd635; }

/* ---------- правила ---------- */
#howto { justify-content: center; background: url(/assets/keyart.png) center / cover; image-rendering: pixelated; }
.panel { max-width: 360px; padding: 18px; background: var(--paper); color: var(--ink); line-height: 1.9; font-size: 10px;
  box-shadow: 0 -6px 0 0 var(--ink), 0 6px 0 0 var(--ink), -6px 0 0 0 var(--ink), 6px 0 0 0 var(--ink), inset -6px -6px 0 0 #bdb7a6; }
.panel h2 { margin: 0 0 12px; font-size: 14px; }
.panel .t { color: var(--t-dark); } .panel .r { color: var(--r-dark); }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottom) + 150px); transform: translate(-50%, 20px); max-width: 90vw; padding: 10px 14px; background: var(--ink); color: #fff; font-size: 9px; box-shadow: 0 0 0 3px #fff; opacity: 0; transition: opacity .2s steps(2), transform .2s steps(2); pointer-events: none; z-index: 9; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .hero, .vs, .sky i, .cursor { animation: none; } }