/* =========================================================================
   DEAD WORLD RADIO — Consolidated Theme CSS (cleaned & de-duplicated)
   ========================================================================= */

/* ---------- Root & Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg-grad-1:#000033; --bg-grad-2:#330066; --bg-grad-3:#6600cc; --bg-grad-4:#ff00ff;
  --c-cyan:#00ffff; --c-magenta:#ff00ff; --c-text:#baf7ff; --c-muted:rgba(186,247,255,.65);
  --panel: rgba(0,0,0,.5); --panel-2: rgba(0,0,0,.35); --panel-3: rgba(0,0,0,.18);
  --grid: rgba(0,255,255,.1); --line: rgba(0,255,255,.15); --line-2: rgba(0,255,255,.12);
  --glow: 0 0 8px rgba(0,255,255,.35), 0 0 20px rgba(255,0,255,.15);
  --radius: 10px;
  --gap: 12px;
  --font-size: 22px;
  --panel-w: 280px;                /* used by right rail & chat presence */
}

body{
  font-family:'VT323', monospace; color:var(--c-cyan);
  font-size:var(--font-size); line-height:1.45; padding:10px; min-height:100vh;
  background:linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2), var(--bg-grad-3), var(--bg-grad-4));
  background-size:400% 400%; animation:gradientBG 30s ease infinite;
  overflow-x:hidden; overflow-wrap:break-word; word-break:break-word;
}
@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.container{
  max-width:1200px; margin:0 auto; padding:15px;
  background:rgba(0,0,0,.7); border:3px double var(--c-magenta); box-shadow:0 0 20px var(--c-magenta);
  position:relative; overflow:hidden;
}

/* CRT chrome */
.grid-overlay{position:absolute; inset:0; background-image:
  linear-gradient(var(--grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px; pointer-events:none; z-index:0;}
.scanlines{position:fixed; inset:0; background:repeating-linear-gradient(to bottom,transparent 0%, rgba(0,0,0,.2) 1px);
  background-size:100% 3px; z-index:1000; pointer-events:none; animation:scanline 8s linear infinite;}
@keyframes scanline{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.pixel-grid{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"><rect width="1" height="1" fill="%2300ffff" opacity="0.1"/></svg>');}

/* ---------- Header / Marquee ---------- */
header{border-bottom:2px solid var(--c-magenta); padding-bottom:10px; margin-bottom:15px; position:relative; z-index:1;}
.title{font-size:2.6rem; text-align:center; margin:6px 0; letter-spacing:3px; text-shadow:0 0 10px var(--c-cyan);}
.marquee{background:var(--panel); padding:5px; border:1px solid var(--c-magenta); margin:10px 0; overflow:hidden; white-space:nowrap; box-shadow:inset 0 0 5px var(--c-magenta);}
.marquee-content{display:inline-block; padding-left:100%; animation:marquee 55s linear infinite;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.blink{animation:blink 1s step-end infinite;} @keyframes blink{50%{opacity:0}}

/* ---------- Nav ---------- */
nav ul{list-style:none; margin:10px 0; display:flex; flex-wrap:wrap; gap:6px;}
nav a{display:block; padding:8px 12px; color:var(--c-cyan); background:var(--panel); border:1px solid var(--c-magenta); text-decoration:none;}
nav a:hover{background:rgba(255,0,255,.3); text-decoration:underline;}

/* ---------- Sections / Widgets ---------- */
.section,.widget{background:var(--panel); border:1px solid var(--c-magenta); padding:15px; margin-bottom:15px; border-radius:var(--radius);}
.section h2,.widget h3,.widget h4{color:var(--c-magenta); text-shadow:0 0 5px var(--c-cyan);}
.section h2{border-bottom:1px dashed var(--c-cyan); padding-bottom:5px; margin-bottom:10px; font-size:1.9rem;}
.widget h3,.widget h4{font-size:1.5rem; margin-bottom:10px;}

/* ---------- 3-Column Layout + Wide Mode ---------- */
.left-rail  { grid-area: left; }
.right-rail { grid-area: right; }
.main-content { grid-area: main; }

.layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 260px;
  grid-template-areas:"left main right";
  gap:var(--gap);
  align-items:start;
  position:relative;
  z-index:1;
}
.sidebar{display:flex; flex-direction:column; gap:15px;}
.left-rail,.right-rail,.main-content{min-width:0;}
.layout--wide{grid-template-columns:1fr; grid-template-areas:"main";}
.layout--wide .sidebar{display:none !important;}
@media (max-width: 760px){
  .layout{grid-template-columns:1fr; grid-template-areas:"main" "left" "right";}
}

/* ---------- Global Buttons & Inputs ---------- */
button,input,textarea,select{font:inherit; color:var(--c-text); background:transparent; border-radius:12px; outline:none;}
button,input[type=submit],input[type=button],a.button,a.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:8px 14px; border:1px solid var(--c-cyan);
  background:linear-gradient(180deg, rgba(0,255,255,.08), rgba(255,0,255,.06));
  color:var(--c-text); text-decoration:none; cursor:pointer; box-shadow:var(--glow);
  transition:transform .06s, box-shadow .06s, background .12s, opacity .12s;
}
button:hover,a.button:hover,a.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,255,255,.25), 0 0 22px rgba(255,0,255,.2);}
button:active,a.button:active,a.btn:active{transform:translateY(0); box-shadow:0 2px 8px rgba(0,255,255,.2);}
.button--danger{border-color:#ff4d88; color:#ffd9e6;}
button[disabled],[aria-disabled=true]{opacity:.55; cursor:not-allowed; filter:grayscale(.2);}

input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],textarea,select{
  width:100%; padding:10px 12px; border:1px solid rgba(0,255,255,.45); background:rgba(10,0,18,.55);
  color:var(--c-text); border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,0,255,.1);
}
textarea{resize:vertical; min-height:110px;}
select{appearance:none; padding-right:34px; background-image:
  linear-gradient(45deg, transparent 50%, var(--c-cyan) 50%),
  linear-gradient(135deg, var(--c-cyan) 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 4px), calc(100% - 10px) calc(50% - 4px);
  background-size:8px 8px; background-repeat:no-repeat;}
