/* DyM Master — estilos. Tema oscuro tipo "mesa de juego". */
:root {
    --bg: #16181f;
    --panel: #20232b;
    --panel2: #262a33;
    --line: #343b48;
    --text: #e8e8ef;
    --muted: #9aa0ad;
    --gold: #e0b84c;
    --accent: #7c5cff;
    --ok: #5fd38a;
    --bad: #ff7b7b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: system-ui, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ---------- Botones ---------- */
.btn {
    background: var(--panel2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--gold); color: #1b1b22; border-color: var(--gold); font-weight: 600; }
.btn.tiny { padding: 4px 8px; font-size: 0.8rem; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }

/* ---------- Landing ---------- */
.landing { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.landing-wrap { max-width: 860px; text-align: center; }
.landing-wrap h1 { font-size: 2.6rem; color: var(--gold); margin: 0 0 6px; }
.tagline { color: var(--muted); max-width: 620px; margin: 0 auto 32px; line-height: 1.5; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px; padding: 24px; text-align: left;
}
.card h2 { margin-top: 0; color: var(--gold); }
.card label { display: block; margin: 12px 0; color: var(--muted); font-size: 0.9rem; }
.card input {
    display: block; width: 100%; margin-top: 5px; padding: 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.card .btn { width: 100%; margin-top: 8px; }
.msg { min-height: 1.2em; color: var(--gold); font-size: 0.9rem; }
.saved-games { margin-top: 20px; }
.saved-games h2 { margin-top: 0; color: var(--gold); }
.games-list { list-style: none; padding: 0; margin: 10px 0 0; }
.games-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.games-list .g-info { flex: 1; min-width: 200px; font-size: 0.92rem; }
.games-list .g-lock { font-size: 0.85rem; }
.games-list .g-meta { color: var(--muted); font-size: 0.8rem; }
.games-list .g-actions { display: flex; gap: 6px; }

.landing-foot { margin-top: 32px; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }

/* ---------- App general ---------- */
.topbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--gold); }
.join-info strong { color: var(--gold); letter-spacing: 2px; font-size: 1.1rem; }
.map-picker { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.map-picker select, #map-select {
    background: var(--bg); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px;
}
.conn { font-size: 0.85rem; color: var(--muted); }
.conn.ok { color: var(--ok); }
.conn.bad { color: var(--bad); }

.layout { display: grid; grid-template-columns: var(--tools-w, 220px) 6px 1fr 6px var(--panel-w, 320px); height: calc(100vh - 45px); }
.splitter { background: var(--line); cursor: col-resize; }
.splitter:hover, .splitter.dragging { background: var(--gold); }
.tools, .panel { background: var(--panel); overflow-y: auto; }
.tools { border-right: 1px solid var(--line); padding: 14px; }
.panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; }

.tools h3 { margin: 0 0 10px; color: var(--gold); font-size: 1rem; }
.tools h4 { margin: 16px 0 6px; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tool-hint { margin: 8px 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.tool-group { display: flex; flex-direction: column; gap: 6px; }
.tool {
    text-align: left; background: var(--panel2); border: 1px solid var(--line);
    color: var(--text); border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.tool.active { border-color: var(--gold); background: #2f3342; }
.tool-section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.tool-section label { display: block; margin: 8px 0; font-size: 0.88rem; color: var(--muted); }
.tool-section input[type=text], .tool-section select {
    background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px;
}
.tool-section .check { display: flex; gap: 6px; align-items: center; }
.hint { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

/* ---------- Escenario / mapa ---------- */
.stage { overflow: auto; background: #0e0f14; display: flex; align-items: flex-start; justify-content: flex-start; }
.stage.full { grid-column: 1 / -1; }
.player .stage { min-height: calc(100vh - 45px); }
.canvas-wrap { padding: 16px; }
.canvas-wrap.hidden, .empty-state.hidden { display: none; }
#map-canvas { background: #20232b; border: 1px solid var(--line); border-radius: 6px; image-rendering: pixelated; cursor: crosshair; }
.player #map-canvas { cursor: pointer; }
#map-canvas.pan-mode { cursor: grab; }
#map-canvas.panning { cursor: grabbing; }
.empty-state { margin: auto; text-align: center; color: var(--muted); }
.empty-state .btn { margin-top: 12px; }

/* ---------- Panel de ayuda ---------- */
.panel-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ptab {
    flex: 1; background: none; border: none; color: var(--muted);
    padding: 12px 6px; cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent;
}
.ptab.active { color: var(--gold); border-bottom-color: var(--gold); }
.panel-body { padding: 14px; overflow-y: auto; }
.panel-body.hidden { display: none; }

.rules-index { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; max-height: 34%; overflow-y: auto; }
.rules-index h4 { margin: 10px 0 4px; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; }
.rule-link {
    display: block; width: 100%; text-align: left; background: none; border: none;
    color: var(--text); padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 0.9rem;
}
.rule-link:hover { background: var(--panel2); color: var(--gold); }
.rule-content { font-size: 0.92rem; line-height: 1.55; }
.rule-content h3 { color: var(--gold); margin: 4px 0 10px; }
.rule-cat { font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.rule-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.rule-content th, .rule-content td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.rule-content th { background: var(--panel2); }
.rule-content ul, .rule-content ol { padding-left: 20px; }
.rule-content strong { color: #f0e6c8; }

/* ---------- Selector de personaje (portada) ---------- */
.card select, #template-select {
    display: block; width: 100%; margin-top: 5px; padding: 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.tpl-desc { font-size: 0.82rem; color: var(--gold); min-height: 1.2em; margin: 6px 0 0; }

/* ---------- Hoja de personaje (jugador) ---------- */
.player-layout { display: flex; height: calc(100vh - 45px); }
.player-layout .stage { flex: 1; }
.player-layout > .splitter { flex: 0 0 6px; }
.char-sheet {
    width: var(--sheet-w, 320px); background: var(--panel); border-left: 1px solid var(--line);
    overflow-y: auto; padding: 16px; flex-shrink: 0;
}
.char-sheet h2 { color: var(--gold); margin: 0 0 2px; }
.cs-sub { color: var(--muted); font-size: 0.85rem; margin: 0 0 14px; }
.cs-vitals { display: flex; gap: 8px; margin-bottom: 14px; }
.cs-vital { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; text-align: center; }
.cs-vital span { display: block; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.cs-vital label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; }
.cs-abilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-ab { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; text-align: center; }
.cs-ab label { display: block; font-size: 0.68rem; color: var(--muted); }
.cs-score { font-size: 1.05rem; font-weight: 700; }
.cs-mod { display: block; color: var(--accent); font-size: 0.85rem; }
.cs-notes { font-size: 0.85rem; color: var(--text); margin-top: 14px; line-height: 1.5; font-style: italic; }
.cs-legend { font-size: 0.72rem; color: var(--muted); margin-top: 14px; line-height: 1.4; }
#sheet-toggle { display: none; }

/* En pantallas estrechas, la hoja se oculta y se abre con el botón. */
@media (max-width: 820px) {
    #sheet-toggle { display: inline-block; }
    #sheet-splitter { display: none; }
    .char-sheet { position: fixed; right: 0; top: 45px; bottom: 0; width: min(92vw, 340px); transform: translateX(100%); transition: transform .2s; z-index: 20; }
    .char-sheet.open { transform: translateX(0); box-shadow: -6px 0 20px rgba(0,0,0,.4); }
}

/* Roster del master: rasgos y características */
.char-abils { display: inline-flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 3px; }
.char-abils .ab { font-size: 0.72rem; color: var(--muted); background: var(--bg); border-radius: 4px; padding: 0 4px; }
.pc-badge { font-size: 0.8rem; }
.characters-list li { flex-wrap: wrap; }
.hpbar.mini { height: 14px; margin: 5px 0; }
.hpbar.mini .hptxt { font-size: 0.66rem; }
.char-hp-ctrl { display: flex; gap: 4px; align-items: center; margin: 3px 0; }
.char-hp-ctrl .ch-amt { width: 42px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 3px; }
.char-del { align-self: flex-start; }

/* Hoja del jugador: PV y ataques */
.cs-hp { margin-bottom: 12px; }
.cs-hpbar { position: relative; height: 24px; background: #4a2020; border-radius: 6px; overflow: hidden; }
.cs-hpfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4caf50, #8bc34a); transition: width .25s; }
.cs-hptxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.cs-down { color: var(--bad); font-size: 0.9rem; }
.cs-h { color: var(--gold); font-size: 0.95rem; margin: 16px 0 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.cs-sec { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; }
.cs-sec > summary { cursor: pointer; color: var(--gold); font-size: 0.95rem; font-weight: 600; padding: 4px 0; list-style: revert; }
.cs-sec > summary:hover { color: #f0e6c8; }
.cs-sec[open] > summary { margin-bottom: 6px; }
.cs-attacks { list-style: none; padding: 0; margin: 0; }
.cs-attacks li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.cs-atk { color: var(--gold); }
.cs-note { color: var(--muted); font-size: 0.78rem; font-style: italic; }

/* Combate: ataques y resultado de tirada */
.combat-roll { background: var(--panel2); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; max-height: 180px; overflow-y: auto; }
.combat-roll.hidden { display: none; }
.rl-title { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.cr-hint { color: var(--muted); font-size: 0.78rem; }

/* Historial de tiradas (compartido) */
.roll-log { font-size: 0.82rem; }
.roll-item { padding: 4px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.roll-actor { color: var(--gold); font-weight: 600; }
.roll-log-wrap { margin-top: 16px; }

/* Inventario del jugador */
.cs-items { list-style: none; padding: 0; margin: 0; }
.cs-items li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.it-qty { color: var(--gold); font-weight: 700; }
.it-icon { display: inline-block; width: 1.3em; text-align: center; }
.eq-badge { font-size: 0.68rem; color: var(--ok); border: 1px solid var(--ok); border-radius: 4px; padding: 0 4px; }
.hand-tag { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.hands-line { font-size: 0.8rem; color: var(--muted); margin: 4px 0 8px; }
.hands-line strong { color: var(--gold); }
.cs-items .btn { margin-top: 5px; }
.cs-atk-btns { margin-top: 5px; display: flex; gap: 6px; }
.check-row { display: flex; gap: 6px; align-items: center; }
.check-row select { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.it-actions { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.cs-items .btn { margin-top: 5px; }
.char-items { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--muted); }
.atk-edit summary { cursor: pointer; font-size: 0.8rem; color: var(--gold); margin-top: 6px; }
.atk-box { margin-top: 6px; }
.atk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--line); }
.atk-name { font-weight: 600; font-size: 0.82rem; }
.atk-info { color: var(--muted); font-size: 0.78rem; flex: 1; }
.atk-note { flex: 1 0 100%; color: var(--muted); font-size: 0.74rem; font-style: italic; }

/* ---------- Leyendas y guías ---------- */
.legend {
    font-size: 0.78rem; color: var(--muted); line-height: 1.5;
    background: var(--panel2); border-radius: 6px; padding: 7px 9px; margin: 8px 0;
}
.legend strong { color: var(--gold); }
.howto { font-size: 0.85rem; line-height: 1.6; color: var(--text); padding-left: 20px; margin: 8px 0; }
.howto strong { color: #f0e6c8; }
.onmap { font-size: 0.8rem; }

/* Barra de ayuda de movimiento (jugador) */
.move-hint {
    margin-left: auto; margin-right: 12px; font-size: 0.85rem;
    color: var(--gold); background: var(--panel2);
    padding: 4px 10px; border-radius: 8px;
}
.move-hint.hidden { display: none; }

/* ---------- Buscador de reglas ---------- */
.rules-search {
    width: 100%; padding: 7px 10px; margin-bottom: 8px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px;
}

/* ---------- Combate ---------- */
.combat-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.combat-bar strong { color: var(--gold); font-size: 1.1rem; }
.combat-bar .btn { margin-left: 0; }
#combat-next-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.combatants-list { list-style: none; padding: 0; margin: 0 0 12px; }
.combatant { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: var(--panel2); }
.combatant.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.combatant.down { opacity: 0.55; }
.cbt-top { display: flex; align-items: center; gap: 8px; }
.cbt-init { background: var(--bg); color: var(--gold); border: 1px solid var(--line); border-radius: 6px; width: 34px; height: 30px; font-weight: 700; cursor: pointer; }
.cbt-name { flex: 1; font-size: 0.92rem; }
.cbt-name em { color: var(--accent); font-style: normal; font-size: 0.72rem; border: 1px solid var(--accent); border-radius: 4px; padding: 0 3px; }
.cbt-ac { font-size: 0.78rem; color: var(--muted); }
.hpbar { position: relative; height: 18px; background: #4a2020; border-radius: 5px; margin: 6px 0; overflow: hidden; }
.hpfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4caf50, #8bc34a); transition: width .2s; }
.hptxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: #fff; text-shadow: 0 1px 2px #000; }
.cbt-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cbt-amt { width: 46px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.cbt-conds { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.cond-chip { background: #5a3a1a; color: #ffcf6b; font-size: 0.72rem; padding: 1px 6px; border-radius: 10px; cursor: help; }
.cbt-eff { font-size: 0.76rem; color: var(--gold); margin-top: 4px; }
.cbt-eff.bad { color: var(--bad); }
.cond-edit { margin-left: auto; }
.cond-edit summary { cursor: pointer; font-size: 0.78rem; color: var(--muted); }
.cond-box { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 6px; font-size: 0.8rem; color: var(--text); }
.cond-box label { display: flex; align-items: center; gap: 4px; }
.combat-add { border-top: 1px solid var(--line); padding-top: 8px; }
.combat-add h4 { margin: 4px 0; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; }
.combat-add-btns { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.combat-add-btns select { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.combat-manual { display: flex; gap: 5px; flex-wrap: wrap; }
.combat-manual input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px; }
.combat-manual input[type=text] { flex: 1; min-width: 90px; }

/* ---------- Visión por personaje (master) ---------- */
.vision-list { list-style: none; padding: 0; margin: 6px 0; }
.vision-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 0.85rem; }
.vision-list li > span { flex: 1; }
.vision-input { width: 52px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px; }

/* ---------- Pruebas de habilidad (master) ---------- */
#check-skill-master { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px; }
.party-checks { list-style: none; padding: 0; margin: 8px 0 16px; }
.party-checks li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.party-checks .pc-bonus { color: var(--gold); font-weight: 700; }
.party-checks em { color: var(--muted); font-style: normal; font-size: 0.78rem; }
.party-checks .best { margin-left: auto; color: var(--ok); font-size: 0.78rem; }

/* ---------- Personajes ---------- */
.characters-list { list-style: none; padding: 0; margin: 6px 0; }
.characters-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.characters-list li > div { flex: 1; font-size: 0.9rem; }
.characters-list em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.char-stats { color: var(--muted); font-size: 0.8rem; }
.char-form-wrap summary { cursor: pointer; color: var(--gold); font-size: 0.88rem; margin: 8px 0; }
.char-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.char-form input[type=text] { flex: 1 0 100%; }
.char-form input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.char-form label { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--muted); gap: 2px; }
.char-form label input { width: 60px; }
.char-form .btn { flex: 1 0 100%; }

/* ---------- Aventura ---------- */
.adv-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.adv-form label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); gap: 4px; }
.adv-form input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.adv-form .btn { flex: 1 0 100%; }
#adv-list-wrap { border-top: 1px solid var(--line); padding-top: 8px; }
#adv-list-wrap h4 { margin: 6px 0; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; }
.adv-list { list-style: none; padding: 0; margin: 0 0 8px; }
.adv-content { margin-top: 10px; font-size: 0.9rem; }
.adv-card h3 { color: var(--gold); margin: 6px 0; }
.adv-meta { color: var(--muted); font-size: 0.82rem; margin: 2px 0 10px; }
.adv-hook { background: var(--panel2); border-left: 3px solid var(--gold); padding: 8px 10px; border-radius: 6px; line-height: 1.5; }
.adv-room { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 10px 0; }
.adv-room h4 { margin: 0 0 6px; color: #f0e6c8; }
.adv-role { font-size: 0.7rem; color: var(--accent); text-transform: uppercase; border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.adv-feature { color: var(--muted); font-size: 0.85rem; }
.adv-enc { line-height: 1.5; }
.adv-quiet { color: var(--muted); }
.adv-treasure { color: var(--gold); }
.adv-loot { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.adv-loot-t { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.loot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; font-size: 0.85rem; }
.loot-row em { color: var(--muted); font-style: normal; font-size: 0.78rem; }
.loot-row.given { color: var(--muted); }
.loot-row.locked { color: var(--muted); font-style: italic; }
.loot-row.locked em { color: #ff9f45; }
.loot-give { display: flex; gap: 4px; align-items: center; }
.loot-who { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px; max-width: 120px; }
.cs-req { color: #ff9f45; font-size: 0.78rem; }
.shop-title { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 4px; }
.shop-manage { margin: 8px 0 14px; }
.shop-manage > summary { cursor: pointer; color: var(--gold); font-size: 0.85rem; }
.shop-custom-list { list-style: none; padding: 0; margin: 8px 0; }
.shop-custom-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.shop-custom-list li > span { flex: 1; }
.shop-custom-list em { color: var(--muted); font-style: normal; font-size: 0.78rem; }
.shop-add-form { margin-top: 8px; }
.shop-add-form .sa-name { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px; margin-bottom: 8px; }
.sa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.sa-grid label { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--muted); gap: 3px; }
.sa-grid label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 0.78rem; }
.sa-grid select, .sa-grid input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.sa-grid label.check input { width: auto; }
.shop-add-form .sa-field.hidden { display: none; }
#sa-help { margin: 6px 0 10px; }
button.sa-name { width: 100%; margin-top: 4px; }
.cs-items .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.diff { font-weight: 700; text-transform: capitalize; padding: 0 4px; border-radius: 4px; }
.diff-trivial { color: #8a8f99; }
.diff-fácil { color: #5fd38a; }
.diff-media { color: #e0b84c; }
.diff-difícil { color: #ff9f45; }
.diff-mortal { color: #ff7b7b; }
.adv-npc, .adv-notes { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.adv-npc h4, .adv-notes h4 { color: var(--gold); margin: 4px 0; }
.adv-notes ul { padding-left: 18px; line-height: 1.5; }
.adv-attr { color: var(--muted); font-size: 0.72rem; margin-top: 12px; }

/* ---------- Dado ---------- */
.dice-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dice-row .die { flex: 1 0 auto; }
.adv { display: flex; gap: 12px; margin: 10px 0; font-size: 0.85rem; color: var(--muted); }
.dice-result { font-size: 2.4rem; font-weight: 800; text-align: center; color: var(--gold); margin: 8px 0; }
.dice-log { font-size: 0.82rem; color: var(--muted); }
.dice-log div { padding: 3px 0; border-bottom: 1px solid var(--line); }

/* ---------- Mesa ---------- */
.players-list, .tokens-list { list-style: none; padding: 0; margin: 6px 0 18px; }
.players-list li, .tokens-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.tokens-list em { color: var(--muted); font-style: normal; font-size: 0.8rem; }
.tokens-list li .btn { margin-left: auto; }
.tokens-list li .btn + .btn { margin-left: 4px; }
.cross-badge { font-size: 0.75rem; color: #7fc4e0; background: rgba(43,88,120,.35); border-radius: 4px; padding: 1px 5px; }
.forest-badge { font-size: 0.85rem; }
.atk-target-wrap { margin: 4px 0 6px; font-size: 0.8rem; color: var(--muted); }
.atk-target-wrap select { margin-left: 4px; max-width: 60%; }
.atk-mode-hint { margin-top: 3px; font-size: 0.78rem; color: var(--muted); }
.atk-mode-hint.dis { color: #e08b6b; font-weight: 600; }
.atk-mode-hint.adv { color: #7fd08b; font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.4); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--ok); } .dot.off { background: var(--muted); }

/* ---------- Diálogos con estilo (alert/confirm/prompt propios) ---------- */
.ui-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; transition: opacity .12s ease;
}
.ui-modal-overlay.show { opacity: 1; }
.ui-modal {
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-top: 3px solid var(--gold);
    border-radius: 12px; padding: 20px; max-width: 420px; width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: translateY(6px); transition: transform .12s ease;
}
.ui-modal-overlay.show .ui-modal { transform: translateY(0); }
.ui-modal-msg { font-size: 0.98rem; line-height: 1.5; white-space: pre-wrap; }
.ui-modal-input {
    width: 100%; box-sizing: border-box; margin-top: 12px; padding: 9px 10px;
    background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 0.95rem;
}
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Diálogo ---------- */
dialog {
    background: var(--panel); color: var(--text); border: 1px solid var(--line);
    border-radius: 14px; padding: 22px; min-width: 300px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin-top: 0; color: var(--gold); }
dialog label { display: block; margin: 10px 0; font-size: 0.9rem; color: var(--muted); }
dialog input { display: block; width: 100%; margin-top: 5px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
dialog menu { display: flex; gap: 10px; justify-content: flex-end; padding: 0; margin: 18px 0 0; }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto; height: auto; }
    .tools, .panel { max-height: 40vh; }
    .splitter { display: none; }
}