/* ── Login ──────────────────────────────────────────────── */
#login-screen {
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}
.login-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.login-card h1 { font-size: 1.5rem; text-align: center; color: var(--clr-accent); }
.login-sub { text-align: center; color: var(--clr-muted); font-size: .9rem; margin-top: -.75rem; }
#login-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── DM Panel layout ────────────────────────────────────── */
#dm-panel {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.dm-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
}
.dm-title { font-size: 1.05rem; font-weight: 700; flex: 1; }

.dm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
}
@media (max-width: 700px) {
    .dm-grid { grid-template-columns: 1fr; }
}

/* ── Panels ─────────────────────────────────────────────── */
.panel {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.panel-full {
    margin: 0 1rem 1rem;
}
.panel-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--clr-muted);
    margin-bottom: -.25rem;
}
.panel-sub { font-size: .8rem; color: var(--clr-muted); }
.muted { color: var(--clr-muted); font-size: .9rem; }

/* ── Session panel ──────────────────────────────────────── */
.session-campaign-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-accent);
    margin: 0 0 .5rem;
}

.dm-seat-control {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
}
.btn-seats {
    padding: .65rem 1.25rem;
    font-size: .95rem;
    background: #4a7c4e;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .2s, opacity .2s;
    white-space: nowrap;
}
.btn-seats:hover:not(:disabled) { opacity: .85; }
.btn-seats:disabled { background: var(--clr-border); color: var(--clr-muted); cursor: default; }
.btn-seats.active { background: #c0392b; }
.seats-status-label { font-size: .8rem; color: var(--clr-muted); font-style: italic; }

.control-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.control-row > * { flex: 1; min-width: 130px; }

.btn-toggle {
    background: #4a7c4e;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .65rem 1rem;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s;
}
.btn-toggle:hover   { background: #3d6841; }
.btn-toggle.active  { background: #c0392b; }

.btn-danger {
    background: transparent;
    color: var(--clr-danger);
    border: 1px solid var(--clr-danger);
    border-radius: var(--radius);
    padding: .65rem 1rem;
    font-size: .9rem;
    cursor: pointer;
}
.btn-danger:hover { background: rgba(233,69,96,.1); }

.btn-block { width: 100%; margin-top: .25rem; }

/* ── Map panel ──────────────────────────────────────────── */
.upload-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .95rem;
    color: var(--clr-muted);
    transition: border-color .15s, color .15s;
}
.upload-area:hover { border-color: var(--clr-accent); color: var(--clr-text); }

.maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .5rem;
    max-height: 260px;
    overflow-y: auto;
}
.map-thumb-wrap {
    position: relative;
}
.map-thumb {
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s, opacity .15s;
    width: 100%;
    display: block;
}
.map-thumb-wrap:hover .map-thumb { border-color: var(--clr-accent); }
.map-thumb.active                { border-color: var(--clr-success); }

.map-delete-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: .6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s;
    padding: 0;
}
.map-thumb-wrap:hover .map-delete-btn { opacity: 1; }
.map-delete-btn:hover { background: var(--clr-danger); border-color: var(--clr-danger); }

#active-map-display { display: flex; flex-direction: column; gap: .4rem; }
#active-map-thumb {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--clr-border);
}

/* ── Players overview ───────────────────────────────────── */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

.player-card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.player-card.empty { opacity: .4; }

.pc-header { display: flex; align-items: center; gap: .6rem; }
.pc-seat-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
    flex-shrink: 0;
}
.player-card.empty .pc-seat-badge { background: var(--clr-border); }
.pc-name { font-weight: 600; font-size: .95rem; }
.pc-sub  { font-size: .75rem; color: var(--clr-muted); }

.pc-hp-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pc-hp-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
}
.pc-hp-bar {
    height: 100%;
    background: var(--clr-success);
    border-radius: 4px;
    transition: width .4s, background .4s;
}
.pc-hp-bar.low    { background: #ff9800; }
.pc-hp-bar.danger { background: var(--clr-danger); }
.pc-hp-text { font-size: .8rem; color: var(--clr-muted); white-space: nowrap; }

.pc-mini-row { display: flex; gap: .75rem; }
.pc-mini { display: flex; gap: .25rem; align-items: baseline; }
.pc-mini-val { font-size: .85rem; font-weight: 700; }
.pc-mini-lbl { font-size: .65rem; color: var(--clr-muted); text-transform: uppercase; }

.pc-weapon-row {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding-top: .1rem;
    border-top: 1px solid var(--clr-border);
}
.pc-weapon-icon { display: flex; align-items: center; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.pc-weapon-icon .wicon { width: 1.1rem; height: 1.1rem; background-color: var(--clr-accent); }
.pc-weapon-val  { font-size: .85rem; font-weight: 700; }
.pc-weapon-lbl  { font-size: .65rem; color: var(--clr-muted); text-transform: uppercase; }
.pc-svdc-spacer { flex: 1; }

.pc-release-btn {
    align-self: flex-end;
    font-size: .7rem;
    background: transparent;
    border: 1px solid var(--clr-border);
    color: var(--clr-muted);
    border-radius: 4px;
    padding: .2rem .5rem;
    cursor: pointer;
}


.pc-release-btn:hover { color: var(--clr-danger); border-color: var(--clr-danger); }