/* Priboardial second sheet: loaded after forum.css. Mod tools, form rows, text wrapping, thread connectors,
   the Discord link page, school emblems. */

/* ---- 7. no single word left alone on a line: headings and descriptions balance, buttons and labels never wrap ---- */
h1, h2, h3, h4, .board-main p, .board-head p, .board-desc, .mq-why, .tc-title, .tr-title, .thread-head h1, .pa-title, .muted, .prose p, .signin-card p, .mq-clear p { text-wrap: balance; }
p, li, dd, .pbody, .ex { text-wrap: pretty; }
.btn, .tool, .fchip, .chip, .seg, .nav a, .crumbs a, .crumbs span, .act, .pill, .tag, label.check, .sort label, .per-pick span, .badge-label, .rank-staff, .mq-kind { white-space: nowrap; }

/* ---- 1. mod queue tools: a centred row, each tool framed only by two worn gold corner marks ---- */
.mq-tools { justify-content: center; gap: 6px 8px; position: relative; padding-top: 14px; }
.staff-ui .mq-tools .tool, .mq-tools .tool {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: #d9ccb3 !important; font: 500 14px/1.2 var(--serif) !important; letter-spacing: .02em !important; white-space: nowrap;
  transition: color .18s ease, background-color .18s ease; --cm: rgba(201, 164, 90, .62); --cl: 9px;
}
.mq-tools .tool .ic { width: 15px !important; height: 15px !important; color: var(--gold-dim); transition: color .18s ease; }
.mq-tools .tool::before, .mq-tools .tool::after {
  content: ""; position: absolute; width: var(--cl); height: var(--cl); pointer-events: none;
  border: 0 solid var(--cm); transition: width .2s ease, height .2s ease, border-color .2s ease;
  -webkit-mask-image: linear-gradient(var(--wa, 135deg), #000 0 34%, rgba(0, 0, 0, .38) 58%, #000 82%);
  mask-image: linear-gradient(var(--wa, 135deg), #000 0 34%, rgba(0, 0, 0, .38) 58%, #000 82%);
}
.mq-tools .tool::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.mq-tools .tool::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; --wa: 315deg; }
/* each tool wears in its own places */
.mq-tools > :nth-child(2n) .tool::before, .mq-tools > .tool:nth-child(2n)::before { --wa: 160deg; }
.mq-tools > :nth-child(3n) .tool::after, .mq-tools > .tool:nth-child(3n)::after { --wa: 290deg; }
.mq-tools > :nth-child(4n+1) .tool::before, .mq-tools > .tool:nth-child(4n+1)::before { --wa: 110deg; }
.mq-tools .tool:hover, .mq-tools .tool-pop[open] > summary.tool {
  color: var(--gold2) !important; --cm: rgba(244, 217, 150, .95); --cl: 12px; text-decoration: none !important;
  background: radial-gradient(closest-side, rgba(227, 194, 122, .09), transparent) !important;
}
.mq-tools .tool:hover .ic, .mq-tools .tool-pop[open] > summary.tool .ic { color: var(--gold2); }

/* ---- 2. a tool's form opens as one clean row under the tools: fields side by side, the action on the right ---- */
.mq-tools .tool-pop { position: static; }
.mq-tools .tool-form {
  left: 0; right: 0; top: calc(100% + 8px); width: auto; padding: 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
}
.mq-tools .tool-form.tf-ban { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) auto; }
.mq-tools .tool-form.tf-warn { grid-template-columns: minmax(0, 1fr) minmax(100px, 120px) auto; }
.mq-tools .tool-form > input[type=hidden] { display: none; }
.mq-tools .tool-form .btn { width: auto; justify-self: end; }
@media (max-width: 560px) {
  .mq-tools .tool-form, .mq-tools .tool-form.tf-ban, .mq-tools .tool-form.tf-warn { grid-template-columns: minmax(0, 1fr); }
  .mq-tools .tool-form .btn { width: 100%; }
}
@media (max-width: 760px) {
  .mq-tools .tool-form { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; z-index: 70; }
}
.mq-tools .tool-form .dd, .mq-tools .tool-form .dd-btn { width: 100%; min-width: 0 !important; }
.mq-tools .tool-form > * { min-width: 0; }

