.prpg-start-screen.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
}

.prpg-start-sidebar {
    flex: 1 1 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    order: 2; /* Em mobile vai para baixo, em desktop ajustamos com media query se necessário */
}

.prpg-start-box.main-content {
    flex: 1 1 400px;
    max-width: 500px;
    order: 1;
}

.leaderboard-widget {
    background: rgba(16, 20, 24, 0.9);
    border: 1px solid #4a5568;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.leaderboard-widget h3 {
    color: #e5c100;
    font-family: 'Cinzel', serif;
    margin-top: 0;
    border-bottom: 1px solid rgba(229, 193, 0, 0.3);
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.leaderboard-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

.leaderboard-widget li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #cbd5e0;
}
.leaderboard-widget li:last-child { border-bottom: none; }
.leaderboard-widget .lb-name { font-weight: bold; color: white; }
.leaderboard-widget.danger h3 { color: #e74c3c; border-color: #c0392b; }
.leaderboard-widget.info { background: rgba(30, 42, 50, 0.9); text-align: center; font-style: italic; color: #a0aec0;}
@media (min-width: 900px) {
    .prpg-start-screen.with-sidebar {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .prpg-start-sidebar { order: 1; margin-top: 50px;}
    .prpg-start-box.main-content { order: 2; margin-top: 100px; }
}
#prpg-music-controls-container {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 999;
}
.prpg-music-player {
    background: rgba(18, 22, 28, 0.9);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 8px 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #efe6d2;
    max-width: 320px;
    overflow: hidden;
}
.prpg-music-player.minimized {
    max-width: 72px;
    padding: 8px 10px;
}
.prpg-music-player.minimized .volume-group {
    display: none !important;
}
.player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.player-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--accent);
    padding: 0;
    transition: transform 0.2s;
}

.player-btn:hover { transform: scale(1.1); color: #fff; }

.volume-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.volume-group label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 80px;
    height: 4px;
    background: #4a5568;
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    cursor: pointer;
    border-radius: 50%;
}
.combat-identity .player-title {
    font-size: 0.9em;
    font-style: italic;
    color: var(--accent); /* Uses a theme accent color for highlights */
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.combat-identity .combatant-level {
    margin-top: 4px; /* Ensure a small gap between title and level */
}
.combat-avatar-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    margin-bottom: 25px;
}
.combat-card .combat-avatar {
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    background-color: rgba(0,0,0,0.2);
    display: block;
    transition: transform 0.2s ease-in-out;
}
.combat-equipment-slots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transform-origin: center;
}
.combat-equipment-slot {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(10, 20, 30, 0.85);
    border: 1px solid var(--border-color-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
}
.combat-equipment-slot img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}
.slot-head { transform: translate(-50%, -50%) rotate(0deg) translate(50px) rotate(0deg); top: 0; left: 50%; }
.slot-chest { transform: translate(-50%, -50%) rotate(90deg) translate(50px) rotate(-90deg); top: 50%; left: calc(100% + 2px); }
.slot-legs { transform: translate(-50%, -50%) rotate(180deg) translate(50px) rotate(-180deg); top: 100%; left: 50%; }
.slot-feet { transform: translate(-50%, -50%) rotate(-90deg) translate(50px) rotate(90deg); top: 50%; left: calc(0% - 2px); }
.slot-off_hand { transform: translate(-50%, -50%) rotate(45deg) translate(50px) rotate(-45deg); top: 21%; left: calc(100% - 21%); }
.slot-hands { transform: translate(-50%, -50%) rotate(135deg) translate(50px) rotate(-135deg); top: calc(100% - 21%); left: calc(100% - 21%); }
.slot-main_hand { transform: translate(-50%, -50%) rotate(-45deg) translate(50px) rotate(45deg); top: 21%; left: 21%; }

.player-achievements-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: absolute;
    bottom: -20px;
    transform: translateY(100%);
    left: 0;
    right: auto;
    margin: 0 auto;
    width: calc(100% + 50px);
}
.player-achievements-display .achievement-icon {
    width: 22px;
    height: 22px;
    background-color: var(--background-darker);
    border-radius: 50%;
    border: 1px solid var(--accent);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    overflow: hidden;
}
.player-achievements-display .achievement-icon img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.achievement-icon:hover {
    transform: scale(1.3);
    z-index: 10;
}
.opponent-arena-card .combat-card-body,
.bounty-card .combat-card-body,
.leaderboard-entry .combat-card-body,
#combat-player-card .combat-card-body {
    padding-top: 5px; 
}
.bounty-card .combat-avatar-wrapper,
.leaderboard-entry .combat-avatar-wrapper,
.opponent-arena-card .combat-avatar-wrapper {
    margin-bottom: 25px; /* Manter este espaço em cartões informativos */
}

/* Tamanho mais pequeno para cartões menos importantes */
.bounty-card .combat-avatar,
.leaderboard-entry .combat-avatar,
.opponent-arena-card .combat-avatar,
#combat-player-card .combat-avatar { /* Este avatar tb pode ficar a 80 para ser consistente*/
    width: 80px; 
    height: 80px;
}

/* Escalar equipamento e conquistas em uníssono com o avatar */
.bounty-card .combat-equipment-slots,
.leaderboard-entry .combat-equipment-slots,
.opponent-arena-card .combat-equipment-slots {
    width: 90px;
    height: 90px;
}
.bounty-card .combat-equipment-slot,
.leaderboard-entry .combat-equipment-slot,
.opponent-arena-card .combat-equipment-slot {
    width: 24px;
    height: 24px;
}
.bounty-card .achievement-icon,
.leaderboard-entry .achievement-icon,
.opponent-arena-card .achievement-icon {
    width: 20px;
    height: 20px;
}

/* Espaço para nome do jogador nos cartões pequenos */
.bounty-card .combat-identity,
.leaderboard-entry .combat-identity,
.opponent-arena-card .combat-identity {
    margin-top: 8px; /* Adiciona uma pequena margem em cima */
}
.bounty-card .combat-card-body { padding-bottom: 1rem; }
.bounty-card-reward strong { color:gold; margin:0 .4ch } 
.bounty-card-reward svg {width:2.1vmin}
.bounty-card-placer, .bounty-card-reward {
    padding-bottom: unset; margin:auto}

/* Ajustes Finais ao Cartão de COMBATE para evitar que os adornos tapem a info */
#combat-player-card .combat-avatar-wrapper {
   margin-bottom: 28px; /* espaço suficiente para as medalhas aparecerem por baixo */
}

.conclusion-summary-text {
    text-align: center;
    padding: 10px 20px;
    font-size: 1.1em;
    font-style: italic;
    color: #f0f0f0;
    line-height: 1.5;
}
.reward-value.positive, .positive {
    color: #2ecc71; /* Green */
}
.reward-value.negative, .negative {
    color: #e74c3c; /* Red */
}
#prpg-gender-update-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url('/wp-content/plugins/portugal-rpg/assets/images/city_buildings/battleground.webp');
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: #f0e6d2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    overflow-y: auto;
}

/* --- Content Box Styling --- */
#prpg-gender-update-overlay .prpg-start-box {
    width: 100%;
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid #3a2a1f;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* CRITICAL FIX: Ensures padding is included in the width, preventing overflow. */
    box-sizing: border-box; 
}

/* --- Title and Subtitle Styling --- */
#prpg-gender-update-overlay .prpg-game-title,
#prpg-gender-update-overlay .prpg-game-subtitle {
    display: block !important;
    color: #fff !important;
    position: relative !important;
    z-index: 10 !important;
}

#prpg-gender-update-overlay .prpg-game-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    color: #e5c100;
    margin-bottom: 0.5rem;
}

#prpg-gender-update-overlay .prpg-game-title,
#prpg-gender-update-overlay .prpg-game-subtitle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #e5c100 !important;
    margin: 0 0 1rem 0 !important;
}

#prpg-gender-update-overlay .prpg-start-divider {
    width: 80%;
    border-color: rgba(229, 193, 0, 0.3);
    margin-bottom: 2rem;
}

/* --- Gender Card List --- */
#prpg-gender-update-overlay .prpg-gender-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    width: 100%;
}

/* --- Individual Gender Card Styling --- */
.prpg-gender-card {
    background: rgba(22, 23, 24, 0.85);
    border: 1px solid #3a2a1f;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    width: 300px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.prpg-gender-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    border-color: #d4a15e;
}

.prpg-gender-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.75rem;
    color: #e5c100;
    margin-top: 0;
    margin-bottom: 1rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.gender-image-placeholder {
    height: 300px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #3a2a1f;
}

.gender-image-placeholder img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.7) grayscale(0.2);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.prpg-gender-card:hover .gender-image-placeholder img {
    opacity: 1;
    filter: brightness(1) grayscale(0);
    transform: scale(1.05);
}

.prpg-gender-card .prpg-action-button {
    margin-top: auto;
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
    background: #d4a15e;
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.prpg-gender-card .prpg-action-button:hover {
    background: #e5c100;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    #prpg-gender-update-overlay .prpg-start-box {
        padding: 1.5rem;
    }

    #prpg-gender-update-overlay .prpg-gender-list {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .prpg-gender-card {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    #prpg-gender-update-overlay .prpg-game-title {
        font-size: 2rem;
    }

    #prpg-gender-update-overlay .prpg-game-subtitle {
        font-size: 1rem;
    }

    #prpg-gender-update-overlay .prpg-start-box {
        padding: 1rem;
    }
}
.prpg-3d-canvas-placeholder {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
}

.prpg-3d-canvas-placeholder {
    width: 100%;
    height: 100%;
}

/* Specific styling for the character panel */
# .prpg-3d-canvas-placeholder {
width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.prpg-status-bars-overlay {
    width: 90%;
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(0,0,0,0.6);
    padding: 8px;
    border-radius: 6px;
    backdrop-filter: blur(2px);
}
.prpg-bar-container {
    height: 14px;
    background: #000;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    border: 1px solid #444;
}
.prpg-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}
.prpg-hp-fill { background: linear-gradient(90deg, #8b0000, #ff4444); }
.prpg-mp-fill { background: linear-gradient(90deg, #00008b, #4444ff); }
.prpg-xp-fill { background: linear-gradient(90deg, #b8860b, var(--prpg-primary)); }
.prpg-bar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: -1px;
    font-size: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    line-height: 14px;
}
.prpg-char-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--prpg-border);
}
.prpg-control-btn {
    background: var(--prpg-bg-light);
    border: 1px solid var(--prpg-border);
    color: var(--prpg-text-main);
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
}
.prpg-control-btn:hover {
    background: var(--prpg-primary-dim);
    border-color: var(--prpg-primary);
    color: #fff;
    transform: translateY(-2px);
}
.prpg-control-btn i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
#prpg-character-class-image-container .prpg-3d-canvas-placeholder:hover {
    transform: scale(1.05);
}
/* ==========================================================================
   Player Spy/Inspect Modal
   ========================================================================== */

/*
--- MODAL OVERLAY AND MAIN WINDOW ---
These rules control the dark backdrop and the main modal container.
*/
#prpg-inspect-modal-overlay {
    background-color: rgba(10, 12, 15, 0.85); /* Dark, semi-transparent background */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari support */
}

#prpg-inspect-modal {
    width: 95%;
    max-width: 950px;
    height: auto;
    max-height: 90vh; /* Prevents overflow on smaller screens */
    background-color: var(--panel, #141416); /* Dark panel background from your theme */
    border: 1px solid var(--accent, #d4a15e); /* Use your theme's accent color for the border */
    border-radius: var(--radius, 12px); /* Consistent rounded corners */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

#prpg-inspect-modal .prpg-modal-header {
    background: rgba(0,0,0,0.3); /* Transparent dark header */
    color: var(--accent, #d4a15e);
    border-bottom: 1px solid var(--border);
}

#prpg-inspect-modal .prpg-modal-header h3 {
    font-family: var(--font-headings);
    color: inherit;
}

#prpg-inspect-modal .prpg-modal-close-btn {
    color: var(--muted);
}
#prpg-inspect-modal .prpg-modal-close-btn:hover {
    color: white;
}

#prpg-inspect-modal .prpg-modal-body {
    flex-grow: 1; /* Allow body to grow */
    overflow-y: auto; /* Enable scroll ONLY if content overflows */
    padding: clamp(1rem, 2vw, 1.5rem);
}

/* --- FIX ---
   Remove the forced light theme.
   Instead, style all text content to fit the game's dark theme directly. */
#prpg-inspect-content .stats-panel-content,
#prpg-inspect-content * {
    background-color: transparent !important; /* No light backgrounds */
    color: var(--text, #efe6d2); /* Default text color from your theme */
}


/* --- Spy/Inspect CONTENT STYLING --- */

/* This will be the direct child of the modal body when you render spy results */
#prpg-inspect-content {
    animation: fadeInCombat .4s ease-out; /* Use your existing combat fade-in */
}
#prpg-inspect-content hr, #prpg-inspect-content .stats-column h3{
 display:none
}
/* Ensure the overall layout maintains its structure */
#prpg-inspect-content .stats-layout-table,
#prpg-inspect-content .stats-layout-table tbody,
#prpg-inspect-content .stats-layout-table tr {
    display: flex; /* Changed to flexbox for better responsive control */
    flex-wrap: wrap;
    width: 100%;
}
#prpg-inspect-content .stats-layout-table td {
    border: none;
    padding: 0;
}

#prpg-inspect-content .stats-character-column {
    flex: 1 1 300px;
    text-align: center;
    border-right: 1px solid var(--border); /* Optional vertical divider */
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    box-sizing: border-box;
}

#prpg-inspect-content .stats-data-column {
    flex: 2 1 500px; /* Data column takes more space */
    min-width: 0;
}


/* -- Player Identity Block -- */
#prpg-inspect-content h2.character-name {
    color: white; /* Make the name stand out */
    font-family: var(--font-headings);
    font-size: 1.5rem;
}

#prpg-inspect-content .player-title {
    color: var(--accent); /* Consistent with game theme */
    font-weight: 700;
}

#prpg-inspect-content .character-class-display {
    color: var(--muted);
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* -- Class Image and Equipment Styling -- */
#prpg-inspect-content #prpg-equipped-items {
    max-width: none;
    width: 100%;
    margin-top: 1.5rem;
}

#prpg-inspect-content .equipped-items-grid .equipment-slot-wrapper {
    background: transparent;
    border: 1px solid var(--border, #3a2a1f);
}

/* -- Stats Display (Right column) --- */
#prpg-inspect-content .stats-grid-container-table,
#prpg-inspect-content .stats-grid-container-table tbody,
#prpg-inspect-content .stats-grid-container-table tr {
     display: block; /* Stack on mobile, which is default for stats section below */
}

/* All paragraphs in the stats data should now have dark-theme styling */
#prpg-inspect-content .stats-data-column p {
    color: var(--muted);
}
#prpg-inspect-content .stats-data-column p strong {
    color: var(--text);
}

/* Keep the hexgram's unique text colors as they are */
#prpg-inspect-content .hex-label-name,
#prpg-inspect-content .hex-label-value {
    fill: currentColor; /* Inherit the colors you set in your other rules */
}
#prpg-inspect-content .hex-label-name{
	color: #ffffff;
}
#prpg-inspect-content .stat-bar-container{
	   background-color: var(--prpg-secondary-bg);
}
#prpg-inspect-content .stats-column{
	border: 1px dashed white;
	text-align: left;
	color:#fff!important;
	border-radius:var(--radius);
	    width: 100%;
}
/* -- Mobile Responsiveness for Spy Window -- */
@media (max-width: 900px) {
    #prpg-inspect-content .stats-layout-table,
    #prpg-inspect-content .stats-layout-table tbody,
    #prpg-inspect-content .stats-layout-table tr {
        flex-direction: column; /* Stack columns on smaller screens */
    }

    #prpg-inspect-content .stats-character-column {
        border-right: none;
        border-bottom: 1px solid var(--border); /* Horizontal divider */
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }

}
#guild-war-panel > h3 {
    color: var(--accent);
    font-size: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
#guild-war-panel > p {
    text-align: center;
    color: var(--muted);
    max-width: 700px;
    margin: 1rem auto 2rem;
    line-height: 1.6;
}

#Guild.tab-content {
    max-width: 1800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1rem, 2vw, 2rem);
    box-sizing: border-box;
}
#Quests.tab-content,
#Arena.tab-content {
    max-width: 1800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1rem, 2vw, 2rem);
    box-sizing: border-box;
}
#prpg-arena-container {
    width: 100%;
    text-align: center;
}
#Arena h2,
#Arena h3 {
    color: var(--accent, #d4a15e);
    font-family: var(--font-headings);
    letter-spacing: 1px;
}

#Arena h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem; /* Closer to subsections */
}

#Arena h3 {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border, #3a2a1f);
    margin: 0 0 1rem 0; /* Consistent margin */
}

#Arena p {
    color: var(--muted, #c9b88f);
    line-height: 1.6;
    max-width: 600px; /* Constrain paragraph width for readability */
    margin: 0 auto 1.5rem auto; /* Center text blocks */
}

.accepted-quests-section .quest-list {
    display: grid;
    /* This is the same responsive column setup as your main list */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    
    /* These properties center the items within the grid */
    align-content: center;
    justify-items: center; 
}
#Quests.tab-content {
    max-width: 1800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1rem, 2vw, 2rem);
    box-sizing: border-box;
}
#Quests h2,
#Quests .quest-log-container {
    width: 100%;
    text-align: center;
	max-width: none;
}
#Quests h2,
#Quests h3 {
    color: var(--accent, #d4a15e);
    font-family: var(--font-headings);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #3a2a1f);
    letter-spacing: 1px;
}

#Quests h2 { font-size: 2rem; }
#Quests h3 { font-size: 1.5rem; }

#Quests hr {
    width: 80%;
    margin: 3rem auto;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(212, 160, 94, 0), rgba(212, 160, 94, 0.5), rgba(212, 160, 94, 0));
}

#CityHall .building-card-item,
#Guild .guild-card {
    color: #FFFFFF !important; /* Set a default white for all text elements inside the card */
}
.quest-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    /* Create responsive columns that are at least 400px wide and expand */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    /* Center the cards horizontally within their grid cells */
    justify-items: center; 
}

/* Specific overrides to ensure headlines, descriptions and stats also comply */
#CityHall .building-card-item .building-name,
#CityHall .building-card-item .building-description,
#CityHall .building-card-item .building-info p {
    color: #FFFFFF !important;
}

#Guild .building-card .card-content h4 {
  color: var(--prpg-title-color, #fff); /* Usa variável, para garantir que as headings do tema podem ser overridden*/ 
}
#Guild .guild-card .card-content h4, #Guild .guild-card .card-content p, #Guild .guild-card .card-content .building-bonus, #Guild .guild-card .card-content .building-cost, #Guild .guild-card .card-content h5 {
  color: var(--prpg-title-color, #fff) !important;
}

#Guild .guild-card .card-content p {
   color: #ccc;/* para textos  secundários, é só deixar aqui se ficar bom ou  passar pra #FFF*/
   line-height: 1.5; /* Aumentar  a readability*/ 
}

/* Ensure 'strong' elements stand out without losing the white base, use the theme's highlight color */
#CityHall .building-info p strong, #CityHall p.building-description strong {
    color: var(--accent);
}
.city-buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.building-card-item {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.building-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.building-card-item .building-card-image {
  position: relative;
  height: 160px;
  background-color: #000;
  overflow: hidden;
}

.building-card-item .building-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.building-card-item:hover .building-card-image img {
  transform: scale(1.1);
}

/* Camada mais escura para melhor legibilidade, mas opcional... */
.building-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}

/* Mostra o nível no canto da imagem */
.building-card-image .building-level-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0,0,0,0.7);
  color: var(--accent, #f0c419);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8em;
  font-weight: bold;
  z-index: 1; /* sobre o linear-gradient - after*/
}

.building-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Empura o b´nus de informação sempre que haja mais espaço, de modo a fica em baixo */
}

.building-name !important {
  font-family: var(--font-headings);
  font-size: 1.25rem;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.building-card-item.built .building-name {
    color: var(--accent);
}

.building-description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  flex-grow: 1;
}

/* Área que diz os custos da informação da estrutura */
.building-info {
  background-color: var(--panel);
  padding: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.building-info p {
  margin: 0.25rem 0;
  font-size: 0.85rem;
}

.building-info p strong {
    color: var(--text);
}
#CityHall .building-card-item .building-name, #CityHall .building-card-item .building-description, #CityHall .building-card-item .building-info p {
    color: #000000 !important;
}
.upgrade-building-button {
  margin-top: auto;
}
#Achievements.tab-content.active {
	width: 100%;
	max-width: 1200px;
}
.Conquistas {
	    align-items: center;
    text-align: center;
}

#Achievements.tab-content {
  max-width: none; /* Override default tab content constraints */
  width: 100%;
}

