/* Bombo Trophies plugin CSS */
:root {
    --bt-font-body: "Nunito", sans-serif;
    --bt-font-display: "Pangolin", "Nunito", sans-serif;
    --bt-card-bg: linear-gradient(180deg, rgba(20, 35, 70, 0.88), rgba(10, 18, 38, 0.92));
    --bt-text: #ffffff;
    --bt-muted: #d6deef;
}

.trophies-section
{
   padding: 1.5rem;
    max-width: 1200px;
    margin: auto;
    background: 
    




    radial-gradient(
      ellipse at center,
      rgba(37, 58, 101, 0.85) 0%,
      rgba(20, 35, 70, 0.8) 40%,
      rgba(5, 10, 20, 0.9) 100%
    ),
    rgba(37, 58, 101, 0.3);
    border-radius: 6px;
}

.trophy-section {
    margin: 1.5rem 0 2.25rem;
}

.trophy-section h2 {
    font-family: var(--bt-font-display);
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.trophy-section-intro {
    font-family: var(--bt-font-body);
    color: var(--bt-muted);
    font-size: 0.98rem;
    margin: 0.15rem 0 0.9rem;
}

.trophy-subsection {
    margin: 0.8rem 0 1.5rem;
}

.trophy-subsection h3 {
    font-family: var(--bt-font-display);
    font-size: 1.25rem;
    margin: 0.25rem 0 0.5rem;
}

.trophy-divider {
    border: 0;
    height: 1px;
    margin: 0.7rem auto 1.25rem;
    width: min(94%, 1080px);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}


.trophies-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.trophies-container-app {
    display: contents;
    max-height: 600px;
    overflow-y: auto;
    text-align: center;
}





.trophy-card {
    box-sizing: border-box;
    width: calc((100% - 72px) / 4);
    width: 190px;
    height: 190px;
    border: 7px solid transparent;
    border-radius: 99px;
    padding: 14px 21px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(var(--bt-card-bg), var(--bt-card-bg)) padding-box, linear-gradient(135deg, #8a5a2b 0%, #a9723a 22%, #6b4423 45%, #b57a40 66%, #5a381c 100%) border-box;
    box-shadow: inset 0 0 0 1px rgba(255, 227, 184, 0.22), inset 0 0 0 2px rgba(72, 42, 20, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 200px;
    align-content: center;
}

.trophy-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 230, 190, 0.2) 0%, transparent 56%),
        radial-gradient(circle at 50% 50%, rgba(40, 20, 10, 0.22) 0%, transparent 74%),
        url("wood/wood-disc-texture.svg") center / cover no-repeat,
        #6b4423;
    opacity: 0.28;
}

.trophy-card > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 1280px) {
    .trophy-card {
        width: calc((100% - 54px) / 4);
    }
}

@media (max-width: 1024px) {
    .trophy-card {
        width: calc((100% - 36px) / 3);
    }
}

@media (max-width: 768px) {
    .trophy-card {
        width: calc((100% - 18px) / 2);
    }
}

@media (max-width: 520px) {
    .trophy-card {
        width: 100%;
    }
}



.trophy-card.tier-gold   { --tier-color: gold; }
.trophy-card.tier-silver { --tier-color: silver; }
.trophy-card.tier-bronze { --tier-color: saddlebrown; }




.trophy-card.not-earned {
opacity: 0.4;}

.trophy-card.not-earned p{
color:red;}



.trophy-card.earned {

    color:#fff;
}


.trophy-card.earned.tier-gold {
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.35),
        inset 0 0 0 1px rgba(255, 227, 184, 0.22),
        inset 0 0 0 2px rgba(72, 42, 20, 0.35);
}


.trophy-card.earned.tier-bronze
{
    box-shadow:
        0 0 0 1px rgba(139, 69, 19, 0.45),
        inset 0 0 0 1px rgba(255, 227, 184, 0.22),
        inset 0 0 0 2px rgba(72, 42, 20, 0.35);
}

.trophy-card.earned.tier-silver
{
    box-shadow:
        0 0 0 1px rgba(192, 192, 192, 0.4),
        inset 0 0 0 1px rgba(255, 227, 184, 0.22),
        inset 0 0 0 2px rgba(72, 42, 20, 0.35);
}






.trophy-card.hidden img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.trophy-badge {
    width: 108px;
    height: 108px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 244, 220, 0.24), transparent 55%),
        url("wood/wood-badge-realistic.svg") center / cover no-repeat,
        #6b4423;
    box-shadow:
        inset 0 2px 3px rgba(255, 236, 205, 0.32),
        inset 0 -6px 10px rgba(45, 24, 12, 0.42),
        0 3px 6px rgba(0, 0, 0, 0.25);
}

.trophy-badge img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0;
    transition: transform 0.25s ease;
}



.trophy-card:hover{
  transform:scale(1.05);
  gap:30px;
z-index: 999;
}

.trophy-card:hover .trophy-badge img {
    transform: scale(1.05);
}








.trophy-card.not-earned .trophy-badge img {
    filter: grayscale(1);
}







.trophy-info h4 {
    font-size: 14px;
    margin: 4px 0;
    font-family: var(--bt-font-display);
    color: var(--bt-text);
}

.trophy-info p {
    font-size: 12px;
    color: var(--bt-text);
    font-family: var(--bt-font-body);
}



#trophy-toast-container {
    position: fixed;
top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 9999;
}

.trophy-toast {
    background: #253a65;
    color: #fff;
    padding: 20px 5px 20px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative; /* tärkeää animaatiolle */
    font-weight: bold;
    font-size: 17px;
    transition: top 0.3s ease;
        font-family: 'Quicksand', sans-serif !important;
}

.trophy-close {
    background: transparent;
    border: none;
    font-size: 27px;
    cursor: pointer;
    color: #777;
    margin-left: auto;
    padding-left: 10px;
}






.trophy-summary {
    display: inline-flex;
    gap: 12px;
    text-align: center;
    font-size: 1rem;
    margin-top:1rem;
}

.trophy-summary img.emoji {
   
    height: 1.1rem !important;
    width: 1.1rem !important;
   
}