:root{
  --bg-deep:#0c0f1a;
  --bg-panel:#161c2e;
  --gold:#f3c344;
  --gold-soft:#f7d978;
  --magenta:#ff5d8f;
  --teal:#3ddad7;
  --text-main:#f4f1e8;
  --text-dim:#9aa3bd;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  background:radial-gradient(ellipse at top, #1c2440 0%, var(--bg-deep) 60%);
  color:var(--text-main);
  min-height:100vh;
  line-height:1.6;
}

.display{font-family:'Georgia','Times New Roman',serif;font-weight:700;}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 5%;
  border-bottom:1px solid rgba(243,195,68,0.15);
  position:sticky;
  top:0;
  background:rgba(12,15,26,0.9);
  backdrop-filter:blur(8px);
  z-index:10;
}

.logo{
  font-size:1.6rem;
  letter-spacing:2px;
  color:var(--gold);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo span{color:var(--magenta);}

nav a{
  color:var(--text-dim);
  text-decoration:none;
  margin-left:24px;
  font-size:0.9rem;
  transition:color .2s;
}
nav a:hover{color:var(--gold-soft);}

main{
  max-width:760px;
  margin:0 auto;
  padding:60px 5% 80px;
}

main h1{
  font-size:2.4rem;
  margin-bottom:6px;
}

main .updated{
  color:var(--text-dim);
  font-size:0.85rem;
  margin-bottom:36px;
}

main h2{
  font-size:1.35rem;
  color:var(--gold-soft);
  margin:32px 0 12px;
}

main h3{
  font-size:1.05rem;
  color:var(--teal);
  margin:20px 0 8px;
}

main p, main li{
  color:var(--text-dim);
  font-size:0.96rem;
  margin-bottom:12px;
}

main ul{
  padding-left:22px;
  margin-bottom:12px;
}

main a{
  color:var(--gold);
  text-decoration:underline;
}

main strong{color:var(--text-main);}

.notice{
  border-left:3px solid var(--magenta);
  padding:14px 18px;
  background:rgba(255,93,143,0.06);
  border-radius:0 8px 8px 0;
  margin:24px 0;
}
.notice p{color:var(--text-main);margin-bottom:0;}

footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:36px 5%;
  text-align:center;
  color:var(--text-dim);
  font-size:0.82rem;
}
footer .links{
  margin:14px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
footer .links a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:0.85rem;
}
footer .links a:hover{color:var(--gold-soft);}
footer .age{
  display:inline-block;
  margin-top:10px;
  border:1px solid var(--gold);
  color:var(--gold);
  padding:4px 12px;
  border-radius:6px;
  font-weight:700;
  letter-spacing:2px;
}

/* Cookie banner */
#cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--bg-panel);
  border-top:1px solid rgba(243,195,68,0.25);
  padding:18px 5%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index:100;
  box-shadow:0 -10px 30px rgba(0,0,0,0.4);
}
#cookie-banner p{
  color:var(--text-dim);
  font-size:0.88rem;
  margin:0;
  max-width:620px;
}
#cookie-banner a{color:var(--gold);text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-btn{
  padding:10px 20px;
  border-radius:8px;
  border:none;
  font-weight:700;
  font-size:0.88rem;
  cursor:pointer;
}
.cookie-accept{
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-soft) 100%);
  color:#1a1305;
}
.cookie-reject{
  background:transparent;
  border:1px solid rgba(244,241,232,0.25);
  color:var(--text-main);
}

@media(max-width:700px){
  nav{display:none;}
  main h1{font-size:1.9rem;}
}