/**
 * ============================================================================
 * ELDER SPORES ONLINE - VIEW BUILD PAGE STYLES
 * ============================================================================
 * Styling for the read-only build viewing page
 * 
 * @version 1.0.0
 * @created 2025-12-29
 */

/* =============================================================================
   CSS VARIABLES (inherit from main styles.css)
   ============================================================================= */

:root {
    --view-build-bg: rgba(0, 0, 0, 0.85);
    --view-build-border: #ffd700;
    --view-build-text: #e0e0e0;
    --view-build-text-highlight: #ffd700;
    --view-build-text-muted: #888888;
    --view-build-card-bg: rgba(30, 30, 30, 0.95);
    --view-build-error-bg: rgba(20, 0, 0, 0.95);
}
/* CRITICAL: Force white toolbar background - MUST be early in cascade */
.ql-toolbar.ql-snow,
.ql-toolbar,
#comment-editor .ql-toolbar,
.comment-editor .ql-toolbar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 6px 6px 0 0 !important;
}
/* =============================================================================
   Class-specific skill line colors for view page 
   ============================================================================= */

.view-config-value[data-class="arcanist"] { color: #32cd32; }
.view-config-value[data-class="dragonknight"] { color: #ff8c00; }
.view-config-value[data-class="necromancer"] { color: #c144ff; }
.view-config-value[data-class="nightblade"] { color: #ff000d; }
.view-config-value[data-class="sorcerer"] { color: #3e5eff; }
.view-config-value[data-class="templar"] { color: #ffd700; }
.view-config-value[data-class="warden"] { color: #14efff; }

/* Identity tooltip hover states */
#view-race, #view-class, #view-mundus, #view-curse {
    cursor: help;
    transition: color 0.2s ease;
}
#view-race:hover, #view-class:hover, #view-mundus:hover, #view-curse:hover {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* ===== IDENTITY TOOLTIP BACKGROUNDS ===== */
/* Race backgrounds */
.eso-tooltip.identity-race-argonian { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_argonian.png') center/cover no-repeat; }
.eso-tooltip.identity-race-breton { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_breton.png') center/cover no-repeat; }
.eso-tooltip.identity-race-dark-elf { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_dark_elf.png') center/cover no-repeat; }
.eso-tooltip.identity-race-high-elf { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_high_elf.png') center/cover no-repeat; }
.eso-tooltip.identity-race-imperial { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_imperial.png') center/cover no-repeat; }
.eso-tooltip.identity-race-khajiit { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_khajiit.png') center/cover no-repeat; }
.eso-tooltip.identity-race-nord { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_nord.png') center/cover no-repeat; }
.eso-tooltip.identity-race-orc { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_orc.png') center/cover no-repeat; }
.eso-tooltip.identity-race-redguard { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_redguard.png') center/cover no-repeat; }
.eso-tooltip.identity-race-wood-elf { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/heraldrycrests_race_wood_elf.png') center/cover no-repeat; }

/* Class backgrounds */
.eso-tooltip.identity-class-arcanist { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_arcanist.png') center/contain no-repeat; }
.eso-tooltip.identity-class-dragonknight { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_dragon_knight.png') center/contain no-repeat; }
.eso-tooltip.identity-class-necromancer { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_necromancer.png') center/contain no-repeat; }
.eso-tooltip.identity-class-nightblade { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_nightblade.png') center/contain no-repeat; }
.eso-tooltip.identity-class-sorcerer { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_sorcerer.png') center/contain no-repeat; }
.eso-tooltip.identity-class-templar { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_templar.png') center/contain no-repeat; }
.eso-tooltip.identity-class-warden { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url('/graphics/class_icon_warden.png') center/contain no-repeat; }

/* Curse backgrounds - fit to height, aligned right */
.eso-tooltip.identity-curse-vampire { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.75)), url('/graphics/selector_vampire.png') right center/auto 100% no-repeat; }
.eso-tooltip.identity-curse-werewolf { background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.75)), url('/graphics/selector_werewolf.png') right center/auto 100% no-repeat; }

/* Identity tooltip text shadow for readability over backgrounds */
.eso-tooltip[class*="identity-"] .tooltip-section-value {
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1),
        0 2px 12px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   Consumable quality border colors 
   ============================================================================= */
   
.consumable-quality-0 { border-color: #808080 !important; } /* Trash - Gray */
.consumable-quality-1 { border-color: #FFFFFF !important; } /* Normal - White */
.consumable-quality-2 { border-color: #00FF00 !important; } /* Fine - Green */
.consumable-quality-3 { border-color: #0080FF !important; } /* Superior - Blue */
.consumable-quality-4 { border-color: #A020F0 !important; } /* Epic - Purple */
.consumable-quality-5 { border-color: #FFD700 !important; } /* Legendary - Gold */


/*  =============================================================================
   Gear slot quality colors - view page  
   ============================================================================= */

[class*="slot-"].quality-white { border:2px solid #ffffff !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
[class*="slot-"].quality-green { border:2px solid #1eff00 !important; box-shadow: 0 0 8px rgba(30, 255, 0, 0.6); box-shadow: 0 0 10px rgba(30, 255, 0, 0.4); }
[class*="slot-"].quality-blue { border:2px solid #0070ff !important; box-shadow: 0 0 8px rgba(0, 112, 255, 0.6); box-shadow: 0 0 10px rgba(0, 112, 255, 0.4); }
[class*="slot-"].quality-purple { border:2px solid #a335ee !important; box-shadow: 0 0 8px rgba(163, 53, 238, 0.6); box-shadow: 0 0 10px rgba(163, 53, 238, 0.4); }
[class*="slot-"].quality-gold { border:2px solid #ffd700 !important; box-shadow: 0 0 8px rgba(255, 215, 0, .6); box-shadow: 0 0 10px rgba(255, 215, 0, .4); }
[class*="slot-"].quality-gold[data-is-mythic="true"] { border:2.5px solid #ff8800 !important; box-shadow: 0 0 8px #ff880083;  box-shadow: 0 0 10px #ff8800b4; }
/* =============================================================================
   PAGE BACKGROUND
   ============================================================================= */

body {
    background-image: url('/graphics/ElderSporesBackgroundTile.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #0a0a0a; /* Fallback if image doesn't load */
    display: flex;
    flex-direction: column;
}

.main-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.logo-link {
    z-index: 1000;
}
/* =============================================================================
   LOADING OVERLAY
   ============================================================================= */

.build-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.build-loading-overlay.has-thumbnail {
    background-blend-mode: darken;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: #ffd700;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   ERROR STATE
   ============================================================================= */

.build-error-state {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--view-build-error-bg);
    background-image: url('/graphics/mainbg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #ff4444;
    border-radius: 12px;
    text-align: center;
    max-width: 500px;
}

.error-logo {
    width: 150px;
    height: auto;
    opacity: 0.8;
}

.error-title {
    color: #ff4444;
    font-size: 28px;
    margin: 0;
}

.error-message {
    color: var(--view-build-text);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.error-home-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.error-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* =============================================================================
   BUILD PAGE TITLE (Center of Nav) - SVG with Glow Animation
   ============================================================================= */
.top-panel {
    height: 20%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.top-panel.has-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 1));
    z-index: 0;
}

.build-page-title {
    position: absolute;
    left: 16%;
    width: 68%;
    top: 50%;
    transform: translateY(-50%);
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.build-title-svg {
    width: 100%;
    height: 70%;
    overflow: visible;
}

.build-page-title .title-text {
    font-family: inherit;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: #ffd700;
    stroke: rgba(121, 101, 0, 1);
    stroke-width: 2px;
    paint-order: stroke fill;
    filter: 
        drop-shadow(0 0 3px rgba(0, 0, 0, 1))
        drop-shadow(1px 1px 3px rgba(0, 0, 0, 1))
        drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 6px rgba(255, 215, 0, 0.6))
        drop-shadow(0 0 7px rgba(255, 215, 0, 0.5))
        drop-shadow(0 0 16px rgba(255, 215, 0, 0.3));
    animation: svgTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes svgTitleGlow {
    from {
        filter: 
            drop-shadow(0 0 3px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 7px rgba(255, 215, 0, 0.5))
            drop-shadow(0 0 16px rgba(255, 215, 0, 0.3));
    }
    to {
        filter: 
            drop-shadow(0 0 5px rgba(255, 215, 0, 0.9))
            drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))
            drop-shadow(0 0 21px rgba(255, 215, 0, 0.4));
    }
}

.build-title-creator {
    color: var(--view-build-text-muted);
    font-size: 14px;
    margin: 2px 0 0 0;
}

.build-title-creator a {
    color: var(--view-build-text-highlight);
    text-decoration: none;
    transition: all 0.2s ease;
}

.build-title-creator a:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* =============================================================================
   CREATOR PROFILE IMAGE (Right side of nav)
   ============================================================================= */

.top-panel .user-profile-btn {
    background-color: #000000;
    border-radius: 15px;
    height: 90%;
    top: 5%;
    right: 0.5%;
}

.top-panel .user-profile-btn .profile-btn-image {
    border-radius: 12px;
    max-width: 105%;
    max-height: 105%;
    object-fit: contain;
}

.nav-spacer {
    flex-shrink: 0;
}

/* =============================================================================
   PAGE CONTENT CONTAINER 
   ============================================================================= */

.build-page-content {
    flex: 1 0 auto;
    position: relative;
    margin-top: 0;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    /* Override base styles.css offset - center on page */
    width: 100%;
    overflow-x: hidden;
}


/* =============================================================================
   CONTENT CONTAINER (responsive width - matches profile-content-container)
   ============================================================================= */

.view-build-content {
    width: 70%;
    min-width: 920px; /* Match build sheet + padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-x: visible;
}

/* Subscriber viewers get wider layout (no ads) */
body.viewer-subscribed .view-build-content {
    width: 89.5%;
}

/* =============================================================================
   METADATA SECTION (2-column: card left, info right)
   ============================================================================= */

.build-metadata-section {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    border-radius: 12px;
    padding: 0px;
}

/* Left Column: Thumbnail Card */
.metadata-thumbnail-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Build Card (matches profile-build-card styling) */
.build-thumbnail-card {
    width: 500px;
    height: 300px;
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 28px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 1),
                inset 0 0 15px rgba(0, 0, 0, 1),
                inset 0 0 20px rgba(0, 0, 0, 1),
                0 4px 20px rgba(0, 0, 0, 0.5);
}

.build-thumbnail-card .build-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

.build-thumbnail-card .build-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.build-thumbnail-card .build-card-ai-icon {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.build-thumbnail-card .build-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.build-thumbnail-card .build-card-upvotes {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 12px;
}

.build-thumbnail-card .upvote-count {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.build-thumbnail-card .upvote-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.2rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.build-thumbnail-card .upvote-btn:not(.upvoted):not([disabled]) {
    color: white;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.build-thumbnail-card .upvote-btn:not(.upvoted):not([disabled]):hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.15);
}

.build-thumbnail-card .upvote-btn.upvoted {
    color: #f5c842;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(245, 200, 66, 0.6);
}

.build-thumbnail-card .upvote-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================================================
   Right Column: Info (tags + description) 
   ============================================================================= */

.metadata-info-col {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: linear-gradient(to bottom, #000000e0 25%, #4a3728f6);
    padding: 20px;
    border-radius: 28px;
    align-items: center;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.content-tag {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--view-build-text-highlight);
    padding: 9px 11px;
    border-radius: 25px;
    font-size: 19px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.build-description {
    color: var(--view-build-text);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    width: 90%;
    white-space: pre-wrap, wrap;
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1),
        0 2px 12px rgba(0, 0, 0, 0.8);
}

/* =============================================================================
   VIDEO SECTION
   ============================================================================= */

.build-video-section {
    width: 100%;
    padding: 15px;
    border-radius: 28px;
    background: #111111f1;
    border: 2px solid rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.video-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 40px;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0.3) 100%);
    border: 2px solid #ff4444;
    border-radius: 8px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}

.video-link:hover {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.5) 0%, rgba(139, 0, 0, 0.5) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

/* Kick.com - Green */
.video-link.platform-kick {
    background: linear-gradient(180deg, rgba(83, 252, 24, 0.3) 0%, rgba(40, 120, 12, 0.3) 100%);
    border-color: #53fc18;
}

.video-link.platform-kick:hover {
    background: linear-gradient(180deg, rgba(83, 252, 24, 0.5) 0%, rgba(40, 120, 12, 0.5) 100%);
    box-shadow: 0 4px 12px rgba(83, 252, 24, 0.4);
}

/* Twitch.tv - Purple */
.video-link.platform-twitch {
    background: linear-gradient(180deg, rgba(145, 70, 255, 0.3) 0%, rgba(100, 65, 165, 0.3) 100%);
    border-color: #9146ff;
}

.video-link.platform-twitch:hover {
    background: linear-gradient(180deg, rgba(145, 70, 255, 0.5) 0%, rgba(100, 65, 165, 0.5) 100%);
    box-shadow: 0 4px 12px rgba(145, 70, 255, 0.4);
}

.video-icon {
    font-size: 20px;
}

/* =============================================================================
   WRITTEN GUIDE SECTION
   ============================================================================= */

.build-written-guide-section {
    width: 100%;
    margin-top: 0;
    padding: 25px;
    border-radius: 30px;
    background: linear-gradient(to bottom, #000000e0 25%, #4a3728f6);
    border: 2px solid rgba(196, 166, 99, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.written-guide-container {
    width: 100%;
    position: relative;
}

.export-addon-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 14px;
    background: linear-gradient(180deg, #3bb900 0%, #2a8400 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(59, 185, 0, 0.5);
    border-radius: 15px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
}

.export-addon-btn:hover {
    background: linear-gradient(180deg, #4dd910 0%, #3bb900 100%);
    box-shadow: 0 0 12px rgba(59, 185, 0, 0.4);
    transform: translateY(-1px);
}

.export-addon-btn:active {
    transform: translateY(0);
}

.written-guide-header {
    display: none;
}

.written-guide-content {
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.8;
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 20px;
    border: 4px solid #0c2002;
}

/* Written Guide Content Formatting */
.written-guide-content h2 {
    color: #ff9500;
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(255, 149, 0, 0.3);
}

.written-guide-content h2:first-child {
    margin-top: 0;
}

.written-guide-content p {
    margin-bottom: 1em;
}

.written-guide-content strong {
    color: #c4a663;
    font-weight: 600;
}

.written-guide-content em {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

.written-guide-content a {
    color: #3bb900;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.written-guide-content a:hover {
    color: #51ff00;
}

.written-guide-content ul {
    margin: 1em 0;
    padding-left: 2em;
}

.written-guide-content li {
    margin-bottom: 0.5em;
    list-style-type: disc;
}

/* =============================================================================
   COMMENTS SECTION
   ============================================================================= */

.build-comments-section {
    width: 100%;
    margin-top: 30px;
    padding: 25px;
    border-radius: 30px;
    background: linear-gradient(to bottom, #000000f3 25%, #4a3728d8);
    background-image: url('/graphics/comments_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 4px solid rgba(59, 185, 0, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.comments-container {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid rgba(255, 255, 255, 0.6);
}

.comments-header-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    padding-left: 3%;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.add-comment-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.3) 0%, rgba(40, 120, 0, 0.2) 100%);
    border: 2px solid #3bb900;
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-comment-btn:hover {
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.5) 0%, rgba(40, 120, 0, 0.3) 100%);
    box-shadow: 0 0 15px rgba(59, 185, 0, 0.4);
    transform: scale(1.05);
}

.add-comment-btn .add-icon {
    font-size: 1.2em;
    font-weight: bold;
}

.sign-in-comment-btn {
    padding: 10px 20px;
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sign-in-comment-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

/* Comment Input Area */
.comment-input-area {
    margin-bottom: 20px;
    padding: 15px;
    background: #4a3728;
    border: 4px solid #0c2002;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 250px;
    overflow: visible;
}

.comment-input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.comment-input-label {
    font-size: 1.25rem;
    font-weight: 600;
    color:var(--color-primary);
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1);
    padding-bottom: 10px;
}

.comment-char-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.703);
}

.comment-char-count.over-limit {
    color: #ff6b6b;
    font-weight: 600;
}

.comment-editor {
    background: #000000c7;
    border: 1px solid #ffffff;
    border-radius: 8px;
    height: 90px;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
    overflow: hidden;
}

.comment-editor:focus-within {
    border-color: #ffd700;
}

/* Quill Editor for Comments */
.comment-editor .ql-toolbar {
    background: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(59, 185, 0, 0.3);
    border-radius: 8px 8px 0 0;
    padding: 8px;
}

.comment-editor .ql-toolbar .ql-stroke {
    stroke: rgba(59, 185, 0, 0.8);
}

.comment-editor .ql-toolbar .ql-fill {
    fill: rgba(59, 185, 0, 0.8);
}

.comment-editor .ql-toolbar button:hover,
.comment-editor .ql-toolbar button.ql-active {
    background: rgba(59, 185, 0, 0.2);
}

.comment-editor .ql-toolbar button:hover .ql-stroke,
.comment-editor .ql-toolbar button.ql-active .ql-stroke {
    stroke: #3bb900;
}

.comment-editor .ql-toolbar button:hover .ql-fill,
.comment-editor .ql-toolbar button.ql-active .ql-fill {
    fill: #3bb900;
}

.comment-editor .ql-container {
    border: none;
    font-size: 1rem;
    height: 100px;
    overflow-y: auto;
}

.comment-editor .ql-editor {
    color: white;
    padding: 12px;
    line-height: 1.6;
    overflow-y: auto;
    max-height: 120px;
}

.comment-editor .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.3);
    font-style: normal;
}

.comment-editor .ql-editor strong {
    color: #c4a663;
    font-weight: 600;
}

.comment-editor .ql-editor em {
    color: rgba(255, 255, 255, 0.9);
}

.comment-input-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-top: 5px;
}

.post-comment-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.3) 0%, rgba(40, 120, 0, 0.2) 100%);
    border: 2px solid #3bb900;
    border-radius: 8px;
    color: #ffd700;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-comment-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.5) 0%, rgba(40, 120, 0, 0.3) 100%);
    box-shadow: 0 0 15px rgba(59, 185, 0, 0.4);
}

.post-comment-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cancel-comment-btn {
    padding: 10px 24px;
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-comment-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Comments List */
.comments-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comments-list::-webkit-scrollbar {
    width: 8px;
}

.comments-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.comments-list::-webkit-scrollbar-thumb {
    background: rgba(59, 185, 0, 0.3);
    border-radius: 4px;
}

.comments-list::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 185, 0, 0.5);
}

/* Empty State */
.comments-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.comments-empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    opacity: 0.4;
}

.comments-empty-state p {
    font-size: 1.2rem;
    margin: 0;
}

/* Individual Comment Cards */
.comment-card {
    margin-left: 2%;
    margin-right: 2%;
    padding: 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, 0.6));
    border: 3px solid rgba(59, 185, 0, 0.2);
    border-radius: 20px;
    transition: border-color 0.2s ease;
}

.comment-card:hover {
    border-color: rgba(59, 185, 0, 0.4);
}

/* Build Creator's Comments - Special Styling */
.comment-card.creator-comment {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #c4a663;
}

.comment-card.creator-comment .comment-author-name {
    color: #d7a230;
    text-shadow: 1px 1px 2px rgb(56, 33, 0);
}

.comment-card.creator-comment .comment-message {
    color: #2a2a2a;
}

.comment-card.creator-comment .comment-message strong {
    color: #1a1a1a;
}

.comment-card.creator-comment .comment-timestamp {
    color: rgba(0, 0, 0, 0.5);
}

.comment-card.creator-comment .comment-message em {
    color: #555555;
}

/* Comment Header */
.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(59, 185, 0, 0.5);
    object-fit: cover;
}

.creator-comment .comment-author-avatar {
    border: 2px solid #d99a11;
}

.comment-author-details {
    display: flex;
    flex-direction: column;
}

.comment-author-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #3bb900;
}

.comment-timestamp {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.comment-actions {
    display: flex;
    gap: 8px;
}

.comment-action-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(59, 185, 0, 0.3);
    border-radius: 4px;
    color: rgba(59, 185, 0, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-action-btn:hover {
    background: rgba(59, 185, 0, 0.2);
    border-color: #3bb900;
    color: #3bb900;
}

.comment-action-btn.delete-btn {
    border-color: rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.7);
}

.comment-action-btn.delete-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Comment Message */
.comment-message {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
}

.comment-message p {
    margin: 0 0 0.5em 0;
}

.comment-message p:last-child {
    margin-bottom: 0;
}

.comment-message strong {
    color: #c4a663;
    font-weight: 600;
}

.comment-message em {
    color: rgba(255, 255, 255, 0.9);
}

/* Comment Edit Interface */
.comment-edit-container {
    margin-top: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(59, 185, 0, 0.4);
    border-radius: 8px;
}

.comment-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.comment-edit-label {
    font-size: 1rem;
    font-weight: 600;
    color: #3bb900;
}

.comment-edit-char-count {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.comment-edit-char-count.over-limit {
    color: #ff6b6b;
    font-weight: 600;
}

.comment-edit-editor {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(59, 185, 0, 0.3);
    border-radius: 8px;
    min-height: 80px;
    max-height: 120px;
    overflow: hidden;
}

.comment-edit-editor .ql-toolbar {
    background: #ffffff !important;
    border: none;
    border-bottom: 1px solid rgba(59, 185, 0, 0.3);
    border-radius: 8px 8px 0 0;
    padding: 8px;
}

.comment-edit-editor .ql-container {
    border: none;
    font-size: 1rem;
    max-height: 80px;
    overflow-y: auto;
}

.comment-edit-editor .ql-editor {
    color: white;
    padding: 12px;
    line-height: 1.6;
    overflow-y: auto;
    max-height: 120px;
}

.comment-edit-editor .ql-editor strong {
    color: #c4a663;
    font-weight: 600;
}

.comment-edit-editor .ql-editor em {
    color: rgba(255, 255, 255, 0.9);
}

.comment-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
}

.save-edit-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.3) 0%, rgba(40, 120, 0, 0.2) 100%);
    border: 2px solid #3bb900;
    border-radius: 6px;
    color: #3bb900;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-edit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(59, 185, 0, 0.5) 0%, rgba(40, 120, 0, 0.3) 100%);
    box-shadow: 0 0 12px rgba(59, 185, 0, 0.4);
}

.save-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cancel-edit-btn {
    padding: 8px 20px;
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-edit-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

/* =============================================================================
   BUILD SHEET SECTION - VIEW PAGE OVERRIDES
   ============================================================================= 
   These styles override the main styles.css build-sheet positioning to work
   within the view-build page container structure.
   ============================================================================= */

/* CRITICAL: Override main styles.css .build-sheet absolute positioning */
.view-only .build-sheet {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px;
    background-color: #000;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.build-sheet-section {
    width: 100%;
}

#build-sheet-container {
    width: 100%;
    min-height: 500px;
}

/* Override main build-sheet positioning for view context */
.build-sheet-container.view-only {
    position: relative;
    width: 100%;
    min-width: 900px;
    aspect-ratio: 4 / 3;
    background-color: var(--color-background, #000);
    border: 2px solid #4a3728;
    border-radius: 30px;
    overflow: hidden;
    left: auto;
    bottom: auto;
    padding: 1%;
    box-sizing: border-box;
}

/* =============================================================================
   FIXED FONT SIZES - Prevent scaling on view-only page
   ============================================================================= */

/* Override stats.css inherited vb-based fonts */
.view-only .stats-label,
.view-only .stats-value {
    font-size: 16px !important;
}

.view-only .build-stats ul,
.view-only .build-stats2 ul,
.view-only .build-left ul {
    font-size: 16px !important;
}

.view-only .build-stats label,
.view-only .build-stats2 label {
    font-size: 16px !important;
}

/* =============================================================================
   THREE-PANEL LAYOUT OVERRIDES
   ============================================================================= */

/* Left Panel - Gear Display (full height) */
.view-only .build-left {
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    width: 29%;
    height: 98%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 25%, #4a3728);
    border: 4px solid #0c2002;
    border-radius: 20px;
    overflow: hidden;
}

/* Center Panel - Silhouette (top 68%) */
.view-only .build-center {
    position: absolute;
    left: 30.15%;
    top: 0.5%;
    width: 44%;
    height: 72%;
}

/* Right Panel - Configuration (top 68%) */
.view-only .build-right {
    position: absolute;
    right: 0.5%;
    top: 0.5%;
    width: 24%;
    height: 73%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 25%, #4a3728);
    border: 2px solid #4a3728;
    border-radius: 10px;
    padding: .5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
}

.view-only .build-right::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari/Opera */
}

/* Bottom Panel - Skills Bar (under center) */
.view-only .build-bottom {
    position: absolute;
    left: 30.5%;
    top: 69%;
    width: 44%;
    height: 30%;
}

/* =============================================================================
   TAB SYSTEM OVERRIDES
   ============================================================================= */

.view-only .build-sheet-tabs {
    position: absolute;
    display: flex;
    height: 10%;
    width: 44%;
    left: 30.5%;
    top: -5%;
    gap: 3%;
    justify-content: center;
    z-index: 10;
}

.view-only .build-sheet-tab {
    width: 30%;
    height: 100%;
    background-color: #ffd700;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 6% 2%;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-only .build-sheet-tab.active {
    background-color: #00ff00;
}

.view-only .build-sheet-tab:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px #ffd700;
}

/* =============================================================================
   LEFT PANEL LABELS
   ============================================================================= */

.view-only .build-left-ap-label,
.view-only .build-left-ac-label,
.view-only .build-left-we-label,
.view-only .build-left-co-label {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1),
        0 2px 12px rgba(0, 0, 0, 0.8);
    margin-bottom: 2%;
    padding-left: 5%;
}

.view-only .build-left-ap-label { margin-top: 3%; }
.view-only .build-left-ac-label { margin-top: 8%; }
.view-only .build-left-we-label { margin-top: 8%; }
.view-only .build-left-co-label { margin-top: 8%; }

/* =============================================================================
   LEFT PANEL GEAR POSITIONING - Let styles.css handle slot positions
   ============================================================================= */

/* Ensure gear slots inherit absolute positioning from styles.css */
.view-only .gear-slot,
.view-only .weapon-slot {
    /* styles.css already has position: absolute and coordinates */
    /* Just ensure cursor is not pointer for view-only */
    cursor: default;
}

/* Labels positioning */
.view-only .build-left-ap-label {
    position: absolute;
    top: 5%;
    left: 1%;
}

.view-only .build-left-ac-label {
    position: absolute;
    top: 48%;
    left: 1%;
}

.view-only .build-left-we-label {
    position: absolute;
    top: 66.5%;
    left: 1%;
}

/* =============================================================================
   GEAR SLOTS - VIEW ONLY
   ============================================================================= */
.view-only .build-left-ap {
    top: -1%;
}
.view-only .gear-slot,
.view-only .weapon-slot,
.view-only .poison-slot {
    cursor: default;
    background-color: rgba(50, 50, 50, 0.8);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #4a3728;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.view-only .gear-slot:hover,
.view-only .weapon-slot:hover,
.view-only .poison-slot:hover {
    border-color: #ffd700;
    transform: scale(1.2);
    z-index: 100;
    /* No pointer cursor, just visual feedback */
}

/* Gear slot grid */
.view-only .build-left-ap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    padding: 5%;
}

.view-only .build-left-ap .gear-slot {
    width: 22%;
    aspect-ratio: 1;
}

/* Accessory slots */
.view-only .build-left-ac {
    display: flex;
    gap: 8%;
    padding: 0 15%;
    justify-content: center;
}

.view-only .build-left-ac .gear-slot {
    width: 28%;
    aspect-ratio: 1;
}

/* =============================================================================
   BOTTOM BAR - CONSUMABLES
   ============================================================================= */

.view-only .consumables-row {
    position: absolute;
    right: 2.5%;
    top: 79.2%;
    width: 20%;
    height: 17%;
    background: linear-gradient(to bottom, var(--color-background) 25%, var(--color-secondary));
    border: var(--border-thick);
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    padding: 1%;
    gap: 3%;
    align-items: center;
    justify-items: center;
}

.view-only .consumables-row .build-bottom-conlabel {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 7%;
}

.view-only .consumables-row .consumable-slot {
    cursor: default;
    background-color: #0b0c11;
    border: 2px solid #4a3728;
    border-radius: 8px;
    height: 100%;
    margin-top: 33%;
}

.view-only .consumables-row .con {
    position: relative;
    width: 75%;
    aspect-ratio: 1/1;
    height: auto;
    background: var(--color-panel);
    box-shadow: var(--shadow-md), 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    cursor: default;
}

.view-only .consumables-row .con:hover {
    border-color: #ffd700;
    transform: scale(1.2);
    z-index: 100;
}

.view-only #build-bottom-con1 {
    background-image: url('/graphics/Icon-Food.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 1%;
}

.view-only #build-bottom-con2 {
    background-image: url('/graphics/Icon-Potions.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 1%;
}


.view-only .build-bottom-conlabel,
.view-only .buildbottom-skillslabel,
.view-only .build-bottom-ultlabel {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
    top: -1%;
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1),
        0 2px 12px rgba(0, 0, 0, 0.8);
    margin-bottom: 0%;
    padding-left: 5%;
}

.view-only .build-bottom-ultlabel {
    left: 81.5%;
}
.view-only .build-bottom-conlabel {
    top: 0%;
    margin-top: 6% ;
}

/* Report Build Button */
.report-build-btn {
    position: absolute;
    top: 1%;
    right: 1%;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 51, 51, 0.1);
    border-radius: 50%;
    color: rgba(255, 51, 51, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.3;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding-bottom: 8px;
    z-index: 100;
}

.report-build-btn:hover {
    opacity: 1;
    background: rgba(60, 60, 80, 0.9);
    border-color: #ff3333;
    color: #ff3333;
    transform: scale(1.2);
}

/* =============================================================================
   CENTER PANEL - SILHOUETTE
   ============================================================================= */

.view-only .build-center-ap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('/graphics/background-ap.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.view-only .build-center-cp {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('/graphics/background-cp.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* =============================================================================
   ATTRIBUTE POINTS - POSITION OVERRIDES (move elements up)
   ============================================================================= */

/* Attribute labels - move up */
.view-only .build-center-stats-label-health,
.view-only .build-center-stats-label-stamina,
.view-only .build-center-stats-label-magicka {
    top: 15%;
}

.view-only .build-center-bar-health {
    position: absolute;
    top: -410%;
    width: 31.3%;
    height: 100%;
    left: 3%;
    background-color: var(--color-health);
    border: 2px solid var(--color-background);
    border-radius: 10px;
}

.view-only .build-center-bar-stamina {
    position: absolute;
    top: -410%;
    width: 31.3%;
    height: 100%;
    left: 35%;
    background-color: var(--color-stamina);
    border: 2px solid var(--color-background);
    border-radius: 10px;
}

.view-only .build-center-bar-magicka {
    position: absolute;
    top: -410%;
    width: 31.3%;
    height: 100%;
    left: 67.5%;
    background-color: var(--color-magicka);
    border: 2px solid var(--color-background);
    border-radius: 10px;
}

/* Attribute values */
.view-only .build-center-stats-value-health,
.view-only .build-center-stats-value-stamina,
.view-only .build-center-stats-value-magicka {
    top: 24%;
}

/* =============================================================================
   SKILL BARS - VIEW ONLY
   ============================================================================= */

.view-only .build-bottom .skills-row {
    position: relative;
    left: 0%;
    top: 18.5%;
    width: 100%;
    height: 80%;
    display: grid;
    background: linear-gradient(to bottom, var(--color-background) 25%, var(--color-secondary));
    border: var(--border-thick);
    border-radius: 20px;
    grid-template-rows: repeat(2, 1fr);
    gap: 1%;
    padding-top: 8%;
    padding-left: 4%;
    padding-bottom: 2%;
    box-sizing: border-box;
}
/* Werewolf 3-bar layout - view mode specific */
.view-only .build-bottom .skills-row.werewolf-active {
    grid-template-rows: repeat(3, 1fr);
    height: 120%;
    top: -20.5%;
    padding-bottom: 3%;
}

/* Hide werewolf bar by default */
#werewolf-bar {
    display: none;
}

/* Ensure werewolf bar shows in 3-bar layout */
.view-only .build-bottom .skills-row.werewolf-active #werewolf-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5%;
    height: 100%;
    width: 100%;
}

/* Adjust labels when werewolf active */
.view-only .build-bottom .skills-row.werewolf-active .buildbottom-skillslabel,
.view-only .build-bottom .skills-row.werewolf-active .build-bottom-ultlabel {
    top: -1%;
}

.view-only .build-bottom .skills-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5%;
    height: 100%;
    width: 100%;
}

.view-only .build-bottom .skill-slot {
    position: relative;
    height: 90%;
    width: auto;
    aspect-ratio: 1 / 1;
    background-image: url('/graphics/Icon-Skill.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: var(--shadow-md), 0 0 10px rgba(0, 0, 0, 0.5) ;
    /* border: 3px solid var(--color-secondary); */
    border-radius: 5px;
    cursor: pointer;
}

.view-only .build-bottom-slotted {
    display: flex;
    flex-direction: column;
    gap: 2%;
    padding: 2%;
}

.view-only .skill-slot {
    width: 100%;
    aspect-ratio: 1;
    cursor: default;
    background-color: rgba(50, 50, 50, 0.8);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #4a3728;
    border-radius: 8px;
}

.view-only .skill-slot:hover {
    border-color: #ffd700;
}

.view-only .skill-slot.ultimate-slot {
    border-color: #ffd700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.view-only .skill-slot.has-skill {
    border-color: #1ba100;
}

.view-only .skill-slot.has-skill:hover {
    border: 3px solid #1eff00 !important; 
    box-shadow: 0 0 8px rgba(30, 255, 0, 0.4);
    transform: scale(1.2);
    z-index: 500;
}
/* Werewolf bar skills - red border/glow instead of green */
.view-only #werewolf-bar .skill-slot.has-skill:hover {
    border: 3px solid #ff1e1e !important; 
    box-shadow: 0 0 8px rgba(255, 30, 30, 0.4);
    transform: scale(1.2);
    z-index: 500;
}


/* =============================================================================
   RIGHT PANEL - CONFIGURATION DISPLAY
   ============================================================================= */

.view-only .view-config-section {
    margin-bottom: 15px;
}

.view-only .view-config-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 9px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-size: 16px;
}

.view-only .view-config-label {
    color: #ebebeb;
    font-weight: normal;
}

.view-only .view-config-value {
    color: #ffd700;
    font-weight: bold;
    text-align: right;
}

/* Hide Role and Content - already shown in metadata tags */
.view-only .view-config-item[data-config="role"],
.view-only .view-config-item[data-config="primary-content"] {
    display: none;
}

/* Override absolute positioning from styles.css for build-right-curse in view mode */
.view-only .build-right-curse {
    position: static;
    top: unset;
}

/* Subclassing section */
.view-only #view-subclass-section {
    display: flex;
    border-top: 1px solid #4a3728;
    margin-top: 10px;
    padding-top: 10px;
}

/* Pure Class state - muted text */
.view-only #view-subclass-section.pure-class .view-subclass-enabled {
    color: #888888;
}

/* Skill lines container - tighter spacing */
.view-only .view-skill-lines {
    margin-top: 2px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4a3728;
}

.view-only .view-skill-lines .view-config-item {
    margin-bottom: 1px;
    padding: 3px 9px;
}

.view-only .view-config-section-title {
    color: #ffd700;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #4a3728;
}

/* Skill line class icons */
.skill-line-class-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    transform: translateY(-25%);
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: default;
}
.skill-line-class-icon:hover {
    transform: scale(1.5) translateY(-18%);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* =============================================================================
   STATS DISPLAY - VIEW ONLY
   ============================================================================= */
/* Stats Lists */
.view-only .build-stats,
.view-only .build-stats2 {
    position: absolute;
    top: 32%;
    height: 80%;
}

/* Front/Back toggle - move up */
.view-only .weapon-bar-toggle {
    bottom: 2%;
    width: 45%;
}

/* Page navigation dots - move up */
.view-only .stats-page-navigation {
    bottom: 2%;
}

.view-only .build-center-stats-page {
    flex: 1;
    overflow-y: auto;
    padding: 2%;
    gap: 2%;
    text-shadow: 
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 1),
        0 2px 4px rgba(0, 0, 0, 1);
}

.view-only .stats-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.view-only .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    font-size: 16px;
}

.view-only .stat-label {
    color: #aaa;
}

.view-only .stat-value {
    color: #fff;
    font-weight: bold;
}

/* Stats page navigation dots */
.view-only .stats-page-nav {
    display: flex;
    justify-content: center;
    gap: 9px;
    padding: 10px;
}

.view-only .stats-page-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #4a3728;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-only .stats-page-dot:hover {
    background-color: #6a5a48;
}

.view-only .stats-page-dot.active {
    background-color: #ffd700;
}
/* Adjust weapon bar toggle and stats navigation when werewolf 3-bar is active */
.view-only .build-sheet.werewolf-active .weapon-bar-toggle,
.view-only .build-sheet.werewolf-active .stats-page-navigation {
    bottom: 20%;
}

/* =============================================================================
   CHAMPION POINTS - VIEW ONLY
   ============================================================================= */

.view-only .build-left-cp {
    display: none; /* Hidden until CP tab active */
    padding: 3%;
}

.view-only .build-left-cp.active {
    display: block;
}

.view-only .cp-section {
    margin-bottom: 15px;
}

.view-only .cp-section h1 {
    font-size: 14px;
    margin-bottom: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid;
}

.view-only .cp-section.warfare h1 { color: #00bfff; border-color: #00bfff; }
.view-only .cp-section.fitness h1 { color: #ff4500; border-color: #ff4500; }
.view-only .cp-section.craft h1 { color: #32cd32; border-color: #32cd32; }

.view-only .cp-slotted-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
}

.view-only .cp-circle-slot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(50, 50, 50, 0.8);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #4a3728;
    cursor: default;
}

.view-only .cp-circle-slot.warfare { border-color: #00bfff; }
.view-only .cp-circle-slot.fitness { border-color: #ff4500; }
.view-only .cp-circle-slot.craft { border-color: #32cd32; }

.view-only .cp-label {
    font-size: 14px;
    color: #ccc;
}

.view-only .view-slot {
    font-size: 14px;
    font-weight: bold;
}

/* =============================================================================
   BUFF LIST - VIEW ONLY
   ============================================================================= */

.view-only .buff-list-container {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #4a3728;
}

.view-only .build-left-stats-label {
    top: 2%;
    color: #ffd700;
    font-size: 22px;
    margin-bottom: 5px;
}

.view-only .buff-list {
    list-style: none;
    padding: 1%;
    padding-left: 3%;
    padding-right: 3%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}


.view-only .buff-item {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding: 2px 4px;
}

.view-only .buff-name {
    color: #888;
}

.view-only .buff-status {
    font-weight: bold;
}

.view-only .buff-status.yes {
    color: #00ff00;
}

.view-only .buff-status.no {
    color: #666;
}

/* =============================================================================
   QUALITY BORDERS (for gear items)
   ============================================================================= */

.view-only .quality-normal { border-color: #9d9d9d !important; }
.view-only .quality-fine { border-color: #2dc50e !important; }
.view-only .quality-superior { border-color: #3a92ff !important; }
.view-only .quality-epic { border-color: #a02ef7 !important; }
.view-only .quality-legendary { border-color: #eeca2a !important; }

/* Has-item indicator */
.view-only .has-item,
.view-only .has-skill,
.view-only .has-cp,
.view-only .has-consumable {
    background-color: transparent; /* Show the icon, not the dark bg */
}

/* =============================================================================
   TAB CONTENT VISIBILITY
   ============================================================================= */

.view-only .build-left-ap,
.view-only .build-left-cp,
.view-only .build-left-stats,
.view-only .build-center-ap,
.view-only .build-center-cp,
.view-only .build-center-stats {
    display: none;
}

.view-only .build-left-ap.active,
.view-only .build-center-ap.active {
    display: block;
}

.view-only .build-left-cp.active,
.view-only .build-center-cp.active {
    display: block;
}

.view-only .build-left-stats.active {
    display: flex;
    flex-direction: column;
    height: 105%;
}

.view-only .build-center-stats.active {
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS FOR BUILD SHEET
   ============================================================================= */

@media (max-width: 1200px) {
    .view-only .build-sheet-tab {
        font-size: clamp(.9rem, 0.8vw, .9rem);
        padding: 4%;
    }
    
    .view-only .view-config-item {
        font-size: clamp(1.1rem, 0.9vw, 1.1rem);
    }
}

@media (max-width: 900px) {

    /* Reset header overrides from styles.css for view-build page */
    .top-panel {
        position: absolute;
        height: 20%;
        display: block;
    }

    .top-panel .logo-link {
        position: absolute;
        top: 5%;
        left: 1%;
        height: 90%;
        margin-left: 0;
    }

    .top-panel .logo-link img {
        position: absolute;
        height: 100%;
        width: auto;
        max-width: 40vw;
        object-fit: contain;
    }

    .nav-container {
        display: none;
    }

    .top-panel .user-profile-btn {
        position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 80% !important;
        right: 3%;
        border-radius: 20px;
        overflow: hidden;
        margin-right: 0;
    }

    .header-icons-container {
        position: absolute;
        bottom: 10%;
        right: 8%;
    }

    .build-sheet-container.view-only {
        aspect-ratio: auto;
        min-height: 500px;
    }
    
    /* Stack panels vertically on smaller screens */
    .view-only .build-left,
    .view-only .build-center,
    .view-only .build-right {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        height: auto;
    }
    
    .view-only .build-bottom {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
    }
}


/* =============================================================================
   TOOLTIP (inherits from main styles, additions here)
   ============================================================================= */

.tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 400px;
    padding: 15px;
    background: rgba(20, 20, 20, 0.98);
    border: 2px solid var(--view-build-border);
    border-radius: 8px;
    pointer-events: none;
}

/* =============================================================================
   SHARE BUILD BUTTON
   ============================================================================= */

.metadata-info-col {
    position: relative;
}

.share-build-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    background: rgba(40, 40, 55, 0.6);
    border: 2px solid rgba(196, 166, 99, 0.3);
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.share-build-btn:hover {
    background: rgba(23, 23, 34, 0.911);
    border-color: rgba(196, 166, 99, 1);
    color: #e0e0e0;
    transform: scale(1.15);
}

.share-build-btn .share-icon {
    font-size: 1.1em;
}

/* =============================================================================
   APPAREL VIEW TOGGLE
   ============================================================================= */

.apparel-view-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.view-toggle-btn {
    background: rgba(0, 0, 0, 0.0);
    border: none;
    border-radius: 6px;
    padding: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn .toggle-icon {
    width: 36px;
    height: 36px;
    transition: opacity 0.2s ease;
    filter: brightness(0.5);
}

.view-toggle-btn:hover .toggle-icon {
    filter: brightness(1);
}

/* =============================================================================
   GEAR LIST VIEW
   ============================================================================= */

.gear-list-view {
    padding: 10px 5px;
    background: rgba(0, 0, 0, 0.0);
    border-radius: 3px;
    margin-top: 10px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar but keep functionality */
.gear-list-view::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.gear-list-view {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.gear-list-category {
    font-family: 'Trajan Pro', serif;
    font-size: 16.4px;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0px 0px 0px;
    padding-bottom: 8px;
    padding-left: 25%;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    text-shadow: 
        0 0 4px rgba(0, 0, 0, .8),
        -1px 1px 4px rgba(0, 0, 0, .8),
        -1px 2px 8px rgba(0, 0, 0, .9);
}

.gear-list-category:first-child {
    margin-top: 0;
}

.gear-list-item {
    margin: 0px 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gear-list-item:last-of-type {
    border-bottom: none;
}

.gear-list-slot {
    font-family: 'Futura', sans-serif;
    font-size: 11.7px;
    color: #ffd700;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.gear-list-weight {
    font-family: 'Futura', sans-serif;
    font-size: 9.9px;
    color: #888888;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.gear-list-details {
    display: flex;
    gap: 15px;
    margin-top: 4px;
    padding-left: 10px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.gear-list-set {
    font-family: 'Futura', sans-serif;
    font-size: 10.8px;
    color: #e0e0e0;
    flex: 1;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.gear-list-trait {
    font-family: 'Futura', sans-serif;
    font-size: 10.8px;
    color: #a0a0a0;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.gear-list-enchant {
    font-family: 'Futura', sans-serif;
    font-size: 10.8px;
    color: #a0a0a0;
    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

/* Quality-based colors for set names */
.gear-list-set[data-quality="legendary"] { color: #ffd700; }
.gear-list-set[data-quality="epic"] { color: #a020f0; }
.gear-list-set[data-quality="superior"] { color: #0080ff; }
.gear-list-set[data-quality="fine"] { color: #00ff00; }
.gear-list-set[data-quality="normal"] { color: #ffffff; }

/* Hide labels when in list view */
.build-left-ap.list-view-active .build-left-ap-label,
.build-left-ap.list-view-active .build-left-ac-label,
.build-left-ap.list-view-active .build-left-we-label {
    display: none;
}

/* Hide slots when in list view */
.build-left-ap.list-view-active .gear-slots {
    display: none;
}

/* Quality-based colors for slot names and weight/type labels */
.gear-list-slot[data-quality="gold"],
.gear-list-weight[data-quality="gold"] { 
    color: #FFD700; 
}

.gear-list-slot[data-quality="purple"],
.gear-list-weight[data-quality="purple"] { 
    color: #A020F0; 
}

.gear-list-slot[data-quality="blue"],
.gear-list-weight[data-quality="blue"] { 
    color: #0080FF; 
}

.gear-list-slot[data-quality="green"],
.gear-list-weight[data-quality="green"] { 
    color: #00FF00; 
}

.gear-list-slot[data-quality="white"],
.gear-list-weight[data-quality="white"] { 
    color: #FFFFFF; 
}

/* Hide empty gear slots */
.gear-list-item.empty-slot {
    display: none;
}

/* =============================================================================
   TOAST NOTIFICATION
   ============================================================================= */

.view-build-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    z-index: 10001;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.view-build-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATTLE SPIRIT SECTION (View Page)
   ═══════════════════════════════════════════════════════════════════════════ */

.view-only .build-left-stats-label.gold {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.view-only .battle-spirit-item {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.view-only .battle-spirit-item .buff-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
    margin: 6px 0;
    padding-top: .5%;
    padding-bottom: .5%;
}

.view-only .battle-spirit-item .battle-spirit-row {
    display: flex;
    justify-content: space-between;
}

/* =============================================================================
   Hide Fill Passives button on view-only page
   ============================================================================= */
   
.champion-fill-passives-btn {
    display: none !important;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 1024px) {
    .view-build-content {
        width: 95%;
        min-width: 0;
    }

    body.viewer-subscribed .view-build-content {
        width: 95%;
        min-width: 0;
    }

    .build-sheet-container.view-only {
        min-width: 0;
    }

    .build-page-content {
        overflow-x: hidden;
    }
}

@media (max-width: 900px) {
    .build-metadata-section {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .metadata-info-col {
        width: 100%;
        padding: 26px 20px;
    }

    .content-tag {
        font-size: 15px;
        padding: 7px 10px;
    }

    .build-description {
        font-size: 1rem;
        width: 95%;
    }

    .build-page-title .title-text {
        font-size: 24px;
    }

    .build-title-creator {
        font-size: 12px;
    }

    /* ===== MOBILE BUILD SHEET: Stack panels vertically ===== */
    .build-sheet-container.view-only {
        min-width: 0;
        aspect-ratio: auto;
        overflow: visible;
        height: auto;
    }

    .view-only .build-sheet {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        width: 100%;
        height: auto !important;
    }

    /* Remove absolute positioning from all panels */
    .view-only .build-sheet-tabs,
    .view-only .build-left,
    .view-only .build-center,
    .view-only .build-bottom,
    .view-only .consumables-row,
    .view-only .build-right {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Reorder: 1-tabs, 2-right(config), 3-left(gear), 4-center(silhouette), 5-skills, 6-consumables */
    .view-only .build-right      { order: 1; padding: 3%; border-radius: 25px;}
    .view-only .build-sheet-tabs { order: 2; display: flex; justify-content: center; gap: 5%; padding: 8px 0;}
    .view-only .build-left        { order: 3; padding: 3%; }
    .view-only .build-center      { order: 4; aspect-ratio: 3 / 4; }
    .view-only .build-bottom      { order: 5; }
    .view-only .consumables-row   { order: 6; width: 60% !important; align-self: center; margin-bottom: 3%; }
    .view-only .report-build-btn  { order: 0; position: relative !important; }

    /* Improve tab visibility on mobile */
    .view-only .build-sheet-tab { 
        height: 100%;
        opacity: 0.5;
    }
    .view-only .build-sheet-tab.active {
        opacity: 1;
        font-weight: bold;
    }


    /* Right panel (config) 75% larger for mobile */
    .view-only .view-config-item { font-size: 28px; padding: 9px 16px; margin-bottom: 7px; }
    .view-only .view-config-section-title { font-size: 26px; margin-bottom: 14px; }
    .view-only .skill-line-class-icon { width: 52px; height: 52px; }
    .view-only .view-skill-lines .view-config-item { padding: 5px 16px; }

    /* Left panel children need relative positioning to show content */
    .view-only .build-left-ap,
    .view-only .build-left-cp,
    .view-only .build-left-stats {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 1/2;
        height: auto !important;
    }

    /* Increase gear list text by 50% for mobile readability */
    .view-only .build-left-ap-label,
    .view-only .build-left-ac-label,
    .view-only .build-left-we-label,
    .view-only .build-left-co-label {
        font-size: 36px;
    }

    .view-only .build-left ul {
        font-size: 33px !important;
    }

    /* Gear list view text 50% larger for mobile */
    .gear-list-slot { font-size: 24px; }
    .gear-list-weight { font-size: 20px; }
    .gear-list-set,
    .gear-list-trait,
    .gear-list-enchant { font-size: 16px; }

    /* CP section 75% larger for mobile */
    .view-only .cp-section h1 { font-size: 28px; }
    .view-only .cp-circle-slot { width: 48px; height: 48px; }
    .view-only .cp-label { font-size: 33px; }
    .view-only .cp-skill-item { font-size: 28px; }

    /* Buff list 75% larger for mobile */
    .view-only .build-left-stats-label { font-size: 38.5px; }
    .view-only .buff-item { font-size: 28px; }
    .view-only .buff-list li { font-size: 28px; }

    /* Center-stats: attribute labels and values larger, moved up */
    .view-only .build-center-stats-label-health,
    .view-only .build-center-stats-label-stamina,
    .view-only .build-center-stats-label-magicka {
        top: 5%;
        font-size: 28px;
    }

    .view-only .build-center-stats-value-health,
    .view-only .build-center-stats-value-stamina,
    .view-only .build-center-stats-value-magicka {
        top: 18%;
        font-size: 28px;
    }

    .view-only .build-center-bar-health,
    .view-only .build-center-bar-stamina,
    .view-only .build-center-bar-magicka {
        top: -666%;
    }

    /* Stats columns: stack vertically with larger text */
    .view-only .build-stats {
        position: relative !important;
        top: 25% !important;
        left: 5% !important;
        width: 90% !important;
        height: 30% !important;
    }

    .view-only .build-stats2 {
        position: relative !important;
        top: 25% !important;
        left: 1% !important;
        width: 98% !important;
        height: 30% !important;
    }

    .view-only .stat-row { font-size: 28px; }
    .view-only .stats-label,
    .view-only .stats-value {
        font-size: 22px !important;
    }

    .view-only .build-stats ul,
    .view-only .build-stats2 ul {
        font-size: 20px !important;
    }

    /* Front/Back/Both and page dots: normal flow positioning */
    .view-only .weapon-bar-toggle {
        position: relative !important;
        top: 32%;
        width: 60%;
        margin: 10px auto;
    }

    .view-only .stats-page-navigation {
        position: relative !important;
        bottom: -19%;
        left: 35%;
    }

    .view-only .build-stats-full-note {
        display: none !important;
    }

    /* Mobile tooltips: fixed bottom overlay instead of cursor-following */
    .build-center-tooltip {
        min-width: 0 !important;
        max-width: 92vw !important;
        width: 92vw !important;
        left: 4vw !important;
        top: auto !important;
        bottom: 10px !important;
        max-height: 50vh;
        overflow-y: auto;
        font-size: 28px;
    }

    /* Tooltip inner font sizes 75% larger for mobile */
    .gear-tooltip-name { font-size: 28px; }
    .gear-tooltip-section-label { font-size: 19px; }
    .gear-tooltip-section-value { font-size: 21px; }
    .gear-tooltip-bonus { font-size: 19px; }
    .gear-tooltip-slot-label,
    .gear-tooltip-slot-value { font-size: 21px; }

    /* Force 75% larger text on ALL tooltip children - overrides inline styles */
    #tooltip div { font-size: 21px !important; }
    #tooltip span { font-size: 21px !important; }
    #tooltip .tooltip-title,
    #tooltip div[style*="text-transform: uppercase"] { font-size: 28px !important; }
    #tooltip .coeff-header { font-size: 24px !important; }

    /* Werewolf adjustment not needed in stacked layout */
    .view-only .build-sheet.werewolf-active .weapon-bar-toggle {
        top: 33%;
    }

    .view-only .build-sheet.werewolf-active .stats-page-navigation {
        bottom: -18%;
        left: 35%;
    }
}

@media (max-width: 650px) {
    .build-page-title {
        position: absolute;
        left: -20%;
        width: 90%;
        top: 120%;
        transform: none;
        height: auto;
        padding: 8px 0 4px 0;
        z-index: 10;
    }

    .build-title-svg {
        height: auto;
        max-height: 80px;
    }

    .build-title-creator {
        margin: 4px 0 0 0;
        font-size: 20px;
    }

}

@media (max-width: 600px) {
    .build-thumbnail-card {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 5 / 3;
    }

    .view-build-content {
        width: 98%;
        gap: 8px;
    }

    body.viewer-subscribed .view-build-content {
        width: 98%;
    }

    .build-sheet-container.view-only {
        border-radius: 15px;
    }

    /* Scale down from 900px values for smaller screens */
    /* Right panel config: 900px=28px → 600px=22px */
    .view-only .view-config-item { font-size: 22px; padding: 7px 12px; margin-bottom: 5px; }
    .view-only .view-config-section-title { font-size: 20px; margin-bottom: 10px; }
    .view-only .skill-line-class-icon { width: 40px; height: 40px; }

    /* Left panel gear labels: 900px=36px → 600px=28px */
    .view-only .build-left-ap-label,
    .view-only .build-left-ac-label,
    .view-only .build-left-we-label,
    .view-only .build-left-co-label {
        font-size: 28px;
    }

    .view-only .build-left ul { font-size: 26px !important; }

    /* Gear list: scale down proportionally */
    .gear-list-slot { font-size: 20px; }
    .gear-list-weight { font-size: 16px; }
    .gear-list-set,
    .gear-list-trait,
    .gear-list-enchant { font-size: 14px; }

    /* CP section: 900px=28px → 600px=22px */
    .view-only .cp-section h1 { font-size: 22px; }
    .view-only .cp-circle-slot { width: 40px; height: 40px; }
    .view-only .cp-label { font-size: 26px; }
    .view-only .cp-skill-item { font-size: 22px; }

    /* Buff list: scale down */
    .view-only .build-left-stats-label { font-size: 30px; }
    .view-only .buff-item { font-size: 22px; }
    .view-only .buff-list li { font-size: 22px; }

    /* Center stats: 900px=28px → 600px=22px */
    .view-only .build-center-stats-label-health,
    .view-only .build-center-stats-label-stamina,
    .view-only .build-center-stats-label-magicka { font-size: 18px; }

    .view-only .build-center-stats-value-health,
    .view-only .build-center-stats-value-stamina,
    .view-only .build-center-stats-value-magicka { font-size: 18px; }

    .view-only .stat-row { font-size: 18px; }
    .view-only .build-stats ul,
    .view-only .build-stats2 ul { font-size: 15px !important; }

    /* Stats columns: stack vertically with larger text */
    .view-only .build-stats {
        position: relative !important;
        top: 25% !important;
        left: 5% !important;
        width: 90% !important;
        height: 30% !important;
    }

    .view-only .build-stats2 {
        position: relative !important;
        top: 27% !important;
        left: 1% !important;
        width: 98% !important;
        height: 30% !important;
    }

    /* Title */
    .build-page-title .title-text { font-size: 35px; }
    .build-title-creator { font-size: 18px; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 1px 1px 15px rgba(0, 0, 0, 1), 2px 2px 20px rgba(0, 0, 0, 1); }

    /* Comments section mobile */
    .build-comments-section { padding: 15px; border-radius: 20px; }
    .comments-header-title { font-size: 1.3rem; }
    .add-comment-btn { padding: 8px 14px; font-size: 0.85rem; }

    /* Written guide mobile */
    .build-written-guide-section { padding: 15px; border-radius: 20px; }
    .written-guide-content { padding: 12px; font-size: 0.95rem; }

    /* Share button mobile */
    .share-build-btn { font-size: 0.85rem; padding: 4px 8px; }

    /* Video section mobile */
    .video-link { padding: 10px 20px; font-size: 14px; }
}

@media (max-width: 430px) {
    .build-sheet-container.view-only {
        border-radius: 30px;
        padding: 0.5%;
    }
    .view-only .build-sheet {
        border-radius: 30px !important;
    }
    .content-tag {
        font-size: 13px;
        padding: 5px 8px;
    }

    .build-page-title .title-text { font-size: 30px;}

    /* Scale down from 600px values for smallest screens */
    /* Right panel config: 600px=22px → 420px=18px */
    .view-only .view-config-item { font-size: 18px; padding: 6px 10px; margin-bottom: 4px; }
    .view-only .view-config-section-title { font-size: 16px; margin-bottom: 8px; }
    .view-only .skill-line-class-icon { width: 32px; height: 32px; }

    /* Left panel gear labels: 600px=28px → 420px=22px */
    .view-only .build-left-ap-label,
    .view-only .build-left-ac-label,
    .view-only .build-left-we-label,
    .view-only .build-left-co-label { font-size: 22px; }

    .view-only .build-left ul { font-size: 20px !important; }

    /* Gear list */
    .gear-list-slot { font-size: 16px; }
    .gear-list-weight { font-size: 13px; }
    .gear-list-set,
    .gear-list-trait,
    .gear-list-enchant { font-size: 12px; }

    /* CP section: 600px=22px → 420px=18px */
    .view-only .cp-section h1 { font-size: 18px; }
    .view-only .cp-circle-slot { width: 34px; height: 34px; }
    .view-only .cp-label { font-size: 20px; }
    .view-only .cp-skill-item { font-size: 18px; }

    /* Buff list */
    .view-only .build-left-stats-label { font-size: 24px; }
    .view-only .buff-item { font-size: 18px; }
    .view-only .buff-list li { font-size: 18px; }

    /* Center stats: 600px=22px → 420px=18px */
    .view-only .build-center-stats-label-health,
    .view-only .build-center-stats-label-stamina,
    .view-only .build-center-stats-label-magicka { font-size: 16px; }

    .view-only .build-center-stats-value-health,
    .view-only .build-center-stats-value-stamina,
    .view-only .build-center-stats-value-magicka { font-size: 16px; }

    .view-only .stat-row { font-size: 16px; }
    .view-only .build-stats ul,
    .view-only .build-stats2 ul { font-size: 14px !important; }

    /* Stats columns: stack vertically with larger text */
    .view-only .build-stats {
        position: relative !important;
        top: 25% !important;
        left: 5% !important;
        width: 90% !important;
        height: 30% !important;
    }

    .view-only .build-stats2 {
        position: relative !important;
        top: 28.5% !important;
        left: 1% !important;
        width: 98% !important;
        height: 30% !important;
    }

    /* Front/Back/Both and page dots: normal flow positioning */
    .view-only .weapon-bar-toggle {
        position: relative !important;
        top: 32%;
        width: 60%;
        margin: 10px auto;
    }

    .view-only .stats-page-navigation {
        position: relative !important;
        bottom: -18%;
        left: 35%;
    }

    .build-center-tooltip {
        max-height: 65vh;
    }

    /* Tooltip inner font sizes larger for mobile */
    .gear-tooltip-name { font-size: 16px; }
    .gear-tooltip-section-label { font-size: 13px; }
    .gear-tooltip-section-value { font-size: 13px; }
    .gear-tooltip-bonus { font-size: 13px; }
    .gear-tooltip-slot-label,
    .gear-tooltip-slot-value { font-size: 13px; }

     /* Force larger text on ALL tooltip children - overrides inline styles */
    #tooltip div { font-size: 13px !important; }
    #tooltip span { font-size: 13px !important; }
    #tooltip .tooltip-title,
    #tooltip div[style*="text-transform: uppercase"] { font-size: 16px !important; }
    #tooltip .coeff-header { font-size: 13px !important; }

}

/* =============================================================================
   SEO - Screen Reader Only (Hidden but Crawlable)
   ============================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}