/* =================================================================
   +1 Skill Point Legends (SPL) Wiki - Shared Stylesheet
   Auto-generated from the per-page <style> blocks. Page-specific
   rules live under body.page-<slug> selectors at the bottom of
   this file -- each <body> tag that needs one carries that class.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --gold: #ffd700;
    --glow: #FFF645;
    --bg-color: #0b0c10;
    --container-bg: #1a1c24;
    --box-hover: #222530;
    --text-main: #ffffff;
    --blue-accent: #4682B4;
    --boss-color: #E0115F;
    --card-bg: #1a1a2e;
    --danger: #ff4d4d;
    --input-bg: #111217;
    --playtime-color: #4682B4;
    --price-bg: rgba(0, 0, 0, 0.3);
    --sp-color: #FFF645;
    --tag-boss: #ff4d4d;
    --tag-name: #00ff00;
    --tag-sp: #4da6ff;
    --tag-time: #ffffff;
    --th-bg: #1a1a2e;
}

/* Base */
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 40px 20px;
    line-height: 1.6;
}

/* ===================== Shared Components ===================== */
.page-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
}

.back-button {
    display: inline-block;
    background-color: transparent;
    color: var(--gold);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 800;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

.back-button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 20px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

.mob-image {
    max-width: 300px;
    width: 100%;
    display: block;
    margin: 30px auto;
    border-radius: 8px;
    border: 2px solid var(--gold);
}

.mob-stats {
    background: rgba(26, 26, 46, 0.4);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.stat-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: 0.9em;
    color: rgba(255, 215, 0, 0.7);
    display: block;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.3em;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.mob-drop {
    background: linear-gradient(145deg, #1a1a2e 1%, #16213e 50%, #0f0f23 100%);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.drop-item {
    color: var(--gold);
    font-weight: 600;
}

.drop-chance {
    font-size: 0.9em;
    color: rgba(255, 215, 0, 0.6);
    margin-top: 5px;
}

.mob-description {
    font-style: italic;
    color: #ccc;
    margin-top: 30px;
    padding: 15px;
    border-left: 3px solid var(--gold);
}

.sp-info-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.sp-info-box {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.badge {
    display: inline-block;
    background-color: #ff6b6b;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

.section-title {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--gold);
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.intro-text {
    max-width: 600px;
    font-size: 1.1em;
    font-weight: 600;
    margin: 20px 0;
    padding: 15px;
    background: rgba(26, 26, 46, 0.4);
    border-left: 3px solid var(--gold);
}

.portal-card {
    border: 3px solid var(--gold);
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
    background: #16213e;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    overflow: hidden;
}

.portal-header {
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 8px var(--glow);
    font-size: 1.5em;
    padding: 15px 10px;
    border-bottom: 2px solid var(--gold);
    background: #1a1a2e;
    font-weight: bold;
}

.portal-body {
    padding: 20px;
    background: rgba(26, 26, 46, 0.8);
}

.portal-req {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 1.1em;
}

.portal-req .amount {
    color: #ff4d4d;
}

.mob-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin: 20px 0;
}

.mob-card {
    background: linear-gradient(145deg, #1a1a2e 1%, #16213e 50%, #0f0f23 100%);
    border: 3px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
}

.mob-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.25);
    border-color: #fff645;
}

.mob-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mob-title {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 15px;
}

.mob-badge {
    display: inline-block;
    background-color: rgba(255, 107, 107, 0.8);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-bottom: 10px;
}

.area-image {
    max-width: 400px;
    width: 100%;
    display: block;
    margin: 30px auto;
    border-radius: 8px;
    border: 2px solid var(--gold);
}

.danger-box {
    max-width: 600px;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 77, 77, 0.1);
    border: 2px solid var(--danger);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

.danger-box p {
    margin: 0 0 10px 0;
}

.danger-box p:last-child {
    margin: 0;
}

.danger-box a {
    color: var(--gold);
    text-decoration: none;
}

.danger-box a:hover {
    text-decoration: underline;
}

.item-badge {
    display: inline-block;
    background-color: #d4a574;
    color: #1a1a1a;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

.item-description {
    background: rgba(26, 26, 46, 0.4);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
    font-size: 1.1em;
}

.area-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.area-box {
    background: linear-gradient(145deg, #1a1a2e 1%, #16213e 50%, #0f0f23 100%);
    border: 3px solid var(--gold);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
}

.area-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.25);
}

.area-box a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.area-title {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.wiki-link {
    color: var(--glow);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed var(--glow);
    transition: all 0.2s;
}

.wiki-link:hover {
    color: #fff;
    border-bottom-style: solid;
}

/* Links wrapping an image (area/mob cards) shouldn't show the text-link underline */
.wiki-link:has(img),
.wiki-link:has(img):hover {
    border-bottom: none;
}

/* Button-style links keep their own full border instead of the text-link underline */
.back-button.wiki-link,
.back-button.wiki-link:hover,
.homepage-nav-box.wiki-link,
.homepage-nav-box.wiki-link:hover {
    border-bottom: 2px solid var(--gold);
}

/* page-items/page-ranks redeclare .wiki-link with higher specificity (body.page-X .wiki-link) -
   reassert the back-button border so it isn't re-overridden on those two pages */
body.page-items .back-button.wiki-link,
body.page-items .back-button.wiki-link:hover,
body.page-ranks .back-button.wiki-link,
body.page-ranks .back-button.wiki-link:hover {
    border-bottom: 2px solid var(--gold);
}

/* Discord login button (index.html) - solid color pill, no underline wanted */
#discord-btn.wiki-link,
#discord-btn.wiki-link:hover {
    border-bottom: none;
}

.info-box {
    background: linear-gradient(145deg, #1a1a2e 1%, #16213e 50%, #0f0f23 100%);
    border: 3px solid var(--gold);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
    padding: 30px;
    margin: 20px auto 40px auto;
    text-align: center;
    max-width: 800px;
}

.info-box p {
    font-size: 1.2em;
    color: #ececec;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.requirement {
    font-size: 1.1em;
    color: var(--gold);
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 215, 0, 0.3);
}

.divider {
    border: none;
    height: 2px;
    background: var(--gold);
    margin: 40px auto;
    width: 100%;
    opacity: 0.7;
}

.status-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.status-box {
    background: rgba(26, 26, 46, 0.4);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    flex: 0 1 250px;
    transition: transform 0.2s ease-in-out;
}

.status-box:hover {
    transform: translateY(-5px);
}

.status-inactive {
    border: 2px solid #ff4d4d;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

.status-active {
    border: 2px solid #00ff00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.status-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-inactive .status-title {
    color: #ff4d4d;
    text-shadow: 0 0 8px rgba(255, 77, 77, 0.5);
}

.status-active .status-title {
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.status-img {
    max-width: 200px;
    width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

.description {
    font-size: 1.1em;
    margin-bottom: 30px;
    text-align: center;
    color: #ddd;
}

.badge-icon {
    width: 100px;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.badge-name {
    font-weight: bold;
    color: var(--gold);
    font-size: 1.1em;
    text-align: center;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.section-header {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
    margin-top: 40px;
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 2em;
}

.feature-card {
    background: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 1.2em;
    text-align: center;
    box-shadow: 0 0 15px var(--glow);
    transition: transform 0.2s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.icon-card {
    flex: 0 1 250px;
}

.state-card {
    flex: 1 1 180px;
    max-width: 220px;
}

.feature-card img {
    width: 100px;
    height: auto;
    border-radius: 8px;
}

.card-title {
    color: var(--gold);
    margin-top: 15px;
    font-size: 1.1em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.card-subtitle {
    color: #ccc;
    font-size: 0.9em;
    margin-top: 5px;
}

.function-box {
    width: 95%;
    max-width: 800px;
    margin: 1em auto;
    padding: 1.5em;
    background: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 10px;
    text-align: center;
    color: var(--glow);
    box-shadow: 0 0 10px var(--glow);
    text-shadow: 0 0 8px var(--glow);
    box-sizing: border-box;
}

.function-title {
    font-weight: bold;
    font-size: 1.4em;
}

.function-box hr {
    border: 1.5px solid var(--glow);
    box-shadow: 0 0 8px var(--glow);
    margin: 15px 0;
}

.function-text {
    color: var(--text-main);
    text-shadow: none;
    line-height: 1.6;
    margin: 0;
    font-size: 1.05em;
}

.function-text strong {
    color: var(--gold);
}

.latest-edit {
    text-align: right;
    font-size: 0.85em;
    color: #888;
    margin-bottom: 20px;
}

.info-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 10px;
}

.info-text {
    font-size: 1.1em;
    line-height: 1.6em;
    color: #ececec;
    max-width: 750px;
    margin: 0 auto;
}

hr.divider {
    border: none;
    height: 2px;
    background: var(--gold);
    margin: 30px auto;
    width: 100%;
}

.tag-format {
    font-size: 1.1em;
    line-height: 1.6em;
    margin: 0 auto;
    font-weight: bold;
}

.image-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.image-wrapper {
    background: rgba(26, 26, 46, 0.4);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
}

.image-wrapper img {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.grid-card {
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
}

.grid-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.grid-text {
    font-size: 0.95em;
    color: #ececec;
}

.rank-box {
    margin-top: 40px;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 20px;
}

.rank-title {
    font-weight: bold;
    font-size: 1.5em;
    color: var(--gold);
    margin-bottom: 10px;
}

.rank-text {
    margin: 0;
    color: #ececec;
    line-height: 1.5em;
}

.codes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    margin: 2em 0;
}

.code-card {
    flex: 1 1 300px;
    max-width: 400px;
    background: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 1.2em;
    color: var(--text-main);
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 246, 69, 0.2);
    transition: transform 0.2s;
}

.code-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--glow);
}

.code-header {
    cursor: pointer;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed transparent;
    transition: all 0.2s;
    user-select: none;
}

.code-header:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--gold);
}

.code-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.click-to-copy {
    font-size: 0.85em;
    color: #aaa;
    font-style: italic;
    transition: color 0.2s;
}

.code-rewards-label {
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 8px;
}

.code-rewards {
    line-height: 1.6;
    color: #ececec;
}

.expired-list {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 20px 20px 20px 40px;
    margin-bottom: 30px;
}

.expired-list li {
    color: #ff4d4d;
    font-weight: bold;
    margin-bottom: 8px;
    text-decoration: line-through;
}

.redeem-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    background: rgba(26, 26, 46, 0.4);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
    width: 100%;
}

.redeem-steps {
    flex: 1 1 250px;
    word-wrap: break-word;
}

.redeem-steps ol {
    padding-left: 20px;
    margin: 0;
    line-height: 1.8;
    color: #ececec;
}

.redeem-steps li {
    margin-bottom: 10px;
}

.redeem-steps strong {
    color: var(--gold);
}

.redeem-image {
    flex: 1 1 300px;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

.redeem-image img {
    max-width: 350px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.tip-box {
    margin-top: 20px;
    font-style: italic;
    color: #ccc;
    border-left: 3px solid var(--glow);
    padding-left: 15px;
}

.last-updated {
    text-align: center;
    color: #ccc;
    font-style: italic;
    margin-bottom: 40px;
}

.homepage {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
}

.homepage-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
}

.form-group {
    margin-bottom: 25px;
    background-color: var(--input-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #444;
    background: #12141a;
}

.table th {
    background: #1a1a2e;
    color: var(--glow);
    padding: 10px;
    border: 1px solid #444;
}

.table td {
    padding: 10px;
    border: 1px solid #333;
    text-align: center;
}

.btn-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

#auth-warning {
    text-align: center;
    margin-top: 100px;
}

.warning-title {
    font-size: 3.5em;
    color: var(--gold);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    margin-bottom: 30px;
    font-weight: 900;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

.modal-box {
    background-color: var(--container-bg);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.25);
    text-align: center;
    box-sizing: border-box;
}

.modal-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--gold);
    margin: 0 0 15px 0;
}

.modal-text {
    color: #ececec;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.modal-box input[type="text"],
.modal-box select,
.modal-box textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--input-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    margin-bottom: 15px;
    font-family: inherit;
}

.modal-box label {
    display: block;
    text-align: left;
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 8px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-actions button {
    padding: 10px 22px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.modal-actions button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.modal-actions button.modal-btn-danger,
.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.modal-actions button.modal-btn-danger:hover,
.btn-danger:hover {
    background-color: rgba(255, 77, 77, 0.15);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
}

.tab-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

.tab-btn {
    background-color: #1a1a2e;
    color: #ddd;
    border: 2px solid #444;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    background-color: #2a2a4e;
    color: var(--gold);
    border-color: var(--gold);
}

.tab-btn.active {
    background-color: var(--gold);
    color: #000;
    border-color: var(--glow);
    box-shadow: 0 0 10px var(--glow);
}

/* Groups the admin panel's tabs visually: Users/Team (admin can edit,
   editor view-only) vs. the shared tabs that editors can fully use too.
   option 3: instead of a divider inside one squeezed row, force a flex-wrap
   line break so each group gets its own centered row - an invisible,
   zero-height spacer rather than a visible rule. */
.tab-group-break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
}

/* option 3: plain inline "(View only)" text next to the label instead of a
   colored pill - matches the sorted/uncluttered look the user asked for.
   Hidden by default - admins have full access everywhere, so this never
   applies to them. Shown via JS on the Users/Team tab buttons only when the
   logged-in user is an editor - see loadAdminPanel() in admin.html. */
.tab-admin-only-badge {
    display: none;
    margin-left: 6px;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.8;
    vertical-align: middle;
    white-space: nowrap;
}


.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}

.info-box ul {
    margin: 0;
    padding-left: 20px;
    color: #ccc;
    line-height: 1.8em;
}

.info-box li {
    margin-bottom: 8px;
}

.info-box strong {
    color: var(--gold);
}

.portal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.portal-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.portal-text {
    margin-top: 15px;
    font-size: 0.9em;
    line-height: 1.6em;
    color: #ccc;
}

.phases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.phase-card {
    background: #1e1e2f;
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    width: 100%;
}

.phase-title {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--glow);
    margin-bottom: 15px;
}

.phase-inner {
    background: #453545;
    border: 2px solid #2d232d;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.05em;
    line-height: 1.8em;
    word-wrap: break-word;
}

.phase-subtitle {
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 10px;
}

.enemy-list {
    margin-bottom: 15px;
    color: #ddd;
}

.npc-count-normal {
    color: #00f2ff;
    font-weight: bold;
}

.npc-count-boss {
    color: #ff4545;
    font-weight: bold;
}

.part-spacer {
    margin-bottom: 25px;
}

.stats-total {
    font-size: 1.3em;
    color: var(--glow);
    margin-bottom: 15px;
    font-weight: bold;
}

.stats-details {
    font-size: 1em;
    color: #ccc;
    line-height: 1.6em;
    background: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid rgba(255, 215, 0, 0.27);
    display: inline-block;
}

.highlight-gold {
    color: var(--gold);
    font-weight: bold;
}

.highlight-blue {
    color: #00f2ff;
    font-weight: bold;
    font-size: 1.1em;
}

details.faq-card {
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid var(--gold);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 10px;
    transition: background 0.3s ease;
}

details.faq-card[open] {
    background: rgba(36, 36, 66, 0.9);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

summary.faq-question {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--gold);
    cursor: pointer;
    padding: 5px;
    outline: none;
    list-style: none;
    display: flex;
    align-items: center;
}

summary.faq-question::-webkit-details-marker {
    display: none;
}

summary.faq-question::before {
    content: "▶";
    font-size: 0.8em;
    margin-right: 10px;
    color: var(--gold);
    transition: transform 0.2s ease;
}

details[open] summary.faq-question::before {
    transform: rotate(90deg);
}

.faq-answer {
    padding: 15px 15px 0 15px;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    margin-top: 10px;
    color: #ececec;
    line-height: 1.6em;
}

.quote-box {
    border-left: 3px solid var(--gold);
    padding-left: 15px;
    margin: 10px 0;
    color: #fff;
    font-style: italic;
    background: rgba(0, 0, 0, 0.2);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 8px 8px 0;
}

.icon-card img {
    width: 100px;
    height: auto;
}

.tab-card {
    flex: 1 1 300px;
    max-width: 400px;
}

.tab-card img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}

