/* Community Reviews page — extracted from the inline <style> of reviews.html */
:root {
    --rv-bg: #070b12;
    --rv-card: #101720;
    --rv-card-2: #141d2a;
    --rv-border: #1f2b3a;
    --rv-accent: #22c55e;
    --rv-accent-2: #0ea5e9;
    --rv-gold: #facc15;
    --rv-text: #e7ecf3;
    --rv-muted: #8b98ab;
    --rv-muted-2: #5c6777;
}
body { background: var(--rv-bg); color: var(--rv-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; min-height: 100vh; }
.rv-page { max-width: 1180px; margin: 0 auto; padding: 40px 22px 90px; }

/* ===== Hero ===== */
.rv-hero {
    position: relative;
    border-radius: 22px;
    padding: 40px 34px;
    overflow: hidden;
    margin-bottom: 28px;
    background:
        radial-gradient(900px 300px at 15% -10%, rgba(34,197,94,0.18), transparent 60%),
        radial-gradient(700px 300px at 90% 0%, rgba(14,165,233,0.16), transparent 60%),
        linear-gradient(135deg, #0d1521, #101a29);
    border: 1px solid var(--rv-border);
}
.rv-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(34,197,94,0.05) 40%, transparent 70%),
        radial-gradient(300px 80px at 60% 120%, rgba(34,197,94,0.10), transparent 70%);
    pointer-events: none;
}
.rv-hero-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rv-hero-left { flex: 1 1 380px; }
.rv-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(34,197,94,0.14); color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
    padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 16px;
}
.rv-hero h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.rv-hero h1 .grad { background: linear-gradient(90deg, #4ade80, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rv-hero p { margin: 12px 0 0; color: var(--rv-muted); font-size: 1.02rem; max-width: 560px; line-height: 1.6; }
.rv-hero-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.rv-stat {
    background: rgba(10,17,28,0.7); border: 1px solid var(--rv-border);
    border-radius: 16px; padding: 14px 20px; min-width: 120px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.rv-stat .n { font-size: 1.7rem; font-weight: 800; color: #4ade80; line-height: 1; }
.rv-stat .l { font-size: 0.78rem; color: var(--rv-muted-2); margin-top: 6px; font-weight: 600; }

/* ===== Leaderboard ===== */
.rv-board {
    flex: 0 1 300px; background: rgba(10,17,28,0.75); border: 1px solid var(--rv-border);
    border-radius: 18px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.rv-board h3 { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.rv-board h3 i { color: var(--rv-gold); }
.rv-board .sub { font-size: 0.8rem; color: var(--rv-muted-2); margin-bottom: 14px; }
.rv-rank-row {
    display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px;
    transition: background 0.15s; text-decoration: none; color: inherit;
}
.rv-rank-row:hover { background: rgba(34,197,94,0.08); }
.rv-rank-pos { width: 26px; font-weight: 800; color: var(--rv-muted-2); font-size: 0.9rem; text-align: center; flex-shrink: 0; }
.rv-rank-pos.top { color: var(--rv-gold); }
.rv-rank-pos.top2 { color: #cbd5e1; }
.rv-rank-pos.top3 { color: #d97706; }
.rv-rank-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 0.85rem; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.rv-rank-main { flex: 1; min-width: 0; }
.rv-rank-name { font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-rank-meta { font-size: 0.72rem; color: var(--rv-muted-2); }
.rv-rank-rb { width: 54px; text-align: right; }

/* ===== Toolbar / tabs ===== */
.rv-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 22px; }
.rv-tabs { display: flex; gap: 8px; background: #0d1521; border: 1px solid var(--rv-border); border-radius: 16px; padding: 6px; }
.rv-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: none; border-radius: 12px;
    background: transparent; color: var(--rv-muted); font-size: 0.92rem; font-weight: 700; cursor: pointer;
    transition: all 0.16s;
}
.rv-tab .cnt { background: rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; font-weight: 700; color: var(--rv-muted); }
.rv-tab:hover { background: #182234; color: #e7ecf3; }
.rv-tab.active { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 4px 16px rgba(34,197,94,0.35); }
.rv-tab.active .cnt { background: rgba(255,255,255,0.22); color: #fff; }
.rv-spacer { flex: 1; }
.rv-search {
    display: flex; align-items: center; gap: 9px; background: #0d1521; border: 1px solid var(--rv-border);
    border-radius: 12px; padding: 0 14px; height: 42px; min-width: 220px;
}
.rv-search i { color: var(--rv-muted-2); }
.rv-search input { background: transparent; border: none; outline: none; color: var(--rv-text); width: 100%; font-size: 0.9rem; }
.rv-sort {
    background: #0d1521; border: 1px solid var(--rv-border); color: var(--rv-text);
    border-radius: 12px; height: 42px; padding: 0 14px; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}

/* ===== Guide ===== */
.rv-guide { background: rgba(13,21,33,0.7); border: 1px solid var(--rv-border); border-radius: 16px; margin-bottom: 24px; overflow: hidden; }
.rv-guide-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; cursor: pointer; user-select: none; }
.rv-guide-head:hover { background: rgba(34,197,94,0.06); }
.rv-guide-head i { color: var(--rv-accent); font-size: 1.1rem; }
.rv-guide-head h3 { margin: 0; font-size: 1rem; font-weight: 800; flex: 1; }
.rv-guide-head .tgl { color: var(--rv-muted-2); transition: transform 0.3s; }
.rv-guide.open .rv-guide-head .tgl { transform: rotate(180deg); }
.rv-guide-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 20px; }
.rv-guide.open .rv-guide-body { max-height: 2400px; padding: 0 20px 22px; }
.rv-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rv-gcol { background: rgba(16,23,32,0.8); border: 1px solid var(--rv-border); border-radius: 14px; padding: 16px; }
.rv-gcol h4 { margin: 0 0 8px; font-size: 0.92rem; font-weight: 800; color: #4ade80; display: flex; align-items: center; gap: 8px; }
.rv-gcol p { margin: 0; color: var(--rv-muted); font-size: 0.85rem; line-height: 1.55; }
.rv-gcol p strong { color: #e7ecf3; }
.rv-rank-row-l { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.82rem; color: #c6d1e0; }
.rv-chip-s { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 800; font-size: 0.85rem; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.rk-Splus { background: linear-gradient(135deg,#fbbf24,#ef4444); box-shadow: 0 0 0 2px rgba(251,191,36,0.35), 0 4px 14px rgba(239,68,68,0.5); }
.rk-S { background: linear-gradient(135deg,#fbbf24,#f97316); box-shadow: 0 0 0 2px rgba(251,191,36,0.3), 0 4px 12px rgba(249,115,22,0.4); }
.rk-A { background: linear-gradient(135deg,#22c55e,#0ea5e9); }
.rk-B { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.rk-C { background: linear-gradient(135deg,#6366f1,#a855f7); }
.rk-D { background: linear-gradient(135deg,#64748b,#475569); }

/* ===== Review cards ===== */
.rv-feed { display: flex; flex-direction: column; gap: 16px; }
.rv-card {
    display: grid; grid-template-columns: 1fr; gap: 0;
    background: linear-gradient(180deg, var(--rv-card-2), var(--rv-card));
    border: 1px solid var(--rv-border); border-radius: 18px; overflow: hidden;
    transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
}
.rv-card:hover { transform: translateY(-3px); border-color: #2e4160; box-shadow: 0 16px 44px rgba(0,0,0,0.45); }
.rv-card-body { padding: 20px 22px; min-width: 0; }

.rv-user-line { display: flex; align-items: center; gap: 12px; }
.rv-avatar {
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; text-decoration: none;
    display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1.1rem; object-fit: cover;
    position: relative; box-shadow: 0 0 0 2px rgba(255,255,255,0.06); transition: transform 0.15s;
}
.rv-avatar:hover { transform: scale(1.06); }
.rv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-user-meta { min-width: 0; flex: 1; }
.rv-username { text-decoration: none; color: inherit; }
.rv-username h3 { margin: 0; font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.rv-username h3:hover { color: #4ade80; }
.rv-badges { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.rv-anime-line {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0;
    font-size: 0.95rem;
}
.rv-anime-line a.rv-anime { color: #4ade80; font-weight: 700; text-decoration: none; font-size: 1.02rem; }
.rv-anime-line a.rv-anime:hover { text-decoration: underline; }
.rv-anime-line .dot-sep { color: var(--rv-muted-2); }
.rv-stars { color: var(--rv-gold); letter-spacing: 1px; font-size: 0.95rem; }
.rv-score { background: rgba(250,204,21,0.12); color: #fde047; border-radius: 7px; padding: 2px 10px; font-weight: 800; font-size: 0.82rem; }
.rv-time { color: var(--rv-muted-2); font-size: 0.8rem; }
.rv-ep { color: #fde047; font-weight: 700; font-size: 0.82rem; background: rgba(250,204,21,0.1); padding: 3px 9px; border-radius: 7px; }
/* episode card identity + highlighted episode title */
.rv-ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.rv-ep-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #16a34a, #15803d); color: #fff;
    border-radius: 8px; padding: 4px 11px; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(22,163,74,0.35);
}
.rv-ep-no { color: #fde047; font-weight: 800; font-size: 0.9rem; background: rgba(250,204,21,0.12); padding: 2px 10px; border-radius: 7px; }
.rv-ep-season { color: var(--rv-muted); font-size: 0.85rem; }
.rv-ep-title-big {
    margin: 12px 0 2px; font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 800;
    line-height: 1.3; letter-spacing: 0.2px;
    background: linear-gradient(90deg, #fde047, #38bdf8);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rv-ep-anime { margin: 6px 0 0; color: var(--rv-muted); font-size: 0.88rem; }
.rv-ep-anime a.rv-anime { color: #4ade80; font-weight: 700; text-decoration: none; }
.rv-ep-anime a.rv-anime:hover { text-decoration: underline; }

.rv-comment { margin: 14px 0 0; color: #d7deea; line-height: 1.65; font-size: 0.98rem; white-space: pre-wrap; word-break: break-word; position: relative; }
.rv-comment.clamp { max-height: 84px; overflow: hidden; }
.rv-more-btn { display: none; background: none; border: none; color: #4ade80; font-size: 0.82rem; font-weight: 700; cursor: pointer; margin-top: 6px; padding: 0; }
.rv-comment.clamped + .rv-more-btn { display: inline-block; }

.rv-footer { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.rv-vote { display: flex; gap: 8px; }
.rv-vote-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; min-width: 64px; justify-content: center;
    border: 1px solid var(--rv-border); border-radius: 11px; background: #0c131f; color: var(--rv-muted);
    font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.14s; user-select: none;
}
.rv-vote-btn:hover { background: #141e2d; border-color: #31445e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.rv-vote-btn:active { transform: scale(0.95); }
.rv-vote-btn.voted-like { background: rgba(34,197,94,0.16); border-color: #22c55e; color: #4ade80; box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 4px 14px rgba(34,197,94,0.15); }
.rv-vote-btn.voted-dislike { background: rgba(239,68,68,0.14); border-color: #ef4444; color: #f87171; box-shadow: 0 0 0 1px rgba(239,68,68,0.2), 0 4px 14px rgba(239,68,68,0.12); }
.rv-vote-count { font-variant-numeric: tabular-nums; }
.rv-link-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--rv-border);
    border-radius: 11px; background: #0c131f; color: var(--rv-muted); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: all 0.14s;
}
.rv-link-btn:hover { background: #141e2d; color: #91a4c0; border-color: #31445e; }
.rv-link-btn.primary { color: #4ade80; }
.rv-link-btn.primary:hover { background: rgba(34,197,94,0.1); border-color: #22c55e; }
.rv-foot-spacer { flex: 1; }
/* Review XP box: bigger + gold-accented so it can never be confused
   with the reviewer's profile XP bar (the blue bar by their name).
   This is the REVIEW's own reputation, not the user's. */
.rv-xp-pill {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid rgba(250,204,21,0.35); background: linear-gradient(135deg, #1a1507, #14100a);
    border-radius: 12px; padding: 8px 14px; color: #fde047;
    font-size: 0.9rem; font-weight: 800; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(250,204,21,0.12), inset 0 0 0 1px rgba(250,204,21,0.05);
}
.rv-xp-pill .rv-level {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 9px; color: #fff; font-weight: 800;
    font-size: 0.95rem; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.rv-xp-pill .rv-xp-num { color: #fde047; font-variant-numeric: tabular-nums; font-size: 1rem; }
.rv-xp-pill .rv-xp-num i { font-size: 0.72rem; color: #fde047; margin-left: 2px; }
.rv-xp-pill .rv-xp-label { color: #facc15; font-weight: 800; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.75; }

/* ===== Exhiliarior-style review XP — wide horizontal liquid tank ===== */
.rv-xp-bottle { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-left: 6px; }
.rv-bottle-glass {
    position: relative; width: 180px; height: 38px; box-sizing: border-box;
    border-radius: 10px; overflow: hidden;
    background: linear-gradient(180deg, #0e1520, #080e1a);
    border: 1.5px solid rgba(253,224,71,0.6);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 30px -8px rgba(250,204,21,0.4), 0 0 30px rgba(250,204,21,0.12);
}
.rv-bottle-glass::before { /* left cap (pipe fitting) */
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
    background: linear-gradient(90deg, rgba(250,204,21,0.5), rgba(250,204,21,0.15));
    box-shadow: inset 0 0 0 1px rgba(253,224,71,0.35);
}
.rv-bottle-glass::after { /* glass shine */
    content: ""; position: absolute; top: 4px; left: 16px; right: 24px; height: 5px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.03));
    border-radius: 5px; z-index: 3;
}
.rv-bottle-liquid {
    position: absolute; left: 12px; top: 0; bottom: 0; transition: width 0.9s cubic-bezier(0.2,0.8,0.2,1);
    background: linear-gradient(90deg, #a7f3d0, #34d399 60%, #059669);
    box-shadow: 0 0 26px rgba(52,211,153,1), inset 0 0 16px rgba(255,255,255,0.45);
    border-radius: 0 10px 10px 0;
}
.rv-bottle-liquid::before { /* drifting bubble */
    content: ""; position: absolute; left: 55%; top: 26%; width: 7px; height: 7px;
    border-radius: 99px; background: rgba(255,255,255,0.85); filter: blur(0.5px);
    animation: rvBubble 3.4s ease-in-out infinite;
}
.rv-bottle-liquid::after { /* glint on the fill edge */
    content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 3px;
    background: rgba(255,255,255,0.9); border-radius: 3px;
}
@keyframes rvBubble { 0%,100% { transform: translate(0,0); opacity: 0.35; } 50% { transform: translate(10px,-2px); opacity: 0.95; } }
.rv-bottle-level {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 4;
    font-size: 0.78rem; font-weight: 900; color: #0b0f19; padding: 1px 7px; border-radius: 99px;
    background: rgba(253,224,71,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.rv-bottle-num {
    position: absolute; z-index: 4; right: 10px; top: 50%; transform: translateY(-50%);
    font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums; color: #fdf3d8;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.85));
}
.rv-bottle-num i { font-size: 0.7rem; color: #fde047; margin-left: 2px; }
.rv-bottle-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.7px; color: #facc15; text-transform: uppercase; opacity: 0.95; margin-top: 2px; }

/* ===== Vote Power per-rank explainer ===== */
.rv-vote-power { margin-top: 14px; padding: 14px 4px 2px; border-top: 1px solid rgba(255,255,255,0.06); }
.rv-vp-head { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fde047; font-size: 0.9rem; }
.rv-vp-sub { color: #8b98ab; font-size: 0.78rem; line-height: 1.55; margin: 6px 0 12px; max-width: 720px; }
.rv-vp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.rv-vp-card {
    background: #101720; border: 1px solid var(--rv-border); border-radius: 14px; padding: 12px;
    list-style: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.rv-vp-card.rk-D { border-color: rgba(156,163,175,0.4); opacity: 0.92; }
.rv-vp-card.rk-S\+ { border-color: rgba(255,215,0,0.55); box-shadow: 0 0 20px rgba(255,215,0,0.12); }
.rv-vp-rank { font-weight: 900; font-size: 1.05rem; }
.rv-vp-thr { display: block; color: #7d8ba0; font-size: 0.68rem; margin-bottom: 8px; }
.rv-vp-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; color: #d7dee9; margin-top: 4px; }
.rv-vp-row b { font-weight: 900; }
.rv-vp-row.like b { color: #4ade80; }
.rv-vp-row.dislike b { color: #f87171; }
.rv-vp-row.locked b { opacity: 0.85; }
.rv-vp-ratio {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.09);
    font-size: 0.68rem; color: #7d8ba0; line-height: 1.5;
}
.rv-vp-ratio b { color: #d7dee9; font-weight: 800; }

/* compact review cards — fixed proportions, nothing stretches */
.rv-card.art .rv-art {
    overflow: hidden; background: #0a101c; position: relative; border-radius: 12px;
}
.rv-card.art .rv-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.rv-card.art:hover .rv-art img { transform: scale(1.04); }
.rv-feed { scroll-margin-top: 96px; }

/* anime card: content left (wide), fixed-size poster right */
.rv-card.art:not(.ep) {
    grid-template-columns: minmax(0, 1fr) 128px;
    grid-template-areas: "body art";
    gap: 18px; padding: 18px 20px;
}
.rv-card.art:not(.ep) .rv-card-body { grid-area: body; padding: 0; min-width: 0; }
.rv-card.art:not(.ep) .rv-art { grid-area: art; width: 128px; aspect-ratio: 2 / 3; }
.rv-card.art.noart { grid-template-columns: 1fr; grid-template-areas: "body"; }
@media (max-width: 639px) {
    .rv-card.art:not(.ep) { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art body"; gap: 14px; padding: 14px 16px; }
    .rv-card.art:not(.ep) .rv-art { width: 96px; }
}

/* episode card: 16:9 episode thumbnail right (landscape, wider than
   the anime poster so the two card shapes stay distinct), content left */
.rv-card.ep {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "body art";
    gap: 16px; padding: 18px 20px;
}
.rv-card.ep .rv-art { grid-area: art; width: 360px; align-self: start; }
.rv-card.ep .rv-art img { width: 100%; height: auto; max-height: 235px; object-fit: contain; }
/* No episode still: fall back to the anime poster and fill the 16:9
   box like the anime page does (no black bars around a tall poster). */
.rv-card.ep .rv-art.poster-fallback { aspect-ratio: 16 / 9; height: auto; }
.rv-card.ep .rv-art.poster-fallback img { max-height: none; height: 100%; object-fit: cover; object-position: center 22%; }
.rv-card.ep .rv-card-body { grid-area: body; }
@media (max-width: 639px) {
    .rv-card.ep { grid-template-columns: 1fr; grid-template-areas: "art" "body"; }
    .rv-card.ep .rv-art { width: 100%; height: auto; border-radius: 0; }
}

/* Review XP pill — ungraded state (below 500 XP) */
.rv-xp-pill .rv-level.rk-none {
    background: linear-gradient(135deg, #374151, #1f2937); color: #9aa7bd;
    box-shadow: none;
}

/* War-strip stance chip + outcome-XP note (negative hit / positive gain) */
.rv-war-hit {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 800; color: #fbbf24;
    background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35);
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.rv-war-hit.good {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1); border-color: rgba(74, 222, 128, 0.4);
}

/* Deep-link flash: a card jumped to from a war page gets a golden pulse */
.rv-card.war-jump { animation: war-jump-flash 1.2s ease-in-out 3; }
@keyframes war-jump-flash {
    0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12); }
    50% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.8), 0 0 26px rgba(251, 191, 36, 0.3); }
}

.rv-empty { text-align: center; color: var(--rv-muted); padding: 60px 0; font-size: 1.05rem; }
.rv-empty i { display: block; font-size: 2.4rem; margin-bottom: 12px; color: var(--rv-muted-2); }
.rv-mine-note { color: var(--rv-muted-2); font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }

/* Dislike-reason (anti-bombing) UI */
.rv-contested-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171;
    border-radius: 999px; padding: 5px 11px; font-size: 0.72rem; font-weight: 700;
}
.rv-reason-box {
    margin: 14px 0 4px; padding: 14px 16px;
    background: #0a101c; border: 1px solid rgba(239,68,68,0.35); border-radius: 13px;
}
.rv-reason-head { font-size: 0.88rem; font-weight: 800; color: #f87171; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-reason-hint { font-size: 0.74rem; font-weight: 600; color: var(--rv-muted-2); }
.rv-reason-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 11px 0; }
.rv-reason-chip {
    border: 1px solid var(--rv-border); background: #0c131f; color: var(--rv-muted);
    border-radius: 999px; padding: 5px 12px; font-size: 0.76rem; font-weight: 700; cursor: pointer;
    transition: all 0.13s;
}
.rv-reason-chip:hover, .rv-reason-chip.active { background: rgba(239,68,68,0.12); border-color: #ef4444; color: #f87171; }
.rv-reason-input {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px;
    background: #0c131f; border: 1px solid var(--rv-border); color: var(--rv-text);
    border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; font-family: inherit; outline: none;
}
.rv-reason-input:focus { border-color: #ef4444; }
.rv-reason-actions { display: flex; gap: 10px; margin-top: 11px; }
.rv-reason-cancel {
    border: 1px solid var(--rv-border); background: #0c131f; color: var(--rv-muted);
    border-radius: 10px; padding: 8px 16px; font-size: 0.84rem; font-weight: 700; cursor: pointer;
}
.rv-reason-cancel:hover { background: #141e2d; }
.rv-reason-submit {
    border: 1px solid #ef4444; background: rgba(239,68,68,0.16); color: #f87171;
    border-radius: 10px; padding: 8px 16px; font-size: 0.84rem; font-weight: 800; cursor: pointer;
    transition: all 0.13s;
}
.rv-reason-submit:hover { background: rgba(239,68,68,0.28); }
.rv-reason-submit:disabled { opacity: 0.55; cursor: wait; }
.rv-reason-err { color: #f87171; font-size: 0.8rem; font-weight: 600; margin: 9px 0 0; }
.rv-reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rv-reason-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: #0a101c; border: 1px solid var(--rv-border); border-radius: 11px; padding: 9px 13px;
}
.rv-reason-row.valid { border-color: rgba(34,197,94,0.25); }
.rv-reason-row.contested { border-color: rgba(239,68,68,0.3); }
.rv-reason-text { font-size: 0.82rem; color: #c6d1e0; min-width: 0; }
.rv-reason-text b { color: #e7ecf3; }
.rv-reason-text span { color: #d7deea; }
.rv-reason-meta { display: flex; align-items: center; gap: 10px; }
.rv-reason-vote { display: flex; gap: 6px; }
.rv-reason-vbtn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--rv-border); background: #0c131f; color: var(--rv-muted);
    border-radius: 8px; padding: 4px 9px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.rv-reason-vbtn.voted { border-color: #22c55e; color: #4ade80; background: rgba(34,197,94,0.1); }
.rv-reason-vbtn[data-kind="dislike"].voted { border-color: #ef4444; color: #f87171; background: rgba(239,68,68,0.1); }
.rv-reason-tag { font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.rv-reason-tag.good { background: rgba(34,197,94,0.12); color: #4ade80; }
.rv-reason-tag.bad { background: rgba(239,68,68,0.12); color: #f87171; }
.rv-reason-remove {
    border: 1px solid rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); color: #f87171;
    border-radius: 8px; padding: 4px 10px; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.rv-reason-remove:hover { background: rgba(239,68,68,0.2); }

@keyframes rvPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.rv-vote-btn.pulse .vote-emoji { animation: rvPop 0.3s ease; }

/* ---- Review replies (C rank + only) ---- */
.rv-replies {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rv-border);
    display: flex; flex-direction: column; gap: 8px;
}
.rv-reply-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #0c131f; border: 1px solid var(--rv-border); border-radius: 10px;
    padding: 8px 12px; font-size: 0.82rem;
}
.rv-reply-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #fff;
}
.rv-reply-name { color: #e7ecf3; white-space: nowrap; }
.rv-reply-text { color: #c6d1e0; min-width: 0; }
.rv-reply-time { margin-left: auto; color: var(--rv-muted-2); font-size: 0.7rem; white-space: nowrap; }
.rv-reply-composer {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    background: rgba(12,19,31,0.6); border: 1px solid var(--rv-border); border-radius: 10px;
    padding: 8px 12px;
}
.rv-reply-cta { font-size: 0.72rem; color: var(--rv-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rv-reply-input {
    flex: 1; min-width: 120px;
    background: #0c131f; border: 1px solid var(--rv-border); border-radius: 8px;
    color: #e7ecf3; padding: 8px 12px; font-size: 0.85rem; outline: none;
}
.rv-reply-input:focus { border-color: #22c55e; }
.rv-reply-submit {
    border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.12); color: #4ade80;
    border-radius: 8px; padding: 8px 14px; font-size: 0.78rem; font-weight: 800; cursor: pointer;
    white-space: nowrap;
}
.rv-reply-submit:hover { background: rgba(34,197,94,0.22); }
.rv-reply-submit:disabled { opacity: 0.5; cursor: wait; }
.rv-reply-lock {
    font-size: 0.78rem; color: var(--rv-muted); display: inline-flex; align-items: center; gap: 7px;
}
.rv-reply-lock b { color: #fbbf24; }
.rv-reply-err { color: #f87171; font-size: 0.75rem; margin-top: 6px; }

/* ---- Reply War ---- */
.rv-war { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rv-border); }
.rv-war-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 10px;
}
.rv-war-title { font-size: 0.85rem; font-weight: 800; color: #e7ecf3; display: inline-flex; align-items: center; gap: 7px; }
.rv-war-title i { color: #fbbf24; }
.rv-war-count {
    font-size: 0.68rem; font-weight: 800; color: #fbbf24;
    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
    border-radius: 999px; padding: 2px 9px;
}
.rv-war-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); color: #fbbf24;
    border-radius: 8px; padding: 5px 12px; font-size: 0.75rem; font-weight: 800; cursor: pointer;
}
.rv-war-toggle:hover { background: rgba(251,191,36,0.2); }
.rv-war-leader {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06));
    border: 1px solid rgba(251,191,36,0.35); border-radius: 10px;
    padding: 9px 13px; font-size: 0.82rem; color: #e7ecf3;
}
.rv-war-leader.none { background: #0c131f; border-color: var(--rv-border); color: var(--rv-muted); }
.rv-war-leader-txt { color: #fde68a; }
.rv-war-crown { font-size: 1rem; }
.rv-war-arena {
    margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
    padding: 10px; background: rgba(12,19,31,0.5); border: 1px solid var(--rv-border); border-radius: 12px;
}
.rv-war-entry {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #0c131f; border: 1px solid var(--rv-border); border-radius: 10px;
    padding: 8px 12px; font-size: 0.82rem;
}
.rv-war-entry.leader { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.06); }
.rv-war-vote { display: flex; gap: 6px; margin-left: auto; }
.rv-war-vbtn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--rv-border); background: #0c131f; color: var(--rv-muted);
    border-radius: 8px; padding: 4px 9px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.rv-war-vbtn.voted { border-color: #22c55e; color: #4ade80; background: rgba(34,197,94,0.1); }
.rv-war-vbtn[data-kind="dislike"].voted { border-color: #ef4444; color: #f87171; background: rgba(239,68,68,0.1); }
.rv-war-empty { font-size: 0.8rem; color: var(--rv-muted-2); text-align: center; padding: 8px; }
.rv-war-composer {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    background: rgba(12,19,31,0.6); border: 1px solid var(--rv-border); border-radius: 10px;
    padding: 8px 12px;
}
.rv-war-cta { font-size: 0.72rem; color: var(--rv-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.rv-war-input {
    flex: 1; min-width: 120px;
    background: #0c131f; border: 1px solid var(--rv-border); border-radius: 8px;
    color: #e7ecf3; padding: 8px 12px; font-size: 0.85rem; outline: none;
}
.rv-war-input:focus { border-color: #fbbf24; }
.rv-war-submit {
    border: 1px solid rgba(251,191,36,0.4); background: rgba(251,191,36,0.12); color: #fbbf24;
    border-radius: 8px; padding: 8px 14px; font-size: 0.78rem; font-weight: 800; cursor: pointer;
    white-space: nowrap;
}
.rv-war-submit:hover { background: rgba(251,191,36,0.22); }
.rv-war-submit:disabled { opacity: 0.5; cursor: wait; }
.rv-war-lock {
    font-size: 0.78rem; color: var(--rv-muted); display: inline-flex; align-items: center; gap: 7px;
}
.rv-war-lock b { color: #fbbf24; }
.rv-war-err { color: #f87171; font-size: 0.75rem; margin-top: 6px; }

/* ---- Developer tag ---- */
.dev-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
    color: #5eead4; background: rgba(45,212,191,0.12);
    border: 1px solid rgba(45,212,191,0.4); border-radius: 999px;
    padding: 2px 9px; vertical-align: middle; white-space: nowrap;
}
.dev-tag i { color: #5eead4; font-size: 0.62rem; }

/* ---- Locked vote buttons (votes are C+ under Rating Power) ---- */
.rv-like-locked,
.rv-dislike-locked {
    cursor: not-allowed !important;
    opacity: 0.55;
    border-style: dashed !important;
}
.rv-lock-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.03em;
    color: #fbbf24; background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.35); border-radius: 999px;
    padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}

@media (max-width: 720px) {
    .rv-board { flex: 1 1 100%; }
    .rv-hero { padding: 28px 22px; }
}

/* ---- Reply War status strip on review cards (lives on the war page) ---- */
.rv-war { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rv-border); }
.rv-war-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #0c131f; border: 1px solid var(--rv-border); border-radius: 10px;
    padding: 9px 12px; font-size: 0.8rem; color: var(--rv-muted);
}
.rv-war-strip.live { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.05); }
.rv-war-strip.ended { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.06); }
.rv-war-title {
    font-size: 0.82rem; font-weight: 800; color: #e7ecf3;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.rv-war-title i { color: #fbbf24; }
.rv-war-count {
    background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35);
    border-radius: 999px; padding: 1px 7px; font-size: 0.68rem; font-weight: 800; margin-left: 2px;
}
.rv-war-none { font-size: 0.78rem; }
.rv-war-none b { color: #fbbf24; }
.rv-war-leader-inline { display: inline-flex; align-items: center; gap: 6px; color: #fde68a; flex-wrap: wrap; }
.rv-war-leader-inline.none { color: var(--rv-muted); }
.rv-war-leader-txt { color: #fde68a; font-style: italic; }
.rv-war-winner { display: inline-flex; align-items: center; gap: 6px; color: #fde68a; flex-wrap: wrap; }
.rv-war-podium { width: 100%; font-size: 0.74rem; color: #8b98ad; }
.rv-war-link {
    margin-left: auto; white-space: nowrap; font-size: 0.78rem; font-weight: 800; color: #fbbf24;
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.rv-war-link:hover { text-decoration: underline; }

/* ---- Rating Power band colors on review cards ---- */
.rv-stars.rv-band-negative { color: #f87171; }
.rv-stars.rv-band-neutral { color: #9ca3af; }
.rv-score.rv-band-negative { background: rgba(239,68,68,0.14); color: #f87171; }
.rv-score.rv-band-neutral { background: rgba(148,163,184,0.14); color: #cbd5e1; }
.rv-word {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    border-radius: 999px; padding: 3px 12px; border: 1px solid transparent; white-space: nowrap;
}
.rv-word-big {
    font-size: 0.95rem; padding: 6px 18px; letter-spacing: 0.09em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.rv-word.rv-band-negative { color: #f87171; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.rv-word.rv-band-neutral { color: #cbd5e1; border-color: rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); }
.rv-word.rv-band-positive { color: #4ade80; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }

/* ---- Rating Power legend (the 10-star verdict system) ---- */
.rv-rp-legend {
    background: radial-gradient(120% 160% at 0% 0%, rgba(52,211,153,0.08), transparent 45%),
                linear-gradient(160deg, #0c1518, #0d1521 60%, #101a29);
    border: 1px solid rgba(52,211,153,0.22);
    border-radius: 20px;
    margin-bottom: 22px;
    box-shadow: 0 10px 40px -18px rgba(34,197,94,0.35);
    padding: 0;
    overflow: hidden;
}
.rv-rp-head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 24px; cursor: pointer; user-select: none;
}
.rv-rp-head:hover { background: rgba(34,197,94,0.05); }
.rv-rp-icon {
    width: 34px; height: 38px; flex: 0 0 auto; position: relative;
    border: 1px solid rgba(52,211,153,0.6); border-radius: 9px 9px 7px 7px;
    background: linear-gradient(180deg, #0a101c, #08111f);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px rgba(52,211,153,0.35);
}
.rv-rp-icon span {
    position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #a7f3d0, #34d399 60%, #059669);
    box-shadow: 0 0 14px rgba(52,211,153,0.9);
}
.rv-rp-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #ecfdf5; flex: 1; }
.rv-rp-head h3 span { color: var(--rv-gold); }
.rv-rp-tgl { color: #64748b; transition: transform 0.3s; }
.rv-rp-legend.open .rv-rp-tgl { transform: rotate(180deg); }
.rv-rp-body {
    max-height: 1400px; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 24px 22px;
}
.rv-rp-legend:not(.open) .rv-rp-body { max-height: 0; padding: 0 24px; }
.rv-rp-intro { margin: 4px 0 0; color: var(--rv-muted); font-size: 0.86rem; line-height: 1.55; max-width: 860px; }
.rv-rp-red { color: #f87171; font-weight: 700; }
.rv-rp-grey { color: #9ca3af; font-weight: 700; }
.rv-rp-green { color: #4ade80; font-weight: 700; }

.rv-rp-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.rv-rp-pill {
    font-size: 0.74rem; font-weight: 700; border-radius: 999px;
    padding: 3px 11px; border: 1px solid; white-space: nowrap;
}
.rv-rp-pill b { margin-right: 4px; color: #fff; font-weight: 900; }
.rv-rp-pill-negative { color: #f87171; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.rv-rp-pill-neutral { color: #cbd5e1; border-color: rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); }
.rv-rp-pill-positive { color: #4ade80; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }

.rv-rp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }
.rv-rp-table th {
    color: #8b98ab; font-weight: 700; font-size: 0.7rem;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 10px; text-align: center;
}
.rv-rp-table th.rv-rp-corner { text-align: left; color: #64748b; }
.rv-rp-table th.rv-rp-th-green { color: #4ade80; }
.rv-rp-table th.rv-rp-th-red { color: #f87171; }
.rv-rp-table thead tr:last-child th { border-bottom: 1px solid rgba(255,255,255,0.12); }
.rv-rp-table td { padding: 9px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rv-rp-table tbody tr:last-child td { border-bottom: none; }
.rv-rp-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.rv-rp-table .rv-rp-rank { color: #fff; font-weight: 800; text-align: left; width: 84px; letter-spacing: 0.05em; }
.rv-rp-table .rv-v-plus { color: #4ade80; font-weight: 800; }
.rv-rp-table .rv-v-minus { color: #f87171; font-weight: 800; }
.rv-rp-table .rv-v-lock { color: #5b6779; }
.rv-rp-foot { margin-top: 14px; color: #8b98ab; font-size: 0.8rem; line-height: 1.6; }
.rv-rp-foot b { color: #c6d1e0; }
.rv-rp-locknote { color: #fbbf24; font-weight: 800; }

/* ---- Rank ladder (guide: real badges with XP) ---- */
.rv-rank-ladder { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; max-width: 320px; }
.rv-rank-row {
    display: flex; align-items: center; gap: 10px;
    padding: 3px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.rv-rank-row .rank-badge { font-size: 11px; padding: 1px 11px; min-width: 42px; justify-content: center; }
.rv-rank-xp { margin-left: auto; color: #94a3b8; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.rv-rank-row.is-you {
    border-color: rgba(251,191,36,0.55);
    box-shadow: 0 0 16px rgba(251,191,36,0.16), inset 0 0 10px rgba(251,191,36,0.04);
    background: linear-gradient(90deg, rgba(251,191,36,0.1), rgba(255,255,255,0.02) 70%);
}
.rv-rank-row.is-you .rv-rank-xp { color: #fbbf24; }
.rv-rank-you {
    display: inline-flex; align-items: center; gap: 4px;
    color: #fbbf24; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4);
    border-radius: 999px; padding: 1px 8px; flex-shrink: 0;
}
.rv-rank-ungraded { opacity: 0.8; }
.rv-rank-q {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, #64748b, #475569);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; font-size: 0.8rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* ===== Reviewer profile modal (Threads-style) ===== */
.rv-prof-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(5, 8, 15, 0.72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.rv-prof-overlay.hidden { display: none; }
.rv-prof-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: radial-gradient(120% 120% at 20% 0%, #241a3d 0%, #12141f 55%);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 18px;
    padding: 22px;
    color: #e9ebf5;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.rv-prof-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #9aa2bd;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.rv-prof-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.rv-prof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rv-prof-avatar {
    width: 62px;
    min-width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #64748b, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
}
.rv-prof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-prof-name { font-size: 18px; font-weight: 800; }
.rv-prof-sub { font-size: 13px; color: #9aa2bd; margin-top: 2px; }
.rv-prof-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.rv-prof-badge-wrap .rank-badge { padding: 8px 26px; font-size: 1.15rem; letter-spacing: 3px; border-radius: 12px; }
.rv-prof-xp {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.rv-prof-xp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
    color: #c4c9dd;
    margin-bottom: 6px;
}
.rv-prof-xp-track {
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.rv-prof-xp-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    transition: width 0.4s ease;
}
.rv-prof-joined {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #c4c9dd;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 7px 14px;
    margin-bottom: 16px;
}
.rv-prof-guilds { margin-bottom: 18px; }
.rv-prof-guilds-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #6f7694;
    margin-bottom: 8px;
}
.rv-prof-guilds-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-prof-guild {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #d6c9ff;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 999px;
    padding: 6px 12px;
}
.rv-prof-guild-owner {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #0b0f19;
    background: #fbbf24;
    border-radius: 6px;
    padding: 2px 6px;
}
.rv-prof-guild-empty { font-size: 12.5px; color: #6f7694; }
.rv-prof-history {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    border-radius: 10px;
    padding: 11px;
    text-decoration: none;
}
.rv-prof-history:hover { filter: brightness(1.1); }

/* ============================================================
   REVIEWS — MOBILE
   ============================================================ */
@media (max-width: 720px) {
    .rv-hero { padding: 30px 14px 18px; }
    .rv-hero-inner { flex-direction: column; gap: 18px; }
    .rv-board { width: 100%; }
    .rv-rank-row { flex-wrap: wrap; gap: 8px; }
    .rv-toolbar { gap: 10px; margin-bottom: 16px; }
    .rv-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 5px; }
    .rv-tab { white-space: nowrap; padding: 9px 14px; font-size: 0.85rem; }
    .rv-search { flex: 1 1 100%; }
    .rv-sort { width: 100%; }
    .rv-prof-overlay { padding: 12px; }
    .rv-prof-card { width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto; }
    .rv-footer { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 480px) {
    .rv-hero-stats { gap: 8px; width: 100%; }
    .rv-stat { padding: 10px 8px; }
    .rv-search input { font-size: 0.85rem; }
}

/* ============================================================
   REVIEWS — small screens extras
   ============================================================ */
@media (max-width: 720px) {
    .rv-page { padding: 0 10px 40px; }
    .rv-rp-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rv-rp-table { min-width: 620px; }
    .rv-guide-body { padding: 16px 14px; }
    .rv-guide-grid { grid-template-columns: 1fr; }
    .rv-rp-head h3 { font-size: 0.95rem; }
    .rv-rp-intro { font-size: 0.82rem; }
}


/* ============================================================
   REVIEWS — native-app mobile pass
   Goal: reviews are the star. The page opens on the feed, the
   hero/leaderboard/explainers shrink to slim app furniture and
   every card reads like IMDb mobile: poster, verdict, short
   text, one-tap actions.
============================================================ */
@media (max-width: 720px){
    .rv-page{ padding: 0 10px 56px; }
    /* Hero: tight single block — badge, one-line title, row of
       count chips, intro dropped to a whisper */
    .rv-hero{ padding: 16px 14px 14px; border-radius: 18px; margin-bottom: 14px; }
    .rv-hero-badge{ font-size: 0.66rem; padding: 4px 10px; gap: 6px; }
    .rv-hero h1{ font-size: 1.5rem; line-height: 1.15; }
    .rv-hero p{ font-size: 0.78rem; line-height: 1.45; margin-top: 8px; }
    .rv-hero-left{ flex: none; }
    .rv-hero-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
    .rv-stat{ padding: 8px 4px; border-radius: 12px; min-width: 0; }
    .rv-stat .n{ font-size: 1.15rem; }
    .rv-stat .l{ font-size: 0.62rem; margin-top: 3px; white-space: nowrap; }
    /* Top reviewers: a horizontal strip of mini-cards, swiped
       sideways — one line, never a tall ranked column */
    .rv-board{ flex: none; width: 100%; border-radius: 14px; padding: 8px 10px; margin-top: 12px; }
    .rv-board h3{ font-size: 0.78rem; margin: 0 0 8px; gap: 6px; }
    .rv-board h3 i{ font-size: 0.8rem; }
    .rv-board .sub{ display: none; }
    .rv-board{ display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rv-rank-row{ display: flex; width: auto; flex-direction: row; gap: 7px; align-items: center;
                  flex: 0 0 auto; padding: 5px 9px; border-radius: 999px;
                  border: 1px solid var(--rv-border); background: rgba(10,17,28,0.5); }
    .rv-rank-pos{ font-size: 0.8rem; flex: 0 0 auto; }
    .rv-rank-avatar{ width: 24px; height: 24px; font-size: 0.7rem; flex: 0 0 auto; }
    .rv-rank-main{ text-align: left; min-width: 0; }
    .rv-rank-name{ font-size: 0.72rem; font-weight: 700; display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rv-rank-meta{ display: none; }
    .rv-rank-rb{ display: none; }
    /* explainer blocks become slim tappable rows (already collapsed) */
    .rv-rp-legend{ margin-top: 10px; }
    .rv-rp-head{ padding: 10px 12px; }
    .rv-rp-icon{ width: 26px; height: 30px; }
    .rv-rp-icon span{ width: 22px; height: 26px; }
    .rv-rp-head h3{ font-size: 0.82rem; margin: 0; }
    .rv-rp-head h3 span{ display: none; }
    .rv-rp-head .rv-rp-tgl{ font-size: 0.8rem; }
    .rv-guide-head{ padding: 10px 12px; }
    .rv-guide-head h3{ font-size: 0.82rem; }
    .rv-guide-head i{ font-size: 0.95rem; }
    .rv-guide-head .tgl{ font-size: 0.8rem; }
    .rv-guide{ margin-bottom: 0; }
    /* toolbar: slim sticky bar — tabs on top, search + sort in one
       row beneath, so reviews start right after */
    .rv-toolbar{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 12px 0 10px;
                 padding: 7px; border-radius: 14px; background: rgba(10,17,28,0.6);
                 border: 1px solid var(--rv-border); position: sticky; top: 60px; z-index: 40;
                 backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    .rv-toolbar .rv-spacer{ display: none; }
    .rv-tabs{ grid-column: 1 / -1; width: 100%; padding: 0; overflow-x: auto;
              -webkit-overflow-scrolling: touch; border-radius: 11px; }
    .rv-tab{ padding: 8px 13px; font-size: 0.8rem; border-radius: 9px; }
    .rv-tab .cnt{ display: none; }
    .rv-search{ grid-column: 1; height: 36px; min-width: 0; width: 100%;
                 border-radius: 11px; padding: 0 10px; }
    .rv-search input{ font-size: 0.8rem; }
    .rv-sort{ grid-column: 2; width: auto; height: 36px; font-size: 0.78rem;
              padding: 0 8px; border-radius: 11px; max-width: 118px; }

    /* ---- review cards read like app rows: full-width content,
       poster floating by the author header, actions one line ---- */
    .rv-card.art:not(.ep){
        display: block;
        padding: 14px;
        border-radius: 16px;
    }
    .rv-card.art:not(.ep) .rv-art{
        display: block;
        float: right;
        width: 74px;
        margin: 2px 0 10px 12px;
        border-radius: 10px;
        overflow: hidden;
    }
    .rv-card.art:not(.ep) .rv-art img{ width: 100%; height: auto; display: block; }
    .rv-card-body{ padding: 0; }
    .rv-user-line{ gap: 9px; }
    .rv-avatar{ width: 38px; height: 38px; font-size: 0.95rem; }
    .rv-username h3{ font-size: 0.92rem; }
    .rv-badges{ gap: 6px; margin-top: 2px; }
    .rv-badges .rank-badge{ font-size: 0.72rem !important; padding: 2px 8px !important; letter-spacing: 1px !important; }
    .rv-badges .xp-bar{ display: none !important; }
    .rv-anime-line{ margin-top: 4px; gap: 7px; font-size: 0.86rem; }
    .rv-anime-line a.rv-anime{ font-size: 0.92rem; }
    .rv-stars{ font-size: 0.85rem; letter-spacing: 0.5px; }
    .rv-time{ display: none; }
    /* comment: shorter peek (3 lines) + bold tidy "more" */
    .rv-comment{ margin-top: 10px; font-size: 0.92rem; line-height: 1.55; clear: both; }
    .rv-comment.clamp{ max-height: 74px; }
    .rv-more-btn{ font-size: 0.78rem; margin-top: 4px; }
    /* footer: like/dislike first and chunky, verdict + slim xp to
       its right, secondary links dropped on phones */
    .rv-footer{ margin-top: 12px; padding-top: 10px; gap: 6px 8px; }
    .rv-vote{ order: 1; }
    .rv-vote-btn{ padding: 8px 12px; min-width: 0; gap: 6px; font-size: 0.84rem; border-radius: 999px; }
    .rv-word{ order: 2; font-size: 0.78rem; margin-left: 2px; align-self: center; }
    .rv-xp-bottle{ order: 3; flex-direction: row; gap: 5px; margin-left: auto; align-items: center; }
    .rv-bottle-glass{ width: 62px; height: 18px; border-radius: 6px; }
    .rv-bottle-glass::before{ width: 6px; }
    .rv-bottle-glass::after{ height: 3px; left: 9px; right: 12px; }
    .rv-bottle-glass .rv-bottle-liquid{ left: 6px; }
    .rv-bottle-level{ font-size: 0.58rem; position: absolute; left: 0; right: 0; top: 0; text-align: center; z-index: 4; color: #0b1220; font-weight: 900; line-height: 18px; }
    .rv-bottle-num{ font-size: 0.72rem; white-space: nowrap; }
    .rv-bottle-num i{ font-size: 0.55rem; }
    .rv-bottle-label{ display: none; }
    .rv-foot-spacer{ display: none; }
    .rv-link-btn{ order: 4; padding: 6px 9px; font-size: 0.74rem; border-radius: 999px; }
    .rv-link-btn i{ font-size: 0.72rem; }
    .rv-mine-note{ font-size: 0.78rem; }
}

/* ============================================================
   REVIEWS — IMDb-mobile final polish (wins the cascade)
   First card on screen fast, compact rows, app-feel footer.
   ============================================================ */
@media (max-width: 720px){
    /* --- page + hero: feed first, furniture small --- */
    .rv-page{ padding: 0 10px 48px; }
    .rv-hero{ padding: 12px 12px 10px; border-radius: 16px; margin-bottom: 8px; }
    .rv-hero-badge{ margin-bottom: 8px; }
    .rv-hero h1{ font-size: 1.32rem; }
    .rv-hero p{ display: none; }
    .rv-hero-stats{ margin-top: 9px; gap: 5px; }
    .rv-stat{ padding: 6px 3px; }
    .rv-board{ margin-top: 9px; padding: 6px 8px; border-radius: 12px; }
    .rv-board h3{ font-size: 0.68rem; margin: 0; flex: 0 0 auto; padding-right: 2px; }
    .rv-rank-row{ padding: 4px 8px; }
    .rv-rank-name{ max-width: 88px; }

    /* --- legend + guide collapsed rows: slim, single tap rows --- */
    .rv-rp-legend{ margin-top: 6px; }
    .rv-rp-head{ padding: 7px 12px; }
    .rv-guide-head{ padding: 7px 12px; line-height: 1.1; }
    .rv-guide-head h3{ font-size: 0.78rem; line-height: 1.2; }
    .rv-guide-head i{ font-size: 0.9rem; }
    .rv-rp-head h3{ font-size: 0.78rem; }
    .rv-guide{ margin-bottom: 0; }

    /* --- toolbar: sticky, thinner, reviews visible beneath --- */
    .rv-toolbar{ margin: 8px 0 10px; padding: 5px; gap: 5px; top: 58px; border-radius: 13px; }
    .rv-tab{ padding: 6px 11px; font-size: 0.78rem; }
    .rv-search{ height: 33px; }
    .rv-search input{ font-size: 0.78rem; }
    .rv-sort{ height: 33px; }

    /* --- card footer: two tidy grid rows (IMDb-style actions) --- */
    .rv-footer{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 9px;
        margin-top: 11px;
        padding-top: 10px;
    }
    .rv-vote, .rv-mine-note{ grid-column: 1; grid-row: 1; }
    .rv-vote{ gap: 5px; min-width: 0; }
    .rv-vote-btn{
        padding: 6px 10px; min-width: 0; gap: 4px; font-size: 0.8rem;
        border-radius: 999px; flex: 0 1 auto;
    }
    .rv-lock-tag{ display: none !important; }
    .rv-mine-note{ justify-self: start; align-self: center; font-size: 0.8rem; padding: 6px 12px; border-radius: 999px; }
    .rv-word{
        grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
        max-width: 118px; overflow: hidden; text-overflow: ellipsis;
        font-size: 0.62rem; letter-spacing: 0.05em; padding: 3px 9px; white-space: nowrap;
    }
    .rv-word-big{ font-size: 0.64rem; padding: 4px 10px; letter-spacing: 0.07em; }
    .rv-xp-bottle{
        grid-column: 1; grid-row: 2; justify-self: stretch;
        display: flex; flex-direction: row; align-items: center;
        margin: 0; width: 100%; min-width: 0;
    }
    .rv-bottle-glass{ width: 100%; height: 16px; border-radius: 5px; flex: 1; }
    .rv-bottle-glass::before{ width: 7px; border-radius: 5px 0 0 5px; }
    .rv-bottle-glass::after{ top: 3px; left: 11px; right: 20px; height: 3px; }
    .rv-bottle-liquid{ left: 7px; border-radius: 0 5px 5px 0; }
    .rv-bottle-liquid::before{ display: none; }
    .rv-bottle-level{ display: none; }
    .rv-bottle-num{ right: 8px; font-size: 0.62rem; }
    .rv-bottle-num i{ font-size: 0.5rem; }
    .rv-bottle-label{ display: none; }
    .rv-link-btn{ grid-column: 2; grid-row: 2; justify-self: end; padding: 5px 10px; font-size: 0.72rem; border-radius: 999px; }
    .rv-link-btn:not(.primary){ display: none; }
    .rv-foot-spacer{ display: none; }
}

/* --- reviews feed first on phones: hero, tabs, THEN reviews;
   the legend + explainer guide tuck in below the feed --- */
@media (max-width: 720px){
    .rv-page{ display: flex; flex-direction: column; }
    .rv-hero{ order: 0; }
    .rv-toolbar{ order: 1; }
    .rv-feed{ order: 2; }
    .rv-rp-legend{ order: 3; margin-top: 14px; }
    .rv-guide{ order: 4; }
}

/* Tall pixel-art avatars (gyaru / fantasy7, 300x600 full-body art)
   are cropped to the face + upper body EVERYWHERE, matching the
   homepage. Position only - never size. */
img[src*="gyaru"],
img[src*="fantasy7"]{
    object-position: top center;
}