/* =============================================================
   R A R A O M T   ::   i n n e r . c s s
   styles for plain legal pages, about page, and slot game
   ============================================================= */


/* =============================================================
   p l a i n p a g e   ( legal / privacy / cookies / responsibly )
   ============================================================= */

.plainpage {

    padding    : var(--space-5) var(--space-3) var(--space-6);
    background : var(--paint-asphalt);
    min-height : 70vh;

}

    .plainpage__shell {

        max-width : 880px;
        margin    : 0 auto;

    }


    .plainpage__head {

        margin-bottom : var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom : 3px double var(--paint-line);

    }

        .plainpage__pre {

            font-family   : var(--type-mono);
            font-size     : 12.5px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color         : var(--paint-flag-yellow);
            display       : block;
            margin-bottom : 11px;

        }

        .plainpage__head h1 {

            font-family   : var(--type-banner);
            font-size     : clamp(28px, 4vw, 42px);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color         : var(--paint-bone);
            margin-bottom : 13px;

        }

        .plainpage__date {

            font-family   : var(--type-mono);
            font-size     : 11.5px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color         : var(--paint-bone-dim);
            opacity       : .76;
            margin        : 0;

        }


    .plainpage__body {

        font-family : var(--type-body);

    }

        .plainpage__body p {

            font-size  : 15.4px;
            line-height: 1.78;
            color      : var(--paint-bone-dim);
            margin     : 0 0 var(--space-2);

        }

        .plainpage__body h2 {

            font-family   : var(--type-mono);
            font-size     : 17px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color         : var(--paint-flag-yellow);
            margin-top    : var(--space-4);
            margin-bottom : 13px;
            padding-bottom: 7px;
            border-bottom : 1px dashed var(--paint-line);

        }

        .plainpage__body i {
            color: var(--paint-bone);
            font-style: italic;
        }

        .plainpage__body a {
            color           : var(--paint-flag-yellow);
            border-bottom   : 1px dashed var(--paint-flag-yellow);
        }

        .plainpage__body a:hover {
            color : var(--paint-flame);
            border-color: var(--paint-flame);
        }

    .plain-helplines {

        list-style   : none;
        margin       : 13px 0 var(--space-3);
        padding      : 17px 21px;
        background   : var(--paint-asphalt-soft);
        border-left  : 3px solid var(--paint-rust);

    }

        .plain-helplines li {

            font-size  : 14.4px;
            line-height: 1.66;
            padding    : 6px 0;

        }



/* =============================================================
   a b o u t p a g e
   ============================================================= */

.aboutpage {

    padding    : var(--space-5) var(--space-3) var(--space-6);
    background : var(--paint-asphalt);

}

    .aboutpage__shell {

        max-width : 1140px;
        margin    : 0 auto;

    }


    .aboutpage__head {

        max-width    : 720px;
        margin-bottom: var(--space-5);

    }

        .aboutpage__pre {

            font-family   : var(--type-mono);
            font-size     : 12.5px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color         : var(--paint-flag-yellow);
            display       : block;
            margin-bottom : 11px;

        }

        .aboutpage__head h1 {

            font-family   : var(--type-banner);
            font-size     : clamp(28px, 4vw, 44px);
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color         : var(--paint-bone);
            margin-bottom : 13px;

        }

        .aboutpage__sub {

            font-size  : 15.4px;
            line-height: 1.7;
            color      : var(--paint-bone-dim);
            font-style : italic;

        }


    .aboutpage__shotline {

        display              : grid;
        gap                  : var(--space-4);
        align-items          : start;
        margin-bottom        : var(--space-5);

    }

    .aboutpage__shotline--left  { grid-template-columns: 0.85fr 1.1fr; }
    .aboutpage__shotline--right { grid-template-columns: 1.1fr 0.85fr; }


    .shotline-frame {

        margin     : 0;
        padding    : 9px;
        background : #000;
        border     : 1px solid var(--paint-line);
        border-bottom: 4px solid var(--paint-flag-yellow);
        box-shadow : 5px 6px 0 rgba(0,0,0,.55);

    }

    .aboutpage__shotline--left .shotline-frame  { transform: rotate(-1deg); }
    .aboutpage__shotline--right .shotline-frame { transform: rotate(1.2deg); }

        .shotline-frame img {

            width      : 100%;
            height     : 350px;
            object-fit : cover;
            display    : block;

        }

        .shotline-frame figcaption {

            margin-top    : 11px;
            padding       : 0 4px 4px;
            font-family   : var(--type-mono);
            font-size     : 11.4px;
            line-height   : 1.55;
            color         : var(--paint-bone-dim);

        }

        .shotline-frame figcaption b {
            color         : var(--paint-flag-yellow);
            font-weight   : 800;
            text-transform: uppercase;
            letter-spacing: 1px;
        }


    .shotline-words p {

        font-size  : 15.4px;
        line-height: 1.78;
        color      : var(--paint-bone-dim);
        margin     : 0 0 var(--space-2);

    }


    .aboutpage__signoff {

        max-width  : 760px;
        margin     : var(--space-5) auto 0;
        padding    : var(--space-3) var(--space-3);
        background : var(--paint-asphalt-soft);
        border     : 1px dashed var(--paint-line);
        text-align : center;

    }

        .aboutpage__signoff p {

            font-size  : 15.5px;
            line-height: 1.7;
            margin     : 0 0 var(--space-2);
            color      : var(--paint-bone-dim);

        }


    @media (max-width: 880px) {

        .aboutpage__shotline--left,
        .aboutpage__shotline--right { grid-template-columns: 1fr; }

        .aboutpage__shotline--right .shotline-frame { order: -1; }

        .shotline-frame { transform: none !important; }

        .shotline-frame img { height: 260px; }

    }