.sub-tab-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}

.sub-tab-btn {
    background-color: var(--bg-color);
    color: #aaa;
    border: 1px solid #444;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-tab-btn:hover {
    color: #fff;
    border-color: #888;
}

.sub-tab-btn.active {
    background-color: #2a2a4e;
    color: var(--glow);
    border-color: var(--gold);
}

.tab-content, .sub-tab-content {
    display: none;
}

.tab-content.active, .sub-tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease-in-out;
}

.full-set-card {
    background: rgba(255, 215, 0, 0.1);
    border: 2px dashed var(--gold);
    padding: 15px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

.full-set-card .title {
    font-size: 1.4em;
    color: var(--glow);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.full-set-card .subtitle {
    font-size: 1.2em;
    color: #fff;
}

.display-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.display-card {
    background-color: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 10px;
    width: 280px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: transform 0.2s ease;
}

.display-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.table tr:last-child td {
    border-bottom: none;
}

.text-right {
    text-align: right;
    font-weight: bold;
}

.gradient-text {
    font-weight: bold;
    font-family: sans-serif;
    background: linear-gradient(to bottom, #2d9bff, #00ffcc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px black;
    display: inline-block;
}

.timestamp-container {
    text-align: right;
    margin-bottom: 25px;
    color: #aaa;
    font-size: 0.9em;
}

.time-ago {
    display: block;
    font-weight: bold;
    color: var(--gold);
}

.note-box {
    margin-bottom: 25px;
    padding: 15px;
    border-left: 5px solid var(--playtime-color);
    background: rgba(70, 130, 180, 0.1);
    border-radius: 0 10px 10px 0;
    color: #efefef;
    text-align: center;
    font-style: italic;
    box-shadow: 0 0 8px rgba(70, 130, 180, 0.2);
}

.table-header {
    background: #1a1a2e;
    font-size: 1.3em;
    padding: 15px;
}

.col-header {
    background: #16213e;
    color: #fff;
    padding: 10px;
}

.rank-col {
    width: 20%;
    font-weight: bold;
    font-size: 1.2em;
}

.player-col {
    width: 50%;
    font-size: 1.1em;
    color: #fff;
}

.score-col {
    width: 30%;
    font-weight: bold;
    color: #fff;
}

.table-boss {
    border: 3px solid var(--boss-color);
    box-shadow: 0 0 10px var(--boss-color);
}

.table-boss .table-header {
    color: var(--boss-color);
    text-shadow: 0 0 8px var(--boss-color);
}

.table-boss .col-header {
    border-bottom: 2px solid var(--boss-color);
}

.table-sp {
    border: 3px solid var(--sp-color);
    box-shadow: 0 0 10px var(--sp-color);
}

.table-sp .table-header {
    color: var(--sp-color);
    text-shadow: 0 0 8px var(--sp-color);
}

.table-sp .col-header {
    border-bottom: 2px solid var(--sp-color);
}

.table-playtime {
    border: 3px solid var(--playtime-color);
    box-shadow: 0 0 10px var(--playtime-color);
}

.table-playtime .table-header {
    color: var(--playtime-color);
    text-shadow: 0 0 8px var(--playtime-color);
}

.table-playtime .col-header {
    border-bottom: 2px solid var(--playtime-color);
}

.rank-1 {
    color: #FFD700;
}

.rank-2 {
    color: #C0C0C0;
}

.rank-3 {
    color: #CD7F32;
}

.toc-link {
    display: block;
    margin-bottom: 8px;
}

.rank-name {
    font-weight: bold;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin: 30px 0;
}

.reward-card {
    flex: 1 1 250px;
    max-width: 300px;
    background-color: #1a1a2e;
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 246, 69, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.reward-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 246, 69, 0.4);
}

.reward-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.top-cards-container {
    display: grid;
    grid-template-columns: 300px 300px;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

.top-card {
    background: rgba(26, 26, 46, 0.6);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: transform 0.2s;
}

.top-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.card-starter {
    grid-column: 1;
    grid-row: 1;
}

.card-chest {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.card-gift {
    grid-column: 1;
    grid-row: 2;
}

.top-card-title {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--glow);
}

.top-card-img {
    margin: 15px 0;
}

.top-card-img img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.top-card-subtitle {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 10px;
}

.top-card-info {
    font-size: 0.85em;
    color: #fff;
    text-align: left;
    background: var(--price-bg);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 215, 0, 0.27);
    margin-bottom: 15px;
    line-height: 1.6em;
}

.price-tag {
    background: var(--price-bg);
    border: 1px solid var(--gold);
    padding: 8px;
    border-radius: 5px;
    color: var(--gold);
    font-weight: bold;
    margin-bottom: 5px;
}

.price-tag-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.price-strike {
    font-size: 0.85em;
    text-decoration: line-through;
    opacity: 0.7;
    font-weight: normal;
    margin-left: 5px;
}

.gamepass-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.gamepass-card {
    flex: 1 1 200px;
    background: var(--card-bg);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
}

.gamepass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 10px rgba(255, 246, 69, 0.3);
}

.gamepass-title {
    font-weight: bold;
    color: var(--glow);
    font-size: 1.1em;
}

.gamepass-desc {
    font-size: 0.85em;
    margin: 10px 0;
    color: #ccc;
    min-height: 32px;
}

.potions-box {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

.potions-info {
    font-size: 1.1em;
    color: var(--glow);
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.4em;
}

.potions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.potion-item {
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 215, 0, 0.27);
    border-radius: 5px;
    transition: background 0.2s;
}

.potion-item:hover {
    background: var(--box-hover);
}

.potions-pricing {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.pricing-btn {
    background: var(--card-bg);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: default;
}

.sp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.sp-card {
    flex: 1 1 150px;
    background: var(--card-bg);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s;
}

.sp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 10px rgba(255, 246, 69, 0.3);
}

.sp-amount {
    font-size: 1.2em;
    color: #fff;
    margin-bottom: 15px;
    font-weight: bold;
}

.setting-card {
    flex: 1 1 280px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.setting-card img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

.overview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

.overview-card {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    padding: 25px;
    border-radius: 15px;
    background: rgba(20, 20, 20, 0.6);
    text-align: left;
    color: #efefef;
    transition: transform 0.2s;
}

.overview-card:hover {
    transform: translateY(-3px);
}

.sp-card-title {
    color: var(--gold);
    font-size: 1.3em;
    text-shadow: 0 0 8px var(--glow);
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.sp-card hr {
    border: 0;
    border-top: 1.5px solid rgba(255, 215, 0, 0.3);
    margin: 15px 0;
}

.friend-card {
    border: 3px solid var(--blue-accent);
    box-shadow: 0 0 12px rgba(70, 130, 180, 0.3);
}

.friend-card-title {
    color: var(--blue-accent);
    font-size: 1.3em;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(70, 130, 180, 0.5);
}

.friend-card hr {
    border: 0;
    border-top: 1.5px solid rgba(70, 130, 180, 0.3);
    margin: 15px 0;
}

.stat-name {
    font-weight: bold;
    color: #fff;
}

.note-label {
    color: var(--gold);
    font-weight: bold;
    font-style: normal;
}

.note-highlight {
    color: #fff;
    font-weight: bold;
}

.event-table {
    width: 100%;
    max-width: 900px;
    margin: 2em auto;
    border-collapse: collapse;
    border: 3px solid var(--glow);
    box-shadow: 0 0 15px rgba(255, 246, 69, 0.3);
    background-color: #12141a;
    text-align: center;
}

.event-table th {
    background: var(--th-bg);
    color: var(--glow);
    padding: 15px;
    text-shadow: 0 0 6px var(--glow);
    font-size: 1.2em;
    border-bottom: 2px solid var(--gold);
}

.event-table td {
    padding: 15px;
    border-bottom: 1px solid #333;
    vertical-align: middle;
}

.event-table tr:last-child td {
    border-bottom: none;
}

.col-name {
    background: rgba(26, 26, 46, 0.8);
    color: #fff;
    font-weight: bold;
    width: 30%;
    font-size: 1.1em;
    border-right: 1px solid #333;
}

.col-desc {
    color: #ececec;
    font-size: 1.05em;
}

.desc-left {
    text-align: left;
    line-height: 1.6;
}

.desc-italic {
    font-style: italic;
    color: #ccc;
    margin-bottom: 15px;
    display: block;
}

.desc-highlight {
    color: var(--gold);
    font-weight: bold;
}

#map {
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color);
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--container-bg);
    color: var(--text-main);
    border: 1px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.leaflet-popup-content {
    margin: 15px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.leaflet-popup-content h3 {
    color: var(--gold);
    margin: 0 0 10px 0;
    font-size: 1.3em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.leaflet-popup-content p {
    margin: 0 0 10px 0;
}

.leaflet-popup-content a {
    color: var(--glow);
    text-decoration: none;
    font-weight: bold;
}

.leaflet-popup-content a:hover {
    text-decoration: underline;
}

.leaflet-popup-close-button {
    color: var(--text-main) !important;
}

.leaflet-control-layers {
    background-color: var(--container-bg) !important;
    border: 2px solid var(--gold) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
}

.leaflet-control-layers-expanded {
    padding: 10px !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2) !important;
}

.leaflet-control-layers-list {
    max-height: 70vh;
    overflow-y: auto;
}

.custom-layer-control {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-main);
    pointer-events: auto;
}

.menu-toggle-btn {
    background-color: var(--container-bg);
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    display: none;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    margin-bottom: 8px;
    text-align: center;
    float: right;
}

.layers-wrapper {
    background-color: var(--container-bg);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 10px;
    max-height: 70vh;
    overflow-y: auto;
    width: 260px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    clear: both;
}

.layer-header {
    font-weight: bold;
    color: var(--gold);
    padding: 8px 5px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layer-header:hover {
    background-color: var(--box-hover);
}

.layer-content {
    padding: 5px 0 5px 15px;
}

.layer-item {
    display: flex;
    align-items: flex-start;
    margin: 5px 0;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.4;
}

.layer-item input {
    margin-right: 8px;
    margin-top: 3px;
    accent-color: var(--gold);
    flex-shrink: 0;
}

.layer-toggle-all-btn {
    margin: 10px 8px 4px 8px;
    padding: 7px 10px;
    text-align: center;
    font-size: 0.85em;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: var(--gold);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.06);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.layer-toggle-all-btn:hover {
    background: rgba(255, 215, 0, 0.14);
    border-color: var(--gold);
}

.layers-wrapper::-webkit-scrollbar {
    width: 6px;
}

.layers-wrapper::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

.welcome-text {
    font-size: 1.2em;
    margin-top: 5px;
    color: var(--text-main);
    opacity: 0.9;
    font-style: italic;
    text-align: center;
}

.top-divider {
    border: none;
    height: 2px;
    background: var(--gold);
    margin: 1.5em auto;
    width: 100%;
}

.top-links-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin-bottom: 0.5em;
}

.top-link {
    font-size: 1.2em;
    font-weight: 800;
    text-decoration: none;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    transition: all 0.3s;
    flex-grow: 1;
}

.top-link:hover {
    text-shadow: 0 0 15px var(--gold);
    transform: scale(1.05);
}

.vertical-divider {
    width: 1px;
    height: 24px;
    background-color: var(--gold);
    opacity: 0.7;
}

.homepage-section-title {
    font-size: 1.4em;
    font-weight: 800;
    margin: 35px 0 20px 0;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.homepage-nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.homepage-nav-box {
    background-color: transparent;
    color: var(--gold);
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    transition: all 0.2s ease-in-out;
    min-width: 100px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

.homepage-nav-box:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2);
    transform: translateY(-3px);
}

/* ===================== Shared Responsive Rules ===================== */
@media (max-width: 768px) {
    .sp-info-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .badge-icon {
        width: 70px;
    }
    .phases-grid {
        grid-template-columns: 1fr;
    }
    .overview-card {
        min-width: 100%;
    }
    .menu-toggle-btn {
        display: block;
    }
    .layers-wrapper {
        display: none;
        width: 85vw;
        max-width: none;
    }
    .top-links-container {
        flex-direction: column;
        gap: 15px;
    }
    .vertical-divider {
        width: 50%;
        height: 1px;
    }
}

@media (max-width: 680px) {
    .top-cards-container {
        grid-template-columns: minmax(auto, 300px);
    }
    .card-starter, .card-chest, .card-gift {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ===================== Animations ===================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); }
}


