* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

/* ---- Темы ---- */
body[data-theme="cosmos"] {
  --bg1: #3a2d5b; --bg2: #2b2140; --bg3: #1c1530;
  --ink: #fff; --line: rgba(255,255,255,.55);
  --glass: rgba(255,255,255,.035); --btnbg: rgba(255,255,255,.12); --btnline: rgba(255,255,255,.25);
  --bubble: rgba(255,255,255,.06);
}
body[data-theme="candy"] {
  --bg1: #ffe9f2; --bg2: #ffd6e5; --bg3: #f7bcd4;
  --ink: #6d2947; --line: rgba(109,41,71,.5);
  --glass: rgba(255,255,255,.20); --btnbg: rgba(109,41,71,.1); --btnline: rgba(109,41,71,.25);
  --bubble: rgba(255,255,255,.5);
}
body[data-theme="ocean"] {
  --bg1: #1d5d8a; --bg2: #123f61; --bg3: #0a2740;
  --ink: #eaf6ff; --line: rgba(234,246,255,.55);
  --glass: rgba(255,255,255,.04); --btnbg: rgba(255,255,255,.12); --btnline: rgba(255,255,255,.25);
  --bubble: rgba(255,255,255,.08);
}
body[data-theme="forest"] {
  --bg1: #3c6b45; --bg2: #27492e; --bg3: #16301c;
  --ink: #f2fff3; --line: rgba(242,255,243,.55);
  --glass: rgba(255,255,255,.04); --btnbg: rgba(255,255,255,.12); --btnline: rgba(255,255,255,.25);
  --bubble: rgba(255,255,255,.07);
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 50% 18%, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  color: var(--ink);
  touch-action: manipulation;
  user-select: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Пузырьки на фоне для глубины */
#bubbles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#bubbles span {
  position: absolute; bottom: -12vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--bubble), transparent 70%);
  animation: rise linear infinite;
}
@keyframes rise { to { transform: translateY(-125vh); } }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  position: relative; z-index: 2;
}
.left { display: flex; align-items: center; gap: 12px; }
a.home {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  font-size: 22px;
  color: var(--ink); text-decoration: none;
  background: var(--btnbg);
  border: 2px solid var(--btnline);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
a.home:active { transform: translateY(2px); }
h1 { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
#coinbox {
  font-size: 17px; font-weight: 700;
  background: var(--btnbg);
  border: 2px solid var(--btnline);
  border-radius: 999px;
  padding: 5px 14px;
}
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btns button {
  position: relative;
  width: 50px; height: 50px;
  font-size: 22px;
  color: var(--ink);
  background: var(--btnbg);
  border: 2px solid var(--btnline);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.btns button:active { transform: translateY(2px); box-shadow: 0 2px 5px rgba(0,0,0,.18); }
.btns button sup {
  position: absolute; right: -6px; top: -8px;
  font-size: 10px; font-weight: 700;
  background: #ffb300; color: #4b3200;
  border-radius: 999px;
  padding: 2px 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

/* ---- Витрина: пакеты-заказы ---- */
#dock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 10px 4px;
  min-height: 74px;
  position: relative; z-index: 2;
}
.bagr {
  position: relative;
  width: 52px; height: 62px;
  border-radius: 4px 4px 9px 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(0,0,0,.05) 20%, rgba(0,0,0,.28) 100%), var(--b);
  box-shadow: inset 3px 0 6px -2px rgba(255,255,255,.4), inset -3px 0 6px -2px rgba(0,0,0,.35), 0 8px 10px -5px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s ease;
}
/* Ручки пакета */
.bagr::before {
  content: '';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 15px;
  border: 3.5px solid rgba(0,0,0,.35);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
/* Мини-бутылка в пакете */
.mini {
  width: 22px; height: 38px;
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 26%, var(--b) 26%, var(--d) 100%);
  box-shadow: inset 2px 0 3px -1px rgba(255,255,255,.8), 0 2px 4px rgba(0,0,0,.3);
  position: relative;
}
.mini::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 7px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #c69a63, #8a5f2f);
}
.bagr.flash { animation: rflash .6s ease; }
@keyframes rflash {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); box-shadow: 0 0 22px 8px rgba(255,255,255,.8); }
  100% { transform: scale(1); }
}
.queue-badge {
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  opacity: .75;
  background: var(--btnbg);
  border: 2px solid var(--btnline);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Бутылочки раскиданы по всей площади поля (позиции считает computeLayout),
   фигурка-зверь всегда в центре. */
#board {
  flex: 1;
  position: relative; z-index: 1;
  perspective: 900px;
}

footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 0 20px;
  position: relative; z-index: 2;
}
footer button {
  position: relative;
  width: 64px; height: 64px;
  font-size: 30px;
  color: var(--ink);
  background: var(--btnbg);
  border: 2px solid var(--btnline);
  border-radius: 18px;
  box-shadow: 0 6px 12px rgba(0,0,0,.22);
}
footer button:active { transform: translateY(2px); box-shadow: 0 3px 6px rgba(0,0,0,.22); }
footer button sup {
  position: absolute; right: -7px; top: -9px;
  font-size: 11px; font-weight: 700;
  background: #ffb300; color: #4b3200;
  border-radius: 999px;
  padding: 2px 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

/* ---- Стеклянная бутылочка ---- */
.tube {
  position: absolute;
  width: clamp(34px, 8vmin, 52px);
  height: clamp(90px, 21vmin, 148px);
  border: 2px solid var(--line);
  border-radius: 22px 22px 20px 20px / 30px 30px 16px 16px;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.03) 24%,
      rgba(255,255,255,.01) 52%,
      rgba(255,255,255,.07) 82%,
      rgba(255,255,255,.02) 100%),
    var(--glass);
  box-shadow:
    inset 0 -14px 20px rgba(0,0,0,.13),
    inset 6px 0 12px -6px rgba(255,255,255,.30),
    0 18px 16px -10px rgba(0,0,0,.42);
  display: flex;
  flex-direction: column-reverse;
  padding: 4px;
  transition: transform .34s cubic-bezier(.45,.05,.35,1);
  transform: rotateX(4deg);
}
/* Живое покачивание, когда пробирка ничем не занята */
.tube:not(.sel):not(.pouring):not(.shake):not(.glow):not(.spawn) {
  animation: bob 3.8s ease-in-out infinite alternate;
}
.tube:nth-child(2n) { animation-delay: -1.3s; }
.tube:nth-child(3n) { animation-delay: -2.4s; }
@keyframes bob {
  from { transform: rotateX(4deg) translateY(0); }
  to   { transform: rotateX(4deg) translateY(-5px); }
}
.tube.spawn { animation: spawn .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes spawn {
  from { transform: rotateX(4deg) scale(.15); opacity: 0; }
  to   { transform: rotateX(4deg) scale(1); opacity: 1; }
}
/* Корковая пробка сверху */
.tube::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 42%; height: 14px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #d8ab72 0%, #a97b4f 55%, #7d5533 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.35);
  pointer-events: none;
}
/* Блики стекла поверх жидкости: вертикальная полоса, диагональный отсвет, искорка */
.tube::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.08) 70%, rgba(255,255,255,.30)),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.05) 57%, transparent 62%),
    radial-gradient(ellipse at 72% 5%, rgba(255,255,255,.6), transparent 65%);
  background-repeat: no-repeat;
  background-size: 13% 84%, 100% 52%, 34% 9%;
  background-position: 12% 45%, 0 0, 78% 4%;
  pointer-events: none;
  z-index: 3;
}
.tube.sel { transform: rotateX(4deg) translateY(-16px) rotate(-4deg); }
/* Выбранная бутылочка мелко вибрирует (нетерпится перелить).
   :not(.pouring) обязателен: во время полёта transform задаётся инлайном,
   а анимация перебила бы его и бутылка тряслась бы на месте. */
