/* ============================================================
   ТРИ В РЯД — PvP
   ------------------------------------------------------------
   Палитра берётся из тех же переменных, что и у мафии (--mf-*), чтобы
   игра сразу работала во всех темах сайта и не пришлось заводить ещё
   один набор цветов. Значения по умолчанию — светлая тема.
============================================================ */
.m3-screen{
  --mf-panel:rgba(255,255,255,0.55);
  --mf-panel-2:rgba(255,255,255,0.82);
  --mf-border:rgba(200,180,240,0.35);
  --mf-text:#3a2a4a;
  --mf-text-dim:#7060a0;
  --mf-text-faint:#9080b0;
  --mf-accent:#9060c8;
  --mf-accent-soft:rgba(144,96,200,0.1);
  --mf-good:#3a9a4a;
  --mf-bad:#c0506a;

  display:none;position:fixed;inset:0;overflow-y:auto;
  flex-direction:column;align-items:center;user-select:none;
}
.m3-screen.active{display:flex}

/* ---------- ЗАГЛУШКА ДОСТУПА ---------- */
  max-width:380px;width:100%;text-align:center;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);
  border-radius:20px;padding:30px 26px;box-shadow:0 20px 60px rgba(60,30,90,0.25);
}

/* ---------- ЛОББИ ---------- */
.m3-rules{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.m3-rule{font-size:12px;line-height:1.5;color:#6a5a85}
.m3-rule b{color:#4a3a6a}
.m3-players{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.m3-player-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.5);border:1px solid rgba(200,180,240,0.4);
  border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;color:#3a2a4a;
}
.m3-player-row .m3-host-tag{margin-left:auto;font-size:10px;font-weight:800;color:#9060c8;background:rgba(144,96,200,0.12);border-radius:100px;padding:2px 8px}

/* ---------- ТОПБАР ИГРЫ ---------- */
.m3-topbar{
  width:100%;max-width:1240px;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;padding:16px 24px 0;
}
.m3-logo{
  font-size:20px;font-weight:800;margin-left:auto;
  background:linear-gradient(135deg,#c0a0e0,#9060c8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.m3-leave-btn{
  height:34px;padding:0 14px;border-radius:100px;
  border:1.5px solid var(--mf-border);background:var(--mf-panel);
  color:var(--mf-text-dim);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
.m3-leave-btn:hover{background:rgba(200,64,106,0.12);color:var(--mf-bad)}

/* ---------- ПОЛОСЫ ЗДОРОВЬЯ ---------- */
.m3-hud{
  width:100%;max-width:1240px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:20px;padding:14px 24px 0;
}
.m3-side{
  flex:1;display:flex;align-items:center;gap:12px;
  background:var(--mf-panel);border:1px solid var(--mf-border);
  border-radius:16px;padding:10px 16px;backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(100,60,140,0.08);
}
/* Соперник — зеркально: аватарка справа, полоса растёт справа налево.
   Так две шкалы читаются как противостояние, а не как список. */
.m3-side-right{flex-direction:row-reverse}
.m3-ava{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#fff;
}
.m3-side-body{flex:1;min-width:0}
.m3-side-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.m3-side-right .m3-side-top{flex-direction:row-reverse}
.m3-side-name{font-size:14px;font-weight:800;color:var(--mf-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m3-you{font-size:10px;font-weight:700;color:var(--mf-accent)}
.m3-hp-num{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mf-good);white-space:nowrap}
.m3-hp-num.low{color:var(--mf-bad)}
.m3-hp-track{
  margin-top:5px;height:12px;border-radius:100px;overflow:hidden;
  background:rgba(58,42,74,0.1);border:1px solid var(--mf-border);
}
.m3-hp-track-right{transform:scaleX(-1)}
.m3-hp-fill{height:100%;border-radius:100px;background:linear-gradient(135deg,#6abf7a,#3a9a4a);width:100%;transition:width .4s}
.m3-hp-fill.low{background:linear-gradient(135deg,#e0607a,#c8406a)}

/* Ширина совпадает со слотами инвентаря под ним — «Ходы» и четыре слота
   образуют одну сплошную среднюю колонку между полями. */
.m3-moves{
  width:96px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
  background:var(--mf-panel);border:1px solid var(--mf-border);
  border-radius:16px;padding:8px 10px;backdrop-filter:blur(10px);
}
.m3-moves-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mf-text-faint)}
.m3-moves-num{font-size:22px;font-weight:800;color:var(--mf-text);font-variant-numeric:tabular-nums}

/* ---------- ПОЛЯ ---------- */
.m3-boards{
  width:100%;max-width:1240px;box-sizing:border-box;
  display:flex;justify-content:center;gap:20px;padding:16px 24px 32px;
}
.m3-board-panel{
  flex:1;max-width:560px;
  background:var(--mf-panel);border:1px solid var(--mf-border);
  border-radius:22px;backdrop-filter:blur(10px);
  box-shadow:0 4px 24px rgba(144,96,200,0.1);padding:16px;
}
.m3-board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.m3-board-title{font-size:12px;font-weight:800;color:var(--mf-text-dim)}
.m3-dmg{font-size:11px;font-weight:700;color:var(--mf-text-faint)}
.m3-dmg span{color:#c8406a;font-weight:800}
.m3-online{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--mf-good)}
@keyframes m3Pulse{0%,100%{opacity:1}50%{opacity:.55}}
.m3-online-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:m3Pulse 1.4s infinite}
.m3-online.offline{color:var(--mf-text-faint)}

.m3-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:5px;
  padding:8px;border-radius:16px;
  background:var(--mf-accent-soft);
  box-shadow:inset 0 2px 6px rgba(100,60,140,0.08);
  touch-action:none;
}
/* Чужое поле только смотрят — клики по нему ничего не делают, и курсор
   не должен обещать обратное. */
.m3-grid-opp{opacity:.85;pointer-events:none}

.m3-cell{
  /* overflow не задаём: тени значков выходят за границу клетки, и
     обрезка их съедала. */
  aspect-ratio:1;border-radius:9px;
  background:rgba(255,255,255,0.45);
  display:flex;align-items:center;justify-content:center;
  cursor:grab;position:relative;
}
.m3-cell:active{cursor:grabbing}
.m3-cell.selected{box-shadow:0 0 0 3px rgba(144,96,200,0.55)}
.m3-gem{width:76%;height:76%;position:relative}
.m3-gem-shape{width:100%;height:100%;overflow:hidden;position:relative}
/* Длительности совпадают с шагами анимации в match3.js
   (M3_POP_MS и M3_DROP_MS) — если менять, то в обоих местах, иначе
   фигуры начнут падать поверх ещё не исчезнувших. */
@keyframes m3Pop{
  0%{transform:scale(1);filter:brightness(1)}
  55%{transform:scale(1.28);filter:brightness(1.7) drop-shadow(0 0 10px rgba(255,255,255,0.9))}
  100%{transform:scale(0);opacity:0;filter:brightness(1.7)}
}
@keyframes m3Drop{
  0%{transform:translateY(-22px);opacity:0}
  70%{transform:translateY(2px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
.m3-gem.popping{animation:m3Pop .34s ease-in forwards}
.m3-gem.dropping{animation:m3Drop .26s cubic-bezier(.3,1.2,.5,1)}
/* will-change СПЕЦИАЛЬНО не ставится всем фигурам сразу. На поле их 64,
   и постоянный will-change заставляет браузер держать 64 отдельных
   композитных слоя, пересоздавая их при каждой перерисовке поля — это
   роняет производительность вместо того, чтобы её поднять. Слой нужен
   ровно двум фигурам во время обмена, и ставится он в match3.js на
   время анимации. */
.m3-gem.moving{will-change:transform}

/* ---------- ИТОГ ПАРТИИ ---------- */
.m3-finish{position:fixed;inset:0;z-index:150;background:rgba(20,10,30,0.5);display:flex;align-items:center;justify-content:center;padding:24px}
.m3-finish-card{
  max-width:380px;width:100%;text-align:center;
  background:#fff;border-radius:20px;padding:28px 24px;
  box-shadow:0 20px 60px rgba(60,30,90,0.4);
}
.m3-finish-title{font-size:20px;font-weight:800;color:#3a2a4a;margin-bottom:6px}
.m3-finish-sub{font-size:13px;color:#7060a0}

@media (max-width:900px){
  .m3-boards{flex-direction:column;align-items:center}
  .m3-board-panel{width:100%;max-width:560px}
  .m3-hud{flex-wrap:wrap}
  .m3-side{min-width:220px}
}

/* Всплывающая подсказка. Своя, потому что общий showToast объявлен в
   js/menu.js, а эта страница его не подключает (см. m3Toast). */
.m3-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px);
  z-index:300;pointer-events:none;
  background:rgba(40,24,58,0.94);color:#fff;
  font-size:13px;font-weight:700;
  padding:11px 20px;border-radius:100px;
  box-shadow:0 8px 28px rgba(30,10,45,0.4);
  opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.m3-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- ШТРАФ ЗА НЕВЕРНЫЙ ОБМЕН ---------- */
/* Панель поля должна быть точкой отсчёта для накладки. */
.m3-board-panel{position:relative}
@keyframes m3LockPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(200,64,106,0.35), 0 0 26px rgba(200,64,106,0.25)}
  50%    {box-shadow:0 0 0 3px rgba(200,64,106,0.65), 0 0 40px rgba(200,64,106,0.5)}
}
.m3-board-panel.locked{
  animation:m3LockPulse 1s ease-in-out infinite;
  border-color:rgba(200,64,106,0.5);
}
/* Само поле под накладкой глушим: видно, что играть сейчас нельзя. */
.m3-board-panel.locked .m3-grid{filter:saturate(.5) brightness(.92);pointer-events:none}
.m3-lock{
  position:absolute;inset:0;z-index:10;border-radius:22px;
  background:rgba(200,64,106,0.14);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;
}
@keyframes m3LockNum{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.m3-lock-num{
  font-size:64px;font-weight:800;line-height:1;
  color:#fff;text-shadow:0 4px 20px rgba(160,20,60,0.7);
  font-variant-numeric:tabular-nums;
  animation:m3LockNum 1s ease-in-out infinite;
}
.m3-lock-text{
  font-size:12.5px;font-weight:700;color:#fff;text-align:center;
  background:rgba(160,20,60,0.85);border-radius:100px;padding:6px 16px;
  box-shadow:0 4px 16px rgba(160,20,60,0.4);
}
@media(prefers-reduced-motion:reduce){
  .m3-board-panel.locked,.m3-lock-num{animation:none}
}

/* ---------- ОСОБЫЕ ФИГУРЫ ---------- */
/* Свечение отличает особую фигуру от обычной боковым зрением — силуэт
   работает вблизи, свечение на всём поле сразу. */
@keyframes m3SpGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,255,255,0.7))}
  50%    {filter:drop-shadow(0 0 9px rgba(255,255,255,1))}
}
.sp-arrow,.sp-bomb,.sp-rainbow{animation:m3SpGlow 1.6s ease-in-out infinite}
/* Ромб вытянут вдоль своей оси — по нему сразу видно, строку он сломает
   или столбец. Растяжение задаётся здесь, а не в clip-path, чтобы
   остриё не искажалось. */
.sp-arrow-h{transform:scaleX(1.15) scaleY(.9)}
.sp-arrow-v{transform:scaleX(.9) scaleY(1.15)}
/* Радуга ещё и переливается — цвет у неё не смысловой, она бьёт по любой. */
@keyframes m3SpSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sp-rainbow{animation:m3SpGlow 1.6s ease-in-out infinite, m3SpSpin 3.2s linear infinite}
@media(prefers-reduced-motion:reduce){
  .sp-arrow,.sp-bomb,.sp-rainbow{animation:none}
  .sp-arrow-h,.sp-arrow-v{transform:none}
}

/* ---------- ИНВЕНТАРЬ ---------- */
/* Ширина совпадает с блоком «Ходы» над ним, чтобы средняя колонка
   читалась как одна вертикаль, а не как два разных элемента. */
.m3-inventory{
  flex-shrink:0;display:flex;flex-direction:column;gap:10px;
  align-self:flex-start;padding-top:2px;
}
.m3-slot{
  width:96px;height:96px;border-radius:16px;
  background:var(--mf-panel);border:1px solid var(--mf-border);
  backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(100,60,140,0.08);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:border-color .15s,transform .15s;
}
.m3-slot.filled{cursor:pointer;border-color:var(--mf-accent)}
.m3-slot.filled:hover{transform:translateY(-2px)}
/* Слот с нулём приглушён, но картинка видна всегда — по ней узнают, что
   это за предмет, ещё до того как он появится. */
.m3-slot:not(.filled) .m3-slot-ico{opacity:.3;filter:grayscale(1)}
.m3-slot:not(.filled) .m3-slot-count{background:var(--mf-border);color:var(--mf-text-faint)}
.m3-slot:not(.filled){cursor:default}
.m3-slot-ico{font-size:34px;line-height:1}
/* Счётчик стопки — предметы одного вида складываются. */
.m3-slot-count{
  position:absolute;right:6px;bottom:6px;
  font-size:11px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#c0a0e0,#9060c8);
  border-radius:100px;padding:1px 7px;
}
@media (max-width:900px){
  /* На узком экране поля идут друг под другом — инвентарь ложится в строку. */
  .m3-inventory{flex-direction:row;align-self:center}
  .m3-slot{width:72px;height:72px}
  .m3-slot-ico{font-size:26px}
}

/* ---------- ПРЕДМЕТ НА ПОЛЕ ---------- */
/* Предмет занимает клетку целиком, как обычная фигура, и ничем не
   обведён. Раньше вокруг него был жёлтый круг — он делал предмет
   заметно крупнее камней и ломал ритм поля. Отличается предмет самой
   формой значка, обводка для этого не нужна. */
@keyframes m3ItemFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-2px)}
}
.m3-item{
  display:flex!important;align-items:center;justify-content:center;
  background:none!important;box-shadow:none!important;border-radius:0!important;
  /* overflow:hidden нужен ОБЫЧНЫМ камням — по нему обрезается clip-path.
     Значку предмета он срезал тень, поэтому здесь снимаем. */
  overflow:visible!important;
  animation:m3ItemFloat 1.8s ease-in-out infinite;
}
.m3-item svg{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 4px rgba(40,20,10,0.35));
}

/* ---------- ЗАБЛОКИРОВАННАЯ КЛЕТКА ---------- */
/* Тот же знак BAN, что и предмет в инвентаре: в руке и на поле одно и то
   же — иначе связь между предметом и его последствием теряется.
   Знак не «трескается» (он не деревянный) — вместо этого он тускнеет по
   мере того, как блокировка выдыхается, а на последнем ходу дрожит. */
.m3-cell.boxed{background:rgba(60,20,25,0.35)!important;overflow:visible}
.m3-cell.boxed .m3-gem{opacity:0;pointer-events:none}
.m3-ban{
  container-type:inline-size;
  position:absolute;inset:8%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.m3-ban svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 6px rgba(120,10,20,0.5))}
