:root{
  --bg0:#050607;
  --bg1:#0b0f0d;
  --ink:#e8f3ee;
  --muted:#a7b7b0;
  --green:#39ff88;
  --green2:#12c96a;
  --red:#ff5e5e;
  --gold:#ffd36a;
  --card:#0c1110cc;
  --stroke:#1f2b26;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --fontDisplay: "Creepster", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontBody: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--fontBody);
  background: radial-gradient(1200px 800px at 50% 10%, #102017 0%, var(--bg0) 55%, #020303 100%);
  overflow-x:hidden;
}
button, textarea{font:inherit}
button:focus-visible, a:focus-visible, textarea:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.hidden{display:none !important}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Background FX */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.bgFog{
  position:absolute; inset:-40%;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(57,255,136,.08), transparent 60%),
    radial-gradient(closest-side at 70% 50%, rgba(57,255,136,.06), transparent 62%),
    radial-gradient(closest-side at 50% 70%, rgba(255,255,255,.04), transparent 65%);
  filter: blur(22px);
  animation: drift 18s linear infinite;
  opacity:.9;
}
.bgNoise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.18;
}
@keyframes drift{
  0%{transform:translate3d(-2%, -1%, 0) rotate(0deg)}
  50%{transform:translate3d(2%, 1%, 0) rotate(6deg)}
  100%{transform:translate3d(-2%, -1%, 0) rotate(0deg)}
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 50px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-bottom:1px solid rgba(31,43,38,.8);
  backdrop-filter: blur(10px);
  background: rgba(5,6,7,.72);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none;}
.brandMark{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(57,255,136,.18), rgba(57,255,136,.05));
  border:1px solid rgba(57,255,136,.28);
  box-shadow: 0 0 28px rgba(57,255,136,.14);
  font-weight:800;
}
.brandText{font-weight:700; letter-spacing:.3px; opacity:.95}
.topnav{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.topnav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:12px;}
.topnav a:hover{color:var(--ink); background:rgba(57,255,136,.06)}
.topnav a.active{color:var(--ink); background:rgba(57,255,136,.10); border:1px solid rgba(57,255,136,.18)}
.statusPill{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(31,43,38,.9); background: rgba(12,17,16,.55);}
.dot{width:10px; height:10px; border-radius:50%}
.dot--yellow{background:var(--gold)}
.dot--green{background:var(--green)}
.dot--red{background:var(--red)}
.statusText{color:var(--muted); font-weight:700; font-size:13px; white-space:nowrap}

