/**********************************************
*** GENERAL
**********************************************/

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

body {
    color: #e6e6e6;
    background: #15171c;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    padding: 0 0 60px;
}

h1, h2 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/**********************************************
*** TOPBAR
**********************************************/

.topbar {
    background: linear-gradient(135deg, #3a1d1d, #1b2230);
    padding: 28px 24px;
    border-bottom: 2px solid #c0392b;
    text-align: center;
}

.topbar h1 { font-size: 30px; color: #fff; }
.tagline { margin-top: 6px; color: #9aa3b2; font-weight: 300; }

section { max-width: 880px; margin: 24px auto; padding: 0 18px; }

/**********************************************
*** PICKER
**********************************************/

.picker {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}

.picker__row { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; }
.picker__row:last-child { margin-bottom: 0; }
.picker__row--actions { justify-content: space-between; }

.picker__search, .picker__cr, .picker__select {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
}

.picker__search { flex: 1; }
.picker__cr { width: 150px; }
.picker__row--filters .picker__cr { flex: 1; width: auto; }
.picker__select { width: 100%; }
.picker__select option { padding: 4px 2px; }

.picker__count { color: #9aa3b2; font-size: 13px; }
.picker__buttons { display: flex; gap: 10px; }

/**********************************************
*** BUTTONS
**********************************************/

button {
    cursor: pointer;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 16px;
    color: #fff;
    transition: transform .05s, box-shadow .15s, background .15s;
}
button:hover { box-shadow: 0 4px 14px rgba(0,0,0,.4); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn-add    { background: #c0392b; }
.btn-add:hover { background: #d6442f; }
.btn-random { background: #3b4150; }
.btn-clear  { background: #3b4150; padding: 6px 12px; font-size: 13px; }

/**********************************************
*** PLAYERS
**********************************************/

.players, .tracker {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}
.players__title, .tracker__title { font-size: 16px; color: #4aa3df; margin-bottom: 12px; }

.players__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.players__name {
    flex: 1;
    min-width: 160px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
}
.players__init {
    width: 90px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
}
.btn-add-player { background: #2980b9; }
.btn-add-player:hover { background: #3498db; }

/**********************************************
*** TURN ORDER / INITIATIVE
**********************************************/

.tracker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.tracker__head .tracker__title { margin-bottom: 0; }
.tracker__buttons { display: flex; gap: 10px; }
.btn-init { background: #e1b12c; color: #1b1b1b; }
.btn-init:hover { background: #f1c40f; }
.btn-next { background: #3b4150; }

.turn__hint { color: #6c7589; font-style: italic; }

.turn__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #2c3140;
    border-radius: 6px;
    margin-bottom: 6px;
    background: #12141a;
}
.turn__row--active {
    border-color: #e1b12c;
    background: #2b2616;
    box-shadow: 0 0 0 1px #e1b12c inset;
}
.turn__row--dead { opacity: .45; text-decoration: line-through; }

.turn__init {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    color: #e1b12c;
    background: #1d2029;
    border-radius: 5px;
    padding: 3px 0;
}
.turn__name { flex: 1; font-weight: 600; color: #fff; }
.turn__tag { font-size: 12px; color: #8a93a6; text-transform: uppercase; letter-spacing: .5px; }

.turn__initgroup { display: inline-flex; align-items: center; gap: 6px; }
.turn__initbreak { font-size: 11px; color: #8a93a6; white-space: nowrap; }
.turn__initmod {
    font-size: 12px;
    font-weight: 700;
    color: #e1b12c;
    min-width: 22px;
    text-align: center;
}

/* d20 / Total segmented toggle in the init edit field */
.init-mode {
    display: inline-flex;
    border: 1px solid #3b4150;
    border-radius: 5px;
    overflow: hidden;
}
.init-mode button {
    background: #1d2029;
    color: #9aa3b2;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 0;
}
.init-mode button:hover { box-shadow: none; background: #2c3140; }
.init-mode button.active { background: #e1b12c; color: #1b1b1b; }

.turn__init-input {
    width: 48px;
    text-align: center;
    background: #1d2029;
    border: 1px solid #e1b12c;
    color: #fff;
    border-radius: 5px;
    padding: 3px 4px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
}

/* Compact icon buttons (pencil/check) - language-independent */
.btn-track-edit, .btn-track-save {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    border-radius: 5px;
}
.btn-track-edit {
    background: transparent;
    border: 1px solid #3b4150;
    color: #9aa3b2;
}
.btn-track-edit:hover { background: #2c3140; color: #fff; box-shadow: none; }
.btn-track-save { background: #e1b12c; color: #1b1b1b; }

/**********************************************
*** BADGES
**********************************************/

.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.badge--player { background: #2980b9; color: #fff; }
.badge--init   { background: #e1b12c; color: #1b1b1b; }
.badge--ac     { background: #3b4150; color: #e6e6e6; }

/**********************************************
*** SAVED ENCOUNTERS
**********************************************/

.saved {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}
.saved__title { font-size: 16px; color: #27ae60; margin-bottom: 12px; }

.saved__row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.saved__name-input {
    flex: 1;
    min-width: 160px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
}
.btn-save-encounter { background: #27ae60; }
.btn-save-encounter:hover { background: #2ecc71; }

.saved__empty { color: #6c7589; font-style: italic; font-size: 13px; }

.saved__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 6px;
    margin-bottom: 6px;
}
.saved__name { font-weight: 600; color: #fff; }
.saved__meta { flex: 1; font-size: 12px; color: #8a93a6; }
.btn-load { background: #2980b9; padding: 6px 14px; font-size: 13px; }
.btn-del  { background: #3b4150; padding: 6px 14px; font-size: 13px; }

/**********************************************
*** ENCOUNTER
**********************************************/

.encounter__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.encounter__title { font-size: 18px; color: #e1b12c; }
.encounter__meta { color: #9aa3b2; font-size: 13px; flex: 1; }

.empty {
    color: #6c7589;
    font-style: italic;
    padding: 24px;
    text-align: center;
    border: 1px dashed #2c3140;
    border-radius: 10px;
}

.item {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-left: 4px solid #c0392b;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.item--player { border-left-color: #2980b9; }

.item--active {
    border-color: #e1b12c;
    box-shadow: 0 0 0 1px #e1b12c, 0 0 18px rgba(225,177,44,.25);
}

.item--dead {
    opacity: .5;
    border-left-color: #555;
    filter: grayscale(.7);
}

.hp-todo {
    color: #6c7589;
    font-style: italic;
    font-size: 13px;
    padding: 4px 0;
}

.item__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.item__name { font-weight: 700; font-size: 17px; color: #fff; }
.item__meta { color: #9aa3b2; font-size: 12px; }

/**********************************************
*** HP BAR
**********************************************/

.hpbar {
    position: relative;
    height: 22px;
    background: #12141a;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #2c3140;
}
.hpbar__fill {
    height: 100%;
    background: #27ae60;
    transition: width .3s ease, background .3s;
}
.hpbar__fill--mid  { background: #e1b12c; }
.hpbar__fill--low  { background: #e67e22; }
.hpbar__fill--dead { background: #555; }
.hpbar__label {
    position: absolute;
    top: 0; left: 0; right: 0;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

.item__stats {
    color: #8a93a6;
    font-size: 12px;
    margin: 8px 0 10px;
    letter-spacing: .3px;
}

/**********************************************
*** CONTROLS
**********************************************/

.item__controls { display: flex; flex-direction: column; gap: 10px; }

.target { font-size: 13px; color: #9aa3b2; }
.target select {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 5px;
    padding: 6px 8px;
    font-family: inherit;
    margin-left: 4px;
}

.attacks { display: flex; flex-wrap: wrap; gap: 8px; }

.btn-attack {
    background: #2f3a4a;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
    padding: 8px 12px;
}
.btn-attack:hover { background: #3a4860; }
.btn-attack__meta {
    font-size: 11px;
    font-weight: 400;
    color: #aeb6c5;
    margin-top: 3px;
}

.no-attacks { color: #6c7589; font-style: italic; font-size: 13px; }

.manual { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual__input {
    width: 80px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 5px;
    padding: 8px 10px;
    font-family: inherit;
}
.btn-damage { background: #c0392b; }
.btn-heal   { background: #27ae60; }
.btn-remove { background: #3b4150; margin-left: auto; }
.btn-set-ac { background: #2980b9; }

.ac-edit, .init-edit { font-size: 13px; color: #9aa3b2; display: flex; align-items: center; gap: 6px; }
.manual__input--ac, .manual__input--init { width: 64px; }
.btn-set-init { background: #2980b9; }

/**********************************************
*** CONDITIONS
**********************************************/

.conditions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed #2c3140;
}
.conditions__label { font-size: 12px; color: #8a93a6; text-transform: uppercase; letter-spacing: .4px; }
.conditions__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.conditions__none { color: #6c7589; font-style: italic; font-size: 12px; }

.chip {
    display: inline-block;
    background: #5b3a86;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
}
.chip:hover { background: #714aa8; }

.conditions__input {
    width: 130px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 5px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
}
.btn-cond { background: #5b3a86; padding: 6px 12px; }
.btn-cond:hover { background: #714aa8; }

.turn__cond {
    font-size: 11px;
    color: #b89cd8;
    background: #2a2140;
    padding: 1px 7px;
    border-radius: 9px;
}

.cond-effects {
    list-style: none;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: #1a1626;
    border: 1px solid #2a2140;
    border-radius: 6px;
    font-size: 12px;
    color: #c8bde0;
}
.cond-effects li { padding: 2px 0; }
.cond-effects b { color: #d9c7f5; }

/**********************************************
*** LOG
**********************************************/

.logwrap__title { font-size: 16px; color: #e1b12c; margin-bottom: 10px; }

.log {
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 12px 14px;
    max-height: 320px;
    overflow-y: auto;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}
.log__line { padding: 3px 0; border-bottom: 1px solid #1d2029; color: #c2c9d6; }
.log__line:last-child { border-bottom: none; }
.log__line--spawn { color: #9aa3b2; }
.log__line--hit   { color: #f1c40f; }
.log__line--miss  { color: #7f8a9c; }
.log__line--kill  { color: #ff6b5e; font-weight: 700; }
.log__line--heal  { color: #2ecc71; }

@media (max-width: 600px) {
    .picker__row { flex-wrap: wrap; }
    .picker__cr { width: 100%; }
}

/**********************************************
*** NAV (sub-pages)
**********************************************/

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin: 0;
    max-width: none;
    background: rgba(13, 15, 19, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #2c3140;
}
.nav__link {
    color: #c2c9d6;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #2c3140;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(18, 20, 26, 0.5);
}
.nav__link:hover { color: #fff; border-color: #3b4150; background: #12141a; }
.nav__link--active {
    color: #1b1b1b;
    background: #e1b12c;
    border-color: #e1b12c;
    font-weight: 700;
}

/**********************************************
*** HOME / LANDING
**********************************************/

.home__cards {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.home-card {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 12px;
    padding: 26px 22px;
    transition: transform .08s, border-color .15s, box-shadow .15s;
}
.home-card:hover {
    transform: translateY(-2px);
    border-color: #c0392b;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.home-card__icon { font-size: 38px; }
.home-card__title { font-size: 20px; font-weight: 700; color: #fff; }
.home-card__desc { color: #9aa3b2; font-size: 14px; }
.home__note { color: #6c7589; font-size: 13px; margin-top: 18px; text-align: center; }

/**********************************************
*** CHARACTER SHEET
**********************************************/

.charbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 14px 18px;
}
.charbar__pick { color: #9aa3b2; font-size: 14px; }
.charbar__pick select {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 14px;
    margin-left: 6px;
    min-width: 180px;
}
.charbar__buttons { display: flex; gap: 8px; }
.btn-new-char { background: #27ae60; }
.btn-dup-char { background: #2980b9; }
.btn-del-char { background: #3b4150; }
.save-status {
    margin-left: auto;
    color: #2ecc71;
    font-size: 13px;
    opacity: 0;
    transition: opacity .2s;
}
.save-status--show { opacity: 1; }

.sheet { display: flex; flex-direction: column; gap: 16px; }
.sheet .cols { display: flex; gap: 16px; flex-wrap: wrap; }
.sheet .cols > .card { flex: 1; min-width: 280px; }

.card {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 16px 18px;
}
.card h2 {
    font-size: 15px;
    color: #e1b12c;
    margin-bottom: 14px;
    border-bottom: 1px solid #2c3140;
    padding-bottom: 8px;
}

/* Generic inputs inside the sheet */
.sheet label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #9aa3b2; text-transform: uppercase; letter-spacing: .4px; }
.sheet input[type="text"],
.sheet input[type="number"],
.sheet textarea {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
}
.sheet textarea { resize: vertical; line-height: 1.5; }

.grid { display: grid; gap: 14px; }
.grid--identity { grid-template-columns: repeat(3, 1fr); }
.grid--combat { grid-template-columns: repeat(3, 1fr); align-items: end; }
.grid--hp { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }

/* Abilities */
.abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ability {
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}
.ability__label { font-size: 11px; color: #8a93a6; text-transform: uppercase; letter-spacing: .4px; }
.ability__score {
    width: 100% !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700;
    margin: 8px 0;
}
.ability__mod {
    font-size: 18px;
    font-weight: 700;
    color: #e1b12c;
    background: #1d2029;
    border-radius: 6px;
    padding: 3px 0;
}

/* Derived combat boxes */
.derived {
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.derived__label { font-size: 11px; color: #8a93a6; text-transform: uppercase; letter-spacing: .4px; }
.derived__val { font-size: 20px; font-weight: 700; color: #fff; }
.derived__sub { font-size: 11px; color: #8a93a6; display: flex; align-items: center; gap: 6px; text-transform: none; }
.mini { width: 56px !important; padding: 4px 6px !important; font-size: 13px !important; text-align: center; }

/* Saves / skills checklists */
.checklist { display: flex; flex-direction: column; gap: 4px; }
.check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    flex-direction: row !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
    color: #e6e6e6 !important;
    cursor: pointer;
}
.check:hover { background: #12141a; }
.check input { width: auto; cursor: pointer; }
.check__val {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    color: #e1b12c;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 5px;
    padding: 2px 0;
}
.check__name { flex: 1; }
.check__name em { color: #6c7589; font-style: normal; font-size: 12px; }

/* Attacks */
.attacks-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.attack-row { display: flex; gap: 8px; align-items: center; }
.attack-row input[data-attack-field="name"] { flex: 2; }
.attack-row input[data-attack-field="bonus"] { flex: 1; }
.attack-row input[data-attack-field="damage"] { flex: 2; }
.btn-del-attack {
    background: #3b4150;
    width: 34px; height: 34px;
    padding: 0;
    flex: none;
    border-radius: 6px;
}
.btn-add-attack { background: #2980b9; }
.muted { color: #6c7589; font-style: italic; font-size: 13px; }

@media (max-width: 640px) {
    .grid--identity, .grid--combat, .grid--hp { grid-template-columns: 1fr 1fr; }
    .abilities { grid-template-columns: repeat(3, 1fr); }
}

/**********************************************
*** CHARACTER CATEGORY TABS + SHEET SELECT
**********************************************/

.tabs {
    display: inline-flex;
    border: 1px solid #2c3140;
    border-radius: 8px;
    overflow: hidden;
}
.tabs .tab {
    background: #12141a;
    color: #9aa3b2;
    padding: 9px 16px;
    font-size: 14px;
    border-radius: 0;
}
.tabs .tab:hover { background: #2c3140; box-shadow: none; }
.tabs .tab.active { background: #c0392b; color: #fff; }

.sheet select {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
}

/**********************************************
*** IMPORT FROM SHEETS + NPC COMBATANTS
**********************************************/

.import {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}
.import__title { font-size: 16px; color: #9b59b6; margin-bottom: 12px; }
.import__row { display: flex; gap: 10px; flex-wrap: wrap; }
.import__select {
    flex: 1;
    min-width: 180px;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
}
.btn-import-char { background: #9b59b6; }
.btn-import-char:hover { background: #af6fca; }
.import__hint { color: #6c7589; font-size: 12px; margin-top: 8px; }

.item--npc { border-left-color: #9b59b6; }
.badge--npc { background: #9b59b6; color: #fff; }

/**********************************************
*** GROUPS (DM party view)
**********************************************/

.party-table {
    width: 100%;
    border-collapse: collapse;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    overflow: hidden;
}
.party-table th, .party-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #2c3140;
}
.party-table th {
    background: #12141a;
    color: #8a93a6;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.party-table td { font-size: 15px; }
.party-table tr:last-child td { border-bottom: none; }
.party-table .num { text-align: center; font-weight: 700; }
.party-table .num--init { color: #e1b12c; }
.party-table .pname { font-weight: 700; color: #fff; }
.party-empty {
    color: #6c7589;
    font-style: italic;
    padding: 24px;
    text-align: center;
    border: 1px dashed #2c3140;
    border-radius: 10px;
}
.party-note { color: #6c7589; font-size: 13px; margin-top: 14px; }

/* Identity grant summary line */
.identity-notes {
    margin-top: 12px;
    padding: 10px 12px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 6px;
    font-size: 13px;
    color: #9aa3b2;
}
.identity-notes b { color: #e1b12c; }
.identity-notes:empty { display: none; }

/* Character: armor / weapon / roll controls */
.check-inline { flex-direction: row !important; align-items: center; gap: 8px !important;
    text-transform: none !important; letter-spacing: 0 !important; }
.check-inline input { width: auto; }
.btn-roll-abilities { background: #8e44ad; margin-top: 14px; }
.btn-roll-abilities:hover { background: #9b59b6; }
.weapon-add { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.weapon-add select {
    flex: 1; min-width: 180px;
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 15px;
}
.btn-add-weapon { background: #2980b9; }
.btn-add-attack { background: #3b4150; }
.sheet input[readonly] { opacity: .7; cursor: not-allowed; }

/* Spells */
.spell-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.spell-row .spell-lvl { width: 60px !important; flex: none; text-align: center; }
.spell-row input[data-spell-field="name"] { flex: 2; }
.spell-row input[data-spell-field="notes"] { flex: 3; }
.btn-del-spell { background: #3b4150; width: 34px; height: 34px; padding: 0; flex: none; border-radius: 6px; }
.btn-add-spell { background: #2980b9; }

/* Death saves + inspiration */
.deathsaves { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ds-group { display: flex; align-items: center; gap: 8px; }
.ds-label { font-size: 12px; color: #8a93a6; text-transform: uppercase; letter-spacing: .4px; }
.ds-group input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }
.deathsaves .ds-insp { margin-left: auto; }

/* Currency */
.grid--currency { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .grid--currency { grid-template-columns: repeat(3, 1fr); } }

/**********************************************
*** ADVENTURE
**********************************************/

.adv-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px; padding: 14px 18px;
}
.adv-bar__pick { color: #9aa3b2; font-size: 14px; }
.adv-bar__pick select {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px;
    margin-left: 6px; min-width: 200px;
}
.adv-bar__buttons { display: flex; gap: 8px; }
.btn-new-adv { background: #27ae60; }
.btn-dup-adv { background: #2980b9; }
.btn-del-adv { background: #3b4150; }

.adv-head {
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px;
    padding: 18px; margin-bottom: 16px;
}
.adv-title { font-size: 22px; color: #fff; }
.adv-levels {
    display: inline-block; margin: 6px 0; font-size: 12px; font-weight: 700;
    color: #1b1b1b; background: #e1b12c; padding: 2px 10px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: .4px;
}
.adv-summary { color: #c2c9d6; margin: 8px 0; }

.adv-title-input, .adv-levels-input, .adv-summary-input {
    width: 100%; background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; margin-bottom: 8px;
}
.adv-title-input { font-size: 20px; font-weight: 700; }
.adv-summary-input { resize: vertical; line-height: 1.5; }

.scene {
    background: #1d2029; border: 1px solid #2c3140; border-left: 4px solid #8e44ad;
    border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.scene__h { font-size: 17px; color: #fff; margin-bottom: 8px; }
.scene__text { color: #c2c9d6; white-space: pre-wrap; line-height: 1.55; margin-bottom: 10px; }
.scene__title {
    width: 100%; background: #12141a; border: 1px solid #2c3140; color: #fff;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 16px;
    font-weight: 700; margin-bottom: 8px;
}
.scene__ta {
    width: 100%; background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 14px;
    line-height: 1.5; resize: vertical; margin-bottom: 10px;
}

.scene__mons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.mon-chip {
    display: inline-block; background: #2f3a4a; color: #e6e6e6;
    font-size: 13px; padding: 3px 9px; border-radius: 11px;
}
.mon-chip--edit { background: #5b3a86; cursor: pointer; }
.mon-chip--edit:hover { background: #714aa8; }

.scene__add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mon-input {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px; min-width: 160px;
}
.mon-count {
    width: 64px; background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px;
}
.btn-add-mon { background: #5b3a86; }
.btn-play-scene { background: #9b59b6; }
.btn-play-scene:hover { background: #af6fca; }
.btn-send { background: #c0392b; }
.btn-del-scene { background: #3b4150; font-size: 13px; }
.btn-add-scene { background: #27ae60; }

.scene__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Adventure scenes: blocks, traps, maps */
.scene__block { margin: 10px 0; }
.scene__lbl {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: #8a93a6; margin-bottom: 5px;
}
.scene__map {
    max-width: 100%; border-radius: 8px; border: 1px solid #2c3140; display: block;
}
.map-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.map-url {
    flex: 1; min-width: 160px; background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 14px;
}
.map-file { color: #9aa3b2; font-size: 13px; }
.btn-map-url { background: #2980b9; }
.btn-map-clear { background: #3b4150; }

.trap-list { list-style: none; margin: 0; padding: 8px 10px; background: #2a1a1a;
    border: 1px solid #4a2c2c; border-radius: 6px; font-size: 13px; color: #e6c7c7; }
.trap-list li { padding: 2px 0; }
.trap-list b { color: #ff9b8a; }
.trap-dc { color: #c98; font-size: 12px; }

.trap-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.trap-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trap-row input {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px;
}
.trap-name { flex: 2; min-width: 120px; }
.trap-dc-in { width: 90px; }
.trap-eff { flex: 3; min-width: 160px; }
.btn-trap-del { background: #3b4150; width: 32px; height: 32px; padding: 0; flex: none; }
.btn-add-trap { background: #c0392b; font-size: 13px; }

/* Adventure NPCs + treasure */
.npc-list { list-style: none; margin: 0; padding: 8px 10px; background: #161f26;
    border: 1px solid #234; border-radius: 6px; font-size: 13px; color: #cfe0ea; }
.npc-list li { padding: 2px 0; }
.npc-list b { color: #7fc7e8; }
.npc-list .npc-role { color: #8a93a6; font-size: 12px; }

.npc-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.npc-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.npc-row input { background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px; }
.npc-row .npc-name { flex: 2; min-width: 110px; }
.npc-row .npc-role { flex: 2; min-width: 110px; }
.npc-row .npc-line { flex: 3; min-width: 150px; }
.btn-npc-del { background: #3b4150; width: 32px; height: 32px; padding: 0; flex: none; }
.btn-add-npc { background: #2980b9; font-size: 13px; }

.treasure { padding: 8px 10px; background: #1f1d12; border: 1px solid #4a431f;
    border-radius: 6px; color: #e7dca6; font-size: 13px; white-space: pre-wrap; }
.treasure-ta { width: 100%; background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 14px; resize: vertical; }

/* Adventure: ready-made gallery */
.adv-gallery__title { font-size: 16px; color: #e1b12c; margin-bottom: 4px; }
.adv-gallery__hint { color: #6c7589; font-size: 13px; margin-bottom: 12px; }
.adv-gallery__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.adv-card {
    display: flex; flex-direction: column; gap: 5px; text-align: left;
    background: #1d2029; border: 1px solid #2c3140; border-left: 4px solid #8e44ad;
    border-radius: 10px; padding: 14px 16px; color: #e6e6e6;
}
.adv-card:hover { background: #232734; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.adv-card--active { border-color: #e1b12c; border-left-color: #e1b12c; box-shadow: 0 0 0 1px #e1b12c inset; }
.adv-card__title { font-size: 16px; font-weight: 700; color: #fff; }
.adv-card__levels { font-size: 12px; color: #e1b12c; }
.adv-card__sum { font-size: 13px; color: #9aa3b2; font-weight: 400; }

/* Saved encounters as cards */
.saved__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.saved__item { flex-direction: column; align-items: stretch; gap: 6px; border-radius: 10px; }
.saved__item .saved__meta { flex: none; }
.saved__btns { display: flex; gap: 8px; margin-top: 4px; }
.saved__btns .btn-load, .saved__btns .btn-del { flex: 1; }

/* Spell slots */
.slots-wrap { margin: 6px 0 12px; }
.slots-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #8a93a6; margin-bottom: 6px; }
.spell-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.slot { display: flex; align-items: center; gap: 4px; background: #12141a; border: 1px solid #2c3140; border-radius: 6px; padding: 5px 8px; }
.slot__lvl { font-size: 12px; font-weight: 700; color: #e1b12c; min-width: 22px; }
.slot__in { width: 40px; background: #1d2029; border: 1px solid #2c3140; color: #e6e6e6; border-radius: 4px; padding: 4px; text-align: center; font-family: inherit; font-size: 13px; }
.slot__sep { color: #6c7589; }

/* Spell picker + roll HP */
.spell-pick-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.spell-pick-row select {
    flex: 1; min-width: 200px;
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 14px;
}
.btn-roll-hp { background: #8e44ad; margin-top: 12px; }
.btn-roll-hp:hover { background: #9b59b6; }

/**********************************************
*** CHARACTER: VIEW / EDIT / LEVEL UP
**********************************************/

.sheet-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px;
    padding: 12px 18px; margin-top: 0;
}
.sheet-toolbar__title { display: flex; align-items: center; gap: 10px; }
.st-name-input {
    font-size: 20px; font-weight: 700; color: #fff; font-family: inherit;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    padding: 4px 8px; min-width: 220px;
}
.st-name-input:hover { border-color: #2c3140; }
.st-name-input:focus { outline: none; background: #12141a; border-color: #4aa3df; }
.st-name-input::placeholder { color: #6b7280; font-weight: 400; }
.sheet-toolbar__btns { display: flex; gap: 8px; }
.btn-edit { background: #2980b9; }
.btn-view { background: #27ae60; }
.btn-levelup { background: #e1b12c; color: #1b1b1b; }

.levelup-panel {
    background: #2b2616; border: 1px solid #e1b12c; border-radius: 10px;
    padding: 16px 18px;
}
.levelup-panel h3 { font-size: 16px; color: #e1b12c; margin-bottom: 8px; }
.levelup-btns { display: flex; gap: 8px; margin-top: 12px; }
.btn-levelup-apply { background: #e1b12c; color: #1b1b1b; }
.btn-levelup-cancel { background: #3b4150; }

/* Level-up feature list & choices */
.levelup-feats { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.levelup-feat {
    background: #1d2029; border: 1px solid #3a3620; border-radius: 8px;
    padding: 8px 12px;
}
.levelup-feat summary {
    cursor: pointer; color: #e6e6e6; font-weight: 600; list-style-position: inside;
}
.levelup-feat summary:hover { color: #e1b12c; }
.levelup-feat p { margin-top: 6px; color: #c2c9d6; font-size: 13px; line-height: 1.4; }
.levelup-choice {
    background: #1d2029; border: 1px solid #e1b12c; border-radius: 8px;
    padding: 10px 12px;
}
.levelup-choice-head { color: #e1b12c; font-weight: 600; margin-bottom: 6px; }
.levelup-hint {
    display: block; color: #9aa3b2; font-weight: 400; font-size: 12px; margin-top: 2px;
}
.levelup-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.levelup-row > span { color: #9aa3b2; font-size: 13px; min-width: 44px; }
.levelup-choice select, .levelup-row select {
    flex: 1; background: #12141a; color: #e6e6e6;
    border: 1px solid #2c3140; border-radius: 6px; padding: 5px 8px;
}
.levelup-opt-desc { margin-top: 6px; color: #c2c9d6; font-size: 13px; line-height: 1.4; }
.levelup-asi-scores, .levelup-asi-feat { margin-top: 4px; }

/* Read-only sheet */
.read { display: flex; flex-direction: column; gap: 14px; }
.rd-sub { color: #9aa3b2; font-size: 15px; }
.rd-abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.rd-abil {
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px;
    padding: 10px 6px; text-align: center;
}
.rd-abil__lbl { font-size: 11px; color: #8a93a6; letter-spacing: .4px; }
.rd-abil__score { font-size: 22px; font-weight: 700; color: #fff; }
.rd-abil__mod { font-size: 15px; font-weight: 700; color: #e1b12c; }

.rd-stats {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px; padding: 12px 16px;
}
.rd-stats span { font-size: 15px; color: #e6e6e6; }
.rd-stats b { color: #9aa3b2; font-weight: 600; font-size: 12px; text-transform: uppercase; margin-right: 4px; }

.rd-block { background: #1d2029; border: 1px solid #2c3140; border-radius: 10px; padding: 14px 16px; }
.rd-block h3 { font-size: 13px; color: #e1b12c; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip { font-size: 13px; color: #8a93a6; background: #12141a; border: 1px solid #2c3140; border-radius: 11px; padding: 3px 9px; }
.rd-chip--on { color: #fff; background: #2f3a4a; border-color: #3b4860; font-weight: 600; }
.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-list li { padding: 3px 0; border-bottom: 1px solid #232a36; }
.rd-list li:last-child { border-bottom: none; }
.rd-line { color: #c2c9d6; font-size: 14px; }
.rd-pre { color: #c2c9d6; white-space: pre-wrap; line-height: 1.5; }
.rd-spelllvl { color: #c2c9d6; font-size: 14px; padding: 2px 0; }
.rd-spelllvl b { color: #b89cd8; }

/**********************************************
*** AI DUNGEON MASTER (Play)
**********************************************/

.ai {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}
.ai__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.ai__head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai__title { font-size: 16px; color: #9b59b6; }
.ai__keystate {
    font-size: 12px; color: #27ae60; background: rgba(39,174,96,.12);
    border: 1px solid rgba(39,174,96,.35); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.ai__usage {
    font-family: inherit; font-size: 12px; color: #9aa3b2; background: #12141a;
    border: 1px solid #2c3140; border-radius: 999px; padding: 3px 11px; white-space: nowrap;
    cursor: pointer; flex-shrink: 0;
}
.ai__usage:hover { color: #e6e6e6; border-color: #3b4150; }
/* Settings is a native <details> so the toggle can't silently break */
.ai__settings {
    background: #12141a; border: 1px solid #2c3140; border-radius: 8px; margin-bottom: 12px;
}
.ai__settings-summary {
    cursor: pointer; list-style: none; user-select: none;
    padding: 10px 14px; font-size: 13px; color: #e6e6e6;
    display: flex; align-items: center; gap: 8px;
}
.ai__settings-summary::-webkit-details-marker { display: none; }
.ai__settings-summary::before { content: '▸'; color: #6b7280; font-size: 11px; transition: transform .15s; }
.ai__settings[open] > .ai__settings-summary::before { transform: rotate(90deg); }
.ai__settings-summary:hover { background: #1d2029; border-radius: 8px 8px 0 0; }
.ai__settings-body {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    padding: 0 14px 14px;
}
.ai__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9aa3b2; flex: 1; min-width: 180px; }
.ai__field--wide { width: 100%; flex-basis: 100%; margin-bottom: 12px; }
.ai__input, .ai__textarea {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 10px 12px; font-family: inherit; font-size: 14px; width: 100%;
}
.ai__settings .ai__input { background: #1d2029; }
.ai__textarea { resize: vertical; }
.btn-ai-save {
    background: #27ae60; color: #fff; border: none; border-radius: 6px;
    padding: 10px 16px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.btn-ai-save:hover { background: #2ecc71; }
.ai__hint { flex-basis: 100%; font-size: 12px; color: #6b7280; margin: 0; }

/* Voice settings tucked into a native <details> so the core AI key isn't buried */
.ai__voice { flex-basis: 100%; background: #1d2029; border: 1px solid #2c3140; border-radius: 8px; padding: 0; }
.ai__voice-summary {
    cursor: pointer; list-style: none; padding: 10px 14px; font-size: 13px; color: #9aa3b2;
    display: flex; align-items: center; gap: 8px;
}
.ai__voice-summary::-webkit-details-marker { display: none; }
.ai__voice-summary::before { content: '▸'; color: #6b7280; font-size: 11px; transition: transform .15s; }
.ai__voice[open] > .ai__voice-summary::before { transform: rotate(90deg); }
.ai__voice-summary:hover { color: #e6e6e6; }
.ai__voice-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 0 14px 14px; }

/* "Story so far" — a readable view of the rolling auto-summary */
.ai__recap { background: #12141a; border: 1px solid #2c3140; border-radius: 8px; margin-bottom: 12px; }
.ai__recap-summary {
    cursor: pointer; list-style: none; user-select: none;
    padding: 10px 14px; font-size: 13px; color: #e1b12c;
    display: flex; align-items: center; gap: 8px;
}
.ai__recap-summary::-webkit-details-marker { display: none; }
.ai__recap-summary::before { content: '▸'; color: #6b7280; font-size: 11px; transition: transform .15s; }
.ai__recap[open] > .ai__recap-summary::before { transform: rotate(90deg); }
.ai__recap-summary:hover { background: #1d2029; border-radius: 8px 8px 0 0; }
.ai__recap-body { padding: 0 14px 14px; }
.ai__recap-empty { font-size: 12px; color: #6b7280; margin: 0; }
.ai__recap-text {
    margin: 0; white-space: pre-wrap; word-break: break-word;
    font-family: inherit; font-size: 13px; line-height: 1.5; color: #d7dbe2;
}

.ai__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ai__input--direction { flex: 1; min-width: 180px; width: auto; }
.btn-ai-scene, .btn-ai-round {
    border: none; border-radius: 6px; padding: 10px 16px;
    font-family: inherit; font-size: 14px; cursor: pointer;
}
.btn-ai-scene { background: #e1b12c; color: #1b1b1b; }
.btn-ai-scene:hover { background: #f1c40f; }
.btn-ai-round { background: #9b59b6; color: #fff; }
.btn-ai-round:hover { background: #af6fca; }
.btn-ai-scene:disabled, .btn-ai-round:disabled { opacity: .5; cursor: default; }
.ai__status { font-size: 13px; color: #9aa3b2; }

.ai__output { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 460px; overflow-y: auto; }
.ai__output:empty { display: none; }
.btn-ai-loadmore {
    align-self: center; background: #2c3140; color: #9aa3b2; border: 1px solid #3b4150;
    border-radius: 6px; padding: 6px 14px; font-family: inherit; font-size: 12px; cursor: pointer;
    margin-bottom: 2px; flex-shrink: 0;
}
.btn-ai-loadmore:hover { background: #3b4150; color: #e6e6e6; box-shadow: none; }

/* Generic collapsible section (wired up in play.js) — click the heading to fold */
.collapsible__head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.collapsible__head:hover .collapsible__caret { color: #e6e6e6; }
.collapsible__caret { margin-left: auto; color: #6b7280; font-size: 12px; transition: transform .15s; flex-shrink: 0; }
.collapsible.is-collapsed .collapsible__caret { transform: rotate(-90deg); }
.collapsible.is-collapsed .collapse__body { display: none; }
.collapsible.is-collapsed { padding-bottom: 18px; }
.ai__msg {
    border-radius: 8px; padding: 10px 14px; white-space: pre-wrap; line-height: 1.5;
    max-width: 92%;
}
.ai__msg--dm {
    background: #12141a; border-left: 3px solid #9b59b6; color: #d7dbe2;
    align-self: flex-start;
    display: flex; align-items: flex-start; gap: 8px;
}
.ai__msg-text { flex: 1; min-width: 0; }
.btn-ai-replay {
    flex-shrink: 0; background: transparent; color: #9b59b6;
    border: 1px solid #3b4150; border-radius: 5px; padding: 2px 8px;
    font-size: 12px; line-height: 1.4; cursor: pointer;
}
.btn-ai-replay:hover { background: #2c3140; color: #af6fca; box-shadow: none; }
.ai__msg--user {
    background: #1f2b38; border-right: 3px solid #4aa3df; color: #e6e6e6;
    align-self: flex-end;
}
.ai__msg--player {
    background: #12141a; border-left: 3px solid #27ae60; color: #d7dbe2;
    align-self: flex-start;
}
.ai__msg--player .ai__msg-who { color: #27ae60; font-weight: 600; margin-right: 6px; }

.ai__row--quick { gap: 8px; }
.btn-ai-reset { background: #3b4150; color: #e6e6e6; }
.btn-ai-reset:hover { background: #2c3140; }
.btn-ai-speak {
    background: #3b4150; color: #e6e6e6; border: none; border-radius: 6px;
    padding: 8px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.btn-ai-speak:hover { background: #2c3140; }
.btn-ai-speak[aria-pressed="true"] { background: #9b59b6; color: #fff; }
.btn-ai-mic {
    background: #3b4150; color: #e6e6e6; border: none; border-radius: 6px;
    padding: 10px 14px; font-family: inherit; font-size: 16px; cursor: pointer; line-height: 1;
}
.btn-ai-mic:hover { background: #2c3140; }
.btn-ai-mic[aria-pressed="true"] { background: #c0392b; color: #fff; }
.btn-ai-auto {
    background: #3b4150; color: #e6e6e6; border: none; border-radius: 6px;
    padding: 8px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.btn-ai-auto:hover { background: #2c3140; }
.btn-ai-auto[aria-pressed="true"] { background: #27ae60; color: #fff; }

/* AI-teammate toggle on a player card */
.ai-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.btn-ai-toggle {
    background: #12141a; color: #cfd4dd; border: 1px solid #3b4150; border-radius: 6px;
    padding: 6px 12px; font-family: inherit; font-size: 13px; cursor: pointer;
}
.btn-ai-toggle:hover { background: #2c3140; }
.btn-ai-toggle.is-on { background: #27ae60; color: #fff; border-color: #27ae60; }
.ai-ctrl__persona {
    flex: 1; min-width: 160px; background: #12141a; color: #e6e6e6;
    border: 1px solid #2c3140; border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 13px;
}

.ai__composer { margin-bottom: 0; }
.ai__input--chat { flex: 1; min-width: 200px; width: auto; }
.btn-ai-send {
    background: #4aa3df; color: #fff; border: none; border-radius: 6px;
    padding: 10px 18px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.btn-ai-send:hover { background: #62b4ea; }
.btn-ai-send:disabled, .ai__input--chat:disabled { opacity: .5; cursor: default; }

/**********************************************
*** CLOUD (Supabase saves)
**********************************************/

.cloud { background: #1d2029; border: 1px solid #2c3140; border-radius: 10px; padding: 18px; }
.cloud__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.cloud__title { font-size: 16px; color: #4aa3df; }
.cloud__user { font-size: 13px; color: #9aa3b2; }
.cloud__auth, .cloud__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cloud__row { margin-bottom: 8px; }
.cloud__input {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 10px 12px; font-family: inherit; font-size: 14px;
}
#cloud-title { flex: 1; min-width: 180px; }
.cloud__select {
    flex: 1; min-width: 160px; background: #12141a; border: 1px solid #2c3140;
    color: #e6e6e6; border-radius: 6px; padding: 9px 10px; font-family: inherit; font-size: 14px;
}
.cloud button {
    border: none; border-radius: 6px; padding: 10px 14px;
    font-family: inherit; font-size: 14px; cursor: pointer; color: #fff;
}
.btn-cloud-signin, .btn-cloud-open { background: #4aa3df; }
.btn-cloud-signup, .btn-cloud-save { background: #27ae60; }
.btn-cloud-signout { background: #3b4150; }
.btn-cloud-delete { background: #7a3b3b; }
.cloud__status { font-size: 13px; color: #9aa3b2; }
.cloud__active { font-size: 12px; color: #e1b12c; display: block; margin-top: 4px; }
.cloud__sharelabel { font-size: 14px; color: #e6e6e6; display: flex; align-items: center; gap: 8px; }
.cloud__invite { font-size: 13px; color: #e1b12c; }
.btn-group-create, .btn-group-join { background: #5b3a86; }
#cloud-join-code { width: 150px; }

/* Live shared-session viewer (read-only) */
.viewer-banner {
    max-width: 880px; margin: 12px auto 0; padding: 10px 16px;
    background: #2b2616; border: 1px solid #e1b12c; border-radius: 8px;
    color: #f1c40f; text-align: center; font-size: 14px;
}
.btn-viewer-leave {
    margin-left: 10px; background: #3b4150; color: #fff; border: none;
    border-radius: 6px; padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: 13px;
}
.play-viewer .play-bar,
.play-viewer .picker,
.play-viewer .tracker__buttons,
.play-viewer .item__controls,
.play-viewer .ai__settings,
.play-viewer .ai__row--quick,
.play-viewer .ai__composer,
.play-viewer #ai-scene,
.play-viewer .battlemap__tools { display: none; }

/* Compact cloud-sync bar (Character / Adventure / Encounter pages) */
.cloud-bar-wrap { max-width: 880px; margin: 12px auto 0; padding: 0 18px; }
.cloud-bar-wrap:empty { display: none; }
.csbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 8px; padding: 10px 14px;
}
.csbar__label { font-size: 13px; color: #4aa3df; font-weight: 600; }
.csbar__auth, .csbar__me { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.csbar__input {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 13px; width: 150px;
}
.csbar button {
    border: none; border-radius: 6px; padding: 7px 12px;
    font-family: inherit; font-size: 13px; cursor: pointer; color: #fff;
}
.btn-cs-signin { background: #4aa3df; }
.btn-cs-signup { background: #27ae60; }
.btn-cs-signout { background: #3b4150; }
#cs-user { font-size: 13px; color: #9aa3b2; }
.csbar__status { font-size: 12px; color: #9aa3b2; margin-left: auto; }

/* Global auth widget */
.authwidget { font-size: 13px; }
/* In the nav bar: normal flow (never covers page buttons). */
.authwidget--nav { position: relative; display: inline-flex; align-items: center; }
/* Home page (no nav): pinned top-right. */
.authwidget--fixed { position: fixed; top: 8px; right: 10px; z-index: 60; }
.authwidget__form { z-index: 70; }
.authwidget__signed {
    background: #1d2029; border: 1px solid #2c3140; border-radius: 8px;
    padding: 6px 12px; color: #9aa3b2;
}
.authwidget__signed b { color: #e6e6e6; font-weight: 600; }
.btn-aw-signout, .btn-aw-toggle {
    border: none; border-radius: 6px; padding: 5px 11px; font-family: inherit;
    font-size: 12px; cursor: pointer; color: #fff;
}
.btn-aw-signout { background: #3b4150; margin-left: 8px; }
.btn-aw-toggle { background: #4aa3df; }
.authwidget__form {
    position: absolute; right: 0; margin-top: 6px; width: 220px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 8px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.authwidget__form input {
    background: #12141a; border: 1px solid #2c3140; color: #e6e6e6;
    border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px;
}
.authwidget__btns { display: flex; gap: 8px; }
.authwidget__btns button {
    flex: 1; border: none; border-radius: 6px; padding: 8px; font-family: inherit;
    font-size: 13px; cursor: pointer; color: #fff;
}
.btn-aw-signin { background: #4aa3df; }
.btn-aw-signup { background: #27ae60; }
.authwidget__status { font-size: 12px; color: #9aa3b2; }
.cloud__signin-hint { color: #9aa3b2; font-size: 14px; }

/**********************************************
*** CHARACTER BUILDER WIZARD (modal)
**********************************************/

.cb-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    background: rgba(8, 9, 12, 0.72);
    backdrop-filter: blur(4px);
}
.cb-modal {
    width: 100%;
    max-width: 640px;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #2c3140;
}
.cb-title { font-size: 18px; color: #e1b12c; }
.cb-close {
    background: transparent;
    color: #9aa3b2;
    font-size: 22px;
    line-height: 1;
    padding: 2px 10px;
    box-shadow: none;
}
.cb-close:hover { color: #fff; background: #2c3140; box-shadow: none; }

.cb-progress {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid #2c3140;
    background: #171a22;
}
.cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #12141a;
    color: #9aa3b2;
    border: 1px solid #2c3140;
    border-radius: 20px;
    padding: 6px 14px 6px 6px;
    font-size: 13px;
    box-shadow: none;
}
.cb-chip:hover { box-shadow: none; background: #2c3140; }
.cb-chip__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2c3140;
    color: #c2c9d6;
    font-size: 12px;
    font-weight: 700;
}
.cb-chip--done .cb-chip__num { background: #27ae60; color: #fff; }
.cb-chip--on { border-color: #e1b12c; color: #fff; }
.cb-chip--on .cb-chip__num { background: #e1b12c; color: #1b1b1b; }

.cb-body { padding: 20px; }
.cb-lead { color: #9aa3b2; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.cb-lead b { color: #e1b12c; }

.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb-grid--one { grid-template-columns: 1fr; }
.cb-field { display: flex; flex-direction: column; gap: 6px; }
.cb-field--wide { grid-column: 1 / -1; }
.cb-field > label {
    font-size: 12px;
    color: #9aa3b2;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.cb-inline { display: flex; gap: 8px; align-items: stretch; }
.cb-inline select, .cb-inline .cb-text { flex: 1; min-width: 0; }

.cb-text, .cb-field select, .cb-pick {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}
.cb-text:focus, .cb-field select:focus, .cb-pick:focus {
    outline: none;
    border-color: #4aa3df;
}
.cb-dice {
    background: #3b4150;
    padding: 0 12px;
    font-size: 16px;
    flex: 0 0 auto;
}
.cb-dice:hover { background: #4a5162; box-shadow: none; }

/* Reusable d20 icon (replaces the plain 🎲 die). Scales with the surrounding
   text via em units, so it fits inline in buttons and sentences alike. */
.d20-ico {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    background: url("d20.svg") center/contain no-repeat;
}

.cb-toggle { display: flex; gap: 10px; }
.cb-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 13px;
    color: #e6e6e6;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.cb-radio input { accent-color: #e1b12c; }

.cb-racenote { margin-top: 14px; color: #9aa3b2; font-size: 13px; }
.cb-racenote b { color: #e6e6e6; }

.cb-abil-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cb-btn-alt { background: #3b4150; font-size: 13px; }
.cb-btn-alt:hover { background: #4a5162; }
.cb-abil-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.cb-abil { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cb-abil__lbl { font-size: 11px; color: #8a93a6; letter-spacing: .5px; }
.cb-abil__in {
    width: 100%;
    text-align: center;
    background: #12141a;
    border: 1px solid #2c3140;
    color: #fff;
    border-radius: 6px;
    padding: 9px 4px;
    font-size: 16px;
    font-weight: 700;
}

.cb-review {
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
    padding: 8px 16px;
}
.cb-rev-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #232838;
}
.cb-rev-row:last-child { border-bottom: none; }
.cb-rev-row__lbl {
    flex: 0 0 110px;
    color: #8a93a6;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding-top: 2px;
}
.cb-rev-row__val { color: #e6e6e6; font-size: 14px; }
.cb-rev-row__val em { color: #6c7589; }
.cb-rev-row--abil { align-items: center; }
.cb-rev-abils { display: flex; gap: 10px; flex-wrap: wrap; }
.cb-rev-abil {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 46px;
}
.cb-rev-abil__lbl { font-size: 10px; color: #8a93a6; letter-spacing: .5px; }
.cb-rev-abil__num { font-size: 17px; font-weight: 700; color: #fff; }
.cb-rev-abil__bonus { font-size: 10px; color: #27ae60; }

.cb-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #2c3140;
    background: #171a22;
}
.cb-foot-spacer { flex: 1; }
.cb-btn-random { background: #9b59b6; }
.cb-btn-random:hover { background: #a86ac4; }
.cb-btn-back { background: #3b4150; }
.cb-btn-next { background: #2980b9; }
.cb-btn-create { background: #27ae60; }

@media (max-width: 620px) {
    .cb-grid { grid-template-columns: 1fr; }
    .cb-abil-grid { grid-template-columns: repeat(3, 1fr); }
    .cb-foot { flex-wrap: wrap; }
    .cb-btn-random { order: 3; width: 100%; }
    .cb-foot-spacer { display: none; }
}

/**********************************************
*** BATTLEMAP
**********************************************/
.battlemap {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 10px;
    padding: 18px;
}
.battlemap__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.battlemap__title { font-size: 16px; color: #4aa3df; }
.battlemap__dist {
    font-size: 13px;
    color: #e1b12c;
    font-variant-numeric: tabular-nums;
    min-height: 16px;
}
.battlemap__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}
.bm-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.bm-group + .bm-group {
    padding-left: 14px;
    border-left: 1px solid #2c3140;
}
.bm-tool, .bm-btn, .bm-swatch, .bm-file {
    background: #12141a;
    color: #e6e6e6;
    border: 1px solid #2c3140;
    border-radius: 6px;
    padding: 7px 11px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bm-tool:hover, .bm-btn:hover, .bm-swatch:hover, .bm-file:hover { background: #191c25; box-shadow: none; }
.bm-tool--active { background: #2980b9; border-color: #2980b9; color: #fff; }
.bm-swatch__dot {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,.5);
    display: inline-block;
}
.bm-swatch--active { border-color: #e1b12c; box-shadow: inset 0 0 0 1px #e1b12c; }
.bm-lbl {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #9aa0ad;
}
.bm-select, .bm-num {
    background: #12141a;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
}
.bm-num { width: 56px; }
.battlemap__wrap {
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
    padding: 6px;
    overflow: auto;
}
.battlemap__canvas {
    display: block;
    margin: 0 auto;
    touch-action: none;   /* let the canvas own drag gestures */
    border-radius: 4px;
}
.battlemap__hint { margin-top: 10px; font-size: 12px; color: #7a8090; }

/* Area editor (design mode) */
.bm-area-editor {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding: 10px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
}
.bm-area-editor__head { display: flex; align-items: center; gap: 10px; }
.bm-area-editor__title { color: #e1b12c; font-weight: 600; font-size: 13px; margin-right: auto; }
.bm-area-del { background: #7a2318; padding: 5px 10px; font-size: 12px; }
.bm-area-title, .bm-area-read, .bm-area-dm {
    background: #1d2029;
    border: 1px solid #2c3140;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.bm-area-dm { border-color: #4a3a1a; }

/* Legend (tegnforklaring) */
.bm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: #9aa0ad;
}
.bm-legend[hidden] { display: none; }
.bm-legend__label { color: #4aa3df; font-weight: 600; }
.bm-legend__item { display: inline-flex; align-items: center; gap: 5px; }
.bm-legend__dot {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,.5); display: inline-block;
}
.bm-legend__dot--area {
    background: #f5eedc !important; color: #7a2318;
    border-radius: 50%; font-size: 10px; font-weight: 700;
    text-align: center; line-height: 12px;
}

/* Area info card (Game Session: tap a numbered pin) */
.bm-areacard {
    position: relative;
    margin-top: 10px;
    padding: 12px 14px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-left: 3px solid #e1b12c;
    border-radius: 8px;
}
.bm-areacard[hidden] { display: none; }
.bm-areacard__close {
    position: absolute; top: 8px; right: 8px;
    background: #3b4150; padding: 3px 8px; font-size: 12px;
}
.bm-areacard__title { font-size: 14px; color: #e1b12c; margin-bottom: 6px; padding-right: 28px; }
.bm-areacard__read { font-size: 14px; color: #e6e6e6; white-space: pre-wrap; }
.bm-areacard__dm {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed #4a3a1a;
    font-size: 13px; color: #c9a24a; white-space: pre-wrap;
}
.bm-areacard__read[hidden], .bm-areacard__dm[hidden] { display: none; }

/* Scene-map editor modal (Adventure) */
.bm-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow: auto;
}
.bm-modal[hidden] { display: none; }
.bm-modal__box {
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 12px;
    padding: 18px;
    width: 100%;
    max-width: 920px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.bm-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.bm-modal__title { font-size: 16px; color: #4aa3df; margin-right: auto; }
.bm-modal__close {
    background: #3b4150;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1;
}
.bm-modal__close:hover { background: #4a5162; }

/* ============================================================
   Player Gameplay view (player.html) — role-scoped, fog of war.
   Reuses .nav/.topbar/.card/.turn/.ai__msg; adds the player bits.
   ============================================================ */
.player-who {
    max-width: 960px; margin: 0 auto 14px; padding: 0 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.player-who__label { color: #cfd6e2; font-size: 14px; }
.player-who__select {
    margin-left: 8px; background: #12141a; color: #e6e6e6;
    border: 1px solid #2c3140; border-radius: 6px; padding: 6px 10px; font-size: 14px;
}
.player-conn { font-size: 13px; color: #7a8090; }
.player-conn.is-live { color: #27ae60; }

.player-scene { max-width: 960px; margin: 0 auto 14px; }
.player-scene p { color: #cfd6e2; line-height: 1.55; white-space: pre-wrap; }

.player-self { max-width: 960px; margin: 0 auto 14px; }
.player-self__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.player-self__name { font-size: 20px; color: #fff; }
.player-self__sheet { color: #4aa3df; font-size: 13px; text-decoration: none; }
.player-self__sheet:hover { text-decoration: underline; }
.player-self__stats { display: flex; gap: 22px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.player-stat { display: flex; flex-direction: column; gap: 4px; min-width: 54px; }
.player-stat--hp { flex: 1; min-width: 200px; }
.player-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #8a93a6; }
.player-stat__val { font-size: 22px; font-weight: 700; color: #fff; }
.player-hp { display: flex; align-items: center; gap: 10px; }
.player-hp__bar { flex: 1; height: 14px; background: #12141a; border: 1px solid #2c3140; border-radius: 8px; overflow: hidden; }
.player-hp__fill { height: 100%; width: 0; background: #27ae60; transition: width .3s ease; }
.player-hp__fill.is-mid { background: #e1b12c; }
.player-hp__fill.is-low { background: #c0392b; }
.player-hp__text { font-size: 14px; color: #cfd6e2; white-space: nowrap; }
.player-self__conds { display: flex; flex-wrap: wrap; gap: 6px; }
.player-none { color: #6c7589; font-style: italic; font-size: 13px; }
.player-you { font-size: 11px; color: #4aa3df; text-transform: uppercase; letter-spacing: .5px; }

.player-foes { display: flex; flex-direction: column; gap: 8px; }
.player-foe {
    display: flex; align-items: center; gap: 10px;
    background: #12141a; border: 1px solid #2c3140; border-radius: 8px; padding: 8px 12px;
}
.player-foe.is-down { opacity: .5; text-decoration: line-through; }
.player-foe__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.player-foe__dot--monster { background: #c0392b; }
.player-foe__dot--npc { background: #9b59b6; }
.player-foe__name { flex: 1; color: #fff; font-weight: 600; }
.player-foe__band { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #8a93a6; }
.player-foe__band--healthy { color: #27ae60; }
.player-foe__band--wounded { color: #e1b12c; }
.player-foe__band--bloodied { color: #e67e22; }
.player-foe__band--near-death { color: #c0392b; }
.player-foe__band--down { color: #6c7589; }
.player-chat__empty { color: #6c7589; font-style: italic; font-size: 13px; }
.player-chat__empty[hidden] { display: none; }

/* ============================================================
   DM visibility controls (play.html "Players see" panel) +
   per-creature reveal toggle.
   ============================================================ */
.reveal {
    max-width: 960px; margin: 0 auto 18px; padding: 14px 16px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 12px;
}
.reveal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.reveal__title { font-size: 16px; color: #e1b12c; }
.reveal__open { color: #4aa3df; font-size: 13px; text-decoration: none; }
.reveal__open:hover { text-decoration: underline; }
.reveal__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.reveal__toggle { color: #cfd6e2; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.reveal__label { color: #8a93a6; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.reveal__hint { color: #6c7589; font-size: 12px; font-style: italic; }
.reveal button {
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.reveal button:hover { background: #262b36; border-color: #3b4150; }

.item__reveal {
    margin-left: auto; background: #12141a; border: 1px solid #2c3140;
    border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.item__reveal.is-shown { color: #27ae60; border-color: #27632f; }
.item__reveal.is-hidden { color: #c0392b; border-color: #7a2318; }
.item__reveal:hover { background: #262b36; }

/* Fog brush segmented control + marker tools (DM "Players see" panel). */
.reveal__seg { display: inline-flex; border: 1px solid #2c3140; border-radius: 6px; overflow: hidden; }
.reveal__seg button { border: none; border-right: 1px solid #2c3140; border-radius: 0; background: #12141a; }
.reveal__seg button:last-child { border-right: none; }
.reveal__seg button.is-active { background: #2980b9; color: #fff; }
.btn-marker { font-size: 13px; }

/* Marker editor card (over the battlemap) */
.bm-markercard {
    position: relative; margin-top: 10px; padding: 12px 14px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 10px; max-width: 460px;
}
.bm-markercard__close {
    position: absolute; top: 8px; right: 8px; background: none; border: none;
    color: #8a93a6; font-size: 15px; cursor: pointer;
}
.bm-markercard__title { font-size: 15px; color: #e1b12c; margin-bottom: 10px; padding-right: 20px; }
.bm-markercard__field { display: block; color: #9aa3b2; font-size: 12px; margin-bottom: 8px; }
.bm-markercard__input {
    display: block; width: 100%; margin-top: 4px; box-sizing: border-box;
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140; border-radius: 6px; padding: 7px 9px; font-size: 14px;
}
.bm-markercard__actions { display: flex; gap: 8px; margin-top: 6px; }
.bm-markercard__actions button {
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.btn-marker-reveal { border-color: #27632f !important; color: #27ae60 !important; }
.btn-marker-remove { border-color: #7a2318 !important; color: #c0392b !important; }

/* ============================================================
   Role-driven layout: each seat shows only its own components.
   role-ai  = Play vs AI DM (AI is the DM; human is a player)
   role-dm  = human DM console
   ============================================================ */
.role-dm #ai-dm { display: none; }                 /* human DM: no AI DM panel */
.role-ai #reveal-panel { display: none; }          /* AI is the DM: no manual reveal panel */
.role-ai .item__reveal { display: none; }          /* …nor per-creature reveal toggles */

/* ============================================================
   Floating dice roller (Play vs AI) — a pinned die you tap to
   open a small tray: pick a die, how many, roll and read the
   result. Hidden on the human DM console.
   ============================================================ */
.dice-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.role-dm .dice-fab { display: none; }              /* human DM console: no floating roller */
.dice-fab__btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: #c0392b; color: #fff; border: 2px solid #e1b12c;
    font-size: 28px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.12s ease, background 0.12s ease;
}
.dice-fab__btn:hover { background: #d0453a; transform: translateY(-2px); }
.dice-fab__btn:active { transform: scale(0.94); }

.dice-tray {
    width: 260px; padding: 14px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.dice-tray__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.dice-tray__title { font-size: 15px; color: #e1b12c; margin: 0; }
.dice-tray__close {
    background: none; border: none; color: #9aa3b2; font-size: 16px;
    cursor: pointer; line-height: 1; padding: 2px 4px;
}
.dice-tray__close:hover { color: #e6e6e6; }

.dice-tray__dice {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.dice-chip {
    flex: 1 0 auto; min-width: 44px; padding: 7px 0;
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    border-radius: 6px; font-size: 13px; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.dice-chip:hover { border-color: #4aa3df; }
.dice-chip.is-active {
    background: #2980b9; border-color: #4aa3df; color: #fff; font-weight: 600;
}

.dice-tray__count {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.dice-tray__label { flex: 1; color: #9aa3b2; font-size: 13px; }
.dice-count__btn {
    width: 30px; height: 30px; border-radius: 6px;
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    font-size: 18px; line-height: 1; cursor: pointer;
}
.dice-count__btn:hover { border-color: #4aa3df; }
.dice-count__input {
    width: 48px; text-align: center;
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    border-radius: 6px; padding: 6px 4px; font-size: 14px;
}

.dice-tray__roll {
    width: 100%; padding: 10px; margin-bottom: 4px;
    background: #c0392b; color: #fff; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background 0.12s ease;
}
.dice-tray__roll:hover { background: #d0453a; }

.dice-tray__result:empty { display: none; }
.dice-tray__result {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #2c3140;
    text-align: center;
}
.dice-result__expr { color: #9aa3b2; font-size: 12px; margin-bottom: 6px; }
.dice-result__faces {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.dice-face {
    min-width: 30px; padding: 5px 8px;
    background: #12141a; border: 1px solid #2c3140; border-radius: 6px;
    color: #e6e6e6; font-size: 15px; font-weight: 600;
}
.dice-face--crit { border-color: #27ae60; color: #2ecc71; }
.dice-face--fumble { border-color: #c0392b; color: #ff6b5e; }
.dice-result__total {
    margin-top: 10px; color: #e6e6e6; font-size: 14px;
}
.dice-result__total strong { color: #e1b12c; font-size: 20px; }

.log__line--roll { color: #e1b12c; }

@media (max-width: 640px) {
    .dice-fab { right: 12px; bottom: 12px; }
    .dice-tray { width: min(80vw, 260px); }
}

/* Player cloud lobby (player.html) */
.player-cloud {
    max-width: 960px; margin: 0 auto 14px; padding: 14px 16px;
    background: #1d2029; border: 1px solid #2c3140; border-radius: 12px;
}
.player-cloud__title { font-size: 16px; color: #4aa3df; margin-bottom: 8px; }
.player-cloud__hint { color: #9aa3b2; font-size: 13px; }
.player-cloud__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.player-cloud__input, .player-cloud__select {
    background: #12141a; color: #e6e6e6; border: 1px solid #2c3140;
    border-radius: 6px; padding: 7px 10px; font-size: 14px;
}
.player-cloud__select { min-width: 200px; }
.player-cloud__row button {
    background: #2980b9; color: #fff; border: none; border-radius: 6px;
    padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.player-cloud__row button:hover { background: #3a91cc; }
.btn-player-leave { background: #12141a !important; border: 1px solid #2c3140 !important; color: #cfd6e2 !important; }
.player-cloud__status { display: block; margin-top: 8px; color: #8a93a6; font-size: 13px; }

/**********************************************
*** SPELL DESCRIPTIONS (editor, sheet, play)
**********************************************/

/* Live preview under the character-sheet spell picker */
.spell-preview {
    margin-top: 10px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-left: 3px solid #9b59b6;
    border-radius: 8px;
    padding: 10px 12px;
}

/* Info block shown per spell in the editor list */
.spell-entry { margin-bottom: 10px; }
.spell-info {
    margin: 4px 0 0 2px;
    padding: 6px 10px;
    background: #171a22;
    border-left: 2px solid #9b59b6;
    border-radius: 0 6px 6px 0;
}
.spell-info__meta {
    font-size: 11px;
    color: #9b7fc0;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 3px;
}
.spell-info__desc { font-size: 13px; color: #c2c9d6; line-height: 1.45; }

/* Read-only sheet view: spells grouped by level, each with its text */
.rd-spelllvl { margin-bottom: 12px; }
.rd-spelllvl__lbl {
    font-size: 12px;
    color: #9b59b6;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.rd-spell {
    padding: 6px 0 6px 10px;
    border-left: 2px solid #2c3140;
    margin-bottom: 6px;
}
.rd-spell__name { font-weight: 600; color: #e6e6e6; font-size: 14px; }
.rd-spell__meta {
    display: block;
    font-size: 11px;
    color: #8a93a6;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}
.rd-spell__desc { font-size: 13px; color: #c2c9d6; line-height: 1.45; margin-top: 3px; }

/* Game Session card: collapsible spell reference */
.spell-ref {
    margin-top: 10px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
    padding: 4px 10px;
}
.spell-ref > summary {
    cursor: pointer;
    font-size: 13px;
    color: #b98fd6;
    padding: 4px 2px;
    list-style: none;
    user-select: none;
}
.spell-ref > summary::-webkit-details-marker { display: none; }
.spell-ref > summary::before { content: '▸ '; color: #6c7589; }
.spell-ref[open] > summary::before { content: '▾ '; }
.spell-ref__dc {
    color: #8a93a6;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.spell-ref__body { padding: 6px 2px 4px; }
.spell-ref__grp { margin-bottom: 8px; }
.spell-ref__lvl {
    font-size: 11px;
    color: #9b59b6;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.spell-ref__item {
    padding: 4px 0 4px 10px;
    border-left: 2px solid #2c3140;
    margin-bottom: 4px;
}
.spell-ref__name { font-weight: 600; color: #e6e6e6; font-size: 13px; }
.spell-ref__meta {
    display: block;
    font-size: 10px;
    color: #8a93a6;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 1px;
}
.spell-ref__desc { display: block; font-size: 12px; color: #c2c9d6; line-height: 1.4; margin-top: 2px; }
.player-self__spells { margin-top: 12px; }

/* Quick-reference roll modifiers (ability checks / saves / skills) on a
   sheet-imported combatant card — mirrors the spell reference styling. */
.chk-ref {
    margin-top: 10px;
    background: #12141a;
    border: 1px solid #2c3140;
    border-radius: 8px;
    padding: 4px 10px;
}
.chk-ref > summary {
    cursor: pointer;
    font-size: 13px;
    color: #4aa3df;
    padding: 4px 2px;
    list-style: none;
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
.chk-ref > summary::-webkit-details-marker { display: none; }
.chk-ref > summary::before { content: '▸ '; color: #6c7589; }
.chk-ref[open] > summary::before { content: '▾ '; }
.chk-ref__pp {
    color: #8a93a6;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.chk-ref__body { padding: 6px 2px 4px; }
.chk-ref__grp { margin-bottom: 8px; }
.chk-ref__lbl {
    font-size: 11px;
    color: #4aa3df;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    margin-bottom: 4px;
}
.chk-ref__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chk-ref__chip {
    display: inline-block;
    font-size: 12px;
    color: #c2c9d6;
    background: #1d2029;
    border: 1px solid #2c3140;
    border-radius: 6px;
    padding: 2px 7px;
    line-height: 1.5;
}
.chk-ref__chip b { color: #e6e6e6; font-weight: 700; }
.chk-ref__chip--on {
    border-color: #2980b9;
    background: #172634;
}
.chk-ref__chip--on b { color: #4aa3df; }