/* =====================================================
   FrenchSky — Cartoon Theme
   ===================================================== */

/* ---- Reset & Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Fredoka', system-ui, sans-serif;
    color: #173529;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background: linear-gradient(180deg, #7fd8ff 0%, #97e6ec 40%, #c4f4e0 72%, #e0fbef 100%);
    background-attachment: fixed;
}
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }
a      { color: inherit; text-decoration: none; }
img    { -webkit-user-drag: none; user-select: none; }
::selection { background: #ffc24b; color: #3d2800; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #bfeede; }
::-webkit-scrollbar-thumb { background: #4ea82a; border-radius: 99px; border: 4px solid #bfeede; }

/* ---- Keyframes ---- */
@keyframes fnCloud      { from { transform: translateX(0); }    to { transform: translateX(38px); } }
@keyframes fnCloudFar   { from { transform: translateX(-10px); } to { transform: translateX(40px); } }
@keyframes fnBob        { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes fnBobBig     { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
@keyframes fnLive       { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes fnPulse      { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fnRise       { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fnToast      { from { opacity: 0; transform: translate(-50%, 26px) rotate(-2deg); } to { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); } }
@keyframes fnSpinCoin   { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } }
@keyframes fnTipPop     { from { opacity: 0; transform: translate(-50%, 8px) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes fnHurt       { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }

/* ---- Ambient Clouds (fixed decor) ---- */
.fn-cloud {
    position: fixed; z-index: 0; pointer-events: none;
    display: flex; align-items: center;
}
.fn-cloud .cloud-body {
    background: #fff; border: 4px solid #cfe9ef; border-radius: 20px;
}
.fn-cloud .cloud-puff {
    background: #fff; border: 4px solid #cfe9ef; border-radius: 50%;
    margin-left: -28px; margin-top: -10px;
}
.fn-cloud-1 { top: 14%; left: 14%; opacity: 0.55; animation: fnCloudFar 11s ease-in-out infinite alternate; }
.fn-cloud-2 { top: 78%; right: 16%; opacity: 0.50; animation: fnCloudFar 13s ease-in-out infinite alternate-reverse; }

/* ---- Navbar ---- */
.fn-nav-wrap {
    position: sticky; top: 14px; z-index: 50;
    padding: 0 20px; margin-top: 16px;
}
.fn-navbar {
    max-width: 1180px; margin: 0 auto;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 20px; box-shadow: 0 6px 0 #1b3b2b;
    padding: 9px 13px;
    display: flex; align-items: center; gap: 11px;
    flex-wrap: wrap;
}
.fn-navbar-brand { display: flex; align-items: center; gap: 9px; }
.fn-navbar-brand img { height: 50px; width: auto; display: block; }
.fn-navbar-brand span { font-family: 'Lilita One', cursive; font-size: 19px; color: #173529; letter-spacing: 0.5px; }
.fn-navbar-nav { display: flex; align-items: center; gap: 3px; margin-left: 4px; }
.fn-nav-link {
    background: transparent; color: #2b5343; font-weight: 600; font-size: 14.5px;
    padding: 8px 12px; border-radius: 12px; border: none; transition: background 0.15s;
}
.fn-nav-link:hover { background: #fdeecb; }
.fn-nav-link.active {
    background: #20c074; color: #fff;
    border: 3px solid #1b3b2b; box-shadow: 0 4px 0 #1b3b2b;
    font-weight: 700;
}
.fn-nav-spacer { flex: 1; }
.fn-nav-discord {
    display: flex; align-items: center; gap: 8px;
    background: #5865f2; color: #fff; font-weight: 700; font-size: 14.5px;
    padding: 10px 16px; border: 3px solid #1b3b2b; border-radius: 13px;
    box-shadow: 0 4px 0 #1b3b2b; transition: transform 0.1s, box-shadow 0.1s;
}
.fn-nav-discord:hover { color: #fff; }
.fn-nav-discord:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b3b2b; }
.fn-nav-ip {
    display: flex; align-items: center; gap: 9px;
    background: #fdeecb; border: 3px solid #1b3b2b;
    box-shadow: 0 4px 0 #1b3b2b; border-radius: 13px;
    padding: 7px 9px 7px 13px; transition: transform 0.1s, box-shadow 0.1s;
}
.fn-nav-ip:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b3b2b; }
.fn-nav-ip-dot { width: 9px; height: 9px; border-radius: 50%; background: #20c074; box-shadow: 0 0 0 3px rgba(32,192,116,0.3); }
.fn-nav-ip-text { font-family: 'Space Mono', monospace; font-size: 13px; color: #173529; font-weight: 700; }
.fn-nav-ip-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #20c074; color: #fff; }

/* ---- Main wrapper ---- */
.fn-main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }

/* ---- Cards ---- */
.fn-card {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 22px; box-shadow: 0 8px 0 #1b3b2b;
    padding: 22px 24px;
}

/* ---- Buttons ---- */
.fn-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Lilita One', cursive; font-size: 18px; letter-spacing: 0.5px;
    padding: 12px 22px; border-radius: 15px; border: 4px solid #1b3b2b;
    transition: transform 0.1s, box-shadow 0.1s;
}
.fn-btn:active { transform: translateY(4px); }
.fn-btn-green { background: #20c074; color: #fff; box-shadow: 0 6px 0 #1b3b2b; }
.fn-btn-green:active { box-shadow: 0 2px 0 #1b3b2b; }
.fn-btn-yellow { background: #ffc24b; color: #3d2800; box-shadow: 0 6px 0 #1b3b2b; }
.fn-btn-yellow:active { box-shadow: 0 2px 0 #1b3b2b; }
.fn-btn-muted { background: #fdeecb; color: #8a6326; box-shadow: 0 4px 0 #1b3b2b; }
.fn-btn-muted:active { box-shadow: 0 1px 0 #1b3b2b; }
.fn-btn-blue { background: #4aa8ff; color: #fff; box-shadow: 0 6px 0 #1b3b2b; }
.fn-btn-blue:active { box-shadow: 0 2px 0 #1b3b2b; }
.fn-btn-sm { font-size: 13.5px; padding: 9px 14px; border-width: 3px; }

/* ---- Progress bar ---- */
.fn-progress-track {
    height: 18px; background: #efe6cf;
    border: 3px solid #1b3b2b; border-radius: 99px; overflow: hidden;
}
.fn-progress-fill {
    height: 100%; background: linear-gradient(90deg, #20c074, #6fcf3f);
    border-right: 3px solid #1b3b2b; border-radius: 0 99px 99px 0;
    transition: width 0.3s ease;
}
.fn-progress-fill-blue { background: #4aa8ff; }

/* ---- Badge / Pill ---- */
.fn-badge {
    display: inline-flex; align-items: center; gap: 8px;
    border: 3px solid #1b3b2b; box-shadow: 0 4px 0 #1b3b2b;
    border-radius: 99px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
}
.fn-badge-cream { background: #fff8e7; color: #173529; }
.fn-badge-green { background: #e6f8ef; color: #14924f; }
.fn-badge-yellow { background: #fdf2d6; color: #b07d12; }
.fn-badge-blue { background: #e3f0ff; color: #2f5fb0; }

/* ---- Avatar (player head) ---- */
.fn-avatar {
    border: 4px solid #1b3b2b; border-radius: 16px; box-shadow: 0 6px 0 #1b3b2b;
    background-color: #cdeffd; background-size: cover;
    background-position: center; image-rendering: pixelated;
}

/* ---- Grass/dirt ground strip ---- */
.fn-ground {
    position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: #7d5230;
    pointer-events: none;
}
.fn-ground::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 20px; background: #6fcf3f; border-bottom: 4px solid #4ea82a;
}

/* ---- Section cloud (inside hero) ---- */
.fn-hero-cloud {
    position: absolute; display: flex; align-items: center;
    pointer-events: none; opacity: 0.9;
}
.fn-hero-cloud .c1 { background: #fff; border: 4px solid #1b3b2b; border-radius: 24px; }
.fn-hero-cloud .c2 { background: #fff; border: 4px solid #1b3b2b; border-radius: 50%; margin-left: -34px; margin-top: -12px; }

/* ---- Toast ---- */
.fn-toast {
    position: fixed; bottom: 28px; left: 50%; z-index: 99;
    display: flex; align-items: center; gap: 11px;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 16px; box-shadow: 0 7px 0 #1b3b2b;
    padding: 13px 19px; transform: rotate(-2deg);
    animation: fnToast 0.28s ease;
    font-size: 15px; font-weight: 700; color: #173529;
    pointer-events: none;
}
.fn-toast.hidden { display: none; }
.fn-toast-icon {
    width: 28px; height: 28px; border-radius: 9px;
    background: #20c074; border: 3px solid #1b3b2b;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
}

/* ---- Input ---- */
.fn-input {
    font-family: 'Space Mono', monospace; font-weight: 700; font-size: 16px;
    color: #173529; background: #fff;
    border: 4px solid #1b3b2b; box-shadow: 0 5px 0 #1b3b2b;
    border-radius: 15px; padding: 14px 16px; outline: none;
    transition: border-color 0.15s;
    width: 100%;
}
.fn-input:focus { border-color: #20c074; }

/* ===================================================
   HOMEPAGE
   =================================================== */

/* Hero Section */
.fn-hero {
    position: relative; border: 4px solid #1b3b2b;
    border-radius: 34px; box-shadow: 0 10px 0 #1b3b2b;
    overflow: hidden;
    background: linear-gradient(180deg, #9fe4ff 0%, #bdf0ff 45%, #d6f7ef 100%);
}
.fn-hero-content {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 20px; align-items: center; padding: 50px 44px 0;
}
.fn-hero-left { padding-bottom: 72px; }
.fn-hero-right {
    position: relative; align-self: end;
    display: flex; flex-direction: column; align-items: center;
    padding-bottom: 30px;
}
.fn-hero-title {
    font-family: 'Lilita One', cursive; line-height: 0.9;
    letter-spacing: 1px; margin-bottom: 16px;
}
.fn-hero-title .line1 {
    display: block; font-size: clamp(44px, 6.5vw, 88px);
    color: #fff8e7; -webkit-text-stroke: 5px #1b3b2b;
    paint-order: stroke; text-shadow: 0 7px 0 rgba(27,59,43,0.25);
}
.fn-hero-title .line2 {
    display: block; font-size: clamp(44px, 6.5vw, 88px);
    color: #ffc24b; -webkit-text-stroke: 5px #1b3b2b;
    paint-order: stroke; text-shadow: 0 7px 0 rgba(27,59,43,0.25);
}
.fn-hero-subtitle { font-size: 18px; line-height: 1.5; color: #234a3a; font-weight: 500; max-width: 430px; margin-bottom: 26px; }
.fn-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fn-hero-mascot { width: min(340px, 100%); height: auto; display: block; animation: fnBobBig 4.5s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(27,59,43,0.12)); }
.fn-online-badge {
    position: absolute; top: 26px; right: 28px; z-index: 4;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    background: #ffc24b; border: 4px solid #1b3b2b; border-radius: 14px;
    box-shadow: 0 5px 0 #1b3b2b; padding: 9px 15px; transform: rotate(3deg);
}
.fn-online-dot { width: 11px; height: 11px; border-radius: 50%; background: #20c074; border: 2px solid #1b3b2b; animation: fnLive 1.8s ease-in-out infinite; }
.fn-online-count { font-family: 'Lilita One', cursive; font-size: 17px; color: #3d2800; }
.fn-online-label { font-weight: 700; font-size: 13px; color: #6e4a09; }

/* Features Section */
.fn-features { margin-top: 28px; }
.fn-section-title { font-family: 'Lilita One', cursive; font-size: 36px; color: #173529; margin-bottom: 6px; text-align: center; }
.fn-section-sub { font-size: 16px; color: #4a6a59; font-weight: 500; text-align: center; margin-bottom: 28px; }
.fn-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fn-feature-card {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 22px; box-shadow: 0 7px 0 #1b3b2b;
    padding: 22px 20px; transition: transform 0.15s;
}
.fn-feature-card:hover { transform: translateY(-3px); }
.fn-feature-icon { font-size: 36px; margin-bottom: 12px; }
.fn-feature-title { font-family: 'Lilita One', cursive; font-size: 20px; color: #173529; margin-bottom: 8px; }
.fn-feature-text { font-size: 14.5px; color: #4a6a59; font-weight: 500; line-height: 1.5; }

/* Stats Band */
.fn-stats-band {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-top: 28px;
}
.fn-stat-card {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 22px; box-shadow: 0 7px 0 #1b3b2b;
    padding: 28px 20px; text-align: center;
}
.fn-stat-number { font-family: 'Lilita One', cursive; font-size: 48px; color: #173529; line-height: 1; }
.fn-stat-label { font-size: 15px; font-weight: 600; color: #4a6a59; margin-top: 6px; }

/* ===================================================
   VOTE PAGES
   =================================================== */

/* Step 1 – Pseudo card */
.fn-vote-pseudo-card {
    width: 100%; max-width: 560px; margin: 24px auto 0;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 30px; box-shadow: 0 11px 0 #1b3b2b;
    padding: 40px 38px 60px; text-align: center;
    position: relative; overflow: hidden;
}
.fn-vote-pseudo-card .fn-ground { height: 34px; }
.fn-vote-pseudo-card .fn-ground::before { height: 14px; }
.fn-vote-pseudo-avatar {
    width: 92px; height: 92px; margin: 0 auto 18px;
    border: 4px solid #1b3b2b; border-radius: 16px; box-shadow: 0 6px 0 #1b3b2b;
    background-color: #cdeffd; background-size: cover; background-position: center;
    image-rendering: pixelated; animation: fnBobBig 4.5s ease-in-out infinite;
}
.fn-vote-pseudo-title { font-family: 'Lilita One', cursive; font-size: 36px; color: #173529; line-height: 1; margin-bottom: 10px; }
.fn-vote-pseudo-sub { font-size: 15.5px; color: #4a6a59; font-weight: 500; max-width: 390px; margin: 0 auto 26px; }
.fn-vote-pseudo-form { display: flex; gap: 11px; max-width: 430px; margin: 0 auto; position: relative; z-index: 2; }
.fn-vote-pseudo-form input { flex: 1; min-width: 0; }
.fn-vote-pseudo-form button { flex: 0 0 auto; }
.fn-vote-pseudo-note { font-size: 12.5px; color: #6e8a7a; font-weight: 600; margin-top: 14px; position: relative; z-index: 2; }

/* Step 2 – Vote list page */
.fn-vote-player-bar {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 24px; box-shadow: 0 9px 0 #1b3b2b;
    padding: 18px 22px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.fn-vote-player-avatar {
    width: 60px; height: 60px; flex: 0 0 auto;
    border: 4px solid #1b3b2b; border-radius: 13px; box-shadow: 0 5px 0 #1b3b2b;
    background-color: #cdeffd; background-size: cover; background-position: center;
    image-rendering: pixelated;
}
.fn-vote-player-name-wrap { min-width: 150px; }
.fn-vote-player-name-label { font-size: 13px; color: #4a6a59; font-weight: 600; }
.fn-vote-player-name { font-family: 'Lilita One', cursive; font-size: 26px; color: #173529; line-height: 1; }
.fn-vote-progress-wrap { flex: 1; min-width: 220px; }
.fn-vote-progress-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fn-vote-progress-text { font-size: 13.5px; font-weight: 700; color: #2b5343; }
.fn-vote-progress-count { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; color: #b07d12; }
.fn-vote-progress-note { font-size: 12px; color: #6e8a7a; font-weight: 600; margin-top: 5px; }
.fn-vote-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }

/* Website cards */
.fn-site-list { display: flex; flex-direction: column; gap: 14px; }
.fn-site-list h2 { font-family: 'Lilita One', cursive; font-size: 22px; color: #173529; margin: 2px 0 0 4px; }
.fn-site-card {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 20px; box-shadow: 0 7px 0 #1b3b2b;
    padding: 16px 18px; display: flex; align-items: center; gap: 15px;
}
.fn-site-icon {
    width: 50px; height: 50px; flex: 0 0 auto;
    border-radius: 13px; border: 3px solid #1b3b2b; box-shadow: 0 4px 0 #1b3b2b;
    display: flex; align-items: center; justify-content: center;
}
.fn-site-icon span { font-family: 'Lilita One', cursive; font-size: 22px; color: #fff8e7; }
.fn-site-info { flex: 1; min-width: 0; }
.fn-site-name { font-family: 'Lilita One', cursive; font-size: 19px; color: #173529; line-height: 1.05; }
.fn-site-url { font-family: 'Space Mono', monospace; font-size: 12px; color: #6e8a7a; font-weight: 700; margin-bottom: 6px; }
.fn-site-reward {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fdf2d6; border: 2px solid #1b3b2b; border-radius: 99px;
    padding: 3px 10px; font-size: 12px; font-weight: 700; color: #b07d12;
}
.fn-site-reward-dot { width: 11px; height: 11px; border-radius: 3px; background: #ffc24b; border: 2px solid #1b3b2b; }
.fn-btn-vote {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    background: #20c074; color: #fff; border: 4px solid #1b3b2b;
    box-shadow: 0 5px 0 #1b3b2b; font-family: 'Lilita One', cursive;
    font-size: 16px; padding: 11px 20px; border-radius: 14px;
    animation: fnPulse 2.2s ease-in-out infinite;
    transition: transform 0.1s, box-shadow 0.1s;
}
.fn-btn-vote:active { transform: translateY(4px); box-shadow: 0 1px 0 #1b3b2b; }
.fn-site-cd {
    flex: 0 0 auto; text-align: center;
    background: #efe6cf; border: 4px solid #b9ad8e;
    border-radius: 14px; padding: 9px 16px;
}
.fn-site-cd-label { font-size: 10px; font-weight: 700; color: #8a7a55; letter-spacing: 0.5px; }
.fn-site-cd-time { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 16px; color: #5a6760; }

/* Leaderboard */
.fn-leaderboard {
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 22px; box-shadow: 0 8px 0 #1b3b2b;
    padding: 18px 18px 20px; position: sticky; top: 92px;
}
.fn-lb-header { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.fn-lb-icon {
    width: 32px; height: 32px; border-radius: 9px;
    background: #ffc24b; border: 3px solid #1b3b2b; box-shadow: 0 3px 0 #1b3b2b;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.fn-lb-title { font-family: 'Lilita One', cursive; font-size: 21px; color: #173529; }
.fn-lb-tabs {
    display: flex; gap: 6px; background: #efe6cf;
    border: 3px solid #1b3b2b; border-radius: 13px; padding: 4px; margin-bottom: 14px;
}
.fn-lb-tab {
    flex: 1; border: none; border-radius: 9px; font-weight: 700; font-size: 13.5px;
    padding: 8px; background: transparent; color: #5a6760;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fn-lb-tab.active { background: #fff8e7; color: #173529; box-shadow: 0 3px 0 #1b3b2b; }
.fn-lb-list { display: flex; flex-direction: column; gap: 8px; }
.fn-lb-row {
    display: flex; align-items: center; gap: 11px;
    border: 3px solid #1b3b2b; border-radius: 13px; padding: 8px 11px;
}
.fn-lb-row-bg-gold   { background: #fdf2d6; }
.fn-lb-row-bg-silver { background: #f4f4f4; }
.fn-lb-row-bg-bronze { background: #fef0e8; }
.fn-lb-row-bg-plain  { background: #f6f6f4; }
.fn-lb-rank {
    width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px;
    border: 2px solid #1b3b2b;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Lilita One', cursive; font-size: 14px;
}
.fn-lb-rank-gold   { background: #ffc24b; color: #3d2800; }
.fn-lb-rank-silver { background: #d4d4d4; color: #3a3a3a; }
.fn-lb-rank-bronze { background: #e8a87c; color: #3d2800; }
.fn-lb-rank-plain  { background: #efe6cf; color: #6e8a7a; }
.fn-lb-pseudo { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: #173529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-lb-votes { display: flex; align-items: center; gap: 5px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; color: #14924f; }
.fn-lb-votes span { font-size: 10px; color: #6e8a7a; }
.fn-lb-note { font-size: 11.5px; color: #6e8a7a; font-weight: 600; text-align: center; margin-top: 13px; }

/* ===================================================
   STATS PAGES
   =================================================== */
.fn-stats-pseudo-card {
    width: 100%; max-width: 560px; margin: 24px auto 0;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 30px; box-shadow: 0 11px 0 #1b3b2b;
    padding: 40px 38px 60px; text-align: center;
    position: relative; overflow: hidden;
}
.fn-stats-pseudo-card .fn-ground { height: 34px; }
.fn-stats-pseudo-card .fn-ground::before { height: 14px; }

.fn-server-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.fn-server-card {
    text-align: left; cursor: pointer; padding: 0;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 28px; box-shadow: 0 9px 0 #1b3b2b; overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fn-server-card:hover { transform: translateY(-3px); }
.fn-server-card:active { transform: translateY(4px); box-shadow: 0 3px 0 #1b3b2b; }
.fn-server-card-img {
    position: relative; height: 150px;
    border-bottom: 4px solid #1b3b2b;
    display: flex; align-items: center; justify-content: center;
}
.fn-server-card-img.sky { background: linear-gradient(180deg, #bfe6ff 0%, #6fb8ff 100%); }
.fn-server-card-img.raft { background: linear-gradient(180deg, #d3dbe0 0%, #aebec6 100%); }
.fn-server-tag {
    position: absolute; top: 14px; left: 14px;
    border: 3px solid #1b3b2b; box-shadow: 0 4px 0 #1b3b2b;
    font-family: 'Lilita One', cursive; font-size: 12px;
    padding: 4px 11px; border-radius: 9px; transform: rotate(-3deg);
}
.fn-server-tag.available { background: #20c074; color: #fff; }
.fn-server-tag.soon { background: #ffc24b; color: #3d2800; }
.fn-server-card-body { padding: 18px 20px 20px; }
.fn-server-card-title { font-family: 'Lilita One', cursive; font-size: 26px; color: #173529; }
.fn-server-card-sub { font-weight: 700; font-size: 12.5px; color: #2f7fd0; }
.fn-server-card-desc { font-size: 14px; line-height: 1.45; color: #3a5a4a; font-weight: 500; margin: 8px 0 16px; }
.fn-server-card-btn {
    display: block; text-align: center;
    border: 4px solid #1b3b2b; box-shadow: 0 5px 0 #1b3b2b;
    font-family: 'Lilita One', cursive; font-size: 17px;
    padding: 12px; border-radius: 14px;
}
.fn-server-card-btn.blue { background: #4aa8ff; color: #fff; }
.fn-server-card-btn.grey { background: #c4cdc7; color: #5a6760; border-color: #97a89e; box-shadow: 0 5px 0 #97a89e; }
.fn-server-card.disabled { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.78; border-color: #97a89e; box-shadow: 0 9px 0 #97a89e; }
.fn-server-card.disabled .fn-server-card-title { color: #4a574f; }

/* Stats Dashboard */
.fn-stats-hero {
    position: relative; border: 4px solid #1b3b2b; border-radius: 30px;
    box-shadow: 0 10px 0 #1b3b2b; overflow: hidden;
    background: linear-gradient(180deg, #9fe4ff 0%, #bdf0ff 50%, #d6f7ef 100%);
    margin-bottom: 20px;
}
.fn-stats-hero-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 24px;
    padding: 30px 34px 46px; flex-wrap: wrap;
}
.fn-stats-hero-avatar {
    width: 112px; height: 112px; flex: 0 0 auto;
    border: 4px solid #1b3b2b; border-radius: 18px; box-shadow: 0 7px 0 #1b3b2b;
    background-color: #cdeffd; background-size: cover; background-position: center;
    image-rendering: pixelated; animation: fnBobBig 5s ease-in-out infinite;
}
.fn-stats-hero-name {
    font-family: 'Lilita One', cursive; font-size: clamp(34px, 5vw, 52px); line-height: 0.92;
    color: #fff8e7; -webkit-text-stroke: 4px #1b3b2b;
    paint-order: stroke; text-shadow: 0 6px 0 rgba(27,59,43,0.22);
}
.fn-stats-coins {
    flex: 0 0 auto; display: flex; align-items: center; gap: 13px;
    background: #fff8e7; border: 4px solid #1b3b2b;
    border-radius: 18px; box-shadow: 0 7px 0 #1b3b2b; padding: 14px 20px;
}
.fn-coins-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd75e, #f4a31f);
    border: 4px solid #1b3b2b; box-shadow: 0 4px 0 #1b3b2b;
    display: flex; align-items: center; justify-content: center;
    animation: fnSpinCoin 3.4s ease-in-out infinite;
    font-family: 'Lilita One', cursive; font-size: 22px; color: #7a4a06;
}
.fn-coins-value { font-family: 'Lilita One', cursive; font-size: 30px; color: #173529; line-height: 1; }
.fn-coins-label { font-size: 12.5px; font-weight: 700; color: #b07d12; letter-spacing: 0.3px; }

/* 4-tile row */
.fn-stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.fn-stat-tile {
    border: 4px solid #1b3b2b; border-radius: 20px; box-shadow: 0 7px 0 #1b3b2b; padding: 18px 18px 16px;
}
.fn-stat-tile-green  { background: #e6f8ef; }
.fn-stat-tile-yellow { background: #fdf2d6; }
.fn-stat-tile-blue   { background: #e3f0ff; }
.fn-stat-tile-pink   { background: #ffe6ec; }
.fn-stat-tile-icon {
    width: 34px; height: 34px; border-radius: 10px;
    border: 3px solid #1b3b2b; box-shadow: 0 3px 0 #1b3b2b;
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.fn-stat-tile-icon .dot { width: 12px; height: 12px; border-radius: 3px; }
.fn-stat-tile-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fn-stat-tile-label { font-size: 13px; font-weight: 700; color: #2b5343; line-height: 1.1; }
.fn-stat-tile-value { font-family: 'Lilita One', cursive; font-size: 40px; line-height: 1; }
.fn-stat-tile-value.green  { color: #14924f; }
.fn-stat-tile-value.yellow { color: #b07d12; }
.fn-stat-tile-value.blue   { color: #2f5fb0; }
.fn-stat-tile-value.pink   { color: #d23a5e; }

/* Charts row */
.fn-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* Donut */
.fn-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.fn-donut {
    position: relative; width: 168px; height: 168px; flex: 0 0 auto;
    border-radius: 50%; border: 4px solid #1b3b2b; box-shadow: 0 5px 0 #1b3b2b;
}
.fn-donut-center {
    position: absolute; inset: 40px; border-radius: 50%; border: 4px solid #1b3b2b;
    background: #fff8e7; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.fn-donut-center-label { font-family: 'Lilita One', cursive; font-size: 17px; color: #173529; line-height: 1; }
.fn-donut-center-pct { font-size: 12px; font-weight: 700; color: #b07d12; }
.fn-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
.fn-legend-item { display: flex; align-items: center; gap: 10px; }
.fn-legend-dot { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 4px; border: 2px solid #1b3b2b; }
.fn-legend-name { flex: 1; font-size: 14px; font-weight: 600; color: #2b5343; }
.fn-legend-pct { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px; color: #173529; }

/* Bars */
.fn-bars-list { display: flex; flex-direction: column; gap: 14px; }
.fn-bar-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.fn-bar-item-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #2b5343; }
.fn-bar-item-coins { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12.5px; color: #b07d12; }
.fn-bar-fill { height: 100%; border-right: 3px solid #1b3b2b; border-radius: 0 99px 99px 0; }

/* Skills */
.fn-skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.fn-skill-card {
    position: relative; background: #fffdf6; border: 3px solid #1b3b2b;
    border-radius: 18px; box-shadow: 0 5px 0 #1b3b2b; padding: 22px 16px 18px;
    display: flex; flex-direction: column; align-items: center;
    cursor: help; transition: transform 0.15s;
}
.fn-skill-card:hover { transform: translateY(-3px); }
.fn-skill-ring {
    position: relative; width: 138px; height: 138px; margin-bottom: 14px;
    border-radius: 50%; border: 4px solid #1b3b2b;
}
.fn-skill-ring-center {
    position: absolute; inset: 17px; border-radius: 50%; border: 4px solid #1b3b2b;
    background: #fff8e7; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.fn-skill-level-label { font-size: 10.5px; font-weight: 700; color: #6e8a7a; letter-spacing: 0.5px; }
.fn-skill-level { font-family: 'Lilita One', cursive; font-size: 38px; color: #173529; line-height: 0.95; }
.fn-skill-name { font-family: 'Lilita One', cursive; font-size: 19px; color: #173529; margin-bottom: 9px; }
.fn-skill-xp-note { font-size: 12px; font-weight: 700; color: #6e8a7a; }
.fn-skill-tooltip {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    z-index: 20; width: 224px;
    background: #173529; border: 3px solid #1b3b2b; border-radius: 16px;
    box-shadow: 0 8px 0 rgba(27,59,43,0.4); padding: 13px 14px;
    animation: fnTipPop 0.16s ease; transform: translateX(-50%);
}
.fn-skill-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-top: 10px solid #173529;
}
.fn-skill-tooltip-title { font-family: 'Lilita One', cursive; font-size: 13px; color: #ffc24b; margin-bottom: 9px; letter-spacing: 0.3px; }
.fn-skill-tooltip-items { display: flex; flex-direction: column; gap: 8px; }
.fn-skill-tooltip-item { display: flex; align-items: center; gap: 9px; }
.fn-skill-tooltip-dot { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 4px; border: 2px solid #0c1b14; }
.fn-skill-tooltip-name { flex: 1; font-size: 13px; font-weight: 600; color: #e0fbef; }
.fn-skill-tooltip-xp { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; color: #8be05f; }

/* Stats footer note */
.fn-stats-note { text-align: center; font-size: 12.5px; color: #2b5343; font-weight: 600; margin-top: 22px; }

/* Loading spinner */
.fn-loading { text-align: center; padding: 60px 20px; }
.fn-loading-spinner {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border: 5px solid #efe6cf; border-top-color: #20c074;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fn-loading-text { font-family: 'Lilita One', cursive; font-size: 22px; color: #173529; }

/* Error card */
.fn-error-card {
    background: #fff8e7; border: 4px solid #1b3b2b; border-radius: 24px;
    box-shadow: 0 8px 0 #1b3b2b; padding: 40px; text-align: center;
    max-width: 480px; margin: 40px auto;
}
.fn-error-card h3 { font-family: 'Lilita One', cursive; font-size: 28px; color: #173529; margin-bottom: 10px; }
.fn-error-card p { font-size: 15px; color: #4a6a59; font-weight: 500; margin-bottom: 22px; }

/* Breadcrumb */
.fn-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

/* Vote error alert */
.fn-alert-error {
    background: #ffe6ec; border: 3px solid #d23a5e; border-radius: 14px;
    padding: 12px 16px; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: #6b0e27;
}

/* Responsive */
@media (max-width: 768px) {
    .fn-hero-content { grid-template-columns: 1fr; }
    .fn-hero-right { display: none; }
    .fn-features-grid { grid-template-columns: 1fr 1fr; }
    .fn-stats-band { grid-template-columns: 1fr 1fr; }
    .fn-vote-cols { grid-template-columns: 1fr; }
    .fn-stat-tiles { grid-template-columns: 1fr 1fr; }
    .fn-charts-row { grid-template-columns: 1fr; }
    .fn-skills-grid { grid-template-columns: 1fr; }
    .fn-server-grid { grid-template-columns: 1fr; }
    .fn-navbar { gap: 6px; }
    .fn-navbar-nav { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .fn-features-grid { grid-template-columns: 1fr; }
    .fn-stats-band { grid-template-columns: 1fr; }
    .fn-stat-tiles { grid-template-columns: 1fr; }
    .fn-main { padding: 16px 12px 60px; }
}