/* ---- 8. Discord link: Discord on the left, a gold arrow, the Primordial account on the right ---- */
.dl-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 22px 0 18px; }
.dl-side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.dl-name { font: 600 17px/1.25 var(--title); color: var(--gold2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-name .uname { font: inherit; }
.dl-sub { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.dl-sub .ic { width: 16px; height: 16px; }
.dl-disc .dl-sub .ic { color: #8b95f0; }
.dl-av { box-sizing: border-box; overflow: hidden; display: inline-grid; place-items: center; width: var(--av); height: var(--av); flex: none; border-radius: 50%; padding: 4px; background: radial-gradient(circle, transparent 62%, rgba(201, 164, 90, .0) 63%); box-shadow: 0 0 0 2px #7d6238, 0 0 0 3px rgba(244, 217, 150, .35), 0 4px 14px rgba(0, 0, 0, .5); }
.dl-av .av { width: 100%; height: 100%; border-radius: 50%; clip-path: none; object-fit: cover; }
.dl-blank { display: grid; place-items: center; width: calc(var(--av) - 8px); height: calc(var(--av) - 8px); box-sizing: border-box; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a3f8a, #23264f); box-shadow: inset 0 0 0 1px rgba(201, 164, 90, .45); }
.dl-blank .ic { width: 46%; height: 46%; color: #e6e8ff; }
.dl-empty { align-self: center; gap: 10px; }
.dl-empty form { margin: 0; }
.dl-arrow { display: grid; place-items: center; width: 96px; }
.dl-arrow svg { width: 100%; height: auto; overflow: visible; }
.dl-arrow path { fill: none; stroke: rgba(201, 164, 90, .45); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dl-arrow .dl-gem { fill: #0f0d0a; }
.dl-pair.on .dl-arrow path { stroke: var(--gold); }
.dl-pair.on .dl-arrow .dl-gem { fill: var(--gold-dim); }
.dl-unlink { display: flex; justify-content: center; margin-bottom: 6px; }
@media (max-width: 520px) {
  .dl-pair { gap: 4px; }
  .dl-arrow { width: 54px; }
  .dl-side .av-wrap, .dl-side .dl-av { --av: 56px !important; }
  .dl-arrow { width: 40px; }
  .dl-empty .btn { padding: 7px 10px; font-size: 14px; }
  .dl-name { font-size: 15px; }
  .dl-sub { font-size: 13px; white-space: normal; }
}
.signin-card.dlink-card { max-width: 600px; }

/* ---- 6. board pages: breathing room between the breadcrumb and the tag tabs under it ---- */
.board-head.bh-center + .crumbs, .board-head + .crumbs { margin: 4px 0 26px; }
@media (max-width: 760px) { .board-head.bh-center + .crumbs, .board-head + .crumbs { margin: 2px 0 18px; } }

/* ---- 4. board pages: the bulk actions also at the top, left of Sort, while threads are ticked (forum2.js) ---- */
.bulk-top { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.bulk-top[hidden], .bulk-top-div[hidden] { display: none !important; }
.bulk-top select, .bulk-top .dd { width: auto; min-width: 120px; }
@media (max-width: 760px) { .bulk-top { flex-wrap: wrap; width: 100%; } .bulk-top select, .bulk-top .dd { flex: 1 1 120px; } }

/* ---- 5. board pages: New thread sits right above the Sort dropdown, right aligned in the same column ---- */
.toolbar:has(> .tb-col) { align-items: flex-end; }
.tb-col { align-self: flex-end; justify-content: flex-end; gap: 8px; }

/* ---- posts by members with a coloured non-staff role (Game Tester, Acolyte and so on): the post itself stays plain,
   only the author card takes a quiet edge and wash in the role colour, far softer than staff posts ---- */
.post-role .pa { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--pc) 45%, transparent); background-image: linear-gradient(90deg, color-mix(in srgb, var(--pc) 7%, transparent), transparent 70%), var(--grit-soft); }
.post-role .pa .av-wrap { box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 18%, transparent); }

/* ---- school emblems (assets/schools) sit like the old badges ---- */
img.school-ic { object-fit: contain; vertical-align: -3px; }

/* ---- 9. thread view: every gap between post cards (and above the Reply box) is the same 24 px, filled by a faint
   continuous Aztec step-fret band with a small fret medallion at the centre of the post text column, in line with
   the dot on each post's own divider. No separate lines ---- */
.post { position: relative; }
.post:has(+ .post-gap) { margin-bottom: 0; }
.post-gap + .reply-box, .post-gap + .post { margin-top: 0; }
.post-gap { --gx: calc(190px + (100% - 190px) / 2); position: relative; height: 24px; pointer-events: none; }
@media (min-width: 1600px) { .post-gap { --gx: calc(220px + (100% - 220px) / 2); } }
@media (max-width: 760px) { .post-gap { --gx: 50%; } }
.post-gap::after { content: ""; position: absolute; top: 0; bottom: 0; }
.post-gap::after { left: 0; right: 0; opacity: .11;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 11H3V8H6V5H9V2H23V5H26V8H29V11H32M0 13H3V16H6V19H9V22H23V19H26V16H29V13H32' fill='none' stroke='%23e3c27a' stroke-width='.9'/%3E%3Cpath d='M12 9H20V15H12Z' fill='none' stroke='%23c9a45a' stroke-width='.8'/%3E%3Cpath d='M16 10.3l1.7 1.7-1.7 1.7-1.7-1.7z' fill='%23e3c27a'/%3E%3C/svg%3E") 0 0 / 32px 24px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 10%, #000 30%, #000 70%, rgba(0,0,0,.35) 90%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 10%, #000 30%, #000 70%, rgba(0,0,0,.35) 90%, transparent 100%); }

/* ---- 10. staff posts (moderators and admins, .post-staff in the role colour, .post-ancient in gold) take ornate
   corner pieces on the left side, top and bottom: a stepped Aztec bracket, a small gem with wing curls. Regular
   members' posts stay plain ---- */
.post-staff::before, .post-ancient::before {
  content: ""; position: absolute; top: -3px; bottom: -3px; left: -3px; width: 68px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, #f6dc9c, #c99a4a);
  -webkit-mask: url("orn-staff-tl.svg?v=1") left top / 68px 68px no-repeat, url("orn-staff-bl.svg?v=1") left bottom / 68px 68px no-repeat;
  mask: url("orn-staff-tl.svg?v=1") left top / 68px 68px no-repeat, url("orn-staff-bl.svg?v=1") left bottom / 68px 68px no-repeat;
  filter: drop-shadow(0 0 3px rgba(242, 191, 71, .45)); opacity: .92;
}
.post-staff::before { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 70%, #fff3d0), color-mix(in srgb, var(--pc) 85%, #000)); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pc) 55%, transparent)); }

/* ---- 11. card states: words stacked top right like New (diamond and small caps), each its own colour, no pills.
   A locked thread reads faded red, its stone is red and the card takes a light red tint ---- */
.tcard .tc-flags { position: absolute; top: 18px; right: 20px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.tcard .tc-flags .tc-new { position: static; }
.tc-f-locked { color: #c98478; } .tc-f-locked i { background: #b8574a; box-shadow: 0 0 5px rgba(196, 88, 74, .55); }
.tc-f-hidden { color: #d9958c; } .tc-f-hidden i { background: #c0443a; box-shadow: 0 0 5px rgba(192, 68, 58, .55); }
.tc-f-pinned { color: #e8cf98; }
.tc-f-poll { color: #8fc2c4; } .tc-f-poll i { background: #6fb3b6; box-shadow: 0 0 5px rgba(111, 179, 182, .5); }
.tc-f-hot { color: #e9a172; } .tc-f-hot i { background: #e07a3a; box-shadow: 0 0 5px rgba(224, 122, 58, .5); }
.tcard.st-locked { background-image: linear-gradient(180deg, rgba(150, 52, 44, .13), rgba(150, 52, 44, .06)), var(--grit-soft, none); }
.tcard .tc-tick { top: 50%; }
/* the hover seal is exactly the card's height (cut by its left edge) and fainter, so the text stays easy to read */
.tc-sig .tc-seal { top: 50%; left: 0; height: 175%; width: auto; aspect-ratio: 1; margin: 0; translate: -50% -50%; }   /* bigger than the card, cut off at the top, bottom and left */
.tcard:hover .tc-sig { opacity: .07; }

/* ---- 12. thread poll: centred, plain options (no box round each) with gold radio marks, Vote then See results on
   one row. An ornate gold mount runs the height of each side, hooked round the panel's corners, a stepped fret and
   gem at the middle, thinning and fading toward top and bottom ---- */
.poll-wrap { position: relative; margin: 0 0 24px; }
.poll-wrap .poll.panel { margin: 0 auto; max-width: 520px; text-align: center; padding: 20px 28px 22px; }
.poll-wrap .poll h2 { justify-content: center; margin-bottom: 14px; }
.poll-wrap .poll-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.poll-wrap .poll-opt { border: 0; background: none; padding: 6px 10px; display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; }
.poll-wrap .poll-opt:hover { color: var(--gold2); }
.poll-wrap .poll-opt input { appearance: none; -webkit-appearance: none; margin: 0; width: 14px; height: 14px; border: 1px solid #b08d57; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .3); cursor: pointer; flex: none; }
.poll-wrap .poll-opt input[type=checkbox] { border-radius: 2px; }
.poll-wrap .poll-opt input::after { content: ""; width: 6px; height: 6px; transform: rotate(45deg) scale(0); background: var(--gold2); transition: transform .15s ease; }
.poll-wrap .poll-opt input:checked { border-color: var(--gold2); box-shadow: 0 0 6px rgba(242, 205, 130, .35); }
.poll-wrap .poll-opt input:checked::after { transform: rotate(45deg) scale(1); }
.poll-wrap .poll-foot { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: nowrap; }
.poll-wrap .poll-row { max-width: 360px; margin-left: auto; margin-right: auto; text-align: left; }
.poll-wrap::before, .poll-wrap::after { content: ""; position: absolute; top: -14px; bottom: -14px; width: 30px; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23e3c27a' stroke-linecap='round'%3E%3Cpath d='M12 30V21Q12 14 19 14H30' stroke-width='1.2'/%3E%3Cpath d='M12 11V15' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M12 4.5L14.5 7.5L12 10.5L9.5 7.5Z' fill='%23f4d996'/%3E%3C/svg%3E") center top / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg transform='matrix(1 0 0 -1 0 30)'%3E%3Cg fill='none' stroke='%23e3c27a' stroke-linecap='round'%3E%3Cpath d='M12 30V21Q12 14 19 14H30' stroke-width='1.2'/%3E%3Cpath d='M12 11V15' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M12 4.5L14.5 7.5L12 10.5L9.5 7.5Z' fill='%23f4d996'/%3E%3C/g%3E%3C/svg%3E") center bottom / 30px 30px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 90'%3E%3Cg fill='none' stroke='%23e3c27a' stroke-linejoin='round'%3E%3Cpath d='M12 20V27H8V33H5V57H8V63H12V70' stroke-width='1.1'/%3E%3Cpath d='M12 27H16V33H19V57H16V63H12' stroke-width='1.1'/%3E%3Cpath d='M12 33V57M8 45H16' stroke-width='.8' opacity='.7'/%3E%3Cpath d='M19 40Q25 38 28 30M19 50Q25 52 28 60' stroke-width='1'/%3E%3Cpath d='M5 40Q2 36 3 31M5 50Q2 54 3 59' stroke-width='.9' opacity='.8'/%3E%3C/g%3E%3Cpath d='M12 40.5L16.5 45L12 49.5L7.5 45Z' fill='%23f4d996'/%3E%3Ccircle cx='12' cy='16' r='1.4' fill='%23e3c27a'/%3E%3Ccircle cx='12' cy='74' r='1.4' fill='%23e3c27a'/%3E%3C/svg%3E") center / 30px 90px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e3c27a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23f0d390' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23e3c27a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 0L14.6 200L12 400L9.4 200Z' fill='url(%23g)'/%3E%3Cpath d='M18 30L19.2 200L18 370L16.8 200Z' fill='url(%23g)' opacity='.75'/%3E%3C/svg%3E") center 30px / 30px calc(100% - 60px) no-repeat; }
.poll-wrap::before { right: calc(50% + 260px - 12px); }
.poll-wrap::after { left: calc(50% + 260px - 12px); transform: scaleX(-1); }
@media (max-width: 640px) { .poll-wrap::before, .poll-wrap::after { display: none; } }

/* ---- 13. long posts: the author card rides down beside the post as you scroll (sticky under the top bar) instead of
   leaving a tall empty column ---- */
.post > .pa { display: block; }
.post > .pa > .pa-stick { position: sticky; top: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
@media (max-width: 760px) { .post > .pa > .pa-stick { position: static; flex-direction: row; text-align: left; } }
.poll-wrap .poll-opt { width: 170px; justify-content: flex-start; }
.poll-wrap .poll-opt input { width: 15px !important; height: 15px !important; min-width: 0; min-height: 0; padding: 0; }
/* Vote dead centre under the options, See results centred under Vote */
.poll-wrap .poll-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.poll-wrap .poll-foot .link-btn { font-size: 14px; }

/* ---- 13. the Ascendants rows: each Dominion's element plays behind its row while hovered (ascend-fx.js), clipped
   to the row, under the words ---- */
.board-row[data-fx] { position: relative; overflow: hidden; isolation: isolate; }
.board-row[data-fx] > .fx-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fx-crack-host.panel { all: unset; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block; }
.fx-crack-host .ptext { position: absolute; inset: 0; visibility: hidden; }
.fx-crack-host > canvas { opacity: .4; }

/* ---- 14. mod queue clean up: the title in the forum's own gold page head, the board filter right of the queue tabs
   like a board's Sort, three equal stat boxes, every tool on one centred row in the UI sans with a thin faint full
   border and square 3 px corners ---- */
.staff-ui .page-head h1 { font-family: var(--title); font-size: 1.65rem; font-weight: 600; letter-spacing: .02em; color: var(--gold2); }
.mq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.mq-head .mq-filter { flex: none; margin-left: auto; }
.mq-head .sort select, .mq-head .sort .dd { width: 200px; min-width: 180px; }
.staff-ui .mq-head .sort .dd-btn { background-color: #17130e !important; background-image: var(--grit-soft) !important; background-size: 512px 512px !important; border: 1px solid var(--line2) !important; border-radius: var(--r-s) !important; color: var(--text); font: 400 15px/1 var(--ui); }
.staff-ui .mq-head .sort .dd-btn:hover { border-color: var(--gold-dim) !important; }
.mq-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.mq-tools { flex-wrap: nowrap; gap: 4px; }
.staff-ui .mq-tools .tool, .mq-tools .tool {
  padding: 5px 8px !important; gap: 5px; font: 500 13px/1.2 var(--ui) !important; letter-spacing: 0 !important;
  border: 1px solid rgba(201, 164, 90, .18) !important; border-radius: 3px !important;
}
.mq-tools .tool::before, .mq-tools .tool::after { content: none !important; }
.mq-tools .tool:hover, .mq-tools .tool-pop[open] > summary.tool { border-color: rgba(201, 164, 90, .38) !important; }
@media (max-width: 1500px) { .mq-tools { flex-wrap: wrap; } }
@media (max-width: 640px) {
  .mq-head .mq-filter { width: 100%; margin-left: 0; }
  .mq-head .sort select, .mq-head .sort .dd { flex: 1; width: auto; min-width: 0; }
  .mq-stats { grid-template-columns: 1fr !important; }
}

/* ---- 15. DM page: the thin header keeps only Leave (the title lives in the shared page head) ---- */
.dm-card.pa { position: relative; }
.dm-head { justify-content: flex-end; padding: 10px 14px; }

/* ---- 16. the user menu button (avatar, name, chevron): no round bubble. Square 3 px corners, on hover a thin gold
   border worn in patches with a faint warm glow inside, one slow gold sheen crossing the border, the avatar ring a
   little brighter. The dropdown panel matches ---- */
.me-btn { position: relative; border-radius: 3px; border-color: transparent; }
.me-btn:hover, .me-btn[aria-expanded="true"] { background: radial-gradient(120% 140% at 50% 50%, rgba(227, 182, 100, .07), rgba(227, 182, 100, .02) 70%); border-color: transparent; }
.me-btn::before, .me-btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: 3px; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the border: gold, rubbed thin in two soft patches */
.me-btn::before { background: linear-gradient(90deg, rgba(214,178,106,.6), rgba(214,178,106,.25) 28%, rgba(214,178,106,.6) 46%, rgba(214,178,106,.55) 70%, rgba(214,178,106,.2) 84%, rgba(214,178,106,.6)); }
/* the sheen: a bright band that crosses the border once on hover */
.me-btn::after { background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 190, .95) 50%, transparent 60%) -100% 0 / 250% 100% no-repeat; }
.me-btn:hover::before, .me-btn[aria-expanded="true"]::before { opacity: 1; }
.me-btn:hover::after { opacity: 1; animation: me-sheen 1.6s ease-in-out 1 forwards; }
@keyframes me-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.me-btn .av-wrap, .me-btn img { transition: filter .25s ease; }
.me-btn:hover .av-wrap, .me-btn:hover > img { filter: brightness(1.14) saturate(1.08); }
.pop[data-pop="me"] .pop-panel.menu { border-radius: 3px; border-color: rgba(214, 178, 106, .4); background-image: radial-gradient(120% 60% at 50% 0, rgba(227, 182, 100, .05), transparent 70%); }
.pop[data-pop="me"] .pop-panel.menu a, .pop[data-pop="me"] .pop-panel.menu button { border-radius: 0; }

/* ---- 17. the Moderator role wears a crisp purple gavel instead of the diamond ---- */
.staff-tag.st-mod::before { width: 13px; height: 13px; transform: none; border: 0; background: #b07ad8;
  -webkit-mask: url("gavel.svg?v=1") center / 13px 13px no-repeat; mask: url("gavel.svg?v=1") center / 13px 13px no-repeat; }

/* ---- 18. phones (390 px): the board's day header tools wrap under it instead of running off the side, the logo
   and the day toggle are full 40 px tap targets ---- */
@media (max-width: 640px) {
  .tc-h .tb-right { flex-wrap: wrap; row-gap: 10px; width: 100%; margin-left: 0; min-width: 0; }
  .tc-h .tb-right .tb-div { display: none; }
  .tc-h .tb-right .sort { flex: 1 1 auto; min-width: 0; }
  .tc-h .tb-right .sort .dd, .tc-h .tb-right .sort select { flex: 1; width: auto; min-width: 0; }
  .tc-h .tb-right .tc-tools { flex: 1 1 100%; width: 100%; }
  .tc-h .tb-right .tc-find { flex: 1 1 auto; width: auto; min-width: 0; }
  .brand { min-height: 40px; display: inline-flex; align-items: center; }
  .tc-tog { min-height: 40px; }
}

/* the bell: no solid round hover disc (its hard rim cut through the glow), a soft fade instead */
.bell-btn, .bell-btn:hover, .bell-btn:focus-visible { background: radial-gradient(circle closest-side, rgba(28, 24, 19, .85), rgba(28, 24, 19, 0)) !important; box-shadow: none !important; }

/* list view: the card view's state words beside the author line, and a locked row tinted light red like its card */
.tr-words { display: inline-flex; align-items: center; gap: 12px; margin-left: 10px; vertical-align: middle; }
.tr-words .tc-new { position: static; font-size: 10.5px; }
.thread-row.st-locked { background-color: rgba(150, 52, 44, .11) !important; }   /* colour, not image: worn rows paint their wear as the background image */
.tc-seals symbol, .tc-sig .tc-seal, .tc-sig .tc-seal use { overflow: visible; }   /* no seal clipped at its own drawing box */
/* post action row (React, Quote, Save and so on): a little tighter above and below */
.post .pf { margin-top: 12px; padding-top: 8px; }
.post .pb { padding-bottom: 8px; }
.post .pacts .btn, .post .pacts button, .post .pacts a { padding-top: 3px; padding-bottom: 3px; }
.pa-txt { gap: 8px; } .pa-txt .pa-stats { margin-top: 6px; }   /* author card: a little air between name, title, character and stats */
/* footer links: a small gold dot between each, centred in the gap like the tag tabs */
.foot-links { gap: 22px; }
.foot-links a { position: relative; }
.foot-links a + a::before { content: ""; position: absolute; left: -12.5px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: rgba(201, 164, 90, .5); pointer-events: none; }
:is(.post, .dm-side) > .pa { padding-left: 14px; padding-right: 14px; }   /* equal room either side of the author card */

/* list view: a state column (Locked, Pinned, Poll, Busy, Hidden stacked) left of the replies and views; pinned rows
   stand apart with a gold edge and tint and a gold rule under the last one */
.thread-row { grid-template-columns: 44px minmax(0, 1fr) 96px 120px 150px; }
.thread-row:has(.tr-tick) { grid-template-columns: 22px 44px minmax(0, 1fr) 96px 120px 150px; }
@media (min-width: 1600px) { .thread-row { grid-template-columns: 44px minmax(0, 1fr) 110px 140px 190px; } .thread-row:has(.tr-tick) { grid-template-columns: 22px 44px minmax(0, 1fr) 110px 140px 190px; } }
.tr-state { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.tr-state .tc-new { position: static; font-size: 10.5px; }
.thread-row.sticky { background-color: rgba(201, 164, 90, .07); box-shadow: inset 3px 0 0 rgba(227, 194, 122, .75); }
.thread-row.sticky + .thread-row:not(.sticky) { border-top: 1px solid rgba(227, 194, 122, .45); box-shadow: 0 -3px 0 rgba(0, 0, 0, .25); }
@media (max-width: 760px) {
  .thread-row, .thread-row:has(.tr-tick) { grid-template-columns: 36px minmax(0, 1fr); }
  .thread-row:has(.tr-tick) { grid-template-columns: 28px 36px minmax(0, 1fr); }
  .tr-state { grid-column: -2; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .tr-state:empty { display: none; }
}
/* list rows: a large faint icon per state between the counts and the last post (lock red, pin gold, poll teal) */
.thread-row { position: relative; }
.tr-bgic { position: absolute; top: 50%; right: 112px; transform: translateY(-50%); display: flex; flex-direction: row-reverse; gap: 6px; pointer-events: none; }
.tr-bgic .ic { width: 34px; height: 34px; opacity: .16; }
.tr-bgic .trb-lock { color: #c9685a; } .tr-bgic .trb-pin { color: #e3c27a; } .tr-bgic .trb-poll { color: #6fb3b6; } .tr-bgic .trb-hidden { color: #c0443a; }
@media (min-width: 1600px) { .tr-bgic { right: 140px; } }
@media (max-width: 760px) { .tr-bgic { display: none; } }
/* pinned rows: inside the gold edge a faint ornate strip, a hairline with a row of tiny stepped diamonds, and a small
   winged stone at the middle of the edge */
.thread-row.sticky::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 10px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M5 3.2L6.6 6 5 8.8 3.4 6Z' fill='none' stroke='%23e3c27a' stroke-width='.7'/%3E%3Cpath d='M5 0V2.6M5 9.4V12' stroke='%23e3c27a' stroke-width='.5' stroke-opacity='.7'/%3E%3C/svg%3E") center top / 10px 12px repeat-y;
  -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.thread-row.sticky::after { content: ""; position: absolute; left: -4px; top: 50%; width: 14px; height: 22px; margin-top: -11px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M7 1C9.6 4.4 10.6 7.6 10.6 11S9.6 17.6 7 21C4.4 17.6 3.4 14.4 3.4 11S4.4 4.4 7 1Z' fill='%23b8862f' stroke='%23f0d390' stroke-width='1'/%3E%3Cpath d='M7 1C9.6 4.4 10.6 7.6 10.6 11S9.6 17.6 7 21Z' fill='%237a5520'/%3E%3Cpath d='M5.6 6.5 6.6 4.8 6.9 7.6Z' fill='%23fff3c8' fill-opacity='.9'/%3E%3C/svg%3E") center / 14px 22px no-repeat;
  filter: drop-shadow(0 0 3px rgba(242, 205, 130, .45)); }
/* the pinned edge stone: a crisp teal gem (vector, no blur filter) with a soft teal glow that slowly pulses */
.thread-row.sticky::after { left: -6px; width: 18px; height: 40px; margin-top: -20px; filter: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 48' shape-rendering='geometricPrecision'%3E%3Cpath d='M16 4C21.6 11.2 23.8 18 23.8 24S21.6 36.8 16 44C10.4 36.8 8.2 30 8.2 24S10.4 11.2 16 4Z' fill='%232a9a91' stroke='%23e9d08f' stroke-width='2'/%3E%3Cpath d='M16 4C21.6 11.2 23.8 18 23.8 24S21.6 36.8 16 44Z' fill='%23115a54'/%3E%3Cpath d='M16 4 12 24l4 20M16 4l4 20-4 20M8.2 24h15.6' fill='none' stroke='%23bff6ee' stroke-opacity='.5' stroke-width='.8'/%3E%3Cpath d='M15.2 8.2C12.6 12 10.4 17 10 22.4L13.6 21.6Z' fill='%23d8fff8' fill-opacity='.75'/%3E%3Cpath d='M13 13.5 14.6 11 15.2 15.4Z' fill='%23ffffff'/%3E%3C/svg%3E") center / 16px 24px no-repeat,
    radial-gradient(closest-side, rgba(80, 220, 205, .5), rgba(80, 220, 205, .16) 55%, rgba(80, 220, 205, 0)) center / 26px 34px no-repeat;
  animation: pin-gem-glow 3.2s ease-in-out infinite; }
@keyframes pin-gem-glow { 0%, 100% { background-size: 16px 24px, 24px 32px; } 50% { background-size: 16px 24px, 34px 42px; } }
.thread-row.sticky::after { left: -1px; }   /* glow kept inside the list box so its edge is never cut */
@keyframes pin-gem-glow { 0%, 100% { background-size: 16px 24px, 16px 30px; } 50% { background-size: 16px 24px, 20px 42px; } }

/* Mod queue: a few very quiet touches, not on every box: a small gold diamond on the top line of each count box,
   a short fret rule under each report's kind label, a tiny winged stone centred on each report card's top border */
.staff-ui .mq-stat { position: relative; }
.staff-ui .mq-stat::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #17130e; border: 1px solid rgba(227, 194, 122, .55); pointer-events: none; }
.staff-ui .mq-kind { position: relative; padding-bottom: 6px; }
.staff-ui .mq-kind::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 4'%3E%3Cpath d='M0 3.5H8V.5H12V3.5H20V.5H24V3.5H32V.5H36V3.5H46' fill='none' stroke='%23c9a45a' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 46px 4px no-repeat; }
.staff-ui .mq-card { position: relative; }
.staff-ui .mq-card::before { content: ""; position: absolute; left: 50%; top: -7px; width: 44px; height: 14px; margin-left: -22px; pointer-events: none; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M2 7Q11 3 17 6M42 7Q33 3 27 6' fill='none' stroke='%23c9a45a' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M22 2.2 25.8 7 22 11.8 18.2 7Z' fill='%2317130e' stroke='%23e3c27a' stroke-width='1'/%3E%3Cpath d='M22 4.6 23.9 7 22 9.4 20.1 7Z' fill='%23c9a45a'/%3E%3C/svg%3E") center / 44px 14px no-repeat; }
/* list row state icons: spaced out more and softly worn, eaten in fine grainy patches */
.tr-bgic { gap: 16px; }
.tr-bgic .ic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat; }
/* pinned outranks locked: gold, no red tint, Pinned listed first. A slow thin glint travels along part of a pinned
   row's border, a different edge, pace and start per row (e0 top, e1 bottom, e2 top then the left edge) */
.thread-row.sticky.st-locked { background-color: rgba(201, 164, 90, .07) !important; }
.tr-shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tr-shine::before, .tr-shine::after { content: ""; position: absolute; opacity: 0; background: linear-gradient(90deg, rgba(255, 236, 180, 0), rgba(255, 236, 180, .9), rgba(255, 236, 180, 0)); }
.tr-shine::before { left: 0; width: 22%; height: 1px; top: 0; animation: tr-glint-x var(--sl, 9s) ease-in-out var(--sd, 0s) infinite; }
.tr-shine.e1::before { top: auto; bottom: 0; animation-direction: reverse; }
.tr-shine.e2::after { left: 0; top: 0; width: 2px; height: 40%; background: linear-gradient(180deg, rgba(255, 236, 180, 0), rgba(255, 236, 180, .8), rgba(255, 236, 180, 0)); animation: tr-glint-y var(--sl, 9s) ease-in-out calc(var(--sd, 0s) + 2.5s) infinite; }
@keyframes tr-glint-x { 0% { transform: translateX(-30%); opacity: 0; } 8% { opacity: 1; } 30% { transform: translateX(480%); opacity: 0; } 100% { transform: translateX(480%); opacity: 0; } }
@keyframes tr-glint-y { 0% { transform: translateY(-110%); opacity: 0; } 8% { opacity: 1; } 26% { transform: translateY(260%); opacity: 0; } 100% { transform: translateY(260%); opacity: 0; } }
/* list rows alternate very slightly so runs of rows never smash together: pinned rows between two golds, plain rows
   a hair lighter every other one; locked rows keep their one red */
.threads > .thread-row.sticky:nth-child(even) { background-color: rgba(222, 182, 98, .12) !important; }
.threads > .thread-row.sticky:nth-child(odd) { background-color: rgba(201, 164, 90, .06) !important; }
.threads > .thread-row:not(.sticky):not(.st-locked):nth-child(even) { background-color: rgba(255, 240, 210, .018); }
.board-head.ph-acts .viewtog { margin-right: auto; }
/* pinned cards: a warm gold wash and a brighter gold rim instead of the locked red */
.tcard.st-pinned { background-image: linear-gradient(180deg, rgba(222, 182, 98, .12), rgba(201, 164, 90, .04)), var(--grit-soft, none); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .45); }
/* list rows: the last poster's small picture beside the time and name; the local clock time after "ago" */
.tr-last { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tr-last-txt { display: grid; justify-items: end; min-width: 0; }
.tr-last-who { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; overflow: visible; }
.tr-last-av { flex: none; display: inline-flex; }
.tr-last-av img, .tr-last-av .av { width: 20px; height: 20px; }
.clock-at { color: var(--muted); font-size: .92em; white-space: nowrap; }
.thread-row { grid-template-columns: 44px minmax(0, 1fr) 96px 120px 230px; }
.thread-row:has(.tr-tick) { grid-template-columns: 22px 44px minmax(0, 1fr) 96px 120px 230px; }
@media (min-width: 1600px) { .thread-row { grid-template-columns: 44px minmax(0, 1fr) 110px 140px 250px; } .thread-row:has(.tr-tick) { grid-template-columns: 22px 44px minmax(0, 1fr) 110px 140px 250px; } .tr-bgic { right: 200px; } }
.tr-bgic { right: 190px; }
@media (max-width: 760px) { .thread-row, .thread-row:has(.tr-tick) { grid-template-columns: 36px minmax(0, 1fr); } .thread-row:has(.tr-tick) { grid-template-columns: 28px 36px minmax(0, 1fr); } .tr-last-av { display: none; } }
/* hovering a row always shows, pinned and locked rows too (their tints no longer hide the hover) */
.threads > .thread-row:hover { background-color: rgba(240, 205, 130, .15) !important; }
.threads > .thread-row.st-locked:hover { background-color: rgba(190, 80, 64, .2) !important; }
/* who reacted: hovering (or focusing) a reaction chip shows the reaction's name and the people, newest first */
.react-wrap { position: relative; display: inline-flex; }
.react-who { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30; display: none; min-width: 120px; max-width: 220px; padding: 8px 12px; border: 1px solid rgba(201, 164, 90, .45); border-radius: 3px; background: #17130e; box-shadow: 0 8px 20px rgba(0, 0, 0, .55); font: 13px/1.5 var(--ui); color: var(--text); text-align: left; pointer-events: none; }
.react-who strong { display: block; margin-bottom: 3px; color: var(--gold2); font-weight: 600; }
.react-who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.react-who em { display: block; color: var(--muted); font-style: normal; }
.react-wrap:hover .react-who, .react-wrap:focus-within .react-who { display: block; }

/* post pictures: centred, two small gold corner pieces (left column style, mirrored on the next picture), each picture
   one of four variants so they never all look the same */
.pbody .pimg { display: block; position: relative; width: fit-content; max-width: 100%; margin: 14px auto; }
.pbody .pimg img { display: block; max-width: 100%; height: auto; }
.pbody .pimg::before, .pbody .pimg::after { content: ""; position: absolute; width: 46px; height: 46px; pointer-events: none; opacity: .85;
  background: linear-gradient(135deg, #f3dca0, #b98d43);
  -webkit-mask: url("orn-staff-tl.svg?v=1") 0 0 / 100% 100% no-repeat; mask: url("orn-staff-tl.svg?v=1") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.pbody .pimg.pc-a::before { left: -9px; top: -9px; }
.pbody .pimg.pc-a::after { right: -9px; bottom: -9px; transform: rotate(180deg); }
.pbody .pimg.pc-b::before { right: -9px; top: -9px; transform: scaleX(-1); }
.pbody .pimg.pc-b::after { left: -9px; bottom: -9px; transform: scaleY(-1); }
.pbody .pimg.pv1::before, .pbody .pimg.pv1::after { width: 38px; height: 38px; opacity: .7; }
.pbody .pimg.pv2::before, .pbody .pimg.pv2::after { width: 54px; height: 54px; opacity: .6; background: linear-gradient(135deg, #e9cf8f, #8f6a2c); }
.pbody .pimg.pv3::before, .pbody .pimg.pv3::after { width: 42px; height: 42px; background: linear-gradient(135deg, #fff0c4, #c99d52); opacity: .78; }
/* picture corner pieces sit ON the picture's corners, overlapping it */
.pbody .pimg::before, .pbody .pimg::after { z-index: 2; }
.pbody .pimg.pc-a::before { left: 4px; top: 4px; }
.pbody .pimg.pc-a::after { right: 4px; bottom: 4px; }
.pbody .pimg.pc-b::before { right: 4px; top: 4px; }
.pbody .pimg.pc-b::after { left: 4px; bottom: 4px; }
/* the same gap above and below a picture, also when it is the last thing in the post */
.pbody .pimg { margin: 18px auto; }
.pbody .pimg:last-child, .pbody > :last-child .pimg:last-child { margin-bottom: 18px; }
/* corner pieces flush on the picture's own corners, brighter so they read over it */
.pbody .pimg.pc-a::before { left: 0; top: 0; }
.pbody .pimg.pc-a::after { right: 0; bottom: 0; }
.pbody .pimg.pc-b::before { right: 0; top: 0; }
.pbody .pimg.pc-b::after { left: 0; bottom: 0; }
.pbody .pimg::before, .pbody .pimg::after { opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 4px rgba(242, 205, 130, .35)); }
.pbody .pimg:last-child { margin-bottom: 36px; }   /* matches the gap from the text above it */
/* author card stats: the two columns sit against the card's sides (Posts left aligned, Joined right aligned) so the
   gap to each edge is the same; centred cells made the short post count leave a much wider gap on the left */
:is(.post, .dm-side) > .pa .pa-stats { grid-template-columns: auto auto; justify-content: space-between; padding: 0 16px; box-sizing: border-box; }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(odd) { text-align: left; justify-self: start; }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(even) { text-align: right; justify-self: end; }
/* reaction chips: centred on the action row's line, the count centred on the face (no baseline drop) */
.post .pf { align-items: center; }
.post .reacts { align-self: center; display: flex; align-items: center; gap: 6px; }
.post .react { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; line-height: 1; }
.post .react b { display: block; line-height: 1; padding-top: 1px; }
.post .react img, .post .react svg { display: block; }

/* author card: clear room between name, title and character line */
:is(.post, .dm-side) > .pa .pa-txt { gap: 10px; }
:is(.post, .dm-side) > .pa .pa-name { margin-bottom: 2px; }
/* the rank pin and school icon have empty space inside their pictures on the left, so the line sat right of centre */
:is(.post, .dm-side) > .pa .pa-rank { transform: translateX(-4px); }
:is(.post, .dm-side) > .pa .pa-char { transform: translateX(-1px); }
/* a thin divider with a small gold diamond between the character line and Posts / Joined */
:is(.post, .dm-side) > .pa .pa-stats { position: relative; margin-top: 12px !important; padding-top: 14px; }
:is(.post, .dm-side) > .pa .pa-stats::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(201, 164, 90, 0), rgba(201, 164, 90, .45) 30%, rgba(201, 164, 90, .45) 70%, rgba(201, 164, 90, 0)); }
:is(.post, .dm-side) > .pa .pa-stats::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #1a150f; border: 1px solid rgba(227, 194, 122, .7); pointer-events: none; }
/* reaction count: the plain UI font, centred on the face */
.post .react b { font: 600 13px/1 var(--ui) !important; letter-spacing: 0; padding-top: 0 !important; transform: translateY(-1px); }

/* reactions sit in the post's bottom left corner, under the author card, as small round gold medallions (like the
   game's round close button) seated on the corner and running along the bottom border, the count on a tiny tab */
.post { padding-bottom: 0; }
.post > .pb, .post .pf { position: static !important; }
.post .reacts { position: absolute; left: -12px; bottom: -14px; z-index: 4; display: flex; gap: 4px; align-items: center; }
.post .reacts:empty { display: none; }
.post .react-wrap { position: relative; }
.post .react { position: relative; width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2a2015, #120e09 70%) !important; border: 1px solid #c99a4a !important;
  box-shadow: 0 0 0 2px #120e09, 0 0 0 3px rgba(227, 194, 122, .55), 0 2px 6px rgba(0, 0, 0, .7); }
.post .react.mine { border-color: #f0d390 !important; box-shadow: 0 0 0 2px #120e09, 0 0 0 3px rgba(242, 205, 130, .9), 0 0 10px rgba(242, 205, 130, .4); }
.post .react img, .post .react svg { width: 18px; height: 18px; }
.post .react b { position: absolute; right: -6px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px !important; border-radius: 8px; display: flex !important; align-items: center; justify-content: center;
  background: #1a150f; border: 1px solid rgba(227, 194, 122, .7); color: #f0d390; font: 600 10.5px/1 var(--ui) !important; transform: none !important; }
.post .react-who { left: 0; transform: none; }
@media (max-width: 760px) { .post .reacts { left: 6px; bottom: -14px; } }
/* the rank title smaller, and Acolyte (the base rank) shows no symbol */
.pa-rank, .pr-rank { font-size: 10.5px !important; letter-spacing: .14em; }
.rank-pin[src*="ranks/acolyte"] { display: none; }
:is(.post, .dm-side) > .pa .pa-rank { transform: none; }
:is(.post, .dm-side) > .pa .pa-rank:has(.rank-pin:not([src*="ranks/acolyte"])) { transform: translateX(-4px); }
/* rank title: normal case in the clean UI font, not spaced capitals */
.pa-rank, .pr-rank { font: 500 13px/1.3 var(--ui) !important; letter-spacing: 0 !important; text-transform: none !important; }
/* the reaction medallions sit inside the corner (nothing hangs past the card), room under the action row, and a slow
   gold glint crosses each medallion now and then so it reads as a button */
.post .reacts { left: 10px; bottom: 10px; }
.post .pf { padding-bottom: 12px; }
.post .react { overflow: hidden; }
.post .react::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 238, 190, .55) 50%, transparent 65%) -60px 0 / 200% 100% no-repeat;
  animation: react-glint 5.5s ease-in-out infinite; }
.post .react-wrap:nth-child(2) .react::after { animation-delay: 1.4s; }
.post .react-wrap:nth-child(3) .react::after { animation-delay: 2.6s; }
.post .react:hover::after { animation-duration: 1.6s; }
@keyframes react-glint { 0%, 70% { background-position: -60px 0; } 100% { background-position: 60px 0; } }
.post .react b { right: 1px; bottom: 1px; }
/* room at the foot of the author card for the reaction medallions so they never sit on Posts / Joined */
.post:has(.react) > .pa { padding-bottom: 58px; }
/* medallions seated right into the bottom left corner, on the corner accent, inside the card */
.post .reacts { left: 3px; bottom: 3px; }
.post:has(.react) > .pa { padding-bottom: 52px; }
/* the medallion glint runs a different way on neighbouring posts: left to right, top to bottom, bottom to top,
   right to left and the two diagonals, cycling down the thread so two stacked posts never match */
@keyframes rg-lr { 0%, 70% { background-position: -110px 0; } 100% { background-position: 110px 0; } }
@keyframes rg-rl { 0%, 70% { background-position: 110px 0; } 100% { background-position: -110px 0; } }
@keyframes rg-tb { 0%, 70% { background-position: 0 -110px; } 100% { background-position: 0 110px; } }
@keyframes rg-bt { 0%, 70% { background-position: 0 110px; } 100% { background-position: 0 -110px; } }
@keyframes rg-d1 { 0%, 70% { background-position: -110px -110px; } 100% { background-position: 110px 110px; } }
@keyframes rg-d2 { 0%, 70% { background-position: 110px -110px; } 100% { background-position: -110px 110px; } }
.post .react::after { background-size: 200% 200%; }
.post:nth-of-type(6n+1) .react::after { background-image: linear-gradient(90deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-lr; }
.post:nth-of-type(6n+2) .react::after { background-image: linear-gradient(180deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-tb; animation-duration: 6.2s; }
.post:nth-of-type(6n+3) .react::after { background-image: linear-gradient(135deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-d1; animation-duration: 5s; }
.post:nth-of-type(6n+4) .react::after { background-image: linear-gradient(180deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-bt; animation-duration: 6.8s; }
.post:nth-of-type(6n+5) .react::after { background-image: linear-gradient(90deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-rl; animation-duration: 5.8s; }
.post:nth-of-type(6n) .react::after { background-image: linear-gradient(45deg, transparent 12%, rgba(255, 238, 190, .16) 32%, rgba(255, 244, 210, .62) 50%, rgba(255, 238, 190, .16) 68%, transparent 88%); animation-name: rg-d2; animation-duration: 6.4s; }
/* the reaction medallion mount: a thin gold flourish runs up the left border from the medallion and ends in a small
   curl, and another runs along the bottom border to the right and curls, so the medallion sits in a little bracket */
.post .reacts::before { content: ""; position: absolute; left: -3px; bottom: -3px; width: 120px; height: 82px; pointer-events: none; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 82'%3E%3Cg fill='none' stroke='%23d9b56c' stroke-linecap='round'%3E%3Cpath d='M4 44V20Q4 12 9 9Q13 7 14 11Q14.6 14 11 14' stroke-width='1.1'/%3E%3Cpath d='M7 40V24' stroke-width='.6' stroke-opacity='.6'/%3E%3Cpath d='M42 78H96Q104 78 107 73Q109 69 105 68Q102 68 102 71' stroke-width='1.1'/%3E%3Cpath d='M44 75H99' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3Cpath d='M4 28.5l2 2-2 2-2-2z' fill='%23e3c27a'/%3E%3Cpath d='M71.5 76l2 2-2 2-2-2z' fill='%23e3c27a'/%3E%3C/svg%3E") 0 0 / 120px 82px no-repeat; }
/* the count tab sits outside the medallion's lower right, never over the face */
.post .react { overflow: visible; margin-right: 10px; }
.post .react::after { inset: 0; }
.post .react b { right: -13px; bottom: -3px; }
/* the upper flourish redrawn as a swirl: it leaves the medallion's top, sweeps up in an S and winds into a spiral
   (with a smaller tendril curl beside it), matching the bottom one's feel */
.post .reacts::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 82'%3E%3Cg fill='none' stroke='%23d9b56c' stroke-linecap='round'%3E%3Cpath d='M9 46C3 40 2 33 6 27C10 21 15 20 15 14C15 9 11 6 7 7C3 8 2 12 4 14.5C6 17 10 16 10 13C10 11 8 10.5 7 11.5' stroke-width='1.15'/%3E%3Cpath d='M6 30C10 30 13 32 13.5 35.5C13.8 38 12 39.5 10.3 38.8' stroke-width='.8' stroke-opacity='.8'/%3E%3Cpath d='M42 78H96Q104 78 107 73Q109 69 105 68Q102 68 102 71' stroke-width='1.1'/%3E%3Cpath d='M44 75H99' stroke-width='.6' stroke-opacity='.6'/%3E%3C/g%3E%3Cpath d='M4.6 21.5l1.6 1.6-1.6 1.6-1.6-1.6z' fill='%23e3c27a'/%3E%3Cpath d='M71.5 76l2 2-2 2-2-2z' fill='%23e3c27a'/%3E%3C/svg%3E") 0 0 / 120px 82px no-repeat; }
.thread-row.sticky::after { left: -7px !important; z-index: 3; transform: translateZ(0); image-rendering: auto; }   /* the pinned gem sits ON the gold edge bar, whole pixel so its edges stay smooth */
/* the count is its own little button on the medallion's lower right: clicking it opens the list of who reacted */
.post .react-wrap { position: relative; }
.post .react-n { position: absolute; left: 25px; bottom: -3px; z-index: 5; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #1a150f; border: 1px solid rgba(227, 194, 122, .7); color: #f0d390; font: 600 10.5px/1 var(--ui); }
.post .react-n:hover { border-color: #f0d390; background: #2a2015; }
.post .react-wrap.show-who .react-who { display: block; }
.post .react-who { bottom: calc(100% + 10px); }
/* the reaction medallion and its flourishes sit in the bottom left corner of the POST BOX (right of the author card
   divider), not under the author card */
.post .reacts { left: calc(190px + 3px); }
@media (min-width: 1600px) { .post .reacts { left: calc(220px + 3px); } }
.post:has(.react) > .pa { padding-bottom: 18px; }
.post:has(.react) .pf { padding-left: 64px; }
@media (max-width: 760px) { .post .reacts { left: 3px; } }
/* the reaction names written along the gold bottom line, just right of the medallions */
.post .react-names { position: absolute; left: calc(100% + 22px); bottom: 7px; white-space: nowrap; pointer-events: none;
  font: 600 11px/1 var(--ui); letter-spacing: .06em; color: #d9b56c; padding: 0 6px; background: #17130e; }
.post .react-names { left: 68.5px; transform: translateX(-50%); }   /* centred on the gold line between the medallion edge and the curl at its end */
/* the reaction medallion's shine lights the WHOLE medallion (face, ring and rim glow brighten together and settle),
   not a bar sweeping across; each post keeps its own timing */
.post .react::after { display: none; }
.post .react { animation: react-shine 5.5s ease-in-out infinite; }
.post:nth-of-type(6n+2) .react { animation-duration: 6.2s; animation-delay: .8s; }
.post:nth-of-type(6n+3) .react { animation-duration: 5s; animation-delay: 1.9s; }
.post:nth-of-type(6n+4) .react { animation-duration: 6.8s; animation-delay: 2.7s; }
.post:nth-of-type(6n+5) .react { animation-duration: 5.8s; animation-delay: 3.4s; }
.post:nth-of-type(6n) .react { animation-duration: 6.4s; animation-delay: 4.1s; }
.post .react-wrap:nth-child(2) .react { animation-delay: 1.4s; }
.post .react:hover { animation-duration: 1.8s; }
@keyframes react-shine {
  0%, 72%, 100% { filter: brightness(1); box-shadow: 0 0 0 2px #120e09, 0 0 0 3px rgba(227, 194, 122, .55), 0 2px 6px rgba(0, 0, 0, .7); }
  84% { filter: brightness(1.45); box-shadow: 0 0 0 2px #120e09, 0 0 0 3px rgba(255, 226, 160, .95), 0 0 12px rgba(242, 205, 130, .55), 0 2px 6px rgba(0, 0, 0, .7); }
}
/* the sweep is back but shaped to the medallion: a broad soft light clipped to the round disc and ring passes across
   the whole circle, never a straight bar sticking out */
.post .react::after { display: block !important; content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 69%, transparent 71%); mask: radial-gradient(circle, #000 69%, transparent 71%);
  background: linear-gradient(115deg, transparent 15%, rgba(255, 238, 190, .18) 35%, rgba(255, 244, 210, .6) 50%, rgba(255, 238, 190, .18) 65%, transparent 85%) 0 0 / 300% 100% no-repeat;
  animation: react-sweep 5.5s ease-in-out infinite; animation-delay: inherit; animation-duration: inherit; }
.post .react { animation-name: react-shine-soft; }
@keyframes react-sweep { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes react-shine-soft { 0%, 72%, 100% { filter: brightness(1); } 86% { filter: brightness(1.18); } }
.post .react::after { background-size: 120px 120px !important; }   /* the broad light is bigger than the disc, so the whole circle glows as it passes */
.post .reacts { bottom: 4px; }   /* 1 px more room under the medallion and its flourish */

/* the light starts and ends fully off the disc, so nothing sits half lit while it waits */
.post .react::after { background-repeat: no-repeat !important; }
/* the divider diamond above Posts / Joined gets a little accent: an outer diamond drawn as four short strokes with gaps
   at the points, framing the inner diamond */
:is(.post, .dm-side) > .pa .pa-stats::after { width: 17px; height: 17px; top: -8.5px; margin-left: -8.5px; transform: none; border: 0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 11 23 17 17 23 11 17Z' fill='%231a150f' stroke='%23e3c27a' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%23d9b56c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 5.5 28.5 14M28.5 20 20 28.5M14 28.5 5.5 20M5.5 14 14 5.5'/%3E%3C/g%3E%3C/svg%3E") center / 17px 17px no-repeat; }
/* the author card stays at the top of its post again (riding down on scroll pushed it into the corner pieces and made
   posts look different from each other) */
.post > .pa > .pa-stick { position: static !important; top: auto !important; }
/* the same room under Posts / Joined on every post, clear of the bottom corner pieces */
:is(.post, .dm-side) > .pa { padding-bottom: 44px !important; }
/* the top and bottom corner pieces take the same gold (the gradient ran down the whole post, so the bottom one was darker) */
.post-ancient::before { background: #ecc77a !important; }
.post-staff::before { background: color-mix(in srgb, var(--pc) 78%, #fff3d0) !important; }
.team-role::before { background: color-mix(in srgb, var(--rc) 78%, #fff3d0) !important; }
:is(.post, .dm-side) > .pa { padding-top: 44px !important; }   /* the same room above the picture as below the join date */
:is(.post, .dm-side) > .pa .pa-stats { padding: 0 22px !important; }
/* Joined on the left, Posts on the right */
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(1) { order: 2; grid-column: 2; text-align: right; justify-self: end; }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(2) { order: 1; grid-column: 1; grid-row: 1; text-align: left; justify-self: start; }
/* Posts centred under the diamond divider, then Joined as one small centred line along the bottom */
:is(.post, .dm-side) > .pa .pa-stats { display: flex !important; flex-direction: column; align-items: center; gap: 8px; padding: 0 !important; }
:is(.post, .dm-side) > .pa .pa-stats > div { order: 0 !important; text-align: center !important; justify-self: auto !important; grid-column: auto !important; grid-row: auto !important; display: flex; flex-direction: column; align-items: center; }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(2) { flex-direction: row; gap: 5px; align-items: baseline; font-size: 11.5px; color: var(--muted); }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(2) dt, :is(.post, .dm-side) > .pa .pa-stats > :nth-child(2) dd { font-size: 11.5px; margin: 0; }
:is(.post, .dm-side) > .pa .pa-stats > :nth-child(2) dd { color: var(--muted); }
:is(.post, .dm-side) > .pa .pa-stats { padding-top: 22px !important; }   /* room between the diamond divider and Posts */
:is(.post, .dm-side) > .pa .pa-joined, .pa-joined { font-size: 10.5px !important; line-height: 1.2 !important; color: var(--muted) !important; letter-spacing: .02em; margin-top: -2px; font-weight: 400 !important; }   /* the join date small and quiet under the title */
.pa-char .school-ic, .pa-char img.emo, .pa-char svg { width: 15px !important; height: 15px !important; }   /* the class icon on author cards a little smaller */
:is(.post, .dm-side) > .pa .pa-char { margin-top: 6px; }   /* a little more room above the character line */
/* perf: the looping shimmers pause while their post or row is off screen (logo-o.js toggles .fx-idle) */
.post.fx-idle .react, .post.fx-idle .react::after, .thread-row.sticky.fx-idle::after, .thread-row.fx-idle .tr-shine::before,
.thread-row.fx-idle .tr-shine::after, .fchip.fx-idle .spk, .fchip.fx-idle .fchip-sig::after, .fchip.fx-idle .fchip-sig::before { animation-play-state: paused; }

/* a second divider above the title, the same line and framed diamond as the one above Posts, equal room above and below */
:is(.post, .dm-side) > .pa .pa-rank { position: relative; padding-top: 31px !important; margin-top: 1px !important; }
:is(.post, .dm-side) > .pa .pa-rank::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 17px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 11 23 17 17 23 11 17Z' fill='%231a150f' stroke='%23e3c27a' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%23d9b56c' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M20 5.5 28.5 14M28.5 20 20 28.5M14 28.5 5.5 20M5.5 14 14 5.5'/%3E%3C/g%3E%3C/svg%3E") center / 17px 17px no-repeat,
    linear-gradient(90deg, rgba(201, 164, 90, 0), rgba(201, 164, 90, .45) 30%, rgba(201, 164, 90, .45) 70%, rgba(201, 164, 90, 0)) center / 100% 1px no-repeat; }
:is(.post, .dm-side) > .pa .pa-rank { align-self: stretch; width: 100%; box-sizing: border-box; }   /* full card width so its divider matches the one above Posts */
:is(.post, .dm-side) > .pa .pa-rank { text-align: center !important; justify-content: center; }   /* the title centred on the card */
/* both author card dividers drawn the same way: one hairline and a smaller framed diamond (13 px) */
:is(.post, .dm-side) > .pa .pa-stats::after { display: none !important; }
:is(.post, .dm-side) > .pa .pa-stats::before, :is(.post, .dm-side) > .pa .pa-rank::before { content: "" !important; position: absolute; left: 8% !important; right: 8% !important; top: 0 !important; height: 13px !important; border: 0 !important; transform: none !important; margin: 0 !important; width: auto !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 11 23 17 17 23 11 17Z' fill='%231a150f' stroke='%23e3c27a' stroke-width='1.8'/%3E%3Cg fill='none' stroke='%23d9b56c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 5.5 28.5 14M28.5 20 20 28.5M14 28.5 5.5 20M5.5 14 14 5.5'/%3E%3C/g%3E%3C/svg%3E") center / 13px 13px no-repeat,
    linear-gradient(90deg, rgba(201, 164, 90, 0), rgba(201, 164, 90, .45) 30%, rgba(201, 164, 90, .45) 70%, rgba(201, 164, 90, 0)) center / 100% 1px no-repeat !important; }
:is(.post, .dm-side) > .pa .pa-stats { padding-top: 20px !important; margin-top: 10px !important; }
:is(.post, .dm-side) > .pa .pa-rank { padding-top: 27px !important; }

/* ---- staff posts: the whole box toned in the role colour, fading down (no 512 px grit tile seams), readable text with
   a soft dark shadow, and only the top left corner piece ---- */
.post-staff { background-image: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--pc) 60%, #2b2a8a) 13%, transparent), color-mix(in srgb, color-mix(in srgb, var(--pc) 60%, #2b2a8a) 7%, transparent) 45%, color-mix(in srgb, color-mix(in srgb, var(--pc) 60%, #2b2a8a) 3%, transparent)), var(--grit-soft);
  background-size: 100% 100%, 512px 512px; background-repeat: no-repeat, repeat; }
.post-staff .pa { background-image: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--pc) 60%, #2b2a8a) 12%, rgba(0, 0, 0, .22)), color-mix(in srgb, color-mix(in srgb, var(--pc) 60%, #2b2a8a) 5%, rgba(0, 0, 0, .14)) 60%, rgba(0, 0, 0, .1)), var(--grit-soft);
  background-size: 100% 100%, 512px 512px; background-repeat: no-repeat, repeat; }
.post-staff .pa, .post-staff .pbody { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7); }
.post-staff .pbody { color: color-mix(in srgb, var(--pc) 30%, #a98bf0); }
.post-staff::before { -webkit-mask: url("orn-staff-tl.svg?v=1") left top / 68px 68px no-repeat; mask: url("orn-staff-tl.svg?v=1") left top / 68px 68px no-repeat; }
.post-staff .pa .uname.rc, .post-staff .pa .pa-rank { color: color-mix(in srgb, var(--pc) 30%, #a98bf0) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7); }
/* post time and number read "16 hours ago | #6" */
.pnum::before { content: "|"; display: inline-block; margin: 0 10px 0 2px; color: var(--muted); opacity: .55; }
.post-staff .pbody strong, .post-staff .pbody b, .post-staff .pbody h2, .post-staff .pbody h3 { color: inherit; }
/* off screen the reaction shine stops and resets to unlit instead of freezing mid glow, so scrolling never shows it stuck lit */
.post.fx-idle .react, .post.fx-idle .react::after { animation: none !important; }

/* the staff corner piece reads clearly over the violet wash: a light role tint with a dark edge, not a dim line */
.post-staff::before { background: color-mix(in srgb, var(--pc) 30%, #a98bf0) !important; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px color-mix(in srgb, var(--pc) 60%, transparent)); opacity: 1; }
/* the sweep's light rests OFF the disc, so before its delay runs out or while paused off screen the medallion is never stuck lit */
.post .react::after { background-position: 100% 0; }

/* ---- 19. DM page laid out like a thread post: each profile card is the thread author card (same markup via
   author_card, the same rules via :is(.post, .dm-side) > .pa above, 190 px wide and 220 px from 1600 px like .post),
   joined straight onto the chat panel with no gutter, so the card's inner border, the gold vine drop under it and the
   chat panel's edge are one straight line. The corner pieces are the thread's gold Aztec brackets on each card's
   outer side, mirrored on the right. The chat panel fits the window under the page head ---- */
.dm.dm-duo { grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 0; }
@media (min-width: 1600px) { .dm.dm-duo { grid-template-columns: 220px minmax(0, 1fr) 220px; } }
.dm-duo .dm-card.pa { padding: 44px 14px !important; background-color: var(--bg2); position: relative; z-index: 1; }
.dm-duo .dm-card .av-wrap { --av: 72px !important; }
.dm-duo .dm-left .dm-card { margin-right: -1px; border-radius: var(--r) 0 0 var(--r); }
.dm-duo .dm-right .dm-card { margin-left: -1px; border-radius: 0 var(--r) var(--r) 0; }
.dm-duo .dm-main { border-radius: 0; height: calc(100vh - 352px); min-height: 520px; }

/* ---- 20. Conclave cards in their role colour (lib/layout.php card_accent gives --pc: the role icon colour, readable
   on the dark page, the Forum Bot in its bronze). Only Conclave cards wear corner pieces: the stepped bracket and gem
   with its flourish reaching on along both edges and fading out (orn-dm-corner-tl/bl.svg, the same corner drawn
   further). Plain members get a clean framed card. The separate vine strips under the DM cards are gone ---- */
.dm-card.pa::before, .dm-card.pa::after { content: none; }
.dm-card.card-conclave::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: -3px; width: 132px; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--pc) 85%, #fff3d0); opacity: .95;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 3px color-mix(in srgb, var(--pc) 45%, transparent));
  -webkit-mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat;
  mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat; }
.dm-right .dm-card.card-conclave::before { left: auto; right: -3px; transform: scaleX(-1); }
/* the card frame and wash in the role colour */
.dm-card.card-conclave { border-color: color-mix(in srgb, var(--pc) 42%, transparent) !important; background-color: #16120d;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--pc) 9%, transparent), transparent 70%), var(--grit-soft); }
.dm-card.card-conclave .av-wrap { box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 35%, transparent); }

/* thread posts: the same reaching corner, in the role colour (staff keep only the top one, Ancient top and bottom) */
.post-staff::before, .post-ancient::before { width: 132px !important;
  background: color-mix(in srgb, var(--pc, #e3b04f) 85%, #fff3d0) !important; opacity: .95 !important;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 3px color-mix(in srgb, var(--pc, #e3b04f) 45%, transparent)) !important;
  -webkit-mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat !important;
  mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat !important; }
.post-staff::before { -webkit-mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat !important; mask: url("orn-dm-corner-tl.svg?v=1") left top / 132px 132px no-repeat !important; }
/* staff post wash, text and card in their own role colour (no violet base under every role) */
.post-staff { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pc) 11%, transparent), color-mix(in srgb, var(--pc) 5%, transparent) 45%, color-mix(in srgb, var(--pc) 2%, transparent)), var(--grit-soft); }
.post-staff .pa { background-image: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, rgba(0, 0, 0, .22)), color-mix(in srgb, var(--pc) 4%, rgba(0, 0, 0, .14)) 60%, rgba(0, 0, 0, .1)), var(--grit-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent); }
.post-staff .pbody { color: color-mix(in srgb, var(--pc) 28%, #e8dfcf); }
.post-staff .pa .uname.rc, .post-staff .pa .pa-rank { color: var(--pc) !important; }

/* member profile: the big card and its flourishes in the role colour, the side boxes' flourishes too. A plain
   member's profile card has no corner brackets */
.profile.card-conclave { border-color: color-mix(in srgb, var(--pc) 45%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 16%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--pc) 8%, transparent), transparent 75%), var(--grit-soft); }
.profile.card-conclave .av-wrap { box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 30%, transparent); }
.profile:not(.card-conclave) > .orn-tl, .profile:not(.card-conclave) > .orn-br, .profile:not(.card-conclave) > .orn-tr, .profile:not(.card-conclave) > .orn-bl { display: none; }
:is(.profile.card-conclave, .pr-side.card-conclave > .panel) > .orn { background: color-mix(in srgb, var(--pc) 85%, #fff3d0) !important; opacity: .85; }
:is(.profile.card-conclave, .pr-side.card-conclave > .panel) > :is(.orn-t, .orn-l, .orn-r) { -webkit-mask: url("orn-side-b.svg?v=2") center / contain no-repeat; mask: url("orn-side-b.svg?v=2") center / contain no-repeat; }
:is(.profile.card-conclave, .pr-side.card-conclave > .panel) > .orn-b { -webkit-mask: url("orn-side-t.svg?v=2") center / contain no-repeat; mask: url("orn-side-t.svg?v=2") center / contain no-repeat; }
:is(.profile.card-conclave, .pr-side.card-conclave > .panel) > :is(.orn-tl, .orn-tr) { -webkit-mask: url("orn-bracket-tl.svg?v=2") center / contain no-repeat; mask: url("orn-bracket-tl.svg?v=2") center / contain no-repeat; }
:is(.profile.card-conclave, .pr-side.card-conclave > .panel) > :is(.orn-br, .orn-bl) { -webkit-mask: url("orn-bracket-br.svg?v=2") center / contain no-repeat; mask: url("orn-bracket-br.svg?v=2") center / contain no-repeat; }
.pr-side.card-conclave > .panel { border-color: color-mix(in srgb, var(--pc) 32%, transparent); }

/* ---- 21. DM messages: plain text under the name and time line, no box, frame or fill round each message, like a
   clean chat log. Pictures, names, times and the left and right sides stay ---- */
.dm-bubble, .dm-bubble + .dm-bubble, .dm-group-run.mine .dm-bubble, .dm-bubble.ancient { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 4px 4px; }
.dm-bubble::after { content: none !important; }
.dm-bubble:target { background: rgba(227, 194, 122, .07) !important; }
.dm-group-run.mine .dm-bubble { text-align: right; }
/* only Ancient cards wear both corners. Every other Conclave role (GM, Moderator, Admin, Forum Moderator, the bot)
   keeps the bottom corner only, on DM cards and thread posts alike */
.dm-card.card-conclave:not(.dm-ancient)::before { -webkit-mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat; mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat; }
.post-staff:not(.post-ancient)::before { -webkit-mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat !important; mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 132px 132px no-repeat !important; }
/* with two or more reactions the names start just past the last medallion, never over one (each medallion with its
   count tab takes 56 px). One reaction keeps the centred spot on the gold line */
.post .react-names:not([style*="--rc:1"]) { left: calc(var(--rc) * 56px + 10px); transform: none; }
/* the last-post avatar sits in front of the name, not after it */
.tr-last-who { display: inline-flex; align-items: center; gap: 6px; }
.tr-last-who .tr-last-av { order: -1; margin: 0; }

/* the breadcrumb sits above the page title, small and centred, the head keeps even room above and below */
.page-head { margin-top: 30px; }
.page-head > .crumbs { justify-content: center; margin: 0 0 12px; font-size: .84rem; }
.page-head > .crumbs .ic { width: 12px; height: 12px; }
@media (max-width: 760px) { .page-head { margin-top: 20px; } .page-head > .crumbs { margin-bottom: 8px; padding: 0 8px; } }

/* off screen fx rest, on screen they start again from rest. Paused (.fx-idle from logo-o.js) every shimmer stops at its
   resting look, never frozen on a lit frame: the medallion sweep's light is hidden and its glow unlit, the pinned gem
   back to its small glow, the glints and tab sparks dark. Back on screen the class goes at once and each animation
   restarts, and while its delay runs it already shows its first (resting) frame instead of the bare base style */
.post .react, .post .react::after, .tr-shine::before, .tr-shine::after, .thread-row.sticky::after, .fchip .spk { animation-fill-mode: backwards; }
.post.fx-idle .react { animation: none !important; filter: none !important; }
.post.fx-idle .react::after { animation: none !important; opacity: 0 !important; }
.thread-row.sticky.fx-idle::after { animation: none !important; background-size: 16px 24px, 16px 30px !important; }
.thread-row.fx-idle .tr-shine::before, .thread-row.fx-idle .tr-shine::after, .fchip.fx-idle .spk { animation: none !important; opacity: 0 !important; }
.fchip.fx-idle .fchip-sig::before, .fchip.fx-idle .fchip-sig::after { animation: none !important; }

/* ---- 21. phones (760 px and under): post cards in one tidy column ----
   Ancient cards wear the reaching corner on all four corners (the right ones mirrored). The author card is the
   picture with one left aligned stack beside it. The reactions sit in their own row above the actions, the actions
   are one evenly spaced row (two even rows when they do not fit), never a gap where a hidden label was */
@media (max-width: 760px) {
  .post-ancient::before { left: -3px !important; right: -3px !important; width: auto !important;
    -webkit-mask: url("orn-dm-corner-tl.svg?v=1") left top / 96px 96px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 96px 96px no-repeat, url("orn-dm-corner-tr.svg?v=1") right top / 96px 96px no-repeat, url("orn-dm-corner-br.svg?v=1") right bottom / 96px 96px no-repeat !important;
    mask: url("orn-dm-corner-tl.svg?v=1") left top / 96px 96px no-repeat, url("orn-dm-corner-bl.svg?v=1") left bottom / 96px 96px no-repeat, url("orn-dm-corner-tr.svg?v=1") right top / 96px 96px no-repeat, url("orn-dm-corner-br.svg?v=1") right bottom / 96px 96px no-repeat !important; }
  .post-staff:not(.post-ancient)::before { width: 96px !important;
    -webkit-mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 96px 96px no-repeat !important; mask: url("orn-dm-corner-bl.svg?v=1") left bottom / 96px 96px no-repeat !important; }

  /* author card: picture, then name, rank, character, Azurine and the small lines left aligned in one column */
  .post > .pa { padding: 16px 18px !important; }
  .post:has(.react) > .pa { padding-bottom: 16px !important; }
  .post > .pa > .pa-stick { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; text-align: left !important; }
  .post > .pa > .pa-stick { align-items: start; }
  .post > .pa .pa-rank { display: block !important; width: auto !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
  .post > .pa .pa-txt { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-items: start; gap: 4px !important; min-width: 0; }
  .post > .pa .pa-txt > * { margin: 0 !important; text-align: left !important; justify-self: start !important; transform: none !important; max-width: 100%; }
  .post > .pa .pa-rank::before, .post > .pa .pa-rank::after, .post > .pa .pa-stats::before, .post > .pa .pa-stats::after { display: none !important; }
  .post > .pa .pa-name { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .post > .pa .pa-char { flex-wrap: wrap; row-gap: 2px; }
  .post > .pa .pa-stats { display: flex !important; flex-direction: row !important; padding: 0 !important; margin: 0 !important; width: auto; }
  .post > .pa .pa-stats > div { flex-direction: row !important; gap: 5px; align-items: baseline !important; font-size: 12.5px; }
  .post > .pa .pa-stats dt, .post > .pa .pa-stats dd { font-size: 12.5px !important; }
  .post > .pa .pa-joined { font-size: 12px !important; }
  .post > .pa .pa-badges { justify-content: flex-start; }

  /* reactions: their own row, inside the card, no corner bracket */
  .post .pf { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 10px; padding-left: 0 !important; padding-bottom: 8px !important; }
  .post .motif { display: none !important; }
  .post .reacts { position: static !important; align-self: flex-start; width: 100%; justify-content: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; left: auto !important; bottom: auto !important; }
  .post .reacts:empty { display: none; }
  .post .reacts::before { display: none !important; }
  .post .react-names { position: static !important; transform: none !important; white-space: normal; font-size: 12px; margin-left: 4px; }
  .post .react-who { left: 0; right: auto; max-width: calc(100vw - 48px); }

  /* actions: one even row, two even rows when there are more than fit */
  .post .pacts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 2px; margin: 0 !important; width: 100%; justify-items: center; }
  .post .pacts > form, .post .pacts > .pop { display: flex; justify-content: center; width: 100%; }
  .post .pacts .quote-pair { display: contents; }
  .post .pacts .mq-toggle { display: none !important; }
  .post .pacts .act { min-width: 40px !important; min-height: 44px !important; width: 100%; padding: 0 !important; justify-content: center; }
  .post .pacts > .act.muted.small { grid-column: 1 / -1; min-height: 0 !important; font-size: 12px; }
  .post .pacts .pop-panel { left: 0; right: auto; }

  /* footer: the links in an even centred grid, no dots left hanging at a line start */
  .foot-in { align-items: center !important; text-align: center; }
  .foot-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 0 28px !important; width: 100%; }
  .foot-links a { white-space: nowrap; }
  .foot-links a + a::before { display: none; }

  /* search: every field the full width, the Titles only tick and the button share the last line */
  .search-form { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
  .search-form > input[type=search], .search-form > input[name=q], .search-form > select, .search-form > .dd, .search-form > input[name=author], .search-form > input[type=text] { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  .search-form > .btn, .search-form > button { margin-left: auto; }
  /* the Conclave page: one card the full width per line */
  .team-cards { grid-template-columns: minmax(0, 1fr) !important; }
  /* small tags (BOT) stay readable */
  .bot-tag { font-size: 10.5px !important; }

  /* formatting help: each row stacks, what you type over what you get, code wraps instead of running off */
  .help-tbl, .help-tbl tbody, .help-tbl tr, .help-tbl td { display: block !important; width: 100% !important; }
  .help-tbl thead, .help-tbl tr:first-child:has(th) { display: none !important; }
  .help-tbl tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .help-tbl td { padding: 4px 0 !important; border: 0 !important; }
  .pbody pre, .help-tbl pre, .prose pre, pre.code, pre.code code { white-space: pre-wrap !important; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  .pbody img, .pbody video, .pbody iframe { max-width: 100%; height: auto; }

  /* reaction medallions and the post number big enough to tap */
  .post .react { width: 40px !important; height: 40px !important; }
  .post .react-n { left: 30px; min-width: 20px; height: 20px; font-size: 11.5px; }
  .post .pnum { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
}

/* ---- 22. usernames always in the case they are written: Cinzel has no lowercase, so a name inside a Cinzel title
   (the profile header and the profile card) is set in Alegreya, which does, at the same weight and colour ---- */
.uname { text-transform: none !important; font-variant-caps: normal !important; }
:is(h1, h2, h3, h4, .page-head, .profile, .pc-txt, .team-card) .uname { font-family: "Alegreya", Georgia, serif !important; letter-spacing: .01em; }

/* ---- 23. no faint motif watermarks anywhere (forum.js no longer adds them), side and corner ornaments are crisp SVG ---- */
.motif { display: none !important; }

/* ---- 24. private message page: room under the reply box, and a grand gold filigree in the bare space under each
   side card (the other member bottom left, you bottom right, mirrored). Crisp SVG, the site's line weight ---- */
.dm-duo .dm-compose { padding-bottom: 26px !important; }
.dm.dm-duo { margin-bottom: 44px; }
@media (min-width: 761px) {
  .dm.dm-duo { position: relative; }
  /* hung off each side card so its corner sits right where the card meets the reply box */
  .dm-duo .dm-side::after { content: ""; position: absolute; top: 100%; width: 128px; height: 128px; margin-top: -2px; pointer-events: none; opacity: .9; z-index: 0;
    background: url("orn-dm-flourish-bl.svg?v=1") left bottom / 128px 128px no-repeat; }
  .dm-duo .dm-left::after { right: -6px; transform: scale(-1, -1); }
  .dm-duo .dm-right::after { left: -6px; transform: scaleY(-1); }
}

/* ---- 25. the busy bar (forum.js Busy): a thin gold line along the bottom of the box being worked on, with the theme
   glow, a short status just above it at the left (where boxes are empty, the buttons sit right), Retry on a failure ---- */
.pb-prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; display: flex; flex-direction: column-reverse; align-items: flex-start; }
.pb-track { position: relative; width: 100%; height: 3px; overflow: hidden; background: rgba(201, 164, 90, .14); border-radius: 2px; }
.pb-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 4%; border-radius: 2px;
  background: linear-gradient(90deg, #b8913f, #f3d790 60%, #fff3cf); box-shadow: 0 0 8px rgba(242, 205, 130, .75), 0 0 2px #fff3cf; transition: width .25s ease; }
.pb-prog.run .pb-track i { width: 38%; animation: pb-run 1.25s cubic-bezier(.45, .05, .55, .95) infinite; transition: none; }
@keyframes pb-run { 0% { left: -38%; } 100% { left: 100%; } }
.pb-lbl { margin: 0 0 6px 10px; padding: 3px 10px; border-radius: 4px; background: rgba(14, 11, 8, .92); border: 1px solid rgba(201, 164, 90, .45);
  color: #f0d390; font: 500 12.5px/1.35 var(--ui); max-width: calc(100% - 16px); }
.pb-prog.err { pointer-events: auto; flex-direction: row; flex-wrap: wrap-reverse; justify-content: flex-start; align-items: center; gap: 6px; padding-left: 10px; }
.pb-prog.err .pb-track { flex: 0 0 100%; margin-left: -10px; }
.pb-prog.err .pb-track i { background: #d0644f; box-shadow: 0 0 8px rgba(208, 100, 79, .6); }
.pb-prog.err .pb-lbl { color: #f1b7a8; border-color: rgba(208, 100, 79, .55); margin: 0 0 6px; }
.pb-retry, .pb-x { margin-bottom: 6px; min-height: 30px; padding: 3px 12px; border-radius: 4px; border: 1px solid rgba(201, 164, 90, .6); background: #2a2015; color: #f0d390; font: 600 12.5px var(--ui); cursor: pointer; }
.pb-x { padding: 3px 9px; }
.pb-retry:hover, .pb-x:hover { background: #3a2c1a; }
.pb-busy button[disabled], .pb-busy input[type=submit][disabled] { opacity: .55; cursor: progress; }
@media (max-width: 760px), (pointer: coarse) { .pb-retry, .pb-x { min-height: 40px; } .pb-lbl { font-size: 13px; } }