/* =================================================================
   Page-Specific Overrides
   ================================================================= */

/* ---- Htmls/Areas/Cursed_Kingdom/spartan.html ---- */
body.page-spartan .badge {
    display: inline-block;
    background-color: #9d4edd;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}


/* ---- Htmls/Areas/Grassland/ashgor.html ---- */
body.page-ashgor .badge {
    display: inline-block;
    background-color: #ff3333;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}


/* ---- Htmls/Areas/Grassland/minotaur.html ---- */
body.page-minotaur .badge {
    display: inline-block;
    background-color: #9d4edd;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}


/* ---- Htmls/Areas/crown-of-sand.html ---- */
body.page-crown-of-sand .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/Areas/cursed-kingdom.html ---- */
body.page-cursed-kingdom .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/Areas/fairyland.html ---- */
body.page-fairyland .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/Areas/grassland.html ---- */
body.page-grassland .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/Areas/heaven.html ---- */
body.page-heaven .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/Areas/molten-peaks.html ---- */
body.page-molten-peaks .portal-req .amount {
    color: var(--danger);
}

body.page-molten-peaks .mob-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    margin: 10px 0;
}


/* ---- Htmls/admin.html ---- */
body.page-admin input[type="text"], body.page-admin select, body.page-admin textarea {
    padding: 12px;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    font-family: inherit;
}

body.page-admin button {
    padding: 10px 22px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

body.page-admin button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

body.page-admin .remove-role-btn {
    padding: 6px 14px;
    font-size: 0.85em;
    color: var(--danger);
    border-color: var(--danger);
}

body.page-admin .remove-role-btn:hover {
    background-color: rgba(255, 77, 77, 0.15);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
}

.user-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    border-radius: 5px;
}

.user-search-item {
    padding: 8px 12px;
    cursor: pointer;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.user-search-item:hover {
    background-color: var(--box-hover);
}

.user-search-item .user-search-id {
    color: #999;
    font-size: 0.85em;
    flex-shrink: 0;
}

.user-search-empty {
    padding: 8px 12px;
    color: #999;
    font-size: 0.9em;
}

@media (max-width: 600px) {
    body.page-admin .table thead {
        display: none;
    }
    body.page-admin .table, body.page-admin .table tbody, body.page-admin .table tr, body.page-admin .table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    body.page-admin .table tr {
        border: none;
        margin-bottom: 10px;
    }
    body.page-admin .table td {
        text-align: center;
        border: 1px solid #333;
        padding: 10px;
    }
    body.page-admin .table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8em;
        color: var(--glow);
        margin-bottom: 4px;
        font-weight: bold;
    }
}


/* ---- Htmls/areas.html ---- */
body.page-areas .area-image {
    max-width: 180px;
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold);
    display: block;
    margin: 0 auto;
}


/* ---- Htmls/auto-farm.html ---- */
body.page-auto-farm .page-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}


