/* «Небожители» — тёмный стол, бронзовые рамки и пергамент, как на оригинальных картах */
:root {
  --bg0: #0c0906;
  --bg1: #140f0a;
  --bg2: #1c150f;
  --bg3: #261d14;
  --line: #3a2b1d;
  --line2: #5a4329;
  --text: #f1e5cc;
  --muted: #a8967a;
  --dim: #6f5f4b;
  --gold: #e3b35c;
  --gold2: #f7d692;
  --bronze: #b67d3e;
  --bronze2: #6c4720;
  --parch: #ead8b2;
  --parch2: #cfb385;
  --ink: #2a1c0e;
  --life: #e5574a;
  --mana: #78bcff;
  --act: #f2c55c;
  --good: #82d272;
  --bad: #e65f4e;
  --atk: #ff7a5c;
  --blk: #6fb3ff;
  --font-ui: 'PT Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-card: 'PT Serif', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --side-w: 300px;
  /* размеры карт */
  --h-field: clamp(108px, 17.2vh, 176px);
  --h-hand: clamp(116px, 18.5vh, 188px);
  --h-summon: clamp(86px, 12.6vh, 132px);
  --h-back: clamp(52px, 7.6vh, 82px);
  --h-stack: 86px;
  --h-grave: 150px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--text);
  font: 15px/1.4 var(--font-ui);
  background: var(--bg0);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%, #2a1d12 0%, transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% 100%, #24190f 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, #17110b 0%, #0b0805 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body[data-screen="game"] { overflow: hidden; }
