/* «Расследование» — online game layout. Loaded after dt-theme.css (Game Theme tokens). */
.dt-online *, .dt-online *::before, .dt-online *::after { box-sizing: border-box; }
html:has(body.dt-online) { background: #17363c; }
body.dt-online { min-height: 100dvh; background-attachment: fixed; overscroll-behavior: none; }
.dt-online .app { max-width: 560px; }
.dt-online { --particle-rgb: 247, 238, 220; }

/* Top bar: back, title, room code. */

.dt-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-amber); }
.dt-section { margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.dt-empty { margin: 0 0 8px; font-size: 15px; color: var(--text-secondary); }

.dt-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--dt-amber); color: var(--dt-ink); font-size: 14px; font-weight: 800; }
.dt-avatar.has-photo { background: var(--dt-paper); }
.dt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-avatar--sm { width: 24px; height: 24px; font-size: 11px; }

/* Story pictures: the image, or a quiet paper-and-lamp placeholder while the art is missing. */
.dt-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dt-img.missing { visibility: hidden; }
.dt-art { position: relative; overflow: hidden; background: radial-gradient(90% 90% at 30% 20%, #2c5961 0%, #1c4047 60%, #132e33 100%); }
.dt-art::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34%; max-width: 64px; aspect-ratio: 1; opacity: .35; background: var(--dt-paper);
  -webkit-mask: var(--rp-icon-search) center / contain no-repeat; mask: var(--rp-icon-search) center / contain no-repeat; pointer-events: none; }
.dt-art:has(.dt-img:not(.missing))::after { display: none; }

/* ---------- Lobby ---------- */
#lobby-screen { padding-left: 16px; padding-right: 16px; }
.dt-lobby { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.dt-cover { position: relative; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; }
.dt-cover-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; background: linear-gradient(180deg, rgba(16, 40, 45, 0) 0%, rgba(16, 40, 45, .92) 70%); }
.dt-cover-copy strong { display: block; font-size: 26px; line-height: 1.1; color: var(--text-primary); }
.dt-cover-meta { display: block; margin-top: 4px; font-size: 14px; color: var(--text-secondary); }
.dt-free-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text-secondary); }
.dt-free-note .rp-icon { flex-shrink: 0; color: var(--dt-amber); }
.dt-players { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; border-radius: 18px; background: var(--dt-paper); overflow-y: auto; min-height: 0; }
.dt-player { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 12px; color: var(--dt-ink); }
.dt-player.self { background: rgba(27, 22, 18, .07); }
.dt-player.offline { opacity: .45; }
.dt-player-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-badge { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--dt-ink); color: var(--dt-paper); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.dt-lobby-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.dt-status { margin: 0; text-align: center; color: var(--text-primary); font-size: 15px; }

