/* =========================================
   Retro Chat (polished old-school)
   ========================================= */

:root{
  --bg: #000;

  /* bars */
  --panel: #19196a;       /* deep navy/purple */
  --panel2: #0b0b33;      /* darker bar */

  --border: #5f5f8a;      /* retro border */

  /* “classic grey” UI */
  --btnbg: #efefef;
  --btnbd: #9d9d9d;

  /* TEXT TUNING (less blinding) */
  --text: #d7d7d7;
  --muted: #a9a9a9;
  --ts: #a7a7a7;
  --user: #dcdcdc;

  /* staff roles (chat identity roles) */
  --helper: #78F57C;
  --moderator: #ffd14a;
  --admin: #55e6ff;

  /* ✅ member tiers (users.role) */
  --premium: #cfcfcf;     /* silver */
  --sponsor: #ffd14a;     /* gold */

  /* system banner colors (per-event) */
  --banner-kick: #ffb020;
  --banner-kick-glow: rgba(255, 170, 0, 0.60);

  --banner-ban: #ff2b2b;
  --banner-ban-glow: rgba(255, 30, 30, 0.60);

  --banner-mute: #ffd14a;
  --banner-mute-glow: rgba(255, 209, 74, 0.60);

  --banner-unban: #38ff7a;
  --banner-unban-glow: rgba(56, 255, 122, 0.55);

  --banner-unmute: #38ff7a;
  --banner-unmute-glow: rgba(56, 255, 122, 0.55);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 12px;
}

