/* Rules modal panel and its text content. Positioned absolute+centered by default
   for the-le.php's standalone use (a plain screen inside .br-stage, no flex parent);
   #rules-modal (index.php's popup) resets that below to let its flex parent center
   it instead, now that the modal covers the real viewport rather than just the stage. */
.br-rules-panel {
    position:absolute;
    left:50%;
    top:65px;
    transform:translateX(-50%);
    width:900px;
    height:720px;
    background:url("../../images/panel-rules.png") center / 100% 100% no-repeat;
    padding:64px 90px 48px 90px;
    overflow:hidden;
    /* Column layout so the (long) rules copy scrolls inside .br-rules-scroll and
       the fixed-height panel never clips it. #rules-modal additionally pins its
       "đồng ý" button in the reserved bottom strip below the scroll area. */
    display:flex;
    flex-direction:column;
}
#rules-modal .br-rules-panel {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    /* .br-screen-modal sets cursor:pointer on the whole overlay as a "click
       outside to close" hint, but only a click directly on that backdrop
       (not any child, see interactions.js) actually closes it - reset back
       to default here so hovering the readable panel/text doesn't imply the
       text itself is clickable. */
    cursor:default;
}
/* The copy area flexes to fill whatever space is left; padding-bottom keeps the
   last line clear of the panel edge (or the pinned button in the modal).
   margin-right insets the scrollbar from the panel's inner edge so it clears the
   close button (top-right) with a little breathing room - see .br-rules-close. */
.br-rules-scroll {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:16px;
    margin-right:20px;
    /* Thin cyan scrollbar to match the panel's palette instead of the chunky
       native one. Firefox first, then the WebKit pseudo-elements. */
    scrollbar-width:thin;
    scrollbar-color:#b8ffff transparent;
}
.br-rules-scroll::-webkit-scrollbar {
    width:6px;
}
.br-rules-scroll::-webkit-scrollbar-button {
    display:none;
    width:0;
    height:0;
}
.br-rules-scroll::-webkit-scrollbar-track {
    background:transparent;
}
.br-rules-scroll::-webkit-scrollbar-thumb {
    background:#b8ffff;
    border-radius:999px;
}
.br-rules-scroll::-webkit-scrollbar-thumb:hover {
    background:#8fe9e9;
}
/* "Tôi đã đọc và đồng ý với thể lệ" button, pinned centered in the panel's
   bottom strip. Image sizing comes from .br-btn-dong-y in buttons.css (with its
   own breakpoints). */
.br-rules-start {
    flex:none;
    align-self:center;
    margin-top:8px;
}
.br-rules-title {
    font-family:"Dearpix", "Press Start 2P", monospace;
    font-weight:400;
    font-size:26px;
    line-height:1.3;
    letter-spacing:0.02em;
    color:#0070ff;
    text-transform:uppercase;
    margin:0 0 10px;
}
/* Orange "Săn quà công nghệ..." kicker straight under the title. */
.br-rules-tagline {
    font-family:"Dearpix", "Press Start 2P", monospace;
    font-weight:400;
    font-size:24px;
    line-height:1.4;
    letter-spacing:0.02em;
    color:#ff7a00;
    text-transform:uppercase;
    margin:0 0 16px;
}
/* Intro paragraphs above the numbered sections. */
.br-rules-lead {
    font-size:13px;
    line-height:1.5;
    color:#0b55b4;
    margin:0 0 10px;
}
/* Each Roman-numeral section is its own card so the eye can chunk the wall of
   rules text. */
