/* ============================================================
   DOTA МОНОПОЛИЯ — стили (часть 2: игровой экран, поле, кубики, фишки)
   ============================================================ */

/* ---------- GAME LAYOUT ---------- */
.game-root {
  position: relative; width: 100%; height: 100vh;
  background:
    radial-gradient(1100px 600px at 50% 12%, rgba(19,26,42,.4) 0%, transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(20,17,10,.4) 0%, transparent 55%);
  overflow: hidden;
}
.game-top { position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 30;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  /* Solid (non-translucent) bar: a backdrop-filter here re-samples the live SMIL-animated
     banner flag whenever a top-row token pokes up under it, which read as flicker/glitch.
     A solid background covers the flag tip cleanly with no per-frame re-blur. */
  background: #120c08; border-bottom: 1px solid var(--ui-border); }
.gt-back { color: var(--txt-dim); font-size: 14px; letter-spacing: .06em; }
.gt-back:hover { color: var(--gold); }
.gt-logo { font-family: var(--font-h); font-weight: 600; letter-spacing: .14em; font-size: 15px; color: #f0e8d4; }
.gt-logo span { color: var(--gold); }
.gt-tools { margin-left: auto; display: flex; gap: 14px; }
.gt-seg { display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px 3px 10px; }
.gt-seg > span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--txt-dim); margin-right: 6px; }
.gt-seg button { font-size: 12px; padding: 5px 8px 7px; color: var(--txt-dim); font-weight: 600; letter-spacing: .04em; border-bottom: 3px solid transparent; border-radius: 0; transition: color .2s ease, border-color .2s ease; }
.gt-seg button:hover { color: var(--txt); }
.gt-seg button.on { background: none; color: var(--gold-bright); border-bottom-color: var(--gold); }

.game-corner { position: absolute; z-index: 20; width: 210px; }
.game-corner.tl { top: 58px; left: 14px; }
.game-corner.tr { top: 58px; right: 14px; }
.game-corner.bl { bottom: 14px; left: 14px; }
.game-corner.br { bottom: 14px; right: 14px; }

/* чат: зеркально логу ходов, но слева по центру */
.game-chat { position: absolute; z-index: 18; top: 278px; bottom: 224px; left: 12px; width: 210px; }
.game-chat .chatp { width: 100%; height: 100%; }

.game-board-area { position: absolute; top: 50px; bottom: 214px; left: 222px; right: 252px; display: flex; align-items: center; justify-content: center; }
.game-right { position: absolute; top: 278px; bottom: 224px; right: 12px; width: 210px; z-index: 18; }
.game-bottom { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 22; display: flex; gap: 14px; align-items: flex-end; }

/* ---------- PLAYER PANEL ---------- */
/* Near-solid background (no backdrop-filter): the top player cards overlap the
   tall, SMIL-animated banner flag of a top-row token. A backdrop-filter there
   re-blurs the live flag every frame = flicker. A solid card covers it cleanly. */
