/* PLACE YOU CUSTOM STYLES IN THIS FILE */

/* Diablo Heavy Font */
@font-face {
  font-family: 'Diablo Heavy';
  src: url('../fonts/DIABLO_H.eot');
  src: url('../fonts/DIABLO_H.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DIABLO_H.woff') format('woff'),
       url('../fonts/DIABLO_H copy.ttf') format('truetype'),
       url('../fonts/DIABLO_H.svg#DiabloHeavy') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
 * Roboto Condensed + Marcellus SC — self-hosted, not fetched from
 * fonts.googleapis.com. A hotlinked font sends every visitor's IP address and
 * user agent to a third party on page load, which is at odds with running
 * analytics cookieless so the site needs no consent banner. Latin subset only;
 * Roboto Condensed is a variable font, so 400/700 share one file and 300i/400i
 * share another. The same faces and filenames are carried by tghs.link and
 * api.theghoppers.com — keep the names identical across the three.
 *
 * Roboto Condensed — Apache License 2.0
 * Marcellus SC     — SIL Open Font License 1.1
 */

/* Roboto Condensed — normal (one file covers 400 + 700) */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-latin-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-latin-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Roboto Condensed — italic (one file covers 300i + 400i) */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-latin-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/roboto-condensed-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Marcellus SC — normal 400 */
@font-face {
  font-family: 'Marcellus SC';
  src: url('../fonts/marcellus-sc-latin-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.grecaptcha-badge {
  visibility: hidden !important;
}
/* Diablo 2 Grail Item Image Sizing */
.d2-grail-img {
  max-width: 560px;
  height: auto;
  display: block;
}

/* Item database: game cards, item sprites and rune/gem icons.
   The sprites are small, fixed-size game art - never scale them up. */
.gh-db-game-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: inline-block;
}

.gh-db-item-hero {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.gh-db-rune-img {
  max-width: 28px;
  max-height: 28px;
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.gh-db-runes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.gh-db-rune {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}

/* A runeword has no sprite of its own, so its rune sequence leads the page in
   place of one; a set is stood in for by its pieces. Both sit above that
   page's properties, matching the unique pages' item image. */
.gh-db-runes-hero {
  justify-content: center;
  gap: 14px;
}

.gh-db-runes-hero .gh-db-rune-img {
  max-width: 40px;
  max-height: 40px;
}

.gh-db-pieces {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.gh-db-piece-img {
  max-width: 96px;
  max-height: 96px;
  width: auto;
  height: auto;
}

.password-toggle-wrapper {
  position: relative;
  width: 100%;
}

.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.password-toggle-btn:focus {
  outline: none;
}

.password-toggle-btn:hover {
  color: #ffffff;
}

/* Live Streams page: click-to-load Twitch embed cards */
.gh-stream-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gh-stream-embed {
  min-height: 60px;
}

.gh-stream-embed iframe {
  display: block;
  border: 0;
}

/* Forum topic polls */
.gh-poll-option {
  margin-bottom: 12px;
}

.gh-poll-option-text {
  display: inline-block;
  margin-bottom: 4px;
}

.gh-poll-bar {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  height: 10px;
  margin: 6px 0 4px 0;
  overflow: hidden;
}

.gh-poll-bar-fill {
  background: #dd163b;
  height: 100%;
  transition: width 0.4s ease;
}

.gh-poll-count {
  color: #9aa0a6;
  font-size: 0.85rem;
}

/* Community badges (forum post author sidebar) */
.gh-user-badges {
  margin-top: 8px;
}

.gh-user-badges .gh-user-badge {
  display: inline-block;
  margin: 0 4px;
  font-size: 1.1rem;
  cursor: help;
}

/* ------------------------------------------------------------------
   Account profile page (/profile) — modern card layout
------------------------------------------------------------------ */
.gh-profile-warning {
  margin-bottom: 30px;
}

.gh-profile-card {
  position: relative;
  padding: 26px 28px;
  margin-bottom: 26px;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gh-profile-card:hover {
  border-color: rgba(221, 22, 59, 0.45);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}

.gh-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #dd163b;
  border-radius: 8px 0 0 8px;
  opacity: 0.85;
}

.gh-profile-card-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* Card titles now carry member-supplied text (a ticket subject, a message
   title), so the head's text column must be allowed to shrink below its
   min-content width — a flex item defaults to `min-width: auto` and one long
   unbroken word would otherwise push the whole card past the viewport. */
.gh-profile-card-head > div {
  min-width: 0;
}

.gh-profile-card-title,
.gh-profile-card-desc {
  overflow-wrap: anywhere;
}

.gh-profile-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 16px;
  border-radius: 50%;
  background: rgba(221, 22, 59, 0.12);
  border: 1px solid rgba(221, 22, 59, 0.4);
  color: #dd163b;
  font-size: 1.35rem;
}

.gh-profile-card-title {
  margin: 4px 0 4px 0;
}

.gh-profile-card-desc {
  margin: 0;
  color: #9aa0a6;
  font-size: 0.92rem;
}

.gh-profile-card-desc a {
  color: #dd163b;
}

.gh-profile-form .input-group .form-control {
  flex: 1 1 auto;
}

/* Every account page (activity, messages, notifications, friends, support,
   login devices…) presents its sections as `.gh-profile-card`, so the blocks
   that fill a card — plain lists, empty-state lines, the theme's own list and
   table widgets — get their trailing margin removed here rather than in each
   view. */
.gh-profile-card > *:last-child {
  margin-bottom: 0;
}

.gh-profile-card-list {
  margin: 0;
  padding-left: 18px;
}

.gh-profile-card-list > li + li {
  margin-top: 8px;
}

.gh-profile-card-empty {
  margin: 0;
}

.gh-profile-card .nk-forum,
.gh-profile-card .nk-social-friends,
.gh-profile-card .nk-social-messages,
.gh-profile-card .nk-social-messages > .table {
  margin-bottom: 0;
}

.gh-profile-card .nk-social-messages-bulk {
  margin-bottom: 18px;
}

.gh-profile-card .nk-social-messages-single:first-of-type {
  margin-top: 0;
}

/* Cards the member can dismiss (the onboarding checklist). */
.gh-profile-card-dismiss {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 0;
  background: none;
  border: 0;
  color: #ffffff;
  opacity: 0.6;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
}

.gh-profile-card-dismiss:hover,
.gh-profile-card-dismiss:focus {
  opacity: 1;
}

/* Photo previews */
.gh-profile-photo-preview {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.gh-profile-photo-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-right: 14px;
}

.gh-profile-photo-preview-wide img {
  width: 160px;
  height: 72px;
}

.gh-profile-photo-link {
  color: #9aa0a6;
  font-size: 0.9rem;
}

.gh-profile-photo-link:hover {
  color: #ffffff;
}

/* Social links grid */
.gh-profile-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}

.gh-profile-social-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  word-break: break-word;
}

.gh-profile-social-input {
  display: flex;
  flex-wrap: nowrap;
}

.gh-profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: #dd163b;
  font-size: 1.05rem;
}