.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; margin-top:18px;}
.heroLeft, .panel, .chatShell, .note{background: var(--card); border:1px solid rgba(31,43,38,.85); border-radius: var(--radius); box-shadow: var(--shadow);}
.heroLeft{padding:22px;}
.hero h1{font-family: var(--fontDisplay); font-size: 46px; margin: 0 0 8px; letter-spacing: 1px;}
.glow{color:var(--green); text-shadow: 0 0 18px rgba(57,255,136,.3)}
.sub{margin:0 0 16px; color:var(--muted); line-height:1.5; font-size:16px;}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px}
.btn{border:1px solid rgba(31,43,38,.95); background: rgba(10,14,13,.6); color:var(--ink); border-radius: 14px; padding: 10px 14px; font-weight:800; text-decoration:none; cursor:pointer; transition: transform .08s ease, background .12s ease, border-color .12s ease;}
.btn:hover:not(:disabled){transform: translateY(-1px); border-color: rgba(57,255,136,.25)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn--primary{background: linear-gradient(180deg, rgba(57,255,136,.20), rgba(57,255,136,.06)); border-color: rgba(57,255,136,.35); box-shadow: 0 0 20px rgba(57,255,136,.12);}
.btn--ghost{background: rgba(255,255,255,.03)}
.micro{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; font-weight:800; padding:7px 10px; border-radius:999px; border:1px solid rgba(31,43,38,.9); background: rgba(255,255,255,.03); color: var(--muted);}
.panel{padding:18px;}
.panelTitle{font-weight:900; letter-spacing:.4px; color:var(--ink); margin-bottom:10px;}
.divider{height:1px; background: rgba(31,43,38,.85); margin:14px 0;}
.featureRoom{display:flex; gap:12px; align-items:flex-start}
.featureIcon{width:42px; height:42px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(57,255,136,.25); background: rgba(57,255,136,.08);}
.featureName{font-weight:900}
.featureDesc{color:var(--muted); margin-top:3px; line-height:1.35; font-size:13px;}
.safetyList{display:grid; gap:8px; color:var(--muted); font-weight:800; font-size:13px}
.toggle{width:100%; text-align:left; border-radius:14px; padding:10px 12px; border:1px solid rgba(31,43,38,.9); background: rgba(255,255,255,.03); color: var(--muted); font-weight:800; cursor:pointer; margin-top:8px;}
.toggle:hover{border-color: rgba(57,255,136,.2); color:var(--ink)}

.roomsHeader{margin:22px 4px 10px}
.roomsHeader h2{margin:0; font-size:20px}
.roomsHeader p{margin:6px 0 0; color:var(--muted); line-height:1.5}
.roomsGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top: 14px;}
.room{position:relative; background: rgba(12,17,16,.62); border:1px solid rgba(31,43,38,.9); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); cursor:pointer; overflow:hidden; min-height:152px;}
.room:hover,.room.isActive{border-color: rgba(57,255,136,.38)}
.room.isActive{box-shadow:0 0 0 1px rgba(57,255,136,.22), var(--shadow)}
.room::before{content:""; position:absolute; inset:-40%; background: radial-gradient(closest-side at 30% 30%, rgba(57,255,136,.10), transparent 60%); filter: blur(18px); opacity:.8;}
.roomTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative}
.roomTitle{font-weight:1000; letter-spacing:.3px}
.badge{font-size:11px; font-weight:1000; padding:6px 9px; border-radius:999px; border:1px solid rgba(31,43,38,.9); background: rgba(255,255,255,.03); color:var(--muted); white-space:nowrap;}
.roomDesc{position:relative; margin:10px 0 12px; color:var(--muted); line-height:1.45; font-size:13px;}
.roomFoot{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px}
.locked{display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:900; font-size:12px}
.unlocked{color:var(--green)}
.roomBtn{padding:8px 10px; border-radius: 12px; border:1px solid rgba(31,43,38,.9); background: rgba(255,255,255,.03); color:var(--ink); font-weight:900; cursor:pointer;}
.roomBtn:disabled{opacity:.45; cursor:not-allowed}

.chatShell{display:grid; grid-template-columns: 320px 1fr; gap:0; margin-top:18px; overflow:hidden; min-height:580px;}
.roomInfo{padding:18px; border-right:1px solid rgba(31,43,38,.85); background:rgba(5,6,7,.22)}
.roomInfoIcon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(57,255,136,.22);background:rgba(57,255,136,.07);font-size:28px;margin-bottom:12px}
.roomInfo h2{margin:0 0 6px;font-size:22px}
.roomInfo p{margin:0;color:var(--muted);line-height:1.45}
.themeNote{margin-top:14px;border:1px solid rgba(31,43,38,.85);border-radius:16px;padding:12px;color:var(--muted);font-size:13px;font-weight:800;background:rgba(255,255,255,.03)}
.chatPanel{display:flex;flex-direction:column;min-width:0;}
.chatNotice{margin:auto;max-width:440px;text-align:center;color:var(--muted);padding:24px;}
.chatNotice h3{color:var(--ink);margin:0 0 8px;}
.rulesBox{margin:14px 14px 0;border:1px solid rgba(255,211,106,.24);background:rgba(255,211,106,.06);border-radius:16px;padding:12px;color:var(--muted);line-height:1.4;font-size:13px;}
.rulesBox strong{color:var(--gold)}
.messagesList{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:620px;scroll-behavior:smooth;}
.message{border:1px solid rgba(31,43,38,.85);background:rgba(255,255,255,.03);border-radius:18px;padding:12px;}
.message.isMine{border-color:rgba(57,255,136,.24);background:rgba(57,255,136,.045)}
.message.isDeleted{opacity:.72;font-style:italic;color:var(--muted)}
.messageTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.sender{display:flex;align-items:center;gap:9px;min-width:0;}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid rgba(57,255,136,.22);background:rgba(57,255,136,.07);display:grid;place-items:center;font-weight:1000;overflow:hidden;flex:0 0 auto;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.senderBtn{border:0;background:transparent;color:var(--ink);font-weight:1000;cursor:pointer;padding:0;text-align:left;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.time{color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap;}
.replyPreview{border-left:3px solid rgba(57,255,136,.4);padding:7px 9px;margin-bottom:8px;background:rgba(0,0,0,.18);border-radius:10px;color:var(--muted);font-size:12px;line-height:1.35;}
.replyPreview strong{color:var(--ink)}
.messageText{white-space:pre-wrap;word-break:break-word;line-height:1.45;color:var(--ink);}
.mention{color:var(--green);font-weight:1000;}
.messageActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center;}
.msgAction{border:1px solid rgba(31,43,38,.85);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900;cursor:pointer;}
.msgAction:hover{border-color:rgba(57,255,136,.22);color:var(--ink)}
.msgAction.danger:hover{border-color:rgba(255,94,94,.35);color:#ffd1d1}
.reactionCounts{display:flex;gap:6px;flex-wrap:wrap;}
.reactionPill{border:1px solid rgba(57,255,136,.18);background:rgba(57,255,136,.06);border-radius:999px;padding:5px 8px;font-size:12px;font-weight:900;color:var(--ink)}
.messageForm{border-top:1px solid rgba(31,43,38,.85);padding:12px;background:rgba(5,6,7,.36);}
.replyBar{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(57,255,136,.22);background:rgba(57,255,136,.06);border-radius:14px;padding:8px 10px;margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:800;}
.replyBar button{border:0;background:transparent;color:var(--ink);cursor:pointer;font-weight:1000;}
#messageInput{width:100%;resize:vertical;min-height:58px;max-height:160px;border-radius:16px;border:1px solid rgba(31,43,38,.95);background:rgba(0,0,0,.28);color:var(--ink);padding:12px;line-height:1.4;}
#messageInput::placeholder{color:#7f9188}
.composerBottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;}
.composerHint{color:var(--muted);font-size:12px;font-weight:800;}
.footerNote{margin-top:18px}
.note{padding: 14px 16px; color:var(--muted);}
.noteTitle{color:var(--ink); font-weight:1000; margin-bottom:6px}
.note ul{margin:8px 0 0; padding-left:18px}
.note li{margin:6px 0}

