@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
 * Comments v5 — animekai-style flat layout (body #0b1622).
 *
 * Design goals (matches anikai.to closely):
 *   - Inter typography (scoped, won't leak to rest of the site).
 *   - No outer panel card. The section blends straight into the page background.
 *   - No per-comment card. Hairline divider between top-level comments only.
 *   - No "focus" highlight stripe / no hover background overlay flash.
 *   - Inline icon+count action bar in animekai order: 👍 N · 👎 N · ↩ Reply · ⋯ More
 *   - Composer: format toolbar (B/I/S/Quote/Spoil) + emoji/GIF side rail.
 *   - Markdown shortcuts: **bold** _italic_ ~~strike~~ ||spoil|| > quote
 *     keyboard: Ctrl+B, Ctrl+I, Ctrl+Shift+X, Ctrl+Shift+P, Ctrl+Shift+.
 *   - Reply tree = single hairline guide with 32px avatars and dashed sibling separator.
 *   - "View N replies" / "Hide N replies" is a small underlined text link,
 *     RIGHT-aligned under the comment.
 *   - Top-level "View more" pager is a centered pill at the bottom of the list.
 *   - Avatar always has a gradient + initial fallback so broken <img> never shows.
 *
 * Theme tokens (scoped to .block_area-comment so we don't fight the rest of the site):
 *   --cm-body     page bg (#0b1622)
 *   --cm-text     body text
 *   --cm-mute     secondary text
 *   --cm-mute-2   tertiary text (timestamps)
 *   --cm-line     hairline divider
 *   --cm-soft     subtle surface (composer / hover)
 *   --cm-acc      primary accent (purple — brand)
 *   --cm-acc2     secondary accent (cyan — watch accent)
 *   --cm-good     upvote
 *   --cm-bad      downvote
 *   --cm-danger   destructive
 */

#comments.block_area-comment,
.block_area.block_area-comment {
  --cm-body: #0b1622;
  --cm-text: rgba(255, 255, 255, 0.92);
  --cm-mute: rgba(255, 255, 255, 0.55);
  --cm-mute-2: rgba(255, 255, 255, 0.38);
  --cm-line: rgba(255, 255, 255, 0.07);
  --cm-line-strong: rgba(255, 255, 255, 0.13);
  --cm-soft: rgba(255, 255, 255, 0.035);
  --cm-soft-hov: rgba(255, 255, 255, 0.06);
  --cm-acc: #7c4dff;
  --cm-acc-rgb: 124, 77, 255;
  --cm-acc2: #00d4ff;
  --cm-acc2-rgb: 0, 212, 255;
  --cm-good: #5ed3a3;
  --cm-bad: #ff8a8a;
  --cm-danger: #ff5b6e;

  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem 0 1.25rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scope Inter to everything inside the comments section */
.block_area-comment,
.block_area-comment * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.block_area-comment .fa,
.block_area-comment .fas,
.block_area-comment .far,
.block_area-comment .fab,
.block_area-comment [class^="fa-"],
.block_area-comment [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free" !important;
}

/* Kill Bootstrap's .btn focus blue ring inside the comments section
   (the "sort by" tab glitch). */
.block_area-comment .btn,
.block_area-comment .btn:focus,
.block_area-comment .btn:active,
.block_area-comment .btn.focus,
.block_area-comment a.btn,
.block_area-comment button.btn {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.block_area-comment .btn:focus-visible {
  outline: 2px solid rgba(var(--cm-acc-rgb), 0.5) !important;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Section heading
   ------------------------------------------------------------------------- */
.block_area-comment .block_area-header {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.block_area-comment .block_area-header .cat-heading {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.block_area-comment .block_area-header .cat-heading::before {
  content: "";
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cm-acc), var(--cm-acc2));
}

/* -------------------------------------------------------------------------
   Sub-header strip (episode pill · count · sort tabs)
   ------------------------------------------------------------------------- */
.block_area-comment .sc-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 1rem;
  padding: 0 0 0.85rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cm-line);
  border-radius: 0;
}

.block_area-comment .sc-header > div {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.block_area-comment .sc-header .sc-h-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  font-size: 13px;
  color: var(--cm-mute);
  line-height: 1;
}

.block_area-comment .sc-header .sc-h-title i {
  color: var(--cm-mute);
  font-size: 14px;
}

.block_area-comment .sc-header .sc-h-title span {
  color: var(--cm-mute);
  font-weight: 500;
  font-size: 13px;
}

.block_area-comment .sc-header .sc-h-from,
.block_area-comment .sc-header .sc-h-sort {
  position: relative;
}

/* Bootstrap dropdowns rely on Popper for inline positioning. Inside the
   flex header strip we sometimes get a stale `transform` that drags the
   menu hundreds of pixels down. Force a deterministic position relative
   to the trigger so the menu always sits flush right below its button. */
.block_area-comment .sc-header .dropdown-menu,
.block_area-comment .sc-header .dropdown-menu-model {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
  inset: auto auto auto auto;
  margin-top: 6px !important;
  z-index: 1050;
  min-width: 170px;
}

.block_area-comment .sc-header .sc-h-from .dropdown-menu {
  left: 0 !important;
  right: auto !important;
}

.block_area-comment .sc-header .sc-h-sort .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

.block_area-comment .sc-header .sc-h-from::before {
  display: none !important;
}

.block_area-comment .sc-header .sc-h-from .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cm-text);
  background: var(--cm-soft);
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.block_area-comment .sc-header .sc-h-from .btn:hover,
.block_area-comment .sc-header .sc-h-from .btn[aria-expanded="true"] {
  background: rgba(var(--cm-acc-rgb), 0.14);
  border-color: rgba(var(--cm-acc-rgb), 0.35);
  color: #fff;
}

.block_area-comment .sc-header .sc-h-sort {
  margin-left: auto !important;
}

.block_area-comment .sc-header .sc-h-sort .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cm-mute);
  background: transparent;
  border: 1px solid transparent !important;
  border-radius: 6px;
  line-height: 1.2;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.block_area-comment .sc-header .sc-h-sort .btn:hover,
.block_area-comment .sc-header .sc-h-sort .btn[aria-expanded="true"] {
  color: #fff;
  background: var(--cm-soft);
  border-color: var(--cm-line) !important;
}

.block_area-comment .sc-header .sc-h-sort .btn i {
  font-size: 10px;
  opacity: 0.65;
}

/* -------------------------------------------------------------------------
   Universal avatar (with gradient + initial fallback)
   ------------------------------------------------------------------------- */
.block_area-comment .user-avatar {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cm-acc) 0%, var(--cm-acc2) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  flex-shrink: 0;
}

.block_area-comment .user-avatar::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 0;
}

.block_area-comment .user-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------------
   Composer (top-level + reply form share this base)
   ------------------------------------------------------------------------- */
.block_area-comment .comment-input {
  position: relative;
  padding-left: 52px;
  margin-bottom: 1.5rem;
}

.block_area-comment .comment-input .user-avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 16px;
}

.block_area-comment .comment-input .user-name {
  color: var(--cm-mute);
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}

.block_area-comment .comment-input .user-name .link-highlight {
  color: var(--cm-acc2) !important;
  font-weight: 600;
}

.block_area-comment .comment-input .preform.preform-dark {
  position: relative;
}

.block_area-comment .comment-input .comment-container {
  display: flex;
  gap: 0.35rem;
  background: var(--cm-soft);
  border: 1px solid var(--cm-line);
  border-radius: 10px;
  padding: 0.35rem 0.45rem 0.35rem 0.55rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.block_area-comment .comment-input .comment-container:focus-within {
  background: var(--cm-soft-hov);
  border-color: rgba(var(--cm-acc-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--cm-acc-rgb), 0.1);
}

.block_area-comment .comment-input .cm-composer-grow {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Format toolbar inside the composer
   (B / I / S / Quote / Spoil — animekai-style row of small ghost buttons) */
.block_area-comment .cm-fmt-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 0 4px;
  flex-wrap: wrap;
}

.block_area-comment .cm-fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: var(--cm-mute);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  padding: 0;
}

.block_area-comment .cm-fmt-btn:hover,
.block_area-comment .cm-fmt-btn:focus {
  background: var(--cm-soft);
  color: #fff;
  outline: 0;
  box-shadow: none;
}

.block_area-comment .cm-fmt-btn:active,
.block_area-comment .cm-fmt-btn.is-active {
  background: rgba(var(--cm-acc-rgb), 0.22);
  color: #fff;
}

.block_area-comment .cm-fmt-btn .cm-fmt-i {
  font-style: italic;
}

.block_area-comment .cm-fmt-btn .cm-fmt-s {
  text-decoration: line-through;
}

.block_area-comment .cm-fmt-btn i {
  font-size: 11px;
  opacity: 0.9;
}

/* =======================================================================
 * >>> TIMESTAMP BLOCK START <<<  (watch {{mm:ss}} — pairs with comment.js)
 * ======================================================================= */
.cm-body .cm-ts,
.block_area-comment .cm-ts {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(34, 200, 240, 0.35);
  background: rgba(34, 200, 240, 0.12);
  color: #7ad4f5;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  cursor: default;
  vertical-align: baseline;
}
body.cm-player-ready .cm-body .cm-ts:not(.cm-ts--bad),
body.cm-player-ready .block_area-comment .cm-ts:not(.cm-ts--bad) {
  cursor: pointer;
}
body.cm-player-ready .cm-body .cm-ts:not(.cm-ts--bad):hover,
body.cm-player-ready .block_area-comment .cm-ts:not(.cm-ts--bad):hover {
  background: rgba(34, 200, 240, 0.22);
  border-color: rgba(34, 200, 240, 0.55);
  color: #fff;
}
.cm-body .cm-ts--bad,
.block_area-comment .cm-ts--bad {
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 80, 80, 0.12);
  color: #ff9b9b;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.9;
}
.block_area-comment .cm-fmt-btn.cm-fmt-ts {
  color: var(--cm-mute);
}

