
.fr-box { display: flex; flex-direction: column; gap: 10px; }
.fr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; }
.fr-tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.fr-tile small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.fr-tile b { font-size: 20px; }
.fr-skull { flex-direction: row; align-items: center; gap: 10px; }
.fr-skull > div { display: flex; flex-direction: column; gap: 2px; }
.fr-skull img { width: 30px; height: 30px; image-rendering: pixelated; }
.fr-skull.none img { opacity: .25; filter: grayscale(1); }
.fr-skull b { font-size: 15px; } .fr-skull small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fr-skull.red { border-color: rgba(230,60,50,.6); background: rgba(230,60,50,.1); } .fr-skull.red b { color: #ff6b5e; }
.fr-skull.white { border-color: rgba(255,255,255,.35); }
.fr-bar { position: relative; height: 22px; border-radius: 11px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); overflow: hidden; margin-bottom: 6px; }
.fr-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f6c453, #3aa0ff); }
.fr-bar.hot i { background: linear-gradient(90deg, #3aa0ff, #ff4d5a); }
.fr-bar span { position: relative; display: block; text-align: center; font: 800 12px/22px var(--mono); color: #fff; text-shadow: 0 1px 0 #000; }
.fr-list { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow: auto; }
.fr-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.03); border-left: 3px solid #4caf6a; font-size: 12.5px; }
.fr-row.d { border-left-color: #e0352b; }
.fr-when { font: 500 11px var(--mono); color: var(--muted); }
.fr-tag { padding: 1px 7px; border-radius: 6px; font: 800 10px/1.4 Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #120b05; }
.fr-tag.ok { background: #6fcf7a; } .fr-tag.unj { background: #ff6b5e; } .fr-tag.dead { background: #9aa3b5; }
@media (max-width: 760px) { .fr-top { grid-template-columns: 1fr 1fr; } .fr-skull { grid-column: span 2; } .fr-row { grid-template-columns: 78px 1fr auto; } }
