/* =====================================================================
   «Дилемма заключённого» — стили. Всё под #app (изоляция от хрома сайта).
   Палитра CAC, No-Fluff минимализм, mobile-first.
   Размещение: ~/public_html/assets/css/dilemma.css
   ===================================================================== */

#app.pd {
  --cac-blue:   #0f2c59;   /* глубокий корпоративный синий */
  --cac-bg:     #f8fafc;
  --cac-text:   #1e293b;
  --cac-border: #e2e8f0;
  --cac-muted:  #64748b;
  --share:      #2563eb;   /* синяя — Поделиться */
  --share-d:    #1d4ed8;
  --steal:      #dc2626;   /* красная — Забрать */
  --steal-d:    #b91c1c;
  --good:       #16a34a;

  font-family: Arial, "Helvetica Neue", sans-serif;
  color: var(--cac-text);
  max-width: 720px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--cac-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px -6px rgba(15,44,89,.12);
  box-sizing: border-box;
}
#app.pd *, #app.pd *::before, #app.pd *::after { box-sizing: border-box; }

/* --- типографика / общие --- */
#app.pd h1 { font-size: 1.5rem; color: var(--cac-blue); margin: 0 0 .5rem; }
#app.pd h2 { font-size: 1.15rem; color: var(--cac-blue); margin: 0 0 .5rem; }
#app.pd p  { line-height: 1.55; margin: .4rem 0; }
#app.pd .pd-muted { color: var(--cac-muted); font-size: .9rem; }
#app.pd .pd-center { text-align: center; }

/* --- кнопки общие --- */
#app.pd button { font-family: inherit; cursor: pointer; border: none; border-radius: 8px; }
#app.pd .pd-btn {
  padding: .8rem 1.2rem; font-size: 1rem; font-weight: 700;
  background: var(--cac-blue); color: #fff; transition: background .15s, transform .05s;
}
#app.pd .pd-btn:hover { background: #163a72; }
#app.pd .pd-btn:active { transform: translateY(1px); }
#app.pd .pd-btn:disabled { opacity: .5; cursor: not-allowed; }
#app.pd .pd-btn-ghost { background: transparent; color: var(--cac-blue); border: 1px solid var(--cac-border); }

/* --- формы --- */
#app.pd input[type=text] {
  width: 100%; padding: .7rem .8rem; font-size: 1rem;
  border: 1px solid var(--cac-border); border-radius: 8px; margin: .3rem 0 .7rem;
}
#app.pd .pd-field label { font-size: .9rem; color: var(--cac-muted); }

/* --- секрет-гейт хоста --- */
#app.pd.pd-gate { max-width: 520px; text-align: center; }
#app.pd .pd-gate-card { padding: 1rem; }

/* --- лобби / QR --- */
#app.pd .pd-lobby { text-align: center; }
#app.pd .pd-qr {
  width: 240px; height: 240px; margin: 1rem auto; padding: 10px; background: #fff;
  border: 1px solid var(--cac-border); border-radius: 10px;
}
#app.pd .pd-qr canvas, #app.pd .pd-qr svg { width: 100%; height: 100%; display: block; }
#app.pd .pd-code {
  font-size: 2rem; letter-spacing: .35rem; font-weight: 800; color: var(--cac-blue);
  margin: .3rem 0; font-family: "Courier New", monospace;
}
#app.pd .pd-join-list { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
#app.pd .pd-join-slot {
  min-width: 150px; padding: .7rem 1rem; border: 1px dashed var(--cac-border);
  border-radius: 8px; color: var(--cac-muted);
}
#app.pd .pd-join-slot.filled { border-style: solid; color: var(--cac-text); border-color: var(--cac-blue); }

/* --- табло --- */
#app.pd .pd-scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem;
  padding: .8rem 1rem; background: var(--cac-bg); border-radius: 10px; margin-bottom: 1rem;
}
#app.pd .pd-team { text-align: center; }
#app.pd .pd-team .pd-team-name { font-weight: 700; color: var(--cac-blue); word-break: break-word; }
#app.pd .pd-team .pd-team-score { font-size: 2rem; font-weight: 800; }
#app.pd .pd-team.side-A .pd-team-score { color: var(--share); }
#app.pd .pd-team.side-B .pd-team-score { color: var(--steal); }
#app.pd .pd-vs { color: var(--cac-muted); font-weight: 700; }
#app.pd .pd-roundinfo { text-align: center; margin-bottom: .8rem; }
#app.pd .pd-roundinfo .pd-round-no { font-size: 1.1rem; font-weight: 700; color: var(--cac-blue); }
#app.pd .pd-timer { font-variant-numeric: tabular-nums; color: var(--cac-muted); font-size: .95rem; }