/* =============================================================
   s l o t p a g e   ( the cabinet )
   ============================================================= */

.slotpage {

    background : var(--paint-asphalt);
    padding-bottom: var(--space-5);

}

    .slotpage__pre {

        font-family   : var(--type-mono);
        font-size     : 12.5px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color         : var(--paint-flag-yellow);
        display       : block;
        margin-bottom : 11px;

    }


/* nag strip — points / free / social / 18+ */

.slotpage__nag {

    background    :
        linear-gradient(95deg, var(--paint-rust-burnt) 0%, var(--paint-rust) 50%, var(--paint-rust-burnt) 100%);
    border-bottom : 3px solid #000;

}

    .slotpage__nag-inside {

        max-width    : var(--max-shell);
        margin       : 0 auto;
        padding      : var(--space-2) var(--space-3);

        display              : grid;
        grid-template-columns: repeat(4, 1fr);
        gap                  : 0;

    }

    .nag-cell {

        text-align    : center;
        padding       : 13px 9px;
        border-right  : 1px dashed rgba(255,255,255,.18);

    }

    .nag-cell--last { border-right: 0; }

        .nag-cell__bg {

            display       : block;
            font-family   : var(--type-shout);
            font-size     : 27px;
            color         : var(--paint-flag-yellow);
            line-height   : 1;
            letter-spacing: 2px;
            text-shadow   : 2px 2px 0 #000;

        }

        .nag-cell__sm {

            display       : block;
            margin-top    : 6px;
            font-family   : var(--type-mono);
            font-size     : 11px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color         : var(--paint-bone);
            opacity       : .92;

        }


    @media (max-width: 720px) {

        .slotpage__nag-inside { grid-template-columns: repeat(2, 1fr); }
        .nag-cell:nth-child(2) { border-right: 0; }
        .nag-cell:nth-child(1),
        .nag-cell:nth-child(2) { border-bottom: 1px dashed rgba(255,255,255,.18); }

    }


/* topline */

.slotpage__topline {

    padding    : var(--space-4) var(--space-3) var(--space-3);

}

    .slotpage__topline-shell {

        max-width : 920px;
        margin    : 0 auto;
        text-align: left;

    }

        .slotpage__topline-shell h1 {

            font-family   : var(--type-banner);
            font-size     : clamp(26px, 3.5vw, 38px);
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color         : var(--paint-bone);
            margin-bottom : 13px;

        }

        .slotpage__topline-shell p {

            font-size  : 14.8px;
            line-height: 1.7;
            color      : var(--paint-bone-dim);
            margin     : 0;

        }


/* the cabinet */