.pp { --pc: var(--gold); position: relative; background: rgba(20,15,10,.97); border: 1px solid var(--ui-border); border-radius: 8px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: border-color .2s ease; }
.pp-active { border-color: color-mix(in srgb, var(--pc) 55%, var(--ui-border)); }
.pp-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--pc); }
.pp-top { display: flex; align-items: center; gap: 9px; }
.pp-ava { width: 34px; height: 40px; display: flex; align-items: flex-end; justify-content: center; }
.pp-id { flex: 1; min-width: 0; }
.pp-top { display: flex; align-items: center; gap: 9px; }
.pp-name { font-family: var(--font-h); font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-name em { color: var(--pc); font-style: normal; font-size: 11px; font-weight: 500; }
.pp-tok { font-size: 11px; color: var(--txt-dim); }
.pp-turn { font-size: 9px; letter-spacing: .1em; background: var(--pc); color: #0a0a0a; padding: 3px 7px; border-radius: 4px; font-weight: 600; }
.pp-jail { font-size: 9px; letter-spacing: .1em; color: #e0564f; border: 1px solid rgba(224,86,79,.4); padding: 2px 6px; border-radius: 3px; }
.pp-gold { display: flex; align-items: center; gap: 8px; margin: 10px 0 9px; padding: 7px 11px; background: rgba(0,0,0,.28); border: 1px solid var(--ui-border-soft); border-radius: 6px; }
.coin-ic { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.pp-gold-v { font-family: var(--font-h); font-weight: 600; font-size: 22px; color: var(--gold-bright); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.pp-gold-u { font-size: 11px; color: var(--txt-dim); letter-spacing: .04em; }
.pp-heroes { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.pp-empty { font-size: 11px; color: var(--txt-dim); font-style: italic; }
.pp-hero { width: 28px; height: 28px; border: 1px solid var(--ui-border); border-radius: 4px; overflow: hidden; transition: transform .15s; }
.pp-hero:hover { transform: scale(1.18); z-index: 2; }
.pp-hero img { width: 100%; height: 100%; object-fit: cover; }
.pp-items { display: flex; gap: 5px; margin-top: 8px; }
.pp-item { width: 26px; height: 26px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.pp-item img { width: 100%; height: 100%; object-fit: cover; }
.pp-item.amu { border-color: #9b59b6; }
.pp-item.aeg { border-color: var(--gold); }

/* ---------- LOG / CHAT ---------- */
.panel-head { font-family: var(--font-h); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: 9px 12px; border-bottom: 1px solid var(--ui-border-soft); background: rgba(0,0,0,.2); }
.logp { height: 100%; background: var(--ui-panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ui-border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.logp-body { flex: 1; overflow-y: auto; padding: 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.log-row { --lc: #cfc6b0; display: flex; gap: 8px; font-size: 12.5px; line-height: 1.34; align-items: flex-start; padding: 6px 9px 6px 8px; border-left: 2px solid var(--lc); border-radius: 0 3px 3px 0; background: rgba(255,255,255,.012); animation: logIn .25s ease-out; }
.log-row:nth-child(even) { background: rgba(255,255,255,.035); }
.log-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lc); margin-top: 6px; flex-shrink: 0; opacity: .85; }
.log-txt { color: #9A8A6A; transition: color .2s ease; }
.log-txt b { color: color-mix(in srgb, var(--lc) 78%, #cfc6b0); font-weight: 600; }
.log-row:last-child .log-txt { color: #E8D5A0; }
.log-row:last-child .log-txt b { color: var(--lc); }
@keyframes logIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.chatp { width: 412px; height: 200px; background: var(--ui-panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ui-border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; transition: opacity .55s ease, transform .55s ease; }
.chatp.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.chatp-tabs { display: flex; align-items: center; gap: 4px; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.chatp-tabs button { font-size: 12px; letter-spacing: .08em; padding: 5px 12px; color: var(--txt-dim); border-radius: 3px; position: relative; }
.chatp-tabs button.on { background: rgba(200,168,75,.15); color: var(--gold); }
.chatp-tabs button.pm.on { background: rgba(155,89,182,.18); color: #c98fe0; }
.pm-dot { position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #9b59b6; }
.chatp-sel { margin-left: auto; background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--txt); font-size: 12px; padding: 3px 6px; border-radius: 3px; }
.chatp-body { flex: 1; overflow-y: auto; padding: 8px 11px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.chat-msg { color: #c4bdac; line-height: 1.3; }
.chat-msg.is-pm { color: #c98fe0; }
.chat-msg b { font-weight: 600; }
.chatp-in { display: flex; gap: 6px; padding: 7px; border-top: 1px solid var(--line); }
.chatp-in input { flex: 1; background: rgba(0,0,0,.4); border: 1px solid var(--line); color: var(--txt); font-size: 13px; padding: 7px 10px; border-radius: 3px; transition: border-color .2s ease; }
.chatp-in input:focus { outline: none; border-color: var(--gold); box-shadow: none; }
.chatp-in button { width: 34px; background: rgba(255,255,255,.06); border: 1px solid var(--ui-border); color: var(--gold-bright); border-radius: 6px; font-size: 12px; transition: background .2s ease, border-color .2s ease; }
.chatp-in button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

/* ---------- DICE ZONE ---------- */
.dice-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 4px; }
.dice-pair { display: flex; gap: 16px; perspective: 600px; height: 64px; }
.die { width: 52px; height: 52px; position: relative; transform-style: preserve-3d; transition: transform .25s cubic-bezier(.2,.8,.3,1.2); }
.die-face { position: absolute; width: 52px; height: 52px; border-radius: 8px;
  background: linear-gradient(150deg, #20283a, #11151f); border: 1px solid #34405a;
  box-shadow: inset 0 0 14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.f-front { transform: translateZ(26px); }
.f-back { transform: rotateY(180deg) translateZ(26px); }
.f-right { transform: rotateY(90deg) translateZ(26px); }
.f-left { transform: rotateY(-90deg) translateZ(26px); }
.f-top { transform: rotateX(90deg) translateZ(26px); }
.f-bottom { transform: rotateX(-90deg) translateZ(26px); }
.pip-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 5px; }
.pip-cell { display: flex; align-items: center; justify-content: center; }
.brune { }

.dice-controls { display: flex; gap: 8px; align-items: center; }
.btn-roll { font-family: var(--font-h); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; width: 160px; padding: 10px 16px; color: var(--gold-bright); background: rgba(20,15,10,.8); border: 1px solid rgba(201,162,39,.5); border-radius: 8px; transition: background .2s ease, border-color .2s ease; }
.btn-roll:hover:not(:disabled) { background: rgba(201,162,39,.14); border-color: var(--gold-bright); }
.btn-roll:disabled { opacity: .5; cursor: default; }
.btn-end, .btn-trade { font-family: var(--font-h); font-weight: 500; font-size: 13px; letter-spacing: 0; padding: 10px 14px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--txt); background: transparent; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.btn-end:hover, .btn-trade:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.05); color: #fff; }
.action-bar { display: flex; gap: 9px; align-items: center; background: var(--ui-panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ui-border); border-radius: 8px; padding: 8px 12px; }
.action-bar > span { font-size: 13px; color: var(--txt); }
.action-bar b { color: var(--gold-bright); }
.btn-buy { font-family: var(--font-h); font-weight: 500; letter-spacing: 0; text-transform: none; padding: 8px 16px; background: rgba(20,15,10,.8); border: 1px solid rgba(201,162,39,.5); color: var(--gold-bright); border-radius: 8px; font-size: 13px; transition: background .2s ease, border-color .2s ease; }
.btn-buy:hover { background: rgba(201,162,39,.14); border-color: var(--gold-bright); }
.btn-skip { padding: 8px 14px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--txt); background: transparent; font-size: 13px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.btn-skip:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.05); color: #fff; }

/* ---------- DICE STAGE (бросок в центре поля) ---------- */
.dice-stage { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 24; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dice-stage .dice-pair { height: auto; perspective: 700px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.dice-stage .die { width: 60px; height: 60px; }
.dice-stage .die-face { width: 60px; height: 60px; }
/* пока крутятся (2 сек) — висят над столом и парят (трясём кости) */
.dice-stage.is-rolling { animation: diceDrop .5s cubic-bezier(.2,.9,.3,1.1) both, diceHover 1.05s ease-in-out .5s infinite; }
.dice-stage.is-settled { animation: diceLand .62s cubic-bezier(.18,.9,.32,1.05) both; }
@keyframes diceDrop {
  0%   { transform: translate(-50%, -160%) scale(.5); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -82%) scale(1.04); opacity: 1; }
}
@keyframes diceHover {
  0%, 100% { transform: translate(-50%, -88%) scale(1.04); }
  50%      { transform: translate(-50%, -76%) scale(1.04); }
}
/* бросок на стол — на 2-й секунде кости падают и подпрыгивают */
@keyframes diceLand {
  0%   { transform: translate(-50%, -150%) scale(1.28); }
  48%  { transform: translate(-50%, -43%) scale(.88); }
  66%  { transform: translate(-50%, -57%) scale(1.06); }
  82%  { transform: translate(-50%, -47%) scale(.98); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.dice-sum { font-family: var(--font-h); font-weight: 700; font-size: 28px; color: var(--gold-bright); line-height: 1;
  padding: 3px 16px; border-radius: 20px; background: rgba(12,10,6,.78); border: 1px solid var(--gold-deep);
  box-shadow: 0 0 24px rgba(200,168,75,.35), inset 0 0 12px rgba(0,0,0,.5); }

/* ---------- ADMIN: ручной ход ---------- */
.admin-panel { display: flex; flex-direction: column; gap: 6px; }
.admin-move { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 8px;
  background: rgba(201,162,39,.07); border: 1px solid var(--gold-deep); }
.admin-move .admin-tag { font-family: var(--font-h); font-weight: 700; font-size: 10px; letter-spacing: .14em;
  color: var(--gold-bright); opacity: .85; }
.admin-move input { width: 52px; padding: 8px 6px; text-align: center; font-family: var(--font-h); font-weight: 600;
  font-size: 14px; color: var(--gold-bright); background: rgba(12,10,6,.65); border: 1px solid var(--ui-border);
  border-radius: 6px; -moz-appearance: textfield; }
.admin-move input::-webkit-outer-spin-button, .admin-move input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.admin-move input:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(201,162,39,.18); }
.btn-admin-go { font-family: var(--font-h); font-weight: 500; font-size: 13px; padding: 8px 12px; border-radius: 6px;
  color: var(--gold-bright); background: rgba(201,162,39,.12); border: 1px solid var(--gold-deep); cursor: pointer; }
.btn-admin-go:hover:not(:disabled) { background: rgba(201,162,39,.22); border-color: var(--gold-bright); color: #fff; }
.btn-admin-go:disabled { opacity: .45; cursor: default; }
.manual-move-badge { font-family: var(--font-h); font-weight: 700; font-size: 40px; line-height: 1; color: var(--gold-bright);
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
  background: rgba(12,10,6,.82); border: 2px solid var(--gold-deep);
  box-shadow: 0 0 30px rgba(200,168,75,.4), inset 0 0 14px rgba(0,0,0,.55); }

.admin-dbl { display: flex; align-items: center; gap: 5px; padding: 4px 6px 4px 8px; border-radius: 8px;
  background: rgba(201,162,39,.07); border: 1px solid var(--gold-deep); }
.admin-dbl-label { font-family: var(--font-h); font-weight: 700; font-size: 10px; letter-spacing: .12em;
  color: var(--gold-bright); opacity: .85; margin-right: 2px; }
.btn-dbl { font-family: var(--font-h); font-weight: 600; font-size: 12px; padding: 7px 8px; border-radius: 6px;
  color: var(--gold-bright); background: rgba(12,10,6,.6); border: 1px solid var(--ui-border); cursor: pointer; line-height: 1; }
.btn-dbl:hover:not(:disabled) { background: rgba(201,162,39,.22); border-color: var(--gold-bright); color: #fff; }
.btn-dbl:disabled { opacity: .45; cursor: default; }
.btn-bankrupt { font-family: var(--font-h); font-weight: 600; font-size: 12px; letter-spacing: .04em; padding: 8px 12px;
  border-radius: 6px; color: #e0564f; background: rgba(224,86,79,.1); border: 1px solid rgba(224,86,79,.5); cursor: pointer; }
.btn-bankrupt:hover:not(:disabled) { background: rgba(224,86,79,.24); border-color: #e0564f; color: #fff; }
.btn-bankrupt:disabled { opacity: .4; cursor: default; }

/* ---------- FLOATS / TOAST ---------- */
.float-layer { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; z-index: 25; }
.float { position: absolute; font-family: var(--font-h); font-weight: 700; font-size: 34px; animation: floatUp 1.5s ease-out forwards; }
@keyframes floatUp { 0% { transform: translateY(20px) scale(.7); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { transform: translateY(-90px) scale(1); opacity: 0; } }
.toast { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--ui-panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ui-border); border-radius: 8px; padding: 12px 26px; text-align: center; box-shadow: 0 16px 50px rgba(0,0,0,.7); animation: toastIn .35s ease-out; min-width: 240px; }
.toast b { display: block; font-family: var(--font-h); font-weight: 600; color: var(--gold-bright); font-size: 16px; letter-spacing: .04em; }
.toast span { display: block; font-size: 13px; color: var(--txt-dim); margin-top: 3px; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- MINE EXPLOSION ---------- */
.mine-explosion { position: absolute; inset: 0; z-index: 38; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.mine-explosion > * { position: absolute; left: 50%; top: 50%; }
.mx-flash {
  width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe39a 22%, #ff9d3c 45%, #e0564f 68%, rgba(224,86,79,0) 78%);
  filter: blur(2px); animation: mxFlash 1.5s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes mxFlash {
  0% { transform: scale(.2); opacity: 0; }
  10% { transform: scale(1.1); opacity: 1; }
  35% { transform: scale(3.4); opacity: .95; }
  100% { transform: scale(5.2); opacity: 0; }
}
.mx-ring {
  width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  border: 4px solid #ffcf6b; box-shadow: 0 0 24px #ff9d3c, inset 0 0 16px #ff9d3c;
  animation: mxRing 1.2s ease-out forwards;
}
.mx-ring2 { border-color: #e0564f; animation-delay: .12s; }
@keyframes mxRing {
  0% { transform: scale(.1); opacity: .9; border-width: 6px; }
  100% { transform: scale(7); opacity: 0; border-width: 1px; }
}
.mx-shard {
  width: 10px; height: 26px; margin: -13px 0 0 -5px; border-radius: 2px;
  background: linear-gradient(#3a3f44, #15171a); border: 1px solid #ff7a3c;
  box-shadow: 0 0 8px #ff7a3c;
  transform: rotate(var(--a));
  animation: mxShard 1.1s cubic-bezier(.18,.7,.4,1) forwards;
}
@keyframes mxShard {
  0% { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1) rotate(180deg); opacity: 0; }
}
.mx-spark {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #ffe39a; box-shadow: 0 0 10px #ffcf6b, 0 0 4px #fff;
  transform: rotate(var(--a));
  animation: mxSpark .95s ease-out forwards;
}
@keyframes mxSpark {
  0% { transform: rotate(var(--a)) translateY(0) scale(.5); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0); opacity: 0; }
}
.mx-core {
  margin: -22px 0 0 -60px; width: 120px; text-align: center;
  font-family: var(--font-h); font-weight: 800; font-size: 40px; letter-spacing: .06em;
  color: #fff; text-shadow: 0 0 18px #ff7a3c, 0 0 8px #e0564f, 0 2px 0 #6b1f1a;
  animation: mxCore 1.4s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes mxCore {
  0% { transform: scale(.3) rotate(-8deg); opacity: 0; }
  18% { transform: scale(1.25) rotate(3deg); opacity: 1; }
  40% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.1) translateY(-30px); opacity: 0; }
}


/* ---------- TOKENS (anim) ---------- */
/* Promote each token SVG to its own compositing layer: the board is a tilted,
   foreshortened 3D surface, and re-rasterizing the SMIL-animated flag into that
   squished plane every frame causes sub-pixel shimmer (worst on the back/top row).
   Its own layer is rasterized at native scale and the foreshortening is composited. */
.tok { overflow: visible; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.tok-walk .tok-bob { animation: bob .6s ease-in-out infinite; transform-origin: center bottom; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.tok-walk .tok-legR { animation: legA .6s ease-in-out infinite; transform-origin: 38px 50px; }
.tok-walk .tok-legL { animation: legB .6s ease-in-out infinite; transform-origin: 26px 50px; }
@keyframes legA { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes legB { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.tok-arm { animation: armSwing .6s ease-in-out infinite; transform-origin: 47px 32px; }
@keyframes armSwing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
/* флаг знаменосца колышется через SMIL внутри SVG (без CSS-слоя — не мерцает) */
.tok-arrow { animation: arrow 1.6s ease-in-out infinite; }
@keyframes arrow { 0%,60% { opacity: 1; transform: translateX(0); } 80% { opacity: 0; transform: translateX(20px); } 81%,100% { opacity: 0; } }
.tok-roll .tok-wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tok-payload { animation: bobS 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes bobS { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ============================================================
   МЕХАНИКА ДУБЛЕЙ — статусы, фишки, анимации
   ============================================================ */

/* ---- статус-чипы в панели игрока ---- */
.pp-hex { font-size: 9px; letter-spacing: .1em; color: #c98fe0; border: 1px solid rgba(155,89,182,.5); padding: 2px 6px; border-radius: 3px; background: rgba(155,89,182,.12); }
.pp-item.inv { border-color: #7b4ae0; display: flex; align-items: center; justify-content: center; background: rgba(123,74,224,.12); }
.inv-ic { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed #7fd4e8; opacity: .85; animation: invSpin 3s linear infinite; }
@keyframes invSpin { to { transform: rotate(360deg); } }

/* ---- фишка: инвиз / хекс(свинья) ---- */
.tok-slot.invis-buff { animation: invShimmer 1.6s ease-in-out infinite; }
.tok-slot.invis-buff .tok { opacity: .42; filter: drop-shadow(0 0 6px #7fd4e8) saturate(.6); }
@keyframes invShimmer { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.tok-slot.hexed .tok-pig { animation: pigPop .5s cubic-bezier(.2,1.4,.4,1) both; }
.tok-pigimg { object-fit: contain; border-radius: 50%; box-shadow: 0 0 12px rgba(155,89,182,.7);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); animation: pigPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pigPop { 0% { transform: scale(.1) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ---- нижняя панель действий дубля ---- */
.dbl-bar { flex-wrap: wrap; max-width: 620px; justify-content: center; }
.dbl-smoke { color: #b98fe0; }
.dbl-hex { color: #c98fe0; }
.btn-hex { font-family: var(--font-h); font-weight: 500; font-size: 13px; padding: 8px 14px; border-radius: 8px;
  color: #fff; background: color-mix(in srgb, var(--pc) 22%, transparent); border: 1px solid var(--pc);
  transition: background .2s ease; }
.btn-hex:hover { background: color-mix(in srgb, var(--pc) 42%, transparent); }

/* ---- общий слой анимаций дублей ---- */
.dfx { position: absolute; inset: 0; z-index: 36; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.dfx > * { position: absolute; left: 50%; top: 50%; }
.dfx-label { font-family: var(--font-h); font-weight: 800; letter-spacing: .14em; font-size: 30px;
  transform: translate(-50%, -50%); white-space: nowrap; }

/* СМОК — фиолетовый дым */
.smoke-core { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,110,200,.7) 0%, rgba(90,60,140,.45) 45%, rgba(40,25,70,0) 72%);
  filter: blur(6px); animation: smokeCore 1.6s ease-out forwards; }
@keyframes smokeCore { 0% { transform: scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.smoke-puff { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(178,140,224,.85), rgba(96,64,150,.5) 55%, rgba(60,40,100,0) 75%);
  filter: blur(4px); transform: rotate(var(--a)) translateY(0) scale(.4);
  animation: smokePuff 1.5s cubic-bezier(.2,.7,.3,1) var(--dl) forwards; }
@keyframes smokePuff {
  0% { transform: rotate(var(--a)) translateY(0) scale(.3); opacity: 0; }
  25% { opacity: .95; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(var(--s)); opacity: 0; }
}
.smoke-lab { color: #d9c0f5; text-shadow: 0 0 16px #8e5fd0, 0 2px 0 #3a2360; animation: dfxLab 1.6s ease-out forwards; }
.smoke-orb { width: 200px; height: 200px; margin: -100px 0 0 -100px; object-fit: contain;
  mix-blend-mode: screen; filter: drop-shadow(0 0 30px #8e5fd0);
  animation: smokeOrb 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes smokeOrb {
  0% { transform: scale(.3) rotate(-30deg); opacity: 0; }
  25% { transform: scale(1.05) rotate(0deg); opacity: 1; }
  60% { transform: scale(1) rotate(10deg); opacity: 1; }
  100% { transform: scale(1.5) rotate(30deg); opacity: 0; }
}

/* ЗОЛОТО — падающие монеты */
.dfx-gold { overflow: hidden; }
.gold-drop { left: calc(50% + var(--x)); top: -70px; width: 46px; height: auto; margin: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); transform: scale(var(--sc));
  animation: goldFall 1.9s cubic-bezier(.4,.2,.7,1) var(--dl) forwards; }
@keyframes goldFall {
  0% { transform: translateY(0) rotate(0) scale(var(--sc)); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(440px) rotate(var(--rot)) scale(var(--sc)); opacity: 0; }
}

/* ИНВИЗ — голубое мерцание */
.inv-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  border: 3px solid #7fd4e8; box-shadow: 0 0 22px #5fc6e0, inset 0 0 14px #5fc6e0;
  animation: invRing 1.5s ease-out forwards; }
.inv-ring2 { animation-delay: .18s; border-color: #aef0ff; }
.inv-ring3 { animation-delay: .36s; border-color: #cfeffb; }
@keyframes invRing { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
.inv-lab { color: #cdeefb; text-shadow: 0 0 16px #5fc6e0, 0 2px 0 #1c5566; animation: dfxLab 1.7s ease-out forwards; }
.inv-rune { width: 200px; height: 200px; margin: -100px 0 0 -100px; object-fit: contain;
  border-radius: 20px; box-shadow: 0 0 44px rgba(123,74,224,.65); filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
  animation: invRune 1.9s cubic-bezier(.2,.85,.3,1.05) forwards; }
@keyframes invRune {
  0% { transform: scale(.3) rotate(-16deg); opacity: 0; }
  26% { transform: scale(1.1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1) rotate(0deg); opacity: 1; }
  72% { transform: scale(1) rotate(0deg); opacity: .55; }
  100% { transform: scale(1.18) rotate(8deg); opacity: 0; }
}

/* ХЕКС — фиолетовый магический всплеск */
.hex-burst { width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #d7a8ff 28%, #9b59b6 55%, rgba(120,60,160,0) 76%);
  filter: blur(2px); animation: mxFlash 1.5s cubic-bezier(.15,.7,.3,1) forwards; }
.hex-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 4px solid #c98fe0; box-shadow: 0 0 22px #9b59b6, inset 0 0 14px #9b59b6;
  animation: mxRing 1.2s ease-out forwards; }
.hex-ring2 { border-color: #e0b3f5; animation-delay: .14s; }
.hex-spark { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #e9cffb; box-shadow: 0 0 10px #c98fe0;
  transform: rotate(var(--a)); animation: mxSpark .95s ease-out forwards; }
.hex-lab { color: #e9cffb; text-shadow: 0 0 16px #9b59b6, 0 2px 0 #4a2360; animation: dfxLab 1.6s ease-out forwards; }
.hex-pig { width: 240px; height: 240px; margin: -120px 0 0 -120px; object-fit: contain;
  border-radius: 18px; box-shadow: 0 0 46px rgba(155,89,182,.7); filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
  animation: hexPig 1.8s cubic-bezier(.2,.9,.3,1.05) forwards; }
@keyframes hexPig {
  0% { transform: translateY(40px) scale(.2) rotate(-12deg); opacity: 0; }
  30% { transform: translateY(0) scale(1.12) rotate(4deg); opacity: 1; }
  55% { transform: translateY(0) scale(1) rotate(0); }
  82% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-22px) scale(.96); opacity: 0; }
}

/* АЕГИС — золотое сияние и подъём щита */
.aeg-glow { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,221,120,.55) 0%, rgba(201,162,39,.3) 45%, rgba(120,90,20,0) 72%);
  filter: blur(4px); animation: aegGlow 2s ease-out forwards; }
@keyframes aegGlow { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.aeg-beam { width: 70px; height: 320px; margin: -200px 0 0 -35px; border-radius: 50%;
  background: linear-gradient(to top, rgba(255,221,120,0), rgba(255,236,170,.6) 60%, rgba(255,221,120,0));
  filter: blur(3px); animation: aegBeam 2s ease-out forwards; }
@keyframes aegBeam { 0% { transform: scaleY(.2); opacity: 0; } 30% { opacity: .9; } 100% { transform: scaleY(1.1); opacity: 0; } }
.aeg-ray { width: 4px; height: 70px; margin: -35px 0 0 -2px; transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255,236,170,.9), rgba(255,221,120,0));
  transform: rotate(var(--a)); animation: aegRay 1.8s ease-out forwards; }
@keyframes aegRay { 0% { transform: rotate(var(--a)) scaleY(.2); opacity: 0; } 35% { opacity: .85; } 100% { transform: rotate(var(--a)) scaleY(1.4); opacity: 0; } }
.aeg-img { width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 40px rgba(255,210,100,.7); filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation: aegImg 2s cubic-bezier(.2,.9,.3,1.1) forwards; }
@keyframes aegImg {
  0% { transform: translateY(70px) scale(.3); opacity: 0; }
  30% { transform: translateY(0) scale(1.15); opacity: 1; }
  55% { transform: translateY(0) scale(1); }
  80% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-26px) scale(.96); opacity: 0; }
}
.aeg-lab { margin-top: 0; transform: translate(-50%, 74px); color: #ffe9a8; text-shadow: 0 0 16px #c9a227, 0 2px 0 #5a3f10; animation: dfxLab 2s ease-out forwards; }

@keyframes dfxLab {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  45% { transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -94px) scale(1); }
}
/* у aegis-метки своя позиция — не перетираем translate базовой dfxLab */
.aeg-lab { animation: aegLab 2s ease-out forwards; }
@keyframes aegLab {
  0% { opacity: 0; transform: translate(-50%, 90px) scale(.6); }
  30% { opacity: 1; transform: translate(-50%, 74px) scale(1.1); }
  55% { transform: translate(-50%, 74px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 50px) scale(1); }
}

/* SHADOW AMULET — теневая дымка торговца */
.amu-glow { width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,90,200,.5) 0%, rgba(80,40,130,.32) 46%, rgba(40,20,70,0) 72%);
  filter: blur(5px); animation: amuGlow 2s ease-out forwards; }
@keyframes amuGlow { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.85); opacity: 0; } }
.amu-wisp { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(178,120,224,.8), rgba(96,50,150,.45) 55%, rgba(60,30,100,0) 75%);
  filter: blur(4px); transform: rotate(var(--a)) translateY(0) scale(.4);
  animation: amuWisp 2s cubic-bezier(.2,.7,.3,1) var(--dl) forwards; }
@keyframes amuWisp {
  0% { transform: rotate(var(--a)) translateY(0) scale(.3); opacity: 0; }
  30% { opacity: .85; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.85); opacity: 0; }
}
.amu-img { width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 0 40px rgba(150,90,200,.7); filter: drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation: amuImg 2s cubic-bezier(.2,.9,.3,1.1) forwards; }
@keyframes amuImg {
  0% { transform: translateY(50px) scale(.25) rotate(-10deg); opacity: 0; }
  30% { transform: translateY(0) scale(1.12) rotate(0); opacity: 1; }
  55% { transform: translateY(0) scale(1); }
  80% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-22px) scale(.96); opacity: 0; }
}
.amu-lab { color: #dcbcf5; text-shadow: 0 0 16px #8e5fd0, 0 2px 0 #3a2360; animation: aegLab 2s ease-out forwards; }

/* кнопки парковки / торговца */
.dbl-amulet { color: #c89fe8; }
.btn-amulet { font-family: var(--font-h); font-weight: 500; font-size: 13px; padding: 8px 16px; border-radius: 8px;
  color: #fff; background: rgba(142,95,208,.22); border: 1px solid #8e5fd0; transition: background .2s ease; }
.btn-amulet:hover { background: rgba(142,95,208,.42); }

/* ============================================================
   ПОКУПКА ГЕРОЯ — золотая вспышка с портретом
   ============================================================ */
.buy-glow { width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,229,150,.6) 0%, rgba(232,194,74,.3) 45%, rgba(120,90,20,0) 72%);
  filter: blur(5px); animation: aegGlow 1.7s ease-out forwards; }
.buy-ring { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  border: 3px solid #f1d36b; box-shadow: 0 0 22px #e8c24a, inset 0 0 14px #e8c24a;
  animation: mxRing 1.3s ease-out forwards; }
.buy-ring2 { border-color: #fff0c0; animation-delay: .16s; }
.buy-coin { width: 40px; height: auto; margin: -20px 0 0 -20px; left: 50%; top: 50%;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
  transform: rotate(var(--a)) translateY(0) scale(.3);
  animation: buyCoin 1.5s cubic-bezier(.2,.7,.3,1) var(--dl) forwards; }
@keyframes buyCoin {
  0% { transform: rotate(var(--a)) translateY(0) scale(.2); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.9); opacity: 0; }
}
.buy-port { width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 16px; object-fit: cover;
  border: 3px solid var(--pc); box-shadow: 0 0 40px rgba(232,194,74,.6), 0 8px 18px rgba(0,0,0,.6);
  animation: buyPort 1.7s cubic-bezier(.2,.9,.3,1.08) forwards; }
@keyframes buyPort {
  0% { transform: translateY(46px) scale(.3) rotate(-8deg); opacity: 0; }
  30% { transform: translateY(0) scale(1.12) rotate(0); opacity: 1; }
  55% { transform: translateY(0) scale(1); }
  80% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-22px) scale(.96); opacity: 0; }
}
.buy-lab { color: #ffe9a8; text-shadow: 0 0 16px #c9a227, 0 2px 0 #5a3f10;
  font-size: 24px; animation: aegLab 1.7s ease-out forwards; }

/* ============================================================
   ВЫПАЛА РАПИРА — пылающий клинок падает
   ============================================================ */
.rap-flash { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd27a 24%, #ff6a3c 50%, rgba(224,86,79,0) 76%);
  filter: blur(2px); animation: mxFlash 1.6s cubic-bezier(.15,.7,.3,1) forwards; }
.rap-glow { width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,60,.5) 0%, rgba(200,50,40,.28) 46%, rgba(80,20,20,0) 72%);
  filter: blur(6px); animation: aegGlow 2.1s ease-out forwards; }
.rap-ember { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; left: 50%; top: 50%; border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 10px #ff7a3c, 0 0 4px #fff;
  transform: rotate(var(--a)) translateY(0);
  animation: rapEmber 1.5s ease-out var(--dl) forwards; }
@keyframes rapEmber {
  0% { transform: rotate(var(--a)) translateY(0) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0); opacity: 0; }
}
.rap-blade { width: 230px; height: 230px; margin: -115px 0 0 -115px; object-fit: cover;
  border-radius: 16px; box-shadow: 0 0 46px rgba(255,90,50,.55), 0 8px 20px rgba(0,0,0,.7);
  animation: rapBlade 2.1s cubic-bezier(.25,.9,.35,1.05) forwards; }
@keyframes rapBlade {
  0% { transform: translateY(-90px) scale(.4) rotate(-150deg); opacity: 0; }
  28% { transform: translateY(0) scale(1.1) rotate(0deg); opacity: 1; }
  52% { transform: translateY(0) scale(1) rotate(0deg); }
  60% { transform: translate(-3px, 0) scale(1) rotate(-2deg); }
  66% { transform: translate(3px, 0) scale(1) rotate(2deg); }
  72% { transform: translate(0, 0) scale(1) rotate(0deg); }
  82% { opacity: 1; }
  100% { transform: translateY(16px) scale(.96); opacity: 0; }
}
.rap-lab { color: #ffcaa0; text-shadow: 0 0 16px #e0564f, 0 2px 0 #5a1810;
  font-size: 24px; transform: translate(-50%, 96px); animation: rapLab 2.1s ease-out forwards; }
@keyframes rapLab {
  0% { opacity: 0; transform: translate(-50%, 112px) scale(.6); }
  32% { opacity: 1; transform: translate(-50%, 96px) scale(1.1); }
  55% { transform: translate(-50%, 96px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 74px) scale(1); }
}

/* ============================================================
   ПОТЕРЯ ГОЛДЫ — монеты рассыпаются вниз, красный минус
   ============================================================ */
.dfx-goldloss { overflow: hidden; }
.gl-flash { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224,86,79,.45) 0%, rgba(160,40,36,.25) 45%, rgba(80,18,16,0) 72%);
  filter: blur(5px); animation: glFlash 1.4s ease-out forwards; }
@keyframes glFlash { 0% { transform: scale(.4); opacity: 0; } 22% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.gl-coin { left: calc(50% + var(--a)); top: 50%; width: 38px; height: auto; margin: -19px 0 0 -19px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)) saturate(.7) brightness(.92);
  transform: scale(var(--sc));
  animation: glCoin 1.5s cubic-bezier(.35,.15,.7,1) var(--dl) forwards; }
@keyframes glCoin {
  0% { transform: translateY(0) rotate(0) scale(var(--sc)); opacity: 0; }
  16% { opacity: 1; }
  100% { transform: translateY(300px) rotate(var(--rot)) scale(calc(var(--sc) * .8)); opacity: 0; }
}
.gl-lab { color: #ff9a8f; text-shadow: 0 0 16px #e0564f, 0 2px 0 #5a1810;
  font-size: 30px; animation: glLab 1.5s ease-out forwards; }
@keyframes glLab {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  42% { transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(1); }
}

/* ============================================================
   АУКЦИОН — окно торгов
   ============================================================ */
.auc-wrap { z-index: 70; }
.auc-card { width: 460px; max-width: 94vw; background: linear-gradient(180deg, rgba(26,20,13,.98), rgba(15,11,7,.98));
  border: 1px solid var(--ui-border); border-top: 2px solid var(--gold); border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px;
  animation: cardPop .3s cubic-bezier(.2,.8,.3,1.1); }

.auc-head { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; }
.auc-kicker { font-family: var(--font-h); font-weight: 700; letter-spacing: .34em; font-size: 22px; color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(232,200,74,.4); margin-right: -.34em; }
.auc-sub { font-size: 12px; color: var(--txt-dim); letter-spacing: .02em; }

/* лот */
.auc-lot { --ac: var(--gold); display: flex; gap: 14px; align-items: center; padding: 12px;
  background: rgba(0,0,0,.32); border: 1px solid var(--ui-border-soft); border-left: 3px solid var(--ac); border-radius: 8px; }
.auc-lot-art { width: 76px; height: 76px; flex-shrink: 0; border-radius: 7px; overflow: hidden; border: 1px solid var(--ac);
  box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.auc-lot-art img { width: 100%; height: 100%; object-fit: cover; }
.auc-lot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.auc-lot-name { font-family: var(--font-h); font-weight: 600; font-size: 19px; color: #f0e8d4; line-height: 1.05; }
.auc-lot-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.auc-lot-lab { color: var(--txt-dim); letter-spacing: .04em; }
.auc-lot-val { font-family: var(--font-h); font-weight: 600; font-size: 15px; color: var(--txt); font-variant-numeric: tabular-nums; }
.auc-lot-val.gold { color: var(--gold-bright); }
.auc-lot-pen { font-size: 11px; color: #e0a04f; letter-spacing: .02em; margin-top: 1px; }

/* текущая ставка */
.auc-bid { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 9px;
  border-top: 1px solid var(--ui-border-soft); border-bottom: 1px solid var(--ui-border-soft); }
.auc-bid-lab { font-family: var(--font-h); font-size: 16px; color: var(--txt); letter-spacing: .04em; }
.auc-bid-min { font-size: 11px; color: var(--txt-dim); }
.auc-bid-cur { font-family: var(--font-h); font-weight: 700; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px currentColor; }
.auc-bid-by { font-size: 11px; color: var(--txt-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

/* участники */
.auc-players { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auc-pl { --pc: var(--gold); display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px;
  background: rgba(255,255,255,.02); border: 1px solid var(--ui-border-soft); transition: border-color .2s, background .2s, opacity .2s; }
.auc-pl.is-turn { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent); }
.auc-pl.is-out { opacity: .42; }
.auc-pl.is-lead.is-out, .auc-pl.is-lead { opacity: 1; }
.auc-pl-ava { width: 26px; height: 30px; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.auc-pl-id { flex: 1; min-width: 0; }
.auc-pl-name { font-family: var(--font-h); font-size: 13px; color: #efe8d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-pl-name em { color: var(--pc); font-style: normal; font-size: 10px; }
.auc-pl-gold { font-size: 11px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.auc-pl-gold span { color: var(--txt-dim); }
.auc-pl-tag { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  color: var(--txt-dim); border: 1px solid var(--ui-border-soft); }
.auc-pl-tag.t-лидер, .auc-pl-tag.t-победитель { color: #0a0a0a; background: var(--gold-bright); border-color: var(--gold-bright); font-weight: 600; }
.auc-pl-tag.t-ходит { color: #cdeefb; border-color: rgba(127,212,232,.5); background: rgba(127,212,232,.12); }
.auc-pl-tag.t-пас, .auc-pl-tag.t-отказался { color: #b06a64; border-color: rgba(176,106,100,.4); }

/* ход / контролы */
.auc-turn { --tc: var(--gold); display: flex; flex-direction: column; gap: 8px; }
.auc-turn-top { display: flex; justify-content: space-between; align-items: baseline; }
.auc-turn-who { font-size: 13px; color: var(--txt); }
.auc-turn-who b { color: var(--tc); font-weight: 600; }
.auc-turn-sec { font-family: var(--font-h); font-weight: 700; font-size: 17px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.auc-timer { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.auc-timer-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width .25s linear; }
.auc-controls { display: flex; gap: 8px; align-items: stretch; }
.auc-step { display: flex; align-items: center; gap: 0; border: 1px solid var(--ui-border); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.4); }
.auc-pm { width: 34px; font-family: var(--font-h); font-size: 20px; color: var(--gold-bright); background: rgba(255,255,255,.04); transition: background .15s; }
.auc-pm:hover:not(:disabled) { background: rgba(201,162,39,.2); }
.auc-pm:disabled { opacity: .3; cursor: default; }
.auc-amt { min-width: 58px; text-align: center; font-family: var(--font-h); font-weight: 600; font-size: 18px; color: #f0e8d4; font-variant-numeric: tabular-nums; }
.auc-bid-btn { flex: 1; font-family: var(--font-h); font-weight: 500; font-size: 14px; padding: 9px 14px; border-radius: 8px;
  color: var(--gold-bright); background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.6); transition: background .2s, border-color .2s; }
.auc-bid-btn:hover:not(:disabled) { background: rgba(201,162,39,.26); border-color: var(--gold-bright); }
.auc-bid-btn:disabled { opacity: .42; cursor: default; }
.auc-pass-btn { font-family: var(--font-h); font-weight: 500; font-size: 14px; padding: 9px 16px; border-radius: 8px;
  color: var(--txt); background: transparent; border: 1px solid var(--ui-border); transition: border-color .2s, color .2s, background .2s; }
.auc-pass-btn:hover { border-color: #b06a64; color: #e0a59f; background: rgba(176,106,100,.08); }
.auc-hint { font-size: 11px; color: var(--txt-dim); text-align: center; letter-spacing: .02em; }

/* результат */
.auc-result { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0 6px;
  animation: aucRes .4s cubic-bezier(.2,.8,.3,1.1); }
@keyframes aucRes { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.auc-res-lab { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-dim); }
.auc-res-name { font-family: var(--font-h); font-weight: 700; font-size: 26px; line-height: 1.05; text-shadow: 0 0 22px currentColor; }
.auc-res-name.dim { color: var(--txt-dim); font-size: 17px; text-shadow: none; }
.auc-res-amt { font-family: var(--font-h); font-size: 15px; color: var(--gold-bright); }

/* ---- статус-флаги владельца (залог / обещание) ---- */
.os-flags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.os-flag { font-size: 9px; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.os-flag.mort { color: #e0a04f; border: 1px solid rgba(224,160,79,.45); background: rgba(224,160,79,.1); }
.os-flag.nb { color: #7fd4e8; border: 1px solid rgba(127,212,232,.4); background: rgba(127,212,232,.1); }

/* кнопка «Сделка» в топбаре */
.gt-trade { font-family: var(--font-h); font-weight: 500; font-size: 13px; letter-spacing: .04em; padding: 7px 14px;
  color: var(--gold-bright); background: rgba(201,162,39,.12); border: 1px solid rgba(201,162,39,.5); border-radius: 5px;
  transition: background .2s ease, border-color .2s ease; }
.gt-trade:hover:not(:disabled) { background: rgba(201,162,39,.24); border-color: var(--gold-bright); }
.gt-trade:disabled { opacity: .4; cursor: default; }

/* ============================================================
   ТРЕЙДИНГ — окно сделки
   ============================================================ */
.tr-wrap { z-index: 72; }
.tr-card { width: 920px; max-width: 96vw; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(26,20,13,.98), rgba(15,11,7,.98));
  border: 1px solid var(--ui-border); border-top: 2px solid var(--gold); border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 13px;
  animation: cardPop .3s cubic-bezier(.2,.8,.3,1.1); }

.tr-head { position: relative; display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; }
.tr-kicker { font-family: var(--font-h); font-weight: 700; letter-spacing: .34em; font-size: 22px; color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(232,200,74,.4); margin-right: -.34em; }
.tr-sub { font-size: 12.5px; color: var(--txt-dim); }
.tr-sub b { font-weight: 600; }
.tr-x { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; font-size: 22px; line-height: 1; color: var(--txt-dim);
  border: 1px solid var(--ui-border-soft); border-radius: 6px; transition: color .2s, border-color .2s; }
.tr-x:hover { color: #fff; border-color: var(--ui-border); }

.tr-pickers { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 4px 0 2px; }
.tr-pickers label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-dim); font-weight: 600; }
.tr-swap { font-size: 18px; color: var(--gold); padding-bottom: 6px; }
.tr-sel { background: rgba(0,0,0,.45); border: 1px solid var(--ui-border); color: var(--txt); font-size: 13px; padding: 7px 10px; border-radius: 6px; min-width: 150px; }
.tr-sel:focus { outline: none; border-color: var(--gold); }

/* стороны */
.tr-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.tr-vs { display: flex; align-items: center; justify-content: center; }
.tr-vs span { font-family: var(--font-h); font-weight: 700; font-size: 26px; color: var(--gold); opacity: .8; }
.tr-side { --pc: var(--gold); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 9px;
  background: rgba(0,0,0,.28); border: 1px solid var(--ui-border-soft); border-top: 2px solid var(--pc); }
.tr-side-head { display: flex; align-items: center; gap: 9px; }
.tr-side-ava { width: 30px; height: 34px; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.tr-side-name { font-family: var(--font-h); font-weight: 600; font-size: 15px; color: #f0e8d4; }
.tr-side-name em { color: var(--pc); font-style: normal; font-size: 11px; }
.tr-side-gold { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.tr-side-gold .coin-ic { width: 16px; height: 16px; }
.tr-side-gold span { color: var(--txt-dim); }

.tr-block { display: flex; flex-direction: column; gap: 6px; }
.tr-block-lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-dim); font-weight: 600; }
.tr-empty { font-size: 12px; color: var(--txt-dim); font-style: italic; padding: 2px 0; }
.tr-empty.sm { font-size: 11px; }

.tr-gold-row { display: flex; flex-direction: column; gap: 6px; }
.tr-gold-in { width: 100%; background: rgba(0,0,0,.45); border: 1px solid var(--ui-border); color: var(--gold-bright);
  font-family: var(--font-h); font-weight: 600; font-size: 18px; padding: 7px 11px; border-radius: 6px; -moz-appearance: textfield; }
.tr-gold-in::-webkit-outer-spin-button, .tr-gold-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr-gold-in:focus { outline: none; border-color: var(--gold); }
.tr-gold-in:disabled { opacity: .7; }
.tr-gold-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.tr-chip { font-size: 11px; padding: 4px 9px; border-radius: 5px; color: var(--txt); background: rgba(255,255,255,.04); border: 1px solid var(--ui-border-soft); transition: background .15s, border-color .15s; }
.tr-chip:hover:not(:disabled) { background: rgba(201,162,39,.18); border-color: var(--gold-deep); color: var(--gold-bright); }
.tr-chip:disabled { opacity: .35; cursor: default; }

/* районы */
.tr-props { display: flex; flex-direction: column; gap: 5px; max-height: 188px; overflow-y: auto; padding-right: 2px; }
.tr-prop { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid var(--ui-border-soft); transition: border-color .15s, background .15s; }
.tr-prop:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gc) 55%, var(--ui-border)); background: rgba(255,255,255,.04); }
.tr-prop.on { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); box-shadow: inset 3px 0 0 var(--gc); }
.tr-prop:disabled { cursor: default; }
.tr-prop-art { position: relative; width: 38px; height: 38px; border-radius: 5px; overflow: hidden; border: 1px solid var(--gc); flex-shrink: 0; }
.tr-prop-art img { width: 100%; height: 100%; object-fit: cover; }
.tr-prop-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff;
  background: color-mix(in srgb, var(--gc) 62%, rgba(0,0,0,.4)); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tr-prop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tr-prop-name { font-family: var(--font-h); font-size: 13.5px; color: #efe8d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-prop-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-prop-nom { font-size: 11px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.tr-prop-nom::before { content: '◆ '; color: var(--txt-dim); font-size: 8px; }
.tr-prop-lvl { font-size: 9px; letter-spacing: .04em; color: #cfc6b0; border: 1px solid var(--ui-border-soft); border-radius: 3px; padding: 1px 4px; }
.tr-prop-mort { font-size: 9px; letter-spacing: .06em; color: #e0a04f; border: 1px solid rgba(224,160,79,.45); background: rgba(224,160,79,.1); border-radius: 3px; padding: 1px 4px; font-weight: 600; }
.tr-prop-nb { font-size: 9px; letter-spacing: .04em; color: #7fd4e8; border: 1px solid rgba(127,212,232,.4); border-radius: 3px; padding: 1px 4px; }

/* аегис + обещания */
.tr-extras { gap: 8px; }
.tr-aegis { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 7px; text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid var(--ui-border-soft); transition: border-color .15s, background .15s; position: relative; }
.tr-aegis img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; border: 1px solid var(--gold-deep); }
.tr-aegis span { font-size: 12.5px; color: #efe8d6; }
.tr-aegis:hover { border-color: var(--gold-deep); }
.tr-aegis.on { border-color: var(--gold); background: rgba(201,162,39,.14); }
.tr-aegis .tr-prop-check { position: static; inset: auto; margin-left: auto; width: 20px; height: 20px; border-radius: 4px; background: var(--gold); color: #0a0a0a; font-size: 13px; }

.tr-promises { display: flex; flex-direction: column; gap: 6px; }
.tr-promo-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-dim); font-weight: 600; }
.tr-add { font-size: 11px; color: var(--gold-bright); padding: 3px 8px; border: 1px solid var(--gold-deep); border-radius: 5px; background: rgba(201,162,39,.1); transition: background .15s; }
.tr-add:hover:not(:disabled) { background: rgba(201,162,39,.22); }
.tr-add:disabled { opacity: .35; cursor: default; }
.tr-promo-row { display: flex; align-items: center; gap: 6px; }
.tr-promo-row .tr-sel { min-width: 0; flex: 1; font-size: 12px; padding: 5px 7px; }
.tr-turns { display: flex; align-items: center; gap: 0; border: 1px solid var(--ui-border); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.4); flex-shrink: 0; }
.tr-turns span { min-width: 48px; text-align: center; font-size: 11.5px; color: #efe8d6; padding: 4px 2px; }
.tr-tbtn { width: 24px; font-size: 15px; color: var(--gold-bright); background: rgba(255,255,255,.04); }
.tr-tbtn:hover:not(:disabled) { background: rgba(201,162,39,.2); }
.tr-tbtn:disabled { opacity: .3; cursor: default; }
.tr-del { width: 24px; height: 24px; font-size: 16px; color: #b06a64; border: 1px solid rgba(176,106,100,.4); border-radius: 5px; flex-shrink: 0; }
.tr-del:hover { background: rgba(176,106,100,.14); color: #e0a59f; }

/* сводка платежей */
.tr-outcome { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 8px;
  background: rgba(224,160,79,.06); border: 1px solid rgba(224,160,79,.28); }
.tr-outcome-head { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #e0a04f; font-weight: 600; margin-bottom: 1px; }
.tr-outcome-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tr-oc-who { font-family: var(--font-h); font-weight: 600; flex-shrink: 0; }
.tr-oc-lab { color: var(--txt); flex: 1; }
.tr-oc-amt { font-family: var(--font-h); font-weight: 600; color: #e0564f; font-variant-numeric: tabular-nums; }

.tr-err { font-size: 12px; color: #e0564f; text-align: center; font-weight: 600; }

/* подвал */
.tr-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.tr-foot.review { justify-content: center; }
.tr-cancel, .tr-reject { font-family: var(--font-h); font-weight: 500; font-size: 13.5px; padding: 9px 18px; border-radius: 8px; color: var(--txt); background: transparent; border: 1px solid var(--ui-border); transition: border-color .2s, color .2s, background .2s; }
.tr-cancel:hover { border-color: rgba(255,255,255,.28); color: #fff; }
.tr-reject:hover { border-color: #b06a64; color: #e0a59f; background: rgba(176,106,100,.08); }
.tr-send, .tr-accept { font-family: var(--font-h); font-weight: 500; font-size: 14px; padding: 9px 22px; border-radius: 8px;
  color: var(--gold-bright); background: rgba(201,162,39,.16); border: 1px solid rgba(201,162,39,.6); transition: background .2s, border-color .2s; }
.tr-send:hover:not(:disabled), .tr-accept:hover:not(:disabled) { background: rgba(201,162,39,.3); border-color: var(--gold-bright); }
.tr-send:disabled, .tr-accept:disabled { opacity: .45; cursor: default; }
.tr-counter { font-family: var(--font-h); font-weight: 500; font-size: 13.5px; padding: 9px 18px; border-radius: 8px;
  color: #cdeefb; background: rgba(127,212,232,.1); border: 1px solid rgba(127,212,232,.4); transition: background .2s; }
.tr-counter:hover { background: rgba(127,212,232,.2); }

/* фаза просмотра */
.tr-review { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 4px 0; }
.tr-review-arrow { font-family: var(--font-h); font-weight: 700; font-size: 26px; color: var(--gold); }
.tr-gives { padding: 12px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid var(--ui-border-soft); }
.tr-gives-head { font-family: var(--font-h); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.tr-gives-list { display: flex; flex-direction: column; gap: 6px; }
.tr-give { --gc: var(--gold); display: flex; align-items: center; gap: 8px; font-size: 13px; color: #efe8d6;
  padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--ui-border-soft); border-left: 3px solid var(--gc); }
.tr-give img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.tr-give .coin-ic { width: 18px; height: 18px; border-radius: 0; }
.tr-give.gold { color: var(--gold-bright); font-family: var(--font-h); font-weight: 600; font-size: 15px; border-left-color: var(--gold); }
.tr-give.aeg { border-left-color: var(--gold); }
.tr-give.nb { color: #7fd4e8; border-left-color: #7fd4e8; font-size: 12px; }
.tr-give-mort { font-size: 9px; letter-spacing: .06em; color: #e0a04f; border: 1px solid rgba(224,160,79,.45); border-radius: 3px; padding: 1px 4px; margin-left: auto; font-style: normal; }
.tr-review-note { font-size: 12px; color: var(--txt-dim); text-align: center; }
.tr-review-note b { font-weight: 600; }

/* ============================================================
   АНИМАЦИЯ ПОРАЖЕНИЯ / БАНКРОТСТВА  (длится 5.5с)
   ============================================================ */
/* Иконка игрока-банкрота сереет (панель + аватар + герои) */
.pp-bankrupt { border-color: #3b3a37 !important; box-shadow: none; opacity: .9; }
.pp-bankrupt::before { display: none; }
.pp-bankrupt .pp-ava,
.pp-bankrupt .pp-heroes,
.pp-bankrupt .pp-items,
.pp-bankrupt .pp-gold,
.pp-bankrupt .coin-ic { filter: grayscale(1) brightness(.62); }
.pp-bankrupt .pp-name,
.pp-bankrupt .pp-name em,
.pp-bankrupt .pp-tok,
.pp-bankrupt .pp-gold-v { color: #8a857c !important; }
.pp-defeat-tag { position: absolute; top: -9px; right: 10px; z-index: 3;
  font-family: var(--font-h); font-weight: 700; font-size: 10px; letter-spacing: .14em;
  color: #fff; background: #b0322c; border: 1px solid #e0564f; border-radius: 4px;
  padding: 3px 8px; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
/* фишка банкрота на поле сереет */
.tok-slot.bankrupt { filter: grayscale(1) brightness(.55); opacity: .78; }

/* полноэкранный оверлей поражения */
.defeat-overlay { position: fixed; inset: 0; z-index: 90; pointer-events: all;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  animation: defOverlay 5.5s ease forwards; }
@keyframes defOverlay { 0% { opacity: 0; } 5% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }

/* серая мгла поверх живого экрана (обесцвечивает всё под собой) */
.def-desat { position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 45%, rgba(8,8,9,.55) 0%, rgba(6,6,7,.9) 75%, #050506 100%);
  -webkit-backdrop-filter: grayscale(1) brightness(.45) contrast(1.05);
  backdrop-filter: grayscale(1) brightness(.45) contrast(1.05);
  animation: defDesat 1.1s ease forwards; }
@keyframes defDesat {
  0% { -webkit-backdrop-filter: grayscale(0) brightness(1); backdrop-filter: grayscale(0) brightness(1); }
  100% { -webkit-backdrop-filter: grayscale(1) brightness(.45) contrast(1.05); backdrop-filter: grayscale(1) brightness(.45) contrast(1.05); }
}

.def-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 80% at 50% 50%, transparent 38%, rgba(120,20,16,.28) 72%, rgba(0,0,0,.78) 100%);
  mix-blend-mode: multiply; }

/* медленные тёмно-красные лучи за текстом */
.def-rays { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; pointer-events: none;
  margin: -750px 0 0 -750px; opacity: .5;
  background: conic-gradient(from 0deg, transparent 0 10deg, rgba(224,86,79,.10) 10deg 14deg, transparent 14deg 30deg,
    rgba(224,86,79,.08) 30deg 33deg, transparent 33deg 60deg, rgba(224,86,79,.10) 60deg 64deg, transparent 64deg 90deg,
    rgba(224,86,79,.07) 90deg 93deg, transparent 93deg 180deg, rgba(224,86,79,.10) 180deg 184deg, transparent 184deg 270deg,
    rgba(224,86,79,.08) 270deg 273deg, transparent 273deg 360deg);
  animation: defRays 22s linear infinite, defRaysIn 1.4s ease forwards; }
@keyframes defRays { to { transform: rotate(360deg); } }
@keyframes defRaysIn { from { opacity: 0; } to { opacity: .5; } }

/* красная вспышка-разрез в начале */
.def-slash { position: absolute; left: -20%; right: -20%; top: 50%; height: 4px;
  background: linear-gradient(90deg, transparent, #ff6b5e 30%, #fff 50%, #ff6b5e 70%, transparent);
  box-shadow: 0 0 30px 8px rgba(224,86,79,.7); transform: translateY(-50%) scaleX(0); transform-origin: 50% 50%;
  animation: defSlash 1s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes defSlash {
  0% { transform: translateY(-50%) scaleX(0); opacity: 0; }
  18% { opacity: 1; }
  40% { transform: translateY(-50%) scaleX(1); opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0; height: 220px; }
}

.def-core { position: relative; z-index: 2; text-align: center; padding: 0 6vw;
  animation: defShake .5s cubic-bezier(.36,.07,.19,.97) .35s both; }
@keyframes defShake {
  0% { transform: translateX(0) scale(1.04); }
  15% { transform: translateX(-14px); } 30% { transform: translateX(12px); }
  45% { transform: translateX(-9px); } 60% { transform: translateX(7px); }
  75% { transform: translateX(-4px); } 100% { transform: translateX(0) scale(1); }
}
.def-kicker { font-family: var(--font-h); font-weight: 600; font-size: 16px; letter-spacing: .5em;
  color: #c7b48f; text-indent: .5em; opacity: 0; animation: defFade .6s ease .1s forwards; }
.def-title { font-family: var(--font-h); font-weight: 700; font-size: clamp(64px, 12vw, 168px);
  line-height: .94; letter-spacing: .03em; margin: 6px 0 0;
  color: #f1e7d4; text-shadow: 0 0 44px rgba(224,86,79,.55), 0 6px 0 rgba(0,0,0,.5);
  background: linear-gradient(180deg, #fff 0%, #f0d9b0 38%, #d4453d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: defTitle .85s cubic-bezier(.18,.8,.2,1) .25s both; }
@keyframes defTitle {
  0% { opacity: 0; transform: scale(2.3); filter: blur(14px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.def-rule { width: 0; height: 2px; margin: 18px auto 16px;
  background: linear-gradient(90deg, transparent, var(--dc, #e0564f), transparent);
  animation: defRule .7s ease .85s forwards; }
@keyframes defRule { to { width: min(420px, 56vw); } }
.def-sub { font-family: var(--font-h); font-weight: 500; font-size: clamp(18px, 2.4vw, 30px);
  color: #e7ddc9; opacity: 0; animation: defFade .7s ease 1s forwards; }
.def-sub b { font-weight: 700; }
.def-tag { margin-top: 14px; font-family: var(--font-h); font-weight: 600; font-size: 13px;
  letter-spacing: .34em; color: #9b3a34; opacity: 0; animation: defFade .8s ease 1.35s forwards; }
@keyframes defFade { to { opacity: 1; } }

/* падающие угли / пепел */
.def-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.def-ember { position: absolute; top: -16px; left: var(--x); width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffb347 0%, #e0564f 55%, rgba(224,86,79,0) 80%);
  transform: scale(var(--sc)); opacity: 0;
  animation: defEmber var(--dur, 4s) linear var(--dl, 0s) infinite; }
@keyframes defEmber {
  0% { transform: translate(0, 0) scale(var(--sc)); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .8; }
  100% { transform: translate(var(--dx, 0), 102vh) scale(var(--sc)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .def-core { animation: none; } .def-title { animation: defFade .4s ease forwards; }
  .def-ember, .def-rays, .def-slash { animation: none; opacity: 0; }
}