/* A guild's pages (characters/guild*.php, forum/guild.php; website/readme.md, "Guilds"): the heading with the guild's
   picture blended across it and fading into the page, the tabs, the overview, the members, the forum's boards and the
   guild's own panel. Every skin: arcane and living vines carry it on their dark slab (rims kept, end runes and vines
   at the sides), parchment prints it on the paper inside an inked double rule, modern holds it in rounded glass. */

.guild-wrap { max-width: 1240px; }
.guild-page { --war: #e5573f; --war-rgb: 229, 87, 63; --ally: #7fc7ff; }
.guild-page .gi { width: 16px; height: 16px; }

/* ---------- the heading ---------- */

.h-title.guild-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 26px;
  height: auto;
  min-height: 150px;
  padding: 30px 6px 26px;
  overflow: visible;
  isolation: isolate;
  white-space: normal;
  color: var(--text-1);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.h-title.guild-head::before, .h-title.guild-head::after { content: none; }
.guild-head.has-banner { min-height: 236px; align-items: end; }
.guild-head .slab-end { z-index: 1; }
/* the picture: under everything in the heading, blended with the slab (or paper, or glass) it lies on, fading out at
   its foot and its ends; the focal point stays in view whatever the width */
.guild-banner {
  position: absolute;
  inset: 0 calc(-1 * var(--plate, 0px));
  z-index: -1;
  overflow: hidden;
  opacity: var(--gb-op, 0.8);
  mix-blend-mode: var(--gb-blend, normal);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.55) 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.55) 70%, transparent);
  mask-composite: intersect;
  transition: opacity 300ms var(--ease);
}
.guild-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--gb-x, 50%) var(--gb-y, 50%); animation: guild-banner-in 900ms var(--ease) both; }
.guild-banner img[hidden], .guild-head.is-dropped .guild-banner { display: none; }
@keyframes guild-banner-in { from { opacity: 0; scale: 1.04; } }
/* a shade under the words so they read on any picture (never a dark halo under glowing art: it is the text's) */
.guild-head.has-banner .guild-id { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.75); }

