/* ==========================================================================
   Мид — своё поверх клатча

   Экран, HUD и панель — классы клатча (clutch/clutch.css) и минёра
   (miner.css): одна семья игр. Здесь только своё: две большие кнопки
   исхода («Убил» / «Не убил» — нажатие сразу ставка), строка истории
   раундов под экраном и порядок блоков на телефоне.
   ========================================================================== */

/* ═══════════════ ИСХОДЫ ═══════════════
   «Убил» — зелёная, как «Пикнуть» у клатча (и «Пополнить» в шапке);
   «Не убил» — синяя, цвет контров в HUD. На кнопке — исход и икс,
   больше ничего (владелец про «Пикнуть»: «писаться только коэффицент»). */
.md-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-body .md-pick {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; row-gap: 1px;
  min-width: 0; height: 74px; margin: 0; padding: 9px 12px; border: 0; border-radius: 12px;
  font-family: var(--f-cond), sans-serif; text-align: left; cursor: pointer;
  transition: transform .14s, filter .14s, opacity .14s, box-shadow .14s;
}
.md-pick--kill {
  background: linear-gradient(180deg, #86F276 0%, #6DEA5D 52%, #5DD84E 100%); color: #163712;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 0 rgba(10, 40, 8, .16), 0 14px 28px -16px rgba(109, 234, 93, .7);
}
.md-pick--miss {
  background: linear-gradient(180deg, #A9C8FF 0%, #86AEF8 52%, #6E98EC 100%); color: #0f2147;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(8, 20, 50, .18), 0 14px 28px -16px rgba(120, 160, 255, .7);
}
.gm-body .md-pick:hover:not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); }
.gm-body .md-pick:active:not([disabled]) { transform: translateY(1px); filter: brightness(.97); }
.md-pick__i { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(0, 0, 0, .12); }
.md-pick__i svg { width: 24px; height: 24px; }
.md-pick__t { display: grid; min-width: 0; line-height: 1.05; }
.md-pick__t b { font-size: 20px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.md-pick__t small { font-family: var(--f-ui, Inter), sans-serif; font-size: 10.5px; font-weight: 600; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-pick__x { grid-column: 2; font-size: 17px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.md-pick kbd {
  position: absolute; right: 8px; top: 8px;
  font-family: var(--f-cond), sans-serif; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 4px; background: rgba(0, 0, 0, .16); opacity: .75;
}
/* последний выбранный исход (его повторяет пробел) — светлое кольцо */
.gm-body .md-pick.is-on { box-shadow: 0 0 0 2px #1B1538, 0 0 0 4px rgba(255, 255, 255, .85); }
/* раунд идёт: обе заперты, выбранная остаётся яркой */
.gm-body .md-pick[disabled] { cursor: progress; opacity: .45; filter: saturate(.6); }
.gm-body .md-pick.is-on[disabled] { opacity: .92; filter: none; }
.md-page.is-guest .md-picks { display: none; }
#md-mult { color: var(--mn-lime); }
#md-pay { color: var(--text); }

/* ═══════════════ ИСТОРИЯ РАУНДОВ ═══════════════
   Исход каждой дуэли: жёлтый — убил (цвет T), синий — не убил (цвет CT);
   зелёная обводка — ставка сыграла. Новый — слева. */
.md-hist {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--mn-line); border-radius: 12px; background: var(--mn-glass); box-shadow: var(--mn-hl);
  overflow: hidden;
}
.md-hist__lab { flex: none; font-family: var(--f-cond), sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.md-hist__none { font-size: 12px; color: var(--text-mute); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-hist__row {
  display: flex; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.md-h {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 7px; border-radius: 8px;
  font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
.md-h__i svg { display: block; width: 15px; height: 15px; }
.md-h--kill { color: #f2c65c; background: rgba(242, 198, 92, .13); }
.md-h--miss { color: #9cc0ff; background: rgba(156, 192, 255, .13); }
.md-h.is-win { box-shadow: inset 0 0 0 1.5px #8fe36b; }
.md-h.is-lose { opacity: .62; }
.md-h.is-new { animation: mdIn .35s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes mdIn { from { transform: translateX(-30%) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ═══════════════ ЭКРАН ═══════════════ */
/* В покое — вид в прицеле на двери (главный кадр игры). Подсказка не
   закрывает сцену: короткая строка в нижней части линзы, без затемнения. */
.md-page .hud-idle { inset: auto 0; top: 73.5%; display: flex; justify-content: center; transform: translateY(-50%); background: none; }
.md-page .hud-idle__p {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 20);
  font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: #f4efe6; background: rgba(58, 52, 46, .72); border-radius: calc(var(--u) * 3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.md-page .hud-idle__p .t { color: var(--t); }
.md-page .hud-idle__p .ct { color: #a9c6ff; }
.md-page .hud-idle__p .m { color: var(--green); font-weight: 700; }
/* в прицеле таймер не нужен — счёт сессии под ним */
.md-page .hud-clock span { opacity: .9; }
@media (max-width: 1080px) {
  .gm-body .md-pick { padding: 9px 10px; column-gap: 7px; }
  .md-pick__i { width: 32px; height: 32px; }
  .md-pick__t b { font-size: 18px; }
  .md-pick__t small { display: none; }
}

/* Телефон: экран сверху (clutch.css), сразу под ним — исходы (ставка в одно
   касание), потом цифры и сумма ставки; история — под экраном. */
@media (max-width: 760px) {
  .gm-body.mn-body .md-panel > .md-act { order: -3; }
  /* подпись «Исход дуэли» осталась бы внизу одна — кнопки и так говорят сами */
  .gm-body.mn-body .md-lab-pick { display: none; }
  .gm-body .md-pick { height: 60px; padding: 8px 10px; }
  .md-pick kbd { display: none; }
  .md-pick__i { width: 30px; height: 30px; }
  .md-pick__i svg { width: 20px; height: 20px; }
  .md-pick__t b { font-size: 17px; }
  .md-pick__x { font-size: 15px; }
  .md-hist { height: 38px; padding: 0 8px; gap: 8px; border-radius: 10px; }
  .md-hist__lab { display: none; }
  .md-h { height: 26px; padding: 0 7px 0 6px; font-size: 12px; }
  .md-page .hud-idle__p .m { display: none; }
  /* «Вас убил» на телефоне налезает на итог — хватает ленты и баннера */
  .md-page .hud-killer { display: none; }
  /* лента убийств здесь (clutch.css: top 104) — на высоте баннера итога и
     налезала на его правый край; пока итог на экране (#hud.is-end,
     main.js hud.end), ленту прячем — фраг и так написан в баннере */
  .md-page .hud-feed { transition: opacity .2s; }
  .md-page .hud.is-end .hud-feed { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .md-h.is-new { animation: none; }
}