/**************************************************************************************************
    
    Base styles
    
**************************************************************************************************/


h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    text-transform: uppercase;
    font-family: EB Garamond, Roboto Condensed, serif; 
    font-weight: bold;
    color:#eae6e6;
}

h3 {
        color:white;
	font-family: EB Garamond, Roboto Condensed, serif; 
}


h1 {
	color: white;
	font-family: EB Garamond, Roboto Condensed, serif; 
	
}  

h2 {
	color: white;
	font-family: EB Garamond, Roboto Condensed, serif; 
	
} 
.dropdown-menu{
	color: white;
}

.glow{
	font-family: EB Garamond, Roboto Condensed, serif; 
	Color: white;
	animation: glow 1s ease-in-out infinite alternate;
}

h1 a, h2 a, h3 a, h4 a, h5 a,
a.h1, a.h2, a.h3, a.h4, a.h5 {
    color: #999696;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
a.h1:hover, a.h2:hover, a.h3:hover, a.h4:hover, a.h5:hover {
    color: #bbbbbb;
    text-decoration: none;
}

link {
    color:#999696;
}

a {
    color:#8f8ff2;
}

a.display-trait:hover {
    color: white;
}

.navbar-light .navbar-nav .nav-link {
	color: #898888;
}

.dropdown-item:focus,.dropdown-item:hover{
	color: white;
}

.btn-light:hover {
	color: none;
}

a:hover {
    color: #6e6b6b;
    text-decoration: none;
	animation: glow 1s ease-in-out infinite alternate;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    animation: glow 1s ease-in-out infinite alternate;
}

.navbar-item {
	color: white;
}

.bg-dark {
    background-color: #33344a!important;
	box-shadow: 12px 7px 10px 5px rgba(0,0,0,0.2);
}
.bg-secondary {
    background-color: #33344a!important;
}

body {
    background-color: transparent;
    font-family: Lato, sans-serif; 
    min-height: 100vh;
    font-size: 80%;
    color: #898888;
}

.frontpagecol2, .frontpagecol3 {
	background-color: #3d3c57;
}

.frontpagecol1 {
    background-image: linear-gradient(to bottom,#212230, #33344a);
}

.dropdown-menu  {
	min-width: 200px;
	background-color: #33344a;
	
}

.multi-column-dropdown {
       text-transform: uppercase;
       font-family: CaviarDreams, Roboto Condensed, serif;
       text-align:center
       
}

.li-title {
	padding: 5px 15px;
	font-weight: 300;
}

.multi-column-dropdown li a {
	color: #9b9ba8;
	background-color: none;
    font-family: CaviarDreams, Condensed, serif;
}
.multi-column-dropdown li a:hover {
	background-color: none;
}

.ulinks a:hover {
    color: 	none!important;
    text-decoration: none;
}

.dropdown-item {
	color: #9b9ba8;
	background-color: none;
}

.dropdown-item li a:hover {
	text-decoration: none;
	animation: glow 1s ease-in-out infinite alternate;
}

.card {
background: linear-gradient(to bottom, #3d3c57, #2a2a43);

 border: 1px solid #6b6189;
    border-radius: 10px;

}

/**************************************************************************************************
    
    Layout
    
**************************************************************************************************/

#app{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;

  --page-bg: #222238;
background-color: #222238;
  background-image: url("/css/images/backdrop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


main {
    flex-grow: 1;
    display: flex;

}

main > .row {
    flex-grow: 1;
}

.main-content {
    display: flex;
    flex-direction: column;
   background:rgba(34, 34, 56, 0.9);
   

}

/* Header */

#header { 
position: relative;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 230px;
}
#header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  pointer-events: none;
 
}

.site-header-image {
  width: 100%;     
  max-width: 100%;
  overflow: hidden;
}
.navbar, .navbar .nav-item {
    text-transform: uppercase;
    font-family: CaviarDreams, Roboto Condensed, serif;
    font-size:	13px;
}

.navbar-brand {
    font-family: CaviarDreams, AmaticSC, serif; 
	text-transform: uppercase;
	font-size: 22px;
	animation: glow 1s ease-in-out infinite alternate;
}

.nav-link:hover {
	color: white;
}


@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8600e6, 0 0 40px #8600e6, 0 0 50px #8600e6, 0 0 60px #8600e6, 0 0 70px #8600e6;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #8e4dff, 0 0 40px #8e4dff, 0 0 50px #8e4dff, 0 0 60px #8e4dff, 0 0 70px #8e4dff, 0 0 80px #8e4dff;
  }
}

/*Sidebars */

