@import url('css2');

:root {
  --yellow:#f0e040; --black:#000; --white:#fff; --grey-hair:#a49997; --skin:#d2c0b4;
  --snake-green:#32cd32; --ui-dark-blue:#19443b; --ui-mid-blue:#2a9069; --ui-light-blue:#53d491;
  --stat-green:#32cd32; --stat-red:#e63946; --gold:#ffd700; --desk-brown:#38281d;
  --border:#53d491;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% 0%, #0b2015, #050b09 60%, #000000);
  font-family: 'Press Start 2P', cursive;
  color: var(--white);
  display: flex; flex-direction: column; overflow: hidden;
  image-rendering: pixelated;
}

/* — Topbar (обновлено под .ux-topbar) — */
.ux-topbar {
  position: sticky; top:0; z-index:1000;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 2px solid var(--border);
  background: #19443b; backdrop-filter: blur(4px);
}
.ux-topbar .brand { letter-spacing: 1px; text-shadow: 0 2px 0 #000; }
.ux-topbar .spacer { flex: 1; }
.chip {
  font: inherit; color: var(--white); background: #1a5a44; border: 2px solid var(--border);
  padding: 6px 10px; cursor: pointer; border-radius: 10px;
}
.chip:hover { background:#19443b; }

/* — Layout — */
#game-container { flex: 1; display: grid; place-items: center; padding: 10px; }
#game-window {
  width: min(1100px, 96vw);
  aspect-ratio: 4/3;
  border: 6px solid #19443b;
  background: #294a43; box-shadow: 0 0 40px #000 inset, 0 0 24px #1e2e2b;
  display: grid; grid-template-rows: 60% 40%;
  overflow: hidden; position: relative;
}
.hidden { display: none !important; }

/* — Screen — */
#screen { position: relative; overflow: hidden; background: #0f3929; }
.vignette { pointer-events:none; position:absolute; inset:0; box-shadow: inset 0 0 120px 40px #000; }
.crt-scanline { position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 50%);
  background-size: 100% 4px; mix-blend-mode: multiply;
}
.grid { position:absolute; inset:0; background:
  linear-gradient(#19443b 1px, transparent 1px) 0 0 / 100% 18px,
  linear-gradient(90deg, #19443b 1px, transparent 1px) 0 0 / 18px 100%;
  opacity:.30;
}
.stars { position:absolute; inset:-200% -200%;
  background:
    radial-gradient(2px 2px at 20% 10%, #9bd2ff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 30%, #9bd2ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 70%, #9bd2ff 50%, transparent 51%);
  animation: drift 60s linear infinite; opacity:.22;
}
@keyframes drift { to { transform: translate3d(-10%, -10%, 0) } }

/* — Character — */
#alon-character { position: absolute; z-index: 1; bottom: 0; left: 50%; width: 128px; height: 120px; animation: idle-breath 4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes idle-breath { 0%,100%{ transform: translateX(-50%) scale(2.1) translateY(0) } 50%{ transform: translateX(-50%) scale(2.1) translateY(-2px) } }
.part { position: absolute; }
.head { top: 0; left: 0; width: 0%; height: 100px; }
.bandana-yellow { top: 0; left: 14px; width: 100px; height: 96px; background: var(--yellow); box-shadow: inset 0 -6px 0 #d3c22f; }
.bandana-black { top: 0; left: 74px; width: 54px; height: 96px; background: var(--black); }
.gadsden-snake { top: 12px; left: 18px; width: 16px; height: 24px; background: var(--snake-green); }
.hair { top: 64px; left: 0; width: 128px; height: 80px; background: var(--grey-hair); }
.face { top: 80px; left: 16px; width: 96px; height: 72px; background: var(--skin); }
.nose { top: 30px; left: 44px; width: 8px; height: 10px; background: rgba(0,0,0,0.1); }
.glasses { top: 78px; left: 8px; width: 112px; height: 40px; background: var(--white); border: 2px solid var(--black); box-sizing: border-box; }
.lens { top: 4px; width: 40px; height: 28px; background: var(--black); }
.lens.left { left: 8px; } .lens.right { right: 8px; }
.mouth { bottom: 16px; left: 36px; width: 24px; height: 4px; background: var(--black); }
.body { top: 152px; left: 10px; width: 108px; height: 100px; }
.shirt { top: 0; left: 10px; width: 88px; height: 80px; background: var(--white); color: var(--black); font-size: 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.2; border: 2px solid var(--black); }
.shirt-text { display: block; }
.arm { width: 18px; height: 60px; background-color: var(--skin); top: 5px; }
.arm.left { left: -4px; } .arm.right { right: -4px; }
.desk { background: var(--desk-brown); bottom: 0; left: -20px; width: 170px; height: 30px; border-top: 5px solid #5a4536; }

/* — State anims — */
#alon-character.shill { animation: shill-anim .2s linear infinite, idle-breath 4s ease-in-out infinite; }
@keyframes shill-anim { 0% { transform: translateX(-50%) scale(2.1) } 50% { transform: translateX(-51%) scale(2.1) } }
#alon-character.shill .arm { transform: translateY(-3px); }
#alon-character.ban .glasses { animation: ban-glare .2s forwards; }
@keyframes ban-glare { 50% { box-shadow: -10px -5px 10px var(--white) } 100% { box-shadow: none } }
#alon-character.ama .head { transform: translateY(-2px); }

/* — HUD — */
.hud-text { position: absolute; z-index: 3; color: var(--white); padding: 8px; font-size: 0.95em; text-shadow: 3px 3px var(--black); width: 100%; pointer-events:none; }
#market-cap { top: 8px; left: 8px; width: auto; background: #0008; padding: 6px 8px; border: 2px solid var(--ui-mid-blue); border-radius: 8px; }
#market-cap.increase { color: var(--stat-green); transform: scale(1.03); }
#market-cap.decrease { color: var(--stat-red); transform: scale(0.98); }

#event-log { bottom: 8px; left: 0; right: 0; color: var(--gold); font-size: 0.9em; text-align:center; }
#event-log.good { color: var(--stat-green) !important; }
#event-log.bad { color: var(--stat-red) !important; }

/* — Bottom UI (компактнее) — */
#ui-panel {
  background: #0d1a17; border-top: 6px solid #19443b;
  padding: 12px 14px; display: grid; grid-template-columns: 1fr; gap: 10px;
}
#stats-panel { display: grid; gap: 10px; }
.stat { display:flex; align-items:center; gap: 10px; }
.stat label { width: 86px; text-shadow: 0 2px 0 #000; font-size: 0.85em; }
.bar-container { flex:1; height: 18px; border: 2px solid #000; border-radius: 4px; background:#0a0a0a; padding: 2px; overflow: hidden; }
.bar {
  height: 100%; width: 50%; background: linear-gradient(90deg, #19443b, #2cf58a);
  position: relative; transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.bar::after {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.15) 0 10px, transparent 10px 20px);
  mix-blend-mode: overlay; animation: stripes 1.6s linear infinite;
}
@keyframes stripes { to { transform: translateX(20px) } }
.bar.fud { background: linear-gradient(90deg, #f54e4e, #ff6d6d); }

#actions-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* — Pixel buttons — */
.pixel-btn {
  position: relative; font: inherit; color: var(--white); background: #19443b;
  border: 0; padding: 12px 14px; cursor: pointer; text-align: center;
  box-shadow:
    0 3px 0 #0e3328,
    inset 0 -3px 0 #163f2a,
    inset 0 3px 0 #236040;
  transition: transform .06s ease, box-shadow .06s ease;
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.pixel-btn span {
  display:inline-grid; place-items:center; width: 22px; height: 22px;
  border: 2px solid #53d491; background:#0b3023; font-size: .75em; border-radius: 6px;
}
.pixel-btn:hover { filter: brightness(1.12); }
.pixel-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #0e1633,
    inset 0 -1px 0 #0b1330,
    inset 0 2px 0 #28408b;
}
.pixel-btn:disabled { filter: grayscale(.85) brightness(.7); cursor:not-allowed; }

/* — Footer — */
#page-footer {
  text-align: center; padding: 12px; font-size: 12px; color: #53d491;
  border-top: 2px solid var(--border);
  box-shadow: 0 -2px 0 #0e1633;
  background: repeating-linear-gradient(0deg, #53d491 0 4px, #0a1a12 4px 8px);
}
#page-footer a { color: var(--white); text-decoration: none; }
#page-footer a:hover { color: var(--ui-light-blue); box-shadow: #0b3029; }

/* — Finals — */
.final-screen { z-index: 100; position: fixed; inset: 0; background: rgba(0,0,0,.9);
  display:grid; place-items:center; text-align:center; gap:10px; }
.final-screen h1 { font-size: 2.1em; margin: 0 0 10px; }
#win-screen h1 { color: var(--gold); text-shadow: 0 0 20px var(--gold); }
#lose-screen h1 { color: var(--stat-red); text-shadow: 0 0 20px var(--stat-red); }

/* — Медиа-компакт — */
@media (max-width: 900px) {
  #game-window { width: 98vw; grid-template-rows: 58% 42%; }
  .stat label { width: 72px; font-size: 0.8em; }
  #actions-panel { grid-template-columns: 1fr; }
}

/* — Transparent header + square buttons — */
.ux-topbar{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background: transparent;            /* прозрачный хедер */
  border-bottom: none;                /* убираем линию */
  backdrop-filter: none;              /* без блюра */
}

.ux-topbar .brand{
  letter-spacing:1px;
  text-shadow:0 2px 0 #000;
  text-transform: lowercase;    
  margin-left: 14px;      /* стилистика под pumpgotchi */
}

/* базовый стиль кнопки */
.chip{
  font:inherit; color:#e9efff;
  background: transparent; border:2px solid var(--border);
  cursor:pointer;
  box-shadow:0 2px 0 #19443b, inset 0 -2px 0 #0b1330;
  transition:transform .06s ease, filter .06s ease;
}

/* квадратная форма и выравнивание иконки */
.chip.square{
  width:40px; height:40px; padding:0;       /* 1:1 квадрат */
  border-radius:0;                           /* острые углы */
  display:grid; place-items:center;          /* иконка по центру */
}

/* отклик */
.chip:hover{ filter:brightness(1.12) }
.chip:active{ transform:translateY(1px) }

/* при узких экранах делаем кнопки чуточку меньше */
@media (max-width: 900px){
  .chip.square{ width:36px; height:36px; }
}

/* === Layout tweak: smaller game window, bigger footer === */

/* Чуть меньше окно игры + ограничение по высоте экрана */
#game-window{
  width: min(900px, 88vw);    /* было ~1100px — делаем компактнее */
  max-height: 70vh;           /* чтобы не «давило» по вертикали */
  margin-block: 6px 0;        /* меньше пустот сверху/снизу */
  grid-template-rows: 56% 44%;/* чутка больше места нижней панели */
}

/* Контейнер — компактнее паддинги, чтобы композиция не «плыла» */
#game-container{
  padding: 6px 10px;
  /* color: var(--ui-dark-blue) */
}

/* Увеличим футер: больше воздуха и читабельнее текст */
#page-footer{
  font-size: 14px;            /* было ~12px */
  padding: 18px 16px;         /* больше вертикального ритма */
  line-height: 1.6;           /* читабельность */
  border-top-width: 4px;      /* пиксельная рамка мощнее */
  box-shadow: 0 -3px 0 #0e1633;
  background: repeating-linear-gradient(
    0deg,
    #19443b 0 4px,
    #0a1a13 4px 8px
  );                           /* сохраняем пиксельный вайб */
}

/* На очень узких экранах делаем окно ещё компактнее */
@media (max-width: 900px){
  #game-window{
    width: 94vw;
    max-height: 64vh;
    grid-template-rows: 54% 46%;
  }
  #page-footer{
    font-size: 13px;
    padding: 16px 14px;
  }
}

/* ===== Character: zoom-out + details from reference ===== */

/* Сдвигаем персонажа дальше (меньше скейл) и даём лёгкую «дышалку» */
    #alon-character {
    position:absolute; z-index:1; bottom: 4px; left: 50%;
    width: 140px; height: 240px; transform-origin: bottom center;
    animation: idle-breath 4s ease-in-out infinite;
    }
    @keyframes idle-breath{
    0%,100%{ transform: translateX(-50%) scale(1.6) translateY(0) }
    50%    { transform: translateX(-50%) scale(1.6) translateY(-2px) }
    }

    /* Общие кирпичики */
    .part{ position:absolute; }
    .head{ top:0; left:0; width:50%; height:30px; }

    /* — Шапка «DON'T TREAD ON ME» —

/* Чуть компактнее HUD, чтобы персонаж «дышал» */
#market-cap{ top:6px; left:6px; padding:5px 7px; }
#event-log{ bottom:6px; font-size:.88em; }

/* экран — контейнер слоёв */
#screen { position: relative; }

/* чарт — строго самый нижний слой внутри #screen */
#bg-chart {
  position: absolute;
  inset: 0;
  z-index: 0 !important;          /* ниже всех */
  filter: blur(2px) opacity(.55);
  image-rendering: pixelated;
  pointer-events: none;
}

/* фоновые декоративные слои — поверх чарта, но ниже персонажа */
#screen .grid,
#screen .stars,
#screen .crt-scanline,
#screen .vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* персонаж и HUD — гарантированно выше */
#alon-character,
#alon8,
.hud-text,
#market-cap,
#event-log {
  position: relative;
  z-index: 5;                      /* над чартом и фоном */
}

/* магазин — над всем (на случай конфликтов) */
#shop-modal { z-index: 2147483647; }

:root{ --hero-down: 16px; } /* увеличь/уменьши по вкусу */

#alon-character,
#alon8{
  bottom: calc(0px - var(--hero-down)) !important; /* опустить ниже */
}

