/*
 Theme Name: Open Dungeons
 Theme URI: https://opendungeons.com
 Author: OD
 Description: Landing page theme for Open Dungeons RPG
 Version: 1.0
*/

:root {
  --od-bg: #05060a;
  --od-text: #f3e8d0;
  --od-muted: #d6cbb0;
  --od-accent-gold: #f2a23b;
  --od-accent-gold-dark: #cc7622;
  --od-accent-purple: #3e305f;
  --od-accent-purple-dark: #2b2144;
  --od-card-bg: #11141b;
  --od-card-border: #2a3140;
  --od-font-heading: "Georgia", "Times New Roman", serif;
  --od-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--od-bg);
  color: var(--od-text);
  font-family: var(--od-font-body);
  font-size: 18px;
}

/* Layout helpers */
.od-container {
  width: min(1160px, 100% - 3rem);
  margin: 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Header and Navigation */
.od-site-header {
  background: rgba(17, 20, 27, 0.95);
  border-bottom: 0px;
  padding: 0.75rem 1.5rem;
  z-index: 1000;
}

.od-site-header .od-container {
  width: 100%;
  max-width: none;
}

.od-header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.od-site-branding {
  flex-shrink: 0;
}

.od-logo-link {
  display: inline-block;
  transition: opacity 0.3s;
}

/* MDM Menu overrides for mid-range screens */
@media (min-width: 961px) and (max-width: 1682px) {
  .mdm-menu-link {
    gap: 0.1rem;
    text-transform: none;
  }
  .mdm-mega-menu {
    flex-wrap: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mdm-menu-link,
  .mdm-dropdown-link {
    padding: 0;
    min-height: 44px;
  }
}

#mdm-flyout-top-list {
  background: var(--od-bg) !important;
  background-image: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.mdm-flyout-bar {
  border-top: 0 !important;
  background: var(--od-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.od-logo-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.od-logo-link:hover {
  opacity: 0.8;
}

.od-logo-text {
  font-family: Arial, "Lucida Handwriting", cursive;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--od-accent-gold);
}

.od-main-nav {
  display: flex;
  justify-content: center;
}

.od-nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  align-items: center;
}

.od-nav-menu li {
  margin: 0;
  padding: 0;
}

.od-nav-menu a {
  color: var(--od-text);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.3s;
  position: relative;
  padding: 0.75rem 0.5rem;
}

.od-nav-menu a:hover,
.od-nav-menu a:focus {
  color: var(--od-accent-gold);
}

.od-nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--od-accent-gold);
  transition: width 0.3s;
}

.od-nav-menu a:hover::after {
  width: 100%;
}

/* Footer */
.od-site-footer {
  background: var(--od-card-bg);
  border-top: 1px solid var(--od-card-border);
  padding: 2rem 0;
  margin-top: 1rem;
}

.od-footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: center;
  flex-direction: column;
}

.od-footer-content p {
  margin: 0;
  font-size: 1rem;
  color: var(--od-muted);
}

.od-footer-nav {
  display: flex;
  gap: 1.5rem;
}

.od-footer-nav a {
  font-size: 1rem;
  color: var(--od-muted);
  transition: color 0.3s;
}

.od-footer-nav a:hover {
  color: var(--od-accent-gold);
}

/* Notice Button & Footer Buttons */
.od-notice-button,
.od-footer-button {
  background: #91000e;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  font-family: var(--od-font-body);
  letter-spacing: 0.5px;
  display: inline-block;
}

.od-notice-button:hover,
.od-footer-button:hover {
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Footer Button Admin Controls */
.od-footer-btn-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.od-footer-btn-edit,
.od-footer-btn-remove,
.od-footer-btn-add {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: all 0.2s;
  font-weight: bold;
  line-height: 1;
}

.od-footer-btn-edit:hover,
.od-footer-btn-remove:hover,
.od-footer-btn-add:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.od-footer-btn-edit {
  background: rgba(242, 162, 59, 0.2);
  border-color: var(--od-accent-gold);
  color: var(--od-accent-gold);
}

.od-footer-btn-edit:hover {
  background: rgba(242, 162, 59, 0.3);
}

.od-footer-btn-remove {
  background: rgba(255, 59, 59, 0.2);
  border-color: #ff3b3b;
  color: #ff3b3b;
}

.od-footer-btn-remove:hover {
  background: rgba(255, 59, 59, 0.3);
}

.od-footer-btn-add {
  background: rgba(59, 255, 59, 0.2);
  border-color: #3bff3b;
  color: #3bff3b;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.od-footer-btn-add:hover {
  background: rgba(59, 255, 59, 0.3);
}

/* Notice Modal */
.od-notice-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: od-fadeIn 0.3s ease;
}

.od-notice-modal.active {
  display: flex;
}

@keyframes od-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.od-notice-modal-content {
  background: var(--od-card-bg);
  border: 2px solid #e50318;
  border-radius: 12px;
  padding: 2.5rem;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 40px rgba(220, 53, 69, 0.3);
  animation: od-slideIn 0.3s ease;
}

@keyframes od-slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.od-notice-modal-content h3 {
  margin: 0 0 1.5rem 0;
  color: #dc3545;
  font-family: var(--od-font-heading);
  font-size: 1.8rem;
  text-align: center;
}

.od-notice-modal-content p {
  margin: 0;
  color: var(--od-text);
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
}

.od-notice-modal-content a {
  color: var(--od-gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.od-notice-modal-content a:hover,
.od-notice-modal-content a:focus {
  color: #ffe3a2;
}

.od-notice-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  color: var(--od-muted);
  font-size: 2rem;
  cursor: pointer;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  line-height: 1;
}

.od-notice-close:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}