.gh-profile-social-input .form-control {
  border-radius: 0 4px 4px 0;
}

@media (max-width: 767px) {
  .gh-profile-social-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gh-profile-card {
    padding: 22px 18px;
  }
}

/* Mobile tap targets: grow header + top-bar touch areas toward the 44px guideline */
@media (max-width: 991.98px) {
  .nk-navbar .nk-nav li.single-icon > a {
    padding: 6px 14px;
  }

  .nk-contacts-top .nk-navbar .nk-nav > li > a {
    padding: 12px 14px;
  }
}

/* User-generated content (Summernote): cap media so posts never overflow on mobile */
.nk-post-text img,
.nk-forum-topic-content img,
.note-editable img {
  max-width: 100%;
  height: auto;
}

.nk-post-text iframe,
.nk-forum-topic-content iframe {
  max-width: 100%;
}

/* Shared social-links icon row (public profile + members directory) */
.gh-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
}

.gh-social-links > li {
  margin: 0;
}

.gh-social-links > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfd2d6;
  font-size: 1rem;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.gh-social-links > li > a:hover {
  color: #ffffff;
  background: rgba(221, 22, 59, 0.15);
  border-color: #dd163b;
  transform: translateY(-2px);
}

.gh-social-links-discord {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfd2d6;
  font-size: 0.9rem;
}

