/* ===== Luna Infinity — "Skyforge" theme (loads AFTER site.css, overrides it) ===== */

/* Re-tint the whole site by overriding the shared CSS variables → every classic
   page (.panel/.btn/.section/etc.) adopts the sky palette + Cinzel/Spline fonts. */
body.sf{
  --green:#1d3b5e; --green-dk:#142a44; --green-2:#2c5483; --leaf:#2fbf6b;
  --gold:#e9c25c; --gold-lt:#ffe9a6; --gold-dk:#b8902f; --gold-ink:#5b3d05;
  --ink:#1d3b5e; --mut:#6a5a36; --line:rgba(154,117,33,.22);
  --card:rgba(255,255,255,.9); --card-solid:#fdf6e4; --cream:#f6ead0;
  --sky1:#a9dcf2; --sky2:#cdecf8;
  --serif:'Cinzel',Georgia,serif; --sans:'Spline Sans',system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#7fc6ec 0%,#a9dcf2 26%,#cdecf8 55%,#eaf8fc 82%,#fbfdff 100%) fixed;
  min-height:100vh;
}
body.sf a{color:#2c5483}
body.sf a:hover{color:#8a6a1c}

/* ---- animated sky backdrop ---- */
@keyframes sfDrift{from{transform:translateX(0)}to{transform:translateX(120px)}}
@keyframes sfDrift2{from{transform:translateX(0)}to{transform:translateX(-100px)}}
@keyframes sfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes sfFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sfGlow{0%,100%{opacity:.55}50%{opacity:.9}}
.sf-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sf-sun{position:absolute;top:-160px;left:50%;width:560px;height:560px;margin-left:-280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,249,224,.95),rgba(255,240,190,.4) 38%,rgba(255,240,190,0) 70%);animation:sfGlow 7s ease-in-out infinite}
.sf-cloud{position:absolute;border-radius:50%;filter:blur(7px)}
.sf-cloud.c1{top:80px;left:-120px;width:420px;height:130px;background:radial-gradient(60% 70% at 40% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);animation:sfDrift 32s ease-in-out infinite alternate}
.sf-cloud.c2{top:210px;right:-100px;width:520px;height:150px;background:radial-gradient(60% 70% at 60% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);animation:sfDrift2 40s ease-in-out infinite alternate}
.sf-cloud.c3{top:440px;left:8%;width:360px;height:120px;background:radial-gradient(60% 70% at 40% 50%,rgba(255,255,255,.82),rgba(255,255,255,0) 70%);animation:sfDrift 46s ease-in-out infinite alternate}

.sf-shell{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 24px 56px}
.sf-main{display:block}

