/* Deutschheim.de Roleplay – V4 */
:root{
  --bg:#050810;
  --panel:#0A1120;
  --panel-2:#0E1830;
  --muted:#A7B6D8;
  --text:#F4F7FF;
  --blue:#2E6CFF;
  --red:#FF3B6A;
  --grad: linear-gradient(135deg, var(--blue), var(--red));
  --radius: 20px;
  --shadow-lg: 0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:
    radial-gradient(1200px 700px at -10% -10%, rgba(46,108,255,.22), transparent 55%),
    radial-gradient(1000px 600px at 110% -20%, rgba(255,59,106,.22), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1240px;margin:0 auto;padding:24px}
.topbar{height:3px;background:var(--grad)}

/* Sticky ribbon on very top to grab attention */
.ribbon{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(90deg, rgba(46,108,255,.25), rgba(255,59,106,.25));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ribbon .inner{display:flex;gap:12px;align-items:center;justify-content:center;padding:10px 16px;color:#fff}
.ribbon .dot{width:10px;height:10px;border-radius:50%;background:#ffd166;box-shadow:0 0 16px #ffd166}

/* Navigation */
header.site{
  position:sticky; top:42px; z-index:50;
  background:rgba(5,8,16,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:40px;height:40px}
.nav a{padding:10px 12px;border-radius:12px;opacity:.95;transition:background .2s ease}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.10)}

/* Big announcement banner */
.banner{
  position:relative; overflow:hidden; border-radius:18px; margin:18px 0 0; color:#fff;
  background:linear-gradient(90deg, rgba(46,108,255,.28), rgba(255,59,106,.28));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-lg);
}
.banner .inner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px}
.banner .msg{display:flex;gap:12px;align-items:center}
.banner .icon{font-size:1.8rem}
.banner .dismiss{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;padding:8px 12px;border-radius:12px;cursor:pointer}
.banner::after{
  content:""; position:absolute; inset:-2px; border-radius:20px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(46,108,255,.5), rgba(255,59,106,.5), rgba(46,108,255,.5));
  filter: blur(34px); opacity:.25; animation: spin 7s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

.hero{
  position:relative; overflow:hidden;
}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:64px 24px}
.hero .glass{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:26px; box-shadow: var(--shadow-lg);
}
.kicker{display:flex;gap:10px;align-items:center;color:#dfe8ff;font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.4px}
.tag{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
h1{font-size:clamp(2.4rem,4.8vw,3.8rem);margin:.2rem 0 .4rem}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:1.1rem;margin:.2rem 0 0}
.blob{
  height:320px;border-radius:40px;
  background:
   radial-gradient(280px 220px at 30% 30%, rgba(46,108,255,.55), transparent 45%),
   radial-gradient(260px 200px at 80% 70%, rgba(255,59,106,.55), transparent 45%),
   linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-lg);
}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--grad);color:#fff;font-weight:900;box-shadow: var(--shadow-sm);transition: transform .15s ease, filter .2s ease}
.btn:hover{transform:translateY(-2px);filter:saturate(1.1)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-weight:800}

/* Sections & Cards */
.section{padding:38px 24px}
.section h2{margin:0 0 12px;font-size:1.7rem}
.grid{display:grid;gap:24px}
.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.card{
  position:relative; border-radius:22px; padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.card .icon{font-size:1.4rem;opacity:.9}
.card h3{margin:10px 0 8px}
.card p{color:var(--muted);margin:0}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:24px;
  background: conic-gradient(from 0deg, rgba(46,108,255,.5), rgba(255,59,106,.5), rgba(46,108,255,.5));
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000,#000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; opacity:.2; filter: blur(12px);
}

/* Rules */
.rule-head{margin-top:20px;font-weight:900;letter-spacing:.3px}
.rule-intro{color:var(--muted)}
.rule-list{display:grid;gap:14px;margin-top:16px}
.rule{
  border-radius:16px; padding:14px 16px;
  background:linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-sm);
}
.rule strong{display:block;margin-bottom:4px}
.rule small{color:var(--muted)}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.member{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:18px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.member:hover{transform:translateY(-2px)}
.avatar{width:84px;height:84px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.name{font-weight:900;font-size:1.05rem}
.role{color:var(--muted);font-size:.94rem}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:.86rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2)}

footer{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding:26px;color:var(--muted)}

@media (max-width:980px){
  header.site{top:40px}
  .hero .wrap{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}