input::placeholder,textarea::placeholder{color:var(--c-muted);}
label{display:block; margin:0 0 6px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:800px){.form-row{grid-template-columns:1fr;}}

/* ---------- Blog Cards (Homepage) ---------- */
.postcard-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:10px;}
.postcard--layoutRight{
  display:grid; gap:10px; text-decoration:none; color:inherit; padding:12px;
  grid-template-columns:1fr 160px; grid-template-rows:auto 1fr auto;
  grid-template-areas:"title media" "desc media" "meta meta";
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--radius);
}
.postcard--layoutRight:hover{background:rgba(0,0,0,.24);}
.postcard__title{grid-area:title; margin:0 0 4px; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.15;}
.postcard__desc{grid-area:desc; margin:0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.postcard__media{grid-area:media; width:160px; height:160px; align-self:start; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.postcard__media img{width:100%; height:100%; object-fit:cover; display:block;}
.postcard__metaBar{grid-area:meta; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;}
.postcard__metaBar .muted{opacity:.85;}
.postcard__statsInline{display:inline-flex; gap:8px;}
.pill{padding:2px 8px; border:1px solid rgba(0,255,255,.25); border-radius:999px; background:rgba(0,0,0,.28); display:inline-flex; align-items:center; gap:6px; font-size:.95rem; line-height:1.1;}
@media (max-width:740px){
  .postcard--layoutRight{grid-template-columns:1fr; grid-template-areas:"title" "media" "desc" "meta";}
  .postcard__media{width:100%; height:200px;}
}

/* ---------- Right-rail Archive list ---------- */
#archive-container{max-height:none !important; overflow:visible !important;}
#archivelist{display:flex; flex-direction:column; gap:12px; padding:0; margin:15px 0 0;}
#archivelist li{list-style:none; padding:8px 0; border-bottom:1px dashed rgba(0,255,255,.3);}
#archivelist li:last-child{border-bottom:0;}
#archivelist a{display:block; padding:6px 10px; background:rgba(0,20,30,.4); border:1px solid rgba(0,255,255,.2); text-decoration:none; transition:.2s;}
#archivelist a:hover{background:rgba(0,40,60,.6); border-color:var(--c-magenta); box-shadow:0 0 8px rgba(255,0,255,.5);}

/* ---------- Admin Tables (wide pages) ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table{width:100%; border-collapse:collapse; table-layout:fixed;}
.table th,.table td{padding:8px 10px; border-bottom:1px solid rgba(0,255,255,.12); vertical-align:middle; white-space:normal; word-break:break-word;}
.table thead th{border-bottom:1px solid rgba(0,255,255,.3); text-align:left;}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.actions .button{padding:6px 10px; line-height:1;}

/* ---------- Forum / Bunker ---------- */
.forum-wrap{background:var(--panel-2); border:1px solid var(--line-2); border-radius:12px; padding:12px; box-shadow:0 0 0 1px rgba(0,255,255,.05) inset;}
.forum-breadcrumb{margin:6px 0 10px; font-size:.95rem; opacity:.9;}
.forum-header{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.forum-actions{display:flex; gap:8px; flex-wrap:wrap;}
.xf-forumIndex{border:1px solid var(--line-2); border-radius:10px; overflow:hidden;}
.xf-nodeRow{display:grid; grid-template-columns:56px 1fr 170px 190px; gap:10px; padding:10px; background:var(--panel-3); border-bottom:1px solid rgba(0,255,255,.08); text-decoration:none; color:inherit;}
.xf-nodeRow:hover{background:rgba(0,0,0,.26);}
.xf-nodeRow:last-child{border-bottom:0;}
.avatar--tile{width:48px; height:48px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(0,255,255,.06); font-weight:700; border:1px solid rgba(0,255,255,.15);}
.avatar--tile img{width:100%; height:100%; object-fit:cover; display:block;}
.xf-nodeRow__title{font-weight:800; margin:0;}
.xf-nodeRow__sub{font-size:.92rem; margin-top:2px;}
.xf-nodeRow__stats--inline{display:inline-flex; align-items:center; gap:8px;}
.xf-nodeRow__stats--inline .pill{font-size:.92rem;}
@media (max-width:1000px){ .xf-nodeRow{grid-template-columns:52px 1fr 160px;} .xf-nodeRow__last{display:none;} }
@media (max-width:760px){ .xf-nodeRow{grid-template-columns:48px 1fr;} }

.threadlist{border:1px solid var(--line-2); border-radius:10px; overflow:hidden;}
.threadlist-head,.threadlist-row{display:grid; grid-template-columns:1fr 110px 110px 180px; gap:8px; align-items:center;}
.threadlist-head{background:rgba(0,255,255,.06); border-bottom:1px solid var(--line-2); padding:10px 12px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:.95rem;}
.threadlist-row{padding:10px 12px; border-bottom:1px solid rgba(0,255,255,.08); text-decoration:none; color:inherit; background:var(--panel-3);}
.threadlist-row:hover{background:rgba(0,0,0,.28);}
.threadlist-row:last-child{border-bottom:0;}
.col-title .thread-title{font-size:1rem; margin:0 0 4px;}
.col-title .thread-sub{font-size:.9rem; opacity:.85;}
@media (max-width:900px){ .threadlist-head,.threadlist-row{grid-template-columns:1fr 90px 90px 120px;} }

/* Thread view posts */
.post-list{list-style:none; padding:0; margin:0;}
.post-row{display:grid; grid-template-columns:220px 1fr; gap:12px; padding:12px; border:1px solid var(--line-2); border-radius:10px; margin:0 0 10px; background:var(--panel-2);}
.post-aside{display:grid; grid-template-columns:58px 1fr; gap:10px; align-items:center;}
.avatar{width:58px; height:58px; border-radius:999px; display:grid; place-items:center; font-weight:700; font-size:1.1rem; background:
  radial-gradient(120px 70px at 10% 20%, rgba(0,255,255,.25), transparent 60%),
  radial-gradient(120px 80px at 80% 30%, rgba(255,0,255,.25), transparent 60%),
  rgba(20,20,28,.6); border:1px solid rgba(0,255,255,.2); box-shadow: inset 0 0 12px rgba(0,255,255,.08);}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:999px; display:block;}
.poster-name{font-weight:700;}
.post-meta{display:flex; gap:6px; align-items:center; margin-bottom:6px;}
.pill--tiny{padding:2px 6px; font-size:.78rem; border-radius:999px; border:1px solid rgba(0,255,255,.18); background:rgba(0,255,255,.08);}
.post-content :is(p,ul,ol,pre,blockquote){margin:0 0 8px;}
.post-actions{margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.inline-reply{display:grid; gap:8px; margin-top:8px; max-width:620px;}
.reply-box{padding:10px; border:1px solid var(--line-2); border-radius:10px; background:var(--panel-2); margin-bottom:10px;}
.reply-actions{margin-top:6px;}
@media (max-width:900px){ .post-row{grid-template-columns:1fr;} }

/* ---------- Misc ---------- */
.main-content img,.main-content iframe{max-width:100%;}
pre,code{white-space:pre-wrap; word-break:break-word;}

/* ---------- Optional: animated main title only ---------- */
.title--wavy{
  --wave-speed:8s;
  background:linear-gradient(90deg, var(--c-cyan), var(--c-magenta), var(--c-cyan));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:dwave var(--wave-speed) linear infinite, wobble 3.5s ease-in-out infinite;
}
@keyframes dwave{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes wobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}

/* =========================================================================
   CHAT — isolated scope so global styles don’t break it
   ========================================================================= */
.page-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.page-title .title-actions{margin-left:auto; display:flex; gap:8px; align-items:center;}

.lg-only{display:none;}
@media (min-width:900px){ .lg-only{display:block;} }

.chat-layout{display:grid; grid-template-columns:1fr; gap:var(--gap);}
@media (min-width:900px){
  .chat-layout{grid-template-columns:minmax(0,1fr) var(--panel-w); align-items:start;}
}
.chat-col{min-width:0;}

.presence-col .card{border:1px solid rgba(127,255,255,.25); border-radius:10px;}
.sticky-card{position:sticky; top:10px;}
.presence-list{display:flex; flex-direction:column; gap:10px;}
.presence-item{display:flex; align-items:center; gap:8px;}
.presence-item .avatar{
  width:26px; height:26px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:rgba(127,255,255,.08); border:1px solid rgba(127,255,255,.25); font-size:.8rem; font-weight:700;
}
.presence-item .avatar img{width:100%; height:100%; display:block; object-fit:cover;}

/* ---- CHAT SCOPE / MOBILE-FRIENDLY CONTAINER ---- */
.chat-scope, .chat-scope * { box-sizing: border-box; }
.chat-scope *::before, .chat-scope *::after { content: normal !important; }
.chat-scope ol, .chat-scope ul { list-style:none; padding-left:0; margin-left:0; }
.chat-scope{ font-size:16px; line-height:1.4; isolation:isolate; }
.chat-scope .chat-col{ max-width:960px; } /* nice cap on desktop */

.chat-scope .chat-shell{
  display:flex; flex-direction:column;
  height:var(--chat-h, 70vh);    /* bigger fallback so desktop shows more */
  min-height:260px;
}

.chat-scope .chat-messages{
  flex:1 1 auto;
  min-height:0;                  /* critical for flex child to shrink within shell */
  border:1px solid rgba(127,255,255,.25);
  background:rgba(127,255,255,.06);
  border-radius:10px;
  padding:10px;
  overflow:auto;
  display:flex; flex-direction:column; gap:8px;
  font-size:15px; line-height:1.4;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:rgba(127,255,255,.45) transparent;
}
.chat-scope .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.chat-scope .chat-messages::-webkit-scrollbar-track{ background: transparent; }
.chat-scope .chat-messages::-webkit-scrollbar-thumb{
  background: rgba(127,255,255,.45);
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}
.chat-scope .chat-messages::-webkit-scrollbar-thumb:hover{ background: rgba(127,255,255,.65); }

.jump-latest{
  position:sticky; bottom:8px; align-self:center; z-index:5; display:none;
  padding:6px 10px; border-radius:8px; border:1px solid rgba(127,255,255,.35);
  background:rgba(0,0,0,.5); cursor:pointer; font-size:.9rem;
}

/* Sticky input bar anchored to the bottom of the shell */
.chat-scope .chat-form{
  position:sticky; bottom:0; z-index:3;
  display:flex; gap:8px; align-items:center;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.25));
  backdrop-filter:blur(2px);
}
.chat-scope .chat-form input{ flex:1; min-width:0; }
.chat-scope .chat-form button{ white-space:nowrap; }

/* Messages */
.msg{
  display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:start;
  padding:4px 0; border-bottom:1px dashed rgba(127,255,255,.15);
}
.msg:last-child{ border-bottom:none; }

.avatar{
  width:34px; height:34px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:rgba(127,255,255,.08); border:1px solid rgba(127,255,255,.25); font-weight:700; font-size:.9rem;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.bubble{ padding:2px 0; }
.meta{ display:flex; gap:8px; align-items:center; margin-bottom:2px; font-size:.86rem; }
.meta .name{ font-weight:600; }
.meta .time{ opacity:.7; }

.msg-actions{ display:flex; align-items:center; gap:6px; height:34px; }
.btn-icon{
  background:transparent; color:inherit; border:1px solid rgba(127,255,255,.25);
  padding:2px 6px; border-radius:6px; cursor:pointer; font-size:.85rem;
}
.btn-icon:hover{ background:rgba(127,255,255,.1); }

.muted{ opacity:.75; }
.muted-note{ padding:4px 2px; }
/* ---------- Global player (desktop + mobile) ---------- */
#global-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  min-height: 56px;                 /* finger-friendly bar */
  width: 100%;
  flex-wrap: wrap;                   /* allow wrapping on narrow screens */
}

/* Make every direct child flex-safe */
#global-player > * {
  min-width: 0;                      /* IMPORTANT: allow shrink to avoid overflow */
  flex: 0 0 auto;
}