.reduce-motion *{animation: none !important; transition: none !important; scroll-behavior:auto !important}

body.room-slasher{background:radial-gradient(900px 600px at 50% 10%,#1c1114 0%,#070506 58%,#020202 100%)}
body.room-mothership{background:radial-gradient(900px 600px at 50% 10%,#102222 0%,#050809 58%,#020202 100%)}
body.room-seance{background:radial-gradient(900px 600px at 50% 10%,#201829 0%,#07060a 58%,#020202 100%)}
body.room-bloodbound{background:radial-gradient(900px 600px at 50% 10%,#241014 0%,#080405 58%,#020202 100%)}
body.room-moonlit{background:radial-gradient(900px 600px at 50% 10%,#111d2b 0%,#05080b 58%,#020202 100%)}
body.room-graveyard{background:radial-gradient(900px 600px at 50% 10%,#102017 0%,#050607 58%,#020202 100%)}

@media (max-width: 960px){
  .hero{grid-template-columns: 1fr}
  .topnav{display:none}
  .roomsGrid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .chatShell{grid-template-columns:1fr;}
  .roomInfo{border-right:0;border-bottom:1px solid rgba(31,43,38,.85)}
}
@media (max-width: 560px){
  .wrap{padding-inline:12px}
  .hero h1{font-size:38px}
  .roomsGrid{grid-template-columns: 1fr}
  .topbar{align-items:flex-start;flex-direction:column}
  .statusPill{width:100%}
  .messagesList{max-height:540px;padding:10px}
  .messageTop{align-items:flex-start;}
  .composerBottom{align-items:stretch;flex-direction:column}
  .composerBottom .btn{width:100%}
}
.message.isTarget{border-color:rgba(255,211,106,.6);box-shadow:0 0 0 1px rgba(255,211,106,.28), 0 0 22px rgba(255,211,106,.12)}


/* Split page chat room layout */
.roomBackBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 16px;
  flex-wrap: wrap;
}

.backLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(31,43,38,.9);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(12,17,16,.55);
}

.backLink:hover {
  border-color: rgba(57,255,136,.28);
  background: rgba(57,255,136,.06);
}

.roomPageTools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.compactToggle {
  width: auto;
  white-space: nowrap;
  margin: 0;
}

.chatShell--roomPage {
  display: block;
  margin-top: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.roomChangeBtn {
  display: inline-flex;
  margin-top: 14px;
  justify-content: center;
}

.roomFoot .roomBtn {
  text-decoration: none;
  position: relative;
}

@media (max-width: 560px) {
  .roomBackBar {
    align-items: stretch;
    flex-direction: column;
  }

  .roomPageTools {
    flex-direction: column;
  }

  .compactToggle {
    width: 100%;
  }
}

.chatShell--roomPage .roomInfo {
  width: 100%;
  border-right: 0;
  border-bottom: 1px solid rgba(31,43,38,.85);
  padding: 28px 28px 20px;
  margin-bottom: 0;
}

.chatShell--roomPage .chatPanel {
  width: 100%;
}

.chatShell--roomPage .messagesList {
  min-height: 240px;
  max-height: 460px;
}

.chatShell--roomPage .messageForm {
  border-top: 1px solid rgba(31,43,38,.85);
}

.chatShell--roomPage .chatStage {
  width: 100%;
}

.messageList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.messageCard,
.message,
.chatMessage {
  border-radius: 18px;
}

.chatFeed {
  min-height: 280px;
  max-height: 460px;
  overflow-y: auto;
}

/* =========================================================
   Site header repair for Chat Rooms pages
   Keeps bell + avatar dropdown styled instead of plain links
========================================================= */

.site-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.88);
  border-bottom: 1px solid rgba(57, 255, 136, 0.16);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  color: var(--green);
  font-weight: 1000;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--green);
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(57, 255, 136, 0.35);
  border-radius: 10px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.25);
}

.main-nav a:hover,
.main-nav a.active,
#navComingSoon {
  background: rgba(57, 255, 136, 0.10);
  border-color: rgba(57, 255, 136, 0.65);
  color: #ffffff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.notif-btn {
  border: 0;
  background: transparent;
  color: var(--gold);
  font-size: 24px;
  cursor: pointer;
  position: relative;
  padding: 6px;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b3b;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
  display: grid;
  place-items: center;
}

.notif-dropdown {
  position: absolute;
  top: 52px;
  right: 58px;
  width: min(340px, 86vw);
  max-height: 420px;
  overflow-y: auto;
  background: rgba(7, 10, 9, 0.98);
  border: 1px solid rgba(57, 255, 136, 0.28);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  padding: 12px;
  z-index: 2000;
}

.notif-dropdown h4 {
  margin: 0 0 8px;
  color: var(--ink);
}

.notif-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-empty {
  color: var(--muted);
  margin: 8px 0 0;
}

.user-menu {
  position: relative;
}

.avatar-btn {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: rgba(57,255,136,.08);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* IMPORTANT: keeps profile/support/logout links from showing across the top */
.dropdown {
  display: none;
  position: absolute;
  top: 56px;
  right: 0;
  width: 220px;
  background: rgba(7, 10, 9, 0.98);
  border: 1px solid rgba(57, 255, 136, 0.28);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 2000;
}

.user-menu.open .dropdown,
.user-menu.active .dropdown,
.dropdown.show,
.dropdown.open {
  display: grid;
  gap: 4px;
}

.dropdown a {
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
}

.dropdown a:hover {
  background: rgba(57, 255, 136, 0.10);
  color: var(--green);
}

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .header-right {
    align-self: flex-end;
  }
}

/* =========================================================
   Room wallpapers + room card previews
========================================================= */

body.has-room-bg {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.58), rgba(0,0,0,.88)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.82)),
    var(--room-bg-image);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.has-room-bg .bgFog {
  opacity: .45;
}

body.has-room-bg .bgNoise {
  opacity: .22;
}

body.has-room-bg .chatShell,
body.has-room-bg .note,
body.has-room-bg .roomBackBar .backLink,
body.has-room-bg .roomPageTools .toggle {
  backdrop-filter: blur(10px);
}

.room.hasPreview {
  background-image:
    linear-gradient(to bottom, rgba(2,3,3,.62), rgba(2,3,3,.92)),
    var(--room-card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.room.hasPreview::before {
  background:
    radial-gradient(closest-side at 30% 30%, rgba(57,255,136,.12), transparent 60%),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.38));
}

/* Inline chat replies, similar to forum reply behavior */
.inlineReplyBox {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(57,255,136,.22);
  background: rgba(0,0,0,.28);
  border-radius: 16px;
}

.inlineReplyTitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.inlineReplyTitle strong {
  color: var(--ink);
}

.inlineReplyPreview {
  border-left: 3px solid rgba(57,255,136,.45);
  padding: 7px 9px;
  margin-bottom: 10px;
  background: rgba(57,255,136,.05);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

.inlineReplyInput {
  width: 100%;
  resize: vertical;
  min-height: 54px;
  max-height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(31,43,38,.95);
  background: rgba(0,0,0,.35);
  color: var(--ink);
  padding: 10px;
}

.inlineReplyActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .inlineReplyActions {
    flex-direction: column;
  }

  .inlineReplyActions button {
    width: 100%;
  }
}

/* =========================================================
   BRIGHTER ROOM BACKGROUNDS - show actual wallpaper
   2026-05-30
========================================================= */

/* Room page wallpaper: remove the heavy dark overlays */
body.has-room-bg {
  background-image: var(--room-bg-image) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Remove fog/noise darkening on room wallpaper pages */
body.has-room-bg .bgFog,
body.has-room-bg .bgNoise {
  display: none !important;
}

/* Make the main chat container more see-through */
body.has-room-bg .chatShell {
  background: rgba(5, 8, 7, 0.72) !important;
  backdrop-filter: none !important;
}

/* Make room info area less dark */
body.has-room-bg .roomInfo {
  background: rgba(5, 8, 7, 0.55) !important;
}

/* Make message area less dark */
body.has-room-bg .chatPanel {
  background: rgba(5, 8, 7, 0.35) !important;
}

/* Let the wallpaper show through rules/message boxes a little more */
body.has-room-bg .rulesBox,
body.has-room-bg .message,
body.has-room-bg .messageForm,
body.has-room-bg .themeNote,
body.has-room-bg .note {
  background: rgba(5, 8, 7, 0.62) !important;
  backdrop-filter: none !important;
}

/* Keep buttons readable but less black */
body.has-room-bg .backLink,
body.has-room-bg .roomPageTools .toggle,
body.has-room-bg .btn {
  background: rgba(5, 8, 7, 0.68) !important;
  backdrop-filter: none !important;
}

/* =========================================================
   BRIGHTER ROOM CARD PREVIEWS
   2026-05-30
========================================================= */

/* Remove the heavy black overlay from room preview cards */
.room.hasPreview {
  background-image:
    linear-gradient(to bottom, rgba(2,3,3,.18), rgba(2,3,3,.45)),
    var(--room-card-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Remove the extra dark/green haze layer */
.room.hasPreview::before {
  display: none !important;
}

/* Add a softer text readability layer only behind text/buttons */
.room.hasPreview .roomTop,
.room.hasPreview .roomDesc,
.room.hasPreview .roomFoot {
  position: relative;
  z-index: 2;
}

/* Optional: make room text easier to read without darkening whole image */
.room.hasPreview .roomTitle,
.room.hasPreview .roomDesc,
.room.hasPreview .unlocked,
.room.hasPreview .badge,
.room.hasPreview .roomBtn {
  text-shadow: 0 2px 6px rgba(0,0,0,.85);
}

.editedTag {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-style: italic;
  color: rgba(232,243,238,.62);
}

/* Clickable @mentions should look like text, not buttons */
.messageText .mention,
.messageText .mention--clickable,
.messageText button.mention,
.messageText button.mention--clickable {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #00FF00 !important;
  font: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

.messageText .mention:hover,
.messageText .mention--clickable:hover,
.messageText button.mention:hover,
.messageText button.mention--clickable:hover {
  color: #00FF00 !important;
  text-decoration: underline !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.75);
}

/* Sender usernames beside profile pictures */
.message .senderBtn,
.messageTop .senderBtn,
.sender .senderBtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #00FF00 !important;
  font: inherit !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.message .senderBtn:hover,
.messageTop .senderBtn:hover,
.sender .senderBtn:hover {
  color: #00FF00 !important;
  text-decoration: underline !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.75);
}

/* Mention dropdown username text */
.mentionSuggestName {
  color: #00FF00 !important;
  font-weight: 900 !important;
}

.message .avatar,
.messageTop .avatar,
.sender .avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 0, 0.12);
  border: 1px solid rgba(0, 255, 0, 0.7);
}

.message .avatar img,
.messageTop .avatar img,
.sender .avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}