:root{
  --bg:#0e1109; --bg2:#141a0f; --panel:#1b2216; --panel2:#222a1b;
  --line:#33402a; --line2:#3f4f33; --ink:#edf2e3; --muted:#9aa886; --muted2:#74815f;
  --green:#84ca47; --green-d:#5a9430; --green-dd:#3c6720;
  --gold:#e2c24f; --red:#df5142; --red-d:#a8362a;
  --blue:#5aa0d8; --violet:#b888e0;
  --shadow:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(140% 70% at 50% -8%, #213018 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 110%, #18230f 0%, transparent 50%),
    var(--bg);
  color:var(--ink);font-family:"Golos Text",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.35;overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}

/* ── базовые элементы ────────────────────────────────────── */
button{font-family:inherit;color:inherit;border:0;cursor:pointer;background:none}
.btn{
  background:linear-gradient(180deg,var(--green),var(--green-d));
  color:#0e1408;font-weight:700;border-radius:13px;padding:14px 18px;
  font-size:15px;box-shadow:var(--shadow);transition:transform .08s,filter .15s;
}
.btn:active{transform:translateY(1px) scale(.99);filter:brightness(1.05)}
.btn.sec{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.danger{background:linear-gradient(180deg,var(--red),var(--red-d));color:#fff}
.btn.full{width:100%}
.btn:disabled{opacity:.4;filter:grayscale(.4)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600}

/* ── home / lobby ────────────────────────────────────────── */
.center{flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:15px;padding:26px;text-align:center}
.logo{font-size:32px;font-weight:800;letter-spacing:.5px}
.logo .em{color:var(--green)}
.sub{color:var(--muted);max-width:300px;margin-top:-6px}
.card-stack{display:flex;margin:6px 0 4px;height:124px;align-items:center}
.card-stack img{width:84px;border-radius:9px;box-shadow:var(--shadow-lg);
  margin-left:-30px;border:2px solid #0a0d06}
.card-stack img:first-child{margin-left:0;transform:rotate(-8deg) translateY(4px)}
.card-stack img:nth-child(2){transform:translateY(-6px);z-index:2}
.card-stack img:last-child{transform:rotate(8deg) translateY(4px)}
.menu{display:flex;flex-direction:column;gap:11px;width:100%;max-width:330px}
.row{display:flex;gap:9px}
.input{flex:1;background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:14px 15px;color:var(--ink);font-size:18px;text-transform:uppercase;
  letter-spacing:5px;text-align:center;font-family:"JetBrains Mono",monospace}
.input::placeholder{letter-spacing:3px;color:var(--muted2)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.stepper b{font-size:17px}
.step-btn{width:42px;height:42px;border-radius:11px;background:var(--panel2);
  border:1px solid var(--line2);font-size:24px;line-height:1;color:var(--green)}
.step-btn:active{background:var(--green-dd)}

.seatlist{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.seat{display:flex;align-items:center;gap:11px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.seat .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel2);font-size:18px;border:1px solid var(--line2)}
.seat .nm{flex:1;text-align:left;font-weight:600}
.tag{font-size:11px;color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:2px 7px;font-weight:700}
.roomcode{font-family:"JetBrains Mono",monospace;font-size:38px;letter-spacing:10px;
  font-weight:700;color:var(--green);background:var(--panel);border:1px dashed var(--green-d);
  border-radius:14px;padding:14px 6px 14px 16px;width:100%;max-width:300px}

/* ── игровой экран ───────────────────────────────────────── */
#game{padding:0}
.topbar{display:flex;align-items:center;gap:8px;padding:10px 13px 8px;
  background:linear-gradient(180deg,rgba(33,46,24,.9),rgba(20,26,15,0))}
.phase{font-weight:800;font-size:16px;line-height:1.1}
.phase small{display:block;color:var(--muted);font-weight:600;font-size:11px;margin-top:1px}
.topstat{margin-left:auto;display:flex;gap:7px}
.topstat .chip{padding:6px 10px;font-weight:700;font-size:14px}

.turnbanner{margin:2px 13px;padding:10px 13px;border-radius:12px;font-size:14px;font-weight:600;
  background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;gap:8px}
.turnbanner.you{background:linear-gradient(90deg,rgba(132,202,71,.26),var(--panel));
  border-color:var(--green-d);color:#eaf6dc}
.turnbanner.def{background:linear-gradient(90deg,rgba(223,81,66,.32),var(--panel));
  border-color:var(--red-d);animation:pulse 1.4s ease-in-out infinite}
.turnbanner.wait{color:var(--muted)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(223,81,66,.0)}50%{box-shadow:0 0 0 3px rgba(223,81,66,.25)}}
.logline{margin:0 13px 2px;font-size:12px;color:var(--muted2);
  font-family:"JetBrains Mono",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}

/* зона оппонентов — прокручивается */
.opps{flex:1;overflow-y:auto;padding:2px 13px 4px;display:flex;flex-direction:column;gap:8px}
/* моя зона — закреплена снизу */
.mine-wrap{padding:4px 13px 0}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.panel.active{border-color:var(--green-d);box-shadow:0 0 0 1px var(--green-d) inset}
.panel.me{background:linear-gradient(180deg,var(--panel2),var(--panel));border-color:var(--green-d);
  box-shadow:0 0 0 1px rgba(132,202,71,.18) inset, var(--shadow)}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ph .dot{width:10px;height:10px;border-radius:50%;flex:none}
.ph .nm{font-weight:700;font-size:14px}
.panel.me .ph .nm{color:var(--green)}
.ph .meta{margin-left:auto;display:flex;gap:9px;color:var(--muted);font-size:12.5px;font-weight:600;align-items:center}
.ph .meta b{color:var(--ink)}
.ph .passed{color:var(--green);font-size:13px}

/* ряд животных — горизонтальная прокрутка */
.animals{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scroll-snap-type:x proximity}
.animals.empty{color:var(--muted2);font-size:13px;padding:6px 2px}

.animal{flex:none;background:linear-gradient(180deg,#19200f,#10150a);
  border:1px solid var(--line2);border-radius:12px;padding:7px 7px 8px;
  min-width:118px;max-width:170px;scroll-snap-align:start;position:relative;
  transition:box-shadow .12s,transform .08s,border-color .12s}
.opp-an{min-width:96px}
.atop{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-height:20px}
.pips{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.pip{width:14px;height:14px;border-radius:50%;border:2px solid var(--green-dd);background:#0c1006}
.pip.on{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(132,202,71,.5)}
.pip.fat{border-radius:4px;border-color:var(--gold)}
.pip.fat.on{background:var(--gold);box-shadow:0 0 6px rgba(226,194,79,.5)}
.opp-an .pip{width:11px;height:11px}
.abadges{margin-left:auto;display:flex;gap:3px;font-size:14px;align-items:center}
.abadges .fed{color:var(--green)}
.no-need{color:var(--muted2);font-size:11px}

/* свойства = настоящие мини-карты */
.acards{display:flex;gap:5px;overflow-x:auto;padding-top:1px;min-height:66px;align-items:flex-start}
.opp-an .acards{min-height:50px}
.pcard{flex:none;width:56px;height:64px;border-radius:7px;border:2px solid #0a0d06;
  object-fit:cover;object-position:50% 4%;box-shadow:var(--shadow);background:#0a0d06;cursor:pointer;
  transition:transform .08s}
.pcard:active{transform:translateY(-3px) scale(1.03)}
.opp-an .pcard{width:42px;height:48px;border-radius:6px}
.pcard.t-carn{box-shadow:0 0 0 1px var(--red-d),var(--shadow)}
.pcard.t-paired{box-shadow:0 0 0 1px var(--blue),var(--shadow)}
.pcard.t-enemy{box-shadow:0 0 0 1px var(--violet),var(--shadow)}
/* синтетические мини-карты для «Хищник»/«Жир» (обороты) */
.pcard.syn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;padding:4px 3px;border-color:#0a0d06}
.pcard.syn .si{font-size:20px;line-height:1}
.pcard.syn .sn{font-size:9px;font-weight:700;line-height:1.05}
.opp-an .pcard.syn .si{font-size:15px}.opp-an .pcard.syn .sn{font-size:8px}
.pcard.syn.carn{background:linear-gradient(180deg,#5a201a,#3a1410);color:#f3c9c3}
.pcard.syn.fat{background:linear-gradient(180deg,#5a4a16,#3a3010);color:#f3e6b8}
.aempty{flex:none;width:56px;height:64px;border-radius:7px;border:1.5px dashed var(--line2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted2);font-size:18px}
.aempty small{font-size:9px}

/* состояния выбора цели */
.animal.sel{border-color:var(--green);box-shadow:0 0 0 2px var(--green),0 0 18px rgba(132,202,71,.5);cursor:pointer}
.animal.sel:active{transform:scale(.98)}
.animal.dim{opacity:.35}
.animal.act{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(226,194,79,.35)}

/* ── низ: action bar + рука ──────────────────────────────── */
.actionbar{display:flex;gap:8px;align-items:center;padding:8px 13px 4px;min-height:24px}
.actionbar .hint{flex:1;font-size:13px;color:var(--muted);font-weight:600}
.hand{display:flex;gap:9px;overflow-x:auto;padding:8px 13px 14px;
  background:linear-gradient(0deg,#0b0e07,rgba(11,14,7,0));scroll-snap-type:x proximity}
.hand:empty::after{content:"рука пуста";color:var(--muted2);font-size:13px;padding:14px 4px}
.hcard{flex:none;width:96px;scroll-snap-align:center;border-radius:10px;
  border:2px solid #0a0d06;box-shadow:var(--shadow-lg);transition:transform .1s,box-shadow .1s;cursor:pointer}
.hcard:active{transform:translateY(-5px)}
.hcard.play{box-shadow:0 0 0 2px var(--green),var(--shadow-lg)}
.hcard.dim{opacity:.4;filter:saturate(.6)}

/* ── всплывашки ──────────────────────────────────────────── */
.pop{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-top:1px solid var(--line2);border-radius:20px 20px 0 0;padding:16px 16px 24px;
  box-shadow:0 -12px 34px rgba(0,0,0,.6);z-index:30;animation:slideup .2s cubic-bezier(.2,.8,.2,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pop h3{margin:2px 0 13px;font-size:17px;display:flex;align-items:center;gap:9px}
.pop h3 img{width:46px;border-radius:7px;box-shadow:var(--shadow)}
.popmenu{display:flex;flex-direction:column;gap:9px}
.popitem{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line2);border-radius:13px;padding:14px 15px;font-size:15px;text-align:left;
  font-weight:600;transition:background .12s}
.popitem:active{background:var(--green-dd)}
.popitem .ico{font-size:21px;width:26px;text-align:center;flex:none}
.popitem img{width:40px;border-radius:6px;flex:none}
.overlay{position:fixed;inset:0;background:rgba(6,8,4,.62);z-index:25;backdrop-filter:blur(3px)}

#zoom{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:28px;
  background:rgba(6,8,4,.9);backdrop-filter:blur(4px)}
#zoom img{width:min(74vw,320px);border-radius:16px;box-shadow:var(--shadow-lg);border:3px solid #0a0d06}
.zsyn{width:min(60vw,230px);aspect-ratio:1/1.41;border-radius:16px;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--shadow-lg);border:3px solid #0a0d06;font-size:76px}
.zsyn.carn{background:linear-gradient(180deg,#5a201a,#3a1410)}
.zsyn.fat{background:linear-gradient(180deg,#5a4a16,#3a3010)}
#zoom .zdesc{max-width:330px;text-align:center;color:var(--ink);font-size:14.5px;line-height:1.45}
#zoom .zdesc b{color:var(--green);font-size:17px;display:block;margin-bottom:4px}

#over{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;padding:28px;text-align:center;
  background:radial-gradient(80% 60% at 50% 28%,#243017,#0b0e07)}
.score{display:flex;align-items:center;gap:12px;width:100%;max-width:330px;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 16px}
.score.win{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset, 0 0 24px rgba(226,194,79,.2)}
.score .pl{font-size:22px;width:30px}.score .nm{flex:1;text-align:left;font-weight:600}
.score .pts{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:20px;color:var(--green)}

#toast{position:fixed;left:50%;bottom:24%;transform:translateX(-50%);z-index:60;
  background:#0a0d06;border:1px solid var(--line2);border-radius:12px;padding:11px 17px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .2s;
  pointer-events:none;max-width:86vw;text-align:center}
#toast.show{opacity:1}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--green);
  border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}