.block_area-comment .preform.preform-dark textarea.form-control {
  background: transparent !important;
  color: var(--cm-text) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0.4rem !important;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: none;
  min-height: 36px;
  height: auto;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.block_area-comment .preform.preform-dark textarea.form-control::placeholder {
  color: var(--cm-mute);
  opacity: 1;
}

.block_area-comment .ci-emo {
  display: flex;
  align-self: flex-end;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0 0.25rem;
  width: auto;
  flex-shrink: 0;
}

.block_area-comment .ci-emo .cb-icon {
  width: 30px;
  height: 30px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  color: var(--cm-mute);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.block_area-comment .ci-emo .cb-icon:hover,
.block_area-comment .ci-emo .cb-icon:focus {
  background: rgba(var(--cm-acc-rgb), 0.16);
  color: #fff;
}

.block_area-comment .ci-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.block_area-comment .ci-buttons .ci-b-left {
  float: none;
  display: flex;
  gap: 0.35rem;
}

.block_area-comment .ci-buttons .ci-b-right {
  float: none;
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.block_area-comment .ci-buttons .cb-li {
  float: none;
}

.block_area-comment .ci-buttons .cm-error {
  width: 100%;
  font-size: 0.78rem;
  background: rgba(255, 91, 110, 0.1);
  color: var(--cm-danger);
  border: 1px solid rgba(255, 91, 110, 0.28);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  margin: 0;
}

.block_area-comment .ci-buttons .btn {
  border: none !important;
  box-shadow: none !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 7px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.block_area-comment .ci-buttons .btn:disabled,
.block_area-comment .ci-buttons .btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.block_area-comment .ci-buttons .btn.btn-spoil {
  color: var(--cm-mute);
  background: transparent;
  padding: 0.32rem 0;
  font-weight: 500;
}

.block_area-comment .ci-buttons .btn.btn-spoil i {
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cm-mute);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.35rem 0 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.block_area-comment .ci-buttons .btn.btn-spoil.active,
.block_area-comment .ci-buttons .btn.btn-spoil:hover {
  color: var(--cm-text);
}

.block_area-comment .ci-buttons .btn.btn-spoil.active i {
  background: var(--cm-danger);
  color: #fff;
}

.block_area-comment .ci-buttons .btn.btn-secondary {
  background: transparent !important;
  color: var(--cm-mute) !important;
}

.block_area-comment .ci-buttons .btn.btn-secondary:hover {
  background: var(--cm-soft) !important;
  color: var(--cm-text) !important;
}

.block_area-comment .ci-buttons .btn-primary {
  background: #26a3d6 !important;
  color: #fff !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.block_area-comment .ci-buttons .btn-primary:hover {
  filter: brightness(1.12);
}

/* -------------------------------------------------------------------------
   Comment list — FLAT (no per-comment cards), hairline between top-level
   No focus stripe, no hover overlay flash.
   ------------------------------------------------------------------------- */
.block_area-comment .list-comment {
  margin-top: 0.25rem;
}

.block_area-comment .cw_list .cw_l-line {
  position: relative;
  padding: 0.85rem 0 0.85rem 52px;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  /* border-bottom: 1px solid var(--cm-line) !important; */
  /* border-radius: 0; */
  font-size: 0.9rem;
}

.block_area-comment .cw_list > .cw_l-line:last-child {
  border-bottom: 0 !important;
}

/* Hover stays flat; deep-linked / replied-to comment gets a soft highlight
   so the reader can spot it after scrollTo(). */
.block_area-comment .cw_list > .cw_l-line:hover {
  background: transparent;
}

.block_area-comment .cw_list .cw_l-line.comment-focus {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(102, 161, 255, 0.10) 0%,
    rgba(102, 161, 255, 0.04) 60%,
    transparent 100%
  );
  border-radius: 10px;
  animation: cmCommentFlash 2.4s ease-out 1;
}

.block_area-comment .cw_list .cw_l-line.comment-focus::before {
  content: "";
  display: block;
  position: absolute;
  left: -2px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: rgba(102, 161, 255, 0.75);
  box-shadow: 0 0 12px rgba(102, 161, 255, 0.45);
}

@keyframes cmCommentFlash {
  0%   { background-color: rgba(102, 161, 255, 0.22); }
  60%  { background-color: rgba(102, 161, 255, 0.10); }
  100% { background-color: transparent; }
}

.block_area-comment .cw_list .cw_l-line > .user-avatar {
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 15px;
}

.block_area-comment .cw_l-line .info {
  min-width: 0;
}

/* Pinned badge */
.block_area-comment .cw_l-line .ipinned {
  margin: 0 0 0.35rem;
}

.block_area-comment .cw_l-line .ipinned span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 1px 7px;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--cm-acc), var(--cm-acc2));
  border-radius: 999px;
}

.block_area-comment .cw_l-line .ipinned i {
  font-size: 0.6rem;
}

/* Author row */
.block_area-comment .cw_l-line .ihead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin-bottom: 0.1rem;
}

.block_area-comment .cw_l-line .ihead > div {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.block_area-comment .cw_l-line .ihead .user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  letter-spacing: 0;
}

.block_area-comment .cw_l-line .ihead .user-name:hover {
  color: var(--cm-acc2) !important;
}

.block_area-comment .cw_l-line .ihead .user-name.is-level-a {
  color: #ffb526 !important;
}

.block_area-comment .cw_l-line .ihead .user-name span:not(.badg-level):not(.badg-aura) {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  background: rgba(var(--cm-acc-rgb), 0.18);
  border: 1px solid rgba(var(--cm-acc-rgb), 0.4);
  color: #c4b2ff;
  border-radius: 4px;
}

/* anikai puts "1 day ago" on its own line under the username; mimic by
 * flexing the ihead to wrap after the username on small / when needed. */
.block_area-comment .cw_l-line .ihead .time {
  font-size: 11px;
  color: var(--cm-mute-2);
  margin-left: 0 !important;
  flex-basis: 100%;
  margin-top: 0.05rem;
  font-weight: 400;
}

.block_area-comment .cw_l-line .ihead .eps {
  font-size: 0.7rem;
  color: var(--cm-mute);
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Body */
.block_area-comment .cw_l-line .ibody {
  color: var(--cm-text);
  margin: 0.35rem 0 0.35rem;
}

.block_area-comment .cw_l-line .ibody .cm-body,
.block_area-comment .cw_l-line .ibody .cm-body p,
.block_area-comment .cw_l-line .ibody .cm-body span {
  color: var(--cm-text) !important;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 400;
}

.block_area-comment .cw_l-line .ibody .cm-body {
  display: block;
}

/* Mention pill (@username) */
.block_area-comment .cw_l-line .cm-body span.tag-name {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  margin-right: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cm-acc2) !important;
  background: rgba(var(--cm-acc2-rgb), 0.1);
  border: 1px solid rgba(var(--cm-acc2-rgb), 0.25);
  border-radius: 4px;
  line-height: 1.4;
  vertical-align: baseline;
}

/* Staff-wide @mods mention */
.block_area-comment .cw_l-line .cm-body span.tag-name.tag-name-mods {
  color: #f5b942 !important;
  background: rgba(245, 185, 66, 0.12);
  border-color: rgba(245, 185, 66, 0.35);
}

/* Spoiler comment */
.block_area-comment .cw_l-line .ibody.is-spoil {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--cm-line);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}

.block_area-comment .cw_l-line .ibody.is-spoil > .cm-body {
  filter: blur(5px);
  max-height: 5em;
  overflow: hidden;
  user-select: none;
}

.block_area-comment .cw_l-line .ibody.is-spoil > .cm-body * {
  color: rgba(255, 255, 255, 0.85) !important;
}

.block_area-comment .cw_l-line .ibody .show-spoil {
  margin: 0.4rem 0 0;
}

.block_area-comment .cw_l-line .ibody .show-spoil .btn {
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--cm-acc-rgb), 0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--cm-acc-rgb), 0.35) !important;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.block_area-comment .cw_l-line .ibody .show-spoil .btn::before {
  content: "\f06e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
}

.block_area-comment .cw_l-line .ibody .show-spoil .btn:hover {
  background: rgba(var(--cm-acc-rgb), 0.28) !important;
  border-color: rgba(var(--cm-acc-rgb), 0.55) !important;
}

/* -------------------------------------------------------------------------
   Action bar — inline ghost icons, order: 👍 N · 👎 N · Reply · More
   (HTML order is Reply / Like / Dislike / More — we reorder via flex)
   ------------------------------------------------------------------------- */
.block_area-comment .cw_l-line .ibottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
}

.block_area-comment .cw_l-line .ibottom .ib-li {
  display: inline-flex;
  position: relative;
  margin: 0;
}

.block_area-comment .cw_l-line .ibottom .ib-like { order: 1; }
.block_area-comment .cw_l-line .ibottom .ib-dislike { order: 2; }
.block_area-comment .cw_l-line .ibottom .ib-reply { order: 3; }
.block_area-comment .cw_l-line .ibottom .ib-li:not(.ib-like):not(.ib-dislike):not(.ib-reply) { order: 4; }