.sidebar {
Margin-top: -15px;
  z-index: 1;
  padding: 20px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.sidebar .sidebar-header,
.sidebar .sidebar-section .sidebar-section-header {
    font-family: 'CaviarDreams', serif;
    font-weight: bold;
    color: white;
font-size: 18px;
    list-style: none;
}

.sidebar ul {
  padding: 10px 0 0 0;
}


.sidebar ul li {

isplay: inline-block; 
  margin: 0.5rem 0;
  width: 100%;
    list-style: none;
}

.sidebar .sidebar-header a:hover {
    background-color: transparent;
} 

.sidebar a,
.sidebar-section-header {
    display: block;
    padding: 0.1em 1em;
	font-size: 15px;
}

.sidebar a {
    text-transform: uppercase;
    font-family: Roboto Condensed, serif;
}
.sidebar a:hover {
    color: white;
}

.header-icon-container {
  text-align: center;
  margin: 1rem 0;  
}

.header-icon {
  max-width: 90%;
  height: auto;
}


/**************************************************************************************************
    
    Content
    
**************************************************************************************************/

.spoiler-toggle { 
     background-color: #212230;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    color:#999696;
}


.nav-tabs .nav-link {
    text-transform: uppercase;
    font-family: Roboto Condensed, serif;
}

.help-icon {
    cursor: pointer;
    margin: 0 5px;
    color: rgba(0,0,0,0.3);
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    font-family: Roboto Condensed, serif;
    text-transform: uppercase;
    align-items: center;
    
}
.breadcrumb a {
    color:#999696;;
}
.breadcrumb a:hover {
    color: #6e6b6b;
    text-decoration: none;
}

.collapse-title:after {
    content: '';
    display: inline-block;
    position: absolute;
    right: -20px;
    top: 0.425em;
    border: 0.3em solid rgba(0,0,0,0.3);
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
}

.spoiler {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-bottom: 1rem;
    background: transparent;
    margin-top: 0px;
}
.spoiler-toggle {
    font-weight: bold;
    
    cursor: pointer;
    padding: .3rem 1.25rem;
    font-size: .9rem;
    font-family: Roboto Condensed, serif;
    color: inherit;
    text-transform: uppercase;
}
.spoiler-text {
    padding: .75rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* BROWSE ****************************************************************************************/

.sortable .handle {
    color: #33344a;
}

.img-thumbnail {

	border: 0px solid #545a60;
	animation: glow 1s ease-in-out infinite alternate;
}

.user-characters .category-selected .character-item {
	background-color: rgba(255,255,255,0.15);
	border-radius: .25rem;
}
.user-characters .character-item {
	background-color: rgba(1,1,1,0.1);
	border-radius: .25rem;
}


/* FORMS AND BUTTONS AND STUFF *******************************************************************/



.page-link {
	z-index: 1;
	color: #999696;
	background-color: #33344a;
}
.page-item.active .page-link {
	color: #bbb6b6;
	background-color: #5c5cd1;
}
.page-item.disabled .page-link {
	color: #999696;
	background-color: transparent;
}

.form-control {
	color: #999696;
	background-color: #141426;
}

.btn-primary {
	color: #fff;
	background-color: #5c5cd1;
	animation: glow 1s ease-in-out infinite alternate;
	border: 1px solid #ced4da;
}

.btn-primary:hover  {
	color: #fff;
	background-color: #6767f0;
	animation: glow 1s ease-in-out infinite alternate;
	border: 1px solid #ced4da;
}

.btn-outline-info {
	color: #6767f0;
	background-color: transparent;
	border: 1px solid #6767f0;
}

/*TEXT EDITOR TEST*/
.tox-tinymce {
	color: #999696;
	background-color: #353333;
}

/* LOGS ******************************************************************************************/
tr.inflow {
    background-color: #333533;
}
tr.outflow {
    background-color: #353333;
}

/* PROFILE ***************************************************************************************/

.character-bio .nav-tabs.card-header-tabs .active {
    background-color: #2a2a43;
	color: #999696;
}

card mb-3 {
    color: #4e5861;
	background-color: #212230;
}

.card-body {
    background: linear-gradient(to bottom, #3d3c57, #2a2a43);
}

.list-group-item {
	background: transparent;


}

/* CHARACTERS ************************************************************************************/

.image-nav .nav-item a.active {
    border: 5px solid #ddd;
    background-color: #4e5861;
    color: #4e5861;
}

.site-footer .copyright {
    padding: 0 1rem 1rem;
    color: #4e5861;
}

.profile-assets-card .card-body {
    display: flex;
    flex-direction: coloumn;
    color: #4e5861;
}

/* INVENTORY *************************************************************************************/

.inventory-stack-name {
	color: #999696;
}


.badge-info
{
	color: #093394;
}

/* Speciesimages *************************************************************************************/

.world-entry-image_iconpage{
	color: #778899;
}

html, body {
  height: 100%;
  margin: 0;
  background: #222238; 
}

body {
  background-color: #222238 !important;
}

#app {
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
}

main.container-fluid {
  flex: 1 0 auto;
  display: block !important;
}


/* Companion Masterlist Page *************************************************************************************/

    .companion-profile-page {
        --companion-panel: rgba(38, 34, 61, 0.94);
        --companion-panel-soft: rgba(50, 44, 76, 0.92);
        --companion-border: rgba(219, 203, 240, 0.2);
        --companion-text: rgba(247, 244, 251, 0.9);
        --companion-muted: rgba(237, 231, 246, 0.62);
        --companion-accent: #d9c4ec;
        color: var(--companion-text);
    }

    .companion-top-row {
        margin-bottom: 0.8rem;
    }

    .companion-nameplate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid #6b6189;
        border-radius: 10px;
        background: linear-gradient(to bottom, #3d3c57, #2a2a43);
    }

    .companion-nameplate-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .companion-nameplate-label {
        color: rgba(237, 231, 246, 0.55);
        font-size: 0.64rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .companion-nameplate strong {
        color: #f4eaff;
        font-family: 'CaviarDreams', serif;
        font-size: 1.35rem;
        line-height: 1.1;
    }

    .companion-nameplate small {
        margin-top: 0.15rem;
        color: rgba(237, 231, 246, 0.48);
    }

    .companion-name-edit {
        flex: 0 0 auto;
    }

    .companion-profile-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .companion-action-pill,
    .companion-icon-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        border: 1px solid rgba(215, 197, 237, 0.28);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(91, 72, 119, 0.9), rgba(57, 51, 88, 0.92));
        color: rgba(248, 245, 252, 0.92) !important;
        box-shadow: 0 3px 9px rgba(12, 9, 22, 0.2);
        text-decoration: none !important;
    }

    .companion-action-pill {
        padding: 0.48rem 0.78rem;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .companion-icon-pill {
        width: 34px;
        cursor: help;
    }

    .companion-action-pill:hover {
        transform: translateY(-1px);
        color: #fff !important;
    }

    .companion-icon-pill.is-open {
        background: linear-gradient(135deg, rgba(70, 119, 96, 0.92), rgba(55, 84, 91, 0.94));
    }

    .companion-icon-pill.is-closed {
        background: linear-gradient(135deg, rgba(105, 66, 85, 0.92), rgba(70, 55, 78, 0.94));
    }

    .companion-identity-card {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.3rem 1.4rem;
        border: 1px solid var(--companion-border);
        border-radius: 16px;
        background:
            radial-gradient(circle at top right, rgba(201, 178, 232, 0.12), transparent 34%),
            linear-gradient(135deg, rgba(75, 58, 103, 0.88), rgba(38, 34, 61, 0.96));
        box-shadow: 0 8px 24px rgba(18, 13, 29, 0.2);
    }

    .companion-kicker {
        color: var(--companion-accent);
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .companion-identity-card h1 {
        margin: 0.2rem 0 0.3rem;
        color: #fff;
        font-size: clamp(1.85rem, 3.6vw, 2.8rem);
        line-height: 1;
    }

    .companion-owner-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        color: var(--companion-muted);
    }

    .companion-owner-line strong,
    .companion-owner-line a {
        color: #f4eaff !important;
    }

    .companion-identity-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-top: 0.9rem;
    }

    .companion-info-badge,
    .companion-small-badge,
    .companion-header-note {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(224, 210, 241, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(248, 245, 252, 0.84);
        font-size: 0.74rem;
        font-weight: 750;
        padding: 0.34rem 0.62rem;
    }

    .companion-info-badge.is-muted {
        color: var(--companion-muted);
    }

    .companion-current-status {
        flex: 0 0 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem 1.1rem;
        border: 1px solid rgba(211, 199, 230, 0.17);
        border-radius: 13px;
        background: rgba(19, 17, 34, 0.24);
    }

    .companion-current-status-label,
    .companion-summary-label {
        color: var(--companion-muted);
        font-size: 0.68rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .companion-current-status-value {
        margin: 0.25rem 0;
        color: #d9f0d7;
        font-size: 1.25rem;
        font-weight: 900;
    }

    .companion-current-status-value i,
    .companion-inline-status i {
        color: #8fc68b;
        font-size: 0.55rem;
    }

    .companion-current-status small {
        color: var(--companion-muted);
        line-height: 1.35;
    }

    .companion-image-feature {
        min-height: 430px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px;
        overflow: hidden;
        border: 1px solid var(--companion-border);
        border-radius: 14px;
        background:
            linear-gradient(rgba(75, 67, 104, 0.32), rgba(43, 39, 68, 0.42)),
            url('/css/images/PageTexture.png') center center / cover no-repeat;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 17px rgba(14, 10, 24, 0.18);
    }

    .companion-image-feature a {
        display: block;
        width: 100%;
    }

    .companion-image-feature .image {
        max-width: 100%;
        max-height: 720px;
        object-fit: contain;
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
    }

    .companion-section-row {
        margin-bottom: 1.25rem;
    }

    .companion-card {
        overflow: hidden;
        border: 1px solid var(--companion-border);
        border-radius: 14px;
        background: linear-gradient(180deg, var(--companion-panel-soft), var(--companion-panel));
        color: var(--companion-text);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(14, 10, 24, 0.16);
    }

    .companion-card .card-header {
        padding: 0.72rem 0.95rem;
        border-bottom: 1px solid rgba(220, 205, 239, 0.16);
        background: linear-gradient(180deg, rgba(72, 61, 101, 0.92), rgba(49, 43, 76, 0.95));
    }

    .companion-card .card-body {
        padding: 1.1rem;
        background: rgba(255, 255, 255, 0.012);
    }

    .companion-section-heading h3,
    .companion-section-heading h2 {
        margin: 0;
        color: rgba(244, 241, 251, 0.92);
        font-size: 1.1rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-shadow: none;
    }

    .companion-card .nav-tabs {
        gap: 3px;
        flex-wrap: wrap;
        border-bottom: 0;
    }

    .companion-card .nav-tabs .nav-link {
        border: 0;
        border-radius: 8px;
        color: rgba(241, 235, 248, 0.58);
        background: transparent;
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.035em;
        text-transform: uppercase;
    }

    .companion-card .nav-tabs .nav-link:hover,
    .companion-card .nav-tabs .nav-link.active {
        color: #fff;
        background: rgba(218, 199, 238, 0.1);
    }

    .companion-data-list {
        display: grid;
        gap: 0.55rem;
    }

    .companion-data-row {
        display: grid;
        grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.4fr);
        gap: 0.75rem;
        align-items: center;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(224, 210, 241, 0.09);
    }

    .companion-data-label {
        color: var(--companion-muted);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .companion-inline-status {
        color: #d9f0d7;
        font-weight: 800;
    }

    .companion-subheading {
        margin-bottom: 0.7rem;
        color: rgba(248, 245, 252, 0.9);
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .companion-stat-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .companion-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
        padding: 0.65rem 0.35rem;
        border: 1px solid rgba(221, 205, 239, 0.13);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.035);
    }

    .companion-stat span {
        color: var(--companion-muted);
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .companion-stat strong {
        color: #f4eaff;
        font-size: 1rem;
    }

    .companion-trait-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(221, 205, 239, 0.12);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
    }

    .companion-trait-category {
        display: block;
        margin-bottom: 0.12rem;
        color: var(--companion-muted);
        font-size: 0.63rem;
        font-weight: 850;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .companion-trait-name {
        font-weight: 800;
    }

    .companion-coming-soon,
    .companion-soft-note,
    .companion-empty-note {
        border: 1px solid rgba(221, 205, 239, 0.13);
        border-radius: 10px;
        background: rgba(214, 195, 235, 0.05);
        color: var(--companion-muted);
    }

    .companion-coming-soon {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.85rem;
    }

    .companion-coming-soon strong {
        color: rgba(248, 245, 252, 0.86);
    }

    .companion-soft-note {
        padding: 0.7rem 0.8rem;
        font-size: 0.78rem;
    }

    .companion-empty-note {
        padding: 0.85rem;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 750;
    }

    .companion-date-lines {
        color: var(--companion-muted);
        font-size: 0.78rem;
    }

    .companion-bond-summary {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
    }

    .companion-bond-summary > div {
        display: flex;
        flex-direction: column;
    }

    .companion-bond-summary strong {
        color: #f5ebff;
        font-size: 1.25rem;
    }

    .companion-bond-track {
        height: 12px;
        margin: 0.65rem 0;
        overflow: hidden;
        border: 1px solid rgba(225, 211, 241, 0.15);
        border-radius: 999px;
        background: rgba(16, 14, 28, 0.4);
    }

    .companion-bond-track span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #ba91d0, #d8b9e8);
    }

    .companion-training-preview {
        display: grid;
        gap: 0.55rem;
    }

    .companion-training-step {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid rgba(222, 206, 239, 0.13);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.032);
    }

    .companion-training-step > i {
        width: 32px;
        color: #d8c2ea;
        text-align: center;
    }

    .companion-training-step span {
        display: flex;
        flex-direction: column;
    }

    .companion-training-step small {
        color: var(--companion-muted);
    }

    .companion-breeding-state {
        display: flex;
        flex-direction: column;
        padding: 0.85rem;
        border: 1px solid rgba(222, 206, 239, 0.14);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.035);
    }

    .companion-breeding-state strong {
        color: #f1e8f8;
    }

    .companion-breeding-state small {
        margin-top: 0.18rem;
        color: var(--companion-muted);
    }

    .companion-card a:not(.btn):not(.nav-link) {
        color: #d8c5ed;
    }

    .companion-card a:not(.btn):not(.nav-link):hover {
        color: #f5edff;
    }


    /* unique traits */

    .image-trait-list {
        display: grid;
        gap: 0.35rem;
    }

    .image-trait-item {
        color: rgba(244, 241, 251, 0.84);
        font-size: 0.86rem;
        line-height: 1.35;
    }

    .image-trait-item::before {
        content: "✦";
        margin-right: 0.35rem;
        color: rgba(216, 200, 255, 0.72);
        font-size: 0.72rem;
    }

    .image-trait-data {
        color: rgba(244, 241, 251, 0.62);
    }

    .trait-ability-indicator {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.05rem;
        height: 1.05rem;
        margin-left: 0.28rem;
        vertical-align: -0.08rem;
        border-radius: 6px;
        color: rgba(226, 214, 255, 0.92);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
            linear-gradient(135deg, rgba(123, 91, 187, 0.52), rgba(185, 83, 204, 0.38));
        border: 1px solid rgba(216, 200, 255, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 7px rgba(154, 104, 218, 0.16);
        cursor: help;
        outline: none;
        transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .trait-ability-glyph {
        display: block;
        font-size: 0.58rem;
        line-height: 1;
        transform: translateY(-0.01rem);
        text-shadow: 0 0 5px rgba(224, 196, 255, 0.34);
    }

    .trait-ability-indicator::before {
        content: attr(data-ability-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 9px);
        z-index: 50;
        width: max-content;
        max-width: 230px;
        padding: 0.48rem 0.62rem;
        border-radius: 7px;
        color: rgba(247, 243, 255, 0.94);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01)),
            linear-gradient(135deg, rgba(55, 45, 88, 0.98), rgba(39, 34, 65, 0.98));
        border: 1px solid rgba(203, 179, 242, 0.3);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 6px 18px rgba(7, 5, 16, 0.34),
            0 0 12px rgba(129, 91, 184, 0.13);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.015em;
        text-align: center;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 4px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    }

    .trait-ability-indicator::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 4px);
        z-index: 51;
        width: 8px;
        height: 8px;
        background: rgba(45, 38, 73, 0.98);
        border-right: 1px solid rgba(203, 179, 242, 0.26);
        border-bottom: 1px solid rgba(203, 179, 242, 0.26);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) rotate(45deg);
        transition: opacity 0.16s ease, visibility 0.16s ease;
    }

    .trait-ability-indicator:hover,
    .trait-ability-indicator:focus {
        color: #f1e8ff;
        transform: translateY(-1px);
        border-color: rgba(226, 207, 255, 0.48);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025)),
            linear-gradient(135deg, rgba(123, 91, 187, 0.78), rgba(185, 83, 204, 0.62));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 0 9px rgba(174, 112, 229, 0.28);
    }

    .trait-ability-indicator:hover::before,
    .trait-ability-indicator:focus::before {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .trait-ability-indicator:hover::after,
    .trait-ability-indicator:focus::after {
        opacity: 1;
        visibility: visible;
    }

    /* purebred data */

    .purebred-data-group + .purebred-data-group {
        margin-top: 1.15rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(224, 210, 241, 0.11);
    }

    .purebred-data-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .purebred-data-item {
        padding: 0.65rem 0.72rem;
        border: 1px solid rgba(107, 97, 137, 0.7);
        border-radius: 9px;
        background: rgba(20, 19, 35, 0.18);
    }

    .purebred-data-item span {
        display: block;
        color: rgba(237, 231, 246, 0.58);
        font-size: 0.65rem;
        font-weight: 850;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .purebred-data-item strong {
        display: block;
        margin-top: 0.18rem;
        color: rgba(250, 247, 253, 0.92);
        font-size: 0.86rem;
    }

    .companion-current-status.in-overview {
        margin-top: 1rem;
    }

    @media (max-width: 991.98px) {
        .companion-profile-actions {
            justify-content: flex-start;
            margin-top: 0.65rem;
        }

        .companion-identity-card {
            flex-direction: column;
        }

        .companion-current-status {
            flex-basis: auto;
        }
    }

    @media (max-width: 767.98px) {
        .companion-image-feature {
            min-height: 300px;
        }

        .companion-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .companion-data-row {
            grid-template-columns: 1fr;
            gap: 0.15rem;
        }

        .companion-section-heading.d-flex {
            align-items: flex-start !important;
            flex-direction: column;
            gap: 0.45rem;
        }
    }

    /* shared card styling */

    .companion-profile-page .card,
    .companion-profile-page .companion-card {
        background: linear-gradient(to bottom, #3d3c57, #2a2a43);
        border: 1px solid #6b6189;
        border-radius: 10px;
        color: rgba(247, 244, 251, 0.92);
        box-shadow: 0 5px 14px rgba(13, 11, 24, 0.16);
    }

    .companion-profile-page .companion-card .card-header {
        background: rgba(24, 23, 42, 0.28);
        border-bottom: 1px solid rgba(107, 97, 137, 0.72);
    }

    .companion-profile-page .companion-card .card-body {
        background: transparent;
    }

    .companion-image-feature {
        background:
            linear-gradient(rgba(61, 60, 87, 0.74), rgba(42, 42, 67, 0.88)),
            url('/css/images/PageTexture.png') center center / cover no-repeat;
        border: 1px solid #6b6189;
        border-radius: 10px;
    }

    /* identity + status */

    .companion-identity-card {
        display: block;
        padding: 0;
        overflow: hidden;
    }

    .companion-identity-card .card-body {
        padding: 1rem 1.1rem;
    }

    .companion-identity-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
        gap: 1rem;
        align-items: center;
    }

    .companion-identity-card h1 {
        margin: 0 0 0.3rem;
        color: #fff;
        font-size: clamp(1.75rem, 3.2vw, 2.45rem);
        line-height: 1.05;
    }

    .companion-current-status {
        display: block;
        padding: 0.8rem;
        border: 1px solid rgba(132, 119, 169, 0.68);
        border-radius: 9px;
        background: rgba(19, 18, 34, 0.28);
    }

    .companion-current-status-main {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0.35rem;
    }

    .companion-current-status-main > span:last-child {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .companion-current-status-main strong {
        color: #f4ecff;
        font-size: 1.05rem;
        line-height: 1.1;
    }

    .companion-current-status-main small,
    .companion-status-placeholder-note {
        color: rgba(237, 231, 246, 0.58);
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .companion-status-icon,
    .companion-status-option {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: rgba(247, 241, 255, 0.72);
    }

    .companion-status-icon {
        width: 44px;
        height: 44px;
        color: #d8c2ea;
        font-size: 1.25rem;
    }

    .companion-status-option.is-active {
        color: #d8c2ea;
    }

    .companion-status-icon i,
    .companion-status-option i {
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
    }

    .companion-status-options {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin: 0.65rem 0 0.25rem;
    }

    .companion-status-option {
        width: 30px;
        height: 30px;
        font-size: 0.65rem;
        cursor: help;
        opacity: 0.72;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .companion-status-option:hover,
    .companion-status-option.is-active {
        opacity: 1;
        transform: translateY(-1px);
    }

    /* companion stats */

    .companion-dice-stats {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px 6px;
        max-width: 440px;
        margin: 0 auto;
    }

    .companion-dice-stat {
        text-align: center;
    }

    .companion-dice-stat .dice-shape {
        position: relative;
        width: 48px;
        height: 48px;
        margin: 0 auto 3px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .companion-dice-stat .dice-shape::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #777580;
        -webkit-mask-image: url('/css/images/D20.svg');
        mask-image: url('/css/images/D20.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.58;
        transition: transform 0.35s ease, opacity 0.35s ease;
        transform-origin: center;
    }

    .companion-dice-stat:hover .dice-shape::before {
        transform: rotate(12deg) scale(1.03);
        opacity: 0.9;
    }

    .companion-dice-stat.has-points .dice-shape::before {
        background: linear-gradient(135deg, #7b5bbb, #b953cc);
        opacity: 0.86;
    }

    .companion-dice-stat .dice-shape span {
        position: relative;
        z-index: 1;
        color: rgba(255, 255, 255, 0.9);
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
    }

    .companion-dice-stat .dice-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1;
    }

    /* markings + traits */

    .companion-trait-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .companion-trait-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
        padding: 0.65rem;
        border: 1px solid rgba(107, 97, 137, 0.72);
        border-radius: 9px;
        background: rgba(20, 19, 35, 0.18);
    }

    .companion-trait-die {
        position: relative;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .companion-trait-die::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--trait-die-color, #7b5bbb);
        -webkit-mask-image: url('/css/images/D20.svg');
        mask-image: url('/css/images/D20.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.82;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .companion-trait-row:hover .companion-trait-die::before {
        transform: rotate(10deg) scale(1.04);
        opacity: 1;
    }

    .companion-trait-die > span {
        position: relative;
        z-index: 1;
        color: #fff;
        font-size: 0.75rem;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    .companion-trait-copy {
        min-width: 0;
    }

    .companion-trait-category {
        margin-bottom: 0.08rem;
    }

    .companion-trait-name {
        display: inline;
        color: rgba(250, 247, 253, 0.92);
    }

    .companion-trait-rarity {
        display: inline-flex;
        margin-left: 0.35rem;
        padding: 0.08rem 0.36rem;
        border: 1px solid rgba(222, 208, 240, 0.16);
        border-radius: 999px;
        color: rgba(240, 232, 249, 0.62);
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        vertical-align: middle;
    }

    .companion-trait-data {
        max-width: none;
        margin-top: 0.2rem;
        color: rgba(231, 218, 242, 0.72);
        font-size: 0.72rem;
        text-align: left;
    }

    /* activity placeholders */

    .companion-activity-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .companion-activity-placeholder {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem;
        border: 1px dashed rgba(139, 124, 174, 0.62);
        border-radius: 9px;
        background: rgba(20, 19, 35, 0.16);
        opacity: 0.82;
    }

    .companion-activity-placeholder > span:last-child {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .companion-activity-placeholder strong {
        color: rgba(248, 244, 252, 0.9);
        font-size: 0.82rem;
    }

    .companion-activity-placeholder small {
        color: rgba(237, 231, 246, 0.56);
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .companion-activity-icon {
        position: relative;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #f2e9ff;
    }

    .companion-activity-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #6f5a99, #8567a9);
        -webkit-mask-image: url('/css/images/D20.svg');
        mask-image: url('/css/images/D20.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.72;
    }

    .companion-activity-icon i {
        position: relative;
        z-index: 1;
        font-size: 0.75rem;
    }

    /* companion level */

    .companion-level-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
    }

    .companion-level-rank,
    .companion-level-next {
        display: flex;
        flex-direction: column;
    }

    .companion-level-kicker {
        color: rgba(237, 231, 246, 0.58);
        font-size: 0.66rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .companion-level-rank strong {
        color: #f4eaff;
        font-family: 'CaviarDreams', serif;
        font-size: 1.65rem;
        line-height: 1.1;
    }

    .companion-level-next strong {
        color: #dbc7ee;
        font-size: 1rem;
    }

    .companion-level-rank small,
    .companion-level-next small,
    .companion-level-log-note {
        color: rgba(237, 231, 246, 0.55);
        font-size: 0.68rem;
    }

    .companion-level-track {
        height: 13px;
        margin-top: 0.8rem;
        overflow: hidden;
        border: 1px solid rgba(225, 211, 241, 0.16);
        border-radius: 999px;
        background: rgba(16, 14, 28, 0.42);
    }

    .companion-level-track span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #7b5bbb, #b953cc);
    }

    .companion-level-xp-line {
        display: flex;
        justify-content: space-between;
        margin-top: 0.25rem;
        color: rgba(237, 231, 246, 0.5);
        font-size: 0.65rem;
        font-weight: 700;
    }

    .companion-rank-ladder {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.85rem;
    }

    .companion-rank-step {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.28rem 0.5rem;
        border: 1px solid rgba(221, 205, 239, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.025);
        color: rgba(237, 231, 246, 0.42);
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .companion-rank-step i {
        font-size: 0.48rem;
    }

    .companion-rank-step.is-reached {
        border-color: rgba(181, 139, 224, 0.25);
        color: rgba(231, 215, 248, 0.72);
    }

    .companion-rank-step.is-current {
        border-color: rgba(207, 179, 237, 0.55);
        background: rgba(123, 91, 187, 0.14);
        color: #f4eaff;
    }

    .companion-level-divider {
        border-color: rgba(221, 205, 239, 0.12);
        margin: 1rem 0;
    }

    .companion-activity-log-empty {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 0.7rem;
        padding: 0.75rem;
        border: 1px dashed rgba(139, 124, 174, 0.5);
        border-radius: 9px;
        background: rgba(20, 19, 35, 0.16);
    }

    .companion-activity-log-empty > span:last-child {
        display: flex;
        flex-direction: column;
    }

    .companion-activity-log-empty strong {
        color: rgba(248, 244, 252, 0.88);
        font-size: 0.78rem;
    }

    .companion-activity-log-empty small {
        color: rgba(237, 231, 246, 0.52);
        font-size: 0.68rem;
        line-height: 1.35;
    }

    .companion-activity-log-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(181, 139, 224, 0.24);
        border-radius: 50%;
        background: rgba(123, 91, 187, 0.1);
        color: #d8c2ea;
    }

    @media (max-width: 575.98px) {
        .companion-level-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .companion-level-next {
            text-align: left !important;
        }
    }

    /* interactions */
    .companion-main-row {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: stretch !important;
    }

    .companion-image-column {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .companion-image-column .companion-image-feature {
        height: auto !important;
        min-height: 430px;
    }

    .companion-image-rituals {
        position: static !important;
        width: 100%;
        overflow: hidden;
        border: 1px solid #6b6189;
        border-radius: 10px;
        background: linear-gradient(to bottom, #3d3c57, #2a2a43);
    }

    .companion-image-rituals-header {
        padding: 0.72rem 0.95rem;
        border-bottom: 1px solid rgba(107, 97, 137, 0.72);
        background: rgba(24, 23, 42, 0.28);
    }

    .companion-image-rituals-header h3 {
        margin: 0;
        color: rgba(244, 241, 251, 0.92);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .companion-image-rituals-body {
        padding: 0.9rem;
    }

    .companion-ritual-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .companion-ritual-grid.has-customize {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .companion-ritual-card {
        --ritual: 175, 145, 220;
        position: relative;
        min-width: 0;
        min-height: 138px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px 6px 11px;
        border: 1px solid rgba(var(--ritual), 0.3);
        border-radius: 9px;
        background: rgba(20, 19, 35, 0.18);
        color: #f4efff;
        text-align: center;
        opacity: 1;
    }

    .companion-ritual-card:disabled {
        opacity: 0.82;
        cursor: not-allowed;
    }

    .companion-ritual-icon {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
        border: 1px solid rgba(var(--ritual), 0.42);
        border-radius: 50%;
        background: rgba(var(--ritual), 0.12);
        color: rgb(var(--ritual));
        font-size: 1rem;
    }

    .companion-ritual-card strong {
        margin-bottom: 3px;
        color: rgb(var(--ritual));
        font-family: 'CaviarDreams', serif;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .companion-ritual-card small {
        color: rgba(240, 235, 250, 0.58);
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .companion-ritual-badge {
        position: absolute;
        top: 7px;
        right: 7px;
        padding: 3px 6px;
        border: 1px solid rgba(var(--ritual), 0.3);
        border-radius: 999px;
        background: rgba(var(--ritual), 0.14);
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.5rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.035em;
        text-transform: uppercase;
    }

    .ritual-bathe { --ritual: 106, 207, 220; }
    .ritual-feed { --ritual: 224, 168, 87; }
    .ritual-breed { --ritual: 230, 123, 170; }
    .ritual-sanctuary { --ritual: 139, 194, 112; }
    .ritual-customize { --ritual: 173, 143, 232; }


    .companion-main-row .elyx-image-info-column {
        align-self: stretch !important;
    }

    .companion-main-row .character-image-info-card {
        height: 100% !important;
    }

    @media (max-width: 991.98px) {
        .companion-ritual-grid,
        .companion-ritual-grid.has-customize {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .companion-nameplate {
            align-items: flex-start;
            flex-direction: column;
        }

        .companion-image-column .companion-image-feature {
            min-height: 300px;
        }
    }

/* Pet Breeding Page ************************************************************************************/

  .pet-breeding-sidebar-link {
    font-size: 1rem;
  }

  .pet-breeding-hero {
    min-height: 320px;
  }

  .pet-breeding-hero .pet-breeding-hero-image {
    width: 100%;
    height: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  .pet-breeding-speech-wrap {
    padding-right: 0;
  }

  .pet-breeding-speech-box {
    position: relative;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1rem;
    background: #3d3c57;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  }

  .pet-breeding-speech-box p,
  .pet-breeding-speech-box ul {
    margin-bottom: .5rem;
  }

  .pet-breeding-spool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .pet-breeding-spool-card {
    width: 320px;
    border-radius: .75rem;
    text-align: center;
  }

  .pet-breeding-spool-card .pet-breeding-spool-image {
    display: block;
    width: 140px;
    height: 140px;
    margin: .5rem auto .25rem;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .pet-breeding-spool-card .card-body {
    padding: .85rem .9rem;
  }

  .pet-breeding-spool-title {
    font-size: .98rem;
    font-weight: 800;
  }

  .pet-breeding-spool-sub {
    font-size: .9rem;
  }

  .pet-breeding-spool-select {
    margin-top: .4rem;
  }

  .pet-breeding-wallet-pill {
    padding: .4rem .75rem;
    border: 1px solid #cfe2ff;
    border-radius: 9999px;
    background: #eef6ff;
    color: #0b5ed7;
    font-weight: 700;
    white-space: nowrap;
  }

  .pet-breeding-spool-card.pet-breeding-spool-soon {
    border: 1px dashed rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .02);
    opacity: .85;
    pointer-events: none;
  }

  .pet-breeding-spool-card.pet-breeding-spool-soon .pet-breeding-spool-image {
    filter: grayscale(1) opacity(.7);
  }

  .pet-breeding-incubating-grid .pet-breeding-cocoon-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
  }

  .pet-breeding-cocoon-meta {
    font-size: .95rem;
    line-height: 1.25;
  }

  .pet-breeding-cocoon-card-soon,
  .pet-breeding-cocoon-upgrade {
    border-radius: .75rem;
    outline: 2px dashed rgba(255, 255, 255, .15);
  }

  .pet-breeding-cocoon-card-soon {
    opacity: .9;
  }

  .pet-breeding-cocoon-soon-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    opacity: .85;
  }

  .pet-breeding-cocoon-upgrade-image {
    width: 100%;
    height: 180px;
    object-fit: contain;
    opacity: .9;
  }

  .pet-breeding-cocoon-upgrade-copy {
    font-size: .9rem;
  }

  .pet-breeding-cocoon-upgrade-note {
    font-size: .85rem;
  }

  .pet-breeding-post-reveal {
    display: none;
  }

  .pet-breeding-ready-grid .card {
    border-radius: .75rem;
  }

  .pet-breeding-ready-grid img,
  .pet-breeding-result-image-wrap > img.pet-breeding-result-image,
  .pet-breeding-result-image-wrap > img.pet-breeding-sparkle-overlay {
    width: 120px;
    height: 120px;
    object-fit: contain;
  }

  .pet-breeding-ready-grid .pet-breeding-result-title {
    font-size: 1rem;
    font-weight: 700;
  }

  .pet-breeding-ready-grid .pet-breeding-result-meta {
    font-size: .9rem;
  }

  .pet-breeding-button-row {
    display: flex;
    gap: .5rem;
  }

  .pet-breeding-button-row .btn {
    flex: 1 1 0;
  }

  .pet-breeding-reveal-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
  }

  .pet-breeding-reveal-column {
    min-width: 140px;
  }

  .pet-breeding-result-image-wrap {
    position: relative;
    display: inline-block;
  }

  .pet-breeding-result-image-wrap > img.pet-breeding-result-image {
    display: block;
  }

  .pet-breeding-result-image-wrap > img.pet-breeding-sparkle-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    image-rendering: pixelated;
  }

  .pet-breeding-new-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 6;
    padding: 2px 4px;
    border-radius: 0 0 4px 0;
    color: #d678ff;
    font-family: 'Minecraft', 'Pixelify Sans', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
    pointer-events: none;
    text-shadow:
      -1px -1px 0 white,
       1px -1px 0 white,
      -1px  1px 0 white,
       1px  1px 0 white;
  }

  .pet-breeding-parent-panel {
    overflow: hidden;
    text-align: center;
  }

  .pet-breeding-parent-frame {
    --frame-size: clamp(200px, 30vw, 520px);
    --pet-scale: .78;
    --pet-y: 0px;
    --web-inset: 6%;
    --web-scale: .88;

    position: relative;
    width: min(100%, var(--frame-size));
    max-width: 100%;
    margin: 0 auto .5rem;
    aspect-ratio: 1 / 1;
  }

  .pet-breeding-parent-frame .pet-breeding-frame-image {
    position: absolute;
    inset: var(--web-inset);
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transform: scale(var(--web-scale));
    transform-origin: center;
  }

  .pet-breeding-parent-frame .pet-breeding-parent-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: calc(100% * var(--pet-scale));
    max-height: calc(100% * var(--pet-scale));
    object-fit: contain;
    transform: translate(-50%, -50%) translateY(var(--pet-y));
  }

  .pet-breeding-info-card .pet-breeding-list-compact {
    margin: 0;
    padding-left: 1.1rem;
  }

  .pet-breeding-info-card .pet-breeding-list-compact li {
    margin: .15rem 0;
  }

  .pet-breeding-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .2rem 0;
    padding: .45rem .65rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, .06);
    color: #fff;
  }

  .pet-breeding-meter p {
    margin: 0;
    font-size: .95rem;
    opacity: .95;
  }

  .pet-breeding-meter strong {
    margin: 0;
    font-weight: 800;
  }

  .pet-breeding-meter small {
    opacity: .8;
  }

  .pet-breeding-eta-fast {
    color: #fff3d2ff;
  }

  .pet-breeding-eta-slow {
    color: #ff6b6b;
  }

  .pet-breeding-meter-common {
    --c1: 34, 197, 94;
    --c2: 16, 185, 129;
    background: linear-gradient(135deg, rgba(var(--c1), .18), rgba(var(--c2), .18));
    border-color: rgba(var(--c1), .35);
  }

  .pet-breeding-meter-uncommon {
    --c1: 242, 201, 76;
    --c2: 241, 196, 15;
    background: linear-gradient(135deg, rgba(var(--c1), .20), rgba(var(--c2), .20));
    border-color: rgba(var(--c1), .40);
  }

  .pet-breeding-meter-rare {
    --c1: 242, 153, 74;
    --c2: 230, 126, 34;
    background: linear-gradient(135deg, rgba(var(--c1), .20), rgba(var(--c2), .20));
    border-color: rgba(var(--c1), .40);
  }

  .pet-breeding-meter-ultra {
    --c1: 255, 107, 107;
    --c2: 230, 57, 70;
    background: linear-gradient(135deg, rgba(var(--c1), .20), rgba(var(--c2), .20));
    border-color: rgba(var(--c1), .40);
  }

  .pet-breeding-meter-exotic {
    border-color: rgba(187, 107, 217, .40);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)),
      linear-gradient(90deg,
        rgba(255, 107, 107, .22),
        rgba(242, 201, 76, .22),
        rgba(111, 207, 151, .22),
        rgba(86, 204, 242, .22),
        rgba(187, 107, 217, .22),
        rgba(255, 107, 107, .22)
      );
    background-size: 100% 100%, 200% 100%;
    background-clip: padding-box, border-box;
    animation: petBreedingExoticSweep 5s linear infinite;
  }

  .pet-breeding-meter-special {
    border-color: rgba(161, 140, 209, .40);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .03)),
      linear-gradient(135deg,
        rgba(161, 140, 209, .22) 0%,
        rgba(251, 194, 235, .22) 33%,
        rgba(132, 250, 176, .22) 66%,
        rgba(143, 211, 244, .22) 100%
      );
  }

  @keyframes petBreedingExoticSweep {
    0% { background-position: 0 0, 0% 0; }
    100% { background-position: 0 0, 100% 0; }
  }

  @media (min-width: 1400px) {
    .pet-breeding-parent-frame {
      --web-scale: .80;
    }
  }

  @media (max-width: 991.98px) {
    .pet-breeding-parent-frame {
      --frame-size: min(44vw, 420px);
      --web-inset: 5%;
    }
  }

  @media (max-width: 767.98px) {
    .pet-breeding-hero .pet-breeding-hero-image {
      max-height: 50vh;
    }

    .pet-breeding-speech-box {
      margin-bottom: .75rem;
    }

    .pet-breeding-speech-box::after,
    .pet-breeding-speech-box::before {
      top: 100%;
      right: auto;
      left: 40%;
      border: none;
    }

    .pet-breeding-speech-box::after {
      border-top: 14px solid #3d3c57;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
    }

    .pet-breeding-speech-box::before {
      top: calc(100% + 1px);
      border-top: 15px solid rgba(0, 0, 0, .08);
      border-right: 11px solid transparent;
      border-left: 11px solid transparent;
    }
  }

  @media (max-width: 575.98px) {
    .pet-breeding-parent-frame {
      --frame-size: min(88vw, 380px);
      --pet-scale: .8;
      --web-inset: 4%;
      --web-scale: .92;
    }
  }

/* Main Elyxium Gallery ************************************************************************************/

.user-gallery-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .user-gallery-actions {
        display: flex;
        align-items: center;
        gap: .5rem;
        white-space: nowrap;
    }

    .ely-art-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: .65rem;
    }

    .ely-art-card {
        min-width: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: .65rem;
        background: rgba(255,255,255,.035);
        overflow: hidden;
        transition: all .18s ease;
    }

    .ely-art-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255,154,197,.5);
        box-shadow: 0 0 18px rgba(0,0,0,.18);
    }

    .ely-art-card-image-wrap {
        position: relative;
        display: block;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: rgba(0,0,0,.18);
    }

    .ely-art-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .ely-art-card-image-blurred {
        filter: blur(12px);
        transform: scale(1.06);
    }

    .ely-art-card-warning-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 12, 30, .18);
        z-index: 1;
    }

    .ely-art-card-warning-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 193, 7, .95);
        color: #2d2300;
        box-shadow:
            0 0 14px rgba(0,0,0,.28),
            0 0 18px rgba(255,193,7,.2);
        font-size: 1rem;
    }

    .ely-art-card-badges {
        position: absolute;
        top: .45rem;
        display: flex;
        flex-direction: column;
        gap: .28rem;
        z-index: 2;
    }

    .ely-art-card-badges.left {
        left: .45rem;
    }

    .ely-art-card-badges.right {
        right: .45rem;
    }

    .ely-art-card-badge {
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,.25);
        font-size: .68rem;
    }

    .ely-art-card-badge.gift {
        background: linear-gradient(135deg, rgba(255,154,197,.95), rgba(155,123,255,.9));
    }

    .ely-art-card-badge.private {
        background: rgba(60,60,75,.92);
    }

    .ely-art-card-badge.warning {
        background: rgba(255, 193, 7, .95);
        color: #2d2300;
    }

    @media (max-width: 767px) {
        .user-gallery-header {
            display: block;
        }

        .user-gallery-actions {
            margin-top: 1rem;
            flex-wrap: wrap;
        }

    }

