/* Змей из душ — боевая песочница. Тёмная мистика, портрет, одна рука. */

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

:root {
  --bg: #0a0d1c;
  --bg2: #10142a;
  --panel: rgba(24, 30, 56, .92);
  --line: rgba(150, 165, 255, .10);
  --text: #e2e6fb;
  --dim: #8b93bb;
  --teal: #3ee6c4;
  --violet: #8a6bff;
  --danger: #ff5470;
  --gold: #ffc857;

  /* цвета ролей душ */
  --c-guard: #5b8def;
  --c-archer: #e8b34b;
  --c-mage: #a06bff;
  --c-healer: #46d99c;
  --c-blade: #ff7a59;
}

html, body {
  height: 100%;
  background:
    radial-gradient(120% 60% at 50% -10%, #1a2148 0%, transparent 60%),
    radial-gradient(100% 50% at 50% 110%, #14102e 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Парящие пылинки-души на фоне */
#motes { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#motes span {
  position: absolute;
  bottom: -3vh;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(120, 200, 230, .5);
  box-shadow: 0 0 8px rgba(120, 200, 230, .6);
  animation: mote 11s linear infinite;
  opacity: 0;
}
#motes span:nth-child(1)  { left: 8%;  animation-delay: 0s;   animation-duration: 13s; }
#motes span:nth-child(2)  { left: 22%; animation-delay: 3s;   animation-duration: 10s; scale: .7; }
#motes span:nth-child(3)  { left: 34%; animation-delay: 6s;   animation-duration: 15s; }
#motes span:nth-child(4)  { left: 47%; animation-delay: 1.5s; animation-duration: 11s; scale: .6; }
#motes span:nth-child(5)  { left: 58%; animation-delay: 8s;   animation-duration: 14s; }
#motes span:nth-child(6)  { left: 69%; animation-delay: 4.5s; animation-duration: 9s;  scale: .8; }
#motes span:nth-child(7)  { left: 81%; animation-delay: 7s;   animation-duration: 12s; }
#motes span:nth-child(8)  { left: 92%; animation-delay: 2s;   animation-duration: 16s; scale: .6; }
#motes span:nth-child(9)  { left: 15%; animation-delay: 9s;   animation-duration: 12s; scale: .8; background: rgba(160, 130, 255, .5); }
#motes span:nth-child(10) { left: 52%; animation-delay: 5s;   animation-duration: 13s; background: rgba(160, 130, 255, .5); }
#motes span:nth-child(11) { left: 75%; animation-delay: 10s;  animation-duration: 10s; scale: .7; background: rgba(160, 130, 255, .5); }
#motes span:nth-child(12) { left: 40%; animation-delay: 11s;  animation-duration: 14s; }
@keyframes mote {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: .5; }
  100% { transform: translateY(-105vh); opacity: 0; }
}

#app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 6px) 10px calc(env(safe-area-inset-bottom) + 10px);
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- шапка ---------- */

#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 8px;
}

.chip {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(26, 32, 62, .85);
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text);
  white-space: nowrap;
}
.chip.hp { color: #ff8fa3; border-color: rgba(255, 84, 112, .25); }
#stat-wave { color: var(--teal); border-color: rgba(62, 230, 196, .22); }
#stat-enemies { color: var(--dim); }

#btn-restart {
  margin-left: auto;
  background: rgba(26, 32, 62, .85);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 36px; height: 36px;
  font-size: 17px;
}

#wave-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding-bottom: 8px;
  min-height: 14px;
}
#wave-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(150, 165, 255, .18);
  transition: all .3s;
}
#wave-dots i.now {
  background: var(--teal);
  box-shadow: 0 0 8px rgba(62, 230, 196, .8);
  transform: scale(1.25);
}
#wave-dots i.done { background: rgba(62, 230, 196, .45); }

/* ---------- поле ---------- */

#board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

#board {
  position: relative;
  height: 100%;
  max-height: calc((100vw - 20px) * 9 / 7);
  aspect-ratio: 7 / 9;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(64, 78, 158, .18) 0%, transparent 55%),
    linear-gradient(180deg, #121736, #0d1126 70%, #0c0f22);
  border: 1px solid rgba(150, 165, 255, .14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .5),
    inset 0 0 60px rgba(6, 8, 18, .8);
}
#board.shake { animation: shake .18s; }
@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#cells {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(9, 1fr);
}
/* шахматка: при 7 колонках чётность индекса даёт корректный узор */
#cells i { box-shadow: inset 0 0 0 .5px rgba(150, 165, 255, .05); }
#cells i:nth-child(even) { background: rgba(150, 165, 255, .04); }