.gh-social-links-discord i {
  color: #dd163b;
}
/* Account sidebar, small screens only.
   The menu is moved above the profile card in the markup, so it inherits the
   card's lift into the header image and the card sits flush beneath it. The
   sibling rule must stay media-scoped: above 991px the menu is display:none
   and the card keeps its own -100px offset. */
@media (max-width: 991.98px) {
  .gh-account-menu-mobile {
    position: relative;
    z-index: 2;
    margin-top: -100px;
  }

  .gh-account-menu-mobile + .nk-social-profile.nk-social-profile-container-offset {
    margin-top: 0;
  }
}

/* Home hero background image.
   The hero was a GIF, then a <video>, and is a still <img> again since the
   artwork stopped animating — so all the sizing this used to duplicate now
   comes free from godlike.css `.bg-image img` (absolute, 100%/100%,
   z-index -1, object-fit cover). Only the backdrop is still needed: it
   matches the artwork so there is no flash before the image paints. */
.bg-image .gh-hero-image {
  background-color: #0a0705;
}

/* Brand icons FontAwesome used to provide.
   The site dropped the 1.26 MB fontawesome-free JS build; ionicons (already
   loaded) covers every glyph the site uses except TikTok and Discord, which
   live here as SVG masks. `background-color: currentColor` keeps them
   inheriting colour exactly as the old <i class="fab fa-*"> glyphs did, so
   rules like .gh-social-links-discord i still work.
   Icon artwork: Font Awesome Free 5/6 brands, CC BY 4.0
   (https://fontawesome.com/license/free). */
