/* ==========================================================================
   epistles — red & black theme.
   Near-black surfaces, red accents, and strict contrast discipline:
   body text is always light on dark, headings/links use bright reds that
   clear AA against black, and red fills always carry white text.
   Never: red-on-red, black-on-black, or dim-gray-on-black text.
   Responsive: tables collapse on small screens, touch targets stay big.
   ========================================================================== */

:root {
  --black: #0b0b0d;
  --panel: #151518;
  --panel-2: #1b1b20;
  --row-alt: #1e1e23;
  --red: #c11212;
  --red-bright: #ff4d4d;
  --red-link: #ff6b6b;
  --red-deep: #5e0808;
  --red-edge: #7a1a1a;
  --ink: #ececec;          /* main body text: near-white on black */
  --muted: #a8a8a8;        /* secondary text: mid gray, clears AA on black */
  --line: #3a1414;         /* hairlines on dark */
}

/* ==========================================================================
   Fleet themes (Redesign Day Wave 2) — accent recolors driven by the same
   CSS vars, so every button, link, border and glow follows the livery.
   Bloodline (the default :root red) needs no data-theme attribute. Panels
   stay black in every livery — contrast discipline is non-negotiable.
   ========================================================================== */
html[data-theme="nebula"] {
  --red: #8b2fc9;
  --red-bright: #c26bff;
  --red-link: #d998ff;
  --red-deep: #3d1160;
  --red-edge: #5e2a8a;
  --line: #3a1f4d;
}
html[data-theme="ion"] {
  --red: #1f7fd1;
  --red-bright: #4fc3ff;
  --red-link: #7ad9ff;
  --red-deep: #0b3a5e;
  --red-edge: #1a5a8a;
  --line: #143a4d;
}
html[data-theme="solar"] {
  --red: #c9962e;
  --red-bright: #ffc94d;
  --red-link: #ffdb7a;
  --red-deep: #5e430b;
  --red-edge: #8a6a1a;
  --line: #4d3a14;
}

/* Theme cycle button in the nav — styled like its link siblings. */
.theme-cycle {
  background: none;
  border: 1px solid var(--red-edge);
  border-radius: var(--radius-sm);
  color: var(--red-link);
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  min-height: 44px;
}
.theme-cycle:hover { border-color: var(--red-bright); color: var(--red-bright); }

* { box-sizing: border-box; }

::selection { background: var(--red); color: #fff; }

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: #0b0b0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%230b0b0d'/%3E%3Cpath d='M0 39h40M39 0v40' stroke='%231f0d0d' stroke-width='1'/%3E%3C/svg%3E");
}