/* чтобы модалка магазина всё равно была выше всех */
#shop-modal{ z-index: 2147483647; }

/* === Force hero to the bottom, override everything === */
:root{
  --hero-scale: 1.25;   /* уменьши если ещё высоко (например 1.15) */
  --hero-offset: 2px;   /* отступ от нижней кромки */
}

/* родитель якорный */
#screen{ position: relative !important; }

/* сам герой */
#alon-character, #alon8{
  position: absolute !important;
  left: 50% !important;
  bottom: var(--hero-offset) !important;
  transform: translateX(-50%) scale(var(--hero-scale)) !important;
  transform-origin: bottom center !important;
  z-index: 5 !important;
}

/* переопределяем анимацию, чтобы она НЕ поднимала вверх */
@keyframes idle-breath_fixed{
  0%, 100% { transform: translateX(-50%) scale(var(--hero-scale)) translateY(0); }
  50%      { transform: translateX(-50%) scale(var(--hero-scale)) translateY(-1px); } /* едва заметно */
}

/* навешиваем нашу анимацию и глушим старую */
#alon-character, #alon8{
  animation: idle-breath_fixed 4s ease-in-out infinite !important;
}

/* на случай если где-то задано translateY в вложенных состояниях */
#alon-character.shill,
#alon-character.ama,
#alon-character.ban,
#alon8.shill,
#alon8.ama,
#alon8.ban{
  transform: translateX(-50%) scale(var(--hero-scale)) translateY(0) !important;
}

/* === починить растянутый MCAP === */
#market-cap{
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  display: inline-block !important;       /* не растягиваемся на всю ширину */
  width: auto !important;
  padding: 4px 6px !important;
  border: 2px solid var(--border, #2a3f9e) !important;
  background: #000 !important;
  z-index: 4 !important;                  /* над чартом, но не перекрывает героя */
}

/* если где-то задано .hud-text { width:100% }, перебиваем: */
.hud-text{ width: auto !important; }

/* ===== Stacking order: log above hero ===== */
#screen { position: relative !important; }

/* герой остаётся снизу экрана */
#alon-character, #alon8{
  z-index: 5 !important;
}

/* лог поверх героя */
#event-log{
  position: absolute !important;
  left: 50% !important;
  bottom: 6px !important;
  transform: translateX(-50%) !important;
  max-width: calc(100% - 24px) !important;
  width: auto !important;
  text-align: center !important;
  z-index: 6 !important;       /* ↑ выше, чем у героя */
  pointer-events: none !important;
}

/* на всякий случай — магазин всегда поверх всего */
#shop-modal{ z-index: 2147483647 !important; }