.tube.sel:not(.pouring) { animation: selvibrate .38s ease-in-out infinite; }
@keyframes selvibrate {
  0%, 100% { transform: rotateX(4deg) translateY(-16px) rotate(-4deg); }
  25%      { transform: rotateX(4deg) translateY(-16.5px) rotate(-5.6deg) translateX(-1.5px); }
  50%      { transform: rotateX(4deg) translateY(-15px)   rotate(-4deg); }
  75%      { transform: rotateX(4deg) translateY(-16.5px) rotate(-2.4deg) translateX(1.5px); }
}
.tube.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: rotateX(4deg) translateX(-5px); } 75% { transform: rotateX(4deg) translateX(5px); } }
.tube.glow {
  animation: glowpulse 1.2s ease-in-out infinite;
  border-color: #ffd54f;
}
@keyframes glowpulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(255,213,79,.55), 0 18px 16px -10px rgba(0,0,0,.42); }
  50% { box-shadow: 0 0 20px 7px rgba(255,213,79,.85), 0 18px 16px -10px rgba(0,0,0,.42); }
}

/* ---- Жидкость ---- */
.seg {
  position: relative;
  height: 25%;
  border-radius: 7px;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--l) 0%, var(--b) 42%, var(--d) 100%);
  box-shadow: inset 0 3px 5px rgba(255,255,255,.28), inset 0 -4px 6px rgba(0,0,0,.22);
  overflow: hidden;
  z-index: 1;
  transition: height .5s cubic-bezier(.3,.8,.3,1), margin-top .5s cubic-bezier(.3,.8,.3,1);
}
.seg:first-child { border-radius: 7px 7px 16px 16px; }
/* Поверхность верхнего слоя: светлый эллипс */
.seg.top::before {
  content: '';
  position: absolute;
  top: -4px; left: 6%; right: 6%;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.75), var(--l) 75%);
  opacity: .85;
}
.seg.pop { animation: pop .3s ease; }
@keyframes pop { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }

/* ---- Ледяная бутылка ---- */
.ice {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.55) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.5) 0 5%, transparent 6%),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.45) 0 4%, transparent 5%),
    linear-gradient(160deg, rgba(200,235,255,.82), rgba(110,175,235,.72));
  border: 2px solid rgba(220,242,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 6px rgba(20,60,110,.8);
  z-index: 4;
  transition: opacity .4s, transform .4s;
}
.ice.melt { opacity: 0; transform: scale(1.18); }
.tube.frozen { cursor: not-allowed; }

/* ---- Бумажный пакет-сюрприз на поле ---- */
.tube.bagslot {
  border-color: #8a5f2f;
  background: linear-gradient(100deg, rgba(255,255,255,.22) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, #c9995e, #a9763b);
  box-shadow: inset 4px 0 8px -4px rgba(255,255,255,.5), inset -4px 0 8px -4px rgba(0,0,0,.4), 0 14px 14px -9px rgba(0,0,0,.45);
  border-radius: 6px 6px 12px 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.tube.bagslot::before { /* загнутый край пакета вместо пробки */
  width: 100%; height: 12px;
  top: -2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #8a5f2f, #a9763b);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.tube.bagslot::after { display: none; }
.tube.bagslot .mini { opacity: .95; --b: #dfe7ee; --d: #aebbc7; }
.bagnum {
  font-size: 24px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 5px rgba(90,50,10,.85);
}

/* ---- Стеклянная фигурка-зверь (принимает один цвет) ---- */
.figure {
  position: absolute;
  width: clamp(92px, 22vmin, 150px);
  height: clamp(92px, 22vmin, 150px);
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.35));
  animation: bob 3.8s ease-in-out infinite alternate;
}
.figure svg { width: 100%; height: 100%; display: block; overflow: visible; }
.figure .figliq { transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.figdrop {
  position: absolute;
  right: -4px; bottom: -6px;
  min-width: 34px; height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--l), var(--b) 60%, var(--d));
  border: 2px solid rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 3px 6px rgba(0,0,0,.3);
}
.figure.full { animation: figfull 1.4s ease-in-out infinite; }
@keyframes figfull {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,236,150,.6)) drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,236,150,.95)) drop-shadow(0 12px 10px rgba(0,0,0,.35)); }
}
.figure.shake { animation: shake .3s; }
.figure.glow { animation: figglow 1.2s ease-in-out infinite; }
@keyframes figglow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,213,79,.7)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,213,79,1)); }
}