.guild-crest { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), 0.18), rgba(0, 0, 0, 0.55) 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--accent-rgb), 0.18); }
.guild-crest .guild-mark { width: 100%; height: 100%; }
.guild-crest b { color: var(--text-0); font: 700 40px var(--font-display); }
.guild-id { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.guild-name-big { margin: 0; overflow-wrap: anywhere; color: var(--text-0); font: 700 32px/1.1 var(--font-display); letter-spacing: 0.02em; }
.guild-name-big .head-rune { width: 12px; height: 18px; margin-right: 12px; vertical-align: 2px; }
.guild-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.guild-stats div { display: grid; gap: 1px; }
.guild-stats dt { color: var(--text-2); font: 600 10.5px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.guild-stats dd { margin: 0; color: var(--text-0); font: 700 19px var(--font-display); font-variant-numeric: tabular-nums; }
.guild-stats dd small { color: var(--text-2); font-size: 12px; font-weight: 600; }
.guild-stats [hidden] { display: none; }
.guild-stat-online dd { color: #8fe0a8; }
.guild-head-acts { display: grid; gap: 8px; align-self: center; }
.guild-head-acts .btn { gap: 8px; }
.guild-head-acts .gi { width: 15px; height: 15px; }

/* the guild's ties in the heading: its alliance (the leader crowned), its war in the war's red */
.guild-ties { display: flex; flex-wrap: wrap; gap: 8px; }
.guild-tie { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 99px; background: rgba(0, 0, 0, 0.35); }
.guild-tie-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); font: 600 10.5px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.guild-tie-label .gi { width: 14px; height: 14px; }
.guild-tie.is-ally .guild-tie-label { color: var(--ally); }
.guild-tie.is-war { border-color: rgba(var(--war-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--war-rgb), 0.28), rgba(var(--war-rgb), 0.08)); }
.guild-tie.is-war .guild-tie-label { color: #ffb4a6; }
.guild-tie-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.guild-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--text-0); font: 600 12.5px var(--font-ui); text-shadow: none; }
.guild-chip:hover { background: rgba(var(--accent-rgb), 0.22); color: #fff; }
.guild-chip.is-mark { padding: 2px; }
.guild-chip .guild-mark { width: 18px; height: 18px; }
.guild-chip-none { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font-size: 11px; }
.guild-crown { position: absolute; top: -9px; left: 2px; width: 14px; height: 14px; color: #ffd36b; filter: drop-shadow(0 0 3px rgba(255, 196, 80, 0.8)); }
.guild-crown .gi { width: 14px; height: 14px; }
.guild-chip.is-static { pointer-events: none; }

/* arcane and living vines: the slab's rims keep their size along its top and foot, its plain middle tiles between
   (char-head's way), the end runes and vines at its sides */
:is([data-skin='arcane'], [data-skin='vine_live']) .h-title.guild-head { --slab-h: 76px; height: auto; border-image-slice: 10 170 8 fill; border-image-width: 10px 0 8px; border-image-repeat: round; }
:is([data-skin='arcane'], [data-skin='vine_live']) .guild-head .guild-crest { border-color: rgba(var(--accent-rgb), 0.45); }
[data-skin='arcane'] .guild-head .guild-crest { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 16px rgba(var(--accent-rgb), 0.45); animation: surge 4.2s ease-in-out infinite; }

/* modern: rounded glass with the picture inside its corners */
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .h-title.guild-head { margin: 0 0 16px; padding: 30px 30px 26px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.025); font-size: 14px; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .guild-banner { inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .guild-head .slab-end { display: none; }
/* on glass and paper the picture blends with the panel itself (the heading has no slab of its own to blend with) */
:is(:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']), [data-skin='parchment']) .h-title.guild-head { isolation: auto; }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) .guild-crest { border-radius: 18px; box-shadow: none; background: rgba(255, 255, 255, 0.04); }

/* parchment: printed on the paper inside an inked double rule, ink for its words */
[data-skin='parchment'] .h-title.guild-head { margin: 0 0 18px; padding: 30px 30px 24px; border: 1px solid rgba(74, 48, 22, 0.45); border-image: none; border-radius: 4px;
  outline: 1px solid rgba(74, 48, 22, 0.28); outline-offset: 4px; background: rgba(74, 48, 22, 0.05); color: var(--text-1); text-shadow: none; }
[data-skin='parchment'] .guild-banner { inset: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, #000 40%, transparent); }
[data-skin='parchment'] .guild-head .slab-end { display: none; }
[data-skin='parchment'] .guild-head.has-banner .guild-id { text-shadow: 0 0 8px rgba(239, 226, 194, 0.95), 0 0 2px rgba(239, 226, 194, 0.95); }
[data-skin='parchment'] .guild-crest { border-color: rgba(74, 48, 22, 0.4); background: rgba(239, 226, 194, 0.7); box-shadow: inset 0 0 0 3px rgba(239, 226, 194, 0.9), inset 0 0 0 4px rgba(74, 48, 22, 0.3); }
[data-skin='parchment'] :is(.guild-tie, .guild-chip) { border-color: rgba(74, 48, 22, 0.3); background: rgba(239, 226, 194, 0.75); color: var(--text-0); }
[data-skin='parchment'] .guild-tie.is-ally .guild-tie-label { color: #24548a; }
[data-skin='parchment'] .guild-tie.is-war { border-color: rgba(139, 30, 18, 0.5); background: rgba(139, 30, 18, 0.1); }
[data-skin='parchment'] .guild-tie.is-war .guild-tie-label { color: #8b1e12; }
[data-skin='parchment'] .guild-stat-online dd { color: #2f6b3f; }
[data-skin='parchment'] .guild-page { --war: #8b1e12; --war-rgb: 139, 30, 18; --ally: #24548a; }

/* the settings' live preview of the heading: the same, smaller */
.guild-head.is-preview { min-height: 0; margin: 0 0 18px; padding-block: 22px 18px; }
.guild-head.is-preview.has-banner { min-height: 170px; }
.guild-head.is-preview .guild-crest { width: 64px; height: 64px; padding: 7px; }
.guild-head.is-preview .guild-name-big { font-size: 24px; }
:is([data-skin='arcane'], [data-skin='vine_live']) .guild-head.is-preview { margin: 0 -40px 18px; }

.guild-page > .subtabs { margin: 2px 0 22px; }

/* ---------- the overview ---------- */

.guild-overview { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.guild-main, .guild-side { display: grid; gap: 18px; min-width: 0; }
.guild-box { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.guild-sub { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-0); font: 600 12px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.guild-sub small { font-size: 12px; letter-spacing: 0; }
.guild-about .md { color: var(--text-1); line-height: 1.65; }
.guild-empty { grid-auto-flow: column; justify-content: start; align-items: center; color: var(--text-2); border-style: dashed; }
.guild-empty:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text-0); }
.guild-page .guild-recruit { margin: 0; border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.05); }
.guild-feed { display: grid; margin: 0; padding: 0; list-style: none; }
.guild-feed-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.guild-feed-row:last-child { border-bottom: 0; }
.guild-feed-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--text-1); }
.guild-feed-row.is-alliance .guild-feed-icon { color: var(--ally); }
.guild-feed-row.is-war .guild-feed-icon { background: rgba(var(--war-rgb), 0.16); color: var(--war); }
.guild-feed-row.is-peace .guild-feed-icon { color: #8fe0a8; }
.guild-feed-text { min-width: 0; color: var(--text-1); }
.guild-feed-text a { color: inherit; }
.guild-feed-text a:hover { color: var(--text-0); }
.guild-feed-text b { color: var(--text-0); font-weight: 600; }
.guild-feed-row time, .gs-row time { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.guild-war-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; border-color: rgba(var(--war-rgb), 0.5);
  background: linear-gradient(120deg, rgba(var(--war-rgb), 0.2), rgba(var(--war-rgb), 0.04) 60%); }
.guild-war-card .guild-sub { color: var(--war); margin-bottom: 8px; }
.guild-war-card p { margin: 8px 0 0; }
.guild-war-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(var(--war-rgb), 0.6); color: var(--war); }
.guild-war-mark .gi { width: 28px; height: 28px; }
.guild-allies, .guild-people { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guild-allies li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.guild-people li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.guild-people li span { display: grid; min-width: 0; }
.guild-people small { color: var(--text-2); font-size: 12px; }
.guild-people li.is-online .avatar, .guild-table tr.is-online .avatar { box-shadow: 0 0 0 2px #4fd27a, 0 0 10px rgba(79, 210, 122, 0.6); }
.guild-more { color: var(--text-1); font-size: 13px; }
.guild-more:hover { color: var(--text-0); }

/* ---------- the members ---------- */

.guild-members { display: grid; gap: 12px; }
.guild-members-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.guild-filter { position: relative; display: block; width: min(320px, 100%); }
.guild-filter .gi { position: absolute; inset-inline-start: 11px; top: 50%; translate: 0 -50%; color: var(--text-2); pointer-events: none; }
.guild-filter .input { padding-inline-start: 34px; }
.guild-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.guild-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.guild-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text-2); font: 600 10.5px var(--font-ui); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.guild-table th[data-sort] { cursor: pointer; user-select: none; }
.guild-table th[data-sort]:hover, .guild-table th[aria-sort] { color: var(--text-0); }
.guild-table th[aria-sort='ascending']::after { content: ' \2191'; }
.guild-table th[aria-sort='descending']::after { content: ' \2193'; }
.guild-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--text-1); }
.guild-table tr:last-child td { border-bottom: 0; }
.guild-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.06); }
.guild-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.guild-table td.num { color: var(--text-0); font-weight: 600; }
.guild-table.is-compact td { padding-block: 6px; }
.guild-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guild-who .char-link { font-weight: 600; }
.guild-rank-badge { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--text-1); font-size: 12.5px; }
.guild-rank-badge.is-master { color: var(--accent-hot); }
.guild-status { white-space: nowrap; }
.guild-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--text-2); opacity: 0.5; vertical-align: 1px; }
.guild-table tr.is-online .guild-dot { background: #4fd27a; opacity: 1; box-shadow: 0 0 8px rgba(79, 210, 122, 0.8); animation: guild-live 2.4s ease-in-out infinite; }
.guild-table tr.is-online .guild-status { color: #8fe0a8; }
@keyframes guild-live { 50% { box-shadow: 0 0 2px rgba(79, 210, 122, 0.4); } }
.guild-note { margin: 0; }

/* the guild list's ties: the alliance's leader and the rival beside the name */
.guild-row-ties { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.guild-row-tie { display: inline-flex; align-items: center; gap: 4px; padding: 1px 2px 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); color: var(--ally, #7fc7ff); }
.guild-row-tie .gi { width: 13px; height: 13px; }
.guild-row-tie.is-war { background: rgba(229, 87, 63, 0.16); color: #ff9c88; }
.rank-row.is-at-war { box-shadow: inset 2px 0 0 rgba(229, 87, 63, 0.7); }
[data-skin='parchment'] .guild-row-tie { background: rgba(74, 48, 22, 0.08); color: #24548a; }
[data-skin='parchment'] .guild-row-tie.is-war { background: rgba(139, 30, 18, 0.1); color: #8b1e12; }

/* ---------- the guild's forum: the forum's own style pieces, inside the guild's page ---------- */

.guild-forum { --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.07); --pop: #15161b; }
[data-skin='parchment'] .guild-forum { --surface: rgba(74, 48, 22, 0.07); --surface-2: rgba(74, 48, 22, 0.13); --pop: #efe2c2; }
.guild-forum.is-twitter .tw { grid-template-columns: 200px minmax(0, 1fr); }
.guild-forum.is-twitter .tw-side { display: none; }
.guild-forum.is-reddit .rd { grid-template-columns: minmax(0, 1fr) 280px; }

/* ---------- the guild's panel ---------- */

.guild-settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.gs-nav { position: sticky; top: 90px; display: grid; gap: 2px; }
.gs-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-1); font-size: 13.5px; }
.gs-nav-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-0); }
.gs-count { min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; text-align: center; }
.gs-body { display: grid; gap: 20px; min-width: 0; }
.gs-box { position: relative; display: grid; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); scroll-margin-top: 90px; }
.gs-box.is-dirty { border-color: rgba(var(--accent-rgb), 0.5); }
.gs-head h2 { margin: 0 0 3px; color: var(--text-0); font: 600 15px var(--font-display); letter-spacing: 0.06em; }
.gs-head p { margin: 0; color: var(--text-2); font-size: 13px; }
.gs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.gs-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.gs-label { display: flex; justify-content: space-between; gap: 8px; color: var(--text-1); font: 600 11px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.gs-label output { color: var(--text-0); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gs-hint { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.gs-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(255, 211, 107, 0.08); color: #f0d9a0; font-size: 13px; }
.gs-note .gi { color: #ffd36b; }
.gs-drop { position: relative; display: grid; place-items: center; min-height: 150px; overflow: hidden; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(0, 0, 0, 0.25); transition: border-color 150ms, background 150ms; }
.gs-drop.is-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.gs-drop img { display: block; width: 100%; height: 100%; max-height: 220px; object-fit: contain; cursor: crosshair; touch-action: none; }
.gs-drop img[hidden], .gs-focus[hidden] { display: none; }
.gs-focus { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(var(--accent-rgb), 0.9); pointer-events: none; }
.gs-drop.has-picture .gs-drop-pick { position: absolute; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.7); font-size: 12px; }
.gs-drop-pick { display: inline-flex; align-items: center; gap: 8px; padding: 18px; color: var(--text-1); cursor: pointer; }
.gs-drop-pick:hover { color: var(--text-0); }
.gs-drop-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gs-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); font-size: 13px; cursor: pointer; }
.gs-check:has(input:disabled) { opacity: 0.45; cursor: default; }
.gs-blends { justify-self: start; }
.gs-range { display: grid; gap: 6px; }
.gs-range input { width: 100%; accent-color: var(--accent); }
.gs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-save { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 12px; background: rgba(10, 11, 14, 0.94); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9); animation: reveal 300ms var(--ease); }
.gs-save[hidden] { display: none; }
.gs-save span { margin-right: auto; color: var(--text-1); font-size: 13px; }
.gs-save .btn { min-width: 0; }
.gs-switch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; cursor: pointer; }
.gs-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gs-switch-knob { position: relative; width: 38px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); transition: background 200ms; }
.gs-switch-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate 200ms var(--spring); }
.gs-switch input:checked + .gs-switch-knob { background: var(--accent); }
.gs-switch input:checked + .gs-switch-knob::after { translate: 16px 0; }
.gs-switch input:focus-visible + .gs-switch-knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-switch input:disabled + .gs-switch-knob { opacity: 0.5; }
.gs-switch > span:last-child { display: grid; }
.gs-switch b { color: var(--text-0); font-weight: 600; }
.gs-switch small { color: var(--text-2); font-size: 12px; }
.gs-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gs-share code { color: var(--text-1); overflow-wrap: anywhere; }
.gs-icon-btn { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.gs-icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-0); }
.gs-icon-btn.is-danger:hover, .gs-icon-btn.is-armed { background: rgba(var(--war-rgb), 0.18); color: #ff9c88; }
.gs-sub { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.gs-sub h3, .gs-tie h3, .gs-ask h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-0); font: 600 12px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.gs-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.gs-row-main { min-width: 0; color: var(--text-1); }
.gs-row-main b { color: var(--text-0); font-weight: 600; }
.gs-row-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-row-acts .btn { min-width: 0; }
.gs-row.is-open { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.05); }
.gs-row:is(.is-declined, .is-cancelled, .is-expired) { opacity: 0.6; }
.gs-quote { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--text-1); font-size: 13px; }
.gs-kind { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--text-1); }
.gs-kind.is-alliance { color: var(--ally); }
.gs-kind.is-war { background: rgba(var(--war-rgb), 0.16); color: var(--war); }
.gs-kind.is-peace { color: #8fe0a8; }
.gs-state { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--text-1); font-size: 11.5px; }
.gs-state.is-open, .gs-state.is-queued { background: rgba(var(--accent-rgb), 0.18); color: var(--text-0); }
.gs-state.is-applied { background: rgba(79, 210, 122, 0.16); color: #8fe0a8; }
.gs-state.is-failed { background: rgba(var(--war-rgb), 0.18); color: #ff9c88; }
.gs-ties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.gs-tie { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.gs-tie .btn { justify-self: start; gap: 8px; }
.gs-tie.is-war { border-color: rgba(var(--war-rgb), 0.5); background: rgba(var(--war-rgb), 0.07); }
.gs-tie.is-war h3 { color: var(--war); }
.gs-tie p { margin: 0; }
.gs-allies { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gs-allies li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.gs-link { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.gs-link:hover, .gs-link.is-armed { color: #ff9c88; }
.gs-ask { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 12px; background: rgba(var(--accent-rgb), 0.04); }
.gs-search { width: 100%; }
.gs-found { display: grid; gap: 6px; color: var(--text-2); font-size: 13px; }
.gs-found:empty { display: none; }
.gs-found-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.gs-found-row .guild-chip { margin-right: auto; }
.gs-found-row .btn { min-width: 0; }
.gs-found-row .btn.is-war:not(:disabled) { color: #ffb4a6; }
.gs-found-row .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gs-found-row small { flex-basis: 100%; }
.gs-rules { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12px; }
.gs-ranks { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-rank { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.gs-rank b { color: var(--text-0); font: 700 16px var(--font-display); }
.gs-boards { display: grid; gap: 8px; }
.gs-board { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr) 150px 90px auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; view-transition-name: none; }
.gs-board.is-new { border-style: dashed; }
.gs-board-move { display: inline-flex; justify-content: center; gap: 2px; color: var(--text-2); }
.gs-board .input { padding: 7px 10px; }
.gs-board-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.gs-board-acts .btn { min-width: 0; }
.gs-board-acts [hidden] { display: none; }
.guild-settings .is-wrong { border-color: var(--war); box-shadow: 0 0 0 3px rgba(var(--war-rgb), 0.2); }
.guild-settings textarea.input { min-height: 0; }

/* parchment: the panel's surfaces in ink on the paper */
[data-skin='parchment'] :is(.guild-box, .gs-box, .gs-tie, .gs-row, .gs-rank, .gs-board, .guild-table-wrap) { border-color: rgba(74, 48, 22, 0.22); background: rgba(74, 48, 22, 0.05); }
[data-skin='parchment'] .guild-table th { background: rgba(74, 48, 22, 0.07); }
[data-skin='parchment'] :is(.gs-save) { background: #efe2c2; box-shadow: 0 10px 30px -12px rgba(60, 35, 10, 0.6); }
[data-skin='parchment'] .gs-note { background: rgba(170, 120, 20, 0.12); color: #6a4a10; }
[data-skin='parchment'] :is(.gs-drop, .gs-found-row) { background: rgba(74, 48, 22, 0.06); border-color: rgba(74, 48, 22, 0.3); }
[data-skin='parchment'] .gs-switch-knob { background: rgba(74, 48, 22, 0.2); }
[data-skin='parchment'] .gs-nav-link:hover { background: rgba(74, 48, 22, 0.08); }
[data-skin='parchment'] .guild-feed-icon, [data-skin='parchment'] .gs-kind { background: rgba(74, 48, 22, 0.08); }
/* modern: glass surfaces with softer corners */
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.guild-box, .gs-box) { border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.03); }

/* the forum's look in the panel: a card a style (drawn small), the guild's forum framed in it */
.gs-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gs-style { position: relative; display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 150ms, translate 200ms var(--spring); }
.gs-style:hover { translate: 0 -2px; }
.gs-style input { position: absolute; opacity: 0; pointer-events: none; }
.gs-style:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -14px rgba(var(--accent-rgb), 0.9); }
.gs-style:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.gs-style b { color: var(--text-0); font-weight: 600; }
.gs-style small { color: var(--text-2); font-size: 11.5px; line-height: 1.4; }
.gs-style-art { position: relative; display: block; height: 64px; margin-bottom: 4px; overflow: hidden; border-radius: 8px; background: rgba(0, 0, 0, 0.3); }
.gs-style-art i { position: absolute; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.gs-style-art.is-reddit i:nth-child(1) { left: 8px; top: 8px; width: 8px; height: 48px; background: rgba(var(--accent-rgb), 0.5); }
.gs-style-art.is-reddit i:nth-child(2) { left: 22px; top: 8px; right: 34%; height: 21px; }
.gs-style-art.is-reddit i:nth-child(3) { left: 22px; top: 35px; right: 34%; height: 21px; }
.gs-style-art.is-reddit i:nth-child(4) { right: 8px; top: 8px; width: 26%; height: 48px; background: rgba(255, 255, 255, 0.08); }
.gs-style-art.is-discord i:nth-child(1) { left: 0; top: 0; width: 28%; height: 100%; border-radius: 0; background: rgba(255, 255, 255, 0.08); }
.gs-style-art.is-discord i:nth-child(2) { left: 34%; top: 10px; width: 50%; height: 8px; }
.gs-style-art.is-discord i:nth-child(3) { left: 34%; top: 26px; width: 40%; height: 8px; }
.gs-style-art.is-discord i:nth-child(4) { left: 34%; bottom: 8px; right: 8px; height: 10px; background: rgba(var(--accent-rgb), 0.45); }
.gs-style-art.is-twitter i:nth-child(1) { left: 8px; top: 8px; width: 16%; height: 48px; background: rgba(255, 255, 255, 0.08); }
.gs-style-art.is-twitter i:nth-child(2) { left: 30%; top: 8px; width: 40%; height: 12px; background: rgba(var(--accent-rgb), 0.45); }
.gs-style-art.is-twitter i:nth-child(3) { left: 30%; top: 26px; width: 40%; height: 12px; }
.gs-style-art.is-twitter i:nth-child(4) { left: 30%; top: 44px; width: 40%; height: 12px; }
.gs-frame { --frame-scale: 0.5; position: relative; height: calc(900px * var(--frame-scale)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #000; }
.gs-frame iframe { position: absolute; left: 0; top: 0; width: 1400px; height: 900px; border: 0; transform: scale(var(--frame-scale)); transform-origin: 0 0; pointer-events: none; }
[data-skin='parchment'] :is(.gs-style, .gs-frame) { border-color: rgba(74, 48, 22, 0.3); }

/* ---------- the finders: guilds and characters ---------- */

.finder-wrap { max-width: 1240px; }
.finder-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; }
.finder-search { flex: 1 1 240px; width: auto; }
.finder-guild { flex: 0 1 200px; width: auto; }
.finder-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; }
.finder-sort .input { width: auto; padding-block: 7px; }
.finder-seg span { display: inline-flex; align-items: center; gap: 6px; }
.finder-seg .gi { width: 14px; height: 14px; }
.finder-count { margin: 0 0 12px; }
.finder.is-busy .finder-results { opacity: 0.55; transition: opacity 200ms; }
.finder-results { margin: 0 0 18px; }
.finder-results.is-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.finder-results.is-cards.is-chars { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.finder-results.is-banners { display: grid; gap: 12px; }
.finder-more[hidden], .finder-none[hidden] { display: none; }

/* a guild as a card: its heading picture across the top, blended as on its page and fading into the card */
.gfind-card, .gfind-banner { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 9, 12, 0.72); transition: border-color 200ms, translate 250ms var(--spring); }
.gfind-card:hover, .gfind-banner:hover { border-color: rgba(var(--accent-rgb), 0.55); translate: 0 -2px; }
.gfind-card.is-at-war, .gfind-banner.is-at-war { border-color: rgba(229, 87, 63, 0.45); }
.gfind-card { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 16px 14px; text-align: center; }
.gfind-art { position: absolute; z-index: -1; inset: 0 0 auto; height: 130px; opacity: var(--gb-op, 0.8); mix-blend-mode: var(--gb-blend, normal);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent); }
.gfind-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--gb-x, 50%) var(--gb-y, 50%); }
.gfind-art.is-empty { background: radial-gradient(ellipse at 50% 0, rgba(var(--accent-rgb), 0.28), transparent 70%); opacity: 1; mix-blend-mode: normal; }
.gfind-crest { display: grid; place-items: center; width: 70px; height: 70px; margin-top: 56px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.2); }
.gfind-crest .guild-mark { width: 100%; height: 100%; }
.gfind-crest b { color: var(--text-0); font: 700 28px var(--font-display); }
.gfind-card h3, .gfind-banner h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 0; font: 700 18px var(--font-display); }
.gfind-banner h3 { justify-content: flex-start; }
.gfind-card h3 a, .gfind-banner h3 a { color: var(--text-0); }
.gfind-master { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-1); font-size: 13px; }
.gfind-master .gi { width: 13px; height: 13px; color: #ffd36b; }
.gfind-taste { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.gfind-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.gfind-stats { display: inline-flex; gap: 14px; color: var(--text-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.gfind-stats span { display: grid; text-align: left; }
.gfind-stats b { color: var(--text-0); font: 700 16px var(--font-display); letter-spacing: 0; text-transform: none; }
.gfind-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12.5px; }
.gfind-state.is-member { color: #8fe0a8; }
.gfind-card .btn, .gfind-banner .btn, .gfind-row .btn { min-width: 0; }
/* a guild as a banner row: the picture behind the whole row, fading to the left where its name is */
.gfind-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 120px; padding: 16px 20px; }
.gfind-banner .gfind-art { inset: 0 0 0 30%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.gfind-banner .gfind-crest { margin: 0; }
.gfind-id { display: grid; gap: 4px; min-width: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.gfind-side { display: grid; justify-items: end; gap: 10px; }
.gfind-banner .guild-row-ties { margin-left: 8px; }
.gfind-row .gfind-act { margin-left: 10px; }
.finder-results.is-list .rank-row { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.finder-results.is-list .rank-row.cfind-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
.finder-join { display: grid; gap: 8px; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 12px; background: rgba(0, 0, 0, 0.55); text-align: left; animation: reveal 250ms var(--ease); }
.gfind-banner .finder-join, .rank-row .finder-join { grid-column: 1 / -1; }
.finder-join p { margin: 0; color: var(--text-1); }
.finder-join textarea.input { min-height: 0; }
.finder-join-acts { display: flex; justify-content: flex-end; gap: 8px; }
.finder-join-acts .btn { min-width: 0; }
/* a character as a card: its avatar, painted name, class, figures and guild */
.cfind-card { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 18px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); text-align: center; transition: border-color 200ms, translate 250ms var(--spring); }
.cfind-card:hover { border-color: rgba(var(--accent-rgb), 0.5); translate: 0 -2px; }
.cfind-card h3 { margin: 6px 0 0; font: 700 16px var(--font-display); }
.cfind-card p { margin: 0; }
.cfind-facts { display: flex; gap: 14px; margin: 6px 0; }
.cfind-facts div { display: grid; }
.cfind-facts dt { color: var(--text-2); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.cfind-facts dd { margin: 0; color: var(--text-0); font: 700 15px var(--font-display); }
.cfind-name { display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
.cfind-name > span { display: grid; }
.cfind-name .guild-chip { margin-left: auto; }
[data-skin='parchment'] :is(.gfind-card, .gfind-banner) { border-color: rgba(74, 48, 22, 0.3); background: rgba(239, 226, 194, 0.55); }
[data-skin='parchment'] .gfind-id { text-shadow: 0 0 6px rgba(239, 226, 194, 0.95); }
[data-skin='parchment'] .gfind-crest { border-color: rgba(74, 48, 22, 0.35); background: rgba(239, 226, 194, 0.85); }
[data-skin='parchment'] :is(.cfind-card, .finder-join) { border-color: rgba(74, 48, 22, 0.25); background: rgba(74, 48, 22, 0.05); }
:is([data-skin='modern'], [data-skin='gilded'], [data-skin='samurai']) :is(.gfind-card, .gfind-banner, .cfind-card) { border-color: rgba(255, 255, 255, 0.07); }
@media (max-width: 700px) {
  .gfind-banner { grid-template-columns: auto minmax(0, 1fr); }
  .gfind-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
  .finder-results.is-list .rank-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .finder-results.is-list .rank-row .rank-stat { display: none; }
}

/* the answer to a save, floating at the foot of the screen */
.guild-toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; max-width: min(520px, calc(100vw - 32px)); padding: 11px 18px; border: 1px solid rgba(79, 210, 122, 0.45); border-radius: 12px;
  background: rgba(10, 11, 14, 0.96); color: #cfeedd; font-size: 13.5px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.9); translate: -50% 20px; opacity: 0; pointer-events: none;
  transition: opacity 250ms var(--ease), translate 350ms var(--spring); }
.guild-toast.is-shown { opacity: 1; translate: -50% 0; }
.guild-toast.is-error { border-color: rgba(229, 87, 63, 0.6); color: #ffcabf; }

/* ---------- narrow screens ---------- */

@media (max-width: 1000px) {
  .guild-overview, .guild-settings { grid-template-columns: minmax(0, 1fr); }
  .gs-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .guild-forum.is-twitter .tw, .guild-forum.is-reddit .rd { grid-template-columns: minmax(0, 1fr); }
  .gs-board { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
  .gs-board-post, .gs-board-n { grid-column: 2; }
  .gs-board-acts { grid-column: 3; grid-row: 2; }
}
@media (max-width: 700px) {
  .h-title.guild-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-inline: 4px; }
  .guild-head.has-banner { align-items: center; }
  .guild-id { justify-items: center; }
  .guild-ties, .guild-stats { justify-content: center; }
  .guild-head-acts { grid-auto-flow: column; }
  .guild-name-big { font-size: 25px; }
  .guild-crest { width: 76px; height: 76px; }
  .gs-grid, .gs-ties, .gs-pair { grid-template-columns: minmax(0, 1fr); }
  .gs-box { padding: 16px 14px; }
  .gs-board { grid-template-columns: 56px minmax(0, 1fr); }
  .gs-board > :is(.gs-board-about, .gs-board-post, .gs-board-n, .gs-board-acts) { grid-column: 1 / -1; }
  .gs-row { grid-template-columns: auto minmax(0, 1fr); }
  .gs-row-acts { grid-column: 1 / -1; }
  .guild-table .is-wide { display: none; }
  :is([data-skin='arcane'], [data-skin='vine_live']) .guild-head.is-preview { margin-inline: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  .guild-banner img, .guild-table tr.is-online .guild-dot, [data-skin='arcane'] .guild-head .guild-crest { animation: none; }
  .guild-toast { transition: none; }
}

/* the game's friend lists (characters/friends.php, social_view.php) and a character's live facts */
.char-online { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--text-2); font-size: 12px; vertical-align: 2px; }
.char-online i, .friend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); opacity: 0.5; }
.char-online.is-on { color: #8fe0a8; }
.char-online.is-on i, .friend-dot.is-on { background: #4fd27a; opacity: 1; box-shadow: 0 0 8px rgba(79, 210, 122, 0.8); animation: guild-live 2.4s ease-in-out infinite; }
.char-at { color: var(--text-2); font: 500 12px var(--font-body, inherit); }
.char-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px 14px; margin: 14px 0 0; }
.char-stats div { display: grid; gap: 1px; }
.char-stats dt { color: var(--text-2); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.char-stats dd { margin: 0; color: var(--text-0); font-weight: 700; }
.char-friend { display: grid; gap: 8px; }
.friend-tie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-1); font-size: 13px; }
.friend-tie.is-friends { color: #8fe0a8; }
.friend-tie .friend-dot { margin-left: 6px; }
.friend-act, .char-friend-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.friend-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.friend-card { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid rgba(var(--accent-rgb), 0.18); border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
.friend-card-head { display: flex; align-items: center; gap: 10px; }
.friend-sub { margin: 6px 0 0; color: var(--text-2); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.friend-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.friend-row { display: flex; align-items: center; gap: 10px; }
.friend-who { display: grid; flex: 1; min-width: 0; }
.friend-where { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.friend-row.is-on .friend-where { color: #8fe0a8; }
.friend-acts { display: inline-flex; gap: 6px; }
.friend-add { display: flex; gap: 8px; margin-top: 6px; }
.friend-add .input { flex: 1; min-width: 0; }
.gs-state { color: var(--text-2); font-size: 12px; }
.gs-state.is-failed, .gs-row.is-failed .gs-state { color: #f08a8a; }
.gs-member-acts { white-space: nowrap; }
.gs-member-acts .input { width: auto; padding-block: 2px; }
.guild-leave { display: inline; margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .char-online.is-on i, .friend-dot.is-on { animation: none; }
}