/* ==========================================================================
   warcraftforever.ro — guild site structure
   --------------------------------------------------------------------------
   Every theme shares this file. It owns layout, spacing and component shape
   only; all colour, typography and artwork come from the theme's skin.css
   through the custom properties declared below.
   ========================================================================== */

:root {
  /* Skins override every one of these. The values here are a neutral fallback
     so a half-configured theme still renders something readable. */
  --gw-bg: #0a0a0c;
  --gw-bg-image: none;
  --gw-bg-size: 1920px auto;
  --gw-bg-position: center top;

  --gw-hero-height: 480px;
  --gw-hero-height-lg: 420px;
  --gw-hero-height-md: 340px;
  --gw-hero-height-sm: 220px;

  --gw-shell-width: 1180px;
  --gw-gap: 24px;
  --gw-radius: 2px;

  --gw-panel: rgba(8, 10, 15, 0.94);
  --gw-panel-inner: rgba(14, 17, 24, 0.96);
  --gw-panel-raised: rgba(22, 26, 34, 0.96);

  --gw-line: #3d2f17;
  --gw-line-soft: rgba(255, 255, 255, 0.07);
  --gw-line-strong: #684f24;

  --gw-text: #cdcbbe;
  --gw-text-strong: #ffffff;
  --gw-muted: #8c887b;
  --gw-accent: #f8b700;
  --gw-accent-hi: #ffd100;
  --gw-accent-dim: #996e27;
  --gw-link: #f8b700;
  --gw-link-hover: #ffd100;

  --gw-ok: #4ade80;
  --gw-warn: #fbbf24;
  --gw-danger: #f87171;
  --gw-alliance: #3f8fe0;
  --gw-horde: #c41f3b;

  --gw-font-display: 'Cinzel', Georgia, serif;
  --gw-font-head: 'Cinzel', Georgia, serif;
  --gw-font-body: 'Marcellus', Georgia, serif;
  --gw-font-ui: 'Marcellus', Georgia, serif;

  --gw-navbar-bg: #0a0a0a;
  --gw-navbar-height: 52px;
  --gw-navbar-image: none;

  /* The ornate frame and the board bar above it. Skins supply the artwork. */
  --gw-frame-bg: rgba(0, 0, 0, 0.9);
  --gw-frame-pad: 24px 30px 40px;
  --gw-frame-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.65);

  --gw-liner-image: none;
  --gw-liner-height: 21px;
  --gw-bar-image: none;

  --gw-cap-left: none;
  --gw-cap-right: none;
  --gw-cap-top: -21px;
  --gw-cap-width: 22px;
  --gw-cap-height: 121px;

  --gw-widget-head: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.3));

  /* Buttons are wholly skin-driven: a theme owns the fill, the bevel and the type. */
  --gw-btn-bg: linear-gradient(180deg, #4a3a12, #2a2008);
  --gw-btn-bg-hover: linear-gradient(180deg, #6b5419, #3a2c0b);
  --gw-btn-text: #ffd100;
  --gw-btn-text-hover: var(--gw-accent-hi);
  --gw-btn-border: 1px solid var(--gw-line-strong);
  --gw-btn-radius: var(--gw-radius);
  --gw-btn-shadow: none;
  --gw-btn-shadow-active: none;
  --gw-btn-font: 400 0.84rem var(--gw-font-head);
  --gw-btn-tracking: 0.08em;
  --gw-btn-transform: uppercase;
  --gw-btn-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  --gw-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   1. Reset and page frame
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.gw {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--gw-text);
  font: 400 16px/1.6 var(--gw-font-body);
  background-color: var(--gw-bg);
  background-image: var(--gw-bg-image);
  background-size: var(--gw-bg-size);
  background-position: var(--gw-bg-position);
  background-repeat: no-repeat;
  background-attachment: scroll;
  overflow-x: hidden;
}

body.gw::selection,
body.gw *::selection {
  background: rgba(248, 183, 0, 0.3);
  color: #fff;
}

a {
  color: var(--gw-link);
  text-decoration: none;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--gw-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gw-accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--gw-line);
  margin: 20px 0;
}