/* Base grid layout */
.achievement-list {
  display: grid;
  /* Cria uma grelha responsiva. Cada coluna terá no mínimo 180px, crescendo para preencher espaço.
  Isto irá resultar em cerca de 5 colunas na maioria dos desktops. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem; /* Espaço entre os cartões */
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

/* Individual card styling */
.achievement-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.achievement-item.achieved {
  border-color: var(--accent); /* Cor de destaque para conquistados */
}

.achievement-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Icon Styling */
.achievement-item .achievement-icon {
  margin-bottom: 0.75rem;
}

.achievement-item .achievement-icon img {
  width: 72px;  /* Ligeiramente maior para a carta maior */
  height: 72px;
  object-fit: contain;
  border-radius: 50%;
  padding: 4px; /* Adiciona uma pequena margem interna */
  background: var(--panel);
  transition: all 0.3s ease;
  border: 2px solid var(--border);
}

/* Style for achieved achievement icons */
.achievement-item.achieved .achievement-icon img {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(212, 175, 94, 0.5);
}

/* Unachieved items are grayscaled until hover for a nicer effect */
.achievement-item.unachieved .achievement-icon img {
  filter: grayscale(80%) opacity(0.7);
}

.achievement-item:hover.unachieved .achievement-icon img {
  filter: grayscale(0) opacity(1);
}

/* Achievement Details */
.achievement-item .achievement-details {
  flex-grow: 1; /* Pushes the status to the bottom if needed */
  display: flex;
  flex-direction: column;
}

.achievement-item .achievement-details h3 {
  /* Use clamp() for font-size that scales with screen width */
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-family: var(--font-headings);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.achievement-item.achieved .achievement-details h3 {
    color: var(--accent);
}

.achievement-item .achievement-details p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

/* Achievement Status Text */
.achievement-item .achievement-details p.achievement-status {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: bold;
  margin-top: 0.75rem;
  flex-grow: 0;
}

.achievement-item.unachieved .achievement-details p.achievement-status {
  color: var(--prpg-danger-color, #c0392b); /* usa variáveis se disponíveis, senão fallback */
}
.achievement-item.achieved .achievement-details p.achievement-status {
  color: var(--prpg-success-color, #27ae60);
}

/*== RESPONSIVENESS for multiple screen sizes ==*/

/* Very Large screens (e.g. 1440p+) */
@media (min-width: 1600px) {
  .achievement-list {
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Smaller desktop / Tablet landscape */
@media (max-width: 1024px) {
  .achievement-list {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
  }
}

/* Tablets (portrait) */
@media (max-width: 768px) {
  .achievement-list {
      /* Show 3 columns */
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  #Achievements h2 {
    font-size: 1.5rem; /* Título mais pequeno no mobile */
  }
  .achievement-list {
    /* Show 2 columns on phones */
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .achievement-item {
      padding: 0.75rem;
  }
  .achievement-item .achievement-icon img {
    width: 60px;
    height: 60px;
  }
}
.character-name {
   white-space: nowrap;
}
.player-title {
   font-style: italic;
   font-size: 0.8rem;
   color: #AE9C3C;
   opacity: 0.9;
   font-weight: 500;
   margin-left: 0.3em;
}
.titles-list {
   list-style: none;
   padding: 0;
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.title-item {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.25rem;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: border-color 0.2s, box-shadow 0.2s;
}
.title-item.active-title {
   border-color: var(--accent);
   box-shadow: 0 0 10px rgba(212, 175, 94, 0.3);
}
.title-info strong {
   display: block;
   color: var(--accent);
   font-size: 1.1em;
   font-family: var(--font-headings);
}
.title-info small {
   font-size: 0.85em;
   color: var(--muted);
}
.character-identity-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.character-identity-block h2.character-name {
    margin: 0;
    line-height: 1.2;
    font-size: 1.8rem;
    order: 1; /* Name comes first */
}

.character-identity-block p.player-title {
    margin: 4px 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #AE9C3C;
    order: 2; /* Title comes second */
    font-weight: 700;
}

.character-identity-block p.character-class-display {
    margin: 4px 0 0 0;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--muted, #c9b88f);
    order: 3; /* Class comes third */
}
.character-name{
   white-space:nowrap;
}
.player-title {
   font-style: italic;
   font-size: 0.8rem;
   color: #AE9C3C;
   opacity: 0.9;
   font-weight: 500;
   margin-left: 0.3em;
}

.titles-list {
   list-style: none;
   padding: 0;
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.title-item {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.25rem;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: border-color 0.2s, box-shadow 0.2s;
}

.title-item.active-title {
   border-color: var(--accent);
   box-shadow: 0 0 10px rgba(212, 175, 94, 0.3);
}

.title-info strong {
   display: block;
   color: var(--accent);
   font-size: 1.1em;
   font-family: var(--font-headings);
}

.title-info small {
   font-size: 0.85em;
   color: var(--muted);
}

#Jobs .prpg-notice,
#Jobs h2 {
    grid-column: 1 / -1; 
    text-align: center;
}
.heal-text {
	color: Green;
}
#prpg-conclusion-modal {
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Force children to stay inside modal */
#prpg-conclusion-modal * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}
.prpg-notice.set-hq-notice p {
    color: var(--accent) !important;
    font-style: italic;
    font-size: 0.95em;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.territory-list {
    display: grid;
    /* Create responsive columns: on very wide screens up to 4, then 3, then 2, etc. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding-top: 1rem;
}
/* Individual territory card styling */
.territory-card {
    display: flex;
    flex-direction: column;
    background: var(--card, #1c1c1f);
    border: 1px solid var(--border, #3a2a1f);
    border-radius: var(--radius, 12px);
    overflow: hidden; /* Important for border-radius on images */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.territory-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border-color: var(--accent, #d4a15e);
}

/* 3. Card Image Section */
.territory-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: #000;
}

.territory-card .territory-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the area without being distorted */
    transition: transform 0.3s ease-out;
}

/* 4. Zoom effect on hover */
.territory-card:hover .territory-img {
    transform: scale(1.05);
}

/* 5. Card Content Wrapper */
.territory-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Makes content fill space, pushes buttons down */
}

/* 6. Typography within Card Content */
.territory-card-content h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--text, #efe6d2) !important;
    font-family: var(--font-headings);
    font-size: 1.3em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(240, 196, 25, 0.2);
}

.territory-card-content p.territory-description {
    font-size: 0.95em;
    color: var(--muted, #c9b88f);
    line-height: 1.5;
    flex-grow: 1; /* Description occupies available vertical space */
}

.territory-card-content p.territory-control-info {
    font-size: 0.9em;
    margin: 1rem 0;
    display: flex;
    align-items: center; /* Vertically align guild icon with text */
    gap: 0.5rem;
}

/* 7. Action Button container to force it to the bottom */
.territory-card .declare-war-button,
.territory-card .join-war-button {
    margin-top: auto; /* Pushes button to the end of the flex column */
    width: 100%;
}
.territory-card p {
    font-size: 0.95em;
    color: var(--prpg-text-color-secondary, #ccc);
    line-height: 1.5;
    flex-grow: 1; /* Pushes buttons to the bottom */
}
.territory-card p strong {
    color: var(--prpg-text-color-light, #fff);
}
.territory-card .guild-emblem-small {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid var(--prpg-border-color, #444);
}
/* Active War Details Box */
.active-war-details {
    border: 1px solid var(--prpg-danger-color, #e74c3c);
    background-color: rgba(231, 76, 60, 0.1);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
}
.war-status {
    color: var(--prpg-danger-color, #e74c3c);
    font-weight: bold;
    text-align: center;
    margin-top: 0;
}
.war-matchup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
}
.war-guild-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.war-guild-side strong {
    font-size: 1.1em;
    color: var(--prpg-text-color-light, #fff);
}
.war-guild-side span {
    font-size: 0.85em;
    color: var(--prpg-text-color-secondary, #ccc);
    background-color: rgba(0,0,0,0.2);
    padding: 3px 8px;
    border-radius: 10px;
}
.vs-separator {
    font-size: 2em;
    font-weight: 900;
    color: var(--prpg-danger-color, #e74c3c);
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.war-participant-status {
    text-align: center;
    color: var(--prpg-accent-color, #d4a15e);
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 0;
}
/* Buttons inside the cards */
.territory-card .prpg-action-button {
    width: 100%;
    margin-top: 1rem;
}
.declare-war-button {
    background-color: var(--prpg-danger-button-bg, #c0392b);
}
.declare-war-button:hover:not(:disabled) {
    background-color: var(--prpg-danger-button-hover-bg, #a93226);
}
.join-war-button {
    background-color: var(--prpg-gold-color, #f0c419);
    color: #1a1a1a;
}
.join-war-button:hover:not(:disabled) {
    background-color: #ffdd57;
}
.guild-emblem-small {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px;
}
.war-status {
    color: var(--color-danger);
    font-weight: bold;
}
.prpg-map-container .territory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.territory-shape {
    fill-opacity: 0.3;
    stroke: #fff;
    stroke-width: 2;
    stroke-opacity: 0.7;
    pointer-events: all;
    transition: fill-opacity 0.2s;
}
.territory-shape:hover {
    fill-opacity: 0.5;
}
.combat-card .status-effects {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    min-height: 28px;
}
.status-effect-icon {
    position: relative;
    width: 24px;
    height: 24px;
    background-size: contain;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.status-effect-icon .duration {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}
.log-char-monster .bleed-text, .log-char-player .bleed-text {
    color: #e74c3c;
    font-weight: bold;
}
.log-char-monster .poison-text, .log-char-player .poison-text {
    color: #2ecc71;
    font-weight: bold;
}
.tooltip-comparison {
    font-size: 0.9em;
    margin-top: 10px;
    padding: 8px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
}
.tooltip-comparison h5 {
    margin-top: 0;
}
.tooltip-comparison .comparison-line {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-weight: 500;
}
.tooltip-comparison .comparison-line.positive {
    color: #2ecc71; /* Verde brilhante para ganhos */
}
.tooltip-comparison .comparison-line.negative {
    color: #e74c3c; /* Vermelho para perdas */
}
.comparison-recommendation {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 10px;
    padding: 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.comparison-recommendation.positive {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}
.comparison-recommendation.negative {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}
.comparison-recommendation.neutral {
    background-color: rgba(149, 165, 166, 0.2);
    color: #95a5a6;
    border: 1px solid #95a5a6;
}
.travel-container {
    padding: 1rem;
}
.travel-container h2 {
    text-align: center;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.travel-container > p {
    text-align: center;
    color: var(--muted);
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
.city-travel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.city-travel-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.city-travel-item.cant-travel {
    opacity: 0.6;
}
.city-travel-info {
    flex-grow: 1;
    position: relative;
}
.city-travel-info .city-name {
    margin: 0;
    font-family: var(--font-headings);
    color: var(--text);
    font-size: 1.3rem;
}
.city-travel-info .city-description {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}
.city-travel-info .energy-cost {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #3498db; /* Azul para energia */
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.city-travel-action {
    flex-shrink: 0;
}
.city-travel-action .travel-button {
    min-width: 150px;
    font-size: 1rem;
}
@media (max-width: 600px) {
    .city-travel-item {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .city-travel-info .energy-cost {
        position: static;
        justify-content: center;
        margin-top: 0.5rem;
    }
    .city-travel-action {
        margin-top: 1rem;
    }
}
.chat-message .message-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.chat-message .message-timestamp {
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-family: var(--font-monospace);
    white-space: nowrap;
    margin-left: 10px;
}
.chat-message.my-message .message-header {
    flex-direction: row-reverse;
}
.chat-message .sender-name {
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.chat-message .sender-name:hover {
    text-decoration: underline;
    filter: brightness(1.2);
}
#prpg-inspect-modal {
    width: 95%;
    max-width: 950px; /* Um pouco mais largo para acomodar o painel completo */
    height: auto;
    max-height: 90vh;
    background-color: var(--panel, #141416);
    border: 1px solid var(--accent, #d4a15e);
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}
#prpg-inspect-modal .prpg-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}
/* --- INÍCIO DA CORREÇÃO --- */
/* Aplica um fundo claro ao conteúdo, semelhante ao painel de estatísticas original */
#prpg-inspect-content .stats-panel-content {
    background-color: #f9f9f9; /* Fundo claro para legibilidade */
    border: 1px solid #ccc;
    border-radius: 11px;
    padding: clamp(15px, 3vw, 25px);
    color: #333; /* Cor de texto padrão escura */
    box-shadow: none;
}
/* Garante que os títulos dentro do painel inspecionado tenham a cor correta */
#prpg-inspect-content h2,
#prpg-inspect-content h3 {
    color: #333; /* Cor escura para títulos */
}
/* Garante que o nome da classe tenha a cor correta */
#prpg-inspect-content .character-class-display {
    color: #555; /* Cinza escuro para o nome da classe */
}
/* Garante que o texto das estatísticas tenha a cor correta */
#prpg-inspect-content .stat-line,
#prpg-inspect-content .combat-bonus-line {
    color: #333; /* Cor de texto padrão escura */
}
/* Garante que os valores em negrito e os ícones tenham a cor correta */
#prpg-inspect-content .stat-line b,
#prpg-inspect-content .stat-line span,
#prpg-inspect-content .stat-line span#current-escudos {
    color: #000; /* Preto para valores de estatísticas */
}
/* Corrige a cor do texto das etiquetas do hexagrama */
#prpg-inspect-content .hex-labels .hex-label-name {
    fill: #555;
}
/* Garante que as barras de progresso sejam visíveis e estilizadas corretamente */
#prpg-inspect-content .stat-bar-container {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}
#prpg-inspect-content .stat-bar-text {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
/* ==========================================================================
   Chat Message Enhancements
   ========================================================================== */
.chat-message .sender-name {
    display: block;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}
.chat-message .sender-name:hover {
    text-decoration: underline;
    filter: brightness(1.2);
}
/* Cores específicas para os nomes nos canais */
.sender-name.chat-channel-color-global { color: #EAECEF; }
.sender-name.chat-channel-color-city { color: #81ECEC; }
.sender-name.chat-channel-color-guild { color: #55EFC4; }
.sender-name.chat-channel-color-party { color: #74B9FF; }
.sender-name.whisper { color: #FD79A8 !important; }
#prpg-chat-toggle-button-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
#prpg-chat-toggle-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    background: linear-gradient(145deg, var(--accent), var(--accent-dark));
    color: #fff;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
#prpg-chat-toggle-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.chat-notification-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background-color: #ff4d4d;
    border-radius: 50%;
    border: 2px solid var(--panel);
}
/* --- Container Principal do Chat --- */
#prpg-chat-container {
    position: absolute;
    bottom: 80px;
    right: 20px;
    z-index: 998;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#prpg-chat-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
#prpg-chat-window {
    width: 450px;
    max-width: 90vw;
    height: 500px;
    max-height: 70vh;
    background-color: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* --- Cabeçalho do Chat --- */
#prpg-chat-window .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--border);
    cursor: grab;
}
#prpg-chat-window .chat-header:active {
    cursor: grabbing;
}
#chat-window-title {
    font-family: var(--font-headings);
    font-weight: bold;
    color: var(--accent);
}
.chat-header-buttons button {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 5px;
}
.chat-header-buttons button:hover {
    color: #fff;
}
/* --- Corpo do Chat (Canais e Mensagens) --- */
.chat-body {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* Importante para o scroll interno */
}
.chat-channels {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-right: 1px solid var(--border);
}
.chat-channel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.2s ease;
}
.chat-channel-btn:hover {
    background-color: var(--glass);
    border-color: var(--border);
}
.chat-channel-btn.active {
    background-color: var(--accent);
    border-color: var(--accent-dark);
    box-shadow: 0 0 10px var(--accent);
}
.chat-messages-container {
    flex-grow: 1;
    position: relative;
}
.chat-log {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.chat-log.active {
    opacity: 1;
    visibility: visible;
}
.chat-message {
    display: flex;
    flex-direction: column;
}
.message-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.message-timestamp {
    font-size: 0.75em;
    color: #000000;
    font-family: var(--font-monospace);
}
.chat-message.my-message .message-header {
    flex-direction: row-reverse; /* Coloca o timestamp à esquerda para as próprias mensagens */
}
.message-content {
    font-size: 1em;
}
.chat-message.my-message {
    align-self: flex-end;
    background-color: var(--accent-dark);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.chat-message.other-message {
    align-self: flex-start;
    background-color: var(--card);
    border-bottom-left-radius: 5px;
}
/* Cores específicas para canais */
.chat-message[data-channel="global"] .sender-name { color: #000000; }
.chat-message[data-channel="city"] .sender-name { color: #81ecec; }
.chat-message[data-channel="guild"] .sender-name { color: #55efc4; }
.chat-message[data-channel="party"] .sender-name { color: #74b9ff; }
.chat-message[data-channel="whisper"] { border-left: 3px solid #fd79a8; }
.chat-message[data-channel="whisper"] .sender-name { color: #fd79a8; }
/* --- Rodapé do Chat (Input) --- */
.chat-footer {
    padding: 10px;
    border-top: 1px solid var(--border);
    background-color: rgba(0,0,0,0.3);
}
#prpg-chat-form {
    display: flex;
    gap: 10px;
}
#prpg-chat-input {
    flex-grow: 1;
    background: #1e1e1e;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 1rem;
}
#prpg-chat-input:focus {
    outline: none;
    border-color: var(--accent);
}
#prpg-chat-form button {
    background-color: var(--accent);
    color: #000;
    font-weight: bold;
}
.character-class-display {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    color: var(--muted, #c9b88f);
    margin-top: -15px; /* Puxa para mais perto do nome do personagem */
    margin-bottom: 20px;
    font-style: italic;
    text-align: center;
}
/* Estilos para os ícones de recursos no painel de estatísticas */
.stat-line {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo da linha */
}
.resource-icon {
    display: inline-block;
    width: 18px; /* Tamanho do ícone */
    height: 18px;
    margin-left: 8px; /* Espaço entre o número e o ícone */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}
.resource-icon.escudos {
    background-image: url('../images/icons/escudos.webp');
}
.resource-icon.renown {
    background-image: url('../images/icons/renown_icon.webp');
}
.reward-icon-xp,
.reward-icon-escudos,
.reward-icon-renown {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle; /* Aligns the icon with the text */
}
.reward-icon-xp {
    background-image: url('../images/icons/xp_star.webp');
}
.reward-icon-escudos {
    background-image: url('../images/icons/escudos.webp');
}
.reward-icon-renown {
    background-image: url('../images/icons/renown_icon.webp'); /* Assumindo que tem um ícone de renome nesta localização */
}
.rewards-list .reward-value.renown {
    color: #f7d794; /* Cor dourada clara para renome */
}
#daily-reward-icon-container {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 100;
}
#open-daily-reward-modal {
    font-size: 24px;
    padding: 8px 12px;
    position: fixed;
    border: 1px solid var(--border, #888);
    background: var(--panel, #141416);
    color: var(--text, #efe6d2);
    box-shadow: var(--shadow);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    top: 100px;
}
#open-daily-reward-modal .notification-dot {
    position: fixed;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background-color: #ff4d4d;
    border-radius: 50%;
    border: 2px solid var(--panel, #141416);
    box-shadow: 0 0 10px #ff4d4d;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* Oculta o overlay por defeito */
#daily-reward-modal-overlay {
    position: fixed;
    inset: 0; /* Equivalente a top:0; right:0; bottom:0; left:0; */
    background-color: rgba(10, 12, 15, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 1rem;
    display: none; /* Escondido por defeito, controlado via JS */
}
#daily-reward-modal {
    display: flex;
    flex-direction: column; /* Estrutura vertical: header, body (scroll), footer */
    width: 100%;
    max-width: 900px;
    height: 90%;
    max-height: 700px;
    background-color: var(--panel, #141416);
    border: 1px solid var(--accent, #d4a15e);
    border-radius: var(--radius, 8px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden; /* Essencial para que o border-radius funcione com o scroll */
}
#daily-reward-modal .prpg-modal-header {
    flex-shrink: 0; /* Impede que o header encolha */
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border, #3a2a1f);
}
#daily-reward-modal .prpg-modal-header h3 {
    color: var(--accent, #d4a15e);
    margin: 0;
}
#daily-reward-modal .prpg-modal-body {
    flex-grow: 1; /* Permite que o corpo cresça para preencher o espaço */
    overflow-y: auto; /* Adiciona a barra de scroll vertical QUANDO necessário */
    padding: 1.5rem;
}
#daily-reward-modal .prpg-modal-content {
    padding: 0;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
}
.calendar-day {
    background: var(--card, #161718);
    border: 1px solid var(--border, #3a2a1f);
    border-radius: var(--radius, 8px);
    padding: 0.75rem;
    text-align: center;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.reward-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 10px auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}
.calendar-day:hover .reward-icon {
    transform: scale(1.1);
}
.calendar-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.calendar-day.claimed .reward-icon {
    filter: grayscale(80%) opacity(0.6);
}
.calendar-day:hover::before {
    opacity: 1;
}
.calendar-day.claimed {
    background-color: rgba(45, 156, 81, 0.15);
    border-color: #2d9c51;
    opacity: 0.7;
}
.calendar-day.can-claim {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: var(--accent, #d4a15e);
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    transform: scale(1.05);
}
.day-number {
    font-family: var(--font-headings);
    font-weight: bold;
    font-size: 1.1em;
    color: #c0c0c0;
}
.reward-label {
    font-size: 0.85em;
    color: var(--muted, #c9b88f);
    margin-top: auto;
    line-height: 1.3;
}
.calendar-day.claimed .reward-label::after {
    content: '✔';
    color: #2d9c51;
    font-weight: bold;
    display: block;
    font-size: 1.5em;
    margin-top: 5px;
}
/* --- Rodapé do Modal --- */
.calendar-footer {
    flex-shrink: 0; /* Impede que o rodapé encolha */
    background: rgba(0,0,0,0.4);
    padding: 1.25rem;
    text-align: center;
    border-top: 1px solid var(--border, #3a2a1f);
}
.calendar-footer p {
    margin: 0 0 1rem 0;
    font-size: 1.1em;
    color: white;
}
.calendar-footer strong {
    color: var(--accent);
}
#claim-daily-reward-button {
    font-size: 1.2em;
    padding: 0.8rem 2rem;
	color: black;
}
/* --- Media Queries para Responsividade --- */
/* Tablets e ecrãs mais pequenos */
@media (max-width: 820px) {
    #daily-reward-modal {
        max-width: 95vw;
    }
    .calendar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .calendar-day {
        min-height: 100px;
        padding: 0.5rem;
    }
    .day-number {
        font-size: 1.2em;
    }
    .reward-label {
        font-size: 0.75em;
    }
	    .reward-icon {
        width: 40px;
        height: 40px;
    }
}
/* Telemóveis */
@media (max-width: 480px) {
    #daily-reward-icon-container {
        top: 10px;
        left: 10px;
    }
    #open-daily-reward-modal {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em telemóveis */
        gap: 5px;
    }
    .calendar-day {
        min-height: 90px;
    }
    .day-number {
        font-size: 0.9em;
    }
    .reward-label {
        font-size: 0.65em;
    }
    .calendar-footer p {
        font-size: 1em;
    }
    #claim-daily-reward-button {
        font-size: 1em;
        padding: 0.7rem 1.5rem;
    }
	    .reward-icon {
        width: 32px;
        height: 32px;
    }
}
.bounty-section {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 20px;
}
.bounty-section h3 {
    margin-top: 0;
    color: #ffd700; /* Dourado para destacar */
    text-align: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
#place-bounty-form {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha seguinte em ecrãs pequenos */
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
}
#place-bounty-form select,
#place-bounty-form input {
    flex-grow: 1;
    min-width: 150px; /* Garante que os inputs não fiquem demasiado espremidos */
}
.bounty-card-grid {
    display: grid;
    /* O minmax() já torna a grelha responsiva por si só */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}
.bounty-card {
    border: 1px solid rgba(255, 215, 0, 0.5);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.bounty-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
}
/* O header do cartão já é flex por defeito de .combat-card-header, vamos apenas ajustar espaçamentos */
.bounty-card .combat-card-header {
    gap: 10px;
    padding: 10px;
}
.bounty-card .combat-avatar-wrapper {
    width: 45px;
    height: 45px;
}
.bounty-card .combatant-name {
    font-size: 1rem; /* Tamanho base para telemóveis */
    margin-bottom: 2px;
}
.bounty-card .combatant-level {
    font-size: 0.8rem; /* Tamanho base para telemóveis */
}
.bounty-card .combat-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(40, 35, 20, 0.1) 0%, rgba(60, 50, 25, 0.3) 100%);
}
.bounty-card-reward {
    font-size: 1.3em; /* Tamanho base para telemóveis */
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.bounty-card-reward svg {
    width: 18px; /* Ícone mais pequeno para telemóveis */
    height: 18px;
    stroke: #ffd700;
    stroke-width: 1.5;
}
.bounty-card-placer {
    font-size: 0.8em; /* Tamanho base para telemóveis */
    color: #ccc;
    font-style: italic;
    margin: 0;
}
/* --- Media Queries para Ecrãs Maiores --- */
/* Para ecrãs maiores que um telemóvel (ex: tablets em modo retrato) */
@media (min-width: 576px) {
    .bounty-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .bounty-card .combatant-name {
        font-size: 1.1rem;
    }
    .bounty-card-reward {
        font-size: 1.4em;
    }
}
/* Para tablets e desktops pequenos */
@media (min-width: 768px) {
    .bounty-card .combat-avatar-wrapper {
        width: 50px;
        height: 50px;
    }
    .bounty-card .combatant-name {
        font-size: 1.2rem;
    }
    .bounty-card .combatant-level {
        font-size: 0.9rem;
    }
    .bounty-card-reward {
        font-size: 1.6em; /* Aumenta o destaque da recompensa */
        gap: 8px;
    }
    .bounty-card-reward svg {
        width: 22px; /* Aumenta o ícone */
        height: 22px;
    }
    .bounty-card-placer {
        font-size: 0.85em;
    }
}
#prpg-attribute-assignment-container {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(0.9) contrast(1.1);
    padding: 25px;
    border: 2px solid #5a4b3d;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    color: #000000;
    font-family: serif;
    max-width: 600px;
    margin: 30px auto;
    position: relative;
    overflow: hidden;
}
.combat-avatar-wrapper .combat-equipment-slots {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 125%;
    height: 125%;
    pointer-events: none;
}
/* 3. Style for each individual equipment slot icon. */
.combat-avatar-wrapper .combat-equipment-slot {
    position: absolute;
    width: 28px;
    height: 28px;
    background: #2a2a35;
    border: 1px solid #7a7a8c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* This centers the icon on its calculated position point. */
    transform: translate(-50%, -50%);
    /* Re-enable pointer events for the icons so their tooltips will work. */
    pointer-events: auto;
    z-index: 2;
    transition: all 0.2s ease-in-out;
}
/* 4. Hover effect to make the selected icon pop. */
.combat-avatar-wrapper .combat-equipment-slot:hover {
    transform: translate(-50%, -50%) scale(1.2);
    border-color: #fff;
    z-index: 10;
}
/* 5. Ensure the image inside the slot fits correctly. */
.combat-avatar-wrapper .combat-equipment-slot img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    border-radius: 50%;
}
/*
--- Heptagon Positioning Logic ---
The following positions place the 7 slots in a circle around the center (50%, 50%)
of the .combat-avatar-wrapper. A radius of ~58% is used to place them just outside the avatar.
The angles are calculated by dividing 360 degrees by 7 slots (~51.4 degrees per step),
starting from the top (-90 degrees).
*/
/* Position 1: Top (Angle: 270 deg or -90 deg) */
.combat-equipment-slot.slot-head {
    top: -8%;
    left: 50%;
}
/* Position 2: Top-Right (Angle: ~321.4 deg) */
.combat-equipment-slot.slot-hands {
    top: 22%;
    left: 95%;
}
/* Position 3: Mid-Right (Angle: ~12.8 deg) */
.combat-equipment-slot.slot-main_hand {
    top: 63%;
    left: 107%;
}
/* Position 4: Bottom-Right (Angle: ~64.3 deg) */
.combat-equipment-slot.slot-legs {
    top: 98%;
    left: 82%;
}
/* Position 5: Bottom-Left (Angle: ~115.7 deg) */
.combat-equipment-slot.slot-feet {
    top: 98%;
    left: 18%;
}
/* Position 6: Mid-Left (Angle: ~167.1 deg) */
.combat-equipment-slot.slot-off_hand {
    top: 63%;
    left: -7%;
}
/* Position 7: Top-Left (Angle: ~218.6 deg) */
.combat-equipment-slot.slot-chest {
    top: 22%;
    left: 5%;
}
/* --- Responsiveness for smaller screens --- */
@media (max-width: 600px) {
    #daily-reward-modal {
        max-height: 85vh; /* Mais altura em telemóveis */
    }
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .calendar-day {
        min-height: 120px;
    }
    .reward-icon {
        width: 40px;
        height: 40px;
    }
}
:root {
    --prpg-primary: #d4a15e; 
    --prpg-primary-hover: #f0c419;
    --prpg-bg-darkest: #080a0e;
    --prpg-bg-dark: #101318;
    --prpg-bg-panel: rgba(22, 27, 34, 0.85); /* Fundo com Efeito Vidro */
    --prpg-bg-panel-solid: #161b22;
    --prpg-text-main: #e2e8f0;
    --prpg-text-muted: #94a3b8;
    --prpg-border: rgba(212, 161, 94, 0.4);
    --prpg-border-light: rgba(255, 255, 255, 0.08);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 16px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 12px rgba(212, 161, 94, 0.25);
    --transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body.prpg-game-body {
    background-color: var(--prpg-bg-darkest);
    color: var(--prpg-text-main);
}
.prpg-interface-container {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    height: 95vh;
}
.prpg-panel {
    background: var(--prpg-bg-panel);
    border: 1px solid var(--prpg-border);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    padding: 15px;
    position: relative;
    overflow: hidden;
}
.prpg-panel, .quest-item, .building-card-item, .job-item, .combat-card, .territory-card, .prpg-class-card, .guild-list-card, .opponent-arena-card {
    background: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--prpg-border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition) !important;
}
#prpg-character-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, var(--prpg-bg-panel) 0%, var(--prpg-bg-dark) 100%);
    border: 1px solid var(--prpg-primary-dim);
}
.prpg-char-header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    position: absolute;
    top: 10px;
    z-index: 10;
}
.prpg-char-name {
    font-size: 1.2rem;
    color: var(--prpg-primary);
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.prpg-3d-container {
    width: 100%;
    height: 400px;
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#Blacksmith {
	padding: 1rem;
    background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 0 15px rgba(200, 160, 90, 0.25);
    color: var(--text);
    width: 88%;
    max-width: -webkit-fill-available;
}
#blacksmith-inventory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  flex-direction: column-reverse;
  align-content: stretch;
}
#Blacksmith h2, #Blacksmith h3, #Blacksmith h4 {
    color: white;
    text-shadow: 0 1px 2px #ffffff;
    margin-bottom: 0.5rem;
}
#Blacksmith p {
  color: var(--muted);
}
#Blacksmith ul.inventory-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
#Blacksmith .inventory-item.blacksmith-item,
#Blacksmith .inventory-item.salvage-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-size: clamp(0.75rem, 0.85vw, 0.9rem);
    color: white;
}
#Blacksmith .inventory-item.blacksmith-item:hover,
#Blacksmith .inventory-item.salvage-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(210, 175, 100, 0.4);
}
#Blacksmith .item-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#Blacksmith .item-icon-wrapper {
  margin-bottom: 0.5rem;
}
#Blacksmith .item-icon-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
#Blacksmith .item-name {
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: 0 0 2px #000;
}
#Blacksmith .item-enhancement-info {
  margin-top: 0.5rem;
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  color: var(--muted);
}
#Blacksmith .item-actions {
  margin-top: auto;
  text-align: center;
}
#Blacksmith .item-actions .prpg-action-button {
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border: none;
  color: #1a1a1a;
  font-weight: bold;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
#Blacksmith .item-actions .prpg-action-button:hover {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transform: scale(1.03);
}
#Blacksmith .item-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
#Blacksmith .item-filter-controls select,
#Blacksmith .item-filter-controls input {
  background: #1e1e1e;
  border: 1px solid #4a3b2a;
  color: var(--text);
  padding: 0.4rem;
  border-radius: 4px;
  font-size: 0.85rem;
}
#Blacksmith .item-filter-controls select:focus,
#Blacksmith .item-filter-controls input:focus {
  outline: none;
  border-color: var(--accent);
}
#Blacksmith #blacksmith-salvage-section {
  background: var(--panel);
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
#Blacksmith .salvage-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
#Blacksmith .salvage-actions-header label {
  font-size: 0.85rem;
  color: var(--muted);
}
#Blacksmith .residue-exchange-container {
  background: var(--panel);
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}
#Blacksmith .exchange-options-list {
  display: grid;
  gap: 0.5rem;
}
#Blacksmith .exchange-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1b1b1b;
  border: 1px solid #4a3b2a;
  padding: 0.5rem;
  border-radius: 4px;
}
#Blacksmith .exchange-option span {
    color: white;
}
#blacksmith-enhance-list-container .inventory-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
#blacksmith-enhance-list-container .inventory-item.blacksmith-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-size: clamp(0.75rem, 0.85vw, 0.9rem);
}
#blacksmith-enhance-list-container .inventory-item.blacksmith-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(210, 175, 100, 0.4);
}
@media (max-width: 600px) {
  #Blacksmith .item-filter-controls {
    flex-direction: column;
  }
  #Blacksmith ul.inventory-list,
  #blacksmith-enhance-list-container .inventory-list,
  #Blacksmith .exchange-options-list {
    grid-template-columns: 1fr;
  }
}
.player-affix-riposte::before,
.player-affix-kingslayer::before {
    transform: scale(1.05); /* Makes this ring slightly larger */
}
.player-affix-riposte::before {
    opacity: 1;
    box-shadow: 0 0 14px 4px #f0c419; /* Sharp yellow outer glow */
    animation: pulseGlow 1.2s infinite ease-in-out;
}
.player-affix-kingslayer::before {
    opacity: 0.9;
    border: 3px solid transparent;
    border-image: conic-gradient(#a335ee, #f0c419, #a335ee) 1; /* Regal spinning border */
    animation: spin 6s linear infinite;
}
/* ==========================================================================
   3. INNER RING AFFIXES (using ::after)
   These effects are scaled to be slightly smaller, sitting inside the outer ring.
   Best for inner glows, solid borders, and background patterns.
   ========================================================================== */
/* Apply the scaling to all inner ring affixes */
.player-affix-unbreakable::after,
.player-affix-executioner::after,
.player-affix-treasure_hunter::after {
    transform: scale(0.95); /* Makes this ring slightly smaller */
}
.player-affix-unbreakable::after {
    opacity: 1;
    border: 4px solid #e0e0e0; /* Solid, shield-like border */
    box-shadow: 0 0 10px #fafafa;
    animation: flicker 2s infinite;
}
.player-affix-executioner::after {
    opacity: 0.9;
    box-shadow: inset 0 0 20px 8px #c0392b; /* Menacing inner glow */
    animation: pulseGlow 1.8s infinite ease-out;
}
/* ==========================================================================
   4. SPECIAL CASE: DUAL-LAYER AFFIX (Treasure Hunter)
   This affix is designed to use BOTH layers for a unique parallax effect.
   We explicitly style both ::before and ::after for it.
   ========================================================================== */
.player-affix-treasure_hunter::before {
    transform: scale(1.05); /* Outer ring of dots */
    opacity: 0.7;
    background-image: radial-gradient(gold 1px, transparent 1px);
    background-size: 15px 15px;
    background-position: 0 0;
    animation: spin 5s linear infinite;
}
.player-affix-treasure_hunter::after {
    transform: scale(0.95); /* Inner ring of dots */
    opacity: 0.7;
    background-image: radial-gradient(gold 1px, transparent 1px);
    background-size: 15px 15px;
    background-position: 7.5px 7.5px; /* Offset for parallax */
    animation: spin-reverse 5s linear infinite; /* Spin opposite direction */
}
#guild-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 16px;
    font-family: 'Nunito Sans', sans-serif;
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
#guild-search-btn:hover {
    background-color: #fff;
    color: #000;
}
#guild-search-btn svg {
    vertical-align: middle;
    stroke: currentColor;
}
#prpg-class-selection-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align to top to see content sooner */
    min-height: 100vh;
    padding: 4rem 2rem; /* More padding at the top */
    box-sizing: border-box;
    /* Background Image Setup */
    background-image: url(/wp-content/plugins/portugal-rpg/assets/images/city_buildings/town.webp);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: 'Cinzel', serif; /* A more thematic font */
}
/* Dark overlay to improve text readability over the background */
#prpg-class-selection-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(18, 22, 28, 0.7) 0%, rgba(10, 12, 15, 0.95) 100%);
    z-index: 1;
}
/* Wrapper for the actual content, to sit above the overlay */
.class-selection-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    text-align: center;
    color: #E0C9A6; /* Parchment text color */
}
.class-selection-content-wrapper h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 5px rgba(255, 215, 100, 0.5);
    letter-spacing: 2px;
    color: white;
    font-family: serif;
}
.class-selection-content-wrapper .subtitle {
    font-size: 1.2rem;
    color: #b0c4de; /* Light steel blue for subtitle */
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Lato', sans-serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
/* Responsive grid for the class cards */
.prpg-class-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    width: 100%;
    justify-content: center; /* This centers the grid items horizontally */
}
/* The individual class card styling */
.prpg-class-card {
    display: flex;
    flex-direction: column;
    background: rgba(10, 14, 18, 0.85);
    border: 1px solid rgba(128, 152, 179, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-align: center; /* Center text inside the card */
}
.prpg-class-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    border-color: rgba(224, 201, 166, 0.6);
}
.quest-item:hover, .building-card-item:hover, .job-item:hover, .territory-card:hover, .guild-list-card:hover, .opponent-arena-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.6), var(--shadow-glow) !important;
    border-color: var(--prpg-border) !important;
}
/* MODIFIED: Card Header to stack items vertically */
.prpg-class-card .card-header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(128, 152, 179, 0.2);
    padding-bottom: 1rem;
}
/* MODIFIED: H2 (Title) now has margin-bottom */
.prpg-class-card h2 {
    /* Core Typography */
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 4vw, 1.6rem);
    font-weight: 900; /* Use the heaviest weight available */
    color: #000000; /* Brighter color */
    text-transform: uppercase;
    letter-spacing: 1px;
    /* A very strong, clean drop-shadow */
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
    /* Spacing */
    margin: 0 0 1rem 0;
    border-bottom: 1px solid rgba(224, 201, 166, 0.3);
    padding-bottom: 0.75rem;
}
/* MODIFIED: Class Image styling */
.prpg-class-card .class-image {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #8098b3;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.prpg-class-card .class-description {
    font-family: 'Lato', sans-serif;
    color: #b0c4de;
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
    flex-grow: 1; /* Makes description take available space */
    text-align: center;
}
.prpg-class-card .class-stats {
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    color: #9ab0c9;
    background: rgba(0,0,0,0.2);
    padding: 0.75rem;
    border-radius: 6px;
    margin: 1rem 0;
    text-align: left; /* Keep stats left-aligned for readability */
}
.prpg-class-card .class-stats p {
    margin: 0.5rem 0;
}
.prpg-class-card .class-stats strong {
    color: #000000;
    font-weight: 600;
}
/* Button is pushed to the bottom of the card */
.prpg-class-card .select-class-button {
    margin-top: auto; /* This is the magic to align buttons */
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #prpg-class-selection-container {
        padding: 2rem 1rem;
    }
    .class-selection-content-wrapper h1 {
        font-size: 2.5rem;
    }
    .class-selection-content-wrapper .subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .prpg-class-list {
        grid-template-columns: 1fr; /* Stack cards on mobile */
        gap: 1.5rem;
    }
}
/*
==============================================
 Character Creation Screen Styling (Name Selection)
==============================================
*/
/* --- Main Screen Container & Background --- */
#prpg-name-character-container.prpg-start-screen {
    /* Define posição fixa nos 4 cantos com 25px de distância */
    position: fixed;
    top: 25px;
    bottom: 25px;
    left: 25px;
    right: 25px;
    
    /* Remove width/height fixos para respeitar os offsets acima */
    width: auto;
    height: auto;

    /* Estilo do Background */
    background-image: url(/wp-content/plugins/portugal-rpg/assets/images/city_buildings/battleground_1.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1a202c;
    
    /* Arredondamento */
    border-radius: 11px;
    /* Essencial: Esconde o que estiver fora das bordas arredondadas (como o conteúdo ou imagem) */
    overflow: hidden; 
    /* Adiciona uma sombra para destacar a "janela" do fundo da página real */
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.8); 

    /* Layout do Conteúdo Interno */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
}
/* --- Content Box Styling --- */
#prpg-name-character-container .prpg-start-box {
    width: 90%;
    max-width: 500px; /* Prevents the box from being too wide on large screens */
    padding: 2rem 3rem;
    text-align: center;
    /* 
     * Best Practice (UI/UX): Use a semi-transparent background and backdrop filter
     * to create a "frosted glass" effect. This separates the content from the
     * background, dramatically improving readability while looking modern.
     */
    background-color: rgba(26, 32, 44, 0.85); /* Dark, semi-transparent slate color */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
}
/* --- Thematic Typography & Elements --- */
#prpg-name-character-container .prpg-game-title {
    color: #e5c100; /* A rich gold color for the title */
    font-family: 'Cinzel', serif; /* A great fantasy/epic font (add to your theme if possible) */
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
#prpg-name-character-container .prpg-game-subtitle {
    color: #a0aec0; /* A lighter, muted grey for subtitles */
    font-size: 1.1rem;
    margin-top: 0;
    font-style: italic;
}
#prpg-name-character-container .prpg-start-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(229, 193, 0, 0), rgba(229, 193, 0, 0.75), rgba(229, 193, 0, 0));
    margin: 2rem 0;
}
/* --- Form Styling --- */
#prpg-set-name-form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Adds space between form elements */
}
#prpg-set-name-form label {
    font-weight: bold;
    color: #cbd5e0;
    font-size: 1rem;
    text-align: left;
}
#prpg-set-name-form #character_name_input {
    width: 100%;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #4a5568; /* Dark grey border */
    border-radius: 4px;
    color: #ecf0f1;
    font-size: 1.1rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}