.ely-art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: .75rem;
}

@media (max-width: 767px) {
    .ely-art-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: .65rem;
    }
}

@media (max-width: 450px) {
    .ely-art-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Welcome FTO Styling ************************************************************************************/

 .welcome-sidebar {
    margin-bottom: 12px;
}

.welcome-sidebar .sidebar-section-header {
    color: #ddd4ff;
}

.welcome-sparkle {
    display: inline-block;
    margin-right: 4px;
    color: #c9b6ff;
    text-shadow: 0 0 6px rgba(190, 165, 255, .65);
    animation: welcomeSparkle 2.2s ease-in-out infinite;
}

@keyframes welcomeSparkle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-10deg) scale(1.08);
    }

    50% {
        transform: rotate(10deg) scale(1.15);
    }

    75% {
        transform: rotate(-6deg) scale(1.08);
    }
}

.welcome-claim-link {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    background: rgba(165, 140, 255, .10);
    border: 1px solid rgba(190, 170, 255, .18);
    transition: all .15s ease;
}

.welcome-claim-link:hover {
    background: rgba(165, 140, 255, .18);
    transform: translateX(2px);
}

.welcome-claim-link small {
    display: block;
    margin-top: 2px;
    opacity: .7;
    font-size: .72rem;
}


/* SpeciesPage Card ************************************************************************************/