.gw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gw-shell {
  width: 100%;
  max-width: var(--gw-shell-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* --------------------------------------------------------------------------
   2. Hero banner + masthead
   The nav sits below the artwork, exactly as on the Classic Era portal.
   -------------------------------------------------------------------------- */
/* Themes that pin the nav to the top get a full-width sticky bar; the banner
   and the guild name then sit underneath it. */
.gw-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
}

.gw-masthead {
  position: relative;
  z-index: 10;
  margin-top: var(--gw-hero-height);
  margin-bottom: var(--gw-gap);
}

/* The bar already occupies the top of the banner, so the hero needs less room. */
.gw-masthead.has-topbar {
  margin-top: var(--gw-hero-height-topbar, var(--gw-hero-height));
}

.gw-brand-plate {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 14px;
}

.gw-brand-plate img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.gw-brand-text h1 {
  margin: 0;
  font: 700 1.9rem/1.1 var(--gw-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gw-text-strong);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.gw-brand-text p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--gw-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Navigation bar
   -------------------------------------------------------------------------- */
.gw-nav {
  position: relative;
  min-height: var(--gw-navbar-height);
  display: flex;
  align-items: stretch;
  border: 1px solid #000;
  background-color: var(--gw-navbar-bg);
  background-image: var(--gw-navbar-image);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: auto var(--gw-navbar-height);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(42, 42, 42, 0.9), var(--gw-shadow);
}

/* The crest at the far left of the bar. Off by default; a skin turns it on. */
.gw-nav-mark {
  display: none;
  flex: none;
  align-self: stretch;
  align-items: center;
  min-width: 44px;
  padding: 0 6px;
}

.gw-nav-mark-art {
  display: block;
  width: 52px;
  height: 43px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.gw-nav-toggle {
  display: none;
  flex: none;
  width: 52px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.gw-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gw-accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.gw-nav-brand {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font: 700 0.95rem var(--gw-font-head);
  color: var(--gw-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Holds the two nav lists side by side; it becomes the drop-down panel on small screens. */
.gw-nav-menu {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}

.gw-nav-list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.gw-nav-list.is-right {
  flex: none;
  margin-left: auto;
}

.gw-nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.gw-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font: 400 0.86rem var(--gw-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gw-text);
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  transition: color 0.12s ease, background 0.12s ease;
}

.gw-nav-link i {
  color: var(--gw-accent);
  font-size: 0.95em;
}

.gw-nav-link:hover,
.gw-nav-link:focus-visible {
  color: var(--gw-accent-hi);
  background: rgba(0, 0, 0, 0.35);
}

.gw-nav-link.is-active {
  color: var(--gw-accent-hi);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 -2px 0 var(--gw-accent);
}

.gw-caret {
  font-size: 0.65em;
  opacity: 0.8;
}

.gw-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--gw-panel);
  border: 1px solid var(--gw-line-strong);
  box-shadow: var(--gw-shadow);
  display: none;
}

.gw-dropdown.is-end {
  left: auto;
  right: 0;
}

.gw-nav-item.is-open > .gw-dropdown {
  display: block;
}

.gw-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: var(--gw-text);
  border-radius: var(--gw-radius);
}

.gw-dropdown a i {
  width: 16px;
  text-align: center;
  color: var(--gw-accent);
}

.gw-dropdown a:hover,
.gw-dropdown a.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--gw-accent-hi);
}

.gw-dropdown-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--gw-line);
  margin-bottom: 4px;
}

.gw-dropdown-head small {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gw-muted);
}

.gw-dropdown-head strong {
  color: var(--gw-accent);
  font-size: 0.95rem;
}

.gw-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--gw-ok);
  box-shadow: 0 0 6px var(--gw-ok);
  animation: gw-pulse 2s infinite;
}

.gw-pulse.is-off {
  background: var(--gw-danger);
  box-shadow: 0 0 6px var(--gw-danger);
  animation: none;
}

@keyframes gw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   4. Portal frame + breadcrumb bar
   -------------------------------------------------------------------------- */
.gw-main {
  flex: 1 0 auto;
  position: relative;
  z-index: 5;
  padding-bottom: 48px;
}

/* The board head: a thin liner, then the studded bar, sitting directly on top
   of the frame. The end caps span liner + bar + the first stretch of the
   frame's sides, which is what makes the three pieces read as one object. */
.gw-board-head {
  position: relative;
  z-index: 2;
  max-width: var(--gw-shell-width);
  margin: 0 auto;
}