/* Best Practice (UX): Clear focus state for better usability */
#prpg-set-name-form #character_name_input:focus {
    outline: none;
    border-color: #e5c100; /* Gold border on focus */
    box-shadow: 0 0 0 3px rgba(229, 193, 0, 0.3);
}
#prpg-set-name-form .description {
    font-size: 0.8rem;
    color: #718096; /* Darker grey for helper text */
    margin-top: -0.5rem; /* Pull it closer to the input field */
    text-align: left;
}
#prpg-set-name-form .prpg-action-button {
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #e5c100;
    color: #1a202c; /* Dark text on gold button for high contrast */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 1rem;
}
.prpg-action-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #3d2e23, #291f16) !important;
    color: var(--prpg-primary-hover) !important;
    border-color: var(--prpg-primary-hover) !important;
    box-shadow: var(--shadow-glow) !important;
    transform: translateY(-2px) !important;
}
/* Best Practice (UX): Provide clear visual feedback on interaction */
#prpg-set-name-form .prpg-action-button:hover:not(:disabled) {
    background-color: #d6b300; /* Slightly darker gold on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(229, 193, 0, 0.2);
}
#prpg-set-name-form .prpg-action-button:disabled {
    background-color: #718096;
    cursor: not-allowed;
    opacity: 0.6;
}
#prpg-login-screen .prpg-start-box {
    width: 90%;
    max-width: 450px;
    padding: 2.5rem;
    background-color: rgba(26, 32, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.login-register-container {
    width: 100%;
    margin-top: 1.5rem;
}
.login-register-tabs {
    display: flex;
    border-bottom: 1px solid #7f8c8d;
    margin-bottom: 1.5rem;
} 
.login-register-tabs .tab-link {
    background: none;
    border: none;
    color: #bdc3c7;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    flex-grow: 1;
}
.login-register-tabs .tab-link:hover {
    color: #ecf0f1;
}
.login-register-tabs .tab-link.active {
    color: #35a594;
    border-bottom-color: #35a594;
}
.prpg-form-container {
    display: none;
}
.prpg-form-container.active {
    display: block;
}
.prpg-form-intro {
    font-style: italic;
    color: #bdc3c7;
    margin-bottom: 1.5rem;
    text-align: center;
}
#loginform, #prpg-register-form {
    text-align: left;
}
#loginform p, #prpg-register-form p {
    margin-bottom: 1rem;
}
#loginform label, #prpg-register-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #ecf0f1;
    font-weight: bold;
}
#loginform input[type="text"], 
#loginform input[type="password"],
#prpg-register-form input[type="text"],
#prpg-register-form input[type="email"],
#prpg-register-form input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    background: #2c3e50;
    border: 1px solid #7f8c8d;
    color: #ecf0f1;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}