/* Hero */
.od-hero {
  padding: 0;
  background:
    linear-gradient(to bottom, #05060a 0%, transparent 20%, transparent 80%, #05060a 100%),
    radial-gradient(circle at center, rgba(60, 120, 255, 0.35), transparent 60%),
    #05060a;
}

/* Top Buttons */
.od-top-buttons {
  padding: 0.45rem 0 0;
  background: #05060a;
}

.od-top-buttons-inner {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.15rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.od-action-rail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
  width: min(100%, 980px);
  margin: 10px auto 0.6rem;
}

.od-action-rail-secondary.od-top-buttons-inner {
  margin: 0;
  max-width: 100%;
}

.od-top-btn-wrapper {
  position: relative;
  display: inline-flex;
}

.od-btn-top {
  background: linear-gradient(180deg, #17263f 0%, #101b2d 100%);
  border: 1px solid rgba(122, 161, 222, 0.4);
  color: #dbe9ff;
  text-shadow: none;
  text-transform: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 14px rgba(5, 12, 24, 0.35);
}

.od-btn-top:hover,
.od-btn-top:active {
  background: linear-gradient(180deg, #213758 0%, #162641 100%);
  color: #ffffff;
  border-color: rgba(161, 200, 255, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(7, 18, 34, 0.4);
}

.od-top-btn-edit,
.od-top-btn-remove {
  position: absolute;
  top: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.od-top-btn-edit {
  right: 24px;
  background: var(--od-accent-gold);
  color: #261307;
}

.od-top-btn-edit:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-top-btn-remove {
  right: -8px;
  background: #dc3545;
  color: #fff;
  font-size: 16px;
}

.od-top-btn-remove:hover {
  background: #c82333;
  transform: scale(1.1);
}

.od-top-btn-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  padding: 0;
  align-self: center;
}

.od-top-btn-add:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-hero-inner {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.od-hero-kicker {
  letter-spacing: 0.2em;
  font-size: 1rem;
  color: var(--od-muted);
  margin: 0.2rem 0 0.55rem;
  display: inline-block;
}

.od-hero-kicker em {
  color: inherit;
}

.od-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-left: -56px;
}
.od-hero-sticker {
  height: 90px;
  width: auto;
  display: block;
  margin-left: 30px;
}
@media (max-width: 640px) {
  .od-hero-title-row {
    margin-left: -22px;
  }
}
.od-hero-title {
  font-family: var(--od-font-heading);
  font-size: clamp(1.8rem, 2.8vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  margin: 0.25rem 0 0;
  color: var(--od-text);
}
.od-hero-title-tm {
  font-size: 0.70em;
  vertical-align: super;
}
.od-hero-subtitle-title {
  letter-spacing: 0.2em;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--od-muted);
  margin: 0 0 1rem;
}

.od-hero-subtitle {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: var(--od-muted);
  max-width: 560px;
}

/* Hero buttons */
.od-hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
}

.od-action-rail-primary.od-hero-actions {
  margin-bottom: 0;
}

.od-hero-actions .od-btn {
  min-height: 0;
}

.od-action-rail .od-btn {
  justify-content: center;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: normal;
  margin: 0;
}

.od-action-rail a.od-btn.od-btn-primary,
.od-action-rail a.od-btn.od-btn-secondary,
.od-action-rail a.od-btn.od-btn-patreon {
  border-radius: 4px;
}

.od-hero-actions .od-btn-primary {
  background: #238636;
  color: #ffffff;
  border: 1px solid rgba(35, 134, 54, 0.78);
}

.od-hero-actions .od-btn-primary:is(:hover, :focus-visible, :active) {
  background: #2ea44f;
}

.od-hero-actions .od-btn-secondary,
.od-hero-actions .od-btn-patreon {
  border: 1px solid rgba(255, 135, 145, 0.55);
}

.od-hero-actions .od-btn.od-btn-custom-bg {
  background: var(--od-hero-btn-bg) !important;
}

.od-hero-actions .od-btn.od-btn-custom-text {
  color: var(--od-hero-btn-text) !important;
}

.od-hero-actions .od-btn.od-btn-custom-hover:is(:hover, :focus-visible) {
  background: var(--od-hero-btn-hover-bg) !important;
}

.od-hero-actions .od-btn.od-btn-custom-active:active {
  background: var(--od-hero-btn-active-bg) !important;
}

.od-hero-btn-wrapper {
  position: relative;
  display: inline-flex;
}

.od-hero-btn-edit,
.od-hero-btn-remove {
  position: absolute;
  top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.od-hero-btn-edit {
  right: 32px;
  background: var(--od-accent-gold);
  color: #261307;
}

.od-hero-btn-edit:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-hero-btn-remove {
  right: -8px;
  background: #dc3545;
  color: #fff;
  font-size: 18px;
}

.od-hero-btn-remove:hover {
  background: #c82333;
  transform: scale(1.1);
}

.od-hero-btn-add {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  padding: 0;
  align-self: center;
}

.od-hero-btn-add:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-btn {
  display: inline-flex;
  align-items: center;
  /* justify-content: center; */
  /* padding: 0.75rem 1.75rem; */
  /* border-radius: 4px; */
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.od-btn-primary {
  background: var(--od-accent-gold);
  color: #000;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.od-btn-primary:hover {
  background: var(--od-accent-gold-dark);
  transform: translateY(-1px);
}

.od-btn-secondary {
  background: #E64553;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.od-btn-secondary:hover {
  background: #c93a47;
  transform: translateY(-1px);
}

.od-btn-source {
  background: linear-gradient(135deg, #5f2eea 0%, var(--od-accent-gold) 100%);
  color: #150a1f;
  box-shadow: 0 8px 22px rgba(95, 46, 234, 0.4);
}

.od-btn-source:hover {
  background: linear-gradient(135deg, #7447ff 0%, #ffb347 100%);
  transform: translateY(-1px);
}

.od-btn-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.od-btn-patreon {
  background: #ff424d;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

.od-btn-patreon:hover {
  background: #e0353f;
  transform: translateY(-1px);
}

/* Hero feature row */
.od-hero-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 0;
  font-size: 0.85rem;
  color: var(--od-muted);
  align-items: center;
}

.od-hero-feature-wrapper {
  position: relative;
  display: inline-flex;
}

.od-hero-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0.12em;
}

.od-hero-feature-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.od-hero-feature-link {
  color: var(--od-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.od-hero-feature-link:hover {
  color: var(--od-text);
  border-bottom-color: var(--od-text);
}

.od-hero-feature-link:hover ~ .od-hero-feature-icon,
.od-hero-feature:has(.od-hero-feature-link:hover) .od-hero-feature-icon {
  background: #00ff88;
  border-color: #00ff88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.6), 0 0 24px rgba(0, 255, 136, 0.3);
}

.od-hero-feature-edit,
.od-hero-feature-remove {
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.od-hero-feature-edit {
  right: 24px;
  background: var(--od-accent-gold);
  color: #261307;
}

.od-hero-feature-edit:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-hero-feature-remove {
  right: -8px;
  background: #dc3545;
  color: #fff;
  font-size: 16px;
}

.od-hero-feature-remove:hover {
  background: #c82333;
  transform: scale(1.1);
}

.od-hero-feature-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  padding: 0;
}

.od-hero-feature-add:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

/* Temporarily hide hero feature text row. */
.od-hero-features {
  display: none;
}

/* Section heading */
.od-section {
  padding: 0 0 2.25rem;
}

.od-library-filter-shell {
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: none;
  padding: 0.9rem 1rem 1.1rem;
  margin: 0 0 1.25rem;
  background: transparent;
}

.od-library-filter {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.od-start-here-reading {
  max-width: 900px;
  margin: 25px auto 1.3rem;
  padding: 1.05rem 1rem 1.1rem;
  border: 1px solid rgba(242, 181, 68, 0.28);
  background: rgba(242, 181, 68, 0.09);
}

.od-start-here-reading h2 {
  margin: 0 0 0.75rem;
  font-family: var(--od-font-body);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 17px;
  color: #bfe7ff;
}

.od-start-here-reading-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.od-start-here-reading-panel {
  border: 1px solid rgba(242, 181, 68, 0.24);
  background: rgba(17, 23, 36, 0.66);
  padding: 0.75rem 0.8rem;
}

.od-start-here-reading-panel h3 {
  margin: 0 0 0.42rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #ffd98a;
}

.od-start-here-reading-panel p {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #f5f2ea;
}

.od-start-here-reading-panel ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.22rem;
}

.od-start-here-reading-panel li {
  line-height: 1.35;
  color: #f2f7ff;
}

.od-start-here-emphasis {
  color: #ffd98a;
}

.od-start-here-reading-note {
  color: #ffe4ac;
  font-weight: 400;
}

.od-quick-download-shell {
  max-width: 900px;
  margin: 0 auto 1.15rem;
}

.od-quick-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.25rem;
}

.od-quick-download-label {
  color: #dbe9ff;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.od-quick-download-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.od-quick-download-select {
  min-width: 210px;
  max-width: 210px;
  background: rgba(14, 19, 31, 0.95);
  color: #f0f6ff;
  border: 1px solid rgba(125, 160, 220, 0.45);
  border-radius: 8px;
  padding: 0.62rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.2;
}

.od-quick-download-trigger {
  position: relative;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 210px;
  flex: 0 0 210px;
  padding-right: 2rem;
}

.od-quick-download-trigger::after {
  content: '\25BE';
  position: absolute;
  right: 0.7rem;
  color: rgba(220, 236, 255, 0.95);
  font-size: 0.72rem;
  pointer-events: none;
}

.od-quick-download-trigger-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.od-quick-download-select-native {
  display: none;
}

.od-quick-download-select:focus-visible {
  outline: 2px solid rgba(161, 200, 255, 0.8);
  outline-offset: 1px;
  border-color: rgba(161, 200, 255, 0.82);
}

.od-quick-download-btn {
  min-width: 122px;
  min-height: 32px;
  padding: 0.4rem 0.72rem;
  line-height: 1;
  justify-content: center;
  border-radius: 7px;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 0.82rem;
  text-align: center;
}

.od-quick-download-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(5, 8, 14, 0.84);
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}

.od-quick-download-modal.active {
  display: flex;
}

.od-quick-download-modal-content {
  position: relative;
  width: min(520px, 100%);
  max-height: min(76vh, 620px);
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(125, 160, 220, 0.45);
  background: #0f1523;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
  padding: 1rem 1rem 0.8rem;
}

.od-quick-download-modal-title {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  color: #eff6ff;
  letter-spacing: 0.01em;
}

.od-quick-download-modal-close {
  position: absolute;
  right: 0.55rem;
  top: 0.45rem;
  border: 1px solid rgba(140, 171, 229, 0.35);
  border-radius: 6px;
  background: rgba(26, 37, 60, 0.78);
  color: #d9e7ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.68rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.od-quick-download-modal-close:hover,
.od-quick-download-modal-close:focus-visible {
  background: rgba(42, 58, 90, 0.92);
  border-color: rgba(165, 196, 248, 0.65);
}

.od-quick-download-modal-close-icon {
  font-size: 1rem;
  line-height: 1;
}

.od-quick-download-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: calc(min(76vh, 620px) - 4.3rem);
  overflow-y: auto;
  padding-right: 0.2rem;
}

.od-quick-download-option {
  border: 1px solid rgba(118, 151, 210, 0.4);
  border-radius: 8px;
  background: rgba(20, 30, 50, 0.82);
  color: #edf5ff;
  text-align: left;
  font-size: 0.93rem;
  padding: 0.62rem 0.7rem;
  cursor: pointer;
}

/* Hover and focus-visible were previously grouped, and the shared rule set
   outline:none. That removed the keyboard focus indicator from these
   options entirely (WCAG 2.4.7). The hover appearance is kept exactly as
   it was; focus-visible now adds a real outline on top of it. */
.od-quick-download-option:is(:hover, :focus-visible) {
  background: rgba(35, 49, 78, 0.92);
  border-color: rgba(155, 189, 255, 0.8);
}

.od-quick-download-option:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: 2px;
}

.od-quick-download-option.is-selected {
  border-color: rgba(168, 206, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(168, 206, 255, 0.75);
}

@media (max-width: 560px) {
  .od-quick-download {
    justify-content: stretch;
  }

  .od-quick-download-label {
    width: 100%;
    text-align: left;
  }

  .od-quick-download-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .od-quick-download-select,
  .od-quick-download-trigger,
  .od-quick-download-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .od-quick-download-modal-content {
    width: 100%;
    max-height: 82vh;
  }

  .od-start-here-reading-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.od-filter-btn {
  position: relative;
  --od-filter-rgb: 132, 168, 255;
  --od-filter-inset-shadow: inset 0 0 0 1px rgba(5, 6, 10, 0.32);
  background: rgba(var(--od-filter-rgb), 0.08);
  border: 1px solid rgba(var(--od-filter-rgb), 0.45);
  color: rgb(var(--od-filter-rgb));
  padding: 0.45rem 1.5rem;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--od-filter-inset-shadow);
  transition: all 0.2s ease;
}

.od-filter-btn[data-filter-value="all"] {
  --od-filter-rgb: 178, 194, 226;
}

.od-filter-btn[data-filter-value="player"] {
  --od-filter-rgb: 110, 173, 255;
}

.od-filter-btn[data-filter-value="dungeon-narrator"] {
  --od-filter-rgb: 62, 212, 169;
}

.od-filter-btn[data-filter-value="adventures"] {
  --od-filter-rgb: 255, 174, 120;
}

.od-filter-btn[data-filter-value="accessories"] {
  --od-filter-rgb: 241, 150, 214;
}

.od-filter-btn[data-filter-value="sourcebook"] {
  --od-filter-rgb: 154, 126, 241;
}

.od-filter-btn[data-filter-value="starred"] {
  --od-filter-rgb: 242, 181, 68;
}

.od-filter-btn[data-filter-value="starred"].is-active {
  -webkit-animation: none !important;
  animation: none !important;
}

.od-filter-label {
  display: inline-block;
}

.od-filter-count {
  display: inline-block;
  margin-left: 0.4rem;
  color: rgba(236, 245, 255, 0.86);
  font-size: 0.78rem;
}

.od-filter-btn-star {
  min-width: 54px;
  padding: 0.45rem 0.8rem;
}

.od-filter-star-icon {
  font-size: 1rem;
  line-height: 1;
  color: #f2e644;
  text-shadow: 0 0 10px rgba(242, 230, 68, 0.42);
}

.od-filter-star-text {
  margin-left: 0.38rem;
  color: #f2e644;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.od-filter-btn-star .od-filter-count {
  display: none;
}

.od-filter-btn-star.is-active,
.od-filter-btn-star.is-active .od-filter-star-icon,
.od-filter-btn-star.is-active .od-filter-star-text,
.od-filter-btn-star.is-active .od-filter-count {
  color: #000 !important;
}

.od-filter-btn-star.is-active .od-filter-star-icon {
  text-shadow: none !important;
}

.od-filter-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  background: rgba(242, 162, 59, 0.2);
  border: 1px solid rgba(242, 162, 59, 0.55);
  color: var(--od-accent-gold);
  font-size: 0.65rem;
  line-height: 1;
  padding: 0.24rem 0.4rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.od-filter-btn:is(:hover, :focus-visible) {
  background: rgba(var(--od-filter-rgb), 0.16);
  border-color: rgba(var(--od-filter-rgb), 0.72);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(var(--od-filter-rgb), 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(var(--od-filter-rgb), 0.25);
}

.od-filter-btn.is-active {
  background: rgba(var(--od-filter-rgb), 0.28);
  color: #ffffff;
  border-color: rgba(var(--od-filter-rgb), 0.95);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(var(--od-filter-rgb), 0.55),
    0 0 22px rgba(var(--od-filter-rgb), 0.48),
    0 10px 22px rgba(0, 0, 0, 0.42);
}

.od-filter-btn.is-active::before {
  content: "\2713";
  margin-right: 0.4rem;
  font-size: 0.75rem;
}

.od-filter-btn-star.is-active::before {
  content: none;
}

.od-filter-btn.is-active .od-filter-count {
  color: rgba(255, 255, 255, 0.95);
}

.od-section-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.od-section-title {
  font-family: var(--od-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.5rem;
  margin: 0 0 0.35rem;
}

.od-section-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--od-muted);
}

/* Grid of cards */
.od-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.od-card-star-break {
  grid-column: 1 / -1;
  order: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.1rem 0 0.25rem;
  color: rgba(255, 232, 191, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.od-card-star-break::before,
.od-card-star-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 181, 68, 0.08) 0%, rgba(242, 181, 68, 0.5) 100%);
}

.od-card-star-break::after {
  background: linear-gradient(90deg, rgba(242, 181, 68, 0.5) 0%, rgba(242, 181, 68, 0.08) 100%);
}

.od-card-star-break span {
  padding: 0.26rem 0.78rem;
  border: 1px solid rgba(242, 181, 68, 0.45);
  border-radius: 999px;
  background: rgba(23, 28, 40, 0.92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.od-card {
  position: relative;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 58%),
              var(--od-card-bg);
  border-radius: 14px;
  border: 1px solid var(--od-card-border);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.od-card-star {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  z-index: 25;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f2e644;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.95rem;
  line-height: 1;
  cursor: pointer;
  text-shadow: 0 0 16px rgba(242, 181, 68, 0.52);
  padding: 0;
  box-shadow: none;
  transition: transform 0.18s ease, text-shadow 0.18s ease, color 0.18s ease;
}

.od-card-star:hover,
.od-card-star:focus-visible {
  transform: translateY(-1px) scale(1.04);
  color: #ffd676;
  text-shadow: 0 0 20px rgba(255, 214, 118, 0.72);
}

.od-card-star:focus-visible {
  outline: 2px solid rgba(255, 241, 194, 0.85);
  outline-offset: 2px;
}

.od-card-star::after {
  content: attr(data-star-message);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(242, 181, 68, 0.5);
  background: rgba(14, 16, 22, 0.98);
  color: #fff1c9;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.48);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.od-card-star:hover::after,
.od-card-star:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.od-card > .od-card-star + .od-card-image .od-upload-btn {
  right: 2.9rem;
}

.od-card-source {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

/* Primary category color coding (first category control only). */
.od-card[data-card-category="player"] {
  background: linear-gradient(0deg, rgba(110, 173, 255, 0.21), rgba(110, 173, 255, 0.21)), var(--od-card-bg);
  border-color: rgba(110, 173, 255, 0.46);
}

.od-card[data-card-category="dungeon-narrator"] {
  background: linear-gradient(0deg, rgba(62, 212, 169, 0.21), rgba(62, 212, 169, 0.21)), var(--od-card-bg);
  border-color: rgba(62, 212, 169, 0.46);
}

.od-card[data-card-category="accessories"] {
  background: linear-gradient(0deg, rgba(234, 121, 198, 0.2), rgba(234, 121, 198, 0.2)), var(--od-card-bg);
  border-color: rgba(241, 150, 214, 0.46);
}

.od-card[data-card-category="sourcebook"] {
  background: linear-gradient(0deg, rgba(154, 126, 241, 0.23), rgba(154, 126, 241, 0.23)), var(--od-card-bg);
  border-color: rgba(154, 126, 241, 0.52);
}

.od-card[data-card-category="adventures"] {
  background: linear-gradient(0deg, rgba(255, 174, 120, 0.21), rgba(255, 174, 120, 0.21)), var(--od-card-bg);
  border-color: rgba(255, 174, 120, 0.46);
}

/* Starred cards keep their category tint without animated glow. */
.od-card[data-card-starred="1"] {
  border-color: rgba(26, 31, 43, 0.95);
  box-shadow: none;
}

.od-grid.od-start-here-active .od-card[data-card-starred="1"] {
  border-color: rgb(20 20 20);
  box-shadow: 0 0 0 1.2px rgb(20 20 20);
  -webkit-animation: none !important;
  animation: none !important;
}

.od-card-hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.od-card-secondary-match {
  order: 999;
}

.od-card.od-dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.od-card.od-drag-over {
  border-color: var(--od-accent-gold);
  box-shadow: 0 0 20px rgba(242, 162, 59, 0.5);
}

.od-card.od-sortable {
  cursor: move;
  cursor: grab;
}

.od-card.od-sortable:active {
  cursor: grabbing;
}

.od-card-image {
  position: relative;
  padding: 0;
  min-height: 100%;
  border-right: 1px solid var(--od-card-border);
  overflow: hidden;
}

.od-card-image img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder for cards without images */
.od-card-placeholder {
  background: linear-gradient(135deg, #1a1d26 0%, #22252e 100%);
  border-radius: 0;
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.1);
}

/* Admin upload button */
.od-upload-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  padding: 0;
  z-index: 10;
}

.od-upload-btn:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.od-upload-btn:active {
  transform: scale(0.95);
}

.od-delete-image-btn {
  position: absolute;
  top: 0.6rem;
  right: 4.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff6b6b;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
  z-index: 10;
}

.od-delete-image-btn:hover {
  background: #ff5252;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.od-delete-image-btn:active {
  transform: scale(0.95);
}

.od-upload-pdf-btn {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #6c5ce7;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
  z-index: 10;
}

.od-upload-pdf-btn:hover {
  background: #5f4fd1;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.od-upload-pdf-btn:active {
  transform: scale(0.95);
}

.od-delete-pdf-btn {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
  z-index: 10;
}

.od-delete-pdf-btn:hover {
  background: #c82333;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.od-delete-pdf-btn:active {
  transform: scale(0.95);
}

.od-card-image {
  cursor: zoom-in;
}

.od-card-image:hover img {
  opacity: 0.8;
  transform: scale(1.12);
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.od-card-image .od-card-placeholder {
  cursor: default;
}

.od-remove-card-btn {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
  padding: 0;
  z-index: 10;
}

.od-remove-card-btn:hover {
  background: #c82333;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.od-remove-card-btn:active {
  transform: scale(0.95);
}

.od-admin-controls {
  margin-top: 2rem;
  text-align: center;
}

.od-add-card-btn {
  padding: 0.75rem 2rem;
}

/* Custom Modal Styles */
.od-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 6, 10, 0.9);
  animation: od-fade-in 0.2s ease;
}

.od-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-modal-content {
  background: var(--od-card-bg);
  border: 1px solid var(--od-card-border);
  border-radius: 18px;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: od-slide-up 0.3s ease;
}

.od-modal-title {
  font-family: var(--od-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
  color: var(--od-text);
  text-align: center;
}

.od-modal-message {
  color: var(--od-muted);
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.od-modal-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--od-bg);
  border: 1px solid var(--od-card-border);
  border-radius: 8px;
  color: var(--od-text);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--od-font-body);
}

/* The previous rule removed the outline and replaced it with a 10% opacity
   glow, which is not a perceivable focus indicator. The border and glow are
   retained for visual continuity and a real outline is added. */
.od-modal-input:focus {
  border-color: var(--od-accent-gold);
  box-shadow: 0 0 0 3px rgba(242, 162, 59, 0.1);
}

.od-modal-input:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: 2px;
}

.od-modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.od-modal-actions .od-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
}

@keyframes od-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes od-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Image Preview Modal */
.od-image-preview-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 6, 10, 0.82);
  animation: od-fade-in 0.2s ease;
  cursor: pointer;
}

.od-image-preview-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.od-preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  animation: od-slide-up 0.3s ease;
}

.od-preview-image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);
}