/* ---- Htmls/badges.html ---- */
body.page-badges * {
    box-sizing: border-box;
}

body.page-badges .page-container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-badges .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 10px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-badges table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    border: 3px solid var(--glow);
    box-shadow: 0 0 8px var(--glow);
    background-color: #12141a;
}

body.page-badges th {
    background: #1a1a2e;
    color: var(--glow);
    padding: 12px;
    text-shadow: 0 0 6px var(--glow);
    border: 1px solid #444;
    font-size: 1.1em;
    text-align: left;
}

body.page-badges th:nth-child(1), body.page-badges th:nth-child(2) {
    text-align: center;
}

body.page-badges td {
    padding: 15px 12px;
    border: 1px solid #333;
    transition: background-color 0.2s;
    vertical-align: middle;
}

body.page-badges tr:hover td {
    background-color: var(--box-hover);
}

@media (max-width: 600px) {
    body.page-badges {
        padding: 15px 10px;
    }
    body.page-badges .page-container {
        padding: 15px;
    }
    body.page-badges .page-title {
        font-size: 2em;
    }
    body.page-badges th, body.page-badges td {
        padding: 10px 8px;
        font-size: 0.9em;
    }
}

/* ---- Htmls/boss-tracker.html ---- */
body.page-boss-tracker .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-boss-tracker .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-boss-tracker .icon-card {
    flex: 0 1 220px;
}


