/* ============================================================
   RAGNAROK FINN-CLASSIC — Premium Redesign
   Design System: Dark Fantasy MMORPG · Glass · Gold Accents
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Kanit:wght@200;300;400;500;600;700;800&family=Orbitron:wght@500;600;700;800;900&display=swap');

/* ---------- Tokens ---------- */
:root{
	--bg-0:#05070d;
	--bg-1:#0a0e1a;
	--bg-2:#0f1522;
	--panel:rgba(15,21,34,.72);
	--panel-strong:rgba(20,28,46,.92);
	--border:rgba(255,210,128,.18);
	--border-strong:rgba(255,210,128,.45);
	--text:#e8ecf5;
	--text-dim:#9aa3b8;
	--muted:#6b7490;
	--gold-1:#f6c15e;
	--gold-2:#ffdf8a;
	--gold-3:#b5861f;
	--accent:#ffd36b;
	--accent-2:#5fb0ff;
	--danger:#ff5b6b;
	--success:#4ade80;
	--shadow-lg:0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);
	--shadow-gold:0 10px 40px rgba(246,193,94,.18);
	--radius-sm:8px;
	--radius:14px;
	--radius-lg:22px;
	--nav-h:78px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	font-family:'Kanit','Noto Sans Thai',system-ui,sans-serif;
	color:var(--text);
	background:var(--bg-0);
	line-height:1.6;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	min-height:100vh;
	/* Disable text selection & drag globally */
	-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
	-webkit-touch-callout:none;
}
img,a,.chibi,.mob{
	-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;
	-webkit-touch-callout:none;
}
/* Re-enable selection/typing in form fields */
input,textarea,[contenteditable="true"]{
	-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
}
a{color:inherit;text-decoration:none;transition:color .25s ease}
a:hover{color:var(--gold-2)}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--gold-1);color:#1a1300}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#060912}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-3),#5a3f00);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold-1),var(--gold-3))}

/* ============================================================
   BACKGROUND · Video + Particles + Gradient Aurora
   ============================================================ */
