/* ============================================================ Bardo — piel visual. Oscuro y atmosférico. Cuatro temas: · menú (crepúsculo, el instante antes de la aventura) · fantasia (bosque + brasas + oro) · scifi (espacio profundo + cian + nebulosa) · misterio (pizarra fría + niebla + un rojo) · master (mesa a la luz de las velas) El tema se pone en desde el router. ============================================================ */ /* ---------- Tokens compartidos + tema MENÚ por defecto ---------- */ :root{ --font-display: 'Cinzel', 'Fraunces', Georgia, serif; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-ui: 'Work Sans', system-ui, -apple-system, sans-serif; --bg: #130f1e; --bg-grad: radial-gradient(120% 80% at 50% -10%, rgba(138,120,214,0.22), transparent 60%), radial-gradient(120% 70% at 50% 115%, rgba(224,179,84,0.14), transparent 62%), linear-gradient(180deg, #1b1530 0%, #120d1e 45%, #0c0916 100%); --ink: #efe7d6; --ink-soft: #b3a9c6; --ink-faint: #8a809d; --accent: #e6b354; --accent-deep: #b9822f; --accent-ink: #201704; --accent-2: #9a86e6; --glow: rgba(230,179,84,0.30); --line: rgba(230,179,84,0.20); --line-soft: rgba(255,255,255,0.09); --surface: rgba(255,255,255,0.045); --surface-2: rgba(255,255,255,0.07); --danger: #d6786f; --success: #86b072; --stars-opacity: 0.30; --glow-pos: 50% -10%; --glow-color: rgba(138,120,214,0.5); --fog-opacity: 0; --vignette: rgba(6,4,12,0.72); --dropcap: var(--accent); --measure: 62ch; } html[data-theme="fantasia"]{ --font-display: 'Cinzel', 'Fraunces', serif; --bg: #0e140e; --bg-grad: radial-gradient(90% 60% at 50% 118%, rgba(224,124,52,0.30), transparent 60%), radial-gradient(120% 90% at 50% -20%, rgba(20,42,30,0.7), transparent 55%), linear-gradient(180deg, #14211a 0%, #0e1712 50%, #080d0a 100%); --ink: #f1ead7; --ink-soft: #b3bda3; --ink-faint: #8b957c; --accent: #eaa63f; --accent-deep: #b26f22; --accent-ink: #1e1305; --accent-2: #7aa860; --glow: rgba(234,166,63,0.34); --line: rgba(234,166,63,0.24); --glow-color: rgba(224,124,52,0.55); --glow-pos: 50% 120%; --stars-opacity: 0.16; --vignette: rgba(4,8,5,0.78); --dropcap: var(--accent); } html[data-theme="scifi"]{ --font-display: 'Chakra Petch', 'Work Sans', sans-serif; --bg: #070a14; --bg-grad: radial-gradient(70% 55% at 82% -5%, rgba(96,74,190,0.35), transparent 62%), radial-gradient(60% 50% at 12% 8%, rgba(79,208,224,0.16), transparent 60%), linear-gradient(180deg, #0b1226 0%, #070c18 55%, #04060d 100%); --ink: #e7edf6; --ink-soft: #9aabc8; --ink-faint: #74849f; --accent: #55d3e2; --accent-deep: #2c93a3; --accent-ink: #04191d; --accent-2: #b98cf2; --glow: rgba(85,211,226,0.28); --line: rgba(85,211,226,0.22); --glow-color: rgba(96,74,190,0.6); --glow-pos: 82% -5%; --stars-opacity: 0.7; --vignette: rgba(2,4,10,0.7); --dropcap: var(--accent); } html[data-theme="misterio"]{ --font-display: 'Fraunces', Georgia, serif; --bg: #0d1012; --bg-grad: radial-gradient(80% 60% at 50% 120%, rgba(95,138,134,0.16), transparent 60%), linear-gradient(180deg, #151b1f 0%, #0e1214 55%, #080a0b 100%); --ink: #e5e7e5; --ink-soft: #9aa2a2; --ink-faint: #767d7d; --accent: #c14a44; --accent-deep: #8f322e; --accent-ink: #fbeae9; --accent-2: #6f9c98; --glow: rgba(193,74,68,0.24); --line: rgba(255,255,255,0.11); --glow-color: rgba(95,138,134,0.4); --glow-pos: 50% 120%; --stars-opacity: 0.05; --fog-opacity: 0.55; --vignette: rgba(4,6,7,0.82); --dropcap: var(--accent); } html[data-theme="master"]{ --font-display: 'Cinzel', 'Fraunces', serif; --bg: #161009; --bg-grad: radial-gradient(80% 55% at 50% 120%, rgba(217,164,65,0.24), transparent 60%), linear-gradient(180deg, #211708 0%, #161009 55%, #0d0905 100%); --ink: #f2e8d4; --ink-soft: #bcae95; --ink-faint: #92876f; --accent: #dca441; --accent-deep: #a87626; --accent-ink: #1d1304; --accent-2: #b07a4e; --glow: rgba(220,164,65,0.30); --line: rgba(220,164,65,0.22); --glow-color: rgba(217,164,65,0.5); --glow-pos: 50% 120%; --stars-opacity: 0.12; --vignette: rgba(6,4,2,0.8); --dropcap: var(--accent); } /* ---------- Base ---------- */ *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } html{ background: var(--bg); transition: background-color .7s ease; } body{ min-height: 100vh; color: var(--ink); font-family: var(--font-ui); background: transparent; transition: color .5s ease; -webkit-font-smoothing: antialiased; } a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; text-underline-offset: 3px; } ::selection{ background: var(--accent); color: var(--accent-ink); } ::placeholder{ color: var(--ink-faint); opacity: 1; } /* ---------- Atmósfera ---------- */ .atmos{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .atmos > span{ position:absolute; inset:-10%; display:block; } .atmos-glow{ background: radial-gradient(46% 40% at var(--glow-pos), var(--glow-color), transparent 70%); transition: background .7s ease; } .atmos-fog{ opacity: var(--fog-opacity); background: radial-gradient(60% 45% at 30% 60%, rgba(200,210,210,0.10), transparent 70%), radial-gradient(55% 40% at 75% 40%, rgba(180,195,195,0.09), transparent 70%); filter: blur(14px); transition: opacity .7s ease; } .atmos-vignette{ background: radial-gradient(115% 90% at 50% 40%, transparent 45%, var(--vignette) 100%); transition: background .7s ease; } .atmos-stars{ opacity: var(--stars-opacity); transition: opacity .7s ease; background-repeat: repeat; background-size: 260px 260px; background-image: radial-gradient(1.4px 1.4px at 24px 34px, #fff, transparent), radial-gradient(1px 1px at 96px 12px, rgba(255,255,255,.85), transparent), radial-gradient(1.6px 1.6px at 168px 66px, #fff, transparent), radial-gradient(1px 1px at 210px 128px, rgba(255,255,255,.7), transparent), radial-gradient(1.2px 1.2px at 44px 150px, #fff, transparent), radial-gradient(1px 1px at 130px 190px, rgba(255,255,255,.75), transparent), radial-gradient(1.5px 1.5px at 240px 30px, #fff, transparent), radial-gradient(1px 1px at 12px 220px, rgba(255,255,255,.6), transparent), radial-gradient(1.3px 1.3px at 190px 232px, #fff, transparent), radial-gradient(1px 1px at 78px 98px, rgba(255,255,255,.7), transparent); } /* ---------- Layout ---------- */ .wrap{ position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 30px 22px 150px; } .wrap.narrow{ max-width: 440px; } /* ---------- Header (fijo arriba) ---------- */ header.site{ position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap: 16px; max-width: 720px; margin: 0 auto; padding: 16px 22px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } header.site .brand{ display:flex; align-items:center; gap: 11px; color: var(--accent); text-decoration: none; } header.site .sigil{ width: 26px; height: 26px; flex:none; filter: drop-shadow(0 0 6px var(--glow)); } header.site .brand-text{ font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.14em; color: var(--ink); text-transform: uppercase; text-shadow: 0 0 18px var(--glow); line-height: 1; } header.site .brand-text .tag{ display:block; font-family: var(--font-ui); font-weight: 400; text-transform: none; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-faint); margin-top: 4px; } header.site nav{ display:flex; gap: 18px; align-items:center; flex-wrap: wrap; } header.site nav a, header.site nav button.link{ font-size: 0.8rem; letter-spacing: 0.03em; color: var(--ink-soft); text-decoration:none; background:none; border:none; cursor:pointer; font-family: var(--font-ui); padding: 2px 0; position: relative; } header.site nav a:hover, header.site nav button.link:hover{ color: var(--ink); text-decoration:none; } header.site nav a.active{ color: var(--accent); } header.site nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: var(--accent); box-shadow: 0 0 8px var(--glow); } /* ---------- Tipografía ---------- */ h1.page{ font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.15; margin: 6px 0 6px; letter-spacing: 0.02em; text-shadow: 0 0 26px var(--glow); } h2.section{ font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 34px 0 12px; letter-spacing: 0.06em; color: var(--ink); } p.lead{ color: var(--ink-soft); margin: 0 0 26px; line-height: 1.65; max-width: var(--measure); } .ornament{ display:flex; align-items:center; gap: 14px; margin: 26px 0; color: var(--line); } .ornament::before, .ornament::after{ content:''; height:1px; flex:1; background: currentColor; } .ornament span{ color: var(--accent); font-size: 0.9rem; letter-spacing: 0.3em; } /* ---------- Campos ---------- */ .field{ margin-bottom: 20px; } .field label{ display:block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .field input[type=text], .field input[type=email], .field input[type=password], .field textarea, .field select{ width:100%; font-family: var(--font-ui); font-size: 1rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 3px; padding: 11px 13px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; } .field textarea{ resize: vertical; min-height: 68px; font-family: var(--font-serif); line-height: 1.55; } .field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); background: var(--surface); } .field .hint{ font-size: 0.74rem; color: var(--ink-faint); margin-top: 7px; line-height: 1.45; } .chk-line{ display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 6px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; cursor: pointer; } .chk-line input[type=checkbox]{ margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex: none; } .chk-line b{ color: var(--ink); font-weight: 600; } /* ---------- Tarjetas de opción / chips ---------- */ .opt-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 22px; } .opt{ position: relative; text-align:left; font: inherit; color: inherit; cursor:pointer; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 5px; padding: 18px 16px; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; overflow: hidden; } .opt::before{ content:''; position:absolute; inset:0; opacity:0; transition: opacity .25s; background: radial-gradient(80% 120% at 50% 0%, var(--glow), transparent 70%); } .opt:hover{ transform: translateY(-3px); border-color: var(--line); box-shadow: 0 14px 34px -16px var(--glow); } .opt:hover::before{ opacity: .5; } .opt.selected{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 40px -18px var(--glow); background: var(--surface-2); } .opt.selected::before{ opacity: 1; } .opt .name{ font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.03em; position: relative; } .opt .desc{ font-size: 0.78rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; position: relative; } .chip-row{ display:flex; flex-wrap:wrap; gap: 9px; } .chip{ font: inherit; color: var(--ink-soft); cursor:pointer; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 15px; font-size: 0.85rem; transition: all .16s; } .chip:hover{ border-color: var(--line); color: var(--ink); } .chip.selected{ border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 16px -4px var(--glow); } /* ---------- Botones ---------- */ button.primary{ font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); cursor:pointer; border: none; border-radius: 4px; padding: 13px 30px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 30px -10px var(--glow); transition: transform .15s, box-shadow .15s, filter .15s; } button.primary:hover:not(:disabled){ transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 40px -12px var(--glow); } button.primary:active:not(:disabled){ transform: translateY(0); } button.primary:disabled{ opacity: .4; cursor: not-allowed; filter: grayscale(.3); } button.ghost{ font-family: var(--font-ui); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink); background: var(--surface); cursor:pointer; border: 1px solid var(--line); border-radius: 4px; padding: 11px 22px; transition: all .16s; } button.ghost:hover{ border-color: var(--accent); box-shadow: 0 0 20px -6px var(--glow); } button.link{ background:none; border:none; color: var(--accent); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; cursor:pointer; padding: 0; font-family: var(--font-ui); } button.link:hover{ filter: brightness(1.15); } .btn-row{ display:flex; gap: 14px; align-items:center; flex-wrap:wrap; margin-top: 10px; } /* ---------- Avisos ---------- */ .notice{ padding: 13px 15px; border-left: 2px solid var(--accent); border-radius: 2px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 0.88rem; line-height: 1.55; margin: 16px 0; color: var(--ink); } .notice.bad{ border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .notice.good{ border-left-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); } .help-block{ margin: 16px 0; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--surface-2); } .help-block summary{ padding: 12px 15px; cursor: pointer; font-size: 0.88rem; color: var(--accent); list-style: none; font-weight: 600; } .help-block summary::-webkit-details-marker{ display: none; } .help-block summary::before{ content: '+ '; } .help-block[open] summary::before{ content: '– '; } .help-block .help-body{ padding: 2px 15px 15px; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); } .help-block .help-body ul{ margin: 0 0 4px; padding-left: 1.1em; } .help-block .help-body li{ margin-bottom: 8px; } .help-block .help-body b{ color: var(--ink); } .help-block .help-examples{ font-style: italic; } .help-block .help-examples li{ margin-bottom: 10px; } /* ---------- Landing ---------- */ .hero{ padding: 18px 0 6px; } .hero .kicker{ font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .hero h1{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.1rem); line-height: 1.08; margin: 0 0 18px; letter-spacing: 0.01em; text-shadow: 0 0 40px var(--glow); } .hero p{ font-size: 1.05rem; line-height: 1.7; color: var(--ink); max-width: 54ch; } .hero p .sub{ color: var(--ink-soft); } .feature{ border-top: 1px solid var(--line-soft); padding: 18px 0; } .feature h3{ font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.03em; margin: 0 0 5px; color: var(--ink); } .feature p{ margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; } /* ---------- Precios ---------- */ .plans{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; } .plan{ border: 1px solid var(--line-soft); border-radius: 6px; padding: 22px 20px; background: var(--surface); position: relative; overflow: hidden; } .plan.pro{ border-color: var(--accent); box-shadow: 0 0 40px -18px var(--glow); } .plan.pro::before{ content:''; position:absolute; inset:0; background: radial-gradient(90% 60% at 50% 0%, var(--glow), transparent 65%); opacity: .4; } .plan > *{ position: relative; } .plan h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.04em; margin: 0 0 3px; } .plan .price{ font-family: var(--font-display); font-size: 1.6rem; margin: 8px 0 14px; color: var(--accent); } .plan .price small{ font-size: 0.78rem; color: var(--ink-faint); font-family: var(--font-ui); } .plan ul{ list-style:none; padding:0; margin: 0 0 18px; } .plan li{ font-size: 0.86rem; padding: 7px 0 7px 20px; border-bottom: 1px solid var(--line-soft); color: var(--ink); position: relative; } .plan li::before{ content:'✦'; position:absolute; left:0; color: var(--accent); font-size: 0.7rem; top: 8px; } .plan li:last-child{ border-bottom:none; } /* ---------- Lista de partidas ---------- */ .game-item{ display:flex; justify-content:space-between; align-items:center; gap: 14px; padding: 16px 14px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--surface); margin-bottom: 10px; transition: border-color .16s, box-shadow .16s; } .game-item:hover{ border-color: var(--line); box-shadow: 0 8px 26px -16px var(--glow); } .game-item .t{ font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.02em; } .game-item .m{ font-size: 0.74rem; color: var(--ink-faint); margin-top: 3px; letter-spacing: 0.03em; } .turn-pill{ display: inline-block; font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.04em; border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px; text-transform: none; } .turn-pill.ok{ color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); } .turn-pill.warn{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .turn-pill.crit{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .game-item .acts{ display:flex; gap: 12px; flex-shrink:0; } /* ---------- Pantalla de juego ---------- */ /* Barra de juego: fija justo debajo del menú, ocupa el ancho de la columna. */ .play-bar{ position: sticky; top: var(--head-h, 58px); z-index: 15; margin: 0 -22px; padding: 14px 22px 0; background: color-mix(in srgb, var(--bg) 93%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .play-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; } .play-head .ptitle{ font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.03em; text-shadow: 0 0 20px var(--glow); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .turn-badge{ font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-faint); text-shadow: none; text-transform: uppercase; border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 8px; } .turn-badge.long{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .sheet-strip{ display:flex; gap: 18px; font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.04em; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin: 12px 0 0; flex-wrap: wrap; transition: opacity .15s ease; } .sheet-strip b{ color: var(--accent); font-weight: 600; } /* Minimizada: solo lo esencial (♥, estados, mochila), sin aptitudes. */ .play-bar.min .sheet-strip{ padding-bottom: 9px; gap: 12px; } .play-bar.min .sheet-strip > span:not([class]), .play-bar.min .sheet-strip .strip-apt:not(.hp):not(.strip-bag), .play-bar.min .sheet-strip .strip-more{ display: none; } .play-bar .play-head-acts .link{ white-space: nowrap; } #log{ margin-bottom: 18px; } .entry{ padding: 20px 0; border-bottom: 1px solid var(--line-soft); } .entry:last-child{ border-bottom:none; } .entry .who{ font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .replay-btn{ background: none; border: 1px solid var(--line-soft); color: var(--ink-faint); border-radius: 999px; width: 20px; height: 20px; line-height: 1; padding: 0; font-size: 0.6rem; cursor: pointer; letter-spacing: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .replay-btn:hover{ color: var(--accent); border-color: var(--accent); } .entry.gm .body{ font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.78; color: var(--ink); white-space: pre-wrap; } .entry.gm .body::first-letter{ font-family: var(--font-display); font-size: 3.1em; line-height: 0.82; font-weight: 600; float: left; margin: 6px 10px 0 0; color: var(--dropcap); text-shadow: 0 0 22px var(--glow); } .entry.player .body{ font-family: var(--font-ui); font-style: italic; color: var(--ink-soft); padding-left: 14px; border-left: 2px solid var(--accent-2); white-space: pre-wrap; } .entry.thinking .body{ color: var(--ink-faint); font-style: italic; } .entry.thinking .body::first-letter{ font-size: 1em; float: none; margin: 0; color: inherit; text-shadow: none; } .entry .roll-result{ display:inline-block; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; border: 1px solid var(--accent); border-radius: 3px; padding: 3px 12px; margin-top: 8px; color: var(--accent); box-shadow: 0 0 18px -6px var(--glow); } .entry .roll-result.crit{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 22px -4px var(--accent); } .entry .roll-result.fumble{ border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); box-shadow: 0 0 22px -4px var(--danger); } .entry .error-msg{ color: var(--danger); font-size: 0.9rem; } /* ---------- Composer ---------- */ .composer{ position: fixed; left:0; right:0; bottom:0; z-index: 3; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 12px 22px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px -30px var(--glow); } .composer-inner{ max-width: 720px; margin: 0 auto; display:flex; gap: 11px; align-items:flex-end; } .composer textarea{ flex:1; font-family: var(--font-serif); font-size: 1rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 11px 13px; resize:none; min-height: 46px; max-height: 130px; outline:none; transition: border-color .16s, box-shadow .16s; } .composer textarea:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .dice-row{ max-width: 720px; margin: 0 auto 8px; display:flex; gap: 7px; flex-wrap:wrap; align-items:center; } .dice-chip{ font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-soft); cursor:pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 7px 12px; transition: all .14s; } .dice-chip:hover{ background: var(--surface-2); color: var(--ink); box-shadow: 0 0 14px -6px var(--glow); } .dice-chip:active{ border-color: var(--accent); } .dice-row select{ font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink); cursor:pointer; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px; } .send-btn{ font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); cursor:pointer; border: none; border-radius: 4px; padding: 12px 20px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); box-shadow: 0 8px 24px -10px var(--glow); transition: transform .14s, filter .14s; } .send-btn:hover:not(:disabled){ transform: translateY(-1px); filter: brightness(1.08); } .send-btn:disabled{ opacity: .4; cursor: not-allowed; } /* Micrófono (dictado por voz) */ .mic-btn{ flex: none; width: 44px; height: 44px; border-radius: 4px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-size: 1.05rem; line-height: 1; transition: transform .14s, border-color .14s, color .14s; } .mic-btn:hover:not(:disabled){ border-color: var(--accent); color: var(--ink); } .mic-btn:disabled{ opacity: .4; cursor: not-allowed; } .mic-btn.rec{ border-color: var(--danger); color: var(--danger); animation: micpulse 1.1s ease-in-out infinite; } @keyframes micpulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(214,120,111,.5); } 50%{ box-shadow: 0 0 0 6px rgba(214,120,111,0); } } /* Selectores del compositor (voz, proveedor de IA) acordes a la estética */ .sel-wrap{ position: relative; display: inline-flex; } .sel-wrap::after{ content: ''; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .sel{ appearance: none; -webkit-appearance: none; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 24px 5px 12px; cursor: pointer; text-overflow: ellipsis; transition: color .15s, border-color .15s, background .15s; } .sel:hover{ color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .sel:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .sel option{ background: #16121f; color: var(--ink); } .usage-line{ max-width: 720px; margin: 0 auto 6px; font-size: 0.68rem; color: var(--ink-faint); text-align: right; letter-spacing: 0.05em; } /* Barra de uso del tramo gratis de IA */ .free-bar{ display: flex; align-items: center; gap: 8px; font-size: 0.64rem; color: var(--ink-faint); letter-spacing: 0.03em; } .free-bar-track{ width: 90px; height: 5px; border-radius: 999px; background: var(--line-soft); overflow: hidden; flex: none; } .free-bar-fill{ display: block; height: 100%; width: 0; background: var(--success); transition: width .3s ease; } .free-bar.warn .free-bar-fill{ background: var(--accent); } .free-bar.full .free-bar-fill{ background: var(--danger); } .free-bar.full .free-bar-txt{ color: var(--danger); } .free-bar-txt{ white-space: nowrap; } /* ---------- Misc ---------- */ .muted{ color: var(--ink-soft); } .small{ font-size: 0.82rem; } .center{ text-align:center; } .spinner{ display:inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; } .divider{ border:none; border-top: 1px solid var(--line-soft); margin: 26px 0; } table.mini{ width:100%; border-collapse: collapse; font-size: 0.85rem; } table.mini td, table.mini th{ text-align:left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); } table.mini th{ color: var(--ink-faint); font-weight: 600; letter-spacing: 0.04em; } /* ---------- Animación ---------- */ @keyframes spin{ to{ transform: rotate(360deg); } } @keyframes rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } } @keyframes fadein{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes drift{ from{ background-position: 0 0; } to{ background-position: 260px 520px; } } @keyframes fogmove{ from{ transform: translate3d(-3%, 0, 0); } to{ transform: translate3d(3%, 2%, 0); } } @media (prefers-reduced-motion: no-preference){ .atmos-stars{ animation: drift 200s linear infinite; } .atmos-fog{ animation: fogmove 32s ease-in-out infinite alternate; } /* El contenedor solo funde: un transform en .wrap rompe el position:sticky de la barra de juego que cuelga de él. El "rise" lo dan los hijos. */ .wrap.enter{ animation: fadein .5s ease both; } .wrap.enter > *{ animation: rise .55s ease both; } .wrap.enter > .play-bar{ animation: none; } .wrap.enter > *:nth-child(1){ animation-delay: .02s; } .wrap.enter > *:nth-child(2){ animation-delay: .07s; } .wrap.enter > *:nth-child(3){ animation-delay: .12s; } .wrap.enter > *:nth-child(4){ animation-delay: .17s; } .wrap.enter > *:nth-child(5){ animation-delay: .22s; } .wrap.enter > *:nth-child(6){ animation-delay: .27s; } .entry:last-child{ animation: rise .45s ease both; } } /* ---------- Barra de asignación ---------- */ .allowance-bar{ height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; border: 1px solid var(--line-soft); } .allowance-bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px -2px var(--glow); } /* ---------- BETA badge ---------- */ .beta-badge{ font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent-deep)); padding: 3px 8px; border-radius: 3px; text-transform: uppercase; box-shadow: 0 0 14px -4px var(--glow); } /* ---------- Creación por pasos ---------- */ .step{ margin-bottom: 26px; } .step-label{ font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } @media (prefers-reduced-motion: no-preference){ .step:not([hidden]){ animation: rise .4s ease both; } } .sheet-preview{ max-width: 340px; } /* ---------- Ficha de personaje ---------- */ .sheet-card{ border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; background: var(--surface); display: grid; gap: 12px; } .apt-row{ display: grid; grid-template-columns: 5.5em 1fr auto; align-items: center; gap: 12px; } .apt-name{ font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.03em; } .apt-bar{ display: flex; gap: 4px; } .apt-seg{ flex: 1; height: 8px; border-radius: 2px; background: var(--line-soft); border: 1px solid transparent; } .apt-seg.on{ background: var(--accent); box-shadow: 0 0 8px -2px var(--glow); } .apt-seg.zero{ opacity: 1; } .apt-seg.neg{ background: var(--danger); } .apt-val{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); min-width: 2ch; text-align: right; } .apt-row.aguante .pips{ display: flex; gap: 5px; } .pip{ width: 12px; height: 12px; border-radius: 50%; background: var(--line-soft); } .pip.on{ background: var(--danger); box-shadow: 0 0 8px -2px var(--danger); } /* ---------- Modal genérico ---------- */ .modal-overlay{ position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(3,2,8,0.82); opacity: 0; transition: opacity .2s ease; } .modal-overlay.show{ opacity: 1; } .modal-panel{ width: min(440px, 100%); max-height: 86vh; overflow-y: auto; background: var(--bg); background-image: var(--bg-grad); border: 1px solid var(--line); border-radius: 10px; padding: 24px; box-shadow: 0 40px 100px -30px #000, 0 0 60px -20px var(--glow); transform: translateY(10px) scale(.98); transition: transform .2s ease; } .modal-overlay.show .modal-panel{ transform: none; } .modal-panel.wide{ width: min(640px, 100%); } /* ---------- Dado estilo BG3 ---------- */ .dice-modal{ text-align: center; } .dice-stage{ display: grid; place-items: center; min-height: 168px; margin-bottom: 6px; } .big-die{ width: 148px; height: 148px; filter: drop-shadow(0 12px 34px -10px var(--glow)); } .big-die svg{ width: 100%; height: 100%; overflow: visible; } .big-die .die-face{ fill: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); stroke: var(--accent); } .big-die .die-num{ fill: var(--ink); font-family: var(--font-display); letter-spacing: 0.5px; } @media (prefers-reduced-motion: no-preference){ .big-die.rolling{ animation: tumble .62s cubic-bezier(.3,.1,.3,1) infinite; } .big-die.settled{ animation: diedrop .5s cubic-bezier(.2,1.4,.4,1) both; } } @keyframes tumble{ 0%{ transform: rotate(0) scale(.9); } 50%{ transform: rotate(190deg) scale(1.08); } 100%{ transform: rotate(360deg) scale(.9); } } @keyframes diedrop{ 0%{ transform: scale(1.5) rotate(-12deg); opacity: .2; } 60%{ transform: scale(.94) rotate(4deg); } 100%{ transform: scale(1) rotate(0); opacity: 1; } } .big-die.settled.q-fail .die-face{ stroke: var(--danger); fill: color-mix(in srgb, var(--danger) 16%, transparent); } .big-die.settled.q-low .die-face{ stroke: var(--danger); } .big-die.settled.q-good .die-face, .big-die.settled.q-high .die-face{ stroke: var(--accent); } .big-die.settled.q-crit .die-face{ stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 22%, transparent); } .big-die.settled.q-crit{ filter: drop-shadow(0 0 26px var(--accent)); } .big-die.settled.q-fail, .big-die.settled.q-low{ filter: drop-shadow(0 0 22px var(--danger)); } .dice-verdict{ height: 0; overflow: visible; } .dice-verdict.show{ height: auto; margin: 2px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase; } .dice-verdict.crit{ color: var(--accent); text-shadow: 0 0 24px var(--accent); } .dice-verdict.fumble{ color: var(--danger); text-shadow: 0 0 22px var(--danger); } @media (prefers-reduced-motion: no-preference){ .dice-verdict.show{ animation: verdictpop .5s cubic-bezier(.2,1.5,.4,1) both, verdictpulse 1.8s ease-in-out .5s infinite; } } @keyframes verdictpop{ 0%{ transform: scale(1.6); opacity: 0; } 60%{ transform: scale(.94); } 100%{ transform: scale(1); opacity: 1; } } @keyframes verdictpulse{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.35); } } .dice-caption{ font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; } .dice-numbers{ font-family: var(--font-display); font-weight: 700; line-height: 1; margin-bottom: 4px; display: flex; align-items: baseline; justify-content: center; gap: 10px; } .n-base{ font-size: 3.4rem; color: var(--ink); text-shadow: 0 0 30px var(--glow); } .n-extra{ display: flex; align-items: baseline; gap: 8px; font-size: 1.6rem; color: var(--ink-soft); } .n-total{ color: var(--accent); font-size: 2.4rem; text-shadow: 0 0 24px var(--glow); } .dice-modal.crit .n-base{ color: var(--accent); } .dice-modal.fumble .n-base{ color: var(--danger); } .mod-wrap{ margin: 14px 0 4px; } .mod-title{ font-size: 0.76rem; color: var(--ink-faint); letter-spacing: 0.06em; margin-bottom: 10px; } .mod-chips{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .mod-chips .chip{ font-size: 0.8rem; } .dice-actions{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; } .dice-actions .primary{ width: 100%; } /* ---------- Play head + strip ---------- */ .play-head-acts{ display: flex; gap: 14px; align-items: baseline; } .sheet-strip .strip-apt{ font-family: var(--font-ui); font-size: 0.72rem; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 9px; } /* Aguante vivo: normal / herido / a cero */ .sheet-strip .strip-apt.hp.hurt{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .sheet-strip .strip-apt.hp.down{ color: var(--danger); border-color: var(--danger); font-weight: 700; } /* Estados adversos */ .sheet-strip .strip-estado{ font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--danger); text-transform: lowercase; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 999px; padding: 2px 9px; background: color-mix(in srgb, var(--danger) 10%, transparent); } .sheet-strip .strip-apt.pulse, .sheet-strip .strip-estado.pulse{ animation: strippulse 0.9s ease-out; } @keyframes strippulse{ 0%{ transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 60%, transparent); } 30%{ transform: scale(1.14); } 100%{ transform: scale(1); box-shadow: 0 0 0 10px transparent; } } .sheet-strip .strip-more{ color: var(--accent); font-size: 0.7rem; align-self: center; } .sheet-strip:hover .strip-more{ text-decoration: underline; } .sheet-estados{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sheet-estados .estado-chip{ font-family: var(--font-ui); font-size: 0.74rem; color: var(--danger); text-transform: lowercase; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 999px; padding: 2px 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); } .sheet-strip .strip-bag{ color: var(--ink); } /* ---------- Hoja de personaje (modal) ---------- */ .hoja{ display: flex; flex-direction: column; } .hoja-head{ border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; } .hoja-name{ font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 2px; color: var(--ink); } .hoja-sub{ font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-soft); text-transform: capitalize; } .hoja-trait{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); margin: 12px 0 4px; } .hoja-sec{ margin-top: 20px; } .hoja-sec-t{ font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .hoja-chips{ display: flex; flex-wrap: wrap; gap: 7px; } .hoja .item-chip{ font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 11px; background: var(--surface-2); } .hoja .estado-chip{ font-family: var(--font-ui); font-size: 0.8rem; color: var(--danger); text-transform: lowercase; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 999px; padding: 3px 11px; background: color-mix(in srgb, var(--danger) 10%, transparent); } .hoja-hp{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .hoja-hp-n{ font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); } .hoja-hp.hurt .hoja-hp-n{ color: var(--danger); } .hoja-hp.down .hoja-hp-n{ color: var(--danger); font-weight: 700; } /* ---------- Composer rediseñado ---------- */ .composer-top{ max-width: 720px; margin: 0 auto 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .composer-top-right{ display: flex; align-items: center; gap: 12px; } .composer-top-right .usage-line{ margin: 0; } .dice-tray{ display: flex; align-items: center; gap: 10px; } .tray-label{ font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .tray-dice{ display: flex; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,0.22); box-shadow: inset 0 2px 10px -4px #000; } .die-btn{ display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: var(--font-ui); color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px 8px 4px; min-width: 40px; transition: all .14s; } .die-btn-ico{ color: var(--accent); display: grid; place-items: center; line-height: 0; } .die-btn-n{ font-size: 0.68rem; letter-spacing: 0.04em; } .die-btn:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--accent); color: var(--ink); box-shadow: 0 8px 20px -10px var(--glow); } .die-btn:active:not(:disabled){ transform: translateY(0); } .die-btn:disabled{ opacity: .4; cursor: not-allowed; } /* ---------- Responsive ---------- */ @media (max-width: 560px){ .plans{ grid-template-columns: 1fr; } header.site{ flex-direction: column; align-items: flex-start; gap: 10px; } header.site nav{ gap: 14px; } .wrap{ padding: 24px 18px 150px; } .composer-top{ flex-direction: column; align-items: stretch; gap: 8px; } .tray-dice{ flex-wrap: wrap; } .composer-top-right{ justify-content: space-between; } } [hidden]{ display: none !important; }