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

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-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-rumor  { color: #c4d68a; }
.kv-d-habit  { color: #f2d073; }
.kv-d-trace  { color: #a8c4e8; }
.kv-d-mark   { 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-others { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.kvp-other {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 8px; background: rgba(23,37,48,.6);
  border: 1px solid var(--kvp-line);
}
.kvp-other b { font: 700 12px/1 var(--display, system-ui); color: var(--kvp-ink); }
.kvp-other.out { opacity: .55; }
.kvp-outmark { font-style: normal; font-size: 10px; color: #9aa6ad; }
.kvp-otherc { display: flex; gap: 3px; flex-wrap: wrap; margin-left: auto; }
.kvp-mini { display: block; width: 20px; height: 20px; opacity: .9; }
.kvp-mini .kv-icon { width: 100%; height: 100%; display: block; }
.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);
}