/* ============================================================================
   SERATH2 — modern violet reskin (reskin-in-place)
   Themes the EXISTING legacy markup; no PHP/JS/partial changes.
   Loaded after css/reset.css, instead of all.css / plugins.css.
   ============================================================================ */
:root{
  --bg:#0a0612; --bg-2:#0f0a1c; --surface:rgba(28,18,48,.72);
  --surface-2:#160f28; --border:rgba(150,96,236,.22);
  --violet:#a974ff; --violet-deep:#7a3fd6; --violet-soft:#c9a6ff;
  --text:#ece7f6; --muted:#9a90b4;
  --shadow:0 18px 48px -16px rgba(0,0,0,.8); --r:14px; --maxw:1180px;
  --fd:'Cinzel',Georgia,'Times New Roman',serif;
  --fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--fb);font-size:15px;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 600px at 70% -10%,rgba(122,63,214,.16),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,rgba(177,92,255,.09),transparent 55%);
}
a{color:var(--violet);text-decoration:none;transition:.18s}
a:hover{color:#fff}
h1,h2,h3,h4{font-family:var(--fd);color:#fff;font-weight:700;letter-spacing:.02em;line-height:1.25}
img{max-width:100%}
strong,b{color:var(--violet-soft)}
p{margin:0 0 12px}
ul{list-style:none}

/* ---- generic buttons (legacy .btn / .btn-big / .button / inputs) ---- */
.btn,.btn-big,.button,.btn-login,.download-btn,.itemshop-btn,
input[type=submit],#submitBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--fb);font-weight:600;font-size:.95rem;cursor:pointer;
  padding:.72em 1.3em;border-radius:10px;border:1px solid transparent;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));color:#fff;
  box-shadow:0 8px 22px -10px rgba(122,63,214,.7);transition:.18s;text-align:center}
.btn:hover,.btn-big:hover,.button:hover,.btn-login:hover,.download-btn:hover,
.itemshop-btn:hover,input[type=submit]:hover,#submitBtn:hover{
  filter:brightness(1.1);transform:translateY(-2px);color:#fff}
.btn-big,#submitBtn{padding:.85em 1.6em;font-size:1rem;width:auto}

/* ---- page wrapper ---- */
#page{display:block}

/* ============ LOGO BANNER (old #header, restyled — no nav bar) ============ */
.header-wrapper{
  position:relative;border-bottom:1px solid var(--border);
  background:
    radial-gradient(46% 64% at 50% 46%,rgba(9,4,18,.70),transparent 76%),
    radial-gradient(62% 82% at 50% 45%,rgba(122,63,214,.30),transparent 70%),
    linear-gradient(180deg,rgba(10,6,18,.55),rgba(10,6,18,.92) 92%),
    url('../img/serath2_bg.jpg') center 30%/cover no-repeat;
}
#header{
  max-width:var(--maxw);margin:0 auto;min-height:400px;padding:50px 22px 30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  text-align:center}
#header .logo{position:relative;display:inline-block;padding:30px 60px;line-height:0}
#header .logo strong{display:none}            /* hide old text "Metin2" */
#header .logo::before{content:"";position:absolute;inset:-6% -3%;z-index:0;
  background:radial-gradient(closest-side,rgba(22,9,44,.94),rgba(15,5,30,.6) 56%,transparent 80%);
  filter:blur(7px)}
#header .logo img{position:relative;z-index:1;width:min(600px,86vw);height:auto;
  filter:brightness(1.1) contrast(1.06) drop-shadow(0 8px 22px rgba(0,0,0,.78))
         drop-shadow(0 0 36px rgba(169,116,255,.6))}

/* download CTA (logged-out, downloadmenu.php) */
.header-box{position:relative;z-index:2}
#regBtn{display:inline-block}
#regBtn #toReg,#regBtn #regSteps a{
  display:inline-block;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
  padding:.8em 1.6em;border-radius:11px;box-shadow:0 10px 26px -10px rgba(122,63,214,.75)}