.bg-video-wrap{
	position:fixed;inset:0;z-index:-3;overflow:hidden;background:#000;
}
.bg-video-wrap video{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:.35;
	filter:saturate(1.15) contrast(1.05) brightness(.65);
}
.bg-overlay{
	position:fixed;inset:0;z-index:-2;pointer-events:none;
	background:
		radial-gradient(1200px 700px at 15% 10%,rgba(95,176,255,.12),transparent 60%),
		radial-gradient(1000px 700px at 85% 90%,rgba(246,193,94,.14),transparent 60%),
		radial-gradient(800px 600px at 50% 50%,rgba(120,80,255,.10),transparent 60%),
		linear-gradient(180deg,rgba(5,7,13,.75) 0%,rgba(5,7,13,.88) 50%,rgba(5,7,13,.96) 100%);
}
.bg-grid{
	position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
	background-image:
		linear-gradient(rgba(255,210,128,.05) 1px,transparent 1px),
		linear-gradient(90deg,rgba(255,210,128,.05) 1px,transparent 1px);
	background-size:64px 64px;
	mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
#particles-js{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Floating orbs */
.orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{
	position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;
	animation:orb-float 18s ease-in-out infinite;
}
.orb.o1{width:400px;height:400px;background:#5fb0ff;top:-100px;left:-100px}
.orb.o2{width:500px;height:500px;background:#f6c15e;top:40%;right:-150px;animation-duration:24s}
.orb.o3{width:350px;height:350px;background:#9d5fff;bottom:-100px;left:30%;animation-duration:20s}
@keyframes orb-float{
	0%,100%{transform:translate(0,0) scale(1)}
	50%{transform:translate(40px,-30px) scale(1.12)}
}

/* ============================================================
   NAVBAR · Glass
   ============================================================ */
.site-nav{
	position:fixed;top:14px;left:50%;transform:translateX(-50%);
	z-index:100;width:min(1320px,calc(100vw - 28px));
	padding:10px 22px;
	display:flex;align-items:center;gap:24px;
	background:linear-gradient(180deg,rgba(20,28,46,.85),rgba(10,14,26,.72));
	border:1px solid var(--border);
	border-radius:20px;
	backdrop-filter:blur(20px) saturate(180%);
	-webkit-backdrop-filter:blur(20px) saturate(180%);
	box-shadow:var(--shadow-lg);
	transition:all .35s ease;
}
.site-nav.scrolled{padding:8px 22px;background:rgba(8,11,20,.92)}
.nav-brand{display:flex;align-items:center;gap:12px;min-width:0}
.nav-brand .logo-mark{
	width:44px;height:44px;border-radius:12px;
	background:
		radial-gradient(circle at 30% 30%,#fff2c4,var(--gold-1) 40%,#8c5a00 80%);
	box-shadow:0 0 24px rgba(246,193,94,.55),inset 0 -4px 12px rgba(0,0,0,.4);
	display:grid;place-items:center;color:#1a1300;font-family:'Cinzel',serif;
	font-weight:900;font-size:22px;
}
.nav-brand .brand-text{display:flex;flex-direction:column;line-height:1}
.nav-brand .brand-title{
	font-family:'Cinzel',serif;font-weight:800;font-size:18px;letter-spacing:2px;
	background:linear-gradient(180deg,#fff6d6,var(--gold-1));
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-brand .brand-sub{font-size:11px;color:var(--text-dim);letter-spacing:3px;margin-top:4px}
.nav-menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-item{
	position:relative;padding:10px 16px;border-radius:10px;
	font-weight:500;font-size:14px;color:var(--text-dim);
	display:inline-flex;align-items:center;gap:8px;
	transition:all .25s ease;
}
.nav-item i{font-size:14px}
.nav-item:hover{color:var(--gold-2);background:rgba(246,193,94,.08)}
.nav-item.active{color:var(--gold-2);background:rgba(246,193,94,.12)}
.nav-item.active::after{
	content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;
	background:linear-gradient(90deg,transparent,var(--gold-1),transparent);
	border-radius:2px;
}
.nav-cta{
	margin-left:10px;padding:11px 22px;border-radius:12px;
	font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
	color:#1a1300;
	background:linear-gradient(135deg,var(--gold-2),var(--gold-1) 50%,var(--gold-3));
	box-shadow:0 10px 30px rgba(246,193,94,.35),inset 0 1px 0 rgba(255,255,255,.5);
	border:1px solid var(--gold-2);
	transition:all .3s ease;
	display:inline-flex;align-items:center;gap:8px;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(246,193,94,.5);color:#1a1300}

/* Language switcher */
.lang-switch{
	display:inline-flex;align-items:center;gap:2px;padding:3px;margin-left:10px;
	border-radius:999px;
	background:rgba(255,255,255,.04);
	border:1px solid var(--border);
	backdrop-filter:blur(10px);
}
.lang-opt{
	position:relative;padding:6px 12px;border-radius:999px;
	font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;
	letter-spacing:1.5px;color:var(--text-dim);cursor:pointer;
	background:transparent;border:0;
	display:inline-flex;align-items:center;gap:6px;
	transition:color .25s ease,background .25s ease,box-shadow .25s ease;
}
.lang-opt .flag{
	width:16px;height:12px;border-radius:2px;display:inline-block;
	background-size:cover;background-position:center;
	box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.lang-opt .flag.th{background:linear-gradient(180deg,#ED1C24 0 22%,#fff 22% 36%,#241D4F 36% 64%,#fff 64% 78%,#ED1C24 78% 100%)}
.lang-opt .flag.en{background:
	linear-gradient(180deg,#012169 0 16%,transparent 16% 48%,#012169 48% 52%,transparent 52% 84%,#012169 84% 100%),
	linear-gradient(90deg,#012169 0 16%,transparent 16% 48%,#C8102E 48% 52%,transparent 52% 84%,#012169 84% 100%),
	linear-gradient(45deg,transparent 46%,#C8102E 46% 54%,transparent 54%),
	linear-gradient(-45deg,transparent 46%,#C8102E 46% 54%,transparent 54%),
	#fff;
}
.lang-opt:hover{color:var(--gold-2)}
.lang-opt.active{
	color:#1a1300;
	background:linear-gradient(135deg,var(--gold-2),var(--gold-1) 50%,var(--gold-3));
	box-shadow:0 4px 14px rgba(246,193,94,.35),inset 0 1px 0 rgba(255,255,255,.4);
}

/* mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:0;color:var(--gold-2);font-size:22px;cursor:pointer;padding:8px}

@media (max-width:1100px){
	.nav-menu{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
		flex-direction:column;align-items:stretch;padding:14px;gap:4px;
		background:rgba(10,14,26,.97);border:1px solid var(--border);border-radius:18px;
		backdrop-filter:blur(18px);}
	.site-nav.open .nav-menu{display:flex}
	.nav-item{padding:14px 16px}
	.nav-cta{margin:6px 0 2px;justify-content:center}
	.nav-toggle{display:inline-grid;place-items:center;margin-left:auto}
}

/* ============================================================
   HERO · Full-viewport cinematic
   ============================================================ */
.hero{
	position:relative;min-height:100vh;padding:calc(var(--nav-h) + 60px) 20px 100px;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
}
.hero-inner{position:relative;max-width:1280px;width:100%;text-align:center;z-index:2}
.hero-eyebrow{
	display:inline-flex;align-items:center;gap:10px;padding:8px 18px;
	border:1px solid var(--border-strong);border-radius:999px;
	background:rgba(246,193,94,.08);
	font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-2);
	backdrop-filter:blur(10px);
	animation:fadeInUp .8s ease both;
}
.hero-eyebrow .dot{width:8px;height:8px;background:var(--success);border-radius:50%;
	box-shadow:0 0 12px var(--success);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-title{
	font-family:'Cinzel',serif;font-weight:900;
	font-size:clamp(44px,7.5vw,110px);line-height:1.05;letter-spacing:1px;
	margin:26px 0 14px;
	background:linear-gradient(180deg,#ffffff 0%,#fff4c2 35%,var(--gold-2) 70%,#e8a43a 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	-webkit-text-fill-color:transparent;
	filter:drop-shadow(0 2px 0 rgba(120,60,0,.55)) drop-shadow(0 6px 24px rgba(246,193,94,.55));
	animation:fadeInUp 1s ease .1s both,title-glow 4s ease-in-out infinite;
	position:relative;
}
@keyframes title-glow{
	0%,100%{filter:drop-shadow(0 2px 0 rgba(120,60,0,.55)) drop-shadow(0 6px 24px rgba(246,193,94,.55))}
	50%{filter:drop-shadow(0 2px 0 rgba(120,60,0,.55)) drop-shadow(0 10px 38px rgba(255,220,140,.8))}
}
.hero-title .spark{
	display:inline-block;
	/* reset parent's transparent fill so the child text is actually drawn */
	background:none;
	-webkit-background-clip:initial;background-clip:initial;
	color:#ffe08a;
	-webkit-text-fill-color:#ffe08a;
	text-shadow:
		0 2px 0 rgba(120,60,0,.55),
		0 0 18px rgba(255,210,100,.75),
		0 0 38px rgba(255,180,60,.6);
	animation:shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer{
	0%,100%{color:#ffe08a;-webkit-text-fill-color:#ffe08a;text-shadow:0 2px 0 rgba(120,60,0,.55),0 0 18px rgba(255,210,100,.75),0 0 38px rgba(255,180,60,.6)}
	50%{color:#fff5c2;-webkit-text-fill-color:#fff5c2;text-shadow:0 2px 0 rgba(120,60,0,.55),0 0 26px rgba(255,240,180,1),0 0 54px rgba(255,200,80,.9)}
}
.hero-subtitle{
	font-size:clamp(16px,1.6vw,22px);color:var(--text-dim);
	max-width:720px;margin:0 auto 30px;line-height:1.7;
	animation:fadeInUp 1s ease .2s both;
}
.hero-tagline{
	font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:6px;text-transform:uppercase;
	color:var(--gold-2);margin-top:8px;opacity:.9;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px;
	animation:fadeInUp 1s ease .3s both;}
.btn{
	position:relative;display:inline-flex;align-items:center;gap:10px;
	padding:15px 32px;border-radius:14px;font-weight:600;font-size:15px;letter-spacing:1px;
	border:1px solid transparent;cursor:pointer;text-transform:uppercase;
	transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
	overflow:hidden;
}
.btn i{font-size:16px}
.btn-primary{
	color:#1a1300;
	background:linear-gradient(135deg,var(--gold-2),var(--gold-1) 50%,var(--gold-3));
	border-color:var(--gold-2);
	box-shadow:0 16px 40px rgba(246,193,94,.35),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{transform:translateY(-3px);color:#1a1300;box-shadow:0 20px 50px rgba(246,193,94,.5)}
.btn-ghost{
	color:var(--text);background:rgba(255,255,255,.05);
	border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px);
}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:var(--gold-2);color:var(--gold-2)}
.btn::after{
	content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
	transition:left .6s ease;
}
.btn:hover::after{left:100%}

/* Live stats */
.hero-stats{
	display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:56px auto 0;
	animation:fadeInUp 1s ease .4s both;
}
.stat{
	padding:22px 18px;border-radius:18px;
	background:var(--panel);border:1px solid var(--border);
	backdrop-filter:blur(14px);
	transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.stat:hover{transform:translateY(-4px);border-color:var(--gold-1);box-shadow:var(--shadow-gold)}
.stat-value{
	font-family:'Orbitron',sans-serif;font-size:clamp(22px,3vw,34px);font-weight:800;
	background:linear-gradient(180deg,#fff6d6,var(--gold-1));
	-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;
}
.stat-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-top:8px}
@media (max-width:640px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

.scroll-hint{
	position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:10px;
	font-size:11px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;z-index:2;
	animation:fadeInUp 1s ease .6s both;
}
.scroll-hint .mouse{
	width:24px;height:38px;border:1.5px solid var(--gold-2);border-radius:14px;position:relative;
}
.scroll-hint .mouse::after{
	content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
	width:3px;height:6px;background:var(--gold-2);border-radius:3px;
	animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}50%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}

/* ============================================================
   SECTIONS · Common
   ============================================================ */
.section{padding:100px 20px;position:relative}
.container{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.section-head{text-align:center;max-width:780px;margin:0 auto 56px}
.section-eyebrow{
	display:inline-block;font-family:'Orbitron',sans-serif;font-size:12px;
	letter-spacing:5px;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;
}
.section-eyebrow::before,.section-eyebrow::after{
	content:"";display:inline-block;width:24px;height:1px;background:var(--gold-1);
	vertical-align:middle;margin:0 12px;opacity:.6;
}
.section-title{
	font-family:'Cinzel',serif;font-weight:800;font-size:clamp(30px,4vw,52px);
	line-height:1.1;margin:0 0 16px;
	background:linear-gradient(180deg,#fff8dc,var(--gold-2) 60%,var(--gold-3));
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-subtitle{color:var(--text-dim);font-size:16px}

/* ============================================================
   FEATURE GRID · Why Play
   ============================================================ */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}}
.feature{
	position:relative;padding:34px 28px;border-radius:var(--radius-lg);
	background:linear-gradient(180deg,rgba(20,28,46,.85),rgba(10,14,26,.65));
	border:1px solid var(--border);overflow:hidden;
	transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.feature::before{
	content:"";position:absolute;inset:-1px;border-radius:inherit;
	background:linear-gradient(135deg,transparent 40%,rgba(246,193,94,.35) 80%,transparent);
	opacity:0;transition:opacity .4s ease;pointer-events:none;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
.feature:hover{transform:translateY(-6px);border-color:transparent;box-shadow:var(--shadow-gold)}
.feature:hover::before{opacity:1}
.feature-icon{
	width:64px;height:64px;border-radius:16px;
	background:linear-gradient(135deg,rgba(246,193,94,.2),rgba(246,193,94,.05));
	border:1px solid var(--border-strong);
	display:grid;place-items:center;font-size:26px;color:var(--gold-2);
	margin-bottom:22px;box-shadow:inset 0 0 20px rgba(246,193,94,.12);
}
.feature h3{
	font-family:'Cinzel',serif;font-size:22px;font-weight:700;margin:0 0 10px;
	color:var(--text);
}
.feature p{color:var(--text-dim);font-size:15px;line-height:1.7;margin:0}

/* ============================================================
   VIDEO SHOWCASE
   ============================================================ */
.video-showcase{
	position:relative;border-radius:var(--radius-lg);overflow:hidden;
	background:#000;border:1px solid var(--border-strong);
	box-shadow:var(--shadow-lg),0 0 80px rgba(246,193,94,.12);
	aspect-ratio:16/9;
}
.video-showcase iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame-glow{
	position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
	background:linear-gradient(135deg,var(--gold-1),var(--accent-2),var(--gold-1));
	filter:blur(20px);opacity:.35;animation:rotateGlow 10s linear infinite;
}
@keyframes rotateGlow{to{filter:blur(20px) hue-rotate(360deg)}}

/* ============================================================
   QUICK ACTIONS · Split with Video
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:24px;align-items:stretch}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
.action-col{display:flex;flex-direction:column;gap:16px}
.action-card{
	position:relative;padding:28px 26px;border-radius:var(--radius-lg);
	background:linear-gradient(135deg,rgba(20,28,46,.9),rgba(10,14,26,.75));
	border:1px solid var(--border);overflow:hidden;
	transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
	display:flex;align-items:center;gap:20px;flex:1;min-height:140px;
	color:inherit;
}
.action-card::after{
	content:"";position:absolute;top:0;right:-30%;width:60%;height:100%;
	background:radial-gradient(ellipse at center,rgba(246,193,94,.18),transparent 60%);
	opacity:0;transition:opacity .4s ease,right .4s ease;pointer-events:none;
}
.action-card:hover{transform:translateY(-4px);border-color:var(--gold-1);color:var(--text);
	box-shadow:var(--shadow-gold)}
.action-card:hover::after{opacity:1;right:-10%}
.action-icon{
	width:62px;height:62px;min-width:62px;border-radius:16px;
	background:linear-gradient(135deg,var(--gold-1),var(--gold-3));
	display:grid;place-items:center;color:#1a1300;font-size:26px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px rgba(246,193,94,.3);
}
.action-text{display:flex;flex-direction:column}
.action-text strong{
	font-family:'Cinzel',serif;font-size:19px;letter-spacing:.5px;color:var(--text);display:block;
}
.action-text span{font-size:13px;color:var(--text-dim);margin-top:3px}

/* ============================================================
   PANEL · generic content panel
   ============================================================ */
.panel{
	position:relative;padding:40px;border-radius:var(--radius-lg);
	background:linear-gradient(180deg,rgba(20,28,46,.92),rgba(10,14,26,.85));
	border:1px solid var(--border);
	box-shadow:var(--shadow-lg);
	backdrop-filter:blur(16px);
}
.panel-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:22px;
	border-bottom:1px solid var(--border)}
.panel-head .pi{
	width:52px;height:52px;min-width:52px;border-radius:14px;
	background:linear-gradient(135deg,var(--gold-1),var(--gold-3));
	display:grid;place-items:center;color:#1a1300;font-size:22px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.panel-head h2{
	font-family:'Cinzel',serif;font-weight:700;font-size:26px;margin:0;color:var(--text);
}
.panel-head p{margin:4px 0 0;font-size:13px;color:var(--text-dim)}
.panel-head .panel-meta{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-dim)}
.panel-head .panel-meta a{color:var(--accent-2)}

/* Breadcrumb */
.crumbs{
	display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
	background:rgba(255,255,255,.04);border:1px solid var(--border);
	font-size:13px;color:var(--text-dim);margin-bottom:26px;
}
.crumbs a{color:var(--text-dim)}
.crumbs a:hover{color:var(--gold-2)}
.crumbs .sep{opacity:.5}
.crumbs .current{color:var(--gold-2)}

/* ============================================================
   TABLE · download
   ============================================================ */
.dl-table{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:8px}
.dl-table thead th{
	text-align:left;padding:12px 16px;font-size:12px;letter-spacing:2px;text-transform:uppercase;
	color:var(--text-dim);font-weight:600;background:rgba(255,255,255,.02);
	border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.dl-table thead th:first-child{border-left:1px solid var(--border);border-top-left-radius:10px;border-bottom-left-radius:10px}
.dl-table thead th:last-child{border-right:1px solid var(--border);border-top-right-radius:10px;border-bottom-right-radius:10px}
.dl-table tbody tr{background:rgba(20,28,46,.55);transition:background .25s ease,transform .25s ease}
.dl-table tbody tr:hover{background:rgba(246,193,94,.08);transform:translateY(-1px)}
.dl-table tbody td{padding:16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.dl-table tbody td:first-child{border-left:1px solid var(--border);border-top-left-radius:12px;border-bottom-left-radius:12px;text-align:center;width:78px}
.dl-table tbody td:last-child{border-right:1px solid var(--border);border-top-right-radius:12px;border-bottom-right-radius:12px;text-align:center;width:140px}
.dl-type-icon{
	width:44px;height:44px;margin:0 auto;border-radius:12px;display:grid;place-items:center;
	background:linear-gradient(135deg,rgba(95,176,255,.2),rgba(95,176,255,.05));
	color:var(--accent-2);font-size:18px;border:1px solid rgba(95,176,255,.3);
}
.dl-type-icon.mobile{background:linear-gradient(135deg,rgba(74,222,128,.2),rgba(74,222,128,.05));color:var(--success);border-color:rgba(74,222,128,.3)}
.dl-btn{
	display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;
	background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1300;font-weight:700;
	font-size:13px;letter-spacing:1px;border:1px solid var(--gold-2);
	box-shadow:0 6px 16px rgba(246,193,94,.35),inset 0 1px 0 rgba(255,255,255,.4);
	transition:transform .25s ease,box-shadow .25s ease;
}
.dl-btn:hover{transform:translateY(-2px);color:#1a1300;box-shadow:0 10px 24px rgba(246,193,94,.5)}
.pill{
	display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;
	background:rgba(95,176,255,.12);color:var(--accent-2);border:1px solid rgba(95,176,255,.3);
}
.pill.gold{background:rgba(246,193,94,.12);color:var(--gold-2);border-color:rgba(246,193,94,.3)}
.pill.green{background:rgba(74,222,128,.12);color:var(--success);border-color:rgba(74,222,128,.3)}

/* Hint / message box */
.notice{
	margin-top:22px;padding:14px 18px;border-radius:12px;display:flex;align-items:center;gap:12px;
	background:rgba(255,91,107,.06);border:1px solid rgba(255,91,107,.28);color:#ffd6db;
}
.notice.info{background:rgba(95,176,255,.06);border-color:rgba(95,176,255,.28);color:#d6ecff}
.notice i{font-size:18px;color:inherit}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tag{
	padding:6px 14px;border-radius:999px;font-size:12px;color:var(--text-dim);
	background:rgba(255,255,255,.04);border:1px solid var(--border);
}
.tag:hover{color:var(--gold-2);border-color:var(--gold-1)}

/* ============================================================
   RULE / INFO BOX
   ============================================================ */
.info-box{
	padding:26px 28px;border-radius:18px;margin-top:24px;
	background:linear-gradient(135deg,rgba(74,222,128,.06),rgba(95,176,255,.04));
	border:1px solid rgba(74,222,128,.25);
}
.info-box h3{
	display:flex;align-items:center;gap:12px;font-family:'Cinzel',serif;font-weight:700;
	font-size:18px;margin:0 0 12px;color:var(--text);
}
.info-box h3 i{
	width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
	background:linear-gradient(135deg,rgba(74,222,128,.3),rgba(74,222,128,.1));
	color:var(--success);font-size:14px;
}
.info-box h3 small{font-size:12px;font-weight:400;color:var(--text-dim);margin-left:4px}
.info-box ul{list-style:none;padding:0;margin:14px 0 0}
.info-box ul li{
	position:relative;padding:10px 0 10px 30px;font-size:15px;color:var(--text);
	border-bottom:1px dashed rgba(255,255,255,.06);
}
.info-box ul li:last-child{border-bottom:0}
.info-box ul li::before{
	content:"";position:absolute;left:0;top:16px;width:14px;height:14px;border-radius:50%;
	background:radial-gradient(circle,var(--success) 0 5px,transparent 5px);
	box-shadow:0 0 10px rgba(74,222,128,.5);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{
	margin-top:80px;padding:60px 20px 24px;position:relative;
	border-top:1px solid var(--border);
	background:linear-gradient(180deg,transparent,rgba(5,7,13,.8));
}
.foot-grid{
	max-width:1280px;margin:0 auto;display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .logo-mark{margin-bottom:16px}
.foot-col h4{
	font-family:'Cinzel',serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;
	color:var(--gold-2);margin:0 0 16px;
}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col ul li{margin-bottom:10px}
.foot-col ul li a{font-size:14px;color:var(--text-dim)}
.foot-col ul li a:hover{color:var(--gold-2)}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
	width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
	background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);
	transition:all .25s ease;
}
.foot-social a:hover{background:rgba(246,193,94,.15);border-color:var(--gold-1);color:var(--gold-2);transform:translateY(-2px)}
.foot-bottom{
	max-width:1280px;margin:40px auto 0;padding-top:24px;
	border-top:1px solid var(--border);
	display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
	font-size:13px;color:var(--text-dim);
}
.foot-bottom a{color:var(--gold-2)}

/* ============================================================
   RAGNAROK WORLD · Cartoon characters, chibi, monsters
   ============================================================ */

/* Chibi characters in the hero */
.hero-chars{
	position:absolute;inset:0;pointer-events:none;z-index:1;
	max-width:1400px;left:50%;transform:translateX(-50%);
}
.chibi{
	position:absolute;bottom:90px;pointer-events:auto;
	filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(246,193,94,.35));
	animation:chibi-float 5.5s ease-in-out infinite;
	transition:transform .3s ease;
}
.chibi img{width:100%;height:auto;display:block;image-rendering:auto}
.chibi.left{left:2%;width:clamp(160px,16vw,260px);animation-delay:0s}
.chibi.right{right:2%;width:clamp(160px,16vw,260px);animation-delay:-2.5s}
.chibi:hover{transform:scale(1.05) translateY(-6px)}
@keyframes chibi-float{
	0%,100%{transform:translateY(0) rotate(-1deg)}
	50%{transform:translateY(-22px) rotate(1deg)}
}
@media (max-width:1100px){
	.chibi.left,.chibi.right{width:130px;bottom:40px;opacity:.85}
}
@media (max-width:760px){.chibi{display:none}}

/* Floating monsters background decoration */
.mob-floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.mob{
	position:absolute;image-rendering:pixelated;
	filter:drop-shadow(0 8px 14px rgba(0,0,0,.55));
	animation:mob-hop 3.6s ease-in-out infinite;
	opacity:.92;
}
.mob.m1{left:8%;top:22%;width:58px;animation-delay:-.2s}
.mob.m2{right:10%;top:18%;width:64px;animation-delay:-1.4s}
.mob.m3{left:18%;top:62%;width:70px;animation-delay:-.8s}
.mob.m4{right:22%;top:65%;width:60px;animation-delay:-2.1s}
.mob.m5{left:46%;top:12%;width:48px;animation-delay:-1.1s}
.mob.m-mirror{transform:scaleX(-1)}
@keyframes mob-hop{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-14px)}
}
.mob.m-mirror{animation-name:mob-hop-mirror}
@keyframes mob-hop-mirror{
	0%,100%{transform:translateY(0) scaleX(-1)}
	50%{transform:translateY(-14px) scaleX(-1)}
}

/* ============================================================
   Ragnarok Finn logo · animated stage
   ============================================================ */
.ro-logo-stage{
	position:relative;display:block;margin:0 auto 18px;
	width:clamp(300px,40vw,520px);
	aspect-ratio:1/1;
	isolation:isolate;
}
/* pulsing golden aura behind the logo */
.ro-logo-stage::before{
	content:"";position:absolute;left:50%;top:55%;
	width:90%;height:60%;transform:translate(-50%,-50%);
	border-radius:50%;z-index:0;pointer-events:none;
	background:radial-gradient(ellipse at center,
		rgba(255,220,140,.55) 0%,
		rgba(246,193,94,.25) 35%,
		transparent 70%);
	filter:blur(28px);
	animation:ro-aura 3.6s ease-in-out infinite;
}
/* twinkling stars around the logo */
.ro-logo-stage::after{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:
		radial-gradient(circle,#fff 0 2px,transparent 3px),
		radial-gradient(circle,#fff6c8 0 1.6px,transparent 2.4px),
		radial-gradient(circle,#fff 0 1.4px,transparent 2px),
		radial-gradient(circle,#ffe2a0 0 1.8px,transparent 2.6px),
		radial-gradient(circle,#fff 0 1.2px,transparent 1.8px);
	background-repeat:no-repeat;
	background-position:10% 18%, 82% 14%, 72% 78%, 18% 70%, 50% 8%;
	animation:ro-twinkle 1.8s ease-in-out infinite alternate;
}

.ro-logo{
	position:relative;z-index:2;
	display:block;width:100%;height:100%;object-fit:contain;
	transform-origin:50% 60%;
	filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,215,120,.55));
	animation:ro-float 4.5s ease-in-out infinite,ro-glow 3s ease-in-out infinite;
	will-change:transform,filter;
}

/* Shine sweep clipped to the logo shape (no rectangle edges) */
.ro-logo-stage .shine{
	position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
	/* Clip the entire shine layer to the shape of the logo image */
	-webkit-mask:url('../../images/logo.png') center/contain no-repeat;
	        mask:url('../../images/logo.png') center/contain no-repeat;
}
.ro-logo-stage .shine::before{
	content:"";position:absolute;top:-10%;left:-40%;width:35%;height:120%;
	background:linear-gradient(110deg,
		transparent 0%,
		rgba(255,245,200,.0) 30%,
		rgba(255,245,200,.55) 48%,
		rgba(255,255,255,.95) 52%,
		rgba(255,245,200,.55) 56%,
		rgba(255,245,200,.0) 70%,
		transparent 100%);
	filter:blur(4px);
	transform:skewX(-18deg);
	animation:ro-shine 4s ease-in-out infinite;
}
/* Soft round spark that travels across the logo (fallback-friendly) */
.ro-logo-stage .spark-orb{
	position:absolute;top:40%;left:-20%;width:40%;height:40%;
	z-index:2;pointer-events:none;
	background:radial-gradient(circle,rgba(255,245,190,.45) 0%,rgba(255,220,120,.2) 30%,transparent 65%);
	filter:blur(14px);
	animation:ro-spark 5s ease-in-out infinite;
}
@keyframes ro-spark{
	0%,10%{left:-20%;top:60%;opacity:0}
	20%{opacity:1}
	50%{left:60%;top:20%;opacity:1}
	80%{opacity:.6}
	90%,100%{left:110%;top:50%;opacity:0}
}

@keyframes ro-float{
	0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}
	25%{transform:translateY(-10px) rotate(0) scale(1.015)}
	50%{transform:translateY(-16px) rotate(2deg) scale(1.02)}
	75%{transform:translateY(-10px) rotate(0) scale(1.015)}
}
@keyframes ro-glow{
	0%,100%{filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,215,120,.55))}
	50%{filter:drop-shadow(0 26px 40px rgba(0,0,0,.55)) drop-shadow(0 0 42px rgba(255,230,160,.95))}
}
@keyframes ro-aura{
	0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.95)}
	50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes ro-twinkle{
	0%{opacity:.35;transform:scale(.9) rotate(0)}
	100%{opacity:1;transform:scale(1.05) rotate(6deg)}
}
@keyframes ro-shine{
	0%,15%{left:-60%}
	55%,100%{left:120%}
}

/* Plain <img class="ro-logo"> without stage (legacy fallback) */
.hero-inner > img.ro-logo{
	display:block;margin:0 auto 18px;width:auto;height:auto;
	max-width:clamp(280px,36vw,480px);aspect-ratio:auto;
	animation:ro-float 4.5s ease-in-out infinite,ro-glow 3s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
	.ro-logo,.ro-logo-stage::before,.ro-logo-stage::after,.ro-logo-stage .shine::before{animation:none}
}

/* Monster parade showcase */
.mob-parade{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;
	margin-top:36px;
}
.mob-card{
	position:relative;padding:22px 14px 18px;text-align:center;
	border-radius:18px;overflow:hidden;
	background:linear-gradient(180deg,rgba(20,28,46,.85),rgba(10,14,26,.7));
	border:1px solid var(--border);
	transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.mob-card::before{
	content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
	background:radial-gradient(ellipse at center top,rgba(246,193,94,.2),transparent 65%);
	opacity:0;transition:opacity .4s ease;
}
.mob-card:hover{transform:translateY(-6px);border-color:var(--gold-1);box-shadow:var(--shadow-gold)}
.mob-card:hover::before{opacity:1}
.mob-card .sprite{
	width:96px;height:96px;margin:0 auto 10px;display:grid;place-items:center;
	background:radial-gradient(circle at 50% 80%,rgba(246,193,94,.22),transparent 60%);
	position:relative;
}
.mob-card .sprite img{
	max-width:100%;max-height:100%;image-rendering:pixelated;
	filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));
	animation:mob-hop 2.8s ease-in-out infinite;
}
.mob-card .sprite::after{
	content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
	width:58px;height:8px;border-radius:50%;
	background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%);
	animation:shadow-pulse 2.8s ease-in-out infinite;
}
@keyframes shadow-pulse{
	0%,100%{transform:translateX(-50%) scaleX(1);opacity:.5}
	50%{transform:translateX(-50%) scaleX(.7);opacity:.3}
}
.mob-card .name{
	font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text);
	letter-spacing:.5px;
}
.mob-card .rarity{
	display:block;font-size:10px;letter-spacing:3px;text-transform:uppercase;
	color:var(--gold-2);margin-top:4px;
}
.mob-card.mvp .rarity{color:#ff7070}
.mob-card.rare .rarity{color:#b078ff}

/* Item icons in features */
.feature-icon-ro{
	width:68px;height:68px;margin-bottom:22px;
	display:grid;place-items:center;border-radius:18px;
	background:linear-gradient(135deg,rgba(246,193,94,.22),rgba(246,193,94,.06));
	border:1px solid var(--border-strong);
	box-shadow:inset 0 0 20px rgba(246,193,94,.15);
	position:relative;
}
.feature-icon-ro img{
	width:40px;height:40px;image-rendering:pixelated;
	filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
	animation:mob-hop 2.4s ease-in-out infinite;
}
.feature-icon-ro::after{
	content:"";position:absolute;inset:-2px;border-radius:inherit;
	background:linear-gradient(135deg,var(--gold-1),transparent 60%,var(--accent-2));
	filter:blur(12px);opacity:.25;z-index:-1;
}

/* Coin bar (cash coin strip) */
.coin-strip{
	display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;
	border-radius:999px;background:rgba(246,193,94,.1);
	border:1px solid var(--border-strong);
	font-size:13px;color:var(--gold-2);font-weight:600;
}
.coin-strip img{width:24px;height:24px;image-rendering:pixelated;animation:mob-hop 2s ease-in-out infinite}

/* Pixel-style tag */
.pixel-tag{
	display:inline-flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;
	font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-2);
	padding:6px 14px;border-radius:8px;
	background:linear-gradient(135deg,rgba(246,193,94,.14),rgba(246,193,94,.04));
	border:1px solid var(--border-strong);
}

/* Page-top poring mascot for sub-pages */
.page-hero-char{
	position:absolute;right:4%;bottom:-30px;width:clamp(120px,13vw,190px);
	filter:drop-shadow(0 20px 30px rgba(0,0,0,.55));
	animation:chibi-float 5s ease-in-out infinite;pointer-events:none;z-index:2;
}
@media (max-width:900px){.page-hero-char{display:none}}

/* Decorative poring mob on page */
.deco-mob{
	position:absolute;image-rendering:pixelated;
	filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
	animation:mob-hop 3.2s ease-in-out infinite;
	opacity:.85;pointer-events:none;
}

/* ============================================================
   FLOATING SIDE CTA
   ============================================================ */
.floating-cta{
	position:fixed;right:22px;bottom:22px;z-index:95;display:flex;flex-direction:column;gap:10px;
}
.fcta{
	width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:20px;
	background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#1a1300;
	box-shadow:0 10px 30px rgba(246,193,94,.35),inset 0 1px 0 rgba(255,255,255,.4);
	transition:transform .25s ease;
	border:1px solid var(--gold-2);
}
.fcta:hover{transform:translateY(-3px) scale(1.05);color:#1a1300}
.fcta.fb{background:linear-gradient(135deg,#3b5998,#1e3a70);color:#fff;border-color:#3b5998;
	box-shadow:0 10px 30px rgba(59,89,152,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.fcta.fb:hover{color:#fff}

/* ============================================================
   SLIDE-IN ANIMATIONS
   ============================================================ */
@keyframes fadeInUp{
	from{opacity:0;transform:translate3d(0,30px,0)}
	to{opacity:1;transform:translate3d(0,0,0)}
}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   LOADER
   ============================================================ */
.page-loader{
	position:fixed;inset:0;z-index:999;background:radial-gradient(circle at center,#0a0e1a,#05070d);
	display:grid;place-items:center;transition:opacity .6s ease,visibility .6s ease;
}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-ring{
	width:70px;height:70px;margin:0 auto 18px;border:3px solid rgba(246,193,94,.15);
	border-top-color:var(--gold-1);border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{
	font-family:'Cinzel',serif;letter-spacing:6px;text-transform:uppercase;font-size:14px;
	color:var(--gold-2);
}

/* ============================================================
   Legacy widget neutralizers
   (Hide old .wrapper, .change, and table layout from original)
   ============================================================ */
.wrapper,.change,.header_table,.alice_box,.page_footer{display:none!important}
/* If any template still outputs .header_table – it's fully replaced */

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center{text-align:center}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}
.hidden{display:none!important}
@media (max-width:760px){.hide-sm{display:none!important}}

@media (max-width:700px){
	.section{padding:70px 18px}
	.panel{padding:26px 20px}
	.hero{padding:calc(var(--nav-h) + 40px) 16px 80px}
}