/* ---------- Game ---------- */
#game-screen { position: relative; padding: calc(64px + env(safe-area-inset-top, 0px)) 0 0; }
.dt-chapter-bar { padding: 0 16px 8px; }
.dt-chapter-bar strong { display: block; font-size: 22px; line-height: 1.15; color: var(--text-primary); }
.dt-tabs { display: flex; gap: 4px; margin: 0 16px; padding: 4px; border-radius: 999px; background: rgba(247, 238, 220, .1); overflow-x: auto; scrollbar-width: none; }
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-tab { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dt-tab[aria-selected="true"] { background: var(--dt-paper); color: var(--dt-ink); }
.dt-tab .dt-tab-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--dt-amber); vertical-align: 1px; }
.dt-tab:focus-visible { outline: 2px solid var(--dt-amber); outline-offset: 2px; }
.dt-views { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.dt-view { display: none; }
.dt-view.active { display: block; animation: dt-fade .2s ease both; }
@keyframes dt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Clue cards: paper with a picture on the left. */
.dt-clues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-clue { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: var(--dt-paper); color: var(--dt-ink); }
.dt-clue.fresh { animation: dt-land .35s ease both; }
@keyframes dt-land { from { opacity: 0; transform: translateY(-10px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.dt-clue-art { flex-shrink: 0; width: 76px; height: 76px; border-radius: 12px; }
.dt-clue-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-clue-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; }
.dt-clue-text { margin: 0; font-size: 15px; line-height: 1.4; color: #3a2f24; }
.dt-clue-by { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--dt-ink-muted); }
.dt-clue-share { align-self: flex-start; margin-top: 4px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--dt-ink); color: var(--dt-paper); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.dt-clue-share:disabled { opacity: .5; }
.dt-clue.text-only .dt-clue-art { display: none; }

/* Suspects */
.dt-suspects { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dt-suspect { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(247, 238, 220, .08); border: 1px solid var(--dt-line); }
.dt-suspect-art { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; }
.dt-suspect-body { min-width: 0; }
.dt-suspect-name { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-primary); }
.dt-suspect-role { margin: 2px 0 4px; font-size: 13px; font-weight: 700; color: var(--dt-amber); }
.dt-suspect-bio { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-secondary); }

/* Case file */
.dt-scene { aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 18px; }
.dt-intro { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-primary); }
.dt-intro p { margin: 0 0 12px; }

/* Question and answer */
.dt-question { padding: 16px; border-radius: 20px; background: var(--dt-paper); color: var(--dt-ink); }
.dt-question-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-ink-muted); }
.dt-question-kicker.final { color: var(--rp-wrong); }
.dt-question-prompt { margin: 6px 0 12px; font-size: 21px; line-height: 1.2; }
.dt-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dt-option { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 2px solid rgba(27, 22, 18, .2); border-radius: 14px; background: #fffaf0; color: var(--dt-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.dt-option:active { transform: scale(.985); }
.dt-option[aria-pressed="true"] { border-color: var(--dt-ink); background: var(--dt-amber); }
.dt-option:disabled { cursor: default; transform: none; }
.dt-option-text { flex: 1; min-width: 0; }
.dt-option-voters { display: flex; flex-shrink: 0; }
.dt-option-voters .dt-avatar { margin-left: -6px; border: 2px solid #fffaf0; }
.dt-option.correct { border-color: var(--rp-correct); background: var(--rp-correct); color: var(--rp-correct-ink); }
.dt-option.wrong { border-color: var(--rp-wrong); background: rgba(163, 39, 31, .1); }
.dt-option.correct .rp-mark { color: var(--rp-correct-ink); }
.dt-option.wrong .rp-mark { color: var(--rp-wrong); }
.dt-votes-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--dt-ink-muted); }
.dt-votes-line .dt-avatar { opacity: .35; }
.dt-votes-line .dt-avatar.voted { opacity: 1; }
.dt-verdict { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 17px; font-weight: 800; }
.dt-verdict.ok { color: var(--rp-correct); }
.dt-verdict.bad { color: var(--rp-wrong); }
.dt-explain { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: #3a2f24; }
.dt-score-line { margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); text-align: center; }

/* Bottom dock: the host's next step, everyone else's hint. */
.dt-dock { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--dt-line); background: rgba(16, 40, 45, .92); }
.dt-dock-note { margin: 0; text-align: center; font-size: 14px; color: var(--text-secondary); }
.dt-dock-note:empty { display: none; }

/* ---------- Locked (free part over) ---------- */
#locked-screen, #result-screen { padding-left: 16px; padding-right: 16px; }
.dt-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 12px; text-align: center; }
.dt-lock-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--dt-amber); color: var(--dt-ink); font-size: 34px; animation: dt-lock 2.4s ease-in-out infinite; }
@keyframes dt-lock { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 84% { transform: rotate(8deg); } 92% { transform: rotate(-4deg); } }
.dt-locked-title { margin: 0; font-size: 26px; color: var(--text-primary); }
.dt-locked-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); max-width: 34ch; }
.dt-locked-score { margin: 0; font-size: 15px; font-weight: 700; color: var(--dt-amber); }
.dt-locked-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }

/* ---------- Result ---------- */
.dt-result { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dt-stars { display: flex; justify-content: center; gap: 6px; margin-top: 8px; font-size: 32px; color: rgba(247, 238, 220, .25); }
.dt-stars .on { color: var(--dt-amber); }
.dt-result .result-title { margin: 0; font-size: 26px; text-align: center; color: var(--text-primary); }
.dt-result-text { margin: 0; text-align: center; font-size: 16px; color: var(--text-secondary); }
.dt-epilogue { padding: 16px; border-radius: 18px; background: var(--dt-paper); color: var(--dt-ink); font-size: 16px; line-height: 1.5; }
.dt-epilogue p { margin: 0 0 10px; }
.dt-epilogue p:last-child { margin-bottom: 0; }
.dt-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-board-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 12px; background: rgba(247, 238, 220, .08); color: var(--text-primary); }
.dt-board-value { flex-shrink: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dt-amber); }
.dt-result-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .dt-view.active, .dt-clue.fresh, .dt-lock-badge { animation: none; }
}