.gw-board-liner {
  height: var(--gw-liner-height);
  width: 100%;
  background: var(--gw-liner-image) repeat-x 0 0;
}

.gw-board-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 35px;
  padding: 0 30px;
  background: var(--gw-bar-image) repeat-x 0 0;
  background-size: auto 100%;
}

/* Sculpted end caps that tie the bar into the frame below it. */
.gw-board-bar::before,
.gw-board-bar::after {
  content: '';
  position: absolute;
  top: var(--gw-cap-top);
  width: var(--gw-cap-width);
  height: var(--gw-cap-height);
  pointer-events: none;
  z-index: 2;
}

.gw-board-bar::before {
  left: 0;
  background: var(--gw-cap-left) no-repeat 0 0;
}

.gw-board-bar::after {
  right: 0;
  background: var(--gw-cap-right) no-repeat 100% 0;
}

/*
 * The frame itself. All eight pieces — four corners, four edges — ride on this
 * one element, because the corner art is far taller than any thin strip could
 * be. A skin supplies the layers through --gw-frame-bg.
 */
.gw-frame {
  position: relative;
  width: 100%;
  max-width: var(--gw-shell-width);
  margin: 0 auto;
  padding: var(--gw-frame-pad);
  background: var(--gw-frame-bg);
  box-shadow: var(--gw-frame-shadow);
}

.gw-frame-body {
  position: relative;
  min-height: 200px;
}

/* Breadcrumbs live inside the board bar. */
.gw-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 3;
  font-size: 0.82rem;
  color: var(--gw-muted);
}

.gw-crumbs a {
  color: var(--gw-text);
}

.gw-crumbs .gw-crumb-home {
  font-family: var(--gw-font-head);
  font-weight: 700;
  color: var(--gw-accent-hi);
  letter-spacing: 0.04em;
}

.gw-crumbs a:hover {
  color: var(--gw-accent-hi);
  text-decoration: underline;
}

.gw-crumbs .sep {
  opacity: 0.55;
}

.gw-crumbs .is-current {
  color: var(--gw-text-strong);
}

.gw-board-bar-actions {
  z-index: 3;
  font-size: 0.78rem;
  color: var(--gw-muted);
  white-space: nowrap;
}

.gw-board-bar-actions strong {
  color: var(--gw-accent);
  font-weight: 400;
}

/* A thin closing line inside the frame, under the page content. */
.gw-frame-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--gw-line-soft);
  font-size: 0.75rem;
  color: var(--gw-muted);
}

.gw-frame-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gw-font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gw-accent-hi);
}

/* --------------------------------------------------------------------------
   5. Content grid and section headings
   -------------------------------------------------------------------------- */
.gw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gw-gap);
  align-items: start;
}

.gw-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.gw-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gw-line);
}

.gw-section-head h1,
.gw-section-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 1.3rem/1.2 var(--gw-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gw-text-strong);
}

.gw-section-head h1 i,
.gw-section-head h2 i {
  color: var(--gw-accent);
  font-size: 0.95em;
}

.gw-section-head .gw-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   6. Panels, cards and widgets
   -------------------------------------------------------------------------- */
.gw-panel {
  background: var(--gw-panel-inner);
  border: 1px solid var(--gw-line);
  margin-bottom: var(--gw-gap);
}

.gw-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--gw-widget-head);
  border-bottom: 1px solid var(--gw-line);
  font: 400 0.82rem var(--gw-font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-accent);
}

.gw-panel-head .gw-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gw-panel-body {
  padding: 16px;
}

.gw-panel-body.is-flush {
  padding: 0;
}

.gw-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gw-gap);
  min-width: 0;
}

.gw-sidebar .gw-panel {
  margin-bottom: 0;
}

.gw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--gw-line-soft);
  font-size: 0.88rem;
}

.gw-row:last-child {
  border-bottom: 0;
}

.gw-row > span:first-child {
  color: var(--gw-muted);
}

.gw-row strong {
  color: var(--gw-text-strong);
  font-weight: 400;
  text-align: right;
}

.is-online { color: var(--gw-ok); }
.is-offline { color: var(--gw-danger); }
.is-gold { color: var(--gw-accent); }
.is-muted { color: var(--gw-muted); }

/* --------------------------------------------------------------------------
   7. News articles
   -------------------------------------------------------------------------- */