#loginform input[type="submit"], 
#prpg-register-form input[type="submit"] {
    width: 100%;
    padding: 1rem;
    border: none;
    background-color: #35a594;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    font-size: 1.1rem;
    margin-top: 1rem;
}
#loginform input[type="submit"]:hover,
#prpg-register-form input[type="submit"]:hover {
     background-color: #46ad9d;
}
.prpg-login-links {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}
.prpg-login-links a {
    color: #3498db;
    text-decoration: none;
}
.prpg-login-links a:hover { text-decoration: underline; }
.form-messages {
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    display: none;
    margin-top: 1rem;
}
.form-messages.success { background-color: #27ae60; color: white; display: block; }
.form-messages.error { background-color: #c0392b; color: white; display: block; }
.monster-target.is-pressing .combat-card,
.monster-target.is-pressing .combatant {
    transform: translateY(-2px) scale(1.02); /* Slight lift/scale on press */
    box-shadow: 0 0 18px rgba(255, 255, 0, 0.8); /* Prominent yellowish glow */
    border-color: yellow; /* Yellow border */
}
/* Ensure selected state overrides pressing state if both apply */
/* Make sure this rule comes AFTER .is-pressing if it has the same specificity */
.monster-target.selected-target .combat-card,
.monster-target.selected-target .combatant {
    border-color: #e53935; /* Red border for selected */
    box-shadow: 0 0 15px #e53935; /* Red glow for selected */
    /* Ensure this also has a transform if you want it to "stick" in a lifted state */
    transform: translateY(-2px) scale(1.02); /* Keep it slightly lifted when selected */
}
#prpg-combat-container, #party-combat-screen {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('/wp-content/plugins/portugal-rpg/assets/images/city_buildings/battleground.webp');
    color: #e0e0e0;
    padding: clamp(15px, 3vw, 20px);
    border: 2px solid #444;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .6);
    animation: fadeInCombat .5s ease-out;
}
/* Arena/Grid Layout for Combatants */
.combat-arena, .party-combat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 20px;
}
.party-combat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}
/* Team Containers for Party Combat */
.combat-team {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.combat-team h2 {
    font-family: var(--font-headings);
    font-weight: 700;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    text-align: center;
    color: #f0c419;
    border-bottom: 1px solid #444;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.combat-card.current-turn, .combatant.current-turn {
    border-color: #f0c419;
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(240, 196, 25, 0.6);
}
.combat-card.defeated, .combatant.defeated {
    opacity: 0.5;
    filter: grayscale(1);
    transform: scale(0.98);
}
.monster-target { text-decoration: none; }
.monster-target .combat-card:hover, .monster-target .combatant:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .6);
}
.monster-target.selected-target .combat-card, .monster-target.selected-target .combatant {
    border-color: #e53935;
    box-shadow: 0 0 15px #e53935;
}
.monster-target.untargetable {
    pointer-events: none;
}
/* Responsive Grid for Party Combat */
@media (max-width: 900px) {
    .party-combat-grid, .combat-arena {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: center;
    }
}
#Quests {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #0d1117; /* Very dark background */
    color: #f0f6fc;  
	/* Near white text */
}
/* Main content wrapper */
#Quests > * {
    max-width: 800px;
    width: 100%;
}
/* Quest Items: High contrast, clear separation */
.quest-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px; /* Prevents cards from getting too wide */
    box-sizing: border-box;
    text-align: center;
    background: var(--card, #1c1c1f); 
    border: 1px solid var(--border, #3a2a1f);
    border-radius: var(--radius, 12px);
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.quest-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    border-color: var(--accent, #d4a15e);
}

.quest-item.active {
    border-left: 5px solid #28a745; /* Green indicator for active quests */
}

.quest-item.available {
    border-left: 5px solid #3498db; /* Blue indicator for available quests */
}
.quest-item h4 {
    font-family: var(--font-headings);
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    color: var(--text, #efe6d2);
}

.quest-item > p {
    color: var(--muted, #c9b88f);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes action buttons to the card's bottom */
}

.quest-item h5 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin: 1rem 0 0.5rem 0;
    color: var(--accent, #d4a15e);
}

.quest-objectives {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 1rem;
}
.quest-objectives li.incomplete {
    color: #95a5a6; /* Muted gray for incomplete objectives */
}
.quest-objectives li.complete {
    color: #2ecc71; /* Bright green for completed objectives */
    text-decoration: line-through;
    opacity: 0.8;
}

.quest-rewards {
    background: rgba(0,0,0,0.2);
    padding: 0.75rem;
    border-radius: var(--radius, 8px);
    margin-bottom: 1.5rem !important; /* Force space from button */
}

/* 6. Quest action and reroll sections styling */
.quest-item .prpg-action-button,
.quest-item-actions {
    margin-top: auto; /* This aligns buttons to the bottom of the card */
}

.quest-reroll-actions {
    margin-top: 2rem;
    padding: 1.5rem;
    background: transparent;
    border: 1px dashed var(--border, #3a2a1f);
    border-radius: var(--radius, 8px);
}

.quest-reroll-actions .description {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--muted, #c9b88f);
    margin: 0.5rem 0 0 0;
}
.reward-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    font-size: 0.9rem;
}
.quest-rewards .reward-value.xp { color: #f0c419; }
.quest-rewards .reward-value.escudos { color: #add8e6; }
.quest-rewards .reward-value.renown { color: #f7d794; }

/* Buttons inside the Quest Card */
.quest-item-actions,
.quest-item .prpg-action-button {
    margin-top: auto; /* Push buttons to the bottom of the card */
}

#Quests .prpg-action-button:disabled {
    background-color: var(--color-bg-light);
    color: #6c757d;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.7;
    pointer-events: none; /* Block tooltips and clicks on disabled buttons */
}

/* ==========================================================================
   Reroll Actions (Bottom Section)
   ========================================================================== */

.quest-reroll-actions {
    background: var(--panel);
    padding: clamp(1rem, 2vw, 2rem);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#reroll-quests-button {
    margin-bottom: 0.5rem;
}

.quest-reroll-actions .description {
    font-size: clamp(0.85rem, 1vw, 0.9rem);
    font-style: italic;
    color: var(--muted);
    margin: 0;
}

/* ==========================================================================
   Responsiveness for small screens
   ========================================================================== */

@media (max-width: 768px) {
	    #prpg-name-character-container.prpg-start-screen {
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        border-radius: 8px;
    }
    #Quests {
        padding: 1rem;
    }
    .quest-list {
        /* On small screens, stack the quest cards in a single column */
        grid-template-columns: 1fr;
    }
    .quest-item {
        padding: 1rem;
    }
}
/* Accepted Quests: Green border indicator */
.quest-item.accepted {
    border-left-color: #2ea043; /* Accessible green */
    background-color: #1a1f24;
}
/* Quest Actions Buttons */
.prpg-action-button {
    background: linear-gradient(135deg, #2c221a, #1a140f) !important;
    border: 1px solid var(--prpg-border) !important;
    color: var(--prpg-primary) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-headings) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    box-shadow: var(--shadow-sm) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}
.prpg-action-button:hover,
.prpg-action-button:focus {
    background-color: #2ea043; /* Lighter green on hover */
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
/* Danger variant */
.danger-button {
    background-color: #da3633;
}
.danger-button:hover {
    background-color: #f85149;
}
/* Quest Paragraphs & Lists */
#Quests p, #Quests ul, #Quests li {
    color: #000000;
    line-height: 1.6;
}
/* Reroll/Accept buttons alignment */
.quest-item-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}
#Quests h2, #Quests h3 {
    color: #f0f6fc;
    width: 100%;
    max-width: none;
}
.quest-item, h4 {
	color: #000000 !important;
}
/* Quest progress text */
.quest-progress.in-progress {
    color: #79c0ff; /* Accessible blue for progress numbers */
    font-weight: bold;
}
#Arena {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}
/* 2. Subsection: Matchmaking and headings */
#prpg-arena-container h2,
#prpg-arena-container h3,
#prpg-arena-container p {
    text-align: center;
}
#arena-main-view,
#arena-queue-view {
    margin-top: 1rem;
}
#arena-main-view button,
#arena-queue-view button {
    margin-top: 1rem;
}
/* 3. Layout container: Opponent list and leaderboard side by side */
.arena-main-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 0;
    justify-content: center; /* Ensures even distribution */
}
.arena-main-layout .arena-section {
    flex: 1 1 400px; /* Sections grow but have a base size */
    min-width: 320px;
    margin: 0; /* Reset margins when inside flex layout */
    max-width: 600px;
    background: transparent; /* Makes sub-sections inherit darker background */
    border: none;
    padding: 0;
}
/* 4. Each arena section inside */
.arena-section {
    padding: clamp(1rem, 1.5vw, 1.5rem);
    background: rgba(0,0,0,0.1); /* Slightly differentiates sections from the tab bg */
    border: 1px solid var(--border, #3a2a1f);
    border-radius: var(--radius, 12px);
    margin: 2rem 0;
}
/* 5. Combat cards layout */
.combat-card {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.combat-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.combat-avatar-wrapper img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: contain;
}
.combat-identity {
    text-align: left;
}
/* 6. Arena leaderboard styles */
#arena-opponent-list, .arena-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
.opponent-arena-card, .leaderboard-entry {
    background-color: var(--card, #1c1c1f);
    color: var(--text, #efe6d2);
    border: 1px solid var(--border, #3a2a1f);
    border-radius: var(--radius, 12px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    text-align: left;
    margin-bottom: 0 !important;
}
/* 7. Buttons spacing */
.challenge-button,
#enter-pvp-queue-btn,
#leave-pvp-queue-btn {
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
}
/* 8. Spinner and queue timer center */
#queue-status-text,
#queue-timer-text,
.spinner {
    margin: 0.5rem 0;
}
#Marketplace {
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
    padding: 2rem;
    text-align: center; /* Center text inside */
}
/* 2. List of items as a flex grid */
.marketplace-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 0;
    list-style: none;
    margin: 2rem 0;
}
/* 3. Each item box */
.marketplace-item {
    width: 250px; /* Adjust depending on layout preference */
    background: #f9f9f9;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
/* 4. Consistent sizing for content */
.item-display-container,
.item-info,
.item-actions {
    width: 100%;
    text-align: center;
	    border-radius: 11px;
}
/* Optional: Center buttons and price */
.item-price,
.item-actions {
    margin-top: 0.5rem;
}
/* 5. Filter area styling */
#marketplace-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
#marketplace-filters select,
#marketplace-filters input,
#marketplace-filters button {
    padding: 0.5rem;
    font-size: 1rem;
}
@media (max-width: 768px) {
    .marketplace-item {
        width: 100%;
    }
}
.estado-geral {
    vertical-align: top;
    text-align: center;
}
.equipment-section {
	text-align: center;
	align-items:center;
	}
	.equipped-items-section {
	text-align: center;
	align-items:center;
	}
	/* Make the inventory container a flex layout */
.inventory-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
}
/* For desktop and wider screens: make sections side-by-side */
@media (min-width: 768px) {
    .inventory-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    .equipped-items-section,
    .bag-items-section {
        flex: 1;
        min-width: 0;
    }
}
/* Optional: Tweak each section’s box */
.equipped-items-section,
.bag-items-section {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 8px;
    box-sizing: border-box;
}
/* Optional: style the item lists to look cleaner */
.equipped-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.inventory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.inventory-item {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: #fff;
}
#prpg-interactive-tooltip .prpg-tooltip-image-wrapper {
    text-align: center;
    margin-bottom: 10px; /* Spacing between image and text content */
    padding-top: 5px; /* Little padding at the top */
}
#prpg-interactive-tooltip .prpg-tooltip-image {
    max-width: 90px;  /* Max width for the image */
    max-height: 90px; /* Max height for the image */
    width: auto;     /* Maintain aspect ratio */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Center the image */
    margin: 0 auto;  /* Center the image */
    border-radius: 8px; /* Slightly rounded corners for aesthetics */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow */
    object-fit: contain; /* Ensures the image fits without being cropped or stretched */
}
@keyframes card-pop-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes glowing-gold {
    0% { box-shadow: 0 0 5px #ffb300, 0 0 10px #ffb300; }
    50% { box-shadow: 0 0 10px #ffb300, 0 0 20px #ffb300; }
    100% { box-shadow: 0 0 5px #ffb300, 0 0 10px #ffb300; }
}
@keyframes glowing-red {
    0% { box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
    50% { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }
    100% { box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
}
@keyframes glowing-purple {
    0% { box-shadow: 0 0 5px #8A2BE2, 0 0 10px #8A2BE2; }
    50% { box-shadow: 0 0 10px #8A2BE2, 0 0 20px #8A2BE2; }
    100% { box-shadow: 0 0 5px #8A2BE2, 0 0 10px #8A2BE2; }
}
/* Styles for the item icon wrapper */
.item-icon-wrapper {
    max-width: 64px;
    margin: 0 auto 0.5rem;
		border-radius: 11px;
}
.item-icon-wrapper img.item-icon-image {
    max-width: 100%;
    height: auto;
    display: block;
	border-radius: 11px;
}
/* Specific glow levels applied to the item-icon-wrapper */
.enhanced-plus-5-glow {
    animation: glowing-gold 1.5s infinite alternate;
}
.enhanced-plus-6-glow {
    animation: glowing-gold 1.2s infinite alternate;
    box-shadow: 0 0 8px #ffc107, 0 0 15px #ffc107; /* Stronger base glow */
}
.enhanced-plus-7-glow {
    animation: glowing-red 1s infinite alternate;
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; /* Red glow for higher levels */
}
.enhanced-plus-8-glow {
    animation: glowing-red 0.8s infinite alternate;
    box-shadow: 0 0 12px #ff0000, 0 0 25px #ff0000; /* Even stronger red */
}
.enhanced-plus-9-glow {
    animation: glowing-purple 0.7s infinite alternate; /* Unique glow for max level */
    box-shadow: 0 0 15px #8A2BE2, 0 0 30px #8A2BE2; /* Epic purple glow */
}
/* Ensure the tooltip also gets the glow effect in its header */
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Common.enhanced-plus-5-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Uncommon.enhanced-plus-5-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Rare.enhanced-plus-5-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Epic.enhanced-plus-5-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Legendary.enhanced-plus-5-glow {
    animation: glowing-gold 1.5s infinite alternate;
    padding: 2px 5px; /* Add some padding for visual effect */
    border-radius: 3px;
}
/* Repeat for other glow levels (adjust padding/border-radius as needed) */
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Common.enhanced-plus-6-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Uncommon.enhanced-plus-6-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Rare.enhanced-plus-6-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Epic.enhanced-plus-6-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Legendary.enhanced-plus-6-glow {
    animation: glowing-gold 1.2s infinite alternate;
    padding: 2px 5px;
    border-radius: 3px;
}
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Common.enhanced-plus-7-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Uncommon.enhanced-plus-7-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Rare.enhanced-plus-7-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Epic.enhanced-plus-7-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Legendary.enhanced-plus-7-glow {
    animation: glowing-red 1s infinite alternate;
    padding: 2px 5px;
    border-radius: 3px;
}
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Common.enhanced-plus-8-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Uncommon.enhanced-plus-8-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Rare.enhanced-plus-8-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Epic.enhanced-plus-8-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Legendary.enhanced-plus-8-glow {
    animation: glowing-red 0.8s infinite alternate;
    padding: 2px 5px;
    border-radius: 3px;
}
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Common.enhanced-plus-9-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Uncommon.enhanced-plus-9-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Rare.enhanced-plus-9-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Epic.enhanced-plus-9-glow,
#prpg-interactive-tooltip .prpg-tooltip-header .rarity-Legendary.enhanced-plus-9-glow {
    animation: glowing-purple 0.7s infinite alternate;
    padding: 2px 5px;
    border-radius: 3px;
}
/* Blacksmith specific styles for layout */
#blacksmith-inventory-list .inventory-item {
    flex: 1 1 calc(50% - 10px); /* Two columns, adjust gap */
    max-width: calc(50% - 10px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #333;
    background-color: #2a2a2a;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#blacksmith-inventory-list .item-display-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
#blacksmith-inventory-list .item-icon-image {
    width: 40px; /* Adjust size as needed */
    height: 40px;
    object-fit: contain;
}
.blacksmith-hero-section {
    position: relative;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Align NPC to bottom */
    justify-content: flex-start; /* Align NPC to left */
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    background-color: #222; /* Fallback if image fails */
}
.blacksmith-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/city_buildings/blacksmith-background.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7);
    z-index: 0;
}
.blacksmith-npc-image {
    position: relative;
    z-index: 1;
    max-width: 200px;
    height: 100%;
    width: clamp(200px, 30%, 400px);
    margin-bottom: 0px;
}
.blacksmith-hero-section h2 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-weight: bold;
}
/* Ensure content below doesn't overlap */
#Blacksmith p, #Blacksmith h3, #Blacksmith hr {
    position: relative;
    z-index: 2;
}
#blacksmith-inventory-list .item-name {
    font-weight: bold;
    color: #fff;
    white-space: nowrap; /* Prevent name from wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}
#blacksmith-inventory-list .item-enhancement-info {
    flex-grow: 1;
    font-size: 0.85em;
    color: #ccc;
    line-height: 1.3;
}
#blacksmith-inventory-list .item-enhancement-info .enhancement-level {
    font-weight: bold;
    color: #eee;
    display: block; /* Make it block to ensure it's on its own line */
}
#blacksmith-inventory-list .item-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column; /* Stack buttons */
    gap: 5px;
}
#blacksmith-inventory-list .prpg-action-button {
    padding: 5px 10px;
    font-size: 0.8em;
    white-space: nowrap;
}
.max-level-text {
    color: #00bcd4; /* Cyan for max level */
    font-weight: bold;
}
.stats-panel-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.guild-buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 25px; /* horizontal spacing */
    row-gap: 25px;    /* vertical spacing */
    padding: 20px;
}
.guild-card.building-card {
    background: linear-gradient(145deg, #3a3a3a, #2c2c2c);
    border: 1px solid var(--prpg-border-color, #444);
    border-radius: 12px;
    /* ... */
    /* Define animation properties separately */
    animation-name: card-pop-in;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
    .progress-bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease-in-out;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }
    .progress-bar-container.xp-bar .progress-bar-fill { background-color: #ffd700; }
    .progress-bar-container.health-bar .progress-bar-fill { background-color: #dc3545; }
    .progress-bar-container.energy-bar .progress-bar-fill { background-color: #0d6efd; }
    .progress-bar-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.8rem;
        font-weight: bold;
        text-shadow: 1px 1px 2px black;
    }
 /* --- ESTILOS PARA AS BARRAS DE PROGRESSO NO PAINEL DE STATS --- */
.stat-bar-container {
    position: relative;
    width: 100%;
    height: 22px;
    background-color: #2a2a3e; /* Cor de fundo escura */
    border-radius: 5px;
    margin: 8px 0;
    border: 1px solid #4a4a6e;
    overflow: hidden; /* Garante que o preenchimento não ultrapassa as bordas */
}
.stat-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-in-out, background-color 0.5s ease;
    /* Efeito de gradiente subtil para todas as barras */
    background-image: linear-gradient(
        45deg, 
        rgba(255, 255, 255, 0.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%, 
        transparent 75%, 
        transparent
    );
    background-size: 20px 20px;
}
.bar-text, .stat-bar-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9) !important;
    z-index: 2 !important;
}
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea {
    background: rgba(10, 13, 18, 0.6) !important;
    border: 1px solid var(--prpg-border-light) !important;
    color: var(--prpg-text-main) !important;
    padding: 0.8rem 1rem !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-primary) !important;
    transition: var(--transition) !important;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--prpg-primary) !important;
    box-shadow: 0 0 0 2px rgba(212, 161, 94, 0.2) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}