a { color: #7fc8ff; }
a:hover { text-decoration: underline; }

.retro-shell{
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

/* ---------- TOP BAR ---------- */
.retro-top{
  background: linear-gradient(to bottom, var(--panel), var(--panel2));
  border-bottom: 1px solid var(--border);
  padding: 6px 6px 4px 6px;
}

.retro-row{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.retro-row:last-child { margin-bottom: 0; }

.retro-label{
  color: #fff;
  font-weight: bold;
}

.retro-right{
  margin-left: auto;
  color: #22ff22;
  font-weight: bold;
}

.retro-input, .retro-select{
  height: 22px;
  padding: 2px 4px;
  border: 1px solid var(--btnbd);
  background: #fff;
  color: #000;
  font-size: 12px;
}

.retro-input.message{
  width: min(720px, 60vw);
}

.retro-btn{
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--btnbd);
  background: var(--btnbg);
  color: #000;
  font-size: 12px;
  cursor: pointer;
}
.retro-btn:active{ transform: translateY(1px); }

.retro-mini{
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
}

.retro-divider{
  height: 22px;
  padding: 3px 6px;
  background: #e6e6e6;
  color: #000;
  border: 1px solid var(--btnbd);
}

.retro-checkbox{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  user-select: none;
}

/* ---------- MAIN ---------- */
.retro-main{
  flex: 1;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.retro-log{
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  background: #000;
  border-top: 1px solid #101010;
}

/* message line */
.line{
  line-height: 1.38;
  margin: 0 0 2px 0;
  white-space: normal;
  word-break: break-word;
}

/* timestamp */
.ts{
  color: var(--ts);
  margin-right: 6px;
}

/* username + role colors */
.name{
  color: var(--user);
  font-weight: bold;
  margin-right: 6px;
}
.name.helper{ color: var(--helper); }
.name.moderator{ color: var(--moderator); }
.name.admin{ color: var(--admin); }

/* ✅ staff role icons (left of name) */
.role-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  margin-right: 6px;
  line-height: 1;
  font-size: 12px;
  vertical-align: middle;
}
.role-icon.admin{ color: var(--admin); }
.role-icon.moderator{ color: var(--moderator); }
.role-icon.helper{ color: var(--helper); }

/* ✅ tier icons (right of name) */
.tier-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  margin-left: 6px;
  line-height: 1;
  font-size: 12px;
  vertical-align: middle;
}
.tier-icon.premium{ color: var(--premium); }
.tier-icon.sponsor{ color: var(--sponsor); }

/* badges */
.badge{
  display: inline-block;
  margin-right: 6px;
  padding: 0 4px;
  border: 1px solid var(--border);
  font-size: 10px;
  background: #0f0f0f;
  color: #fff;
}
.badge.mod{ border-color: #7a5; }
.badge.sys{ border-color: #666; }

/* notices (flash) */
.notice{
  padding: 6px 8px;
  border: 1px solid var(--border);
  margin: 6px;
  background: #0b0b0b;
  color: #fff;
}
.notice.ok{ border-color: #2e9c45; }
.notice.err{ border-color: #b34747; }

/* ---------- 90s DRAMATIC SYSTEM BANNER ---------- */
.sys-banner{
  margin: 10px 0;
  padding: 10px 10px;
  text-align: center;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}

.sys-banner .sys-banner-text{
  display: inline-block;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sys-banner .sys-banner-text .stars{
  color: #e0e0e0;
  margin: 0 6px;
  text-shadow: none;
}

/* KICK */
.sys-banner.kick{
  background: radial-gradient(ellipse at center, rgba(255,165,0,0.14) 0%, rgba(0,0,0,0) 70%);
}
.sys-banner.kick .sys-banner-text{
  color: var(--banner-kick);
  text-shadow: 0 0 6px var(--banner-kick-glow), 0 0 14px rgba(255,165,0,0.25);
}

/* BAN */
.sys-banner.ban{
  background: radial-gradient(ellipse at center, rgba(255,0,0,0.14) 0%, rgba(0,0,0,0) 70%);
}
.sys-banner.ban .sys-banner-text{
  color: var(--banner-ban);
  text-shadow: 0 0 6px var(--banner-ban-glow), 0 0 14px rgba(255,0,0,0.25);
}

/* MUTE */
.sys-banner.mute{
  background: radial-gradient(ellipse at center, rgba(255,209,74,0.14) 0%, rgba(0,0,0,0) 70%);
}
.sys-banner.mute .sys-banner-text{
  color: var(--banner-mute);
  text-shadow: 0 0 6px var(--banner-mute-glow), 0 0 14px rgba(255,209,74,0.25);
}

/* UNBAN */
.sys-banner.unban{
  background: radial-gradient(ellipse at center, rgba(56,255,122,0.14) 0%, rgba(0,0,0,0) 70%);
}
.sys-banner.unban .sys-banner-text{
  color: var(--banner-unban);
  text-shadow: 0 0 6px var(--banner-unban-glow), 0 0 14px rgba(56,255,122,0.20);
}

/* UNMUTE */
.sys-banner.unmute{
  background: radial-gradient(ellipse at center, rgba(56,255,122,0.14) 0%, rgba(0,0,0,0) 70%);
}
.sys-banner.unmute .sys-banner-text{
  color: var(--banner-unmute);
  text-shadow: 0 0 6px var(--banner-unmute-glow), 0 0 14px rgba(56,255,122,0.20);
}

/* ---------- FOOTER BAR ---------- */
.retro-footerbar{
  background: linear-gradient(to bottom, var(--panel), var(--panel2));
  border-top: 1px solid var(--border);
  padding: 5px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.smalllink{
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.smalllink:hover{ text-decoration: underline; }

.kbd{
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #cfcfcf;
}

/* ---------- WHO PAGE ---------- */
.who-wrap{ padding: 10px; }

.who-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

@media (max-width: 1100px){
  .who-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px){
  .who-grid{ grid-template-columns: 1fr; }
}

.room-card{
  border: 1px solid var(--border);
  background: #050505;
  width: 100%;
  margin-bottom: 0;
}

.room-head{
  background: linear-gradient(to bottom, var(--panel), var(--panel2));
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.room-title{
  font-weight: bold;
  font-size: 13px;
}

.room-body{ padding: 8px; }

.who-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.who-row{
  display: flex;
  align-items: center;
}

.who-name{
  display: inline-block;
  font-weight: bold;
  color: var(--user);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin: 2px 10px 2px 0;
}
.who-name.helper{ color: var(--helper); }
.who-name.moderator{ color: var(--moderator); }
.who-name.admin{ color: var(--admin); }

/* ---------- ADMIN TABLES ---------- */
.admin-wrap{ padding: 10px; }

.table{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: #050505;
}

.table th, .table td{
  border: 1px solid var(--border);
  padding: 6px 8px;
  vertical-align: top;
}

.table th{
  background: linear-gradient(to bottom, var(--panel), var(--panel2));
  text-align: left;
}

.hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

.muted{ color: var(--muted); }