.gw-article {
  background: var(--gw-panel-inner);
  border: 1px solid var(--gw-line);
  margin-bottom: var(--gw-gap);
  overflow: hidden;
}

.gw-article-banner {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.gw-article-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gw-article-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 10, 15, 0.95) 100%);
}

.gw-article-body {
  padding: 20px 22px 24px;
}

.gw-article-title {
  margin: 0 0 8px;
  font: 700 1.35rem/1.25 var(--gw-font-display);
  color: var(--gw-accent);
  letter-spacing: 0.02em;
}

.gw-article-title a {
  color: inherit;
}

.gw-article-title a:hover {
  color: var(--gw-accent-hi);
}

.gw-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  color: var(--gw-muted);
}

.gw-meta i {
  color: var(--gw-accent-dim);
  margin-right: 4px;
}

.gw-meta .sep {
  opacity: 0.4;
}

.gw-byline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gw-byline a:hover {
  text-decoration: underline;
}

.gw-prose {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--gw-text);
}

.gw-prose > *:first-child { margin-top: 0; }
.gw-prose > *:last-child { margin-bottom: 0; }

.gw-prose h2,
.gw-prose h3,
.gw-prose h4 {
  font-family: var(--gw-font-display);
  color: var(--gw-accent);
  letter-spacing: 0.02em;
  margin: 22px 0 10px;
  line-height: 1.25;
}

.gw-prose h2 { font-size: 1.2rem; }
.gw-prose h3 { font-size: 1.07rem; }
.gw-prose h4 { font-size: 1rem; }

.gw-prose p { margin: 0 0 14px; }

.gw-prose ul,
.gw-prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.gw-prose li { margin-bottom: 6px; }

.gw-prose code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--gw-line);
  color: var(--gw-accent);
}

.gw-prose blockquote {
  margin: 0 0 14px;
  padding: 10px 16px;
  border-left: 3px solid var(--gw-accent-dim);
  background: rgba(0, 0, 0, 0.3);
  color: var(--gw-muted);
}

/* --------------------------------------------------------------------------
   8. Tables (roster, forum lists, officer panel)
   -------------------------------------------------------------------------- */
.gw-table-wrap {
  overflow-x: auto;
}

.gw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.gw-table th {
  text-align: left;
  padding: 11px 14px;
  font: 400 0.75rem var(--gw-font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-accent);
  background: var(--gw-widget-head);
  border-bottom: 1px solid var(--gw-line);
  white-space: nowrap;
}

.gw-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gw-line-soft);
  vertical-align: middle;
}

.gw-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

.gw-table tbody tr:last-child td {
  border-bottom: 0;
}

.gw-table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gw-char {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.gw-char-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.5) center/cover no-repeat;
}

/* The Blizzard race/class portrait, as the Classic Era board shows it. */
.gw-char-portrait {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.5);
  object-fit: cover;
}

.gw-char-portrait.is-small {
  width: 22px;
  height: 22px;
}

.gw-char-name {
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   8b. Character cards (a member's Battle.net characters)
   -------------------------------------------------------------------------- */
.gw-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1px;
  background: var(--gw-line-soft);
}

.gw-character {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--gw-panel-inner);
}

.gw-character.is-main {
  background: linear-gradient(180deg, rgba(166, 125, 70, 0.1), var(--gw-panel-inner));
}

/* Until Blizzard's avatar render arrives, the tile shows a plain crest rather
   than an empty black square. */
.gw-character-portrait {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius);
  background: rgba(0, 0, 0, 0.5) center / cover no-repeat;
}

.gw-character-portrait::after {
  content: '\f3ed';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 1.4rem 'Font Awesome 6 Free';
  color: var(--gw-accent-dim);
  opacity: 0.45;
}

/* An inline style sets the render as a background; hide the crest when it does. */
.gw-character-portrait[style]::after {
  content: none;
}

.gw-character-body { min-width: 0; }

.gw-character-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font: 400 1.05rem var(--gw-font-display);
}

.gw-character-meta {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: var(--gw-muted);
}

.gw-character-meta strong { color: var(--gw-text); font-weight: 400; }

.gw-character-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   9. Forum
   -------------------------------------------------------------------------- */
.gw-forum-cat {
  margin-bottom: var(--gw-gap);
}

.gw-forum-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px 90px minmax(0, 190px);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--gw-line-soft);
}