.block_area-comment .cw_l-line .ibottom .ib-li .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cm-mute) !important;
  background: transparent;
  border: 0;
  box-shadow: none !important;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease;
  cursor: pointer;
}

.block_area-comment .cw_l-line .ibottom .ib-li .btn i {
  font-size: 0.88rem;
  opacity: 0.85;
  vertical-align: -0.05em;
}

.block_area-comment .cw_l-line .ibottom .ib-li .btn:hover {
  background: var(--cm-soft);
  color: #fff !important;
}

.block_area-comment .cw_l-line .ibottom .ib-reply .btn:hover {
  color: var(--cm-acc2) !important;
  background: rgba(var(--cm-acc2-rgb), 0.08);
}

/* Vote count beside icon */
.block_area-comment .cw_l-line .ibottom .ib-like .btn .value,
.block_area-comment .cw_l-line .ibottom .ib-dislike .btn .value {
  font-weight: 600;
  font-size: 12px;
  min-width: 0.5rem;
  text-align: left;
  color: inherit;
}

.block_area-comment .cw_l-line .ibottom .ib-like .btn:hover {
  color: #26a3d6 !important;
  background: rgba(94, 211, 163, 0.08);
}

.block_area-comment .cw_l-line .ibottom .ib-dislike .btn:hover {
  color: var(--cm-bad) !important;
  background: rgba(255, 138, 138, 0.08);
}

.block_area-comment .cw_l-line .ibottom .ib-like .btn.active {
  color: #26a3d6 !important;
  background: rgba(94, 211, 163, 0.12);
}

.block_area-comment .cw_l-line .ibottom .ib-dislike .btn.active {
  color: var(--cm-bad) !important;
  background: rgba(255, 138, 138, 0.1);
}

.block_area-comment .cw_l-line .ibottom .ib-like .btn.active i,
.block_area-comment .cw_l-line .ibottom .ib-dislike .btn.active i {
  font-weight: 900;
}

/* -------------------------------------------------------------------------
   Replies (nested) — single thin guide line
   ------------------------------------------------------------------------- */
.block_area-comment .cw_l-line .replies {
  position: relative;
  margin: 0.55rem 0 0;
  padding: 0 0 0 0.85rem;
}

.block_area-comment .cw_l-line .replies::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0;
  bottom: 0.6rem;
  width: 1px;
  background: var(--cm-line-strong);
}

.block_area-comment .cw_l-line .replies .cw_l-line {
  padding: 0.55rem 0 0.55rem 42px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  font-size: 0.88rem;
}

.block_area-comment .cw_l-line .replies .cw_l-line + .cw_l-line {
  border-top: 1px dashed var(--cm-line) !important;
}

.block_area-comment .cw_l-line .replies .cw_l-line > .user-avatar {
  left: 0;
  top: 0.65rem;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 12px;
}

.block_area-comment .cw_l-line .replies .cw_l-line .ihead .user-name {
  font-size: 0.82rem;
}

.block_area-comment .cw_l-line .replies .cw_l-line .ibody .cm-body {
  font-size: 0.86rem;
}

/* -------------------------------------------------------------------------
   "View N replies" / "Hide N replies" toggle — animekai-style text link,
   RIGHT-aligned (user request).
   ------------------------------------------------------------------------- */
.block_area-comment .rep-more.rep-in {
  margin: 0.25rem 0 0;
  text-align: left;
}

.block_area-comment .rep-more.rep-in .cm-btn-show-rep {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cm-mute);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  cursor: pointer;
}

.block_area-comment .rep-more.rep-in .cm-btn-show-rep:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.block_area-comment .rep-more.rep-in .cm-btn-show-rep i {
  font-size: 0.68rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.block_area-comment .rep-more.rep-in .cm-btn-show-rep.active i {
  transform: rotate(180deg);
}

.block_area-comment .rep-in .btn span::before {
  content: "View ";
}

.block_area-comment .rep-in .cm-btn-show-rep.active span::before {
  content: "Hide ";
}

/* Top-level "View more" pager — centered pill (the only centered control) */
.block_area-comment .list-comment > .rep-more {
  margin-top: 0.9rem;
  text-align: center;
}

.block_area-comment #cm-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cm-text);
  background: var(--cm-soft);
  border: 1px solid var(--cm-line);
  border-radius: 999px;
  text-decoration: none;
}

.block_area-comment #cm-view-more:hover {
  background: var(--cm-soft-hov);
  color: #fff;
  border-color: var(--cm-line-strong);
  text-decoration: none;
}

/* Reply form inside a comment */
.block_area-comment .comment-input.is-reply {
  padding-left: 40px;
  margin: 0.55rem 0 0;
}

.block_area-comment .comment-input.is-reply .user-avatar {
  width: 30px;
  height: 30px;
  top: 0.25rem;
  font-size: 12px;
}

.block_area-comment .comment-input.is-reply .preform.preform-dark textarea.form-control {
  min-height: 36px;
}

/* -------------------------------------------------------------------------
   More dropdown
   ------------------------------------------------------------------------- */
.block_area-comment .dropdown-menu-model {
  background: #131e2e;
  border: 1px solid var(--cm-line-strong);
  border-radius: 10px;
  padding: 0.3rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  margin-top: 6px;
  min-width: 170px;
}