.od-preview-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  border: 2px solid rgba(0, 0, 0, 0.3);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-weight: 300;
}

.od-preview-close:hover {
  background: #c82333;
  transform: scale(1.1);
}

.od-star-modal {
  display: none;
  position: fixed;
  z-index: 10001;
  inset: 0;
  background: rgba(5, 6, 10, 0.84);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.od-star-modal.active {
  display: flex;
}

.od-star-modal-content {
  position: relative;
  width: min(460px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(242, 181, 68, 0.55);
  background: linear-gradient(180deg, #121722 0%, #0b0f18 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.62);
  padding: 1.2rem 1.2rem 1.05rem;
}

.od-star-modal-text {
  margin: 0;
  color: #ffefc4;
  font-size: 1rem;
  line-height: 1.45;
  padding-right: 1.4rem;
}

.od-star-close {
  position: absolute;
  top: 0.42rem;
  right: 0.5rem;
  border: 0;
  background: transparent;
  color: #f6d37f;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.od-star-close:hover,
.od-star-close:focus-visible {
  color: #ffe8a7;
}

.od-card-body {
  padding: 0.75rem 1.1rem 0.85rem;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.od-card-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.od-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.od-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease, text-shadow 0.16s ease;
}

.od-card-title-link:is(:hover, :focus-visible, :active) {
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.25);
}

.od-card-title-link.is-disabled {
  pointer-events: none;
  opacity: 0.8;
}

.od-card-description {
  margin: 0;
  min-height: 0;
  font-size: 0.92rem;
  color: rgba(235, 243, 255, 0.84);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.od-card-read-about {
  display: inline-block;
  margin: 0.35rem 0 0.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(180, 210, 255, 0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}
.od-card-read-about:hover {
  color: rgba(200, 225, 255, 1);
}

.od-edit-title-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  padding: 0;
  flex-shrink: 0;
}

.od-edit-title-btn:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-edit-title-btn:active {
  transform: scale(0.95);
}

.od-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
  margin-top: auto;
  width: 100%;
}

.od-card-category-editor,
.od-card-secondary-category-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.35rem;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--od-muted);
  order: 4;
}

.od-card-star-editor {
  width: 100%;
  margin-top: 0.32rem;
  order: 4;
}

.od-card-star-editor label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}

.od-card-star-editor input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #f2b544;
}

.od-card-category-editor label,
.od-card-secondary-category-editor label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

.od-card-secondary-category-editor.is-hidden {
  display: none;
}

.od-card-category-hint {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.od-category-select {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--od-card-border);
  background: rgba(5, 6, 10, 0.85);
  color: var(--od-text);
  padding: 0.45rem 0.65rem;
  font-size: 0.85rem;
  font-family: var(--od-font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* See .od-modal-input above - a 25% opacity glow is not a sufficient focus
   indicator on its own, so the outline is restored. */
.od-category-select:focus {
  border-color: var(--od-accent-gold);
  box-shadow: 0 0 0 2px rgba(242, 162, 59, 0.25);
}

.od-category-select:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: 2px;
}

.od-category-select.od-select-saving {
  opacity: 0.6;
  cursor: progress;
}

.od-category-select.od-select-saved {
  border-color: #3dd598;
  box-shadow: 0 0 0 2px rgba(61, 213, 152, 0.25);
}

.od-card-meta-controls {
  display: none;
  justify-content: flex-start;
  gap: 0.35rem;
  margin-top: 0.5rem;
  order: 3;
}

.od-card-source .od-card-meta-controls {
  display: flex;
}

.od-card-meta-controls button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--od-muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.od-card-meta-controls button:hover {
  color: var(--od-accent-gold);
  border-color: var(--od-accent-gold);
}

.od-card-actions .od-btn {
  width: 168px;
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  justify-content: center;
  text-align: center;
  font-size: 0.83rem;
  line-height: 1.2;
  font-weight: 600;
  order: 10;
  margin-top: auto;
}

.od-card .od-card-actions a.od-btn {
  border-radius: 12px;
  border: 1px solid rgba(117, 150, 209, 0.28);
  background: linear-gradient(180deg, #101b2c 0%, #0c1624 100%);
  color: #e4eeff;
  box-shadow: 0 4px 10px rgba(4, 10, 20, 0.32);
}

.od-card .od-card-actions a.od-btn:is(:hover, :focus-visible) {
  border-color: rgba(136, 178, 246, 0.55);
  background: linear-gradient(180deg, #15253d 0%, #112037 100%);
  color: #ffffff;
  transform: translateY(-1px);
}

.od-card .od-card-actions a.od-btn-source {
  border-color: rgba(242, 162, 59, 0.65);
  background: var(--od-accent-gold);
  color: #221303;
  box-shadow: 0 6px 14px rgba(242, 162, 59, 0.35);
}

.od-card .od-card-actions a.od-btn-source:is(:hover, :focus-visible) {
  border-color: rgba(242, 162, 59, 0.9);
  background: var(--od-accent-gold-dark);
  color: #170c02;
}

.od-card-download,
.od-card-purchase {
  justify-content: center;
}

.od-card-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.od-btn-download-icon {
  font-size: 0.92rem;
  line-height: 1;
  color: #9fb9e8;
  opacity: 1;
  font-weight: 600;
}

.od-btn-download-label {
  letter-spacing: 0.01em;
}

.od-book-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0;
  order: 1;
}

.od-book-label {
  font-size: 0.92rem;
  color: rgba(235, 243, 255, 0.84);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.od-edit-label-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--od-accent-gold);
  color: #261307;
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
  padding: 0;
  flex-shrink: 0;
}

.od-edit-label-btn:hover {
  background: var(--od-accent-gold-dark);
  transform: scale(1.1);
}

.od-edit-label-btn:active {
  transform: scale(0.95);
}

/* Expansions coming soon */
.od-expansions {
  padding: 0rem 0 1rem;
  text-align: center;
}

.od-expansions h2 {
  font-family: var(--od-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.5rem;
  margin: 0;
  font-weight: normal;
  color: inherit;
}

/* Page and Post Content */
.od-main-content {
  padding: 3rem 0;
  min-height: 60vh;
}

.od-page-section {
  max-width: 900px;
  margin: 0 auto;
}

.od-page {
  background: var(--od-card-bg);
  border: 1px solid var(--od-card-border);
  border-radius: 8px;
  padding: 0 3rem 3rem;
}

.od-page-title {
  font-family: var(--od-font-heading);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--od-accent-gold);
  margin: 0 0 2rem;
  text-align: center;
}

.od-page-content {
  color: var(--od-text);
  line-height: 1.7;
}

.od-page-content p {
  margin: 0 0 1.5rem;
}

.od-page-content h1,
.od-page-content h2,
.od-page-content h3,
.od-page-content h4 {
  font-family: var(--od-font-heading);
  color: var(--od-accent-gold);
  margin: 2rem 0 1rem;
  letter-spacing: 0.05em;
}

.od-page-content h1 { font-size: 2rem; }
.od-page-content h2 { font-size: 1.75rem; }
.od-page-content h3 { font-size: 1.5rem; }
.od-page-content h4 { font-size: 1.25rem; }

.od-page-content a {
  color: var(--od-accent-gold);
  /* text-decoration: underline; */
  transition: color 0.3s;
}

.od-page-content a:hover {
  color: var(--od-accent-gold-dark);
}

.od-page-content ul,
.od-page-content ol {
  margin: 0 0 1.5rem 2rem;
  padding: 0;
}

.od-page-content li {
  margin-bottom: 0.5rem;
}

.od-page-content img {
  margin: 2rem auto;
  border-radius: 4px;
}

.od-page-content blockquote {
  border-left: 4px solid var(--od-accent-gold);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--od-muted);
}

/* Form Styling */
.od-page-content input[type="text"],
.od-page-content input[type="email"],
.od-page-content input[type="url"],
.od-page-content textarea,
.od-page-content select {
  width: 100%;
  background: rgba(5, 6, 10, 0.8);
  border: 1px solid var(--od-card-border);
  color: var(--od-text);
  padding: 0.75rem;
  border-radius: 4px;
  font-family: var(--od-font-body);
  font-size: 1rem;
  transition: border-color 0.3s;
}

/* A border colour change alone communicated focus here, which fails both
   2.4.7 Focus Visible and 1.4.1 Use of Color. The colour change is kept and
   an outline is added so focus does not depend on perceiving one hue. */
.od-page-content input[type="text"]:focus,
.od-page-content input[type="email"]:focus,
.od-page-content input[type="url"]:focus,
.od-page-content textarea:focus,
.od-page-content select:focus {
  border-color: var(--od-accent-gold);
}

.od-page-content input[type="text"]:focus-visible,
.od-page-content input[type="email"]:focus-visible,
.od-page-content input[type="url"]:focus-visible,
.od-page-content textarea:focus-visible,
.od-page-content select:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: 2px;
}

.od-page-content textarea {
  min-height: 150px;
  resize: vertical;
}

.od-page-content label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--od-text);
}