.gh-icon-tiktok,
.gh-icon-discord {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.gh-icon-tiktok {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z'/%3E%3C/svg%3E");
}

.gh-icon-discord {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   SweetAlert2 — Godlike theme skin

   SweetAlert2 ships a light popup (white box, #545454 text, purple
   confirm button, 5px radius) that looked like a foreign widget on the
   dark theme. Everything below re-dresses it in the template's own
   language: the `.nk-modal .modal-content` surface (#0e0e0e), Marcellus
   SC titles over Roboto Condensed body copy, `.nk-btn` buttons in
   main-1 (#e08821), `.form-control` inputs, and the 3px main-1 edge the
   `.gh-profile-card` sections use.

   Two notes for future edits:
   - sweetalert2 injects its stylesheet at the END of <head>, i.e. AFTER
     this file, so it wins every specificity tie. Its own selectors are
     mostly written as `div:where(.swal2-popup)` — the `:where()` part
     counts as zero — which leaves plenty of room, but a few (notably
     `.swal2-toast .swal2-success`) are real two-class selectors. Every
     rule below is therefore scoped with `.swal2-container` to stay a
     step ahead; keep new rules scoped the same way.
   - v11.26 exposes `--swal2-*` custom properties. Prefer setting those
     over re-declaring rules; only geometry the variables don't reach
     (the `.nk-btn` inner border, the icon colours) is written out.
------------------------------------------------------------------ */
.swal2-container {
  --swal2-backdrop: rgba(0, 0, 0, 0.75);
  --swal2-background: #0e0e0e;
  --swal2-color: #ffffff;
  --swal2-border: 1px solid rgba(255, 255, 255, 0.08);
  --swal2-border-radius: 2px;
  --swal2-padding: 0 0 1.75em;
  --swal2-title-padding: 1em 1.4em 0;
  --swal2-html-container-padding: 0.9em 1.6em 0.3em;
  --swal2-actions-margin: 1.6em auto 0;
  --swal2-footer-border-color: rgba(255, 255, 255, 0.08);
  --swal2-footer-color: rgba(255, 255, 255, 0.6);
  --swal2-timer-progress-bar-background: #e08821;
  --swal2-close-button-color: rgba(255, 255, 255, 0.5);
  --swal2-outline: 0 0 0 2px rgba(224, 136, 33, 0.55);
  --swal2-action-button-focus-box-shadow: 0 0 0 2px rgba(224, 136, 33, 0.55);
  --swal2-input-background: transparent;
  --swal2-input-border-radius: 0;
  --swal2-input-box-shadow: none;
  --swal2-input-hover-box-shadow: none;
  --swal2-input-focus-box-shadow: none;
  --swal2-validation-message-background: rgba(217, 83, 79, 0.12);
  --swal2-validation-message-color: #d9534f;
  --swal2-toast-border: 1px solid rgba(255, 255, 255, 0.1);
  --swal2-toast-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
}

/* Popup surface. The gradient draws the 3px main-1 edge without a
   pseudo-element, so nothing collides with sweetalert2's own markup. */
.swal2-container .swal2-popup {
  font-family: "Roboto Condensed", sans-serif;
  background-image: linear-gradient(90deg, #e08821 0, #e08821 3px, transparent 3px);
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.6);
}

.swal2-container .swal2-title {
  font-family: "Marcellus SC", serif;
  font-size: 1.5em;
  font-weight: 600;
  color: #ffffff;
}

.swal2-container .swal2-html-container {
  font-size: 1em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.swal2-container .swal2-footer {
  font-size: 0.9em;
}

/* Buttons: a copy of `.nk-btn` — dark plate, inset 1px border, the
   lift-on-hover the theme uses everywhere. */
.swal2-container .swal2-styled {
  position: relative;
  margin: 0 6px;
  padding: 12px 30px;
  font-family: "Marcellus SC", serif;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  border-radius: 2px;
  background-color: rgba(14, 14, 14, 0.9);
  box-shadow: none;
  transition: 0.2s box-shadow, 0.2s background-color, 0.2s color, 0.2s transform;
}

.swal2-container .swal2-styled::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid;
  border-radius: 2px;
  transition: 0.3s background-color, 0.3s border-color;
  z-index: 1;
}

.swal2-container .swal2-styled:hover,
.swal2-container .swal2-styled:focus,
.swal2-container .swal2-styled:active {
  background-color: #0e0e0e;
}

.swal2-container .swal2-styled:hover {
  box-shadow: 0 5px 15px 0 rgba(14, 14, 14, 0.4);
  transform: translateY(-2px);
}

/* Confirm = `.nk-btn-color-main-1`, cancel/deny = white and danger. */
.swal2-container .swal2-styled.swal2-confirm {
  color: #e08821;
}

.swal2-container .swal2-styled.swal2-confirm::before {
  border-color: #b56d19;
}

.swal2-container .swal2-styled.swal2-confirm:active {
  color: #885213;
}

.swal2-container .swal2-styled.swal2-cancel {
  color: #ffffff;
}

.swal2-container .swal2-styled.swal2-cancel::before {
  border-color: rgba(255, 255, 255, 0.45);
}

.swal2-container .swal2-styled.swal2-cancel:active {
  color: #cccccc;
}

.swal2-container .swal2-styled.swal2-deny {
  color: #d9534f;
}

.swal2-container .swal2-styled.swal2-deny::before {
  border-color: #c9302c;
}

.swal2-container .swal2-styled.swal2-deny:active {
  color: #a02622;
}

.swal2-container .swal2-styled:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(224, 136, 33, 0.55);
}

.swal2-container .swal2-loader {
  border-color: #e08821 rgba(0, 0, 0, 0) #e08821 rgba(0, 0, 0, 0);
}

.swal2-container .swal2-close:hover {
  color: #e08821;
}

/* Icons in the theme's semantic colours (godlike.css bootstrap set)
   with main-1 standing in for the question mark, which is the icon the
   confirm prompts use. */
.swal2-container .swal2-icon.swal2-success {
  border-color: #5cb85c;
  color: #5cb85c;
}

.swal2-container .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(92, 184, 92, 0.3);
}

.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #5cb85c;
}

.swal2-container .swal2-icon.swal2-error {
  border-color: #d9534f;
  color: #d9534f;
}

.swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: #d9534f;
}

