/* =========================================================================
   КОВЧЕГ — телефон.
   Тот же крашеный металл, что и на большом экране, только в руке.
   Личное дело живёт здесь и больше нигде: значит, читаться должно
   с одного взгляда, одной рукой, при плохом свете.
   ========================================================================= */

body.kovcheg-phone {
  --kvp-bg:    #0d151b;
  --kvp-panel: #172530;
  --kvp-line:  #334a58;
  --kvp-amber: #ffb648;
  --kvp-cold:  #8fd0e8;
  --kvp-ok:    #6fe0a8;
  --kvp-bad:   #ff7a86;
  --kvp-ink:   #dbe6ee;
}
/* Фон перебивается у .game жёстко: там свой градиент под цвет игрока,
   и без !important убежище остаётся синим, как в лобби. */
body.kovcheg-phone,
body.kovcheg-phone .game {
  background-color: #0a1015 !important;
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(255,182,72,.10), transparent 62%),
    linear-gradient(180deg, #14212a 0%, #0d151b 48%, #080d11 100%) !important;
  color: var(--kvp-ink);
}
body.kovcheg-phone .ghead,
body.kovcheg-phone .game > header {
  background: rgba(23,37,48,.92); border-bottom: 1px solid var(--kvp-line);
}
/* Трубы по краям — та же примета, что и на большом экране. */
body.kovcheg-phone .game::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(43,61,72,.55) 0 6px, transparent 6px 14px, transparent calc(100% - 14px), rgba(43,61,72,.55) calc(100% - 6px) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 46%, rgba(4,8,11,.6) 100%);
}
body.kovcheg-phone .content { position: relative; z-index: 1; }