/* ---- Htmls/changelog.html ---- */
body.page-changelog .page-container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-changelog .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 10px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-changelog .section-header {
    color: var(--gold);
    text-shadow: 0 0 8px var(--glow);
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 1.8em;
}

body.page-changelog table {
    width: 100%;
    border-collapse: collapse;
    border: 3px solid var(--glow);
    box-shadow: 0 0 8px var(--glow);
    background-color: #12141a;
    margin-bottom: 30px;
}

body.page-changelog th {
    background: #1a1a2e;
    color: var(--glow);
    padding: 12px;
    text-shadow: 0 0 6px var(--glow);
    border: 1px solid #444;
    font-size: 1.2em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.page-changelog td {
    padding: 15px 20px;
    border: 1px solid #333;
    transition: background-color 0.2s;
    vertical-align: middle;
    overflow-wrap: break-word;
}

body.page-changelog tr:hover td {
    background-color: var(--box-hover);
}

body.page-changelog ul {
    margin: 0;
    padding-left: 20px;
}

body.page-changelog li {
    margin-bottom: 5px;
}

body.page-changelog .table-wrapper {
    overflow-x: auto;
    width: 100%;
}

body.page-changelog details {
    background-color: #12141a;
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 30px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

body.page-changelog summary {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--gold);
    cursor: pointer;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    padding: 10px 0;
    outline: none;
}

body.page-changelog summary:hover {
    color: #fff;
}

@media (max-width: 600px) {
    body.page-changelog {
        padding: 20px 10px;
    }
    body.page-changelog .page-container {
        padding: 20px 15px;
    }
    body.page-changelog td {
        padding: 10px 12px;
    }
}

/* ---- Htmls/chat-tags.html ---- */
body.page-chat-tags .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-chat-tags .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-chat-tags .info-box {
    background: rgba(26, 26, 46, 0.6);
    border: 2px dashed var(--gold);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    margin: 20px 0;
}

body.page-chat-tags .section-header {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
    margin-top: 40px;
}


/* ---- Htmls/codes.html ---- */
body.page-codes * {
    box-sizing: border-box;
}

body.page-codes .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-codes .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 15px 0;
}