.ely-species-archive {
    --ely-species-archive-paper: #3d3c57;
    --ely-species-archive-paper-2: #34344d;
    --ely-species-archive-paper-3: #2a2a43;
    --ely-species-archive-ink: #eeeaf4;
    --ely-species-archive-muted: #c7bfd3;
    --ely-species-archive-line: #777089;
    --ely-species-archive-violet: #b7a9cb;
    --ely-species-archive-violet-soft: #9689aa;
    --ely-species-archive-magenta: #9e72bc;
    --ely-species-archive-shadow: rgba(16, 14, 24, .32);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px clamp(10px, 1.5vw, 28px) 55px;
    color: var(--ely-species-archive-ink);
    background: transparent;
}

.ely-species-archive *, .ely-species-archive *::before, .ely-species-archive *::after {
    box-sizing: border-box;
}

.ely-species-archive-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(270px, .75fr);
    align-items: end;
    gap: 35px;
    width: 100%;
    margin-bottom: 38px;
    padding: 24px 8px 20px;
    border-top: 1px solid var(--ely-species-archive-line);
    border-bottom: 1px solid var(--ely-species-archive-line);
    background: linear-gradient(90deg, rgba(170, 130, 190, .07), transparent 48%);
}

.ely-species-archive-intro-title {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.ely-species-archive-section-number {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-left: 7px;
    border: 1px solid var(--ely-species-archive-violet);
    transform: rotate(45deg);
    background: #342d50;
    color: var(--ely-species-archive-violet);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
}

.ely-species-archive-section-number > span {
    transform: rotate(-45deg);
}

.ely-species-archive-intro-heading {
    min-width: 0;
}

.ely-species-archive-kicker {
    margin-bottom: 6px;
    color: var(--ely-species-archive-violet);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.ely-species-archive-intro h1 {
    margin: 0;
    color: var(--ely-species-archive-ink);
    font-family: "CaviarDreams", serif;
    font-size: clamp(31px, 4vw, 44px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.035em;
    text-shadow: none;
}

.ely-species-archive-intro-copy {
    padding-bottom: 2px;
}

.ely-species-archive-intro-copy p {
    margin: 0;
    max-width: 48ch;
    color: var(--ely-species-archive-muted);
    font-size: 12px;
    line-height: 1.65;
}

.ely-species-archive-section {
    width: 100%;
}

.ely-species-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(28px, 3vw, 46px) clamp(14px, 1.5vw, 26px);
    width: 100%;
    align-items: end;
}

.ely-species-archive-card-link {
    display: block;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none !important;
    outline: none;
    box-shadow: none !important;
    filter: none !important;
}

.ely-species-archive-card-link:hover, .ely-species-archive-card-link:focus, .ely-species-archive-card-link:active {
    color: inherit !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.ely-species-archive-card-link *, .ely-species-archive-card-link:hover *, .ely-species-archive-card-link:focus *, .ely-species-archive-card-link:active * {
    text-decoration: none !important;
    box-shadow: none;
    filter: none;
}

.ely-species-archive-card {
    position: relative;
    width: 100%;
    aspect-ratio: 205 / 365;
    min-height: 340px;
    max-height: 430px;
    perspective: 1100px;
    background: transparent;
}

.ely-species-archive-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .58s cubic-bezier(.2,.65,.3,1);
    transform-style: preserve-3d;
    will-change: transform;
}

.ely-species-archive-card-link:hover .ely-species-archive-card-inner, .ely-species-archive-card-link:focus .ely-species-archive-card-inner {
    transform: rotateY(180deg);
}

.ely-species-archive-card-front, .ely-species-archive-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ely-species-archive-card-art {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120%;
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    pointer-events: none;
    z-index: 1;
}

.ely-species-archive-card-overlay {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 25px 12px 18px;
    overflow: hidden;
    text-align: center;
    border-radius: 0 0 35px 35px;
    background: linear-gradient(to top, rgba(25, 23, 41, .90) 0%, rgba(25, 23, 41, .54) 44%, rgba(25, 23, 41, 0) 100%);
    pointer-events: none;
}

.ely-species-archive-card-rework {
    width: 140px;
    height: 140px;
    margin: 0 auto 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed rgba(183, 169, 203, .5);
    background: rgba(42, 42, 67, .35);
    color: var(--ely-species-archive-violet);
    text-align: center;
}

.ely-species-archive-card-rework span {
    font-size: 18px;
    color: var(--ely-species-archive-violet-soft);
}

.ely-species-archive-card-rework strong {
    max-width: 100px;
    font-size: 9px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ely-species-archive-muted);
}

.ely-species-archive-card-eyebrow {
    margin-bottom: 3px;
    color: rgba(222, 212, 233, .75);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.ely-species-archive-card-front h2 {
    margin: 0;
    color: #fff;
    font-family: "CaviarDreams", serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.ely-species-archive-card-back {
    position: absolute;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 20px 20px;
    border: 1px solid var(--ely-species-archive-line);
    border-radius: 15px;
    background: linear-gradient(160deg, var(--ely-species-archive-paper) 0%, var(--ely-species-archive-paper-2) 48%, var(--ely-species-archive-paper-3) 100%);
    color: var(--ely-species-archive-ink);
    text-align: center;
    box-shadow: none !important;
}

.ely-species-archive-card-back::before, .ely-species-archive-card-back::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    opacity: .5;
    pointer-events: none;
}

.ely-species-archive-card-back::before {
    top: 8px;
    left: 8px;
    border-top: 1px solid var(--ely-species-archive-violet-soft);
    border-left: 1px solid var(--ely-species-archive-violet-soft);
}

.ely-species-archive-card-back::after {
    right: 8px;
    bottom: 8px;
    border-right: 1px solid var(--ely-species-archive-violet-soft);
    border-bottom: 1px solid var(--ely-species-archive-violet-soft);
}

.ely-species-archive-card-ornament {
    position: absolute;
    top: 14px;
    color: rgba(183,169,203,.55);
    font-size: 9px;
}

.ely-species-archive-card-crest {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto 13px;
    object-fit: contain;
    opacity: .92;
    box-shadow: none !important;
    filter: none !important;
}

.ely-species-archive-card-type {
    margin-bottom: 5px;
    color: var(--ely-species-archive-violet);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ely-species-archive-card-back h3 {
    margin: 0;
    color: var(--ely-species-archive-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    text-shadow: none !important;
}

.ely-species-archive-card-rule {
    width: 38px;
    height: 1px;
    margin: 13px auto 12px;
    background: var(--ely-species-archive-line);
}

.ely-species-archive-card-back p {
    margin: 0;
    color: var(--ely-species-archive-muted);
    font-size: 11px;
    line-height: 1.55;
    text-shadow: none !important;
}

.ely-species-archive-card-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: var(--ely-species-archive-violet);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ely-species-archive-card-view span {
    font-size: 12px;
    line-height: 1;
}

.ely-species-archive-card-link:hover .ely-species-archive-card, .ely-species-archive-card-link:hover .ely-species-archive-card-front, .ely-species-archive-card-link:hover .ely-species-archive-card-back, .ely-species-archive-card-link:hover .ely-species-archive-card-art, .ely-species-archive-card-link:hover .ely-species-archive-card-overlay, .ely-species-archive-card-link:focus .ely-species-archive-card, .ely-species-archive-card-link:focus .ely-species-archive-card-front, .ely-species-archive-card-link:focus .ely-species-archive-card-back, .ely-species-archive-card-link:focus .ely-species-archive-card-art, .ely-species-archive-card-link:focus .ely-species-archive-card-overlay {
    box-shadow: none !important;
    filter: none !important;
}

.ely-species-archive-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--ely-species-archive-line);
    color: var(--ely-species-archive-muted);
    text-align: center;
}

.ely-species-archive-footer-divider {
    display: block;
    width: min(165px, 52%);
    height: auto;
    margin-bottom: 11px;
    opacity: .5;
    filter: brightness(0) invert(1);
}

.ely-species-archive-footer span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

@media (min-width: 1500px) {
    .ely-species-archive-grid {
        grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
        gap: 42px 24px;
    }

    .ely-species-archive-card {
        min-height: 370px;
        max-height: 440px;
    }
}

@media (min-width: 1900px) {
    .ely-species-archive {
        padding-left: 32px;
        padding-right: 32px;
    }

    .ely-species-archive-grid {
        grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
        gap: 48px 28px;
    }
}

@media (max-width: 900px) {
    .ely-species-archive-intro {
        grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
        gap: 22px;
    }

    .ely-species-archive-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 28px 16px;
    }
}

@media (max-width: 700px) {
    .ely-species-archive {
        padding: 12px 8px 42px;
    }

    .ely-species-archive-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 15px;
        margin-bottom: 29px;
        padding: 20px 5px 18px;
    }

    .ely-species-archive-intro-title {
        gap: 17px;
    }

    .ely-species-archive-intro h1 {
        font-size: 32px;
    }

    .ely-species-archive-intro-copy {
        padding-left: 57px;
    }

    .ely-species-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .ely-species-archive-card {
        width: 100%;
        min-height: 300px;
        max-height: none;
    }
}