.gw-forum-row:last-child {
  border-bottom: 0;
}

.gw-forum-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Topic markers are the board's own artwork, so no frame around them. */
.gw-forum-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--gw-accent);
  font-size: 1rem;
}

.gw-forum-icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.gw-forum-title {
  margin: 0 0 3px;
  font: 400 1rem var(--gw-font-body);
}

.gw-forum-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gw-muted);
}

.gw-forum-stat {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gw-muted);
}

.gw-forum-stat strong {
  display: block;
  color: var(--gw-text-strong);
  font-weight: 400;
  font-size: 0.95rem;
}

.gw-forum-last {
  font-size: 0.8rem;
  color: var(--gw-muted);
  min-width: 0;
}

.gw-forum-last a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Board index ------------------------------------------------------- */
.gw-board-index {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.95fr);
  gap: 24px;
  align-items: start;
  margin-top: 4px;
}

.gw-board-main { min-width: 0; }
.gw-board-side { min-width: 0; }

.gw-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 4px;
  font: 700 0.95rem var(--gw-font-head);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gw-accent);
}

.gw-section-title i { color: var(--gw-accent-dim); }

/* The board cards are the rows of their section's window. */
.gw-board-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gw-board-card {
  position: relative;
  display: flex;
  gap: 12px;
  min-height: 112px;
  padding: 12px 14px 26px;
  background: var(--gw-panel-inner);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gw-board-card:hover {
  border-color: var(--gw-accent-dim);
  box-shadow: 0 0 12px rgba(166, 125, 70, 0.3);
}

/* The Blizzard forum bullet sits bare, as it does on the original board. */
.gw-board-card-icon {
  flex: none;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  display: grid;
  place-items: center;
}

.gw-board-card-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.gw-board-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.gw-board-card-title {
  font: 700 0.92rem/1.3 var(--gw-font-head);
  color: var(--gw-accent-hi);
  margin-right: 6px;
}

.gw-board-card-title:hover {
  color: var(--gw-text-strong);
  text-decoration: underline;
}

.gw-board-card-desc {
  margin: 4px 0 0;
  font-size: 0.77rem;
  line-height: 1.4;
  color: var(--gw-muted);
}

.gw-board-card-last {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--gw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-board-card-last i { margin-right: 4px; color: var(--gw-accent-dim); }

.gw-board-card-stats {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 0.72rem;
  color: var(--gw-muted);
}

.gw-board-card-stats strong { color: var(--gw-text); font-weight: 400; }
.gw-board-card-stats a { margin-left: 4px; color: var(--gw-accent); }

/* Community blocks under the boards */
.gw-stat-block {
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--gw-panel-inner);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.gw-stat-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font: 700 0.82rem var(--gw-font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gw-accent);
}

.gw-stat-block-title i { color: var(--gw-accent-dim); }

.gw-stat-block-body {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gw-muted);
}

.gw-stat-block-body p { margin: 0 0 8px; }
.gw-stat-block-body p:last-child { margin-bottom: 0; }
.gw-stat-block-body strong { color: var(--gw-text-strong); font-weight: 400; }

.gw-stat-legend {
  padding-top: 6px;
  border-top: 1px dashed var(--gw-line-soft);
  font-size: 0.74rem;
}

.is-gm { color: var(--gw-danger); }
.is-officer { color: var(--gw-sky, #60a5fa); }

/* Recent topics column — the panel around it draws the frame. */
.gw-recent-box {
  overflow: hidden;
}

.gw-recent-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gw-line-soft);
  transition: background 0.15s ease;
}

.gw-recent-item:last-child { border-bottom: 0; }
.gw-recent-item:hover { background: rgba(255, 255, 255, 0.035); }

.gw-recent-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  object-fit: contain;
}

.gw-recent-content { flex: 1 1 auto; min-width: 0; }

.gw-recent-link {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gw-link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-recent-link:hover { color: var(--gw-text-strong); text-decoration: underline; }

.gw-recent-meta {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--gw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-recent-meta strong { color: var(--gw-text); font-weight: 400; }

.gw-recent-empty {
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--gw-muted);
}

/* A post is a panel: its date and number ride in the panel head, and the
   author column and the text are the two columns of its body. */
.gw-post-main {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
}

.gw-post-author {
  padding: 16px 14px;
  text-align: center;
  border-right: 1px solid var(--gw-line);
  background: rgba(0, 0, 0, 0.28);
}

.gw-post-author .gw-avatar {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.5) center/cover no-repeat;
  object-fit: cover;
}