.stat-bar-text {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    line-height: 22px;
}
/* Cores específicas para cada barra - Aplicadas ao .stat-bar-fill */
.health-bar .stat-bar-fill {
    background-color: #c0392b; /* Vermelho */
}
.energy-bar .stat-bar-fill {
    background-color: #2980b9; /* Azul */
}
.xp-bar .stat-bar-fill {
    background-color: #f1c40f; /* Dourado */
}
/* --- ESTILOS PARA O HEXAGRAMA DE ATRIBUTOS --- */
.attributes-column {
    vertical-align: top;
    text-align: center;
}
.attributes-hex-container {
    width: 100%;
    max-width: 280px; /* Aumentar o tamanho máximo para acomodar as novas etiquetas */
    margin: 10px auto 0;
    position: relative;
}
.hex-background .hex-grid-line {
    fill: none;
    stroke: #3a3a5a; /* Cor mais subtil */
    stroke-width: 0.5;
}
.hex-background .hex-axis-line {
    stroke: #4a4a6e;
    stroke-width: 1;
    stroke-dasharray: 2, 4; /* Linhas tracejadas */
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.hex-polygons .hex-base-stat-shape {
    fill: rgba(100, 100, 120, 0.3); /* Cinza para a base */
    stroke: #8a8a9e;
    stroke-width: 1.5;
    stroke-dasharray: 3, 3;
    transition: all 0.4s ease;
}
.hex-polygons .hex-total-stat-shape {
    fill: rgba(179, 159, 243, 0.4);
    stroke: #b39ff3;
    stroke-width: 2.5;
    filter: url(#glow);
    transition: all 0.4s ease;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-shape 1.5s ease-out forwards;
}
@keyframes draw-shape {
    to {
        stroke-dashoffset: 0;
    }
}
.hex-vertices .hex-vertex {
    stroke: #1a1a2e; /* Contorno escuro para destacar */
    stroke-width: 1.5;
    opacity: 0.8;
    transition: all 0.3s ease;
}
.hex-labels .hex-icon {
    transition: transform 0.3s ease;
}
.hex-labels .hex-icon path {
    transform-origin: center center;
}
/* Etiquetas e Ícones */
.hex-labels .hex-label-group {
    cursor: pointer;
}
.hex-labels .hex-icon path {
    transition: transform 0.3s ease;
}
.hex-labels .hex-label-name {
    fill: #000058; /* Cinza claro */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hex-labels .hex-label-value {
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.3s ease;
}
/* --- EFEITOS DE INTERAÇÃO (HOVER) --- */
.hex-label-group:hover .hex-icon path {
    transform: scale(1.15); /* Efeito de hover mais pronunciado */
}
.hex-label-group:hover .hex-label-value {
    transform: scale(1.1);
    text-shadow: 0 0 8px currentColor; /* Brilho mais visível */
}
.label-group-strength:hover ~ .hex-background .axis-strength,
.label-group-strength:hover ~ .hex-vertices .vertex-strength {
    opacity: 1; stroke-dasharray: none;
}
.label-group-dexterity:hover ~ .hex-background .axis-dexterity,
.label-group-dexterity:hover ~ .hex-vertices .vertex-dexterity {
    opacity: 1; stroke-dasharray: none;
}
.label-group-constitution:hover ~ .hex-background .axis-constitution,
.label-group-constitution:hover ~ .hex-vertices .vertex-constitution {
    opacity: 1; stroke-dasharray: none;
}
.label-group-charisma:hover ~ .hex-background .axis-charisma,
.label-group-charisma:hover ~ .hex-vertices .vertex-charisma {
    opacity: 1; stroke-dasharray: none;
}
.label-group-wisdom:hover ~ .hex-background .axis-wisdom,
.label-group-wisdom:hover ~ .hex-vertices .vertex-wisdom {
    opacity: 1; stroke-dasharray: none;
}
.label-group-intelligence:hover ~ .hex-background .axis-intelligence,
.label-group-intelligence:hover ~ .hex-vertices .vertex-intelligence {
    opacity: 1; stroke-dasharray: none;
}
.attribute-hex {
    width: 100%;
    height: auto;
    overflow: visible; /* Permite que os brilhos e etiquetas não sejam cortados */
}
/* Linhas de fundo do hexágono */
.hex-bg-lines polygon,
.hex-bg-lines line {
    stroke: #4a4a6e; /* Cinza-azulado escuro */
    stroke-width: 1;
    fill: none;
}
/* Forma principal dos atributos do jogador */
.hex-stat-shape {
    fill: rgba(132, 105, 215, 0.6); /* Roxo com transparência */
    stroke: #b39ff3; /* Roxo claro */
    stroke-width: 2;
    transition: all 0.3s ease-in-out;
}
.hex-labels text:hover {
    fill: #000058;
    text-shadow: 0 0 5px #ffffff;
}
.guild-buildings-grid .guild-card.building-card:nth-child(2) { animation-delay: 0.1s; }
.guild-buildings-grid .guild-card.building-card:nth-child(3) { animation-delay: 0.2s; }
.guild-buildings-grid .guild-card.building-card:nth-child(4) { animation-delay: 0.3s; }
.guild-buildings-grid .guild-card.building-card:nth-child(5) { animation-delay: 0.4s; }
.guild-card.building-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(230, 195, 79, 0.3);
    border-color: var(--prpg-gold-color, #f0c419);
}
.guild-card .card-image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background-color: #1a1a1a;
    border-bottom: 1px solid var(--prpg-border-color, #444);
    position: relative;
}
.guild-card .card-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
    pointer-events: none;
}
.guild-card .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.guild-card:hover .card-image {
    transform: scale(1.1);
}
.guild-card.locked .card-image-container {
    filter: grayscale(80%);
    transition: filter 0.3s ease;
}
.guild-card.locked:hover .card-image-container {
    filter: grayscale(20%);
}
.guild-card.built {
    border-color: var(--prpg-success-color, #28a745);
}
.guild-card.built:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(40, 167, 69, 0.5);
}
.guild-card .card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.1);
}
.guild-card h4 {
    margin: 0 0 8px 0;
    color: var(--prpg-title-color, #fff);
    font-size: 1.3em;
    font-family: var(--font-headings);
}
.guild-card p {
    font-size: 0.95em;
    color: var(--prpg-text-color-secondary, #ccc);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 15px;
}
.building-card .status-built {
    display: inline-block;
    background-color: var(--prpg-success-color, #28a745);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.building-card .building-bonus {
    font-size: 1em;
    color: #ffffff;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--prpg-border-color, #444);
}
.building-card .building-bonus strong {
    color: #d1c7b3;
    font-weight: 700;
}
.building-card .building-cost {
    font-weight: 700;
    color: #d1c7b3;
    margin-top: auto;
    font-size: 1.1em;
}
.guild-card .prpg-action-button {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}
#prpg-interactive-tooltip {
    position: fixed;
    z-index: 10002;
    background-color: #1a1a2e;
    border: 1px solid #a885ff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    font-size: 0.9em;
    padding: 0;
    width: 320px;
    max-width: 90vw;
    display: none;
    pointer-events: auto; /* Allow clicks on the tooltip */
}
#prpg-interactive-tooltip.visible {
    display: block;
}
#prpg-interactive-tooltip .prpg-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #24243e;
    padding: 8px 12px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 1px solid #4a4a6a;
    cursor: move;
}
#prpg-interactive-tooltip .prpg-tooltip-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.1em;
}
.prpg-tooltip-item-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    border: 1px solid #4a4a6a;
}
#prpg-interactive-tooltip .prpg-tooltip-close {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.7;
}
#prpg-interactive-tooltip .prpg-tooltip-close:hover {
    opacity: 1;
    color: #ff8585;
}
#prpg-interactive-tooltip .prpg-tooltip-content {
    padding: 12px;
}
.prpg-tooltip-content .item-type-slot {
    color: #95a5a6;
    font-style: italic;
    font-size: 0.9em;
}
.prpg-tooltip-content h5 {
    color: #a885ff;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #4a4a6a;
    padding-bottom: 4px;
}
.prpg-tooltip-content hr {
    border-color: #4a4a6a;
    margin: 10px 0;
}
.prpg-tooltip-content .affix {
    padding: 2px 0;
    font-size: 0.9em;
}
.tooltip-affixes .affix {
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    background-color: rgba(74, 74, 106, 0.3);
}
.tooltip-affixes .affix-positive {
    color: #85ff85;
}
.tooltip-affixes .affix-negative {
    color: #ff8585;
}
.tooltip-affixes .affix-special {
    color: #85d8ff;
    font-style: italic;
}
.prpg-tooltip-content .affix-positive { color: #66bb6a; }
.prpg-tooltip-content .item-value {
    font-weight: bold;
    color: var(--color-gold);
    text-align: right;
    margin-top: 8px;
}
.prpg-tooltip-content .stat-source {
    font-size: 0.85em;
    color: #7f8c8d;
    border-left: 2px solid #4a6572;
    padding-left: 8px;
    margin-top: 8px;
}
.prpg-tooltip-content .stat-effect {
    color: #2ecc71;
}
.prpg-class-card, .prpg-map-info-panel, .prpg-panel, .building-card, .quest-item, #prpg-name-character-container, #prpg-attribute-assignment-container, .job-item, #job-in-progress-container {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 11px;
    padding: clamp(15px, 3vw, 20px);
    margin-bottom: 20px;
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
}
.prpg-class-card,
.prpg-class-card img.class-image,
.inventory-list li,
.attribute-item,
.job-image {
    border-radius: 11px;
}
.prpg-class-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 11px;
}
.prpg-class-card img.class-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 11px;
}
.prpg-class-card h2 {
    margin: 0 0 10px 0;
    font-size: clamp(18px, 4vw, 22px); 
    font-weight: 600;
}
.prpg-class-card p {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: clamp(14px, 2.5vw, 16px); 
    word-wrap: break-word;
    max-width: 100%;
}
.prpg-class-card p:last-of-type {
    font-style: italic;
    color: #555;
    margin-bottom: 15px;
}
.prpg-action-button,
.prpg-class-card button.select-class-button,
#info-panel-action button.travel-button,
#prpg-set-name-form button,
.item-actions button,
.complete-attribute-assignment,
.job-controls .job-button {
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 10px;
    transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease;
}
.prpg-class-card button.select-class-button {
    width: 80%;
    max-width: 250px; 
    margin-top: 10px;
}
.prpg-attributes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 10px;
    margin-bottom: 20px;
}
.attribute-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 11px;
}
.attribute-item strong {
    flex-grow: 1;
    margin-right: 10px;
}
.attribute-item button {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 1.2em;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attribute-item button:hover {
    background-color: #ffffff;
}
./* --- Before --- */
.prpg-attributes-list .attribute-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.attribute-item button,
.attribute-item button.spend-point-button {
  width: 24px; 
  height: 24px;
  /* ... */
}
.attribute-item button:hover,
.attribute-item button.spend-point-button:hover {
    background-color: #ffffff;
}
/* --- After (Cleaner) --- */
.prpg-attributes-list .attribute-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.attribute-item button { /* This single selector covers both cases */
  width: 24px; 
  height: 24px;
  padding: 0;
  font-size: 1.2em;
  line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; 
}
.attribute-item button:hover {
    background-color: #ffffff;
}
.error,
.combat-log-area li.error {
    color: #d9534f;
    font-weight: bold;
}
.success {
    color: #5cb85c;
    font-weight: bold;
}
.prpg-map-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.prpg-map-container {
    flex: 3;
    position: relative;
    width: 100%;
    min-height: 400px;
    height: 500px;
    background: url(images/map_background.webp) center/cover no-repeat;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.city-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: rgba(255, 255, 255, .8);
    border: 2px solid rgba(0, 0, 0, .5);
    border-radius: 50%;
    cursor: pointer;
    transition: .3s ease;
}
.city-dot:hover {
    background-color: rgba(255, 255, 0, .8);
    transform: scale(1.2);
}
.city-dot.active {
    background-color: rgba(0, 255, 0, .8);
    border-color: rgba(0, 150, 0, .8);
    transform: scale(1.3);
}
.prpg-map-info-panel {
    flex: 1;
    min-width: 250px;
    height: fit-content;
}
#info-panel-name {
    margin-top: 0;
    color: #333;
}
#info-panel-desc {
    font-size: .9em;
    color: #666;
}
#info-panel-action {
    text-align: center;
    margin-top: 15px;
}
#info-panel-action button.travel-button {
    width: 90%;
}
.inventory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.inventory-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 11px;
}
.inventory-list li strong {
    font-size: 1.1em;
    color: #444;
}
.inventory-list li em {
    font-size: .9em;
    color: #888;
    margin-left: 5px;
}
.inventory-list li small {
    display: block;
    margin-top: 5px;
    color: #777;
}
.tab-content:not(.active) {
    display: none !important;
}
.tab-content.active {
    display: block !important;
}
.prpg-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    background: rgba(10, 13, 18, 0.7) !important;
    padding: 8px !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.6) !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--prpg-border-light) !important;
}
.tab-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--prpg-text-muted) !important;
    padding: 0.7rem 1.2rem !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-headings) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    text-align: center !important;
}
.tab-link:hover {
    color: var(--prpg-text-main) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.tab-link.active {
    background: var(--prpg-primary) !important;
    color: var(--prpg-bg-darkest) !important;
    border-color: var(--prpg-primary-hover) !important;
    box-shadow: 0 0 12px rgba(212, 161, 94, 0.4) !important;
    text-shadow: none !important;
}
.stat-bar-container, .health-bar-container, .job-progress-bar, .progress-bar-container {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--prpg-border-light) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    height: 22px !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6) !important;
}
.stat-bar-fill, .bar-fill, .health-bar, .job-progress-fill {
    height: 100% !important;
    border-radius: 20px !important;
    transition: width 0.4s ease-in-out !important;
}
.health-bar, .stat-bar-container.health-bar .stat-bar-fill {
    background: linear-gradient(90deg, #b71c1c, #e53935) !important;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2), 0 0 8px rgba(229, 57, 53, 0.4) !important;
}

.energy-bar .stat-bar-fill, .bar-fill.energy {
    background: linear-gradient(90deg, #1565c0, #1e88e5) !important;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2), 0 0 8px rgba(30, 136, 229, 0.4) !important;
}

.xp-bar .stat-bar-fill, .bar-fill.xp-bar {
    background: linear-gradient(90deg, #d4a15e, #f0c419) !important;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2), 0 0 8px rgba(240, 196, 25, 0.4) !important;
}
.prpg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    font-family: var(--font-headings);
    border-bottom: 2px solid var(--color-gold);
}
.prpg-header span {
    font-size: 1.2rem;
}
.prpg-header b {
    color: var(--color-gold);
    font-weight: 700;
}
.prpg-main-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
#prpg-combat-area {
    width: 100%; /* Take full width of the grid */
    /* No margin auto here, as grid handles centering */
}
.prpg-normal-panels-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
}
/* Individual panel styling within the normal panels wrapper */
#prpg-stats-panel {
    flex: 1 1 100%; /* Ocupa toda a largura no wrapper */
    padding: clamp(15px, 3vw, 25px);
}
#prpg-main-content-panel {
    flex: 1 1 auto;
    min-width: 300px;
}
.prpg-normal-panels-wrapper.in-combat-active #prpg-main-content-panel {
    display: none; /* Hide the main content panel when combat is active */
}
.building-card h4,
.quest-item h4,
#job-in-progress-container h4 {
    margin-top: 0;
    color: #d1c7b3;
}
.building-card p,
.quest-item p,
.job-item p {
    margin-bottom: 5px;
    font-size: .95em;
}
.building-card em {
    color: #d9534f;
}
.quest-item .accept-quest-button,
.complete-attribute-assignment {
    color: #000000;
    background-color: #ffffff;
}
.quest-item .accept-quest-button:hover,
.complete-attribute-assignment:hover {
    color: #000000;
    background-color: #ffffff;
}
.quest-item.accepted {
    background-color: #e7f3ff;
    border-left: 4px solid #007bff;
}
.quest-item.accepted h4 {
    color: #0056b3;
}
#prpg-set-name-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.1em;
    color: #ffc53a;
}
#prpg-set-name-form input[type="text"] {
    width: calc(100% - 24px);
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
}
#prpg-set-name-form .description {
    font-size: .85em;
    color: #777;
    margin: -10px 0 20px;
}
.prpg-action-button {
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    transition: background-color .3s ease, transform .2s ease, box-shadow .2s ease;
    background-color: #f9f9f9;
    color: #000000;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.prpg-action-button:hover {
   background-color: #f9f9f9;
    transform: translateY(-1px);
}
.prpg-action-button:disabled {
    background: #1e1e1e !important;
    border-color: #333 !important;
    color: #666 !important;
    box-shadow: none !important;
    transform: none !important;
}
.prpg-action-button:not(:disabled):hover {
    filter: brightness(1.2);
    border-color: var(--prpg-primary);
}
.prpg-action-button .resource-icon-small {
    max-width: 24px;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
#prpg-combat-container {
    background-image: url('/wp-content/plugins/portugal-rpg/assets/images/city_buildings/battleground.webp');
    color: #e0e0e0;
    padding: clamp(15px, 3vw, 20px);
    border: 2px solid #444;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .6);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: fadeInCombat .5s ease-out;
    overflow-x: hidden;
	width:100%
}
@keyframes fadeInCombat {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}
.combat-arena {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 20px;
}
.combat-card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #383838, #2a2a2a);
    border: 1px solid #555;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    padding: 20px;
}
.combat-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.combat-vs-separator {
    font-size: 2.5em;
    font-weight: 900;
    color: #f0c419;
    text-shadow: 0 0 15px rgba(240, 196, 25, .7);
    align-self: center;
    margin: 0 15px;
    animation: pulseVS 1.8s infinite ease-in-out;
}
@keyframes pulseVS {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: .8; }
}
.combat-card-header {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #202020;
    border-bottom: 1px solid #444;
}
.combat-identity {
    text-align: left;
    flex-grow: 1;
}
.combatant-name {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
    color: #ff6a00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.2em 0.5em;
    border-radius: 4px;
}
.combatant-level {
    margin: 4px 0 0;
    font-size: 1em;
    color: #999;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.opponent-arena-card .combat-card-body,
.leaderboard-entry .combat-card-body {
    margin-top: 1rem;
    border-top: 1px solid var(--border, #3a2a1f);
    padding-top: 1rem;
    text-align: center;
}
.leaderboard-renown strong, p > strong {
    font-size: 1.2rem;
    color: var(--accent);
}

/* 5. Unique dividers and other elements */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--accent, #d4a15e);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 1.5rem auto;
}

hr.arena-divider {
    width: 80%;
    margin: 3rem auto;
    border: 0;
    height: 1px;
    /* Red-tinted fiery divider */
    background-image: linear-gradient(to right, rgba(231, 76, 60, 0), rgba(231, 76, 60, 0.5), rgba(231, 76, 60, 0));
}

#bounty-board-list {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
.health-bar-container {
    position: relative;
    width: 100%;
    height: 24px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
    overflow: hidden;
    margin-bottom: 10px;
}
.bar-fill {
    height: 100%;
    border-radius: 0 8px 8px 0;
    transition: width .6s ease-in-out;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.bar-fill.health {
    background: linear-gradient(to right, #e53935, #f44336);
	    transition: width 0.3s ease-in-out;
}
.bar-fill.energy {
    background: linear-gradient(to right, #1e88e5, #42a5f5);
}
.combat-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 25px 0 20px;
}
@keyframes pulseCombat {
  0%, 100% {
    background-color: #c48f00;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  }
  50% {
    background-color: #e2a400;
    box-shadow: 0 6px 12px rgba(226, 164, 0, 0.8);
  }
}
.prpg-action-button.combat-action {
  background-color: #c48f00;
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  min-width: 140px;
  animation: pulseCombat 2.5s ease-in-out infinite;
}
.prpg-action-button.combat-action:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 16px rgba(226, 164, 0, .8);
}
.prpg-action-button.combat-action:active {
    transform: translateY(1px) scale(1);
}
.prpg-action-button.combat-action:disabled {
    background-color: #444;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.combat-log-area {
    background-color: #1a1a1a;
    color: #eee;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
    max-height: 250px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
}
.combat-log-area h4 {
    margin: 0 0 12px;
    font-size: 1.2em;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    color: #f0c419 !important;
}
.combat-log-area ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.combat-log-area li {
    padding: 6px 4px;
    border-bottom: 1px solid #2c2c2c;
    transition: background-color .3s, color .3s;
    font-size: .95em;
    line-height: 1.4;
}
.combat-log-area li:last-child {
    border-bottom: none;
}
.combat-log-area li:hover {
    background-color: #2a2a2a;
}
.combat-log-area li b {
    color: #ff9800;
    font-weight: 700;
}
.combat-log-area li.critical-hit b {
    color: #ff4d4d;
}
.floating-text {
    position: absolute;
    font-weight: 700;
    animation: floatText 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 999;
    white-space: nowrap;
    font-size: 1.1em;
    text-shadow: 0 0 3px #000;
}
@keyframes floatText {
    0% { opacity: 1; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, -20px); }
    100% { opacity: 0; transform: translate(-50%, -50px); }
}
.job-listings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 1.25rem;
    padding-top: 0;
}
.job-item {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    color: #e2e8f0;
    text-align: center;
}
.job-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(212, 161, 94, 0.25);
    border-color: rgba(212, 161, 94, 0.4);
}
.job-image {
    width: 84px;
    height: 84px;
    border: 2px solid rgba(212, 161, 94, 0.6);
    border-radius: 50%;
    margin-bottom: 14px;
    object-fit: cover;
    box-shadow: 0 0 16px rgba(212, 161, 94, 0.2);
}
.job-item h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #d4a15e;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}
.job-item p {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
    flex-grow: 1;
}
.job-controls,
.job-input-group {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap: 8px;
}
.job-hours-input::-webkit-outer-spin-button,
.job-hours-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.job-hours-input {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    width: 75%;
    align-self: center;
    border: 1px solid #475569 !important;
    border-radius: 8px;
    padding: 8px 40px;
    background: rgba(15, 23, 42, 0.6);
    color: #f1f5f9;
    transition: border-color 0.2s;
}
.job-hours-input:focus {
    outline: none;
    border-color: #d4a15e !important;
    box-shadow: 0 0 0 3px rgba(212, 161, 94, 0.15);
}
.job-hours-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.job-button {
    font-weight: 700;
    letter-spacing: 0.4px;
}
.job-quick-actions {
    position: absolute;
    top: 50%;
    left: 12%;
    right: 12%;
    height: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    gap: 4px;
}
.job-set-hours-btn {
    pointer-events: all;
    height: calc(100% - 12px);
    cursor: pointer;
    background: rgba(212, 161, 94, 0.15);
    color: #d4a15e;
    border: 1px solid rgba(212, 161, 94, 0.35);
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 8px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    line-height: 1;
}
.job-set-hours-btn:hover:not(:disabled) {
    background: rgba(212, 161, 94, 0.3);
    color: #fbbf24;
}
.job-set-hours-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.job-quick-actions button:last-of-type {
    margin-left: 0;
}
.job-hours-select {
    padding: 8px 12px;
    font-size: 1em;
    border: 1px solid #475569;
    background: rgba(15,23,42,0.7);
    color: #e2e8f0;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.job-hours-select:hover { border-color: #d4a15e; }
.job-hours-select:focus {
    outline: 0;
    border-color: #d4a15e;
    box-shadow: 0 0 0 3px rgba(212, 161, 94, 0.15);
}
@media (max-width: 600px) {
    .job-listings { grid-template-columns: 1fr; }
}
.job-controls .job-button {
    background: linear-gradient(135deg, #d4a15e, #b8813a);
    color: #0f172a;
    font-weight: 800;
    border: none;
    flex-grow: 1;
    max-width: 180px;
    box-shadow: 0 4px 12px rgba(212,161,94,0.3);
    transition: all 0.2s;
}
.job-controls .job-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    box-shadow: 0 6px 18px rgba(212,161,94,0.45);
    transform: translateY(-1px);
}
.job-controls .job-button:disabled {
    background: #334155;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
#job-in-progress-container h4 {
    color: #0056b3;
    font-size: 1.3em;
}
.job-progress-bar {
    width: 100%;
    height: 25px;
    background-color: #ddd;
    border-radius: 12px;
    margin: 15px 0;
    overflow: hidden;
    border: 1px solid #bbb;
}
.job-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(to right, #2196f3, #4caf50);
    border-radius: 12px;
    transition: width .5s linear;
}
.job-timer {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}
#claim-job-button {
    background-color: #ff9800;
}
#claim-job-button:not(:disabled):hover {
    background-color: #e68900;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes pulseGlow {
    0%,100% { box-shadow: 0 0 8px 1px,inset 0 0 8px 1px; opacity: .7; }
    50%   { box-shadow: 0 0 16px 3px,inset 0 0 12px 3px; opacity:1; }
}
@keyframes flicker {
    0%,100% { opacity:.9; }
    50%     { opacity:.5; }
}
@keyframes float-avatar {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-6px); }
}
@keyframes colorCycle {
    0%,100% { box-shadow:0 0 20px #ff4848; }
    33%     { box-shadow:0 0 20px #48a2ff; }
    66%     { box-shadow:0 0 20px #f0c419; }
}
.combat-avatar-wrapper {
    position: relative;
    width: 75px;
    height: 75px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #1a1a1a;
    display: flex
;
    justify-content: center;
    align-items: unset;
    flex-shrink: 0;
    border: 3px solid #555;
    transition: border-color .4s 
ease, box-shadow .4s 
ease;
    overflow: visible;
}
.combat-avatar {
    /* --- REMOVE or REPLACE these --- */
    /* width: 100%; */
    /* height: 100%; */
    /* border-radius: 50%; /* We don't want to crop the image itself */
    /* --- ADD these properties --- */
    position: absolute;
    width: 100%; /* Make the image 30% wider than the wrapper */
    height: 100%; /* Make the image 30% taller than the wrapper */
    /* This is the key to positioning the larger image */
    left: 50%;
    transform: translateX(-50%); /* Center the image horizontally */
    /* Use 'contain' to ensure the whole character is visible, not cropped */
    object-fit: contain; 
    /* This adds a realistic shadow that follows the shape of your image */
    -webkit-filter: drop-shadow(0px -5px 10px rgba(0, 0, 0, 0.5));
    /* Add a transition for a smooth hover effect */
    transition: transform 0.3s ease-in-out;
}
/* Optional: Add a subtle hover effect */
.combat-avatar:hover {
    transform: translateX(-50%) scale(1.05); /* Enlarge slightly on hover */
}
.combat-avatar-wrapper::before,
.combat-avatar-wrapper::after {
    content:'';
    position:absolute;
    top:-5%; left:-5%;
    width:110%; height:110%;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    box-sizing:border-box;
}
.monster-rarity-uncommon {
    border-color:#1eff00;
}
.monster-rarity-rare {
    border-color:#0070dd;
    box-shadow:0 0 14px #0070dd,inset 0 0 10px #0070dd;
    animation:pulseGlow 2.5s infinite ease-in-out;
}
.monster-rarity-epic {
    border-color:#a335ee;
    box-shadow:0 0 16px #a335ee,inset 0 0 12px #a335ee;
    animation:pulseGlow 2s infinite ease-in-out;
}
.monster-rarity-legendary {
    border-color:#ff8000;
    box-shadow:0 0 20px #ff8000,inset 0 0 14px #ff8000;
    animation:pulseGlow 1.5s infinite ease-in-out;
}
.monster-rarity-legendary .combat-avatar {
    animation:float-avatar 3.5s infinite ease-in-out;
}
.monster-affix-enraged::before {
    opacity:1;
    box-shadow:0 0 12px 4px #ff3b3b;
    animation:pulseGlow .8s infinite;
}
.monster-affix-giant {
    border-width:6px;
    border-color:#6d4c41;
}
.monster-affix-armored {
    border-color:#bdbdbd;
    box-shadow:0 0 5px #fff,inset 0 0 10px rgba(0,0,0,.7);
}
.monster-affix-swift::before {
    opacity:.8;
    border:2px dashed #00e5ff;
    animation:spin 2.5s linear infinite;
}
.monster-affix-venomous::after {
    opacity:1;
    box-shadow:inset 0 0 18px 6px rgba(76,175,80,.8);
    animation:pulseGlow 2.2s infinite ease-in-out;
}
.monster-affix-blessed::before {
    opacity:.6;
    background:radial-gradient(circle,transparent 40%,rgba(255,235,59,.4)100%);
    animation:pulseGlow 3s infinite,spin 25s linear infinite;
}
.monster-affix-arcane::before {
    opacity:.9;
    border:3px solid transparent;
    border-image:conic-gradient(#a335ee,#ff3b3b,#f0c419,#00e5ff,#a335ee)1;
    animation:spin 4s linear infinite;
}
.monster-affix-frozen::before {
    opacity:.8;
    background:radial-gradient(circle,rgba(173,216,230,.4)20%,transparent 70%);
    animation:flicker 1.5s infinite;
}
.monster-affix-frozen::after {
    opacity:1;
    border:3px solid #00bcd4;
    box-shadow:0 0 15px #00bcd4;
}
.monster-affix-fiery::before {
    opacity:1;
    box-shadow:0 0 15px 5px #ff6f00,inset 0 0 10px #ff6f00;
    animation:pulseGlow1.5s infinite;
}
.monster-affix-unyielding::before {
    opacity:.9;
    border:5px solid #9e9e9e;
    box-shadow:0 0 10px #fafafa;
    animation:flicker 2.5s infinite;
}
.monster-affix-shadowy::before {
    opacity:.8;
    background:radial-gradient(circle,transparent60%,rgba(40,20,60,.85)100%);
    animation:spin-reverse8s linear infinite;
}
.monster-affix-corrupted::before {
    opacity:.8;
    border-top:2px solid #a335ee;
    border-bottom:2px solid #4caf50;
    animation:spin1s linear infinite;
}
.monster-affix-corrupted::after {
    opacity:.8;
    border-left:2px solid #a335ee;
    border-right:2px solid #4caf50;
    animation:spin-reverse1.2s linear infinite;
}
.monster-affix-vampiric::before {
    opacity:.9;
    box-shadow:inset 0 0 22px 8px #d32f2f;
    animation:pulseGlow2.5s infinite ease-out;
}
.monster-affix-thorned::before {
    opacity:1;
    border:3px dotted #e53935;
    animation:spin8s linear infinite;
}
.monster-affix-thorned::after {
    opacity:1;
    transform:scale(.9);
    border:2px dotted #e53935;
    animation:spin-reverse8s linear infinite;
}
.monster-affix-elemental_storm::before {
    opacity:1;
    animation:colorCycle3s linear infinite;
}
@media (max-width: 767px) { /* Target screens up to 767px */
    :root {
        font-size: 14px; /* Further reduce base font size for very small screens */
    }
	#prpg-interactive-tooltip {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: fixed !important;
        width: 90vw !important;
        max-width: 400px !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    /* Optional: Add an overlay for better focus on mobile */
    body.tooltip-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10001;
        backdrop-filter: blur(2px);
    }
    .prpg-normal-panels-wrapper {
        flex-direction: column;
        padding: 1rem;
    }
    #prpg-stats-panel {
        flex: 1 1 auto;
        width: 100%;
        padding: 1.5rem 1rem;
        text-align: center;
    }
    .prpg-normal-panels-wrapper #prpg-stats-panel,
    .prpg-normal-panels-wrapper #prpg-main-content-panel {
        flex-basis: auto; /* Allow content to define width in a column */
        width: 100%; /* Stretch wide across the available space */
        max-width: 100%; /* Ensure it doesn't exceed 100% width */
        margin: 0 auto; /* Center the panel horizontally */
    }
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3; /* Slightly more line height for readability */
		text-align: center;
    }
	.prpg-normal-panels-wrapper.in-combat-active {
        flex-direction: column; /* Still relevant for consistent stacking, but only one child is visible */
        align-items: center;
    }
    p, li, span, a, label, input, button, textarea, select {
        font-size: clamp(0.8125rem, 3.5vw, 1rem); /* Increase the viewport width scaling factor */
    }
    .prpg-class-card img.class-image {
        max-width: 200px; /* Significantly smaller images on mobile */
        margin-bottom: 8px;
    }
    .prpg-class-card h2 {
        font-size: clamp(1.1rem, 4.5vw, 1.25rem); /* Smaller heading size */
    }
    .prpg-class-card p {
        font-size: clamp(0.8125rem, 2.8vw, 0.9375rem); /* Smaller paragraph size */
        margin-bottom: 5px;
    }
    .prpg-class-card p:last-of-type {
        margin-bottom: 8px;
    }
    .prpg-class-card button.select-class-button {
        width: 100%;
        max-width: 180px; /* Smaller button on mobile */
    }
.prpg-attributes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
    .attribute-item button,
    .attribute-item button.spend-point-button {
        width: 20px;
        height: 20px;
        font-size: 0.9em;
    }
    #prpg-custom-tooltip .tooltip-header {
        text-align: center; /* Center the text within the header */
        width: 100%;       /* Ensure header takes full width for centering */
        display: block;    /* Ensure it behaves as a block element */
        padding: 10px 0;   /* Add vertical padding for spacing */
        font-size: 1.1em;  /* Slightly adjust header font size for mobile */
        font-weight: 700;
        color: var(--color-gold); /* Consistent header color */
        border-bottom: 1px solid rgba(218,165,32,.4); /* Consistent border */
    }
    /* Ensure body doesn't scroll when tooltip is active if it's modal-like */
    body.no-scroll {
        overflow: hidden;
    }
    .prpg-map-container {
        min-height: 250px; /* Reduced height */
        height: 350px;
    }
    .prpg-map-info-panel {
        min-width: unset;
        width: 100%;
        padding: clamp(10px, 3vw, 15px); /* Consistent padding */
    }
    #info-panel-action button.travel-button {
        width: 100%;
        padding: 8px; /* Smaller button padding */
    }
    .inventory-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 8px 12px; /* Reduced padding */
    }
    .inventory-list li strong {
        font-size: 1em; /* Smaller font for item name */
    }
    .inventory-list li em {
        font-size: 0.85em; /* Smaller font for item description */
    }
    .inventory-list li small {
        margin-top: 2px;
    }
    .prpg-tabs {
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto; /* Allow horizontal scrolling for tabs */
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Keep tabs on a single line */
    }
    .tab-link {
        padding: 8px 10px;
        font-size: 0.875rem;
        flex-basis: auto; /* Allow tabs to size based on content */
        border-radius: 8px 8px 0 0;
    }
.tab-content {
    width: 100%;
    padding: clamp(15px, 4vw, 25px);
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
    animation: tab-fade-in 0.4s ease;
}
.tab-content.active {
    display: block;
}
    .prpg-header {
        padding: 8px 10px;
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .prpg-header span {
        font-size: 1rem;
    }
    .prpg-main-grid {
        gap: 15px; /* Slightly reduce gap on smaller screens */
        padding: 0 10px; /* Add some padding to the sides */
    }
    .building-card p,
    .quest-item p,
    .job-item p {
        font-size: 0.9em;
        margin-bottom: 4px;
    }
    #prpg-set-name-form {
        gap: 1rem;
    }
	.prpg-normal-panels-wrapper #prpg-stats-panel {
        flex-basis: auto; /* Allow content to define width in a column */
        width: 100%; /* Stretch wide across the available space */
        max-width: 100%; /* Ensure it doesn't exceed 100% width */
        margin: 0 auto; /* Center the panel horizontally */
        text-align: center; /* Center text and inline elements */
    }
    .prpg-normal-panels-wrapper #prpg-stats-panel h2,
    .prpg-normal-panels-wrapper #prpg-stats-panel h3,
    .prpg-normal-panels-wrapper #prpg-stats-panel p,
    .prpg-normal-panels-wrapper #prpg-stats-panel ul {
        text-align: center; /* Explicitly center block-level elements if not behaving */
        margin-left: auto;
        margin-right: auto;
    }
	.prpg-normal-panels-wrapper #prpg-stats-panel #prpg-character-class-image-container {
        display: flex; /* Use flex to center its child image */
        justify-content: center;
        width: 100%;
    }
	#prpg-stats-panel #prpg-character-class-image-container {
    text-align: center;
    margin-bottom: 25px;
}
#prpg-stats-panel .prpg-character-class-image:hover {
    transform: scale(1.05);
}
#prpg-stats-panel .stats-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 25px;
}
#prpg-stats-panel .stats-column h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #000000;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 10px;
    font-size: 1.2em;
    font-family: var(--font-headings);
}
#prpg-stats-panel .stat-line {
    margin: 0 0 10px 0;
    font-size: 0.95em;
    color: #000000;
}
.stats-layout-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}
.stats-character-column {
    max-width: 600px;
    padding: 1rem;
    box-sizing: border-box;
}
#prpg-stats-panel .stat-line b,
#prpg-stats-panel .stat-line span {
    color: #000000;
    font-weight: 600;
}
#prpg-stats-panel .prpg-character-class-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.equipment-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}
.equipped-items-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.equipment-slot-wrapper {
    flex: 1 1 calc(50% - 1rem); /* 2 per row on medium+ screens */
    min-width: 200px;
    max-width: 280px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f8f8f8;
    padding: 0.5rem;
    text-align: center;
}
/* Slot label */
.equipment-slot-name {
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}
#prpg-stats-panel .equipment-section h3 {
    margin-bottom: 15px;
}
#prpg-stats-panel #prpg-equipped-items ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 400px;
}
.stats-data-column .stats-grid-container {
    margin-bottom: 0;
}
#prpg-stats-panel #prpg-equipped-items li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
#prpg-stats-panel #prpg-equipped-items li:last-child {
    border-bottom: none;
}
#prpg-stats-panel #prpg-equipped-items li strong {
    width: auto;
}
    #prpg-set-name-form input[type="text"] {
        padding: 8px 10px;
        font-size: 0.95em;
    }
    .prpg-action-button,
    .prpg-class-card button.select-class-button,
    #info-panel-action button.travel-button,
    #prpg-set-name-form button,
    .item-actions button,
    .complete-attribute-assignment,
    .job-controls .job-button {
        padding: 7px 10px; /* Smaller button padding */
        font-size: 0.9em; /* Smaller button font */
    }
    #prpg-combat-container {
        padding: clamp(8px, 3vw, 12px);
        border-radius: 8px;
    }
    .combat-arena {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Reduced gap */
    }
    .combat-card {
        flex-basis: auto; /* Let content determine basis */
        width: 100%; /* Take full width of its parent */
        max-width: none; /* Remove previous max-width constraint */
        padding: 10px; /* Keep reduced padding */
        margin: 0 auto; /* Center if it doesn't take full width due to parent sizing */
    }
    .combat-vs-separator {
        transform: rotate(90deg);
        margin: 5px 0;
        font-size: 2em; /* Smaller separator font */
    }
    .combat-card-header {
        flex-direction: column;
        text-align: center;
        padding: 8px; /* Reduced padding */
    }
    .combat-avatar-wrapper {
    position: relative;
    width: 75px;
    height: 75px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 3px solid #555;
    transition: border-color .4s ease, box-shadow .4s ease;
    }
    .combatant-name {
        font-size: 1.1em;
    }
    .combatant-level {
        font-size: 0.8em;
    }
    .health-bar-container {
        height: 20px; /* Smaller health bar */
    }
    .bar-text {
        font-size: 0.8em; /* Smaller text on health bar */
    }
    .combat-controls {
        gap: 10px; /* Reduced gap */
    }
    .prpg-action-button.combat-action {
        font-size: 0.95em;
        padding: 9px 14px;
        min-width: 110px;
    }
    .combat-log-area {
        padding: 8px;
        max-height: 180px;
        border-radius: 6px;
    }
    .combat-log-area h4 {
        font-size: 1em;
        margin-bottom: 8px;
    }
    .combat-log-area li {
        font-size: 0.85em;
        padding: 4px 2px;
    }
    .job-item {
        padding: 12px;
    }
    .job-image {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
    }
    .job-item h5 {
        font-size: 1.05em;
    }
    .job-controls {
        gap: 8px;
    }
    .job-hours-select,
    .job-controls .job-button {
        padding: 7px 10px;
        font-size: 0.9em;
    }
    #job-in-progress-container h4 {
        font-size: 1.1em;
    }
    .job-progress-bar {
        height: 20px;
    }
    .job-timer {
        font-size: 1em;
    }
    /* Start Screen Adjustments */