/* ---- nav (gold pill) ---- */
.sf-nav{display:flex;align-items:center;gap:18px;margin-top:20px;padding:10px 14px 10px 18px;border-radius:16px;
  background:linear-gradient(180deg,#fff8e6,#f3e2b0);border:1px solid #e8cf86;
  box-shadow:0 2px 0 #c9a44e,0 14px 30px rgba(40,80,120,.22),inset 0 1px 0 rgba(255,255,255,.8);position:sticky;top:10px;z-index:40}
.sf-brand{display:flex;align-items:center;gap:11px;padding-right:18px;border-right:1px solid rgba(154,117,33,.32);text-decoration:none}
.sf-moon{position:relative;width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff6da,#f0d27e 60%,#c79a35);box-shadow:0 2px 6px rgba(154,117,33,.5),inset 0 -2px 4px rgba(154,117,33,.45)}
.sf-moon::after{content:"";position:absolute;top:6px;left:8px;width:13px;height:13px;border-radius:50%;background:#a9dcf2;box-shadow:inset -3px -3px 0 rgba(127,198,236,.9)}
.sf-moon.sm{width:26px;height:26px}
.sf-brand-name{font-family:'Cinzel Decorative',serif;font-weight:900;font-size:19px;letter-spacing:.5px;color:#1d3b5e}
.sf-brand-name span{color:#b8902f}
.sf-menu{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap}
.sf-menu a{font-family:'Cinzel',serif;font-weight:600;font-size:13.5px;letter-spacing:.4px;color:#234a72;text-decoration:none;padding:9px 13px;border-radius:9px;transition:.15s}
.sf-menu a:hover{background:rgba(154,117,33,.14);color:#8a6a1c}
.sf-menu a.on{background:rgba(154,117,33,.16);color:#8a6a1c}
.sf-nav-cta{display:flex;align-items:center;gap:9px}
.sf-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Cinzel',serif;font-weight:700;font-size:13px;border-radius:10px;padding:9px 16px;cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:.15s}
.sf-btn.sf-ghost{color:#234a72;background:rgba(255,255,255,.6);border-color:#e0c787;font-weight:600}
.sf-btn.sf-ghost:hover{background:#fff}
.sf-btn.sf-gold{color:#5b3d05;background:linear-gradient(180deg,#ffe9a6,#e9c25c);border-color:#c9a44e;box-shadow:0 2px 0 #b8902f,inset 0 1px 0 rgba(255,255,255,.7)}
.sf-btn.sf-gold:hover{transform:translateY(-1px)}

/* ---- hero ---- */
.sf-hero{position:relative;display:grid;place-items:center;padding:50px 0 26px;text-align:center}
.sf-char{position:absolute;bottom:-6px;pointer-events:none;background-repeat:no-repeat;background-position:50% 100%;background-size:contain;filter:drop-shadow(0 18px 22px rgba(40,80,120,.4))}
.sf-char.left{left:6px;width:330px;height:480px;background-image:url('../img/skyforge/mage.webp');background-position:0% 100%;animation:sfFloatSlow 6s ease-in-out infinite}
.sf-char.right{right:78px;width:240px;height:480px;background-image:url('../img/skyforge/fighter.webp');background-position:100% 100%;animation:sfFloat 6.6s ease-in-out infinite}
.sf-hero-mid{position:relative;z-index:3;max-width:600px}
.sf-eyebrow{font-family:'Cinzel',serif;font-weight:600;letter-spacing:6px;font-size:12px;color:#3d6a96;text-transform:uppercase;margin-bottom:10px}
.sf-title{font-family:'Cinzel Decorative',serif;font-weight:900;font-size:clamp(48px,8vw,74px);line-height:.96;margin:0;letter-spacing:1px;
  background:linear-gradient(180deg,#fff7df 8%,#f6d57e 46%,#c89537 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(120,84,12,.45)) drop-shadow(0 10px 22px rgba(154,117,33,.4))}
.sf-title-h{margin:0;line-height:0}
.sf-title-img{display:block;width:100%;max-width:440px;height:auto;margin:2px auto 0;filter:drop-shadow(0 5px 12px rgba(120,84,12,.22))}
.sf-lead{font-size:16px;color:#21476f;max-width:440px;margin:16px auto 24px;line-height:1.55}
.sf-hero-cta{display:flex;gap:14px;justify-content:center}
.sf-cta{display:inline-flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:#5b3d05;text-decoration:none;
  background:linear-gradient(180deg,#fff0b8,#eec45f 55%,#d9a83f);border:1.5px solid #b8902f;border-radius:14px;padding:14px 32px;cursor:pointer;
  box-shadow:0 4px 0 #9a7521,0 14px 26px rgba(154,117,33,.4),inset 0 1px 0 rgba(255,255,255,.8);transition:.15s}
.sf-cta:hover{transform:translateY(-2px);color:#5b3d05}
.sf-cta.block{width:100%;justify-content:center;font-size:15px;padding:12px;box-shadow:0 3px 0 #9a7521,inset 0 1px 0 rgba(255,255,255,.8)}
.sf-cta span{font-size:16px}
.sf-online{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(120,180,160,.4)}
.sf-dot{width:9px;height:9px;border-radius:50%;background:#2fbf6b;box-shadow:0 0 0 3px rgba(47,191,107,.25)}
.sf-dot.off{background:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.22)}
.sf-dot.sm{width:8px;height:8px;box-shadow:0 0 0 2px rgba(47,191,107,.22)}
.sf-online-lbl{font-size:13px;font-weight:600;color:#1d6b43}
.sf-sep{width:1px;height:14px;background:rgba(29,59,94,.18)}
.sf-online-n{font-size:13px;color:#21476f}.sf-online-n b{color:#1d3b5e}

/* ---- main grid ---- */
.sf-grid{display:grid;grid-template-columns:276px minmax(0,1fr) 312px;gap:20px;align-items:start;margin-top:14px}
@media(max-width:1080px){.sf-grid{grid-template-columns:1fr 1fr}.sf-news{grid-column:1/-1;order:3}}
@media(max-width:720px){.sf-grid{grid-template-columns:1fr}.sf-char{display:none}}

.sf-card{border-radius:18px;overflow:hidden}
.sf-card.gold{background:linear-gradient(180deg,#fdf6e4,#f6ead0);border:1px solid #e6d09a;box-shadow:0 2px 0 #c9a44e,0 16px 30px rgba(40,80,120,.16),inset 0 1px 0 rgba(255,255,255,.8)}
.sf-card.light{background:linear-gradient(180deg,#fff,#f7fbfe);border:1px solid #d3e6f1;box-shadow:0 2px 0 rgba(155,193,221,.5),0 16px 30px rgba(40,80,120,.14)}
.sf-card-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:13px 16px;background:linear-gradient(180deg,#1d3b5e,#2c5483);color:#fff;font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:.5px}
.sf-card-h .more{margin-left:auto;font-family:'Spline Sans',sans-serif;font-weight:600;font-size:12px;color:#dce9f4}
.sf-card-h .more:hover{color:#ffe9a6}
.sf-card-b{padding:18px 16px}

/* member */
.sf-me{display:flex;align-items:center;gap:13px}
.sf-avatar{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:'Cinzel',serif;font-weight:700;font-size:24px;color:#ffe9a6;
  background:radial-gradient(circle at 35% 30%,#3a6ea5,#1d3b5e);box-shadow:0 0 0 3px #f6d57e,inset 0 2px 6px rgba(0,0,0,.3)}
.sf-me-name{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#1d3b5e;line-height:1.1}
.sf-me-sub{font-size:12.5px;color:#6a5a36;margin-top:3px}
.sf-me-badge{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:#1d3b5e;color:#ffe9a6;font-size:11px;font-weight:600}
.sf-points{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,#fff8e6,#f3e2b0);border:1px solid #e8cf86}
.sf-points span{display:flex;align-items:center;gap:9px;font-size:13px;color:#5b3d05;font-weight:600}
.sf-points b{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#1d3b5e}
.sf-gem{width:15px;height:15px;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,#c8f3ff,#6ec6ef 55%,#3a8fc7);box-shadow:inset 0 0 4px rgba(255,255,255,.8),0 1px 3px rgba(58,143,199,.5)}
.sf-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sf-actions a{display:flex;align-items:center;gap:11px;font-family:'Spline Sans',sans-serif;font-weight:600;font-size:13.5px;color:#234a72;text-decoration:none;background:#fff;border:1px solid #e2d5b0;border-radius:11px;padding:10px 13px;transition:.15s}
.sf-actions a:hover{background:#fff8e6;border-color:#e8cf86;transform:translateX(2px)}
.sf-actions .ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#dcebf8;color:#234a72;font-family:'Cinzel',serif;font-weight:700;font-size:14px}
.sf-actions .ic.g{background:linear-gradient(135deg,#ffe9a6,#e9c25c);color:#5b3d05}
.sf-logout{display:block;text-align:center;margin-top:12px;font-family:'Spline Sans',sans-serif;font-weight:600;font-size:12.5px;color:#8a4a4a;text-decoration:none;background:rgba(180,80,80,.08);border:1px solid rgba(180,80,80,.25);border-radius:10px;padding:9px}
.sf-logout:hover{background:rgba(180,80,80,.16);color:#8a4a4a}

/* login */
.sf-login label{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#8a7340;margin-bottom:6px}
.sf-login input{width:100%;font-family:'Spline Sans',sans-serif;font-size:13.5px;color:#1d3b5e;background:#fff;border:1px solid #e2d5b0;border-radius:11px;padding:11px 13px;margin-bottom:13px;outline:none}
.sf-login input:focus{border-color:#c9a44e}
.sf-or{text-align:center;margin:12px 0;font-size:11px;color:#a3905f;letter-spacing:1px}
.sf-create{display:block;text-align:center;font-family:'Spline Sans',sans-serif;font-weight:600;font-size:13.5px;color:#234a72;text-decoration:none;background:#fff;border:1px solid #e2d5b0;border-radius:12px;padding:11px}
.sf-create:hover{background:#f7fbfe}

/* news */
.sf-feature{position:relative;margin:14px;aspect-ratio:834/244;min-height:120px;border-radius:14px;overflow:hidden;border:1px solid #d3e6f1;background:#cdeaf2 url('../img/skyforge/news-banner.webp') center/cover no-repeat}
.sf-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,30,52,0) 40%,rgba(13,30,52,.78))}
.sf-feature-tx{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
.sf-tag-feat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#5b3d05;background:linear-gradient(180deg,#ffe9a6,#e9c25c);padding:3px 10px;border-radius:6px}
.sf-feature-tx h3{font-family:'Cinzel',serif;font-weight:700;font-size:21px;color:#fff;margin:9px 0 0;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.sf-newslist{padding:2px 8px}
.sf-newsrow{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;text-decoration:none;transition:background .15s}
.sf-newsrow:hover{background:#eef6fc}
.sf-ntag{flex:none;min-width:54px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 9px;border-radius:7px;color:#234a72;background:#dcebf8;white-space:nowrap}
.sf-ntag.t-news{color:#234a72;background:#dcebf8}
.sf-ntag.t-update{color:#1d6b43;background:#d8f3e3}
.sf-ntag.t-event{color:#8a4a9c;background:#f0e0f7}
.sf-ntag.t-maintenance{color:#a0651c;background:#f8e8cf}
.sf-news-tabs{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.sf-tab{font-family:'Spline Sans',sans-serif;font-weight:600;font-size:12px;padding:6px 11px;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#dce9f4;transition:.15s}
.sf-tab:hover{background:rgba(255,255,255,.22)}
.sf-tab.on{background:linear-gradient(180deg,#ffe9a6,#e9c25c);color:#5b3d05;border-color:#c9a44e}
.sf-news-empty{display:none;padding:18px 12px;text-align:center;color:#7d92a8;font-size:13px}
.sf-ntitle{flex:1;font-size:14px;font-weight:500;color:#1d3b5e;min-width:0;line-height:1.35}
.sf-ndate{flex:none;font-size:12px;color:#7d92a8;white-space:nowrap}
.sf-news-foot{padding:8px 16px 16px}
.sf-softbtn{display:block;text-align:center;font-family:'Spline Sans',sans-serif;font-weight:600;font-size:13px;color:#234a72;text-decoration:none;background:#eef6fc;border:1px solid #d3e6f1;border-radius:11px;padding:11px}

/* rail */
.sf-rail{display:flex;flex-direction:column;gap:20px}
.sf-card-h.blue{} /* same blue header */
.sf-ranks{padding:8px 10px 12px}
.sf-rankrow{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:10px}
.sf-rankrow:hover{background:rgba(255,255,255,.6)}
.sf-rno{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#234a72;background:#fff;border:1px solid #e2d5b0}
.sf-rno.r1{color:#7a5600;background:linear-gradient(180deg,#ffe9a6,#e9c25c);border-color:#c9a44e}
.sf-rno.r2{color:#4a5560;background:linear-gradient(180deg,#f2f5f8,#cfd8e0);border-color:#b3c0cc}
.sf-rno.r3{color:#7a4a1c;background:linear-gradient(180deg,#f6dcc0,#e0b488);border-color:#cc9a6a}
.sf-rname{flex:1;font-size:13.5px;font-weight:600;color:#1d3b5e;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-rlv{flex:none;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#234a72}
.sf-rates{padding:12px 14px}
.sf-raterow{display:flex;align-items:center;justify-content:space-between;padding:9px 2px}
.sf-rl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#1d3b5e}
.sf-rv{font-size:12px;font-weight:700;padding:3px 10px;border-radius:7px;background:linear-gradient(180deg,#ffe9a6,#e9c25c);color:#5b3d05;border:1px solid #c9a44e}

/* ---- footer ---- */
.sf-footer{margin-top:38px;padding:20px 24px;border-radius:16px;background:linear-gradient(180deg,#fff8e6,#f3e2b0);border:1px solid #e8cf86;
  box-shadow:0 2px 0 #c9a44e,inset 0 1px 0 rgba(255,255,255,.8);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.sf-foot-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sf-foot-brand b{font-family:'Cinzel',serif;font-weight:700;color:#1d3b5e}
.sf-foot-copy{font-size:12px;color:#8a7340}
.sf-foot-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sf-foot-links a{font-size:12.5px;color:#234a72;text-decoration:none;font-weight:500}
.sf-foot-links a:hover{color:#8a6a1c}
.sf-rating{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:2px solid #1d3b5e;font-family:'Cinzel',serif;font-weight:700;font-size:12px;color:#1d3b5e}

/* keep the classic toast usable */
body.sf .toast{z-index:60}