.fv-page { --fv-gold:var(--fg-gold,#ffc83d); --fv-muted:var(--fg-muted,#aeb1c3); --fv-line:rgba(255,255,255,.1); padding:1.5rem 0 3rem; color:#f6f3ed; }
.fv-hero { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:3rem; align-items:center; padding:2.5rem; margin-bottom:2.5rem; position:relative; overflow:hidden; border:1px solid var(--fv-line); border-radius:20px; background:radial-gradient(ellipse at 25% -20%,rgba(140,82,255,.17),transparent 60%),linear-gradient(120deg,#111122,#0c0d17); }
.fv-hero::before { content:''; position:absolute; width:180px; height:180px; border:1px solid rgba(255,200,61,.12); border-radius:38px; right:-70px; top:-90px; transform:rotate(35deg); pointer-events:none; }
.fv-hero-copy { min-width:0; position:relative; }
.fv-eyebrow { display:flex; align-items:center; gap:.6rem; color:#c4bdde; letter-spacing:.14em; font-size:.7rem; font-weight:600; margin:0 0 1.25rem; }
.fv-eyebrow > span { width:7px; height:7px; border-radius:50%; background:var(--fv-gold); box-shadow:0 0 12px rgba(255,200,61,.4); }
.fv-hero h1 { font-size:clamp(2.6rem,4.8vw,4.1rem); line-height:1.05; letter-spacing:-.01em; margin:0 0 1.15rem; font-weight:700; }
.fv-hero h1 > span { color:var(--fv-gold); }
.fv-intro { color:var(--fv-muted); font-size:.9rem; line-height:1.75; max-width:520px; margin:0; }
.fv-benefits { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin-top:1.5rem; color:#dcdce7; font-size:.78rem; }
.fv-benefits span { display:flex; align-items:center; gap:.4rem; }
.fv-benefits i { color:var(--fv-gold); }
.fv-wallet { border:1px solid rgba(255,200,61,.22); border-radius:14px; padding:1.35rem; background:linear-gradient(140deg,rgba(255,200,61,.055),rgba(15,16,28,.95)); min-width:0; position:relative; box-shadow:0 12px 30px rgba(0,0,0,.16); }
.fv-wallet-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-size:.8rem; color:var(--fv-muted); }
.fv-wallet-top > i { color:var(--fv-gold); font-size:1.1rem; }
.fv-wallet-symbol { color:var(--fv-gold); margin:.9rem 0; font-size:2.4rem; line-height:1; }
.fv-wallet h2 { margin:0 0 .5rem; font-size:1.7rem; font-weight:600; }
.fv-wallet-caption { margin:0; font-size:.78rem; line-height:1.65; color:var(--fv-muted); }
.fv-wallet-button { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; margin-top:1rem; background:var(--fv-gold); color:#171217; border-radius:8px; font-size:.8rem; font-weight:700; }
.fv-wallet-button:hover { background:#ffe395; color:#171217; }
.fv-wallet-player { display:flex; align-items:center; gap:.65rem; margin-top:1rem; font-size:.86rem; }
.fv-wallet-player strong { overflow-wrap:anywhere; min-width:0; }
.fv-wallet-player > i { color:#73d96c; margin-left:auto; }
.fv-avatar { display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; border-radius:6px; color:var(--fv-gold); background:rgba(255,200,61,.09); font-weight:700; }
.fv-wallet-amount { color:var(--fv-gold); font-size:3.5rem; font-weight:700; line-height:1.1; margin:1rem 0 .35rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fv-wallet-amount > span { font-size:1.3rem; font-weight:500; }
.fv-wallet-unavailable { color:var(--fv-muted); margin:1.4rem 0; font-size:.85rem; }
.fv-wallet-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid rgba(255,200,61,.12); font-size:.7rem; color:var(--fv-muted); }
.fv-wallet-footer a { display:flex; align-items:center; justify-content:center; color:var(--fv-gold); width:32px; height:32px; border-radius:6px; }
.fv-wallet-footer a:hover { background:rgba(255,200,61,.1); }
.fv-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:2rem; align-items:start; }
.fv-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.fv-section-label { font-size:.65rem; color:var(--fv-muted); letter-spacing:.1em; text-transform:uppercase; margin:0 0 .4rem; }
.fv-section-heading h2,.fv-ranking h2 { font-size:1.9rem; margin:0; font-weight:600; }
.fv-count { color:#5d5d79; font-size:2rem; font-weight:700; }
.fv-identity { display:flex; align-items:center; gap:.65rem; padding:0 0 1.15rem; color:var(--fv-muted); font-size:.77rem; line-height:1.65; }
.fv-identity i { color:var(--fv-gold); font-size:1rem; }
.fv-identity p { margin:0; }
.fv-identity strong { color:#fff; }
.fv-site-grid { display:flex; flex-direction:column; gap:.75rem; }
.fv-site { display:flex; align-items:center; gap:1rem; min-width:0; min-height:96px; padding:1rem 1.1rem; border:1px solid var(--fv-line); border-radius:12px; background:linear-gradient(105deg,#141526,#10111d); color:#f6f3ed; text-decoration:none; transition:border-color .18s,background .18s,transform .18s; }
.fv-site:hover { border-color:rgba(255,200,61,.65); background:linear-gradient(105deg,#1c1b2a,#171522); color:#fff; transform:translateX(3px); }
.fv-site-number { color:#656780; font-size:.72rem; font-variant-numeric:tabular-nums; }
.fv-logo { display:flex; justify-content:center; align-items:center; flex-shrink:0; width:60px; height:60px; border-radius:12px; background:#1b1c30; border:1px solid rgba(255,255,255,.07); }
.fv-logo img { width:46px; height:46px; object-fit:contain; }
.fv-logo img[src*=".ico"] { image-rendering:pixelated; border-radius:7px; }
.fv-logo img[src*="planetminecraft"] { image-rendering:pixelated; }
.fv-site-copy { min-width:0; flex:1; }
.fv-site-name { display:block; font-size:.88rem; font-weight:600; overflow-wrap:anywhere; }
.fv-site-domain { display:block; color:#8e90a8; font-size:.7rem; margin-top:.35rem; overflow-wrap:anywhere; }
.fv-site-controls { display:flex; align-items:center; gap:.65rem; }
.fv-site-status { display:flex; align-items:center; gap:.55rem; width:138px; min-height:54px; padding:.55rem .7rem; color:#a9acc4; border:1px solid rgba(169,172,196,.24); border-radius:9px; background:rgba(169,172,196,.06); font-size:.67rem; font-variant-numeric:tabular-nums; line-height:1.4; }
.fv-site-status > i { font-size:1rem; flex-shrink:0; }
.fv-status-copy { display:block; min-width:0; }
.fv-status-copy strong { display:block; font-size:1.1rem; font-weight:700; margin-top:.18rem; letter-spacing:.025em; white-space:nowrap; }
.fv-status-copy strong[hidden] { display:none; }
.fv-site[data-state="ready"] .fv-site-status { color:#8fee87; border-color:rgba(115,217,108,.4); background:rgba(115,217,108,.1); font-size:.75rem; font-weight:600; }
.fv-site[data-state="waiting"] .fv-site-status { color:var(--fv-gold); border-color:rgba(255,200,61,.4); background:rgba(255,200,61,.09); }
.fv-site[data-vote-site] { display:grid; grid-template-columns:12px 52px minmax(0,1fr) auto auto; grid-template-areas:"number logo copy point controls"; gap:.75rem; }
.fv-site[data-vote-site] .fv-site-number { grid-area:number; }
.fv-site[data-vote-site] .fv-logo { grid-area:logo; width:52px; height:52px; }
.fv-site[data-vote-site] .fv-site-copy { grid-area:copy; }
.fv-site[data-vote-site] .fv-point { grid-area:point; }
.fv-site[data-vote-site] .fv-site-controls { grid-area:controls; }
.fv-cooldown-help { margin:.9rem 0 0; font-size:.7rem; line-height:1.7; color:var(--fv-muted); }
.fv-point { white-space:nowrap; color:var(--fv-gold); font-size:.72rem; font-weight:600; }
.fv-site-action { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .75rem; color:var(--fv-gold); border-radius:7px; border:1px solid rgba(255,200,61,.23); background:rgba(255,200,61,.035); font-size:.72rem; white-space:nowrap; }
.fv-site:hover .fv-site-action { background:var(--fv-gold); color:#171217; }
.fv-offline { display:flex; align-items:flex-start; gap:.9rem; margin-top:1.2rem; padding:1rem 1.1rem; border-radius:12px; border:1px solid rgba(115,217,108,.14); background:rgba(115,217,108,.025); }
.fv-offline > span { color:#73d96c; font-size:1.1rem; }
.fv-offline strong { display:block; color:#d4e4d3; font-size:.8rem; font-weight:500; margin-bottom:.35rem; }
.fv-offline p { margin:0; color:var(--fv-muted); font-size:.75rem; line-height:1.7; }
.fv-ranking { border:1px solid var(--fv-line); border-radius:16px; background:linear-gradient(150deg,#151426,#0f101b); overflow:hidden; }
.fv-ranking-heading { display:flex; align-items:center; gap:1rem; padding:1.4rem; border-bottom:1px solid var(--fv-line); }
.fv-trophy { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; color:var(--fv-gold); background:rgba(255,200,61,.07); border:1px solid rgba(255,200,61,.14); border-radius:12px; font-size:1.3rem; }
.fv-ranking-empty { min-height:220px; padding:2rem 1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--fv-muted); }
.fv-ranking-empty > i { color:var(--fv-gold); font-size:2rem; margin-bottom:1rem; }
.fv-ranking-empty p { margin:0; font-size:.85rem; }
.fv-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:.8rem; }
.fv-table th,.fv-table td { padding:1rem .6rem; border-bottom:1px solid rgba(255,255,255,.06); }
.fv-table thead th { color:#8e90a8; font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.fv-table th:first-child { width:16%; padding-left:1.1rem; }
.fv-table th:last-child,.fv-table td:last-child { width:20%; text-align:right; padding-right:1.25rem; }
.fv-place { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; color:#9293a9; font-size:.8rem; }
.fv-rank-1 { background:linear-gradient(90deg,rgba(255,200,61,.09),rgba(255,200,61,.02)); }
.fv-rank-1 .fv-place { color:var(--fv-gold); font-size:1.35rem; }
.fv-rank-2 .fv-place { color:#c1c5d5; }
.fv-rank-3 .fv-place { color:#d8a479; }
.fv-player { overflow-wrap:anywhere; }
.fv-player > span:last-child { font-weight:500; }
.fv-player-initial { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:.55rem; border-radius:6px; background:rgba(140,82,255,.09); color:#b6a2dc; font-weight:600; }
.fv-rank-1 .fv-player-initial { color:var(--fv-gold); background:rgba(255,200,61,.08); }
.fv-votes { color:var(--fv-gold); font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums; }
.fv-ranking-footer { padding:1.2rem 1.4rem; color:var(--fv-muted); font-size:.73rem; line-height:1.7; }
.fv-ranking-footer p { margin:0; }
.fv-ranking-footer .fv-updated { margin-top:.85rem; font-size:.65rem; color:#82849b; }
.fv-how { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; border-top:1px solid var(--fv-line); margin-top:2.25rem; padding-top:1.5rem; }
.fv-how > div { display:flex; gap:.85rem; }
.fv-how > div > span { color:var(--fv-gold); font-size:.75rem; margin-top:.2rem; }
.fv-how p { margin:0; color:#8e90a8; font-size:.72rem; line-height:1.7; }
.fv-how strong { display:block; color:#e6e6ed; font-size:.83rem; font-weight:500; margin-bottom:.3rem; }
.fv-page a:focus-visible { outline:3px solid var(--fv-gold); outline-offset:4px; }
@media(max-width:1199px) { .fv-hero { gap:2rem; padding:2rem; } .fv-layout { gap:1.5rem; } .fv-site { gap:.7rem; padding:.9rem; } .fv-site-number { display:none; } .fv-site-action { font-size:0; padding:.65rem; } .fv-site-action i { font-size:.9rem; } }
@media(max-width:991px) { .fv-hero { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } .fv-layout { grid-template-columns:1fr; } .fv-site-action { font-size:.75rem; padding:.6rem .8rem; } .fv-site-number { display:block; } .fv-player-initial { margin-right:.7rem; } }
@media(max-width:575px) { .fv-page { padding-top:.75rem; } .fv-hero { grid-template-columns:1fr; padding:1.4rem; gap:1.5rem; margin-bottom:1.75rem; border-radius:16px; } .fv-hero h1 { font-size:2.7rem; } .fv-eyebrow { font-size:.59rem; } .fv-intro { font-size:.8rem; } .fv-benefits { gap:.65rem; font-size:.68rem; margin-top:1rem; } .fv-wallet { padding:1.1rem; } .fv-wallet h2 { font-size:1.5rem; } .fv-wallet-amount { font-size:3rem; } .fv-site { padding:.85rem; gap:.65rem; min-height:88px; } .fv-site-number { display:none; } .fv-logo { width:48px; height:48px; border-radius:9px; } .fv-logo img { width:36px; height:36px; } .fv-site-name { font-size:.75rem; } .fv-site-domain { font-size:.63rem; } .fv-point { font-size:.62rem; } .fv-site-action { font-size:0; padding:.6rem; } .fv-site-action i { font-size:.8rem; } .fv-section-heading h2 { font-size:1.7rem; } .fv-ranking h2 { font-size:1.8rem; } .fv-how { grid-template-columns:1fr; gap:1rem; margin-top:1.75rem; } .fv-player-initial { width:24px; height:24px; margin-right:.4rem; } }
@media(max-width:359px) { .fv-hero { padding:1.1rem; } .fv-hero h1 { font-size:2.4rem; } .fv-wallet { padding:.9rem; } .fv-site { gap:.5rem; padding:.7rem; } .fv-logo { width:40px; height:40px; } .fv-logo img { width:30px; height:30px; } .fv-point { display:none; } .fv-player-initial { display:none; } }
@media(prefers-reduced-motion:reduce) { .fv-site { transition:none; } .fv-site:hover { transform:none; } }
@media(min-width:992px) and (max-width:1199px) {
    .fv-site[data-vote-site] { grid-template-columns:52px minmax(0,1fr) auto; grid-template-areas:"logo copy point" "logo controls controls"; }
    .fv-site[data-vote-site] .fv-site-controls { justify-content:flex-end; }
    .fv-site[data-vote-site] .fv-site-action { font-size:.72rem; }
}
@media(max-width:575px) {
    .fv-site[data-vote-site] { grid-template-columns:48px minmax(0,1fr) auto; grid-template-areas:"logo copy point" "controls controls controls"; gap:.85rem .65rem; padding:1rem; }
    .fv-site[data-vote-site] .fv-logo { width:48px; height:48px; }
    .fv-site[data-vote-site] .fv-site-controls { width:100%; align-items:stretch; }
    .fv-site[data-vote-site] .fv-site-status { flex:1; width:auto; min-height:54px; }
    .fv-site[data-vote-site] .fv-site-action { font-size:.73rem; min-width:92px; }
    .fv-site[data-vote-site] .fv-site-action i { font-size:.85rem; }
}