/* Число оставшихся ходов — КРУПНОЕ, во всю иконку. Мелкая цифра на
   белой полосе знака терялась. Белый цвет с тёмно-красной обводкой:
   так число читается и на красном круге, и на белой полосе, которую
   оно пересекает. */
.m3-ban-left{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:min(30px,72cqw);font-weight:800;color:#fff;line-height:1;
  pointer-events:none;
  text-shadow:
     0 0 6px rgba(90,0,8,0.9),
     2px 2px 0 #9a0d14, -2px -2px 0 #9a0d14,
     2px -2px 0 #9a0d14, -2px 2px 0 #9a0d14;
}
/* Чем меньше осталось, тем бледнее знак. */
.m3-cell.boxed[data-crack="3"] .m3-ban{opacity:1}
.m3-cell.boxed[data-crack="2"] .m3-ban{opacity:.8}
@keyframes m3BanShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-1px,1px) rotate(-4deg)}
  75%{transform:translate(1px,-1px) rotate(4deg)}
}
.m3-cell.boxed[data-crack="1"] .m3-ban{opacity:.6;animation:m3BanShake .5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .m3-item,.m3-cell.boxed[data-crack="1"] .m3-ban{animation:none}
}

/* ---------- ДЕЙСТВУЮЩИЕ ЭФФЕКТЫ ---------- */
.m3-effects{display:flex;gap:6px;margin-top:5px;min-height:18px}
.m3-effects-right{justify-content:flex-end}
.m3-eff{
  font-size:11px;font-weight:800;color:var(--mf-text);
  background:var(--mf-accent-soft);border:1px solid var(--mf-border);
  border-radius:100px;padding:1px 8px;
}
@media(prefers-reduced-motion:reduce){ .m3-cell.chest{animation:none} }