.swal2-container .swal2-icon.swal2-warning {
  border-color: #f0ad4e;
  color: #f0ad4e;
}

.swal2-container .swal2-icon.swal2-info {
  border-color: #5bc0de;
  color: #5bc0de;
}

.swal2-container .swal2-icon.swal2-question {
  border-color: #e08821;
  color: #e08821;
}

/* Inputs follow `.form-control`: no box, a single underline that turns
   white on focus. */
.swal2-container .swal2-input,
.swal2-container .swal2-file,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select {
  padding: 12px 20px;
  color: #ffffff;
  background: none;
  border: none;
  border-bottom: 1px solid #404040;
  border-radius: 0;
  box-shadow: none;
  transition: 0.3s border, 0.3s color;
}

.swal2-container .swal2-input:focus,
.swal2-container .swal2-file:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus {
  border-bottom-color: #ffffff;
  box-shadow: none;
}

.swal2-container .swal2-select option {
  color: #000000;
}

/* Toasts (showNotification) read as a notice strip: dark-2 plate with a
   coloured edge that follows the icon. Browsers without :has() keep the
   main-1 edge, which is the intended default. */
.swal2-container .swal2-popup.swal2-toast {
  padding: 14px 16px;
  background-color: #181818;
  background-image: none;
  border-left: 3px solid #e08821;
  border-radius: 2px;
}

.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-success) {
  border-left-color: #5cb85c;
}

.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-error) {
  border-left-color: #d9534f;
}

.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-warning) {
  border-left-color: #f0ad4e;
}

.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-info) {
  border-left-color: #5bc0de;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0.6em;
}

.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.2em 0.6em;
}

@media (max-width: 575.98px) {
  .swal2-container .swal2-title {
    font-size: 1.3em;
  }

  .swal2-container .swal2-styled {
    padding: 11px 22px;
  }
}


/* ---------------------------------------------------------------------------
   Diablo II character planner (/database/diablo2/planner)

   The three skill trees keep the game's own shape: a 3-column, 6-row grid per
   tree, each cell placed by the grid-row / grid-column the seed carries, so a
   skill sits where a player expects to find it. Locked, invested and maxed are
   the three states a cell can read as, and each is distinguishable without
   relying on colour alone.
   --------------------------------------------------------------------------- */