body.page-codes .section-header {
    font-size: 2em;
    font-weight: bold;
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

body.page-codes .description {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #ddd;
}


/* ---- Htmls/cookies.html ---- */
body.page-cookies h1, body.page-cookies h2, body.page-cookies h3 {
    color: var(--gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

body.page-cookies h1 {
    font-size: 2.5em;
    text-align: center;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

body.page-cookies h2 {
    margin-top: 40px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 5px;
}

body.page-cookies h3 {
    margin-top: 25px;
    color: var(--glow);
}

body.page-cookies a {
    color: var(--gold);
    text-decoration: none;
}

body.page-cookies a:hover {
    color: var(--glow);
    text-decoration: underline;
}

body.page-cookies ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

body.page-cookies li {
    margin-bottom: 8px;
}


/* ---- Htmls/dashboard.html ---- */
body.page-dashboard label {
    display: block;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 1.1em;
}

body.page-dashboard input[type="number"], body.page-dashboard input[type="text"], body.page-dashboard select {
    width: 100%;
    padding: 12px;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

body.page-dashboard button, body.page-dashboard .back-btn, body.page-dashboard .back-button {
    padding: 12px 25px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}

body.page-dashboard button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

body.page-dashboard button:disabled {
    border-color: #555;
    color: #555;
    cursor: not-allowed;
    box-shadow: none;
}

body.page-dashboard .back-button {
    padding: 8px 12px;
    font-size: 0.9em;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    body.page-dashboard {
        padding: 15px 10px;
    }
    body.page-dashboard .page-container {
        padding: 15px;
    }
    body.page-dashboard .table thead {
        display: none;
    }
    body.page-dashboard .table, body.page-dashboard .table tbody, body.page-dashboard .table tr, body.page-dashboard .table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    body.page-dashboard .table tr {
        border: none;
    }
    body.page-dashboard .table td {
        text-align: center;
        border: 1px solid #333;
        padding: 10px;
    }
    body.page-dashboard .table td + td {
        border-top: none;
    }
    body.page-dashboard .table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.8em;
        color: var(--glow);
        margin-bottom: 4px;
        font-weight: bold;
    }
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.item-card {
    background-color: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

.item-card-header {
    text-align: center;
    font-weight: bold;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.item-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-image {
    display: block;
    margin: 0 auto 8px auto;
    max-width: 90px;
    max-height: 90px;
}

.slot-item-name {
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 4px;
}

.mini-label {
    color: var(--glow);
    font-size: 0.85em;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 2px;
}

.perk-row {
    display: flex;
    gap: 8px;
}

body.page-dashboard .perk-row select {
    width: auto;
    min-width: 0;
    flex: 1;
    padding: 6px 4px;
    font-size: 0.85em;
}

@media (max-width: 600px) {
    .perk-row {
        flex-direction: column;
    }
}


/* ---- Htmls/dungeons.html ---- */
body.page-dungeons * {
    box-sizing: border-box;
}

body.page-dungeons .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
    text-align: center;
}

body.page-dungeons .back-button {
    display: inline-block;
    background-color: transparent;
    color: var(--gold);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 800;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    position: absolute;
    top: 40px;
    left: 40px;
}

body.page-dungeons .page-title {
    font-size: 3em;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 40px 0 25px 0;
    word-wrap: break-word;
}

body.page-dungeons .section-header {
    font-size: 2em;
    font-weight: bold;
    color: var(--gold);
    text-shadow: 0 0 5px var(--glow);
    margin-bottom: 25px;
    margin-top: 40px;
    word-wrap: break-word;
}

body.page-dungeons .info-box {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid var(--gold);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
}

body.page-dungeons .portal-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #333;
}

@media (max-width: 600px) {
    body.page-dungeons {
        padding: 15px 10px;
    }
    body.page-dungeons .page-container {
        padding: 60px 15px 20px 15px;
    }
    body.page-dungeons .back-button {
        top: 15px;
        left: 15px;
        padding: 8px 12px;
        font-size: 0.9em;
    }
    body.page-dungeons .page-title {
        font-size: 2em;
        margin-top: 10px;
    }
    body.page-dungeons .section-header {
        font-size: 1.5em;
    }
    body.page-dungeons .tab-btn {
        font-size: 1em;
        padding: 8px 15px;
    }
}

/* ---- Htmls/faq.html ---- */
body.page-faq .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-faq .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
}

body.page-faq textarea {
    padding: 10px 12px;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 12px;
    font-family: inherit;
    resize: vertical;
}

body.page-faq button {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

body.page-faq button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

body.page-faq .checkbox-group {
    margin-bottom: 14px;
    color: #ececec;
}

body.page-faq .faq-asked-by {
    margin: 10px 0 0;
    color: #aaa;
    font-size: 0.9em;
    font-style: italic;
}


/* ---- Htmls/index-page.html ---- */
body.page-index-page .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-index-page .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-index-page .card-title {
    color: var(--text-main);
    margin-top: 15px;
    font-size: 1.1em;
}

body.page-index-page .function-title {
    font-weight: bold;
    font-size: 1.3em;
}


/* ---- Htmls/items.html ---- */
body.page-items {
    --card-bg: #12141a;
}
body.page-items .page-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-items .back-button:hover {
    background-color: var(--box-hover);
    transform: translateY(-2px);
}

body.page-items .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-items .table {
    width: 100%;
    border-collapse: collapse;
}

body.page-items .table th {
    background-color: var(--th-bg);
    color: var(--glow);
    padding: 12px;
    font-size: 1.1em;
    border-bottom: 2px solid var(--gold);
}

body.page-items .table td {
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    font-size: 0.95em;
}

body.page-items .wiki-link {
    color: var(--glow);
    text-decoration: none;
    border-bottom: 1px dashed var(--glow);
    transition: color 0.2s;
}

body.page-items .info-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 20px;
    background: rgba(26, 26, 46, 0.6);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--gold);
}


/* ---- Htmls/leaderboards.html ---- */
body.page-leaderboards .page-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-leaderboards .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 5px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-leaderboards .table-wrapper {
    margin: 2em auto;
    overflow-x: auto;
}

body.page-leaderboards table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background-color: rgba(26, 26, 46, 0.8);
}

body.page-leaderboards th, body.page-leaderboards td {
    padding: 12px;
}


/* ---- Htmls/privacypolicy.html ---- */
body.page-privacypolicy h1, body.page-privacypolicy h2, body.page-privacypolicy h3 {
    color: var(--gold);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

body.page-privacypolicy h1 {
    font-size: 2.5em;
    text-align: center;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

body.page-privacypolicy h2 {
    margin-top: 40px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 5px;
}

body.page-privacypolicy h3 {
    margin-top: 25px;
    color: var(--glow);
}

body.page-privacypolicy a {
    color: var(--gold);
    text-decoration: none;
}

body.page-privacypolicy a:hover {
    color: var(--glow);
    text-decoration: underline;
}

body.page-privacypolicy table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: rgba(26, 26, 46, 0.4);
}

body.page-privacypolicy th, body.page-privacypolicy td {
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 12px;
    text-align: left;
}

body.page-privacypolicy th {
    background-color: rgba(255, 215, 0, 0.1);
    color: var(--gold);
}

body.page-privacypolicy ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

body.page-privacypolicy li {
    margin-bottom: 8px;
}


/* ---- Htmls/ranks.html ---- */
body.page-ranks * {
    box-sizing: border-box;
}

body.page-ranks .page-container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-ranks .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 10px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-ranks table {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
    border: 3px solid var(--glow);
    box-shadow: 0 0 8px var(--glow);
    background-color: #12141a;
}

body.page-ranks th {
    background: #1a1a2e;
    color: var(--glow);
    padding: 12px;
    text-shadow: 0 0 6px var(--glow);
    border: 1px solid #444;
    font-size: 1.1em;
}

body.page-ranks td {
    padding: 12px;
    border: 1px solid #333;
    text-align: center;
    transition: background-color 0.2s;
}

body.page-ranks tr:hover td {
    background-color: var(--box-hover);
}

body.page-ranks .wiki-link {
    color: var(--glow);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed var(--glow);
}

@media (max-width: 600px) {
    body.page-ranks {
        padding: 15px 10px;
    }
    body.page-ranks .page-container {
        padding: 15px;
    }
    body.page-ranks .page-title {
        font-size: 2em;
    }
    body.page-ranks th, body.page-ranks td {
        padding: 10px 8px;
        font-size: 0.9em;
    }
}

/* ---- Htmls/rewards.html ---- */
body.page-rewards .page-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-rewards .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-rewards .section-title {
    font-size: 1.8em;
    color: var(--glow);
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 15px;
    text-shadow: 0 0 8px rgba(255, 246, 69, 0.3);
}

body.page-rewards .description {
    font-size: 1.1em;
    color: #ddd;
    margin-bottom: 20px;
}

body.page-rewards .card-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
}

body.page-rewards .card-subtitle {
    color: #aaa;
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}


/* ---- Htmls/robux-shop.html ---- */
body.page-robux-shop .page-container {
    max-width: 950px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
    text-align: center;
}

body.page-robux-shop .back-button {
    display: inline-block;
    background-color: transparent;
    color: var(--gold);
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 800;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    position: absolute;
    top: 40px;
    left: 40px;
}

body.page-robux-shop .page-title {
    font-size: 3em;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 40px 0 25px 0;
}

body.page-robux-shop .section-header {
    font-size: 2em;
    font-weight: bold;
    color: var(--gold);
    text-shadow: 0 0 5px var(--glow);
    margin-bottom: 25px;
    margin-top: 40px;
}


/* ---- Htmls/servers.html ---- */
body.page-servers select, body.page-servers input[type="text"] {
    padding: 10px 12px;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

body.page-servers button {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}

body.page-servers button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.servers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 20px 0 25px 0;
    padding: 15px 20px;
    background-color: var(--input-bg);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group-inline label {
    color: var(--gold);
    font-weight: bold;
    font-size: 0.95em;
}

.server-status {
    color: #aaa;
    font-size: 0.9em;
    margin-left: auto;
}

.server-card {
    text-align: center;
}

.server-avatars {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 40px;
    margin-bottom: 8px;
}

.server-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    object-fit: cover;
}

.server-no-avatars {
    color: #969696;
    font-size: 0.85em;
    align-self: center;
}

.team-card {
    text-align: center;
}

.team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
    display: block;
    margin: 0 auto 10px auto;
}

.team-role-badge {
    display: inline-block;
    background-color: rgba(255, 215, 0, 0.15);
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

body.page-team .info-text {
    text-align: center;
}

.server-stat {
    color: #fff;
    font-weight: bold;
}

.server-stat.server-full {
    color: #ED2828;
}

.server-join-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s;
}

.server-join-btn:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.search-row {
    display: flex;
    gap: 10px;
}

.search-row input {
    flex: 1;
}

.player-search-error {
    color: #ED2828;
}

.party-card-mine {
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.35);
}

.party-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 8px;
}

.party-status-pill.running {
    color: var(--gold);
    border: 1px solid var(--gold);
}

.party-status-pill.ended {
    color: #969696;
    border: 1px solid #969696;
}

.wiki-rank-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
}

.wiki-rank-pill.admin {
    color: var(--gold);
    border: 1px solid var(--gold);
}

.wiki-rank-pill.editor {
    color: #6fb7ff;
    border: 1px solid #6fb7ff;
}

.wiki-rank-pill.player {
    color: #969696;
    border: 1px solid #969696;
}

.wiki-rank-pill.wiki_owner {
    color: #c084fc;
    border: 1px solid #c084fc;
}

.perm-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #555;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.perm-checkbox:checked {
    background: #6fb7ff;
    border-color: #6fb7ff;
}

.perm-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: 2px solid #111;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.perm-checkbox:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.perm-checkbox:not(:disabled):hover {
    border-color: #6fb7ff;
}

.request-badge {
    display: inline-block;
    background-color: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.75em;
    margin-left: 6px;
    font-weight: bold;
}