.br-rules-section {
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(0,112,255,0.22);
    border-radius:12px;
    padding:16px 18px;
    margin:0 0 14px;
}
.br-rules-section:last-child {
    margin-bottom:0;
}
.br-rules-h3 {
    font-family:"Dearpix", "Press Start 2P", monospace;
    font-weight:400;
    font-size:17px;
    color:#0070ff;
    text-transform:uppercase;
    margin:0 0 8px;
    letter-spacing:0.02em;
}
/* Sub-heading inside a section: the three "Bước 0N" steps and the 🏆 prize tiers. */
.br-rules-h4 {
    font-family:"Dearpix", "Press Start 2P", monospace;
    font-weight:400;
    /* Dearpix reads noticeably smaller than the body copy at the same px, so this
       sits above .br-rules-p (13px) to still register as a heading. */
    font-size:16px;
    line-height:1.4;
    color:#0070ff;
    margin:0 0 8px;
    letter-spacing:0.02em;
}
/* Steps / prize tiers are separated from each other by a dashed rule. */
.br-rules-step,
.br-rules-prize {
    margin:12px 0 0;
    padding:12px 0 0;
    border-top:1px dashed rgba(0,112,255,0.3);
}
.br-rules-step:first-of-type,
.br-rules-prize:first-of-type {
    margin-top:4px;
    padding-top:0;
    border-top:none;
}
.br-rules-p {
    font-size:13px;
    line-height:1.45;
    color:#0b55b4;
    margin:0 0 4px;
}
.br-rules-list {
    margin:4px 0 6px;
    padding-left:20px;
}
.br-rules-list li {
    font-size:13px;
    line-height:1.45;
    color:#0b55b4;
    margin:0 0 5px;
}
.br-rules-list .br-rules-list {
    margin:5px 0 0;
}
/* Closing caveat under a section, set apart from the list above it. */
.br-rules-note {
    font-size:12.5px;
    line-height:1.45;
    color:#0b55b4;
    font-style:italic;
    margin:10px 0 0;
    padding-top:10px;
    border-top:1px dashed rgba(0,112,255,0.3);
}

/* Close button sits just before .br-rules-scroll inside .br-rules-panel in both
   footer.php (the modal) and the-le.php (the standalone page), so the scroll
   area - and its scrollbar - begin below it. On desktop it's lifted out of flow
   and pinned top-right against .br-rules-panel (the scroll area's margin-right
   keeps the scrollbar clear of it anyway). On mobile the media query below keeps
   it in flow as a right-aligned block above the copy - see that block. */
.br-rules-close {
    position:absolute;
    right:70px;
    top:62px;
    width:24px;
    height:24px;
    background:url("../../images/close.svg") center / contain no-repeat;
    border:none;
    cursor:pointer;
}

@media (max-width:720px) {
    .br-rules-panel {
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        display:flex;
        flex-direction:column;
        width:100%;
        max-width:340px;
        height:auto;
        min-height:0;
        /* Caps the panel so it never grows past the viewport - .br-rules-scroll
           below absorbs any overflow instead, so long copy scrolls internally
           rather than pushing the close button off-screen or under the fold. */
        max-height:78vh;
        max-height:78dvh;
        margin:24px auto 20px;
        padding: 40px 30px;
        background-size:100% 100%;
    }
    /* Holds only the copy and scrolls on its own - the close button is a sibling
       above it now, so the scrollbar starts below the button. padding-right keeps
       the text off the thin scrollbar without giving up much width. */
    .br-rules-scroll {
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        padding-right:8px;
        margin-right:0;
    }
    .br-rules-title { font-size:19px; margin:0 0 8px; }
    .br-rules-tagline { font-size:18px; margin:0 0 12px; }
    .br-rules-lead { font-size:12.5px; }
    .br-rules-section { padding:12px 13px; margin-bottom:10px; }
    .br-rules-h3 { font-size:15px; margin:0 0 6px; }
    .br-rules-h4 { font-size:14px; }
    .br-rules-p { font-size:12.5px; line-height:1.4; margin:0 0 5px; }
    .br-rules-list { padding-left:18px; }
    .br-rules-list li { font-size:12.5px; line-height:1.4; }
    .br-rules-note { font-size:12px; }
    /* A full-width header strip at the top of the white content area, X on the
       right, so it reads as the panel's header sitting just above the title, not
       a stray button. Above .br-rules-scroll, so the scrollbar starts below it;
       stays put while the copy scrolls under it. */
    .br-rules-close {
        position:static;
        flex:none;
        align-self:stretch;
        width:auto;
        height:20px;
        margin:0 0 12px;
        background-image:url("../../images/close.svg");
        background-position:right center;
        background-size:20px 20px;
        background-repeat:no-repeat;
    }
}