.gw-post-author .name {
  font-size: 0.98rem;
  color: var(--gw-accent);
  display: block;
  margin-bottom: 3px;
  word-break: break-word;
}

a.gw-post-author-name:hover,
.gw-post-author a.name:hover {
  text-decoration: underline;
}

.gw-post-author .rank {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gw-muted);
}

.gw-post-author .rank.is-role {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--gw-line-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gw-post-body {
  padding: 16px 18px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   10. Events
   -------------------------------------------------------------------------- */
.gw-event {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--gw-line-soft);
}

.gw-event:last-child {
  border-bottom: 0;
}

.gw-event-date {
  text-align: center;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.45);
  padding: 7px 4px;
}

.gw-event-date .day {
  display: block;
  font: 700 1.35rem/1 var(--gw-font-display);
  color: var(--gw-accent);
}

.gw-event-date .month {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gw-muted);
  margin-top: 3px;
}

.gw-event-title {
  margin: 0 0 3px;
  font-size: 1rem;
  color: var(--gw-text-strong);
}

.gw-event-meta {
  font-size: 0.8rem;
  color: var(--gw-muted);
}

/* --------------------------------------------------------------------------
   11. Buttons, badges, pills
   -------------------------------------------------------------------------- */
.gw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: var(--gw-btn-border);
  border-radius: var(--gw-btn-radius);
  background: var(--gw-btn-bg);
  box-shadow: var(--gw-btn-shadow);
  color: var(--gw-btn-text);
  font: var(--gw-btn-font);
  letter-spacing: var(--gw-btn-tracking);
  text-transform: var(--gw-btn-transform);
  cursor: pointer;
  text-shadow: var(--gw-btn-text-shadow);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.gw-btn:hover {
  background: var(--gw-btn-bg-hover);
  color: var(--gw-btn-text-hover);
}

.gw-btn:active {
  box-shadow: var(--gw-btn-shadow-active);
}

.gw-btn[disabled],
.gw-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.gw-btn.is-block {
  width: 100%;
}

.gw-btn.is-small {
  padding: 6px 12px;
  font-size: 0.75rem;
}

.gw-btn.is-ghost {
  background: transparent;
  color: var(--gw-text);
}

.gw-btn.is-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.gw-btn.is-danger {
  color: var(--gw-danger);
  border-color: rgba(248, 113, 113, 0.4);
}

/* ==========================================================================
   Discord
   Whichever widget the guild chose: the panel this engine draws, Discord's own
   embed, or one of its badges. Only the first can wear the site's skin, so the
   other two are given room and otherwise left alone.
   ========================================================================== */

.gw-discord-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.gw-discord-name {
  min-width: 0;
  overflow: hidden;
  color: var(--gw-text-strong);
  font: 400 0.9rem var(--gw-font-head);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw-discord-count {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--gw-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.gw-discord-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ba55d;
  box-shadow: 0 0 6px rgba(59, 165, 93, 0.75);
}

.gw-discord-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.gw-discord-face {
  width: 32px;
  height: 32px;
  border: 1px solid var(--gw-line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  object-fit: cover;
}

.gw-discord-frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--gw-radius);
  background: transparent;
}

.gw-discord-badge {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* The picker in the officer panel: every style side by side, as it will look. */
.gw-discord-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.gw-discord-style {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-radius);
  background: var(--gw-panel-inner);
  cursor: pointer;
}

.gw-discord-style:has(input:checked) {
  border-color: var(--gw-accent);
}

.gw-discord-style > header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gw-discord-style strong {
  display: block;
  color: var(--gw-text-strong);
  font: 400 0.88rem var(--gw-font-head);
  letter-spacing: 0.04em;
}

