/* UMBRA · página de jugadores. Móvil primero (360 px), escritorio a partir de 1000 px.
   Paleta «muelle de noche»: pizarra azulada, pergamino y una sola luz cálida (el farol) que significa «te toca». */
:root {
    --night: #121722;
    --night-2: #19202d;
    --night-3: #232c3c;
    --line: rgba(236, 228, 211, 0.13);
    --line-strong: rgba(236, 228, 211, 0.28);
    --parchment: #ece4d3;
    --muted: #a8a194;
    --faint: #948e84;
    --lantern: #e8a33d;
    --lantern-soft: rgba(232, 163, 61, 0.16);
    --lantern-ink: #2b1b05;
    --secret: #a891d6;
    --ok: #93b783;
    --alert: #d8694e;
    --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --band-h: 52px;
    --tabs-h: 62px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--parchment); }
body {
    font: 400 17px/1.45 var(--sans);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; }
svg { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================== estructura */
#app {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: calc(var(--band-h) + var(--safe-t)) 1fr calc(var(--tabs-h) + var(--safe-b));
    /* minmax(0, …): un texto largo de la banda (sin saltos) no puede ensanchar la columna más que la pantalla. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "band" "stage" "tabs";
}

/* ============================================================== 1. banda de estado */
.band {
    grid-area: band;
    z-index: 30;
    display: flex;
    align-items: stretch;
    padding-top: var(--safe-t);
    /* Opaca: la banda va en su propia fila (no hay nada detrás que desenfocar). */
    background: #141a26;
    border-bottom: 1px solid var(--line);
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.band-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 0;
    background: none;
    text-align: left;
}
.band-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.band-text { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-detail { color: var(--muted); font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.band-audio {
    width: 56px;
    border: 0;
    border-left: 1px solid var(--line);
    background: none;
    display: grid;
    place-items: center;
    color: var(--muted);
}
.band-audio.muted { color: var(--alert); }

.band.tone-turn { background: var(--lantern); color: var(--lantern-ink); border-bottom-color: transparent; }
.band.tone-turn .band-dot { background: var(--lantern-ink); animation: beat 1.4s ease-in-out infinite; }
.band.tone-turn .band-detail { color: rgba(43, 27, 5, 0.75); }
.band.tone-turn .band-audio { color: var(--lantern-ink); border-left-color: rgba(43, 27, 5, 0.2); }
.band.tone-turn.jump .band-text::after { content: " · tocar para ver"; font-weight: 500; opacity: 0.7; font-size: 0.9rem; }
.band.tone-alert { background: #3a1d17; }
.band.tone-alert .band-dot { background: var(--alert); }
.band.tone-busy .band-dot { background: var(--lantern); animation: breathe 1.6s ease-in-out infinite; }
.band.tone-info .band-dot { background: var(--parchment); }
.band.tone-quiet .band-text { font-weight: 500; color: var(--muted); }
.band.tone-quiet .band-dot { background: var(--ok); }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ============================================================== 2. escena */
.stage {
    grid-area: stage;
    position: relative;
    /* clip (no hidden): nada puede desplazar la escena por código (un focus o scrollIntoView la movía unos px). */
    overflow: hidden;
    overflow: clip;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.scene-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 60% 20%, #2a3346 0%, var(--night) 70%); }
.scene-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}
/* La deriva sigue en la imagen que se va (.out) hasta que acaba el fundido: si se quitara a la vez, saltaría el zoom. */
.scene-bg img.on { opacity: 1; }
.scene-bg img.on, .scene-bg img.out { animation: drift 40s ease-in-out infinite alternate; }
/* En pausa cuando no se ve o no se mira: hoja abierta, combate, otra pestaña delante o una pantalla completa. */
.stage.has-sheet .scene-bg img, #app[data-combat] .scene-bg img, #app:not([data-tab="scene"]) .scene-bg img, body:has(.screen.visible) .scene-bg img { animation-play-state: paused; }
@keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.scene-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(18, 23, 34, 0.75) 0%, rgba(18, 23, 34, 0) 26%),
        linear-gradient(to top, rgba(12, 15, 22, 0.97) 0%, rgba(12, 15, 22, 0.82) 30%, rgba(12, 15, 22, 0) 62%);
    pointer-events: none;
}
.scene-head { position: relative; padding: 14px 16px 0; z-index: 2; }
.scene-title { font: 500 1.35rem/1.15 var(--serif); letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.scene-place { margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.scene-cast { list-style: none; display: flex; gap: 6px; margin: 10px 0 0; padding: 0; }
.scene-cast img { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(236, 228, 211, 0.5); object-fit: cover; }
.scene-cast li.me img { border-color: var(--lantern); }


.spot-pill {
    position: relative;
    z-index: 3;
    margin: 12px 16px 0;
    align-self: flex-start;
    max-width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    border-radius: 24px;
    background: rgba(25, 32, 45, 0.85);
    border: 1px solid var(--line-strong);
    font-size: 0.9rem;
}
.spot-pill span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.spot-pill img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

.subtitle-wrap {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.subtitle { margin: 0; display: flex; gap: 14px; align-items: flex-start; min-height: 3em; }
.subtitle-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(236, 228, 211, 0.55);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    flex: none;
}
.subtitle figcaption { min-width: 0; }
.subtitle-speaker { display: block; color: var(--lantern); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; margin-bottom: 2px; }
.subtitle-text {
    margin: 0;
    font: 400 1.32rem/1.42 var(--serif);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    text-wrap: pretty;
    max-width: 38em;
}
.subtitle.narrator .subtitle-text { font-style: italic; }
.subtitle.empty .subtitle-text { color: var(--muted); font-style: italic; font-size: 1.05rem; }
.history-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 14px 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(18, 23, 34, 0.55);
    color: var(--muted);
    font-size: 0.9rem;
}
.history-btn svg { width: 18px; height: 18px; }

/* ============================================================== 3. hoja de decisión */
.sheet {
    position: relative;
    z-index: 4;
    max-height: 64%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--night-2);
    border-top: 1px solid var(--line-strong);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.45);
    animation: sheet-up 0.45s var(--ease);
}
.sheet.min { max-height: none; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-card { padding: 14px 16px 18px; }
.sheet-card + .sheet-card { border-top: 1px solid var(--line); }
.sheet-head { display: flex; align-items: flex-start; gap: 10px; }
.sheet-kicker { font-size: 0.88rem; color: var(--lantern); font-weight: 700; }
.sheet-prompt { margin: 2px 0 0; font: 500 1.18rem/1.3 var(--serif); }
.sheet-toggle {
    margin-left: auto;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: transform 0.25s var(--ease);
}
.sheet.min .sheet-toggle { transform: rotate(180deg); }
.sheet.min .sheet-body { display: none; }
.sheet-body { margin-top: 14px; display: grid; gap: 10px; }

.opt {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 2px 12px;
    align-items: start;
    width: 100%;
    min-height: 64px;
    align-content: start;
    padding: 12px 14px 12px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--night-3);
    text-align: left;
    transition: border-color 0.15s, background 0.15s, opacity 0.2s, transform 0.1s;
}
.opt:active:not(:disabled) { transform: scale(0.985); }
@media (hover: hover) { .opt:hover:not(:disabled) { border-color: var(--lantern); background: #2a2a2c; } }
.opt-key {
    grid-row: span 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--lantern);
    border: 1.5px solid rgba(232, 163, 61, 0.55);
}
.opt-label { font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
/* Como mucho dos líneas: el resto, en el title (y la opción entera se lee con el lector de pantalla). */
.opt-intent { color: var(--muted); font-size: 0.95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opt.free { border-style: dashed; background: transparent; }
.opt.free .opt-key { border-style: dashed; }
.opt.free .opt-key svg { width: 16px; height: 16px; }
.opt.selected { border-color: var(--lantern); background: #3a2e1c; }
.opt.selected .opt-key { background: var(--lantern); color: var(--lantern-ink); border-color: var(--lantern); }
.sheet.busy .opt:not(.selected), .sheet-card.locked .opt:not(.selected) { opacity: 0.38; }
.opt-state { grid-column: 2; font-size: 0.9rem; font-weight: 700; color: var(--lantern); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.free-box { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--lantern); background: rgba(232, 163, 61, 0.06); }
.free-box label { font-weight: 700; }
.free-box textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--night);
    font: 400 1.05rem/1.4 var(--serif);
}
.free-box .row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.free-box .count { margin-right: auto; color: var(--faint); font-size: 0.85rem; }

.btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn.primary { background: var(--lantern); color: var(--lantern-ink); border-color: var(--lantern); }
.btn.danger { border-color: rgba(216, 105, 78, 0.6); color: #f0a08c; }
.btn:disabled { opacity: 0.45; }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }

.sheet-card.compact { padding-top: 12px; padding-bottom: 12px; }
.sheet-result { display: flex; align-items: center; gap: 12px; }
.sheet-result .seal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(147, 183, 131, 0.16); color: var(--ok); flex: none; }
.sheet-result .seal.expired { background: rgba(168, 161, 148, 0.12); color: var(--muted); }
.sheet-result p { margin: 0; }
.sheet-result strong { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; }
.sheet-result .sub { color: var(--muted); font-size: 0.92rem; }
.sheet-error { color: #f0a08c; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.95rem; }

/* votación */
.vote-opts { display: grid; gap: 8px; }
.vote-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: var(--night-3);
    text-align: left;
    font-weight: 700;
    font-size: 1.05rem;
}
.vote-opt .tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.vote-opt.selected { border-color: var(--lantern); background: #3a2e1c; }
.vote-opt.selected .tick { background: var(--lantern); border-color: var(--lantern); color: var(--lantern-ink); }
.vote-opt .tick svg { width: 15px; height: 15px; }
.vote-opt .n { margin-left: auto; color: var(--muted); font-weight: 500; }
.vote-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.people { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.people li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(236, 228, 211, 0.06); font-size: 0.9rem; color: var(--muted); }
.people li svg { width: 16px; height: 16px; }
.people li.done { color: var(--ok); }
.people li.me { outline: 1px solid var(--line-strong); }
.link-btn { min-height: 44px; border: 0; background: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; font-size: 0.95rem; }

/* ============================================================== 4. pestañas y paneles */
.tabs {
    grid-area: tabs;
    z-index: 20;
    display: flex;
    padding-bottom: var(--safe-b);
    background: var(--night);
    border-top: 1px solid var(--line);
}
.tabs button {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
}
.tabs button[aria-current="page"] { color: var(--parchment); }
.tabs button[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--lantern); border-radius: 2px; }
.tabs button.calling { color: var(--lantern); }
.tabs button.calling svg { animation: beat 1.4s ease-in-out infinite; }
.badge { position: absolute; top: 8px; left: calc(50% + 8px); min-width: 9px; height: 9px; border-radius: 99px; background: var(--lantern); }

.panel {
    grid-area: stage;
    z-index: 10;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--night);
    display: none;
}
#app:not([data-tab="scene"]) .panel { display: block; }
.panel-inner { padding: 18px 16px 40px; max-width: 720px; margin: 0 auto; }
.panel h2.ph { font: 500 1.6rem/1.2 var(--serif); margin-bottom: 4px; }
.panel h3 { font: 600 1.12rem/1.3 var(--serif); margin: 26px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.block { padding: 14px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.block + .block { margin-top: 10px; }

.char-head { display: flex; gap: 16px; align-items: center; }
.char-head img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-strong); }
.char-head .lvl { color: var(--muted); }
.xp { margin-top: 8px; }
.xp-bar { height: 6px; border-radius: 6px; background: rgba(236, 228, 211, 0.1); overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, #b9832f, var(--lantern)); border-radius: 6px; }
.xp small { color: var(--muted); }

.levelup { border-color: rgba(232, 163, 61, 0.5); background: linear-gradient(180deg, rgba(232, 163, 61, 0.1), transparent 70%), var(--night-2); }
.levelup h4 { font: 600 1.15rem var(--serif); }
.levelup ul { padding-left: 18px; margin: 8px 0 12px; }
.levelup li { margin: 4px 0; }
.chip { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: 0.8rem; background: rgba(236, 228, 211, 0.08); color: var(--muted); margin-right: 6px; }
.chip.warn { background: var(--lantern-soft); color: #f2c98a; }
.chip.secret { background: rgba(168, 145, 214, 0.16); color: var(--secret); }

.goals { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.goal { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; padding: 12px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.goal svg { width: 20px; height: 20px; margin-top: 2px; color: var(--muted); }
.goal.secret { border-color: rgba(168, 145, 214, 0.45); background: linear-gradient(90deg, rgba(168, 145, 214, 0.09), transparent 60%), var(--night-2); }
.goal.secret svg { color: var(--secret); }
.goal.done span.t { text-decoration: line-through; color: var(--muted); }
.goal .meta { grid-column: 2; font-size: 0.88rem; color: var(--muted); }

.power { border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.power + .power { margin-top: 8px; }
.power summary { list-style: none; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; cursor: pointer; }
.power summary::-webkit-details-marker { display: none; }
.power summary strong { font: 600 1.05rem var(--serif); margin-right: 4px; }
.power summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.power[open] summary::after { transform: rotate(-135deg); }
.power.retirada { opacity: 0.55; }
.power dl { margin: 0; padding: 0 14px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.95rem; }
.power dt { color: var(--muted); }
.power dd { margin: 0; }
.power .hint { padding: 0 14px; margin: 0 0 10px; font-size: 0.9rem; color: #f2c98a; }

/* Diario: días y episodios como separadores; quién habla en versalitas color farol; el narrador en cursiva;
   los avisos del sistema, más pequeños y con su icono. */
.journal { list-style: none; padding: 0; margin: 4px 0 0; }
.journal li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.journal li p { margin: 0; }
.journal time { font: 500 0.8rem var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.j-meta time { margin-left: auto; }
.j-who { font: 700 0.85rem var(--sans); font-variant: small-caps; letter-spacing: 0.08em; text-transform: lowercase; color: var(--lantern); }
.j-say p { font: 400 1.05rem/1.45 var(--serif); }
.j-narr p, .j-note p { font: italic 400 1.02rem/1.45 var(--serif); color: #d9d1bf; }
.j-note p { font-style: normal; }
.j-sys { display: flex; align-items: flex-start; gap: 10px; }
.j-sys p { flex: 1; font-size: 0.95rem; line-height: 1.35; color: var(--muted); }
.j-sys time { margin-top: 2px; }
.j-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--lantern-soft); color: var(--lantern); }
.j-ico svg { width: 15px; height: 15px; }
.journal li.j-day { border-bottom: 0; padding: 18px 0 6px; display: flex; align-items: center; gap: 10px; font: 700 0.8rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.journal li.j-day::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.journal li.j-ep { padding: 14px 14px 12px; margin: 8px 0; border: 1px solid rgba(232, 163, 61, 0.35); border-radius: var(--r-md); background: linear-gradient(90deg, rgba(232, 163, 61, 0.1), transparent 70%), var(--night-2); display: grid; gap: 2px; }
.j-ep-k { font: 700 0.78rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lantern); }
.j-ep strong { font: 500 1.25rem/1.2 var(--serif); }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--line); margin: 6px 0 14px; }
.seg button { border: 0; background: none; min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--muted); font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--night-3); color: var(--parchment); }
.codex-grid { display: grid; gap: 10px; }
.codex-entry { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.codex-entry .ph-img { width: 64px; height: 64px; border-radius: var(--r-sm); object-fit: cover; background: var(--night-3); display: grid; place-items: center; color: var(--faint); }
.codex-entry h4 { font: 600 1.05rem var(--serif); }
.codex-entry ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: 0.95rem; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery button { padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--night-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* anfitrión */
.host-state { display: flex; align-items: center; gap: 10px; }
.host-state .band-dot { width: 12px; height: 12px; }
.host-state.paused .band-dot { background: var(--parchment); }
.host-state.thinking .band-dot, .host-state.ending .band-dot { background: var(--lantern); animation: breathe 1.6s infinite; }
.host-state.waiting .band-dot, .host-state.idle .band-dot { background: var(--ok); }
.host-state.error .band-dot, .host-state.offline .band-dot { background: var(--alert); }
/* «Que siga el GM» a todo lo ancho; debajo, Pausa y Terminar sesión en una línea cada uno (o uno bajo otro si no caben). */
.host-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin-top: 14px; }
.host-buttons .btn { min-height: 54px; padding: 0 12px; white-space: nowrap; }
.host-buttons .wide { grid-column: 1 / -1; }
.who { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.who li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--night-2); }
.who li .st { margin-left: auto; font-size: 0.88rem; color: var(--muted); }
.who li .on { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.who li .on.off { background: var(--alert); }
.who li.missing .st { color: var(--lantern); font-weight: 700; }
.host-vote .people li { gap: 8px; }
.host-vote .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ============================================================== historial */
.drawer {
    position: fixed;
    z-index: 60;
    inset: auto 0 0 0;
    max-height: 82%;
    display: flex;
    flex-direction: column;
    background: var(--night-2);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
    padding-bottom: var(--safe-b);
    animation: sheet-up 0.35s var(--ease);
}
.drawer header { display: flex; align-items: center; padding: 14px 16px 8px; }
.drawer h2 { font: 500 1.25rem var(--serif); }
.icon-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; }
.drawer ol { list-style: none; margin: 0; padding: 0 16px 24px; overflow-y: auto; }
.drawer li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drawer li img, .drawer li .noimg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--night-3); }
.drawer li b { display: block; color: var(--lantern); font-size: 0.88rem; }
.drawer li p { margin: 0; font: 1.02rem/1.45 var(--serif); }

/* ============================================================== sonido */
.audio-pop {
    position: fixed;
    z-index: 70;
    top: calc(var(--band-h) + var(--safe-t) + 8px);
    right: 8px;
    width: min(320px, calc(100% - 16px));
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--night-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    display: grid;
    gap: 14px;
}
.audio-row { display: grid; gap: 6px; font-weight: 700; font-size: 0.95rem; }
.audio-row input { width: 100%; height: 44px; accent-color: var(--lantern); }
.audio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.audio-actions button { flex: 1 1 auto; min-height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font-size: 0.9rem; font-weight: 700; }
.audio-actions button[aria-pressed="true"] { border-color: var(--alert); color: #f0a08c; }

/* ============================================================== avisos */
/* Una pila bajo la banda; main/screens.js la baja justo bajo el título, la pastilla de foco o la barra del combate. */
.toasts { position: fixed; z-index: 80; top: calc(var(--band-h) + var(--safe-t) + 8px); left: 16px; right: 16px; display: grid; gap: 8px; pointer-events: none; justify-items: start; align-content: start; }
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, 100%);
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: var(--night-2);
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.toast.visible { opacity: 1; transform: none; }
.toast.leaving { transform: translateY(-6px); }
.toast img, .toast .glyph { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.toast .glyph { display: grid; place-items: center; background: var(--lantern-soft); color: var(--lantern); }
.toast.remember { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.08rem; }
.toast.remember .glyph, .toast.remember img { box-shadow: 0 0 0 2px var(--lantern); }

/* ============================================================== 5. pantallas completas */
.screen {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(8, 10, 15, 0.94);
    display: grid;
    place-items: center;
    padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
    opacity: 0;
    transition: opacity 0.6s var(--ease);
    overflow-y: auto;
}
.screen.visible { opacity: 1; }
.screen.solid { background: #07090d; }
.ep-title { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; cursor: pointer; }
.ep-title .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.55; animation: drift 12s ease-out forwards; }
.ep-title .bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(8, 10, 15, 0.2), rgba(8, 10, 15, 0.92)); }
.ep-title .inner { position: relative; padding: 24px; }
.ep-num { font-size: 1rem; letter-spacing: 0.32em; color: var(--lantern); font-weight: 700; animation: rise 1.2s var(--ease) 0.2s both; }
.ep-main { font: 500 clamp(2.4rem, 11vw, 5.6rem)/1.02 var(--serif); margin: 14px 0 10px; animation: rise 1.6s var(--ease) 0.5s both; text-wrap: balance; }
.ep-sub { font: italic 400 clamp(1.1rem, 4vw, 1.6rem) var(--serif); color: var(--muted); animation: rise 1.6s var(--ease) 1.1s both; }
.ep-hint { position: fixed; bottom: calc(24px + var(--safe-b)); left: 0; right: 0; color: var(--muted); font-size: 0.9rem; animation: rise 1s var(--ease) 2.4s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.card-screen { width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--night-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); overflow: hidden; }
.card-screen header { padding: 22px 20px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: center; }
.card-screen header img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-left: auto; }
.card-screen .kicker { color: var(--lantern); font-weight: 700; font-size: 0.92rem; }
.card-screen h2 { font: 500 1.7rem/1.15 var(--serif); }
.card-screen .body { padding: 6px 20px 18px; overflow-y: auto; }
.card-screen .body h3 { font: 600 1.02rem var(--serif); margin: 16px 0 6px; color: var(--muted); }
.card-screen .body ul { margin: 0; padding-left: 18px; }
.card-screen .body li { margin: 4px 0; }
.card-screen .body li.up::marker { color: var(--ok); }
.card-screen .body li.down::marker { color: var(--alert); }
.card-screen footer { padding: 14px 20px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.next-time { font: italic 1.1rem/1.45 var(--serif); }

.loot-item { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.loot-item .name { font: 600 1.1rem var(--serif); }
.loot-item .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loot-item .acts .btn.chosen { background: var(--lantern); color: var(--lantern-ink); border-color: var(--lantern); }
.loot-claims { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.loot-claims .need { color: #f2c98a; }
.loot-result { font-weight: 700; color: var(--ok); }

.spot-screen { text-align: center; max-width: 560px; cursor: pointer; }
.spot-screen img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 2px solid var(--lantern); box-shadow: 0 0 0 8px rgba(232, 163, 61, 0.12); animation: rise 0.9s var(--ease) both; }
.spot-screen .k { color: var(--lantern); font-weight: 700; letter-spacing: 0.06em; animation: rise 0.9s var(--ease) 0.15s both; }
.spot-screen h2 { font: 500 clamp(1.8rem, 7vw, 3rem)/1.1 var(--serif); margin: 8px 0 12px; animation: rise 1s var(--ease) 0.3s both; }
.spot-screen p { font: italic 1.15rem/1.5 var(--serif); color: var(--muted); animation: rise 1s var(--ease) 0.5s both; }

.lightbox { display: grid; gap: 10px; justify-items: center; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: var(--r-sm); }

/* ============================================================== confirmación */
.confirm { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--night-2); color: var(--parchment); padding: 22px; width: min(420px, calc(100% - 32px)); }
.confirm::backdrop { background: rgba(5, 7, 10, 0.72); }
.confirm h2 { font: 500 1.35rem var(--serif); }
.confirm p { color: var(--muted); }
.confirm menu { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 0 0; padding: 0; }
.confirm menu button { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font-weight: 700; }
.confirm menu button.primary { background: var(--alert); border-color: var(--alert); color: #1d0c07; }

/* ============================================================== entrada */
.gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(70% 50% at 50% 35%, rgba(232, 163, 61, 0.1), transparent 70%),
        var(--night);
    transition: opacity 0.6s var(--ease);
}
.gate.leaving { opacity: 0; pointer-events: none; }
.gate-inner { max-width: 420px; display: grid; gap: 18px; justify-items: center; }
.gate-mark { font: 500 1rem var(--sans); letter-spacing: 0.55em; padding-left: 0.55em; color: var(--lantern); }
.gate h1 { font: 500 clamp(2rem, 8vw, 2.8rem)/1.1 var(--serif); }
.gate-text { margin: 0; color: var(--muted); font-size: 1.05rem; }
.gate .start {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 1px solid rgba(232, 163, 61, 0.6);
    background: radial-gradient(circle, rgba(232, 163, 61, 0.22), rgba(232, 163, 61, 0.04) 70%);
    color: var(--parchment);
    font: 500 1.35rem/1.2 var(--serif);
    box-shadow: 0 0 0 10px rgba(232, 163, 61, 0.06), 0 0 60px rgba(232, 163, 61, 0.12);
    position: relative;
}
/* El halo late con opacidad y escala (en el compositor), no animando box-shadow. */
.gate .start::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; box-shadow: 0 0 0 8px rgba(232, 163, 61, 0.05), 0 0 80px rgba(232, 163, 61, 0.2); opacity: 0; animation: glow 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes glow { 0%, 100% { opacity: 0; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.gate ul { text-align: left; color: var(--muted); padding-left: 18px; margin: 0; }
.gate ul li { margin: 6px 0; }

/* ============================================================== escritorio */
@media (min-width: 640px) {
    .band-detail { display: inline; }
    .band-detail:empty { display: none; }
    .band-detail::before { content: "· "; }
    .subtitle-text { font-size: 1.5rem; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
    :root { --band-h: 56px; }
    #app {
        grid-template-columns: minmax(0, 1fr) 420px;
        grid-template-rows: var(--band-h) 1fr;
        grid-template-areas: "band band" "stage side";
    }
    .tabs {
        grid-area: side;
        align-self: start;
        z-index: 12;
        height: 60px;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        border-left: 1px solid var(--line);
        background: var(--night);
    }
    .tabs .tab-scene { display: none; }
    .tabs button { flex-direction: row; gap: 8px; font-size: 0.98rem; }
    .tabs button svg { display: none; }
    .tabs button[aria-current="page"]::before { top: auto; bottom: -1px; }
    .badge { top: 14px; left: auto; right: 14px; }
    .panel, #app:not([data-tab="scene"]) .panel {
        grid-area: side;
        display: block;
        margin-top: 60px;
        border-left: 1px solid var(--line);
        background: var(--night);
    }
    .panel-inner { padding: 20px 22px 40px; }
    .scene-head { padding: 24px 32px 0; }
    .scene-title { font-size: 2rem; }
    .scene-place { font-size: 1.05rem; }
    .subtitle-wrap { padding: 0 32px 22px; }
    .subtitle-text { font-size: 1.7rem; }
    .subtitle-portrait { width: 72px; height: 72px; }
    .sheet {
        align-self: center;
        width: min(820px, calc(100% - 48px));
        max-height: 60%;
        border-radius: var(--r-lg);
        border: 1px solid var(--line-strong);
        margin-bottom: 24px;
    }
    .sheet-card { padding: 18px 22px 22px; }
    .sheet-body.opts { grid-template-columns: 1fr 1fr; }
    .sheet-body.opts .opt.free, .sheet-body.opts .free-box { grid-column: span 2; }
    .opt-key { font-size: 0.9rem; }
    .toasts { left: auto; right: 444px; top: calc(var(--band-h) + 20px); justify-items: end; }
    .drawer { left: 24px; right: auto; width: 560px; bottom: 24px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); }
}

/* ============================================================== fase 2: combate mixto */
/* Una decisión o votación durante el combate flota arriba, plegada, sin tapar la barra de acciones. */
#app[data-combat] .sheet {
    position: absolute;
    z-index: 6;
    top: var(--cb-sheet-top, 84px);
    left: 8px;
    right: 64px;
    max-height: 62%;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-strong);
}
#app[data-combat] .sheet.min .sheet-card { padding-top: 10px; padding-bottom: 10px; }
#app[data-combat] .sheet.min .sheet-prompt { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#app[data-combat] .sheet.min .sheet-card.compact { display: none; }
#app[data-combat] .scene-head,
#app[data-combat] .subtitle-wrap,
#app[data-combat] .spot-pill { visibility: hidden; }
.combat {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 80% at 50% 40%, #1d2433 0%, #0d1118 75%);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.combat.on { opacity: 1; }
.combat.leaving { opacity: 0; }

.cb-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(18, 23, 34, 0.9);
    border-bottom: 1px solid var(--line);
    min-height: 58px;
}
.cb-round { display: grid; justify-items: center; line-height: 1; flex: none; padding-right: 12px; border-right: 1px solid var(--line); }
.cb-round .k { font-size: 0.75rem; color: var(--muted); }
.cb-round strong { font: 600 1.4rem var(--serif); }
.cb-order { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.cb-order::-webkit-scrollbar { display: none; }
.cb-ini { position: relative; display: flex; align-items: center; gap: 6px; flex: none; }
.cb-ini img, .cb-ini .ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ok); background: var(--night-3); display: grid; place-items: center; font-weight: 700; }
.cb-ini.foe img, .cb-ini.foe .ph { border-color: var(--alert); }
.cb-ini.mine img { border-color: var(--lantern); }
.cb-ini.defeated { opacity: 0.35; filter: grayscale(1); }
.cb-ini.current { padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--lantern-soft); }
.cb-ini.current img, .cb-ini.current .ph { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--lantern); }
.cb-ini .name { font-weight: 700; font-size: 0.95rem; color: #f2c98a; white-space: nowrap; }

.cb-viewport { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; min-height: 0; }
.cb-viewport:active { cursor: grabbing; }
.combat.moding .cb-viewport { cursor: pointer; }
.cb-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); background: #22201c; }
.cb-board.glide { transition: transform 0.45s var(--ease); }
.cb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.cb-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(236, 228, 211, 0.13) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(236, 228, 211, 0.13) 1px, transparent 1px);
    background-size: var(--cell) var(--cell);
}
.cb-marks, .cb-tokens { position: absolute; inset: 0; pointer-events: none; }
.cb-cell {
    position: absolute;
    width: var(--cell);
    height: var(--cell);
    display: grid;
    place-items: center;
}
.cb-cell.reach { background: rgba(232, 163, 61, 0.2); box-shadow: inset 0 0 0 1px rgba(232, 163, 61, 0.55); animation: reach-in 0.3s var(--ease) both; }
.cb-cell.reach span { font: 700 14px var(--sans); color: rgba(255, 235, 200, 0.6); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
@keyframes reach-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }

.cb-tok { position: absolute; left: 0; top: 0; transition: transform 0.45s var(--ease); }
.cb-tok .disc {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    border: 4px solid var(--ok);
    background: var(--night-3);
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
.cb-tok .disc img { width: 100%; height: 100%; object-fit: cover; }
.cb-tok.foe .disc { border-color: var(--alert); }
.cb-tok.neutral .disc { border-color: var(--parchment); }
.cb-tok.mine .disc { border-color: var(--lantern); box-shadow: 0 0 0 3px rgba(18, 23, 34, 0.9), 0 0 22px rgba(232, 163, 61, 0.55); }
.cb-tok.current::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid var(--lantern);
    animation: turn-ring 1.6s ease-in-out infinite;
}
@keyframes turn-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.45; } }
.cb-tok.defeated { filter: grayscale(1); opacity: 0.5; }
.cb-tok.defeated .disc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 46%, rgba(0, 0, 0, 0.8) 46% 54%, transparent 54%); }
.cb-tok.h-herido .disc { border-style: solid; }
.cb-tok.h-herido::after, .cb-tok.h-malherido::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--night);
    background: #e3a548;
}
.cb-tok.h-malherido::after { background: #d8452e; }
.cb-tok .tag {
    position: absolute;
    left: 50%;
    top: calc(100% - 4px);
    transform: translateX(-50%);
    padding: 1px 8px;
    border-radius: 99px;
    background: rgba(12, 15, 22, 0.88);
    font: 700 13px var(--sans);
    white-space: nowrap;
    display: none;
}
.cb-tok.mine .tag, .cb-tok.current .tag, .cb-tok.target .tag, .cb-tok.selected .tag { display: block; }
.cb-tok.mine .tag { color: #f2c98a; }
.cb-tok .hpbar { position: absolute; left: 12px; right: 12px; bottom: 1px; height: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.7); overflow: hidden; }
.cb-tok .hpbar i { display: block; height: 100%; background: var(--ok); }
.cb-tok .bonus {
    position: absolute;
    right: -6px;
    top: -6px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--alert);
    color: #1d0c07;
    font: 700 14px/22px var(--sans);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.cb-tok.target .disc { box-shadow: 0 0 0 3px rgba(216, 105, 78, 0.35), 0 0 24px rgba(216, 105, 78, 0.7); }
.cb-tok.target::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed var(--alert);
    animation: spin 6s linear infinite;
}
.cb-tok.unreachable { opacity: 0.4; filter: grayscale(0.85); }
.cb-tok.selected .disc { box-shadow: 0 0 0 3px var(--parchment); }