.party-request-row {
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 10px;
    text-align: left;
}

@media (max-width: 600px) {
    .servers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .server-status {
        margin-left: 0;
    }
    .search-row {
        flex-direction: column;
    }
}


/* ---- Htmls/settings.html ---- */
body.page-settings .page-container {
    max-width: 1050px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-settings .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-settings .feature-card {
    background: var(--card-bg);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 1.2em;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 246, 69, 0.2);
    transition: transform 0.2s;
}

body.page-settings .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--glow);
}

body.page-settings .card-title {
    color: var(--text-main);
    margin-top: 15px;
    font-size: 1.2em;
}

body.page-settings .card-subtitle {
    color: #ccc;
    font-size: 0.9em;
    margin-top: 5px;
    line-height: 1.4;
}


/* ---- Htmls/stats.html ---- */
body.page-stats * {
    box-sizing: border-box;
}

body.page-stats .page-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-stats .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 15px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.page-stats .description {
    font-size: 1.1em;
    margin-bottom: 30px;
    text-align: center;
    color: #efefef;
}

body.page-stats .section-title {
    font-size: 1.8em;
    color: var(--glow);
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 20px;
    text-shadow: 0 0 8px rgba(255, 246, 69, 0.3);
}

body.page-stats .sp-card {
    border: 3px solid var(--gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

body.page-stats .table-wrapper {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border: 1px solid #444;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(30, 30, 30, 0.8);
    margin-bottom: 30px;
}

body.page-stats table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    text-align: left;
    color: #efefef;
}

body.page-stats th {
    background: #252525;
    color: var(--gold);
    padding: 15px;
    border-bottom: 2px solid #444;
    font-size: 1.1em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

body.page-stats td {
    padding: 12px 15px;
    border-bottom: 1px solid #444;
}

body.page-stats tr:last-child td {
    border-bottom: none;
}

body.page-stats tr:hover td {
    background-color: var(--box-hover);
}

body.page-stats .note-box {
    margin-top: 20px;
    padding: 15px 20px;
    border-left: 6px solid var(--gold);
    background: rgba(255, 215, 0, 0.05);
    border-radius: 0 10px 10px 0;
    color: #ccc;
    font-style: italic;
}

@media (max-width: 600px) {
    body.page-stats {
        padding: 15px 10px;
    }
    body.page-stats .page-container {
        padding: 20px 15px;
    }
    body.page-stats .page-title {
        font-size: 2em;
    }
}

/* ---- Htmls/suggestions.html ---- */
body.page-suggestions select,
body.page-suggestions input[type="text"],
body.page-suggestions textarea {
    padding: 10px 12px;
    background-color: var(--container-bg);
    border: 1px solid var(--gold);
    color: white;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 12px;
    font-family: inherit;
}

body.page-suggestions button {
    padding: 10px 20px;
    background-color: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

body.page-suggestions button:hover {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

body.page-suggestions .btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

body.page-suggestions .btn-danger:hover {
    background-color: rgba(255, 77, 77, 0.15);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.4);
}

body.page-suggestions .vote-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

body.page-suggestions .vote-btn:disabled:hover {
    background-color: transparent;
    box-shadow: none;
}

.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 700px;
    margin: 20px auto 0;
}

.suggestion-card .item-card-header {
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 6px;
}

.suggestion-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.suggestion-card-bottom {
    text-align: left;
}

.suggestion-description {
    color: #ccc;
    margin: 0;
    white-space: pre-wrap;
}

.suggestion-author {
    color: #969696;
    font-size: 0.85em;
    margin: 8px 0 0;
}

.suggestion-admin-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.suggestion-admin-controls select {
    width: auto;
    margin-bottom: 0;
    padding: 6px 10px;
}

.suggestion-admin-controls button {
    padding: 6px 14px;
}

.vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    min-width: 50px;
}

.vote-btn .vote-arrow {
    font-size: 0.9em;
    line-height: 1;
}

.vote-btn .vote-count {
    font-size: 1.1em;
    font-weight: bold;
}

.vote-btn.voted {
    background-color: rgba(255, 215, 0, 0.18);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

.suggestion-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
}

.suggestion-status-badge.status-open {
    color: var(--gold);
    border: 1px solid var(--gold);
}

.suggestion-status-badge.status-planned {
    color: #6fb7ff;
    border: 1px solid #6fb7ff;
}

.suggestion-status-badge.status-implemented {
    color: #4dd97a;
    border: 1px solid #4dd97a;
}

.suggestion-status-badge.status-rejected {
    color: var(--danger);
    border: 1px solid var(--danger);
}

@media (max-width: 600px) {
    .suggestion-card-top {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ---- Htmls/world-events.html ---- */
body.page-world-events .page-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-bg);
    padding: 40px;
    border-radius: 12px;
    border: 3px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 10px rgba(255, 215, 0, 0.05);
    position: relative;
}

body.page-world-events .page-title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    margin: 0 0 30px 0;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 10px;
}

body.page-world-events .tab-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}

body.page-world-events .tab-btn {
    background-color: #1a1a2e;
    color: #ddd;
    border: 2px solid #444;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.page-world-events .tab-content {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

body.page-world-events .tab-content.active {
    display: block;
}


/* ---- Htmls/world-map.html ---- */
body.page-world-map {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

body.page-world-map * {
    box-sizing: border-box;
}

body.page-world-map .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background-color: var(--container-bg);
    color: var(--gold);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 800;
    border: 2px solid var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2), inset 0 0 5px rgba(255, 215, 0, 0.1);
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
}

@media (max-width: 600px) {
    body.page-world-map .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 0.9em;
    }
}

/* world-map's back-button is absolutely positioned in the same top-left corner
   the default .lang-switcher uses elsewhere, so push the switcher below it here */
body.page-world-map .lang-switcher {
    top: 72px;
    left: 20px;
}

@media (max-width: 600px) {
    body.page-world-map .lang-switcher {
        top: 56px;
        left: 10px;
    }
}

/* ---- index.html ---- */
/* Modernized homepage: same neon gold/glow palette, updated typography,
   glassmorphism card, ambient glow blobs and icon nav tiles. Scoped to
   body.page-index so no other page is affected. */

body.page-index {
    font-family: 'Inter', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.index-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.index-ambient-blob {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.22;
    animation: indexBlobFloat 16s ease-in-out infinite;
}

.index-ambient-blob-gold {
    top: -120px;
    left: -100px;
    background: var(--gold);
}

.index-ambient-blob-cyan {
    bottom: -140px;
    right: -100px;
    background: #00e5ff;
    animation-delay: -8s;
}

@keyframes indexBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, 30px) scale(1.12); }
}

body.page-index .homepage {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(26, 28, 36, 0.92) 0%, rgba(13, 14, 20, 0.95) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 28px;
    box-shadow:
        0 25px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(255, 215, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

body.page-index .homepage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--glow), #00e5ff, var(--gold));
    opacity: 0.8;
}

.index-eyebrow {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--glow);
    opacity: 0.85;
    margin-bottom: 6px;
}

body.page-index .homepage-title {
    font-family: 'Outfit', "Segoe UI", sans-serif;
    font-size: 3.2em;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #ffe98a 0%, var(--gold) 45%, var(--glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    text-shadow: none;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.35));
    animation: indexTitleGlow 4s ease-in-out infinite;
}

@keyframes indexTitleGlow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.3)); }
    50% { filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.55)); }
}

.index-hero {
    text-align: center;
}

body.page-index .welcome-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    opacity: 0.75;
}

.index-hero-actions {
    margin-top: 22px;
}

.index-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1em;
    box-shadow: 0 8px 24px -8px rgba(88, 101, 242, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.index-discord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(88, 101, 242, 0.75), 0 0 20px rgba(88, 101, 242, 0.4);
    color: #fff;
}