.cabinet {

    max-width  : var(--max-shell);
    margin     : 0 auto;
    padding    : 0 var(--space-3);

    display              : grid;
    grid-template-columns: 1fr 340px;
    gap                  : var(--space-3);
    align-items          : start;

}

    .cabinet__deck {

        background  : var(--paint-asphalt-soft);
        border      : 2px solid var(--paint-line);
        border-top  : 4px solid var(--paint-flag-yellow);
        padding     : var(--space-3);

    }


    /* score row */
    .cabinet__scorerow {

        display              : grid;
        grid-template-columns: repeat(4, 1fr);
        gap                  : 0;
        background           : rgba(0,0,0,.42);
        border               : 1px solid var(--paint-line);
        margin-bottom        : var(--space-3);

    }

    .scorebox {

        padding       : 13px 11px;
        text-align    : center;
        border-right  : 1px dashed var(--paint-line-soft);

    }

    .scorebox--last { border-right: 0; }

        .scorebox__cap {

            display       : block;
            font-family   : var(--type-mono);
            font-size     : 10.5px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color         : var(--paint-bone-dim);
            opacity       : .82;

        }

        .scorebox__num {

            display       : block;
            margin-top    : 5px;
            font-family   : var(--type-shout);
            font-size     : 26px;
            color         : var(--paint-flag-yellow);
            line-height   : 1;

        }

    .scorebox--points .scorebox__num { color: var(--paint-bone); }
    .scorebox--last   .scorebox__num { color: var(--paint-flame); font-size: 22px; }


    @media (max-width: 720px) {
        .cabinet__scorerow { grid-template-columns: repeat(2, 1fr); }
        .scorebox:nth-child(2) { border-right: 0; }
        .scorebox:nth-child(1),
        .scorebox:nth-child(2) { border-bottom: 1px dashed var(--paint-line-soft); }
    }


    /* reel pit */
    .reelpit {

        position    : relative;
        background  : #000;
        border      : 2px solid var(--paint-line);
        padding     : 14px;
        overflow    : hidden;

        background-image:
            repeating-linear-gradient(
                45deg,
                rgba(241,194,51,.04) 0,
                rgba(241,194,51,.04) 2px,
                transparent 2px,
                transparent 14px
            );

    }

        .reelpit__inner {

            display              : grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows   : repeat(3, 1fr);
            gap                  : 6px;
            aspect-ratio         : 5 / 3;
            position             : relative;
            z-index              : 2;

        }

        .reelcell {

            background  : var(--paint-asphalt-soft);
            border      : 1px solid var(--paint-line);
            display     : flex;
            align-items : center;
            justify-content: center;
            padding     : 8px;
            position    : relative;
            transition  : background .14s ease;

        }

            .reelcell svg {
                width  : 100%;
                height : 100%;
                max-width  : 80px;
                max-height : 80px;
            }

        .reelpit__lines {

            position : absolute;
            inset    : 14px;
            width    : calc(100% - 28px);
            height   : calc(100% - 28px);
            z-index  : 3;
            pointer-events: none;

        }

        .reelpit__shout {

            position    : absolute;
            inset       : 0;
            display     : flex;
            align-items : center;
            justify-content: center;
            z-index     : 4;

            font-family : var(--type-shout);
            font-size   : clamp(22px, 4vw, 38px);
            letter-spacing: 2px;
            text-shadow : 4px 4px 0 #000;

            opacity     : 0;
            transition  : opacity .25s ease;
            pointer-events: none;

        }

        .reelpit__shout--on  { opacity: 1; }
        .reelpit__shout--win { color: var(--paint-flag-yellow); background: rgba(0,0,0,.55); }
        .reelpit__shout--lose{ color: var(--paint-bone-dim);    background: rgba(0,0,0,.55); }
        .reelpit__shout--meh { color: var(--paint-rust);        background: rgba(0,0,0,.55); }


    /* levers row */
    .cabinet__levers {

        display              : grid;
        grid-template-columns: 1.4fr 1fr 0.85fr;
        gap                  : var(--space-2);
        align-items          : end;
        margin-top           : var(--space-3);

    }


    .leverstack {

        display       : flex;
        flex-direction: column;
        gap           : 8px;

    }

        .leverstack__cap {

            font-family   : var(--type-mono);
            font-size     : 10.5px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color         : var(--paint-bone-dim);

        }

        .leverstack__hint {

            font-family   : var(--type-mono);
            font-size     : 10.5px;
            color         : #6b6e74;
            opacity       : .82;

        }


    /* line picker */
    .linepicker {

        display              : grid;
        grid-template-columns: repeat(5, 1fr);
        gap                  : 5px;

    }

        .linepicker__btn {

            font-family   : var(--type-shout);
            font-size     : 17px;
            padding       : 11px 4px;
            background    : var(--paint-asphalt);
            color         : var(--paint-bone-dim);
            border        : 1px solid var(--paint-line);
            cursor        : pointer;
            transition    : background .18s, color .18s, border-color .18s;
            letter-spacing: 1px;

        }

        .linepicker__btn:hover {
            border-color : var(--paint-flag-yellow);
            color        : var(--paint-bone);
        }

        .linepicker__btn--on {
            background   : var(--paint-flag-yellow);
            color        : #000;
            border-color : #000;
        }


    /* stake row */
    .stakerow {

        display     : flex;
        align-items : stretch;
        gap         : 0;

    }

        .stakerow__btn {

            font-family : var(--type-shout);
            font-size   : 22px;
            width       : 42px;
            background  : var(--paint-asphalt);
            color       : var(--paint-flag-yellow);
            border      : 1px solid var(--paint-line);
            cursor      : pointer;

        }

        .stakerow__btn:hover { background: var(--paint-rust-burnt); }

        .stakerow__val {

            flex        : 1;
            display     : flex;
            align-items : center;
            justify-content: center;
            font-family : var(--type-shout);
            font-size   : 22px;
            color       : var(--paint-bone);
            background  : #000;
            border-top  : 1px solid var(--paint-line);
            border-bottom: 1px solid var(--paint-line);

        }


    /* spin button */
    .cabinet__spin {

        display       : flex;
        flex-direction: column;
        align-items   : center;
        justify-content: center;
        gap           : 3px;

        padding       : 13px 11px;
        background    : var(--paint-rust);
        color         : var(--paint-bone);

        border        : 2px solid var(--paint-rust-burnt);
        border-bottom : 5px solid #000;

        cursor        : pointer;
        transition    : transform .2s, background .2s;
        font-family   : var(--type-banner);

    }

        .cabinet__spin-sub {
            font-family   : var(--type-mono);
            font-size     : 10px;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            opacity       : .76;
        }

        .cabinet__spin-top {
            font-size      : 31px;
            letter-spacing : 3px;
        }

        .cabinet__spin-cost {
            font-family   : var(--type-mono);
            font-size     : 10.5px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color         : var(--paint-flag-yellow);
        }

        .cabinet__spin-cost em { font-style: normal; font-weight: 800; }

        .cabinet__spin:hover {
            background : var(--paint-rust-burnt);
            transform  : translateY(-2px);
        }

        .cabinet__spin:active {
            transform : translateY(0);
        }


    /* petty buttons (top up / reset) */
    .cabinet__petty {

        display      : flex;
        gap          : 11px;
        margin-top   : var(--space-3);
        padding-top  : 14px;
        border-top   : 1px dashed var(--paint-line);
        flex-wrap    : wrap;

    }

    .petty-btn {

        font-family   : var(--type-mono);
        font-weight   : 800;
        font-size     : 11.5px;
        letter-spacing: 1.6px;
        text-transform: uppercase;

        padding       : 9px 15px;
        cursor        : pointer;
        border        : 1px solid var(--paint-line);
        background    : transparent;
        color         : var(--paint-bone-dim);

    }

        .petty-btn:hover {
            border-color : var(--paint-flag-yellow);
            color        : var(--paint-bone);
        }

        .petty-btn--gas:hover  { color: var(--paint-flag-yellow); }
        .petty-btn--zero:hover { color: var(--paint-rust); border-color: var(--paint-rust); }


    /* side rail */
    .cabinet__rail {

        display       : flex;
        flex-direction: column;
        gap           : var(--space-2);

    }

    .rail-block {

        background  : var(--paint-asphalt-soft);
        border      : 1px solid var(--paint-line);
        padding     : 17px 17px 14px;

    }

        .rail-block h3 {

            font-family   : var(--type-mono);
            font-weight   : 800;
            font-size     : 13px;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color         : var(--paint-flag-yellow);
            margin-bottom : 11px;
            padding-bottom: 6px;
            border-bottom : 1px dashed var(--paint-line);

        }

        .rail-block__bly {

            font-size  : 12.7px;
            line-height: 1.55;
            color      : var(--paint-bone-dim);
            margin     : 0 0 11px;

        }

        .rail-block p {

            font-size  : 13.2px;
            line-height: 1.62;
            color      : var(--paint-bone-dim);
            margin     : 0;

        }


    /* pay table */
    .paytab {

        list-style : none;
        margin     : 0;
        padding    : 0;

    }

        .paytab li {

            display      : grid;
            grid-template-columns: 30px 1fr;
            gap          : 8px;
            align-items  : center;
            padding      : 8px 0;
            border-bottom: 1px dashed var(--paint-line-soft);
            font-family  : var(--type-mono);
            font-size    : 12px;

        }

        .paytab li:last-child { border-bottom: 0; }

        .paytab b {

            grid-column   : 2;
            grid-row      : 1;
            color         : var(--paint-bone);
            font-weight   : 800;
            text-transform: uppercase;
            letter-spacing: .8px;

        }

        .paytab i {

            grid-column   : 2;
            grid-row      : 2;
            font-style    : normal;
            color         : var(--paint-flag-yellow);
            font-size     : 11px;

        }

        .paytab__sw {

            grid-column   : 1;
            grid-row      : 1 / span 2;
            display       : block;
            width         : 26px;
            height        : 26px;
            background    : #000;
            border        : 1px solid var(--paint-line);

        }

        .paytab__sw--flag   { background: repeating-linear-gradient(0deg, #000 0 4px, #fff 4px 8px), #fff; background-size: 8px 8px; }
        .paytab__sw--bike   { background: var(--paint-rust); }
        .paytab__sw--timer  { background: var(--paint-flag-yellow); }
        .paytab__sw--helmet { background: var(--paint-rust-burnt); }
        .paytab__sw--fuel   { background: var(--paint-flame); }


    /* result log */
    .resultlog {

        display       : flex;
        flex-direction: column;
        gap           : 5px;

    }

    .resultlog__empty {

        font-family : var(--type-mono);
        font-size   : 11.5px;
        color       : #6b6e74;
        font-style  : italic;
        padding     : 8px 0;

    }


    .logline {

        display              : grid;
        grid-template-columns: auto 1fr;
        gap                  : 9px;
        padding              : 7px 11px;
        font-family          : var(--type-mono);
        font-size            : 12px;
        background           : rgba(0,0,0,.32);
        border-left          : 3px solid var(--paint-line);

    }

    .logline--won  { border-left-color: var(--paint-flag-yellow); }
    .logline--lost { border-left-color: var(--paint-rust);        }

        .logline__sum {

            font-weight   : 800;
            letter-spacing: .8px;
            color         : var(--paint-bone);

        }

        .logline--won  .logline__sum { color: var(--paint-flag-yellow); }
        .logline--lost .logline__sum { color: var(--paint-rust);        }

        .logline__sub {

            color   : var(--paint-bone-dim);
            opacity : .85;

        }


    @media (max-width: 980px) {

        .cabinet { grid-template-columns: 1fr; }
        .cabinet__levers { grid-template-columns: 1fr; gap: var(--space-3); }

    }


    /* how-this-works strip */

    .slotpage__how {

        margin-top : var(--space-5);
        padding    : var(--space-4) var(--space-3);
        background : var(--paint-asphalt-soft);
        border-top : var(--rule-thin);

    }

        .slotpage__how-shell {

            max-width : var(--max-shell);
            margin    : 0 auto;

        }

        .slotpage__how-shell h2 {

            font-family : var(--type-banner);
            font-size   : clamp(22px, 3vw, 32px);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color       : var(--paint-bone);
            margin-bottom: var(--space-3);

        }

    .howline {

        display       : grid;
        grid-template-columns: 90px 1fr;
        gap           : var(--space-2);
        padding       : 14px 0;
        border-bottom : 1px dashed var(--paint-line);
        align-items   : start;

    }

    .howline:last-child { border-bottom: 0; }

        .howline__num {

            font-family   : var(--type-shout);
            font-size     : 24px;
            color         : var(--paint-flag-yellow);
            line-height   : 1;

        }

        .howline h4 {

            font-family   : var(--type-mono);
            font-weight   : 800;
            font-size     : 14.5px;
            letter-spacing: 1px;
            color         : var(--paint-bone);
            margin-bottom : 6px;
            text-transform: none;

        }

        .howline p {

            font-size  : 14px;
            line-height: 1.66;
            color      : var(--paint-bone-dim);
            margin     : 0;

        }