/* ---------- ВЕКТОРНЫЕ ЗНАЧКИ ПРЕДМЕТОВ ---------- */
/* Один и тот же силуэт в трёх размерах: на поле, в слоте инвентаря и в
   счётчике действующих эффектов. Эмодзи так не умеют — они меняют вид
   от системы к системе и в мелком размере расплываются. */
.m3-slot-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.m3-slot-ico svg{width:100%;height:100%;display:block}
.m3-eff{display:inline-flex;align-items:center;gap:3px}
.m3-eff svg{width:13px;height:13px;display:block}

/* ---------- СТРОКА ОТКРЫТОЙ КОМНАТЫ ---------- */
.m3-room-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.5);border:1px solid rgba(200,180,240,0.4);
  border-radius:12px;padding:9px 12px;margin-bottom:8px;
}
.m3-room-host{flex:1;min-width:0;font-size:13px;font-weight:700;color:#3a2a4a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m3-room-code{font-size:11px;font-weight:800;letter-spacing:1px;color:#9060c8;background:rgba(144,96,200,0.12);border-radius:100px;padding:3px 9px}
.m3-room-join{height:30px;padding:0 14px;font-size:12px}


/* Гостевой список комнат: размытый пример + кнопка входа (как в монополии). */
.lobby-list-box.m3-lobby-guest{position:relative}
.m3-guest-blurred{display:flex;flex-direction:column;gap:7px;filter:blur(4px);pointer-events:none;user-select:none}
.m3-guest-cta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}
.m3-guest-cta .btn-primary{white-space:normal;height:auto;padding:12px 20px;text-align:center;line-height:1.3}

/* Шапка списка игроков в комнате — тот же вид, что в монополии
   (.net-lobby-players-head в monopoly.css, сюда её не подключить). */
.net-lobby-players-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}