/* ===== Base ===== */
html {
/* Reserva el ancho de la barra de scroll en todas las paginas,
asi el contenido centrado no se desplaza entre secciones con y sin scroll */
scrollbar-gutter: stable;
/* El contenedor que scrollea es : sin esto el guard del body no alcanza. */
overflow-x: hidden;
}
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
text-align: center;
/* Evita scroll horizontal por desbordes de pocos px (padding/grid en movil). */
max-width: 100%;
overflow-x: hidden;
}
/* ===== Navbar (shared across all pages) ===== */
.navbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 10px 20px;
background-color: #1a1a1a;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #333;
flex-shrink: 0;
}
.nav-links {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
justify-content: center;
align-items: center;
}
.navbar-brand {
grid-column: 1;
justify-self: start;
display: flex;
align-items: center;
flex-shrink: 0;
line-height: 0;
}
.navbar-brand img {
height: 72px;
width: auto;
display: block;
}
.navbar a {
color: yellow;
text-decoration: none;
padding: 4px 10px;
border-radius: 4px;
}
.navbar a:hover {
background-color: #333;
}
.navbar a.active {
background-color: yellow;
color: black;
font-weight: bold;
cursor: default;
}
/* Toggle de idioma EN/ES (lo inyecta i18n.js en la 3ra columna del grid) */
.lang-toggle {
grid-column: 3;
justify-self: end;
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid #555;
border-radius: 4px;
padding: 3px 8px;
color: #888;
font: inherit;
font-size: 0.85em;
cursor: pointer;
line-height: 1;
}
.lang-toggle:hover { border-color: yellow; }
.lang-toggle .lang-opt { color: #888; }
.lang-toggle .lang-opt.active { color: yellow; font-weight: bold; }
.lang-toggle .lang-sep { color: #555; }
@media (max-width: 700px) {
.lang-toggle { grid-column: 1; justify-self: center; }
}
a {
color: yellow;
}
#text {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
flex-shrink: 0;
}
#logo {
height: 60px;
width: auto;
margin-bottom: 5px;
flex-shrink: 0;
}
/* ===== Buttons ===== */
#button1, #buttonDice, #buttonPdf, #button4, #buttonDungeon, #buttonCopyLink, #buttonDungeonPdf {
background-color: white;
color: black;
border: none;
padding: 5px 10px;
cursor: pointer;
margin-top: 10px;
}
#button1:hover, #buttonDice:hover, #buttonPdf:hover, #button4:hover, #buttonDungeon:hover, #buttonCopyLink:hover, #buttonDungeonPdf:hover {
background-color: gray;
color: white;
}
#button1:disabled {
background-color: #555;
color: #aaa;
cursor: default;
}
/* ===== Character / output display ===== */
#char-display {
margin: 20px auto;
width: 80%;
max-width: 600px;
min-height: 200px;
max-height: 60vh;
overflow-y: auto;
background-color: #2d2020;
padding: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border: 2px solid #ddd;
border-radius: 5px;
white-space: pre-line;
text-align: left;
font-size: 1.1rem;
line-height: 1.4;
}
/* Resultados del dice roller: numeros mas grandes para mejor lectura */
#char-display.dice-result {
font-size: 2.5rem;
line-height: 1.3;
font-weight: bold;
}
#char-display p,
#char-display ul,
#char-display ol,
#char-display li {
margin: 0;
padding: 0;
}
/* ===== Portrait en la ficha de personaje (3:4, imagenes 480x640) ===== */
#char-portrait {
float: right;
width: 248px;
height: 330px;
object-fit: cover;
margin: 6px 0 10px 16px; /* baja el retrato para alinear su tope con el texto 'Class:' */
border: 2px solid #ddd;
border-radius: 5px;
}
/* ===== Selection form ===== */
.selection-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
margin-bottom: 20px;
align-items: flex-start;
}
.selection-column {
display: flex;
flex-direction: column;
}
.selection-fieldset {
border: 2px solid #ddd;
padding: 10px;
border-radius: 5px;
background-color: #131212;
margin: 20px;
}
legend {
font-weight: bold;
padding: 0 5px;
}
h2 {
margin-top: 20px;
}
h3 {
margin-bottom: 10px;
}
label {
margin-bottom: 5px;
text-align: left;
}
/* Radios y checkboxes alineados al margen izquierdo de su columna */
#class-selection,
#race-selection,
#level-selection,
#section-selection {
text-align: left;
}
/* Campo de nivel: mas angosto (un tercio menos) ya que solo lleva 1-2 digitos */
#level-input {
width: 2.8em;
box-sizing: border-box;
}
/* Espacio superior bajo el navbar para las secciones (igual que el fieldset de chargen) */
#dice-controls,
#treasure-controls,
#dungeon-controls,
.folder-tree {
margin-top: 20px;
}
/* ===== Treasure ===== */
.treasure-cr {
margin-bottom: 1em;
font-weight: bold;
font-size: 1.35rem;
}
.treasure-list {
margin: 0;
padding-left: 0;
list-style-position: inside; /* bullet dentro del flujo: se alinea con el titulo */
font-size: 1.35rem;
}
.treasure-list li {
margin-top: 0.3em;
}
/* ===== Dungeon Generator ===== */
/* La ficha de dungeon es mas larga que la de personaje: mas ancho y alto de scroll */
#char-display.dungeon-display {
max-width: 760px;
max-height: 75vh;
}
.dungeon-map {
display: block;
width: 100%;
max-height: 420px;
margin: 12px auto;
background-color: #1a1414;
border: 1px solid #555;
border-radius: 5px;
}
.dungeon-map .dungeon-room {
cursor: pointer;
}
.dungeon-legend {
font-size: 0.85rem;
opacity: 0.75;
}
.room-card {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #4a3a3a;
}
.room-title {
margin: 0 0 4px 0;
}
.room-title.room-entrance {
color: #6dff6d;
}
.room-title.room-boss {
color: #ffd700;
}
.room-title.room-secret {
color: #c58aff;
}
.room-dims {
font-size: 0.85rem;
opacity: 0.7;
}
.room-monster strong {
color: #ff8a8a;
}
.room-trap strong {
color: #ffb066;
}
/* Entradas de un complejo de trampas: sangradas bajo su rotulo. */
.room-trap-entry {
margin-left: 1.2em;
font-size: 0.95rem;
opacity: 0.9;
}
.room-loot strong {
color: #8ad0ff;
}
.room-exits {
font-size: 0.9rem;
opacity: 0.8;
}
.room-loot-list {
margin: 0;
padding-left: 0;
list-style-position: inside;
}
/* Tabla de monstruos errantes: seccion global del dungeon, separada con fuerza
de las fichas de sala para que no parezca parte de la ultima. */
.wandering-section {
margin-top: 24px;
padding-top: 14px;
border-top: 4px double #888;
}
footer {
margin-top: auto;
padding: 10px;
}
/* ===== Responsive ===== */
@media (max-width: 600px) {
.navbar {
grid-template-columns: 1fr;
justify-items: center;
gap: 8px;
}
.navbar-brand {
grid-column: 1;
justify-self: center;
}
.nav-links {
grid-column: 1;
}
/* En celular vertical: que los generadores ocupen todo el ancho */
.selection-fieldset,
#dice-controls,
#treasure-controls,
#dungeon-controls {
width: 90%;
box-sizing: border-box;
}
/* En celular: una sola columna de jugadores */
#life-board {
grid-template-columns: 1fr;
}
/* Una vez empezada la partida, en el celu los controles de configuracion se
colapsan para que los cuadros de vida tomen protagonismo. Solo quedan
visibles los botones Settings y Hold to Restart. */
body.in-game #life-setup .setup-row {
display: none;
}
/* El boton Settings reabre las filas para cambiar algun ajuste. */
body.in-game.settings-open #life-setup .setup-row {
display: flex;
}
body.in-game #life-setup {
margin-top: 8px;
gap: 8px;
}
/* Mostrar el boton Settings solo en partida (en movil). */
body.in-game #toggle-settings {
display: inline-block;
}
/* Los botones de control quedan compactos y discretos, sin competir con los cuadros. */
body.in-game #start-game,
body.in-game #toggle-settings {
margin-top: 0;
padding: 4px 10px;
font-size: 0.85rem;
opacity: 0.7;
}
/* Cuadros mas grandes y vida mas protagonista, con margen claro al borde. */
body.in-game #life-board {
width: 90%;
margin-top: 10px;
}
body.in-game .player-card {
padding: 24px 16px;
}
body.in-game .player-life {
font-size: 5rem;
}
body.in-game .life-btn {
padding: 12px 16px;
font-size: 1.15rem;
}
}
/* ===== Life Counter (MTG) ===== */
.hidden {
display: none;
}
#life-setup {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.setup-row {
display: flex;
align-items: center;
gap: 10px;
}
#life-setup label {
margin-bottom: 0;
}
#life-setup select {
padding: 4px 8px;
font-size: 1rem;
}
/* Table mode deshabilitado (en Commander): se atenua su fila. */
#table-mode:disabled + label {
opacity: 0.4;
}
/* El boton Settings solo aparece en movil durante la partida (ver media query). */
#toggle-settings {
display: none;
background-color: white;
color: black;
border: none;
cursor: pointer;
}
/* "Clear names" solo tiene sentido durante una partida (hay nombres que limpiar). */
body:not(.in-game) #clear-names-row {
display: none;
}
#clear-names {
background-color: transparent;
color: white;
border: 1px solid #666;
border-radius: 4px;
padding: 4px 10px;
font-size: 0.85rem;
cursor: pointer;
}
#clear-names:hover {
background-color: #666;
}
#start-game {
position: relative;
overflow: hidden;
background-color: white;
color: black;
border: none;
padding: 6px 14px;
cursor: pointer;
margin-top: 10px;
font-size: 1rem;
user-select: none;
touch-action: none;
}
#start-game:hover {
background-color: gray;
color: white;
}
#start-game .btn-label {
position: relative;
z-index: 1;
}
/* Relleno de la pulsacion sostenida (modo "Hold to Restart"). */
#start-game .btn-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background-color: #c0392b;
z-index: 0;
transition: width 150ms ease-out; /* al soltar, se vacia rapido */
}
/* HOLD_MS en life.js debe coincidir con estos 1000ms. */
#start-game.holding .btn-fill {
width: 100%;
transition: width 1000ms linear;
}
/* Mientras se mantiene, el texto pasa a blanco para contrastar con el rojo. */
#start-game.holding .btn-label {
color: white;
}
#life-board {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 90%;
max-width: 700px;
margin: 20px auto;
box-sizing: border-box;
/* Permite que las columnas se encojan por debajo de su contenido (evita
que una tarjeta fuerce un ancho mayor que la pantalla y aparezca scroll). */
min-width: 0;
}
/* 2 jugadores: tableros apilados y mas angostos para que no se vean enormes
en pantallas grandes */
#life-board[data-count="2"] {
grid-template-columns: 1fr;
max-width: 420px;
}
/* Modo espejo: el jugador de arriba ve su tablero al reves, para que
ambos lo lean comodos compartiendo un mismo celular */
#life-board.mirror[data-count="2"] .player-card[data-id="0"] {
transform: rotate(180deg);
}
/* ===== Disposiciones de mesa para 4 jugadores ===== */
/* Ambas usan grilla 2x2 (incluso en movil) y tarjetas mas compactas para que
los 4 quepan sin scroll con el telefono apoyado en el centro. */
#life-board[data-count="4"]:is(.mirror, .table) {
grid-template-columns: 1fr 1fr;
}
#life-board[data-count="4"]:is(.mirror, .table) .player-card {
padding: 8px;
gap: 4px;
}
#life-board[data-count="4"]:is(.mirror, .table) .player-life {
font-size: 2.2rem;
}
#life-board[data-count="4"]:is(.mirror, .table) .cmd-heading {
display: none;
}
#life-board[data-count="4"]:is(.mirror, .table) .cmd-damage {
margin-top: 6px;
padding-top: 6px;
}
#life-board[data-count="4"]:is(.mirror, .table) .life-controls {
flex-wrap: nowrap;
gap: 4px;
width: 100%;
}
#life-board[data-count="4"]:is(.mirror, .table) .life-btn {
flex: 1;
min-width: 0;
padding: 6px 0;
font-size: 0.9rem;
}
/* Mirror (dos enfrentados): la fila de arriba girada 180. */
#life-board.mirror[data-count="4"] .player-card:nth-child(1),
#life-board.mirror[data-count="4"] .player-card:nth-child(2) {
transform: rotate(180deg);
}
/* Table (cuatro lados): grilla 2x2 cuadrada; cada tarjeta mira a su asiento.
nth-child(3) (abajo-izquierda) queda a 0 grados. */
#life-board.table[data-count="4"] {
grid-template-rows: 1fr 1fr;
aspect-ratio: 1;
max-width: 480px;
}
#life-board.table[data-count="4"] .player-card {
height: 100%;
justify-content: center;
}
#life-board.table[data-count="4"] .player-card:nth-child(1) {
transform: rotate(90deg);
}
#life-board.table[data-count="4"] .player-card:nth-child(2) {
transform: rotate(180deg);
}
#life-board.table[data-count="4"] .player-card:nth-child(4) {
transform: rotate(-90deg);
}
.player-card {
box-sizing: border-box;
/* Item de grid: sin esto su min-content puede ensanchar la columna mas
que la pantalla y generar scroll lateral. */
min-width: 0;
background-color: #2d2020;
border: 2px solid #ddd;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.player-card.dead {
border-color: #b00;
opacity: 0.6;
}
/* Ganador: ultimo jugador en pie, resaltado en verde. */
.player-card.winner {
border-color: #4caf50;
box-shadow: 0 0 14px rgba(76, 175, 80, 0.55);
}
.player-card.winner .player-life {
color: #6dff6d;
}
/* Nombre editable, con aspecto de texto plano hasta que se enfoca. */
.player-name {
margin: 0;
width: 100%;
box-sizing: border-box;
background: transparent;
border: none;
color: white;
font-family: inherit;
font-size: 1.17rem;
font-weight: bold;
text-align: center;
padding: 2px 4px;
border-radius: 4px;
cursor: text;
}
.player-name:hover {
background: rgba(255, 255, 255, 0.06);
}
.player-name:focus {
outline: none;
background: rgba(255, 255, 255, 0.12);
}
.player-life {
font-size: 3.5rem;
font-weight: bold;
line-height: 1;
}
.player-card.dead .player-life {
color: #ff6b6b;
}
.life-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 100%;
}
.life-btn {
background-color: white;
color: black;
border: none;
border-radius: 4px;
padding: 8px 12px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
min-width: 44px;
}
.life-btn:hover {
background-color: gray;
color: white;
}
/* ===== Dano de comandante (modo Commander) ===== */
.cmd-damage {
width: 100%;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #4a3a3a;
}
.cmd-heading {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
margin-bottom: 6px;
}
.cmd-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.cmd-cell {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
}
.cmd-label {
min-width: 24px;
max-width: 64px;
text-align: right;
font-size: 0.8rem;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmd-btn {
background-color: #4a3a3a;
color: white;
border: none;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 0.85rem;
font-weight: bold;
line-height: 1;
cursor: pointer;
padding: 0;
}
.cmd-btn:hover {
background-color: #6a5a5a;
}
.cmd-value {
min-width: 24px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}
/* 21 de un mismo comandante = letal: resalta el contador. */
.cmd-cell.lethal .cmd-value {
color: #ff6b6b;
}
/* Impuesto de comandante (veces lanzado -> coste extra). */
.cmd-tax {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #4a3a3a;
}
.cmd-tax-label {
font-size: 0.8rem;
opacity: 0.85;
}
.cmd-tax-value {
min-width: 20px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}
.cmd-tax-cost {
min-width: 38px;
font-size: 0.85rem;
opacity: 0.7;
}
/* ===== Veneno (opcional, cualquier modo) ===== */
.poison {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #3a4a3a;
}
.poison-label {
font-size: 0.85rem;
opacity: 0.85;
}
.poison-btn {
background-color: #3a4a3a;
color: white;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.poison-btn:hover {
background-color: #5a6a5a;
}
.poison-value {
min-width: 24px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}
/* 10 de veneno = letal. */
.poison.lethal .poison-value {
color: #6dff6d;
}
/* ===== Hoja de personaje imprimible (#char-sheet) ===== */
/* En pantalla nunca se ve: solo existe para la impresion / Guardar PDF. */
#char-sheet { display: none; }
/* ===== Impresion / Guardar PDF ===== */
@media print {
/* Tamano de pagina fijo (A4): la hoja se diseno "como papel", con espacio maximo
reservado para cada seccion; un lienzo deterministico evita sorpresas de layout.
Sin margen de pagina: asi el navegador no imprime fecha/hora/URL/numero de pagina. */
@page { size: A4; margin: 0; }
/* Negro sobre blanco: los navegadores no imprimen fondos por defecto,
asi el texto claro no queda invisible y no se gasta tinta. */
html, body {
background: #fff !important;
color: #000 !important;
display: block !important;
overflow: visible !important;
}
/* Paginas SIN hoja de personaje generada (dados, tesoro, dungeon): imprimen
#char-display como antes. body.sheet-ready lo agrega renderSheet() (char.js). */
body:not(.sheet-ready) > *:not(#char-display) { display: none !important; }
body:not(.sheet-ready) #char-display {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
background: #f5ecd6 !important; /* pergamino */
color: #2b1d0e !important; /* tinta marron oscura */
-webkit-print-color-adjust: exact; /* fuerza a imprimir el fondo aunque "background graphics" este off */
print-color-adjust: exact;
font-family: "Palatino Linotype", "Book Antiqua", "Garamond", Georgia, "Times New Roman", serif !important;
border: 5px double #6b4f2a !important; /* marco clasico de doble linea */
box-shadow: none !important;
font-size: 13pt;
line-height: 1.45;
padding: 1.2cm !important; /* margen propio de la ficha (el de pagina es 0) */
box-sizing: border-box;
}
body:not(.sheet-ready) #char-portrait {
border: 1px solid #6b4f2a !important;
}
/* ---- Dungeon: el mapa y las fichas se imprimen sobre el pergamino de #char-display.
printDungeon() (dungeon.js) ya recolorea el SVG a tinta oscura; aca ajustamos el
lienzo y pasamos el texto de las fichas a tinta para que no quede palido. ---- */
.dungeon-map {
background: transparent !important;
max-height: 60vh !important; /* el mapa entra en la primera pagina */
border-color: #6b4f2a !important;
}
#char-display .room-monster strong,
#char-display .room-trap strong,
#char-display .room-loot strong {
color: #2b1d0e !important;
}
#char-display .room-title.room-entrance { color: #1b7a2e !important; }
#char-display .room-title.room-boss { color: #9a6b12 !important; }
#char-display .room-title.room-secret { color: #6a2fae !important; }
/* Que una sala no se parta entre dos paginas. */
.room-card, .wandering-section { break-inside: avoid; }
/* Con hoja generada: se imprime SOLO #char-sheet (la hoja clasica). */
body.sheet-ready > *:not(#char-sheet) { display: none !important; }
body.sheet-ready #char-sheet { display: block !important; }
/* ---- Hoja clasica: pergamino, tinta marron, marco doble ---- */
/* Paleta en variables: la hoja de D&D usa estos valores por defecto
(pergamino/tinta marron); .cs-inv los sobreescribe mas abajo para
acercarse al blanco y negro grabado de los retratos 1920s. Se declaran
en #char-sheet (ancestro de .cs-page) para que color: var(...) tambien
alcance a esta regla. */
#char-sheet {
--cs-paper: #f5ecd6;
--cs-box-bg: #fbf6e7;
--cs-th-bg: #e9dcbc;
--cs-ink: #2b1d0e;
--cs-ink-mid: #6b4f2a;
--cs-ink-soft: #5a4321;
--cs-ink-faint: #8a6d40;
--cs-border: #b39b6d;
--cs-border-dotted: #c9b487;
--cs-border-soft: #d8c9a3;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
font-family: "Palatino Linotype", "Book Antiqua", "Garamond", Georgia, "Times New Roman", serif;
color: var(--cs-ink);
}
.cs-page {
box-sizing: border-box;
width: 100%;
/* Pergamino a pagina completa; los 2px de resto evitan que el redondeo
empuje el borde inferior del marco a una pagina extra. */
min-height: calc(100vh - 2px);
background: var(--cs-paper);
color: var(--cs-ink);
border: 5px double var(--cs-ink-mid);
padding: 8mm 9mm;
}
/* Pagina 2 (hechizos): siempre arranca en hoja nueva, con su marco propio */
.cs-page2 {
break-before: page;
page-break-before: always;
}
/* Cabecera: linea de nombre + marca */
.cs-header {
display: flex;
align-items: flex-end;
gap: 0.3in;
border-bottom: 3px double var(--cs-ink-mid);
padding-bottom: 6px;
margin-bottom: 8px;
}
.cs-name { flex: 1.5; }
.cs-name-line {
border-bottom: 1.5px solid var(--cs-ink);
font-size: 18pt;
min-height: 26px;
}
/* Linea del jugador: mas corta que la del personaje, misma base */
.cs-player { flex: 1; }
.cs-brand { text-align: right; white-space: nowrap; }
/* Titulo de marca en texto: lo usa la pagina 2 ("Spellbook") */
.cs-brand-title {
font-size: 20pt;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 2px;
color: var(--cs-ink-mid);
line-height: 1;
}
/* Logo RPG Master (pagina 1) con el dominio debajo, ocupando el mismo ancho */
.cs-brand-logo {
display: block;
width: 38mm;
height: auto;
}
.cs-brand-sub {
font-size: 7.5pt;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 2px;
}
.cs-brand-logo + .cs-brand-sub {
width: 38mm;
text-align: center;
box-sizing: border-box;
}
/* Casilleros (valor arriba, etiqueta abajo). Flex columna: si otro casillero de la
misma fila la hace mas alta, el valor se centra y la etiqueta queda abajo. */
.cs-box {
border: 1px solid var(--cs-ink-mid);
background: var(--cs-box-bg);
border-radius: 3px;
padding: 2px 5px 2px;
text-align: center;
break-inside: avoid;
display: flex;
flex-direction: column;
}
.cs-box-value {
font-size: 11pt;
font-weight: 600;
min-height: 13px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.15;
}
.cs-box-label {
font-size: 6.5pt;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--cs-ink-mid);
border-top: 1px solid var(--cs-border-soft);
margin-top: 2px;
padding-top: 1px;
}
.cs-name .cs-box-label { border-top: none; text-align: left; }
/* Identidad: grid de 12 unidades; cada casillero declara su ancho (cs-w1..cs-w4)
para que los campos largos (Deity, Alignment) no envuelvan a dos lineas. */
.cs-idgrid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5px;
margin-bottom: 8px;
}
.cs-w1 { grid-column: span 1; }
.cs-w2 { grid-column: span 2; }
.cs-w3 { grid-column: span 3; }
.cs-w4 { grid-column: span 4; }
/* Cuerpo principal: caracteristicas | combate | retrato+skills.
La columna derecha (skills) abarca las dos filas del grid: si la lista de
skills crece (personajes avanzados), los paneles inferiores llenan el area
"bottom" a su izquierda y no quedan huecos bajo habilidades/combate. */
.cs-main {
display: grid;
grid-template-columns: 44mm 1fr 52mm;
grid-template-areas:
"abil combat side"
"bottom bottom side";
gap: 8px;
align-items: start;
margin-bottom: 8px;
}
.cs-area-abil { grid-area: abil; }
.cs-area-combat { grid-area: combat; }
/* Columna derecha: se estira a la altura completa del cuerpo (flex columna),
para que Notes absorba el espacio libre y el borde inferior quede alineado
en la misma linea que los paneles de la izquierda. */
.cs-area-side {
grid-area: side;
align-self: stretch;
display: flex;
flex-direction: column;
}
/* Paneles inferiores: dos sub-columnas; .cs-wide (Gear) ocupa el ancho completo */
.cs-area-bottom {
grid-area: bottom;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-content: start;
align-items: start;
}
.cs-area-bottom .cs-wide { grid-column: 1 / -1; }
/* Bandas de titulo de seccion */
.cs-bar {
background: var(--cs-ink-mid);
color: var(--cs-paper);
font-variant: small-caps;
letter-spacing: 2px;
font-size: 9pt;
font-weight: bold;
text-align: center;
padding: 1.5px 4px;
border-radius: 2px;
margin: 6px 0 3px;
}
.cs-col > .cs-bar:first-child { margin-top: 0; }
/* Tablas (saves, ataques, skills, carga, hechizos/dia) */
.cs-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.cs-table th, .cs-table td { border: 1px solid var(--cs-border); padding: 1.5px 3px; }
.cs-table th {
background: var(--cs-th-bg);
font-size: 7pt;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--cs-ink-soft);
}
.cs-table td { background: var(--cs-box-bg); text-align: center; }
.cs-table .cs-left { text-align: left; }
.cs-table .cs-abname {
background: var(--cs-ink-mid);
color: var(--cs-paper);
font-weight: bold;
letter-spacing: 1px;
}
.cs-abtable td { font-size: 11pt; font-weight: 600; height: 6mm; }
.cs-abtable .cs-abmod { font-size: 10pt; }
.cs-saves .cs-total { font-weight: bold; font-size: 10pt; }
/* Skills: fuente mas chica y sin envolver, para que "Gather Information" quepa
en una linea y todas las filas midan lo mismo (tabla de altura predecible). */
.cs-skills { font-size: 7.5pt; }
.cs-skills th, .cs-skills td { white-space: nowrap; }
.cs-skills td { padding: 1.5px 4px; }
.cs-note { font-size: 6.5pt; color: var(--cs-ink-mid); text-align: center; margin-top: 2px; }
/* Fila de casilleros de combate */
.cs-vitals { display: flex; gap: 6px; margin: 0 0 6px; }
.cs-vitals .cs-box { flex: 1; }
/* Etiquetas de vitales en una sola linea: mas chicas y sin tanto espaciado,
para que "Flat-Footed" o "Base Attack" no envuelvan y achiquen el numero. */
.cs-vitals .cs-box-label {
white-space: nowrap;
font-size: 6pt;
letter-spacing: 0.5px;
}
/* Numeros de combate (HP, CA, saves rapidos, etc.): mismo tamano en los 8 casilleros */
.cs-nums .cs-box-value { font-size: 14pt; }
.cs-acline {
font-size: 7.5pt;
color: var(--cs-ink-soft);
text-align: center;
margin: -2px 0 6px;
}
/* Retrato 3:4 como el arte de la app */
.cs-portrait {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border: 2px solid var(--cs-ink-mid);
border-radius: 3px;
background: var(--cs-box-bg);
}
/* Paneles (feats, rasgos, idiomas, equipo, hechizos) */
.cs-panel {
border: 1px solid var(--cs-ink-mid);
border-radius: 3px;
background: var(--cs-box-bg);
overflow: hidden;
break-inside: avoid;
}
.cs-panel > .cs-bar { margin: 0; border-radius: 0; }
.cs-list, .cs-text { padding: 3px 7px 5px; margin: 0; font-size: 7.5pt; line-height: 1.2; }
.cs-list { list-style: none; }
.cs-list li { padding: 1px 0; min-height: 10px; border-bottom: 1px dotted var(--cs-border-dotted); }
/* Listas largas (feats, class features) en dos columnas internas */
.cs-cols2 { column-count: 2; column-gap: 12px; }
.cs-cols2 li { break-inside: avoid; }
/* Campos de texto con alto reservado (~2 renglones): Languages, Gear */
.cs-lines2 { min-height: 8mm; }
/* Notes: llena el espacio libre bajo las skills. Area libre (sin recuadro ni
renglones) para escribir sin restricciones; solo lleva la banda de titulo. */
.cs-notes {
flex: 1;
display: flex;
flex-direction: column;
margin-top: 8px;
}
.cs-notes .cs-bar { margin: 0; }
.cs-notes-body {
flex: 1;
min-height: 6mm;
}
/* Hechizos */
.cs-magic { margin-bottom: 10px; break-inside: auto; }
.cs-magic .cs-vitals { margin: 6px 8px; }
.cs-magic .cs-vitals .cs-box { flex: 0 1 1.6in; }
.cs-perday { width: auto; margin: 0 8px 6px; }
.cs-perday td { font-weight: bold; min-width: 0.22in; }
.cs-magicnote { font-size: 8pt; font-style: italic; padding: 0 8px 4px; color: var(--cs-ink-soft); }
.cs-spellrow {
font-size: 8.5pt;
padding: 2px 8px;
border-top: 1px dotted var(--cs-border-dotted);
}
.cs-spelllvl { font-weight: bold; font-variant: small-caps; }
/* ===== Hoja de investigador (.cs-inv): layout propio ===== */
/* Zona superior: caracteristicas+dinero | vitales 2x2 | retrato. Anchos
fijos en los extremos; los vitales absorben el centro. */
.cs-inv-top {
display: grid;
grid-template-columns: 60mm 1fr 62mm;
gap: 8px;
align-items: start;
margin-bottom: 6px;
}
/* Vitales mas chicos que en la hoja de D&D (el espacio va al retrato). */
.cs-inv .cs-nums .cs-box-value { font-size: 11pt; }
/* Logo mas chico que en la hoja de D&D: la hoja de investigador va mas
cargada de secciones y estos ~4mm evitan desbordar a una segunda pagina
cuando el equipo trae la lista larga. */
.cs-inv .cs-brand-logo { width: 30mm; }
.cs-inv .cs-brand-logo + .cs-brand-sub { width: 30mm; letter-spacing: 2px; }
/* Contadores a lapiz (cordura/vida/magia): grillas de casilleros numerados
diminutos; el valor inicial va recuadrado en negrita. */
.cs-counter-label {
font-size: 6.5pt;
font-variant: small-caps;
letter-spacing: 1px;
color: var(--cs-ink-mid);
margin: 4px 0 1px;
}
/* Columna central estirada a la altura de la fila (que fija el retrato);
la grilla de cordura crece para llenar el hueco vertical libre. */
.cs-inv-center {
align-self: stretch;
display: flex;
flex-direction: column;
}
.cs-counter { display: grid; gap: 1px; }
.cs-counter-c20 { grid-template-columns: repeat(20, 1fr); }
.cs-counter-c9 { grid-template-columns: repeat(9, 1fr); }
/* Las tres grillas se reparten el alto libre de la columna con flex-grow
proporcional a su numero de filas (cordura 5, vida 2, magia 2): asi
llenan el hueco hasta el retrato y todas las celdas quedan del mismo alto.
flex-basis 0 con min chico deja crecer sin que el contenido minimo
desborde. */
.cs-counter-fill { flex: 5 1 0; grid-template-rows: repeat(5, 1fr); }
.cs-counter-c9 { flex: 2 1 0; grid-template-rows: repeat(2, 1fr); }
.cs-cc {
border: 0.5px solid var(--cs-border);
background: var(--cs-box-bg);
font-size: 5pt;
min-height: 3mm;
display: flex;
align-items: center;
justify-content: center;
color: var(--cs-ink-faint);
}
.cs-cc-cur {
border: 1.2px solid var(--cs-ink);
font-weight: bold;
color: var(--cs-ink);
}
/* Marco de retrato 3:4 (mas alto que ancho) estilo foto de epoca; contiene
el SVG del arquetipo, que lo llena por completo. */
.cs-portrait-frame {
aspect-ratio: 3 / 4;
border: 2px solid var(--cs-ink-mid);
border-radius: 3px;
background: var(--cs-box-bg);
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
.cs-portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* La columna de caracteristicas se estira a la altura de la fila (que la
fija el retrato, el item mas alto) y Rolls baja al fondo: ambos bordes
inferiores coinciden. Las filas de la tabla van un poco mas compactas
que en la hoja de D&D para quedar por debajo del alto del retrato. */
.cs-inv-top > .cs-col:first-child {
align-self: stretch;
display: flex;
flex-direction: column;
}
.cs-inv-top > .cs-col:first-child > .cs-bar:last-of-type { margin-top: auto; }
.cs-inv .cs-abtable td { height: 5.5mm; }
.cs-portrait-label {
font-size: 6.5pt;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--cs-ink-mid);
padding-bottom: 2px;
}
/* Zona media: armas | seguimiento de cordura + dinero apilados. */
.cs-inv-mid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 8px;
align-items: start;
margin-bottom: 6px;
}
/* Celda derecha (Insanity + Money) estirada a la altura de Weapons: Insanity
crece para acomodar su info comoda y Money queda compacto abajo. */
.cs-inv-mid > div:last-child {
align-self: stretch;
display: flex;
flex-direction: column;
}
/* Insanity baja 6px para alinear su borde superior con la banda de Weapons
(que trae ese margen de .cs-bar) y crece para llenar el alto libre; su
cuerpo de texto se estira para dejar mas espacio de escritura. */
.cs-inv-mid .cs-panel:first-child {
margin-top: 6px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.cs-inv-mid .cs-panel:first-child .cs-text { flex: 1 1 auto; }
.cs-inv-mid .cs-money { margin-top: 6px; }
/* Insanity: tres categorias repartidas en el alto del panel, cada una con
su renglon de escritura que se estira a lo ancho disponible. */
.cs-insanity {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.cs-ins-row {
display: flex;
align-items: baseline;
gap: 5px;
font-size: 7.5pt;
}
.cs-ins-lbl { white-space: nowrap; color: var(--cs-ink-soft); }
.cs-ins-line { flex: 1; border-bottom: 1px solid var(--cs-border); }
/* Lista completa de skills (todas, con base o mejorado) en cuatro columnas
compactas: el valor va pegado al nombre (sin corrido al borde derecho),
asi cada fila arranca del margen izquierdo y ocupa lo minimo. */
.cs-skillgrid {
column-count: 4;
column-gap: 8px;
margin-bottom: 3px;
}
.cs-sk {
display: flex;
align-items: baseline;
break-inside: avoid;
font-size: 7.5pt;
padding: 1px 0;
border-bottom: 1px dotted var(--cs-border-dotted);
}
.cs-sk-name {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 3px;
}
.cs-sk-val {
flex: 0 0 auto;
font-weight: 600;
text-align: left;
}
/* Skills mejoradas (con puntos por encima de la base): resaltadas. */
.cs-sk-imp .cs-sk-name { font-weight: 600; }
.cs-sk-imp .cs-sk-val { color: var(--cs-ink-mid); }
/* Skills core de la ocupacion. */
.cs-sk-core .cs-sk-name { color: var(--cs-ink-mid); }
/* Zona inferior: equipo | trasfondo. */
.cs-inv-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
/* Background & Contacts iguala su alto al de Gear (grid stretch) y su area
de escritura llena todo el panel en vez de quedar chica arriba. */
.cs-inv-bottom > .cs-panel:last-child {
display: flex;
flex-direction: column;
}
.cs-inv-bottom > .cs-panel:last-child .cs-text { flex: 1 1 auto; }
/* Paleta de la hoja de investigador ("Tinta de Innsmouth"): papel claro
con leve tinte azul-gris marino y tinta/barras en verde-azulado muy
oscuro, a tono con el clima lovecraftiano de puerto de los retratos
1920s, en vez del pergamino marron de la hoja de D&D. */
.cs-page.cs-inv {
--cs-paper: #eef3f1;
--cs-box-bg: #f8faf9;
--cs-th-bg: #d9e3e0;
--cs-ink: #12201f;
--cs-ink-mid: #274445;
--cs-ink-soft: #3d5a5a;
--cs-ink-faint: #6f8988;
--cs-border: #9fb2af;
--cs-border-dotted: #bccbc8;
--cs-border-soft: #d6e0dd;
}
}
/* ===== Aviso de licencia (generador de investigadores) ===== */
.orc-notice {
margin: 24px auto 12px;
max-width: 720px;
text-align: center;
font-size: 0.75rem;
color: #8a8a8a;
font-style: italic;
}
/* Selector de ocupacion del generador de investigadores */
#occupation-select {
font-size: 1rem;
padding: 4px 8px;
min-width: 200px;
}