#regBtn #regSteps{margin-top:8px}
#regBtn #regSteps a{background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-weight:500;color:var(--violet-soft);font-size:.85rem;padding:.5em 1em}
#regBtn.reg-hover #toReg{filter:brightness(1.1)}

/* user menu (logged-in, upmenu.php) */
.header-box-nav-login{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  position:relative;z-index:2}
.header-box-nav-login li{list-style:none}
.header-box-nav-login .nav-box-btn{display:inline-flex;align-items:center;
  padding:.7em 1.3em;border-radius:10px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
  box-shadow:0 8px 22px -10px rgba(122,63,214,.7)}
.header-box-nav-login .nav-box-btn:hover{filter:brightness(1.1)}

/* ============ 3-COLUMN LAYOUT (old .container-wrapper) ============ */
.container-wrapper{padding:34px 0 60px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:214px 1fr 300px;gap:26px;align-items:start}
.col-1,.col-3{display:flex;flex-direction:column}
.col-2{min-width:0}
.boxes-top,.boxes-middle,.boxes-bottom{height:0;margin:0}

/* cards: modul-box (sidebars) + content (pages) */
.modul-box,.content,.two-boxes{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);backdrop-filter:blur(6px);margin-bottom:22px;overflow:hidden}
.modul-box-bg,.modul-box-bg-bottom,.content-bg,.content-bg-bottom,
.two-boxes-top,.two-boxes-bottom{background:none;padding:0}
.modul-box-bg-bottom{padding:0}
.modul-box h3,.content h2,.content h3{
  margin:0;padding:14px 20px;font-size:1.1rem;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(169,116,255,.12),transparent)}
.modul-box .main-nav,.modul-box form,.modul-box center,.modul-box p,
.content .body,.content .inner-content,.content #ranking,
.content .administration-inner-content,.two-boxes-bottom .box{padding:18px 20px}
.content-last{margin-bottom:22px}
.shadow{display:none}

/* left nav list */
.main-nav li a{display:block;padding:.7em 20px;margin:0 -20px;color:var(--text);
  font-weight:500;border-bottom:1px solid rgba(255,255,255,.05)}
.main-nav li:last-child a{border-bottom:0}
.main-nav li a:hover{background:rgba(169,116,255,.12);color:#fff;padding-left:24px}
.modul-box .main-nav{padding-bottom:18px!important}
.download-btn,.itemshop-btn{display:flex;width:100%;margin-top:12px;min-height:42px}
.itemshop-btn::after{content:"ItemShop megnyitása"}

/* Letöltés card (left col-2 box) — only the button is clickable */
.dlcard h3{margin-bottom:0}
.dlcard p{padding:14px 20px 0;margin:0;color:var(--muted);font-size:.86rem}
.dlcard .dl-btn{display:flex;justify-content:center;margin:13px 20px 18px}

/* welcome + trailer two-box */
.two-boxes-bottom{display:flex;flex-wrap:wrap;gap:0}
.two-boxes-bottom .box{flex:1 1 320px;min-width:0}
.two-boxes-bottom .box-right{flex:1 1 260px;border-left:1px solid var(--border)}
.two-boxes h2{padding:14px 20px;font-size:1.1rem;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(169,116,255,.12),transparent)}
.two-boxes .body{color:#d8d2e8}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;
  overflow:hidden;border:1px solid var(--border);margin-top:4px}
.video object,.video iframe{position:absolute!important;inset:0;
  width:100%!important;height:100%!important;border:0}

/* screenshots (real images kept; jquery.tools gallery untouched) */
.screenshots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:6px}
.screenshots li{list-style:none}
.screenshots li a{display:block;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);transition:.2s}
.screenshots li a img{display:block;width:100%;height:auto}
.screenshots li a:hover{transform:translateY(-3px);border-color:var(--violet);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7)}