.gw-discord-style small {
  display: block;
  margin-top: 2px;
  color: var(--gw-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* The preview is a picture of the thing, so nothing inside it is clickable. */
.gw-discord-preview {
  pointer-events: none;
  overflow: hidden;
}

.gw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font: 400 0.7rem var(--gw-font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--gw-line-strong);
  color: var(--gw-accent);
  background: rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.gw-badge.is-ok { color: var(--gw-ok); border-color: rgba(74, 222, 128, 0.4); }
.gw-badge.is-warn { color: var(--gw-warn); border-color: rgba(251, 191, 36, 0.4); }
.gw-badge.is-danger { color: var(--gw-danger); border-color: rgba(248, 113, 113, 0.4); }
.gw-badge.is-alliance { color: var(--gw-alliance); border-color: rgba(63, 143, 224, 0.5); }
.gw-badge.is-horde { color: var(--gw-horde); border-color: rgba(196, 31, 59, 0.5); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.gw-field {
  margin-bottom: 16px;
}

.gw-field label,
.gw-label {
  display: block;
  margin-bottom: 6px;
  font: 400 0.76rem var(--gw-font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-accent);
}

.gw-input,
.gw-select,
.gw-textarea {
  width: 100%;
  padding: 10px 13px;
  font: 400 0.95rem var(--gw-font-body);
  color: var(--gw-text-strong);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--gw-line-strong);
  border-radius: var(--gw-radius);
  transition: border-color 0.14s ease, background 0.14s ease;
}

.gw-input::placeholder,
.gw-textarea::placeholder {
  color: rgba(140, 136, 123, 0.75);
}

.gw-input:focus,
.gw-select:focus,
.gw-textarea:focus {
  border-color: var(--gw-accent);
  background: rgba(0, 0, 0, 0.68);
  outline: none;
}

.gw-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
}

.gw-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gw-accent) 50%),
                    linear-gradient(135deg, var(--gw-accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.gw-help {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--gw-muted);
}

.gw-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 16px;
}

.gw-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.gw-check input {
  margin-top: 4px;
  accent-color: var(--gw-accent);
}

.gw-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* --------------------------------------------------------------------------
   13. Alerts and empty states
   -------------------------------------------------------------------------- */
.gw-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
}

.gw-alert i {
  margin-top: 3px;
  color: var(--gw-accent);
}

.gw-alert.is-ok { border-color: rgba(74, 222, 128, 0.45); }
.gw-alert.is-ok i { color: var(--gw-ok); }
.gw-alert.is-error { border-color: rgba(248, 113, 113, 0.45); }
.gw-alert.is-error i { color: var(--gw-danger); }

.gw-empty {
  padding: 48px 24px;
  text-align: center;
}

.gw-empty i {
  font-size: 2.4rem;
  color: var(--gw-accent-dim);
  display: block;
  margin-bottom: 14px;
}

.gw-empty h3 {
  margin: 0 0 8px;
  font-family: var(--gw-font-display);
  color: var(--gw-accent);
  font-size: 1.1rem;
}

.gw-empty p {
  margin: 0 auto 16px;
  max-width: 420px;
  color: var(--gw-muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   14. Pagination and tabs
   -------------------------------------------------------------------------- */
.gw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 20px 0 4px;
}

.gw-pagination a,
.gw-pagination span {
  min-width: 36px;
  padding: 7px 10px;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid var(--gw-line-strong);
  background: rgba(0, 0, 0, 0.4);
  color: var(--gw-text);
}

.gw-pagination a:hover {
  border-color: var(--gw-accent-dim);
  color: var(--gw-accent-hi);
}

.gw-pagination .is-current {
  background: var(--gw-btn-bg);
  color: var(--gw-accent-hi);
  border-color: var(--gw-accent-dim);
}

.gw-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gw-line);
  margin-bottom: 20px;
}

.gw-tabs a {
  padding: 10px 16px;
  font: 400 0.8rem var(--gw-font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gw-muted);
  border: 1px solid transparent;
  border-bottom: 0;
}

.gw-tabs a:hover {
  color: var(--gw-accent);
}

.gw-tabs a.is-active {
  color: var(--gw-accent-hi);
  background: var(--gw-panel-inner);
  border-color: var(--gw-line);
}

/* --------------------------------------------------------------------------
   15. Officer panel layout
   -------------------------------------------------------------------------- */
.gw-manage {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--gw-gap);
  align-items: start;
}

.gw-manage-nav {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gw-line);
  background: var(--gw-panel-inner);
}

.gw-manage-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.88rem;
  color: var(--gw-text);
  border-bottom: 1px solid var(--gw-line-soft);
}

.gw-manage-nav a:last-child {
  border-bottom: 0;
}

.gw-manage-nav a i {
  width: 16px;
  text-align: center;
  color: var(--gw-accent);
}