/* Buttons */
#global-player .button,
#gp-play, #gp-pause, #gp-live {
  padding: 10px 14px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Title + seek live nicely inline on wide screens */
#gp-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sliders */
#gp-seek { flex: 1 1 300px; width: 100%; min-width: 120px; }
#gp-vol  { flex: 0 0 140px; max-width: 140px; }

/* Normalize range inputs across mobile browsers */
#gp-seek[type=range],
#gp-vol[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  background: transparent;
}
#gp-seek[type=range]::-webkit-slider-runnable-track,
#gp-vol[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(127,255,255,.35);
  border-radius: 999px;
}
#gp-seek[type=range]::-webkit-slider-thumb,
#gp-vol[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  margin-top: -7px;                  /* center thumb on 4px track */
  background: var(--c-cyan);
  border: 1px solid rgba(255,0,255,.4);
  box-shadow: var(--glow);
}
#gp-seek[type=range]::-moz-range-track,
#gp-vol[type=range]::-moz-range-track {
  height: 4px; background: rgba(127,255,255,.35); border-radius: 999px;
}
#gp-seek[type=range]::-moz-range-thumb,
#gp-vol[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-cyan); border: 1px solid rgba(255,0,255,.4);
}

/* ------- Mobile layout tweaks ------- */
@media (max-width: 640px) {
  #global-player { gap: 8px 10px; }

  /* Row 1: primary controls (buttons) */
  #gp-play, #gp-pause, #gp-live { order: 1; }

  /* Row 2: title + seek full width */
  #gp-title { order: 2; flex: 1 1 100%; min-width: 0; }
  #gp-seek  { order: 3; flex: 1 1 100%; min-width: 0; }

  /* Row 3: volume full width (easier to hit) */
  #gp-vol   { order: 4; flex: 1 1 100%; max-width: none; }

  /* Keep any extra elements from forcing overflow */
  #global-player > * { max-width: 100%; }
}

/* Slightly tighter on very small screens */
@media (max-width: 360px) {
  #global-player { gap: 6px 8px; }
  #global-player .button,
  #gp-play, #gp-pause, #gp-live { padding: 8px 12px; }
}