:root {
  --bg: #07050a;
  --ink: #f7ead2;
  --dim: #8d7a60;
  --amber: #f5a524;
  --amber2: #ffcf5a;
  --beer: #f2b632;
  --beer-dark: #b06c0a;
  --beer-foam: #fff6e0;
  --drunk: 0;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: "Unbounded", system-ui, sans-serif;
  --plate: #0b0813f2;      /* подложка: плотная сама по себе, без опоры на backdrop-filter */
  --line: #ffffff1c;
}

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

/* Прокрутки нет: экраны переключает меню. Фиксируем высоту,
   чтобы адресная строка телефона не дёргала раскладку. */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  touch-action: none;
}

#ascii { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, #0000 45%, var(--bg) 100%),
    radial-gradient(circle at 50% 45%, #00000099 0%, #0000 55%);
}
#world { position: fixed; inset: 0; z-index: 2; }
/* «Пьяный» эффект живёт на холсте, а не на предке панелей: иначе предок
   становится Backdrop Root и backdrop-filter внутри остаётся без фона. */
#ascii { filter: blur(calc(var(--drunk) * 1.4px)) saturate(calc(1 + var(--drunk) * .4)); transition: filter .8s; }

/* ---------- шапка ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; font-size: 13px;
  background: #0a0710ef; border-bottom: 1px solid #ffffff14;
  backdrop-filter: blur(10px) saturate(1.2);
}
.logo { font-family: var(--display); font-weight: 900; font-size: 19px; color: var(--amber); }
.logo span { color: var(--beer-foam); }
.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stats > span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: #ffffff0e; border: 1px solid #ffffff1a; color: #c9b795;
}
.stats b { color: var(--amber2); font-variant-numeric: tabular-nums; }
.promille i { font-style: normal; color: var(--beer-foam); margin-left: 6px; }
.ctrl { display: flex; gap: 8px; }
.chip {
  font: inherit; color: var(--ink); background: #ffffff0d;
  border: 1px solid #ffffff22; border-radius: 99px; padding: 6px 12px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { background: #f5a52422; border-color: var(--amber); }
.chip.on { background: var(--amber); color: #150c04; border-color: var(--amber); }
.chip:disabled { opacity: .45; cursor: not-allowed; }

.happy {
  position: fixed; top: 56px; inset-inline: 0; z-index: 29;
  padding: 6px; text-align: center; font-weight: 700; letter-spacing: .1em; color: #150c04;
  background: repeating-linear-gradient(45deg, var(--amber) 0 20px, var(--amber2) 20px 40px);
  animation: blink .5s steps(2) infinite;
}
@keyframes blink { 50% { filter: brightness(1.2); } }

/* ---------- меню слева ---------- */
.menu {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 25;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 18px;
  background: var(--plate); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 60px -28px #000;
}
.mi {
  display: flex; align-items: center; gap: 10px;
  font: inherit; color: #bfae8e; cursor: pointer;
  padding: 11px 16px 11px 12px; border-radius: 12px;
  background: #0000; border: 1px solid #0000;
  transition: background .18s, color .18s, border-color .18s;
}
.mi .k { font-size: 11px; color: #6f5c44; transition: color .18s; }
.mi .t { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .01em; }
.mi:hover { background: #ffffff0e; color: var(--beer-foam); }
.mi[aria-current="true"] {
  background: #f5a5241f; border-color: #f5a52455; color: var(--amber2);
}
.mi[aria-current="true"] .k { color: var(--amber); }

/* ---------- экраны ---------- */
.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none; }
/* Анимацию держим на САМОМ элементе с backdrop-filter, не на родителе. */
/* ВАЖНО: .pane и .hud центрируются свойством transform, поэтому их
   анимация не имеет права его трогать — иначе центрирование стирается
   и панель уезжает в угол. Для них только прозрачность. */
.screen.on .pane, .screen.on .hud { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* У заголовка и подзаголовка transform свободен — им можно и сдвиг. */
.screen.on .title, .screen.on .sub { animation: fadeUp .3s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 01 — налить */
.over { position: absolute; inset-inline: 0; top: 13vh; text-align: center; pointer-events: none; }
.title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(42px, 9vw, 142px); line-height: .9; letter-spacing: -.045em;
  text-shadow: 0 0 40px #000, 0 0 90px #000, 0 6px 60px #f5a52466;
}
.title .a { color: var(--amber); }
.title .b { color: #fff8e8; }
.title .ch { display: inline-block; animation: hang 3.4s ease-in-out infinite; }
@keyframes hang { 50% { transform: translateY(-5px); } }
.sub {
  display: inline-block; margin-top: 16px; padding: 9px 18px; border-radius: 99px;
  color: #f3e6cf; font-size: clamp(12px, 1.6vw, 16px);
  background: #0a0710cc; border: 1px solid #ffffff14; backdrop-filter: blur(8px);
}
.sub em { font-style: normal; color: var(--amber2); border-bottom: 1px dashed currentColor; }

.hud {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  width: min(400px, 90vw); text-align: center;
  padding: 18px 20px 20px; border-radius: 20px;
  background: var(--plate); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 24px 60px -24px #000, inset 0 1px 0 #ffffff12;
}
.phase { font-family: var(--display); font-weight: 500; font-size: 15px; min-height: 1.4em; color: #fff6e4; }
.ml { margin-top: 9px; color: #bfae8e; font-size: 13px; }
.ml b { color: var(--amber2); font-variant-numeric: tabular-nums; }
.ml span { color: var(--beer); }
.meter { margin-top: 12px; height: 6px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--beer-dark), var(--beer), var(--beer-foam)); }
.drink {
  margin-top: 14px; width: 100%;
  font-family: var(--display); font-weight: 900; font-size: 15px;
  padding: 15px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--amber); color: #150c04;
  box-shadow: 0 5px 0 #8f5205, 0 10px 34px #f5a52455;
  transition: transform .1s, box-shadow .15s, opacity .3s, filter .3s;
}
.drink:active { transform: translateY(4px); box-shadow: 0 1px 0 #8f5205; }
.drink:disabled { opacity: .2; filter: grayscale(1); cursor: not-allowed; box-shadow: none; }
.drink:not(:disabled) { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 5px 0 #8f5205, 0 10px 48px #ffcf5aaa; } }

.scroll-hint {
  position: absolute; left: 50%; bottom: calc(4.5vh + 205px); transform: translateX(-50%);
  color: var(--amber); line-height: 1.1; text-align: center;
  padding: 7px 14px; border-radius: 99px;
  background: #0a0710cc; border: 1px solid #ffffff14; backdrop-filter: blur(8px);
  animation: bob 1.5s ease-in-out infinite; transition: opacity .4s;
}
@keyframes bob { 50% { transform: translate(-50%, 9px); } }

.flyouts { position: absolute; inset: 0; pointer-events: none; }
.flyouts span {
  position: absolute; left: 50%; top: 52%;
  font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--amber2);
  white-space: nowrap; text-shadow: 0 0 24px #f5a524;
  animation: fly 1.4s ease-out forwards;
}
@keyframes fly {
  from { transform: translate(-50%, 0) scale(.6); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), -230px) scale(1.25) rotate(var(--rot)); opacity: 0; }
}

/* 02, 03 — панели. Свой скролл внутри, страница неподвижна. */
.pane {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1000px, calc(100vw - 230px)); max-height: 76vh;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 28px 30px; border-radius: 22px;
  background: var(--plate); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 30px 80px -30px #000;
}
.pane.center { text-align: center; width: min(820px, calc(100vw - 230px)); }
.pane::-webkit-scrollbar { width: 8px; }
.pane::-webkit-scrollbar-thumb { background: #ffffff22; border-radius: 99px; }
.kicker { color: var(--dim); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
h2 { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 4vw, 46px); letter-spacing: -.03em; color: var(--beer-foam); margin-top: 8px; }
.pane-sub { color: var(--dim); margin: 10px 0 24px; font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card {
  --c: var(--beer);
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
  background: linear-gradient(160deg, #ffffff0c, #ffffff03);
  border: 1px solid #ffffff18; border-radius: 16px; padding: 18px;
  transition: transform .22s cubic-bezier(.3,1.6,.5,1), border-color .2s, box-shadow .2s;
}
.card::before {
  content: ""; position: absolute; inset: auto -30% -65% -30%; height: 85%;
  background: radial-gradient(closest-side, var(--c), #0000); opacity: .16; transition: opacity .3s;
}
.card > * { position: relative; }
.card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 20px 42px -22px var(--c); }
.card:hover::before { opacity: .33; }
.card.active { border-color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.card pre { color: var(--c); font-size: 12px; line-height: 1.15; margin-bottom: 12px; }
.card h3 { font-family: var(--display); font-weight: 800; font-size: 17px; }
.card .style { color: var(--dim); font-size: 12px; margin-top: 4px; }
.card .desc { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #d6c3a4; }
.card .tags { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.card .tags span { font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid #ffffff22; }

.toast-screen {
  margin: 26px auto 22px; max-width: 700px; min-height: 150px;
  padding: 22px; text-align: left; white-space: pre-wrap;
  font-size: 16px; line-height: 1.5;
  background: #040704; color: #8dff9a;
  border: 1px solid #1d3a1f; border-radius: 14px;
  box-shadow: inset 0 0 60px -10px #3cff6a33;
  text-shadow: 0 0 8px #3cff6a88;
}
.cursor { animation: blink2 1s steps(2) infinite; }
@keyframes blink2 { 50% { opacity: 0; } }
.big-btn {
  font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: .04em;
  padding: 15px 36px; border-radius: 99px; border: 2px solid var(--amber);
  background: #0000; color: var(--amber); cursor: pointer;
  transition: background .2s, color .2s, transform .1s;
}
.big-btn:hover { background: var(--amber); color: #150c04; }
.big-btn:active { transform: scale(.96); }
.big-btn:disabled { opacity: .4; cursor: wait; }
.fine { margin-top: 16px; color: var(--dim); font-size: 12px; }
.fine.dim { color: #55472f; margin-top: 6px; }

/* Если backdrop-filter недоступен, подложки держатся на собственном фоне.
   Делаем его гуще, чтобы текст не терялся на ASCII-сцене. */
@supports not (backdrop-filter: blur(1px)) {
  .bar { background: #0a0710fb; }
  .menu, .hud, .pane { background: #0b0813fb; }
  .sub, .scroll-hint { background: #0b0813f2; }
}

.rain {
  position: fixed; top: -90px; z-index: 60; pointer-events: none;
  color: var(--amber); font-size: 12px; line-height: 1;
  text-shadow: 0 0 10px #f5a52499; animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(118vh) rotate(var(--rot)); } }

/* ---------- узкие экраны ---------- */
@media (max-width: 860px) {
  .stats { display: none; }
  .bar { padding: 10px 14px; gap: 10px; }
  .logo { font-size: 17px; }
  .chip { padding: 5px 10px; font-size: 12px; }
  /* меню уезжает вниз, в ряд: слева на телефоне оно съело бы сцену */
  .menu {
    left: 50%; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    transform: translateX(-50%); flex-direction: row; gap: 4px; padding: 6px;
  }
  .mi { padding: 9px 13px; }
  .mi .k { display: none; }
  .over { top: max(11vh, 78px); }
  .hud { bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); padding: 14px 16px 16px; }
  .scroll-hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 78px + 185px); }
  .pane { width: calc(100vw - 28px); max-height: calc(100vh - 190px); padding: 20px 18px; }
  .pane.center { width: calc(100vw - 28px); }
  .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
}

/* ландшафт телефона: высоты мало */
@media (max-height: 520px) and (orientation: landscape) {
  .stats { display: none; }
  .bar { padding: 8px 14px; }
  .menu { left: 12px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 4px; }
  .mi { padding: 8px 12px; }
  .mi .k { display: none; }
  .over {
    top: 50%; left: 120px; right: auto; transform: translateY(-50%);
    width: min(300px, 32vw); text-align: left;
  }
  .title { font-size: clamp(26px, 5.2vh, 48px); }
  .sub { margin-top: 8px; padding: 6px 12px; font-size: 11px; }
  .scroll-hint { display: none; }
  .hud {
    left: auto; right: 16px; bottom: 50%; transform: translateY(50%);
    width: min(290px, 33vw); padding: 11px 13px 13px;
  }
  .phase { font-size: 13px; min-height: 2.6em; }
  .ml { margin-top: 6px; font-size: 12px; }
  .drink { padding: 10px; font-size: 13px; margin-top: 9px; }
  .pane { left: auto; right: 16px; transform: translateY(-50%); width: calc(100vw - 150px); max-height: calc(100vh - 80px); padding: 16px; }
  .pane.center { width: calc(100vw - 150px); }
  .toast-screen { min-height: 90px; font-size: 14px; padding: 14px; margin: 14px auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .title .ch, .scroll-hint, .drink:not(:disabled), .happy,
  .screen.on .pane, .screen.on .hud, .screen.on .title, .screen.on .sub { animation: none; }
}