.gw-manage-nav a:hover {
  background: rgba(255, 255, 255, 0.05);
}

.gw-manage-nav a.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--gw-accent-hi);
  box-shadow: inset 3px 0 0 var(--gw-accent);
}

.gw-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: var(--gw-gap);
}

.gw-stat {
  padding: 16px;
  border: 1px solid var(--gw-line);
  background: var(--gw-panel-inner);
}

.gw-stat .value {
  display: block;
  font: 700 1.7rem/1 var(--gw-font-display);
  color: var(--gw-accent);
  margin-bottom: 5px;
}

.gw-stat .label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-muted);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.gw-footer {
  flex: none;
  padding: 26px 0 32px;
  text-align: center;
  border-top: 1px solid var(--gw-line);
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  color: var(--gw-muted);
}

.gw-footer p {
  margin: 0 0 6px;
}

.gw-footer .gw-legal {
  font-size: 0.73rem;
  opacity: 0.75;
  max-width: 700px;
  margin: 10px auto 0;
  line-height: 1.5;
}

.gw-powered a {
  color: var(--gw-accent);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .gw-masthead { margin-top: var(--gw-hero-height-lg); }
  .gw-masthead.has-topbar { margin-top: var(--gw-hero-height-topbar-lg, var(--gw-hero-height-lg)); }
}

@media (max-width: 992px) {
  .gw-masthead { margin-top: var(--gw-hero-height-md); }
  .gw-masthead.has-topbar { margin-top: var(--gw-hero-height-topbar-md, var(--gw-hero-height-md)); }

  .gw-grid { grid-template-columns: minmax(0, 1fr); }

  .gw-manage { grid-template-columns: minmax(0, 1fr); }

  .gw-manage-nav { flex-direction: row; flex-wrap: wrap; }

  .gw-manage-nav a { border-bottom: 0; border-right: 1px solid var(--gw-line-soft); }

  .gw-nav-toggle { display: flex; }

  .gw-nav-brand { display: flex; }

  .gw-nav {
    flex-wrap: wrap;
    align-items: center;
  }

  .gw-nav-menu {
    display: none;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.6);
    background: var(--gw-panel);
  }

  .gw-nav.is-open .gw-nav-menu { display: flex; }

  .gw-nav-list {
    flex-direction: column;
    align-items: stretch;
    flex: none;
    width: 100%;
  }

  .gw-nav-list.is-right { margin-left: 0; }

  .gw-nav-link {
    padding: 13px 18px;
    border-bottom: 1px solid var(--gw-line-soft);
    justify-content: flex-start;
  }

  .gw-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--gw-line-soft);
    box-shadow: none;
    background: rgba(0, 0, 0, 0.45);
  }

  .gw-board-index { grid-template-columns: minmax(0, 1fr); }

  .gw-board-cards { grid-template-columns: minmax(0, 1fr); }

  .gw-forum-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 6px;
  }

  .gw-forum-stat,
  .gw-forum-last {
    grid-column: 2;
    text-align: left;
  }

  .gw-post-main { grid-template-columns: minmax(0, 1fr); }

  .gw-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--gw-line);
    padding: 12px 14px;
  }

  .gw-post-author .gw-avatar { width: 44px; height: 44px; margin: 0; }
}

@media (max-width: 768px) {
  /* Like the original board, narrow screens drop the corner and side art and
     keep only the top and bottom edges. */
  .gw-frame {
    padding: var(--gw-frame-pad-sm, 20px 12px 32px);
    background: var(--gw-frame-bg-sm, var(--gw-frame-bg));
  }

  .gw-board-bar {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 12px;
  }

  .gw-board-bar::before,
  .gw-board-bar::after { display: none; }

  .gw-board-bar-actions { white-space: normal; }
}

@media (max-width: 576px) {
  .gw-masthead { margin-top: var(--gw-hero-height-sm); }
  .gw-masthead.has-topbar { margin-top: var(--gw-hero-height-topbar-sm, var(--gw-hero-height-sm)); }

  .gw-brand-text h1 { font-size: 1.4rem; }

  .gw-brand-plate img { width: 54px; height: 54px; }

  .gw-article-banner { height: 160px; }

  .gw-event { grid-template-columns: 58px minmax(0, 1fr); }

  .gw-event > :last-child { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}