.gh-planner-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gh-planner-class {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Roboto Condensed", sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.gh-planner-class:hover,
.gh-planner-class:focus {
  color: #fff;
  text-decoration: none;
  border-color: rgba(224, 136, 33, 0.6);
}

.gh-planner-class-active {
  color: #e08821;
  background: rgba(224, 136, 33, 0.12);
  border-color: #e08821;
}

.gh-planner-level-row,
.gh-planner-quest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.gh-planner-level-label {
  min-width: 92px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.gh-planner-range {
  flex: 1 1 auto;
  min-width: 0;
}

.gh-planner-level-out {
  min-width: 34px;
  color: #e08821;
  font-size: 20px;
  text-align: right;
}

.gh-planner-select {
  max-width: 260px;
}

.gh-planner-budgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.gh-planner-budget {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.gh-planner-budget-label {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.gh-planner-budget-value strong {
  color: #e08821;
  font-size: 26px;
  line-height: 1.2;
}

.gh-planner-budget-of {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.gh-planner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.gh-planner-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.gh-planner-stat-name {
  color: rgba(255, 255, 255, 0.75);
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gh-planner-stat-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gh-planner-stat-value {
  min-width: 46px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.gh-planner-stat-spent {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}

.gh-planner-step {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #e08821;
  font-size: 18px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(224, 136, 33, 0.5);
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gh-planner-step:hover,
.gh-planner-step:focus {
  color: #fff;
  background: #e08821;
}

.gh-planner-derived {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gh-planner-derived-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.65);
}

.gh-planner-derived-row strong {
  color: #fff;
}

.gh-planner-trees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.gh-planner-tree-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  color: #e08821;
  font-size: 16px;
}

.gh-planner-tree-spent {
  padding: 2px 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.gh-planner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.gh-planner-skill {
  position: relative;
  min-height: 78px;
}

.gh-planner-skill-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 8px 6px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.gh-planner-skill-btn:hover,
.gh-planner-skill-btn:focus {
  border-color: rgba(224, 136, 33, 0.7);
}

.gh-planner-skill-name {
  font-size: 12px;
  line-height: 1.25;
}

.gh-planner-skill-points {
  color: #e08821;
  font-size: 17px;
  line-height: 1.1;
}

.gh-planner-skill-req {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

/* Locked cells stay readable and stay clickable -- the click explains why the
   skill is refused, which is more use than an inert control. */
.gh-planner-skill-locked .gh-planner-skill-btn {
  color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  border-style: dashed;
}

.gh-planner-skill-invested .gh-planner-skill-btn {
  background: rgba(224, 136, 33, 0.12);
  border-color: rgba(224, 136, 33, 0.7);
}

.gh-planner-skill-maxed .gh-planner-skill-btn {
  border-color: #e08821;
  box-shadow: inset 0 0 0 1px rgba(224, 136, 33, 0.45);
}

.gh-planner-skill-down {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.gh-planner-skill:hover .gh-planner-skill-down,
.gh-planner-skill-down:focus,
.gh-planner-skill-invested .gh-planner-skill-down {
  opacity: 1;
}

.gh-planner-skill-down:hover {
  color: #fff;
  border-color: #dd163b;
}

.gh-planner-detail {
  margin-top: 16px;
  padding: 10px 14px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid #e08821;
  border-radius: 0 4px 4px 0;
}

.gh-planner-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gh-planner-share .form-control {
  flex: 1 1 260px;
  min-width: 0;
}

@media (max-width: 575.98px) {
  .gh-planner-level-row,
  .gh-planner-quest-row {
    flex-wrap: wrap;
  }

  .gh-planner-skill {
    min-height: 70px;
  }

  .gh-planner-skill-name {
    font-size: 11px;
  }
}

/* Character planner - gear panel. A slot reads as a small labelled card; an
   unwearable piece is marked with a red edge AND spelled out in words, so the
   reason survives for anyone who cannot see the colour. */

.gh-planner-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.gh-planner-slot {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 4px 4px 0;
}

.gh-planner-slot-unmet {
  border-left-color: #dd163b;
}

.gh-planner-slot-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gh-planner-slot .form-control {
  width: 100%;
}

.gh-planner-slot-req {
  margin-top: 6px;
  min-height: 16px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  line-height: 1.4;
}

.gh-planner-slot-unmet .gh-planner-slot-req {
  color: #e8798c;
}

.gh-planner-verdict {
  margin-top: 16px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid #5cb85c;
  border-radius: 0 4px 4px 0;
}

.gh-planner-verdict-bad {
  border-left-color: #dd163b;
  color: #e8798c;
}

/* ---------------------------------------------------------------------------
   Daily join streak
   The line on the profile cards (own account + public hop) and the once-a-day
   toast raised by js/daily-streak.js.
   --------------------------------------------------------------------------- */

.nk-social-profile .gh-profile-streak {
  clear: right;
  float: right;
  margin-top: 4px;
  font-size: .9rem;
  opacity: .75;
}

.gh-profile-streak-icon {
  margin-right: 6px;
  color: #dd163b;
}

.gh-profile-streak-record {
  opacity: .7;
}

.gh-streak-toast {
  max-width: 420px;
}

/* Milestone days come as a centred dialog rather than a toast, so the same
   inner lines get a little more room and weight. */
.gh-streak-milestone {
  max-width: 520px;
}

.gh-streak-milestone .gh-streak-toast-line {
  font-size: 15px;
}

.gh-streak-milestone .gh-streak-toast-record {
  margin-top: 14px;
}

.gh-streak-toast-line {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

.gh-streak-toast-broken {
  margin-top: 8px;
  color: #e8798c;
  font-size: 12px;
  line-height: 1.5;
}

.gh-streak-toast-record {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .nk-social-profile .gh-profile-streak {
    float: none;
    clear: none;
  }
}

/* ------------------------------------------------------------------
   Member name + badge glyph

   Rendered by app/Views/partials/username_icon.php everywhere a member
   is shown. The pair must never split across two lines, so the wrapper
   is nowrap AND the gap before the glyph is a margin — a literal space
   would be a break opportunity, which is the whole thing being avoided.
   Usernames cap at 13 characters, so nowrap here cannot overflow a
   realistic column. `currentColor` keeps the glyph in whatever colour
   the surrounding link or heading already uses.
   ------------------------------------------------------------------ */
.gh-username {
  white-space: nowrap;
}

.gh-username-badge {
  margin-left: .35em;
  color: currentColor;
  font-style: normal;
  vertical-align: baseline;
}

/* ------------------------------------------------------------------
   Admin icon workbench (/admin/icons)
   ------------------------------------------------------------------ */
.gh-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.gh-icon-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.gh-icon-tile:hover {
  border-color: #e08821;
  color: #fff;
}

.gh-icon-tile.is-selected {
  border-color: #e08821;
  background: rgba(224, 136, 33, 0.12);
  color: #fff;
}

.gh-icon-tile i {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: #e08821;
}

.gh-icon-tile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh-icon-assign-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.gh-icon-preview {
  display: inline-block;
  min-width: 1em;
  font-size: 20px;
  line-height: 1;
  color: #e08821;
}

/* Milestones chronicle — a vertical timeline of dated markers on the public
   /milestones page. The spine runs down the left; each entry hangs a glyph
   node on it. */
.gh-milestones {
  position: relative;
  margin: 0;
  padding: 0 0 0 54px;
  list-style: none;
}

.gh-milestones::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 19px;
  width: 2px;
  background: rgba(221, 22, 59, 0.35);
}

.gh-milestone {
  position: relative;
  margin-bottom: 34px;
}

.gh-milestone:last-child {
  margin-bottom: 0;
}

.gh-milestone-node {
  position: absolute;
  left: -54px;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1c1c1c;
  border: 2px solid #dd163b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dd163b;
  font-size: 20px;
  line-height: 1;
}

.gh-milestone-date {
  display: block;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.gh-milestone-title {
  margin: 0 0 8px;
  color: #dd163b;
  font-size: 20px;
}

.gh-milestone-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  white-space: pre-line;
}

/* ── Admin mega-menu backdrop ─────────────────────────────────────────────
   The admin dropdown used to carry a photographic backdrop
   (assets/images/bg-admin-menu.png) behind a long list of links, and the
   pale areas of it swallowed the text. It is now a flat black panel.
   .bg-image already stretches to the dropdown's edges at z-index -1, so the
   colour sits behind the links without touching their styling. */
.gh-admin-menu-bg {
  background-color: #000;
}

/* ── Admin mega-menu group headings ───────────────────────────────────────
   The admin menu groups its pages under the public menu each one manages, so
   a column holds several `<label>` headings rather than the single one the
   theme assumed at the top of a column. The theme's 12px top margin is too
   little air between a group's last link and the next heading, so every
   heading that follows a list gets its own gap. */
.nk-navbar .nk-nav .nk-mega-item > .dropdown > ul > li > ul + label {
  margin-top: 40px;
}

/* Five columns of admin links are wider than a narrow desktop window, and the
   theme lets a mega dropdown grow past the page — dragging a horizontal
   scrollbar onto every page with it. Capping the width is not enough on its
   own: the theme lays the columns out as table cells, which refuse to
   compress and get clipped by the dropdown's own `overflow: hidden`. Flex
   columns shrink instead, so the longer labels wrap and every column stays
   on screen. */
.nk-navbar .nk-nav .nk-mega-item > .dropdown {
  max-width: calc(100vw - 60px);
}

.nk-navbar .nk-nav .nk-mega-item > .dropdown > ul {
  display: flex;
  flex-wrap: nowrap;
}

.nk-navbar .nk-nav .nk-mega-item > .dropdown > ul > li {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/* Below the theme's own mega-menu breakpoint the columns stack one per row.
   The rule above shares the theme's selector, and this file loads after it,
   so the flex row has to be handed back explicitly or five 100px columns
   survive onto a phone. */
@media (max-width: 767px) {
  .nk-navbar .nk-nav .nk-mega-item > .dropdown > ul {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Upright player for YouTube Shorts
   --------------------------------------------------------------------------- */

/* Shorts are filmed 9:16, so the theme's .nk-plain-video (a 16:9 box built from
   padding-top: 56.25%) shows them as a thin strip between two black bands. The
   wrapper below caps the width and the inner box is re-proportioned upright.

   The width cap lives on the WRAPPER, not on .nk-plain-video itself: percentage
   padding resolves against the containing block's width, so capping the video
   box directly would still compute its height from the full column width and
   leave a frame taller than the screen. */
.gh-video-vertical {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.gh-video-vertical .nk-plain-video {
  /* 16 / 9 — the inverse of the theme's 56.25%. */
  padding-top: 177.78%;
}

/* ---------------------------------------------------------------------------
   Mules — the accounts/characters tree
   ---------------------------------------------------------------------------

   The tree is a `.gh-profile-card-list` nested exactly one level deep: an
   account, then its characters. The browser's default nested indent (40px) is
   set against the document, not the card, and pushes the character names off
   the narrow column the Social layout leaves for them — hence the tighter
   indent here. */
.gh-mule-tree ul {
  margin: 6px 0 0;
  padding-left: 16px;
  list-style: none;
}

.gh-mule-tree ul > li + li {
  margin-top: 6px;
}

/* The character whose sheet is open in the right-hand column. */
.gh-mule-tree .is-active > a {
  color: #e08821;
  font-weight: 700;
}

/* Database tables whose rows expand to reveal a story (Bootstrap collapse) —
   shared by the Diablo I quests and town-NPC pages. */
.js-db-expandable-row {
  cursor: pointer;
}

.gh-db-caret {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.8em;
  color: #e08821;
  transition: transform 0.15s ease-in-out;
}

/* Bootstrap sets aria-expanded on the trigger row when its story is open. */
.js-db-expandable-row[aria-expanded="true"] .gh-db-caret {
  transform: rotate(90deg);
}

.gh-db-story {
  padding: 0.75rem 1rem 1rem 1.75rem;
  line-height: 1.6;
}

/* When a filter hides a quest's summary row, hide its paired story row too —
   the story row is always the immediate next sibling, so no JS is needed. */
.js-db-row.d-none + .js-db-story-row {
  display: none;
}