/* ── CSS-variabler: mörkt läge (standard) ── */
:root {
    --bg:           #0f172a;
    --bg-card:      #1e293b;
    --bg-input:     #0f172a;
    --text:         #e2e8f0;
    --text-muted:   #94a3b8;
    --text-dim:     #64748b;
    --text-sub:     #cbd5e1;
    --border:       #334155;
    --accent:       #6366f1;
    --accent-hover: #4f46e5;
    --error-bg:     rgba(220,38,38,.15);
    --error-text:   #fca5a5;
    --hint-bg:      rgba(234,179,8,.1);
    --hint-border:  rgba(234,179,8,.3);
    --hint-text:    #fde68a;
    --label-color:  #6366f1;
}

[data-theme="light"] {
    --bg:           #f8fafc;
    --bg-card:      #ffffff;
    --bg-input:     #f1f5f9;
    --text:         #1e293b;
    --text-muted:   #475569;
    --text-dim:     #64748b;
    --text-sub:     #475569;
    --border:       #e2e8f0;
    --accent:       #6366f1;
    --accent-hover: #4f46e5;
    --error-bg:     #fee2e2;
    --error-text:   #b91c1c;
    --hint-bg:      #fefce8;
    --hint-border:  #fde68a;
    --hint-text:    #92400e;
    --label-color:  #6366f1;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    transition: background .2s, color .2s;
}

/* ── Lobby ── */
.lobby-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.lobby-box {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
    border: 1px solid var(--border);
}

.game-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--label-color);
    margin-bottom: 0.5rem;
}

.lobby-box h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.game-description {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.game-meta {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.lobby-form .form-group {
    margin-bottom: 1rem;
}

.lobby-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--text-sub);
}

.optional {
    color: var(--text-dim);
    font-weight: 400;
}

.lobby-form input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 1rem;
}

.lobby-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