/* ритуальный круг на полу зала */
#board::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 35% at 50% 50%, rgba(90, 110, 220, .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 900'%3E%3Cg fill='none' stroke='%23aab6ff' stroke-opacity='.1'%3E%3Ccircle cx='350' cy='450' r='300' stroke-width='1.5' stroke-dasharray='3 16'/%3E%3Ccircle cx='350' cy='450' r='235' stroke-dasharray='8 12'/%3E%3Ccircle cx='350' cy='450' r='160'/%3E%3Cpath d='M350 130 V180 M350 720 V770 M50 450 H100 M600 450 H650'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

#marks, #ents, #fxlayer { position: absolute; inset: 0; pointer-events: none; }

#marks > *, #ents > *, #fxlayer > * {
  position: absolute;
  width: calc(100% / 7);
  height: calc(100% / 9);
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
}

/* Телеграфия: красная клетка + урон, который туда прилетит */
.threat {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  background: radial-gradient(circle, rgba(255, 84, 112, .14) 30%, rgba(255, 84, 112, .26));
  box-shadow: inset 0 0 0 2px rgba(255, 84, 112, .5);
  scale: .92;
  animation: pulse 1.1s infinite;
}
.threat span {
  font-size: clamp(11px, 3.4vw, 16px);
  font-weight: 800;
  color: #ff8fa3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
@keyframes pulse {
  50% { box-shadow: inset 0 0 0 2px rgba(255, 84, 112, .95); }
}

/* ---------- сущности (SVG-арт) ---------- */

.ent {
  font-size: clamp(16px, 5.6vw, 30px); /* база для бейджей */
  opacity: 0;
  transition: opacity .25s;
}
.ent.live { opacity: 1; transition: transform .16s ease-out, opacity .25s; }
.ent.die {
  opacity: 0;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) scale(.4);
  transition: all .3s;
}

