/* Компоненти Midnight Play — M3 Component Specification §3–7 */

/* --- Button: primary / secondary / danger / text; мінімум 44 px --- */

button, .btn-primary, .btn-secondary, .btn-danger, .btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  min-width: var(--tap-target);
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
button:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

/* Без класу — вторинна (контурна) кнопка: лишається читабельною, але не конкурує з головною дією */
button:not([class]), .btn-secondary {
  background: transparent;
  border-color: var(--border-control);
  color: var(--text-primary);
}
button:not([class]):hover, .btn-secondary:hover {
  background: var(--bg-surface-raised);
  border-color: var(--brand-primary-hover);
  color: var(--text-primary);
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--text-on-accent); /* світлий текст на #9D5CFF не проходить AA */
}
.btn-primary:hover { background: var(--brand-primary-hover); color: var(--text-on-accent); box-shadow: var(--glow-primary); }

.btn-danger { background: var(--accent-coral); color: var(--text-on-accent); }
.btn-danger:hover { background: #ff8592; color: var(--text-on-accent); }

.btn-text { background: transparent; color: var(--brand-primary); padding: 0 var(--space-3); }
.btn-text:hover { color: var(--brand-primary-hover); text-decoration: underline; }

.btn-wide { width: 100%; }

/* --- Форми: мітка, поле, підказка, помилка (M3 §5) --- */

label { display: block; margin-bottom: var(--space-1); font-size: 0.9375rem; font-weight: 600; }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-control);
  font: inherit;
}
input::placeholder { color: var(--text-secondary); opacity: 0.8; }
input:hover, select:hover { border-color: var(--brand-primary-hover); }
/* Поле дати в Chrome віддає фокус внутрішнім сегментам — кільце малюємо по :focus-within */
input:focus-visible, select:focus-visible, textarea:focus-visible, input[type=date]:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--brand-primary); }

form p { margin: 0 0 var(--space-4); }
form small { display: block; margin-top: var(--space-1); }
form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); font-weight: 500; }

fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
/* float: legend стає звичайним блоком усередині рамки, а не «врізається» в неї */
legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-3); font-family: var(--font-display); font-size: 1.3rem; }
legend + * { clear: both; }

/* --- InlineAlert / StatusBanner: текстова мітка + смуга, не лише колір (M3 §6) --- */

[role=alert], [role=status] {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left-width: 4px;
  border-radius: var(--radius-control);
}
[role=alert] { border-left-color: var(--state-error); background: rgba(255, 113, 134, 0.1); }
[role=alert]::before { content: "⚠ "; color: var(--state-error); font-weight: 700; }
[role=status] { border-left-color: var(--accent-mint); background: rgba(87, 214, 180, 0.08); }
[role=status]::before { content: "✓ "; color: var(--accent-mint); font-weight: 700; }
[role=alert][hidden], [role=status][hidden] { display: none; }
/* службове пояснення, яке не є станом: без рамки й піктограми */
[role=note] { color: var(--text-secondary); }

/* Вихід із гри (GameHeader): іконка × з доступною назвою (aria-label у шаблоні) */
.exit-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap-target);
  width: var(--tap-target);
  border: 1.5px solid var(--border-control);
  text-decoration: none;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
}
.exit-control:hover { background: var(--bg-surface-raised); border-color: var(--brand-primary-hover); }

/* --- Chip / бейдж 18+ --- */

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
}
.chip--age { border-color: var(--accent-coral); color: var(--accent-coral); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

/* --- Hero / категорії / Game Tile (M3 §4, Wireframes §1) --- */

.hero { padding: var(--space-6) 0 var(--space-5); }
.hero h1 { max-width: 16ch; margin-bottom: var(--space-4); }
.hero p { max-width: 46ch; color: var(--text-secondary); font-size: 1.125rem; }

.category-block { margin-top: var(--space-7); }
.category-block > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); /* 1 колонка на телефоні, 2–4 на десктопі */
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-tile { display: flex; }
.game-tile > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.game-tile > a:hover { transform: translateY(-3px); border-color: var(--brand-primary); box-shadow: var(--shadow-card); color: var(--text-primary); }
.game-tile > a:focus-visible { border-radius: var(--radius-card); }
.game-tile__media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 25% 20%, rgba(157, 92, 255, 0.55), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(255, 107, 122, 0.35), transparent 50%),
    var(--bg-surface-raised);
}
.game-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.game-tile__body { display: flex; flex: 1; flex-direction: column; padding: var(--space-4); }
.game-tile__body h3 { margin-bottom: var(--space-2); }
.game-tile__body p {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-secondary);
}
.game-tile__cta { align-self: flex-start; margin-top: var(--space-2); }