/* --- индикаторы «нажала/не нажала» --- */
#app.pd .pd-locks { display: flex; gap: 1rem; justify-content: center; margin: .6rem 0 1rem; }
#app.pd .pd-lock { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--cac-muted); }
#app.pd .pd-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cac-border); }
#app.pd .pd-dot.on { background: var(--good); }

/* --- две большие кнопки выбора --- */
#app.pd .pd-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
#app.pd .pd-choice {
  padding: 1.6rem 1rem; font-size: 1.25rem; font-weight: 800; color: #fff;
  border-radius: 12px; min-height: 96px; line-height: 1.2;
}
#app.pd .pd-choice.share { background: var(--share); }
#app.pd .pd-choice.share:hover { background: var(--share-d); }
#app.pd .pd-choice.steal { background: var(--steal); }
#app.pd .pd-choice.steal:hover { background: var(--steal-d); }
#app.pd .pd-choice:disabled { opacity: .45; }
#app.pd .pd-choice.chosen { outline: 4px solid #fde047; outline-offset: 2px; }
#app.pd .pd-waiting { text-align: center; color: var(--cac-muted); margin: 1rem 0; }

/* --- раскрытие раунда --- */
#app.pd .pd-reveal { text-align: center; margin: 1rem 0; }
#app.pd .pd-reveal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
#app.pd .pd-reveal-card { padding: 1rem; border: 1px solid var(--cac-border); border-radius: 10px; }
#app.pd .pd-reveal-card .pd-pick { font-weight: 800; font-size: 1.1rem; }
#app.pd .pd-reveal-card .pd-pick.share { color: var(--share); }
#app.pd .pd-reveal-card .pd-pick.steal { color: var(--steal); }
#app.pd .pd-reveal-card .pd-delta { font-size: 1.6rem; font-weight: 800; }

/* --- история / лента раундов --- */
#app.pd .pd-history { margin-top: 1rem; }
#app.pd .pd-history table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#app.pd .pd-history th, #app.pd .pd-history td { padding: .35rem .5rem; border-bottom: 1px solid var(--cac-border); text-align: center; }
#app.pd .pd-history th { color: var(--cac-muted); font-weight: 600; }
#app.pd .pd-tag { display: inline-block; padding: .05rem .4rem; border-radius: 5px; font-size: .8rem; font-weight: 700; }
#app.pd .pd-tag.share { background: #dbeafe; color: var(--share-d); }
#app.pd .pd-tag.steal { background: #fee2e2; color: var(--steal-d); }

/* --- дебриф / финал --- */
#app.pd .pd-final { text-align: center; }
#app.pd .pd-winner { font-size: 1.4rem; font-weight: 800; color: var(--cac-blue); margin: .6rem 0; }
#app.pd .pd-debrief { text-align: left; background: var(--cac-bg); border-radius: 10px; padding: 1rem 1.2rem; margin: 1rem 0; }
#app.pd .pd-debrief h2 { margin-top: 0; }

/* --- переключатель языка --- */
#app.pd .pd-langs { text-align: right; margin-bottom: .3rem; }
#app.pd .pd-langs button { background: transparent; color: var(--cac-muted); padding: .15rem .45rem; font-size: .85rem; }
#app.pd .pd-langs button.active { color: var(--cac-blue); font-weight: 700; text-decoration: underline; }

/* --- сообщения об ошибках --- */
#app.pd .pd-error { background: #fef2f2; color: var(--steal-d); border: 1px solid #fecaca; border-radius: 8px; padding: .6rem .8rem; margin: .6rem 0; }

/* --- узкие экраны --- */
@media (max-width: 480px) {
  #app.pd { margin: 8px; padding: 14px; }
  #app.pd .pd-team .pd-team-score { font-size: 1.6rem; }
  #app.pd .pd-choice { font-size: 1.1rem; padding: 1.3rem .6rem; }
  #app.pd .pd-code { font-size: 1.6rem; letter-spacing: .25rem; }
}