.ent .art { position: absolute; inset: 0; }
.art-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* --- тело змея: градиентная труба с чешуёй и верхним бликом --- */
.snake { --c: #3aa98f; }
.snake.t-guard  { --c: var(--c-guard); }
.snake.t-archer { --c: var(--c-archer); }
.snake.t-mage   { --c: var(--c-mage); }
.snake.t-healer { --c: var(--c-healer); }
.snake.t-blade  { --c: var(--c-blade); }

.snake .tube-glow, .snake .tube, .snake .tube-scales, .snake .tube-hi {
  fill: none;
  stroke-linecap: round;
}
.snake .tube-glow { stroke: var(--c); stroke-width: 62; opacity: .16; }
.snake .tube { stroke-width: 46; } /* цвет — градиент из defs */
.snake .tube-scales { stroke-width: 38; opacity: .45; }
.snake .tube-hi { stroke: rgba(255, 255, 255, .2); stroke-width: 11; }
.snake .sigil path {
  fill: none;
  stroke: rgba(240, 245, 255, .95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}

/* --- голова --- */
.head .art { filter: drop-shadow(0 0 10px rgba(62, 230, 196, .4)); }
.head .tube-glow { stroke: var(--teal); }
.head .head-shape { fill: url(#g-head); stroke: rgba(110, 240, 205, .55); stroke-width: 2; }
.head .head-hi { fill: rgba(255, 255, 255, .18); }
.head .brow { stroke: #0b4237; stroke-width: 3; stroke-linecap: round; fill: none; }
.head .eye { fill: url(#g-eye); }
.head .pupil { stroke: #0a1a16; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.head .glint { fill: rgba(255, 255, 255, .95); }
.head .nostril { stroke: #0b4237; stroke-width: 2; stroke-linecap: round; }
.head .tongue { stroke: #ff5470; stroke-width: 3.5; stroke-linecap: round; fill: none; }

/* --- враги --- */
.enemy .art { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6)); }
.enemy .wraith { stroke: rgba(255, 110, 140, .55); stroke-width: 2; }
.enemy .mist { fill: rgba(200, 140, 220, .1); animation: bob 2.2s ease-in-out infinite; }
.enemy .face-shadow { fill: rgba(8, 3, 14, .45); }
.enemy .e-eye { fill: #bfe8ff; filter: drop-shadow(0 0 5px rgba(159, 216, 255, .95)); }
.enemy .e-mouth { stroke: rgba(190, 220, 255, .4); stroke-width: 2; fill: none; stroke-linecap: round; }
.enemy .e-eye.red { fill: #ff4d6b; filter: drop-shadow(0 0 5px rgba(255, 59, 92, .95)); }
.enemy .wraith.reaper { stroke: rgba(170, 120, 255, .55); }
.enemy .hood { fill: rgba(6, 3, 15, .55); }
.enemy .face-dark { fill: #0a0616; }
.enemy .scythe-pole { stroke: #7a5c33; stroke-width: 4.5; stroke-linecap: round; }
.enemy.attacking .art { filter: drop-shadow(0 0 10px rgba(255, 84, 112, .8)); }
.enemy.attacking .wraith { stroke: var(--danger); stroke-width: 3.5; }

/* --- еда, призраки, порталы --- */
.food .art { animation: bob 1.8s ease-in-out infinite; }
.food .flame-outer { filter: drop-shadow(0 0 9px rgba(255, 200, 87, .85)); }
.food .flame-inner { fill: #fff4d4; opacity: .9; animation: flick 1.1s ease-in-out infinite; transform-origin: 50% 65%; }
@keyframes flick { 50% { transform: scaleY(.88) scaleX(1.06); opacity: .7; } }

.lost .art { animation: bob 1.3s ease-in-out infinite; }
.lost .ghost { stroke: rgba(210, 225, 255, .55); stroke-width: 2; }
.lost .g-eye { fill: #eaf0ff; }

.portal .disc { filter: drop-shadow(0 0 10px rgba(138, 107, 255, .8)); animation: flick 1.6s ease-in-out infinite; }
.portal .rings { animation: spin 5s linear infinite; transform-origin: 50% 50%; }
.portal .ring { fill: none; stroke: var(--violet); }
.portal .ring.r1 { stroke-width: 3.5; stroke-dasharray: 14 9; opacity: .8; }
.portal .ring.r2 { stroke-width: 2.5; stroke-dasharray: 8 7; opacity: .55; }

@keyframes bob { 50% { transform: translateY(-9%); } }
@keyframes spin { to { transform: rotate(360deg); } }

.ent .badge {
  position: absolute;
  top: 1%; right: 2%;
  z-index: 3;
  font-size: .42em;
  font-weight: 800;
  color: #fff;
  background: rgba(8, 10, 20, .7);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: 1px 4px;
  min-width: 15px;
  text-align: center;
}
.ent .badge:empty { display: none; }

.ent .hp {
  position: absolute;
  left: 14%; right: 14%; bottom: 5%;
  height: 3.5px;
  z-index: 3;
  background: rgba(0, 0, 0, .55);
  border-radius: 3px;
  overflow: hidden;
}
.ent .hp i { display: block; height: 100%; border-radius: 3px; transition: width .2s; }
.ent .hp i.ok { background: var(--teal); }
.ent .hp i.mid { background: var(--gold); }
.ent .hp i.low { background: var(--danger); }

/* ---------- эффекты боя ---------- */

/* снаряды: летят из клетки в клетку */
.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: transform .22s linear;
}
.shot::before {
  content: '';
  transform: rotate(var(--ang));
}
.shot.arrow::before {
  width: 46%; height: 3.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--c-archer));
  box-shadow: 0 0 6px rgba(232, 179, 75, .8);
}
.shot.bolt::before {
  width: 26%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9c6ff, var(--c-mage));
  box-shadow: 0 0 12px rgba(160, 107, 255, .9);
}

/* росчерк клинка на цели */
.slash {
  z-index: 6;
  overflow: hidden;
}
.slash::before {
  content: '';
  position: absolute;
  left: 12%; top: 12%;
  width: 76%; height: 76%;
  border-radius: 50%;
  border-top: 3.5px solid rgba(255, 235, 220, .95);
  transform: rotate(-80deg);
  animation: slashfx .32s ease-out forwards;
  filter: drop-shadow(0 0 5px rgba(255, 122, 89, .9));
}
@keyframes slashfx {
  to { transform: rotate(200deg); opacity: 0; }
}

/* вспышки: гибель врага и подбор */
.burst { z-index: 5; }
.burst::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  animation: burstfx .55s ease-out forwards;
}
.burst.kill::before {
  border: 3px solid rgba(255, 110, 140, .9);
  box-shadow: 0 0 18px rgba(255, 84, 112, .8), inset 0 0 12px rgba(255, 84, 112, .5);
}
.burst.eat::before {
  border: 3px solid rgba(255, 216, 130, .95);
  box-shadow: 0 0 18px rgba(255, 200, 87, .9), inset 0 0 12px rgba(255, 200, 87, .6);
}
@keyframes burstfx {
  from { transform: scale(.25); opacity: 1; }
  to { transform: scale(1.25); opacity: 0; }
}

/* всплывающие числа */
.pop {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 3.9vw, 18px);
  font-weight: 800;
  z-index: 7;
  animation: rise .8s ease-out forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.pop.dmg { color: var(--gold); }
.pop.hurt { color: var(--danger); }
.pop.heal { color: var(--teal); }
.pop.miss, .pop.block { color: var(--dim); font-weight: 700; font-size: clamp(10px, 3vw, 14px); }
@keyframes rise {
  from { opacity: 0; margin-top: 0; }
  20% { opacity: 1; }
  to { opacity: 0; margin-top: -28px; }
}

/* ---------- лог и кнопки ---------- */

#log {
  min-height: 21px;
  padding: 4px 8px 2px;
  font-size: 12.5px;
  color: var(--dim);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actions {
  display: flex;
  gap: 10px;
  padding: 8px 2px 2px;
}

.skill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(138, 107, 255, .4);
  background: linear-gradient(180deg, rgba(41, 48, 92, .95), rgba(26, 31, 60, .95));
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: all .15s;
}
.skill .ico { width: 21px; height: 21px; flex: none; }
#btn-dash .ico path { fill: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 200, 87, .6)); }
.skill .ico.wave path { fill: none; stroke: #6fd6ff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(111, 214, 255, .5)); }
.skill:disabled { opacity: .4; box-shadow: none; }
.skill:not(:disabled):active { transform: translateY(1px); }
.skill.armed {
  border-color: var(--teal);
  box-shadow: 0 0 16px rgba(62, 230, 196, .45);
  color: var(--teal);
}
.skill .cd {
  position: absolute;
  top: -7px; right: -4px;
  min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  border-radius: 999px;
  color: #1a1405;
  background: var(--gold);
  font-weight: 800;
}
.skill .cd:empty { display: none; }

/* ---------- оверлеи ---------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(5, 7, 15, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}
.overlay.hidden { display: none; }

.sheet {
  width: 100%;
  max-width: 520px;
  background: var(--panel);
  border: 1px solid rgba(150, 165, 255, .16);
  border-radius: 24px 24px 0 0;
  padding: 22px 18px calc(env(safe-area-inset-bottom) + 22px);
  animation: sheetup .25s ease-out;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
}
.sheet.center {
  border-radius: 24px;
  margin: auto 18px;
  text-align: center;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: 0; } }

.big-icon { margin-bottom: 8px; }
.big-icon svg { width: 62px; height: 62px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); }

.sheet h2 { font-size: 21px; letter-spacing: .3px; margin-bottom: 4px; }
.sheet .sub { color: var(--dim); font-size: 14px; margin-bottom: 14px; }
.sheet .goal {
  margin: 10px 0 4px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(62, 230, 196, .08);
  border: 1px solid rgba(62, 230, 196, .25);
  font-size: 14px;
}
.sheet .hint { color: var(--dim); font-size: 12px; margin-top: 12px; text-align: center; }

#draft-options { display: flex; flex-direction: column; gap: 10px; }

.card {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-areas: 'icon name' 'icon desc';
  align-items: center;
  text-align: left;
  gap: 2px 12px;
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--c, #8a6bff) 45%, transparent);
  border-left: 4px solid var(--c, #8a6bff);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, #8a6bff) 10%, #1a2038), #1a2038 55%);
  color: var(--text);
}
.card.t-guard  { --c: var(--c-guard); }
.card.t-archer { --c: var(--c-archer); }
.card.t-mage   { --c: var(--c-mage); }
.card.t-healer { --c: var(--c-healer); }
.card.t-blade  { --c: var(--c-blade); }
.card:active { filter: brightness(1.2); }
.card .c-icon { grid-area: icon; width: 46px; height: 46px; }
.card .c-icon .art-svg { width: 100%; height: 100%; overflow: visible; }
.card .c-icon .tube-glow, .card .c-icon .tube, .card .c-icon .tube-scales, .card .c-icon .tube-hi {
  fill: none;
  stroke-linecap: round;
}
.card .c-icon .tube-glow { stroke: var(--c); stroke-width: 62; opacity: .18; }
.card .c-icon .tube { stroke-width: 46; }
.card .c-icon .tube-scales { stroke-width: 38; opacity: .45; }
.card .c-icon .tube-hi { stroke: rgba(255, 255, 255, .2); stroke-width: 11; }
.card .c-icon .sigil path {
  fill: none;
  stroke: rgba(240, 245, 255, .95);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card .c-name { grid-area: name; font-size: 16px; font-weight: 800; }
.card .c-desc { grid-area: desc; font-size: 12.5px; color: var(--dim); line-height: 1.35; }

.ghost {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border-radius: 15px;
  background: none;
  border: 1px dashed rgba(215, 220, 245, .3);
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
}

.primary {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border-radius: 15px;
  border: none;
  background: linear-gradient(135deg, var(--teal), #2bb5e0);
  color: #052024;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(62, 230, 196, .25);
}
.primary:active { transform: translateY(1px); }

#go-stats p, #win-stats p { margin: 6px 0; color: var(--dim); font-size: 14.5px; }
#go-stats b, #win-stats b { color: var(--text); }

.howto { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.howto li { font-size: 14px; line-height: 1.45; }

button { cursor: pointer; font-family: inherit; }