/* fixed outer panel ------------------------------------------------- */
.learn-container-info{
    background:#dbcfb1;
    border:inset 5px #d6c7a3;
    margin:10px 50px 0 50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:300px;          /* fixed width  */
    height:490px;         /* fixed height */
    padding:10px 12px;
    box-sizing:border-box;
}

/* shared scroll-box frame ------------------------------------------ */
.bronze-scroll-info,
.silver-scroll-info,
.gold-scroll-info{
    width:100%;
    height:140px;                 /* must match SCROLL_HEIGHT */
    overflow:auto;
    margin-bottom:12px;
    padding:8px 10px 8px 14px;    /* little gutter for scrollbar */
    border:3px solid;
    border-radius:4px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),   /* subtle inner highlight */
        inset 0 0 4px rgba(0,0,0,.15);          /* inner shadow */
}

/* bronze colouring -------------------------------------------------- */
.bronze-scroll-info{
    background:#cc9970;           /* bronze base */
    border-color:#a97e5c;
    color:#2d1b0f;
}

/* silver colouring -------------------------------------------------- */
.silver-scroll-info{
    background:#ada387;           /* silver-ish parchment */
    border-color:#838383;
    color:#1c1c1c;
}

/* gold colouring ---------------------------------------------------- */
.gold-scroll-info{
    background:#b9ab73;           /* gold base */
    border-color:#978c63;
    color:#2b250e;
}

/* optional – hide default bullets for cleaner look ----------------- */
.bronze-scroll-info ul,
.silver-scroll-info ul,
.gold-scroll-info ul{
    padding-left:18px;            /* keep some indent */
}

/* shared scroll-box frame ------------------------------------------ */
.news-info{
    width:100%;
    height:140px;                 /* must match SCROLL_HEIGHT */
    overflow:auto;
    margin-bottom:12px;
    padding:8px 10px 8px 14px;    /* little gutter for scrollbar */
    border:3px solid;
    border-radius:4px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.2),   /* subtle inner highlight */
        inset 0 0 4px rgba(0,0,0,.15);          /* inner shadow */
}

.news-container-info{
    background:#dbcfb1;
    border:inset 5px #d6c7a3;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:300px;          /* fixed width  */
    height:490px;         /* fixed height */
    padding:10px 12px;
    box-sizing:border-box;
}