/* Ripl v4 add-on styles */

/* Rave mark badge on every game tile: solid black so the lime mark stands out on any background */
.tile .badge {
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* New originals drawn with the classic tile layers: frame the illustration like the classic emblems */
.tile .em.o2em { width: 92%; top: 41%; filter: drop-shadow(rgba(0, 0, 0, 0.45) 0 12px 14px); }
.tile .em.o2em svg { overflow: visible; }
.tile .tt.tt2 { line-height: 0.92; bottom: 5%; }

/* Provably fair visuals for the new originals */
.pfrow .rv4-bad { background: var(--red, #ff4d5e); color: #fff; font-weight: 800; }
.pfbig b.rv4-red { color: var(--red, #ff4d5e); }
.pfbig b.rv4-black { color: #fff; }
.pfbig b.rv4-green { color: #19c37d; }
.rv4-tower { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rv4-tower > div { display: flex; gap: 4px; }
.rv4-tower span { width: 34px; height: 18px; border-radius: 5px; background: var(--panel2, #222); }
.rv4-tower span.safe { background: #19c37d; }
.rv4-tower span.trap { background: #ff4d5e; opacity: 0.55; }
.rv4-tower span.pick { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
.rv4-moles { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.rv4-moles small { width: 52px; color: var(--mute, #888); }
.rv4-moles span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel2, #222); font-size: 11px; color: var(--mute, #888); }
.rv4-moles span.up { background: var(--lime, #215cff); color: #000; font-weight: 800; }
.rv4-moles span.pick { outline: 2px solid #fff; outline-offset: 1px; }