:root { --bg:#17110c; --card:#241a12; --gold:#d9a441; --red:#a83a2a; --text:#f1e6d3; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family: Georgia, serif; line-height:1.5; }
a { color:var(--gold); }
header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#0e0905; border-bottom:3px solid var(--gold); }
.logo { font-size:1.6rem; font-weight:bold; color:var(--text); text-decoration:none; letter-spacing:2px; }
.logo span, h1 span { color:var(--gold); }
nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
nav a { text-decoration:none; }
main { max-width:960px; margin:2rem auto; padding:0 1rem; }
footer { text-align:center; padding:2rem; opacity:.6; }
.btn, button { background:var(--gold); color:#17110c; border:0; padding:.5rem 1rem; border-radius:4px; font-weight:bold; cursor:pointer; text-decoration:none; display:inline-block; font-family:inherit; }
.btn.alt { background:var(--red); color:#fff; }
form.inline { display:inline; } form.inline button { background:none; color:var(--gold); padding:0; font-weight:normal; }
.hero { text-align:center; padding:4rem 1rem; background:linear-gradient(#2d1d10,#17110c); border-radius:8px; margin-bottom:2rem; }
.hero h1 { font-size:3.5rem; margin:0; letter-spacing:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.platform-links { display:flex; flex-wrap:wrap; gap:2rem .6rem; margin:.75rem 0 1.5rem; }
.platform-links .btn { font-size:.95rem; }
.home-page { --home-border:#493522; }
.home-page .hero { position:relative; display:flex; min-height:330px; align-items:center; justify-content:space-between; overflow:hidden; padding:3.5rem 4rem; border:1px solid var(--home-border); border-radius:14px; margin-bottom:1.5rem; background:radial-gradient(ellipse at 82% 48%,rgba(217,164,65,.2),transparent 36%),linear-gradient(120deg,#302013 0%,#1e150e 58%,#17110c 100%); text-align:left; }
.hero-copy { position:relative; z-index:1; max-width:620px; }
.eyebrow { margin:0 0 .7rem; color:var(--gold); font-family:Arial,sans-serif; font-size:.75rem; font-weight:bold; letter-spacing:.16em; text-transform:uppercase; }
.home-page .hero h1 { font-size:clamp(2.8rem,7vw,5.3rem); line-height:1; letter-spacing:.045em; }
.hero-tagline { max-width:440px; margin:1rem 0 .6rem; color:#d5c6b1; font-size:1.2rem; }
.ai-disclosure.publisher-credit { margin-top:-1.2rem; font-style:normal; }
.ai-disclosure { max-width:440px; margin:0 0 1.6rem; color:#b5a690; font-family:Arial,sans-serif; font-size:.8rem; font-style:italic; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-actions .btn { padding:.75rem 1.1rem; border:1px solid var(--gold); }
.hero-actions .btn span { margin-left:.4rem; }
.hero-actions .btn.alt { border-color:#75402f; background:transparent; color:var(--text); }
.hero-mark { position:absolute; right:3rem; top:50%; color:rgba(217,164,65,.09); font-family:Arial,sans-serif; font-size:clamp(9rem,23vw,17rem); font-weight:900; letter-spacing:-.12em; line-height:1; transform:translateY(-53%); user-select:none; }
.home-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem; }
.home-panel { min-width:0; padding:1.7rem; border:1px solid #5a4229; border-top:4px solid var(--gold); border-radius:12px; background:linear-gradient(145deg,#33241a,#271b12); box-shadow:0 10px 28px rgba(0,0,0,.45); }
.home-panel h2 { margin:0 0 1rem; font-size:1.65rem; }
.news-card { margin:0 0 .75rem; padding:1.1rem; border:1px solid #3a2a1c; border-radius:8px; background:rgba(10,7,4,.2); }
.news-card h3 { margin:.25rem 0; font-size:1.15rem; }
.news-card p { margin:.5rem 0 0; color:#d5c6b1; }
.empty-note, .panel-intro { color:#c7b9a6; }
.panel-intro { margin:-.5rem 0 1.25rem; }
.text-link { display:inline-block; margin-top:.4rem; font-weight:bold; text-decoration:none; }
.text-link span { margin-left:.3rem; }
.link-group-title { margin:1.2rem 0 .55rem; font-size:.95rem; }
.platform-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.5rem 0 1rem; }
.platform-link { display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .75rem; border:1px solid #493522; border-radius:7px; background:rgba(10,7,4,.2); color:var(--text); font-size:.9rem; text-decoration:none; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.platform-link span { color:var(--gold); }
.platform-link:hover { transform:translateY(-2px); border-color:var(--gold); background:#302013; }
.social-title { margin-top:1.25rem; }
.social-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
.visitor-count { margin:1.25rem 0 0; color:#c7b9a6; font-family:Arial,sans-serif; font-size:.8rem; text-align:center; }
.visitor-count strong { margin-right:.25rem; color:var(--gold); font-size:.95rem; }
@media (max-width:680px) {
  .home-page .hero { min-height:280px; padding:2.5rem 1.5rem; }
  .hero-mark { right:1rem; font-size:10rem; }
  .home-grid { grid-template-columns:1fr; }
  .home-panel { padding:1.35rem; }
}
@media (max-width:380px) {
  .platform-links { grid-template-columns:1fr; }
  .home-page .hero h1 { font-size:2.55rem; }
}
article, .player, .tracks li { background:var(--card); padding:1rem; border-radius:6px; margin-bottom:1rem; }
article h3 { margin:0; }
small { opacity:.7; }
.player audio { width:100%; margin-top:.5rem; }
.tracks { list-style:none; padding:0; }
.tracks li { display:flex; gap:1rem; align-items:center; }
.tracks li div { flex:1; } .tracks li.active { border-left:4px solid var(--gold); }
.tracks img { width:60px; height:60px; object-fit:cover; border-radius:4px; }
pre { white-space:pre-wrap; font-family:inherit; }
.form { max-width:420px; } .form input[type=text], .form input[type=email], .form input[type=password] { width:100%; padding:.5rem; }
.form .helptext, .form ul { font-size:.8rem; opacity:.7; }
.messages { list-style:none; margin:0; padding:.75rem 2rem; background:var(--red); }
.chatlog { height:420px; overflow-y:auto; background:var(--card); padding:1rem; border-radius:6px; }
.chatlog div { margin-bottom:.75rem; overflow-wrap:anywhere; }
.staff { color:var(--gold); }
.chatform { display:flex; gap:.5rem; margin-top:.5rem; } .chatform input { flex:1; padding:.6rem; }
.table { width:100%; border-collapse:collapse; } .table th, .table td { text-align:left; padding:.5rem; border-bottom:1px solid #3a2a1c; }
.tag { padding:.1rem .5rem; border-radius:10px; font-size:.75rem; font-family:sans-serif; } .tag.ok { background:#2f6b2f; } .tag.bad { background:var(--red); }
.filters { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; } .filters input, .filters select { padding:.5rem; }
.actions form { display:flex; gap:.5rem; flex-wrap:wrap; } button.danger { background:#7a1d1d; color:#fff; }
article form.inline { float:right; } article form.inline button { color:var(--red); }
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem; align-items:start; }
.account-card { padding:1.5rem; border:1px solid #5a4229; border-top:4px solid var(--gold); border-radius:12px; background:linear-gradient(145deg,#33241a,#271b12); }
.account-card h2 { margin:0 0 1rem; }
.account-card .form { max-width:none; } .account-card .form input[type=password], .account-card .form input[type=text] { width:100%; padding:.5rem; }
.avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; vertical-align:middle; border:2px solid var(--gold); }
.avatar-lg { width:96px; height:96px; }
.avatar-empty { display:inline-flex; align-items:center; justify-content:center; background:#0e0905; color:var(--gold); font-size:2.2rem; font-weight:bold; }
.avatar-row { margin-bottom:1rem; }
.chatmsg { display:flex; gap:.6rem; align-items:flex-start; }
.chatmsg .avatar { flex:none; width:36px; height:36px; }
.chatmsg .avatar-empty { font-size:1rem; }

/* Responsive: tablets and phones */
img { max-width:100%; }
@media (max-width:820px) {
  header { padding:.8rem 1rem; gap:.5rem; }
  main { margin:1.25rem auto; }
  nav { gap:.25rem .9rem; }
  nav a, nav form.inline button { padding:.55rem .15rem; }
  .home-page .hero { padding:2.5rem 2rem; }
}
@media (max-width:600px) {
  header { flex-direction:column; align-items:flex-start; }
  .logo { font-size:1.35rem; }
  nav { width:100%; font-size:1.02rem; }
  nav .btn { padding:.5rem 1rem; }
  h1 { font-size:1.8rem; }
  .home-page .hero { min-height:0; padding:2rem 1.25rem; }
  .hero-tagline { font-size:1.05rem; }
  .hero-actions .btn { width:100%; text-align:center; }
  .tracks li { flex-wrap:wrap; }
  .tracks li div { flex:1 1 55%; min-width:0; overflow-wrap:anywhere; }
  .tracks li .play { width:100%; padding:.7rem 1rem; }
  .chatlog { height:55vh; min-height:280px; }
  .chatform input, .form input[type=text], .form input[type=email], .form input[type=password] { font-size:16px; }
  .chatform button { padding:.6rem 1.2rem; }
  .table { display:block; overflow-x:auto; white-space:nowrap; }
  .account-card, .home-panel { padding:1.15rem; }
  .messages { padding:.75rem 1rem; }
  footer { padding:1.5rem 1rem; }
}