.cb-zoom { position: absolute; right: 10px; top: 84px; z-index: 2; display: grid; gap: 6px; }
.cb-zoom button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(18, 23, 34, 0.85); font-size: 1.3rem; line-height: 1; display: grid; place-items: center; }
.cb-zoom svg { width: 20px; height: 20px; }

.cb-info { position: absolute; left: 10px; top: 84px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--line-strong); max-width: calc(100% - 80px); }
.cb-info img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cb-info div { display: grid; line-height: 1.2; padding-right: 4px; }
.cb-info .icon-btn { width: 44px; height: 44px; margin-left: 4px; }
.cb-info .hp-malherido { color: #f0a08c; }
.cb-info .hp-herido { color: #f2c98a; }

/* Letrero breve (lo anima view.js con WAAPI; .static si el navegador no la tiene). */
.cb-banner { position: absolute; left: 0; right: 0; top: 12%; z-index: 7; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.cb-banner.static { opacity: 1; }
.cb-flash { display: grid; justify-items: center; gap: 4px; padding: 16px 28px; border-radius: var(--r-lg); background: rgba(12, 15, 22, 0.86); border: 1px solid var(--line-strong); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); text-align: center; }
.cb-flash strong { font: 600 clamp(2rem, 9vw, 3.2rem)/1.05 var(--serif); }
.cb-flash span { color: var(--muted); font-weight: 700; }
.cb-flash.crit strong { color: var(--lantern); text-shadow: 0 0 30px rgba(232, 163, 61, 0.6); }
.cb-flash.hit strong { color: var(--parchment); }
.cb-flash.miss strong, .cb-flash.fumble strong { color: var(--muted); }
.cb-flash.turn { background: var(--lantern); border-color: var(--lantern); }
.cb-flash.turn strong { color: var(--lantern-ink); }
.cb-flash.move { padding: 10px 20px; }
.cb-flash.move strong { font-size: 1.2rem; font-family: var(--sans); font-weight: 700; }

.cb-bottom { position: relative; z-index: 3; background: var(--night-2); border-top: 1px solid var(--line-strong); padding: 10px 12px 12px; box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.4); }
.cb-turnline { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 32px; white-space: nowrap; }
.cb-yours { font: 600 1.25rem var(--serif); color: var(--lantern); }
.cb-pips { display: inline-flex; gap: 6px; }
.cb-pips i { width: 13px; height: 13px; transform: rotate(45deg); border: 2px solid rgba(232, 163, 61, 0.55); border-radius: 2px; transition: background 0.3s, border-color 0.3s; }
.cb-pips i.on { background: var(--lantern); border-color: var(--lantern); box-shadow: 0 0 10px rgba(232, 163, 61, 0.5); }
.cb-left { color: var(--muted); font-size: 0.92rem; }
.cb-hint {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 80px;
    margin: 0 auto;
    width: max-content;
    max-width: calc(100% - 24px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: rgba(12, 15, 22, 0.92);
    border: 1px solid var(--lantern);
    color: var(--parchment);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: rise 0.3s var(--ease) both;
}
.cb-hint.strike { border-color: var(--alert); }
.cb-hint:not(:has(button)) { padding-right: 16px; }
.cb-hint-x { min-height: 44px; border: 0; border-radius: 999px; padding: 4px 14px; background: rgba(236, 228, 211, 0.1); font-weight: 700; font-size: 0.88rem; }
.cb-logbtn { margin-left: auto; flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 5px 14px 5px 11px; color: var(--muted); font-size: 0.88rem; }
.cb-logbtn svg { width: 16px; height: 16px; }
.cb-logbtn.open { color: var(--parchment); border-color: var(--line-strong); }
/* Móvil: fila de acciones (moverse, armas, más acciones) y, debajo, «Terminar turno» a todo lo ancho (siempre visible). */
.cb-actions { display: grid; gap: 8px; }
.cb-acts-main { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cb-acts-main::-webkit-scrollbar { display: none; }
.cb-acts-main .cb-act { max-width: none; }
.cb-act {
    flex: 1 0 76px;
    max-width: 120px;
    min-height: 88px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    padding: 10px 6px 8px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, #2a3446, var(--night-3));
    text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.cb-act:active:not(:disabled) { transform: scale(0.96); }
.cb-act-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, 0.25); color: var(--parchment); overflow: hidden; }
.cb-act-ico img { width: 100%; height: 100%; object-fit: cover; }
.cb-act-ico svg { width: 24px; height: 24px; }
.cb-act-name { font-weight: 700; font-size: 0.9rem; line-height: 1.15; }
.cb-act-sub { font-size: 0.8rem; color: var(--muted); }
.cb-act-sub b { color: #f2c98a; font-size: 0.95rem; }
.cb-act-range { font-size: 0.75rem; color: var(--faint); }
.cb-act.on { border-color: var(--lantern); background: linear-gradient(180deg, #4a3a20, #33291a); box-shadow: 0 0 0 1px var(--lantern), 0 8px 20px rgba(232, 163, 61, 0.2); }
.cb-act.strike.on { border-color: var(--alert); background: linear-gradient(180deg, #4a2a22, #321d18); box-shadow: 0 0 0 1px var(--alert); }
.cb-act.end { background: transparent; border-style: dashed; }
.cb-act.end { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: none; padding: 6px 14px; }
.cb-act.end .cb-act-ico { width: 28px; height: 28px; background: none; }
.cb-act.end .cb-act-sub::before { content: "· "; }
.cb-act.more { border-color: rgba(232, 163, 61, 0.5); }
.cb-act.more .cb-act-ico { color: var(--lantern); }
.cb-act:disabled { opacity: 0.4; }
.cb-wait { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cb-wait strong { font: 500 1.15rem var(--serif); }
.cb-wait-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--parchment); animation: breathe 1.6s ease-in-out infinite; }
.cb-wait-dot.foe { background: var(--alert); }
.cb-log { position: absolute; left: 10px; right: 10px; bottom: 170px; z-index: 4; max-height: 40%; overflow-y: auto; border-radius: var(--r-md); background: rgba(18, 23, 34, 0.96); border: 1px solid var(--line-strong); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
.cb-log ol { list-style: none; margin: 0; padding: 6px 14px; }
.cb-log li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.cb-log li:last-child { border-bottom: 0; }
.cb-log li.strike { color: var(--parchment); }
.cb-log li.move, .cb-log li.end_turn { color: var(--muted); }
.combat.busy .cb-viewport { cursor: progress; }

@media (min-width: 1000px) {
    .cb-top { padding: 10px 20px; }
    .cb-bottom { padding: 12px 20px 16px; }
    .cb-actions { display: flex; justify-content: center; gap: 8px; }
    .cb-acts-main { display: flex; gap: 8px; overflow: visible; }
    .cb-act { flex: 0 0 108px; min-height: 100px; }
    .cb-act.end { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 6px 8px; min-height: 100px; margin-left: 24px; }
    .cb-act.end .cb-act-ico { width: 38px; height: 38px; background: rgba(0, 0, 0, 0.25); }
    .cb-act.end .cb-act-sub::before { content: none; }
    .cb-zoom { right: 16px; top: 92px; }
    .cb-log { left: auto; right: 16px; width: 420px; }
    #app[data-combat] .sheet { right: auto; width: min(560px, calc(100% - 96px)); }
}

/* ============================================================== QA de UX (ronda 3) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast.error { border-color: var(--alert); background: #2a1814; font-family: var(--sans); font-style: normal; }
.toast.error .glyph { background: rgba(216, 105, 78, 0.18); color: #f0a08c; }
.sheet-kicker.listen { color: var(--muted); }

/* mis PG en combate */
.cb-me { display: flex; align-items: center; gap: 8px; min-width: 0; margin: -4px 0 10px; }
.cb-wait + * { margin-top: 0; }
.cb-me .who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.cb-me .hp { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.cb-me .hp svg { width: 16px; height: 16px; color: #e0705a; }
.cb-me .bar { width: 64px; height: 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); overflow: hidden; flex: none; }
.cb-me .bar i { display: block; height: 100%; background: var(--ok); transition: width 0.4s var(--ease); }
.cb-me .bar.low i { background: var(--alert); }
.cb-me .ac { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.cb-turnline { flex-wrap: wrap; row-gap: 6px; }
.cb-flash.hurt { border-color: var(--alert); background: #2a1814; }
.cb-flash.hurt strong { color: #f0a08c; font-size: clamp(1.6rem, 7vw, 2.4rem); }
.cb-flash.start strong { font-size: clamp(1.8rem, 8vw, 2.6rem); }
.cb-flash .legend { display: flex; gap: 14px; justify-content: center; font-weight: 700; color: var(--parchment); }
.cb-flash .legend .f { color: #f0a08c; }
.cb-flash .legend .a { color: #b9d6aa; }

/* marca de enemigo (no solo color) */
.cb-tok .mark { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: var(--alert); color: #1d0c07; border: 2px solid var(--night); }
.cb-tok .mark svg { width: 13px; height: 13px; }
.cb-tok.foe .mark { display: grid; }
.cb-tok.defeated .mark { display: none; }

/* nombres bajo la iniciativa */
.cb-ini { flex-direction: column; gap: 2px; width: 52px; }
.cb-ini .nm { max-width: 52px; font-size: 0.75rem; line-height: 1.1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.cb-ini.current { padding: 0; background: none; }
.cb-ini.current .nm { color: #f2c98a; font-weight: 700; }
.cb-ini .tag-foe { position: absolute; top: -2px; right: 6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--alert); color: #1d0c07; }
.cb-ini .tag-foe svg { width: 10px; height: 10px; }
.cb-ini.current .tag-foe { right: 2px; }

/* acciones accesibles: objetivos y acercarse */
.cb-choices { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; }
.cb-choices::-webkit-scrollbar { display: none; }
.cb-choice { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--night-3); font-weight: 700; font-size: 0.9rem; }
.cb-choice img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cb-choice.strike { border-color: rgba(216, 105, 78, 0.7); }
.cb-choice small { font-weight: 500; color: var(--muted); }
.cb-act-help { font-size: 0.75rem; color: var(--muted); line-height: 1.15; }

/* fin del combate */
.cb-end { text-align: center; max-width: 440px; width: 100%; padding: 26px 22px 20px; border-radius: var(--r-lg); background: var(--night-2); border: 1px solid var(--line-strong); }
.cb-end h2 { font: 500 2rem var(--serif); margin-bottom: 8px; }
.cb-end p { color: var(--muted); margin: 6px 0; }
.cb-end .hpbig { font: 600 1.3rem var(--sans); color: var(--parchment); display: inline-flex; align-items: center; gap: 6px; }
.cb-end .hpbig svg { color: #e0705a; }
.cb-end ul { list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cb-end li { padding: 3px 12px; border-radius: 99px; background: rgba(216, 105, 78, 0.12); color: #f0a08c; font-size: 0.9rem; }
.stat-line { margin: 6px 0 0; color: var(--parchment); font-weight: 700; display: flex; gap: 12px; flex-wrap: wrap; }
.stat-line span { display: inline-flex; align-items: center; gap: 5px; }
.stat-line svg { width: 16px; height: 16px; color: #e0705a; }

/* pantallas pequeñas: 320–359 px */
@media (max-width: 359px) {
    body { font-size: 16px; }
    .band-main { padding: 0 12px; }
    .tabs button { font-size: 0.75rem; }
    .cb-acts-main { grid-auto-columns: minmax(56px, 1fr); gap: 5px; }
    .cb-act { max-width: none; min-height: 72px; }
    .cb-act-name { font-size: 0.84rem; }
    .cb-act-sub { font-size: 0.75rem; }
    .cb-act-ico { width: 30px; height: 30px; }
    .cb-me .bar { width: 44px; }
    .opt { grid-template-columns: 28px 1fr; }
    .opt-key { width: 26px; height: 26px; }
}

/* móvil en horizontal */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --band-h: 40px; --tabs-h: 46px; }
    .tabs button { flex-direction: row; gap: 6px; }
    .tabs button svg { width: 18px; height: 18px; }
    .band-text { font-size: 0.98rem; }
    .stage.has-sheet .scene-head { display: none; }
    .stage.has-sheet .sheet { max-height: 82%; }
    .subtitle-text { font-size: 1.08rem; }
    .subtitle-portrait { width: 40px; height: 40px; }
    .scene-head { padding-top: 8px; }
    .scene-cast { display: none; }
    .combat { display: grid; grid-template-columns: 1fr minmax(260px, 42%); grid-template-rows: auto 1fr; }
    .cb-top { grid-column: 1 / -1; min-height: 50px; padding: 4px 10px; }
    .cb-viewport { grid-column: 1; grid-row: 2; }
    .cb-bottom { grid-column: 2; grid-row: 2; overflow-y: auto; border-top: 0; border-left: 1px solid var(--line-strong); box-shadow: none; }
    .cb-acts-main { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
    .cb-act { max-width: none; min-height: 70px; }
    .cb-zoom { top: 58px; right: calc(42% + 10px); }
    .cb-ini .nm { display: none; }
    .ep-main { font-size: 2.4rem; }
    :root { --tabs-h: 40px; }
    .tabs button { font-size: 0.8rem; }
    .sheet-body.opts { grid-template-columns: 1fr 1fr; }
    .sheet-body.opts .opt.free, .sheet-body.opts .free-box { grid-column: span 2; }
    .opt { min-height: 0; padding: 8px 10px; }
    .sheet-card { padding: 10px 14px 12px; }
    .sheet-prompt { font-size: 1.02rem; }
    #app[data-combat] .sheet { right: calc(42% + 8px); }
    .cb-hint { right: 42%; max-width: calc(58% - 24px); font-size: 0.88rem; }
    .cb-flash strong { font-size: 1.8rem; }
    .cb-flash { padding: 10px 20px; }
}

/* ============================================================== mapa del lugar como fondo provisional */
/* Sin filtros (blur+saturate+brightness+sepia sobre una imagen animada se rehacía en cada frame): el mapa se
   apaga con opacidad sobre el fondo oscuro y una viñeta cálida encima que entra con el fundido. */
.scene-bg img.map.on { opacity: 0.5; }
.scene-bg img.map.on, .scene-bg img.map.out { animation: drift-map 60s ease-in-out infinite alternate; }
@keyframes drift-map { from { transform: scale(1.06); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 42%, rgba(40, 30, 16, 0.12) 30%, rgba(12, 15, 22, 0.85) 100%); pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.scene-bg.is-map::after { opacity: 1; }

/* ============================================================== ficha completa */
.sh-hero { display: flex; gap: 16px; align-items: center; }
.sh-portrait { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lantern); box-shadow: 0 0 0 5px rgba(232, 163, 61, 0.12); flex: none; }
.sh-id { min-width: 0; }
.sh-id .ph { margin: 0; }
.sh-sub { margin: 2px 0 0; font-weight: 700; color: #f2c98a; }
.sh-origin { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.sh-vitals { display: grid; gap: 10px; margin-top: 16px; }
.sh-hp { padding: 12px 14px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.sh-hp-top { display: flex; align-items: baseline; gap: 6px; }
.sh-hp-top svg { width: 22px; height: 22px; color: #e0705a; align-self: center; }
.sh-hp-top b { font: 600 2.1rem/1 var(--serif); }
.sh-hp-top span { color: var(--muted); font-size: 1.1rem; }
.sh-hp-top small { margin-left: auto; color: var(--muted); font-weight: 700; }
.sh-hp-bar { height: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.4); overflow: hidden; margin-top: 8px; }
.sh-hp-bar i { display: block; height: 100%; background: var(--ok); border-radius: 10px; }
.sh-hp.low .sh-hp-bar i { background: var(--alert); }
.sh-temp { display: block; margin-top: 4px; color: #b9d6aa; }
/* 4 en fila desde 360 px (sin «Foco» huérfano en una segunda fila); 2 × 2 en los más estrechos. */
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.tile { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 80px; padding: 8px 4px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); text-align: center; }
.tile svg { width: 18px; height: 18px; color: var(--muted); }
.tile b { font: 600 1.6rem/1 var(--serif); }
.tile span { font-size: 0.8rem; color: var(--muted); line-height: 1.2; }
.tile small { font-size: 0.75rem; color: var(--muted); }
/* Se ve pequeña, pero se toca en 44 px (el ::before amplía la zona). */
.chip.help { position: relative; border: 1px dashed rgba(236, 228, 211, 0.25); min-height: 32px; padding: 0 10px; font: inherit; font-size: 0.82rem; cursor: help; }
.chip.help::before { content: ""; position: absolute; inset: -6px -2px; }
.sh-inv .ph { display: grid; place-items: center; color: var(--muted); }
.sh-inv .ph svg { width: 20px; height: 20px; }
.toast.tip { font-weight: 500; }
.pips { display: inline-flex; gap: 5px; margin: 6px 0 4px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(232, 163, 61, 0.6); }
.pips i.on { background: var(--lantern); border-color: var(--lantern); }
.sh-zero { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: rgba(216, 105, 78, 0.1); border: 1px solid rgba(216, 105, 78, 0.45); color: #f0a08c; font-weight: 700; }
.sh-zero svg { width: 20px; height: 20px; }
.sh-conds { margin-top: 10px; align-items: center; }
.sh-nav { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 18px -16px 0; padding: 10px 16px; background: linear-gradient(var(--night) 80%, rgba(18, 23, 34, 0)); }
.sh-nav::-webkit-scrollbar { display: none; }
.sh-nav button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--night-2); font-weight: 700; font-size: 0.88rem; color: var(--muted); }
.sh-sec { scroll-margin-top: 64px; }
.sh-sec > h3 { margin-top: 24px; }
.sh-help { margin: -4px 0 10px; color: var(--muted); font-size: 0.88rem; line-height: 1.35; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip.ok { background: rgba(147, 183, 131, 0.14); color: #b9d6aa; }

.sh-atks { display: grid; gap: 8px; }
.sh-atk { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.sh-atk.stowed { opacity: 0.7; }
.sh-atk-ico { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--night-3); }
.sh-atk-ico img { width: 100%; height: 100%; object-fit: cover; }
.sh-atk-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.sh-atk-head strong { font: 600 1.08rem var(--serif); }
.sh-hit { white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.sh-hit b { font-size: 1.25rem; color: #f2c98a; }
.sh-atk-line { margin-top: 2px; font-weight: 700; font-size: 0.95rem; }
.sh-atk-more { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.sh-atk .sh-chips { margin-top: 8px; }

.sh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); }
.sh-list li:not(:has(.ag)) { grid-template-columns: 1fr; }
.sh-list strong { font-weight: 700; }
.sh-list p { margin: 3px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.ag { min-width: 34px; padding: 2px 6px; border-radius: 8px; background: var(--lantern-soft); color: var(--lantern); font-size: 0.82rem; letter-spacing: 1px; text-align: center; line-height: 1.6; white-space: nowrap; }
.sh-spellgroup h4 { margin: 12px 0 4px; font: 600 1rem var(--serif); color: #f2c98a; }

.sh-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sh-skills summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--night-2); cursor: pointer; }
.sh-skills summary::-webkit-details-marker { display: none; }
.sh-skills .nm { font-weight: 700; }
.sh-skills .rk { font-size: 0.78rem; padding: 0 8px; border-radius: 99px; background: rgba(236, 228, 211, 0.08); color: var(--muted); }
.sh-skills .rk.r2 { background: rgba(147, 183, 131, 0.14); color: #b9d6aa; }
.sh-skills .rk.r3, .sh-skills .rk.r4 { background: var(--lantern-soft); color: #f2c98a; }
.sh-skills .md { margin-left: auto; font: 600 1.15rem var(--serif); }
.sh-skills .untrained .nm, .sh-skills .untrained .md { color: var(--muted); font-weight: 500; }
.sh-skills details p { margin: 0; padding: 8px 12px 10px; color: var(--muted); font-size: 0.92rem; }
.sh-skills details[open] summary { border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--night-3); }

.sh-fold > summary { list-style: none; display: flex; align-items: center; min-height: 48px; cursor: pointer; }
.sh-fold > summary::-webkit-details-marker { display: none; }
.sh-fold > summary h3 { margin: 18px 0 8px; }
.sh-fold > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-top: 6px; }
.sh-fold[open] > summary::after { transform: rotate(-135deg); }
.sh-attrs, .sh-saves { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sh-attr, .sh-saves > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--night-2); }
.sh-attr b, .sh-saves b { grid-row: span 2; font: 600 1.3rem var(--serif); min-width: 2.2ch; }
.sh-attr span, .sh-saves span { font-weight: 700; }
.sh-attr small, .sh-saves small { color: var(--muted); font-size: 0.78rem; line-height: 1.2; }
.sh-fold h4 { margin: 14px 0 6px; font: 600 1rem var(--serif); }

.sh-coins { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; }
.coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe2a0, #c98f2c 70%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); }
.sh-inv { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sh-inv li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: var(--r-sm); background: var(--night-2); }
.sh-inv img, .sh-inv .ph { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--night-3); flex: none; }
.sh-inv .nm { flex: 1; min-width: 0; }
.sh-inv .qty { color: var(--muted); font-weight: 700; }
.sh-inv li.eq { border-left: 3px solid var(--ok); }

.levelup.compact { display: grid; gap: 10px; }

/* camino de subida */
.route { list-style: none; margin: 0; padding: 0; position: relative; }
.rt { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding-bottom: 14px; }
.rt::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line-strong); }
.rt:last-child::before { display: none; }
.rt-node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 1.05rem var(--serif); background: var(--night-2); border: 2px solid var(--line-strong); color: var(--muted); z-index: 1; }
.rt-node svg { width: 18px; height: 18px; }
.rt.done .rt-node { background: rgba(147, 183, 131, 0.16); border-color: var(--ok); color: var(--ok); }
.rt.done::before { background: var(--ok); }
.rt.current .rt-node { background: var(--lantern); border-color: var(--lantern); color: var(--lantern-ink); box-shadow: 0 0 0 6px rgba(232, 163, 61, 0.15); }
.rt.ready .rt-node { border-color: var(--lantern); color: var(--lantern); animation: breathe 1.8s ease-in-out infinite; }
.rt-body { padding: 8px 12px 12px; border-radius: var(--r-md); background: var(--night-2); border: 1px solid var(--line); min-width: 0; }
.rt.current .rt-body { border-color: rgba(232, 163, 61, 0.5); }
.rt.ready .rt-body { border-color: var(--lantern); background: linear-gradient(180deg, rgba(232, 163, 61, 0.1), transparent 70%), var(--night-2); }
.rt.soon .rt-body { opacity: 0.72; }
.rt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rt-head strong { font: 600 1.05rem var(--serif); }
.rt-state { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.rt.ready .rt-state, .rt.current .rt-state { color: #f2c98a; }
.rt-auto { margin: 6px 0 0; font-size: 0.92rem; }
.rt-picks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.rt-picks li { font-size: 0.95rem; }
.rt-picks li > .chip, .rt-picks li > .ag { margin-right: 6px; }
.rt-picks p { margin: 2px 0 0; color: var(--muted); font-size: 0.88rem; }
.rt-line { margin: 6px 0 0; font-size: 0.92rem; }
.rt-body .btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Con la hoja abierta en móvil, el subtítulo cede sitio. */
@media (max-width: 999px) {
    .stage.has-sheet .subtitle-text { font-size: 1.1rem; line-height: 1.38; }
    .stage.has-sheet .subtitle-portrait { width: 42px; height: 42px; }
    .stage.has-sheet .scene-cast { display: none; }
    .stage.has-sheet .history-btn { padding: 4px 10px 4px 8px; font-size: 0.85rem; }
    .stage.has-sheet .scene-place { display: none; }
    .stage.has-sheet .scene-title { font-size: 1.12rem; }
    .stage.has-sheet .sheet { max-height: 74%; }
    .stage.has-sheet .subtitle-wrap { padding-bottom: 10px; gap: 8px; }
    .opt { min-height: 58px; padding: 10px 12px 10px 10px; column-gap: 10px; }
    .opt-label { font-size: 1.03rem; }
    .opt-intent { font-size: 0.93rem; }
    .opt-cost { margin-top: 4px; }
    .sheet-body { gap: 8px; margin-top: 12px; }
}

@media (max-width: 639px) {
    .cb-act.more .cb-act-sub { display: none; }
    .cb-logbtn { width: 44px; padding: 0; justify-content: center; }
    .cb-logbtn .lbl { display: none; }
    .cb-yours { font-size: 1.15rem; }
    .cb-act { min-height: 80px; padding: 8px 4px 6px; }
    .cb-act-ico { width: 32px; height: 32px; }
}

/* ============================================================== combate: más acciones, guía, derribado */
/* «?» de la línea de «Tu turno»: se ve pequeño, pero se toca en 44 px. */
.cb-help { flex: none; width: 44px; height: 44px; margin: -6px -6px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.cb-help span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: var(--muted); }
.cb-help:focus-visible { outline: none; }
.cb-help:focus-visible span, .cb-help:hover span { color: var(--parchment); border-color: var(--lantern); }

/* Ficha elegida en «¿Sobre quién?» */
.cb-tok.picked .disc { box-shadow: 0 0 0 3px var(--night), 0 0 0 6px var(--lantern), 0 0 26px rgba(232, 163, 61, 0.7); }
.cb-tok.picked .tag { display: block; }

/* Resultado de una acción especial (frase del GM) */
.cb-flash.special { max-width: min(560px, calc(100% - 32px)); border-color: rgba(232, 163, 61, 0.6); }
.cb-flash.special strong { font: 600 1.25rem/1.2 var(--serif); color: var(--lantern); }
.cb-flash.special span { font-weight: 600; color: var(--parchment); font-size: 1.02rem; line-height: 1.35; }

/* Turno con el personaje derribado: un solo botón */
.cb-downtag { padding: 2px 10px; border-radius: 999px; background: rgba(216, 105, 78, 0.16); color: #f0a08c; font-weight: 700; font-size: 0.85rem; }
.cb-downed { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); border: 1px solid rgba(216, 105, 78, 0.5); background: #2a1814; }
.cb-downed p { margin: 0; display: flex; gap: 10px; align-items: center; font-weight: 700; line-height: 1.3; }
.cb-downed-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(216, 105, 78, 0.18); color: #f0a08c; flex: none; }
.cb-downed-ico svg { width: 18px; height: 18px; }
.cb-pass { min-height: 56px; border-radius: 999px; border: 0; background: var(--lantern); color: var(--lantern-ink); font-weight: 700; font-size: 1.12rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cb-pass:disabled { opacity: 0.5; }
.cb-pass:active:not(:disabled) { transform: scale(0.98); }

/* Decisión o votación abierta durante el combate: pastilla pequeña que no tapa el mapa */
#app[data-combat] .sheet.pill { right: auto; width: auto; max-width: calc(100% - 72px); max-height: none; background: none; border: 0; box-shadow: none; overflow: visible; animation: none; }
.sheet-pill { max-width: 100%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px 4px 12px; border-radius: 999px; border: 1px solid var(--lantern); background: rgba(18, 23, 34, 0.94); font-weight: 700; font-size: 0.92rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.sheet-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-pill svg { width: 18px; height: 18px; }
.sheet-pill svg:first-child { color: var(--lantern); }
.sheet-pill svg:last-child { color: var(--muted); }
.sheet-pill.err { border-color: var(--alert); }

/* Guía del primer turno: aro sobre lo explicado (no bloquea los toques) y bocadillo */
.cb-tut-ring { position: absolute; z-index: 8; left: 0; top: 0; border-radius: 16px; box-shadow: 0 0 0 2px var(--lantern), 0 0 0 9999px rgba(5, 7, 10, 0.6); pointer-events: none; transition: transform 0.3s var(--ease); }
.cb-tut { position: absolute; z-index: 9; width: min(340px, calc(100% - 20px)); padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--night-2); border: 1px solid var(--lantern); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); animation: rise 0.3s var(--ease) both; }
.cb-tut-step { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--lantern); letter-spacing: 0.02em; }
.cb-tut h2 { margin: 2px 0 4px; font: 600 1.2rem/1.2 var(--serif); }
.cb-tut #cb-tut-text { margin: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.35; }
.cb-tut-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.cb-tut-arrow { position: absolute; width: 14px; height: 14px; background: var(--night-2); border: 1px solid var(--lantern); transform: rotate(45deg); }
.cb-tut[data-side="above"] .cb-tut-arrow { bottom: -8px; left: calc(var(--ax, 50%) - 7px); border-top: 0; border-left: 0; }
.cb-tut[data-side="below"] .cb-tut-arrow { top: -8px; left: calc(var(--ax, 50%) - 7px); border-bottom: 0; border-right: 0; }
.cb-tut[data-side="left"] .cb-tut-arrow { right: -8px; top: calc(var(--ay, 50%) - 7px); border-bottom: 0; border-left: 0; }
.cb-tut[data-side="right"] .cb-tut-arrow { left: -8px; top: calc(var(--ay, 50%) - 7px); border-top: 0; border-right: 0; }

/* Panel «Más acciones»: hoja inferior (móvil) o panel lateral (escritorio) */
.cb-more { padding: 0; border: 0; color: var(--parchment); background: var(--night-2); overflow: hidden; }
.cb-more[open] {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    max-height: min(90dvh, 900px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
    animation: cbm-up 0.32s var(--ease);
}
.cb-more::backdrop { background: rgba(5, 7, 10, 0.62); }
@keyframes cbm-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cbm-side { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cbm-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cbm-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.cbm-title { flex: 1; min-width: 0; }
.cbm-title h2 { font: 600 1.3rem/1.2 var(--serif); }
.cbm-title h2:focus { outline: none; }
.cbm-title p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.cbm-back { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 2px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font-weight: 700; font-size: 0.92rem; }
.cbm-back svg { width: 20px; height: 20px; }
.cb-more .cbm-x { flex: none; margin-left: 0; }
.cbm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 20px; }
.cbm-legend { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--night); border: 1px solid var(--line); }
.cbm-left { margin: 0; display: flex; align-items: center; gap: 10px; }
.cbm-left .cb-pips { padding-left: 2px; }
.cbm-left .cb-pips i { width: 11px; height: 11px; }
.cbm-key { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.cbm-key .g, .cbm-cost .g { color: var(--lantern); letter-spacing: 1px; }
.cbm-group { margin-top: 18px; }
.cbm-group h3 { font: 600 1.1rem var(--serif); margin-bottom: 8px; }
.cbm-group h4 { margin: 12px 0 2px; font: 700 0.95rem var(--sans); color: #f2c98a; }
.cbm-group h4 + .cbm-list, .cbm-help + .cbm-list { margin-top: 6px; }
.cbm-help { margin: 0; color: var(--muted); font-size: 0.85rem; }
.cbm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cbm-opt { display: flex; align-items: stretch; border-radius: var(--r-md); background: var(--night-3); border: 1px solid var(--line-strong); }
.cbm-pick { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 0; background: none; text-align: left; border-radius: var(--r-md); }
.cbm-pick .ag { flex: none; margin-top: 1px; }
.cbm-txt { min-width: 0; display: grid; gap: 2px; }
.cbm-txt strong { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.cbm-sum { color: var(--muted); font-size: 0.9rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbm-opt.open .cbm-sum { white-space: normal; }
.cbm-why { color: #f2c98a; font-size: 0.88rem; font-weight: 700; line-height: 1.3; }
.cbm-opt.off { background: transparent; border-color: var(--line); }
.cbm-opt.off strong { color: var(--muted); }
.cbm-opt.off .ag { background: rgba(236, 228, 211, 0.07); color: var(--faint); }
.cbm-opt.off .cbm-pick { cursor: default; }
.cbm-expand { flex: none; width: 44px; min-height: 44px; border: 0; border-left: 1px solid var(--line); background: none; display: grid; place-items: center; color: var(--muted); border-radius: 0 var(--r-md) var(--r-md) 0; }
.cbm-expand svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.cbm-opt.open .cbm-expand svg { transform: rotate(180deg); }
@media (hover: hover) { .cbm-opt:not(.off):hover, .cbm-tg:hover, .cbm-other:not([aria-disabled="true"]):hover { border-color: var(--lantern); } }
.cbm-other { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px dashed var(--lantern); background: rgba(232, 163, 61, 0.06); text-align: left; }
.cbm-other-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(232, 163, 61, 0.6); color: var(--lantern); flex: none; }
.cbm-other-ico svg { width: 16px; height: 16px; }
.cbm-other .cbm-sum { white-space: normal; }
.cbm-other[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.cbm-itimg { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; background: var(--night); display: grid; place-items: center; color: var(--lantern); }
.cbm-itimg svg { width: 20px; height: 20px; }
.cbm-chosen { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--night); border: 1px solid rgba(232, 163, 61, 0.45); }
.cbm-chosen strong { font: 600 1.12rem var(--serif); }
.cbm-chosen p { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.cbm-sub { margin: 16px 0 8px; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.cbm-cost { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.cbm-cost legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 0.95rem; }
.cbm-cost-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cbm-cost-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.cbm-cost-row button { min-height: 52px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--night-3); display: grid; justify-items: center; align-content: center; font-weight: 700; }
.cbm-cost-row button .g { font-size: 0.9rem; }
.cbm-cost-row button.on { border-color: var(--lantern); background: #3a2e1c; box-shadow: 0 0 0 1px var(--lantern); }
.cbm-cost-row button:disabled { opacity: 0.35; }
.cbm-targets { display: grid; gap: 6px; }
.cbm-tg-head { margin: 8px 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.cbm-tg-head:first-child { margin-top: 0; }
.cbm-tg-head.foe { color: #f0a08c; }
.cbm-tg-head.ally { color: #b9d6aa; }
.cbm-sep { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 6px 0 2px; }
.cbm-tg { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--night-3); text-align: left; }
.cbm-tg img, .cbm-tg .ph { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--line-strong); background: var(--night); display: grid; place-items: center; color: var(--muted); }
.cbm-tg.foe img { border-color: var(--alert); }
.cbm-tg.ally img { border-color: var(--ok); }
.cbm-tg.me img { border-color: var(--lantern); }
.cbm-tg .ph svg { width: 20px; height: 20px; }
.cbm-tg.none .ph { border-style: dashed; }
.cbm-tg-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.cbm-tg-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbm-tg-txt small { color: var(--muted); font-size: 0.82rem; }
.cbm-tg.foe small { color: #f0a08c; }
.cbm-tg.down img { filter: grayscale(0.8); }
.cbm-ft { flex: none; font-weight: 700; font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.cbm-radio { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; }
.cbm-radio svg { width: 16px; height: 16px; }
.cbm-tg.on { border-color: var(--lantern); background: #3a2e1c; box-shadow: 0 0 0 1px var(--lantern); }
.cbm-tg.on .cbm-radio { background: var(--lantern); border-color: var(--lantern); color: var(--lantern-ink); }
.cbm-label { display: block; font-weight: 700; margin-bottom: 8px; }
.cb-more textarea { width: 100%; min-height: 92px; resize: vertical; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--night); font: 400 1.05rem/1.4 var(--serif); }
.cbm-count-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.cbm-count { color: var(--faint); font-size: 0.85rem; }
.cbm-foot { flex: none; display: grid; gap: 6px; padding: 10px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--night-2); }
.cbm-foot-hint { margin: 0; text-align: center; color: var(--muted); font-size: 0.88rem; }
.cbm-go { width: 100%; min-height: 56px; font-size: 1.12rem; }

@media (min-width: 1000px) {
    .cb-downed { max-width: 560px; margin: 0 auto; }
    /* Panel lateral sobre la columna derecha: el mapa queda a la vista para elegir objetivo. */
    .cb-more[open] { inset: var(--band-h) 0 0 auto; width: 420px; height: auto; max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--line-strong); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); animation: cbm-side 0.3s var(--ease); }
    .cb-more::backdrop { background: rgba(5, 7, 10, 0.3); }
    .cbm-foot { padding-bottom: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .cb-more[open] { inset: 0 0 0 auto; width: min(460px, 62%); height: auto; max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--line-strong); animation: cbm-side 0.3s var(--ease); }
    .cb-downed { gap: 8px; padding: 10px; }
    .cb-pass { min-height: 48px; }
}

/* ============================================================== tiradas, jefes y opciones con tirada */
/* Etiqueta de la opción que pide tirada */
/* Etiquetas de la opción, en línea: «Tirada de …» (siempre igual, con el d20) y «Te costará: …». */
.opt-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.opt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: 0.82rem; line-height: 1.45; font-weight: 700; }
.opt-chip.roll { padding-left: 6px; border: 1px solid rgba(236, 228, 211, 0.22); background: rgba(236, 228, 211, 0.06); color: var(--parchment); }
.opt-chip.roll svg { width: 15px; height: 15px; color: var(--lantern); }
.opt-chip.cost { background: var(--lantern-soft); color: #f2c98a; font-weight: 500; }

/* Aviso de tirada (sobre la escena o el mapa; no bloquea) */
.rolls { position: absolute; left: 0; right: 0; top: 15%; z-index: 8; display: grid; justify-items: center; padding: 0 12px; pointer-events: none; }
.roll-card { --tone: var(--parchment); max-width: min(440px, 100%); padding: 12px 20px 14px; border-radius: var(--r-lg); background: #0e1219; border: 1px solid var(--line-strong); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); text-align: center; opacity: 0; transform: translateY(-10px) scale(0.92); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
.roll-card.in { opacity: 1; transform: none; }
.roll-card.out { opacity: 0; transform: translateY(-6px) scale(0.97); }
.roll-card.tone-ok { --tone: #b9d6aa; }
.roll-card.tone-fail { --tone: #f0a08c; }
.roll-card.tone-fumble { --tone: #ff7a5c; border-color: rgba(216, 105, 78, 0.6); }
.roll-card.tone-crit { --tone: var(--lantern); border-color: rgba(232, 163, 61, 0.7); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 163, 61, 0.25); }
.roll-body > p { margin: 0; }
.roll-who { font-size: 0.95rem; color: var(--muted); }
.roll-who strong { color: var(--parchment); }
.roll-label { margin-top: 2px !important; font: italic 0.95rem/1.3 var(--serif); color: var(--muted); }
.roll-dice { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.roll-d20 { position: relative; width: 58px; height: 58px; display: grid; place-items: center; flex: none; color: var(--tone); }
.roll-d20-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.roll-d20-svg .hex { fill: rgba(236, 228, 211, 0.06); stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.roll-d20-svg .tri { fill: rgba(12, 15, 22, 0.85); stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; opacity: 0.9; }
.roll-d20-svg .edge { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.45; }
.roll-d20 b { position: relative; top: 9%; font: 700 1.15rem var(--sans); color: var(--parchment); text-shadow: 0 1px 3px #000; }
.roll-card.in .roll-d20 { animation: d20-roll 0.7s var(--ease) both; }
@keyframes d20-roll { 0% { transform: rotate(-200deg) scale(0.4); opacity: 0; } 70% { transform: rotate(12deg) scale(1.08); opacity: 1; } 100% { transform: none; } }
.roll-mod { font-weight: 700; font-size: 1.15rem; color: var(--muted); }
.roll-eq { color: var(--faint); font-size: 1.2rem; }
.roll-total { font: 600 2.6rem/1 var(--serif); color: var(--parchment); }
.roll-card.in .roll-total { animation: rise 0.5s var(--ease) 0.35s both; }
.roll-res { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.roll-dc { padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-weight: 700; font-size: 0.88rem; }
.roll-deg { font: 600 1.25rem var(--serif); color: var(--tone); }
.roll-card.in .roll-res { animation: rise 0.5s var(--ease) 0.55s both; }
.roll-nat { margin-top: 2px !important; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }
.roll-card.nat20 .roll-d20 { filter: drop-shadow(0 0 10px rgba(232, 163, 61, 0.85)); }
.roll-card.nat20 .roll-d20 b { color: var(--lantern); }
.roll-card.nat20.in .roll-d20-svg .hex { animation: nat-glow 1.2s ease-in-out 0.7s 2; }
@keyframes nat-glow { 50% { fill: rgba(232, 163, 61, 0.35); } }
.roll-card.nat1 .roll-d20 { color: #ff7a5c; }
.roll-card.nat1 .roll-d20 b { color: #ff7a5c; }
.roll-card.nat1.in { animation: roll-shake 0.45s ease-in-out 0.7s; }
@keyframes roll-shake { 0%, 100% { translate: 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.roll-card.mine { padding: 16px 26px 18px; border-width: 2px; }
/* Mi tirada: toco el dado para tirarlo. */
.roll-tap { pointer-events: auto; display: grid; justify-items: center; gap: 4px; min-width: 220px; padding: 16px 26px 18px; border-radius: var(--r-lg); background: #0e1219; border: 2px solid rgba(232, 163, 61, 0.7); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(232, 163, 61, 0.2); color: var(--parchment); font: inherit; text-align: center; cursor: pointer; opacity: 0; transform: scale(0.92); transition: opacity 0.3s var(--ease), transform 0.35s var(--ease); }
.roll-tap.in { opacity: 1; transform: none; }
.roll-tap > p { margin: 0; }
.roll-tap .tap-die { width: 96px; height: 96px; color: var(--lantern); margin: 6px 0; }
.roll-tap .tap-die b { font-size: 1.8rem; }
.roll-tap:not(.spinning) .tap-die { animation: tap-bob 1.4s ease-in-out infinite; }
.roll-tap.spinning .tap-die { animation: tap-spin 0.3s linear infinite; }
.roll-tap-hint { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; color: var(--lantern); }
.roll-tap.spinning .roll-tap-hint { visibility: hidden; }
@keyframes tap-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes tap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roll-tap .tap-die { animation: none !important; } }

.roll-card.mine .roll-who { font-size: 1.05rem; }
.roll-card.mine .roll-d20 { width: 76px; height: 76px; }
.roll-card.mine .roll-d20 b { font-size: 1.5rem; }
.roll-card.mine .roll-total { font-size: 3.4rem; }
.roll-card.mine .roll-deg { font-size: 1.5rem; }
/* Historial */
.drawer li.hroll .roll-ico { display: grid; place-items: center; color: #cdbdf0; }
.drawer li.hroll .roll-ico svg { width: 20px; height: 20px; }
.drawer li.hroll b { color: #cdbdf0; }
.drawer li.hroll p { font: 0.98rem/1.4 var(--sans); color: var(--muted); }
.drawer li.hroll.tone-crit p { color: #f2c98a; }

/* Presentación de un jefe */
.screen.boss { padding: 0; }
.boss-intro { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; cursor: pointer; overflow: hidden; outline: none; }
/* Fondo desenfocado quieto: el desenfoque se pinta una vez (animado, el compositor lo rehace en cada frame). */
.boss-bg { position: absolute; inset: -6%; background-size: cover; background-position: center 30%; filter: blur(12px) saturate(0.6) brightness(0.45); }
.boss-vignette { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, rgba(120, 24, 14, 0.35), rgba(5, 6, 9, 0.96) 75%); }
.boss-inner { position: relative; padding: 24px; display: grid; justify-items: center; gap: 4px; max-width: 760px; }
.boss-portrait, .boss-emblem { width: clamp(132px, 34vw, 210px); height: clamp(132px, 34vw, 210px); border-radius: 50%; object-fit: cover; border: 3px solid var(--alert); box-shadow: 0 0 0 10px rgba(216, 105, 78, 0.12), 0 0 80px rgba(216, 105, 78, 0.45); margin-bottom: 18px; animation: boss-in 1.1s var(--ease) both; }
.boss-emblem { display: grid; place-items: center; background: radial-gradient(circle, #3a1712, #120807 70%); color: var(--alert); }
.boss-emblem svg { width: 46%; height: 46%; }
.boss-k { font-weight: 700; letter-spacing: 0.5em; padding-left: 0.5em; color: #f0a08c; font-size: 0.95rem; text-transform: uppercase; animation: rise 0.9s var(--ease) 0.3s both; }
.boss-name { font: 600 clamp(2.4rem, 11vw, 5rem)/1.02 var(--serif); margin: 4px 0 0; text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8); animation: boss-name 1.2s var(--ease) 0.45s both; }
.boss-title { margin: 8px 0 0; font: italic 400 clamp(1.1rem, 4.2vw, 1.6rem)/1.3 var(--serif); color: var(--muted); animation: rise 1.1s var(--ease) 0.9s both; }
.boss-intro .ep-hint { animation-delay: 1.4s; }
@keyframes boss-in { from { opacity: 0; transform: scale(1.25); filter: brightness(2); } to { opacity: 1; transform: none; filter: none; } }
@keyframes boss-name { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

@media (max-height: 500px) and (orientation: landscape) {
    .rolls { top: 10%; }
    .roll-card.mine .roll-total { font-size: 2.6rem; }
    .roll-card.mine .roll-d20 { width: 60px; height: 60px; }
    .boss-portrait, .boss-emblem { width: 110px; height: 110px; margin-bottom: 10px; }
    .boss-name { font-size: 2.6rem; }
    .cbm-head { padding-top: 6px; padding-bottom: 6px; }
    .cbm-chosen p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .cbm-go { min-height: 48px; }
    .cbm-foot { padding-top: 8px; padding-bottom: 8px; }
}

/* ============================================================== ronda de UX y rendimiento (30-10) */
/* --- hoja de decisión: tarjetas más prietas y aviso de que hay más opciones por debajo */
.more-cue { position: sticky; bottom: 0; z-index: 2; display: none; justify-content: center; align-items: flex-end; height: 68px; margin-top: -68px; padding-bottom: 10px; background: linear-gradient(rgba(25, 32, 45, 0), var(--night-2) 72%); pointer-events: none; }
.sheet.more .more-cue { display: flex; }
.sheet:has(textarea:focus) .more-cue { display: none; } /* escribiendo: que no tape el cuadro */
.more-cue button { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; border: 1px solid var(--lantern); background: var(--night-3); color: var(--parchment); font-weight: 700; font-size: 0.92rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.more-cue svg { width: 18px; height: 18px; color: var(--lantern); }
@media (prefers-reduced-motion: no-preference) { .sheet.more .more-cue svg { animation: cue-bob 1.6s ease-in-out infinite; } }
@keyframes cue-bob { 50% { transform: translateY(2px); } }
@media (max-width: 999px) {
    .opt { min-height: 0; padding: 9px 12px 9px 10px; row-gap: 1px; }
    .opt-label { font-size: 1rem; line-height: 1.22; }
    .opt-intent { font-size: 0.9rem; }
    .sheet-body { gap: 7px; }
}
/* Móvil bajito (o en horizontal) con la hoja abierta: el subtítulo se queda (3 líneas) y el Historial pasa a su lado
   como icono: así caben más opciones. */
@media (max-width: 999px) and (max-height: 760px) {
    .stage.has-sheet .scene-head { padding-top: 8px; }
    .stage.has-sheet .scene-title { font-size: 1.02rem; }
    .stage.has-sheet .subtitle-wrap { flex-direction: row; align-items: flex-end; gap: 10px; }
    .stage.has-sheet .subtitle { flex: 1; min-width: 0; min-height: 0; }
    .stage.has-sheet .subtitle-text { font-size: 1.02rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .stage.has-sheet .history-btn { flex: none; width: 44px; padding: 0; justify-content: center; }
    .stage.has-sheet .history-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .stage.has-sheet .sheet { max-height: 82%; }
}
@media (max-width: 999px) and (max-height: 760px) and (orientation: portrait) {
    .sheet-card { padding-top: 12px; }
    .sheet-prompt { font-size: 1.08rem; }
}

/* --- personaje: aviso de botín con el botón a la derecha (o en su propia línea si no cabe) */
.loot-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.loot-banner .lb-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lantern-soft); color: var(--lantern); flex: none; }
.loot-banner .lb-ico svg { width: 20px; height: 20px; }
.loot-banner .lb-text { flex: 1 1 150px; min-width: 0; display: grid; line-height: 1.3; }
.loot-banner .lb-text strong { font: 600 1.05rem var(--serif); }
.loot-banner .btn { flex: none; margin-left: auto; }
/* Si no cabe al lado, el botón ocupa su propia línea entera (mejor que suelto a la derecha). */
.cp-top { container-type: inline-size; }
@container (max-width: 420px) { .loot-banner .btn { flex: 1 1 100%; margin-left: 0; } }
@media (max-width: 359px) {
    .sh-tiles:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
.chapter-end .bg { opacity: 0.32; }

/* --- combate: fila de iniciativa, PG y acciones según el sitio que haya */
.cb-act { position: relative; }
.cb-act-badge { display: none; position: absolute; top: 3px; right: 3px; padding: 0 5px; border-radius: 99px; background: rgba(12, 15, 22, 0.85); color: #f2c98a; font: 700 0.75rem/1.45 var(--sans); }
/* Mis PG van dentro de la fila de «Tu turno»: por defecto, en su propia línea debajo. */
.cb-turnline.mine .cb-me { order: 9; flex-basis: 100%; margin: 0; }
.cb-me .ac { display: inline-flex; align-items: center; gap: 4px; }
.cb-me .ac svg { display: none; width: 15px; height: 15px; }
.cb-me .hp.low { color: #f0a08c; }

/* Móvil en vertical (cualquier alto): iniciativa y barra algo más finas. */
@media (max-width: 639px) {
    .cb-top { min-height: 0; padding: 6px 10px; gap: 10px; }
    .cb-round { padding-right: 10px; }
    .cb-ini { width: 46px; }
    .cb-ini img, .cb-ini .ph { width: 32px; height: 32px; }
    .cb-ini.current img, .cb-ini.current .ph { width: 36px; height: 36px; }
    .cb-ini .nm { max-width: 46px; }
    .cb-bottom { padding: 8px 12px 10px; }
    .cb-turnline { margin-bottom: 8px; }
    .cb-act { min-height: 72px; }
    .cb-act.end { min-height: 44px; }
}

/* Móvil bajito en vertical (320×640, 360×740, 375×667…): el mapa manda. Sin nombres bajo las caras, los PG al lado
   de los rombos, botones de icono + nombre corto (el acierto, en una chapita) y «Terminar turno» en una línea. */
@media (max-width: 999px) and (max-height: 760px) and (orientation: portrait) {
    .cb-top { padding: 4px 10px; gap: 8px; }
    .cb-round strong { font-size: 1.15rem; }
    .cb-ini { width: auto; }
    .cb-ini .nm { display: none; }
    .cb-ini img, .cb-ini .ph { width: 30px; height: 30px; }
    .cb-ini.current img, .cb-ini.current .ph { width: 32px; height: 32px; }
    .cb-ini .tag-foe { top: -3px; right: -3px; }
    .cb-bottom { padding: 6px 10px 8px; }
    .cb-turnline { gap: 6px 8px; margin-bottom: 6px; min-height: 44px; }
    .cb-yours { font-size: 1.05rem; }
    .cb-pips { gap: 5px; }
    .cb-pips i { width: 11px; height: 11px; }
    .cb-turnline.mine .cb-me { order: 2; flex: 0 1 auto; margin: 0 0 0 2px; gap: 8px; font-size: 0.95rem; }
    .cb-turnline.mine .cb-me .who, .cb-turnline.mine .cb-me .bar, .cb-turnline.mine .cb-me .ac-l { display: none; }
    .cb-turnline.mine .cb-me .ac svg { display: block; }
    .cb-turnline.mine .cb-help { order: 3; margin-left: auto; }
    .cb-turnline.mine .cb-logbtn { order: 4; margin-left: 0; }
    .cb-logbtn { width: 44px; padding: 0; justify-content: center; }
    .cb-logbtn .lbl { display: none; }
    .cb-acts-main { padding: 2px; margin: -2px; }
    .cb-hint { font-size: 0.9rem; padding: 6px 6px 6px 14px; gap: 8px; }
    .cb-actions { gap: 6px; }
    .cb-acts-main { gap: 5px; grid-auto-columns: minmax(60px, 1fr); }
    .cb-act { min-height: 0; padding: 6px 3px; gap: 3px; }
    .cb-act-ico { width: 28px; height: 28px; border-radius: 8px; }
    .cb-act-ico svg { width: 19px; height: 19px; }
    .cb-act-name { font-size: 0.8rem; line-height: 1.12; }
    .cb-act-sub, .cb-act-help, .cb-act-range { display: none; }
    .cb-act-badge { display: block; }
    .cb-act.end { min-height: 44px; padding: 4px 12px; gap: 8px; }
    .cb-act.end .cb-act-ico { width: 22px; height: 22px; }
    .cb-act.end .cb-act-name { font-size: 0.95rem; }
    .cb-act.end .cb-act-sub { display: inline; font-size: 0.85rem; }
    .cb-choices { margin-bottom: 6px; }
    .cb-flash { padding: 10px 18px; }
    .cb-flash strong, .cb-flash.start strong, .cb-flash.hurt strong { font-size: 1.7rem; }
    .cb-tut { width: min(320px, calc(100% - 20px)); padding: 10px 12px; }
    .cb-tut h2 { font-size: 1.05rem; }
    .cb-tut #cb-tut-text { font-size: 0.92rem; }
    .cb-tut-row { margin-top: 8px; }
}
@media (max-width: 359px) and (max-height: 760px) and (orientation: portrait) {
    .cb-turnline.mine .cb-me .ac { display: none; }
    .cb-act.end .cb-act-sub { display: none; }
}

/* Móvil en horizontal: mapa a la izquierda, acciones a la derecha en dos columnas de botones bajos (todo a la vista,
   «Terminar turno» incluido, sin desplazar). */
@media (max-height: 500px) and (orientation: landscape) {
    .cb-top { min-height: 0; padding: 3px 10px; gap: 8px; }
    .cb-round { display: flex; align-items: baseline; gap: 6px; }
    .cb-round strong { font-size: 1.15rem; }
    .cb-ini { width: auto; }
    .cb-ini img, .cb-ini .ph { width: 28px; height: 28px; }
    .cb-ini.current img, .cb-ini.current .ph { width: 30px; height: 30px; }
    .cb-ini .tag-foe { top: -3px; right: -3px; }
    .cb-bottom { padding: 6px 10px 8px; }
    .cb-turnline { gap: 6px 8px; margin-bottom: 6px; min-height: 44px; }
    .cb-yours { font-size: 1.05rem; }
    .cb-pips i { width: 11px; height: 11px; }
    .cb-turnline.mine .cb-me { order: 2; flex: 0 1 auto; margin: 0 0 0 2px; gap: 8px; font-size: 0.95rem; }
    .cb-turnline.mine .cb-me .who, .cb-turnline.mine .cb-me .bar, .cb-turnline.mine .cb-me .ac-l { display: none; }
    .cb-turnline.mine .cb-me .ac svg { display: block; }
    .cb-turnline.mine .cb-help { order: 3; margin-left: auto; }
    .cb-turnline.mine .cb-logbtn { order: 4; margin-left: 0; }
    .cb-logbtn { width: 44px; padding: 0; justify-content: center; }
    .cb-logbtn .lbl { display: none; }
    .cb-acts-main { padding: 2px; margin: -2px; }
    .cb-hint { font-size: 0.9rem; padding: 6px 6px 6px 14px; gap: 8px; }
    .cb-actions { gap: 6px; }
    .cb-acts-main { grid-template-columns: 1fr 1fr; gap: 6px; }
    .cb-act { min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 8px; text-align: left; }
    .cb-act-ico { width: 30px; height: 30px; flex: none; border-radius: 8px; }
    .cb-act-ico svg { width: 20px; height: 20px; }
    .cb-act-name { font-size: 0.88rem; line-height: 1.15; }
    .cb-act-sub, .cb-act-help, .cb-act-range { display: none; }
    .cb-act-badge { display: block; position: static; margin-left: auto; }
    .cb-act.end { min-height: 44px; justify-content: center; }
    .cb-act.end .cb-act-ico { width: 24px; height: 24px; }
    .cb-act.end .cb-act-sub { display: inline; font-size: 0.85rem; }
    .cb-choices { margin-bottom: 6px; }
    .cb-banner { right: 42%; }
    .cb-flash strong, .cb-flash.start strong, .cb-flash.hurt strong { font-size: 1.6rem; }
    .cb-tut { padding: 10px 12px; }
    .cb-tut h2 { font-size: 1.02rem; }
    .cb-tut #cb-tut-text { font-size: 0.9rem; }
}

/* Estados de PF2e de tu personaje en la barra de combate (Asustado 2, Tumbado…). */
.cb-conds { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.cb-conds .chip { font-size: 0.75rem; padding: 1px 8px; }
.host-tech { margin: 6px 0 0; }
.warn-text { color: var(--alert); }