.prpg-start-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 2vw;
    box-sizing: border-box;
    z-index: 100;
}
.prpg-start-box {
    width: 100%;
    height: 100%;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    background-color: #2c3e50;
    border: 1px solid #4a6572;
    border-radius: 0.5rem;
    padding: 4vw;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.6);
    color: #ecf0f1;
    text-align: center;
    box-sizing: border-box;
    background-image: url(images/login-background.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.prpg-game-title {
    font-family: var(--font-headings);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #E6C34F;
    text-shadow: 2px 2px 0.5rem rgba(0, 0, 0, 0.7);
}
.prpg-game-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 1.5rem;
    color: ##d1c7b3;
    opacity: 0.9;
    max-width: 90%;
}
.prpg-start-divider {
    width: 80%;
    max-width: 500px;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(218,165,32,0),rgba(218,165,32,.75),rgba(218,165,32,0));
    margin: 1.5rem 0 2rem 0;
}
.prpg-start-box form input[type="text"],
.prpg-start-box form input[type="password"] {
    background: rgba(128, 128, 128, 0.35);
    border: 1px solid var(--color-border-dark);
    color: var(--color-text-light);
    padding: 12px;
    border-radius: 11px;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: all .3s ease;
}
    .prpg-login-links {
        font-size: 0.85rem;
    }