.index-disclaimer {
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78em;
    color: #9a9a9a;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

body.page-index .top-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.5) 50%, transparent 100%);
    border: none;
    margin: 1.4em auto;
}

body.page-index .top-links-container {
    gap: 10px;
}

body.page-index .top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'Outfit', sans-serif;
    font-size: 1em;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.25);
    text-shadow: none;
    transition: all 0.25s ease;
}

body.page-index .top-link:hover {
    background: rgba(255, 215, 0, 0.14);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px) scale(1.02);
    text-shadow: none;
}

.top-link-icon {
    font-size: 1.05em;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

body.page-index .vertical-divider {
    opacity: 0.3;
}

body.page-index .homepage-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: none;
    margin: 38px 0 18px 0;
    position: relative;
    padding-bottom: 14px;
}

body.page-index .homepage-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--glow));
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

body.page-index .homepage-nav-container {
    gap: 14px;
}

body.page-index .homepage-nav-box.wiki-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 128px;
    padding: 18px 20px;
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.07) 0%, rgba(255, 215, 0, 0.02) 100%);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    text-shadow: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.98em;
    transition: all 0.25s ease;
}

body.page-index .homepage-nav-box.wiki-link:hover {
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.04) 100%);
    border-color: var(--gold);
    box-shadow: 0 10px 28px rgba(255, 215, 0, 0.22), inset 0 0 0 1px rgba(255, 215, 0, 0.15);
    transform: translateY(-4px);
    text-shadow: none;
}

.nav-icon {
    font-size: 1.8em;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
}

.nav-label {
    font-size: 0.92em;
}

/* Hidden on desktop - only used as the mobile accordion toggle indicator
   for .homepage-section-title (see the (max-width: 600px) block below). */
.accordion-chevron {
    display: none;
}

/* Hidden on desktop - mobile-only hint shown above the accordion sections
   explaining that a category can be tapped to expand/collapse it (see the
   (max-width: 600px) block below). */
.homepage-accordion-hint {
    display: none;
}

.admin-panel-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 14px;
    font-size: 0.72em;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.03);
    color: #999;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

.admin-panel-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.lang-switcher {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 160px;
}

.lang-switcher button {
    padding: 4px 9px;
    font-size: 0.7em;
    font-family: 'Outfit', sans-serif;
    background-color: rgba(255, 255, 255, 0.03);
    color: #888;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: 0.2s;
}

.lang-switcher button:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.lang-switcher button.active {
    color: var(--gold);
    border-color: var(--gold);
    background-color: rgba(255, 215, 0, 0.1);
}

@media (max-width: 600px) {
    body.page-index .homepage-title {
        font-size: 2.1em;
    }
    .index-ambient-blob {
        width: 280px;
        height: 280px;
        filter: blur(70px);
    }

    /* Mobile accordion navigation - sections start collapsed (the matching
       JS in index.html adds .collapsed on load below this breakpoint) and
       expand on tap so the homepage doesn't load as one long scroll.
       Desktop is untouched: .accordion-chevron stays display:none and
       .collapsed has no rule outside this breakpoint. */
    body.page-index .homepage-accordion-hint {
        display: block;
        text-align: center;
        font-size: 0.8em;
        color: #888;
        margin: 0 0 14px 0;
    }
    body.page-index .homepage-section-title {
        cursor: pointer;
        user-select: none;
    }
    body.page-index .accordion-chevron {
        display: inline-block;
        margin-left: 8px;
        font-size: 0.75em;
        color: var(--gold);
        transition: transform 0.2s ease;
    }
    body.page-index .homepage-section-title.collapsed .accordion-chevron {
        transform: rotate(-90deg);
    }
    body.page-index .homepage-nav-container.collapsed {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-ambient-blob,
    body.page-index .homepage-title {
        animation: none !important;
    }
}

/* ---- player.html ---- */
.player-banner {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    background-color: var(--card-bg);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--gold);
    margin-bottom: 20px;
}

.player-username {
    text-align: center;
    color: var(--gold);
    margin: 0 0 10px 0;
    font-size: 1.8em;
}

.player-bio {
    text-align: center;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 25px auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Htmls/player.html - profile like button ---- */
.profile-like-row {
    display: flex;
    justify-content: center;
    margin: 0 0 14px 0;
}

.like-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background-color: transparent;
    border: 2px solid var(--gold);
    border-radius: 20px;
    color: #ccc;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: 0.2s;
}

.like-btn:hover:not(:disabled) {
    background-color: var(--box-hover);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.like-btn .like-heart {
    font-size: 1.2em;
    line-height: 1;
    color: #ccc;
    transition: color 0.2s;
}

.like-btn.liked {
    border-color: var(--danger);
    background-color: rgba(255, 77, 77, 0.15);
    color: #fff;
}

.like-btn.liked .like-heart {
    color: var(--danger);
}

.like-btn:disabled {
    cursor: default;
}

.like-btn:disabled:not(.liked) {
    opacity: 0.55;
}

/* ====================================================================
   Modern Page Shell (Phase 2 rollout)
   Same treatment as index.html: Outfit/Inter typography, ambient glow
   blobs, glass-card container, gradient page titles, pill back-button.
   Scoped to the .modern-page class added on <body> for the main wiki
   pages (those living directly in Htmls/). Mob/area/dungeon/item detail
   pages don't carry this class yet -- that rollout comes later.
   Each page's own body.page-<slug> block above still controls its
   layout (max-width, padding, font-size, table widths, etc.); this
   section only changes decorative properties and both apply together.
   ==================================================================== */

body.modern-page {
    font-family: 'Inter', "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    overflow-x: hidden;
}

body.modern-page::before,
body.modern-page::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
    animation: indexBlobFloat 16s ease-in-out infinite;
}

body.modern-page::before {
    top: -120px;
    left: -100px;
    background: var(--gold);
}

body.modern-page::after {
    bottom: -140px;
    right: -100px;
    background: #00e5ff;
    animation-delay: -8s;
}

body.modern-page .page-container,
body.modern-page .homepage {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(26, 28, 36, 0.92) 0%, rgba(13, 14, 20, 0.95) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 24px;
    box-shadow:
        0 25px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(255, 215, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

body.modern-page .page-container::before,
body.modern-page .homepage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--glow), #00e5ff, var(--gold));
    opacity: 0.8;
}

body.modern-page .page-title,
body.modern-page .homepage-title {
    font-family: 'Outfit', "Segoe UI", sans-serif;
    background: linear-gradient(135deg, #ffe98a 0%, var(--gold) 45%, var(--glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold);
    text-shadow: none;
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.35));
    border-bottom: none;
    position: relative;
    padding-bottom: 18px;
}

body.modern-page .page-title::after,
body.modern-page .homepage-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--glow));
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

body.modern-page .back-button {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.3);
    text-shadow: none;
    box-shadow: none;
}

body.modern-page .back-button:hover {
    background: rgba(255, 215, 0, 0.14);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

/* page-items/page-ranks redeclare .wiki-link with higher specificity, which
   re-asserts a thicker solid border-bottom on the back-button (see the
   shared-components note near .wiki-link above) -- match that edge's color
   to the softer pill border so it doesn't look mismatched here. */
body.page-items.modern-page .back-button.wiki-link,
body.page-ranks.modern-page .back-button.wiki-link {
    border-bottom-color: rgba(255, 215, 0, 0.3);
}

body.modern-page .section-title,
body.modern-page .section-header,
body.modern-page .card-title,
body.modern-page .card-subtitle,
body.modern-page .rank-title,
body.modern-page .info-title,
body.modern-page .area-title,
body.modern-page .mob-title,
body.modern-page .function-title,
body.modern-page .code-title,
body.modern-page .badge-name,
body.modern-page .grid-title,
body.modern-page .status-title,
body.modern-page .player-username,
body.modern-page .warning-title {
    font-family: 'Outfit', sans-serif;
}

body.modern-page .table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

body.modern-page .form-group {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