.kvp-h1 {
  font-family: var(--display, system-ui);
  font-size: 22px; line-height: 1.05; letter-spacing: .03em;
  color: var(--kvp-amber); text-align: center; margin: 4px 0 8px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.kvp-h1.out { color: #ff9aa6; }

.kvp-note {
  font-size: 13px; line-height: 1.35; color: #9db3c1; text-align: center;
  margin: 0 0 10px;
}
.kvp-note b { color: var(--kvp-amber); }
.kvp-note.ok { color: var(--kvp-ok); }
.kvp-note.out { color: #ffb08f; }

/* ---------- мир ---------- */

.kvp-world {
  border: 1px solid var(--kvp-line); border-radius: 10px; padding: 8px 10px;
  background: rgba(23,37,48,.75); margin-bottom: 10px;
}
.kvp-world-row b {
  font-family: var(--display, system-ui); font-size: 15px; letter-spacing: .02em; color: #ffc493;
}
.kvp-world-row i { font-style: normal; font-size: 13px; color: #a9c1cf; }
.kvp-world-nums { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.kvp-world-nums span {
  font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border-radius: 99px;
  background: rgba(56,80,94,.5); color: #b9d0de;
}

/* ---------- требования ---------- */

.kvp-needs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.kvp-need {
  display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto;
  gap: 0 8px; align-items: center;
  border: 1px solid var(--kvp-line); border-radius: 9px; padding: 7px 9px;
  background: rgba(23,37,48,.7);
}
.kvp-need span { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--kvp-amber); }
.kvp-need span .kv-icon { width: 100%; height: 100%; display: block; }
.kvp-need b { font-family: var(--display, system-ui); font-size: 13px; color: var(--kvp-ink); letter-spacing: .02em; }
.kvp-need i { font-style: normal; font-size: 11px; color: #8ba2b1; line-height: 1.25; }
/* Закрытое требование — зелёным и с тем, кто его закрыл. */
.kvp-need.on { border-color: #2f7a57; background: rgba(47,122,87,.22); }
.kvp-need.on span { color: var(--kvp-ok); }
.kvp-need em {
  grid-column: 2; font-style: normal; font-size: 11px; color: var(--kvp-ok); margin-top: 2px;
}
.kvp-need.hidden { opacity: .6; border-style: dashed; }

/* Свёрнутые требования в круге: заголовок-строка, нажал — список. */
details.kvp-fold {
  border: 1px solid var(--kvp-line); border-radius: 9px; background: rgba(23,37,48,.7); margin: 6px 0;
}
details.kvp-fold summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
  list-style: none; min-height: 44px;
}
details.kvp-fold summary::-webkit-details-marker { display: none; }
details.kvp-fold summary::after { content: '▾'; margin-left: auto; color: var(--kvp-amber); transition: transform .2s; }
details.kvp-fold summary b { font: 800 13px/1.1 var(--display, system-ui); letter-spacing: .06em; color: var(--kvp-amber); }
details.kvp-fold .kvp-needs { padding: 0 10px 2px; }

/* «Поторопить» и «торопят»: коротко, крупно, красным для тех, кто тянет. */
.kvp-hurry { display: block; width: 100%; margin: 4px 0; font-size: 16px; }
.kvp-hurryline {
  margin: 6px 0; padding: 9px 11px; border-radius: 9px; text-align: center;
  background: rgba(143,208,232,.1); border: 1px solid var(--kvp-line);
}
.kvp-hurryline b { display: block; font: 800 15px/1.15 var(--display, system-ui); color: var(--kvp-ink); letter-spacing: .04em; }
.kvp-hurryline i { display: block; font-style: normal; font-size: 12.5px; color: #b9d0de; margin-top: 3px; }
.kvp-hurryline.hot { background: rgba(255,122,134,.18); border-color: #9a3844; animation: kvp-hot 1s ease-in-out infinite alternate; }
.kvp-hurryline.hot b { color: #ffd9dd; }
@keyframes kvp-hot { to { background: rgba(255,122,134,.32); } }

.kvp-rule {
  text-align: center; font-size: 13px; color: #a9c1cf; margin-bottom: 10px;
  padding: 7px 10px; border-radius: 8px; background: rgba(23,37,48,.7);
  border: 1px solid var(--kvp-line);
}
.kvp-rule b { color: var(--kvp-amber); font-family: var(--display, system-ui); }

/* ---------- личное дело ---------- */

.kvp-hand { display: flex; flex-direction: column; gap: 7px; }
.kvp-card {
  display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 7px; border-radius: 11px;
  background: rgba(23,37,48,.78); border: 1px solid var(--kvp-line);
  color: var(--kvp-ink); position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.kvp-card[disabled] { opacity: .78; }
.kvp-card.can { border-color: var(--kvp-amber); box-shadow: 0 0 0 1px rgba(255,182,72,.25); opacity: 1; }
.kvp-card.can:active { transform: scale(.985); }
.kvp-card.picked { background: rgba(255,182,72,.14); border-color: var(--kvp-amber); }
.kvp-card.open { opacity: .62; }
.kvp-card-art { display: block; width: 54px; }
.kvp-card-art .kv-art { display: block; width: 100%; height: auto; border-radius: 5px; }
.kvp-card-txt { display: flex; flex-direction: column; min-width: 0; }
.kvp-deck {
  font: 700 9px/1 var(--display, system-ui); letter-spacing: .14em; opacity: .85; margin-bottom: 2px;
}
.kvp-name {
  font: 700 14px/1.12 var(--display, system-ui); letter-spacing: .02em; color: var(--kvp-ink);
}
.kvp-card-txt > i {
  font-style: normal; font-size: 11.5px; line-height: 1.3; color: #93aab9; margin-top: 2px;
}
.kvp-state {
  position: absolute; right: 7px; top: 6px;
  font: 700 8px/1 var(--display, system-ui); letter-spacing: .1em; color: #6e8492;
}
.kvp-card.picked .kvp-state { color: var(--kvp-amber); }
.kvp-card.open .kvp-state { color: var(--kvp-cold); }

/* цвет масти — тот же, что на большом экране */
.kv-d-prof   { color: #8fd0e8; }
.kv-d-body   { color: #f0c98a; }
.kv-d-health { color: #8fe8bc; }
.kv-d-bag    { color: #e0b06a; }
.kv-d-hobby  { color: #c9a6ff; }
.kv-d-trait  { color: #7fd8d8; }
.kv-d-phobia { color: #ff9aa6; }
.kv-d-secret { color: #a9a0ff; }
.kv-d-skill  { color: #c4d68a; }
.kv-d-habit  { color: #f2d073; }
.kv-d-past   { color: #a8c4e8; }
.kv-d-fact   { color: #f09aff; }

/* ---------- козырь ---------- */

.kvp-trumpbox {
  margin-top: 12px; padding: 9px; border-radius: 11px;
  background: rgba(46,36,16,.6); border: 1px solid #7a5c1c;
}
.kvp-trumpbox.off { opacity: .6; }
.kvp-trump-head { display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; }
.kvp-trump-art { display: block; width: 46px; }
.kvp-trump-art .kv-art { display: block; width: 100%; height: auto; border-radius: 5px; }
.kvp-trump-head b {
  display: block; font: 700 14px/1.1 var(--display, system-ui); color: var(--kvp-amber); letter-spacing: .02em;
}
.kvp-trump-head i { font-style: normal; font-size: 11.5px; color: #cbb98c; line-height: 1.3; }
.kvp-trumpbox .btn.gold {
  margin-top: 9px; background: linear-gradient(180deg, #ffce6a, #c2871f); color: #2a1c02;
  border: none; font-family: var(--display, system-ui); letter-spacing: .06em;
}
.kvp-trump-pick { margin-top: 8px; }

/* ---------- чужие карты ---------- */

/* Строки игроков раскрываются по нажатию — правила ниже, в разделе
   «чужие карты: имя — нажал — карты». Здесь только пометка «снаружи». */
.kvp-outmark { font-style: normal; font-size: 10px; color: #9aa6ad; }
.kvp-mini.closed {
  font: 700 10px/20px var(--display, system-ui); text-align: center;
  color: #6e8492; background: rgba(0,0,0,.3); border-radius: 4px; width: 22px;
}

/* ---------- удары снаружи ---------- */

.kvp-strikes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.kvp-strike {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto;
  gap: 0 9px; align-items: center; text-align: left; width: 100%;
  padding: 9px; border-radius: 11px; color: #ffc0cf;
  background: rgba(74,18,38,.55); border: 1px solid #7c2040;
}
.kvp-strike span { grid-row: 1 / 3; width: 30px; height: 30px; color: #ff8fb0; }
.kvp-strike span .kv-icon { width: 100%; height: 100%; display: block; }
.kvp-strike b { font: 700 14px/1.1 var(--display, system-ui); letter-spacing: .03em; }
.kvp-strike i { font-style: normal; font-size: 11.5px; color: #e0a2b4; line-height: 1.3; }
.kvp-strike.on { background: rgba(255,143,176,.2); border-color: #ff8fb0; box-shadow: 0 0 0 1px rgba(255,143,176,.4); }

/* ---------- голосование ---------- */

.kvp-votes { display: flex; flex-direction: column; gap: 7px; }
.kvp-vote {
  width: 100%; padding: 13px 10px; border-radius: 11px;
  font: 700 16px/1 var(--display, system-ui); letter-spacing: .03em;
  background: rgba(23,37,48,.85); border: 1px solid var(--kvp-line); color: var(--kvp-ink);
}
.kvp-vote:active { transform: scale(.985); }
.kvp-vote.on { background: rgba(255,122,134,.2); border-color: var(--kvp-bad); color: #ffd7db; }
.kvp-vote[disabled] { opacity: .5; }
.kvp-vote.thin { padding: 9px 10px; font-size: 13px; }
.kvp-veto { margin-top: 12px; }

/* ---------- событие и финал ---------- */

.kvp-event {
  padding: 9px 11px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(12,58,74,.6); border: 1px solid #175d75;
}
.kvp-event b { display: block; font: 700 15px/1.1 var(--display, system-ui); color: #7fe3ff; }
.kvp-event i { font-style: normal; font-size: 12px; color: #a9c6d2; }

.kvp-chron { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.kvp-chline {
  padding: 7px 9px; border-radius: 8px; font-size: 12.5px; line-height: 1.3;
  border-left: 4px solid;
}
.kvp-chline.good { background: rgba(47,122,87,.16); border-color: var(--kvp-ok); color: #d7f2e4; }
.kvp-chline.bad { background: rgba(122,38,52,.18); border-color: var(--kvp-bad); color: #f6d6da; }
.kvp-fates { display: flex; flex-direction: column; gap: 4px; }
.kvp-fate {
  padding: 6px 9px; border-radius: 8px; font-size: 12px; line-height: 1.3;
  background: rgba(23,37,48,.6); border: 1px solid var(--kvp-line); color: #c3d6e1;
}
.kvp-fate b { font-family: var(--display, system-ui); color: var(--kvp-ink); }
.kvp-fate.out { opacity: .65; border-style: dashed; }

body.kovcheg-phone textarea {
  width: 100%; border-radius: 10px; padding: 10px; font-size: 16px;
  background: rgba(23,37,48,.9); border: 1px solid var(--kvp-line); color: var(--kvp-ink);
}

/* ---------- заступничество и подсказка ---------- */

.kvp-guard {
  padding: 8px 10px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(47,122,87,.18); border: 1px solid #2f7a57;
}
.kvp-guard b { display: block; font: 700 13px/1.15 var(--display, system-ui); color: var(--kvp-ok); }
.kvp-guard i { font-style: normal; font-size: 11.5px; color: #a9ccbb; line-height: 1.3; }
.kvp-guard.me { background: rgba(47,122,87,.3); box-shadow: 0 0 0 1px rgba(111,224,168,.35); }

.kvp-hint {
  padding: 9px 11px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(23,37,48,.7); border: 1px dashed var(--kvp-line);
}
.kvp-hint b {
  display: block; margin-bottom: 3px; letter-spacing: .12em; color: var(--kvp-amber);
  font: 700 10px/1 var(--display, system-ui);
}
.kvp-hint span { display: block; font-size: 12px; line-height: 1.35; color: #9db3c1; }
.kvp-hint span + span { margin-top: 4px; }

/* ---------- тайная цель ---------- */

.kvp-goalbox {
  margin-top: 12px; padding: 10px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(60,44,14,.85), rgba(35,26,8,.85));
  border: 1px solid #a07c26; box-shadow: 0 0 0 1px rgba(255,206,106,.18);
}
.kvp-goal-head { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.kvp-goal-art { display: block; width: 48px; }
.kvp-goal-art .kv-art { display: block; width: 100%; height: auto; border-radius: 5px; }
.kvp-goal-head u {
  display: block; text-decoration: none; letter-spacing: .14em; color: #c8a94e;
  font: 700 9px/1 var(--display, system-ui); margin-bottom: 3px;
}
.kvp-goal-head b {
  display: block; font: 700 15px/1.1 var(--display, system-ui);
  color: #ffce6a; letter-spacing: .02em;
}
.kvp-goal-head i {
  font-style: normal; display: block; font-size: 12px; line-height: 1.3; color: #ddc79a; margin-top: 2px;
}
.kvp-goal-note { margin-top: 8px; font-size: 11px; line-height: 1.35; color: #bda97c; }

.kvp-goallist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.kvp-goalitem {
  padding: 6px 9px; border-radius: 8px; background: rgba(46,36,16,.5); border: 1px solid #6b5218;
}
.kvp-goalitem b { display: block; font: 700 12.5px/1.15 var(--display, system-ui); color: #ffce6a; }
.kvp-goalitem i { font-style: normal; font-size: 11px; line-height: 1.3; color: #cbb98c; }

.kvp-guesses { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kvp-guess { display: flex; flex-direction: column; gap: 4px; }
.kvp-guess span {
  font: 700 12px/1 var(--display, system-ui); color: var(--kvp-ink); letter-spacing: .04em;
}
.kvp-guess select {
  width: 100%; padding: 11px 10px; border-radius: 10px; font-size: 15px;
  background: rgba(23,37,48,.9); border: 1px solid var(--kvp-line); color: var(--kvp-ink);
  -webkit-appearance: none; appearance: none;
}

.kvp-goalsum { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.kvp-goalrow {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 6px 9px; border-radius: 8px; background: rgba(23,37,48,.6);
  border-left: 4px solid var(--kvp-line); font-size: 12px;
}
.kvp-goalrow.done { border-left-color: var(--kvp-amber); background: rgba(255,182,72,.14); }
.kvp-goalrow b { font-family: var(--display, system-ui); color: var(--kvp-ink); }
.kvp-goalrow span { color: #cbb98c; }
.kvp-goalrow i {
  font-style: normal; margin-left: auto; font-size: 10px; letter-spacing: .08em; color: #7f97a6;
}
.kvp-goalrow.done i { color: var(--kvp-amber); }

/* ---------- торг через дверь ---------- */
/* Вариант «постучать» стоит рядом с ударами, но выглядит не как удар:
   это единственная строка в списке, где снаружи что-то ПРЕДЛАГАЮТ. */

.kvp-strike.deal {
  grid-template-rows: auto auto auto;
  background: rgba(70,52,16,.6); border-color: var(--kvp-amber, #ffb648); color: #ffdca6;
}
.kvp-strike.deal span { grid-row: 1 / 4; color: var(--kvp-amber, #ffb648); }
.kvp-strike.deal i { color: #e8c98e; }
.kvp-strike.deal em {
  font-style: normal; font-size: 10.5px; letter-spacing: .1em;
  color: var(--kvp-amber, #ffb648); text-transform: uppercase;
}
.kvp-strike.deal.on {
  background: rgba(255,182,72,.22); border-color: #ffd48a;
  box-shadow: 0 0 0 1px rgba(255,182,72,.45);
}

.kvp-deal {
  padding: 13px; border-radius: 13px; margin-bottom: 12px;
  background: rgba(70,52,16,.45); border: 1px solid var(--kvp-amber, #ffb648);
}
.kvp-deal-who {
  font: 700 20px/1 var(--display, system-ui); letter-spacing: .05em;
  color: var(--kvp-amber, #ffb648); text-align: center; overflow-wrap: anywhere;
}
.kvp-deal-ask {
  display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto;
  gap: 0 10px; align-items: center; margin-top: 12px;
}
.kvp-deal-ask span { grid-row: 1 / 3; width: 32px; height: 32px; color: #ffdca6; }
.kvp-deal-ask span .kv-icon { width: 100%; height: 100%; display: block; }
.kvp-deal-ask b {
  font: 700 15px/1.1 var(--display, system-ui); letter-spacing: .03em; color: #fff1d8;
  overflow-wrap: anywhere;
}
.kvp-deal-ask i { font-style: normal; font-size: 12.5px; color: #e8c98e; line-height: 1.35; }
.kvp-deal-give {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,182,72,.3);
  font-size: 12.5px; line-height: 1.4; color: #cfe6d8;
}
.kvp-deal-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

/* ---------- смысл карты: метки словами ---------- */
.kvp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kvp-tag {
  font: 800 10.5px/1 var(--display, system-ui); font-style: normal; letter-spacing: .06em;
  padding: 3px 6px; border-radius: 5px; color: #0c1a12; background: var(--kvp-ok);
}
.kvp-tag.bad { color: #2a0b0e; background: var(--kvp-bad); }

/* ---------- что будет в конце круга ---------- */
.kvp-stakes {
  margin: 6px 0; padding: 7px 10px; border-radius: 8px; text-align: center;
  font: 700 13px/1.25 var(--display, system-ui); letter-spacing: .03em;
  color: #b9d0de; background: rgba(143,208,232,.08); border: 1px solid var(--kvp-line);
}
.kvp-stakes.hot { color: #ffd9dd; background: rgba(255,122,134,.14); border-color: #7a2f38; }

/* ---------- «готов» ---------- */
.kvp-ready { display: block; width: 100%; margin: 8px 0 10px; font-size: 16px; }

/* Экран телефона — колонка с прокруткой. Кнопка с overflow:hidden в
   такой колонке сжимается до одних отступов, и надпись срезается
   («ГОТОВ ГОЛОСОВАТЬ» было видно наполовину). Длинный экран должен
   прокручиваться, а не сплющиваться. */
body.kovcheg-phone #content > * { flex-shrink: 0; }

.kvp-h2 {
  margin: 14px 0 6px; font: 800 13px/1 var(--display, system-ui);
  letter-spacing: .12em; color: #93aab8;
}

/* ---------- чужие карты: имя — нажал — карты ---------- */
.kvp-others { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.kvp-others-t {
  font: 800 11.5px/1 var(--display, system-ui); letter-spacing: .1em; color: #93aab8; margin-bottom: 2px;
}
details.kvp-other, .kvp-cand details {
  border: 1px solid var(--kvp-line); border-radius: 9px; background: rgba(23,37,48,.7);
}
details.kvp-other.out { opacity: .7; }
details.kvp-other summary, .kvp-cand summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
  list-style: none; min-height: 44px;
}
details.kvp-other summary::-webkit-details-marker, .kvp-cand summary::-webkit-details-marker { display: none; }
details.kvp-other summary::after, .kvp-cand summary::after {
  content: '▾'; margin-left: auto; color: var(--kvp-amber); transition: transform .2s;
}
details[open] > summary::after { transform: rotate(180deg); }
details.kvp-other summary b, .kvp-cand summary b {
  font: 800 15px/1.1 var(--display, system-ui); color: var(--kvp-ink);
}
.kvp-count { color: #93aab8; font-size: 12px; }
.kvp-ocards { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.kvp-ocard {
  padding: 7px 9px; border-radius: 7px; background: rgba(13,21,27,.7);
  border-left: 3px solid var(--kvp-cold);
}
.kvp-ocard u {
  display: block; text-decoration: none; font: 700 10px/1 var(--display, system-ui);
  letter-spacing: .12em; color: var(--kvp-cold); opacity: .85; margin-bottom: 3px;
}
.kvp-ocard b { display: block; font: 800 14px/1.15 var(--display, system-ui); color: #fff; }
.kvp-ocard > i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.3; color: #b9d0de; margin-top: 2px; }

/* ---------- голосование: карты кандидата и кнопка рядом ---------- */
.kvp-cands { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.kvp-cand { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; }
.kvp-cand .kvp-vote { min-width: 92px; min-height: 44px; }
.kvp-cand.on details { border-color: var(--kvp-amber); }