@media (max-width: 460px) {
    .ely-species-archive-grid {
        grid-template-columns: 1fr;
    }

    .ely-species-archive-card-link {
        width: min(235px, 100%);
        margin: 0 auto;
    }

    .ely-species-archive-card {
        min-height: 375px;
    }
}

@media (hover: none) {
    .ely-species-archive-card-inner {
        transition: transform .45s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ely-species-archive-card-inner {
        transition: none;
    }
}

/**************************************************************************************************

    Species + subtype entries

**************************************************************************************************/

/* Shared species + subtype entry styles */

.ely-species-entry,
.ely-species-entry * {
    box-sizing: border-box;
}

.ely-species-entry {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    overflow-x: hidden;

    color: #fff;
    background: linear-gradient(to bottom, #3d3c57, #2a2a43);
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.ely-species-entry .ely-species-entry-header {
    margin-bottom: 1.5rem;
}

.ely-species-entry .ely-species-entry-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    margin-bottom: 0.75rem;

    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.ely-species-entry .ely-species-entry-image-wrap {
    padding-right: 24px;
}

.ely-species-entry .ely-species-entry-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    object-fit: cover;

    border-radius: 18px;
}

.ely-species-entry .ely-species-entry-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ely-species-entry .ely-species-entry-info-grid {
    margin-bottom: 0.5rem;
}

.ely-species-entry .ely-species-entry-info-box {
    height: 100%;
    padding: 16px 18px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ely-species-entry .ely-species-entry-heading {
    margin-bottom: 0.9rem;

    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.ely-species-entry .ely-species-entry-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.ely-species-entry .ely-species-entry-list li {
    margin-bottom: 0.45rem;

    color: rgba(255, 255, 255, 0.82);
}

.ely-species-entry .ely-species-entry-crest-frame {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
}

.ely-species-entry--species .ely-species-entry-crest-frame {
    max-width: 220px;
}

.ely-species-entry--subtype .ely-species-entry-crest-frame {
    max-width: 170px;
}


/* Abilities */

.ely-species-entry--species .ely-species-entry-ability-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
}

.ely-species-entry--species .ely-species-entry-ability-label {
    flex: 0 0 auto;
    line-height: 1.85;
}

.ely-species-entry--species .ely-species-entry-ability-tags {
    display: inline-flex;
    flex: 1 1 220px;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ely-species-entry--species .ely-species-entry-ability-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;

    padding: 0.28rem 0.65rem;

    color: rgba(244, 241, 251, 0.92);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
        linear-gradient(135deg, rgba(123, 91, 187, 0.26), rgba(185, 83, 204, 0.18));
    border: 1px solid rgba(216, 200, 255, 0.3);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 7px rgba(16, 11, 30, 0.2);

    cursor: help;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.ely-species-entry--species .ely-species-entry-ability-tag:hover,
.ely-species-entry--species .ely-species-entry-ability-tag:focus {
    color: #fff;
    outline: none;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        linear-gradient(135deg, rgba(123, 91, 187, 0.38), rgba(185, 83, 204, 0.26));
    border-color: rgba(231, 218, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 3px 10px rgba(91, 55, 145, 0.24);

    transform: translateY(-1px);
}

.ely-species-entry--species .ely-species-entry-ability-icon {
    color: #dbcaff;
    font-size: 0.72rem;
    line-height: 1;
    text-shadow: 0 0 6px rgba(207, 180, 255, 0.52);
}

.ely-species-entry--species .ely-species-entry-ability-empty {
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.85;
}

.ely-species-entry--subtype .ely-species-entry-ability-overview {
    margin: -0.1rem 0 1rem;
    padding: 0.75rem 0.85rem;

    background:
        linear-gradient(135deg, rgba(123, 91, 187, 0.15), rgba(185, 83, 204, 0.1)),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(216, 200, 255, 0.14);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ely-species-entry--subtype .ely-species-entry-ability-label {
    margin-bottom: 0.5rem;

    color: rgba(236, 228, 250, 0.78);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.ely-species-entry--subtype .ely-species-entry-ability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ely-species-entry--subtype .ely-species-entry-ability-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    min-height: 28px;
    padding: 0.3rem 0.65rem;

    color: rgba(247, 242, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;

    background:
        linear-gradient(135deg, rgba(123, 91, 187, 0.3), rgba(185, 83, 204, 0.2)),
        rgba(24, 24, 38, 0.48);
    border: 1px solid rgba(216, 200, 255, 0.22);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.13);

    cursor: help;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.ely-species-entry--subtype .ely-species-entry-ability-tag:hover,
.ely-species-entry--subtype .ely-species-entry-ability-tag:focus {
    color: #fff;
    outline: none;

    background:
        linear-gradient(135deg, rgba(123, 91, 187, 0.42), rgba(185, 83, 204, 0.29)),
        rgba(24, 24, 38, 0.55);
    border-color: rgba(231, 216, 255, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(81, 53, 123, 0.22);

    transform: translateY(-1px);
}

.ely-species-entry--subtype .ely-species-entry-ability-icon {
    color: #d8c8ff;
    font-size: 0.72rem;
    text-shadow: 0 0 7px rgba(205, 181, 255, 0.45);
}

.ely-species-entry--subtype .ely-species-entry-ability-empty {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.82rem;
    font-style: italic;
}


/* Stats */

.ely-species-entry .ely-species-entry-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.ely-species-entry .ely-species-entry-stat-card {
    text-align: center;
}

.ely-species-entry .ely-species-entry-stat-badge {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(86px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto 10px;
}

.ely-species-entry .ely-species-entry-stat-badge::before {
    content: "";

    position: absolute;
    inset: 0;

    background: #7a7a86;

    -webkit-mask-image: url('/css/images/D20.svg');
    mask-image: url('/css/images/D20.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transform-origin: center;
    transition: transform 0.45s ease;
}

.ely-species-entry .ely-species-entry-stat-card:hover .ely-species-entry-stat-badge::before {
    transform: rotate(18deg) scale(1.04);
}

.ely-species-entry .ely-species-entry-stat-badge.active::before {
    background: linear-gradient(135deg, #7b5bbb, #b953cc);
}

.ely-species-entry .ely-species-entry-stat-number {
    position: relative;
    z-index: 1;

    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.ely-species-entry .ely-species-entry-stat-name {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* Trait cards */

.ely-species-entry .ely-species-entry-trait-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.ely-species-entry .ely-species-entry-trait-grid-item {
    flex: 0 0 auto;
}

.ely-species-entry .ely-species-entry-trait-block {
    width: 100%;
}

.ely-species-entry .ely-species-entry-trait-wrap {
    position: relative;

    width: 190px;
    max-width: 100%;
    margin: 0 auto;
}

.ely-species-entry .ely-species-entry-trait-card {
    position: relative;

    min-height: 290px;
    overflow: hidden;

    background: linear-gradient(to bottom, #4a4966, #35344f);
    border: none;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ely-species-entry .ely-species-entry-trait-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.ely-species-entry .ely-species-entry-trait-visual {
    position: relative;

    aspect-ratio: 1 / 1;
    overflow: hidden;

    background: linear-gradient(to bottom, #4a4966, #35344f);
}

.ely-species-entry .ely-species-entry-trait-visual::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background-color: #6b6189;

    -webkit-mask-image: url('/css/images/TraitFlower.svg');
    mask-image: url('/css/images/TraitFlower.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;

    opacity: 0.4;
    pointer-events: none;
}

.ely-species-entry .ely-species-entry-trait-visual::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));

    pointer-events: none;
}

.ely-species-entry .ely-species-entry-trait-art {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px;

    pointer-events: none;
}

.ely-species-entry .ely-species-entry-trait-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter: drop-shadow(0 0 20px #6b6189);
}

.ely-species-entry .ely-species-entry-trait-banner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-height: 108px;
    padding: 12px 12px 14px;

    background: rgba(24, 24, 38, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ely-species-entry .ely-species-entry-trait-title-row {
    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1.2;
    text-align: center;
}

.ely-species-entry .ely-species-entry-trait-title {
    display: block;
    width: 100%;

    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.ely-species-entry .ely-species-entry-trait-rarity-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;

    min-height: 26px;

    line-height: 1.2;
    text-align: center;
}

.ely-species-entry .ely-species-entry-trait-rarity-badge {
    display: inline-block;

    padding: 3px 10px;

    color: var(--rarity-color);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--rarity-color);
    border-radius: 999px;

    opacity: 0.9;
}

.ely-species-entry .ely-species-entry-trait-ability-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    color: rgba(231, 219, 255, 0.94);
    outline: none;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015)),
        linear-gradient(135deg, rgba(123, 91, 187, 0.58), rgba(185, 83, 204, 0.42));
    border: 1px solid rgba(216, 200, 255, 0.3);
    border-radius: 7px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 8px rgba(154, 104, 218, 0.16);

    cursor: help;

    transition:
        transform 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.ely-species-entry .ely-species-entry-trait-ability-indicator > span {
    font-size: 0.66rem;
    line-height: 1;
    text-shadow: 0 0 6px rgba(224, 196, 255, 0.38);
}

.ely-species-entry .ely-species-entry-trait-ability-indicator:hover,
.ely-species-entry .ely-species-entry-trait-ability-indicator:focus {
    color: #fff;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.025)),
        linear-gradient(135deg, rgba(123, 91, 187, 0.8), rgba(185, 83, 204, 0.64));
    border-color: rgba(231, 216, 255, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 10px rgba(174, 112, 229, 0.26);

    transform: translateY(-1px);
}

.ely-species-entry .ely-species-entry-trait-card .text-muted,
.ely-species-entry .ely-species-entry-trait-card .small {
    color: rgba(255, 255, 255, 0.78) !important;
    text-align: center;
}

.ely-species-entry .ely-species-entry-trait-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: auto;
}

.ely-species-entry .ely-species-entry-trait-example-button {
    padding: 0.35rem 0.9rem;

    font-size: 0.8rem;

    border-radius: 999px;
}

.ely-species-entry .ely-species-entry-trait-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;

    color: #fff;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        border-color 0.18s ease;
}

.ely-species-entry .ely-species-entry-trait-info-button:hover,
.ely-species-entry .ely-species-entry-trait-info-button:focus {
    color: #fff;
    outline: none;

    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);

    transform: translateY(-1px);
}

.ely-species-entry .ely-species-entry-trait-info-button i {
    font-size: 0.82rem;
}

.ely-species-entry .ely-species-entry-trait-description-collapse {
    width: 100%;
}

.ely-species-entry .ely-species-entry-trait-description {
    margin-top: 2px;
    padding: 10px 12px;

    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: left;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.ely-species-entry .ely-species-entry-trait-description p:last-child {
    margin-bottom: 0;
}

.ely-species-entry .ely-species-entry-trait-modal {
    backdrop-filter: blur(6px);
}

.ely-species-entry .ely-species-entry-trait-modal-content {
    padding: 18px;

    background: linear-gradient(to bottom, #4a4966, #35344f);
    border: none;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

.ely-species-entry .ely-species-entry-trait-modal-body {
    text-align: center;
}

.ely-species-entry .ely-species-entry-trait-modal-image {
    max-width: 100%;
    max-height: 80vh;

    border-radius: 12px;
}

.ely-species-entry .ely-species-entry-trait-modal-close {
    position: absolute;
    top: -12px;
    right: -12px;

    width: 36px;
    height: 36px;

    color: #fff;
    font-size: 20px;

    background: #2a2a43;
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);

    cursor: pointer;
}

.ely-species-entry .ely-species-entry-trait-affliction {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: #fff;
    font-size: 0.75rem;

    background: #7b5cff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(123, 92, 255, 0.4);

    animation: elySpeciesEntryAfflictionPulse 2.5s ease-in-out infinite;
}

.ely-species-entry .ely-species-entry-trait-affliction::after {
    content: "";

    position: absolute;
    inset: -4px;
    z-index: -1;

    background: rgba(123, 92, 255, 0.25);
    border-radius: 50%;

    filter: blur(6px);
}

@keyframes elySpeciesEntryAfflictionPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}


/* Aspect + description */

.ely-species-entry .ely-species-entry-aspect-box {
    position: relative;

    padding: 18px 20px;
    overflow: hidden;

    background: linear-gradient(135deg, #7b5bbb, #b953cc);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ely-species-entry .ely-species-entry-aspect-box::before {
    content: "";

    position: absolute;
    inset: 0;

    mix-blend-mode: screen;
    pointer-events: none;
}

.ely-species-entry .ely-species-entry-aspect-box::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.08));

    pointer-events: none;
}

.ely-species-entry .ely-species-entry-aspect-box > * {
    position: relative;
    z-index: 1;
}

.ely-species-entry .ely-species-entry-aspect-box .ely-species-entry-heading {
    margin-bottom: 0.65rem;

    color: rgba(255, 255, 255, 0.92);
}

.ely-species-entry .ely-species-entry-aspect-text {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}

.ely-species-entry .ely-species-entry-description,
.ely-species-entry .ely-species-entry-lore {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-wrap: break-word;
    word-break: normal;
}

.ely-species-entry .ely-species-entry-description {
    margin-top: 1rem;
    padding-top: 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ely-species-entry .ely-species-entry-lore {
    color: rgba(255, 255, 255, 0.88);
}

.ely-species-entry .ely-species-entry-lore p:last-child {
    margin-bottom: 0;
}

.ely-species-entry .ely-species-entry-lore img,
.ely-species-entry .ely-species-entry-lore video,
.ely-species-entry .ely-species-entry-lore iframe {
    max-width: 100%;
    height: auto;
}

.ely-species-entry .ely-species-entry-lore table {
    display: block;

    max-width: 100%;
    overflow-x: auto;
}

.ely-species-entry .ely-species-entry-lore .row {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.ely-species-entry .ely-species-entry-lore .row > [class*="col-"] {
    min-width: 0;
}

.ely-species-entry--subtype .ely-species-entry-lore .d-flex {
    flex-wrap: wrap;
}

.ely-species-entry--subtype .ely-species-entry-lore .card,
.ely-species-entry--subtype .ely-species-entry-lore [class*="card"] {
    max-width: 100%;
}


/* Special traits */

.ely-species-entry .ely-species-entry-traits:not(.ely-species-entry-show-special-traits) .ely-species-entry-trait-item--special {
    display: none;
}

.ely-species-entry--subtype .ely-species-entry-traits:not(.ely-species-entry-show-special-traits) .ely-species-entry-trait-group--special-only {
    display: none;
}


/* Responsive */

@media (max-width: 991.98px) {
    .ely-species-entry .ely-species-entry-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ely-species-entry .ely-species-entry-image-wrap {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    .ely-species-entry .ely-species-entry-title {
        font-size: 1.65rem;
    }

    .ely-species-entry--species .ely-species-entry-lore .row > [class*="col-"],
    .ely-species-entry--subtype .ely-species-entry-description .ely-species-entry-lore .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }

    .ely-species-entry--subtype {
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    .ely-species-entry .ely-species-entry-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ely-species-entry .ely-species-entry-stat-badge {
        width: 74px;
        height: 74px;
    }

    .ely-species-entry--subtype {
        padding: 14px;

        border-radius: 16px;
    }

    .ely-species-entry--subtype .ely-species-entry-trait-grid {
        gap: 16px;
    }

    .ely-species-entry--subtype .ely-species-entry-trait-grid-item,
    .ely-species-entry--subtype .ely-species-entry-trait-wrap {
        width: 100%;
    }

    .ely-species-entry--subtype .ely-species-entry-trait-wrap {
        max-width: 260px;
    }
}



.ely-species-entry .ely-species-entry-parent-crest {
    width: 100%;
}

.ely-species-entry .ely-species-entry-modifier-help {
    cursor: help;
}