.start-button {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.start-button:hover {
    background: var(--accent-hover);
}

.lobby-home-link {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    color: var(--text-muted, #94a3b8);
    font-size: .875rem;
    text-decoration: none;
    opacity: .8;
}
.lobby-home-link:hover {
    color: var(--text, #e2e8f0);
    opacity: 1;
}

.game-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ── Spelplan – header ── */
.play-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 52px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}

.game-title {
    font-weight: 700;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-counter {
    font-size: 0.85rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* ── Timer ── */
.game-timer {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 54px;
    text-align: center;
}

.game-timer.timer-warning {
    color: #f59e0b;
    animation: pulse 1s ease-in-out infinite;
}

.game-timer.timer-expired {
    color: #ef4444;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Tema-knapp ── */
.theme-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--border);
}

/* ── Förloppsindikator ── */
.progress-bar {
    height: 3px;
    background: var(--border);
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s ease;
}

/* ── Spelinnehåll ── */
.play-main {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    width: 100%;
}

.play-main h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text);
}

.story-text {
    background: var(--bg-card);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 1.25rem 1.5rem;
    color: var(--text-sub);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
}

.step-image {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.hint-box {
    background: var(--hint-bg);
    border: 1px solid var(--hint-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: var(--hint-text);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* ── Svarsfält ── */
.answer-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.answer-row {
    display: flex;
    gap: 0.5rem;
}

.answer-row input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}

.answer-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

.answer-row button {
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.answer-row button:hover:not(:disabled) {
    background: var(--accent-hover);
}

.answer-row button:disabled {
    background: var(--text-dim);
    cursor: not-allowed;
}

.answer-feedback {
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.answer-feedback.error {
    background: var(--error-bg);
    color: var(--error-text);
}

.answer-feedback.success {
    background: rgba(34,197,94,.15);
    color: #86efac;
}

.hint-link {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.hint-link a {
    color: var(--text-dim);
    text-decoration: none;
}

.hint-link a:hover {
    color: var(--text-muted);
    text-decoration: underline;
}

/* ── Avslutningssida ── */
.complete-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.complete-main {
    width: 100%;
    max-width: 440px;
}

.complete-box {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
    border: 1px solid var(--border);
}

.complete-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.complete-box h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.complete-game-title {
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.complete-player {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.complete-time {
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.complete-message {
    background: rgba(212,175,55,.08);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

.complete-image {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    margin: 1.25rem auto;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* ── Mordgåta – spelarhub ── */
.murder-hub {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.hub-section {
    margin-bottom: 2.5rem;
}

.hub-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.hub-game-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid var(--border);
    transition: border-color .15s;
}

.hub-game-card:hover {
    border-color: var(--accent);
}

.card-title {
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}

.card-desc {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.accuse-button {
    display: inline-block;
    padding: 0.85rem 2rem;
    background: #dc2626;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.accuse-button:hover {
    background: #b91c1c;
}

/* ── Mordgåta – plats/bevis ── */
.back-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.back-link:hover {
    color: var(--text-muted);
}

.clue-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.clue-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.clue-card.clue-found {
    border-color: var(--accent);
}

.clue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.clue-title {
    font-weight: 600;
    color: var(--text);
}

.clue-badge {
    font-size: 0.75rem;
    background: rgba(99,102,241,.15);
    color: var(--accent);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.clue-content {
    color: var(--text-sub);
    font-size: 0.95rem;
    line-height: 1.6;
}

.examine-btn {
    padding: 0.5rem 1.25rem;
    background: var(--border);
    color: var(--text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.examine-btn:hover {
    background: var(--text-dim);
    color: #fff;
}

/* ── Anklagelse ── */
.suspect-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.suspect-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    border: 1px solid var(--border);
}

.suspect-radio:hover {
    border-color: var(--accent);
}

.suspect-radio input[type="radio"] {
    accent-color: var(--accent);
    width: 1.1rem;
    height: 1.1rem;
}

/* ── Lightbox ── */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

#lightbox.lb-active {
    display: flex;
}

.lb-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

#lb-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    display: block;
    cursor: default;
}

#lb-close {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 2rem;
    height: 2rem;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Murder mystery – spelsidor ──────────────────────────────────── */
.section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #1e293b;
    padding-bottom: .5rem;
    margin: 2rem 0 1rem;
}

.card-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: .5rem;
}

.hub-accuse {
    text-align: center;
    padding: 2rem 0;
}

/* Misstänkt / vittne – profil */
.suspect-portrait {
    width: 100%;
    max-width: 200px;
    border-radius: 8px;
    display: block;
    margin: 0 0 1.5rem;
}

.suspect-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.suspect-meta-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1 1 160px;
}

.meta-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #64748b;
}

.meta-value {
    color: #cbd5e1;
    font-size: .95rem;
    line-height: 1.5;
}

/* Förhör – accordion */
.interview-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}

.interview-item {
    background: #1e293b;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #334155;
}

.interview-question {
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: #e2e8f0;
    list-style: none;
    user-select: none;
}

.interview-question::marker,
.interview-question::-webkit-details-marker { display: none; }

.interview-question::before {
    content: '▶ ';
    font-size: .7rem;
    color: #6366f1;
    margin-right: .4rem;
}

details[open] .interview-question::before { content: '▼ '; }

.interview-answer {
    padding: 0 1rem 1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}

.clue-unlocked-tag {
    padding: 0 1rem .75rem;
    font-size: .8rem;
    color: #6366f1;
    margin: 0;
}

/* Bevis upplåst-notis */
.unlock-notice {
    background: #1e293b;
    border-left: 3px solid #6366f1;
    border-radius: 0 8px 8px 0;
    padding: .85rem 1.1rem;
    margin: 1.25rem 0;
    color: #c7d2fe;
    font-size: .9rem;
}

.unlock-notice ul {
    margin: .4rem 0 0 1.2rem;
    padding: 0;
}

/* Tidslinje */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.timeline-list::before {
    content: '';
    position: absolute;
    left: .7rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: #334155;
}

.timeline-item {
    padding: .5rem .75rem .75rem 2.5rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .65rem;
    width: .75rem;
    height: .75rem;
    background: #6366f1;
    border-radius: 50%;
    border: 2px solid #0f172a;
}

.timeline-time {
    font-size: .75rem;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: .05em;
    display: block;
    margin-bottom: .15rem;
}

.timeline-title {
    color: #e2e8f0;
    font-size: .95rem;
}

.timeline-desc {
    color: #64748b;
    font-size: .85rem;
    margin: .3rem 0 0;
    line-height: 1.5;
}

/* Nyupplåst tidslinjehändelse */
@keyframes tl-pulse {
    0%   { background: rgba(99,102,241,.18); }
    60%  { background: rgba(99,102,241,.08); }
    100% { background: transparent; }
}

.timeline-item--new {
    animation: tl-pulse 2.4s ease-out forwards;
    border-radius: 6px;
}

.timeline-item--new::before {
    background: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(99,102,241,.3);
}

/* Lösningsreveal */
.solution-reveal {
    background: #1e293b;
    border-radius: 10px;
    padding: 1.5rem;
    color: #cbd5e1;
    line-height: 1.7;
}

.solution-reveal p + p { margin-top: .75rem; }

/* ── Hotspots ─────────────────────────────────────────────────────── */
.hs-image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.hs-image-wrap img.step-image {
    display: block;
    max-width: 100%;
}

.hs-spot {
    position: absolute;
    border: 2px solid rgba(99,102,241,.7);
    background: rgba(99,102,241,.15);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s;
    overflow: visible;
}

.hs-spot:hover {
    background: rgba(99,102,241,.35);
    border-color: #818cf8;
}

.hs-spot:hover .hs-tooltip { opacity: 1; transform: translateY(-4px); }

.hs-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #1e293b;
    color: #e2e8f0;
    font-size: .75rem;
    padding: .3rem .6rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s, transform .15s;
    z-index: 10;
    border: 1px solid #334155;
}

/* Hotspot modal – styrs via JS (style.display), använder .play-modal */
#hs-modal { display: none; }

.hs-modal-inner {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1.75rem 1.5rem 1.5rem;
    max-width: 500px;
    width: 100%;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    color: #cbd5e1;
    line-height: 1.6;
}

.hs-modal-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: #334155;
    border: none;
    color: #e2e8f0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hs-modal-title {
    margin: 0 0 .75rem;
    color: #e2e8f0;
    font-size: 1.1rem;
}

.hs-error  { color: #f87171; }
.hs-locked { color: #fbbf24; }

/* ── Inventarie ───────────────────────────────────────────────────── */
.inv-toggle-btn {
    background: none;
    border: 1px solid #334155;
    color: #e2e8f0;
    border-radius: 8px;
    padding: .3rem .65rem;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .3rem;
    position: relative;
}

#inv-badge {
    background: #6366f1;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .05rem .35rem;
    border-radius: 10px;
    min-width: 1.1rem;
    text-align: center;
    transition: transform .2s;
}

#inv-badge.inv-flash { transform: scale(1.5); }

.inventory-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background: #1e293b;
    border-left: 1px solid #334155;
    z-index: 400;
    transition: right .25s ease;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0,0,0,.4);
    display: block;
}

.inventory-panel.inv-open { right: 0; }

body.play-fullscreen .inventory-panel:not(.inv-open) { right: -320px; }

.inv-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #334155;
    padding-bottom: .5rem;
    margin: 0 0 1rem;
}

.inventory-list { display: flex; flex-direction: column; gap: .75rem; }

.inv-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #0f172a;
    border-radius: 8px;
    padding: .6rem .75rem;
    border: 1px solid #334155;
}

.inv-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.inv-item-name { color: #e2e8f0; font-size: .9rem; }

.inv-empty { color: #64748b; font-size: .85rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   HELSKÄRMSLÄGE – play-fullscreen
   ═══════════════════════════════════════════════════════════ */

body.play-fullscreen {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: #000;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ── HUD-bar ───────────────────────────────────────────────── */
.play-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    background: rgba(8, 4, 0, 0.88);
    border-bottom: 1px solid rgba(180, 120, 40, 0.25);
    gap: 1rem;
}

.hud-title {
    font-size: .85rem;
    font-weight: 600;
    color: #c9a060;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.hud-progress {
    font-size: .75rem;
    color: #8a6830;
    flex: 1;
    text-align: center;
    letter-spacing: .05em;
}

.hud-right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.hud-timer {
    font-size: .85rem;
    font-family: 'Courier New', monospace;
    color: #c9a060;
    min-width: 4.5rem;
    text-align: right;
}

.hud-timer::before { content: '⏱ '; font-size: .75rem; }

.hud-answer-btn {
    background: #7a1515;
    color: #f5edd8;
    border: 1px solid #9a2020;
    border-radius: 5px;
    padding: .3rem .85rem;
    font-size: .78rem;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .15s;
}
.hud-answer-btn:hover { background: #9a1a1a; }

.hud-inv-btn {
    background: none;
    border: 1px solid rgba(180,120,40,.4);
    color: #c9a060;
    border-radius: 5px;
    padding: .25rem .6rem;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .25rem;
}
.hud-inv-btn #inv-badge {
    background: #7a1515;
    color: #f5edd8;
    font-size: .6rem;
    font-weight: 700;
    padding: .05rem .3rem;
    border-radius: 8px;
    min-width: 1rem;
    text-align: center;
}

/* ── Scen / bakgrundsbild ──────────────────────────────────── */
.play-scene {
    position: fixed;
    inset: 44px 0 0 0;
    overflow: hidden;
}

.scene-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Hotspot-markörer (numrerade cirklar) ──────────────────── */
.hs-marker {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #7a1515;
    border: 2px solid #c9a060;
    color: #f5edd8;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    transition: transform .15s, background .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
    z-index: 10;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}

.hs-marker:hover,
.hs-marker:focus {
    background: #9a1a1a;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 16px rgba(0,0,0,.7);
    outline: none;
}

.hs-marker-label {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: .65rem;
    color: #f5edd8;
    white-space: nowrap;
    background: rgba(8,4,0,.8);
    padding: .15rem .4rem;
    border-radius: 3px;
    letter-spacing: .04em;
    pointer-events: none;
}

/* Puls-animation för nya hotspots */
@keyframes hs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,160,96,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(201,160,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(201,160,96,0); }
}
.hs-marker.hs-new { animation: hs-pulse 1.8s ease-out 3; }

/* ── Modaler (intro + svar + hotspot) ──────────────────────── */
.play-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2px);
}

.play-modal[style*="display:none"],
.play-modal[style*="display: none"] { display: none !important; }

.play-modal-inner {
    width: 100%;
    max-width: 520px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(180,120,40,.3);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Modal header – mörk */
.modal-hdr {
    background: #120a02;
    border-bottom: 1px solid #3a2808;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-game-name {
    display: block;
    font-size: .7rem;
    color: #8a6830;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modal-step-label {
    display: block;
    font-size: .65rem;
    color: #5a4020;
    letter-spacing: .06em;
}

.modal-x {
    background: none;
    border: none;
    color: #8a6830;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 .2rem;
    transition: color .15s;
}
.modal-x:hover { color: #c9a060; }

/* Modal kropp – pergament */
.modal-body {
    background: #f0e6cc;
    padding: 1.5rem 1.75rem 1.75rem;
    overflow-y: auto;
    color: #2a1a08;
    line-height: 1.7;
}

.modal-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a0e04;
    margin: 0 0 1rem;
    font-family: 'Georgia', serif;
    border-bottom: 1px solid #c8a86040;
    padding-bottom: .6rem;
}

.modal-story {
    font-size: .95rem;
    color: #3a2810;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.modal-audio {
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: 4px;
}

.modal-continue {
    display: block;
    width: 100%;
    background: #7a1515;
    color: #f5edd8;
    border: none;
    border-radius: 4px;
    padding: .7rem 1rem;
    font-size: .9rem;
    font-family: 'Georgia', serif;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s;
    text-align: center;
}
.modal-continue:hover { background: #9a1a1a; }

/* Svarsfält i modal */
.modal-answer-form .answer-row {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.modal-answer-form input[type=text],
.modal-answer-form input[type=number] {
    flex: 1;
    background: #fff8ee;
    border: 1px solid #c8a060;
    border-radius: 4px;
    padding: .6rem .85rem;
    font-size: .95rem;
    font-family: inherit;
    color: #1a0e04;
    outline: none;
    transition: border-color .15s;
}
.modal-answer-form input:focus { border-color: #7a1515; }

.modal-submit {
    background: #7a1515;
    color: #f5edd8;
    border: none;
    border-radius: 4px;
    padding: .6rem 1.1rem;
    font-size: .9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.modal-submit:hover { background: #9a1a1a; }
.modal-submit:disabled { background: #6a5040; cursor: not-allowed; }

.modal-hint { background: #e8d8b0; border-left: 3px solid #7a6030; margin-top: .75rem; }
.modal-hint-link {
    background: none;
    border: none;
    color: #7a4010;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
}

/* Feedback-text i svarmodal */
.modal-body .answer-feedback.error   { color: #8a1515; font-size: .88rem; margin-bottom: .5rem; }
.modal-body .answer-feedback.success { color: #2a6020; font-size: .88rem; margin-bottom: .5rem; }

/* Hotspot-modal (generisk – återanvänds av hotspots.js) */
#hs-modal .modal-body h3 { margin: 0 0 .75rem; font-size: 1.05rem; color: #1a0e04; }
#hs-modal .modal-body p  { margin: 0 0 .5rem; color: #3a2810; }
#hs-modal .modal-body img { max-width: 100%; border-radius: 4px; }
#hs-modal .modal-body audio { width: 100%; }

/* ── Timer i helskärmsläge (override) ─────────────────────── */
body.play-fullscreen .game-timer { display: none; } /* göm JS-injicerad timer – vi har hud-timer */
body.play-fullscreen .theme-toggle-btn { display: none; }

/* ── Hotspot marker-tillstånd ──────────────────────────────── */

/* Låst (🔒) */
.hs-marker.hs-locked {
    background: rgba(40,30,10,.75);
    border-color: #5a4020;
    color: #8a6830;
    cursor: default;
    font-size: 1rem;
}
.hs-marker.hs-locked:hover,
.hs-marker.hs-locked:focus {
    transform: translate(-50%, -50%);
    background: rgba(40,30,10,.75);
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Tillgänglig (numrerad röd cirkel) */
.hs-marker.hs-available {
    background: #7a1515;
    border-color: #c9a060;
    color: #f5edd8;
    cursor: pointer;
}

/* Klar (grön bock) */
.hs-marker.hs-done {
    background: #1a6030;
    border-color: #4ade80;
    color: #bbf7d0;
    cursor: default;
    font-size: 1rem;
}
.hs-marker.hs-done:hover,
.hs-marker.hs-done:focus {
    transform: translate(-50%, -50%);
    background: #1a6030;
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* ── Completion overlay ─────────────────────────────────────── */
.hs-completion-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.hs-completion-inner {
    background: #f0e6cc;
    border-radius: 8px;
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(180,120,40,.4);
    color: #1a0e04;
}

.hs-completion-star {
    font-size: 3rem;
    color: #c9a060;
    margin-bottom: .75rem;
    text-shadow: 0 0 20px rgba(201,160,96,.8);
}

.hs-completion-title {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a0e04;
    margin: 0 0 .4rem;
}

.hs-completion-sub {
    color: #5a4020;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.hs-completion-btn {
    margin-top: 0;
}

/* ── Quiz-svarsfält i hotspot-modal ────────────────────────── */
#hs-modal .modal-answer-form {
    margin-top: .75rem;
}

#hs-modal .answer-feedback {
    margin-bottom: .5rem;
}

#hs-modal .answer-feedback.error   { color: #8a1515; font-size: .88rem; }
#hs-modal .answer-feedback.success { color: #1a6020; font-size: .88rem; }

/* ── Flervalsfråga ─────────────────────────────────────────── */
.mc-options {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}

.mc-option-btn {
    background: #f5f0e8;
    border: 2px solid #c9a060;
    border-radius: 6px;
    padding: .6rem 1rem;
    font-size: .95rem;
    color: #3a2010;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
}

.mc-option-btn:hover:not(:disabled) {
    background: #ede0c8;
    border-color: #8b4513;
}

.mc-option-btn.mc-correct {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.mc-option-btn.mc-wrong {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* ── Samla föremål ─────────────────────────────────────────── */
.collect-item-card {
    background: #e8dfc8;
    border: 1px solid #c8a060;
    border-radius: 6px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.collect-item-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a0e04;
    margin: 0 0 .25rem;
    font-family: 'Georgia', serif;
}

.collect-item-desc {
    font-size: .85rem;
    color: #5a4020;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

.modal-continue.collect-btn {
    background: #2a6030;
    border-color: #2a6030;
}
.modal-continue.collect-btn:hover { background: #1a5020; }

/* ── Ledtråd i modal ───────────────────────────────────────── */
.modal-hint-btn {
    background: none;
    border: 1px solid #c8a060;
    color: #7a6030;
    font-size: .8rem;
    font-family: 'Georgia', serif;
    border-radius: 4px;
    padding: .35rem .75rem;
    cursor: pointer;
    margin-top: .65rem;
    transition: background .15s, color .15s;
}
.modal-hint-btn:hover {
    background: #e8d8b0;
    color: #3a2010;
}

.modal-hint-box {
    background: #e8d8a8;
    border-left: 3px solid #c8a060;
    border-radius: 0 4px 4px 0;
    padding: .6rem .85rem;
    margin-bottom: .75rem;
    font-size: .88rem;
    color: #3a2010;
    line-height: 1.5;
}
.modal-hint-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7a6030;
    margin-bottom: .2rem;
}

/* ── Timeruppdrag ──────────────────────────────────────────── */
.timer-block {
    text-align: center;
    padding: 1.5rem 0 .5rem;
}

.timer-display {
    font-size: 3rem;
    font-weight: 700;
    font-family: monospace;
    color: #5a3a18;
    letter-spacing: .1em;
}

.timer-hint {
    font-size: .8rem;
    color: #8a6830;
    margin-top: .5rem;
}

/* ── Bevistavla (murder_play.php) ─────────────────────────── */
.evidence-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.evidence-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.evidence-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.evidence-card-body {
    padding: .75rem;
}

.evidence-card-name {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .3rem;
    color: var(--text);
}

.evidence-card-desc {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.evidence-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 .35em;
    margin-left: .5rem;
    vertical-align: middle;
}

/* ── collect_evidence-block i modal ───────────────────────── */
.collect-evidence-card {
    background: #f5f0e8;
    border: 1px solid #c9a060;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.collect-evidence-card .collect-item-name { color: #3a1a04; }
.collect-evidence-card .collect-item-desc { color: #6b4a1a; }

.modal-continue.evidence-btn {
    background: #3b1f7a;
    color: #e0d0ff;
    border: 1px solid #6b4fb0;
}
.modal-continue.evidence-btn:hover { background: #2a1060; }

/* ── Evidence toast (bekräftelse) ─────────────────────────── */
.evidence-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: #1e1040;
    color: #d0b8ff;
    border: 1px solid #6b4fb0;
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    z-index: 9000;
    white-space: nowrap;
    pointer-events: none;
}
.evidence-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Hub-kort: besökt (murder_play.php) ───────────────────── */
.hub-game-card.hub-card-visited {
    border-color: #22543d;
    background: #1a3a2e;
}

.hub-card-done {
    display: inline-block;
    margin-top: .5rem;
    font-size: .75rem;
    color: #68d391;
    font-weight: 600;
}

.hub-empty {
    color: var(--text-muted);
    font-size: .9rem;
    font-style: italic;
    margin-top: .5rem;
}

/* ── HUD-länk tillbaka (murder play.php) ──────────────────── */
.hud-back-link {
    color: var(--text-sub);
    text-decoration: none;
    font-size: .82rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .2rem .6rem;
    transition: border-color .15s, color .15s;
}
.hud-back-link:hover {
    color: var(--text);
    border-color: var(--accent);
}

/* ── Kombinerat block-läge ────────────────────────────────── */
.combined-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.combined-block {
    padding: .25rem 0;
}
.block-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.12);
    margin: .75rem 0;
}

/* ── Låst person-kort (ej träffad) ──────────────────────── */
.hub-person-locked {
    opacity: .4;
    cursor: default;
    border-style: dashed;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.card-lock-icon {
    font-size: 1.5rem;
    margin-bottom: .4rem;
    display: block;
}

/* ── Scen/hotspot-vy: naturlig bildaspekt i stående läge ─── */
/*    Fixad layout fyller skärmhöjden och klipper bort toppen  */
/*    av liggande bilder på smala portait-skärmar.             */
/*    Lösning: byt till relativ positionering med height:auto  */
/*    så att bilden visas i sin naturliga proportion.          */
/*    JS:en lyssnar redan på 'load' och 'resize' och räknar   */
/*    om marker-positioner mot scene.offsetHeight automatiskt. */
@media (max-width: 640px) and (orientation: portrait) {
    body.play-fullscreen {
        overflow-y: auto;
        height: auto;
        width: 100%;
    }
    .play-scene {
        position: relative;
        inset: auto;
        margin-top: 44px; /* höjden på .play-hud */
        overflow: visible;
    }
    .scene-bg {
        height: auto; /* naturlig aspekt — object-fit:cover har ingen effekt */
    }
}

/* ── Mobilanpassning ─────────────────────────────────────── */
@media (max-width: 640px) {
    .play-main        { padding: 1.5rem 1rem; }
    .murder-hub       { padding: 1rem; }
    .hub-section      { margin-bottom: 1.5rem; }
    .card-grid        { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
    .evidence-board   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .play-modal-inner { max-width: 100%; border-radius: 12px 12px 0 0; }
    .play-modal       { align-items: flex-end; padding: 0; }

    /* Prevent iOS auto-zoom on inputs */
    .modal-answer-form input[type=text],
    .modal-answer-form input[type=number],
    .detective-notes,
    input, select, textarea { font-size: 16px !important; }

    /* Quiz answer row: stack vertically on narrow screens */
    .modal-answer-form .answer-row { flex-direction: column; }
    .modal-answer-form .answer-row input  { width: 100%; }
    .modal-answer-form .answer-row button { width: 100%; }

    /* Multiple choice: full-width buttons */
    .mc-options     { flex-direction: column; }
    .mc-option-btn  { width: 100%; text-align: left; min-height: 44px; }

    /* Interview questions: adequate touch target */
    .interview-question { padding: .875rem 1rem; min-height: 44px; }

    /* Map markers: larger touch target on touch screens */
    .gm-marker { width: 32px; height: 32px; }

    /* Hub action buttons: full-width */
    .hub-accuse { padding: 1rem 0 1.5rem; }
    .accuse-button, .hub-investigate-btn { display: block; width: 100%; box-sizing: border-box; }

    /* story-text: tighter padding */
    .story-text { padding: 1rem 1.25rem; }

    /* suspect-portrait: slightly smaller on mobile */
    .suspect-portrait { max-width: 140px; }
}

@media (max-width: 400px) {
    .play-main        { padding: 1rem .75rem; }
    .card-grid        { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .evidence-board   { grid-template-columns: 1fr; }
    .play-modal-inner { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .game-header      { font-size: .85rem; padding: .6rem 1rem; }
    .modal-hdr        { padding: .5rem .75rem; }
    .modal-hdr-title  { font-size: .95rem; }
    .modal-body       { padding: 1rem .75rem; }

    /* Single-column hub cards on very small screens */
    .card-grid        { grid-template-columns: 1fr; }
    .suspect-portrait { max-width: 120px; }
}

/* ── Detektivanteckningar (anklagelsesidan) ── */
.detective-notes {
    background: #1a1a12;
    color: #d4c9a0;
    border: 1px solid #4a4030;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: .9rem;
    line-height: 1.7;
    padding: .75rem 1rem;
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
}
.detective-notes::placeholder {
    color: #6b6040;
}

/* Visar spelarens anteckningar på resultatsidan */
.notes-reveal {
    background: #1a1a12;
    border-left: 3px solid #c9a060;
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
}
.notes-reveal__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c9a060;
    margin: 0 0 .5rem;
}
.notes-reveal__text {
    color: #d4c9a0;
    font-family: 'Courier New', Courier, monospace;
    font-size: .9rem;
    line-height: 1.7;
    margin: 0;
    white-space: pre-wrap;
}

/* ── Min utredning – hub-knapp ───────────────────────────── */
.hub-investigate-btn {
    display: block;
    text-align: center;
    padding: .75rem 1.5rem;
    margin-bottom: .75rem;
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.hub-investigate-btn:hover { background: #273549; color: #cbd5e1; }

/* ── Min utredning – tab-bar ─────────────────────────────── */
.inv-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
}
.inv-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    font-size: .875rem;
    font-weight: 600;
    padding: .75rem .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: color .15s, border-color .15s;
}
.inv-tab:hover { color: #94a3b8; }
.inv-tab.active { color: #c9a060; border-bottom-color: #c9a060; }
.inv-tab-badge {
    background: #1e293b;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 10px;
    padding: .1rem .4rem;
    line-height: 1.4;
}
.inv-tab.active .inv-tab-badge { background: #2d2010; color: #c9a060; }

/* ── Min utredning – paneler ─────────────────────────────── */
.inv-panel { padding: 1rem; }

/* ── Min utredning – kort-grid ───────────────────────────── */
.inv-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
}
@media (min-width: 600px) {
    .inv-cards { grid-template-columns: 1fr 1fr; }
}

/* ── Min utredning – kort ────────────────────────────────── */
.inv-card {
    background: #131e2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s;
}
.inv-card--highlight {
    border-color: #c9a060;
    box-shadow: 0 0 0 2px rgba(201,160,96,.25);
}
.inv-card__img img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}
.inv-card__body-wrap {
    padding: .875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.inv-card__title {
    font-size: .9rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.inv-card__body {
    font-size: .8rem;
    color: #94a3b8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.inv-card__chips-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #475569;
    margin: .25rem 0 0;
}
.inv-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .1rem;
}
.person-chip {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 20px;
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    cursor: default;
    white-space: nowrap;
}
.person-chip.connected {
    background: #2d2010;
    color: #c9a060;
    border-color: #6b4c18;
}
button.person-chip { cursor: pointer; }
button.person-chip:hover { background: #3a2c10; }

.connect-btn {
    align-self: flex-start;
    margin-top: auto;
    padding: .35rem .75rem;
    background: none;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.connect-btn:hover { border-color: #c9a060; color: #c9a060; }

/* ── Roll-badge ──────────────────────────────────────────── */
.inv-role-badge {
    font-size: .68rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.inv-role--suspect           { background: #3b1e1e; color: #f87171; }
.inv-role--victim            { background: #1e1e3b; color: #818cf8; }
.inv-role--witness           { background: #1e2e1e; color: #4ade80; }
.inv-role--person_of_interest{ background: #1e2530; color: #94a3b8; }

/* ── Connect bottom-sheet ────────────────────────────────── */
.connect-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
}
.connect-sheet[hidden] { display: none; }
.connect-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
}
.connect-sheet__panel {
    position: relative;
    width: 100%;
    max-height: 70vh;
    background: #131e2e;
    border-top: 1px solid #334155;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    outline: none;
}
.connect-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid #1e293b;
    flex-shrink: 0;
}
.connect-sheet__title {
    font-size: .9rem;
    font-weight: 700;
    color: #e2e8f0;
}
.connect-sheet__close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: .25rem .5rem;
    line-height: 1;
}
.connect-sheet__close:hover { color: #e2e8f0; }
.connect-sheet__list {
    list-style: none;
    margin: 0;
    padding: .5rem 0 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.connect-sheet__person {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid #1a2433;
}
.connect-sheet__person:hover { background: #1e293b; }
.connect-sheet__person.active { background: #2d2010; }
.connect-sheet__person-name { font-size: .9rem; font-weight: 600; color: #e2e8f0; flex: 1; }
.connect-sheet__person-role { font-size: .75rem; color: #64748b; }
.connect-sheet__check {
    color: #c9a060;
    font-size: 1rem;
    opacity: 0;
    transition: opacity .15s;
    width: 1.2rem;
    text-align: center;
}
.connect-sheet__person.active .connect-sheet__check { opacity: 1; }