/* ============================================================
   YourRO — FluxCP theme stylesheet
   Ported from the Lovable "yourro-portal-magic" design system.
   ============================================================ */

:root {
	--yr-radius: 1.25rem;
	--yr-sky: #5BBEFF;
	--yr-gold: #f59e0b;
	--yr-gold-light: #fde68a;
	--yr-pink: #ec4899;
	--yr-magic: #a855f7;
	--yr-leaf: #34d399;
	--yr-ink: #241a3d;
	--yr-ink-70: rgba(36, 26, 61, 0.7);
	--yr-ink-60: rgba(36, 26, 61, 0.6);
	--yr-ink-50: rgba(36, 26, 61, 0.5);

	--yr-grad-magic: linear-gradient(135deg, var(--yr-sky), var(--yr-magic));
	--yr-grad-gold: linear-gradient(135deg, var(--yr-gold-light), var(--yr-gold));
	--yr-grad-pink: linear-gradient(135deg, #f0abfc, var(--yr-pink));
	--yr-grad-sky: linear-gradient(180deg, #cdeaff, var(--yr-sky));
	--yr-grad-sunset: linear-gradient(135deg, #fb923c, #ef4444);
	--yr-grad-leaf: linear-gradient(135deg, #86efac, var(--yr-leaf));

	--yr-shadow-magic: 0 20px 60px -20px rgba(168, 85, 247, 0.5), 0 8px 30px -10px rgba(91, 190, 255, 0.4);
	--yr-shadow-card: 0 12px 40px -12px rgba(168, 85, 247, 0.3);
}

* { box-sizing: border-box; }

/* Scroll reveal — kept low-specificity/early so component :hover states
   (defined later, e.g. .yr-card:hover) still take precedence. */
.yr-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.yr-reveal.yr-in-view { opacity: 1; transform: translateY(0); }

html { scroll-behavior: smooth; }

body.yourro-theme {
	margin: 0;
	font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
	color: var(--yr-ink);
	background: linear-gradient(180deg, #cdeaff 0%, #e9d5ff 45%, #ffe4f0 100%);
	background-attachment: fixed;
	overflow-x: hidden;
	position: relative;
}

h1, h2, h3, h4, h5 {
	font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--yr-ink);
	font-weight: 700;
	font-size: 1rem;
	text-transform: none;
	border-bottom: none;
	font-style: normal;
}
h3:first-letter { font-weight: inherit; }

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* ---------- Ambient background layers ---------- */
.yr-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.yr-cloud {
	position: absolute; border-radius: 999px; filter: blur(30px);
	background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
	animation: yr-drift linear infinite;
}
.yr-cloud-1 { top: 12%; width: 260px; height: 130px; opacity: .5; animation-duration: 90s; }
.yr-cloud-2 { top: 40%; width: 340px; height: 170px; opacity: .35; animation-duration: 140s; animation-delay: -30s; }
.yr-cloud-3 { top: 70%; width: 220px; height: 110px; opacity: .5; animation-duration: 110s; animation-delay: -60s; }
@keyframes yr-drift { 0% { transform: translateX(-20vw); } 100% { transform: translateX(120vw); } }

.yr-particles span {
	position: absolute; border-radius: 999px; background: #fff;
	box-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 16px rgba(168,85,247,.6);
	animation: yr-twinkle ease-in-out infinite;
}
@keyframes yr-twinkle { 0%, 100% { opacity: .2; transform: scale(.8);} 50% { opacity: 1; transform: scale(1.2);} }

.yr-cursor-glow {
	position: fixed; top: 0; left: 0; width: 300px; height: 300px; z-index: 5;
	border-radius: 999px; pointer-events: none; mix-blend-mode: screen; filter: blur(20px);
	background: radial-gradient(circle, rgba(91,190,255,.25), rgba(168,85,247,.15) 40%, transparent 70%);
	transition: transform .15s ease-out; transform: translate(-9999px,-9999px);
	display: none;
}
@media (min-width: 768px) { .yr-cursor-glow { display: block; } }

.yr-scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 70;
	transform-origin: left; transform: scaleX(0);
	background: linear-gradient(90deg, var(--yr-sky), var(--yr-magic), var(--yr-pink), var(--yr-gold));
}

/* ---------- Shared text / gradients ---------- */
.yr-text-magic, .yr-logo-magic {
	background: linear-gradient(135deg, var(--yr-sky), var(--yr-magic), var(--yr-pink));
	background-size: 200% 200%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: yr-gradient-shift 6s ease infinite;
}
.yr-text-gold, .yr-logo-gold {
	background: var(--yr-grad-gold);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes yr-gradient-shift { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

.yr-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .35rem .9rem; border-radius: 999px;
	background: rgba(255,255,255,.6); backdrop-filter: blur(8px);
	color: #6d28d9; font-family: 'Fredoka', sans-serif; font-size: .85rem; font-weight: 600;
}
.yr-eyebrow-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.yr-h2 { font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 3.2rem); margin-top: 1rem; }
.yr-lead { color: var(--yr-ink-70); max-width: 40rem; margin: .9rem auto 0; }

/* Icon glyphs rendered inside colored tiles (feature/download/social/
   donate/rank/timeline icons) and inside buttons. */
.yr-tile-icon { width: 1.6rem; height: 1.6rem; color: #fff; }
.yr-feature-icon, .yr-download-icon, .yr-social-icon, .yr-donate-icon,
.yr-rank-icon, .yr-timeline-icon {
	display: flex; align-items: center; justify-content: center;
}
.yr-download-icon:not([class*="yr-grad-"]) .yr-tile-icon,
.yr-download-icon .yr-tile-icon { color: #6d28d9; }
.yr-download-primary .yr-download-icon .yr-tile-icon { color: #fff; }
.yr-rank-icon .yr-tile-icon { width: 1rem; height: 1rem; }
.yr-timeline-icon .yr-tile-icon { width: 1.5rem; height: 1.5rem; }
.yr-perk-icon { width: .9rem; height: .9rem; color: #f59e0b; flex-shrink: 0; vertical-align: -1px; margin-right: .3rem; }

/* ---------- Buttons ---------- */
.yr-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .85rem 1.6rem; border-radius: 999px; border: none; cursor: pointer;
	font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
}
.yr-btn-sm { padding: .55rem 1.1rem; font-size: .875rem; }
.yr-btn-lg { padding: 1rem 1.9rem; font-size: 1.1rem; }
.yr-icon { width: 1.1em; height: 1.1em; }

.yr-btn-magic { color: #fff; background: var(--yr-grad-magic); box-shadow: var(--yr-shadow-magic); }
.yr-btn-magic:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }

.yr-btn-gold { color: #7c2d12; background: var(--yr-grad-gold); box-shadow: 0 10px 30px -8px rgba(245,158,11,.55); }
.yr-btn-gold:hover { transform: translateY(-2px) scale(1.03); }

.yr-btn-ghost {
	color: #6d28d9; background: rgba(255,255,255,.55); border: 1px solid rgba(168,85,247,.25);
}
.yr-btn-ghost:hover { background: rgba(255,255,255,.85); transform: translateY(-2px); }

/* on the dark hero, ghost buttons need to read white */
.yr-hero .yr-btn-ghost { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.yr-hero .yr-btn-ghost:hover { background: rgba(255,255,255,.28); }

/* ---------- Glass / cards ---------- */
.yr-glass {
	background: rgba(255,255,255,.4); backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255,255,255,.55);
}
.yr-card {
	position: relative; border-radius: 1.5rem;
	background: rgba(255,255,255,.55); backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(255,255,255,.6);
	box-shadow: var(--yr-shadow-card), inset 0 1px 0 rgba(255,255,255,.6);
	transition: transform .35s ease, box-shadow .35s ease;
}
.yr-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -12px rgba(168,85,247,.45); }

/* ---------- Layout helpers ---------- */
.yr-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.yr-section { position: relative; padding: 3.5rem 0; z-index: 1; }
.yr-section-head { margin-bottom: 3rem; }
.yr-section-head-center { text-align: center; }
.yr-section-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.yr-grid { display: grid; gap: 1.5rem; }
.yr-grid-3 { grid-template-columns: repeat(3, 1fr); }
.yr-grid-4 { grid-template-columns: repeat(4, 1fr); }
.yr-grid-align-top { align-items: flex-start; }
@media (max-width: 960px) { .yr-grid-3, .yr-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .yr-grid-3, .yr-grid-4 { grid-template-columns: 1fr; } }
.yr-empty { color: var(--yr-ink-60); text-align: center; padding: 2rem; }
.yr-pill { font-size: .75rem; font-weight: 700; color: #6d28d9; background: rgba(255,255,255,.7); padding: .25rem .6rem; border-radius: 999px; }
.yr-read-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-family: 'Fredoka', sans-serif; font-weight: 600; color: #0284c7; }
.yr-read-more:hover { color: #a855f7; }

/* ---------- Gradient swatches (feature icons, socials, etc.) ---------- */
.yr-grad-sky { background: linear-gradient(135deg, #7dd3fc, #3b82f6); }
.yr-grad-gold { background: var(--yr-grad-gold); }
.yr-grad-pink { background: linear-gradient(135deg, #f472b6, #e11d48); }
.yr-grad-magic { background: linear-gradient(135deg, #c084fc, #d946ef); }
.yr-grad-sunset { background: linear-gradient(135deg, #f87171, #ea580c); }
.yr-grad-leaf { background: linear-gradient(135deg, #6ee7b7, #10b981); }

/* ---------- Navbar ---------- */
.yr-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1rem 0; transition: padding .4s ease; }
.yr-navbar.is-scrolled { padding: .5rem 0; }
.yr-navbar-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
.yr-navbar-pill {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .6rem 1rem; border-radius: 999px;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px);
	transition: all .4s ease;
}
.yr-navbar.is-scrolled .yr-navbar-pill {
	background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.6);
	box-shadow: 0 10px 40px -10px rgba(168,85,247,.35);
}
.yr-logo { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Fredoka', sans-serif; font-weight: 700; }
.yr-logo-spark { width: 1.3em; height: 1.3em; color: #fbbf24; animation: yr-spin-slow 7s linear infinite; transform-origin: 50% 50%; }
@keyframes yr-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.yr-logo-sm { font-size: 1.4rem; }
.yr-logo-md { font-size: 1.9rem; }
.yr-nav-links { display: none; align-items: center; gap: .25rem; }
.yr-nav-links li a {
	display: block; padding: .55rem .9rem; border-radius: 999px; font-family: 'Fredoka', sans-serif;
	font-weight: 500; font-size: .9rem; color: #fff; transition: all .2s ease;
}
.yr-navbar.is-scrolled .yr-nav-links li a { color: #4c1d95; }
.yr-nav-links li a:hover { background: rgba(255,255,255,.2); }
.yr-navbar.is-scrolled .yr-nav-links li a:hover { background: rgba(255,255,255,.6); }
.yr-nav-cta { display: none; }
.yr-nav-toggle {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: none; cursor: pointer;
	background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
	-webkit-appearance: none; appearance: none; padding: 0; margin: 0; position: relative; z-index: 2;
}
.yr-navbar.is-scrolled .yr-nav-toggle { background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.25); }
.yr-nav-toggle span {
	display: block; height: 2px; width: 18px; background: #fff; border-radius: 2px;
	transition: all .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.yr-navbar.is-scrolled .yr-nav-toggle span { background: #4c1d95; box-shadow: none; }
.yr-nav-mobile { display: none; margin-top: .5rem; border-radius: 1.5rem; padding: 1rem; }
.yr-nav-mobile.is-open { display: block; }
.yr-nav-mobile ul li a { display: block; padding: .75rem 1rem; border-radius: 1rem; font-family: 'Fredoka', sans-serif; font-weight: 500; color: #4c1d95; }
.yr-nav-mobile ul li a:hover { background: rgba(255,255,255,.5); }
.yr-nav-mobile { background: rgba(255,255,255,.85); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); }

@media (min-width: 1024px) {
	.yr-nav-links { display: flex; }
	.yr-nav-cta { display: block; }
	.yr-nav-toggle { display: none; }
	.yr-nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.yr-main { position: relative; }
.yr-hero {
	position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
	overflow: hidden; padding-top: 6rem; color: #fff; text-align: center;
}
.yr-hero-bg { position: absolute; inset: 0; }
.yr-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }

/* Mouse-parallax wrappers (js/yourro.js sets their transform on mousemove).
   Kept as separate inner elements so they never fight the CSS entrance
   keyframes running on their parent (.yr-hero-badge / .yr-hero-title). */
.yr-parallax { display: inline-flex; will-change: transform; }
.yr-parallax-block { display: inline-block; }
.yr-hero-bg-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(76,29,149,.35), rgba(76,29,149,.2), rgba(252,231,243,.6)); }
.yr-hero-bg-bottom { position: absolute; inset: 0; background: linear-gradient(to top, #ffe4f0, transparent 60%); }
.yr-hero-rays {
	position: absolute; inset: 0; mix-blend-mode: screen; opacity: .6; pointer-events: none;
	background: conic-gradient(from 210deg at 70% 20%, transparent 0deg, rgba(255,255,255,.35) 30deg, transparent 60deg, transparent 360deg);
}
.yr-hero-content { position: relative; z-index: 2; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

@keyframes yr-hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.yr-hero-badge, .yr-hero-title, .yr-hero-tagline, .yr-hero-sub, .yr-hero-actions, .yr-scroll-cue {
	opacity: 0; animation: yr-hero-in .8s cubic-bezier(.22,1,.36,1) forwards;
}
.yr-hero-badge   { animation-delay: .05s; }
.yr-hero-title   { animation-delay: .18s; }
.yr-hero-tagline { animation-delay: .32s; }
.yr-hero-sub     { animation-delay: .46s; }
.yr-hero-actions { animation-delay: .6s; }
.yr-scroll-cue   { animation-delay: 1.1s; }

.yr-hero-badge {
	display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; margin-bottom: 2rem;
	border-radius: 999px; background: rgba(255,255,255,.4); backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.55); color: #3b0764; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: .875rem;
}
.yr-ping { position: relative; display: inline-flex; width: 8px; height: 8px; }
.yr-ping span:first-child { position: absolute; inset: 0; border-radius: 999px; background: #4ade80; opacity: .75; animation: yr-ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.yr-ping span:last-child { position: relative; display: block; width: 8px; height: 8px; border-radius: 999px; background: #4ade80; }
@keyframes yr-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

.yr-hero-title { font-size: clamp(3.5rem, 12vw, 8rem); font-weight: 700; line-height: 1; }
.yr-hero-tagline { margin-top: 1.5rem; font-family: 'Fredoka', sans-serif; font-size: clamp(1.5rem, 4vw, 2.5rem); text-shadow: 0 2px 10px rgba(76,29,149,.6); }
.yr-hero-sub { margin: 1rem auto 0; max-width: 34rem; color: rgba(255,255,255,.9); font-size: 1.1rem; }
.yr-hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }

.yr-scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); }
.yr-scroll-cue span { font-family: 'Fredoka', sans-serif; font-size: .85rem; }
.yr-scroll-cue-pill { width: 24px; height: 40px; border-radius: 999px; border: 2px solid rgba(255,255,255,.6); display: flex; justify-content: center; padding-top: 8px; }
.yr-scroll-cue-pill div { width: 4px; height: 8px; border-radius: 999px; background: #fff; animation: yr-float-soft 2s ease-in-out infinite; }

@keyframes yr-float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- News ---------- */
.yr-news-card { overflow: hidden; display: flex; flex-direction: column; }
.yr-news-thumb { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.yr-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.yr-news-card:hover .yr-news-thumb img { transform: scale(1.08); }
.yr-news-tag { position: absolute; top: 1rem; left: 1rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255,255,255,.85); color: #6d28d9; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .75rem; }
.yr-news-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.yr-news-date { font-size: .8rem; color: rgba(36,26,61,.75); font-weight: 600; margin: 0; }
.yr-news-body h3 { margin-top: .5rem; font-size: 1.2rem; font-weight: 600; line-height: 1.35; }
.yr-news-excerpt { margin-top: .5rem; font-size: .9rem; color: var(--yr-ink-70); flex: 1; }

/* ---------- Features ---------- */
.yr-feature-card { padding: 1.75rem 1.25rem; text-align: center; }
.yr-feature-icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 1.1rem; box-shadow: 0 10px 30px -8px rgba(168,85,247,.5); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.yr-feature-card:hover .yr-feature-icon { transform: scale(1.12) rotate(-4deg); }
.yr-feature-card h3 { font-size: 1.05rem; font-weight: 700; }
.yr-feature-card p { margin-top: .5rem; font-size: .9rem; color: var(--yr-ink-70); }

/* ---------- Stats ---------- */
.yr-stats-card { padding: 2.5rem 2rem; overflow: hidden; }
.yr-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; text-align: center; }
@media (min-width: 640px) { .yr-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .yr-stats-grid { grid-template-columns: repeat(6, 1fr); } }
.yr-stat-value { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; overflow-wrap: anywhere; }
.yr-stat-label { margin-top: .35rem; font-size: .8rem; color: var(--yr-ink-70); font-weight: 600; }

/* ---------- Server status (Login / Char / Map) ---------- */
.yr-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .yr-status-grid { grid-template-columns: 1fr; } }
.yr-status-card { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.4rem; }
.yr-status-label { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .95rem; }
.yr-status-text { font-size: .8rem; font-weight: 700; margin-top: .1rem; }
.yr-status-dot { position: relative; flex-shrink: 0; width: .85rem; height: .85rem; border-radius: 999px; }
.yr-status-up .yr-status-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.yr-status-up .yr-status-dot::before {
	content: ''; position: absolute; inset: 0; border-radius: 999px; background: #22c55e;
	animation: yr-status-pulse 1.8s ease-out infinite;
}
.yr-status-up .yr-status-text { color: #16a34a; }
.yr-status-down .yr-status-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
.yr-status-down .yr-status-text { color: #dc2626; }
.yr-status-unknown .yr-status-dot { background: #a3a3a3; box-shadow: 0 0 0 4px rgba(163,163,163,.15); }
.yr-status-unknown .yr-status-text { color: #737373; }
@keyframes yr-status-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- Rankings ---------- */
.yr-rank-card { display: flex; flex-direction: column; padding: 1.75rem; }
.yr-rank-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.yr-rank-card > p.yr-lead { flex: 1; }
.yr-rank-card > .yr-read-more, .yr-rank-card > .yr-btn { margin-top: auto; align-self: flex-start; }
.yr-rank-icon { width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; }
.yr-rank-list { display: flex; flex-direction: column; flex: 1; }
.yr-rank-list li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid rgba(168,85,247,.12); }
.yr-rank-list li:first-child { border-top: none; }
.yr-rank-badge { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: .85rem; background: #ede9fe; color: #6d28d9; }
.yr-rank-1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #fff; }
.yr-rank-2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.yr-rank-3 { background: linear-gradient(135deg, #fdba74, #f97316); color: #fff; }
.yr-rank-info { flex: 1; min-width: 0; }
.yr-rank-name { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yr-rank-meta { display: block; font-size: .75rem; color: var(--yr-ink-60); }
.yr-rank-lvl { font-family: 'Fredoka', sans-serif; font-weight: 700; color: #0284c7; font-size: .9rem; }

.yr-rank-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.5rem 0; text-align: center; color: var(--yr-ink-50); }
.yr-rank-empty svg { width: 2rem; height: 2rem; opacity: .5; }
.yr-rank-empty span { font-size: .85rem; }

/* ---------- Timeline ---------- */
.yr-timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; position: relative; }
@media (min-width: 768px) { .yr-timeline { grid-template-columns: repeat(5, 1fr); } }
.yr-timeline-card { padding: 1.25rem; text-align: center; }
.yr-timeline-icon { width: 3rem; height: 3rem; margin: 0 auto; border-radius: 1rem; background: linear-gradient(135deg, #7dd3fc, #a855f7); }
.yr-timeline-date { margin-top: .75rem; font-size: .75rem; font-family: 'Fredoka', sans-serif; font-weight: 700; color: #db2777; }
.yr-timeline-title { margin-top: .25rem; font-family: 'Fredoka', sans-serif; font-weight: 700; }
.yr-timeline-card p { margin-top: .25rem; font-size: .75rem; color: var(--yr-ink-70); }

/* ---------- Downloads ---------- */
.yr-download-card { padding: 1.75rem; display: flex; flex-direction: column; }
.yr-download-primary { background: linear-gradient(135deg, rgba(224,242,254,.7), rgba(243,232,255,.7)); }
.yr-download-icon { width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; background: rgba(255,255,255,.7); }
.yr-download-primary .yr-download-icon { background: linear-gradient(135deg, #0ea5e9, #7c3aed); }
.yr-download-card h3 { margin-top: 1rem; font-size: 1.2rem; font-weight: 700; }
.yr-download-card p { margin-top: .25rem; font-size: .9rem; color: var(--yr-ink-70); flex: 1; }
.yr-download-footer { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; }

/* ---------- Community ---------- */
.yr-social-card { padding: 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.yr-social-icon { width: 4rem; height: 4rem; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.25); }
.yr-social-card h3 { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; }
.yr-social-card p { margin-top: .25rem; font-size: .9rem; color: var(--yr-ink-70); }

/* ---------- Donate ---------- */
.yr-donate-card { position: relative; padding: 2.25rem 2rem; text-align: center; }
.yr-donate-popular { outline: 2px solid #c084fc; }
.yr-donate-badge { position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%); padding: .3rem .8rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #a855f7, #ec4899); animation: yr-badge-pulse 2.4s ease-in-out infinite; }
@keyframes yr-badge-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.08); } }
.yr-donate-icon { width: 4rem; height: 4rem; margin: 0 auto; border-radius: 1.1rem; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.yr-donate-card h3 { margin-top: 1rem; font-size: 1.4rem; font-weight: 700; }
.yr-donate-price { margin-top: .5rem; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2.6rem; background: linear-gradient(135deg, var(--yr-sky), var(--yr-magic)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yr-donate-coins { font-size: .85rem; color: var(--yr-ink-60); }
.yr-donate-perks { margin-top: 1.25rem; text-align: left; display: flex; flex-direction: column; gap: .6rem; }
.yr-donate-perks li { display: flex; align-items: center; font-size: .9rem; color: rgba(36,26,61,.85); }
.yr-donate-card .yr-btn { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.yr-footer { position: relative; padding: 4rem 0 2rem; z-index: 1; }
.yr-footer-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.yr-footer-card { border-radius: 1.5rem; background: rgba(255,255,255,.55); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); padding: 2.5rem; }
.yr-footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) { .yr-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.yr-footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .yr-footer-brand { grid-column: span 2; } }
.yr-footer-desc { margin-top: 1rem; font-size: .9rem; color: var(--yr-ink-70); max-width: 28rem; }
.yr-footer-socials { margin-top: 1rem; display: flex; gap: .5rem; }
.yr-social { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.yr-social svg { width: 1rem; height: 1rem; }
.yr-social-discord { background: linear-gradient(135deg, #818cf8, #a855f7); }
.yr-social-facebook { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.yr-social-youtube { background: linear-gradient(135deg, #f87171, #e11d48); }
.yr-social-instagram { background: linear-gradient(135deg, #f472b6, #d946ef); }
.yr-footer-col h4 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.yr-footer-col ul { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; color: var(--yr-ink-70); }
.yr-footer-col ul a:hover { color: #7c3aed; }
.yr-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(168,85,247,.2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; color: var(--yr-ink-60); }
.yr-heart { color: #ec4899; }

.yr-scroll-top {
	position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 999px;
	border: none; cursor: pointer; color: #fff; background: var(--yr-grad-magic); box-shadow: var(--yr-shadow-magic);
	display: none; align-items: center; justify-content: center; transition: transform .2s ease;
}
.yr-scroll-top.is-visible { display: flex; }
.yr-scroll-top:hover { transform: translateY(-3px); }
.yr-scroll-top svg { width: 1.3rem; height: 1.3rem; }

/* ============================================================
   Compatibility styling for inherited "default" theme module
   pages (account, donate, ranking, servicedesk, character, ...)
   so they visually match while we haven't restyled every view.
   ============================================================ */
.yr-page-wrap { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto; padding: 7.5rem 1.5rem 5rem; }
.yr-page-card {
	border-radius: 1.5rem; background: rgba(255,255,255,.7); backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,.7); box-shadow: var(--yr-shadow-card);
	padding: 2rem; overflow-x: auto;
}
.yr-page-card h1, .yr-page-card h2, .yr-page-card h3 { color: var(--yr-ink); margin-bottom: .75rem; }
.yr-page-card p { line-height: 1.6; }
.yr-page-card a { color: #7c3aed; font-weight: 600; }
.yr-page-card a:hover { text-decoration: underline; }

.yr-message, .message { background: #dcfce7; color: #166534; border-radius: .9rem; padding: .9rem 1.2rem; margin-bottom: 1.25rem; font-weight: 600; }
.yr-notice, .notice { background: #fef3c7; color: #92400e; border-radius: .9rem; padding: .9rem 1.2rem; margin-bottom: 1.25rem; font-weight: 600; }

/* Generic / horizontal data tables (rankings, logs, lists, ...) */
.yr-page-card table {
	width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
	border: 1px solid rgba(168,85,247,.18); border-radius: .9rem; overflow: hidden;
	font-size: .875rem;
}
.yr-page-card th, .yr-page-card td {
	padding: .65rem .85rem; text-align: left; border-bottom: 1px solid rgba(168,85,247,.12);
}
.yr-page-card th {
	font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .8rem;
	color: #4c1d95; background: rgba(168,85,247,.12); white-space: nowrap;
}
.yr-page-card tr:last-child td { border-bottom: none; }
.yr-page-card tbody tr:nth-child(even) td, .yr-page-card tr:nth-child(even) td { background: rgba(168,85,247,.04); }
.yr-page-card tr:hover td { background: rgba(168,85,247,.09); }
.yr-page-card tr.top-ranked td { background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.05)); font-weight: 700; }
.yr-page-card tr.empty-row td { color: var(--yr-ink-50); font-style: italic; }
.yr-page-card td img { vertical-align: middle; border-radius: .35rem; }

/* Key/value "vertical" tables (account view, character view, ...): the
   left <th> acts as a form label, not a column header, so it should not
   get the purple header treatment above. */
.yr-page-card table.vertical-table th {
	background: transparent; color: var(--yr-ink-70); font-weight: 600;
	width: 35%; white-space: normal; border-bottom: 1px solid rgba(168,85,247,.08);
}
.yr-page-card table.vertical-table td { border-bottom: 1px solid rgba(168,85,247,.08); }
.yr-page-card table.vertical-table tr:nth-child(even) td,
.yr-page-card table.vertical-table tr:nth-child(even) th { background: transparent; }

.yr-page-card input[type=text], .yr-page-card input[type=password], .yr-page-card input[type=email],
.yr-page-card select, .yr-page-card textarea {
	width: 100%; max-width: 22rem; padding: .6rem .8rem; border-radius: .8rem;
	border: 1px solid rgba(168,85,247,.3); background: #fff; font-family: inherit; font-size: .9rem;
}
.yr-page-card input[type=submit], .yr-page-card input[type=button], .yr-page-card .submit_button, .yr-page-card button[type=submit] {
	font-family: 'Fredoka', sans-serif; font-weight: 600; padding: .65rem 1.4rem; border-radius: 999px;
	border: none; color: #fff; background: var(--yr-grad-magic); cursor: pointer; margin-right: .5rem;
}
.yr-page-card input[type=button] { background: rgba(168,85,247,.12); color: #6d28d9; }
.yr-page-card form p { margin: 0 0 1rem; }
.yr-page-card label { display: inline-block; min-width: 9rem; font-weight: 600; color: var(--yr-ink-70); }

#pagemenu, #submenu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
#pagemenu a, #submenu a { padding: .5rem 1rem; border-radius: 999px; background: rgba(168,85,247,.1); color: #6d28d9; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; }
#pagemenu a:hover, #submenu a:hover { background: rgba(168,85,247,.2); }

.pages { display: flex; gap: .4rem; margin-top: 1rem; }
.pages a, .pages .current-page { padding: .4rem .8rem; border-radius: 999px; background: rgba(168,85,247,.1); font-weight: 600; }

/* ---------- Old Sakray Ragnarok logo (replaces "YourRO" text) ---------- */
.yr-logo-img { gap: 0; line-height: 0; }
.yr-logo-image { display: block; height: 1.8rem; width: auto; margin: -.35rem 0; filter: drop-shadow(0 3px 8px rgba(30,20,80,.35)); transition: transform .3s ease; }
.yr-logo-img:hover .yr-logo-image { transform: scale(1.06); }
.yr-logo-image-lg { height: 4.5rem; margin: -.25rem 0 0; }
.yr-hero-title { line-height: 0; }
.yr-hero-logo { display: block; margin: 0 auto; width: clamp(15rem, 36vw, 27rem); height: auto; filter: drop-shadow(0 12px 30px rgba(20,10,70,.45)); }
.yr-design-by a { color: #7c3aed; font-weight: 600; }
.yr-design-by a:hover { text-decoration: underline; }