.block_area-comment .dropdown-menu-model .dropdown-item {
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  color: var(--cm-text);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.block_area-comment .dropdown-menu-model .dropdown-item:hover,
.block_area-comment .dropdown-menu-model .dropdown-item:active,
.block_area-comment .dropdown-menu-model .dropdown-item:focus {
  background: rgba(var(--cm-acc-rgb), 0.18);
  color: #fff;
}

.block_area-comment .dropdown-menu-model .dropdown-item.active {
  background: rgba(var(--cm-acc-rgb), 0.28);
  color: #fff;
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Auto-spoil chips (URL hidden / profanity mask) — compact inline
   ------------------------------------------------------------------------- */
.cm-body .cm-auto-spoil {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: baseline;
  margin: 0 0.08rem;
  padding: 0 0.4rem;
  height: 1.45em;
  border-radius: 5px;
  background: rgba(var(--cm-acc-rgb, 124, 77, 255), 0.1);
  border: 1px solid rgba(var(--cm-acc-rgb, 124, 77, 255), 0.25);
  line-height: 1;
  font-size: 0.85em;
  max-width: 100%;
}

.cm-body .cm-auto-spoil--url {
  background: rgba(255, 138, 138, 0.08);
  border-color: rgba(255, 138, 138, 0.25);
}

.cm-body .cm-auto-spoil-mask,
.cm-body .cm-auto-spoil-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  font-weight: 600;
}

.cm-body .cm-auto-spoil--url .cm-auto-spoil-label::before {
  content: "\f0c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.65;
}

.cm-body .cm-auto-spoil-toggle {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 0.4rem;
  height: 1.15em;
  line-height: 1.15em;
  color: #fff !important;
  background: rgba(var(--cm-acc-rgb, 124, 77, 255), 0.42);
  border: none;
  border-radius: 4px;
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cm-body .cm-auto-spoil--url .cm-auto-spoil-toggle {
  background: rgba(255, 138, 138, 0.42);
}

.cm-body .cm-auto-spoil-toggle:hover {
  filter: brightness(1.2);
}

.cm-body .cm-auto-spoil-reveal {
  display: inline-block;
  max-width: 100%;
  font-size: 0.84rem;
  word-break: break-all;
  color: rgba(255, 255, 255, 0.9);
}

.cm-body .cm-auto-spoil.is-open {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  padding: 0.1rem 0.45rem;
  height: auto;
}

.cm-body .cm-auto-spoil.is-open .cm-auto-spoil-mask,
.cm-body .cm-auto-spoil.is-open .cm-auto-spoil-label {
  display: none;
}

/* -------------------------------------------------------------------------
   Embedded GIF (trusted host)
   ------------------------------------------------------------------------- */
.cm-gif-wrap {
  display: block;
  margin: 0.45rem 0 0.2rem;
  max-width: 100%;
}

.cm-embed-gif {
  display: block;
  max-width: min(100%, 360px);
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--cm-line-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------
   Emoji picker + GIF panel popovers (floated; outside .block_area-comment)
   ------------------------------------------------------------------------- */
.emoji-picker {
  position: fixed;
  z-index: 2147482000 !important;
  display: none;
  min-width: 260px;
  max-width: min(92vw, 340px);
  max-height: min(420px, 55vh);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.emoji-picker.cm-emoji-open {
  display: block !important;
  width: min(92vw, 340px) !important;
  height: min(420px, 55vh) !important;
  min-height: 260px !important;
  --background: #0f1a28;
  --border-color: rgba(255, 255, 255, 0.08);
  --button-hover-background: rgba(124, 77, 255, 0.28);
  --indicator-color: #7c4dff;
  --input-font-color: #fff;
  --input-border-color: rgba(255, 255, 255, 0.12);
  --input-placeholder-color: rgba(255, 255, 255, 0.45);
  --outline-color: #7c4dff;
}

.cm-gif-panel {
  position: fixed;
  z-index: 2147482001;
  width: min(92vw, 360px);
  max-height: min(70vh, 420px);
  background: #0f1a28;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.cm-gif-panel.cm-gif-open {
  display: flex;
}

.cm-gif-panel .cm-gif-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cm-gif-panel .cm-gif-head input {
  flex: 1;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.84rem;
  padding: 0.4rem 0.55rem;
  outline: none;
}

.cm-gif-panel .cm-gif-head input:focus {
  border-color: rgba(124, 77, 255, 0.55);
}

.cm-gif-panel .cm-gif-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.cm-gif-panel .cm-gif-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.cm-gif-panel .cm-gif-grid {
  padding: 0.5rem;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cm-gif-panel .cm-gif-tile {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  aspect-ratio: 1;
  transition: transform 0.15s ease, outline-color 0.15s ease;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.cm-gif-panel .cm-gif-tile:hover {
  transform: scale(1.03);
  outline-color: rgba(124, 77, 255, 0.5);
}

.cm-gif-panel .cm-gif-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-gif-panel .cm-gif-msg {
  padding: 0.75rem;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Loading shim
   ------------------------------------------------------------------------- */
.block_area-comment .loading-absolute {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 22, 34, 0.55);
  border-radius: 10px;
  z-index: 3;
}

.block_area-comment .loading-absolute .loading {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--cm-acc2);
  animation: cmSpin 0.9s linear infinite;
}

@keyframes cmSpin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Toasts
   ------------------------------------------------------------------------- */
#toast-container .alert {
  min-width: 250px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f1a28;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 0.7rem 2.2rem 0.7rem 0.95rem;
  font-size: 0.86rem;
  position: relative;
}

#toast-container .alert-success {
  border-color: rgba(94, 211, 163, 0.4);
  background: linear-gradient(135deg, rgba(94, 211, 163, 0.12), #0f1a28 70%);
}

#toast-container .alert-danger {
  border-color: rgba(255, 91, 110, 0.4);
  background: linear-gradient(135deg, rgba(255, 91, 110, 0.15), #0f1a28 70%);
}

#toast-container .alert .close {
  position: absolute;
  right: 0.4rem;
  top: 0.35rem;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: none;
  opacity: 1;
  font-size: 18px;
  padding: 0.15rem 0.4rem;
}

#toast-container .alert .close:hover {
  color: #fff;
}

/* -------------------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------------------- */
.cm-gif-panel .cm-gif-grid::-webkit-scrollbar,
.block_area-comment ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cm-gif-panel .cm-gif-grid::-webkit-scrollbar-thumb,
.block_area-comment ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.cm-gif-panel .cm-gif-grid::-webkit-scrollbar-thumb:hover,
.block_area-comment ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.cm-gif-panel .cm-gif-grid::-webkit-scrollbar-track,
.block_area-comment ::-webkit-scrollbar-track {
  background: transparent;
}

/* -------------------------------------------------------------------------
   Rich-text rendering inside .cm-body
   (output of the markdown parser in CommentContentFormatter)
   ------------------------------------------------------------------------- */
.block_area-comment .cm-body strong {
  font-weight: 700;
  color: #fff;
}

.block_area-comment .cm-body em {
  font-style: italic;
  color: var(--cm-text);
}

.block_area-comment .cm-body del,
.block_area-comment .cm-body s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  opacity: 0.7;
}

.block_area-comment .cm-body blockquote {
  display: block;
  margin: 0.3rem 0;
  padding: 0.3rem 0.65rem;
  border-left: 3px solid rgba(var(--cm-acc-rgb), 0.45);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 6px 6px 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

.block_area-comment .cm-body .cm-md-h,
.block_area-comment .cm-body h1,
.block_area-comment .cm-body h2,
.block_area-comment .cm-body h3 {
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.65rem 0 0.35rem;
}
.block_area-comment .cm-body h1 { font-size: 1.2em; }
.block_area-comment .cm-body h2 { font-size: 1.1em; }
.block_area-comment .cm-body h3 { font-size: 1.05em; }
.block_area-comment .cm-body .cm-md-ul,
.block_area-comment .cm-body ul {
  margin: 0.3rem 0 0.55rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.block_area-comment .cm-body .cm-md-ul li,
.block_area-comment .cm-body ul li {
  margin: 0.15rem 0;
}

.block_area-comment .cm-body blockquote + blockquote {
  margin-top: -0.3rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Manual spoiler chip — same look as auto-spoil but distinct accent */
.cm-body .cm-auto-spoil--manual {
  background: rgba(var(--cm-acc-rgb, 124, 77, 255), 0.15);
  border-color: rgba(var(--cm-acc-rgb, 124, 77, 255), 0.32);
}

.cm-body .cm-auto-spoil--manual .cm-auto-spoil-toggle {
  background: rgba(var(--cm-acc-rgb, 124, 77, 255), 0.45);
}

.cm-body .cm-auto-spoil--manual .cm-auto-spoil-label::before {
  content: "\f070";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.25rem;
  font-size: 0.65rem;
  opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #comments.block_area-comment,
  .block_area.block_area-comment {
    padding: 0.85rem 0 1rem !important;
  }

  .block_area-comment .sc-header {
    padding-bottom: 0.7rem;
    gap: 0.4rem 0.6rem;
  }

  .block_area-comment .sc-header .sc-h-title span {
    display: none;
  }

  .block_area-comment .comment-input {
    padding-left: 44px;
  }

  .block_area-comment .comment-input .user-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .block_area-comment .cw_list .cw_l-line {
    padding: 0.75rem 0 0.75rem 44px;
  }

  .block_area-comment .cw_list .cw_l-line > .user-avatar {
    top: 0.85rem;
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .block_area-comment .cw_l-line .replies .cw_l-line {
    padding-left: 38px !important;
  }

  .block_area-comment .cw_l-line .replies .cw_l-line > .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .block_area-comment .cw_l-line .ibottom .ib-li .btn {
    padding: 0.25rem 0.45rem;
    font-size: 0.74rem;
  }
}

@media (max-width: 420px) {
  .block_area-comment .cw_l-line .ibottom .ib-li .btn .value {
    min-width: 0;
  }

  .block_area-comment .cw_l-line .ibottom {
    gap: 0;
  }
}

/* =========================================================================
   Reactions bar  (Disqus-style strip above the comments)
   ========================================================================= */
.block_area-comment #cm-reactions.cm-reactions {
  margin: 0.4rem 0 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--cm-divider, rgba(255, 255, 255, 0.06));
}

.block_area-comment .cm-reactions-skel {
  height: 38px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: cmRxShimmer 1.4s linear infinite;
  border-radius: 999px;
  max-width: 520px;
  opacity: 0.6;
}

@keyframes cmRxShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.block_area-comment .cm-reactions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.block_area-comment .cm-rx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cm-text, #e9eef5);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  user-select: none;
}

.block_area-comment .cm-rx:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.block_area-comment .cm-rx:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(102, 161, 255, 0.35);
}

.block_area-comment .cm-rx.is-active {
  background: rgba(102, 161, 255, 0.16);
  border-color: rgba(102, 161, 255, 0.55);
  color: #cfe1ff;
}

.block_area-comment .cm-rx.is-pending {
  opacity: 0.55;
  cursor: progress;
}

.block_area-comment .cm-rx-emoji {
  font-size: 17px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

.block_area-comment .cm-rx-gif {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 6px;
  display: inline-block;
}

.block_area-comment .cm-rx-label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.block_area-comment .cm-rx-count {
  font-variant-numeric: tabular-nums;
  color: var(--cm-muted, #8a97aa);
  font-size: 12px;
  min-width: 8px;
  text-align: left;
}

.block_area-comment .cm-rx.is-active .cm-rx-count {
  color: #cfe1ff;
}

.block_area-comment .cm-rx.cm-rx-pop {
  animation: cmRxPop 220ms ease;
}

@keyframes cmRxPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (max-width: 600px) {
  .block_area-comment .cm-rx {
    padding: 5px 10px 5px 7px;
    font-size: 12.5px;
  }

  .block_area-comment .cm-rx-emoji {
    font-size: 15px;
  }

  .block_area-comment .cm-rx-gif {
    width: 18px;
    height: 18px;
  }
}

/* =========================================================================
   Episode report modal
   ========================================================================= */
#w-report .modal-content {
  background: #11192a;
  color: #e9eef5;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

#w-report .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.9rem 1rem;
}

#w-report .modal-header .modal-title {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

#w-report .modal-header .modal-title .fa-triangle-exclamation {
  color: #ffb84d;
}

#w-report .modal-header .close {
  color: #fff;
  opacity: 0.7;
  text-shadow: none;
  font-size: 22px;
}

#w-report .modal-header .close:hover {
  opacity: 1;
}

#w-report .modal-body {
  padding: 1rem;
}

#w-report .block {
  margin-bottom: 0.85rem;
}

#w-report .info {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.6rem;
  border-radius: 8px;
  align-items: center;
}

#w-report .avatar img {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
}

#w-report .info .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  color: #fff;
}

#w-report .info .episode {
  font-size: 12px;
  color: #8a97aa;
}

#w-report .form-label {
  font-size: 12px;
  color: #8a97aa;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#w-report .custom-control-label {
  font-size: 13px;
  color: #e9eef5;
  cursor: pointer;
  padding-left: 4px;
}

#w-report .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #66a1ff;
  border-color: #66a1ff;
}

#w-report textarea.form-control {
  background: rgba(0, 0, 0, 0.25);
  color: #e9eef5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  resize: vertical;
  font-size: 13px;
}

#w-report textarea.form-control::placeholder {
  color: #6d7888;
}

#w-report .btn-light.w-report-submit {
  background: #66a1ff;
  border-color: #66a1ff;
  color: #0b1622;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 6px;
}

#w-report .btn-light.w-report-submit:hover {
  background: #4f8fea;
  border-color: #4f8fea;
}

#w-report .btn-light.w-report-submit:disabled {
  opacity: 0.65;
  cursor: progress;
}