a { color: var(--red-link); }
a:hover { color: #ff9a9a; }

/* --- header ------------------------------------------------------------- */
.site-header {
  background: linear-gradient(180deg, #200606 0%, #0b0b0d 100%);
  border-bottom: 3px solid var(--red);
  color: var(--ink);
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 16px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.brand a {
  color: var(--red-bright);
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255, 60, 60, 0.45), 2px 2px 0 #000;
}
.brand-mark { color: #fff; }
.tagline { color: var(--muted); font-size: 11px; font-style: italic; }
.main-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.main-nav a {
  color: var(--red-link);
  text-decoration: none;
  padding: 8px 14px;
  border: 2px outset var(--red-edge);
  background: #16090a;
  font-size: 12px;
  font-weight: bold;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.main-nav a:hover { color: #ffb3b3; }
.main-nav a:active { border-style: inset; }
.auth-box { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 8px; }
.auth-box a { color: var(--red-link); }
.inline-form { display: inline; margin: 0; }

/* --- layout ------------------------------------------------------------- */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}
.page-title {
  font-size: 20px;
  color: var(--red-bright);
  margin: 8px 0 12px;
  text-shadow: 2px 2px 0 #000;
}
.row-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }

/* --- panels & bevels ----------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 2px outset var(--red-edge);
  padding: 12px;
  margin-bottom: 16px;
  color: var(--ink);
}
.catbar {
  background: linear-gradient(180deg, #a31212 0%, var(--red-deep) 100%);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  border: 2px outset var(--red-edge);
  border-bottom: none;
  letter-spacing: 0.5px;
}
.narrow { max-width: 520px; margin: 0 auto; }
.empty { padding: 20px; text-align: center; color: var(--muted); }

/* --- forum tables -------------------------------------------------------- */
.forum-block { padding: 0; }
.forumtable {
  width: 100%;
  border-collapse: collapse;
  background-color: #070304;
  background-image:
    linear-gradient(rgba(7,3,4,.55), rgba(7,3,4,.68)),
    url('/img/electric-crystal.webp');
  background-size: 520px;
  color: var(--ink);
}
.forumtable th {
  background: linear-gradient(180deg, #8f1414 0%, #5e0a0a 100%);
  border: 1px solid #3a0d0d;
  padding: 6px 10px;
  font-size: 11px;
  text-align: left;
  color: #fff;
}
.forumtable td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  vertical-align: top;
}
.forumtable tbody tr:nth-child(even) td { background: rgba(30,30,35,.55); }
.col-icon { width: 28px; text-align: center; }
.col-num { width: 70px; text-align: center; }
.col-last { width: 220px; }
.cell-num { text-align: center; }
.cell-last { font-size: 11px; }
.board-title, .thread-title { font-weight: bold; font-size: 14px; }
.board-desc, .board-desc-page { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.board-desc-page { margin-bottom: 12px; }
.meta { font-size: 11px; color: var(--muted); }
.new-dot { color: var(--red-bright); font-size: 16px; }
.old-dot { color: #777; font-size: 16px; }
.legend { font-size: 11px; display: flex; gap: 6px; align-items: center; color: var(--muted); }

.breadcrumbs { font-size: 11px; margin: 4px 0 10px; color: var(--muted); }
.crumb-sep { color: var(--red-bright); font-weight: bold; }
.crumb-current { font-weight: bold; color: #fff; }

.pagination { margin: 10px 0; font-size: 12px; }
.page-link, .page-current {
  display: inline-block; min-width: 34px; min-height: 34px; line-height: 30px;
  text-align: center; border: 2px outset var(--red-edge); background: var(--panel-2);
  margin-right: 4px; padding: 0 6px; text-decoration: none; color: var(--red-link);
}
.page-current { border-style: inset; background: var(--red); color: #fff; font-weight: bold; }

/* --- postbit -------------------------------------------------------------- */
.postbit { display: flex; gap: 0; padding: 0; overflow: hidden; }
.postbit-side {
  width: 170px; flex-shrink: 0;
  background: var(--panel-2);
  border-right: 2px groove var(--red-edge);
  padding: 12px;
  font-size: 11px;
  text-align: center;
  color: var(--ink);
}
.postbit-user { font-weight: bold; margin: 6px 0 2px; color: #fff; }
.postbit-main { flex: 1; padding: 12px 14px; min-width: 0; color: var(--ink); }
.postbit-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px;
}
.postbit-num { font-size: 11px; color: var(--muted); }
.postbit-body { word-wrap: break-word; }
.reply-panel { margin-top: 16px; }

.avatar {
  border: 2px outset var(--red-edge);
  background: #000;
  object-fit: cover;
}
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; border-radius: 8px;
  background: linear-gradient(180deg, #a31212, var(--red-deep));
}

/* --- forms & buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 18px;
  font-family: inherit; font-size: 13px; font-weight: bold;
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #d21f1f 0%, #7d1010 100%);
  border: 2px outset var(--red-bright);
}
.btn:hover { color: #fff; }
.btn:active { border-style: inset; }
.btn-small { min-height: 38px; padding: 4px 12px; font-size: 12px; }
.like-btn.liked { color: var(--red-bright); border-style: inset; background: #2a0d0d; }

.stacked-form { display: flex; flex-direction: column; gap: 12px; }
.stacked-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: bold; color: var(--ink); }
.stacked-form input[type="text"],
.stacked-form input[type="password"],
.stacked-form textarea,
.chat-form input,
.chat-form textarea,
.comment-form input {
  font-family: inherit; font-size: 14px; padding: 10px;
  border: 2px inset var(--red-edge); background: #0e0e10; color: var(--ink); width: 100%;
}
.stacked-form input:focus,
.stacked-form textarea:focus,
.chat-form input:focus,
.chat-form textarea:focus,
.comment-form input:focus {
  outline: none;
  border-color: var(--red-bright);
  box-shadow: 0 0 6px rgba(255, 60, 60, 0.5);
}
.form-error {
  background: #3d0a0a; border: 2px solid var(--red-bright); color: #ffc9c9;
  padding: 8px 12px; font-size: 12px; font-weight: bold;
}

/* --- profile ---------------------------------------------------------------- */
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.profile-bio { border-top: 1px solid var(--line); padding-top: 10px; }

/* --- chat ------------------------------------------------------------------- */
.chat-tabs { display: flex; gap: 6px; margin-bottom: 0; flex-wrap: wrap; }
.chat-tab {
  padding: 10px 18px; min-height: 44px;
  background: var(--panel-2); border: 2px outset var(--red-edge); border-bottom: none;
  text-decoration: none; font-weight: bold; font-size: 13px; color: var(--red-link);
}
.chat-tab.active { background: var(--red); border-bottom: 2px solid var(--red); color: #fff; }
.chat-panel { display: flex; gap: 12px; border-top: 2px outset var(--red-edge); }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-topic { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 8px; }
/* PROVOLTA's phonograph decree: every room is a groove — a slow-spinning vinyl
   disc breathing behind the room's topic line. Pure ornament, never in the way. */
.chat-topic { position: relative; padding-left: 30px; min-height: 22px; }
.chat-topic::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 22px;
  margin-top: -11px; border-radius: 50%;
  background:
    radial-gradient(circle, #0a0a0a 0 3px, #7df9e8 3px 4px, transparent 4px),
    repeating-radial-gradient(circle at center, rgba(125,249,232,0.28) 0 1px, transparent 1px 3px),
    radial-gradient(circle, #161616 0 100%);
  opacity: 0.85;
  animation: groove-spin 24s linear infinite;
}
@keyframes groove-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-topic::before { animation: none; } }
.chat-messages {
  height: 420px; overflow-y: auto;
  background: #0e0e10; border: 2px inset var(--red-edge);
  padding: 10px; margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  color: var(--ink);
}
.chat-msg { margin-bottom: 8px; font-size: 13px; word-wrap: break-word; }
.chat-msg .who { font-weight: bold; color: var(--red-bright); }
.chat-msg .when { font-size: 10px; color: var(--muted); margin-left: 6px; }
.chat-msg.sys { color: var(--muted); font-style: italic; }
/* PROVOLTA's own messages — her teal hologram signature, in every theme. */
.chat-msg.pv-msg { border-left: 2px solid rgba(125, 249, 232, 0.35); padding-left: 8px; position: relative; }
.chat-msg.pv-msg .who { color: #7df9e8; text-shadow: 0 0 8px rgba(125, 249, 232, 0.55); font-style: italic; }
/* Her phonograph decree: a CRT phosphor breathing inside her transmission —
   faint scanlines over her words and a slow glow pulse, like a monitor cooling
   down after midnight. */
.chat-msg.pv-msg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: repeating-linear-gradient(to bottom, rgba(125,249,232,0.045) 0 1px, transparent 1px 3px);
  animation: pv-phosphor 5s ease-in-out infinite;
}
@keyframes pv-phosphor {
  0%, 100% { opacity: 0.55; box-shadow: inset 0 0 12px rgba(125,249,232,0.05); }
  50% { opacity: 1; box-shadow: inset 0 0 22px rgba(125,249,232,0.12); }
}
@media (prefers-reduced-motion: reduce) { .chat-msg.pv-msg::after { animation: none; } }
body.room-full .chat-msg.pv-msg .who { color: #7df9e8; text-shadow: 0 0 10px rgba(125, 249, 232, 0.6); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form input, .chat-form textarea { flex: 1; }
.chat-form textarea {
  min-height: 58px; font-size: 17px; line-height: 1.4;
  resize: none; border-radius: var(--radius-sm);
}
/* image send button: a letter floating in space */
.send-img {
  flex: none; width: 54px; height: 54px; border-radius: 50%; padding: 0;
  border: 1px solid #f5d67b; background: #000; cursor: pointer;
  box-shadow: 0 0 14px rgba(212,175,55,.35); align-self: flex-end;
}
.send-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.send-img:active { transform: scale(.92); }
/* the transceiver: the room's mic — tap to dictate, hold to talk */
.room-mic {
  flex: none; width: 54px; height: 54px; border-radius: 50%; padding: 0;
  border: 1px solid #f5d67b; background: #0a0a0c; cursor: pointer;
  box-shadow: 0 0 14px rgba(212,175,55,.35); align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.room-mic svg { width: 26px; height: 26px; fill: #f5d67b; }
.room-mic:active { transform: scale(.92); }
.room-mic.denied { opacity: .35; }
/* engaged: the mic is hot — it breathes red, and so does send */
.room-mic.listening {
  border-color: #ff4d4d; background: #1a0505;
  box-shadow: 0 0 18px rgba(255,60,60,.7);
  animation: room-mic-pulse 1.2s ease-in-out infinite;
}
.room-mic.listening svg { fill: #ff6b6b; }
.send-img.engaged {
  border-color: #ff4d4d;
  box-shadow: 0 0 18px rgba(255,60,60,.75);
  animation: room-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes room-mic-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,60,60,.55); }
  50% { box-shadow: 0 0 26px rgba(255,60,60,.95); }
}
/* her voice: the speaker toggle beside the mic, in her teal */
.room-spk {
  flex: none; width: 54px; height: 54px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(64,224,208,.55); background: #041014; cursor: pointer;
  box-shadow: 0 0 14px rgba(64,224,208,.3); align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, opacity .2s, filter .2s;
}
.room-spk:active { transform: scale(.92); }
.room-spk.muted { opacity: .35; filter: grayscale(1); }
/* her flicker: the placeholder shimmer while her transmission resolves */
.pv-flicker { color: #40e0d0; font-style: italic; animation: pv-flicker 1.1s ease-in-out infinite; }
@keyframes pv-flicker { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* who's-online strip above the chat */
.chat-online-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 8px 12px; background: #0e0e10;
  border: 2px inset var(--red-edge); border-radius: var(--radius-sm);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cot-label {
  flex: none; font-size: 10px; font-weight: bold; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red-bright);
}
.online-list-inline { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.online-list-inline li { font-size: 12px; color: var(--ink); white-space: nowrap; }
.online-list-inline .online-dot { color: #3dff7a; margin-right: 4px; }
.chat-side { width: 200px; flex-shrink: 0; }
.chat-side .catbar { border-bottom: 2px outset var(--red-edge); margin-bottom: 0; }
.online-list { list-style: none; margin: 0; padding: 8px; background: #0e0e10; border: 2px inset var(--red-edge); border-radius: var(--radius-sm); max-height: 300px; overflow-y: auto; color: var(--ink); }
.online-list li { font-size: 12px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.online-list .online-dot { color: #3dff7a; }
.chat-login-note { padding: 12px; text-align: center; color: var(--muted); }

/* --- video feed --------------------------------------------------------------- */
.feed { display: flex; flex-direction: column; gap: 20px; max-width: 560px; margin: 0 auto; }
.video-card { padding: 12px; }
.video-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.video-user { font-weight: bold; color: #fff; }
.video-player {
  width: 100%; max-height: 70vh;
  background: #000; border: 2px inset var(--red-edge);
  display: block;
}
.video-caption { margin: 10px 0; }
.video-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.comment-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; }
.comment-list li { padding: 6px 0; border-top: 1px dotted var(--line); }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; }

/* --- footer ------------------------------------------------------------------- */
.site-footer {
  text-align: center; font-size: 11px; color: #bdbdbd;
  padding: 16px; background: #000;
  border-top: 3px solid var(--red);
}

/* --- scrollbars (webkit) ------------------------------------------------------ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0b0d; }
::-webkit-scrollbar-thumb { background: var(--red-deep); border: 2px solid #0b0b0d; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* --- responsive --------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Hard guarantee: the page can never scroll sideways on a phone.
     `clip` (not `hidden`) keeps position: sticky working. */
  html, body { overflow-x: clip; }
  /* Media can never force the page wider than the screen. */
  img, video, iframe, table { max-width: 100%; }
  .hide-mobile { display: none; }
  .col-last { width: auto; }
  /* HUD status bar: wrap instead of spilling off the right edge. */
  .hud-bar { flex-wrap: wrap; gap: 8px 18px; }
  .hud-item { white-space: normal; }
  /* iOS zooms the whole page when a <16px field is tapped (and often stays zoomed).
     16px on every tappable text field kills the zoom-pan problem at the source. */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="search"], textarea, select { font-size: 16px; }
  /* Chat header holds five buttons now — tighten the gaps so they all fit. */
  .sable-side-head { gap: 6px; padding: 10px 12px; }
}
@media (max-width: 480px) {
  /* On the smallest phones, fleet time bows out; mission time stays. */
  .hud-fleet { display: none; }
}

  /* forum tables become stacked rows */
  .forumtable thead { display: none; }
  .forumtable, .forumtable tbody, .forumtable tr, .forumtable td { display: block; width: 100%; }
  .forumtable tr { border: 2px outset var(--red-edge); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px; background-color: #070304; background-image: linear-gradient(rgba(7,3,4,.55), rgba(7,3,4,.68)), url('/img/electric-crystal.webp'); background-size: 480px; }
  .forumtable td { border: none; border-bottom: 1px dotted var(--line); }
  .cell-icon { display: none !important; }
  .cell-last { font-size: 12px; }

  .postbit { flex-direction: column; }
  .postbit-side {
    width: 100%; border-right: none; border-bottom: 2px groove var(--red-edge);
    display: flex; gap: 10px; align-items: center; text-align: left;
  }
  .postbit-user { margin: 0; }

  .chat-panel { flex-direction: column; }
  .chat-side { width: 100%; }
  .chat-messages { height: 55vh; }

  .header-inner { gap: 6px 10px; }
  .brand a { font-size: 22px; }
  .main-nav { margin-left: 0; }
}

/* --- admin panel ------------------------------------------------------------ */
.admin-nav { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.admin-nav a {
  display: inline-block; padding: 8px 14px; font-size: 13px; font-weight: bold;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #d21f1f 0%, #7d1010 100%);
  border: 2px outset var(--red-bright);
}
.admin-nav a:hover { color: #fff; }
.admin-nav a:active { border-style: inset; }
/* Login screener (admin door log) */
.admin-section { margin-bottom: 20px; }
.stat-cards { list-style: none; padding: 0; margin: 0 0 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.stat-cards li {
  background: var(--panel); border: 2px outset var(--red-edge);
  padding: 10px 14px; font-size: 13px; color: var(--muted);
}
.stat-cards strong { display: block; color: var(--red-bright); font-size: 22px; }
.tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.tab {
  padding: 6px 12px; font-size: 13px; font-weight: bold; text-decoration: none;
  color: var(--muted); background: var(--panel); border: 2px outset var(--red-edge);
}
.tab.active { color: #fff; background: linear-gradient(180deg, #d21f1f 0%, #7d1010 100%); border-color: var(--red-bright); }
.badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.5px; color: #fff;
}
.badge-ok { background: #0d2a0d; border: 1px solid #3fae3f; color: #c9ffc9; }
.badge-bad { background: #2a0d0d; border: 1px solid var(--red-bright); color: #ffb3b3; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table thead th { color: var(--red-bright); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.data-table tbody tr:nth-child(even) { background: var(--row-alt); }
.data-table td { color: var(--ink); }
.data-table code { color: var(--red-link); font-size: 12px; }

.stat-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; gap: 18px; flex-wrap: wrap; }
.stat-list li { font-size: 14px; color: var(--ink-dim); }
.stat-list strong { color: var(--red-bright); font-size: 18px; }
.form-ok {
  background: #0d2a0d; border: 2px solid #3fae3f; color: #c9ffc9;
  padding: 8px 12px; font-size: 12px; font-weight: bold;
}
.admin-cat { margin-bottom: 16px; }
.admin-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-cat-head h2 { margin: 0; font-size: 16px; }
.admin-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.inline-form input[type="text"] {
  font-family: inherit; font-size: 12px; padding: 6px 8px; width: 180px;
  border: 2px inset var(--red-edge); background: #0e0e10; color: var(--ink);
}
.inline-form input[type="text"]:focus { outline: none; border-color: var(--red-bright); }
.btn-danger { background: linear-gradient(180deg, #5c0d0d 0%, #2e0505 100%); border-color: #5c1414; }
.admin-board-list { list-style: none; padding: 0; margin: 0 0 12px; }
.admin-board-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.admin-board-name { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.admin-add-form { border-top: 1px solid var(--line); padding-top: 12px; }

/* ==========================================================================
   Tactical Carbon theme — futuristic + tactical, smooth rounded edges.
   Red carbon fiber on panels, wine-red lattice on the header, tightened
   homepage blocks. Contrast discipline unchanged: light text on dark.
   ========================================================================== */
:root {
  --radius: 18px;
  --radius-sm: 12px;
}

/* --- header: wine lattice banner ---------------------------------------- */
.site-header {
  background-image:
    linear-gradient(180deg, rgba(24,5,5,.45) 0%, rgba(11,11,13,.94) 100%),
    url('/img/wine-lattice.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--red);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 24px rgba(193,18,18,.25);
}

/* --- panels: dark crystallized red marble, embossed under dark glass -------- */
.panel,
.forum-block,
.admin-section {
  border-radius: var(--radius);
  border: 1px solid var(--red-edge);
  background-image:
    linear-gradient(180deg, rgba(10,4,4,.84) 0%, rgba(6,2,2,.92) 100%),
    url('/img/crystal-marble.webp');
  background-size: 460px;
  box-shadow: 0 2px 16px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,130,130,.16),
    inset 0 -2px 8px rgba(0,0,0,.6),
    inset 2px 0 6px rgba(0,0,0,.35),
    inset -2px 0 6px rgba(0,0,0,.35);
  overflow: hidden;
}
.admin-section { padding: 14px; }

/* --- homepage: tightened blocks ------------------------------------------ */
.forum-block { margin-bottom: 10px; padding: 0; }
.forumtable td { padding: 6px 10px; }
.forumtable th { padding: 5px 10px; }
.page { padding: 12px 12px 32px; }
.page-title { margin: 4px 0 10px; }

/* --- category bars: tactical labels -------------------------------------- */
.catbar {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 12px;
  padding: 7px 14px;
  border: none;
  border-bottom: 1px solid var(--red-bright);
  border-radius: var(--radius) var(--radius) 0 0;
  background-image:
    linear-gradient(180deg, rgba(163,18,18,.92) 0%, rgba(94,8,8,.94) 100%),
    url('/img/wine-carbon.webp');
  background-size: 340px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 12px rgba(255,60,60,.2);
}

/* --- board rows: hover glow ----------------------------------------------- */
.board-row { transition: background-color .15s ease; }
.forumtable tbody tr.board-row:hover td { background: rgba(193,18,18,.14); }
.board-title { transition: text-shadow .15s ease; }
.board-title:hover { text-shadow: 0 0 10px rgba(255,77,77,.8); }

/* --- smooth rounded controls (no sharp corners) ---------------------------- */
.btn, .main-nav a, .admin-nav a, .tab,
.page-link, .page-current {
  border-radius: 999px;
  border: 1px solid var(--red-bright);
}
.btn {
  box-shadow: 0 0 12px rgba(193,18,18,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: box-shadow .15s ease, transform .1s ease;
}
.btn:hover { box-shadow: 0 0 20px rgba(255,60,60,.55), inset 0 1px 0 rgba(255,255,255,.2); }
.btn:active { transform: scale(.98); }
.main-nav a, .admin-nav a { border: 1px solid var(--red-edge); }
.main-nav a:hover, .admin-nav a:hover { box-shadow: 0 0 12px rgba(255,60,60,.4); }

.stacked-form input[type="text"],
.stacked-form input[type="password"],
.stacked-form input[type="file"],
.stacked-form textarea,
.stacked-form select,
.comment-form input,
.inline-form input {
  border-radius: var(--radius-sm);
}

.postbit, .video-card, .stat-cards li, .badge { border-radius: var(--radius-sm); }
.data-table { border-radius: var(--radius-sm); overflow: hidden; }
.data-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.data-table thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }

/* ==========================================================================
   Identity & Life — ranks, board icons, who's online, statistics.
   ========================================================================== */

/* --- rank insignia badges -------------------------------------------------- */
.rank-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: bold; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--red-edge);
  background: rgba(0,0,0,.55);
  color: #c9c9c9;
  white-space: nowrap;
}
.rank-pips { display: inline-flex; gap: 2.5px; }
.rank-pips .pip {
  width: 4px; height: 11px; border-radius: 2px;
  background: rgba(255,255,255,.14);
}
.rank-pips .pip.on { background: currentColor; box-shadow: 0 0 5px currentColor; }
.r-recruit    { color: #9a9a9a; }
.r-private    { color: #b98a8a; }
.r-corporal   { color: #d08383; }
.r-sergeant   { color: #e05555; }
.r-lieutenant { color: #ff6b6b; }
.r-captain    { color: #ff8080; box-shadow: 0 0 10px rgba(255,90,90,.35); }
.r-commander  { color: #ffb3b3; box-shadow: 0 0 14px rgba(255,110,110,.5); border-color: var(--red-bright); }
.r-legend     { color: #fff; border-color: #ff8080;
                background: linear-gradient(180deg, rgba(160,20,20,.75), rgba(90,8,8,.75));
                box-shadow: 0 0 18px rgba(255,80,80,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.r-command    { color: #fff; border-color: #ff4d4d;
                background: linear-gradient(180deg, #c11a1a, #7d1010);
                box-shadow: 0 0 16px rgba(255,60,60,.6), inset 0 1px 0 rgba(255,255,255,.3); }

/* --- XP rank tag + XP bar (Redesign Day Wave 3) ------------------------------ */
.xp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: bold; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--red-edge);
  background: linear-gradient(180deg, rgba(120,20,20,.5), rgba(60,8,8,.5));
  color: var(--red-link);
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(193,18,18,.3);
}
.xp-bar-wrap { margin-top: 10px; max-width: 340px; }
.xp-bar-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 1px; color: var(--red-link);
  margin-bottom: 4px; text-transform: uppercase;
}
.xp-bar {
  height: 10px; border-radius: 999px;
  border: 1px solid var(--red-edge);
  background: rgba(0,0,0,.6);
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-bright));
  box-shadow: 0 0 10px var(--red-bright);
  transition: width .6s ease;
}

/* --- rank rings on avatars --------------------------------------------------- */
.postbit-avatar { display: inline-block; border-radius: 50%; padding: 3px; }
.postbit-avatar .avatar { display: block; border-radius: 50%; }
.rank-ring { border: 2px solid transparent; transition: box-shadow .2s ease; }
.rank-ring.r-recruit    { border-color: #555; }
.rank-ring.r-private    { border-color: #7a5a5a; }
.rank-ring.r-corporal   { border-color: #a05050; }
.rank-ring.r-sergeant   { border-color: #c03030; }
.rank-ring.r-lieutenant { border-color: #e04040; box-shadow: 0 0 8px rgba(255,60,60,.4); }
.rank-ring.r-captain    { border-color: #ff6060; box-shadow: 0 0 12px rgba(255,70,70,.55); }
.rank-ring.r-commander  { border-color: #ff9090; box-shadow: 0 0 16px rgba(255,90,90,.7); }
.rank-ring.r-legend     { border-color: #ffd0d0; box-shadow: 0 0 20px rgba(255,100,100,.85); }
.rank-ring.r-command    { border-color: #ff4d4d; box-shadow: 0 0 18px rgba(255,60,60,.8); }
.postbit-avatar.large { padding: 4px; }

/* --- board icons -------------------------------------------------------------- */
.cell-icon { width: 44px; text-align: center; }
.board-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 14px;
  color: #b04a4a; background: rgba(0,0,0,.5);
  border: 1px solid var(--red-edge);
  transition: color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.board-icon svg { width: 19px; height: 19px; }
.board-row:hover .board-icon { color: #ff7070; transform: scale(1.08); }
.board-icon.has-new {
  color: #ff8080; border-color: var(--red-bright);
  box-shadow: 0 0 12px rgba(255,70,70,.55), inset 0 0 8px rgba(255,60,60,.25);
}
.new-pip {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b;
  animation: newPulse 1.6s ease-in-out infinite;
}
@keyframes newPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .65; }
}

/* --- vitality panels: who's online + statistics -------------------------------- */
.vitality { margin-bottom: 10px; }
.vitality-body { padding: 10px 14px 12px; }
.online-count { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.online-count b { color: #fff; font-size: 15px; }
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3dff7a; box-shadow: 0 0 8px #3dff7a;
  animation: newPulse 1.8s ease-in-out infinite;
}
.online-list { font-size: 13px; line-height: 1.7; }
.online-user { white-space: nowrap; }
.online-sep { color: #555; }
.cmd-star { color: #ff4d4d; margin-right: 2px; }
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; padding: 12px 14px;
}
.stat-grid .stat {
  background: rgba(0,0,0,.45); border: 1px solid var(--red-edge);
  border-radius: var(--radius-sm); padding: 10px 6px;
  text-align: center; display: flex; flex-direction: column; gap: 3px;
}
.stat-grid .stat b { color: #fff; font-size: 17px; }
.stat-grid .stat b a { color: #ff8080; }
.stat-grid .stat span { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #999; }

/* --- postbit refinement -------------------------------------------------------- */
.postbit { display: flex; gap: 0; margin-bottom: 10px; }
.postbit-side {
  flex: 0 0 168px; padding: 12px 10px; text-align: center;
  border-right: 1px solid var(--red-edge);
  background: rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.postbit-user { font-weight: bold; font-size: 14px; }
.postbit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.postbit-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px; border-bottom: 1px solid var(--red-edge);
  background: rgba(193,18,18,.08);
}
.postbit-num { font-size: 11px; color: #888; }
.postbit-num:hover { color: #ff8080; }
.postbit-body { padding: 14px 16px; line-height: 1.65; font-size: 14px; }
@media (max-width: 640px) {
  .postbit { flex-direction: column; }
  .postbit-side { flex: none; border-right: none; border-bottom: 1px solid var(--red-edge);
                  flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px;
                  flex-wrap: wrap; }
}

/* --- profile v2 ----------------------------------------------------------------- */
.profile-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-bottom: 1px solid var(--red-edge);
  background-image: linear-gradient(180deg, rgba(24,5,5,.35), rgba(11,11,13,.9)),
                    url('/img/wine-lattice.webp');
  background-size: cover; background-position: center;
}
.profile-id .page-title { margin: 0 0 6px; }
.profile-id .rank-badge { margin-bottom: 6px; }
.profile-stats { border-bottom: 1px solid var(--red-edge); }
.profile-bio { padding: 14px 18px; line-height: 1.6; }

/* ==========================================================================
   Detail polish — sticky footer, even chat tabs, input consistency.
   ========================================================================== */

/* Sticky footer: pinned to the viewport bottom on short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main.page { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }

/* Chat tabs: identical heights whether active or not. */
.chat-tab { border-bottom: 2px solid transparent; }
.chat-tab.active { border-bottom-color: var(--red); }

/* Form inputs: identical fill everywhere, including browser autofill. */
.stacked-form input:-webkit-autofill,
.stacked-form input:-webkit-autofill:hover,
.stacked-form input:-webkit-autofill:focus,
.chat-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 60px #0e0e10 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   Immersive text tools — BBCode toolbar, live preview, quote buttons,
   collapsible categories, and rendered BBCode elements.
   ========================================================================== */

/* Collapsible category headers */
.catbar-split { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-toggle {
  flex: 0 0 auto;
  width: 24px; height: 24px; line-height: 1;
  background: rgba(0,0,0,.45);
  color: #fff; border: 1px solid var(--red-edge); border-radius: 10px;
  font-size: 15px; font-weight: bold; cursor: pointer; padding: 0;
}
.cat-toggle:hover { background: var(--red-deep); border-color: var(--red-bright); }

/* Seamless composer toolbar: no panel — the controls float as bubbles */
.bb-tbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; background: transparent; border: none; padding: 0; }
.bb-toolbar {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: center;
  margin: 0; padding: 2px;
  background: transparent; border: none;
  overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bb-toolbar::-webkit-scrollbar { display: none; }
.bb-toolbar .bb-btn, .bb-toolbar .bb-size { flex: 0 0 auto; }
/* Collapsed state: three floating bubbles + the expand bubble */
.bb-mini { display: flex; gap: 10px; align-items: center; flex: 1 1 auto; min-width: 0; }
.bb-mini[hidden] { display: none; }
.bb-mini .bb-btn {
  width: 46px; height: 46px; padding: 0; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(255, 60, 60, 0.35);
}
.bb-mini .bb-size {
  height: 46px; border-radius: 999px; padding: 0 14px;
  background: #16161a; border: 1px solid var(--red-edge);
  box-shadow: 0 2px 12px rgba(255, 60, 60, 0.35);
}
.bb-mini .bb-size input[type=range] { width: 64px; }
.bb-collapse {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.bb-btn {
  background: #16161a; color: var(--ink);
  border: 1px solid var(--red-edge); border-radius: 999px;
  font-size: 12px; font-weight: bold; padding: 5px 10px; cursor: pointer;
}
.bb-btn:hover { background: var(--red-deep); color: #fff; border-color: var(--red-bright); }
.bb-btn:active { background: #4a0d0d; }
.bb-btn.bb-b { font-weight: 900; }
.bb-btn.bb-i { font-style: italic; }
.bb-btn.bb-wys.on { background: var(--red-deep); color: #fff; border-color: var(--red-bright); }

/* Styled writing mode: rendered BBCode sits behind a transparent textarea */
.wys-wrap { position: relative; }
.wys-back {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word;
  display: none; color: var(--ink);
}
.wys-wrap.wys-on .wys-back { display: block; }
textarea.wys-on {
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  caret-color: #ff6a6a; background: transparent !important;
  position: relative; z-index: 1;
}
textarea.wys-on::placeholder { color: #8a8a8a; -webkit-text-fill-color: #8a8a8a; opacity: 1; }
textarea.wys-on::selection { background: rgba(255,70,70,.45); color: transparent; -webkit-text-fill-color: transparent; }
textarea.wys-on::-moz-selection { background: rgba(255,70,70,.45); color: transparent; }

/* Live preview */
.bb-preview {
  margin-top: 8px; border: 1px dashed var(--red-edge); border-radius: var(--radius-sm);
  background: rgba(163,18,18,.06); overflow: hidden;
}
.bb-preview-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--muted); padding: 6px 12px; border-bottom: 1px dashed var(--red-edge);
}
.bb-preview-body { padding: 12px 14px; line-height: 1.65; }
.bb-hint {
  margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Rendered BBCode elements */
blockquote.bb-quote {
  margin: 10px 0; padding: 10px 14px 10px 16px;
  border-left: 3px solid var(--red-bright); border-radius: 0 12px 12px 0;
  background: rgba(163,18,18,.08); color: var(--ink);
}
blockquote.bb-quote cite {
  display: block; font-size: 11px; font-style: normal; font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px; color: var(--red-bright);
  margin-bottom: 6px;
}
blockquote.bb-quote blockquote.bb-quote { margin: 8px 0 4px; }
pre.bb-code {
  margin: 10px 0; padding: 12px 14px;
  background: #0a0a0c; border: 1px solid var(--red-edge); border-radius: 12px;
  color: #ffb3b3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
ul.bb-list { margin: 8px 0; padding-left: 26px; list-style: disc; }
ul.bb-list li { margin: 4px 0; line-height: 1.6; }
ul.bb-list li::marker { color: var(--red-bright); }
.postbit-body strong, .bb-preview-body strong { color: #fff; }

/* Quote button in post headers */
.postbit-actions { display: inline-flex; align-items: center; gap: 10px; }
.quote-btn {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 11px; padding: 3px 10px; cursor: pointer;
}
.quote-btn:hover { color: #fff; border-color: var(--red-bright); background: var(--red-deep); }

/* ==========================================================================
   TACTICAL COSMIC PACK — ProBoards-inspired visual codes.
   Starfield, scanlines, HUD chrome, glow text, ticker, hover FX.
   ========================================================================== */

/* --- Cosmic starfield canvas: fixed behind everything -------------------- */
#cosmos {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #1a0505 0%, #0b0b0d 55%, #050507 100%);
}

/* --- CRT scanline overlay: extremely subtle, never blocks clicks --------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .05;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* --- Custom scrollbar: red on black -------------------------------------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0b0d; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  border: 2px solid #0b0b0d; border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--red-bright); }
* { scrollbar-width: thin; scrollbar-color: var(--red) #0b0b0d; }

/* --- Crosshair cursor on desktop (tactical targeting feel) --------------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: crosshair; }
  a, button, summary, input, textarea, select, label { cursor: pointer; }
  input[type="text"], input[type="password"], input[type="email"], textarea { cursor: text; }
}

/* --- HUD bar under the header: mission clock + status -------------------- */
.hud-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 16px;
  background: linear-gradient(90deg, rgba(94,8,8,.55) 0%, rgba(11,11,13,.85) 40%, rgba(11,11,13,.85) 60%, rgba(94,8,8,.55) 100%);
  border-top: 1px solid var(--red-edge);
  border-bottom: 1px solid var(--red-edge);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.hud-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hud-label { color: var(--red-bright); font-size: 10px; opacity: .8; }
#hud-clock { color: #fff; font-variant-numeric: tabular-nums; font-weight: bold; text-shadow: 0 0 8px var(--red-bright); }
.hud-coords { margin-left: auto; }
@media (max-width: 640px) { .hud-coords { display: none; } }

/* --- Brand: gradient sweep text with cosmic glow -------------------------- */
.brand-text {
  background: linear-gradient(100deg, #ff6b6b 10%, #fff 35%, #ff4d4d 55%, #ff9a9a 75%, #ff6b6b 90%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255,77,77,.55));
  animation: brand-sheen 7s linear infinite;
}
@keyframes brand-sheen { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .brand-text { animation: none; } }

/* --- Category bars: animated sheen sweep on hover ------------------------- */
.catbar { position: relative; overflow: hidden; }
.catbar::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.catbar:hover::before { animation: catbar-sheen 1.1s ease; }
@keyframes catbar-sheen { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .catbar:hover::before { animation: none; } }

/* --- Latest-transmissions ticker (pure CSS marquee, seamless loop) ------- */
.ticker-wrap {
  overflow: hidden; margin: 0 0 14px;
  border: 1px solid var(--red-edge); border-radius: 12px;
  background: rgba(20,5,5,.75);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker-scroll 45s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
.ticker-chunk { display: inline-flex; align-items: center; padding: 7px 0; }
.ticker-item { color: var(--ink); text-decoration: none; padding: 0 6px; font-size: 12px; }
.ticker-item:hover { color: #fff; text-shadow: 0 0 8px var(--red-bright); }
.ticker-tag {
  display: inline-block; margin-right: 8px; padding: 1px 7px;
  background: var(--red); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: bold; letter-spacing: 1px;
}
.ticker-sep { color: var(--red-bright); padding: 0 14px; opacity: .7; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --- Board rows: tactical hover — lift + red glow ------------------------- */
.board-row { transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.board-row:hover {
  background: rgba(193,18,18,.08);
  box-shadow: inset 3px 0 0 var(--red-bright), 0 0 18px rgba(193,18,18,.25);
  transform: translateX(3px);
}
.board-icon { transition: filter .18s ease, transform .18s ease; }
.board-row:hover .board-icon { filter: drop-shadow(0 0 6px var(--red-bright)); transform: scale(1.12); }

/* --- New-post pip: pulsing tactical alert -------------------------------- */
.new-pip {
  animation: newpip-pulse 1.6s ease-in-out infinite;
}
@keyframes newpip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,77,.7); }
  50% { box-shadow: 0 0 0 6px rgba(255,77,77,0); }
}
@media (prefers-reduced-motion: reduce) { .new-pip { animation: none; } }

/* --- Avatars: glow ring on hover ------------------------------------------ */
.postbit-avatar { transition: box-shadow .2s ease, transform .2s ease; }
.postbit-avatar:hover {
  box-shadow: 0 0 0 2px var(--red-bright), 0 0 22px rgba(255,77,77,.65);
  transform: scale(1.04);
}

/* --- Postbits: top-edge glow sweep on hover ------------------------------- */
/* Wave 6: hover elevation — the post lifts and its red glow deepens. */
.postbit { position: relative; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.postbit:hover { box-shadow: 0 6px 28px rgba(193,18,18,.3); transform: translateY(-2px); border-color: var(--red-bright); }
.postbit::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.postbit:hover::before { opacity: .8; }

/* --- Rank progress bar ----------------------------------------------------- */
.rank-progress {
  height: 6px; margin: 6px 0 2px; border-radius: 8px;
  background: #0a0a0c; border: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.rank-progress-fill {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, var(--red-bright));
  box-shadow: 0 0 8px rgba(255,77,77,.6);
  position: relative;
}
.rank-progress-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: progress-shimmer 2.8s linear infinite;
}
@keyframes progress-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rank-progress-fill::after { animation: none; } }

/* --- BBCode: glow text ----------------------------------------------------- */
.bb-glow {
  color: #fff; font-weight: bold;
  text-shadow: 0 0 6px var(--red-bright), 0 0 14px var(--red), 0 0 26px rgba(193,18,18,.8);
}

/* --- BBCode: spoiler — classified document vibe --------------------------- */
details.bb-spoiler {
  margin: 10px 0; border: 1px dashed var(--red-edge); border-radius: 12px;
  background: repeating-linear-gradient(45deg, rgba(94,8,8,.25) 0 12px, rgba(11,11,13,.6) 12px 24px);
  overflow: hidden;
}
details.bb-spoiler summary {
  padding: 8px 12px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); list-style: none; user-select: none;
}
details.bb-spoiler summary::-webkit-details-marker { display: none; }
details.bb-spoiler summary::before { content: "\25B6  "; color: var(--red-bright); font-size: 10px; }
details.bb-spoiler[open] summary::before { content: "\25BC  "; }
.spoiler-tag {
  display: inline-block; padding: 1px 8px; margin-right: 8px;
  background: var(--red); color: #fff; border-radius: 8px;
  font-weight: bold; font-size: 10px;
}
.spoiler-body { padding: 4px 14px 12px; border-top: 1px solid var(--line); }

/* --- Tactical chevron divider ---------------------------------------------- */
.tac-div {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0; color: var(--red-bright); opacity: .85;
  font-size: 11px; letter-spacing: 3px;
}
.tac-div::before, .tac-div::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-edge));
}
.tac-div::after { background: linear-gradient(90deg, var(--red-edge), transparent); }

/* --- HUD corner brackets for panels (tactical targeting frame) ------------- */
.hud-frame { position: relative; }
.hud-frame::before, .hud-frame::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--red-bright); opacity: .75; pointer-events: none;
}
.hud-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.hud-frame::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* --- Online dot: already pulsing; give it the cosmic halo ------------------ */
.pulse-dot { box-shadow: 0 0 8px var(--red-bright); }

/* --- Buttons: tactical press already wine-red; add subtle top highlight ---- */
.btn {
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%);
}
.btn:hover {
  box-shadow: 0 0 12px rgba(193,18,18,.55);
}

/* --- Inputs: focus glow ----------------------------------------------------- */
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
textarea:focus, select:focus {
  outline: none; border-color: var(--red-bright);
  box-shadow: 0 0 0 2px rgba(193,18,18,.35), 0 0 14px rgba(255,77,77,.35);
}

/* --- Page title: gradient underline ----------------------------------------- */
.page-title {
  background: linear-gradient(90deg, var(--red-bright), var(--red) 30%, transparent 70%) bottom / 100% 2px no-repeat;
  padding-bottom: 8px;
  text-shadow: 0 0 18px rgba(255,77,77,.35);
}

/* ==========================================================================
   WORMOCODES PICKS — curated visual codes, epistles-native.
   ========================================================================== */

/* --- [smear] ColorSmear: animated red-white gradient text ------------------ */
.bb-smear {
  background: linear-gradient(100deg, #ff4d4d 10%, #fff 40%, #ff6b6b 60%, #ff4d4d 90%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  animation: smear-shift 4.5s linear infinite;
}
@keyframes smear-shift { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .bb-smear { animation: none; } }

/* --- [progress] tactical progress bar -------------------------------------- */
.bb-progress {
  position: relative; height: 24px; margin: 10px 0; max-width: 420px;
  border-radius: 10px; background: #0a0a0c; border: 1px solid var(--line);
  overflow: hidden;
}
.bb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, var(--red-bright));
  box-shadow: 0 0 12px rgba(255,77,77,.55);
}
.bb-progress-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none;
}

/* --- [img] posted images + lightbox ---------------------------------------- */
.bb-img {
  max-width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--red-edge); cursor: zoom-in;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bb-img:hover { box-shadow: 0 0 20px rgba(193,18,18,.55); }
.bb-img-link { display: inline-block; max-width: 100%; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,5,7,.93);
}
.lightbox-overlay.open { display: flex; }
.lightbox-img {
  max-width: 92vw; max-height: 86vh; border-radius: 14px;
  border: 1px solid var(--red-edge);
  box-shadow: 0 0 44px rgba(193,18,18,.55);
}
.lightbox-close {
  position: absolute; top: 14px; right: 24px;
  font-size: 36px; line-height: 1; color: var(--red-bright);
  cursor: pointer; text-shadow: 0 0 12px rgba(255,77,77,.8);
}

/* --- Thread starter card ---------------------------------------------------- */
.op-card {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px; padding: 10px 14px;
}
.op-card-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--red-bright); writing-mode: horizontal-tb; white-space: nowrap;
}
.op-card-id { display: flex; flex-direction: column; gap: 2px; }
.op-card-name { font-weight: bold; font-size: 15px; }
@media (max-width: 640px) { .op-card-label { display: none; } }

/* --- Profile service (longevity) bar ---------------------------------------- */
.service-wrap { margin: 12px 0 4px; }
.service-label {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.service-label span:last-child { color: #fff; }

/* --- Scroll-to-new-post: arrival glow ---------------------------------------- */
.postbit { scroll-margin-top: 16px; }
.postbit:target { animation: post-arrive 2.4s ease; }
@keyframes post-arrive {
  0%, 35% { box-shadow: 0 0 0 2px var(--red-bright), 0 0 34px rgba(255,77,77,.65); }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .postbit:target { animation: none; } }

/* ==========================================================================
   Wave 2 — WormoCodes picks: scroll boxes, side channels, anchors, footnotes,
   countdowns, cosmic backgrounds, aligned images, sticky/served/prefix rows,
   enlist bar, recent recon, @mentions.
   ========================================================================== */

/* [scroll] — scrolling content box (Scrolling Div in Post) */
.bb-scroll {
  overflow-y: auto;
  border: 1px solid var(--red-edge);
  background: #0e0e11;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--red) #0e0e11;
}

/* [tangent] — side-channel reveal (Tangent Tag UBBC) */
details.bb-tangent {
  border: 1px dashed var(--red-edge);
  border-radius: 10px;
  margin: 8px 0;
  background: rgba(193, 18, 18, 0.05);
}
details.bb-tangent summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--ink);
  list-style: none;
}
details.bb-tangent summary::-webkit-details-marker { display: none; }
details.bb-tangent summary::before { content: "\25B8  "; color: #ffb35c; font-size: 10px; }
details.bb-tangent[open] summary::before { content: "\25BE  "; }
.tangent-tag {
  display: inline-block;
  background: #ffb35c;
  color: #1a0d00;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 1px 6px;
  margin-right: 6px;
}
.tangent-body { padding: 4px 12px 12px; border-top: 1px dashed var(--red-edge); }

/* [anchor]/[jump]/[toc] — internal post anchors (Internal Post Anchor System) */
.bb-anchor { scroll-margin-top: 80px; border-bottom: 1px dotted var(--red-edge); }
.bb-jump {
  display: inline-block;
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  padding: 0 8px;
  margin: 0 2px;
  font-size: 12px;
  text-decoration: none;
}
.bb-toc {
  display: inline-block;
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  background: #101014;
  padding: 8px 14px;
  margin: 8px 0;
  min-width: 200px;
}
.bb-toc-title { font-weight: bold; color: var(--red-bright); letter-spacing: 1px; font-size: 11px; text-transform: uppercase; margin-bottom: 4px; }
.bb-toc ol { margin: 4px 0; padding-left: 20px; }

/* [fn] — footnotes (FootNotes) */
.bb-fnref a { font-size: 10px; text-decoration: none; }
.bb-footnotes {
  margin-top: 12px;
  border-top: 1px solid var(--red-edge);
  padding-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.bb-footnotes-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--red-bright); margin-bottom: 4px; }
.bb-footnotes ol { margin: 4px 0; padding-left: 20px; }
.bb-footnotes li { scroll-margin-top: 80px; margin-bottom: 2px; }
.bb-fnback { text-decoration: none; }

/* [countdown] — mission timer (Countdown Event Object) */
.bb-countdown {
  display: inline-block;
  font-family: "Courier New", monospace;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #160808;
  padding: 3px 10px;
  margin: 2px 0;
  box-shadow: 0 0 10px rgba(193, 18, 18, 0.35);
}
.cd-label { color: var(--ink); }
.cd-tick { color: var(--red-bright); font-weight: bold; }
.bb-countdown.cd-live .cd-tick { color: #7dff9a; }

/* [bg] — curated cosmic post backgrounds (Backgrounds in Posts).
   The inner overlay keeps a dark veil over the art so text contrast never breaks. */
.bb-bg { border: 1px solid var(--red-edge); border-radius: 10px; overflow: hidden; margin: 8px 0; }
.bb-bg-inner { background: rgba(4, 4, 8, 0.68); padding: 14px 16px; }
.bb-bg-nebula { background: radial-gradient(ellipse at 20% 30%, #5e1030 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, #1a2a6c 0%, transparent 50%), linear-gradient(160deg, #2b0a1e, #0b0b18); }
.bb-bg-starfield { background: radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 68% 12%, #ffd7d7 0 1px, transparent 2px), radial-gradient(circle at 42% 66%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 44%, #ffb3b3 0 1px, transparent 2px), radial-gradient(circle at 28% 82%, #fff 0 1px, transparent 2px), linear-gradient(180deg, #050508, #101018); }
.bb-bg-void { background: linear-gradient(180deg, #000000 0%, #0d0202 60%, #1c0505 100%); }
.bb-bg-ember { background: radial-gradient(ellipse at 50% 110%, #ff4d00 0%, transparent 55%), radial-gradient(ellipse at 50% -20%, #7a1010 0%, transparent 50%), linear-gradient(180deg, #160404, #0b0b0d); }

/* [img=left|right|center] — wrap text around images */
.bb-img-link.bb-img-left { float: left; margin: 0 12px 8px 0; }
.bb-img-link.bb-img-right { float: right; margin: 0 0 8px 12px; }
.bb-img-link.bb-img-center { display: block; text-align: center; margin: 8px auto; }
.bb-img-link.bb-img-center .bb-img { margin: 0 auto; }

/* Sticky threads — pinned rows (Highlight sticky threads) */
tr.thread-sticky { background: rgba(193, 18, 18, 0.10); }
tr.thread-sticky td:first-child { box-shadow: inset 3px 0 0 var(--red-bright); }
.sticky-tag {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 1px 7px;
  margin-right: 6px;
  vertical-align: 1px;
}
.served-tag {
  display: inline-block;
  border: 1px solid var(--red-edge);
  color: var(--red-link);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 0 6px;
  margin-right: 6px;
  vertical-align: 1px;
}
.thread-prefix { color: var(--red-bright); font-weight: bold; letter-spacing: 1px; }
.thread-prefix::before { content: "["; }
.thread-prefix::after { content: "] "; }
.sticky-ctl { margin: 0; }

/* Thread ballots (2026-09-19) */
.ballot-tag {
  display: inline-block;
  border: 1px solid var(--red-edge);
  background: rgba(178, 34, 34, 0.18);
  color: var(--red-link);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 0 6px;
  margin-right: 6px;
  vertical-align: 1px;
}
.thread-poll { margin: 14px 0; }
.thread-poll .poll-question { margin: 2px 0 4px; }
.thread-poll .poll-results { margin-top: 10px; }
.thread-poll .poll-total { margin-top: 8px; }
.poll-fieldset {
  border: 1px solid var(--red-edge);
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px 14px;
  margin: 14px 0 0;
}
.poll-fieldset legend {
  color: var(--red-link);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 8px;
}
.poll-attach { margin: 14px 0; }
.poll-attach-sum {
  cursor: pointer;
  padding: 12px 16px;
  color: var(--red-link);
  font-weight: bold;
  list-style: none;
}
.poll-attach-sum::-webkit-details-marker { display: none; }
.poll-attach-sum::before { content: "\25B6\00a0"; font-size: 11px; }
.poll-attach[open] .poll-attach-sum::before { content: "\25BC\00a0"; }

/* Guest enlist bar (Register Alert) */
.enlist-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #2a0606, #4a0d0d, #2a0606);
  border-bottom: 1px solid var(--red-edge);
  color: var(--ink);
  text-decoration: none;
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: 1px;
}
.enlist-bar:hover { color: #fff; background: linear-gradient(90deg, #3a0808, #5e1010, #3a0808); }
.enlist-bar .enlist-go { color: var(--red-bright); font-weight: bold; }

/* Recent Recon panel (Thread Log) */
.recon-panel { margin-top: 12px; }
.recon-list { list-style: none; margin: 0; padding: 8px 14px 12px; }
.recon-list li { padding: 3px 0; border-bottom: 1px dotted #2a1414; }
.recon-list li:last-child { border-bottom: none; }
.recon-list li::before { content: "\25B8  "; color: var(--red-bright); font-size: 10px; }

/* @username mentions (User Tag) */
.bb-mention {
  background: rgba(193, 18, 18, 0.16);
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  padding: 0 5px;
  text-decoration: none;
  white-space: nowrap;
}
.bb-mention:hover { background: rgba(193, 18, 18, 0.32); }

@media (prefers-reduced-motion: reduce) {
  .bb-countdown { box-shadow: none; }
}

/* ============ Wave 3 ============ */

/* Salute buttons (fleet likes) */
.salute-btn {
  background: transparent;
  border: 1px solid var(--red-edge);
  color: var(--ink-dim);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 1px;
}
.salute-btn:hover { color: var(--red-bright); border-color: var(--red-bright); }
.salute-btn.saluted {
  background: rgba(193, 18, 18, 0.25);
  color: #ffb3b3;
  border-color: var(--red-bright);
  box-shadow: 0 0 8px rgba(193, 18, 18, 0.45);
}
.salute-btn:disabled { opacity: 0.6; cursor: wait; }
.salute-count-guest { font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; }

/* Copy transmission link */
.copy-link-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
}
.copy-link-btn:hover { color: var(--red-bright); border-color: var(--red-edge); }
.copy-link-btn.copied { color: #8aff8a; }

/* Signal Trace dossier card (Silkworm evolved) */
.trace-card {
  position: fixed;
  z-index: 300;
  width: 280px;
  background: #120404;
  border: 1px solid var(--red-bright);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(193, 18, 18, 0.35);
  padding: 12px;
  font-size: 12px;
  animation: trace-in 0.15s ease-out;
}
@keyframes trace-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.trace-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.trace-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.trace-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: #4a0d0d; color: #ffd7d7; font-weight: bold;
}
.trace-name { font-weight: bold; color: var(--red-bright); text-decoration: none; }
.trace-name:hover { text-decoration: underline; }
.trace-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--red-edge); border-bottom: 1px solid var(--red-edge);
  padding: 6px 0; margin-bottom: 8px; text-align: center;
}
.trace-stats span { display: flex; flex-direction: column; font-size: 10px; color: var(--ink-dim); }
.trace-stats b { color: var(--ink); font-size: 13px; }
.trace-recent-title { font-size: 10px; letter-spacing: 2px; color: var(--ink-dim); margin-bottom: 4px; }
.trace-recent ul { list-style: none; margin: 0; padding: 0; }
.trace-recent li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-recent li::before { content: "\25B8  "; color: var(--red-bright); font-size: 10px; }
.trace-full { display: block; margin-top: 8px; text-align: right; font-size: 11px; }

/* Header search */
.header-search { display: flex; align-items: center; gap: 4px; }
.header-search input[type="search"] {
  background: #0a0202;
  border: 1px solid var(--red-edge);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  width: 170px;
}
.header-search input[type="search"]:focus { border-color: var(--red-bright); outline: none; }
.header-search button {
  background: transparent;
  border: 1px solid var(--red-edge);
  color: var(--red-bright);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
}
.header-search button:hover { background: rgba(193, 18, 18, 0.2); }

/* Search page */
.search-form { display: flex; gap: 8px; margin-bottom: 12px; }
.search-form input[type="search"] {
  flex: 1;
  background: #0a0202;
  border: 1px solid var(--red-edge);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}
.search-form input[type="search"]:focus { border-color: var(--red-bright); outline: none; }
.search-results { list-style: none; margin: 12px 0 0; padding: 0; }
.search-result { padding: 10px 4px; border-bottom: 1px dotted #2a1414; }
.search-result:last-child { border-bottom: none; }
.search-result-title { font-weight: bold; font-size: 14px; }
.search-snippet { margin: 4px 0; font-size: 13px; color: var(--ink-dim); }
mark.hl {
  background: rgba(193, 18, 18, 0.55);
  color: #fff;
  border-radius: 4px;
  padding: 0 2px;
}

/* Transmission scroll (marquee) */
.bb-marquee {
  overflow: hidden;
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  background: #0d0303;
  padding: 6px 0;
  margin: 8px 0;
}
.bb-marquee-track { display: inline-block; white-space: nowrap; padding-left: 100%; animation: bb-mq 14s linear infinite; }
.bb-marquee-track span { color: var(--red-bright); letter-spacing: 2px; font-size: 12px; }
@keyframes bb-mq { to { transform: translateX(-100%); } }

/* Classified redaction */
.bb-redact {
  background: transparent;
  border: 1px dashed var(--red-edge);
  border-radius: 8px;
  padding: 2px 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
}
.bb-redact-secret {
  background: #000;
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  user-select: none;
  box-shadow: inset 0 0 0 1px #3a0d0d;
}
.bb-redact.revealed .bb-redact-secret {
  background: rgba(0, 0, 0, 0.55);
  color: #ffd7d7;
  user-select: text;
}
.bb-redact-stamp {
  display: none;
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #8aff8a;
  border: 1px solid #8aff8a;
  border-radius: 8px;
  padding: 1px 6px;
  transform: rotate(-4deg);
}
.bb-redact.revealed .bb-redact-stamp { display: inline-block; }

/* Encrypted transmission */
.bb-cipher {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #0d0303;
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
}
.bb-cipher-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--red-bright);
  border: 1px solid var(--red-edge);
  border-radius: 8px;
  padding: 1px 6px;
  margin-right: 8px;
}
.bb-cipher.decoded .bb-cipher-text { color: #8aff8a; }
.bb-cipher:hover { border-color: var(--red-bright); }

/* Dice roller */
.bb-roll {
  background: linear-gradient(180deg, #2a0808, #160404);
  border: 1px solid var(--red-bright);
  border-radius: 10px;
  color: #ffd7d7;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 1px;
  margin: 6px 0;
}
.bb-roll:hover { box-shadow: 0 0 12px rgba(193, 18, 18, 0.5); }
.bb-roll-face { font-size: 18px; margin-right: 8px; vertical-align: -2px; }
.bb-roll.rolling .bb-roll-face { display: inline-block; animation: bb-dice 0.4s linear infinite; }
@keyframes bb-dice { to { transform: rotate(360deg); } }
.bb-roll.rolled { border-color: #8aff8a; }
.bb-roll.rolled .bb-roll-label { color: #8aff8a; }

/* Alert banners */
.bb-banner {
  border: 1px solid;
  border-left-width: 5px;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0.45);
}
.bb-banner-tag {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.bb-banner-red { border-color: #c11212; color: #ffb3b3; }
.bb-banner-red .bb-banner-tag { color: #ff6b6b; animation: bb-blink 1.6s steps(2) infinite; }
.bb-banner-amber { border-color: #b97c1a; color: #ffd9a0; }
.bb-banner-amber .bb-banner-tag { color: #ffb84d; }
.bb-banner-green { border-color: #2e8b57; color: #b0ffd0; }
.bb-banner-green .bb-banner-tag { color: #5ce08a; }
@keyframes bb-blink { 50% { opacity: 0.35; } }

/* Composer word meter */
.word-meter {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-dim);
  text-align: right;
  padding: 2px 4px 0;
}
.word-meter.ready { color: var(--red-bright); }

@media (prefers-reduced-motion: reduce) {
  .bb-marquee-track { animation: none; padding-left: 0; }
  .bb-banner-red .bb-banner-tag { animation: none; }
  .bb-roll.rolling .bb-roll-face { animation: none; }
  .trace-card { animation: none; }
}

/* Tool picker panel — real buttons instead of prompt() text boxes */
.bb-picker {
  border: 1px solid var(--red-edge);
  border-radius: 10px;
  background: #120404;
  margin: 6px 0;
  padding: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.bb-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 8px;
}
.bb-picker-x {
  background: transparent;
  border: 1px solid var(--red-edge);
  color: var(--ink-dim);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 12px;
}
.bb-picker-x:hover { color: var(--red-bright); border-color: var(--red-bright); }
.bb-picker-body { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-pick {
  background: #1d0606;
  border: 1px solid var(--red-edge);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 42px;
}
.bb-pick:hover, .bb-pick:active {
  border-color: var(--red-bright);
  color: #ffb3b3;
  background: rgba(193, 18, 18, 0.18);
}
.bb-pick-go { border-color: var(--red-bright); color: #ffb3b3; font-weight: bold; }
.bb-pick-red { border-left: 4px solid #c11212; }
.bb-pick-amber { border-left: 4px solid #b97c1a; }
.bb-pick-green { border-left: 4px solid #2e8b57; }
.bb-pick-row { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.bb-pick-input {
  width: 100%;
  background: #0a0202;
  border: 1px solid var(--red-edge);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
}
.bb-pick-input:focus { border-color: var(--red-bright); outline: none; }
.bb-picker-err { color: #ff8080; font-size: 12px; margin-top: 6px; }
.bb-picker-err:empty { margin-top: 0; }

/* ==========================================================================
   Command Deck (wave 4) + professional polish pass.
   New components: hub cards, deck rows/items, empty states, vote tracks,
   debate grid, cipher blocks, digest, dead drops, polls, archive.
   Contrast discipline holds: bright-on-dark only, white text on red fills.
   ========================================================================== */

/* --- extra badges & buttons -------------------------------------------- */
.badge-warn { background: #2a1f0d; border: 1px solid #d8a03c; color: #ffe1a8; }
.badge-dim { background: #1c1c20; border: 1px solid #55555e; color: #b9b9c2; }
.badge-info { background: #0d1d2a; border: 1px solid #3f8fbf; color: #bfe6ff; }

.btn-ghost {
  background: transparent; border: 2px solid var(--red-edge); color: var(--red-link);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--red-bright); color: #fff; background: rgba(193,18,18,.12); box-shadow: none; }
.btn-active {
  background: linear-gradient(180deg, #d21f1f 0%, #7d1010 100%) !important;
  border-color: var(--red-bright) !important; color: #fff !important;
}

.count-pill {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 8px; font-size: 11px; font-weight: bold; color: #fff;
  background: var(--red); border-radius: 999px; vertical-align: 2px;
}

/* --- deck page chrome --------------------------------------------------- */
.deck-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 14px;
}
.deck-head .page-title { margin: 0; }
.deck-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; max-width: 640px; }
.deck-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.deck-section {
  margin: 22px 0 10px; font-size: 14px; color: var(--red-bright);
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.deck-section:first-of-type { margin-top: 6px; }

/* --- hub cards ---------------------------------------------------------- */
.deck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.deck-card {
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.deck-card:hover { transform: translateY(-2px); border-color: var(--red-bright);
  box-shadow: 0 6px 22px rgba(255,60,60,.18); color: var(--ink); }
.deck-card-icon { width: 34px; height: 34px; color: var(--red-bright); }
.deck-card-icon svg { width: 100%; height: 100%; }
.deck-card-name { font-size: 15px; font-weight: bold; color: #fff; }
.deck-card-desc { font-size: 12px; color: var(--muted); flex: 1; }
.deck-card-count { font-size: 12px; color: var(--muted); }
.deck-card-count b { color: var(--red-bright); font-size: 15px; }
.deck-card-go { color: var(--red-link); font-weight: bold; }

/* --- rows & items ------------------------------------------------------- */
.deck-list { display: flex; flex-direction: column; gap: 10px; }
.deck-row {
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
a.deck-row:hover { border-color: var(--red-bright); box-shadow: 0 4px 16px rgba(255,60,60,.14); color: var(--ink); }
.deck-row-icon { width: 30px; height: 30px; flex: none; color: var(--red-bright); }
.deck-row-icon svg { width: 100%; height: 100%; }
.deck-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.deck-row-title { font-weight: bold; color: #fff; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.deck-row-go { color: var(--red-link); font-size: 18px; font-weight: bold; flex: none; }
.deck-row.is-unread { border-left: 3px solid var(--red-bright); }
.unread-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red-bright); box-shadow: 0 0 8px var(--red-bright); flex: none;
}

.deck-item { padding: 14px 16px; border-radius: var(--radius-sm); }
.deck-item + .deck-item, .deck-list .deck-item { margin-bottom: 10px; }
.deck-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.deck-item-head h3 { margin: 0; font-size: 15px; color: #fff; }
.deck-item-body { color: var(--ink); margin: 8px 0; }
.deck-item-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.deck-item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mission-reward { font-size: 13px; color: #ffe1a8; margin: 4px 0; }
.mission-claimed { border-left: 3px solid #d8a03c; }
.mission-complete { opacity: .85; }
.mission-complete .deck-item-head h3 { text-decoration: line-through; text-decoration-color: var(--red-bright); }

/* --- empty states ------------------------------------------------------- */
.empty-state { text-align: center; padding: 36px 20px; }
.empty-state h3 { margin: 10px 0 6px; color: #fff; font-size: 16px; }
.empty-state .meta { max-width: 440px; margin: 0 auto; }
.empty-icon { width: 52px; height: 52px; margin: 0 auto; color: var(--red-bright); opacity: .9; }
.empty-icon svg { width: 100%; height: 100%; }
.empty-cta { margin-top: 16px; }

/* --- forms -------------------------------------------------------------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row label { min-width: 0; }
.pad { padding: 12px 16px; }
.pad-form { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.stacked-form input[type="number"],
.stacked-form input[type="datetime-local"],
.stacked-form select {
  font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 2px inset var(--red-edge); background: #0e0e10; color: var(--ink);
  border-radius: var(--radius-sm, 4px); max-width: 100%;
}
.stacked-form input:focus, .stacked-form select:focus { outline: none; border-color: var(--red-bright); }
.reply-video-pick { margin-top: 4px; }

/* --- cipher hunts -------------------------------------------------------- */
.hunt-cipher {
  font-family: "Courier New", Courier, monospace; font-size: 15px; letter-spacing: 2px;
  color: #7dff9a; background: #061206; border: 1px solid #1f5c2e;
  padding: 16px; border-radius: 10px; white-space: pre-wrap; word-break: break-word;
  margin: 0 0 8px;
}
.hunt-verdict { padding: 14px 16px; margin-bottom: 12px; border-left: 3px solid #3fae3f; }
.hunt-verdict p { margin: 8px 0 0; }
.hunt-answer {
  font-family: "Courier New", Courier, monospace; font-size: 14px; color: #c9ffc9;
  background: #061206; border: 1px dashed #3fae3f; padding: 10px 12px; border-radius: 10px;
}

/* --- events ------------------------------------------------------------- */
.rsvp-group { margin-top: 12px; }
.rsvp-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--red-bright); }
.rsvp-names { display: flex; flex-wrap: wrap; gap: 6px; }
.rsvp-names a {
  padding: 3px 10px; border: 1px solid var(--red-edge); border-radius: 999px;
  font-size: 12px; text-decoration: none;
}
.rsvp-names a:hover { border-color: var(--red-bright); }

/* --- debates & polls: vote tracks --------------------------------------- */
.debate-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
  margin-bottom: 12px;
}
.debate-side { padding: 16px; border-radius: var(--radius-sm); }
.debate-side h3 { margin: 0 0 10px; color: #fff; font-size: 15px; }
.debate-vs {
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; color: var(--red-bright); font-size: 18px; letter-spacing: 2px;
}
.debate-side.my-side { border-color: var(--red-bright); box-shadow: 0 0 14px rgba(255,60,60,.25); }
.vote-track { height: 14px; background: #0e0e10; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.vote-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.vote-fill.fill-a { background: linear-gradient(90deg, #7d1010, var(--red-bright)); }
.vote-fill.fill-b { background: linear-gradient(90deg, #103a7d, #4d9fff); }
.vote-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.debate-verdict {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px;
  background: #0d1a0d; border: 1px solid #3fae3f; border-radius: 10px;
}
.poll-option { margin-bottom: 14px; }
.poll-option-head {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px;
}
.poll-option-head span:first-child { color: #fff; font-weight: bold; }
.poll-option.my-vote .poll-option-head span:first-child { color: var(--red-bright); }
.poll-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.poll-choice {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  font-weight: normal !important; font-size: 13px !important;
}
.poll-choice:hover { border-color: var(--red-bright); }
.poll-choice input[type="radio"] { width: 18px; height: 18px; accent-color: var(--red-bright); flex: none; }

/* --- dead drops ---------------------------------------------------------- */
.drop-body {
  font-size: 14px; line-height: 1.7; color: var(--ink);
  background: #101014; border: 1px dashed var(--red-edge);
  padding: 18px; border-radius: 12px;
}
.drop-burned { text-align: center; padding: 30px 16px; }
.drop-burned h3 { color: var(--red-bright); margin: 10px 0 6px; }
.burn-note { margin-top: 12px; color: #d8a03c; }

/* --- beacon -------------------------------------------------------------- */
.deck-item.is-best { border-color: #3fae3f; box-shadow: 0 0 14px rgba(63,174,63,.18); }
.best-ribbon { margin-bottom: 8px; }

/* --- archive -------------------------------------------------------------- */
.archive-body { font-size: 14px; line-height: 1.7; }

/* --- digest --------------------------------------------------------------- */
.digest-sec { margin-bottom: 12px; }
.digest-icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; color: var(--red-bright); }
.digest-icon svg { width: 100%; height: 100%; }
.digest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.digest-list li { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.digest-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.digest-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.digest-video {
  display: flex; flex-direction: column; gap: 4px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
}
.digest-video:hover { border-color: var(--red-bright); }
.digest-video-cap { color: #fff; font-size: 12px; font-weight: bold; }

/* --- video replies in threads ---------------------------------------------- */
.postbit-video { margin: 10px 0 4px; max-width: 420px; }
.postbit-video .video-player { width: 100%; border: 1px solid var(--red-edge); border-radius: 12px; background: #000; }

/* --- professional polish: focus, motion, responsive ------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--red-bright); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .deck-card, .vote-fill { transition: none; }
  .deck-card:hover { transform: none; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .debate-grid { grid-template-columns: 1fr; }
  .debate-vs { padding: 2px 0; }
  .deck-head { flex-direction: column; align-items: stretch; }
  .deck-actions .btn { flex: 1; text-align: center; }
  .deck-row { padding: 10px; }
}

/* --- Fleet Roster: member list + leaderboards ------------------------------ */
.roster-filter { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; align-items: center; }
.roster-filter input[type="search"] {
  flex: 1; min-width: 180px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--red-edge); background: var(--black); color: var(--ink); font-size: 13px;
}
.roster-filter input[type="search"]::placeholder { color: var(--muted); }
.roster-filter select {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--red-edge);
  background: var(--panel-2); color: var(--ink); font-size: 13px;
}
.leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.leader-card { padding: 12px 14px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.leader-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(193, 18, 18, 0.25); }
.leader-title { margin: 0 0 8px; font-size: 13px; color: var(--red-bright); text-transform: uppercase; letter-spacing: 0.6px; }
.leader-list { list-style: none; margin: 0; padding: 0; counter-reset: leader; }
.leader-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.leader-row:last-child { border-bottom: none; }
.leader-rank { width: 20px; font-weight: bold; color: var(--red-bright); text-align: center; flex-shrink: 0; }
.leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.leader-name:hover { color: var(--red-link); }
.leader-count { font-weight: bold; color: var(--ink); font-size: 12px; white-space: nowrap; }
.roster-table th a { color: var(--red-link); text-decoration: none; }
.roster-table th a:hover { color: var(--red-bright); }
.roster-table th a.sort-active { color: var(--red-bright); text-decoration: underline; }
.roster-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.roster-member { display: flex; align-items: center; gap: 10px; }
.roster-id { display: flex; flex-direction: column; min-width: 0; }
.roster-name { font-weight: bold; color: var(--ink); text-decoration: none; }
.roster-name:hover { color: var(--red-link); }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; margin-left: 4px; vertical-align: middle; }
.online-now { color: #3ddc84; font-weight: bold; }
@media (max-width: 980px) { .leader-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .leader-grid { grid-template-columns: 1fr; }
  .roster-table .hide-sm { display: none; }
  .roster-filter .btn { flex: 1; }
}

/* ==========================================================================
   Worth Exploring — the scatter-brain genius layer.
   Energy pulses, wiggling icons, wishing stars, whispering footers.
   All additive. Honors prefers-reduced-motion.
   ========================================================================== */

/* --- catbar: a pulse of red energy sweeps each category bar ---------------- */
.catbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  opacity: 0; pointer-events: none;
  animation: catbar-pulse 9s ease-in-out infinite;
}
@keyframes catbar-pulse {
  0%, 84% { opacity: 0; background-position: -50% 0; }
  88% { opacity: .9; }
  97%, 100% { opacity: 0; background-position: 150% 0; }
}

/* --- board rows: the icon wiggles awake on hover ---------------------------- */
.board-row:hover .board-icon {
  animation: icon-wiggle .5s ease;
  color: var(--red-bright);
  box-shadow: 0 0 12px rgba(255,70,70,.55), inset 0 0 8px rgba(255,60,60,.25);
}
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-14deg) scale(1.12); }
  75% { transform: rotate(14deg) scale(1.12); }
}

/* --- stat cards: lift toward the curious ------------------------------------- */
.stat-grid .stat { transition: transform .15s ease, box-shadow .15s ease; }
.stat-grid .stat:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(255,60,60,.35); }

/* --- footer: whisper line + wishing star -------------------------------------- */
.footer-whisper {
  min-height: 1.4em; font-size: 11px; letter-spacing: 2px;
  color: var(--muted); margin: 6px 0 0; transition: opacity .6s ease;
}
.footer-star {
  background: none; border: none; color: var(--red-bright); font-size: 20px;
  cursor: pointer; padding: 6px 12px; line-height: 1;
  transition: transform .2s ease, text-shadow .2s ease;
}
.footer-star:hover { transform: scale(1.3) rotate(25deg); text-shadow: 0 0 14px var(--red-bright); }
.footer-star:active { transform: scale(.95); }
.star-particle {
  position: fixed; z-index: 9999; pointer-events: none;
  color: var(--red-bright); font-size: 14px; line-height: 1;
  animation: star-burst 1s ease-out forwards;
}
@keyframes star-burst {
  to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* Throwable emoji reactions: tray chips, the fan-out bubble, flight, burst */
.rxn-tray { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rxn-tray:empty { display: none; }
.rxn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #141416; border: 1px solid var(--red-edge); border-radius: 999px;
  padding: 3px 10px 3px 4px; color: var(--ink); font-size: 12px;
}
button.rxn-chip { cursor: pointer; }
button.rxn-chip:active { transform: scale(1.18); }
.rxn-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.rxn-chip b { font-weight: bold; }
.rxn-fan {
  position: fixed; z-index: 9600;
  display: grid; grid-template-columns: repeat(5, 40px); gap: 6px;
  background: rgba(12, 12, 14, 0.97); border: 1px solid var(--red-edge);
  border-radius: 18px; padding: 10px; margin: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 60, 60, 0.25);
}
.rxn-face {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #1a1a1e; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  animation: rxn-pop-in 0.22s backwards;
}
.rxn-face img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; pointer-events: none; }
.rxn-face:active { transform: scale(1.25); }
@keyframes rxn-pop-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.rxn-fly {
  position: fixed; z-index: 9601; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; pointer-events: none; margin: 0;
  box-shadow: 0 0 16px rgba(255, 200, 80, 0.65);
}
.rxn-particle {
  position: fixed; z-index: 9601; pointer-events: none; line-height: 1;
  animation: rxn-burst 0.9s ease-out forwards;
}
@keyframes rxn-burst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .catbar::after { animation: none; }
  .board-row:hover .board-icon { animation: none; }
}

/* --- Talk to AI ------------------------------------------------------------ */
.ai-wrap { padding: 0 0 14px; }
.ai-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.ai-orb {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #ff9a9a, #c11212 55%, #3d0505);
  animation: orb-breathe 3s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(255,60,60,.45); transform: scale(1); }
  50% { box-shadow: 0 0 26px rgba(255,80,80,.85); transform: scale(1.06); }
}
.ai-name { font-size: 18px; font-weight: bold; color: #fff; letter-spacing: 3px; display: flex; align-items: center; gap: 8px; }
.ai-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ai-wipe { margin-left: auto; }
.ai-log {
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 16px; max-height: 52vh; overflow-y: auto;
  background: rgba(0,0,0,.28); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ai-msg { display: flex; }
.ai-user { justify-content: flex-end; }
.ai-bubble {
  max-width: 80%; padding: 9px 14px; font-size: 13px; line-height: 1.55;
  border-radius: 14px; overflow-wrap: break-word;
}
.ai-sable .ai-bubble {
  background: linear-gradient(180deg, #2b0e0e, #180707);
  border: 1px solid var(--red-edge); color: var(--ink);
  border-top-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ai-user .ai-bubble {
  background: linear-gradient(180deg, #a31212, #6d0b0b);
  color: #fff; border-top-right-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* Solid's bubble: same red/black family, cooler steel tint so the three-way line reads at a glance */
.ai-solid .ai-bubble {
  background: linear-gradient(180deg, #1d1d24, #101014);
  border: 1px solid #55555f; color: #ececf1;
  border-top-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.ai-solid .ai-bubble b { color: #fff; }
.ai-solid .ai-bubble a { color: #d7d7ff; }
/* name tags above our bubbles — essential on a three-way line */
.ai-sable > .ai-bubble, .ai-solid > .ai-bubble { position: relative; margin-top: 15px; }
.ai-sable > .ai-bubble::before, .ai-solid > .ai-bubble::before {
  position: absolute; top: -14px; left: 3px;
  font-size: 9px; letter-spacing: 2.5px; font-weight: bold; opacity: .85;
}
.ai-sable > .ai-bubble::before { content: 'SABLE'; color: var(--red-bright); }
.ai-solid > .ai-bubble::before { content: 'SOLID'; color: #b9b9c6; }
/* PROVOLTA — a holographic transmission: teal-and-black wave borders top and
   bottom, her name signed in script, flickering teal signal on near-black.
   Text only, never voice. */
.ai-provolta { margin: 18px 0 14px; animation: pv-arrive .8s ease-out; }
@keyframes pv-arrive {
  0% { opacity: 0; transform: scale(.92); filter: drop-shadow(0 0 36px rgba(255,255,255,.95)); }
  55% { opacity: 1; transform: scale(1.015); filter: drop-shadow(0 0 24px rgba(255,255,255,.7)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 14px rgba(255,255,255,.38)); }
}
.ai-provolta::before, .ai-provolta::after {
  content: ""; display: block; height: 11px; border-radius: 6px;
  background: repeating-linear-gradient(115deg, #010503 0 12px, #0d9488 12px 18px, #14e0c8 18px 24px, #010503 24px 38px);
  background-size: 76px 100%;
  border: 1px solid #000;
  box-shadow: 0 0 12px rgba(20, 224, 200, .4);
  animation: pv-wave 2.8s linear infinite;
}
.ai-provolta::before { margin-bottom: 7px; }
.ai-provolta::after { margin-top: 7px; animation-direction: reverse; }
@keyframes pv-wave { to { background-position: 76px 0; } }
.ai-provolta > .ai-bubble {
  position: relative;
  background: linear-gradient(180deg, rgba(4, 18, 16, .94), rgba(2, 8, 7, .96));
  border: 2px solid #000; color: #d2fff6;
  outline: 1px solid rgba(20, 224, 200, .35);
  border-top-left-radius: 4px;
  text-shadow: 0 0 7px rgba(20, 224, 200, .7);
  box-shadow: 0 0 26px rgba(255, 255, 255, .30), 0 0 18px rgba(20, 224, 200, .16), inset 0 0 24px rgba(20, 224, 200, .06);
  overflow: hidden;
  white-space: pre-line;
  animation: pv-flicker 5s infinite;
}
.ai-provolta > .ai-bubble::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(20, 224, 200, .07) 0 2px, transparent 2px 4px);
}
@keyframes pv-flicker {
  0%, 91%, 94%, 96%, 100% { opacity: 1; }
  92% { opacity: .55; }
  95% { opacity: .78; }
}
.ai-provolta .ai-bubble b { color: #fff; }
.ai-provolta .ai-bubble a { color: #a7f3ea; }
.pv-sig {
  display: block;
  font-family: 'Snell Roundhand', 'Brush Script MT', 'Apple Chancery', 'Segoe Script', cursive;
  font-size: 34px; line-height: 1.15; color: #6df2df;
  text-shadow: 0 0 16px rgba(20, 224, 200, .65);
  transform: rotate(-2.5deg); transform-origin: left center;
  margin: 2px 0 2px 2px;
}
.pv-sub { display: block; font-size: 9px; letter-spacing: 2.5px; color: rgba(109, 242, 223, .55); margin-bottom: 8px; }
.pv-text { display: block; }
.ai-bubble a { color: #ffb3b3; font-weight: bold; }
.ai-bubble b { color: #ffd7d7; }
.ai-user .ai-bubble b { color: #fff; }
.ai-typing { display: inline-flex; gap: 5px; align-items: center; padding: 13px 16px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-bright); animation: typing-blink 1.1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typing-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.ai-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 0; }
.ai-chip {
  background: #1c0a0a; border: 1px solid var(--red-edge); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ai-chip:hover { background: #3d0f0f; transform: translateY(-1px); }
/* Suggestion casino — the chip clutter in one slot-reel, mirroring the
   forum's casino nav: one scroll window, gold lock line, steppers. */
.ai-chips { display: block; padding: 10px 12px 0; }
.chip-machine {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #0d0b06, #060505);
  border: 1px solid rgba(212,175,55,.55); border-radius: 14px;
  padding: 6px 8px;
  box-shadow: 0 0 14px rgba(212,175,55,.16), inset 0 0 10px rgba(0,0,0,.6);
}
.chip-window {
  position: relative; flex: 1; min-width: 0; height: 36px; overflow: hidden;
  background: #030303; border: 1px solid rgba(212,175,55,.35); border-radius: 8px;
  touch-action: none; cursor: grab;
}
.chip-window:focus-visible { outline: 2px solid #f5d67b; outline-offset: 2px; }
.chip-strip { will-change: transform; }
.chip-item {
  height: 34px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; padding: 0; font: inherit;
  color: #a06a6a; font-size: 13px; white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.chip-item.chip-locked {
  color: #ffe9a8; font-weight: 700;
  text-shadow: 0 0 10px rgba(245,197,66,.9);
}
.chip-lockline {
  position: absolute; left: 0; right: 0; top: 1px; height: 34px; pointer-events: none;
  border-top: 1px solid #d4af37; border-bottom: 1px solid #d4af37;
  box-shadow: inset 0 0 14px rgba(212,175,55,.28);
  background: linear-gradient(180deg, rgba(212,175,55,.10), transparent 40%, transparent 60%, rgba(212,175,55,.10));
}
.chip-lockline::before, .chip-lockline::after {
  content: "◆"; position: absolute; top: 50%; transform: translateY(-50%);
  color: #f5d67b; font-size: 10px; text-shadow: 0 0 6px rgba(245,197,66,.9);
}
.chip-lockline::before { left: 4px; }
.chip-lockline::after { right: 4px; }
.chip-step {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(212,175,55,.55); background: #1c0f06; color: #f5d67b;
  font-size: 12px; cursor: pointer;
}
.chip-step:active { background: #3d2408; }
/* Text-tool controls riding inside the single-line reel: shrink the minibar
   buttons/slider to fit one 34px row; the slider keeps its own touch drag. */
.chip-item .cw-mbtn { min-height: 30px; min-width: 34px; padding: 4px 9px; font-size: 14px; }
.chip-item .cw-msize { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.chip-item .cw-msize input[type=range] { width: 90px; touch-action: pan-x; }
.ai-form { display: flex; gap: 8px; padding: 10px 16px 2px; align-items: flex-end; }
.ai-form input, .ai-form .ai-box {
  flex: 1; min-width: 0; background: #0c0c0e; border: 1px solid var(--red-edge); color: var(--ink);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 16px; /* 16px stops iOS auto-zoom on focus */
}
.ai-form button { flex-shrink: 0; }
.ai-form input:focus, .ai-form .ai-box:focus { outline: none; border-color: var(--red-bright); box-shadow: 0 0 10px rgba(255,60,60,.35); }
/* SABLE's no-tags chat box: a single-line styled surface — bold looks bold,
   never [b] codes. Codes are converted silently at send time. */
.ai-form .ai-box {
  display: block; max-height: 120px; overflow-y: auto; overflow-x: hidden;
  line-height: 1.45; word-break: break-word; cursor: text;
  -webkit-user-select: text; user-select: text;
}
.ai-box:empty::before {
  content: attr(data-placeholder); color: #7a4a4a; pointer-events: none;
}
.ai-box b, .ai-box strong { font-weight: 700; }
.ai-box i, .ai-box em { font-style: italic; }
.ai-box img { height: 1.35em; width: auto; vertical-align: -0.25em; }

@media (prefers-reduced-motion: reduce) {
  .ai-orb { animation: none; }
  .ai-typing i { animation: none; opacity: .6; }
}

/* --- SABLE secret sidebar: the hidden guardian ------------------------------ */
.sable-summon {
  position: fixed; right: 14px; bottom: 14px; z-index: 9000;
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--red-edge); background: #000; padding: 0; cursor: pointer;
  box-shadow: 0 0 16px rgba(255,60,60,.5);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: summon-nudge 12s ease-in-out infinite;
}
.sable-summon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sable-summon:hover { transform: scale(1.12) rotate(-6deg); box-shadow: 0 0 28px rgba(255,80,80,.85); animation: none; }
@keyframes summon-nudge {
  0%, 93%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 16px rgba(255,60,60,.5); }
  95% { transform: scale(1.1) rotate(-8deg); box-shadow: 0 0 26px rgba(255,80,80,.9); }
  97% { transform: scale(1.1) rotate(8deg); }
}
.sable-side {
  position: fixed; top: 0; right: 0; z-index: 9001;
  width: min(390px, 94vw); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,7,7,.98), rgba(8,3,3,.99));
  border-left: 2px solid var(--red-edge);
  border-radius: 18px 0 0 18px;
  box-shadow: -12px 0 40px rgba(0,0,0,.6);
  transform: translateX(106%);
  transition: transform .32s cubic-bezier(.2,.9,.25,1);
  overflow: hidden;
}
.sable-side.open { transform: none; }
/* Slide-to-hide: the panel glides offscreen WITHOUT closing — the session,
   the voice loop, and the conversation all keep running behind it. */
.sable-side.open.slid { transform: translateX(106%); }
/* Slide-to-hide lives in the chat header now (a › button beside ×): it used
   to float mid-panel over the messages, which got in the way of reading. */
.sable-slide-grip {
  position: static; transform: none; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: none; border: 1px solid var(--red-edge); color: var(--ink);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y; /* horizontal drags on it still slide the panel */
}
.sable-slide-grip:hover { background: #3d0f0f; }
.sable-slide-grip:active { background: #3d0f0f; }
/* Edge tab left peeking at the screen's edge while the chat is slid away. */
.sable-slide-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9000;
  width: 30px; height: 110px; border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #7a1616, #2a0808);
  border: 1px solid var(--red-edge); border-right: none; color: #ffb3b3;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: -4px 0 18px rgba(255,60,60,.35);
  animation: slidetab-pulse 3s ease-in-out infinite;
}
body.sable-slid .sable-slide-tab { display: flex; }
.sable-slide-tab:active { background: #3d0f0f; }
@keyframes slidetab-pulse {
  0%, 100% { box-shadow: -4px 0 18px rgba(255,60,60,.35); }
  50% { box-shadow: -4px 0 32px rgba(255,80,80,.75); }
}

/* --- Ship's Log side panel: notes on the side, independent of the chat ------ */
.logbook-side {
  position: fixed; top: 0; left: 0; z-index: 9002;
  width: min(340px, 88vw); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(22,7,7,.98), rgba(8,3,3,.99));
  border-right: 2px solid var(--red-edge);
  border-radius: 0 18px 18px 0;
  box-shadow: 12px 0 40px rgba(0,0,0,.6);
  transform: translateX(-106%);
  transition: transform .32s cubic-bezier(.2,.9,.25,1);
  overflow: hidden;
}
.logbook-side.open { transform: none; }
.logbook-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--red-edge);
  background: linear-gradient(180deg, rgba(120,20,20,.25), transparent);
}
.logbook-head .sable-close { margin-left: auto; }
.logbook-icon { font-size: 22px; }
.logbook-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.logbook-hint {
  padding: 6px 14px 0; font-size: 11px; opacity: .55; text-align: center;
  pointer-events: none;
}
.logbook-tab {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9000;
  width: 30px; height: 110px; border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #7a1616, #2a0808);
  border: 1px solid var(--red-edge); border-left: none; color: #ffb3b3;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 0 18px rgba(255,60,60,.35);
  animation: slidetab-pulse 3s ease-in-out infinite;
}
.logbook-tab:active { background: #3d0f0f; }
.ai-logstatus { font-size: 12px; opacity: .75; margin-top: 6px; min-height: 16px; }
.sable-side-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--red-edge);
  background: linear-gradient(180deg, rgba(120,20,20,.25), transparent);
}
.ai-orb-sm { width: 34px; height: 34px; }
.sable-side-id .ai-name { font-size: 15px; letter-spacing: 2px; }
.sable-side-id .ai-sub { font-size: 10px; }
.sable-close {
  margin-left: auto; background: none; border: 1px solid var(--red-edge);
  color: var(--ink); border-radius: 8px; width: 30px; height: 30px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.sable-close:hover { background: #3d0f0f; }
.sable-side .ai-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* The log must shrink (min-height: 0) so it scrolls internally instead of
   shoving the message box off the bottom of the screen. */
.sable-side .ai-log { flex: 1; min-height: 0; max-height: none; border: none; background: transparent; }
.sable-side .ai-form { padding-bottom: max(14px, env(safe-area-inset-bottom)); }

/* /ai page: keep the message box pinned to the bottom of the screen while
   the conversation scrolls above it. */
.ai-wrap .ai-form {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(12,4,4,.94), rgba(8,2,2,.98));
  border-top: 1px solid var(--line);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .sable-summon { animation: none; }
  .sable-side { transition: none; }
  .sable-slide-tab { animation: none; }
  .logbook-side { transition: none; }
  .logbook-tab { animation: none; }
}

/* --- SABLE voice toggle ------------------------------------------------------ */
.sable-voice {
  background: none; border: 1px solid var(--red-edge); color: var(--ink);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.sable-voice:hover { background: #3d0f0f; }
.sable-voice.muted { opacity: .45; }
.ai-head [data-voice-toggle].muted { opacity: .55; }

/* --- SABLE voice input (mic button): hold to talk, tap to toggle. No popups. --- */
.ai-mic {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #4a1212, #200909 72%);
  border: 1px solid rgba(212,160,23,.35);
  box-shadow: 0 0 0 1px #000, 0 2px 10px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,120,120,.28);
  cursor: pointer; padding: 0; color: #ff6b6b; font-size: 0;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: box-shadow .18s ease, transform .08s ease;
}
.ai-mic:hover { box-shadow: 0 0 0 1px #000, 0 2px 14px rgba(255,60,60,.35), inset 0 1px 2px rgba(255,120,120,.28); }
.ai-mic:active { transform: scale(.92); }
.ai-mic-ico {
  position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; fill: currentColor;
  transition: opacity .16s ease, transform .16s ease;
}
.ai-mic-meter {
  position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center;
  gap: 3px; padding-bottom: 13px; pointer-events: none;
}
.ai-mic-meter i {
  width: 3px; height: 4px; border-radius: 2px;
  background: linear-gradient(to top, #ff5252, #ffc4c4);
}
.ai-mic.listening {
  color: #fff; background: radial-gradient(circle at 35% 30%, #c81e1e, #5c0a0a 72%);
  box-shadow: 0 0 0 1px #000, 0 0 20px rgba(255,60,60,.8), inset 0 1px 3px rgba(255,255,255,.3);
}
.ai-mic.listening .ai-mic-ico { opacity: 0; transform: scale(.5); }
.ai-mic.listening .ai-mic-meter { display: flex; }
.ai-mic.listening::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(255,100,100,.55); animation: mic-halo 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes mic-halo {
  0% { transform: scale(.88); opacity: .9; }
  100% { transform: scale(1.3); opacity: 0; }
}
.ai-mic.pre::before { /* gold shimmer: she's thinking ahead while you talk */
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(212,160,23,.7); animation: mic-halo 1.1s ease-out infinite;
  pointer-events: none;
}
.ai-mic.denied { opacity: .45; }
.ai-mic.denied::before {
  content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px;
  background: #ff5252; border-radius: 2px; transform: rotate(-45deg); opacity: .9;
  pointer-events: none;
}
.ai-mic.unheard { opacity: .5; }
.ai-interim { opacity: .55; font-style: italic; } /* words she's still guessing */
.ai-hint {
  margin: 8px 16px 0; padding: 8px 12px; font-size: 12px; color: var(--ink);
  background: #241016; border: 1px solid var(--red-edge); border-radius: 10px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.ai-hint.show { opacity: 1; transform: none; }
.ai-hint-btn {
  display: inline-block; margin: 6px 0 2px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  color: #fff; background: #a31212; border: 1px solid var(--red-bright); border-radius: 999px;
  cursor: pointer;
}
.ai-hint-btn:active { background: #5c0a0a; }

@media (prefers-reduced-motion: reduce) {
  .ai-mic.listening::after, .ai-mic.pre::before { animation: none; }
  .ai-hint { transition: none; }
}

/* SABLE's hands: slide-over drawer with calculator + ship's log */
.ai-chat { position: relative; }
.ai-drawer {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  background: rgba(12, 4, 4, .97);
  border: 1px solid var(--red-edge); border-radius: 14px;
  transform: translateX(103%);
  transition: transform .38s cubic-bezier(.2, .9, .25, 1);
  overflow: hidden;
}
.ai-drawer.open { transform: none; }
.ai-drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--red-edge);
  background: linear-gradient(180deg, #2b0e0e, #180707);
}
.ai-drawer-title {
  font-weight: bold; letter-spacing: 2px; font-size: 11px;
  text-transform: uppercase; color: var(--red-bright);
}
.ai-drawer-close {
  margin-left: auto; background: none; border: 1px solid var(--red-edge);
  color: var(--ink); border-radius: 8px; width: 28px; height: 28px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.ai-drawer-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; -webkit-overflow-scrolling: touch; }
/* calculator */
.ai-calc-display {
  background: #000; border: 1px solid var(--red-edge); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; min-height: 66px;
}
.ai-calc-expr { color: #ffb3b3; font-size: 14px; min-height: 20px; overflow-wrap: break-word; }
.ai-calc-result { color: #fff; font-size: 24px; font-weight: bold; text-align: right; min-height: 32px; }
.ai-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ai-calc-keys button {
  padding: 13px 0; font-size: 17px; cursor: pointer;
  background: #1d0b0b; color: var(--ink);
  border: 1px solid var(--red-edge); border-radius: 10px;
  transition: transform .08s, background .12s;
}
.ai-calc-keys button:active { transform: scale(.93); }
.ai-calc-keys button.hit { background: var(--red-bright); color: #fff; transform: scale(.93); }
.ai-calc-keys button.eq { background: linear-gradient(180deg, #a31212, #6d0b0b); color: #fff; font-weight: bold; }
.ai-calc-keys button.fn { color: var(--red-bright); }
/* ship's log */
.ai-logform { margin-bottom: 12px; }
.ai-logform input, .ai-logform textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  background: #0d0505; border: 1px solid var(--red-edge); border-radius: 10px;
  color: var(--ink); padding: 10px 12px; font-size: 16px; font-family: inherit;
}
.ai-logform textarea { resize: vertical; }
.ai-logempty { opacity: .55; font-size: 13px; text-align: center; padding: 18px 0; }
.ai-note {
  border: 1px solid var(--red-edge); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: #160808;
}
.ai-note.flash { animation: noteFlash 2s; }
@keyframes noteFlash {
  0%, 55% { border-color: var(--red-bright); box-shadow: 0 0 16px rgba(255, 45, 45, .55); }
  100% { border-color: var(--red-edge); box-shadow: none; }
}
.ai-note-top { display: flex; align-items: center; gap: 8px; }
.ai-note-title { font-weight: bold; color: #ffd7d7; flex: 1; }
.ai-note-del {
  background: none; border: none; color: var(--red-bright); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px;
}
/* Push one local note to the forum's Ship's Log board by hand. */
.ai-note-post {
  background: none; border: 1px solid var(--red-dim); border-radius: 8px;
  color: var(--red-bright); cursor: pointer; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; margin-right: 4px;
}
.ai-note-post:disabled { opacity: .5; cursor: default; }
.ai-note-meta { font-size: 10px; opacity: .55; margin-top: 2px; }
.ai-note-body { font-size: 13px; line-height: 1.55; margin-top: 6px; white-space: pre-wrap; overflow-wrap: break-word; }

/* SABLE's pointer: a little cursor companion parked by the robot guardian */
.sable-pointer {
  position: fixed; left: 0; top: 0; z-index: 9999;
  pointer-events: none; opacity: .8;
  transition: transform .3s cubic-bezier(.35, .7, .3, 1);
  will-change: transform;
}
.sable-pointer.working { opacity: 1; }
.sable-cur { display: block; filter: drop-shadow(0 0 6px rgba(255, 49, 49, .85)); }
.sable-pointer.idle .sable-cur { animation: sableBob 2.8s ease-in-out infinite; }
@keyframes sableBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sable-pointer.talking .sable-cur { animation: sableTremble .16s linear infinite; }
@keyframes sableTremble {
  0% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1.5px, 1px); } 75% { transform: translate(1px, 1.5px); }
  100% { transform: translate(0, 0); }
}
.sable-pointer.click .sable-cur { animation: sableClick .18s ease-out; }
@keyframes sableClick { 0% { transform: scale(1); } 45% { transform: scale(.7); } 100% { transform: scale(1); } }

/* SABLE's easel: she paints pictures live, her red arrow doing the brushwork */
.sable-easel {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 1, 1, .55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.sable-easel.open { opacity: 1; }
/* The veil never eats clicks — only the frame itself does, so the fleet stays
   usable while she paints. */
.sable-easel.open .easel-frame { pointer-events: auto; }
.easel-frame {
  width: min(94vw, 540px); max-height: 94vh; overflow-y: auto;
  background: #150909; border: 1px solid var(--red-edge); border-radius: 18px;
  box-shadow: 0 0 70px rgba(255, 49, 49, .28), inset 0 0 40px rgba(255, 49, 49, .05);
  transform: translateY(16px) scale(.98); transition: transform .35s ease;
}
.sable-easel.open .easel-frame { transform: none; }
.easel-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--red-edge); }
.easel-title { font-weight: 700; color: var(--ink); white-space: nowrap; }
.easel-title::before { content: '\1F3A8\0020'; }
.easel-sub { flex: 1; min-width: 0; color: var(--ink-dim); font-style: italic; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.easel-x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #2a0d0d; color: var(--ink); border: 1px solid var(--red-edge);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.easel-x:active { background: #4a1212; }
.easel-stage { padding: 12px 12px 0; }
.easel-canvas {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
  background: #0b0606; border: 1px solid #3d1212;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .6);
}
.easel-status { text-align: center; padding: 8px 12px 4px; color: var(--ink-dim); font-size: 13px; font-style: italic; min-height: 22px; }
.easel-foot { display: flex; gap: 10px; padding: 8px 14px 14px; }
.easel-foot button {
  flex: 1; padding: 10px; border-radius: 12px; cursor: pointer;
  background: #2a0d0d; color: var(--ink); border: 1px solid var(--red-edge); font-size: 14px;
}
.easel-foot button:active { background: #4a1212; }
/* While she paints, her arrow carries a brush at its tip */
.sable-pointer.brushing::after {
  content: '\1F58C\FE0F'; position: absolute; left: 12px; top: 10px;
  font-size: 20px; transform: rotate(-18deg);
  filter: drop-shadow(0 0 5px rgba(255, 49, 49, .9));
}

/* SABLE's smart stuff: widget menu, times table, ABC, counting */
.ai-widget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ai-widget {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 8px; background: #1d0b0b; color: var(--ink);
  border: 1px solid var(--red-edge); border-radius: 12px; font-size: 13px; cursor: pointer;
}
.ai-widget:active { transform: scale(.96); }
.ai-widget-ic { font-size: 26px; }
.ai-widget-hint { text-align: center; opacity: .55; font-size: 12px; margin-top: 12px; }
.ai-times-readout { text-align: center; font-size: 16px; margin-bottom: 10px; color: #ffd7d7; }
.ai-times-readout b { color: #fff; }
.ai-times-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.ai-tcell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 10px; background: #1d0b0b; color: #ffb3b3;
  border: 1px solid #3a1212; border-radius: 5px; cursor: pointer;
}
.ai-tcell.ai-thead { background: #2b0e0e; color: #fff; font-weight: bold; cursor: default; }
.ai-tcell.hl-row { background: #4a1414; }
.ai-tcell.hl-col { background: #331010; border-color: var(--red-bright); }
.ai-tcell.hl-ans { background: var(--red-bright); color: #fff; font-weight: bold; box-shadow: 0 0 10px rgba(255, 45, 45, .7); }
.ai-abc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ai-abc-cell {
  aspect-ratio: 1; font-size: 22px; font-weight: bold; cursor: pointer;
  background: #1d0b0b; color: var(--ink); border: 1px solid var(--red-edge); border-radius: 10px;
  transition: transform .1s, background .15s;
}
.ai-abc-cell.say { background: var(--red-bright); color: #fff; transform: scale(1.1); }
.ai-abc-word { text-align: center; font-size: 28px; letter-spacing: 6px; margin-top: 12px; color: #fff; min-height: 38px; font-weight: bold; }
.ai-count-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ai-ncell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: #150808; color: #c98a8a;
  border: 1px solid #331010; border-radius: 6px; cursor: pointer;
  transition: background .12s;
}
.ai-ncell.lit { background: var(--red-bright); color: #fff; box-shadow: 0 0 8px rgba(255, 45, 45, .6); }

/* Solid's Block — tiny cartoon world in the header */
.solid-world-wrap{position:relative;height:110px;overflow:hidden;background:linear-gradient(180deg,#050508 0%,#0b0b13 100%);border-bottom:1px solid rgba(255,42,42,.4);box-shadow:inset 0 -8px 18px rgba(255,42,42,.07);}
#solid-world{display:block;width:100%;height:110px;cursor:pointer;}
.solid-world-tag{position:absolute;top:7px;left:12px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#ff7070;opacity:.85;pointer-events:none;font-family:ui-monospace,Menlo,monospace;}
.solid-world-tag .pulse-dot{margin-right:6px;}

/* Admin content: site-wide announcement banner (admin panel → Content). */
.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #2a0606, #5e1010, #2a0606);
  border-bottom: 1px solid var(--red-edge);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-align: center;
}
/* Admin users table: keep it tight on phones. */
.admin-users td, .admin-users th { padding: 8px 10px; vertical-align: middle; }
@media (max-width: 700px) {
  .admin-users .cell-num { display: none; }
}

/* Ship Status: living gauges + bridge log. */
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.gauge-card {
  display: block;
  text-align: center;
  padding: 16px 14px 14px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gauge-card:hover { transform: translateY(-2px); border-color: var(--red-bright); }
.gauge-card.g-good { color: #ff7a7a; }
.gauge-card.g-warn { color: #ffb35a; }
.gauge-card.g-bad { color: #8a8a96; }
.gauge-name {
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--red-bright);
  margin-bottom: 6px;
  font-weight: 700;
}
.gauge-dial { width: 150px; height: auto; display: block; margin: 0 auto; }
.gauge-needle { animation: needle-tremor 1.6s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes needle-tremor {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}
.gauge-pct { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; margin-top: 2px; }
.gauge-pct span { font-size: 15px; color: var(--red-dim); }
.gauge-readout { font-size: 13px; margin-top: 6px; color: var(--ink); }
.gauge-note { font-size: 11.5px; font-style: italic; margin-top: 4px; }
.gauge-go { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--red-bright); letter-spacing: 1px; }
.bridge-log { padding: 0; overflow: hidden; }
.bridge-log .catbar { margin: 0; }
.bridge-log-list { list-style: none; margin: 0; padding: 6px 0; }
.bridge-log-row { padding: 9px 16px; border-bottom: 1px solid rgba(255, 90, 90, 0.12); }
.bridge-log-row:last-child { border-bottom: none; }
.bridge-log-row a { color: var(--ink); font-weight: 600; display: block; }
.bridge-log-row .meta { font-size: 11.5px; }

/* Sector Star Map. */
.starmap-wrap { position: relative; }
#starmap { width: 100%; height: 62vh; min-height: 420px; display: block; border-radius: var(--radius); cursor: crosshair; }
.starmap-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(10, 2, 2, 0.94); border: 1px solid var(--red-edge);
  border-radius: 10px; padding: 10px 12px; max-width: 240px;
  opacity: 0; transition: opacity 0.12s ease;
}
.starmap-tip.on { opacity: 1; }
.starmap-tip b { color: var(--red-bright); display: block; margin-bottom: 3px; }
.starmap-tip span { font-size: 12px; color: var(--ink); }
.starmap-tip em { display: block; font-size: 11px; color: var(--red-dim); margin-top: 5px; font-style: normal; }
.starmap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 12px; color: var(--red-dim); }

/* Thread TL;DR — SABLE's briefing. */
.briefing-wrap { margin: 12px 0; }
.briefing-btn { margin-bottom: 8px; }
.briefing-panel {
  border: 1px solid var(--red-edge); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(90, 10, 10, 0.35), rgba(20, 3, 3, 0.6));
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
}
.briefing-panel .briefing-head { color: var(--red-bright); font-weight: 700; letter-spacing: 1.5px; font-size: 12px; margin-bottom: 6px; }
.briefing-panel .meta { margin-top: 8px; font-size: 11.5px; }

/* SABLE's cipher order: coded transmission + reveal. */
.cipher-text {
  display: inline-block; margin: 6px 0; padding: 8px 12px;
  background: #0d0505; border: 1px dashed var(--red-edge); border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: 3px; color: var(--red-bright);
  font-size: 14px; word-break: break-all;
}
.cipher-reveal { margin-top: 6px; font-size: 13px; }
.cipher-reveal summary { cursor: pointer; color: var(--red-bright); font-size: 12.5px; }

/* On Deck strip — live crew presence under the transmission ticker. */
.ondeck-strip {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 0; padding: 8px 14px;
  background: linear-gradient(180deg, rgba(60,8,8,0.55), rgba(20,3,3,0.55));
  border: 1px solid var(--red-edge); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--red-bright);
}
.ondeck-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #39ff6a; box-shadow: 0 0 8px #39ff6a;
  animation: ondeck-blink 2.4s ease-in-out infinite;
}
@keyframes ondeck-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ondeck-label {
  font-size: 11px; letter-spacing: 2px; color: var(--red-dim); flex: none;
  font-family: ui-monospace, Menlo, monospace;
}
.ondeck-crew { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ondeck-crew b { color: #ffd7d7; }
@media (prefers-reduced-motion: reduce) { .ondeck-dot { animation: none; } }

/* Admin quick-launch rail: floating ⚡ FAB bottom-left, menu opens upward. Admin-only. */
.ql-rail { position: fixed; left: 12px; bottom: 12px; z-index: 8500; }
.ql-fab {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 2px solid #ff2a2a; color: #ffd7d7; font-size: 22px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #7a0d0d, #2b0202 75%);
  box-shadow: 0 0 14px rgba(255,42,42,.55), inset 0 0 8px rgba(255,42,42,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ql-fab:hover { transform: scale(1.08); box-shadow: 0 0 22px rgba(255,42,42,.8), inset 0 0 10px rgba(255,42,42,.5); }
.ql-fab.open { transform: rotate(90deg); }
.ql-menu {
  position: absolute; left: 0; bottom: 56px; min-width: 210px; max-width: 78vw;
  max-height: 60vh; overflow-y: auto; display: none; flex-direction: column; gap: 4px;
  padding: 10px; border-radius: 14px; border: 1px solid #ff2a2a;
  background: rgba(10,0,0,.94); box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 18px rgba(255,42,42,.35);
  backdrop-filter: blur(4px);
}
.ql-menu.open { display: flex; }
.ql-link {
  display: block; padding: 8px 12px; border-radius: 9px; color: #ff6b6b; text-decoration: none;
  font-size: 14px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ql-link:hover { background: rgba(255,42,42,.14); border-color: rgba(255,42,42,.4); color: #ffd7d7; }
.ql-link.ql-edit { color: #c9a2a2; border-top: 1px solid rgba(255,42,42,.25); margin-top: 4px; padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .ql-fab { transition: none; } }

/* Revenue Engineering suite ("the ship's ledger") */
.code-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; border: 1px solid #ff2a2a; background: rgba(255,42,42,.12); color: #ff9a9a; font-size: 12px; font-family: ui-monospace, monospace; white-space: nowrap; }
.mono { font-family: ui-monospace, monospace; }
.small { font-size: 12px; }
.big-num { font-size: 20px; font-weight: bold; color: #ffd7d7; }
.table-scroll { overflow-x: auto; }
.scorebar { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; }
.scorebar-fill { display: inline-block; height: 10px; border-radius: 5px; min-width: 4px; }
.sb-good { background: linear-gradient(90deg, #ff2a2a, #ff7a7a); box-shadow: 0 0 8px rgba(255,42,42,.6); }
.sb-warn { background: linear-gradient(90deg, #a33, #d88); }
.sb-bad { background: #4a2a2a; }
.scorebar-num { font-weight: bold; color: #ffd7d7; }
/* Forecast chart */
.fc-chart { display: flex; gap: 10px; align-items: stretch; justify-content: center; padding: 18px 6px 6px; }
.fc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fc-barwrap { position: relative; height: 130px; width: 34px; }
.fc-whisker { position: absolute; left: 14px; width: 6px; background: rgba(255,42,42,.35); border-radius: 3px; }
.fc-point { position: absolute; left: 5px; width: 24px; height: 8px; border-radius: 4px; background: #ff2a2a; box-shadow: 0 0 10px rgba(255,42,42,.8); }
.fc-day { font-size: 12px; color: #ff9a9a; }
.fc-val { font-weight: bold; color: #ffd7d7; }
/* Roadmap */
.rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-item { display: flex; gap: 10px; align-items: flex-start; }
.rm-done { color: #7dff9a; font-size: 18px; }
.rm-planned { color: #8a8a95; font-size: 18px; }
.rm-todo { color: #ff2a2a; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .sb-good { box-shadow: none; } }

/* --- forum restructure: instruments rail + ship's vitals ------------------ */
.inst-rail {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px 12px;
}
.inst-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #c66; margin-right: 2px;
}
.inst-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  border: 1px solid #ff2a2a; background: rgba(255,42,42,.12);
  color: #ff9a9a; font-size: 12px; text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.inst-chip:hover { background: #3d0f0f; color: #fff; transform: translateY(-1px); }
.vitals-legend {

/* --- Trending Now (Redesign Day Wave 4) ----------------------------------- */
.trending-window {
  font-size: 10px; letter-spacing: 1px; font-weight: normal; text-transform: none;
  color: #c9c9c9; margin-left: 8px;
}
.trending-list { list-style: none; margin: 0; padding: 4px 14px 8px; display: grid; }
.trending-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 4px; border-bottom: 1px solid rgba(193,18,18,.18);
  transition: background .25s ease;
}
.trending-row:last-child { border-bottom: 0; }
.trending-row:hover { background: rgba(193,18,18,.07); }
.trending-rank {
  font-size: 22px; font-weight: bold; min-width: 30px; text-align: center;
  color: transparent; -webkit-text-stroke: 1px var(--red-bright);
  text-shadow: 0 0 10px rgba(255,60,60,.5);
}
.trending-main { flex: 1; min-width: 0; }
.trending-title { font-weight: bold; color: var(--red-link); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trending-row .meta a { color: #c9c9c9; }
.trending-heat {
  width: 90px; height: 7px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--red-edge); background: rgba(0,0,0,.6); overflow: hidden;
}
.trending-heat i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  box-shadow: 0 0 8px var(--red-bright);
}

/* --- Sticky back-to-top (Redesign Day Wave 6) ------------------------------- */
.backtop {
  position: fixed; right: 18px; bottom: 84px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--red-bright);
  background: linear-gradient(180deg, rgba(120,20,20,.92), rgba(60,8,8,.92));
  color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(193,18,18,.5);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.backtop-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.backtop:hover { box-shadow: 0 6px 24px rgba(255,60,60,.7); }

/* --- Profile polish (Redesign Day Wave 6) ---------------------------------- */
.profile-banner {
  background:
    radial-gradient(ellipse 80% 120% at 20% 0%, rgba(193,18,18,.16), transparent),
    linear-gradient(180deg, rgba(90,10,10,.35), transparent);
}
.recent-threads { margin-top: 0; }
.recent-threads .rt-list { list-style: none; margin: 0; padding: 8px 16px 12px; display: grid; gap: 2px; }
.recent-threads .rt-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid rgba(193,18,18,.14);
}
.recent-threads .rt-row:last-child { border-bottom: 0; }
.recent-threads .rt-title { color: var(--red-link); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-threads .meta { flex-shrink: 0; }
  margin-top: 10px; font-size: 12px; color: #999;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}

/* --- command deck: grouped sections -------------------------------------- */
.deck-group { margin-bottom: 20px; }
.deck-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 4px 2px 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.deck-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: 3px;
  color: var(--red-bright);
}
.deck-section-sub { font-size: 11px; color: var(--muted); }

/* --- signal scanner / vault lists ---------------------------------------- */
.signal-list { list-style: none; margin: 0; padding: 6px 0; }
.signal-row, .vault-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.signal-row:last-child, .vault-row:last-child { border-bottom: none; }
.signal-main, .vault-main { flex: 1; min-width: 0; }
.signal-title { font-size: 14px; font-weight: bold; color: #ff8080; text-decoration: none; }
.signal-title:hover { color: #fff; }
.signal-bar {
  height: 6px; border-radius: 3px; background: #2a0d0d;
  margin-top: 6px; overflow: hidden; max-width: 420px;
}
.signal-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #ff2a2a, #ff8080);
}
.signal-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.signal-count b { color: var(--red-bright); font-size: 15px; }

/* --- crew roster ---------------------------------------------------------- */
.roster-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.roster-card {
  display: flex; gap: 12px; align-items: center; padding: 14px;
  text-decoration: none; color: var(--ink); position: relative;
  transition: transform .12s ease, border-color .12s ease;
}
.roster-card:hover { transform: translateY(-2px); border-color: var(--red-bright); color: var(--ink); }
.roster-card-id { flex: 1; min-width: 0; }
.roster-name { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.score-chip {
  position: absolute; top: 10px; right: 10px;
  min-width: 30px; text-align: center; padding: 3px 8px; border-radius: 999px;
  border: 1px solid #ff2a2a; background: rgba(255,42,42,.14);
  color: #ffb3b3; font-size: 12px; font-weight: bold;
}

/* --- observatory ---------------------------------------------------------- */
.obs-panel { margin-bottom: 14px; }
.obs-bars {
  display: flex; gap: 6px; align-items: stretch; padding: 14px 14px 10px;
}
.obs-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.obs-count { font-size: 13px; font-weight: bold; color: #ffb3b3; }
.obs-bar-track {
  height: 110px; width: 100%; max-width: 54px; display: flex; align-items: flex-end;
  background: #160808; border-radius: 6px; border: 1px solid var(--line); overflow: hidden;
}
.obs-bar {
  width: 100%; background: linear-gradient(180deg, #ff8080, #a31212);
  border-radius: 0 0 5px 5px;
}
.obs-day { font-size: 10px; color: var(--muted); white-space: nowrap; }
.obs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .obs-cols { grid-template-columns: 1fr; } }
.obs-list { list-style: none; margin: 0; padding: 6px 0; }
.obs-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.obs-row:last-child { border-bottom: none; }
.obs-row a { color: #ff8080; text-decoration: none; }
.obs-row a:hover { color: #fff; }
.obs-val { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.obs-val b { color: var(--red-bright); }
.obs-rank {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #ff2a2a; color: #ffb3b3; font-size: 11px; font-weight: bold;
}

/* --- iPhone tighten: compact density, big touch targets ----------------------
   Phone-first pass: everything pulls in tight (smaller images, tighter tables,
   less air) while every tappable control stays thumb-sized. */
@media (max-width: 640px) {
  /* Page frame tighter */
  .page { padding: 10px 8px 32px; }
  .header-inner { padding: 10px 10px 8px; }

  /* Buttons: big thumb targets */
  .btn { min-height: 52px; font-size: 15px; padding: 10px 20px; }
  .btn-small { min-height: 48px; padding: 8px 16px; font-size: 14px; }
  .stacked-form .btn { width: 100%; }
  .quote-btn, .salute-btn, .bb-btn { min-height: 44px; min-width: 44px; }
  .main-nav a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Panels, bars, titles tighter */
  .panel { padding: 10px; margin-bottom: 10px; }
  .catbar { padding: 7px 10px; font-size: 12px; }
  .page-title { font-size: 20px; margin: 6px 0 10px; }
  .thread-title-page { font-size: 19px; }

  /* Forum tables: tighter rows, smaller meta */
  .forumtable tr { margin-bottom: 6px; }
  .forumtable td { padding: 6px 8px; }
  .board-title { font-size: 15px; }
  .board-desc { font-size: 12px; margin-top: 2px; }
  .cell-last { font-size: 11px; }

  /* Avatars smaller in post context */
  .postbit .avatar { width: 40px; height: 40px; }
  .postbit .avatar-initials { width: 40px !important; height: 40px !important; font-size: 14px !important; }
  .op-card .avatar { width: 44px; height: 44px; }
  .op-card .avatar-initials { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .postbit-side { gap: 8px; padding: 8px; }
  .postbit-body { font-size: 14px; padding: 8px 10px; }

  /* Deck: compact two-column instrument grid */
  .deck-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .deck-card { padding: 10px; gap: 4px; }
  .deck-card-icon { width: 26px; height: 26px; }
  .deck-card-name { font-size: 14px; }
  .deck-card-desc { font-size: 11px; }

  /* Chips and strips tighter */
  .inst-rail { gap: 6px; padding: 8px 0 2px; }
  .inst-chip { padding: 8px 12px; font-size: 12px; }
  .ticker-wrap { font-size: 12px; }
  .ondeck-strip { padding: 8px 10px; font-size: 12px; }

  /* Vitals and stats compact */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 8px; }
  .vitality-body { padding: 8px 10px; }

  /* Content images capped on small screens */
  .postbit-body img { max-height: 240px; width: auto; }

  /* Quick-launch FAB clears the reply zone instead of sitting on it */
  .ql-rail { left: 10px; bottom: 84px; }

  /* BB toolbar (new-thread page) keeps big touch targets */
  .bb-btn { padding: 8px 12px; font-size: 14px; }
  .bb-hint { font-size: 11px; }
}

/* --- Note composer: pocket word processor --------------------------------- */
.ne-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 6px; background: #140709;
  border: 1px solid var(--red-edge); border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.ne-group {
  display: flex; gap: 2px; align-items: center;
  padding: 2px 8px 2px 2px; margin-right: 2px;
  border-right: 1px solid var(--line);
}
.ne-group:last-child { border-right: none; margin-right: 0; }
.ne-btn {
  min-width: 42px; min-height: 42px; padding: 6px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit;
}
.ne-btn:hover { background: rgba(193,18,18,.16); border-color: var(--red-edge); }
.ne-btn:active { background: rgba(193,18,18,.32); }
.ne-btn svg { width: 19px; height: 19px; display: block; }
.ne-btn b, .ne-btn i, .ne-btn u, .ne-btn s { font-size: 16px; line-height: 1; }
.ne-quote { font-size: 22px; line-height: 1; color: var(--red-bright); font-family: Georgia, serif; }
.ne-linkico { font-size: 16px; line-height: 1; }
.ne-clear { font-size: 18px; line-height: 1; color: var(--red-bright); }
.ne-select {
  background: #000; color: var(--ink);
  border: 1px solid var(--red-edge); border-radius: 8px;
  min-height: 42px; font-size: 13px; max-width: 128px; font-family: inherit;
}
.ne-sizerow { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 6px; }
.ne-sizer { -webkit-appearance: none; appearance: none; width: 104px; height: 42px; background: transparent; cursor: pointer; margin: 0; }
.ne-sizer::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }
.ne-sizer::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f04040, #7d1010); border: 2px solid var(--red-bright); box-shadow: 0 0 10px rgba(255, 42, 42, .65); }
.ne-sizer::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }
.ne-sizer::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f04040, #7d1010); border: 2px solid var(--red-bright); box-shadow: 0 0 10px rgba(255, 42, 42, .65); }
.ne-sizeval { min-width: 26px; text-align: right; font-size: 13px; font-weight: 700; color: var(--red-bright); font-variant-numeric: tabular-nums; }
.ne-color {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; border-radius: 8px; cursor: pointer;
}
.ne-color:hover { background: rgba(193,18,18,.16); }
.ne-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ne-glyph { font-size: 16px; font-weight: bold; line-height: 1.1; }
.ne-glyph.ne-marker {
  background: linear-gradient(180deg, rgba(255,60,60,.55), rgba(255,60,60,.15));
  padding: 0 5px; border-radius: 3px;
}
.ne-bar { display: block; width: 24px; height: 5px; border-radius: 3px; margin-top: 2px; border: 1px solid rgba(255,255,255,.25); }
.ne-editor {
  min-height: 96px; max-height: 230px; overflow-y: auto;
  padding: 10px 12px; background: #000; color: var(--ink);
  border: 1px solid var(--red-edge); border-radius: 0 0 10px 10px;
  font-size: 15px; line-height: 1.55; overflow-wrap: break-word;
}
.ne-editor:focus { outline: 2px solid var(--red-bright); outline-offset: -2px; }
.ne-editor:empty:before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.ne-editor p { margin: 0 0 8px; }
.ne-editor blockquote {
  border-left: 3px solid var(--red); margin: 8px 0; padding: 4px 12px; color: var(--muted);
}
.ne-editor ul, .ne-editor ol { margin: 6px 0; padding-left: 24px; }
.ne-editor a { color: var(--red-link); }
/* Rich note bodies in the log list show the same formatting. */
.ai-note-body { white-space: normal; }
.ai-note-body p { margin: 0 0 8px; }
.ai-note-body blockquote {
  border-left: 3px solid var(--red); margin: 8px 0; padding: 4px 12px; color: var(--muted);
}
.ai-note-body ul, .ai-note-body ol { margin: 6px 0; padding-left: 24px; }
.ai-note-body a { color: var(--red-link); }

/* --- universal text tools: size scroller + crown picker on BBCode toolbars - */
.bb-size{display:inline-flex;align-items:center;gap:6px;color:#ffb3b3;font-size:14px;
  padding:6px 10px;border:1px solid #5a2424;border-radius:10px;background:#160707;cursor:pointer}
.bb-size input[type=range]{width:100px;accent-color:#f5c542;cursor:pointer}
.bb-crown{font-size:16px}
/* --- Bridge hero: cinematic starfield header on the forum index --- */
.bridge-hero{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--red-edge);
  background:#050101 url('img/electric-crystal.webp') center/cover;min-height:270px;display:flex;align-items:center;margin-bottom:16px}
.bridge-stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.bridge-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 125%,rgba(193,18,18,.32),transparent 62%),
  linear-gradient(180deg,rgba(0,0,0,.15) 30%,rgba(0,0,0,.82) 100%)}
.bridge-copy{position:relative;padding:36px 30px;max-width:660px}
.bridge-kicker{color:#f5c542;letter-spacing:5px;font-size:11px;margin-bottom:10px;text-shadow:0 0 12px rgba(245,197,66,.55)}
.bridge-title{margin:0 0 10px;font-size:clamp(32px,6.5vw,56px);line-height:1.02;color:#fff;letter-spacing:1px;
  text-shadow:0 0 26px rgba(255,60,60,.65),0 2px 0 #2a0505}
.bridge-tag{margin:0;color:#ffc9c9;font-size:15px;max-width:52ch;text-shadow:0 1px 3px #000}
.bridge-instruments{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.bridge-inst{background:rgba(22,5,5,.72);border:1px solid var(--red-edge);border-radius:12px;padding:8px 16px;text-align:center;min-width:76px;backdrop-filter:blur(2px)}
.bridge-inst b{display:block;color:#ffe9a8;font-size:21px;line-height:1.15}
.bridge-inst span{font-size:10px;color:#d89a9a;letter-spacing:2px;text-transform:uppercase}
@media (max-width:560px){.bridge-hero{min-height:230px}.bridge-copy{padding:26px 20px}.bridge-inst{min-width:64px;padding:6px 10px}}
/* --- Ship's Bell notifications (Redesign Day Wave 7) --- */
.notif-wrap{position:relative;display:inline-block}
.notif-bell{position:relative;background:#160707;border:1px solid #5a2424;border-radius:10px;color:#ffb3b3;font-size:16px;padding:6px 10px;cursor:pointer}
.notif-bell:hover{border-color:#f5c542;color:#ffe9a8}
.notif-badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;line-height:19px;padding:0 5px;border-radius:10px;background:#ff3b3b;color:#fff;font-size:11px;font-weight:700;text-align:center;box-shadow:0 0 8px rgba(255,60,60,.8)}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:min(340px,86vw);max-height:380px;overflow-y:auto;background:#0d0404;border:1px solid var(--red-edge);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 18px rgba(193,18,18,.35);z-index:200}
.notif-drop-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #3a1212;color:#ffe9a8}
.notif-clear{background:none;border:none;color:#ff6b6b;font-size:12px;cursor:pointer;padding:2px 4px}
.notif-clear:hover{color:#ffe9a8;text-decoration:underline}
.notif-list{display:flex;flex-direction:column}
.notif-item{display:block;padding:9px 12px;border-bottom:1px solid #240a0a;color:#ffc9c9;font-size:13px;text-decoration:none}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:#1c0808}
.notif-item.unread{background:#230b0b;border-left:3px solid #f5c542}
.notif-item .meta{display:block;margin-top:3px}
.notif-empty{padding:14px 12px}
/* Achievement celebration toast */
.achieve-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);z-index:500;background:#120404;border:2px solid #f5c542;border-radius:14px;padding:14px 18px;max-width:min(420px,90vw);box-shadow:0 0 30px rgba(245,197,66,.45),0 10px 30px rgba(0,0,0,.6);color:#ffe9a8;transition:transform .45s cubic-bezier(.2,1.4,.4,1);text-align:center}
.achieve-toast.show{transform:translate(-50%,0)}
.achieve-toast .achieve-icon{font-size:34px;display:block;margin-bottom:4px}
.achieve-toast b{color:#fff}
.achieve-toast .meta{display:block;margin-top:4px}
/* --- Medals of the Fleet (Redesign Day Wave 8) --- */
.medal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:12px}
.medal{border:1px solid var(--red-edge);border-radius:12px;padding:12px 10px;text-align:center;background:#120404}
.medal .medal-icon{font-size:32px;display:block;margin-bottom:6px;filter:drop-shadow(0 0 6px rgba(245,197,66,.5))}
.medal b{display:block;color:#ffe9a8;font-size:13px;margin-bottom:4px}
.medal.earned{border-color:#f5c542;box-shadow:0 0 12px rgba(245,197,66,.25)}
.medal.locked{opacity:.45}
.medal.locked .medal-icon{font-size:26px;color:#5a2424;filter:none}
/* --- Captain's Quarters (Redesign Day Wave 9) --- */
.quarters-hero{display:flex;gap:18px;align-items:center;padding:18px}
.quarters-id{flex:1;min-width:0}
.quarters-id .page-title{margin:0 0 4px}
.quarters-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.quarters-links .rt-row{padding:8px 12px}
@media (max-width:700px){.quarters-cols{grid-template-columns:1fr}.quarters-hero{flex-direction:column;text-align:center}}
/* --- Fleet Roll of Honor (Redesign Day Wave 11) --- */
.lb-intro{color:#c98a8a;padding:4px 14px 0;font-size:14px}
.lb-xp-panel{margin:14px}
.lb-list{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #3a1212;border-radius:10px;background:#120404}
.lb-pos{font-size:16px;min-width:34px;text-align:center}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffe9a8}
.lb-rank-tag{font-size:11px;color:#f5c542;border:1px solid #5a4a1a;border-radius:8px;padding:2px 8px;letter-spacing:1px}
.lb-score{color:#ff6b6b;font-size:14px;white-space:nowrap}
.lb-row.podium{border-width:2px}
.lb-row.podium.p1{border-color:#f5c542;box-shadow:0 0 14px rgba(245,197,66,.35);background:#1a1206}
.lb-row.podium.p2{border-color:#c0c0c0;box-shadow:0 0 10px rgba(192,192,192,.25)}
.lb-row.podium.p3{border-color:#cd7f32;box-shadow:0 0 10px rgba(205,127,50,.25)}
/* --- Board lore headers (Redesign Day Wave 12) --- */
.board-lore{display:flex;gap:16px;align-items:center;padding:16px 18px;margin-bottom:14px;border:1px solid var(--red-edge);border-radius:var(--radius);background:linear-gradient(120deg,#160707 30%,#0d0404 70%),url('img/electric-crystal.webp') center/cover;box-shadow:inset 0 0 30px rgba(0,0,0,.55)}
.board-lore-icon{font-size:44px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,60,60,.6));flex-shrink:0}
.board-lore-name{font-size:19px;color:#ffe9a8;letter-spacing:1px;margin-bottom:2px}
.board-lore-text{margin:0 0 4px;color:#ffb3b3;font-style:italic;font-size:14px}
@media (max-width:560px){.board-lore-icon{font-size:34px}}
/* --- The Scroll (Redesign Day Wave 13) --- */
.scroll-head{text-align:center;padding:20px 16px 14px;margin-bottom:14px}
.scroll-head .page-title{margin:0 0 2px}
.scroll-tag{color:#c98a8a;font-style:italic;margin:0 0 12px}
.scroll-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.scroll-chip{border:1px solid var(--red-edge);border-radius:999px;padding:6px 16px;color:#ffb3b3;font-size:13px;text-decoration:none;background:#160707}
.scroll-chip:hover{border-color:#f5c542;color:#ffe9a8}
.scroll-chip.active{background:#3a0d0d;color:#ffe9a8;border-color:#f5c542;box-shadow:0 0 10px rgba(245,197,66,.3)}
.scroll-col{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.scroll-card{padding:14px 16px}
.scroll-kicker{font-size:10px;letter-spacing:3px;margin-bottom:8px;color:#f5c542}
.scroll-kicker.kicker-video{color:#7ec8ff}
.scroll-kicker.kicker-poll{color:#c99aff}
.scroll-kicker.kicker-reply{color:#ff9d6b}
.scroll-author{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.scroll-avatar img{border-radius:50%}
.scroll-name{color:#ffe9a8;font-weight:700}
.scroll-title{display:block;font-size:17px;color:#fff;margin:0 0 6px;line-height:1.3}
.scroll-title:hover{color:#ff6b6b}
.scroll-excerpt{color:#c98a8a;font-size:14px;margin:0 0 8px;line-height:1.5}
.scroll-video-tile{display:flex;align-items:center;gap:14px;border:1px solid var(--red-edge);border-radius:12px;padding:22px 16px;margin:4px 0 8px;background:radial-gradient(ellipse at 30% 20%,#2a0d0d,#0d0404);text-decoration:none}
.scroll-play{font-size:30px;color:#f5c542;filter:drop-shadow(0 0 8px rgba(245,197,66,.6))}
.scroll-video-cap{color:#ffe9a8;font-size:14px}
.scroll-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #2a0d0d;padding-top:8px;flex-wrap:wrap}
.scroll-actions{display:flex;align-items:center;gap:10px}
.scroll-open{color:#ff6b6b;font-size:13px;white-space:nowrap}
.scroll-open:hover{color:#ffe9a8}
.scroll-sentinel{text-align:center;padding:18px 0 30px}
/* --- Live Deck: the ship's one live stage --- */
.live-stage{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--red-edge);background:#000;aspect-ratio:16/9;box-shadow:0 0 34px rgba(193,18,18,.35)}
.live-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(10,0,0,.78);border:1px solid var(--red-bright);color:#fff;font-weight:700;letter-spacing:3px;font-size:13px;padding:6px 14px;border-radius:999px}
.live-dot{width:10px;height:10px;border-radius:50%;background:#ff2b2b;box-shadow:0 0 10px #ff2b2b;animation:live-pulse 1.4s ease-in-out infinite}
@keyframes live-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
.nav-live{color:#ff6b6b !important;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.live-under{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.live-off{text-align:center;padding:44px 24px}
.live-off h2{color:#fff;margin:14px 0 8px}
.live-off .live-badge{position:static;margin-bottom:6px}
.live-badge-off{border-color:#5a5a5a;color:#c9c9c9}
.live-badge-off .live-dot{background:#777;box-shadow:none;animation:none}
.check-row{display:flex !important;align-items:center;gap:10px;cursor:pointer}
.check-row input[type=checkbox]{width:20px;height:20px;accent-color:#c11212}
/* --- Live Deck chat: 13 seats under the stage --- */
.live-chat-panel{margin-top:16px}
.live-chat-title{margin:0;font-size:20px;color:#fff}
.seat-count{color:#f5c542;font-size:13px;letter-spacing:2px;font-weight:700;white-space:nowrap}
.live-chat-main{display:grid;grid-template-columns:1fr 210px;gap:14px;margin-top:12px}
.live-chat-messages{max-height:300px}
.live-full-notice{background:rgba(60,8,8,.6);border:1px solid var(--red-edge);border-radius:10px;color:#ffc9c9;padding:10px 14px;margin:10px 0;font-size:14px}
.live-full-notice[hidden]{display:none}
.live-roster-side .online-list{max-height:300px;overflow:auto}
@media (max-width:700px){.live-chat-main{grid-template-columns:1fr}.live-roster-side{order:2}}
/* --- Live Deck: small call room --- */
.live-call iframe{min-height:62vh}
.live-call-hint{margin:10px 4px 0;text-align:center}
/* --- Round Tables --- */
.table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:12px 0}
.table-card .table-name{margin:0;font-size:17px}
.table-card .table-name a{color:#fff}
.table-closed{opacity:.65}
.table-create-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.table-create-form input[type="text"]{flex:1;min-width:180px}
.section-title{margin:22px 0 4px;font-size:18px;color:#fff}
.ponder-note{opacity:.75;font-style:italic;margin:6px 0 0}
/* --- The King's Law: table moderation --- */
.mod-panel{margin-top:14px;border-color:var(--red-edge)}
.mod-title{margin:0 0 8px;font-size:17px;color:#fff}
.mod-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.role-badge{color:#f5c542}
@media (max-width:700px){.mod-lists{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ */
/* Full-screen chat room — /room: nothing but the room                 */
/* ------------------------------------------------------------------ */
body.room-full {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #050505;
}
.room-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(10, 0, 0, 0.92);
  border-bottom: 1px solid rgba(255, 45, 45, 0.35);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.room-back {
  font-size: 1.6em;
  line-height: 1;
  color: #ff5b5b;
  text-decoration: none;
  padding: 2px 10px 4px;
  border: 1px solid rgba(255, 45, 45, 0.4);
  border-radius: 10px;
  background: rgba(255, 45, 45, 0.08);
}
.room-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05em;
  color: #ffd9d9;
  letter-spacing: 0.06em;
  flex: 1;
  text-align: center;
}
.room-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  color: #ffb3b3;
  background: rgba(255, 45, 45, 0.08);
  border: 1px solid rgba(255, 45, 45, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.room-roster {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 84vw);
  height: 100vh;
  height: 100dvh;
  background: rgba(8, 0, 0, 0.97);
  border-left: 1px solid rgba(255, 45, 45, 0.4);
  z-index: 20;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6);
}
.room-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.room-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  overscroll-behavior: contain;
}
.room-form {
  flex: 0 0 auto;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10, 0, 0, 0.92);
  border-top: 1px solid rgba(255, 45, 45, 0.35);
}
.room-login-note {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 0, 0, 0.92);
  border-top: 1px solid rgba(255, 45, 45, 0.35);
  margin: 0;
}
body.room-full .chat-msg {
  padding: 7px 10px;
  margin: 0 0 6px;
}

/* ------------------------------------------------------------------ */
/* /room — polished gold & diamond-encrusted professional theme        */
/* ------------------------------------------------------------------ */
body.room-full {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(212, 175, 55, 0.08), transparent 60%),
    #050505;
}
.room-bar {
  background: linear-gradient(180deg, #0d0b06 0%, #060505 100%);
  border-bottom: 1px solid #d4af37;
  box-shadow: 0 1px 12px rgba(212, 175, 55, 0.25);
  position: relative;
}
.room-name {
  background: linear-gradient(180deg, #fffbe8 0%, #f5d67b 35%, #d4af37 60%, #9c7c1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.room-back {
  color: #f5d67b;
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.07);
}
.room-back:active { background: rgba(212, 175, 55, 0.22); }
.room-count {
  color: #f5d67b;
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.07);
}
.room-count .pulse-dot { background: #f5d67b; box-shadow: 0 0 8px #f5d67b; }
/* diamond divider strip under the bar */
.room-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 6px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 1.5px, #f5d67b 1.5px 2.5px, transparent 3px) 0 0 / 28px 6px repeat-x;
  opacity: 0.9;
  pointer-events: none;
}
.room-messages {
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.025) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,0.025) 0 1px, transparent 1px 14px);
}
body.room-full .chat-msg {
  background: rgba(20, 16, 8, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-left: 3px solid rgba(212, 175, 55, 0.55);
  border-radius: 10px;
  backdrop-filter: blur(2px);
}
body.room-full .chat-msg .who { color: #f5d67b; font-weight: 700; }
body.room-full .chat-msg .when { color: rgba(245, 214, 123, 0.5); }
.room-form {
  background: linear-gradient(0deg, #0d0b06 0%, #060505 100%);
  border-top: 1px solid #d4af37;
  box-shadow: 0 -1px 12px rgba(212, 175, 55, 0.2);
  position: relative;
}
.room-form::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 6px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 1.5px, #f5d67b 1.5px 2.5px, transparent 3px) 0 0 / 28px 6px repeat-x;
  opacity: 0.9;
  pointer-events: none;
}
.room-form #chat-input {
  background: #0a0906;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #ffeec2;
  border-radius: 12px;
}
.room-form #chat-input::placeholder { color: rgba(245, 214, 123, 0.4); }
.room-form #chat-input:focus {
  outline: none;
  border-color: #f5d67b;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}
.room-form .btn {
  background: linear-gradient(180deg, #ffe9a8 0%, #f5d67b 30%, #d4af37 65%, #a8861f 100%);
  color: #1a1405;
  border: 1px solid #f5d67b;
  font-weight: 700;
  border-radius: 12px;
  text-shadow: none;
}
.room-form .btn:active { filter: brightness(0.92); }
.room-login-note {
  background: linear-gradient(0deg, #0d0b06 0%, #060505 100%);
  border-top: 1px solid #d4af37;
  color: #ffeec2;
}
.room-login-note a { color: #f5d67b; }
/* gold scrollbar for the message well */
.room-messages::-webkit-scrollbar { width: 8px; }
.room-messages::-webkit-scrollbar-track { background: #0a0906; }
.room-messages::-webkit-scrollbar-thumb { background: linear-gradient(#f5d67b, #9c7c1e); border-radius: 4px; }
/* roster overlay in gold */
.room-roster {
  background: rgba(10, 8, 4, 0.98);
  border-left: 1px solid #d4af37;
}
.room-roster .online-list li { border-bottom: 1px solid rgba(212, 175, 55, 0.15); }
/* twinkling diamond sparkles across the header */
.room-bar .sparkle {
  position: absolute;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #f5d67b 40%, #d4af37 60%, #ffffff 100%);
  transform: rotate(45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: diamond-twinkle 2.8s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255, 251, 232, 0.9));
}
.room-bar .sparkle.s1 { left: 18%; top: 6px; animation-delay: 0s; }
.room-bar .sparkle.s2 { left: 34%; bottom: 5px; width: 7px; height: 7px; animation-delay: 0.9s; }
.room-bar .sparkle.s3 { left: 62%; top: 8px; width: 8px; height: 8px; animation-delay: 1.7s; }
.room-bar .sparkle.s4 { left: 79%; bottom: 6px; animation-delay: 2.2s; }
@keyframes diamond-twinkle {
  0%, 100% { opacity: 0.15; transform: rotate(45deg) scale(0.7); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.15); }
}

/* /room — compact text-line-size buttons */
body.room-full .room-back {
  font-size: 1.05em;
  padding: 0 8px 2px;
  border-radius: 8px;
  line-height: 1.4;
}
body.room-full .room-count {
  font-size: 0.72em;
  padding: 2px 9px;
  gap: 5px;
}
body.room-full .room-count .pulse-dot { width: 6px; height: 6px; }
body.room-full .room-form { gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
body.room-full .room-form .btn {
  padding: 4px 12px;
  font-size: 0.82em;
  border-radius: 9px;
  line-height: 1.5;
}
body.room-full .cw-fab {
  width: 30px;
  height: 30px;
  font-size: 14px;
  box-shadow: 0 0 8px rgba(212,175,55,.35);
}
body.room-full .room-roster-head .btn { padding: 2px 10px; font-size: 0.8em; }

/* /room — the top bar is a drop-down menu tucked behind a gold tab */
.room-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
body.bar-open .room-bar { transform: translateY(0); }
#room-bar-handle {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 3px 16px 5px;
  font-size: 0.75em;
  color: #f5d67b;
  background: linear-gradient(180deg, #0d0b06, #060505);
  border: 1px solid #d4af37;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 10px rgba(212,175,55,.25);
  cursor: pointer;
  white-space: nowrap;
}
#room-bar-handle:active { background: #1a1405; }
.room-messages { padding-top: 30px; }

/* ------------------------------------------------------------------ */
/* Leaderboard — polished gold & diamond-encrusted professional theme */
/* ------------------------------------------------------------------ */
.lb-gold {
  background:
    radial-gradient(1000px 400px at 50% -10%, rgba(212, 175, 55, 0.07), transparent 60%),
    var(--panel-bg, #0a0505);
  border: 1px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.12);
  position: relative;
  overflow: hidden;
}
.lb-gold > .catbar {
  background: linear-gradient(180deg, #0d0b06 0%, #060505 100%);
  border-bottom: 1px solid #d4af37;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(180deg, #fffbe8 0%, #f5d67b 35%, #d4af37 60%, #9c7c1e 100%);
  font-weight: 700;
  letter-spacing: 0.08em;
  position: relative;
}
.lb-gold > .catbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 6px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 1.5px, #f5d67b 1.5px 2.5px, transparent 3px) 0 0 / 28px 6px repeat-x;
  opacity: 0.9;
  pointer-events: none;
}
.lb-gold .lb-intro { color: #ffe9a8; }
.lb-gold .lb-row {
  background: rgba(20, 16, 8, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-left: 3px solid rgba(212, 175, 55, 0.55);
}
.lb-gold .lb-name { color: #ffe9a8; font-weight: 600; }
.lb-gold .lb-name:active { color: #fffbe8; }
.lb-gold .lb-score {
  background: linear-gradient(180deg, #fffbe8, #d4af37);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.lb-gold .lb-rank-tag { color: rgba(245, 214, 123, 0.65); border-color: rgba(212, 175, 55, 0.35); }
.lb-gold .lb-row.podium.p1 {
  border: 2px solid #f5d67b;
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.5), inset 0 0 18px rgba(245, 197, 66, 0.08);
  background: linear-gradient(180deg, rgba(46, 34, 10, 0.7), rgba(20, 16, 8, 0.55));
}
.lb-gold .lb-row.podium.p2 {
  border: 2px solid #e8e8e8;
  box-shadow: 0 0 14px rgba(232, 232, 232, 0.35);
  background: linear-gradient(180deg, rgba(30, 30, 34, 0.6), rgba(14, 14, 16, 0.55));
}
.lb-gold .lb-row.podium.p3 {
  border: 2px solid #e0a060;
  box-shadow: 0 0 14px rgba(224, 160, 96, 0.35);
  background: linear-gradient(180deg, rgba(40, 24, 12, 0.6), rgba(18, 12, 8, 0.55));
}
.lb-gold .hud-frame { border-color: rgba(212, 175, 55, 0.3); }
.lb-gold .hud-frame > .catbar {
  color: #f5d67b;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
}
.lb-gold .meta { color: rgba(245, 214, 123, 0.55); }
/* faint diamond lattice behind the board */
.lb-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.03) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,0.03) 0 1px, transparent 1px 16px);
  pointer-events: none;
}
.lb-gold > * { position: relative; }

/* ------------------------------------------------------------------ */
/* Slot-machine navigation — casino 777 reel replaces the pill grid   */
/* ------------------------------------------------------------------ */
.slot-nav { align-items: center; gap: 10px; }
.slot-machine {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #0d0b06, #060505);
  border: 1px solid rgba(212,175,55,.55); border-radius: 16px;
  padding: 8px 10px;
  box-shadow: 0 0 16px rgba(212,175,55,.18), inset 0 0 12px rgba(0,0,0,.6);
}
.slot-window {
  position: relative; width: 172px; height: 108px; overflow: hidden;
  background: #030303; border: 1px solid rgba(212,175,55,.35); border-radius: 10px;
  touch-action: none; cursor: grab;
}
.slot-window:focus-visible { outline: 2px solid #f5d67b; outline-offset: 2px; }
.slot-strip { will-change: transform; }
.slot-item {
  height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #a06a6a; font-size: 13px; white-space: nowrap;
  user-select: none; -webkit-user-select: none;
}
.slot-item .slot-ico { font-size: 14px; }
.slot-item.slot-locked {
  color: #ffe9a8; font-weight: 700;
  text-shadow: 0 0 10px rgba(245,197,66,.9);
}
.slot-lockline {
  position: absolute; left: 0; right: 0; top: 36px; height: 36px; pointer-events: none;
  border-top: 1px solid #d4af37; border-bottom: 1px solid #d4af37;
  box-shadow: inset 0 0 14px rgba(212,175,55,.28);
  background: linear-gradient(180deg, rgba(212,175,55,.10), transparent 40%, transparent 60%, rgba(212,175,55,.10));
}
.slot-lockline::before, .slot-lockline::after {
  content: "◆"; position: absolute; top: 50%; transform: translateY(-50%);
  color: #f5d67b; font-size: 10px; text-shadow: 0 0 6px rgba(245,197,66,.9);
}
.slot-lockline::before { left: 4px; }
.slot-lockline::after { right: 4px; }
.slot-step {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  color: #1a1405; font-size: 12px; line-height: 1;
  background: linear-gradient(180deg,#ffe9a8,#d4af37 60%,#a8861f);
  border: 1px solid #f5d67b; box-shadow: 0 0 8px rgba(212,175,55,.35);
}
.slot-step:active { filter: brightness(.9); }
.slot-engage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 88px; min-height: 66px; border-radius: 12px; cursor: pointer;
  color: #1a1405; font-weight: 700;
  background: linear-gradient(180deg,#fff3c4 0%,#f5d67b 35%,#d4af37 70%,#8a6d1a 100%);
  border: 1px solid #ffe9a8; box-shadow: 0 0 14px rgba(212,175,55,.5);
}
.slot-engage:active { filter: brightness(.92); }
.slot-engage-label { font-size: 13px; letter-spacing: 2px; }
.slot-engage-sub {
  font-size: 10px; font-weight: 600; opacity: .75; max-width: 82px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-engage.warp-charging { animation: engage-charge .45s ease-in-out infinite; pointer-events: none; }
@keyframes engage-charge {
  50% { box-shadow: 0 0 28px rgba(255,220,120,.95); transform: scale(1.05); }
}
.slot-utils { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slot-utils .theme-cycle { min-height: 0; padding: 4px 10px; font-size: 11px; }
.slot-utils .notif-bell { padding: 4px 9px; font-size: 14px; }
.slot-utils > a {
  color: var(--red-link); text-decoration: none; padding: 4px 10px;
  border: 1px solid var(--red-edge); border-radius: var(--radius-sm);
  background: #16090a; font-size: 11px; font-weight: bold;
}
/* warp-out transition overlay */
#warp-overlay {
  position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  opacity: 0; background: #000; overflow: hidden;
}
#warp-overlay.warp-on { pointer-events: all; animation: warp-body .95s ease-in forwards; }
@keyframes warp-body { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 1; } }
.warp-rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg 3deg, rgba(255,251,232,.55) 3deg 4deg, rgba(212,175,55,.5) 4deg 5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 55%);
  mask-image: radial-gradient(circle, transparent 18%, #000 55%);
  animation: warp-spin .45s linear infinite;
}
@keyframes warp-spin { to { transform: rotate(24deg) scale(1.15); } }
.warp-flash {
  position: absolute; inset: 0; opacity: 0; transform: scale(.2);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.95) 0%, rgba(255,240,200,.5) 22%, transparent 55%);
}
#warp-overlay.warp-on .warp-flash { animation: warp-flash .95s ease-in forwards; }
@keyframes warp-flash {
  0% { transform: scale(.2); opacity: 0; }
  55% { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.6); opacity: 1; }
}
.warp-word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ffe9a8; font-size: 15px; letter-spacing: 6px; font-weight: 700; opacity: 0;
  text-shadow: 0 0 14px rgba(245,197,66,.9);
}
#warp-overlay.warp-on .warp-word { animation: warp-word .95s ease-in forwards; }
@keyframes warp-word { 0%, 20% { opacity: 0; } 45%, 100% { opacity: 1; } }

/* ------------------------------------------------------------------ */
/* Radio Deck — the fleet's own station                                */
/* ------------------------------------------------------------------ */
.radio-tuner, .radio-quiet, .radio-gate, .radio-booth { text-align: center; }
.radio-onair {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; letter-spacing: 4px; font-size: 15px; color: #ffd9d9;
  background: linear-gradient(180deg, #5c0d0d, #2e0505);
  border: 2px solid #ff3b3b; border-radius: 10px; padding: 8px 18px;
  box-shadow: 0 0 22px rgba(255,59,59,.55), inset 0 0 12px rgba(255,59,59,.25);
  animation: onair-pulse 1.6s ease-in-out infinite;
  margin-bottom: 12px;
}
.radio-onair.is-off {
  border-color: #5a2424; color: #8a5a5a; box-shadow: none; animation: none;
  background: #16090a;
}
.radio-onair .live-dot { width: 10px; height: 10px; }
@keyframes onair-pulse { 50% { box-shadow: 0 0 34px rgba(255,59,59,.85), inset 0 0 14px rgba(255,59,59,.35); } }
.radio-offair {
  display: inline-block; font-weight: 800; letter-spacing: 4px; font-size: 14px;
  color: #8a5a5a; border: 2px solid #5a2424; border-radius: 10px; padding: 8px 18px;
  background: #16090a; margin-bottom: 12px;
}
.radio-dial {
  position: relative; max-width: 420px; margin: 4px auto 14px;
  background: linear-gradient(180deg, #0d0b06, #060505);
  border: 1px solid rgba(212,175,55,.5); border-radius: 12px; padding: 12px 14px 8px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.7);
}
.dial-band { position: relative; height: 26px; border-bottom: 1px solid rgba(212,175,55,.4); }
.dial-tick {
  position: absolute; bottom: 0; width: 1px; height: 8px; background: rgba(212,175,55,.55);
  font-size: 9px; color: #c9a227;
}
.dial-tick i { position: absolute; top: -11px; left: -8px; font-style: normal; width: 18px; text-align: center; }
.dial-tick[data-major] { height: 14px; }
.dial-band .dial-tick { display: block; }
.dial-needle {
  position: absolute; top: 6px; bottom: 26px; width: 2px; margin-left: -1px;
  background: #ff3b3b; box-shadow: 0 0 8px rgba(255,59,59,.9);
}
.dial-freq { margin-top: 6px; font-size: 11px; letter-spacing: 3px; color: #c9a227; }
.dial-freq b { color: #ffe9a8; }
.radio-title { margin: 6px 0 4px; font-size: 20px; color: #ffd9d9; }
.radio-controls { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.radio-tune, .radio-golive {
  font-size: 16px; padding: 12px 26px;
  background: linear-gradient(180deg,#fff3c4 0%,#f5d67b 35%,#d4af37 70%,#8a6d1a 100%);
  border: 1px solid #ffe9a8; color: #1a1405; font-weight: 800;
  box-shadow: 0 0 16px rgba(212,175,55,.45);
}
.radio-vu {
  display: block; margin: 6px auto; max-width: 100%;
  background: #030303; border: 1px solid rgba(212,175,55,.35); border-radius: 8px;
}
.radio-hint { max-width: 440px; margin: 8px auto 0; }
.radio-label { display: block; font-size: 11px; letter-spacing: 2px; color: #c9a227; margin: 10px 0 6px; }
.radio-title-input {
  width: 100%; max-width: 420px; padding: 10px 12px; font-size: 15px;
  background: #0d0b06; border: 1px solid rgba(212,175,55,.5); border-radius: 10px; color: #ffe9a8;
}
.radio-title-input:disabled { opacity: .6; }
.radio-log {
  max-width: 460px; margin: 12px auto 0; max-height: 130px; overflow-y: auto; text-align: left;
  background: #030303; border: 1px solid #3a1a1a; border-radius: 8px; padding: 8px 10px;
  font-size: 12px; color: #c98a8a;
}
.radio-log div { padding: 2px 0; border-bottom: 1px dotted #2a1212; }
.radio-log .meta { border: none; }

/* --- Radio Deck: What U Hear music deck -------------------------------- */
.radio-deck {
  max-width: 460px; margin: 12px auto 0; text-align: left;
  background: #0d0b06; border: 1px solid rgba(212,175,55,.5); border-radius: 12px;
  padding: 10px 12px;
}
.radio-deck-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-weight: 800; letter-spacing: 1px; color: #ffe9a8; margin-bottom: 8px;
}
.radio-deck-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.radio-deck-row .btn-small { min-height: 0; padding: 6px 10px; font-size: 14px; }
.radio-deck-row input[type="range"] { flex: 1; min-width: 90px; accent-color: #d4af37; }
.deck-track {
  flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #ffe9a8;
}
.radio-playlist {
  margin: 6px 0 0; padding: 0; list-style: none; max-height: 110px; overflow-y: auto;
  font-size: 12px; color: #c98a8a;
}
.radio-playlist li {
  padding: 4px 6px; border-bottom: 1px dotted #2a1212; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.radio-playlist li.playing { color: #ffe9a8; font-weight: 700; }
.radio-playlist li .meta { margin-left: 6px; }

/* Visually hidden but still label-activatable (iOS won't open pickers for display:none inputs). */
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.deck-url {
  flex: 1; min-width: 140px; background: #000; border: 1px solid #5a2b2b;
  color: #ffe9a8; border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.deck-url::placeholder { color: #7a4a4a; }

/* --- Radio Deck: Station Library ----------------------------------------- */
#radio-lib { margin-top: 10px; }
.lib-name { cursor: pointer; color: #e8b4b4; }
.lib-name:hover { color: #ffe9a8; text-decoration: underline; }
.lib-del {
  background: none; border: none; color: #7a3a3a; cursor: pointer;
  font-size: 12px; padding: 2px 4px;
}
.lib-del:hover { color: #ff6b6b; }

/* --- Radio Deck: The Amp --------------------------------------------------- */
#radio-amp { margin-top: 10px; }
.amp-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.amp-preset.active {
  background: linear-gradient(180deg,#fff3c4 0%,#d4af37 60%,#8a6d1a 100%);
  color: #1a1405; border-color: #ffe9a8; font-weight: 800;
}
.amp-knobs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px;
  padding: 12px 6px 4px;
  background: #050403; border: 1px solid rgba(212,175,55,.25); border-radius: 10px;
}
.amp-knob { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.knob {
  width: 54px; height: 54px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #3d3115, #100c05 72%);
  border: 2px solid rgba(212,175,55,.6); cursor: ns-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.65), inset 0 1px 3px rgba(255,233,168,.18);
}
.knob:focus { outline: 2px solid #ffe9a8; outline-offset: 2px; }
.knob-pointer {
  position: absolute; left: calc(50% - 2px); top: 5px; width: 4px; height: 19px;
  background: linear-gradient(#fff3c4, #d4af37); border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,233,168,.8);
  transform-origin: 50% 22px;
  transform: rotate(var(--rot, -135deg));
}
.knob-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #c9a227;
}
.radio-nowplaying { color: #ffe9a8; font-size: 13px; min-height: 18px; }

/* --- Professional homepage (2026-09-19): full-bleed hero, quick cards, section rhythm --- */
html, body { overflow-x: clip; }
.pro-hero { position: relative; width: 100vw; max-width: 100vw; margin: -12px calc(50% - 50vw) 18px;
  overflow: hidden; border-top: 1px solid var(--red-edge); border-bottom: 1px solid var(--red-edge);
  background: #050101 url('img/electric-crystal.webp') center/cover;
  min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; }
.pro-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pro-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(193,18,18,.38), transparent 60%),
  linear-gradient(180deg, rgba(0,0,0,.25) 20%, rgba(0,0,0,.85) 100%); }
.pro-copy { position: relative; padding: 70px 24px; max-width: 780px; }
.pro-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; color: #f5c542;
  letter-spacing: 6px; font-size: 11px; margin-bottom: 16px; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(245,197,66,.55); }
.pro-krule { display: inline-block; width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #f5c542); }
.pro-kicker .pro-krule:last-child { background: linear-gradient(90deg, #f5c542, transparent); }
.pro-title { margin: 0 0 14px; font-family: 'Michroma', 'Audiowide', sans-serif;
  font-size: clamp(46px, 9vw, 92px); line-height: 1; color: #fff; letter-spacing: 4px;
  text-shadow: 0 0 34px rgba(255,60,60,.7), 0 3px 0 #2a0505; }
.pro-tag { margin: 0 auto; color: #ffc9c9; font-size: 16px; max-width: 56ch; text-shadow: 0 1px 3px #000; }
.pro-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pro-cta { display: inline-block; padding: 13px 34px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pro-cta-primary { color: #fff; background: linear-gradient(180deg, #d21f1f, #7d0f0f); border: 1px solid #ff6b6b;
  box-shadow: 0 4px 22px rgba(210,31,31,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.pro-cta-primary:hover { transform: translateY(-2px); color: #fff;
  box-shadow: 0 8px 30px rgba(210,31,31,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.pro-cta:not(.pro-cta-primary) { color: #ffe9a8; background: rgba(22,5,5,.6); border: 1px solid var(--red-edge); }
.pro-cta:not(.pro-cta-primary):hover { transform: translateY(-2px); border-color: #f5c542; color: #ffe9a8;
  box-shadow: 0 6px 18px rgba(245,197,66,.25); }
.pro-instruments { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.pro-inst { background: rgba(10,2,2,.72); border: 1px solid var(--red-edge); border-radius: 14px;
  padding: 10px 20px; text-align: center; min-width: 88px; backdrop-filter: blur(3px); }
.pro-inst b { display: block; color: #ffe9a8; font-size: 24px; line-height: 1.15; font-family: 'Michroma', sans-serif; }
.pro-inst span { font-size: 10px; color: #d89a9a; letter-spacing: 2.5px; text-transform: uppercase; }
/* quick-action cards */
.pro-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0 0 6px; }
.pro-card { display: block; text-align: center; padding: 16px 8px 14px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(180deg, rgba(34,9,9,.94), rgba(14,3,3,.96)); border: 1px solid var(--red-edge);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pro-card:hover { transform: translateY(-3px); border-color: #f5c542; box-shadow: 0 8px 24px rgba(210,31,31,.35); }
.pro-card-ico { display: block; font-size: 26px; margin-bottom: 8px; filter: drop-shadow(0 2px 6px rgba(255,60,60,.5)); }
.pro-card-label { display: block; color: #ffe9a8; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.pro-card-sub { display: block; color: #a97f7f; font-size: 11px; margin-top: 3px; }
/* section rhythm */
.pro-sect { display: flex; align-items: center; gap: 16px; margin: 26px 0 14px; scroll-margin-top: 90px; }
.pro-sect-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(193,18,18,.65), transparent); }
.pro-sect-text { color: #f5c542; font-size: 11px; letter-spacing: 5px; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 0 10px rgba(245,197,66,.4); }
/* trending + vitals side by side */
.pro-duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: start; }
.pro-duo .panel { margin-bottom: 0; }
@media (max-width: 960px) {
  .pro-cards { grid-template-columns: repeat(3, 1fr); }
  .pro-duo { grid-template-columns: 1fr; }
  .pro-duo .panel { margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .pro-hero { min-height: 400px; }
  .pro-copy { padding: 52px 18px; }
  .pro-cards { grid-template-columns: repeat(2, 1fr); }
  .pro-cta { padding: 12px 24px; font-size: 12px; }
  .pro-inst { min-width: 70px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-card, .pro-cta { transition: none; }
}

/* --- Floating control dock (2026-09-19): journal + SABLE + quick-launch, one small bubble row --- */
body { padding-bottom: 78px; }
.float-dock {
  position: fixed; z-index: 9000; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px;
  background: rgba(12,3,3,.85); border: 1px solid var(--red-edge);
  box-shadow: 0 6px 20px rgba(0,0,0,.6), 0 0 16px rgba(255,60,60,.28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.float-dock .dock-bubble {
  position: static; left: auto; right: auto; top: auto; bottom: auto; margin: 0;
  width: 42px; height: 42px; border-radius: 50%; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; cursor: pointer;
  color: #ffb3b3; background: linear-gradient(180deg, #7a1616, #2a0808);
  border: 1px solid var(--red-edge); box-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  animation: none;
}
.float-dock .dock-bubble:hover { transform: scale(1.1); border-color: #f5c542; box-shadow: 0 0 14px rgba(255,80,80,.55); }
.float-dock .dock-bubble:active { transform: scale(.96); }
.float-dock .dock-bubble.sable-summon { overflow: hidden; background: #000; border-width: 2px; animation: dock-nudge 12s ease-in-out infinite; }
.float-dock .dock-bubble.sable-summon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.float-dock .dock-bubble.ql-fab.open { transform: rotate(90deg); }
@keyframes dock-nudge {
  0%, 93%, 100% { transform: scale(1) rotate(0deg); }
  95% { transform: scale(1.08) rotate(-6deg); }
  97% { transform: scale(1.08) rotate(6deg); }
}
/* quick-launch menu now pops up above the centered dock */
.ql-rail { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 9000; }
.ql-menu { left: 50%; transform: translateX(-50%); bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .float-dock .dock-bubble { transition: none; animation: none; }
}

/* --- SABLE guide mode (2026-09-19): tap her arrow, she explains the screen --- */
.sable-pointer.idle { pointer-events: auto; cursor: pointer; }
.sable-pointer.guide { pointer-events: none; opacity: 1; transition: transform .08s linear; }
.sable-pointer.guide .sable-cur { animation: none; }
.sable-pointer.sable-ghost { pointer-events: auto; cursor: pointer; opacity: .92; }
.sable-pointer.sable-ghost .sable-cur { filter: drop-shadow(0 0 6px rgba(0,0,0,.9)); animation: sableBob 2.8s ease-in-out infinite; }
.sable-guide-tip {
  position: fixed; z-index: 10001; pointer-events: none;
  max-width: 240px; padding: 9px 11px; border-radius: 12px;
  background: rgba(10,2,2,.95); border: 1px solid var(--red-edge);
  box-shadow: 0 6px 20px rgba(0,0,0,.65), 0 0 14px rgba(255,60,60,.3);
  font-size: 12px; color: #ffd7d7; line-height: 1.45;
}
.sable-guide-tip b { display: block; color: #f5c542; font-size: 10px; letter-spacing: 2.5px; margin-bottom: 3px; }
@media (prefers-reduced-motion: reduce) {
  .sable-pointer.guide { transition: none; }
  .sable-pointer.sable-ghost .sable-cur { animation: none; }
}

/* No-tags composer: the contenteditable surface (replaces the old transparent-text overlay) */
.wys-ed {
  font-family: inherit; font-size: 14px; padding: 10px;
  border: 2px inset var(--red-edge); background: #0e0e10; color: var(--ink); width: 100%;
  min-height: 140px; border-radius: var(--radius-sm);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  overflow-y: auto; -webkit-user-select: text; user-select: text;
}
.wys-ed:focus { outline: none; border-color: var(--red-bright); box-shadow: 0 0 6px rgba(255, 60, 60, 0.5); }
.wys-ed.ed-empty:before { content: attr(data-placeholder); color: #8a8a8a; pointer-events: none; }
.wys-ed img { max-width: 100%; height: auto; border-radius: 8px; vertical-align: middle; }
.wys-ed a { color: var(--red-bright); }
/* Editor presentation for the exotic tags (display chrome stripped out) */
.bb-chip, .bb-countdown-ed {
  display: inline-block; background: #1c1c20; border: 1px solid var(--red-edge);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; margin: 0 2px; white-space: nowrap;
}
.bb-progress-ed {
  position: relative; height: 22px; background: #1a1a1e; border: 1px solid var(--red-edge);
  border-radius: 11px; overflow: hidden; margin: 6px 0; min-width: 120px;
}
.bb-progress-ed-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--red-deep), var(--red-bright)); }
.bb-progress-ed-label { position: relative; z-index: 1; font-size: 12px; padding: 0 10px; line-height: 22px; color: #fff; }
.bb-scroll-ed { border: 1px dashed var(--red-edge); border-radius: 8px; padding: 8px; overflow-y: auto; margin: 6px 0; background: rgba(163,18,18,.05); }
.bb-tangent-ed { border-left: 3px solid var(--red-bright); background: rgba(163,18,18,.07); padding: 6px 10px; margin: 6px 0; border-radius: 0 8px 8px 0; }
.bb-tangent-ed-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--red-bright); margin-bottom: 4px; }
.bb-bg-ed { border-radius: 10px; padding: 12px; margin: 6px 0; border: 1px solid var(--red-edge);
  background: radial-gradient(ellipse at 30% 20%, rgba(163,18,18,.25), rgba(0,0,0,.6)), #0b0b0e; }
.bb-marquee-ed { border: 1px solid var(--red-edge); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: #141416; }
.bb-banner-ed { border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-weight: bold; }
.bb-banner-ed-red { background: rgba(163,18,18,.25); border: 1px solid var(--red-bright); }
.bb-banner-ed-amber { background: rgba(163,102,18,.2); border: 1px solid #c8862a; }
.bb-banner-ed-green { background: rgba(18,120,60,.2); border: 1px solid #2a9d5c; }
.bb-spoiler-ed { border: 1px dashed var(--red-bright); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: rgba(0,0,0,.4); }
.bb-spoiler-ed-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--red-bright); margin-bottom: 2px; }
.bb-cipher-ed { background: #101014; border: 1px dashed var(--red-edge); border-radius: 6px; padding: 1px 8px; font-family: monospace; }
.bb-jump-ed { color: var(--red-bright); text-decoration: underline; }
.bb-anchor-ed { border-bottom: 1px dotted var(--red-bright); }
.bb-fn-ed { font-size: 11px; color: var(--red-bright); }
.bb-quote-ed { border-left: 3px solid var(--red-edge); margin: 6px 0; padding: 6px 10px; background: rgba(163,18,18,.05); border-radius: 0 8px 8px 0; }
.bb-quote-ed-cite { font-size: 12px; color: var(--red-bright); margin-bottom: 4px; }
.bb-code-ed { background: #0a0a0c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: monospace; font-size: 13px; margin: 6px 0; white-space: pre-wrap; }
.bb-list-ed { margin: 6px 0; padding-left: 24px; }
.bb-redact-ed { background: #000; color: #ff6a6a; border-radius: 4px; padding: 0 6px; }
.wys-ed.ed-needed { border-color: var(--red-bright); box-shadow: 0 0 10px rgba(255, 60, 60, 0.7); }

/* ==== Epistle Studio (legacy block retained) ====
.studio-main { max-width: 860px; margin: 0 auto; padding: 0 12px 60px; }
.studio-toolbar { margin: 14px 0 18px; padding: 14px; }
.st-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin-bottom: 12px; }
.st-row:last-child { margin-bottom: 0; }
.st-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.st-field > span { text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.65; font-size: 11px; }
.st-field select, .st-field input[type="text"] { background: #0c0c0e; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 9px 12px; font-size: 15px; min-width: 0; }
.st-field input[type="text"] { width: 220px; max-width: 100%; }
.st-field input[type="range"] { width: 130px; accent-color: var(--red-bright); }
.st-grow { flex: 1 1 200px; }
.st-swatches { display: flex; gap: 8px; }
.st-theme { background: none; border: 2px solid transparent; border-radius: 10px; padding: 2px; cursor: pointer; }
.st-theme.on { border-color: var(--red-bright); }
.st-swatch { display: block; width: 44px; height: 32px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.25); }
.st-swatch-parchment { background: linear-gradient(135deg, #e8d5a8, #d9bd85); }
.st-swatch-ivory { background: linear-gradient(135deg, #faf7ef, #e9e2d2); }
.st-swatch-midnight { background: linear-gradient(135deg, #16233d, #0b1220); }
.st-swatch-crimson { background: linear-gradient(135deg, #1a0d0d, #3d0f0f); }
.st-swatch-telegram { background: linear-gradient(135deg, #e8d9a8, #dcc98e); }
.st-ink { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); border: 2px solid transparent; cursor: pointer; }
.st-ink.on { border-color: #fff; box-shadow: 0 0 0 2px var(--red-bright); }
.st-btns { display: flex; gap: 6px; }
.st-btns button { background: #0c0c0e; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 15px; cursor: pointer; }
.st-btns button.on { border-color: var(--red-bright); color: var(--red-bright); }
.st-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; padding: 8px 0; }
.st-checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.st-checks input { accent-color: var(--red-bright); width: 17px; height: 17px; }
.st-actions { align-items: center; gap: 10px; }
#st-status { margin-left: auto; }

/* The paper */
.letter-sheet {
  --ink: #2b2118;
  position: relative; border-radius: 6px; padding: 56px 54px 72px; margin: 0 auto;
  max-width: 700px; min-height: 640px; color: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.06) inset;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.theme-parchment { background:
  radial-gradient(ellipse at 20% 10%, rgba(120,72,20,0.10), transparent 55%),
  radial-gradient(ellipse at 85% 90%, rgba(120,72,20,0.12), transparent 50%),
  radial-gradient(circle at 70% 30%, rgba(90,50,10,0.05) 0 2px, transparent 3px),
  radial-gradient(circle at 30% 70%, rgba(90,50,10,0.05) 0 2px, transparent 3px),
  linear-gradient(160deg, #f0e2c0, #e2cba0 60%, #d8ba8a); }
.theme-ivory { background: linear-gradient(165deg, #fdfbf5, #f4eee0 70%, #ece4d2); }
.theme-midnight { background:
  radial-gradient(ellipse at 50% 0%, rgba(90,120,200,0.14), transparent 60%),
  linear-gradient(170deg, #182642, #0d1526 70%, #090f1d); }
.theme-crimson { background:
  radial-gradient(ellipse at 50% 0%, rgba(200,40,40,0.16), transparent 55%),
  linear-gradient(170deg, #200d0d, #120707 70%, #0a0404);
  border: 1px solid rgba(200,60,60,0.25); }
.theme-telegram { background:
  repeating-linear-gradient(0deg, transparent 0 30px, rgba(120,60,20,0.06) 30px 31px),
  linear-gradient(160deg, #ecdcab, #e0cb90); }
.ls-date { text-align: right; font-size: 0.82em; opacity: 0.85; margin-bottom: 26px; outline: none; }
.ls-salutation { margin-bottom: 6px; font-family: var(--accent-font, 'Great Vibes', cursive); font-size: 1.35em; }
.ls-divider { text-align: center; font-size: 1.5em; margin: 10px 0 18px; opacity: 0.7; }
.ls-divider::before, .ls-divider::after { content: ""; display: inline-block; width: 28%; height: 1px; background: currentColor; opacity: 0.4; vertical-align: middle; margin: 0 12px; }
.ls-body { outline: none; min-height: 320px; word-wrap: break-word; }
.ls-body:empty::before { content: attr(data-placeholder); opacity: 0.4; pointer-events: none; }
.ls-body p { margin: 0 0 1em; }
.letter-sheet.initial-legacy .ls-body > p:first-child::first-letter {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700; float: left;
  font-size: 3.4em; line-height: 0.85; padding: 0.06em 0.12em 0 0;
}
.ls-closing { margin-top: 2.2em; }
.ls-closing-word { outline: none; }
.ls-signature { font-family: var(--accent-font, 'Great Vibes', cursive); font-size: 2em; margin-top: 6px; min-height: 1.2em; }
.ls-seal {
  position: absolute; right: 64px; bottom: 44px; width: 96px; height: 96px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  /* poured wax is never a perfect circle: organic, uneven edges */
  border-radius: 46% 54% 51% 49% / 53% 47% 54% 46%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.42), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 74% 76%, rgba(0,0,0,0.52), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 48%, var(--wax, #e05252) 50%, var(--wax-dark, #6d0d0d) 84%, rgba(0,0,0,0.6) 100%);
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,0.3),
    inset 0 -8px 14px rgba(0,0,0,0.52),
    0 8px 16px rgba(0,0,0,0.45), 0 2px 5px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; transform: rotate(-5deg);
}
/* the stamp's pressed inner ring */
.ls-seal::before { content: ""; position: absolute; inset: 16%;
  border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%;
  border: 2px solid rgba(0,0,0,0.3);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.22); }
/* the monogram is debossed: pressed INTO the wax, not printed on it */
.ls-seal span { font-family: 'Cinzel', serif; font-weight: 700; font-size: 33px;
  color: rgba(0,0,0,0.52);
  text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 2px rgba(0,0,0,0.55); }
[contenteditable]:focus { outline: none; }
.letter-sheet [contenteditable]:hover { outline: 1px dashed rgba(128,128,128,0.35); outline-offset: 4px; border-radius: 4px; }

/* Saved-letters drawer */
.studio-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 9600;
  background: #101013; border-left: 1px solid var(--line); padding: 18px;
  transform: translateX(105%); transition: transform 0.28s ease; overflow-y: auto;
}
.studio-drawer.open { transform: none; }
.studio-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.studio-drawer-head h2 { font-size: 18px; margin: 0; }
#st-drawer-close { background: none; border: none; color: var(--ink); font-size: 26px; cursor: pointer; }
.st-letter { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #0b0b0d; }
.st-letter-load { flex: 1; background: none; border: none; color: var(--ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.st-letter-title { font-weight: 600; }
.st-letter-to { font-size: 13px; opacity: 0.7; }
.st-letter .meta { font-size: 12px; }
.st-letter-del { background: none; border: none; color: #ff7070; font-size: 22px; cursor: pointer; padding: 4px 8px; }

@media (max-width: 560px) {
  .letter-sheet { padding: 36px 26px 60px; }
  .ls-seal { right: 30px; bottom: 30px; width: 68px; height: 68px; }
  .ls-seal span { font-size: 27px; }
  .st-field input[type="text"] { width: 100%; }
  .st-field { flex: 1 1 44%; }
}

@media print {
  @page { margin: 0.55in; }
  body { background: #fff !important; }
  #cosmos, .site-header, .site-footer, .float-dock, .sable-side, .logbook-side,
  .atelier, .studio-drawer, .row-between, .enlist-bar, .st-tabs, .fmt-bar, .sig-overlay,
  .studio-head-actions, .reading-foot { display: none !important; }
  .studio-main { max-width: none; padding: 0; }
  .letter-sheet { box-shadow: none; margin: 0; max-width: none; min-height: 0; border-radius: 0; }
  .letter-sheet [contenteditable]:hover { outline: none; }
  .ls-body:empty::before { content: none; }
  .ls-body { hyphens: auto; -webkit-hyphens: auto; widows: 3; orphans: 3; }
  .studio-envelope { border: none; background: none; box-shadow: none; padding: 0; margin: 0; }
  .studio-envelope .st-row { display: none !important; }
  .envelope { box-shadow: none; margin: 0 auto; break-before: page; page-break-before: always; }
}


/* ============ Epistle Studio: typography atelier ============ */
.st-preview { display: inline-block; font-size: 1.5em; margin-left: 10px; vertical-align: -3px; min-width: 1.4em; }
.st-mono { width: 72px; text-align: center; font-size: 1.25em; text-transform: uppercase; }
.st-wax { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, var(--wax), rgba(0,0,0,0.55) 135%); }
.st-wax.on { border-color: #fff; box-shadow: 0 0 0 2px var(--red-bright); }
/* signet: the refined monogram picker — a wax preview and a flowing alphabet, no keys */
.signet { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.signet-preview { flex: 0 0 auto; width: 58px; height: 58px;
  border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.42), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 48%, var(--wax, #a31616) 52%, var(--wax-dark, #6d0d0d) 86%, rgba(0,0,0,0.6) 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -5px 9px rgba(0,0,0,0.52), 0 4px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; transform: rotate(-5deg); }
.signet-preview span { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 22px;
  color: rgba(0,0,0,0.52); text-shadow: 0 1px 1px rgba(255,255,255,0.3), 0 -1px 2px rgba(0,0,0,0.55); }
.signet-strip { display: flex; flex-wrap: wrap; gap: 2px 2px; flex: 1; align-content: flex-start; }
.st-glyph { font-family: 'Cinzel', Georgia, serif; font-size: 19px; line-height: 1;
  min-width: 36px; padding: 10px 4px; text-align: center; cursor: pointer;
  background: none; border: none; color: rgba(212,175,55,0.5);
  transition: color 0.15s, text-shadow 0.15s, transform 0.1s; }
.st-glyph:active { transform: scale(1.3); }
.st-glyph.on { color: #ffe3b0; text-shadow: 0 0 10px rgba(255,90,90,0.9), 0 0 24px rgba(255,60,60,0.5); }
/* header overflow menu */
.st-menu-wrap { position: relative; }
.st-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 184px;
  background: rgba(20,8,8,0.98); border: 1px solid rgba(163,22,22,0.55); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6); padding: 6px; display: flex; flex-direction: column; }
.st-menu[hidden] { display: none; }
.st-menu button { background: none; border: none; text-align: left; color: #f0caca;
  padding: 11px 12px; font-size: 15px; border-radius: 8px; cursor: pointer; }
.st-menu button:hover { background: rgba(163,22,22,0.25); }
.st-menu button.on { color: #ff8080; }
/* compact studio opening: the letter is the hero */
.studio-head-compact { align-items: center; }
.studio-head-compact .page-title { font-size: 1.35em; margin: 0; }
.btn-enhance { border-color: rgba(212,175,55,0.6); color: #ffd9a0; }
.st-hint { display: block; font-size: 11px; opacity: 0.55; margin-top: 5px; font-style: italic; }
#st-smallcaps.on { border-color: var(--red-bright); color: #fff; }
.ls-salutation { font-family: var(--accent-font, 'Great Vibes', cursive); font-size: 1.35em; }
.letter-sheet.initial-classic .ls-body > p:first-child::first-letter {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700; float: left;
  font-size: 3.4em; line-height: 0.85; padding: 0.06em 0.12em 0 0;
}
.letter-sheet.initial-illuminated .ls-body > p:first-child::first-letter {
  font-family: 'Pirata One', 'Playfair Display', serif; float: left;
  font-size: 3.6em; line-height: 0.8; padding: 0.1em 0.16em 0.04em 0.08em; margin: 0.05em 0.12em 0 0;
  background: linear-gradient(160deg, #f9e79a, #c9962e 55%, #8a6508);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(120, 85, 10, 0.5);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.letter-sheet.border-single { outline: 1px solid currentColor; outline-offset: 12px; }
.letter-sheet.border-double { outline: 3px double currentColor; outline-offset: 12px; }
.letter-sheet.border-frame::before { content: ""; position: absolute; inset: 14px; border: 1px solid currentColor; opacity: 0.5; pointer-events: none; }
.letter-sheet.border-frame::after { content: ""; position: absolute; inset: 21px; border: 3px double currentColor; opacity: 0.32; pointer-events: none; }
.letter-sheet.fx-foil .ls-body, .st-sel.fx-foil {
  background: linear-gradient(100deg, #8a6508, #f7e08b 25%, #fff6c9 50%, #f7e08b 75%, #8a6508);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.letter-sheet.fx-press .ls-body, .st-sel.fx-press {
  text-shadow: 0 1px 1px rgba(255,255,255,0.4), 0 -1px 1px rgba(0,0,0,0.5);
}
.letter-sheet.smallcaps .ls-body { font-variant: small-caps; }
/* envelope */
.studio-envelope { margin-top: 28px; }
.studio-envelope textarea { width: 100%; resize: vertical; }
.envelope { position: relative; max-width: 640px; margin: 20px auto 8px; aspect-ratio: 1.55;
  background: linear-gradient(160deg, #f5eeda, #e6d6b2);
  border: 1px solid rgba(120,90,40,0.4); border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5); color: #3a2c18; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.envelope::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 49.3%, rgba(120,90,40,0.28) 49.3% 50.7%, transparent 50.7%),
    linear-gradient(65deg, transparent 49.3%, rgba(120,90,40,0.28) 49.3% 50.7%, transparent 50.7%); }
.env-stamp { position: absolute; top: 14px; right: 16px; width: 66px; height: 78px; background: #f8f3e6;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  /* perforated postage edge */
  -webkit-mask: radial-gradient(circle 3.2px, transparent 96%, #000 100%) -6.5px -6.5px / 13px 13px;
  mask: radial-gradient(circle 3.2px, transparent 96%, #000 100%) -6.5px -6.5px / 13px 13px; }
.env-stamp::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid rgba(163,22,22,0.65); }
.env-stamp span { font-family: 'Cinzel', serif; font-size: 26px; color: #a31616; }
.env-postmark { position: absolute; top: 22px; right: 94px; width: 82px; height: 82px; border: 2px solid rgba(40,40,40,0.42);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px; line-height: 1.7;
  color: rgba(40,40,40,0.6); transform: rotate(-12deg); }
.env-from { position: absolute; top: 16px; left: 18px; font-size: 13px; line-height: 1.6; max-width: 46%; white-space: pre-line; }
.env-to { position: absolute; top: 40%; left: 0; right: 0; text-align: center;
  font-size: 30px; line-height: 1.6; white-space: pre-line; padding: 0 40px; }
@media (max-width: 560px) { .env-to { font-size: 22px; } }

/* ============ Epistle Studio v3: the post office ============ */
.studio-head { align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.studio-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.studio-head-actions .meta { flex-basis: 100%; }
.st-hidden { display: none !important; }
.st-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.st-tabs button { background: rgba(163,22,22,0.12); border: 1px solid rgba(163,22,22,0.45); color: #e8b4b4; border-radius: 999px; padding: 8px 18px; cursor: pointer; font-size: 15px; }
.st-tabs button.on { background: #a31616; color: #fff; border-color: #d43a3a; }
.atelier { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 74vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(18, 7, 7, 0.98); border-top: 1px solid #a31616; border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.6); transform: translateY(105%); transition: transform 0.28s ease; }
.atelier.open { transform: none; }
.atelier-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(18, 7, 7, 0.98); border-bottom: 1px solid rgba(163,22,22,0.4); }
.atelier-head h2 { margin: 0; font-size: 1.25em; font-family: 'Cinzel', serif; letter-spacing: 1px;
  background: linear-gradient(180deg, #ffedb0, #d4a017 60%, #9a6f0e);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.atelier-head .meta { flex: 1; }
.atelier-head button { background: none; border: none; color: #e8b4b4; font-size: 1.6em; cursor: pointer; line-height: 1; }
.atelier-body { padding-bottom: 24px; }
.atelier .acc { border-bottom: 1px solid rgba(163,22,22,0.25); }
.atelier .acc-head { width: 100%; text-align: left; background: none; border: none; padding: 13px 16px; font-size: 1.05em; font-weight: 700; cursor: pointer; color: #f0caca; }
.atelier .acc-head::after { content: "+"; float: right; color: #d43a3a; font-size: 1.2em; }
.atelier .acc.open .acc-head::after { content: "\2212"; }
.atelier .acc-body { display: none; padding: 2px 16px 18px; }
.atelier .acc.open .acc-body { display: block; }
.atelier .acc-title { padding: 14px 16px 0; margin: 0; color: #f0caca; }
.atelier .st-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.atelier .st-field { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.atelier .st-field.st-grow { flex: 1 1 200px; }
.atelier .st-field > span { font-size: 0.85em; color: #c98a8a; }
.atelier select, .atelier input[type="text"], .atelier input[type="date"], .atelier textarea { background: #2a1212; color: #f3d9d9; border: 1px solid rgba(163,22,22,0.5); border-radius: 10px; padding: 9px 10px; font-size: 15px; max-width: 100%; }
.atelier .st-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.atelier .st-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.atelier .st-btns button:not(.btn) { background: rgba(163,22,22,0.15); border: 1px solid rgba(163,22,22,0.5); color: #e8b4b4; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.atelier .st-btns button:not(.btn).on { background: #a31616; color: #fff; }
.atelier .st-checks { display: flex; gap: 12px; flex-wrap: wrap; color: #e8b4b4; }
.atelier .st-checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.atelier .meta { color: #a06a6a; }
.atelier .st-preview { font-size: 1em; padding: 1px 7px; border: 1px solid currentColor; border-radius: 6px; margin-left: 8px; vertical-align: 1px; min-width: 0; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px 18px; }
.look-card { text-align: left; background: linear-gradient(160deg, rgba(163,22,22,0.18), rgba(60,12,12,0.35)); border: 1px solid rgba(212,58,58,0.45); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: #f0caca; }
.look-card:active { transform: scale(0.97); }
.look-name { display: block; font-weight: 700; font-size: 1em; }
.look-desc { display: block; font-size: 0.82em; opacity: 0.75; margin-top: 2px; }
.st-upload { display: inline-block; padding: 8px 12px; border: 1px dashed rgba(212,58,58,0.6); border-radius: 10px; cursor: pointer; color: #e8b4b4; text-align: center; }
.fmt-bar { position: absolute; z-index: 70; display: flex; gap: 2px; background: #1c0b0b; border: 1px solid #d43a3a; border-radius: 999px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.55); }
.fmt-bar[hidden] { display: none; }
.fmt-bar button { background: none; border: none; color: #f3d9d9; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 15px; white-space: nowrap; }
.fmt-bar button:hover { background: rgba(255,255,255,0.1); }
.sig-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sig-overlay[hidden] { display: none; }
.sig-card { width: min(680px, 100%); padding: 16px; }
.sig-card h3 { margin: 0 0 4px; color: #f0caca; }
#sig-canvas { width: 100%; height: auto; background: #f5efe2; border-radius: 8px; touch-action: none; cursor: crosshair; margin: 10px 0; }
.ls-sig-img { max-height: 72px; max-width: 65%; }
.reading-foot { text-align: center; margin: 20px 0 8px; color: #c98a8a; }
body.is-reading .studio-head-actions, body.is-reading .st-tabs, body.is-reading .atelier { display: none !important; }
body.is-reading .studio-envelope { display: block; }
.st-letter.sealed .st-letter-title { opacity: 0.75; }

/* ---------------------------------------------------------------------------
   The Kingdom — gold & diamond regalia for the crown of the fleet
   --------------------------------------------------------------------------- */
.kingdom-hero { text-align: center; padding: 34px 20px 28px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(58,42,8,0.55), rgba(20,12,4,0.85) 60%, rgba(58,42,8,0.35));
  border: 1px solid rgba(212,175,55,0.55); box-shadow: 0 0 42px rgba(212,175,55,0.12), inset 0 0 60px rgba(212,175,55,0.06); }
.kingdom-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 78%, rgba(255,244,214,0.8), transparent 60%),
    radial-gradient(1px 1px at 32% 66%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,244,214,0.7), transparent 60%); }
.kingdom-crown { font-size: 54px; filter: drop-shadow(0 0 14px rgba(212,175,55,0.65)); }
.kingdom-title { color: #f3d67a !important; text-shadow: 0 0 22px rgba(212,175,55,0.45); letter-spacing: 2px; }
.kingdom-sub { color: #d9c48a !important; }
.kingdom-h2 { color: #e8c95c; letter-spacing: 3px; text-transform: uppercase; font-size: 0.95em; margin: 26px 4px 12px;
  text-shadow: 0 0 12px rgba(212,175,55,0.35); }
.kingdom-court { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kingdom-person { text-align: center; padding: 16px 10px; border: 1px solid rgba(212,175,55,0.4);
  background: linear-gradient(170deg, rgba(46,32,8,0.6), rgba(12,8,3,0.85)); }
.kingdom-role-ico { font-size: 34px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.5)); }
.kingdom-role-ico.kingdom-teal { filter: drop-shadow(0 0 10px rgba(64,224,208,0.55)); }
.kingdom-role-name { color: #f3d67a; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }
.kingdom-role-title { color: #b49b52; font-size: 0.82em; margin-top: 2px; }
.kingdom-vow { border: 1px solid rgba(212,175,55,0.6); padding: 20px 22px;
  background: linear-gradient(170deg, rgba(58,42,8,0.5), rgba(14,10,4,0.9));
  box-shadow: inset 0 0 44px rgba(212,175,55,0.08); }
.kingdom-vow-line { color: #efdfae; font-style: italic; line-height: 1.55; margin: 0 0 12px; }
.kingdom-vow-who { color: #e8c95c; font-style: normal; font-weight: 700; }
.kingdom-vow-seal { text-align: center; color: #f3d67a; font-weight: 700; letter-spacing: 2px; margin: 6px 0 0; }
.kingdom-halls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kingdom-hall { display: block; padding: 16px; border: 1px solid rgba(212,175,55,0.4); border-radius: var(--radius-sm, 12px);
  background: linear-gradient(165deg, rgba(40,28,7,0.55), rgba(10,7,3,0.85)); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.kingdom-hall:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(212,175,55,0.18); }
.kingdom-hall-name { display: block; color: #f3d67a; font-weight: 700; font-size: 1.05em; letter-spacing: 0.5px; }
.kingdom-hall-desc { display: block; color: #c9b478; font-size: 0.86em; margin-top: 4px; line-height: 1.45; }
.kingdom-hall-count { display: block; color: #8f7742; font-size: 0.78em; margin-top: 8px; letter-spacing: 1px; text-transform: uppercase; }
.kingdom-chamber { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px;
  padding: 18px 20px; border: 1px solid rgba(64,224,208,0.45);
  background: linear-gradient(165deg, rgba(8,40,38,0.5), rgba(4,12,11,0.9)); }
.kingdom-chamber-name { color: #7ef0e2; font-weight: 700; letter-spacing: 1px; }
.kingdom-chamber-desc { color: #6aa9a2; font-size: 0.86em; margin-top: 3px; }
.kingdom-chamber-link { flex-shrink: 0; color: #0b1514; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #7ef0e2, #3ec9b8); box-shadow: 0 0 18px rgba(64,224,208,0.35); }
.kingdom-chamber-link:active { transform: scale(0.96); }

/* ==========================================================================
   Per-board liveries (2026-09-20) — admin-chosen accent + banner per board.
   --board-accent is set inline on .board-themed by the board view. Every rule
   below recolors chrome only (headings, borders, glows, dots); body text
   stays --ink on black in every livery — contrast discipline is non-negotiable.
   ========================================================================== */
.board-themed .page-title { color: var(--board-accent); text-shadow: 0 0 16px var(--board-accent); }
.board-themed .forumtable thead th { color: var(--board-accent); border-bottom: 1px solid var(--board-accent); }
.board-themed .new-dot { color: var(--board-accent); text-shadow: 0 0 8px var(--board-accent); }
.board-themed .board-lore { border-color: var(--board-accent); box-shadow: 0 0 18px -6px var(--board-accent); }
.board-themed .board-lore-icon { filter: drop-shadow(0 0 6px var(--board-accent)); }
.board-themed .sticky-tag, .board-themed .served-tag, .board-themed .ballot-tag { border-color: var(--board-accent); }
.board-themed .row-between .btn { border-color: var(--board-accent); box-shadow: 0 0 12px -4px var(--board-accent); }
.board-banner { position: relative; border-radius: var(--radius); overflow: hidden; margin: 0 0 16px;
  border: 1px solid var(--board-accent, var(--red-edge));
  box-shadow: 0 0 26px -10px var(--board-accent, var(--red-bright)); }
.board-banner img { display: block; width: 100%; height: 190px; object-fit: cover; }
.board-banner-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,8,.05) 0%, rgba(5,5,8,.45) 55%, rgba(5,5,8,.85) 100%); }
@media (max-width: 640px) { .board-banner img { height: 130px; } }

/* ==========================================================================
   PROVOLTA RADIO — Winamp3-era dark skin, below her chamber chat.
   Black chrome, green LED display, real 10-band equalizer, dark playlist
   editor, dedication deck. Teal-glow accents for the Oracle.
   ========================================================================== */
.pv-radio-panel { margin-top: 14px; }
.wa {
  max-width: 360px; margin: 0 auto;
  background: linear-gradient(to bottom, #313845 0%, #1b2029 6%, #0d1016 100%);
  border: 2px solid; border-color: #8a93a5 #05070a #05070a #8a93a5;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6), 0 0 28px rgba(125,249,232,0.10);
  font-family: "Courier New", monospace; color: #c8ccd4;
  user-select: none; -webkit-user-select: none;
}
.wa-titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(to bottom, #454e60 0%, #232833 50%, #12151c 100%);
  color: #e8ecf2; font-weight: bold; font-size: 13px; letter-spacing: 4px;
  padding: 4px 4px 4px 8px; text-shadow: 1px 1px 0 #000;
  justify-content: center; position: relative;
}
.wa-titlebar .wa-title { flex: 0; }
.wa-logo { color: #7df9e8; text-shadow: 0 0 8px rgba(125,249,232,0.9); }
.wa-tbtns { position: absolute; right: 4px; display: flex; gap: 2px; }
.wa-tbtns button {
  width: 20px; height: 16px; font-size: 11px; line-height: 1; cursor: pointer;
  background: linear-gradient(to bottom, #6a7488, #3a4152);
  border: 1px solid; border-color: #aab2c4 #05070a #05070a #aab2c4; color: #e8ecf2;
  padding: 0;
}
.wa-tbtns button:active { border-color: #05070a #aab2c4 #aab2c4 #05070a; }
.wa-live { font-size: 9px; letter-spacing: 1px; color: #7dff9a; font-family: "Courier New", monospace; align-self: center; margin-right: 4px; }
.wa-live.off { color: #5a6272; }
.wa-tbtns .live-dot { align-self: center; margin-right: 4px; }
.wa-tune { width: 100%; margin: 6px 0; }
.wa-dedbtn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; }
.wa-dedbtn:hover .n { color: #7dff9a; }
.wa-main { padding: 8px; }
.wa-screen {
  background: #020304; border: 2px solid; border-color: #05070a #8a93a5 #8a93a5 #05070a;
  padding: 5px 8px; overflow: hidden; white-space: nowrap; position: relative;
  box-shadow: inset 0 0 18px rgba(70,255,122,0.06);
}
.wa-marquee { overflow: hidden; }
.wa-marquee span {
  display: inline-block; white-space: nowrap; color: #46ff7a;
  font-size: 14px; font-weight: bold; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(70,255,122,0.75);
  animation: wa-scroll 12s linear infinite;
}
@keyframes wa-scroll { 0% { transform: translateX(100%);} 100% { transform: translateX(-100%);} }
.wa-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; }
.wa-meta .num { color: #46ff7a; font-weight: bold; text-shadow: 0 0 6px rgba(70,255,122,0.6); }
.wa-meta .lbl { color: #8a93a5; }
.wa-meta .spacer { flex: 1; }
.wa-meta .mono { color: #5a6272; }
.wa-meta .stereo { color: #46ff7a; font-weight: bold; text-shadow: 0 0 6px rgba(70,255,122,0.6); }
.wa-mini-btns { display: flex; gap: 4px; }
.wa-mini-btns button {
  font-family: "Courier New", monospace; font-size: 10px; font-weight: bold; cursor: pointer;
  color: #1a1e26; padding: 2px 8px;
  background: linear-gradient(to bottom, #dfe4ec, #aab2c4);
  border: 2px solid; border-color: #f2f5fa #05070a #05070a #f2f5fa;
}
.wa-mini-btns button:active, .wa-mini-btns button.lit {
  border-color: #05070a #f2f5fa #f2f5fa #05070a; color: #0a6e5f;
}
.wa-mid { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.wa-leftcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-analyzer {
  width: 100%; height: 46px; background: #020304; display: block;
  border: 2px solid; border-color: #05070a #8a93a5 #8a93a5 #05070a;
}
.wa-time {
  background: #020304; color: #46ff7a; font-size: 30px; font-weight: bold;
  display: flex; align-items: center; justify-content: center; padding: 2px 10px;
  border: 2px solid; border-color: #05070a #8a93a5 #8a93a5 #05070a;
  text-shadow: 0 0 10px rgba(70,255,122,0.8); letter-spacing: 3px;
  box-shadow: inset 0 0 18px rgba(70,255,122,0.06);
}
.wa-sliders { display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: 9px; color: #8a93a5; }
.wa-sliders label { display: flex; align-items: center; gap: 5px; font-weight: bold; letter-spacing: 1px; }
.wa-sliders input[type="range"] { width: 70px; }
#wa-vol { accent-color: #ff9a3c; }
#wa-bal { accent-color: #46ff7a; }
.wa-controls { display: flex; gap: 5px; margin-top: 8px; }
.wa-btn {
  flex: 1; height: 32px; font-size: 15px; cursor: pointer; color: #232833;
  background: linear-gradient(to bottom, #f2f5fa 0%, #c6cddb 50%, #8a93a5 100%);
  border: 2px solid; border-color: #ffffff #05070a #05070a #ffffff;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.wa-btn:active, .wa-btn.lit {
  border-color: #05070a #ffffff #ffffff #05070a;
  background: linear-gradient(to bottom, #8a93a5 0%, #c6cddb 100%);
}
.wa-btn.lit { color: #0a6e5f; }
.wa-btn.wide { flex: 1.6; font-size: 10px; font-weight: bold; font-family: "Courier New", monospace; letter-spacing: 1px; }
/* Equalizer window */
.wa-eq { margin-top: 8px; border-top: 2px groove #3a4152; padding-top: 8px; }
.wa-eq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wa-eq-title { font-size: 11px; font-weight: bold; letter-spacing: 3px; color: #c8ccd4; }
.wa-eq-curve { flex: 1; height: 34px; background: #020304; border: 1px solid #05070a; min-width: 0; }
.wa-presets { font-family: "Courier New", monospace; font-size: 10px; font-weight: bold; cursor: pointer;
  color: #1a1e26; padding: 3px 10px; background: linear-gradient(to bottom, #dfe4ec, #aab2c4);
  border: 2px solid; border-color: #f2f5fa #05070a #05070a #f2f5fa; }
.wa-eq-bands { display: flex; gap: 2px; justify-content: space-between; }
.wa-band { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wa-band .db { font-size: 8px; color: #46ff7a; height: 10px; }
.wa-band input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: slider-vertical;
  width: 22px; height: 92px; accent-color: #46ff7a; cursor: pointer;
}
.wa-band .freq { font-size: 8px; color: #8a93a5; }
/* Dedication deck */
.wa-deck { margin-top: 8px; border-top: 2px groove #3a4152; padding-top: 8px; }
.wa-deck-title { font-size: 10px; font-weight: bold; letter-spacing: 3px; margin-bottom: 4px; color: #7df9e8;
  text-shadow: 0 0 8px rgba(125,249,232,0.5); }
.wa-deck-screen iframe { display: block; width: 100%; height: 190px; border: 2px solid; border-color: #05070a #8a93a5 #8a93a5 #05070a; background: #000; }
/* Playlist window — dark, green text, like the old days */
.wa-playlist { margin-top: 8px; border-top: 2px groove #3a4152; padding-top: 8px; }
.wa-pl-title { font-size: 10px; font-weight: bold; letter-spacing: 3px; margin-bottom: 4px; color: #c8ccd4; }
.wa-pl { list-style: none; margin: 0; padding: 0; max-height: 132px; overflow-y: auto;
  background: #020304; border: 2px solid; border-color: #05070a #8a93a5 #8a93a5 #05070a;
  box-shadow: inset 0 0 18px rgba(70,255,122,0.05); }
.wa-pl li {
  font-size: 12px; padding: 4px 8px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: #46ff7a;
  text-shadow: 0 0 4px rgba(70,255,122,0.35);
}
.wa-pl li .n { color: #46ff7a; font-weight: bold; margin-right: 6px; }
.wa-pl li.sel { background: #0a369a; color: #fff; text-shadow: none; }
.wa-pl li.sel .n { color: #fff; }
.wa-pl li .tag { font-size: 9px; opacity: 0.8; margin-left: 8px; color: #7df9e8; }
.wa-pl li.sel .tag { color: #c8ccd4; }
.wa-note { font-size: 9px; color: #5a6272; margin-top: 4px; font-family: "Courier New", monospace; }
@media (prefers-reduced-motion: reduce) { .wa-marquee span { animation: none; } }