:root{
  --bg:#0b1020;
  --surface:rgba(14,18,34,.78);
  --surface-strong:rgba(14,18,34,.92);
  --text:#e8ecf8;
  --muted:#b9c0d9;
  --accent:#d4af37;
  --radius:18px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --grid-gap:clamp(14px,2vw,20px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1300px 500px at 70% 0%, rgba(75,88,150,.25), transparent),
    radial-gradient(800px 300px at 0% 100%, rgba(114,54,140,.22), transparent),
    var(--bg);
}

.wallpaper{
  position:fixed; inset:0; z-index:-1;
  background:center/cover no-repeat url("assets/wallpaper.avif");
  filter:brightness(.46) saturate(1.05);
  opacity:.85;
}

.site-header{max-width:1400px; margin:20px auto 10px; padding:0 20px}
.site-header h1{font-family:Cinzel,serif;margin:0 0 6px;font-weight:700}
.site-header p{margin:0;color:var(--muted)}
.namebar{margin-top:12px; max-width:560px}

.container{
  max-width:1400px; margin:0 auto; padding:clamp(16px,3vw,28px);
  display:grid; grid-template-columns:1fr; gap:var(--grid-gap);
}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surface);
  border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(10px);
  padding:clamp(16px,2.2vw,24px);
}

.panel.wide{ width:100%; }

.field{display:grid; gap:6px}
.field>span{color:var(--muted); font-size:.9rem}
.field input{
  width:100%; padding:10px 12px; border-radius:10px;
  background:var(--surface-strong); color:var(--text);
  border:1px solid rgba(255,255,255,.08); outline:none;
}
.field input:focus{
  box-shadow:0 0 0 1px rgba(212,175,55,.35), 0 0 20px rgba(212,175,55,.18);
  border-color:rgba(212,175,55,.4);
}

.picker h2{font-family:Cinzel,serif; font-size:1.2rem; margin-top:0}
.roles-grid{display:grid; gap:10px}

.two-col{
  display:grid; gap:16px; grid-template-columns:1fr 1fr;
}
@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
}

.role-row{
  display:grid; grid-template-columns: minmax(180px,1fr) 1.2fr 120px;
  align-items:center; gap:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:10px; position:relative;
}
.role-label{
  display:flex; align-items:center; gap:12px; padding:12px;
  border-radius:12px; font-weight:700; background:rgba(0,0,0,.25);
  position:relative;
}
.role-label img{width:28px; height:28px; object-fit:contain}
.role-select select{
  width:100%; padding:10px; border-radius:10px;
  background:var(--surface-strong); color:var(--text);
  border:1px solid rgba(255,255,255,.08);
}
.rank-preview{display:flex; align-items:center; justify-content:center}
.rank-preview img{width:80px; height:80px; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}

.actions{display:flex; gap:10px; align-items:center; margin-top:14px}
.actions .spacer{flex:1}
.actions.at-preview{ margin-top:16px; }

.btn{padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:var(--surface-strong); color:var(--text); cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{background:linear-gradient(180deg,#f3d48a,#d4af37); color:#182235; font-weight:700; border-color:transparent}

.info-btn{
  margin-left:6px; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff; font-size:12px; line-height:18px; text-align:center;
  cursor:pointer;
}
.has-tip{ position:relative; }
.tip{
  position:absolute; left:0; top:100%; margin-top:8px; z-index:50;
  min-width:370px; max-width:470px;
  padding:10px 12px; border-radius:12px;
  background:rgba(8,12,24,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  color:var(--text);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.tip a{ color:var(--accent); text-decoration:none; }
.tip a:hover{ text-decoration:underline; }
.has-tip:hover .tip,
.has-tip:focus-within .tip,
.has-tip.tip-open .tip{ opacity:1; transform:translateY(0); pointer-events:auto; }

.site-footer{
  position:relative; margin:28px 0 40px;
  color:var(--muted);
}
.site-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.55), transparent);
}
.footer-inner{
  max-width:1400px; margin:0 auto; padding:16px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  backdrop-filter:blur(10px);
  display:grid; gap:10px;
  grid-template-columns: 1fr auto;
}
.footer-inner .links a{ margin-left:14px; color:#e8ecf8; text-decoration:none; }
.footer-inner .links a:hover{ color:var(--accent) }
.footer-inner a{ color:#e8ecf8; text-decoration:none; }
.footer-inner a:hover{ color:var(--accent) }

@media (max-width:800px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-inner .links a{ margin-left:0; margin-right:14px; display:inline-block }
}
.tip .champs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap:2px;
  margin-top:10px;
}
.tip .champ{
  display:grid;
  justify-items:center;
  gap:2px;
}
.tip .champ img{
  width:44px; height:44px; object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:4px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.tip .champ figcaption{
  font-size:10px; color:#e5e7eb; text-align:center;
  line-height:1.1;
}