.guild-summary-header {
    background: var(--card, #1c1c1f);
    border-radius: var(--radius, 12px);
    border: 1px solid var(--border, #3a2a1f);
    padding: clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
    .guild-emblem {
        width: 120px;
        height: 120px;
    }
    .guild-member-list li {
        padding: 0.6rem;
    }
    .member-role {
        font-size: 0.7em;
        margin: 0 0.3rem;
        padding: 2px 6px;
    }
    .guild-card {
        padding: 0.8rem;
    }
    .card-description {
        font-size: 0.8em;
    }
    .card-footer {
        padding-top: 0.8rem;
    }
    .file-upload-label {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    /* Party Member Panel Adjustments */
    .prpg-party-members-panel {
        padding: 1rem;
        border-radius: 8px;
    }
    .prpg-party-members-panel h3 {
        font-size: 1.1rem;
        padding-bottom: 0.6rem;
    }
    .prpg-party-member-list {
        margin-bottom: 1rem;
    }
    .prpg-party-member-list li {
        padding: 0.7rem;
    }
    .party-member-name {
        font-size: 0.9rem;
    }
    .party-member-name strong {
        font-size: 0.8em;
        padding: 1px 4px;
    }
    .party-member-controls .prpg-action-button {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    #prpg-invite-member-form {
        gap: 6px;
    }
    #prpg-invite-member-form input[type="text"] {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    #prpg-invite-member-form .prpg-action-button {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}
#prpg-set-name-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 500px;
  padding: 0 15px;
}
#prpg-set-name-form input[type="text"] {
    width: 100%; 
    box-sizing: border-box; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
}
#prpg-set-name-form input[type="text"]:focus {
  border-color: #E6C34F;
  outline: none;
  box-shadow: 0 0 0.5rem rgba(230, 195, 79, 0.5);
}
#prpg-set-name-form .description {
  font-size: 0.9rem;
  color: #E6C34F;
  margin-top: -0.5rem;
}
.prpg-start-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(218,165,32,0),rgba(218,165,32,.75),rgba(218,165,32,0));
    margin: 1.5rem 0 2rem 0;
}
.prpg-start-box form label {
    font-size: 1rem;
    text-align: left;
    color: var(--color-text-light);
    opacity: .8;
}
.prpg-start-box form input[type="text"]:focus,
.prpg-start-box form input[type="password"]:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(218,165,32,.4);
}
.prpg-start-box .login-remember label {
    font-size: .9rem;
    color: var(--color-text-light);
    opacity: .7;
}
.prpg-start-box .login-submit input,
#prpg-set-name-form button {
    width: 100%;
}
.prpg-login-links {
    margin-top: 1.5rem;
    font-size: .9rem;
}
.prpg-login-links a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color .2s ease;
}
.prpg-login-links a:hover {
    color: #ffbf3f;
    text-decoration: underline;
}
.prpg-login-links span {
    margin: 0 .5rem;
    opacity: .5;
}
#prpg-game-container {
    position: relative !important;
    max-width: 1200px;
    margin: 2rem auto;
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    background: linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.85)), url('../images/territories/castelo_guimaraes.webp') no-repeat center center/cover !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: clamp(15px, 4vw, 30px) !important;
    padding-bottom: 80px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
}
#prpg-music-controls {
    background-color: rgba(30,42,50,.8);
    border: 1px solid rgba(218,165,32,.4);
    backdrop-filter: blur(5px);
}
#prpg-music-controls button {
    color: var(--color-text-light);
}
#prpg-volume-slider {
    background: rgba(218,165,32,.3);
}
#prpg-volume-slider::-webkit-slider-thumb,
#prpg-volume-slider::-moz-range-thumb {
    background: var(--color-gold);
    border: 1px solid var(--color-gold-dark);
}
.item-bonus {
    color: #ffc53a;
}
#prpg-notification-modal-overlay.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(30, 42, 50, 0.8);
    z-index: 9999;
}
#prpg-notification-modal {
    max-width: 400px;
    width: 90%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(-10px);
    animation: modalFadeIn 0.4s ease-out forwards;
}
@keyframes modalFadeIn {
    to { transform: translateY(0); opacity: 1; }
}
.prpg-modal-header {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    background: linear-gradient(28deg, #000000, #1b1919);
}
.prpg-modal-header h3 {
    margin: auto;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}
.prpg-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.prpg-modal-close-btn:hover {
    transform: scale(1.2);
}
.prpg-modal-content {
    background: var(--prpg-bg-panel);
    width: 500px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid var(--prpg-primary);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    animation: fadeIn 0.2s ease-out;
    width: 100%;
}
.conclusion-section {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #2a2a3f;
}
.conclusion-section h3 {
    font-size: 1.5rem;
    color: #ffcc00;
    margin-bottom: 1rem;
    border-bottom: 2px solid #444;
    padding-bottom: 0.5rem;
}
.victory-combatant-card,
.rewards-details,
.defeated-grid {
  width: 100%;
  max-width: 100%;
  display: block;
}
.hunt-proposal-box h4 {
    margin-top: 0;
    font-size: 1.4em;
    color: #f0e68c;
    border-bottom: 1px solid #c5b358;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.hunt-proposal-status {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}
.hunt-proposal-status li {
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    background-color: #2a2a2a;
    border-left: 4px solid #555;
}
.hunt-proposal-status li.pending { border-left-color: #f0ad4e; }
.hunt-proposal-status li.accepted { border-left-color: #5cb85c; }
.hunt-proposal-status li.declined { border-left-color: #d9534f; }
.hunt-proposal-status .status-icon {
    margin-right: 8px;
	color: white;
}
.hunt-proposal-actions p {
    margin-bottom: 10px;
    font-weight: bold;
}
.hunt-proposal-actions .prpg-action-button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 1em;
}
.prpg-modal.defeat .prpg-modal-header {
    background: #a00;
}
.prpg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}
.prpg-modal-overlay.show {
    opacity: 1;
}
.prpg-modal-overlay.active { display: flex; }
.prpg-modal.victory-modal {
    width: 90%;
    max-width: 850px;
    max-height: 90vh;
    background: #1e1e1e;
    border: 1px solid #444;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}
.victory-modal .prpg-modal-header {
    background-color: #35a594;
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-align: center;
}
.victory-modal .prpg-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.victory-section {
    padding: 1rem;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
    border: 1px solid #333;
}
.victory-player {
    flex: 1 1 300px;
}
.victory-defeated {
    flex: 1 1 300px;
}
.victory-rewards {
    flex-basis: 100%;
    order: 3;
}
.victory-section h3 {
    margin-top: 0;
    border-bottom: 1px solid #35a594;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: #eee;
}
.defeated-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.victory-modal .prpg-modal-content {
    display: block; /* Override flex for the grid system */
}
.victory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.victory-column {
    flex: 1;
    min-width: 300px; /* Ensures columns don't get too squished */
}
.victory-player-card {
    background: rgba(42, 42, 42, 0.7);
    border-radius: 6px;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #444;
}
.victory-player-card.is-current-player {
    border-color: #35a594;
    box-shadow: 0 0 10px rgba(53, 165, 148, 0.4);
}
.victory-player-info {
    margin-bottom: 1rem;
}
.victory-player-rewards h3 {
    font-size: 1.1em;
    color: #ccc;
    margin-bottom: 0.5rem;
}
.rewards-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.combat-identity, .combatant-name {
	    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.2em 0.5em;
    border-radius: 4px;
}
.reward-label {
    font-weight: bold;
    margin-right: 0.3rem;
    color: #ffffff;
}
.reward-value.xp {
    color: #ffeb3b;
}
.reward-value.escudos {
    color: #00e5ff;
}
.looted-items-list h5 {
    font-size: 1.1em;
    color: #ccc;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.looted-items-list li .item-name {
    font-size: 0.95em;
    cursor: pointer;
}
@media (max-width: 768px) {
    .victory-grid {
        flex-direction: column;
    }
	    #blacksmith-inventory-list .inventory-item {
        flex: 1 1 100%; /* Single column on small screens */
        max-width: 100%;
    }
}
.victory-combatant-card {
    background-color: #33334d;
    border-radius: 8px;
    padding: 1rem;
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    color: #fff;
}
.victory-combatant-card.player {
    border-left: 5px solid #4caf50;
}
.victory-combatant-card.defeated {
    border-left: 5px solid #f44336;
}
.victory-combatant-card .combat-avatar {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border-radius: 50%;
    border: 1px solid #555;
}
.rewards-list, .looted-items-list {
    list-style: none;
    padding: 0;
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.rewards-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid #333;
}
.looted-item-entry {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between image and text */
    background-color: rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #444;
}
.rewards-list .reward-value.xp { color: #ffffff; }
.rewards-list .reward-value.escudos { color: #ffffff; }
.looted-items-list h5 {
    margin-top: 1rem;
}
.looted-items-list li {
    padding: 0.25rem;
}
.victory-modal .prpg-modal-footer {
    padding: 1rem;
    text-align: center;
    background-color: #2a2a2a;
    border-top: 1px solid #444;
}
@media (max-width: 768px) {
    .prpg-modal.victory-modal .prpg-modal-content {
        flex-direction: column;
    }
    .defeated-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
.item-actions {
  display: flex;
  gap: 0.5rem;
}
.item-actions .prpg-action-button {
  margin: 0;
}
.item-actions .prpg-action-button + .prpg-action-button {
  margin-left: 0.5rem;
}
.equipped-item .prpg-action-button.equip-item-button {
  font-size: 0.75em;       
  padding: 0.5em 1em;     
  line-height: 1;          
  box-sizing: border-box;  
  margin-left: 0.5rem;
}
.prpg-action-button.challenge-button {
  background-color: #ffffff;
}
#prpg-login-screen {
	background-image: url(/assets/images/login-background.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1a202c; /* Fallback */
    position: fixed; 
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8); 
    padding: 2vw; 
    box-sizing: border-box;
    z-index: 100; 
}
.guild-container {
    width: 100%;
    background-color: var(--prpg-primary-bg);
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    padding: 20px;
    box-shadow: var(--prpg-box-shadow);
    color: var(--prpg-text-color);
    box-sizing: border-box;
}
.guild-section, .guild-tab-content {
    background-color: var(--color-bg-panel-light, #fdfdfd);
    border: 1px solid var(--color-border-light, #e0e0e0);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 100%; /* ou outro valor, conforme necessário */
    width: 100%;
    box-sizing: border-box;
}
.no-guild-container {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 2px dashed var(--color-border-light);
}
.no-guild-icon svg { color: var(--color-gold); margin-bottom: 1rem; }
.no-guild-container h3 { font-family: var(--font-headings); font-size: 1.8rem; margin: 0 0 0.5rem 0; }
.no-guild-container p { max-width: 500px; margin: 0 auto 1.5rem auto; color: var(--color-text-secondary); }
.guild-initial-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.guild-initial-actions .prpg-action-button svg { margin-right: 0.5rem; vertical-align: middle; }
.secondary-button { background: var(--color-bg-dark); border-color: var(--color-border-dark); color: var(--color-text-light); }
.secondary-button:hover:not(:disabled) { background: #4a4a4a; }
.guild-emblem-wrapper {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background-color: #1e1e1e; /* Fallback background */
    border: 2px solid #444;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.guild-emblem {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    display: block;
}
.guild-card-emblem-wrapper {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background-color: #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #555;
}
.guild-card-emblem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.guild-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.guild-list-card {
    background-color: #2c2c2e;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.guild-list-card:hover {
    background-color: #3a3a3c;
    border-color: #666;
}
.guild-card-info {
    flex-grow: 1;
}
.guild-card-info h5,
.guild-card-info p {
    margin: 0;
    line-height: 1.4;
}
.guild-card-name {
    font-size: 1.1rem;
    color: #e0e0e0;
}
.guild-level {
    font-size: 0.9rem;
    color: #aaa;
}
.guild-card-leader,
.guild-card-members {
    font-size: 0.9rem;
    color: #ccc;
}
.guild-card-members.full {
    color: #ff6b6b;
}
.icon-button { padding: 0.5rem; width: 32px; height: 32px; border-radius: 50%; line-height: 1; display: inline-flex; justify-content: center; align-items: center; }
#change-emblem-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    backdrop-filter: blur(2px);
}
#change-emblem-btn:hover {
    background-color: var(--prpg-accent-color, #d4a15e);
    transform: scale(1.1);
}
@media (min-width: 769px) {
    .guild-summary-header {
        flex-direction: row;
        text-align: left;
    }
}
.guild-info { flex-grow: 1; }
.guild-info h2 {
    margin: 0 0 10px 0;
    color: var(--prpg-title-color);
    font-size: 1.8em;
}
.guild-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; color: var(--color-text-secondary); margin-top: 0.5rem; }
.guild-meta span {
    display: inline-block;
    margin-right: 15px;
    font-size: 0.9em;
    color: var(--prpg-text-color-secondary);
}
.guild-meta strong {
    color: var(--prpg-text-color-light);
}
#guild-escudos {
    color: var(--prpg-gold-color);
    font-weight: bold;
}
.guild-meta svg { color: var(--color-gold-dark); }
.guild-progress { margin-top: 1rem; }
.guild-progress .progress-bar-container { background-color: #e9ecef; border-radius: 50px; height: 1.25rem; position: relative; }
.guild-progress .bar-fill { background: linear-gradient(90deg, ##d1c7b3, #ffb300); border-radius: 50px; }
.guild-tabs-nav {
    display: flex;
    background-color: var(--prpg-secondary-bg);
    border-bottom: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius) var(--prpg-border-radius) 0 0;
    overflow: hidden;
    margin-top: 20px;
}
.guild-tab-link {
    flex-grow: 1;
    padding: 12px 0;
    border: none;
    background-color: transparent;
    color: var(--prpg-text-color-secondary);
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    border-bottom: 2px solid transparent;
}
.guild-tab-link:hover {
    background-color: var(--prpg-dark-bg);
    color: var(--prpg-text-color-light);
}
.guild-tab-link.active {
    background-color: var(--prpg-panel-bg-color);
    color: var(--prpg-title-color);
    font-weight: bold;
    border-bottom-color: var(--prpg-accent-color);
}
.guild-tab-content-wrapper {
    background-color: var(--prpg-panel-bg-color);
    border: 1px solid var(--prpg-border-color);
    border-top: none;
    border-radius: 0 0 var(--prpg-border-radius) var(--prpg-border-radius);
    padding: 15px;
}
.guild-tab-content { display: none; }
.guild-tab-content.active {
    display: block;
    width: 100%;
    animation: tab-fade-in 0.4s ease;
    box-sizing: border-box;
}
@keyframes tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.guild-member-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.guild-member-list li {
    background-color: var(--prpg-dark-bg);
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    padding: 10px 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95em;
}
.guild-member-list li:last-child {
    margin-bottom: 0;
}
.guild-member-list .member-role {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: var(--prpg-border-radius);
    font-size: 0.8em;
    text-transform: capitalize;
}
.guild-member-list .member-role.leader { background-color: #a040a0; color: #fff; } /* Purple */
.guild-member-list .member-role.officer { background-color: #d35400; color: #fff; } /* Orange */
.guild-member-list .member-role.member { background-color: #34495e; color: #fff; } /* Dark Blue */
.guild-member-list .member-actions button {
    margin-left: 5px;
    padding: 5px 10px;
    font-size: 0.85em;
}
.member-name { flex-grow: 1; font-weight: 600; }
.member-name small { color: var(--color-text-secondary); }
.member-role { padding: 3px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 700; margin: 0 1rem; }
.member-role.leader { background-color: ##d1c7b3; color: #333; }
.member-role.officer { background-color: #c0c0c0; color: #333; }
.member-role.member { background-color: #cd7f32; color: #fff; }
.member-actions { margin-left: auto; }
.action-dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background-color: white; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 10; min-width: 120px; }
.action-dropdown:hover .dropdown-menu, .action-dropdown .icon-button:focus + .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 0.5rem 1rem; color: #333; text-decoration: none; }
.dropdown-menu a:hover { background-color: #f5f5f5; }
.danger-text { color: #dc3545 !important; }
/* Building Card Specifics */
.building-card.built .status-built {
    display: inline-block;
    background-color: var(--prpg-success-color);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--prpg-border-radius);
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 10px;
}
.building-card .building-bonus {
    font-size: 0.9em;
    color: var(--prpg-accent-color);
    margin-top: 5px;
}
.cost { font-weight: 600; }
.status-built, .status-locked { color: #6c757d; font-style: italic; display: flex; align-items: center; gap: 0.3rem; }
.status-built { color: #28a745; }
.donation-form-wrapper { text-align: center; max-width: 450px; margin: auto; }
.donation-form { display: flex; gap: 10px; align-items: center; }
.prpg-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.guild-activity-log { list-style: none; padding: 0; color: #444; }
.guild-activity-log li { padding: 0.75rem; border-bottom: 1px dashed #eee; display: flex; align-items: center; gap: 0.75rem; }
.guild-activity-log li:last-child { border-bottom: none; }
.guild-activity-log .log-date { margin-left: auto; color: var(--color-text-secondary); font-size: 0.85em; }
.guild-footer { padding-top: 1.5rem; text-align: right; border-top: 1px solid #eee; margin-top: 1.5rem; }
.danger-button {
    background: var(--color-danger, #dc3545);
    border-color: var(--color-danger-dark, #c82333);
    color: white;
}
.danger-button:hover:not(:disabled) { background: var(--color-danger-dark, #c82333); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
#emblem-upload-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
#emblem-upload-form p {
    text-align: center;
    color: #555;
    margin-top: 0;
}
.file-upload-wrapper {
    position: relative;
    width: 100%;
}
.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #f0f2f5;
    border: 2px dashed #d9dde3;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    font-weight: 600;
    color: #555;
}
.file-upload-label:hover {
    background-color: #e9ecf1;
    border-color: var(--color-gold);
}
.file-upload-label svg {
    margin-right: 0.75rem;
}
#emblem_file_input {
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#emblem_file_input:focus + .file-upload-label {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
#upload-progress-container {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}
#upload-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, ##d1c7b3, #ffb300);
    border-radius: 5px;
    transition: width 0.3s ease;
}
#submit-emblem-upload:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.item-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    word-break: break-word;
}
.rarity-common { color: #808080; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
.rarity-uncommon { color: #1eff00; text-shadow: 1px 1px 3px #0a5c00; }
.rarity-rare { color: #0070dd; text-shadow: 1px 1px 3px #002c59; }
.rarity-epic { color: #a335ee; text-shadow: 1px 1px 4px #4b186f; }
.rarity-legendary {
    color: #ff8000;
    text-shadow: 1px 1px 4px #663300;
    animation: pulseLegendaryText 2s infinite ease-in-out;
}
.prpg-panel .rarity-common { color: #444444; text-shadow: none; }
@keyframes pulseLegendaryText {
    0%, 100% { color: #ff8000; text-shadow: 1px 1px 4px #663300; }
    50% { color: #ffc28a; text-shadow: 1px 1px 6px #ff8000; }
}
#prpg-global-tooltip, #prpg-custom-tooltip {
    position: fixed;
    display: none;
    max-width: 320px;
    background-color: rgba(30, 42, 50, 0.97);
    color: #ecf0f1;
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 12px;
    z-index: 10000;
    pointer-events: none;
    font-family: var(--font-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
#prpg-global-tooltip.visible, #prpg-custom-tooltip.visible {
    display: block;
    opacity: 1;
}
.tooltip-header {
    font-family: var(--font-headings);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-gold);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(218,165,32,.4);
}
.tooltip-body p, .tooltip-body div {
    margin: 4px 0;
    font-size: 0.9em;
    line-height: 1.4;
}
.tooltip-body .item-type-slot {
    color: #aaa;
    font-style: italic;
}
.tooltip-body hr {
    border: 0;
    border-top: 1px solid #444;
    margin: 8px 0;
}
.tooltip-affixes .affix {
    padding: 2px 0;
}
.affix.affix-positive { color: #66bb6a; } 
.affix.affix-negative { color: #ef5350; } 
.affix.affix-neutral { color: #bdbdbd; }  
.tooltip-body .item-value {
    color: #f0c419; 
    margin-top: 10px;
    text-align: right;
    font-weight: bold;
}
.tooltip-body .item-description {
    color: #ccc;
    font-style: italic;
    border-left: 3px solid #555;
    padding-left: 8px;
    margin-top: 10px;
}
.equipped-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.equipped-items-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.equipped-items-list li:last-child {
    border-bottom: none;
}
.equipped-items-list strong {
    width: 120px;
    flex-shrink: 0;
}
#prpg-character-class-image-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Optional: use if you want vertical centering too */
    padding: 1rem 0;
}
.prpg-character-class-image {
    width: 200px;
    height: 200px;
	text-align: center;
    object-fit: cover; /* Mantém proporção e preenche */
    border-radius: 11px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    max-width: 100%;
}
#prpg-character-class-image {
    max-width: 100%;
    height: 150px;
    display: inline-block;
    border-radius: 11px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#prpg-custom-tooltip.visible {
    display: block; 
    opacity: 1;
}
.tooltip-header.rarity-common { color: #bdc3c7; }
.tooltip-header.rarity-uncommon { color: #2ecc71; }
.tooltip-header.rarity-rare { color: #3498db; }
.tooltip-header.rarity-epic { color: #9b59b6; }
.tooltip-header.rarity-legendary { color: #f1c40f; }
.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tooltip-body p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #bdc3c7;
}
.tooltip-body p strong {
    color: #ffffff;
    font-weight: 600;
}
.tooltip-body .stat-effect {
    color: #2ecc71; 
}
.tooltip-body .stat-source {
    font-size: 0.85em;
    color: #7f8c8d;
    border-left: 2px solid #4a6572;
    padding-left: 8px;
    margin-top: 8px;
}
.tooltip-body hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(218,165,32,0), rgba(218,165,32,.4), rgba(218,165,32,0));
    margin: 6px 0;
}
.tooltip-body .item-type-slot {
    font-size: 0.9em;
    color: #95a5a6;
    font-style: italic;
}
.tooltip-affixes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tooltip-affixes .affix {
    font-size: 0.9em;
}
.affix.affix-positive { color: #66bb6a; } 
.affix.affix-negative { color: #ef5350; } 
.affix.affix-neutral { color: #bdbdbd; }  
.tooltip-body .item-description {
    font-style: italic;
    color: #95a5a6;
    font-size: 0.9em;
    padding-left: 10px;
    border-left: 3px solid #4a6572;
}
.tooltip-body .item-value {
    font-weight: bold;
    color: var(--color-gold);
    text-align: right;
    margin-top: 8px;
}
@media (min-width: 769px) {
    .guild-summary-header {
        flex-direction: row;
        text-align: left;
    }
}
@media (max-width: 480px) {
    .prpg-tabs {
        padding: 5px;
    }
    .tab-link {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
    .prpg-header span {
        font-size: 1rem;
    }
    .prpg-map-container {
        min-height: 300px;
    }
    .inventory-list li {
        flex-direction: column;
        align-items: flex-start;
    }
    .item-actions {
        width: 100%;
        margin-top: 10px;
    }
	    #daily-reward-icon-container {
        top: 10px;
        left: 10px;
    }
    #open-daily-reward-modal {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em ecrãs muito pequenos */
    }
    #daily-reward-modal .prpg-modal-body {
        padding: 1rem;
    }
}
.progress-bar-container {
    width: 100%;
    background-color: var(--prpg-dark-bg);
    border-radius: var(--prpg-border-radius);
    overflow: hidden;
    height: 25px;
    margin-top: 10px;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.progress-bar-container .bar-fill {
    height: 100%;
    background-color: var(--prpg-progress-bar-fill);
    border-radius: var(--prpg-border-radius);
    transition: width 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guild-level-up-action {
    margin-top: 15px;
    text-align: right;
}
.bar-fill.xp-bar {
    background: linear-gradient(to right, var(--color-gold-dark, #c48f00), var(--color-gold, #E6C34F));
}
.guild-progress {
    margin-top: 0;
}
#prpg-header-party-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 340px;
    max-width: 90vw;
    z-index: 100;
    background-color: #2B343B;
    color: #EAECEF;
    font-family: var(--font-primary);
    border: 1px solid #4A545C;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#prpg-header-party-chat .chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid #4A545C;
    cursor: pointer;
    border-radius: 11px 11px 0 0;
    transition: background-color 0.2s ease;
}
#prpg-header-party-chat .chat-header:hover,
#prpg-header-party-chat .chat-header:focus-visible {
    background-color: rgba(0,0,0,0.4);
    outline: none;
}
#prpg-header-party-chat .chat-title {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 1rem;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#prpg-header-party-chat .chat-toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: var(--color-gold);
}
#prpg-header-party-chat .chat-toggle-icon img.emoji {
    vertical-align: middle;
}
#prpg-header-party-chat .chat-body,
#prpg-header-party-chat .chat-footer {
    display: none;
}
.prpg-party-chat-panel {
    display: flex;
    flex-direction: column;
    height: 450px;
    background-color: #ffffff;
    border: 1px solid #4A545C;
    border-radius: 12px;
    padding: 1rem;
    color: #EAECEF;
}
.prpg-party-chat-panel h3 {
    font-family: var(--font-headings);
    text-align: center;
    margin: 0 0 1rem 0;
    color: var(--color-gold);
    border-bottom: 1px solid #4A545C;
    padding-bottom: 0.75rem;
}
.chat-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#prpg-header-party-chat .chat-log {
    max-height: 300px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(212, 161, 94, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--prpg-primary);
}
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.chat-message .message-author {
    display: block;
    font-size: 0.8em;
    font-weight: 700;
    margin-bottom: 3px;
    opacity: 0.9;
}
.chat-message.other-message {
    background: linear-gradient(145deg, #495057, #343a40);
    color: #f8f9fa;
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}
.chat-message.other-message .message-author {
    color: #ced4da;
}
.chat-message.my-message {
    background: #d1c7b3;
    color: #000000;
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}
.chat-message.my-message .message-author {
    background: linear-gradient(145deg, #00bcff, #187625);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.chat-log .no-messages {
    text-align: center;
    color: #909A9C;
    font-style: italic;
    margin: auto;
    padding: 2rem 1rem;
    background-color: rgba(0,0,0,0.05);
    border-radius: 8px;
    border: 1px dashed rgba(0,0,0,0.1);
}
.chat-log .no-messages::before {
    content: '🗨️';
    display: block;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}
#prpg-party-chat-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #4A545C;
}
#prpg-party-chat-form input[type="text"] {
    flex-grow: 1;
    background: #d1c7b3;
    border: 1px solid #4A545C;
    color: #000000;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#prpg-party-chat-form input[type="text"]:focus-visible {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(230, 195, 79, 0.4);
	color:
}
#prpg-party-chat-form button {
    flex-shrink: 0;
    background: var(--color-gold);
    border: none;
    color: #1E2A32;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
    font-size: 10px;
}
#prpg-party-chat-form button:hover:not(:disabled) {
    background-color: #E6C34F;
	color: #000000;
    transform: scale(1.1);
}
#prpg-party-chat-form button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
#prpg-party-chat-form button:disabled {
    background-color: #555;
    cursor: not-allowed;
}
#prpg-party-chat-form button img.emoji {
    width: 48px !important;
    height: 48px !important;
}
#prpg-party-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    background-color: #f4f6f8;
    border-radius: 8px;
}
#prpg-party-container > h2 {
    font-family: var(--font-headings);
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    text-align: center;
    color: #2c3e50;
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dde2e7;
}
.prpg-party-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .prpg-party-grid {
        grid-template-columns: 1fr;
    }
	    .stats-layout-grid {
        grid-template-columns: 1fr;
    }
    #prpg-character-class-image-container {
        display: flex;
        justify-content: center;
    }
    #prpg-stats-panel .prpg-character-class-image {
        width: 150px;
        height: 150px;
    }
	    .stats-layout-table,
    .stats-layout-table tbody,
    .stats-layout-table tr {
        display: block;
        width: 100%;
    }
    .stats-layout-table td {
        display: block;
        width: 100%;
        box-sizing: border-box; /* Garante que o padding não cause overflow */
        padding: 0; /* Reseta o padding da célula da tabela */
    }
    /* Centraliza a coluna do personagem */
    .stats-character-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    /* Faz com que as colunas de stats (Geral, Atributos, Bónus) se empilhem */
    .stats-grid-container-table,
    .stats-grid-container-table tbody,
    .stats-grid-container-table tr {
        display: block;
    }
    .stats-grid-container-table .stats-column {
        display: block;
        width: 100%;
        margin-bottom: 25px; /* Adiciona espaço entre as secções empilhadas */
    }
}
.prpg-party-members-panel {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #dde2e7;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.prpg-party-members-panel h3,
.prpg-party-chat-panel h3 {
    font-family: var(--font-headings);
    text-align: center;
    margin: 0 0 1rem 0;
    color: #34495e;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.75rem;
}
.prpg-party-member-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}
.prpg-party-member-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem;
    border-bottom: 1px solid #f1f3f5;
    transition: background-color 0.2s ease;
}
.prpg-party-member-list li:last-child {
    border-bottom: none;
}
.prpg-party-member-list li:hover {
    background-color: #f8f9fa;
}
.party-member-name {
    font-weight: 600;
    color: #495057;
}
.party-member-name strong {
    font-weight: 700;
    color: var(--color-gold-dark);
    margin-left: 0.5rem;
    font-size: 0.9em;
    background-color: #fff8e1;
    padding: 2px 6px;
    border-radius: 10px;
}
.party-member-controls {
    display: flex;
    gap: 0.5rem;
}
.party-member-controls .prpg-action-button {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid transparent;
    box-shadow: none;
    outline: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.party-member-controls .promote-member-btn {
    background-color: #e8f5e9;
    color: #388e3c;
}
.party-member-controls .promote-member-btn:hover {
    background-color: #c8e6c9;
    border-color: #388e3c;
    transform: scale(1.1);
}
.party-member-controls .kick-member-btn {
    background-color: #ffebee;
    color: #d32f2f;
}
.party-member-controls .kick-member-btn:hover {
    background-color: #ffcdd2;
    border-color: #d32f2f;
    transform: scale(1.1);
}
#prpg-invite-member-form {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-direction: column;
}
#prpg-invite-member-form input[type="text"] {
    flex-grow: 1;
    padding: 10px 16px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#prpg-invite-member-form input[type="text"]:focus-visible {
    border-color: var(--color-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 195, 79, 0.25);
}
#prpg-invite-member-form .prpg-action-button {
    padding: 10px 16px;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 20px;
    outline: none;
}
#prpg-party-container hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
    margin: 0;
}
.prpg-party-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.prpg-party-chat-panel {
    height: auto;
    min-height: 450px;
}
#prpg-party-chat-form button {
    flex-shrink: 0;
    background: var(--color-gold);
    border: none;
    color: #1E2A32;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
}
#prpg-party-chat-form button:hover:not(:disabled) {
    background-color: #ffdd70;
    transform: scale(1.1);
}
#prpg-party-chat-form button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
#prpg-party-chat-form button:disabled {
    background-color: #555;
    cursor: not-allowed;
}
#prpg-party-hunt-proposal-placeholder {
    margin: 20px 0;
}
/* ==========================================================================
   ESTILOS FINAIS PARA O ECRÃ DE COMBATE
   Focado em legibilidade, consistência de tema e impacto visual.
   ========================================================================== */
/* --- Paleta de Cores e Animações Globais --- */
:root {
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-headings: 'Helvetica Neue', Arial, sans-serif; /* Exemplo de fonte para títulos */
    --font-monospace: 'Courier New', Courier, monospace;
    /* Cores do Tema Escuro (baseado no seu ficheiro) */
    --color-bg-darkest: #1a1a1a;
    --color-bg-dark: #202020;
    --color-bg-medium: #2a2a2a;
    --color-bg-light: #383838;
    --color-border-dark: #444;
    --color-border-medium: #555;
    /* Cores de Texto de Alto Contraste */
    --color-text-light: #ecf0f1;     /* Para texto principal */
    --color-text-secondary: #bdc3c7; /* Para sub-texto, níveis, etc. */
    --color-text-muted: #95a5a6;     /* Para texto menos importante */
    /* Cores de Ação e Destaque */
    --color-gold: #f0c419;
    --color-gold-dark: #c48f00;
    --color-damage: #e53935;
    /* Cores de Status */
    --color-hp-full: #2ecc71;
    --color-hp-medium: #f1c40f;
    --color-hp-low: #e74c3c;
}
/* Animações chave baseadas no seu ficheiro */
@keyframes fadeInCombat {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pulseCombatAction {
  0%, 100% { background-color: var(--color-gold-dark); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); }
  50% { background-color: var(--color-gold); box-shadow: 0 6px 15px rgba(240, 196, 25, 0.6); }
}
@keyframes float-avatar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* --- Container Principal do Ecrã de Combate --- */
#party-combat-screen {
    font-family: var(--font-primary);
    background-image: url('/wp-content/plugins/portugal-rpg/assets/images/city_buildings/battleground.webp');
    color: var(--color-text-light); /* Garante texto claro por defeito */
    padding: clamp(15px, 3vw, 25px);
    max-width: auto;
    margin: 20px auto;
    border: 2px solid var(--color-border-dark);
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeInCombat .5s ease-out;
	width: 100%;
}
#party-combat-screen h2, #party-combat-screen h4 {
    font-family: var(--font-headings);
    font-weight: 700;
    margin: 0 0 15px 0;
    padding-bottom: 12px;
    text-align: center;
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-border-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* --- Ordem de Turno --- */
.turn-order-container {
    background-color: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 8px;
}
.turn-order-container h4 {
    color: var(--color-text-secondary);
    border: none;
    font-size: 1em;
    margin-bottom: 15px;
}
.turn-order-list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.turn-order-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    color: var(--color-text-muted);
    transition: all 0.3s ease;
}
.turn-order-list li.current {
    opacity: 1;
    transform: scale(1.2);
    color: var(--color-gold);
}
.turn-order-list img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--color-border-medium);
    object-fit: cover;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.turn-order-list li.current img {
    border-color: var(--color-gold);
    box-shadow: 0 0 15px rgba(240, 196, 25, 0.7);
    animation: float-avatar 2s infinite ease-in-out;
}
/* --- Grelha Principal de Combate --- */
.party-combat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;
}
.combat-team {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* --- Cartão de Combatente --- */
.combatant {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(to bottom, var(--color-bg-light), var(--color-bg-medium));
    border: 1px solid var(--color-border-medium);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.monster-target { text-decoration: none; }
.monster-target .combatant:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
}
.monster-target .combatant.selected-target {
    border-color: var(--color-damage);
    box-shadow: 0 0 15px var(--color-damage);
    transform: translateY(-2px) scale(1.02);
}
.combatant.current-turn {
    border-color: var(--color-gold);
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(240, 196, 25, 0.6);
}
.combatant.defeated {
    opacity: 0.5;
    filter: grayscale(1);
    box-shadow: none;
    transform: scale(0.98);
}
.combatant-image {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-border-dark);
}
.combatant-image img { width: 100%; height: 100%; object-fit: cover; }
.combatant.current-turn .combatant-image {
    animation: float-avatar 2s infinite ease-in-out;
}
.combatant-info { display: flex; flex-direction: column; flex-grow: 1; gap: 5px; }
.combatant-info strong { font-size: 1.2em; color: var(--color-text-light); }
.combatant-info small { font-size: 0.9em; color: var(--color-text-secondary); }
.rewards-list li, .looted-items-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 4px;
}
.rewards-list img, .looted-items-list img {
    width: 100px; /* Set image width */
    height: 100px; /* Set image height */
    margin-right: 15px;
    border: 1px solid #444;
    object-fit: contain; /* Ensures the image aspect ratio is maintained */
}
.rewards-list .item-info, .looted-items-list .item-info {
    display: flex;
    flex-direction: column;
}
.rewards-list .item-name, .looted-items-list .item-name {
    font-weight: bold;
    font-size: 1.1em;
}
.combatant[data-key="monster_0"] .health-bar {
    background: linear-gradient(to right, #c0392b, var(--color-hp-low));
}
.health-bar-container span {
    position: absolute !important;
    top: 50% !important;
    left: 0 px !important;
    right: 0px !important;
    transform: translateY(-50%);
    text-align: center;
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
/* --- Rodapé: Log e Ações --- */
.party-combat-footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    background-color: var(--color-bg-dark);
    padding: 20px;
    border-radius: 10px;
}
.combat-log-area, .combat-log {
    background-color: var(--color-bg-darkest);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    padding: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
}
.combat-log h4 { color: var(--color-gold); }
.combat-log .log-entries {
    height: 150px;
    overflow-y: auto;
    font-family: var(--font-monospace);
    font-size: 0.95em;
    line-height: 1.5;
}
.combat-log .log-entries p { padding: 4px 0; margin: 0; border-bottom: 1px solid #2c2c2c; }
.combat-log .log-entries p:last-child { border-bottom: none; }
.damage-text { color: var(--color-damage); font-weight: 700; }
.log-entries::-webkit-scrollbar { width: 8px; }
.log-entries::-webkit-scrollbar-track { background: transparent; }
.log-entries::-webkit-scrollbar-thumb { background-color: var(--color-border-medium); border-radius: 4px; }
.combat-actions { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.combat-actions p { font-size: 1.25em; color: var(--color-gold); text-align: center; text-shadow: 0 0 8px var(--color-gold); }
.prpg-action-button.party-combat-action {
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    padding: 12px 22px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
    min-width: 140px;
    animation: pulseCombatAction 2.5s ease-in-out infinite;
    transition: transform .2s ease, box-shadow .2s ease;
}
.prpg-action-button.party-combat-action:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 16px rgba(226, 164, 0, .6);
}
/* --- Tooltip - Corrigido para Legibilidade e Estilo --- */
#prpg-combat-tooltip {
    position: fixed;
    display: none;
    max-width: 300px;
    background-color: rgba(30, 42, 50, 0.97); /* Fundo escuro e opaco */
    color: var(--color-text-light); /* Texto principal claro */
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 12px;
    z-index: 10001;
    pointer-events: none;
    font-family: var(--font-primary);
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
#prpg-combat-tooltip.visible { display: block; opacity: 1; }
#prpg-combat-tooltip h5 {
    font-family: var(--font-headings);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-gold);
    padding-bottom: 8px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid rgba(240, 196, 25, .4);
}
#prpg-combat-tooltip p {
    font-size: 0.9em;
    font-style: italic;
    color: var(--color-text-muted); /* Cor secundária para descrição */
    margin: 0 0 10px 0;
}
#prpg-combat-tooltip ul { list-style: none; padding: 0; margin: 0; }
#prpg-combat-tooltip li {
    display: flex;
    justify-content: space-between;
    font-size: 0.95em;
    padding: 2px 0;
    color: var(--color-text-secondary); /* Cor secundária para stats */
}
#prpg-combat-tooltip li strong {
    color: var(--color-text-light); /* Cor primária para os valores */
    font-weight: 600;
}
/* --- Design Responsivo --- */
@media (max-width: 900px) {
    .party-combat-grid, .party-combat-footer { grid-template-columns: 1fr; }
    .combat-log { order: 2; }
    .combat-actions { order: 1; }
}
@media (max-width: 600px) {
    #party-combat-screen { padding: 10px; }
    .combatant { flex-direction: column; text-align: center; align-items: center; }
    .combatant-image { width: 80px; height: 80px; }
    .turn-order-list img { width: 40px; height: 40px; }
    .turn-order-list li.current { transform: scale(1.15); }
    .party-combat-footer { gap: 15px; }
    .prpg-action-button.party-combat-action { font-size: 1em; padding: 10px 18px; }
	    .attributes-hex-container {
        max-width: 240px; /* Um pouco mais pequeno para caber melhor */
    }
    /* Reduz o tamanho das fontes nas etiquetas do hexagrama para evitar sobreposição */
    .hex-labels .hex-label-name {
        font-size: 10px;
    }
    .hex-labels .hex-label-value {
        font-size: 14px;
    }
    /* Oculta os ícones em ecrãs muito pequenos para simplificar e ganhar espaço */
    .hex-labels .hex-icon {
        display: none;
    }
}
}
.raid-card .raid-type {
    font-size: 0.8em;
    background-color: var(--prpg-secondary-button-bg);
    color: var(--prpg-secondary-button-text);
    padding: 3px 7px;
    border-radius: var(--prpg-border-radius);
    margin-left: 8px;
    flex-shrink: 0;
}
.raid-card .raid-info {
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
    color: var(--prpg-text-color-secondary);
    margin-top: auto; /* Pushes to the bottom */
    margin-bottom: 10px;
}
.raid-card .raid-info strong {
    color: var(--prpg-text-color-light);
}
.raid-card .requirement-note {
    font-size: 0.8em;
    color: var(--prpg-danger-color);
    margin-top: 5px;
    text-align: center;
}
.donation-container {
    display: grid;
    grid-template-columns: 1fr; /* Stack on smaller screens */
    gap: 20px;
    padding: 15px;
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    background: var(--prpg-dark-bg);
}
@media (min-width: 1024px) {
    .equipment-slot-wrapper {
        flex: 1 1 calc(25% - 1rem); /* 4 per row on desktops+ */
    }
}
@media (min-width: 768px) {
    .donation-container {
        grid-template-columns: 1fr 1fr; /* Side-by-side on larger screens */
    }
	    .equipment-slot-wrapper {
        flex: 1 1 calc(33.333% - 1rem); /* 3 per row on tablets+ */
    }
}
.donation-container > div {
    background-color: var(--prpg-card-bg);
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    padding: 20px;
    text-align: center;
}
.donation-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--prpg-title-color);
}
.donation-container input[type="number"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid var(--prpg-input-border-color);
    border-radius: var(--prpg-border-radius);
    background-color: var(--prpg-input-bg);
    color: var(--prpg-text-color);
    box-sizing: border-box;
}
.donation-container .donate-button {
    width: 100%;
    padding: 10px;
    font-size: 1em;
}
/* Donation Log */
.guild-donation-log {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    background: var(--prpg-dark-bg);
    padding: 10px;
}
.guild-donation-log li {
    background-color: var(--prpg-card-bg);
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    padding: 8px 12px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: var(--prpg-text-color);
}
.guild-donation-log li:last-child {
    margin-bottom: 0;
}
.guild-donation-log .donation-date {
    font-size: 0.8em;
    color: var(--prpg-text-color-secondary);
    margin-left: 10px;
}
/* Guild Footer */
.guild-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--prpg-border-color);
    text-align: center;
}
.guild-footer .danger-button {
    margin: 0 5px;
}
/* No Guild Container */
.no-guild-container {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--prpg-panel-bg-color);
    border: 1px solid var(--prpg-border-color);
    border-radius: var(--prpg-border-radius);
    box-shadow: var(--prpg-box-shadow);
}
.no-guild-container .no-guild-icon {
    color: var(--prpg-accent-color);
    margin-bottom: 20px;
}
.no-guild-container h3 {
    color: var(--prpg-title-color);
    margin-bottom: 10px;
}
.no-guild-container p {
    color: var(--prpg-text-color-secondary);
    max-width: 500px;
    margin: 0 auto 30px auto;
}
.guild-initial-actions button {
    margin: 0 10px;
}
.prpg-action-button.secondary-button {
    background-color: var(--prpg-secondary-button-bg);
}
.prpg-action-button.secondary-button:hover {
    background-color: var(--prpg-secondary-button-hover-bg);
}
.prpg-action-button.danger-button {
    background: linear-gradient(135deg, #4a1914, #2d0f0c) !important;
    border-color: rgba(231, 76, 60, 0.4) !important;
    color: #ff8a80 !important;
}
.prpg-action-button.danger-button:hover {
    background-color: var(--prpg-danger-button-hover-bg);
}
.prpg-action-button.danger-button:hover:not(:disabled) {
    border-color: #e74c3c !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.3) !important;
}
.prpg-action-button.icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}
#prpg-global-tooltip {
    background-color: rgba(15, 15, 20, 0.9);
    color: #e0e0e0;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid #4a4a52;
    z-index: 10000;
    max-width: 280px;
    width: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    pointer-events: none; /* Prevents tooltip from blocking mouse events */
    text-align: center;
    font-size: 0.9em;
    transition: opacity 0.2s ease-in-out;
    /* Centering Logic */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#prpg-global-tooltip h5 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0c43c;
    color: #f0c43c; /* Gold color */
    font-size: 1.25em;
    font-weight: bold;
}
#prpg-global-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
#prpg-global-tooltip li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}
#prpg-global-tooltip li strong {
    color: #a0a0a0;
    margin-right: 15px;
}
.prpg-character-image {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 11px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 800px) {
    /* ATUALIZADO: Layout do painel de estatísticas para mobile */
    #prpg-stats-panel .stats-grid-container {
        grid-template-columns: 1fr; /* Muda para uma única coluna */
        gap: 25px; /* Ajusta o espaçamento vertical entre as secções */
    }
    #prpg-stats-panel .stats-column {
        text-align: center;
    }
