/* Desglose animado de las tiradas (jugador y DM). Copia de lo que hay en player.css. */
/* --- Desglose de la tirada al estilo BG3 --- */
.rf { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; }
.rf-top { display: flex; align-items: center; gap: 16px; }
.rf-die { position: relative; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #3b2f20, #17120d); color: #f3e2bc; animation: rfIn .35s ease-out; }
.rf-die small { font-size: 10px; color: #a99670; letter-spacing: .1em; }
.rf-die b { font-family: var(--display); font-size: 28px; line-height: 1; }
.rf-die.crit { background: linear-gradient(160deg, #6a4d14, #2a1d08); color: #ffe27a; box-shadow: 0 0 22px rgba(255,210,90,.6); }
.rf-die.fumble { background: linear-gradient(160deg, #4a1714, #1d0908); color: #ff8f80; }
.rf-eq { font-family: var(--display); font-size: 26px; color: #8c7b60; }
.rf-total { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; color: #fff0cf; text-shadow: 0 2px 16px rgba(240,192,64,.35), 0 2px 2px #000; min-width: 70px; text-align: center; }
.rf-total.bump { animation: rfBump .38s ease-out; }
.rf-total.final { color: #ffd75a; }
.rf-lines { display: flex; flex-direction: column; gap: 3px; min-width: 240px; }
.rf-line { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 3px 10px; background: rgba(0,0,0,.35); border-left: 2px solid #6b5a40; animation: rfSlide .35s ease-out; font-size: 15px; color: #d8c9a8; }
.rf-line img { width: 26px; height: 26px; object-fit: contain; }
.rf-line b { font-family: var(--display); font-size: 18px; color: #ffe0a0; }
.rf-line.spell { border-left-color: #7fb8d8; }
.rf-line.spell b { color: #a8dcff; }
.rf-dot { color: #8c7b60; text-align: center; }
.rf-verdict { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; align-items: center; min-height: 10px; }
.rf-verdict > * { animation: rfStamp .4s cubic-bezier(.2, 1.6, .5, 1); }
.rf-ok, .rf-ko { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: .12em; }
.rf-ok { color: #8fe08a; text-shadow: 0 0 18px rgba(120,230,120,.45); }
.rf-ko { color: #ff7a6a; text-shadow: 0 0 18px rgba(255,90,70,.45); }
.rf-crit { font-family: var(--display); font-weight: 900; font-size: 22px; color: #ffd75a; }
.rf-crit.min { color: #ff7a6a; }
.rf-dc { font-family: var(--display); font-size: 16px; color: #cbbd9f; padding: 2px 10px; border: 1px solid #6b5a40; }
.rf-luck { font-size: 14px; color: #f0c868; }
.rf:not(.big) .rf-total { font-size: 40px; } .rf:not(.big) .rf-die { width: 50px; height: 50px; } .rf:not(.big) .rf-die b { font-size: 22px; }
.rf:not(.big) .rf-lines { min-width: 200px; } .rf:not(.big) .rf-line { font-size: 13px; }
@keyframes rfIn { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rfBump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes rfSlide { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rfStamp { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Conjuros que se añaden a la tirada --- */

/* --- Rasgos de clase de nivel 1 (icono + nombre; al pasar el ratón, la ficha del glosario) --- */
.ft-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gl.ft-chip { display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 4px; border: 1px solid #4a3d2c; background: rgba(0,0,0,.38);
  text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 15px; color: #ecd3a0; }
.gl.ft-chip img { width: 34px; height: 34px; object-fit: contain; }
.gl.ft-chip:hover { border-color: #c9a45a; background: rgba(70,52,28,.45); color: #ffe3a6; }

/* --- Resultado de los dados con impacto (encima de la mesa) --- */
@keyframes rfFade { from { opacity: 0; } to { opacity: 1; } }
.rf-label { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: #e9d3a0;
  text-shadow: 0 2px 8px #000; animation: rfSlide .3s ease-out; }
.rf.big .rf-total { font-size: 78px; }
.rf-total.slam { animation: rfSlam .55s cubic-bezier(.2, 1.4, .4, 1); color: #ffd75a;
  text-shadow: 0 0 28px rgba(255,200,80,.55), 0 0 4px rgba(255,230,160,.8), 0 3px 3px #000; }
@keyframes rfSlam { 0% { transform: scale(2.6); opacity: 0; filter: blur(4px); } 55% { transform: scale(.92); opacity: 1; filter: none; } 100% { transform: scale(1); } }
.rf-line { font-size: 16px; }
.rf-line img, .rf:not(.big) .rf-line img { width: 36px; height: 36px; }
.rf-line { grid-template-columns: 38px 1fr auto; }
/* crítico: rayos dorados girando detrás; pifia: temblor rojo */
.rf { position: relative; }
.rf.is-crit::before { content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,210,90,.22) 0 8deg, transparent 8deg 20deg);
  mask: radial-gradient(circle, #000 0 22%, transparent 62%); animation: rfRays 6s linear infinite; }
@keyframes rfRays { to { rotate: 360deg; } }
.rf.is-fumble { animation: rfShake .5s ease-in-out .9s; }
.rf.is-fumble .rf-total.final { color: #ff7a6a; text-shadow: 0 0 26px rgba(255,80,60,.55), 0 3px 3px #000; }
@keyframes rfShake { 0%, 100% { translate: 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
/* dentro de la mesa: el dado y el total a la izquierda, el desglose a la derecha */
  align-items: center; gap: 6px 18px; padding: 6px 16px; max-width: 100%; }
/* tirada libre: cada dado con su valor y el total grande */
.rf.free { gap: 10px; }
.rf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; }
.rf-chip { width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #3b2f20, #17120d); color: #f3e2bc; animation: rfIn .3s ease-out; }
.rf-chip small { font-size: 9px; color: #a99670; letter-spacing: .08em; }
.rf-chip b { font-family: var(--display); font-size: 20px; line-height: 1; }
.rf-chip.crit { background: linear-gradient(160deg, #6a4d14, #2a1d08); color: #ffe27a; }
.rf-chip.fumble { background: linear-gradient(160deg, #4a1714, #1d0908); color: #ff8f80; }
/* iconos de características y habilidades en la pestaña «Tiradas»: más grandes, que se lean */
.ck-ic { width: 32px; height: 32px; }
.ck-row { gap: 8px; padding: 4px 10px 4px 6px; }

/* bolsa: la bolsa y el total arriba, las monedas debajo a todo lo ancho */
.bag-panel { display: grid !important; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: 'purse amt' 'purse btns' 'rows rows'; align-items: center; gap: 6px 18px; }
.purse { grid-area: purse; }
.bag-info { display: contents; }
.bag-amt { grid-area: amt; align-self: end; }
.bag-btns { grid-area: btns; align-self: start; }
.coin-rows { grid-area: rows; margin-top: 6px; }
.coin-row { font-size: 15px; gap: 8px; }

/* --- Efectos antes de tirar: lo que da ventaja se distingue (dorado) de lo que suma un dado (azul) --- */
.rf-line.adv { border-left-color: #d4a64a; }
.rf-line.adv b { color: #ffd75a; font-size: 13px; letter-spacing: .12em; }
.rf-die.dropped { width: 40px; height: 40px; opacity: .45; filter: grayscale(.6); margin-right: -6px; }
.rf-die.dropped b { font-size: 17px; text-decoration: line-through; }
.rf-die.dropped small { font-size: 8px; }


.rf-line.dis b { color: #ff8f80; }
.rf-line.note { color: #a99670; font-size: .85em; font-style: italic; }

.rf-luck-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 5px; }