/* --- Game details --- */

.game-details { max-width: var(--reading-max); margin: 0 auto; }
.game-details__cover { overflow: hidden; margin-bottom: var(--space-5); border-radius: var(--radius-card); border: 1px solid var(--border-subtle); }
.game-details__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-details h1 { font-size: clamp(2.1rem, 7vw, 3.25rem); }
.game-details__description { color: var(--text-secondary); font-size: 1.125rem; }
.game-details__cta { margin: var(--space-5) 0 var(--space-3); }
.game-details__cta button { width: 100%; }
.back-link { display: inline-flex; align-items: center; min-height: var(--tap-target); margin-bottom: var(--space-2); color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.back-link:hover { color: var(--text-primary); }

@media (min-width: 900px) {
  .game-details__cta button { width: auto; min-width: 240px; }
}

/* --- Панелі сторінок акаунту та Game Card --- */

.content-container.medium section, .game-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.content-container.medium section > :last-child, .game-card > :last-child { margin-bottom: 0; }
.game-card { box-shadow: var(--shadow-card); }
.game-card h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
.game-card > p:first-child strong { color: var(--text-secondary); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }

.content-container.narrow form + p, .content-container.narrow > p { margin-top: var(--space-4); }
.content-container.narrow [role=group] { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.content-container.narrow [role=group] a { width: 100%; }
.content-container.narrow form button[type=submit].btn-primary { width: 100%; }

.content-container li.game-card { list-style: none; }
#unfinished-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
#unfinished-list h2 { font-size: 1.5rem; }
#unfinished-list p:last-child { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Гра: картка, таймер, вибір, оцінка (M3 §4) --- */

#play-card { min-height: 8rem; }
#play-card p { margin-bottom: var(--space-4); }
#play-card .card-text { font-size: clamp(1.3rem, 5vw, 1.85rem); font-weight: 600; line-height: 1.35; white-space: pre-wrap; }
#play-card img, #play-card video { width: 100%; max-height: 45vh; margin-bottom: var(--space-4); object-fit: contain; border-radius: var(--radius-control); background: var(--bg-canvas); }

.card-context {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Штраф позначено словом і піктограмою, а не лише коралом */
.card-context--penalty { border-color: var(--accent-coral); color: var(--accent-coral); }
.card-context--penalty::before { content: "▲"; margin-right: var(--space-2); font-size: 0.7em; }

.timer {
  --progress: 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: var(--space-4) auto 0;
  border-radius: 50%;
  background: conic-gradient(var(--brand-primary) calc(var(--progress) * 1turn), var(--border-subtle) 0);
}
.timer::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-surface); }
.timer[hidden] { display: none; }
.timer__text { position: relative; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer[data-state=running] { box-shadow: var(--glow-primary); }
.timer[data-state=done] { background: var(--accent-mint); }
.timer[data-state=done] .timer__text::after { content: " ✓"; color: var(--accent-mint); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.choice-button {
  flex-direction: column;
  min-height: 120px;
  padding: var(--space-4);
  background: var(--bg-surface-raised);
  border-width: 2px;
  border-radius: var(--radius-card);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
}
.choice-button::before { font-family: var(--font-body); font-size: 1.5rem; font-weight: 800; }
.choice-button--truth { border-color: var(--brand-primary); }
.choice-button--truth::before { content: "?"; color: var(--brand-primary-hover); }
.choice-button--dare { border-color: var(--accent-coral); }
.choice-button--dare::before { content: "!"; color: var(--accent-coral); }
.choice-button:hover { background: var(--bg-surface); transform: translateY(-2px); }
.choice-note { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: 0.875rem; text-align: center; }

.rating { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.rating:empty { display: none; }
.rating button {
  min-width: 56px;
  min-height: 56px;
  padding: 0 var(--space-4);
  background: transparent;
  border-color: var(--border-control);
  border-radius: var(--radius-pill);
  font-size: 1.25rem;
}
.rating button[aria-pressed=true] { background: var(--bg-surface-raised); border-color: var(--brand-primary); box-shadow: var(--glow-primary); }

#play-error { margin-top: var(--space-4); }

/* Форма гравців: два рівні за вагою вибори статі, сегментований перемикач */
.player-mode-note { color: var(--text-secondary); }
.segmented { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 120px;
  gap: var(--space-2);
  min-height: var(--tap-target);
  margin: 0;
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.segmented label:has(input:checked) { background: var(--bg-surface-raised); border-color: var(--brand-primary); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked)::before { content: "✓"; color: var(--brand-primary-hover); font-weight: 800; }
.field-label { display: block; margin: var(--space-3) 0 var(--space-1); font-size: 0.9375rem; font-weight: 600; }
#player-form .game-card + .game-card { margin-top: var(--space-4); }

/* --- Modal / bottom sheet (M3 §7): нативний <dialog> — фокус-пастка, inert-фон і Esc з коробки --- */

dialog {
  width: min(92vw, 440px);
  padding: var(--space-5);
  background: var(--bg-surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
dialog::backdrop { background: rgba(16, 12, 29, 0.78); }
dialog h2 { font-size: 1.5rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.dialog-actions > * { flex: 1 1 140px; }

@media (max-width: 767px) {
  dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); }
}

/* Порожню панель дій (наприклад, вибір Truth/Dare — кнопки всередині картки) не показуємо */
.bottom-action-bar:not(:has(button, a)) { display: none; }

/* Профіль: підключені акаунти списком, форма відключення — в один ряд */
.content-container.medium section ul { margin: 0; padding: 0; list-style: none; }
.content-container.medium section li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}
.content-container.medium section li form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); width: 100%; margin: 0; }
.content-container.medium section li form input { flex: 1 1 200px; width: auto; }
.content-container.medium section form > select { max-width: 320px; margin-bottom: var(--space-3); }

/* --- Порожні стани --- */

#unfinished-empty { padding: var(--space-5); border: 1px dashed var(--border-control); border-radius: var(--radius-card); text-align: center; }

/* --- Картки показників (акаунт гравця й back-office) --- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.stat { padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.stat dt { color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; }
.stat dd { margin: 0; }
.stat dd:first-of-type { margin-top: var(--space-1); font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 1.75rem); overflow-wrap: anywhere; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__note { margin-top: var(--space-1) !important; color: var(--text-secondary); font-size: 0.8125rem; }
.stat--wide { grid-column: 1 / -1; }

/* --- VIP і платежі (M3 §StatusBanner, Wireframes §8) --- */

.vip-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--accent-mint);
  border-radius: var(--radius-pill);
  color: var(--accent-mint);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.vip-badge::before { content: "★"; margin-right: var(--space-1); }
a.vip-badge:hover { background: var(--bg-surface-raised); }

/* Повідомлення про стан: колір лише підсилює текст і значок (M3: не покладатись на один колір) */
.status-banner { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-control); border-left-width: 4px; border-radius: var(--radius-control); }
.status-banner--ok { border-color: var(--accent-mint); }
.status-banner--ok::before { content: "✓ "; color: var(--accent-mint); font-weight: 800; }
.status-banner--error { border-color: var(--state-error); }
.status-banner--error::before { content: "! "; color: var(--state-error); font-weight: 800; }

.tariff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tariff { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.tariff h3 { margin: 0; }
.tariff p { margin: 0; }
.tariff__price { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; }
.tariff__duration { color: var(--text-secondary); }
.tariff form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
.tariff .btn-primary { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; text-decoration: none; }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target); font-weight: 600; }
/* Правила «.content-container.medium section li …» (списки акаунта) сильніші за .tariff: перебиваємо їх для карток тарифів */
.content-container.medium section .tariff { flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-subtle); }
.content-container.medium section .tariff form { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: auto; gap: var(--space-2); }
.content-container.medium .tariff form input[type=checkbox] { flex: none; width: 20px; }
.tariff .check { justify-content: center; }
.vip-cta { margin-top: var(--space-3); }
.payment-history { padding-left: var(--space-5); }
.payment-history li { margin-bottom: var(--space-2); }