/* фактура стола: мелкий шум и виньетка */
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, #00000073 100%); }
#app { position: relative; z-index: 1; }
::selection { background: #e3b35c55; }

/* ---------- кнопки и поля ---------- */
button {
  font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(#352819, #261c12);
  border: 1px solid var(--line2); border-radius: 9px;
  padding: 8px 14px; min-height: 38px;
  box-shadow: 0 1px 0 #ffffff12 inset, 0 2px 6px #0007;
  transition: transform .12s var(--ease), border-color .15s, background .15s, box-shadow .15s, filter .15s;
}
button:hover:not(:disabled) { border-color: var(--gold); filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff1a inset, 0 4px 12px #000a, 0 0 0 1px #e3b35c33; }
button:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.95); box-shadow: 0 0 0 #0000, 0 1px 3px #000a inset; transition-duration: .05s; }
button:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
button:disabled { opacity: .42; cursor: default; }
button.primary {
  color: #22160a; font-weight: 700; border-color: #f0c879;
  background: linear-gradient(#f4d28c, #d9a54d 55%, #c08a36);
  text-shadow: 0 1px 0 #ffffff55;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 4px 16px #e3b35c55, 0 1px 0 #fff8 inset; }
button.big { min-height: 44px; padding: 10px 20px; font-size: 16px; }
button.small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
button.danger { border-color: #8a3a2c; color: #ffc1b6; background: linear-gradient(#3a1d16, #2a140f); }
button.glow { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px #f7d69255, 0 0 12px #e3b35c44; } 50% { box-shadow: 0 0 0 1px #f7d692cc, 0 0 26px #e3b35caa; } }
button.icon-btn { min-height: 34px; width: 36px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
button.icon-btn .ic { width: 18px; height: 18px; }
button.icon-btn.on { color: var(--gold2); border-color: var(--gold); }
button.sq { min-height: 28px; width: 28px; padding: 0; border-radius: 7px; font-weight: 700; }
button.seg { min-height: 30px; padding: 3px 12px; border-radius: 20px; font-size: 13px; }
button.seg.on { background: linear-gradient(#f4d28c, #c99442); color: #22160a; border-color: #f0c879; }
input, select {
  font: inherit; color: var(--text); background: #0f0b07; border: 1px solid var(--line2);
  border-radius: 9px; padding: 9px 12px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #e3b35c33; }
label.field { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
label.check input { width: auto; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex: 0 0 auto; }
.ic.inl { width: 1.05em; height: 1.05em; margin: 0 .05em; vertical-align: -0.16em; }
.ic.inl.mana { color: #2d5f9a; }
.ic.inl.act { color: #7b5a1c; }
.ic.inl.tap { color: #6b2f1a; }
.ic.inl.life { color: #b8322a; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; justify-content: center; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.hidden { display: none !important; }
.kbd { font-size: 11px; opacity: .6; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------- уведомления ---------- */
#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; max-width: calc(100% - 32px); }
.toast { background: #3a1813ee; border: 1px solid var(--bad); color: #ffd9d2; padding: 10px 16px; border-radius: 10px; white-space: pre-line; box-shadow: 0 8px 28px #000c; backdrop-filter: blur(6px); }
.toast.info { background: #1f2d1cee; border-color: var(--good); color: #e3f6dd; }

/* ---------- страницы входа и лобби ---------- */
.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 16px; animation: pageIn .5s var(--ease); }
.page.join { max-width: 460px; padding-top: 8vh; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } }
.hero { text-align: center; padding: 8px 0 4px; }
.logo {
  font: 700 clamp(40px, 9vw, 64px)/1 var(--font-card); letter-spacing: .02em;
  background: linear-gradient(#fff2c8, #e3b35c 45%, #9a6526); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #0009) drop-shadow(0 0 22px #e3b35c33);
}
.hero.small .logo { font-size: 38px; }
.hero .tag { color: var(--muted); margin-top: 8px; font-family: var(--font-card); font-style: italic; }
.panel {
  background: linear-gradient(#211810ee, #18120ccc); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  box-shadow: 0 10px 40px #0008, 0 1px 0 #ffffff0d inset;
}
.panel h3 { margin: 0; font: 700 18px var(--font-card); color: var(--gold2); }
.conn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px currentColor; color: var(--bad); }
.dot.on, .conn.on .dot { background: var(--good); color: var(--good); }
.room { font: 700 18px var(--font-card); }
.score b { color: var(--gold2); font-size: 18px; }
.share input { flex: 1; min-width: 200px; font-size: 13px; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seat { padding: 14px; border-radius: 12px; background: #120d08; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: border-color .3s, box-shadow .3s; }
.seat.ready { border-color: var(--good); box-shadow: 0 0 0 1px #82d27244, 0 0 18px #82d27222; }
.seat.empty { align-items: center; justify-content: center; min-height: 92px; }
.seat-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.seat-state { font-size: 13px; color: var(--muted); }
.seat.ready .seat-state { color: var(--good); }
.seat.empty > button { margin-top: 6px; }
.bot-tag { font-size: 11px; font-weight: 700; color: var(--gold2); border: 1px solid var(--bronze); border-radius: 6px; padding: 0 5px; vertical-align: 2px; }
.bot-deck { display: flex; align-items: center; gap: 8px; }
.bot-deck select { width: auto; flex: 1; min-width: 0; padding: 5px 10px; font-size: 13px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.you { font-size: 11px; font-weight: 700; color: #22160a; background: var(--gold); border-radius: 6px; padding: 0 5px; vertical-align: 2px; }
.deck-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.deck-pick { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; padding: 10px; border-radius: 12px; min-height: 72px; }
.deck-pick .dp-art { grid-row: span 2; width: 56px; height: 56px; border-radius: 10px; background: #000 center/cover; box-shadow: 0 0 0 1.5px var(--bronze); }
.deck-pick .dp-name { font: 700 15px var(--font-card); align-self: end; }
.deck-pick .dp-sub { font-size: 12px; color: var(--muted); }
.deck-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 20px #e3b35c44; }
.loader { display: flex; gap: 6px; justify-content: center; padding: 6px; }
.loader span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: bob 1s ease-in-out infinite; }
.loader span:nth-child(2) { animation-delay: .15s; }
.loader span:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }

/* редактор колоды */
.deck-editor { margin-top: 6px; animation: pageIn .35s var(--ease); }
.deck-count { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line2); font-size: 12px; color: var(--muted); min-width: 110px; }
.deck-count b { font-size: 20px; color: var(--bad); transition: color .3s; }
.deck-count.ok b { color: var(--good); }
.deck-count span { font-size: 11px; }
.filters .sep { width: 1px; height: 22px; background: var(--line2); margin: 0 4px; }
.filters .search { width: 200px; flex: 1; min-width: 140px; padding: 6px 12px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 56vh; overflow: auto; padding: 4px; }
.dl-card { background: #120d08; border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; transition: border-color .2s, transform .15s var(--ease), box-shadow .2s; }
.dl-card:hover { border-color: var(--line2); transform: translateY(-2px); }
.dl-card.in { border-color: #a7783a; box-shadow: 0 0 0 1px #a7783a66; }
.dl-art { position: relative; aspect-ratio: 1.3; border-radius: 6px; background: #241a10 center/cover; box-shadow: 0 0 0 1px #0008 inset; }
.dl-art.t-scroll { background-color: var(--parch); background-size: 70%; background-repeat: no-repeat; }
.dl-n { position: absolute; right: 4px; top: 4px; background: var(--gold); color: #22160a; font-weight: 700; border-radius: 10px; min-width: 22px; text-align: center; font-size: 13px; box-shadow: 0 2px 6px #000a; }
.dl-name { font: 700 13px/1.2 var(--font-card); }
.dl-type { font-size: 11px; line-height: 1.2; }
.dl-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.page.lobby.wide { max-width: 1280px; }
.de-head .field { min-width: 180px; }
.de-code input { flex: 1; min-width: 180px; padding: 6px 12px; font: 13px/1.3 ui-monospace, Consolas, monospace; }
.de-code select { width: auto; max-width: 240px; padding: 6px 10px; font-size: 13px; }
.de-tabs { display: none; }
.de-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.de-catalog { min-width: 0; gap: 8px; }
.fsels { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.fsel { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.fsel select { width: auto; min-width: 110px; padding: 5px 8px; font-size: 13px; border-radius: 8px; }
.dl-cost { position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #120d08; box-shadow: 0 2px 6px #000a; }
.dl-cost.mana, .dk-cost.mana { background: var(--mana); }
.dl-cost.act, .dk-cost.act { background: var(--act); }
.dl-cost.lvl, .dk-cost.lvl { background: var(--parch2); }
.de-deck { position: sticky; top: 12px; background: #120d08; border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 24px); }
.dk-title b { font: 700 15px var(--font-card); color: var(--gold2); }
.dk-list { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.dk-empty { font-size: 13px; padding: 8px 2px; }
.dk-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 3px; }
.dk-h b { color: var(--text); }
.deck-line { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 2px 2px 2px 0; border-radius: 6px; font-size: 13px; }
.deck-line:hover { background: #ffffff08; }
.dk-cost { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #120d08; }
.dk-name { font-family: var(--font-card); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-ctl { display: flex; align-items: center; gap: 4px; }
.dk-ctl b { min-width: 14px; text-align: center; }
.dk-ctl button.sq { min-height: 24px; width: 24px; border-radius: 6px; }
.de-foot { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #18120c 30%); }
@media (max-width: 860px) {
  .de-tabs { display: flex; }
  .de-head .field { flex-basis: 100%; }
  .de-head .deck-count { flex: 1; min-width: 0; }
  .de-body { grid-template-columns: 1fr; }
  .deck-editor[data-tab="cards"] .de-deck, .deck-editor[data-tab="deck"] .de-catalog { display: none; }
  .de-deck { position: static; max-height: none; }
  .dl-grid { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .deck-line { font-size: 14px; padding: 3px 0; }
  .dk-ctl button.sq { min-height: 32px; width: 32px; }
  .fsel { flex: 1 1 130px; }
  .fsel select { width: 100%; }
  .de-code select { max-width: none; flex: 1 1 100%; }
}

/* ---------- стол ---------- */
.game { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr; }
.game.with-side { grid-template-columns: 1fr var(--side-w); }
.table { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.half { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 10px; transition: background .6s; }
.line { position: relative; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.line.top { padding-top: 8px; }
.line.top .summon-row { flex: 1; }
.line.bottom { align-items: flex-end; }
.line.bottom .who, .line.bottom .piles { padding-bottom: 10px; flex: 0 0 auto; }
.line.bottom .hand { flex: 1; min-width: 0; }
.half.opp { background: linear-gradient(#0000, #1a110922); }
.half.me { background: linear-gradient(#1a110922, #0000); }
.half.active::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 50%, #e3b35c0d, transparent 70%); animation: fadeIn .8s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.zone { position: relative; display: flex; gap: 10px; align-items: center; padding: 6px 4px; min-height: 0; transition: background .25s, box-shadow .25s; border-radius: 14px; }
.field-row { flex: 1 1 auto; min-height: calc(var(--h-field) + 18px); justify-content: center; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
/* игровой коврик: едва заметная разметка зоны */
.field-row::before { content: ''; position: absolute; inset: 8px 6%; border-radius: 22px; pointer-events: none;
  border: 1px solid #ffffff0a; background: radial-gradient(ellipse 70% 80% at 50% 50%, #e3b35c08, transparent 70%); box-shadow: inset 0 0 40px #0000004d; }
.field-row.me::before { background: radial-gradient(ellipse 70% 80% at 50% 50%, #e3b35c0d, transparent 70%); }
.zone-empty { position: relative; }
.summon-row { justify-content: center; flex: 0 0 auto; }
.summon-row.opp { padding-top: 2px; padding-bottom: 2px; }
.zone-empty { color: var(--dim); font: italic 14px var(--font-card); padding: 0 12px; text-align: center; animation: fadeIn .5s; }
.zone.drop-zone { background: #e3b35c0f; box-shadow: 0 0 0 2px #e3b35c55 inset; }
.zone.drop-zone.drop-hover, .half.drop-zone.drop-hover { background: #e3b35c22; box-shadow: 0 0 0 2px var(--gold) inset, 0 0 30px #e3b35c33 inset; }
.half.drop-zone { box-shadow: 0 0 0 2px #ff7a5c55 inset; border-radius: 16px; }
.half.drop-zone.drop-hover { box-shadow: 0 0 0 2px var(--atk) inset, 0 0 40px #ff7a5c33 inset; }

/* портрет игрока и колоды */
.who { position: relative; display: flex; align-items: center; gap: 10px; min-width: 170px; }
.piles { position: relative; display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 170px; flex-wrap: wrap; }
.orb { position: relative; width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9c8a, #c0392b 45%, #5e1510 80%); box-shadow: 0 0 0 2px #2a1810, 0 0 0 3.5px var(--bronze), 0 6px 14px #000c, inset 0 -6px 12px #0006; }
.orb.mine { cursor: grab; }
.orb.mine:active { cursor: grabbing; }
.orb-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.orb-ring circle { fill: none; stroke: #ffd2a6; stroke-width: 3; stroke-linecap: round; opacity: .55; transition: stroke-dasharray .6s var(--ease); }
.orb-n { font: 700 21px var(--font-card); color: #fff6ea; text-shadow: 0 2px 2px #000a; z-index: 1; }
.orb-ic { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; color: var(--mana); filter: drop-shadow(0 1px 1px #000); }
.who.prio .orb { box-shadow: 0 0 0 2px #2a1810, 0 0 0 3.5px var(--gold2), 0 0 22px #e3b35caa, 0 6px 14px #000c, inset 0 -6px 12px #0006; }
.pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pname { font: 700 16px var(--font-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.who.active .pname { color: var(--gold2); }
.thinking { display: inline-flex; gap: 3px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: bob 1s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
.acts { display: flex; align-items: center; gap: 6px; color: var(--act); font-weight: 700; }
.acts .pips { display: flex; gap: 3px; }
.acts .pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8a6a2a; background: #1a130b; transition: background .3s, box-shadow .3s, transform .3s var(--ease); }
.acts .pips i.on { background: radial-gradient(circle at 35% 30%, #fff0b8, #f2c55c 60%, #a87a20); border-color: #f7d692; box-shadow: 0 0 6px #f2c55c88; }
.acts b { min-width: 10px; }
.pile { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 16px; background: #120d08cc; border: 1px solid var(--line); font-size: 14px; color: var(--muted); min-height: 30px; }
.pile .ic { width: 15px; height: 15px; }
.pile.main .ic { color: #8fb6e8; }
.pile b { color: var(--text); }
button.pile { box-shadow: none; }
.pile.grave .ic { color: #bfa98a; }
.pile.grave.drop-zone { border-color: var(--gold); box-shadow: 0 0 14px #e3b35c66; }
.tools { display: inline-flex; gap: 6px; margin-left: 4px; }
.menu-pop { position: absolute; right: 4px; bottom: calc(100% + 6px); z-index: 40; background: #1d150ef5; border: 1px solid var(--line2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 40px #000c; max-width: 320px; animation: popIn .2s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.97); } }

/* пульсация счётчиков */
.pulse { animation: pulse .5s var(--ease); }
.pulse-down { animation: pulseDown .6s var(--ease); }
.pulse-up { animation: pulseUp .6s var(--ease); }
@keyframes pulse { 30% { transform: scale(1.25); } }
@keyframes pulseDown { 25% { transform: scale(1.18); filter: brightness(1.6) saturate(1.3); } }
@keyframes pulseUp { 25% { transform: scale(1.15); filter: brightness(1.4) hue-rotate(60deg); } }

/* центральная полоса */
.midline { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 12px 8px; border-block: 1px solid var(--line);
  background: linear-gradient(90deg, #0000, #1f160ecc 20%, #1f160ecc 80%, #0000); }
.midline::before, .midline::after { content: ''; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, #0000, var(--bronze), #0000); opacity: .5; }
.midline::before { top: -1px; }
.midline::after { bottom: -1px; }
.phase-track { display: flex; gap: 4px; align-items: center; justify-content: center; flex-wrap: wrap; }
.turn-n { font: italic 13px var(--font-card); color: var(--muted); margin-right: 6px; white-space: nowrap; }
.ph { position: relative; font-size: 12px; padding: 2px 9px; border-radius: 12px; color: var(--dim); background: #120d08; border: 1px solid #2a2016; transition: color .35s, background .35s, border-color .35s, box-shadow .35s, transform .35s var(--ease); white-space: nowrap; }
.ph.past { color: #8b7a62; }
.ph.cur { color: #22160a; font-weight: 700; background: linear-gradient(#f4d28c, #cf9a45); border-color: #f7d692; box-shadow: 0 0 14px #e3b35c66; transform: scale(1.06); }
.phase-track.theirs .ph.cur { background: linear-gradient(#b9c7d8, #7d8fa6); border-color: #d6e2f0; box-shadow: 0 0 14px #9fb6d466; }
.mid-main { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; min-height: 46px; }
.status { color: var(--muted); font: italic 14px var(--font-card); text-align: center; max-width: 520px; animation: fadeIn .4s; }
.btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.stack { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 12px; background: #2a1d33aa; border: 1px solid #6b4a8a; box-shadow: 0 0 22px #8a5ab333; animation: popIn .25s var(--ease); }
.stack-t { font: italic 12px var(--font-card); color: #d8bfff; writing-mode: horizontal-tb; max-width: 74px; line-height: 1.15; }
.spell { position: relative; }
.spell .cs { animation: spellGlow 1.6s ease-in-out infinite; border-radius: 8px; }
@keyframes spellGlow { 50% { filter: drop-shadow(0 0 10px #d8a6ffaa); } }

/* боковая панель */
.side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: #100c08cc; padding: 10px; gap: 6px; animation: sideIn .35s var(--ease); }
@keyframes sideIn { from { opacity: 0; transform: translateX(20px); } }
.side-t { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin-top: 4px; }
.log { flex: 1; overflow: auto; font-size: 13px; line-height: 1.35; padding-right: 4px; scrollbar-width: thin; }
.log .ln { padding: 3px 0; border-bottom: 1px solid #ffffff07; color: #d8cbb2; animation: lnIn .45s var(--ease); }
.log .ln.turn { color: var(--gold2); font: 700 13px var(--font-card); padding-top: 8px; }
@keyframes lnIn { from { opacity: 0; transform: translateX(10px); background: #e3b35c22; } }
.dq { display: flex; flex-direction: column; gap: 3px; animation: popIn .25s var(--ease); }
.dq-row { display: grid; grid-template-columns: 40px 1fr; column-gap: 6px; font-size: 13px; padding: 3px 6px; border-radius: 6px; background: #1a120b; animation: lnIn .35s var(--ease); }
.dq-row .muted { grid-column: 2; font-size: 11px; }
.dq-v { font-weight: 700; grid-row: span 2; align-self: center; }
.dq-row.dmg .dq-v { color: #ff8a76; }
.dq-row.heal .dq-v { color: var(--good); }

/* ---------- карты ---------- */
.cs { --w: calc(var(--h) * .716); position: relative; flex: 0 0 auto; width: var(--w); height: var(--h); transition: width .38s var(--ease); }
.cs.tapped { width: var(--h); }
.sz-field { --h: var(--h-field); }
.sz-hand { --h: var(--h-hand); }
.sz-summon { --h: var(--h-summon); }
.sz-back { --h: var(--h-back); }
.sz-stack { --h: var(--h-stack); }
.sz-grave { --h: var(--h-grave); }
.sz-top { --h: 64px; }
.top-main { display: inline-flex; margin-right: 4px; }
.stored-list { display: flex; flex-wrap: wrap; gap: 6px; }
.gem.stored { left: 4%; top: 2.5%; padding: 2px 6px; border-radius: 20px; background: #1a120bdd; box-shadow: 0 0 0 1px var(--frame); color: #f0e2c6; }
.card.is-invisible { opacity: .55; filter: saturate(.6) brightness(1.15); animation: shimmer 2.6s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .35; filter: saturate(.4) brightness(1.3) blur(.4px); } }
.card {
  --frame: var(--bronze);
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  border-radius: calc(var(--w) * .065); overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: linear-gradient(170deg, #4a3520, #241910 60%, #1a1209);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), inset 0 0 0 calc(var(--w) * .035) #0008, 0 4px 10px #000b;
  transition: transform .38s var(--ease), box-shadow .22s, filter .25s, opacity .25s;
  font-family: var(--font-card); color: var(--ink);
}
.cs.tapped .card { transform: translateX(calc((var(--h) - var(--w)) / 2)) rotate(90deg); }
.card.t-weapon { --frame: #9ea4ab; background: linear-gradient(170deg, #4b4d52, #24262a 60%, #16171a); }
.card.t-armor { --frame: #a8925a; background: linear-gradient(170deg, #4b4a33, #25241a 60%, #17160f); }
.card.t-amulet { --frame: #b48ad6; background: linear-gradient(170deg, #4a3557, #24192b 60%, #170f1c); }
.card.t-artifact { --frame: #e3c06a; background: linear-gradient(170deg, #57461f, #2b2210 60%, #1b150a); }
.card.t-event { --frame: #7fb2d8; background: linear-gradient(170deg, #2d4357, #17222c 60%, #0f161c); }
.card.t-potion { --frame: #d87fb0; background: linear-gradient(170deg, #57304a, #2b1825 60%, #1c0f18); }
.card.t-scroll { --frame: #cdb07a; background: radial-gradient(ellipse at 50% 30%, #f3e4c0, #dcc394 70%, #b99b66); }
.card.t-scroll.c-white { --seal: #4f7fc8; }
.card.t-scroll.c-black { --seal: #3b2f4d; }
.card.t-scroll.c-red { --seal: #b8442c; }
.card.t-scroll.c-green { --seal: #4e8a3a; }
.card .art {
  position: absolute; left: 7%; right: 7%; top: 5.5%; height: 57%;
  border-radius: calc(var(--w) * .03); background: #120c07 center 32% / cover no-repeat;
  box-shadow: 0 0 0 1px #000c, 0 0 0 calc(var(--w) * .018) var(--frame), inset 0 0 calc(var(--w) * .12) #0007;
  display: grid; place-items: center;
}
.card.t-scroll .art { background-color: transparent; background-size: 92%; background-position: center; box-shadow: none; mix-blend-mode: multiply; top: 10%; height: 50%; }
/* у магии беты — рисунок пером во всё окно */
.card.t-scroll.set-beta .art { background-size: cover; top: 6%; height: 56%; left: 8%; right: 8%; border-radius: calc(var(--w) * .02); }
.bigcard.t-scroll.set-beta .bc-art { aspect-ratio: 1.13; }
.bigcard.t-scroll.set-beta .bc-art img { object-fit: cover; }
.card .art .noart .ic { width: calc(var(--w) * .34); height: calc(var(--w) * .34); color: #ffffff22; }
.card .plate {
  position: absolute; left: 4%; right: 4%; top: 64%; min-height: 15%;
  display: grid; place-items: center; text-align: center; padding: 1px 3px;
  border-radius: calc(var(--w) * .025);
  background: linear-gradient(#f2e2bf, #d8bf8f); box-shadow: 0 0 0 1px #0009, inset 0 1px 0 #fff8;
}
.card.t-scroll .plate { background: transparent; box-shadow: none; }
.card .nm { font-weight: 700; font-size: calc(var(--w) * .1); line-height: 1.04; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gem { position: absolute; display: flex; align-items: center; gap: 1px; font: 700 calc(var(--w) * .14)/1 var(--font-card); color: #fff6ea; text-shadow: 0 1px 2px #000; }
.gem .ic { width: calc(var(--w) * .14); height: calc(var(--w) * .14); }
.gem.cost { top: 2.5%; left: 3%; padding: calc(var(--w) * .02) calc(var(--w) * .04); border-radius: 20px; background: #1a120bdd; box-shadow: 0 0 0 1px var(--frame); }
.gem.cost.mana .ic { color: var(--mana); }
.gem.cost.act .ic { color: var(--act); }
.gem.life { right: 3%; bottom: 3%; padding: calc(var(--w) * .02) calc(var(--w) * .05); border-radius: 20px; background: radial-gradient(circle at 35% 30%, #ff8f7e, #b8322a 60%, #6b1712); box-shadow: 0 0 0 1px #2a0c08, 0 0 0 calc(var(--w) * .015) #e9a97f88, 0 2px 4px #000a; transition: transform .25s var(--ease); }
.gem.life .ic { color: #ffd9d0; width: calc(var(--w) * .11); height: calc(var(--w) * .11); }
.gem.life.hurt { background: radial-gradient(circle at 35% 30%, #ffb08e, #d9552a 60%, #7b2a10); }
.gem.life.over { background: radial-gradient(circle at 35% 30%, #a7f0a0, #3f9a3a 60%, #1c4d18); }
.gem.dmg { left: 4%; bottom: 3.5%; gap: 3px; }
.gem.lvl { right: 6%; bottom: 4%; width: calc(var(--w) * .22); height: calc(var(--w) * .22); justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal, #6b4a2a) 60%, #fff), var(--seal, #6b4a2a) 70%); font-size: calc(var(--w) * .1); box-shadow: 0 0 0 1px #0008, 0 2px 4px #0008; }
.gem.charge { right: 4%; bottom: 3.5%; padding: 2px 6px; border-radius: 20px; background: #10213add; box-shadow: 0 0 0 1px #4a7ab8; }
.gem.charge .ic { color: var(--mana); }
.dmgc { display: inline-flex; align-items: center; gap: 1px; }
.dmgc .ic { color: #f0e2c6; }
.dmgc.fire .ic { color: #ff9d4a; }
.dmgc.cold .ic { color: #8fd2ff; }
.dmgc.magic .ic { color: #d8a6ff; }
.manabar { position: absolute; left: 5%; right: 5%; bottom: 3.5%; height: calc(var(--w) * .17); border-radius: 20px; background: #0a1220dd; box-shadow: 0 0 0 1px #2e4f7a; overflow: hidden; display: grid; place-items: center; }
.manabar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * 100%); background: linear-gradient(90deg, #1f4f8f, #4d9be6); transition: width .5s var(--ease); }
.manabar span { position: relative; font: 700 calc(var(--w) * .11)/1 var(--font-ui); color: #e6f2ff; display: flex; gap: 2px; align-items: center; }
.manabar .ic { width: calc(var(--w) * .11); height: calc(var(--w) * .11); }
.marks { position: absolute; top: 3%; right: 3%; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.mk { display: grid; place-items: center; min-width: calc(var(--w) * .2); height: calc(var(--w) * .2); padding: 0 3px; border-radius: 20px; font: 700 calc(var(--w) * .09)/1 var(--font-ui); color: #fff; box-shadow: 0 2px 5px #000a; animation: popIn .25s var(--ease); }
.mk .ic { width: 62%; height: 62%; }
.mk.atk { background: radial-gradient(circle at 35% 30%, #ffa08a, #c0392b); }
.mk.blk { background: radial-gradient(circle at 35% 30%, #a8d4ff, #2f6fb8); }
.mk.shot { background: radial-gradient(circle at 35% 30%, #ffe39a, #c08a20); color: #2a1c06; }
.mk.new { animation: mkIn .45s var(--ease); }
@keyframes mkIn { from { transform: scale(2); opacity: 0; } }
.chips { position: absolute; left: 4%; bottom: 3.5%; right: 34%; display: flex; gap: 2px; flex-wrap: wrap-reverse; }
.chip { position: relative; width: calc(var(--w) * .2); height: calc(var(--w) * .2); border-radius: 50%; background: #241a10 center/cover; box-shadow: 0 0 0 1px #000, 0 0 0 calc(var(--w) * .012 + 1px) var(--bronze); display: grid; place-items: center; color: #fff; transition: transform .2s var(--ease), box-shadow .2s; }
.chip .ic { width: 60%; height: 60%; }
.chip.ench { box-shadow: 0 0 0 1px #000, 0 0 0 calc(var(--w) * .012 + 1px) #c99aff, 0 0 6px #c99aff88; background-color: #2c1f3b; }
.chip.t-weapon { box-shadow: 0 0 0 1px #000, 0 0 0 calc(var(--w) * .012 + 1px) #c3c8cf; }
.chip .sub { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: #c99aff; color: #1a0f26; font: 700 8px/11px var(--font-ui); text-align: center; font-style: normal; }
.chip:hover { transform: scale(1.35); z-index: 3; }
.pend { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); display: flex; gap: 3px; z-index: 4; pointer-events: none; }
.pend span { font: 700 calc(var(--w) * .16)/1 var(--font-card); padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 8px #000c; animation: pendIn .4s var(--ease), pendPulse 1.4s ease-in-out .4s infinite; }
.pend .pd { background: #a8241ae8; color: #fff; }
.pend .ph { background: #2f7a2ae8; color: #fff; }
.orb .pend { top: auto; bottom: -12px; }
.orb .pend span { font-size: 14px; }
@keyframes pendIn { from { transform: scale(1.8); opacity: 0; } }
@keyframes pendPulse { 50% { transform: scale(1.08); } }

/* состояния карт */
.card.is-summoned .art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 55%, #6fb3ff30); animation: fadeIn .5s; }
.card.is-stunned { filter: saturate(.5) brightness(.85); }
.card.is-stunned::after { content: '✦ ✧ ✦'; position: absolute; left: 0; right: 0; top: 28%; text-align: center; color: #e7c0ff; font-size: calc(var(--w) * .16); text-shadow: 0 0 6px #b06bff; animation: stun 2s linear infinite; }
@keyframes stun { 50% { transform: translateY(-3px); opacity: .6; } }
.card.token { --frame: #8fd27a; }
.card.hasopt { box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), inset 0 0 0 calc(var(--w) * .035) #0008, 0 0 0 2px #f7d692aa, 0 0 14px #e3b35c88, 0 4px 10px #000b; }
.card.hasopt::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: 0 0 0 2px #f7d692; opacity: 0; animation: optPulse 2.2s ease-in-out infinite; }
@keyframes optPulse { 50% { opacity: .7; } }
.card.sel { box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), 0 0 0 3px var(--gold2), 0 0 26px #e3b35ccc, 0 8px 18px #000c; }
.cs:not(.tapped) .card.sel { transform: translateY(-6px); }
.cs.tapped .card.sel { transform: translateX(calc((var(--h) - var(--w)) / 2)) rotate(90deg) scale(1.04); }
.game.mode-targets .card:not(.cand):not(.chosen):not(.source), .game.mode-assign .field-row .card:not(.cand) { filter: brightness(.5) saturate(.6); }
.game.mode-declare .field-row .card:not(.cand):not(.chosen) { filter: brightness(.65) saturate(.7); }
.card.cand { box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), 0 0 0 2px #8ff07a, 0 0 18px #8ff07a99; animation: candPulse 1.3s ease-in-out infinite; }
@keyframes candPulse { 50% { box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), 0 0 0 3px #b8ffa8, 0 0 30px #8ff07acc; } }
.card.chosen { box-shadow: 0 0 0 1px #000, inset 0 0 0 calc(var(--w) * .025) var(--frame), 0 0 0 3px #8ff07a, 0 0 26px #8ff07aee; animation: none; }
.cs:not(.tapped) .card.chosen { transform: translateY(-5px); }
.card.source { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold2), 0 0 26px #e3b35ccc; }
.card.drop-ok, .cs.drop-ok .card { box-shadow: 0 0 0 1px #000, 0 0 0 2px #8ff07a, 0 0 22px #8ff07aaa; }
.cs.drop-ok.drop-hover .card { box-shadow: 0 0 0 1px #000, 0 0 0 4px #b8ffa8, 0 0 36px #8ff07a; transform: scale(1.07); }
.cs.drop-ok.tapped.drop-hover .card { transform: translateX(calc((var(--h) - var(--w)) / 2)) rotate(90deg) scale(1.07); }
.dragging .cs:not(.drop-ok) .card { filter: brightness(.55) saturate(.6); }
.dragging.drag-mana .cs:not(.drop-ok) .card, .dragging.drag-card .hand .card { filter: none; }
.cs.drag-src .card { opacity: .3; filter: grayscale(.6); }
/* на сенсорных экранах вертикальный жест по перетаскиваемой карте — перетаскивание, горизонтальный — прокрутка ряда */
.card.draggable { touch-action: pan-x; }
.orb.mine { touch-action: none; }
@media (hover: hover) {
  .field-row .cs:not(.tapped) .card:hover, .summon-row .card:hover, .grave-list .card:hover, .stack .card:hover { transform: translateY(-5px); }
  .card:hover { filter: brightness(1.08); }
}
/* рубашка */
.card.back { background: radial-gradient(circle at 50% 45%, #6a2418, #3a120c 60%, #220806); --frame: #9a6a3a; }
.card .back-art, .bigcard .back-art { position: absolute; inset: 9%; border-radius: 6px; border: 1px solid #c8964f66;
  background: radial-gradient(circle at 50% 50%, #d9a44f55 0 12%, transparent 13%), repeating-conic-gradient(from 0deg, #ffffff08 0 10deg, transparent 10deg 20deg), radial-gradient(circle, #5a1a12, #2a0a06); }
.card .manapips { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; font: 700 calc(var(--w) * .2)/1 var(--font-ui); color: #e6f2ff; background: #0a1220dd; padding: 2px 6px; border-radius: 12px; box-shadow: 0 0 0 1px #2e4f7a; }
.card .manapips .ic { color: var(--mana); width: calc(var(--w) * .18); height: calc(var(--w) * .18); }

/* рука веером */
.hand { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 10px; min-height: calc(var(--h-hand) * .95); }
.hand-slot { position: relative; margin: 0 calc(var(--h-hand) * -.075 - var(--n, 7) * .6px); transition: transform .35s var(--ease), margin .35s var(--ease); transform-origin: 50% 120%;
  transform: translateY(calc(var(--ac) * var(--ac) * 1.6px + 5%)) rotate(calc(var(--c) * 2.2deg)); z-index: 1; }
.hand-slot:hover, .hand-slot:has(.sel), .hand-slot:has(.drag-src) { transform: translateY(-6%) rotate(0deg) scale(1.05); z-index: 10; }
.hand .zone-empty { align-self: center; padding: 18px; }

/* ---------- большая карта (предпросмотр) ---------- */
#peek { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; transition: opacity .16s ease-out; will-change: transform; }
#peek.on { opacity: 1; }
#peek .peek-in { display: flex; flex-direction: column; gap: 8px; width: 300px; transform: scale(.94); transform-origin: 0 50%; transition: transform .2s var(--ease); }
#peek.on .peek-in { transform: scale(1); }
.bigcard {
  position: relative; width: 300px; border-radius: 16px; padding: 12px 14px 10px; overflow: hidden;
  background: linear-gradient(#2c1f12, #1b130b); border: 1px solid #000;
  box-shadow: inset 0 0 0 5px var(--frame), inset 0 0 0 6px #0009, 0 18px 50px #000e, 0 0 0 1px #000;
  font-family: var(--font-card); color: var(--ink);
}
.bigcard.t-creature, .bigcard.card { --frame: var(--bronze); }
.bigcard.card { position: relative; width: 300px; height: auto; left: auto; top: auto; cursor: default; }
.bigcard .bc-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(#f2e2bf, #d9c08f); box-shadow: 0 0 0 1px #0009; }
.bigcard .bc-name { font-weight: 700; font-size: 19px; line-height: 1.15; flex: 1; }
.bigcard .bc-cost { display: flex; align-items: center; gap: 3px; font-weight: 700; font-size: 19px; padding: 0 8px; border-radius: 14px; background: #1a120b; color: #fff6ea; }
.bigcard .bc-cost.mana .ic { color: var(--mana); }
.bigcard .bc-cost.act .ic { color: var(--act); }
.bigcard .bc-sub { color: #f0e2c6; font-style: italic; font-size: 14px; margin: 4px 4px 0; }
.bigcard .bc-art { margin-top: 8px; aspect-ratio: 1.3; border-radius: 8px; overflow: hidden; background: #0d0905; box-shadow: 0 0 0 2px var(--frame), 0 0 0 3px #000; display: grid; place-items: center; }
.bigcard .bc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bigcard .bc-art .noart .ic { width: 70px; height: 70px; color: #ffffff22; }
.bigcard .bc-type { margin-top: 8px; color: #f3e6cb; font-size: 15px; font-weight: 700; }
.bigcard .bc-stats { display: flex; gap: 12px; margin-top: 4px; color: #f3e6cb; font-size: 15px; font-weight: 700; flex-wrap: wrap; }
.bigcard .st { display: inline-flex; align-items: center; gap: 4px; }
.bigcard .st .ic { width: 16px; height: 16px; color: #d9c08f; }
.bigcard .st.life .ic { color: #ff8a7a; }
.bigcard .st small { font-size: 12px; opacity: .7; }
.bigcard .bc-text { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: linear-gradient(#f2e3c2, #dfc799); box-shadow: inset 0 0 0 1px #0007, inset 0 2px 8px #fff5; font-size: 14.5px; line-height: 1.32; }
.bigcard .bc-text p { margin: 0 0 5px; }
.bigcard .bc-text p:last-child { margin-bottom: 0; }
.bigcard .bc-text:empty { display: none; }
.bigcard .bc-flavor { margin-top: 6px; color: #cdb995; font-style: italic; font-size: 13px; line-height: 1.3; }
.bigcard .bc-foot { margin-top: 8px; display: flex; gap: 8px; align-items: center; color: #9c8a6c; font: 11px var(--font-ui); }
.bigcard .bc-foot .setm { font: 700 16px var(--font-card); color: #cdb995; }
.bigcard .bc-foot .num { margin-left: auto; }
.bigcard.t-scroll { background: radial-gradient(ellipse at 50% 25%, #f6e9c9, #e0c99a 65%, #bfa06b); }
.bigcard.t-scroll .bc-head { background: transparent; box-shadow: none; padding: 2px 4px; }
.bigcard.t-scroll .bc-sub { color: var(--ink); }
.bigcard.t-scroll .bc-art { background: transparent; box-shadow: none; aspect-ratio: 1.6; }
.bigcard.t-scroll .bc-art img { object-fit: contain; mix-blend-mode: multiply; }
.bigcard.t-scroll .bc-text { background: transparent; box-shadow: none; padding: 4px 6px; }
.bigcard.t-scroll .bc-flavor, .bigcard.t-scroll .bc-foot { color: #6b5638; }
.bigcard.t-scroll::after { content: ''; position: absolute; right: 16px; bottom: 34px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal, #6b4a2a) 55%, #fff), var(--seal, #6b4a2a) 72%); box-shadow: 0 2px 6px #0007; opacity: .9; }
.back-big { height: 410px; background: radial-gradient(circle at 50% 45%, #6a2418, #3a120c 60%, #220806); --frame: #9a6a3a; }
.back-big .back-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #f0d9b8; font-style: italic; }
.peek-state { background: #1a120bf2; border: 1px solid var(--line2); border-radius: 12px; padding: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 30px #000c; color: var(--text); font-family: var(--font-ui); }
.peek-state .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 10px; background: #2b2016; border: 1px solid var(--line2); font-size: 12px; }
.tag.sum { color: #9fd0ff; }
.tag.stun { color: #e7c0ff; }
.tag.up { color: var(--good); }
.tag.down { color: #ff9a86; }
.atts { display: flex; flex-direction: column; gap: 6px; }
.att-row { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.att-row img, .att-ic { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1.5px var(--bronze); display: grid; place-items: center; background: #2c1f3b; }
.att-text { color: var(--muted); font-size: 12px; line-height: 1.3; }
.att-text p { margin: 0; }
.att-sub { font-size: 12px; color: #d8bfff; margin-top: 2px; }

/* ---------- нижний лист ---------- */
.sheet {
  position: fixed; z-index: 60; right: 16px; bottom: 16px; width: 380px; max-height: calc(100vh - 32px); overflow: auto;
  background: linear-gradient(#251a10f7, #1a120bf7); border: 1px solid var(--line2); border-radius: 16px; padding: 14px 16px 16px;
  box-shadow: 0 20px 60px #000d, 0 0 0 1px #000, inset 0 1px 0 #ffffff12; backdrop-filter: blur(8px);
  animation: sheetIn .28s var(--ease); display: flex; flex-direction: column; gap: 10px;
}
.game.with-side ~ .sheet { right: calc(var(--side-w) + 16px); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.sheet .close { position: absolute; right: 10px; top: 10px; min-height: 30px; width: 30px; font-size: 14px; z-index: 3; }
.sel-sheet .sheet-card { padding-top: 26px; }
.sheet-t { font: 700 18px var(--font-card); color: var(--gold2); padding-right: 36px; }
.prompt { font-size: 14px; }
.steps { display: flex; gap: 4px; }
.steps span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #120d08; border: 1px solid var(--line2); color: var(--dim); transition: all .25s; }
.steps span.cur { background: var(--gold); color: #22160a; border-color: var(--gold2); font-weight: 700; }
.steps span.done { background: #2f5a2c; color: #d6f5cf; border-color: #4f8a49; }
.cand-list { display: flex; flex-wrap: wrap; gap: 6px; }
button.chipbtn { min-height: 32px; padding: 4px 11px; font-size: 13px; border-radius: 16px; }
button.chipbtn.chosen { background: linear-gradient(#3b6e35, #2a5226); border-color: #8ff07a; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opts button.opt { text-align: left; }
.opts button.opt.cast { border-color: #7c5aa8; }
.opts button.opt.equip { border-color: #8a8f97; }
.sel-sheet .sheet-card .bigcard { width: 100%; }
.decl-list { font-size: 14px; color: var(--text); min-height: 20px; }
.stepper { display: flex; gap: 10px; align-items: center; }
.stepper .num { font: 700 30px var(--font-card); min-width: 44px; text-align: center; color: var(--gold2); }
.grave-sheet { width: min(760px, calc(100vw - 32px)); }
.grave-list { display: flex; flex-wrap: wrap; gap: 10px; }
.assign .as-cr { display: flex; flex-direction: column; gap: 6px; }
.assign .as-ct { font: 700 15px var(--font-card); color: var(--text); }
.assign .as-src { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .2s, background .2s; }
.assign .as-src.focus { border-color: var(--gold); background: #e3b35c0d; }
.assign .as-h { font-size: 13px; color: var(--muted); }
.assign .as-h .left { color: #ffb08e; font-weight: 700; }
.assign .as-h .ok { color: var(--good); font-weight: 700; }
.as-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 8px; transition: background .2s; }
.as-row.lethal { background: #5a1a1222; }
.as-name { flex: 1; font-size: 14px; min-width: 0; }
.as-ctl { display: inline-flex; align-items: center; gap: 5px; }
.as-ctl b { min-width: 16px; text-align: center; font-size: 16px; }
.as-pred { min-width: 50px; text-align: right; font-weight: 700; color: #ffb08e; }
.chooser { position: fixed; z-index: 150; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: #1d150ef7; border: 1px solid var(--line2); box-shadow: 0 14px 40px #000d; animation: popIn .18s var(--ease); }
.chooser .ghostbtn { background: transparent; box-shadow: none; }

/* ---------- окно конца партии ---------- */
.overlay { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle, #000a, #000d); display: grid; place-items: center; padding: 16px; animation: fadeIn .6s ease-out; }
/* окно итога выходит после баннера победы/поражения */
.over-card { text-align: center; padding: 28px 30px; border-radius: 18px; background: linear-gradient(#2a1d12, #18110a); border: 1px solid var(--line2); box-shadow: 0 30px 80px #000, 0 0 0 1px #000; display: flex; flex-direction: column; gap: 12px; min-width: min(380px, 100%); animation: overIn .7s var(--ease) 2.2s both; }
@keyframes overIn { from { opacity: 0; transform: translateY(20px) scale(.94); } }
.over-t { font: 700 46px var(--font-card); background: linear-gradient(#fff2c8, #e3b35c 50%, #9a6526); -webkit-background-clip: text; background-clip: text; color: transparent; }
.over-card.lose .over-t { background: linear-gradient(#e8d6c6, #a88a72 50%, #5b4636); -webkit-background-clip: text; background-clip: text; }

/* ---------- слои эффектов ---------- */
#arrows { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: visible; }
#arrows .arrow { fill: none; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 6px currentColor); opacity: .9; }
#arrows .arrow.dashed { stroke-dasharray: 10 8; animation: dash .7s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
#particles { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
#fx { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
#drag { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.drag-clone { position: fixed; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 18px 24px #000c); }
.drag-clone > .cs > .card { transform: scale(1.06); box-shadow: 0 0 0 1px #000, 0 0 0 2px #f7d692, 0 0 30px #e3b35caa; }
.drag-clone .card::before { display: none; }
.drag-clone.mana .mana-orb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #d4ecff, #4d9be6 50%, #173f78); box-shadow: 0 0 24px #78bcffcc, 0 0 0 2px #e6f4ff; animation: orbSpin 1.2s linear infinite; }
.drag-clone.mana .ic { width: 28px; height: 28px; color: #fff; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.ghost { position: fixed; z-index: 2; }
.ghost > .cs { position: relative; }
.fnum { position: fixed; z-index: 3; font: 700 34px/1 var(--font-card); text-shadow: 0 3px 0 #000, 0 0 14px currentColor; white-space: nowrap; }
.fnum.dmg { color: #ff6a52; }
.fnum.heal { color: #8ff07a; }
.orb.fx-orb, #fx .orb { position: fixed; width: 18px; height: 18px; border-radius: 50%; z-index: 4; background: radial-gradient(circle, #fff, #ffd27a 40%, #e3b35c00 70%); box-shadow: 0 0 18px #ffd27a; display: block; }
#fx .orb.mana { background: radial-gradient(circle, #fff, #8fd0ff 40%, #4d9be600 70%); box-shadow: 0 0 18px #78bcff; }
#fx .orb.spell { width: 26px; height: 26px; background: radial-gradient(circle, #fff, #e2c4ff 35%, #a46cff00 70%); box-shadow: 0 0 26px #c99aff; }
#fx .orb.arrow-shot { width: 12px; height: 12px; background: radial-gradient(circle, #fff, #ffe08a 50%, #0000 72%); }
.ring { position: fixed; z-index: 3; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 22px var(--c), inset 0 0 22px var(--c); }
.banner { position: fixed; left: 50%; top: 46%; z-index: 5; text-align: center; padding: 18px 70px; white-space: nowrap;
  background: linear-gradient(90deg, #0000, #120c07e6 18%, #120c07e6 82%, #0000); }
.banner .b-main { font: 700 clamp(34px, 6vw, 56px)/1.05 var(--font-card); background: linear-gradient(#fff2c8, #e3b35c 50%, #9a6526); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #000); }
.banner.theirs .b-main { background: linear-gradient(#eef3fa, #a9bad0 50%, #5f7088); -webkit-background-clip: text; background-clip: text; }
.banner .b-sub { color: var(--muted); font: italic 16px var(--font-card); margin-top: 4px; }
.banner.over .b-main { font-size: clamp(48px, 9vw, 84px); }
.banner.over.lose .b-main { background: linear-gradient(#e8d6c6, #a88a72 50%, #5b4636); -webkit-background-clip: text; background-clip: text; }
.exiting { z-index: 1; }
#peek .peek-scan { width: 340px; border-radius: 14px; box-shadow: 0 18px 50px #000e; display: block; }
.scan-view { position: fixed; inset: 0; z-index: 180; background: #000c; display: grid; place-items: center; cursor: zoom-out; padding: 16px; backdrop-filter: blur(3px); }
.scan-view figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scan-view img { max-height: calc(100vh - 90px); max-width: calc(100vw - 32px); border-radius: 16px; box-shadow: 0 30px 80px #000; image-rendering: auto; }
.scan-view figcaption { color: var(--muted); font: italic 14px var(--font-card); }
.scan-btn { align-self: flex-start; }
.dl-art { cursor: zoom-in; }

/* ---------- узкие экраны ---------- */
@media (max-width: 1100px) {
  .game.with-side { grid-template-columns: 1fr; }
  .game.with-side .side { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); z-index: 50; box-shadow: -10px 0 40px #000c; background: #120d09f5; }
  .side-backdrop { position: fixed; inset: 0; z-index: 49; background: #0008; animation: fadeIn .25s ease-out; }
  .game.with-side ~ .sheet { right: 16px; }
}
@media (max-width: 760px) {
  :root { --h-field: 92px; --h-hand: 104px; --h-summon: 80px; --h-back: 48px; --h-stack: 70px; --h-grave: 110px; }
  body[data-screen="game"] { overflow: auto; }
  .game { height: auto; min-height: 100dvh; }
  .table { overflow: visible; }
  .half { flex: 0 0 auto; padding: 0 6px; }
  .zone { gap: 6px; padding: 4px 2px; }
  .field-row, .summon-row { justify-content: flex-start; overflow-x: auto; min-height: calc(var(--h-field) + 14px); }
  .summon-row { min-height: 0; }
  .hand { justify-content: flex-start; overflow-x: auto; padding: 4px 8px 10px; min-height: 0; }
  .hand-slot { margin: 0 3px; transform: none; }
  .hand-slot:hover, .hand-slot:has(.sel) { transform: translateY(-4px); }
  .line { flex-wrap: wrap; gap: 6px; }
  .line.bottom { align-items: center; }
  .line.bottom .hand { order: 3; flex-basis: 100%; }
  .line.bottom .who, .line.bottom .piles { padding-bottom: 0; }
  .who, .piles { min-width: 0; }
  .line.top .summon-row { order: 3; flex-basis: 100%; justify-content: center; }
  .orb { width: 44px; height: 44px; }
  .orb-n { font-size: 17px; }
  .pile { padding: 2px 7px; font-size: 13px; min-height: 26px; }
  .tools .icon-btn { width: 32px; min-height: 32px; }
  .midline { position: sticky; top: 0; z-index: 30; background: #140e09f2; backdrop-filter: blur(6px); padding: 6px 8px; }
  .phase-track { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .ph { font-size: 11px; padding: 2px 7px; }
  .mid-main { gap: 8px; min-height: 0; }
  .status { font-size: 13px; }
  .btns button.big { min-height: 40px; padding: 8px 14px; font-size: 15px; }
  .sheet, .game.with-side ~ .sheet { left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0; max-height: 78vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .sel-sheet .sheet-card { display: flex; justify-content: center; }
  .sel-sheet .bigcard { width: min(300px, 100%); }
  .seats { grid-template-columns: 1fr; }
  #peek .peek-in { width: min(300px, calc(100vw - 16px)); }
  .banner { padding: 14px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .05s !important; }
}