#w-report .w-report-result {
  margin: 0.4rem 0 0.8rem;
  font-size: 13px;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
}

#w-report .w-report-result.text-success {
  background: rgba(60, 200, 130, 0.12);
  color: #5be0a0;
}

#w-report .w-report-result.text-danger {
  background: rgba(255, 90, 90, 0.12);
  color: #ff8a8a;
}

#w-report .w-report-result.text-warning {
  background: rgba(255, 184, 77, 0.12);
  color: #ffcf85;
}

/* The visible Report ctrl on the player toolbar */
.ctrl.report {
  cursor: pointer;
}

.ctrl.report:hover {
  color: #ffb84d;
}

.ctrl.report .fa-triangle-exclamation {
  margin-right: 4px;
}

/* Watch page toolbar: icon-only controls on mobile (Android phones, etc.) */
@media (max-width: 767.98px) {
  #w-player #controls .right .ctrl.report,
  #w-player #controls .right .ctrl.watch2gether-create,
  #w-player #controls .right .ctrl.favourite > [data-toggle="dropdown"] {
    font-size: 0;
    line-height: 1;
  }

  #w-player #controls .right .ctrl.report i,
  #w-player #controls .right .ctrl.watch2gether-create i,
  #w-player #controls .right .ctrl.favourite > [data-toggle="dropdown"] i {
    font-size: 1rem;
    margin-right: 0;
    vertical-align: middle;
  }
}

