/* BRASA 0.1 · R34 · KIT DE COMPONENTES (parche 21; INSTRUCCIONES §10, CONTINUAR_AQUI §4quater).
   Cada pieza tiene silueta propia dibujada en pixel art (css/kit-r34-sprites.css, generado por herramientas/r34/kit-sprites.mjs)
   y se monta con 9 cortes: 1 píxel de arte = 2 px. Aquí NO hay degradados ni esquinas redondeadas.
   Hoja de muestra: kit-r34.html. Las clases .k-* son las piezas; la aplicación a las pantallas del juego está en css/kit-r34-juego.css. */
@font-face { font-family: 'Jersey 10'; font-weight: 400; font-display: swap; size-adjust: 130%; src: url('../assets/fuentes/jersey-10-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jersey 10'; font-weight: 400; font-display: swap; size-adjust: 130%; src: url('../assets/fuentes/jersey-10-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --k-fuente: 'Jersey 10', 'DM Sans', system-ui, sans-serif;
  --k-papel: #ecd3a2; --k-papel2: #e3c58f; --k-tinta: #4b2f18; --k-tinta2: #7a5a34; --k-crema: #fff6dc; --k-oscuro: #2a1608; --k-verde: #2f7d3a; --k-rojo: #b5341f;
  /* contorno de rótulo: 2 px duros en las ocho direcciones + caída de 2 px (pixel art: sin desenfoque) */
  --k-contorno: 2px 0 0 var(--k-c, #2a1608), -2px 0 0 var(--k-c, #2a1608), 0 2px 0 var(--k-c, #2a1608), 0 -2px 0 var(--k-c, #2a1608), 2px 2px 0 var(--k-c, #2a1608), -2px 2px 0 var(--k-c, #2a1608), 2px -2px 0 var(--k-c, #2a1608), -2px -2px 0 var(--k-c, #2a1608), 0 4px 0 var(--k-c, #2a1608);
  --k-contorno-fino: 1px 0 0 var(--k-c, #2a1608), -1px 0 0 var(--k-c, #2a1608), 0 1px 0 var(--k-c, #2a1608), 0 -1px 0 var(--k-c, #2a1608), 1px 1px 0 var(--k-c, #2a1608), -1px 1px 0 var(--k-c, #2a1608), 1px -1px 0 var(--k-c, #2a1608), -1px -1px 0 var(--k-c, #2a1608), 0 2px 0 var(--k-c, #2a1608);
}

/* ---------- superficie: pergamino con fibra ---------- */
.k-papel { background: var(--k-fibra) 0 0 / 64px 64px, var(--k-papel); color: var(--k-tinta); font-family: var(--k-fuente); }

/* ---------- botón principal: lingote con extremos en bisel, ribete interior, remache a cada lado, labio de 6 px ---------- */
.k-btn { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 88px; min-height: 48px; margin: 0; padding: 0 22px 6px; border: 0 solid transparent; border-image: var(--k-btn-ambar) 8 12 11 12 fill / 16px 24px 22px 24px / 0 stretch; border-radius: 0; background: none; box-shadow: none; --k-c: #5a3208; color: var(--k-crema); font: 400 20px/1 var(--k-fuente); letter-spacing: .02em; text-shadow: var(--k-contorno); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-btn::before, .k-btn::after { content: ''; position: absolute; top: 16px; width: 10px; height: 10px; background: var(--k-remache) center / 10px 10px no-repeat; pointer-events: none; }
.k-btn::before { left: 8px; } .k-btn::after { right: 8px; }
.k-btn:active:not(:disabled), .k-btn.pulsado { border-image-source: var(--k-btn-ambar-pulsado); padding: 4px 22px 2px; transform: none; box-shadow: none; }
.k-btn:active:not(:disabled)::before, .k-btn:active:not(:disabled)::after, .k-btn.pulsado::before, .k-btn.pulsado::after { top: 20px; }
.k-btn.turquesa { border-image-source: var(--k-btn-turquesa); --k-c: #0c3532; }
.k-btn.turquesa:active:not(:disabled), .k-btn.turquesa.pulsado { border-image-source: var(--k-btn-turquesa-pulsado); }
.k-btn.madera { border-image-source: var(--k-btn-madera); --k-c: #24130a; color: #ffe9b8; }
.k-btn.madera:active:not(:disabled), .k-btn.madera.pulsado { border-image-source: var(--k-btn-madera-pulsado); }
.k-btn.brasa { border-image-source: var(--k-btn-brasa); --k-c: #4a1608; }
.k-btn.brasa:active:not(:disabled), .k-btn.brasa.pulsado { border-image-source: var(--k-btn-brasa-pulsado); }
.k-btn:disabled, .k-btn.apagado { border-image-source: var(--k-btn-piedra); --k-c: #4a453c; color: #e6dfcf; opacity: 1; filter: none; cursor: default; }
.k-btn:disabled::before, .k-btn:disabled::after, .k-btn.apagado::before, .k-btn.apagado::after { opacity: .5; }
.k-btn:focus-visible, .k-redondo:focus-visible, .k-pestana:focus-visible { outline: 4px solid #fff6dc; outline-offset: 2px; }
.k-btn.ancho { width: 100%; }
.k-btn.corto { min-width: 76px; padding-inline: 24px; font-size: 18px; }
/* coste dentro del botón: imagen pequeña + cantidad (regla del usuario), sin nombre */
.k-btn .k-coste, .k-btn .cst { font-size: 16px; }
.k-btn.doble { flex-direction: column; gap: 2px; min-height: 60px; padding-bottom: 8px; border-image-width: 16px 24px 22px 24px; }
.k-btn.doble::before, .k-btn.doble::after { top: 22px; }

/* ---------- botón redondo: disco con aro dorado y brillo; glifo dibujado ---------- */
.k-redondo { box-sizing: border-box; flex: none; width: 44px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--k-g-cerrar) 10px 9px / 24px 24px no-repeat, var(--k-redondo-madera) 0 0 / 44px 48px no-repeat; box-shadow: none; color: transparent; font-size: 0; text-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-redondo:active:not(:disabled) { background-position: 10px 11px, 0 2px; }
.k-redondo.ayuda { background-image: var(--k-g-ayuda), var(--k-redondo-madera); }
.k-redondo.volver { background-image: var(--k-g-volver), var(--k-redondo-madera); }
.k-redondo.mas { background-image: var(--k-g-mas), var(--k-redondo-madera); }
.k-redondo.menos { background-image: var(--k-g-menos), var(--k-redondo-madera); }
.k-redondo.lupa { background-image: var(--k-g-lupa), var(--k-redondo-madera); }
.k-redondo.giro { background-image: var(--k-g-giro), var(--k-redondo-madera); }
.k-redondo.lista { background-image: var(--k-g-lista), var(--k-redondo-madera); }
.k-redondo.si { background-image: var(--k-g-visto), var(--k-redondo-turquesa); }
.k-redondo.no { background-image: var(--k-g-cerrar), var(--k-redondo-brasa); }
.k-redondo:disabled { background-image: var(--k-g-candado), var(--k-redondo-piedra); cursor: default; opacity: 1; filter: none; }
/* banderín de volver: cuelga del borde izquierdo, abajo (REF-23/26) */
.k-banderin { box-sizing: border-box; flex: none; width: 60px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--k-g-volver) 12px 6px / 24px 24px no-repeat, var(--k-banderin) 0 0 / 60px 44px no-repeat; color: transparent; font-size: 0; cursor: pointer; }
.k-banderin:active { background-position: 10px 8px, 0 2px; }

/* ---------- cabecera: tablón con vetas y clavos; el título va en una placa con ramas de salvia y el ascua encima ---------- */
.k-cabecera { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 8px 8px; background: var(--k-tablon) 0 0 / 64px 56px repeat-x; }
.k-titulo { position: relative; box-sizing: border-box; flex: 0 1 auto; min-width: 150px; max-width: calc(100% - 104px); min-height: 44px; margin: 6px auto 0; padding: 9px 40px 13px; border: 0 solid transparent; border-image: var(--k-placa) 9 24 9 24 fill / 18px 48px 18px 48px / 0 stretch; --k-c: #1c0f06; color: #ffe9b8; font: 400 16px/1.1 var(--k-fuente); letter-spacing: .04em; text-transform: uppercase; text-align: center; text-shadow: var(--k-contorno-fino); white-space: nowrap; overflow: visible; }
.k-titulo::before { content: ''; position: absolute; left: 50%; top: -14px; width: 26px; height: 26px; margin-left: -13px; background: var(--k-emblema) center / 26px 26px no-repeat; }
.k-titulo > span { display: block; overflow: hidden; text-overflow: ellipsis; padding: 4px 2px; margin: -4px -2px; }
.k-cabecera .k-redondo { position: absolute; right: 6px; top: 4px; }
.k-cabecera .k-redondo.izq { right: auto; left: 6px; }

/* ---------- tira de fila: borde claro arriba, oscuro abajo, esquinas mordidas; el contenido va APOYADO, sin caja ---------- */
.k-tira { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 68px; margin: 0; padding: 8px 10px 10px; border: 0 solid transparent; border-image: var(--k-tira-normal) 4 fill / 8px / 0 stretch; border-radius: 0; background: none; box-shadow: none; --k-c: #3b2412; color: var(--k-crema); font-family: var(--k-fuente); }
.k-tira.lista { border-image-source: var(--k-tira-lista); }
.k-tira.hecha, .k-tira.cerrada { border-image-source: var(--k-tira-hundida); }
.k-tira.hecha > *, .k-tira.cerrada > * { opacity: .58; }
.k-tira.hecha > .k-casilla, .k-tira.cerrada > .k-casilla { filter: saturate(.3); }
.k-dato { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: center; }
.k-dato > b, .k-rotulo { font: 400 16px/1.15 var(--k-fuente); color: var(--k-crema); text-shadow: var(--k-contorno-fino); letter-spacing: .01em; }
.k-dato > small { font: 400 14px/1.15 var(--k-fuente); color: #5a3616; text-shadow: none; }
.k-tira.cerrada .k-dato > small { color: var(--k-rojo); }
.k-estado { flex: none; align-self: end; font: 400 16px/1 var(--k-fuente); color: #f3e6c6; text-shadow: var(--k-contorno-fino); --k-c: #6a5230; }

/* ---------- casilla: marco de rareza en pixel art, cantidad abajo a la derecha ---------- */
.k-casilla { position: relative; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0 solid transparent; border-image: var(--k-casilla-azul) 5 fill / 10px / 0 stretch; border-radius: 0; background: none; box-shadow: none; }
.k-casilla.morado { border-image-source: var(--k-casilla-morado); } .k-casilla.oro { border-image-source: var(--k-casilla-oro); } .k-casilla.verde { border-image-source: var(--k-casilla-verde); } .k-casilla.piedra { border-image-source: var(--k-casilla-piedra); }
.k-casilla > :is(.ico, svg, img, canvas) { width: 32px; height: 32px; image-rendering: pixelated; }
.k-casilla > b, .k-cant { position: absolute; right: 2px; bottom: 0; --k-c: #10131c; font: 400 14px/1 var(--k-fuente); color: var(--k-crema); text-shadow: var(--k-contorno-fino); }
.k-casilla.chica { width: 40px; height: 40px; } .k-casilla.chica > :is(.ico, svg, img) { width: 24px; height: 24px; } .k-casilla.chica > b { font-size: 12px; }
.k-casilla.grande { width: 72px; height: 72px; } .k-casilla.grande > :is(.ico, svg, img) { width: 48px; height: 48px; } .k-casilla.grande > b { font-size: 16px; right: 4px; bottom: 2px; }
.k-premios { display: flex; flex-wrap: wrap; gap: 6px; }
/* casilla de héroe: nivel arriba, marca al elegir, gris si ya está fuera */
.k-heroe { width: 60px; height: 60px; cursor: pointer; }
.k-heroe > :is(img, canvas, svg, .portrait) { width: 44px; height: 44px; image-rendering: pixelated; }
.k-busto { width: 48px; height: 46px; margin-top: 6px; background: 50% 9% / 250% auto no-repeat; }
.k-heroe > em { position: absolute; left: 0; right: 0; top: 0; --k-c: #10131c; font: 400 12px/1 var(--k-fuente); font-style: normal; text-align: center; color: var(--k-crema); text-shadow: var(--k-contorno-fino); }
.k-heroe.elegido::after { content: ''; position: absolute; inset: 0; background: var(--k-marca) center 60% / 39px 33px no-repeat, #0b0f1466; }
.k-heroe.fuera { filter: grayscale(1) brightness(.7); }
.k-hueco { box-sizing: border-box; flex: none; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0 solid transparent; border-image: var(--k-hueco) 5 fill / 10px / 0 stretch; background: none; color: transparent; font-size: 0; cursor: pointer; }
.k-hueco::before { content: ''; width: 24px; height: 24px; background: var(--k-g-mas) center / 24px 24px no-repeat; filter: sepia(1) hue-rotate(50deg) saturate(2.2) brightness(.82); }

/* ---------- barra de progreso: riel con extremos en punta y cifra centrada ---------- */
.k-barra { position: relative; box-sizing: border-box; display: block; height: 18px; min-width: 60px; border: 0 solid transparent; border-image: var(--k-riel) 4 6 4 6 fill / 8px 12px / 0 stretch; background: none; overflow: visible; }
.k-barra > i { position: absolute; left: 4px; top: 4px; bottom: 4px; max-width: calc(100% - 8px); min-width: 0; background: var(--k-relleno-ambar) 0 0 / 100% 100% no-repeat; border-radius: 0; }
.k-barra.turquesa > i { background-image: var(--k-relleno-turquesa); } .k-barra.brasa > i { background-image: var(--k-relleno-brasa); }
.k-barra > em { position: absolute; inset: -2px 0 0; display: grid; place-items: center; --k-c: #2a1608; font: 400 13px/1 var(--k-fuente); font-style: normal; color: var(--k-crema); text-shadow: var(--k-contorno-fino); }

/* ---------- pestaña colgante: banderín con pico; la activa es más larga y de color brasa ---------- */
.k-pestanas { display: flex; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 8px 14px; }
.k-pestanas.con-volver { justify-content: flex-end; padding-left: 68px; }
.k-pestana { position: relative; box-sizing: border-box; flex: 1 1 auto; max-width: 150px; min-width: 64px; min-height: 44px; margin: 0; padding: 4px 10px 12px; border: 0 solid transparent; border-image: var(--k-pestana-apagada) 5 7 9 7 fill / 10px 14px 18px 14px / 0 stretch; border-radius: 0; background: none; box-shadow: none; --k-c: #1c0f06; color: #e9cf9a; font: 400 15px/1.05 var(--k-fuente); text-shadow: var(--k-contorno-fino); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-pestana::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 32px; height: 18px; margin-left: -16px; background: var(--k-pico-apagada) center / 32px 18px no-repeat; pointer-events: none; }
.k-pestana.activa, .k-pestana[aria-selected="true"] { min-height: 52px; padding-top: 6px; border-image-source: var(--k-pestana-activa); --k-c: #5a2208; color: var(--k-crema); }
.k-pestana.activa::after, .k-pestana[aria-selected="true"]::after { background-image: var(--k-pico-activa); }
.k-pestana > i { position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; background: var(--k-aviso) center / 18px 18px no-repeat; }

/* ---------- pista de hitos: riel grueso, marcas en rombo y cofres (cerrado · listo · abierto) ---------- */
.k-pista { position: relative; box-sizing: border-box; display: flex; align-items: flex-start; gap: 0; min-height: 84px; margin: 0; padding: 10px 14px 8px 10px; border: 0 solid transparent; border-image: var(--k-tira-hundida) 4 fill / 8px / 0 stretch; background: none; font-family: var(--k-fuente); }
.k-puntos { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 36px; height: 40px; margin-top: 4px; background: var(--k-escudo) center / 36px 40px no-repeat; --k-c: #101c30; font: 400 14px/1 var(--k-fuente); color: var(--k-crema); text-shadow: var(--k-contorno-fino); }
.k-hitos { position: relative; flex: 1; display: flex; justify-content: space-between; min-width: 0; margin-left: -8px; padding-left: 26px; }
.k-hitos::before { content: ''; position: absolute; left: 0; right: 14px; top: 16px; height: 18px; border: 0 solid transparent; border-image: var(--k-riel) 4 6 4 6 fill / 8px 12px / 0 stretch; }
.k-hitos > i { position: absolute; left: 4px; top: 20px; height: 10px; max-width: calc(100% - 22px); background: var(--k-relleno-ambar) 0 0 / 100% 100% no-repeat; }
.k-hito { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; width: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.k-hito::before { content: ''; width: 44px; height: 40px; background: var(--k-cofre-cerrado) center / 44px 40px no-repeat; }
.k-hito > b { min-width: 34px; margin-top: 2px; padding: 3px 4px 4px; border: 0 solid transparent; border-image: var(--k-capsula) 4 6 6 6 fill / 8px 12px 12px 12px / 0 stretch; --k-c: #120a04; font: 400 13px/1 var(--k-fuente); text-align: center; color: #f3e6c6; text-shadow: none; }
.k-hito.listo { cursor: pointer; }
.k-hito.listo::before { background-image: var(--k-cofre-listo); animation: k-bote 1.1s steps(2, jump-none) infinite; }
.k-hito.listo > b { color: #ffe08a; }
.k-hito.abierto::before { background-image: var(--k-cofre-abierto); filter: saturate(.55); }
.k-hito.abierto > b { color: #b9a987; }
@keyframes k-bote { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .k-hito.listo::before { animation: none; } }

/* ---------- bocadillo de personaje: el personaje sale de medio cuerpo POR FUERA del marco; la pantalla queda atenuada ---------- */
.k-habla { position: relative; display: grid; justify-items: start; width: min(94vw, 440px); max-width: 100%; font-family: var(--k-fuente); }
.k-personaje { position: relative; z-index: 0; width: min(62vw, 250px); aspect-ratio: 1 / 1.05; margin: 0 0 -46px 4px; background: center bottom / contain no-repeat; pointer-events: none; filter: drop-shadow(0 4px 0 #0007); }
.k-personaje > :is(img, canvas) { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.k-globo { position: relative; z-index: 1; box-sizing: border-box; width: 100%; padding: 18px 18px 20px; border: 0 solid transparent; border-image: var(--k-bocadillo) 7 7 9 7 fill / 14px 14px 18px 14px / 0 stretch; color: var(--k-tinta); }
.k-globo::before { content: ''; position: absolute; left: 56px; top: -14px; width: 24px; height: 18px; background: var(--k-cola) center / 24px 18px no-repeat; }
.k-nombre { position: absolute; left: 14px; top: -16px; padding: 4px 22px 8px; border: 0 solid transparent; border-image: var(--k-btn-madera) 8 12 11 12 fill / 16px 24px 22px 24px / 0 stretch; --k-c: #24130a; font: 400 14px/1 var(--k-fuente); color: #ffe9b8; text-shadow: var(--k-contorno-fino); min-height: 34px; box-sizing: border-box; display: none; }
.k-globo > b { display: block; margin: 0 0 6px; font: 400 16px/1.1 var(--k-fuente); letter-spacing: .06em; text-transform: uppercase; color: #a3481c; }
.k-globo p { margin: 0 0 8px; font: 400 16px/1.15 var(--k-fuente); color: var(--k-tinta); }
.k-globo p:last-child { margin-bottom: 0; }
.k-habla > .k-btn { justify-self: center; margin-top: 10px; }
.k-velo { background: #0d0703b8; }

/* ---------- pliego: diálogo de pergamino con cantoneras y hojas debajo (REF-19, REF-27) ---------- */
.k-pliego { position: relative; box-sizing: border-box; padding: 18px 18px 26px; border: 0 solid transparent; border-image: var(--k-pliego) 11 11 13 11 fill / 22px 22px 26px 22px / 0 stretch; background: none; color: var(--k-tinta); font-family: var(--k-fuente); }
.k-pliego > .k-redondo { position: absolute; right: -8px; top: -12px; }
.k-pliego p { margin: 0; font: 400 15px/1.12 var(--k-fuente); color: var(--k-tinta); text-align: center; }
/* rótulo de pliego: placa sin ramas (más sobria que la cabecera de pantalla) */
.k-rotulo-pliego { box-sizing: border-box; display: block; width: fit-content; min-width: 60%; max-width: 100%; min-height: 40px; margin: 0 auto 8px; padding: 8px 28px 14px; border: 0 solid transparent; border-image: var(--k-btn-madera) 8 12 11 12 fill / 16px 24px 22px 24px / 0 stretch; --k-c: #24130a; font: 400 17px/1 var(--k-fuente); text-align: center; color: #ffe9b8; text-shadow: var(--k-contorno); }
.k-rotulo-pliego.morado { color: #e7c4ff; } .k-rotulo-pliego.verde { color: #c8efae; }
/* cinta de sección («Elige héroes») */
.k-cinta { box-sizing: border-box; display: block; min-height: 22px; margin: 10px 0; padding: 3px 26px 3px; border: 0 solid transparent; border-image: var(--k-cinta) 5 9 5 9 fill / 10px 18px / 0 stretch; font: 400 14px/1.15 var(--k-fuente); text-align: center; color: var(--k-tinta); }
.k-fila { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.k-fila.separada { justify-content: space-between; }
/* requisito con visto: icono redondo y marca encima cuando se cumple */
.k-requisito { position: relative; display: grid; justify-items: center; gap: 0; min-width: 28px; font: 400 12px/1 var(--k-fuente); color: var(--k-tinta); }
.k-requisito > :is(.ico, svg) { width: 26px; height: 26px; image-rendering: pixelated; }
.k-requisito.cumple::after { content: ''; position: absolute; left: 50%; top: 2px; width: 26px; height: 22px; margin-left: -11px; background: var(--k-marca) center / 26px 22px no-repeat; }
.k-requisito.cumple > :is(.ico, svg) { opacity: .45; }

/* ---------- datos sueltos: contador centrado, coste, estrellas, aviso, franja ---------- */
.k-contador { margin: 0; font: 400 15px/1.1 var(--k-fuente); text-align: center; --k-c: #3b2412; color: var(--k-crema); text-shadow: var(--k-contorno-fino); }
.k-contador b { color: #b8f08a; }
.k-coste { display: inline-flex; align-items: center; gap: 4px; font: 400 16px/1 var(--k-fuente); white-space: nowrap; }
.k-coste > :is(.ico, svg) { width: 20px; height: 20px; image-rendering: pixelated; }
.k-coste.falta > b { color: #ffb09a; }
.k-estrellas { display: inline-flex; width: fit-content; justify-self: start; gap: 1px; padding: 3px 6px 4px; border: 0 solid transparent; border-image: var(--k-capsula) 4 6 6 6 fill / 8px 12px 12px 12px / 0 stretch; }
.k-estrellas > i { width: 18px; height: 18px; background: var(--k-estrella-off) center / 18px 18px no-repeat; }
.k-estrellas > i.on { background-image: var(--k-estrella-on); }
.k-aviso { display: inline-block; width: 18px; height: 18px; background: var(--k-aviso) center / 18px 18px no-repeat; }
.k-franja { box-sizing: border-box; display: block; width: fit-content; max-width: 92%; margin: 8px auto; padding: 10px 24px; border: 0 solid transparent; border-image: var(--k-franja) 0 6 0 6 fill / 0 12px / 0 stretch; font: 400 15px/1.2 var(--k-fuente); text-align: center; color: var(--k-crema); }
.k-reloj { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 6px; border: 0 solid transparent; border-image: var(--k-capsula) 4 6 6 6 fill / 8px 12px 12px 12px / 0 stretch; font: 400 14px/1 var(--k-fuente); color: #f3e6c6; }

/* ---------- campos: texto, deslizador, conmutador, paso a paso ---------- */
.k-campo { box-sizing: border-box; flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px; border: 0 solid transparent; border-image: var(--k-campo) 4 fill / 8px / 0 stretch; border-radius: 0; background: none; font: 400 16px/1 var(--k-fuente); color: var(--k-crema); outline-offset: 2px; }
.k-campo::placeholder { color: #e0c79a; opacity: 1; }
.k-desliza { -webkit-appearance: none; appearance: none; flex: 1; min-width: 80px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; accent-color: #f6c152; }
.k-desliza::-webkit-slider-runnable-track { height: 18px; border: 0 solid transparent; border-image: var(--k-riel) 4 6 4 6 fill / 8px 12px / 0 stretch; background: none; }
.k-desliza::-moz-range-track { height: 18px; border: 0 solid transparent; border-image: var(--k-riel) 4 6 4 6 fill / 8px 12px / 0 stretch; background: none; }
.k-desliza::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 28px; margin-top: -6px; border: 0; border-radius: 0; background: var(--k-pulgar) center / 22px 28px no-repeat; box-shadow: none; }
.k-desliza::-moz-range-thumb { width: 22px; height: 28px; border: 0; border-radius: 0; background: var(--k-pulgar) center / 22px 28px no-repeat; }
/* conmutador: riel corto con el rombo a un lado; el estado se lee en el rótulo y en la posición, no sólo en el color */
.k-conmuta { position: relative; isolation: isolate; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: flex-end; width: 88px; height: 44px; margin: 0; padding: 0 14px 2px 34px; border: 0; border-radius: 0; background: none; box-shadow: none; --k-c: #2a1608; font: 400 16px/1 var(--k-fuente); color: #e9cf9a; text-shadow: var(--k-contorno-fino); cursor: pointer; }
.k-conmuta::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 9px; height: 26px; border: 0 solid transparent; border-image: var(--k-riel) 4 6 4 6 fill / 8px 12px / 0 stretch; }
.k-conmuta::after { content: ''; position: absolute; left: 8px; top: 11px; width: 22px; height: 22px; background: var(--k-rombo-off) center / 22px 22px no-repeat; }
.k-conmuta[aria-pressed="true"], .k-conmuta.si { justify-content: flex-start; padding: 0 34px 2px 14px; color: var(--k-crema); }
.k-conmuta[aria-pressed="true"]::after, .k-conmuta.si::after { left: auto; right: 8px; background-image: var(--k-rombo-on); }
.k-ajuste { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.k-ajuste > label, .k-ajuste > b { flex: none; min-width: 84px; font: 400 16px/1.1 var(--k-fuente); --k-c: #3b2412; color: var(--k-crema); text-shadow: var(--k-contorno-fino); }
.k-ajuste > output { flex: none; min-width: 48px; text-align: right; font: 400 15px/1 var(--k-fuente); color: var(--k-tinta); }

/* ---------- barra superior y navegación (aplicación en el juego: kit-r34-juego.css) ---------- */
.k-recurso { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 14px 4px 8px; border: 0 solid transparent; border-image: var(--k-capsula) 4 6 6 6 fill / 8px 12px 12px 12px / 0 stretch; font: 400 15px/1 var(--k-fuente); color: var(--k-crema); }
.k-recurso > :is(.ico, svg) { width: 20px; height: 20px; image-rendering: pixelated; }

/* ---------- tipografía de interfaz: una familia, cuatro tamaños ---------- */
.k-t20 { font: 400 20px/1.1 var(--k-fuente); } .k-t16 { font: 400 16px/1.15 var(--k-fuente); } .k-t14 { font: 400 14px/1.2 var(--k-fuente); } .k-t12 { font: 400 12px/1.2 var(--k-fuente); }
.k-claro { color: var(--k-crema); text-shadow: var(--k-contorno-fino); } .k-claro.k-t20 { text-shadow: var(--k-contorno); }

@media (max-width: 419px) { .k-titulo { font-size: 14px; letter-spacing: .02em; padding-inline: 36px; max-width: calc(100% - 100px); } }