.od-page-content button,
.od-page-content input[type="submit"] {
  background: var(--od-accent-gold);
  color: var(--od-bg);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-family: var(--od-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.od-page-content button:hover,
.od-page-content input[type="submit"]:hover {
  background: var(--od-accent-gold-dark);
  transform: translateY(-2px);
}
a.od-btn.od-btn-primary, a.od-btn.od-btn-secondary, a.od-btn.od-btn-patreon {
    border-radius: 20px;
}
/* Responsive */
@media (max-width: 900px) {
  .od-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
  }
}

@media (max-width: 960px) {
  .od-card {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  
  .od-hero-title {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
  
  .od-hero-features {
    gap: 1.5rem;
  }
  
  .od-page {
    padding: 0 2rem 2.5rem;
  }

  .od-nav-menu {
    gap: 1.5rem;
  }
  
  .od-nav-menu a {
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  .od-container {
    width: min(100%, 100% - 2rem);
  }
  
  .od-hero {
    padding: 2rem 0 1.5rem;
  }
  
  .od-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    margin: 0 0 1rem;
  }
  
  .od-hero-kicker {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .od-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .od-action-rail {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }

  .od-action-rail-secondary.od-top-buttons-inner {
    gap: 0.55rem;
  }

  /* Mobile Navigation */
  .od-header-inner {
    flex-direction: column;
    gap: 1rem;
  }
  
  .od-main-nav {
    width: 100%;
    justify-content: center;
  }
  
  .od-nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .od-logo-text {
    font-size: 1.25rem;
  }
  
  /* Mobile Page Content */
  .od-page {
    padding: 0 1.25rem 2rem;
  }
  
  .od-page-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 1.5rem;
  }
  
  .od-main-content {
    padding: 2rem 0;
  }
  
  .od-footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .od-footer-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .od-hero-btn-wrapper {
    width: 100%;
  }
  
  .od-hero-btn-wrapper .od-btn {
    width: 100%;
  }
  
  .od-hero-btn-add {
    width: 100%;
    border-radius: 999px;
    height: 48px;
  }
  
  .od-hero-features {
    gap: 1rem;
    font-size: 0.75rem;
    flex-direction: column;
  }

  .od-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .od-card {
    grid-template-columns: 1fr;
  }

  .od-card-image {
    border-right: none;
    border-bottom: 1px solid var(--od-card-border);
    min-height: 0;
  }

  .od-card-image img,
  .od-card-placeholder {
    height: 190px;
    min-height: 190px;
  }
  
  .od-card-image {
    padding: 0;
  }

  .od-card-actions .od-btn {
    width: 168px;
    max-width: 100%;
    min-height: 40px;
  }
  
  /* Make admin buttons smaller on mobile */
  .od-upload-btn,
  .od-upload-pdf-btn,
  .od-delete-pdf-btn,
  .od-delete-image-btn,
  .od-remove-card-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .od-delete-image-btn {
    right: 4.5rem;
  }
  
  .od-section-subtitle {
    font-size: 0.9rem;
    padding: 0 1rem;
  }
  
  .od-expansions {
    font-size: 1.2rem;
    padding: 0rem 0 1rem;
  }
  
  /* Modal adjustments for mobile */
  .od-modal-content {
    width: 95%;
    padding: 1.5rem;
  }
  
  .od-preview-content {
    max-width: 95%;
  }
  
  .od-image-preview-modal.active {
    padding: 1rem;
  }
  
  /* Corner box mobile adjustments */
  .od-corner-ribbon {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
  }
}

@media (max-width: 700px) {
  .od-corner-ribbon {
    display: none;
  }
}

/* Pulsing animation for first card download button */
@keyframes od-pulse-green {
  0%, 100% {
    background: var(--od-accent-gold);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  }
  50% {
    background: #00ff88;
    box-shadow: 0 8px 32px rgba(0, 255, 136, 0.8), 0 0 30px rgba(0, 255, 136, 0.6);
  }
}

.od-card-download.od-pulse-highlight {
  animation: od-pulse-green 1.5s ease-in-out infinite;
}

/* Post Navigation Spacing - MDM Plugin Override */
.mdm-post-pagination {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4rem !important;
}

.mdm-post-prev {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.mdm-post-next {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* RPG Monster Navigation */
.rpg-monster-prev-next {
    display: flex !important;
    justify-content: space-between !important;
    gap: 2rem !important;
    width: 100% !important;
}

.prev-next-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2rem !important;
}

.prev-monster {
    margin-right: auto !important;
}

.next-monster {
    margin-left: auto !important;
}

/* ============================================
   Mobile Close Menu Button - Bottom Right Float
   Overrides plugin's full-width bottom bar so it
   sits as a compact button in the bottom-right corner,
   clear of the Roll Dice toggle on the left.
   ============================================ */
@media (max-width: 1310px) {
  .mdm-mobile-close-wrapper {
    position: fixed !important;
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 2147483020 !important;
    transform: translateY(200%) !important;
    transition: transform 0.3s ease !important;
    border-radius: 999px !important;
    overflow: visible !important;
  }

  .mdm-menu-container.mdm-mobile-open .mdm-mobile-close-wrapper {
    transform: translateY(0) !important;
  }

  .mdm-mobile-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    border-radius: 999px !important;
    padding: 0.65rem 1.1rem !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    background: #3b7ef2 !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
  }

  .mdm-mobile-close::after {
    content: 'Close Menu' !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-left: 0 !important;
  }

  .mdm-mobile-close:hover {
    background: #2a5fc7 !important;
  }
}


/* ===== Open Dungeons 2026 Experience Rebuild ===== */
:root{--od-bg:#08090c;--od-surface:#111318;--od-surface-warm:#1d1915;--od-text:#f2eadb;--od-muted:#b7af9f;--od-faint:#777267;--od-line:rgba(227,205,166,.14);--od-line-strong:rgba(227,205,166,.28);--od-gold:#d9ad62;--od-gold-bright:#f0c979;--od-gold-deep:#9f7130;--od-font-heading:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;--od-font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--od-shadow:0 28px 80px rgba(0,0,0,.34);--od-radius:18px}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{background:radial-gradient(circle at 12% 0%,rgba(89,68,111,.12),transparent 28rem),var(--od-bg);color:var(--od-text);font-family:var(--od-font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--od-gold);color:#17120b}
.od-container{width:min(1240px,calc(100% - 48px))}
.od-skip-link{position:fixed;top:10px;left:10px;z-index:10000;padding:10px 16px;border-radius:8px;background:var(--od-gold-bright);color:#15100a;font-weight:800;transform:translateY(-150%)}
.od-skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible{outline:3px solid var(--od-gold-bright);outline-offset:4px}
.od-eyebrow,.od-footer-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--od-gold-bright);font-size:.73rem;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
.od-hero-eyebrow-free{color:#000;text-transform:none}
.od-footer-kicker{font-weight:800}
.od-eyebrow::before,.od-footer-kicker::before{width:28px;height:1px;background:currentColor}

/* Modern header */
.od-site-header{position:relative;z-index:1000;padding:0;border-bottom:1px solid var(--od-line);background:rgba(8,9,12,.88)}
.od-site-header .od-container{width:min(1440px,calc(100% - 40px))}
.od-header-inner{min-height:76px;justify-content:space-between;gap:24px}
.od-logo-link{display:inline-flex;align-items:center;gap:12px;min-width:max-content}
.od-logo-mark{display:inline-grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border:1px solid var(--od-line-strong);border-radius:50%;background:linear-gradient(135deg,rgba(217,173,98,.18),transparent),#111216;color:var(--od-gold-bright);font-family:var(--od-font-heading);font-size:.8rem;font-weight:800;letter-spacing:.06em;box-shadow:inset 0 0 0 3px #0b0c0f}
.od-logo-lockup{display:grid}
.od-logo-text{color:var(--od-text);font-family:var(--od-font-heading);font-size:1.16rem;font-weight:700;letter-spacing:.01em;line-height:1.1}
.od-logo-subtitle{margin-top:3px;color:var(--od-faint);font-size:.61rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.od-header-tools{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}
.od-main-nav{justify-content:flex-end}
.od-nav-menu{gap:.4rem}
.od-nav-menu a{padding:.7rem .75rem;color:#d8d0c2;font-size:.76rem;font-weight:750;letter-spacing:.08em}
.od-nav-menu a:after{display:none}
.od-nav-menu a:hover,.od-nav-menu a:focus{color:var(--od-gold-bright)}

/* Keep the legacy main-nav hidden once the flyout has mounted it. */
.od-header-tools .od-main-nav[data-mdm-flyout-mounted="1"]{display:none!important}

/* Header lane fix when MDM flyout bar is injected into .od-header-inner. */
@media (min-width:901px){
.od-header-inner:has(> .mdm-flyout-bar){justify-content:flex-start;gap:16px}
.od-header-inner:has(> .mdm-flyout-bar)> .od-logo-link{order:1;flex:0 0 auto}
.od-header-inner:has(> .mdm-flyout-bar)> .mdm-flyout-bar{order:2;flex:1 1 auto;min-width:0;width:auto!important;max-width:none!important;margin:0!important}
.od-header-inner:has(> .mdm-flyout-bar)> .od-header-tools{order:3;flex:0 0 auto;min-width:240px;justify-content:flex-end;gap:10px}
.od-header-inner:has(> .mdm-flyout-bar) .od-header-tools .od-main-nav[data-mdm-flyout-mounted="1"]{display:none}
.od-header-inner:has(> .mdm-flyout-bar) #mdm-flyout-top-list{justify-content:flex-end}
}

/* Mobile header on inner pages: keep the flyout MENU bar snug under the
   logo, with the search box below it, and tighten the stack gap. The
   homepage keeps its own order (notice/official buttons above search). */
@media (max-width:640px){
  body:not(.home) .od-header-inner{gap:.3rem;min-height:0}
  body:not(.home) .od-header-inner > .od-logo-link{order:-2}
  body:not(.home) .od-header-inner > .mdm-flyout-bar{order:-1}
  body:not(.home) .od-site-header{padding-top:8px;padding-bottom:8px}
}

/* Slimmer mobile menu toggle (plugin default is 38px). Extra specificity
   so it wins regardless of stylesheet load order. */
.mdm-flyout-bar .mdm-flyout-mobile-toggle{min-height:16px}

/* adnd-monster-conversion page: the converter's CSS flattens every
   .od-container to full width to make its tool edge-to-edge, which also
   blows out the header and footer. Restore their normal lanes; the
   converter content itself stays full-width. */
body:has(.amc-converter) .od-site-header .od-container{width:min(1440px,calc(100% - 40px))!important;max-width:1440px!important;margin:0 auto!important}
body:has(.amc-converter) .od-site-footer .od-container{width:min(1240px,calc(100% - 48px))!important;max-width:1240px!important;margin:0 auto!important}

/* Same page, :has()-free flatten of the theme page-card wrappers (the
   converter plugin's own reset depends on :has() and misses in some
   browsers, leaving the tool framed inside the page card). Scoped to the
   content lane only - header and footer keep their normal widths. */
body.page.od-amc-page .od-main-content{padding:0!important}
body.page.od-amc-page .od-page-section{max-width:none!important;padding:0!important;margin:0!important}
body.page.od-amc-page .od-page-section .od-container{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
body.page.od-amc-page .od-page{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.page.od-amc-page .od-page-title,
body.page.od-amc-page .mdm-breadcrumbs{display:none!important}

/* Full-width tool pages living in the journal (dungeon_menu_item) template:
   collapse the 170px|720px|1fr article reading grid so the tool gets the
   whole lane. Body class set in functions.php (od_tool_full_width_body_class). */
body.od-tool-full-width .od-journal-main{padding:0!important}
body.od-tool-full-width .od-article-layout{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
body.od-tool-full-width .od-article-aside{display:none!important}
body.od-tool-full-width .od-article-content{width:100%!important;max-width:none!important;margin:0!important}
body.od-tool-full-width .mdm-breadcrumbs{display:none!important}

/* Menu-item pages (dungeon_menu_item CPT): wrap content in the same card
   box regular pages get, matching the old theme's look. Tool pages with
   the od-tool-full-width class are excluded - they stay edge-to-edge. */
body.single-dungeon_menu_item:not(.od-tool-full-width) .od-journal-main{padding:clamp(40px,2vw,100px) 0}
body.single-dungeon_menu_item:not(.od-tool-full-width) .mdm-breadcrumbs{margin-top:16px}
body.single-dungeon_menu_item:not(.od-tool-full-width) .od-article-layout{display:block;max-width:900px;margin:0 auto;padding:clamp(28px,5vw,64px);border:1px solid var(--od-line);border-radius:var(--od-radius);background:#08090c}
body.single-dungeon_menu_item:not(.od-tool-full-width) .od-article-aside{display:none}
body.single-dungeon_menu_item:not(.od-tool-full-width) .od-article-content{width:100%;max-width:none}

/* Gold headings across the theme (h4+ keep the neutral text color). */
h1,h2,h3{color:var(--od-gold-bright)}

/* Hide the Saved and Reference Tools tabs while a mobile menu is open.
   NOTE: keep the body-class rule separate from the :has() rules - browsers
   without :has() support drop an entire selector list containing it. */
body.od-mobile-menu-open #bookmarks-tab{display:none!important}
body:has(.mdm-flyout-bar.is-mobile-open) #bookmarks-tab{display:none!important}
body:has(.mdm-menu-container.mdm-mobile-open) #bookmarks-tab{display:none!important}

/* Portal hero */
.od-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,3vw,120px) 0 0;border-bottom:0;background:linear-gradient(90deg,rgba(8,9,12,.98),rgba(8,9,12,.88) 54%,rgba(8,9,12,.58)),radial-gradient(circle at 80% 38%,rgba(118,79,40,.2),transparent 34rem),#08090c}
.od-hero:after{position:absolute;right:-8%;bottom:-48%;z-index:-2;width:min(62vw,860px);aspect-ratio:1;border:1px solid rgba(217,173,98,.16);border-radius:50%;content:"";box-shadow:0 0 0 80px rgba(217,173,98,.025),0 0 0 160px rgba(217,173,98,.018)}
.od-hero-atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.od-hero-bg-layer{position:absolute;inset:0;z-index:0;background-position:center 3%;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.55s ease-in-out}
.od-hero-bg-layer.is-active{opacity:1}
/* Melts the top of the hero image into .od-path-section above it so the
   two sections read as one surface instead of meeting at a hard edge.
   Lives inside .od-hero-atmosphere (z-index:-1) so it covers the image
   layers but never the hero's own content. */
.od-hero-atmosphere:before{position:absolute;top:0;right:0;left:0;z-index:1;height:clamp(90px,16vh,210px);background:linear-gradient(180deg,#0c0d11 0%,rgba(12,13,17,.72) 42%,rgba(12,13,17,0) 100%);content:"";pointer-events:none}
/* Same melt on the bottom edge, fading into #library (--od-bg). */
.od-hero-atmosphere:after{position:absolute;right:0;bottom:0;left:0;z-index:1;height:clamp(90px,16vh,210px);background:linear-gradient(0deg,var(--od-bg) 0%,rgba(8,9,12,.72) 42%,rgba(8,9,12,0) 100%);content:"";pointer-events:none}
.od-hero-orb{position:absolute;top:10%;right:9%;width:min(36vw,520px);aspect-ratio:1;border:1px solid rgba(240,201,121,.18);border-radius:50%;background:radial-gradient(circle,rgba(217,173,98,.09),transparent 64%)}
.od-hero-orb:before,.od-hero-orb:after{position:absolute;inset:12%;border:1px solid rgba(240,201,121,.11);border-radius:50%;content:""}
.od-hero-orb:after{inset:28%;border-style:dashed}
.od-map-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(217,173,98,.14),transparent);transform:rotate(-14deg)}
.od-map-line,.od-hero-orb{z-index:1}
.od-map-line-one{top:22%;right:0;width:48%}.od-map-line-two{right:4%;bottom:24%;width:38%;transform:rotate(18deg)}
.od-hero-grid{display:grid;grid-template-columns:minmax(340px,.72fr) minmax(0,1.12fr);gap:clamp(48px,8vw,110px);align-items:center}
@media(min-width:901px){.od-hero-grid > .od-quest-card{order:-1}}
.od-hero-copy{max-width:760px}
.od-hero-copy h1{margin:22px 0 24px;color:var(--od-text);font-family:var(--od-font-heading);font-size:clamp(1.7rem,3.7vw,3.5rem);font-weight:500;letter-spacing:-.055em;line-height:.9;text-shadow:0px 0px 4px #000}
.od-hero-copy h1 .od-hero-title-tm{font-size:.25em;vertical-align:super;line-height:0}
.od-hero-copy h1 em{color:var(--od-gold-bright);font-weight:400}
.od-hero-lead{max-width:660px;margin:0;color:#e1d8ca;font-size:clamp(1.05rem,1.55vw,1.28rem);line-height:1.72;text-shadow:0 1px 8px rgba(0,0,0,.58)}
.od-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.od-btn.od-btn-large{min-height:54px;padding:.92rem 1.4rem;border-radius:999px;font-size:.76rem;letter-spacing:.1em}
a.od-btn.od-btn-primary.od-btn-large,
a.od-btn.od-btn-quiet.od-btn-large{background-color:rgb(0 0 0 / 60%)}
.od-btn.od-btn-primary{border:1px solid var(--od-gold-bright);background:var(--od-gold-bright);color:#181108;box-shadow:0 12px 30px rgba(197,139,55,.16)}
.od-btn.od-btn-primary:hover{border-color:#ffe0a1;background:#ffe0a1;color:#181108;transform:translateY(-2px)}
.od-btn-quiet{border:1px solid var(--od-line-strong);background:rgba(255,255,255,.025);color:var(--od-text)}
.od-btn-quiet:hover{border-color:var(--od-gold);background:rgba(217,173,98,.08);color:var(--od-gold-bright);transform:translateY(-2px)}
.od-hero-ctas .od-btn.od-btn-primary,.od-hero-ctas .od-btn.od-btn-quiet{border:1px solid var(--od-line-strong);background:rgba(255,255,255,.025);color:var(--od-text);box-shadow:none}
.od-hero-ctas .od-btn.od-btn-primary:hover,.od-hero-ctas .od-btn.od-btn-primary:focus-visible,.od-hero-ctas .od-btn.od-btn-primary:active,.od-hero-ctas .od-btn.od-btn-quiet:hover,.od-hero-ctas .od-btn.od-btn-quiet:focus-visible,.od-hero-ctas .od-btn.od-btn-quiet:active{border-color:var(--od-gold-bright);background:var(--od-gold-bright);color:#181108;transform:translateY(-2px)}
.od-hero-ctas a.od-btn.od-btn-primary.od-btn-large,
.od-hero-ctas a.od-btn.od-btn-quiet.od-btn-large{background:rgb(0 0 0 / 90%);color:var(--od-text)}
a.od-btn.od-btn-quiet.od-btn-large.od-btn-character{background-color:#ff9f1c;color:#000;opacity:.9}
.od-hero-ctas a.od-btn.od-btn-primary.od-btn-large:is(:hover,:focus-visible,:active),
.od-hero-ctas a.od-btn.od-btn-quiet.od-btn-large:is(:hover,:focus-visible,:active){border-color:var(--od-gold-bright);background:rgba(217,173,98,.16);color:var(--od-text);transform:translateY(-2px)}
.od-hero-ctas a.od-btn.od-btn-large{border-radius:8px}
.od-hero-ctas.od-hero-ctas-secondary{margin-top:12px}
.od-hero-proof{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:42px;color:var(--od-faint);font-size:.73rem;letter-spacing:.04em}
.od-hero-proof span{display:inline-flex;align-items:center;gap:5px}.od-hero-proof span+span:before{margin-right:14px;color:var(--od-gold-deep);content:"✦"}.od-hero-proof strong{color:#ddd5c8;font-weight:800}
.od-quest-card{position:relative;padding:28px;border:0;border-radius:2px 28px 2px 28px;background:none}
.od-quest-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--od-muted);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.od-quest-level{color:var(--od-gold-bright)}
.od-quest-sigil{display:grid;width:116px;height:116px;margin:28px auto 20px;place-items:center;border:1px solid rgba(217,173,98,.32);border-radius:50%;background:radial-gradient(circle,rgba(217,173,98,.13),transparent 68%);box-shadow:0 0 0 10px rgba(217,173,98,.025)}
.od-quest-door{position:relative;width:42px;height:62px;border:2px solid var(--od-gold);border-bottom:0;border-radius:24px 24px 0 0}.od-quest-door:after{position:absolute;right:8px;top:33px;width:4px;height:4px;border-radius:50%;background:var(--od-gold-bright);content:"";box-shadow:0 0 12px var(--od-gold-bright)}
.od-quest-card h2{max-width:320px;margin:0 auto 22px;font-family:var(--od-font-heading);font-size:1.55rem;font-weight:500;line-height:1.2;text-align:center}
.od-quest-card ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}.od-quest-card li{display:block}
.od-quest-btn>span{color:var(--od-gold);font-family:var(--od-font-heading);font-size:.76rem}.od-quest-card li div{display:grid}.od-quest-card li strong{color:#ebe2d3;font-size:.83rem}.od-quest-card li small{color:var(--od-faint);font-size:.68rem}
.od-hero-community-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:74px;padding:20px 0}
.od-hero-community-note{flex:0 0 auto;display:inline-block;align-self:flex-start;width:fit-content;max-width:min(100%,760px);padding:8px 12px;border:1px solid rgba(240,201,121,.3);border-radius:10px;background:rgba(8,9,12,.90);color:#e8dfcf;font-size:clamp(.78rem,.92vw,.88rem);font-weight:500;line-height:1.55;letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.68)}
.od-hero-community-note-link{margin-left:8px;color:var(--od-gold-bright);text-decoration:underline;text-underline-offset:3px}
.od-hero-community-note-link:hover,.od-hero-community-note-link:focus-visible{color:#ffe7b0}
.od-hero-community-links>span{flex:0 0 auto;color:var(--od-faint);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.od-hero-community-links .od-top-buttons-inner{justify-content:flex-start;gap:22px;max-width:none;flex:1 1 100%;margin:0}.od-hero-utility-link{color:#cfc7ba;font-size:.75rem;font-weight:700}.od-hero-utility-link:hover{color:var(--od-gold-bright)}
.od-hero-atmosphere-admin{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:10px}
.od-hero-atmosphere-admin .od-btn{min-height:0;padding:.48rem .9rem;border-radius:999px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.od-hero-atmosphere-count{color:var(--od-faint);font-size:.7rem;font-weight:700;letter-spacing:.06em}
.od-hero-atmosphere-hint{flex:1 1 100%;color:#b9b19f;font-size:.68rem;line-height:1.45}

/* Guided start */
.od-path-section{padding:10px 0;background:linear-gradient(rgba(217,173,98,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(217,173,98,.025) 1px,transparent 1px),#0c0d11;background-size:64px 64px}
.od-section-heading{max-width:760px;margin-bottom:42px}.od-section-heading-centered{margin-right:auto;margin-left:auto;text-align:center}.od-section-heading-centered .od-eyebrow{justify-content:center}
.od-section-heading h2{margin:14px 0 12px;color:var(--od-text);font-family:var(--od-font-heading);font-size:clamp(2.3rem,4.5vw,4.4rem);font-weight:500;letter-spacing:-.035em;line-height:1}
.od-section-heading p{max-width:650px;margin:0;color:var(--od-muted);font-size:1rem}.od-section-heading-centered p{margin-right:auto;margin-left:auto}.od-section-heading-split{display:flex;max-width:none;align-items:end;justify-content:space-between;gap:32px}
.od-path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.od-path-card{position:relative;display:flex;min-height:420px;overflow:hidden;flex-direction:column;padding:32px;border:1px solid var(--od-line);border-radius:var(--od-radius);background:var(--od-surface);color:var(--od-text);transition:border-color .22s,transform .22s,box-shadow .22s}
.od-path-card:after{position:absolute;inset:auto -28% -48% 20%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(217,173,98,.14),transparent 68%);content:"";pointer-events:none}
.od-path-player{background:radial-gradient(circle at 82% 10%,rgba(116,57,46,.24),transparent 38%),var(--od-surface)}.od-path-narrator{background:radial-gradient(circle at 82% 10%,rgba(85,70,111,.27),transparent 38%),var(--od-surface)}.od-path-tonight{background:radial-gradient(circle at 82% 10%,rgba(159,113,48,.25),transparent 38%),var(--od-surface)}
.od-path-card:hover{z-index:1;border-color:rgba(240,201,121,.52);transform:translateY(-8px);box-shadow:var(--od-shadow)}
.od-path-number{display:none}.od-path-icon{display:none}
.od-path-kicker{color:var(--od-faint);font-size:1.2rem;font-weight:600;letter-spacing:.14em;text-transform:none}.od-path-card h3{margin:4px 0 12px;font-family:var(--od-font-heading);font-size:2.44rem;font-weight:500;line-height:1.05}.od-path-card p{margin:0 0 28px;color:var(--od-muted);font-size:.9rem;line-height:1.65}
.od-text-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--od-gold-bright);font-size:.74rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.od-text-link span{transition:transform .18s}.od-text-link:hover span,a:hover>.od-text-link span{transform:translateX(4px)}
/* OD26 library */
.od-library-section{padding:clamp(20px,1vw,128px) 0;background:radial-gradient(circle at 10% 30%,rgba(85,70,111,.1),transparent 26rem),var(--od-bg)}
.od-library-filter-shell{position:static;z-index:auto;width:100%;max-width:none;margin:0 0 22px;padding:9px;border:1px solid var(--od-line);border-radius:14px;background:rgba(13,14,18,.9);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.od-library-filter{justify-content:flex-start;gap:5px}.od-filter-btn{min-height:42px;padding:.62rem .9rem;border:0;border-radius:9px;background:transparent;color:var(--od-muted);font-size:.72rem;font-weight:800;letter-spacing:.03em;box-shadow:none}.od-filter-btn:hover{background:rgba(255,255,255,.045);color:var(--od-text);transform:none}.od-filter-btn.is-active{background:var(--od-text);color:#15130f;box-shadow:0 5px 14px rgba(0,0,0,.18)}.od-filter-btn-star.is-active{background:var(--od-gold-bright)}.od-filter-count{opacity:.55;font-variant-numeric:tabular-nums}
.od-filter-btn.is-active .od-filter-count{color:rgba(21,19,15,.72);opacity:1}
.od-filter-btn{border:1px solid transparent}
.od-filter-btn:hover,.od-filter-btn:focus-visible{background:rgba(var(--od-filter-rgb),.18);border-color:rgb(var(--od-filter-rgb));color:#fff;box-shadow:0 0 0 1px rgba(var(--od-filter-rgb),.85),0 0 18px rgba(var(--od-filter-rgb),.35)}
.od-filter-btn.is-active{border-color:rgb(var(--od-filter-rgb));box-shadow:0 0 0 1px rgba(var(--od-filter-rgb),.9),0 0 20px rgba(var(--od-filter-rgb),.4),0 5px 14px rgba(0,0,0,.2)}
.od-start-here-reading{margin-bottom:32px;padding:clamp(26px,4vw,48px);border:1px solid rgba(217,173,98,.25);border-radius:var(--od-radius);background:linear-gradient(135deg,rgba(217,173,98,.09),transparent),var(--od-surface-warm)}
.od-start-here-reading h2{font-family:var(--od-font-heading);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;text-align:left}.od-start-here-reading-panel{border-color:var(--od-line);border-radius:12px;background:rgba(0,0,0,.16)}
.od-grid{gap:18px}.od-card{overflow:hidden;border:1px solid var(--od-line);border-radius:15px;background:var(--od-surface);box-shadow:none;transition:transform .22s,border-color .22s,box-shadow .22s}.od-card:hover{border-color:rgba(217,173,98,.38);transform:translateY(-5px);box-shadow:0 24px 52px rgba(0,0,0,.28)}
.od-card-image{border-radius:0;background:radial-gradient(circle at 50% 65%,rgba(217,173,98,.1),transparent 45%),#0c0d10}.od-card-image img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}.od-card:hover .od-card-image img{transform:scale(1.025)}
.od-card-body{padding:22px}.od-card-title{font-family:var(--od-font-heading);font-size:1.35rem;font-weight:600;letter-spacing:-.01em}.od-card-description{color:var(--od-muted);font-size:.8rem;line-height:1.6}.od-card-actions .od-btn{border-radius:999px}.od-card-star{top:12px;right:12px;width:auto;height:auto;border-radius:0;background:transparent;border:0;color:var(--od-gold-bright);font-size:1.95rem;line-height:1;box-shadow:none}

/* Journal cards */
.od-journal-list{padding:clamp(76px,9vw,128px) 0}
.od-index-hero,.od-page-hero,.od-article-hero{position:relative;overflow:hidden;padding:clamp(74px,10vw,144px) 0 clamp(64px,8vw,110px);border-bottom:1px solid var(--od-line);background:radial-gradient(circle at 78% 36%,rgba(217,173,98,.12),transparent 26rem),radial-gradient(circle at 20% 0%,rgba(85,70,111,.18),transparent 32rem),#0a0b0f}
.od-index-hero h1,.od-page-hero h1{max-width:880px;margin:18px 0 12px;font-family:var(--od-font-heading);font-size:clamp(2.2rem,5vw,4rem);font-weight:500;letter-spacing:-.05em;line-height:.94}.od-index-hero p{max-width:650px;margin:0;color:var(--od-muted);font-size:1.05rem}
.od-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.od-post-card{overflow:hidden;border:1px solid var(--od-line);border-radius:var(--od-radius);background:var(--od-surface);transition:transform .22s,border-color .22s,box-shadow .22s}.od-post-card:hover{border-color:rgba(217,173,98,.38);transform:translateY(-6px);box-shadow:var(--od-shadow)}
.od-post-card-media{display:grid;height:220px;overflow:hidden;place-items:center;background:radial-gradient(circle,rgba(217,173,98,.14),transparent 42%),linear-gradient(135deg,#18151a,#0a0b0e)}.od-post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.od-post-card:hover .od-post-card-media img{transform:scale(1.04)}
.od-post-card-monogram{display:grid;width:84px;height:84px;place-items:center;border:1px solid rgba(217,173,98,.35);border-radius:50%;color:var(--od-gold);font-family:var(--od-font-heading);font-size:1.2rem;box-shadow:0 0 0 12px rgba(217,173,98,.03)}
.od-post-card-body{display:flex;min-height:300px;flex-direction:column;padding:25px}.od-post-card-meta{display:flex;gap:14px;color:var(--od-faint);font-size:.63rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.od-post-card-meta span+span:before{margin-right:14px;color:var(--od-gold-deep);content:"•"}
.od-post-card h2,.od-post-card h3{margin:14px 0 10px;font-family:var(--od-font-heading);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:550;letter-spacing:-.02em;line-height:1.15}.od-post-card h2 a:hover,.od-post-card h3 a:hover{color:var(--od-gold-bright)}.od-post-card p{margin:0 0 22px;color:var(--od-muted);font-size:.84rem;line-height:1.65}
.od-pagination{margin-top:52px}.od-pagination .nav-links{display:flex;align-items:center;justify-content:center;gap:8px}.od-pagination .page-numbers{display:grid;min-width:42px;height:42px;padding:0 12px;place-items:center;border:1px solid var(--od-line);border-radius:9px;color:var(--od-muted);font-size:.75rem;font-weight:800}.od-pagination .current,.od-pagination a:hover{border-color:var(--od-gold);background:var(--od-gold);color:#171109}
.od-empty-state{padding:80px 24px;text-align:center}.od-empty-state h2{font-family:var(--od-font-heading);font-size:2.4rem}

/* Present for screen readers and crawlers, never painted. Do not swap
   this for display:none - that removes it from the accessibility tree.

   .od-sr-only is an alias on the same rule. Both names exist because the
   theme already used .od-visually-hidden, while .od-sr-only is the name
   used by the accessibility work and by plugin markup. They must stay
   grouped so there is only one implementation to keep correct. */
.od-visually-hidden,
.od-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Editorial chapter */
.od-article-hero-inner{max-width:1040px}.od-back-link{display:inline-block;margin-bottom:62px;color:var(--od-muted);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.od-back-link:hover{color:var(--od-gold-bright)}
.od-article-taxonomy{margin-bottom:18px;color:var(--od-gold-bright);font-size:.7rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.od-article-hero h1{max-width:980px;margin:0;font-family:var(--od-font-heading);font-size:clamp(2.4rem,5.8vw,4.8rem);font-weight:500;letter-spacing:-.055em;line-height:.94}
.od-article-deck{max-width:760px;margin:28px 0 0;color:#c9c1b4;font-family:var(--od-font-heading);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.5}.od-article-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:38px;color:var(--od-faint);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.od-article-meta span+span:before{margin-right:28px;color:var(--od-gold-deep);content:"✦"}
.od-article-featured{overflow:hidden;max-height:720px;margin-top:-44px;margin-bottom:0;border:1px solid var(--od-line);border-radius:20px;background:var(--od-surface);box-shadow:var(--od-shadow)}.od-article-featured img{width:100%;max-height:720px;object-fit:cover}
.od-article-layout{display:grid;grid-template-columns:170px minmax(0,720px) 1fr;gap:60px;padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(70px,9vw,130px)}.od-article-aside{position:sticky;top:116px;align-self:start;padding-top:9px}.od-aside-label{color:var(--od-faint);font-size:.62rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.od-aside-categories{display:grid;gap:8px;margin-top:12px}.od-aside-categories a{color:var(--od-gold-bright);font-family:var(--od-font-heading);font-size:1rem}
.od-article-content{grid-column:2;color:#ddd5c8;font-family:var(--od-font-body);font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.65}.od-article-content>p:first-child{color:var(--od-text);font-size:1.2em;line-height:1.75}.od-article-content>p:first-child:first-letter{float:left;margin:.08em .12em 0 0;color:var(--od-gold-bright);font-family:var(--od-font-heading);font-size:4.4em;line-height:.72}
.od-page-content h1,.od-page-content h2,.od-page-content h3,.od-page-content h4{margin-top:2.35em;color:var(--od-text);font-weight:550;letter-spacing:-.02em;line-height:1.14;text-transform:none}
.od-page-content h1,.od-page-content h2,.od-page-content h3{color:var(--od-gold-bright)}.od-page-content h2{font-size:2rem}.od-page-content h3{color:var(--od-gold-bright);font-size:1.5rem}.od-page-content a{color:var(--od-gold-bright);text-decoration:underline;text-decoration-color:rgba(217,173,98,.42);text-underline-offset:4px}
.od-page-content blockquote{margin:2.5em 0;padding:1.2em 1.4em;border:0;border-left:3px solid var(--od-gold);border-radius:0 12px 12px 0;background:rgba(217,173,98,.06);color:#d9cfbf;font-size:1.08em}.od-page-content img{border-radius:14px}
.od-article-footer{padding-bottom:clamp(80px,10vw,140px)}.od-article-tags{margin-bottom:32px;color:var(--od-faint);font-size:.72rem}.od-article-tags span{margin-right:10px;color:var(--od-text);font-weight:800}.od-article-tags a{display:inline-block;margin:4px;padding:7px 11px;border:1px solid var(--od-line);border-radius:999px;color:var(--od-muted)}
.od-post-navigation{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--od-line);border-bottom:1px solid var(--od-line)}.od-post-navigation>div{min-height:150px;padding:30px 0}.od-post-navigation>div+div{padding-left:38px;border-left:1px solid var(--od-line);text-align:right}.od-post-navigation small{display:block;margin-bottom:8px;color:var(--od-faint);font-size:.61rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.od-post-navigation a{color:var(--od-text);font-family:var(--od-font-heading);font-size:1.35rem}.od-post-navigation a:hover{color:var(--od-gold-bright)}
.od-main-content{padding:0}.od-page-section{max-width:none;padding:clamp(54px,8vw,100px) 0}.od-page{max-width:900px;margin:0 auto;padding:0 3rem 3rem;border:1px solid var(--od-line);border-radius:var(--od-radius);background:#08090c}.od-page .od-page-content{color:#ddd5c8;font-family:var(--od-font-body);font-size:1.08rem;line-height:1.65}
/* OD26 footer */
.od-site-footer{margin-top:0;padding:clamp(64px,8vw,104px) 0 34px;border-top:1px solid var(--od-line);background:radial-gradient(circle at 20% 0%,rgba(85,70,111,.16),transparent 32rem),#07080b}
.od-footer-lead{display:flex;align-items:end;justify-content:space-between;gap:38px;padding-bottom:clamp(48px,7vw,80px);border-bottom:1px solid var(--od-line)}.od-footer-lead h2{max-width:700px;margin:14px 0 0;font-family:var(--od-font-heading);font-size:clamp(2.3rem,4.6vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:.98}.od-footer-start{flex:0 0 auto;border-radius:999px}
.od-btn.od-btn-primary.od-footer-start{padding:13px}
.od-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:32px}.od-footer-brand{display:flex;align-items:center;gap:13px}.od-footer-brand p{margin:0;color:var(--od-faint);font-size:.66rem;line-height:1.55}
.od-footer-nav{display:flex;align-items:center;justify-content:flex-end;gap:18px}.od-footer-nav a,.od-footer-text-button{padding:0;border:0;background:none;color:var(--od-faint);font-family:var(--od-font-body);font-size:.68rem;cursor:pointer}.od-footer-nav a:hover,.od-footer-text-button:hover{color:var(--od-gold-bright)}
.od-notice-modal-content h2{margin:0 0 1rem;color:var(--od-gold-bright);font-family:var(--od-font-heading);font-size:2rem;text-align:center}

@media(max-width:1080px){
.od-logo-subtitle{display:none}.od-header-tools{gap:10px}.od-hero-grid{grid-template-columns:340px minmax(0,1fr);gap:42px}.od-path-card{min-height:390px;padding:26px}.od-path-card h3{font-size:1.65rem}.od-article-layout{grid-template-columns:130px minmax(0,1fr);gap:36px}
}
@media(max-width:900px){
.od-site-header{position:relative}.od-header-inner,.od-header-tools{flex-wrap:wrap}.od-header-inner{padding:13px 0}.od-header-tools{width:100%;justify-content:center}.od-main-nav{justify-content:center}.od-hero-grid{grid-template-columns:1fr}.od-quest-card{max-width:540px}.od-path-grid,.od-post-grid{grid-template-columns:1fr 1fr}.od-post-grid-home .od-post-card:last-child{grid-column:1/-1}.od-article-layout{display:block}.od-article-aside{position:static;margin-bottom:42px}.od-aside-categories{display:flex;flex-wrap:wrap}.od-article-content{max-width:720px;margin:0 auto}.od-footer-lead,.od-footer-bottom{align-items:flex-start;flex-direction:column}.od-footer-nav{justify-content:flex-start}
}
@media(max-width:640px){
.od-container,.od-site-header .od-container{width:min(100% - 28px,1240px)}.od-logo-text{font-size:1rem}.od-logo-mark{width:34px;height:34px;flex-basis:34px}.od-header-tools{align-items:stretch}.od-main-nav{overflow-x:auto;justify-content:flex-start;padding-bottom:4px}.od-nav-menu{width:max-content}
.od-hero{padding-top:64px}.od-hero-copy h1{font-size:clamp(1.5rem,8vw,2.3rem)}.od-hero-lead{font-size:1rem}.od-hero-ctas{align-items:stretch;flex-direction:column}.od-btn.od-btn-large{justify-content:center;text-align:center}.od-hero-proof{align-items:flex-start;flex-direction:column}.od-hero-proof span+span:before{display:none}.od-hero-community-links{align-items:flex-start;flex-direction:column;margin-top:52px}.od-hero-community-links .od-top-buttons-inner{justify-content:flex-start}
.od-path-grid,.od-post-grid{grid-template-columns:1fr}.od-path-card,.od-path-card:last-child,.od-post-grid-home .od-post-card:last-child{grid-column:auto}.od-path-card{min-height:370px}.od-section-heading-split{align-items:flex-start;flex-direction:column}.od-library-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:3px}.od-filter-btn{flex:0 0 auto}.od-start-here-reading-columns{grid-template-columns:1fr}.od-post-card-media{height:190px}
.od-index-hero h1,.od-page-hero h1{font-size:clamp(2rem,9vw,3rem)}.od-article-hero h1{font-size:clamp(2rem,9vw,3.2rem)}.od-back-link{margin-bottom:42px}.od-article-meta{align-items:flex-start;flex-direction:column}.od-article-meta span+span:before{display:none}.od-article-featured{width:calc(100% - 28px);margin-top:-24px;border-radius:12px}.od-article-content>p:first-child:first-letter{float:none;margin:0;font-size:inherit;line-height:inherit}.od-post-navigation{grid-template-columns:1fr}.od-post-navigation>div+div{padding-left:0;border-top:1px solid var(--od-line);border-left:0;text-align:left}.od-footer-nav{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.od-hero-bg-layer{transition-duration:1.55s!important;transition-property:opacity!important;transition-timing-function:ease-in-out!important}}
/* ===== OD26 Artwork and Readability Pass ===== */
body{font-size:19px}

/* Repair and enlarge the live search component supplied by the search plugin. */
.od-header-tools>.od-live-search{flex:0 0 290px;width:290px;min-width:250px;max-width:290px}
body.home .od-header-tools>.od-live-search{flex-basis:145px;width:145px;min-width:125px;max-width:145px}
.od-live-search .od-search-input-wrapper:before{position:absolute;top:50%;left:16px;z-index:2;width:16px;height:16px;border:2px solid #d9ad62;border-radius:50%;content:"";transform:translateY(-58%);pointer-events:none}
.od-live-search .od-search-input-wrapper:after{position:absolute;top:58%;left:31px;z-index:2;width:7px;height:2px;background:#d9ad62;content:"";transform:rotate(45deg);pointer-events:none}
.od-live-search .od-search-input{display:block;width:100%;height:48px;padding:0 42px 0 48px!important;border:1px solid rgba(240,201,121,.34)!important;border-radius:999px!important;background:#12151b!important;color:#f7efe1!important;font-size:16px!important;font-weight:650;line-height:48px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.od-live-search .od-search-input::placeholder{color:#a9a295!important;opacity:1}
.od-live-search .od-search-input:hover{border-color:rgba(240,201,121,.62)!important}
.od-live-search .od-search-input:focus{border-color:#f0c979!important;background:#171b22!important;box-shadow:0 0 0 4px rgba(240,201,121,.12)!important}
.od-live-search .od-search-results{top:calc(100% + 10px);min-width:360px;overflow:hidden;border:1px solid rgba(240,201,121,.28);border-radius:14px;background:#12151b;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.od-live-search .od-search-result{padding:15px 18px;border-bottom-color:rgba(255,255,255,.08)}
.od-live-search .od-search-result:hover,.od-live-search .od-search-result-highlighted{background:#1c212a}
.od-live-search .od-result-title{color:#f3eadb;font-size:16px}.od-live-search .od-result-excerpt{color:#b9b1a4;font-size:14px}.od-live-search .od-search-no-results{color:#c9c1b4;font-size:15px}

/* Replace repetitive line art with the game's own artwork. */
.od-map-line,.od-hero-orb,.od-hero:after{display:none}
.od-quest-card{min-height:570px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:32px;border:0;background:none}
.od-quest-card-top{position:absolute;z-index:3;top:72px;left:32px;right:32px;color:#fff;font-size:.78rem;text-shadow:0 2px 10px #000}.od-quest-level{color:#ffd77f}
.od-quest-card-top.od-quest-card-top-lead{justify-content:center;text-align:center;text-transform:none;letter-spacing:0}
.od-quest-card-top-lead .od-quest-card-lead{max-width:520px;margin:0 auto;color:#e1d8ca;font-size:clamp(1.05rem,1.55vw,1.28rem);font-weight:400;line-height:1.72}
.od-quest-card-lead{background-color:#090808e6;padding-left:25px;padding-right:25px;border-radius:17px;padding-top:5px;padding-bottom:5px}
.od-quest-sigil{display:none}.od-quest-card h2{position:relative;z-index:2;max-width:360px;margin:0 0 22px;color:#fff;font-size:2rem;text-align:center;text-shadow:0 3px 18px #000}.od-quest-card ol{position:relative;z-index:2}
.od-quest-card-brand{position:absolute;z-index:3;top:24px;left:32px;right:32px;max-width:none;margin:0 !important;margin-bottom:50px !important;color:#fff;font-family:var(--od-font-heading);font-size:clamp(1.5rem,2.4vw,2.3rem);font-weight:500;line-height:1;text-align:center;text-shadow:0 3px 18px #000}
.od-quest-card-brand-tm{font-size:.3em;vertical-align:super;line-height:0}
.od-quest-btn>span{color:#ffd77f;font-size:.86rem}.od-quest-card li strong{color:#fff;font-size:1rem;text-shadow:0 2px 8px #000}.od-quest-card li small{color:#d9d2c7;font-size:.84rem;text-shadow:0 2px 8px #000}
.od-quest-btn{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:14px 14px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(8,9,12,.90);opacity:1!important;text-decoration:none;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}
.od-quest-btn.od-quest-btn-no-index{grid-template-columns:1fr}
.od-quest-btn.od-quest-btn-audio{grid-template-columns:minmax(0,1fr) auto}
.od-quest-btn .od-quest-btn-icon-right{justify-self:end;color:#ffd77f;font-size:2.1rem;line-height:1}
.od-quest-btn:hover,.od-quest-btn:focus-visible{border-color:var(--od-gold-bright);background:rgba(8,9,12,.88);opacity:1!important;transform:translateY(-2px)}
.od-quest-card .od-quest-sub-links{display:grid;row-gap:10px}
.od-quest-btn.od-quest-btn-sub{grid-template-columns:1fr;padding:11px 12px;background:rgba(8,9,12,.82)}
.od-quest-btn.od-quest-btn-sub>span{font-size:.8rem;line-height:1}
.od-quest-btn.od-quest-btn-sub strong{font-size:.92rem}
.od-quest-btn.od-quest-btn-sub small{font-size:.76rem}
.od-hero-portal-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:460px;margin-top:26px;padding:20px 22px;border:1px solid rgba(240,201,121,.42);border-radius:14px;background:rgba(8,9,12,.90);color:#fff;font-family:var(--od-font-heading);font-size:1.05rem;font-weight:700;letter-spacing:.04em;text-decoration:none;text-shadow:0 2px 10px #000;box-shadow:0 18px 44px rgba(0,0,0,.42);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.od-hero-portal-btn span{color:#ffd77f;font-size:1.2rem;transition:transform .12s ease}
.od-hero-portal-btn:hover,.od-hero-portal-btn:focus-visible,.od-hero-portal-btn:active{border-color:var(--od-gold-bright);background:rgba(217,173,98,.16);color:var(--od-text);transform:translateY(-2px);box-shadow:0 24px 54px rgba(0,0,0,.52)}
.od-hero-portal-btn:hover span{transform:translateX(4px)}

/* Artwork-driven role panels with strong contrast. */
.od-path-card{padding:34px;justify-content:flex-end;background-position:center;background-size:cover;border-color:rgba(240,201,121,.32);box-shadow:none}
.od-path-card:before{position:absolute;inset:0;z-index:0;background:none;content:""}
.od-path-card:after{display:none}.od-path-card>*{position:relative;z-index:1}
.od-path-player{background-image:url("assets/images/experience/ranger.jpg");background-position:44% center}.od-path-narrator{background-image:url("assets/images/experience/blue-dragon.jpg");background-position:center 34%}.od-path-tonight{background-image:url("assets/images/experience/to-battle.jpg");background-position:50% center}.od-path-character{background-image:url("assets/images/Wizard-Human-Female.jpg");background-position:center 32%;background-size:calc(100% + 60px) calc(100% + 60px)}
.od-path-number{display:none}.od-path-icon{display:none}
.od-path-kicker{color:#fff;font-size:1.2rem;font-weight:600;text-transform:none;text-shadow:none}.od-path-card h3{margin:4px 0 12px;color:#fff;font-size:2.44rem;text-shadow:0 3px 16px #000}.od-path-card p{max-width:420px;margin-bottom:24px;color:#f0e9dd;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 12px #000}
.od-path-card .od-text-link{width:max-content;margin-top:0;padding:12px 17px;border:1px solid rgba(255,215,127,.72);border-radius:999px;background:rgba(8,9,12,.68);color:#ffd77f;font-size:.88rem;letter-spacing:.06em}
.od-path-card:hover .od-text-link{background:#f0c979;color:#181108}.od-path-card:hover{transform:translateY(-8px) scale(1.008);box-shadow:none}
.od-path-player,.od-path-narrator,.od-path-tonight,.od-path-character{border-bottom:2px}

/* Larger, calmer supporting type and actions. */
.od-eyebrow,.od-footer-kicker{font-size:.82rem}.od-hero-lead{font-size:clamp(1.18rem,1.65vw,1.42rem);line-height:1.65}.od-btn.od-btn-large{min-height:60px;padding:1rem 1.65rem;font-size:.9rem}.od-hero-proof{font-size:.88rem}.od-hero-community-links>span{font-size:.76rem}.od-hero-utility-link{font-size:.92rem}.od-section-heading p{font-size:1.12rem;line-height:1.65}
.od-filter-btn{font-size:.85rem}.od-card-title{font-size:1.35rem}.od-card-description{font-size:1rem;line-height:1.65}.od-card-read-about{font-size:.92rem}.od-card-actions .od-btn{min-height:46px;font-size:.86rem}
.od-post-card-body{padding:30px}.od-post-card-meta{font-size:.75rem}.od-post-card h2,.od-post-card h3{font-size:clamp(1.7rem,2.3vw,2.15rem)}.od-post-card p{font-size:1rem}.od-text-link{font-size:.86rem}
.od-footer-nav a,.od-footer-text-button{font-size:.82rem}

/* Use artwork subtly in the journal and footer without reducing readability. */
.od-site-footer{background:linear-gradient(90deg,rgba(7,8,11,.8),rgba(7,8,11,.4)),url("assets/images/experience/thief-ontop.jpg") center/cover no-repeat}

@media(max-width:1180px){.od-header-tools>.od-live-search{flex-basis:240px;width:240px;min-width:220px}.od-live-search .od-search-input{font-size:15px!important}body.home .od-header-tools>.od-live-search{flex-basis:120px;width:120px;min-width:110px;max-width:145px}}
@media(max-width:800px){.od-btn-map-dungeon{display:none!important}}
@media(max-width:900px){.od-header-tools>.od-live-search,body.home .od-header-tools>.od-live-search{flex:1 1 100%;width:100%;min-width:0;max-width:none}.od-live-search .od-search-results{min-width:100%}.od-quest-card{max-width:620px}}
@media(max-width:640px){body{font-size:18px}.od-path-card{padding:28px}.od-path-card h3{font-size:2.2rem}.od-path-card p{font-size:1rem}.od-path-card .od-text-link{font-size:.78rem}.od-quest-card{min-height:560px;padding:26px}.od-quest-card-top{left:26px;right:26px}}

/* Pages & posts must NOT inherit the homepage-scale hero block.
   Give them a modest page header: compact padding + a sensible title
   that still sits clearly above the in-content section headings. */
body.page .od-page-hero,
body.single-post .od-article-hero,
body.blog .od-index-hero,
body.archive .od-index-hero {
  padding: 0 0 28px !important;
  padding-top: 0px !important;
  top: 0 !important;
}

body.page .od-page-hero h1,
body.page .od-page-hero .od-page-hero-title,
body.blog .od-index-hero h1,
body.archive .od-index-hero h1,
body.single-post .od-article-hero h1 {
  font-size: clamp(1.65rem, 2.4vw, 2rem) !important;
  line-height: 1.12 !important;
}

@media (max-width: 640px) {
  body.page .od-page-hero,
  body.single-post .od-article-hero,
  body.blog .od-index-hero,
  body.archive .od-index-hero {
    padding: 0 0 clamp(20px, 6vw, 32px) !important;
    padding-top: 0px !important;
  }

  body.page .od-page-hero h1,
  body.page .od-page-hero .od-page-hero-title,
  body.blog .od-index-hero h1,
  body.archive .od-index-hero h1,
  body.single-post .od-article-hero h1 {
    font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
  }
}

/* Latest News page: keep section headings compact and readable. */
body.page-id-288 .od-page-content .wp-block-heading,
body.page-id-288 .od-page-content h2 {
  margin-top: 1.45em !important;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem) !important;
  line-height: 1.24 !important;
}

/* Global fix: reduce oversized section headings in page and article content. */
body.page .od-page-content h2,
body.single-post .od-article-content h2 {
  margin-top: 1.55em;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  line-height: 1.26;
}

/* Trim leftover vertical bloat on pages and posts (homepage remains untouched). */
body.page .od-page-section {
  padding: clamp(26px, 3.4vw, 42px) 0 clamp(42px, 5.2vw, 70px) !important;
}

body.page .od-page {
  padding: 0 3rem 3rem !important;
}

/* Narrow the side padding on small screens. These need !important and
   need to sit after the rule above, or they lose to it at every width. */
@media (max-width: 960px) {
  .od-page,
  body.page .od-page {
    padding: 0 2rem 2.5rem !important;
  }
}

@media (max-width: 640px) {
  .od-page,
  body.page .od-page {
    padding: 0 1.25rem 2rem !important;
  }
}

body.single-post .od-back-link {
  margin-bottom: 28px !important;
}

body.single-post .od-article-meta {
  margin-top: 24px !important;
}

.od-article-layout.od-container {
  padding-top: unset !important;
  padding-bottom: 0px !important;
}

body.single-post .od-article-featured {
  margin-top: 0 !important;
}

.mdm-breadcrumbs {
  margin: 0 0 1rem 0;
  padding: 0 0 0px;
  border-bottom: 0px solid var(--mdm-card-border);
}

.od-footer-button {
  padding: 8px !important;
}

.od-header-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(240, 201, 121, 0.34);
  border-radius: 5px;
  background: #b30404;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.od-header-notice-btn:hover,
.od-header-notice-btn:focus,
.od-header-notice-btn:active {
  background: #8f0303;
  border-color: rgba(240, 201, 121, 0.62);
}

.od-header-official-btn {
  text-decoration: none;
  white-space: nowrap;
  font-weight: normal;
}

.od-header-official-btn:hover,
.od-header-official-btn:focus,
.od-header-official-btn:active {
  filter: brightness(0.85);
}

@media (max-width: 900px) {
  .od-header-notice-btn {
    height: 30px;
  }
}

/* Force a tighter crop on the 4th path card artwork. */
body.home #choose-your-path .od-path-card.od-path-character {
  background-size: 122% 122% !important;
  background-position: center 30% !important;
}

#od-notice-btn {
  background: #b30404;
  color: #fff;
  padding: 8px;
  border-radius: 5px;
  font-weight: bold;
}

#od-notice-btn:hover,
#od-notice-btn:focus,
#od-notice-btn:active {
  background: #8f0303;
}

/* ==========================================================================
   Accessibility - global keyboard, motion, and contrast behaviour

   This block is intentionally last in the file so it wins on cascade order
   against earlier component rules that would otherwise suppress a focus
   indicator. Nothing here changes layout, colour scheme, or branding.
   ========================================================================== */

/* Focus indicator for every interactive element, not only links and
   buttons. The earlier rule in this stylesheet covered a and button only,
   which left inputs, selects, textareas, summary elements, and anything
   made focusable with tabindex without a visible indicator.

   :focus-visible is used so pointer users do not see a ring after a click,
   with a :focus fallback below for browsers that do not support it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: 3px;
  /* A second ring in a contrasting dark tone keeps the indicator visible
     against gold and parchment backgrounds, where a gold-only outline
     would not meet 3:1 against its surroundings. */
  box-shadow: 0 0 0 6px rgba(10, 8, 4, 0.75);
}

/* Fallback for browsers without :focus-visible support. The @supports
   guard means modern browsers ignore this entirely and use the rule
   above, so pointer users do not get a persistent ring. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  summary:focus,
  [tabindex]:not([tabindex="-1"]):focus {
    outline: 3px solid var(--od-gold-bright);
    outline-offset: 3px;
  }
}

/* The main landmark carries tabindex="-1" so the skip link can move focus
   to it. That makes it programmatically focusable, and some browsers then
   paint a focus ring around the whole page region, which is confusing.
   The ring is suppressed only for this scripted, non-tabbable case. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* Skip link. Kept off-screen until focused rather than display:none, so it
   stays in the accessibility tree and in the tab order as the first
   focusable element on the page. */
.od-skip-link:focus,
.od-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #15100a;
  outline-offset: 2px;
  box-shadow: none;
}

/* Minimum target size (WCAG 2.5.8, Level AA, 24 by 24 CSS pixels).
   Applied to the small icon-style controls in the header and footer that
   were below the threshold. Layout is unaffected because these are
   inline-flex controls that were already smaller than their box. */
.od-footer-btn-edit,
.od-footer-btn-remove,
.od-footer-btn-add,
.od-notice-close,
.od-card-star {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Windows High Contrast Mode / forced-colors.

   In forced-colors mode the browser replaces author colours with the
   user's system palette, and outlines drawn with a colour keyword can be
   dropped. Using the Highlight system colour and forced-color-adjust
   guarantees the focus ring survives. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }

  .od-skip-link {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border: 2px solid CanvasText;
  }

  /* Controls whose state is conveyed only by a background colour need a
     border in forced-colors mode, because that background is discarded. */
  .od-filter-btn[aria-pressed="true"],
  .od-quick-download-option.is-selected {
    border: 2px solid Highlight;
  }
}

/* Reduced motion.

   The existing rule earlier in this file shortens transitions but leaves
   keyframe animations running, and deliberately re-enables a 1.55s hero
   crossfade. This block stops animations as well. The hero crossfade is
   left alone on purpose: it is a slow opacity fade with no movement, which
   is not a vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Transform-based movement is the main vestibular trigger, so lift
     effects on hover and focus are removed rather than shortened. */
  .od-quest-btn:hover,
  .od-quest-btn:focus-visible,
  .od-hero-portal-btn:hover,
  .od-hero-portal-btn:focus-visible,
  .od-hero-ctas .od-btn:hover,
  .od-hero-ctas .od-btn:focus-visible {
    transform: none !important;
  }
}

/* Contrast corrections (WCAG 1.4.3 Contrast Minimum, Level AA)
   ---------------------------------------------------------------------------
   Post card meta line: the date and category text used --od-faint (#777267)
   on --od-surface (#111318), which measures 3.88:1. At 0.63rem this is
   small text and needs 4.5:1, so it failed. Bold weight does not make it
   large text: that threshold is 18.66px bold or 24px regular.

   #8f8a7d keeps the same warm grey hue and measures 5.4:1 on the same
   background, so it stays visibly dimmer than the card body text while
   passing with headroom.

   Confirmed by axe-core on the search results page, where 10 instances
   were reported. */
.od-post-card-meta {
  color: #8f8a7d;
}

/* The bullet separator between meta items is decorative punctuation
   inserted through CSS content, so it is exempt from contrast rules.
   It is lifted anyway because at 4.32:1 it was close enough to the
   threshold that it read as a rendering artifact rather than a divider. */
.od-post-card-meta span + span::before {
  color: #b8853a;
}

/* Contact form
   ---------------------------------------------------------------------------
   Instructions and required-field marking added through the plugin filter
   in inc/contact-form.php.

   The asterisk colour is checked: #f0c979 on the form's dark background
   exceeds the 4.5:1 minimum. It is also aria-hidden, with the word
   "required" supplied as visually hidden text, so the marker is never the
   only way the requirement is communicated. */
.od-form-intro {
  margin: 0 0 1.4rem;
  color: var(--od-text);
  font-family: var(--od-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
}

.od-required-mark {
  margin-left: 2px;
  color: var(--od-gold-bright);
  font-weight: 700;
}

/* Hero background scrim
   ---------------------------------------------------------------------------
   Hero background images are uploaded by administrators, so their brightness
   is unknown at build time. The existing gradients only fade the top and
   bottom edges into neighbouring sections; the middle band, where the hero
   heading and buttons sit, was left at the image's own brightness. A light
   photograph could therefore drop the hero text below the 4.5:1 minimum with
   no way for the stylesheet to compensate.

   An inset box-shadow is used rather than another pseudo-element because
   both ::before and ::after on the atmosphere container are already in use
   for the edge fades. Because it is applied to the layer itself, it
   cross-fades with the image rather than sitting on top as a static panel.

   This guarantees a contrast floor regardless of which image is chosen. It
   does darken bright artwork; that is the intended trade and is the
   accessible-by-default option. */
.od-hero-bg-layer {
  box-shadow: inset 0 0 0 100vmax rgba(6, 7, 10, 0.30);
}

/* In forced-colors mode the image is discarded and system colours apply,
   so the scrim is unnecessary and would only mute the system background. */
@media (forced-colors: active) {
  .od-hero-bg-layer {
    box-shadow: none;
  }
}

/* Card filter status and empty state
   ---------------------------------------------------------------------------
   The status region is visually hidden but present in the accessibility
   tree, so filter result counts are announced without altering the design.
   The empty-state message is visible, because a grid that silently empties
   is confusing for everyone, not only screen reader users. */
.od-cards-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.od-cards-empty {
  margin: 0 auto;
  padding: 48px 24px;
  max-width: 620px;
  color: var(--od-text);
  font-family: var(--od-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

.od-cards-empty[hidden] {
  display: none;
}

.od-cards-empty strong {
  color: var(--od-gold-bright);
}

/* Normalised heading sizes
   ---------------------------------------------------------------------------
   Authored content heading levels are shifted at render time so each post
   outline starts at h2 beneath the template h1 (see inc/headings.php).
   Shifted headings carry a class recording the level they were written at,
   and these rules restore that original size, so correcting the semantics
   does not change the visual design.

   Sizes mirror the .od-page-content heading rules earlier in this file. */
.od-page-content .od-h-from-h1 { font-size: 2rem; }
.od-page-content .od-h-from-h2 { font-size: 2rem; }
.od-page-content .od-h-from-h3 { font-size: 1.5rem; }
.od-page-content .od-h-from-h4 { font-size: 1.25rem; }
.od-page-content .od-h-from-h5 { font-size: 1.1rem; }
.od-page-content .od-h-from-h6 { font-size: 1rem; }

/* Administrator error notice
   ---------------------------------------------------------------------------
   Shown when a save is refused, most often because a chosen colour pair
   fails the contrast requirement. Fixed to the viewport so it is visible
   regardless of scroll position, since the prompts that trigger it can be
   used from anywhere on the page.

   Colours here are checked: #1c0d0d text on #ffe9e9 measures well above
   4.5:1, and the border meets the 3:1 non-text requirement. */
.od-admin-error {
  position: fixed;
  z-index: 100000;
  right: 20px;
  bottom: 20px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 16px 18px;
  border: 2px solid #8f0303;
  border-radius: 10px;
  background: #ffe9e9;
  color: #1c0d0d;
  font-family: var(--od-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.od-admin-error[hidden] {
  display: none;
}

.od-admin-error__message {
  margin: 0 0 10px;
  font-weight: 600;
}

.od-admin-error__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0 0 12px;
  font-size: 0.82rem;
}

.od-admin-error__detail dt {
  font-weight: 700;
}

.od-admin-error__detail dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.od-admin-error__close {
  padding: 6px 14px;
  min-height: 24px;
  border: 2px solid #8f0303;
  border-radius: 6px;
  background: #8f0303;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.od-admin-error__close:hover {
  background: #6d0202;
}

/* Cover preview button
   ---------------------------------------------------------------------------
   The card cover used to be a div with a click handler, so the preview was
   unreachable by keyboard. It is now a real button wrapping the image.
   These rules strip the default button chrome so the card looks exactly as
   it did before. */
.od-card-image-btn {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  /* The container is the positioning context for the admin controls, so
     the button must not introduce its own stacking or layout shift. */
  appearance: none;
  -webkit-appearance: none;
}

.od-card-image-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inset the focus ring so it is not clipped by the card's overflow:hidden,
   which would otherwise make the indicator invisible on the cover. */
.od-card-image-btn:focus-visible {
  outline: 3px solid var(--od-gold-bright);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 8px rgba(10, 8, 4, 0.75);
}

@media (max-width: 640px) {
  .od-library-filter-shell {
    margin: 0 0 16px;
    padding: 8px;
    border-radius: 10px;
  }

  .od-library-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .od-filter-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 0.58rem 0.7rem;
    font-size: 0.76rem;
  }

  .od-filter-btn-star {
    grid-column: 1 / -1;
  }
}

/* Miniaturize the post-bookmarks floating tabs on small screens.
   Kept in the theme (not the plugin) so plugin updates don't wipe it.
   Full labels stay in the DOM for screen readers; visually we show
   an icon + short label (RT / S). */
@media (max-width: 480px) {
  .bookmarks-tab .reference-tools-tab {
    flex-direction: column;
    gap: 3px;
    width: 34px;
    min-height: 36px;
    padding: 6px 4px;
    font-size: 0; /* hides the "Reference Tools" text visually */
    line-height: 1;
  }

  .bookmarks-tab .reference-tools-tab::before {
    content: "";
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.121 2.121 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.121 2.121 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  .bookmarks-tab .reference-tools-tab::after {
    content: "RT";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .bookmarks-tab .bookmarks-tab-header {
    min-width: 34px;
    min-height: 54px;
    padding: 8px 4px;
    gap: 4px;
  }

  .bookmarks-tab .bookmarks-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0; /* hides the "Saved" text visually */
  }

  .bookmarks-tab .bookmarks-title::before {
    content: "";
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  .bookmarks-tab .bookmarks-title::after {
    content: "S";
    font-size: 10px;
    font-weight: 700;
  }

  .bookmarks-tab .bookmarks-count {
    min-width: 16px;
    padding: 1px 5px;
    font-size: 9px;
  }

  .bookmarks-tab .bookmarks-toggle {
    font-size: 10px;
    padding: 1px 3px;
  }
}

/* Keep the footer "Start playing" button pinned to the right at all
   screen sizes. Under 900px .od-footer-lead stacks into a column with
   align-items:flex-start, which pushed the button left - this overrides
   that for the button only. */
.od-footer-lead .od-footer-start {
  margin-left: auto;
  align-self: flex-end;
}