#prpg-stats-panel .prpg-character-class-image {
    width: 150px;
    height: 150px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}
    #prpg-stats-panel #prpg-equipped-items li {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 12px 0;
    }
}
@media (max-width: 767px) {
    /* ... (a maioria dos seus estilos responsivos existentes vai aqui) ... */
    .prpg-normal-panels-wrapper {
        flex-direction: column;
        padding: 1rem;
    }
    .prpg-normal-panels-wrapper #prpg-stats-panel,
    .prpg-normal-panels-wrapper #prpg-main-content-panel {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
.combat-avatar-wrapper.rarity-rare { box-shadow: 0 0 15px rgba(0, 112, 221, 0.8); }
.combat-avatar-wrapper.rarity-epic { box-shadow: 0 0 20px rgba(163, 53, 238, 0.9); }
.combat-modal-overlay.show .prpg-modal {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s;
}

/* VIP Monthly Pass & Profile Dashboard Styles */
.prpg-vip-profile {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}
.prpg-vip-badge {
    animation: prpgGoldGlow 2s infinite alternate;
}
@keyframes prpgGoldGlow {
    from { box-shadow: 0 0 4px rgba(245, 158, 11, 0.5); }
    to { box-shadow: 0 0 12px rgba(245, 158, 11, 0.9); }
}
.prpg-promoted-card {
    border: 2px solid #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}
.prpg-promoted-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

/* Arena Leaderboard & Stats Classes */
.arena-leaderboard-container {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid #475569;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.arena-leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.arena-leaderboard-title {
    margin: 0;
    font-weight: 800;
    color: #fbbf24;
    font-size: 1.2rem;
}
.arena-leaderboard-select {
    background: #0f172a;
    border: 1px solid #475569;
    color: #f1f5f9;
    padding: 5px;
    border-radius: 6px;
    font-size: 12px;
}
.arena-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.arena-leaderboard-entry {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    gap: 10px;
    flex-wrap: wrap;
}
.arena-leaderboard-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background 0.3s;
}
.arena-leaderboard-entry:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
}
.arena-leaderboard-entry:nth-child(1) {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.05);
}
.arena-leaderboard-entry:nth-child(1)::before {
    background: #fbbf24;
}
.arena-leaderboard-entry:nth-child(1):hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.15);
}
.arena-leaderboard-entry:nth-child(2) {
    border-color: rgba(148, 163, 184, 0.3);
}
.arena-leaderboard-entry:nth-child(2)::before {
    background: #94a3b8;
}
.arena-leaderboard-entry:nth-child(2):hover {
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.12);
}
.arena-leaderboard-entry:nth-child(3) {
    border-color: rgba(180, 83, 9, 0.3);
}
.arena-leaderboard-entry:nth-child(3)::before {
    background: #b45309;
}
.arena-leaderboard-entry:nth-child(3):hover {
    border-color: rgba(180, 83, 9, 0.55);
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.12);
}
.arena-leaderboard-entry-left {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    flex: 1;
    min-width: 280px;
}
.arena-leaderboard-entry-rank {
    font-size: 16px;
    font-weight: 800;
    width: 20px;
    text-align: center;
}
.arena-leaderboard-avatar-wrapper {
    width: 50px;
    height: 50px;
    position: relative;
    display: inline-block;
}
.arena-leaderboard-avatar-wrapper .combat-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
}
.arena-leaderboard-avatar-wrapper .combat-equipment-slots {
    width: 62px !important;
    height: 62px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}
.arena-leaderboard-avatar-wrapper .combat-equipment-slot {
    width: 14px !important;
    height: 14px !important;
}
.arena-leaderboard-avatar-wrapper .slot-head { transform: translate(-50%, -50%) rotate(0deg) translate(30px) rotate(0deg) !important; top: 0; left: 50%; }
.arena-leaderboard-avatar-wrapper .slot-chest { transform: translate(-50%, -50%) rotate(90deg) translate(30px) rotate(-90deg) !important; top: 50%; left: calc(100% + 1px); }
.arena-leaderboard-avatar-wrapper .slot-legs { transform: translate(-50%, -50%) rotate(180deg) translate(30px) rotate(-180deg) !important; top: 100%; left: 50%; }
.arena-leaderboard-avatar-wrapper .slot-feet { transform: translate(-50%, -50%) rotate(-90deg) translate(30px) rotate(90deg) !important; top: 50%; left: calc(0% - 1px); }
.arena-leaderboard-avatar-wrapper .slot-off_hand { transform: translate(-50%, -50%) rotate(45deg) translate(30px) rotate(-45deg) !important; top: 21%; left: calc(100% - 21%); }
.arena-leaderboard-avatar-wrapper .slot-hands { transform: translate(-50%, -50%) rotate(135deg) translate(30px) rotate(-135deg) !important; top: calc(100% - 21%); left: calc(100% - 21%); }
.arena-leaderboard-avatar-wrapper .slot-main_hand { transform: translate(-50%, -50%) rotate(-45deg) translate(30px) rotate(45deg) !important; top: 21%; left: 21%; }

.arena-leaderboard-avatar-wrapper .player-achievements-display {
    bottom: -12px !important;
    width: calc(100% + 20px) !important;
    gap: 2px !important;
}
.arena-leaderboard-avatar-wrapper .player-achievements-display .achievement-icon {
    width: 12px !important;
    height: 12px !important;
}
.arena-leaderboard-banner {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.arena-leaderboard-entry-name {
    color: #f8fafc;
    font-size: 14px;
}
.arena-leaderboard-entry-level {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 5px;
}
.arena-leaderboard-entry-stats {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 2px;
}
.arena-leaderboard-entry-right {
    text-align: right;
}
.arena-leaderboard-entry-rating {
    font-size: 15px;
    color: #fbbf24;
    font-weight: 800;
}
.arena-leaderboard-entry-rankname {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Profile Tab Wrapper */
.profile-stats-panel-wrapper {
    margin-bottom: 25px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid #475569;
    border-radius: 16px;
}

/* Profile Editor & 2FA Setup Classes */
.prpg-profile-dashboard {
    max-width: 100%;
    margin: 20px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    align-items: start;
}
.profile-avatar-center-wrapper {
    text-align: center;
    margin-bottom: 20px;
}
.profile-avatar-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 2.5px solid #fbbf24;
    background: #0f172a;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: inline-block;
}
.profile-form-group {
    margin-bottom: 20px;
    text-align: left;
}
.profile-form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-bio-textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #475569;
    border-radius: 8px;
    padding: 12px;
    color: #f1f5f9;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.profile-bio-textarea:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.profile-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.profile-checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: #fbbf24;
    cursor: pointer;
}
.profile-checkbox-label {
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 500;
    cursor: pointer;
}
.profile-link-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: left;
}
.profile-link-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.profile-link-anchor {
    font-size: 13px;
    color: #38bdf8 !important;
    text-decoration: none;
    word-break: break-all;
    font-weight: 600;
}
.profile-link-anchor:hover {
    text-decoration: underline;
}
.profile-save-button {
    width: 100%;
}
.profile-vip-pass-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
    border: 1px dashed rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    padding: 18px;
    margin-top: 25px;
    text-align: center;
}
.profile-vip-pass-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 750;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-vip-pass-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0 0 15px 0;
}
.profile-vip-pass-status {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #10b981;
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
}
.profile-vip-pass-button {
    display: inline-block;
    padding: 8px 18px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #0f172a !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}
.profile-vip-pass-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.35);
}
.profile-2fa-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}
.prpg-2fa-setup-container {
    width: 100%;
}
.profile-2fa-status-active {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #10b981;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}
.profile-2fa-title {
    margin: 20px 0 10px 0;
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}
.profile-2fa-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #475569;
    border-radius: 8px;
    padding: 10px;
    color: #f1f5f9;
    font-size: 14px;
    box-sizing: border-box;
}
.profile-btn-disable {
    width: 100%;
    background: #ef4444;
    color: #fff;
    margin-top: 10px;
}
.profile-btn-disable:hover {
    background: #dc2626;
}
.profile-2fa-divider {
    border: none;
    border-top: 1px solid #334155;
    margin: 25px 0;
}
.profile-2fa-recovery-text {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 15px;
}
.profile-2fa-qr-container {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    display: inline-block;
    margin: 15px 0;
}
.profile-2fa-secret-code {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 13px;
    color: #fbbf24;
    word-break: break-all;
    margin-bottom: 20px;
    display: inline-block;
}
.prpg-profile-editor-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 30px;
    backdrop-filter: blur(14px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    transition: border-color 0.3s;
}
.prpg-profile-editor-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}
.prpg-profile-editor-card ul {
    list-style-type: none;
    padding-left: 0;
}
.prpg-profile-editor-card li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.prpg-profile-editor-card li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 0;
    color: #fbbf24;
    font-size: 12px;
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
}
.prpg-profile-editor-card-header {
    margin-top: 0;
    font-weight: 700;
    color: #f8fafc;
    border-bottom: 1px solid #475569;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
}
.profile-avatar-center-wrapper {
    text-align: center;
    margin-bottom: 20px;
}
.profile-avatar-image {
    width: 140px;
    height: 170px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #475569;
    background: rgba(15,23,42,0.85);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.profile-form-group {
    margin-bottom: 15px;
}
.profile-form-label {
    display: block;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 6px;
    font-size: 13px;
}
.profile-bio-textarea {
    width: 100%;
    background: #0f172a !important;
    border: 1px solid #475569 !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 13px;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
}
.profile-checkbox-group {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-checkbox-input {
    accent-color: #38bdf8;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.profile-checkbox-label {
    font-weight: 600;
    color: #f8fafc;
    cursor: pointer;
    font-size: 13px;
}
.profile-link-card {
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(56,189,248,0.08);
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 8px;
}
.profile-link-title {
    display: block;
    font-weight: 700;
    color: #38bdf8;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.profile-link-anchor {
    color: #60a5fa;
    text-decoration: underline;
    font-size: 13px;
    word-break: break-all;
    font-weight: 600;
}
.profile-save-button {
    width: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s;
}
.profile-vip-pass-card {
    margin-top: 25px;
    padding: 20px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.profile-vip-pass-title {
    margin: 0 0 8px 0;
    color: #fbbf24;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.profile-vip-pass-desc {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0 0 15px 0;
    line-height: 1.5;
}
.profile-vip-pass-status {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 13px;
}
.profile-vip-pass-button {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    transition: transform 0.15s;
}

/* 2FA Container Inner Styles */
.profile-2fa-status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-weight: 700;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    font-size: 13px;
    text-align: center;
    margin-bottom: 15px;
}
.profile-2fa-title {
    margin: 0 0 10px 0;
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 700;
}
.profile-2fa-input {
    width: 100%;
    box-sizing: border-box;
}
.profile-2fa-divider {
    border: none;
    border-top: 1px solid #334155;
    margin: 15px 0;
}
.profile-2fa-recovery-text {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    margin-bottom: 10px;
}
.profile-2fa-qr-container {
    background: #fff;
    padding: 10px;
    display: inline-block;
    border-radius: 8px;
    margin-bottom: 15px;
}
.profile-2fa-secret-code {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 6px;
    border: 1.5px dashed #475569;
    font-family: monospace;
    font-size: 14px;
    color: #fbbf24;
    margin-bottom: 15px;
    word-break: break-all;
}
.profile-2fa-backup-warning {
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid #fbbf24;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.profile-2fa-backup-warning-title {
    color: #fbbf24;
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}
.profile-2fa-backup-warning-desc {
    margin: 0;
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.4;
}
.profile-2fa-backup-grid {
    background: rgba(0,0,0,0.2);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    color: #e2e8f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

/* Custom Global Responsiveness & Layout Overrides */
@media (max-width: 768px) {
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    *, *:before, *:after {
        box-sizing: border-box !important;
    }
    #prpg-game-container,
    .prpg-panel,
    .tab-content,
    .prpg-public-profile-card,
    .prpg-profile-dashboard,
    .prpg-normal-panels-wrapper,
    .prpg-main-grid,
    #prpg-main-content-panel,
    #prpg-combat-area,
    .combat-card,
    .treasury-log-container,
    .prpg-profile-editor-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(8px, 3vw, 15px) !important;
        padding-right: clamp(8px, 3vw, 15px) !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    .accepted-quests-section .quest-list,
    .quest-list,
    .territory-list,
    .prpg-class-list,
    .prpg-profile-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .combat-avatar-wrapper, 
    .attributes-hex-container {
        margin: 15px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .prpg-tabs,
    .city-actions-list,
    .prpg-party-actions,
    .prpg-promoted-cta,
    .prpg-promoted-cta-actions,
    .opponent-equipped-items-list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
    }
    .stat-bar-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}
.arena-matchmaking-selector-wrapper {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}
.arena-bracket-select {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid #475569;
    background-color: rgba(30, 41, 59, 0.7);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
    max-width: 320px;
}
.arena-bracket-select:focus {
    border-color: #fbbf24;
    outline: none;
}
.arena-queue-card {
    background: rgba(15, 23, 42, 0.6);
    border: 2px dashed #fbbf24;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: prpgPulseBorder 2s infinite ease-in-out;
}
@keyframes prpgPulseBorder {
    0%, 100% { border-color: rgba(251, 191, 36, 0.4); }
    50% { border-color: rgba(251, 191, 36, 1); }
}
.arena-queue-title {
    font-size: 1.3rem;
    color: #fbbf24;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.arena-queue-subtitle {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
.arena-queue-ring {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(251, 191, 36, 0.1);
    border-top: 4px solid #fbbf24;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: prpgSpin 1s linear infinite;
}
@keyframes prpgSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.arena-queue-meta {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}
.arena-queue-meta span {
    font-weight: 700;
    color: white;
}
.arena-match-found-card {
    background: rgba(220, 38, 38, 0.85) !important;
    border: 2px solid #ef4444 !important;
    animation: prpgMatchFlash 0.5s infinite alternate !important;
}
.arena-match-found-card .arena-queue-title {
    color: white !important;
}
.arena-match-found-card .arena-queue-subtitle {
    color: #fca5a5 !important;
}
.arena-match-found-card .arena-queue-ring {
    border-top-color: white !important;
}
@keyframes prpgMatchFlash {
    0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    100% { box-shadow: 0 0 25px rgba(239, 68, 68, 1); }
}
.arena-bounty-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.profile-icon-admin-users {
    color: #38bdf8;
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.profile-icon-shield {
    color: #10b981;
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.profile-btn-disable {
    width: 100%;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    margin-bottom: 15px;
}
.profile-btn-email-recovery {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid #475569;
    color: #94a3b8;
}
.profile-btn-full {
    width: 100%;
}
.profile-text-left {
    text-align: left;
}
.profile-2fa-qr-img {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}
.profile-2fa-input-code {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
    font-weight: 700;
}
.prpg-public-profile-card {
    width: 100%;
    max-width: 100%;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.05);
    font-family: 'Outfit', sans-serif;
    color: #f1f5f9;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.prpg-vip-profile {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(251, 191, 36, 0.12), inset 0 0 20px rgba(251, 191, 36, 0.05);
}
.prpg-vip-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.03), transparent);
    transform: skewX(-25deg);
    animation: vipShine 8s infinite linear;
    pointer-events: none;
}
@keyframes vipShine {
    0% { left: -100%; }
    100% { left: 100%; }
}
.prpg-public-profile-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 30px;
}
.profile-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #334155;
    padding-bottom: 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 15px;
}
.profile-arena-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.profile-equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.profile-equipment-item-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}
.profile-equipment-item-card:hover {
    border-color: rgba(251, 191, 36, 0.2);
    background: rgba(30, 41, 59, 0.4);
    transform: translateY(-1px);
}
.profile-equipment-item-slot-label {
    font-size: 10px;
    font-weight: 800;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}
.profile-eq-wrapper {
    width: 100%;
}
.profile-achievements-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.profile-achievement-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    gap: 18px;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    text-align: left;
}
.profile-achievement-card:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}
.profile-ach-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 4px;
    text-align: left;
}
.profile-ach-desc {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.4;
    text-align: left;
}
.profile-ach-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}
.profile-ach-progress-bar-bg {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    height: 8px;
    flex-grow: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.profile-ach-progress-bar-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
    height: 100%;
    border-radius: 6px;
    width: 100%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.profile-ach-progress-text {
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    white-space: nowrap;
}
.attributes-hex-container {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
}
.attribute-hex {
    max-width: 240px;
    width: 100%;
    height: auto;
}
.profile-achievement-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.profile-achievement-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.profile-achievement-info {
    flex-grow: 1;
}
.profile-title-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.prpg-item-tooltip {
    position: absolute;
    display: none;
    z-index: 10000;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 16px;
    width: 290px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    font-family: 'Outfit', sans-serif;
    color: #f8fafc;
    line-height: 1.4;
}
.item-display-container {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left !important;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}
.item-display-container:hover {
    background: rgba(15, 23, 42, 0.8);
}
.item-icon-wrapper {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1.5px solid #475569;
}
.item-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.item-name {
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prpg-promoted-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.prpg-promoted-cta-left {
    flex: 1;
    min-width: 220px;
}
.prpg-promoted-cta-left h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 7px;
}
.prpg-promoted-cta-left p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
}
.prpg-promoted-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.prpg-cta-btn-primary {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a !important;
    font-weight: 800;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    border: none;
    cursor: pointer;
    letter-spacing: 0.3px;
}
.prpg-cta-btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
    transform: translateY(-1px);
}
.prpg-cta-btn-secondary {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1 !important;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s;
    border: 1px solid #475569;
    cursor: pointer;
}
.prpg-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #94a3b8;
    color: #f1f5f9 !important;
}
.prpg-pass-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.prpg-pass-member-chip {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.prpg-pass-member-chip:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.6);
}
.prpg-section-label {
    margin: 0 0 12px 0;
    border-bottom: 1px solid #334155;
    padding-bottom: 8px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.profile-achievements-title {
    color: #fbbf24;
}
.profile-achievements-empty {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}
.profile-achievements-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-ach-title {
    color: #fbbf24;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-ach-desc {
    font-size: 11px;
    color: #cbd5e1;
    margin-top: 3px;
    line-height: 1.4;
    font-weight: 500;
}
.profile-ach-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.profile-ach-progress-bar-bg {
    flex-grow: 1;
    background: #0f172a;
    border-radius: 4px;
    height: 8px;
}
.profile-ach-progress-bar-fill {
    background: #10b981;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.profile-ach-progress-text {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    white-space: nowrap;
}
.profile-ach-date {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 5px;
    font-weight: 600;
}
.profile-avatar-center {
    margin-bottom: 20px;
    text-align: center;
}
.profile-hex-title {
    color: #38bdf8;
    text-align: center;
}
.profile-section-arena-title {
    margin-top: 20px;
    color: #ef4444;
}
.profile-arena-rank-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    transition: transform 0.2s, border-color 0.2s;
}
.profile-arena-rank-card:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.45);
}
.profile-arena-rank-banner {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.profile-arena-rank-info {
    text-align: left;
}
.profile-arena-rank-label {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.profile-arena-rank-name {
    font-size: 18px;
    color: #fbbf24;
    font-weight: 800;
}
.profile-arena-rank-points {
    font-size: 11px;
    color: #e2e8f0;
    font-weight: 600;
}
.profile-stat-box {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}
.profile-stat-box:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}
.profile-stat-label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.profile-stat-value-wins {
    font-size: 20px;
    color: #10b981;
    font-weight: 800;
    margin-top: 4px;
}
.profile-stat-value-losses {
    font-size: 20px;
    color: #ef4444;
    font-weight: 800;
    margin-top: 4px;
}
.profile-stat-value-ratio {
    font-size: 20px;
    font-weight: 800;
    margin-top: 4px;
}
.profile-section-equipment-title {
    margin-top: 20px;
    color: #34d399;
}
.profile-equipment-empty {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}
.profile-equipment-item-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid #475569;
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.profile-equipment-item-slot-label {
    color: #94a3b8;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}
.profile-section-titles-title {
    margin-top: 25px;
    color: #a855f7;
}
.profile-titles-empty {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}
.prpg-large-avatar-slots {
    display: inline-block;
    margin-bottom: 35px !important;
}
.prpg-large-avatar-slots .combat-avatar {
    width: 120px !important;
    height: 120px !important;
}
.prpg-large-avatar-slots .combat-equipment-slots {
    width: 145px !important;
    height: 145px !important;
}
.prpg-large-avatar-slots .combat-equipment-slot {
    width: 32px !important;
    height: 32px !important;
}
.prpg-large-avatar-slots .slot-head { transform: translate(-50%, -50%) rotate(0deg) translate(72px) rotate(0deg); top: 0; left: 50%; }
.prpg-large-avatar-slots .slot-chest { transform: translate(-50%, -50%) rotate(90deg) translate(72px) rotate(-90deg); top: 50%; left: calc(100% + 2px); }
.prpg-large-avatar-slots .slot-legs { transform: translate(-50%, -50%) rotate(180deg) translate(72px) rotate(-180deg); top: 100%; left: 50%; }
.prpg-large-avatar-slots .slot-feet { transform: translate(-50%, -50%) rotate(-90deg) translate(72px) rotate(90deg); top: 50%; left: calc(0% - 2px); }
.prpg-large-avatar-slots .slot-off_hand { transform: translate(-50%, -50%) rotate(45deg) translate(72px) rotate(-45deg); top: 21%; left: calc(100% - 21%); }
.prpg-large-avatar-slots .slot-hands { transform: translate(-50%, -50%) rotate(135deg) translate(72px) rotate(-135deg); top: calc(100% - 21%); left: calc(100% - 21%); }
.prpg-large-avatar-slots .slot-main_hand { transform: translate(-50%, -50%) rotate(-45deg) translate(72px) rotate(45deg); top: 21%; left: 21%; }

.prpg-large-avatar-slots .player-achievements-display {
    bottom: -32px !important;
    width: calc(100% + 80px) !important;
}
.prpg-large-avatar-slots .player-achievements-display .achievement-icon {
    width: 26px !important;
    height: 26px !important;
}
@media (max-width: 900px) {
    .prpg-public-profile-grid {
        grid-template-columns: 1fr;
    }
    .prpg-promoted-cta {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 15px !important;
    }
    .prpg-promoted-cta-left {
        min-width: 100% !important;
    }
    .prpg-promoted-cta-actions {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .prpg-promoted-cta-actions a {
        flex: 1 1 200px !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 600px) {
    .prpg-public-profile-card {
        padding: 15px !important;
    }
    .profile-achievement-card {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    .profile-achievement-icon {
        margin-bottom: 10px !important;
    }
}
@media (max-width: 480px) {
    .profile-arena-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .profile-equipment-grid {
        grid-template-columns: 1fr !important;
    }
}
.profile-header-title {
    margin: 0 0 6px 0;
    font-weight: 800;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6em;
    line-height: 1.2;
}
.profile-header-vip-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0f172a;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}
.profile-header-meta {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.profile-header-level-badge {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 12px;
    color: #38bdf8;
    font-weight: 700;
}
.profile-header-meta-bullet {
    width: 6px;
    height: 6px;
    background: #fbbf24;
    transform: rotate(45deg);
    display: inline-block;
    margin: 0 10px;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
    vertical-align: middle;
    font-size: 0;
    color: transparent;
}
.profile-header-class-text {
    color: #cbd5e1;
}
.profile-header-guild-text {
    color: #94a3b8;
}
.profile-header-guild-text strong {
    color: #e2e8f0;
}
.profile-header-active-title {
    font-size: 12px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 700;
    color: #fbbf24;
}
.profile-bio-container {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid #334155;
    border-left: 3px solid #475569;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 22px;
    font-style: italic;
    line-height: 1.7;
    font-size: 14px;
    color: #cbd5e1;
}
.profile-footer-actions {
    border-top: 1px solid #334155;
    margin-top: 28px;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.profile-footer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8 !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 9px;
    text-decoration: none;
    transition: all 0.2s;
}
.profile-footer-back-btn:hover {
    background: rgba(56, 189, 248, 0.18);
}
.war-history-item {
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.war-history-item:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-2px);
}
.war-log-details {
    transition: all 0.3s ease;
}
.war-log-details[open] summary {
    border-bottom: 1px solid #334155;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.war-log-content {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}
.war-log-content::-webkit-scrollbar {
    width: 6px;
}
.war-log-content::-webkit-scrollbar-track {
    background: #0f172a;
}
.war-log-content::-webkit-scrollbar-thumb {
    background-color: #334155;
    border-radius: 3px;
}
.prpg-statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.prpg-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.prpg-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    background: rgba(30, 41, 59, 0.65);
}
.stat-card-icon {
    font-size: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}
.stat-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-card-label {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-card-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: #f8fafc;
    font-family: var(--font-headings);
}