.mods-page { padding: 48px 0 60px; background: radial-gradient(ellipse at 0 0, #62451a30, transparent 40%), radial-gradient(ellipse at 100% 60%, #36184326, transparent 35%), #0d0c0a; }
.mods-page > .container { max-width: 1180px; }
.mods-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; color: #f3dfb4; font-family: var(--font-title, serif); font-size: 2rem; }
.mods-title span { font-family: var(--font-body, sans-serif); font-size: .65rem; letter-spacing: .12em; color: #bda576; }
.mods-hero { position: relative; isolation: isolate; overflow: hidden; padding: 40px; border: 1px solid #ac86444d; border-radius: 18px; background: linear-gradient(110deg, #211a10ed, #13100cb8), var(--lmp-img-52fe5e361449, url("../img/optimized/ambient-bg-battle-1280-e08c7f8a6d90.webp")) center / cover; }
.mods-hero::after { content: ''; position: absolute; inset: 8px; border: 1px solid #e3bb6520; border-radius: 12px; pointer-events: none; }
.mods-hero-emblem { position: absolute; z-index: -1; right: 35px; top: 35px; width: 210px; height: 210px; object-fit: contain; opacity: .55; filter: drop-shadow(0 0 28px #c39a3440); }
.mods-kicker { font-size: .65rem; font-weight: 800; letter-spacing: .2em; color: #e3c17c; }
.mods-kicker span { margin: 0 12px; }
.mods-hero h1 { font-family: var(--font-title, serif); font-size: clamp(2.1rem, 4.3vw, 3.65rem); line-height: 1.13; font-weight: 600; color: #faf1de; margin: 20px 0; max-width: 760px; }
.mods-hero h1 em { color: #ebc875; font-weight: inherit; }
.mods-intro { color: #c4bcad; max-width: 590px; line-height: 1.8; font-size: .85rem; }
.mods-hero-meta { display: flex; gap: 30px; margin: 28px 0; }
.mods-hero-meta span { display: flex; align-items: center; gap: 10px; font-size: .57rem; letter-spacing: .12em; color: #bba989; }
.mods-hero-meta strong { color: #f0d59d; font-family: var(--font-title, serif); font-size: 1.6rem; font-weight: 500; }
.mods-jumps { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; border-top: 1px solid #caa56830; }
.mods-jumps a { color: #dac7a4; border: 1px solid #b89a5b50; border-radius: 5px; padding: 10px 13px; font-size: .7rem; background: #100d0a70; transition: background .2s, border-color .2s; }
.mods-jumps a:hover, .mods-jumps a:focus-visible { background: #c6a36525; border-color: #d8b66c; outline-color: #e0bd75; }
.mods-warning { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; margin: 24px 0 38px; padding: 20px 26px; border: 1px solid #ce9b425c; border-left: 4px solid #e7b84f; border-radius: 8px; background: linear-gradient(100deg, #392813, #201b10); }
.mods-warning::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: repeating-linear-gradient(120deg, #d7ac5750 0 9px, transparent 9px 18px); }
.mods-warning-icon { color: #f1c65e; font-size: 2rem; line-height: 1; }
.mods-warning strong { display: block; color: #f3ce75; font-size: .68rem; letter-spacing: .16em; }
.mods-warning p { color: #e4d5b6; font-size: .85rem; line-height: 1.6; margin: 6px 0 0; }
.mods-warning-stamp { margin-left: auto; flex-shrink: 0; font-size: .54rem; letter-spacing: .12em; color: #d9b86e; border: 1px solid #c6a05260; padding: 8px; transform: rotate(-4deg); }
.mods-roster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }
.mods-section { grid-column: span 12; min-width: 0; scroll-margin-top: 125px; --mod-accent: #d5b16d; }
#mods-direccion, #mods-codireccion, #mods-discord { grid-column: span 6; }
#mods-diseno, #mods-web { grid-column: span 3; }
#mods-codireccion { --mod-accent: #c699e3; }
#mods-discord { --mod-accent: #9aa5ee; }
#mods-diseno { --mod-accent: #88bde5; }
.mods-section-heading { display: flex; align-items: center; gap: 12px; min-height: 86px; margin-bottom: 16px; border-top: 1px solid #bda26b30; }
.mods-section-index { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid #bba16a40; color: var(--mod-accent); font-family: var(--font-title, serif); font-size: .85rem; background: #bf995c09; }
.mods-section-heading h2 { font-family: var(--font-title, serif); font-size: 1.4rem; color: #eadbc0; margin: 0 0 5px; }
.mods-section-heading p { color: #b2a99b; font-size: .7rem; margin: 0; line-height: 1.6; }
.mods-count { margin-left: auto; flex-shrink: 0; color: #b7a581; font-size: .58rem; }
#mods-diseno .mods-count, #mods-web .mods-count { display: none; }
.mods-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
#mods-administracion .mods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mods-direccion .mods-grid, #mods-codireccion .mods-grid, #mods-diseno .mods-grid, #mods-web .mods-grid { grid-template-columns: 1fr; }
#mods-discord .mods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-card { min-width: 0; position: relative; border: 1px solid #b99b6050; border-radius: 10px; overflow: hidden; background: linear-gradient(125deg, #272015, #14110d); box-shadow: 0 12px 28px #0005; transition: transform .25s, border-color .25s, box-shadow .25s; }
.mod-card::after { content: ''; position: absolute; inset: 6px; border: 1px solid #e3c48125; border-radius: 6px; pointer-events: none; }
.mod-photo { aspect-ratio: 1; position: relative; overflow: hidden; background: #20191c; }
.mod-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mod-photo--momo { background: radial-gradient(ellipse at 50% 45%, #98712f, #21180f 70%); }
.mod-photo--momo > img { object-position: center 65%; }
.mod-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 65%, #17140f90); }
.mod-card-caption { padding: 20px; position: relative; border-top: 2px solid var(--mod-accent); }
.mod-card-caption p { color: var(--mod-accent); font-size: .55rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; margin: 0 0 8px; }
.mod-card-caption h3 { color: #f2eadb; font-family: var(--font-title, serif); font-size: 1.3rem; margin: 0; padding-right: 10px; overflow-wrap: anywhere; }
.mod-mark { position: absolute; right: 17px; top: 20px; color: var(--mod-accent); opacity: .65; font-size: .6rem; }
#mods-direccion .mod-card, #mods-codireccion .mod-card { display: grid; grid-template-columns: 52% minmax(0, 1fr); align-items: stretch; }
#mods-direccion .mod-card-caption, #mods-codireccion .mod-card-caption { display: flex; flex-direction: column; justify-content: center; border-top: none; border-left: 1px solid #b99b6040; }
#mods-direccion .mod-card-caption h3, #mods-codireccion .mod-card-caption h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.mods-signoff { text-align: center; letter-spacing: .18em; font-size: .66rem; color: #c5ab78; border-top: 1px solid #bda26b30; padding: 30px 0 0; margin-top: 45px; }
.mods-signoff span { margin-right: 10px; }
@media (hover: hover) { .mod-card:hover { transform: translateY(-4px); border-color: var(--mod-accent); box-shadow: 0 18px 32px #0007, 0 0 20px #b99b6015; } }
@media (max-width: 1000px) {
 .mods-hero-emblem { opacity: .2; right: 10px; }
 .mods-hero { padding: 30px; }
 .mods-roster { gap: 26px 18px; }
 .mods-grid { gap: 16px; }
 .mods-count { display: none; }
 #mods-discord, #mods-diseno, #mods-web { grid-column: span 6; }
 #mods-web .mods-grid, #mods-diseno .mods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #mods-discord { grid-column: span 12; }
 #mods-discord .mods-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
 .mods-page { padding-top: 24px; }
 .mods-hero { padding: 26px 20px; }
 .mods-hero-emblem { width: 155px; height: 155px; opacity: .15; top: 15px; }
 .mods-kicker { font-size: .52rem; letter-spacing: .13em; }
 .mods-kicker span { margin: 0 5px; }
 .mods-intro { font-size: .78rem; }
 .mods-hero-meta { gap: 18px; flex-wrap: wrap; margin: 22px 0; }
 .mods-hero-meta span { flex-direction: column; align-items: flex-start; gap: 3px; font-size: .5rem; }
 .mods-hero-meta strong { font-size: 1.5rem; }
 .mods-jumps { gap: 6px; }
 .mods-jumps a { font-size: .64rem; padding: 8px 10px; }
 .mods-warning { padding: 18px 15px; gap: 12px; margin-bottom: 28px; align-items: flex-start; }
 .mods-warning p { font-size: .76rem; }
 .mods-warning-stamp { display: none; }
 .mods-roster { gap: 22px 12px; }
 #mods-direccion, #mods-codireccion { grid-column: span 12; }
 .mods-grid, #mods-administracion .mods-grid, #mods-discord .mods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 #mods-web .mods-grid, #mods-diseno .mods-grid { grid-template-columns: 1fr; }
 .mods-section-heading { gap: 8px; min-height: 80px; margin-bottom: 12px; }
 .mods-section-heading h2 { font-size: 1.18rem; }
 .mods-section-heading p { font-size: .65rem; }
 .mods-section-index { width: 26px; height: 26px; font-size: .7rem; }
 #mods-web .mods-section-heading, #mods-diseno .mods-section-heading { align-items: flex-start; padding-top: 16px; min-height: 116px; }
 #mods-web .mods-section-index, #mods-diseno .mods-section-index { display: none; }
 .mod-card-caption { padding: 15px 12px; }
 .mod-card-caption h3 { font-size: 1.08rem; }
 .mod-card-caption p { font-size: .49rem; letter-spacing: .08em; }
 .mod-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mod-card, .mods-jumps a { transition: none; } .mod-card:hover { transform: none; } }

/* Smaller background downloads on phones; original artwork is unchanged. */
@media (max-width: 640px) { :root {
  --lmp-img-52fe5e361449: url("../img/optimized/ambient-bg-battle-800-7a842d379cb2.webp");
} }