/* Lucera2 Lineage II Theme */
:root{
  --gold:#d7b46a;
  --gold2:#f0d48a;
  --blue:#1a2a44;
  --panel:#0e111a;
  --card:rgba(10,12,18,.72);
  --stroke:rgba(215,180,106,.25);
  --text:#f2f5ff;
  --muted:rgba(242,245,255,.75);
  --shadow:0 18px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(215,180,106,.12), transparent 55%),
    radial-gradient(900px 500px at 20% 80%, rgba(90,150,255,.10), transparent 55%),
    url("../img/bg-hero.png") center top / cover fixed no-repeat,
    #05070c;
}

.wrap{max-width:780px;margin:0 auto;padding:22px}
a{color:var(--gold2); text-decoration:none}
a:hover{filter:brightness(1.12); text-shadow:0 0 14px rgba(240,212,138,.25)}
.small{opacity:.78;font-size:13px}

.top{
  position:relative;
  padding:14px 14px 10px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(8,10,14,.74), rgba(8,10,14,.35));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.top::before{
  content:"";
  position:absolute; inset:0;
  background: url("../img/banner.png") center top / cover no-repeat;
  opacity:.35;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;
}
.top::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.25) 55%, rgba(0,0,0,.55));
  pointer-events:none;
}
.brand{
  position:relative;
  display:flex; gap:12px; align-items:center;
}
.brand img{
  width:140px; height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
}
.brand .sub{opacity:.8;margin-top:2px}

.nav{
  position:relative;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.nav a{
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(22,34,55,.72), rgba(10,14,22,.55));
  border:1px solid rgba(215,180,106,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  color:var(--text);
  letter-spacing:.2px;
}
.nav a:hover{
  border-color: rgba(240,212,138,.45);
}

.card{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background: var(--card);
  border:1px solid rgba(215,180,106,.16);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.card h2, .card h3{
  margin:0 0 10px 0;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing:.2px;
}
.card ul{margin:10px 0 0 18px}
.msg{
  padding:12px 14px;
  border-radius:14px;
  background: rgba(8,10,14,.55);
  border:1px solid rgba(215,180,106,.18);
  margin-top:14px;
}
.msg.good{border-color: rgba(70, 255, 170, .35)}
.msg.bad{border-color: rgba(255, 90, 90, .35)}

input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(215,180,106,.22);
  background: rgba(8,10,14,.55);
  color:var(--text);
  outline:none;
}
input:focus, select:focus{border-color: rgba(240,212,138,.55); box-shadow:0 0 0 3px rgba(240,212,138,.12)}
label{display:block; margin-bottom:6px; color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){ .grid{grid-template-columns:1fr} .brand img{width:120px}}

button{
  appearance:none;
  border:0;
  padding:12px 16px;
  border-radius:16px;
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.35px;
  background:
    linear-gradient(180deg, rgba(240,212,138,.14), rgba(215,180,106,.06)),
    url("../img/button.png") center / cover no-repeat;
  border:1px solid rgba(240,212,138,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}

.coin-badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,180,106,.25);
  background: rgba(8,10,14,.55);
}
.coin-badge img{width:22px;height:22px;border-radius:6px}


html, body { height: 100%; }
body{ min-height:100vh; }

/* Fullscreen background behavior */
body{
  background-position: center center;
  background-size: contain;
}

/* On mobile, fixed backgrounds can jitter; use scroll and ensure cover */
@media (max-width: 820px){
  body{
    background-attachment: scroll !important;
    background-position: center center;
    background-size: contain;
  }
  .wrap{ padding: 14px; }
}

/* Add a subtle dark overlay so text stays readable regardless of background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: radial-gradient(900px 600px at 30% 20%, rgba(0,0,0,.25), transparent 60%),
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events:none;
  z-index:-1;
}


/* Services page */
.service-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.service-header .title{
  display:flex; align-items:center; gap:10px;
}
.service-header .title h2{ margin:0; }
.service-header .title .coin-badge{ margin-left:6px; }

.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}
@media (max-width: 980px){ .service-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .service-grid{ grid-template-columns: 1fr;} }

.service-card{
  position:relative;
  padding:16px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(8,10,14,.62), rgba(8,10,14,.35));
  border:1px solid rgba(215,180,106,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(500px 220px at 20% 10%, rgba(240,212,138,.10), transparent 60%),
              radial-gradient(420px 240px at 80% 90%, rgba(90,150,255,.10), transparent 60%);
  pointer-events:none;
}
.service-card .inner{ position:relative; }
.service-card h3{
  margin:0 0 8px 0;
  font-family: Georgia, "Times New Roman", serif;
}
.service-card p{ margin:0 0 10px 0; color:var(--muted); }
.service-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(240,212,138,.25);
  background: rgba(8,10,14,.55);
}
.badge strong{ color:var(--text); }
.service-buy{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.service-buy select{ flex:1 1 220px; }
.service-buy button{ flex:0 0 auto; }

/* Fancy divider */
.hr{
  height:1px;
  margin:14px 0;
  background: linear-gradient(90deg, transparent, rgba(240,212,138,.35), transparent);
  border:0;
}


/* ---- Panel sizing + borders ---- */
.wrap{
  max-width: 760px; /* ~30% smaller than before */
  margin: 40px auto;
  padding: 18px;
}

/* outer glass border */
.wrap::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:26px;
  border:1px solid rgba(240,212,138,.25);
  box-shadow: 0 0 40px rgba(0,0,0,.65);
  pointer-events:none;
}

/* leave visible background around panel */
body{
  padding:20px;
}

/* mobile */
@media(max-width:820px){
  .wrap{max-width:94%; margin:20px auto;}
}

/* card borders stronger */
.card{
  border:1px solid rgba(240,212,138,.28);
}


/* Panel frame (so background is visible around it) */
.wrap{
  position:relative;
  border-radius:26px;
  border:1px solid rgba(240,212,138,.22);
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
  backdrop-filter: blur(6px);
}
.wrap::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
@media(max-width:820px){
  .wrap{ margin:18px 12px; padding:14px; }
}

/* Slightly smaller components */
.card{padding:14px;}
.nav a{padding:9px 12px;}


/* Show full background image (no crop) */
body{
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position: center center !important;
}

/* Stronger frame + more spacing */
.wrap{
  max-width:740px !important;
  margin:50px auto !important;
  border:2px solid rgba(240,212,138,.35);
}