.cm-rules-note {
  font-size: 13px;
  border-radius: 8px;
  background: rgba(100, 140, 255, 0.12);
  border: 1px solid rgba(100, 140, 255, 0.25);
  color: var(--cm-text, #e8edf5);
}

.cm-rules-note a {
  text-decoration: underline;
  font-weight: 600;
}

.cm-comment-notice {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.cm-thread-locked {
  border-left: 3px solid #f0ad4e;
  background: rgba(240, 173, 78, 0.12);
}

.cm-hidden-ban,
.cm-hidden-mod {
  border-left: 3px solid #6c757d;
  background: rgba(108, 117, 125, 0.12);
  padding: 8px 10px;
  border-radius: 4px;
}

.cm-hidden-mod {
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.cw_l-line.is-comment-hidden > .info > .ibody > .cm-body {
  min-height: 0;
}

.cw_l-line.is-thread-locked > .info > .ibottom > .ib-reply,
.cw_l-line.is-thread-locked > .info > .reply-block,
#content-comments .replies-wrap.is-thread-locked .ib-reply,
#content-comments .replies-wrap.is-thread-locked .reply-block {
  display: none !important;
}

.cm-ban-badge {
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
}

.cm-hidden-ban {
  font-style: italic;
  font-size: 13px;
}

.cm-edited-label {
  font-size: 11px;
}

.cm-edit-inline {
  width: 100%;
  font-size: 14px;
}

/* Inline edit uses the same composer as reply / new comment */
.cm-body .cm-edit-composer-wrap {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.cm-body .cm-edit-composer-wrap .ci-form {
  width: 100%;
  padding: 0;
}

.cm-body .cm-edit-composer-wrap .comment-container {
  width: 100%;
}

.cm-body .cm-edit-composer-wrap .ci-buttons {
  display: flex !important;
}

/* Mana rank badges (shared with community) */
.badg-level{display:inline-block;width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;vertical-align:sub;flex-shrink:0;padding:0;border:0;border-radius:0;object-fit:contain;background:transparent}
img.badg-level{font-size:inherit;line-height:normal;color:inherit;overflow:visible}
.badg-level.level-admin{width:28px;height:28px;min-width:28px;min-height:28px;margin-right:6px;vertical-align:middle}
.badg-level.level-custom{
  width:22px;height:22px;min-width:22px;min-height:22px;margin-right:6px;border-radius:4px;vertical-align:middle;
  border:0!important;padding:0!important;background:transparent!important;box-shadow:none;object-fit:contain;
}

/* Custom badge FX — effects sit outside the icon; no box/border chrome */
.badg-aura{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-right:6px;vertical-align:middle;
  position:relative;flex-shrink:0;overflow:visible;
  border:0!important;padding:0!important;background:transparent!important;
  box-shadow:none!important;border-radius:0!important;text-transform:none!important;
  font-size:0!important;line-height:0!important;letter-spacing:0!important;color:inherit!important;
}
.badg-aura .badg-level{margin-right:0!important;position:relative;z-index:2;border-radius:4px}
.badg-aura::before,
.badg-aura::after{
  content:"";position:absolute;pointer-events:none;z-index:1;
  border-style:solid;box-sizing:border-box;
}

@keyframes badg-slash-a{
  0%{transform:translate(-14px,10px) rotate(-38deg) scaleX(.2);opacity:0}
  35%{opacity:1}
  100%{transform:translate(14px,-10px) rotate(-38deg) scaleX(1.1);opacity:0}
}
@keyframes badg-slash-b{
  0%{transform:translate(12px,12px) rotate(42deg) scaleX(.15);opacity:0}
  40%{opacity:1}
  100%{transform:translate(-12px,-12px) rotate(42deg) scaleX(1);opacity:0}
}
@keyframes badg-sweep{
  0%{transform:translateX(-120%) skewX(-18deg);opacity:0}
  30%{opacity:1}
  100%{transform:translateX(120%) skewX(-18deg);opacity:0}
}
@keyframes badg-orbit{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes badg-rise{
  0%{transform:translateY(6px) scaleY(.4);opacity:0}
  40%{opacity:1}
  100%{transform:translateY(-10px) scaleY(1.1);opacity:0}
}
@keyframes badg-flash{
  0%,100%{opacity:.25}
  50%{opacity:1}
}
@keyframes badg-spin-slow{to{transform:rotate(360deg)}}
@keyframes badg-pulse-frame{
  0%,100%{opacity:.55;transform:scale(.92) rotate(0deg)}
  50%{opacity:1;transform:scale(1.08) rotate(3deg)}
}
@keyframes badg-spark-twinkle{
  0%,100%{opacity:.2;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.2)}
}
@keyframes badg-wave{
  0%{clip-path:polygon(0 60%,20% 45%,40% 62%,60% 40%,80% 58%,100% 42%,100% 100%,0 100%);opacity:.3}
  50%{clip-path:polygon(0 45%,20% 60%,40% 40%,60% 58%,80% 38%,100% 55%,100% 100%,0 100%);opacity:.85}
  100%{clip-path:polygon(0 55%,20% 38%,40% 58%,60% 42%,80% 60%,100% 40%,100% 100%,0 100%);opacity:.3}
}

/* 1 Soft glow — outer bloom (no frame box) */
.badg-aura--soft-glow::before{
  inset:-6px;border-radius:50%;border:0;
  background:radial-gradient(circle,rgba(147,197,253,.55) 0%,transparent 68%);
  animation:badg-pulse-frame 2.4s ease-in-out infinite;
}
/* 2 Neon glow */
.badg-aura--neon-glow::before{
  inset:-5px;border-radius:6px;border:0;
  box-shadow:0 0 8px 2px #22d3ee,0 0 14px 1px #a855f7;
  animation:badg-flash 1.4s ease-in-out infinite;
}
.badg-aura--neon-glow::after{
  inset:-2px;border-radius:4px;border:0;
  box-shadow:0 0 6px 1px #e879f9;opacity:.7;
  animation:badg-flash 1.4s ease-in-out infinite .35s;
}
/* 3 Magical energy — orbiting sparks */
.badg-aura--magical-energy::before{
  width:4px;height:4px;left:50%;top:50%;margin:-2px 0 0 -2px;border-radius:50%;border:0;
  background:#c084fc;box-shadow:12px 0 0 #60a5fa,-12px 0 0 #f472b6,0 12px 0 #34d399,0 -12px 0 #fbbf24;
  animation:badg-orbit 2.2s linear infinite;
}
.badg-aura--magical-energy::after{
  width:3px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -1.5px;border-radius:50%;border:0;
  background:#fff;box-shadow:8px 8px 0 #a78bfa,-8px -8px 0 #38bdf8,8px -8px 0 #fb7185,-8px 8px 0 #4ade80;
  animation:badg-orbit 1.6s linear infinite reverse;
}
/* 4 Pulsing glow */
.badg-aura--pulsing-glow::before{
  inset:-6px;border-radius:50%;border:0;
  box-shadow:0 0 0 2px rgba(96,165,250,.35),0 0 12px rgba(96,165,250,.55);
  animation:badg-pulse-frame 1.5s ease-in-out infinite;
}
/* 5 Breathing light — vertical light pillars */
.badg-aura--breathing-light::before,
.badg-aura--breathing-light::after{
  width:2px;height:26px;top:50%;left:50%;margin-top:-13px;border:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);
  filter:blur(.4px);
}
.badg-aura--breathing-light::before{margin-left:-14px;animation:badg-flash 2.2s ease-in-out infinite}
.badg-aura--breathing-light::after{margin-left:12px;animation:badg-flash 2.2s ease-in-out infinite .4s}
/* 6 Divine aura — cross rays */
.badg-aura--divine-aura::before{
  width:30px;height:2px;left:50%;top:50%;margin:-1px 0 0 -15px;border:0;
  background:linear-gradient(90deg,transparent,#fde68a,#fff,#fde68a,transparent);
  box-shadow:0 0 6px #fbbf24;animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--divine-aura::after{
  width:2px;height:30px;left:50%;top:50%;margin:-15px 0 0 -1px;border:0;
  background:linear-gradient(180deg,transparent,#fde68a,#fff,#fde68a,transparent);
  box-shadow:0 0 6px #fbbf24;animation:badg-flash 2s ease-in-out infinite .25s;
}
/* 7 Dark shadow — corner claws */
.badg-aura--dark-shadow::before{
  width:10px;height:10px;left:-4px;top:-4px;border:0;
  border-top:2px solid #111;border-left:2px solid #111;
  box-shadow:-2px -2px 6px rgba(0,0,0,.8);animation:badg-pulse-frame 2s ease-in-out infinite;
}
.badg-aura--dark-shadow::after{
  width:10px;height:10px;right:-4px;bottom:-4px;border:0;
  border-bottom:2px solid #111;border-right:2px solid #111;
  box-shadow:2px 2px 6px rgba(0,0,0,.8);animation:badg-pulse-frame 2s ease-in-out infinite .3s;
}
/* 8 Holy light — ascending beams */
.badg-aura--holy-light::before,
.badg-aura--holy-light::after{
  width:3px;bottom:2px;left:50%;
  background:linear-gradient(180deg,rgba(255,255,240,.95),transparent);
  filter:blur(.5px);
}
.badg-aura--holy-light::before{height:16px;margin-left:-8px;transform:rotate(-18deg);animation:badg-rise 1.8s ease-out infinite}
.badg-aura--holy-light::after{height:18px;margin-left:5px;transform:rotate(16deg);animation:badg-rise 1.8s ease-out infinite .35s}
/* 9 Infernal flames — rising flame tongues */
.badg-aura--infernal-flames::before,
.badg-aura--infernal-flames::after{
  width:5px;bottom:0;left:50%;border-radius:40% 40% 20% 20%;
  background:linear-gradient(180deg,#fbbf24,#ef4444 55%,transparent);
}
.badg-aura--infernal-flames::before{height:14px;margin-left:-9px;animation:badg-rise 1.1s ease-out infinite}
.badg-aura--infernal-flames::after{height:16px;margin-left:4px;animation:badg-rise 1.1s ease-out infinite .25s}
/* 10 Arcane energy — soft violet bloom + spin tint */
.badg-aura--arcane-energy::before{
  inset:-7px;border:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(167,139,250,.55),transparent 40%,rgba(196,181,253,.45),transparent 75%,rgba(167,139,250,.55));
  filter:blur(2px);animation:badg-spin-slow 4s linear infinite;
}
.badg-aura--arcane-energy::after{
  inset:-3px;border:0;border-radius:50%;
  box-shadow:0 0 10px rgba(139,92,246,.65);animation:badg-pulse-frame 2s ease-in-out infinite;
}
/* 11 Ice frost — crystal shards */
.badg-aura--ice-frost::before{
  width:8px;height:8px;left:-5px;top:2px;
  background:linear-gradient(135deg,rgba(224,242,254,.95),rgba(56,189,248,.4));
  clip-path:polygon(50% 0%,100% 100%,0% 100%);animation:badg-spark-twinkle 1.6s ease-in-out infinite;
}
.badg-aura--ice-frost::after{
  width:7px;height:7px;right:-4px;bottom:1px;
  background:linear-gradient(225deg,rgba(186,230,253,.95),rgba(14,165,233,.35));
  clip-path:polygon(50% 0%,100% 100%,0% 100%);transform:rotate(180deg);
  animation:badg-spark-twinkle 1.6s ease-in-out infinite .4s;
}
/* 12 Electric spark — lightning bolts */
.badg-aura--electric-spark::before{
  width:14px;height:14px;left:-6px;top:-2px;
  background:linear-gradient(135deg,transparent 40%,#fde047 42%,#38bdf8 55%,transparent 57%);
  clip-path:polygon(40% 0%,70% 0%,45% 40%,75% 40%,30% 100%,40% 55%,15% 55%);
  filter:drop-shadow(0 0 3px #38bdf8);animation:badg-flash .45s steps(2,end) infinite;
}
.badg-aura--electric-spark::after{
  width:12px;height:12px;right:-5px;bottom:-1px;
  background:#7dd3fc;
  clip-path:polygon(55% 0%,80% 0%,50% 45%,85% 45%,25% 100%,40% 55%,10% 55%);
  opacity:.75;animation:badg-flash .45s steps(2,end) infinite .2s;
}
/* 13 Poison mist — drifting blobs */
.badg-aura--poison-mist::before{
  width:10px;height:7px;left:-6px;top:4px;border-radius:60% 40% 50% 50%;
  background:rgba(74,222,128,.55);filter:blur(1.5px);animation:badg-sweep 2.8s ease-in-out infinite;
}
.badg-aura--poison-mist::after{
  width:8px;height:6px;right:-5px;bottom:3px;border-radius:50% 60% 40% 50%;
  background:rgba(21,128,61,.5);filter:blur(1.5px);animation:badg-sweep 2.8s ease-in-out infinite .6s reverse;
}
/* 14 Golden radiance — crown tips + sweep */
.badg-aura--golden-radiance::before{
  width:18px;height:6px;left:50%;top:-5px;margin-left:-9px;
  background:linear-gradient(90deg,transparent,#f59e0b,#fde68a,#f59e0b,transparent);
  clip-path:polygon(0 100%,20% 0,40% 100%,50% 20%,60% 100%,80% 0,100% 100%);
  animation:badg-flash 1.8s ease-in-out infinite;
}
.badg-aura--golden-radiance::after{
  width:120%;height:140%;left:-10%;top:-20%;
  background:linear-gradient(105deg,transparent 40%,rgba(253,230,138,.85) 50%,transparent 60%);
  animation:badg-sweep 2.2s ease-in-out infinite;
}
/* 15 Cosmic shimmer — corner stars */
.badg-aura--cosmic-shimmer::before{
  width:6px;height:6px;left:-5px;top:-4px;background:#e879f9;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-spark-twinkle 1.3s ease-in-out infinite;
}
.badg-aura--cosmic-shimmer::after{
  width:5px;height:5px;right:-4px;bottom:-3px;background:#22d3ee;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-spark-twinkle 1.3s ease-in-out infinite .45s;
}
/* 16 Blood crimson — diagonal slash */
.badg-aura--blood-crimson::before{
  width:28px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#7f1d1d,#ef4444,#7f1d1d,transparent);
  transform-origin:center;animation:badg-slash-a 1.5s ease-in-out infinite;
}
.badg-aura--blood-crimson::after{
  width:22px;height:2px;left:50%;top:50%;margin:-1px 0 0 -11px;
  background:linear-gradient(90deg,transparent,#991b1b,#fca5a5,transparent);
  animation:badg-slash-b 1.5s ease-in-out infinite .2s;
}
/* 17 Emerald pulse */
.badg-aura--emerald-pulse::before{
  inset:-6px;border:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(52,211,153,.4),0 0 12px rgba(16,185,129,.55);
  animation:badg-pulse-frame 1.7s ease-in-out infinite;
}
/* 18 Void ripple — water slash / wave */
.badg-aura--void-ripple::before{
  left:-8px;right:-8px;bottom:-4px;height:12px;
  background:linear-gradient(180deg,rgba(56,189,248,.55),transparent);
  animation:badg-wave 1.4s ease-in-out infinite;
}
.badg-aura--void-ripple::after{
  width:26px;height:2.5px;left:50%;top:40%;margin-left:-13px;
  background:linear-gradient(90deg,transparent,#67e8f9,#fff,#67e8f9,transparent);
  animation:badg-slash-a 1.8s ease-out infinite;
}
/* 19 Storm crackle — X slash bolts */
.badg-aura--storm-crackle::before{
  width:26px;height:2px;left:50%;top:50%;margin:-1px 0 0 -13px;
  background:linear-gradient(90deg,transparent,#e2e8f0,#38bdf8,#e2e8f0,transparent);
  animation:badg-slash-a 1.1s linear infinite;
}
.badg-aura--storm-crackle::after{
  width:26px;height:2px;left:50%;top:50%;margin:-1px 0 0 -13px;
  background:linear-gradient(90deg,transparent,#fde047,#fff,transparent);
  animation:badg-slash-b 1.1s linear infinite .15s;
}
/* 20 Celestial shimmer — wing sweeps */
.badg-aura--celestial-shimmer::before,
.badg-aura--celestial-shimmer::after{
  width:10px;height:14px;top:50%;margin-top:-7px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(196,181,253,.35),transparent);
  filter:blur(.3px);
}
.badg-aura--celestial-shimmer::before{
  left:-8px;clip-path:polygon(100% 50%,0 0,20% 50%,0 100%);
  animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--celestial-shimmer::after{
  right:-8px;clip-path:polygon(0 50%,100% 0,80% 50%,100% 100%);
  animation:badg-flash 2s ease-in-out infinite .3s;
}

@keyframes badg-fall{
  0%{transform:translate(0,-8px) rotate(0deg);opacity:0}
  20%{opacity:1}
  100%{transform:translate(4px,14px) rotate(40deg);opacity:0}
}
@keyframes badg-fall-b{
  0%{transform:translate(0,-6px) rotate(0deg);opacity:0}
  25%{opacity:1}
  100%{transform:translate(-5px,12px) rotate(-35deg);opacity:0}
}
@keyframes badg-arc-slash{
  0%{transform:rotate(-50deg) scaleX(.2);opacity:0}
  40%{opacity:1}
  100%{transform:rotate(40deg) scaleX(1.05);opacity:0}
}
@keyframes badg-rift{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1.15);opacity:1}
}
@keyframes badg-ribbon{
  0%{transform:translateX(-100%) skewX(-12deg);opacity:0}
  40%{opacity:.9}
  100%{transform:translateX(100%) skewX(-12deg);opacity:0}
}
@keyframes badg-step{
  0%{opacity:0;transform:translate(6px,0)}
  30%{opacity:.7}
  100%{opacity:0;transform:translate(-8px,0)}
}

/* 21 Sakura petal fall */
.badg-aura--sakura-petals::before{
  width:7px;height:5px;left:2px;top:-6px;border-radius:60% 0 60% 0;
  background:linear-gradient(135deg,#fda4af,#fb7185);animation:badg-fall 1.8s ease-in infinite;
}
.badg-aura--sakura-petals::after{
  width:6px;height:4px;right:1px;top:-4px;border-radius:0 60% 0 60%;
  background:linear-gradient(225deg,#fecdd3,#f472b6);animation:badg-fall-b 1.8s ease-in infinite .45s;
}
/* 22 Blade arc slash */
.badg-aura--blade-arc::before{
  width:28px;height:28px;left:50%;top:50%;margin:-14px 0 0 -14px;
  border:2px solid transparent;border-top-color:#e2e8f0;border-right-color:rgba(148,163,184,.7);
  border-radius:50%;transform-origin:center;animation:badg-arc-slash 1.4s ease-out infinite;
  box-shadow:0 0 4px rgba(226,232,240,.5);
}
.badg-aura--blade-arc::after{
  width:22px;height:2px;left:50%;top:50%;margin:-1px 0 0 -11px;
  background:linear-gradient(90deg,transparent,#94a3b8,#fff,transparent);
  animation:badg-slash-a 1.4s ease-out infinite .15s;
}
/* 23 Phoenix ember rise */
.badg-aura--phoenix-ember::before{
  width:4px;height:4px;left:2px;bottom:0;border-radius:50%;
  background:#fb923c;box-shadow:0 0 4px #f97316;animation:badg-rise 1.3s ease-out infinite;
}
.badg-aura--phoenix-ember::after{
  width:3px;height:3px;right:3px;bottom:1px;border-radius:50%;
  background:#fde047;box-shadow:0 0 4px #ef4444;animation:badg-rise 1.3s ease-out infinite .35s;
}
/* 24 Abyss vertical rift */
.badg-aura--abyss-rift::before{
  width:2px;height:26px;left:50%;top:50%;margin:-13px 0 0 -1px;
  background:linear-gradient(180deg,transparent,#7c3aed,#c084fc,#7c3aed,transparent);
  box-shadow:0 0 6px #6d28d9;animation:badg-rift 1.6s ease-in-out infinite;
}
.badg-aura--abyss-rift::after{
  width:8px;height:26px;left:50%;top:50%;margin:-13px 0 0 -4px;
  background:linear-gradient(90deg,transparent,rgba(76,29,149,.45),transparent);
  animation:badg-rift 1.6s ease-in-out infinite .2s;
}
/* 25 Lunar crescent */
.badg-aura--lunar-crescent::before{
  width:18px;height:18px;left:50%;top:50%;margin:-9px 0 0 -9px;border-radius:50%;
  box-shadow:4px -2px 0 1px #e2e8f0;animation:badg-flash 2.4s ease-in-out infinite;
}
.badg-aura--lunar-crescent::after{
  width:3px;height:3px;right:-2px;top:2px;border-radius:50%;background:#f8fafc;
  box-shadow:0 0 4px #fff;animation:badg-spark-twinkle 1.5s ease-in-out infinite;
}
/* 26 Solar flare beams */
.badg-aura--solar-flare::before{
  width:30px;height:2px;left:50%;top:50%;margin:-1px 0 0 -15px;
  background:linear-gradient(90deg,transparent,#fbbf24,#fff7ed,#fbbf24,transparent);
  transform:rotate(-28deg);animation:badg-flash 1.2s ease-in-out infinite;
}
.badg-aura--solar-flare::after{
  width:24px;height:2px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:linear-gradient(90deg,transparent,#f59e0b,#fde68a,transparent);
  transform:rotate(32deg);animation:badg-flash 1.2s ease-in-out infinite .25s;
}
/* 27 Dragon scale tips */
.badg-aura--dragon-scale::before{
  width:9px;height:8px;left:-5px;top:4px;
  background:linear-gradient(180deg,#4ade80,#166534);clip-path:polygon(50% 0%,100% 40%,80% 100%,20% 100%,0 40%);
  animation:badg-pulse-frame 2s ease-in-out infinite;
}
.badg-aura--dragon-scale::after{
  width:8px;height:7px;right:-4px;bottom:3px;
  background:linear-gradient(180deg,#86efac,#14532d);clip-path:polygon(50% 0%,100% 40%,80% 100%,20% 100%,0 40%);
  animation:badg-pulse-frame 2s ease-in-out infinite .35s;
}
/* 28 Spectral aftertrail */
.badg-aura--spectral-trail::before{
  width:22px;height:22px;left:6px;top:3px;border:0;border-radius:4px;
  background:rgba(167,139,250,.25);animation:badg-step 1.5s ease-out infinite;
}
.badg-aura--spectral-trail::after{
  width:22px;height:22px;left:10px;top:3px;border:0;border-radius:4px;
  background:rgba(196,181,253,.15);animation:badg-step 1.5s ease-out infinite .25s;
}
/* 29 Quartz prism shards */
.badg-aura--quartz-prism::before{
  width:9px;height:10px;left:-6px;top:-2px;
  background:linear-gradient(135deg,#e0e7ff,#a5b4fc 50%,#6366f1);
  clip-path:polygon(50% 0%,100% 100%,0 100%);animation:badg-spark-twinkle 1.7s ease-in-out infinite;
}
.badg-aura--quartz-prism::after{
  width:8px;height:9px;right:-5px;bottom:-1px;
  background:linear-gradient(225deg,#fae8ff,#e879f9 50%,#a21caf);
  clip-path:polygon(0 0,100% 0,50% 100%);animation:badg-spark-twinkle 1.7s ease-in-out infinite .4s;
}
/* 30 Cherry dual slash */
.badg-aura--cherry-blade::before{
  width:28px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#be123c,#fb7185,#be123c,transparent);
  animation:badg-slash-a 1.3s ease-in-out infinite;
}
.badg-aura--cherry-blade::after{
  width:24px;height:2px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:linear-gradient(90deg,transparent,#9f1239,#fda4af,transparent);
  animation:badg-slash-b 1.3s ease-in-out infinite .18s;
}
/* 31 Tsunami crest */
.badg-aura--tsunami-crest::before{
  left:-10px;right:-10px;top:-6px;height:14px;
  background:linear-gradient(180deg,rgba(56,189,248,.7),transparent);
  clip-path:polygon(0 80%,15% 30%,30% 70%,50% 10%,70% 65%,85% 25%,100% 75%,100% 100%,0 100%);
  animation:badg-wave 1.5s ease-in-out infinite;
}
.badg-aura--tsunami-crest::after{
  width:20px;height:2px;left:50%;bottom:0;margin-left:-10px;
  background:linear-gradient(90deg,transparent,#67e8f9,#fff,transparent);
  animation:badg-sweep 2s ease-in-out infinite;
}
/* 32 Magma ground rift */
.badg-aura--magma-rift::before{
  left:-6px;right:-6px;bottom:-3px;height:8px;
  background:linear-gradient(90deg,#7f1d1d,#f97316,#fbbf24,#ef4444,#7f1d1d);
  clip-path:polygon(0 100%,10% 40%,25% 90%,40% 20%,55% 85%,70% 30%,85% 95%,100% 50%,100% 100%);
  animation:badg-flicker-lite 1.1s ease-in-out infinite;
}
.badg-aura--magma-rift::after{
  width:3px;height:10px;left:50%;bottom:2px;margin-left:-1px;
  background:linear-gradient(180deg,#fde047,#ef4444,transparent);animation:badg-rise 1.2s ease-out infinite;
}
@keyframes badg-flicker-lite{0%,100%{opacity:.55;filter:brightness(1)}40%{opacity:1;filter:brightness(1.3)}70%{opacity:.7}}
/* 33 Aurora ribbon flow */
.badg-aura--aurora-ribbon::before{
  width:140%;height:5px;left:-20%;top:2px;
  background:linear-gradient(90deg,transparent,#34d399,#22d3ee,#a78bfa,transparent);
  filter:blur(1px);animation:badg-ribbon 2.4s ease-in-out infinite;
}
.badg-aura--aurora-ribbon::after{
  width:140%;height:4px;left:-20%;bottom:2px;
  background:linear-gradient(90deg,transparent,#c084fc,#38bdf8,#4ade80,transparent);
  filter:blur(1px);animation:badg-ribbon 2.4s ease-in-out infinite .5s reverse;
}
/* 34 Shadow step afterimage */
.badg-aura--shadow-step::before{
  width:16px;height:16px;left:8px;top:4px;border-radius:2px;
  background:rgba(15,15,20,.55);animation:badg-step 1.2s ease-out infinite;
}
.badg-aura--shadow-step::after{
  width:16px;height:16px;left:12px;top:4px;border-radius:2px;
  background:rgba(15,15,20,.3);animation:badg-step 1.2s ease-out infinite .2s;
}
/* 35 Crystal lattice corners */
.badg-aura--crystal-lattice::before{
  width:8px;height:8px;left:-4px;top:-4px;
  border-top:1.5px solid #67e8f9;border-left:1.5px solid #67e8f9;
  box-shadow:-1px -1px 0 #a5f3fc;animation:badg-pulse-frame 1.8s ease-in-out infinite;
}
.badg-aura--crystal-lattice::after{
  width:8px;height:8px;right:-4px;bottom:-4px;
  border-bottom:1.5px solid #67e8f9;border-right:1.5px solid #67e8f9;
  box-shadow:1px 1px 0 #a5f3fc;animation:badg-pulse-frame 1.8s ease-in-out infinite .3s;
}
/* 36 Wind multi-cut */
.badg-aura--wind-slash::before{
  width:30px;height:1.5px;left:50%;top:40%;margin-left:-15px;
  background:linear-gradient(90deg,transparent,#cbd5e1,#fff,transparent);
  animation:badg-sweep 1.1s ease-out infinite;
}
.badg-aura--wind-slash::after{
  width:26px;height:1.5px;left:50%;top:58%;margin-left:-13px;
  background:linear-gradient(90deg,transparent,#94a3b8,#e2e8f0,transparent);
  animation:badg-sweep 1.1s ease-out infinite .2s;
}
/* 37 Royal crest crown */
.badg-aura--royal-crest::before{
  width:22px;height:7px;left:50%;top:-7px;margin-left:-11px;border:0;
  background:linear-gradient(180deg,#fde68a,#b45309);
  clip-path:polygon(0 100%,12% 35%,25% 100%,37% 0,50% 100%,63% 0,75% 100%,88% 35%,100% 100%);
  animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--royal-crest::after{
  inset:-4px;border:0;border-radius:50%;
  box-shadow:0 0 10px rgba(251,191,36,.45);
  animation:badg-pulse-frame 2.2s ease-in-out infinite;
}
/* 38 Nebula dust orbit */
.badg-aura--nebula-dust::before{
  width:3px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#f0abfc;box-shadow:11px 0 0 #818cf8,-8px 6px 0 #22d3ee,5px -9px 0 #fb7185,-6px -7px 0 #a3e635;
  animation:badg-orbit 3s linear infinite;
}
.badg-aura--nebula-dust::after{
  width:2px;height:2px;left:50%;top:50%;margin:-1px 0 0 -1px;border-radius:50%;
  background:#fff;box-shadow:8px 5px 0 #c084fc,-9px -3px 0 #38bdf8,0 10px 0 #e879f9;
  animation:badg-orbit 2.2s linear infinite reverse;
}
/* 39 Frost blade slash */
.badg-aura--frost-blade::before{
  width:28px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#bae6fd,#fff,#7dd3fc,transparent);
  animation:badg-slash-a 1.4s ease-out infinite;
}
.badg-aura--frost-blade::after{
  width:6px;height:6px;right:-3px;top:0;
  background:#e0f2fe;clip-path:polygon(50% 0%,100% 100%,0 100%);
  animation:badg-spark-twinkle 1.4s ease-in-out infinite .2s;
}
/* 40 Venom fang tips */
.badg-aura--venom-fang::before{
  width:7px;height:10px;left:0;top:-5px;
  background:linear-gradient(180deg,#86efac,#166534);clip-path:polygon(50% 100%,0 0,100% 0);
  animation:badg-pulse-frame 1.5s ease-in-out infinite;
}
.badg-aura--venom-fang::after{
  width:7px;height:10px;right:0;top:-5px;
  background:linear-gradient(180deg,#4ade80,#14532d);clip-path:polygon(50% 100%,0 0,100% 0);
  animation:badg-pulse-frame 1.5s ease-in-out infinite .25s;
}
/* 41 Thunder flash */
.badg-aura--thunder-ring::before{
  inset:-6px;border:0;border-radius:50%;
  box-shadow:0 0 8px 2px #fde047,0 0 14px #38bdf8;
  animation:badg-flash .55s steps(2,end) infinite;
}
.badg-aura--thunder-ring::after{
  width:10px;height:10px;left:50%;top:-4px;margin-left:-5px;background:#fef08a;border:0;
  clip-path:polygon(40% 0%,70% 0%,45% 40%,80% 40%,25% 100%,35% 55%,10% 55%);
  animation:badg-flash .55s steps(2,end) infinite .15s;
}
/* 42 Spirit orbit rings */
.badg-aura--spirit-orbits::before{
  inset:-8px;border:1.5px solid rgba(167,139,250,.55);border-radius:50%;
  border-bottom-color:transparent;border-left-color:transparent;
  animation:badg-spin-slow 2.5s linear infinite;
}
.badg-aura--spirit-orbits::after{
  inset:-5px;border:1.5px solid rgba(56,189,248,.5);border-radius:50%;
  border-top-color:transparent;border-right-color:transparent;
  animation:badg-spin-slow 1.8s linear infinite reverse;
}
/* 43 Ash fall drift */
.badg-aura--ash-fall::before{
  width:3px;height:3px;left:4px;top:-6px;border-radius:50%;background:#a8a29e;
  box-shadow:6px -2px 0 #78716c,-2px 2px 0 #57534e;animation:badg-fall 2s linear infinite;
}
.badg-aura--ash-fall::after{
  width:2px;height:2px;right:3px;top:-4px;border-radius:50%;background:#d6d3d1;
  animation:badg-fall-b 2s linear infinite .5s;
}
/* 44 Moonlight veil sweep */
.badg-aura--moonlight-veil::before{
  width:8px;height:28px;left:50%;top:50%;margin:-14px 0 0 -4px;
  background:linear-gradient(90deg,transparent,rgba(226,232,240,.85),transparent);
  filter:blur(.6px);animation:badg-ribbon 2.8s ease-in-out infinite;
}
.badg-aura--moonlight-veil::after{
  width:4px;height:20px;left:50%;top:50%;margin:-10px 0 0 -2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent);
  animation:badg-flash 2.8s ease-in-out infinite .4s;
}
/* 45 Crimson X-mark */
.badg-aura--crimson-mark::before{
  width:24px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:#dc2626;transform:rotate(45deg);box-shadow:0 0 4px #991b1b;
  animation:badg-flash 1.6s ease-in-out infinite;
}
.badg-aura--crimson-mark::after{
  width:24px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:#b91c1c;transform:rotate(-45deg);box-shadow:0 0 4px #7f1d1d;
  animation:badg-flash 1.6s ease-in-out infinite .2s;
}
/* 46 Jade corner brackets */
.badg-aura--jade-brackets::before{
  width:9px;height:9px;left:-5px;top:-5px;
  border-top:2px solid #34d399;border-left:2px solid #34d399;
  animation:badg-pulse-frame 2.1s ease-in-out infinite;
}
.badg-aura--jade-brackets::after{
  width:9px;height:9px;right:-5px;bottom:-5px;
  border-bottom:2px solid #10b981;border-right:2px solid #10b981;
  animation:badg-pulse-frame 2.1s ease-in-out infinite .35s;
}
/* 47 Starfall rain */
.badg-aura--starfall-rain::before{
  width:5px;height:5px;left:3px;top:-8px;background:#fde68a;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-fall 1.6s linear infinite;
}
.badg-aura--starfall-rain::after{
  width:4px;height:4px;right:2px;top:-6px;background:#e0e7ff;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-fall-b 1.6s linear infinite .4s;
}
/* 48 Void diagonal tear */
.badg-aura--void-tear::before{
  width:3px;height:28px;left:50%;top:50%;margin:-14px 0 0 -1.5px;
  background:linear-gradient(180deg,transparent,#4c1d95,#c084fc,#2e1065,transparent);
  transform:rotate(-28deg);box-shadow:0 0 8px #6d28d9;animation:badg-rift 1.4s ease-in-out infinite;
}
.badg-aura--void-tear::after{
  width:22px;height:22px;left:50%;top:50%;margin:-11px 0 0 -11px;
  background:radial-gradient(circle,rgba(76,29,149,.35) 0%,transparent 70%);
  clip-path:polygon(0 45%,100% 20%,100% 55%,0 80%);animation:badg-flash 1.4s ease-in-out infinite;
}
/* 49 Mirror glass shards */
.badg-aura--mirror-shard::before{
  width:8px;height:10px;left:-5px;top:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(148,163,184,.4));
  clip-path:polygon(20% 0%,100% 15%,70% 100%,0 80%);animation:badg-spark-twinkle 1.5s ease-in-out infinite;
}
.badg-aura--mirror-shard::after{
  width:7px;height:9px;right:-4px;bottom:0;
  background:linear-gradient(225deg,rgba(226,232,240,.95),rgba(100,116,139,.35));
  clip-path:polygon(0 20%,90% 0,100% 90%,30% 100%);animation:badg-spark-twinkle 1.5s ease-in-out infinite .35s;
}
/* 50 Elite sigil */
.badg-aura--elite-sigil::before{
  inset:-7px;border:0;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(251,191,36,.55),0 0 12px rgba(245,158,11,.45);
  animation:badg-spin-slow 5s linear infinite;
}
.badg-aura--elite-sigil::after{
  width:16px;height:16px;left:50%;top:50%;margin:-8px 0 0 -8px;border:0;
  background:radial-gradient(circle,rgba(253,230,138,.35) 0%,transparent 70%);
  animation:badg-pulse-frame 2s ease-in-out infinite;
}
.badg-aura--celestial-shimmer::before{
  left:-8px;clip-path:polygon(100% 50%,0 0,20% 50%,0 100%);
  animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--celestial-shimmer::after{
  right:-8px;clip-path:polygon(0 50%,100% 0,80% 50%,100% 100%);
  animation:badg-flash 2s ease-in-out infinite .3s;
}