/* Жидкость в наклонённой бутылке (только во время перелива): слои держат горизонт */
.pclip {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  border-radius: 16px 16px 14px 14px / 24px 24px 12px 12px;
  z-index: 2;
  pointer-events: none;
}
.pliq { position: absolute; }
.band {
  position: absolute;
  left: 0; right: 0;
  background: linear-gradient(180deg, var(--l) 0%, var(--b) 42%, var(--d) 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
}
.band.hid {
  --l: #9e9aa8; --b: #6f6a7c; --d: #4c485a;
  color: rgba(255,255,255,.85);
  font-weight: 800; font-size: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.band.top { box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.2); }

/* Струя при переливе */
.stream {
  position: fixed;
  width: 6px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--l), var(--b) 70%, var(--d));
  box-shadow: 0 0 6px 1px rgba(255,255,255,.25);
  transition: height .3s ease-out, opacity .25s;
  z-index: 8;
  pointer-events: none;
}

/* Скрытый слой */
.seg.hid {
  --l: #9e9aa8; --b: #6f6a7c; --d: #4c485a;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  font-weight: 800; font-size: 15px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Цвета: светлый / базовый / тёмный */
.c1 { --l: #ff7961; --b: #e53935; --d: #a30f0c; }
.c2 { --l: #6ab7ff; --b: #1e88e5; --d: #0d5cab; }
.c3 { --l: #76d275; --b: #43a047; --d: #1f6e23; }
.c4 { --l: #ffff6b; --b: #fdd835; --d: #c0a304; }
.c5 { --l: #c158dc; --b: #8e24aa; --d: #5c007a; }
.c6 { --l: #ffbd45; --b: #fb8c00; --d: #c25e00; }
.c7 { --l: #5ddef4; --b: #00acc1; --d: #007c91; }
.c8 { --l: #ff94c2; --b: #f06292; --d: #ba2d65; }
.c9 { --l: #be9c91; --b: #8d6e63; --d: #5f4339; }
.c10 { --l: #7986cb; --b: #3949ab; --d: #1a237e; }
.c11 { --l: #dce775; --b: #afb42b; --d: #7c8500; }
.c12 { --l: #ffffff; --b: #cfd8dc; --d: #90a4ae; }

/* ---- Оверлеи ---- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,10,28,.72);
  z-index: 10;
}
.overlay.hidden { display: none; }
.overlay .card {
  background: #fff; color: #2b2140;
  border-radius: 24px;
  padding: 30px 36px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  max-width: 86vw;
}
.overlay .big { font-size: 25px; font-weight: 800; margin-bottom: 14px; }
#reward { font-size: 19px; font-weight: 700; color: #b8860b; margin-bottom: 18px; }
.overlay button.primary, #next, #closeShop {
  font-size: 20px; font-weight: 700;
  color: #fff; background: #7c4dff;
  border: none; border-radius: 16px;
  padding: 13px 32px;
}
#next:active, #closeShop:active { background: #6a3de8; }

#themeList { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.theme-item {
  font-size: 18px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 16px;
  border: 2px solid #d9d2ea;
  border-radius: 14px;
  background: #f7f4fd;
  color: #2b2140;
}
.theme-item.cur { border-color: #7c4dff; background: #efe8ff; }
.theme-item .tag { font-size: 14px; font-weight: 700; color: #7c4dff; }

/* ---- Тост ---- */
#toast {
  position: fixed;
  left: 50%; bottom: 5vh;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,14,36,.92);
  color: #fff;
  font-size: 16px; font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  z-index: 20;
  max-width: 88vw;
  text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9; }
#confetti span {
  position: absolute; top: -40px;
  animation: fall 3.2s linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}