/* lore / features (thegame, home lore) */
.inner-content ul,.body ul{display:grid;gap:9px;margin:8px 0 0}
.inner-content ul li,.body ul li{position:relative;padding-left:26px;color:#d8d2e8}
.inner-content ul li::before,.body ul li::before{content:"";position:absolute;
  left:5px;top:.55em;width:8px;height:8px;transform:rotate(45deg);
  background:var(--violet);box-shadow:0 0 9px rgba(169,116,255,.8)}
h3{margin:14px 0 6px;color:var(--violet-soft);font-size:1.05rem}

/* forms (login / register / pwchange / passwordlost) */
#login,#register{max-width:none}
.inner-form-border,.inner-form-box{padding:0}
.inner-form-box h3{padding:0 0 12px;border:0;background:none;
  display:flex;justify-content:space-between;align-items:baseline}
.inner-form-box h3 a{font-size:.82rem;font-weight:500}
.trenner{height:1px;background:var(--border);margin:14px 0}
form label{display:block;font-size:.84rem;color:var(--muted);margin:0 0 6px}
form .form-item,form>div{margin-bottom:13px}
input[type=text],input[type=password],input[type=email],.input input{
  width:100%;background:rgba(0,0,0,.4);border:1px solid var(--border);color:var(--text);
  padding:.7em .85em;border-radius:9px;font-size:.95rem;font-family:var(--fb)}
input:focus{outline:0;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(169,116,255,.18)}
#regLegend,.agbok{font-size:.8rem;color:var(--muted);margin-top:10px}
#checkerror p{color:var(--violet-soft);font-size:.84rem}
#subscribe{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.password{display:inline-block;margin-top:6px}

/* sidebar Belépés box (loginmenu.inc.php .form-login) */
.form-login label{display:block;font-size:.84rem;color:var(--muted);margin:0 0 6px}
.form-login .input{margin:0 0 13px}
.form-login .input input{width:100%}
.form-login .input br{display:none}
.form-login .btn-login{width:100%;margin:2px 0 12px}
.form-login .agbok{font-size:.78rem;color:var(--muted);line-height:1.55;margin:0}
.form-login .agbok a,.form-login .password{color:var(--violet-soft)}
.form-login .password{display:inline-block;margin-top:6px}

/* sidebar: user box + ranglista */
.offset{color:var(--violet-soft);font-weight:700}
center{display:block;text-align:center}
.modul-box center .btn{margin-top:10px}
.form-score{margin-top:4px}
.highscore-player ul li{display:flex;align-items:center;gap:9px;
  padding:8px 2px;border-bottom:1px dashed rgba(255,255,255,.07);font-size:.92rem}
.highscore-player ul li:last-child{border-bottom:0}
.highscore-player ul li.light{background:rgba(169,116,255,.06)}
.rk-pos{font-family:var(--fd);font-weight:700;color:var(--muted);
  min-width:18px;text-align:center;flex:none}
.highscore-player li:nth-child(1) .rk-pos{color:var(--violet)}
.rk-flag{height:15px;width:auto;flex:none;display:block;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.rk-name{flex:1;color:#ece7f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-lvl{flex:none;color:var(--violet-soft);font-size:.8rem;font-family:var(--fd)}

/* Top100 / guildrank table */
#ranking{padding:16px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#ranking table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
#ranking th{padding:.6em .5em;border-bottom:1px solid var(--border);
  color:var(--text);font-family:var(--fb);font-weight:500;text-align:center}
#ranking tr:first-child th{font-family:var(--fd);color:var(--violet-soft);
  text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
#ranking tr:nth-child(even) th{background:rgba(169,116,255,.05)}
#ranking font{color:var(--text)!important}

/* profile page */
.input-data-box ul li{padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
.administration-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.administration-box p{color:var(--muted);font-size:.86rem;margin-top:8px}

/* ============ FOOTER (markup unchanged) ============ */
.footer-wrapper{border-top:1px solid var(--border);background:var(--bg-2)}
#footer{max-width:var(--maxw);margin:0 auto;padding:26px 22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  color:var(--muted);font-size:.85rem}
#footer .gameforge4d{display:none}
#footer ul li{color:var(--muted)}
#footer a{color:var(--violet-soft)}

/* jquery.tools screenshot overlay (kept functional, dark themed) */
.simple_overlay{display:none;background:var(--surface-2);border:1px solid var(--violet);
  border-radius:12px;padding:14px;box-shadow:0 30px 80px -20px #000;z-index:10000}
.simple_overlay img{display:block;max-width:80vw;max-height:78vh;border-radius:8px}
.simple_overlay .back,.simple_overlay .forward{position:absolute;top:50%;
  width:42px;height:62px;margin-top:-31px;cursor:pointer;opacity:.6;
  background:rgba(169,116,255,.25);border-radius:8px;text-indent:-9999px}
.simple_overlay .back{left:-54px}
.simple_overlay .forward{right:-54px}
.simple_overlay .back:hover,.simple_overlay .forward:hover{opacity:1}

/* ============ DOWNLOAD PAGE (main/download.php) ============ */
#download .download-inner-content{padding:20px}
#download h3{color:var(--violet-soft);margin:0 0 16px;font-size:1.15rem}
.download-button-1{display:inline-flex;align-items:center;justify-content:center;
  min-width:240px;min-height:54px;padding:.9em 1.9em;border-radius:11px;
  font-family:var(--fb);font-weight:700;font-size:1.05rem;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
  box-shadow:0 10px 26px -10px rgba(122,63,214,.75);transition:.18s}
.download-button-1::after{content:"Kliens letöltése"}
.download-button-1:hover{filter:brightness(1.1);transform:translateY(-2px);color:#fff}
.clearfloat{clear:both}
#requirements{display:inline-block;margin:20px 0 6px;color:var(--violet-soft);
  cursor:pointer;font-weight:600}
#required{display:none;margin:8px 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#required table{width:100%;border-collapse:collapse;margin:0 0 16px;
  font-size:.9rem;min-width:340px}
#required caption{font-family:var(--fd);color:var(--violet-soft);text-align:left;
  padding:8px 0;font-size:1rem}
#required td{padding:.5em .6em;border-bottom:1px solid var(--border);color:#d8d2e8}
#required .left_td{color:var(--muted);width:130px;white-space:nowrap}
#downloadText{margin-top:14px;color:var(--muted);font-size:.86rem;line-height:1.6}
.download-box-foot{height:6px}

/* ---- responsive ---- */
@media(max-width:980px){
  .container{grid-template-columns:1fr;gap:18px}
  .col-1,.col-3{order:2}
  .col-2{order:1}
  #header{min-height:300px;padding:40px 18px 24px}
  .two-boxes-bottom .box{flex:1 1 100%}
  .two-boxes-bottom .box-right{border-left:0;border-top:1px solid var(--border)}
}
@media(max-width:620px){
  body{font-size:14.5px}
  .container{padding:0 14px}
  .container-wrapper{padding:22px 0 44px}
  #header{min-height:230px;padding:30px 14px 18px;gap:16px}
  #header .logo{padding:18px 26px}
  #header .logo img{width:min(440px,80vw)}
  .screenshots{grid-template-columns:repeat(2,1fr)}
  .header-box-nav-login{flex-direction:column;align-items:stretch}
  .header-box-nav-login .nav-box-btn{justify-content:center}
  #footer{flex-direction:column;text-align:center;gap:10px}
  .inner-form-box h3{flex-direction:column;gap:4px;align-items:flex-start}
}
@media(max-width:400px){
  .screenshots{grid-template-columns:1fr 1fr}
  #header .logo img{width:84vw}
}