/* ==========================================================
   GAME TITLE
   Arcade UI Kit — flat marquee lettering
   (solid duplicate hard-shadow text, no gloss, no stroke,
   no blur — pure flat design)
========================================================== */


/* ==========================================================
   BASE
========================================================== */

.title{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:max-content;

    max-width:100%;

    box-sizing:border-box;

    text-align:center;

}


/* ==========================================================
   EYEBROW
========================================================== */

.title__eyebrow{

    position:relative;

    z-index:3;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:24px;

    padding:5px 12px;

    box-sizing:border-box;

    color:var(--ink);

    background:var(--surface);

    border:2px solid var(--ink);

    border-radius:var(--radius-sm);

    box-shadow:var(--shadow-xs);

    font-size:10px;
    font-weight:700;

    line-height:1;

    letter-spacing:.1em;

    text-transform:uppercase;

}


/* ==========================================================
   MAIN TITLE
========================================================== */

.title__text{

    position:relative;

    z-index:2;

    margin:10px 0 0;

    color:var(--primary);

    font-family:var(--font-family-display);

    font-size:54px;
    font-weight:700;

    line-height:1;

    letter-spacing:0;

    text-align:center;

    text-transform:uppercase;

    text-shadow:

        4px 4px 0 var(--ink);

}


/* ==========================================================
   SUBTITLE
========================================================== */

.title__subtitle{

    position:relative;

    z-index:3;

    margin:14px 0 0;

    color:var(--text-muted);

    font-size:14px;
    font-weight:700;

    line-height:1.4;

    text-align:center;

}


/* ==========================================================
   DECORATIONS (flat diamonds)
========================================================== */

.title::before,
.title::after{

    content:"";

    position:absolute;

    z-index:1;

    width:16px;
    height:16px;

    background:var(--warning);

    border:2px solid var(--ink);

}

.title::before{

    top:36px;
    left:-30px;

    transform:rotate(45deg);

}

.title::after{

    top:56px;
    right:-30px;

    background:var(--secondary);

    transform:rotate(45deg);

}


/* ==========================================================
   SIZES
========================================================== */

.title--sm .title__text{

    font-size:34px;

    text-shadow:3px 3px 0 var(--ink);

}

.title--md .title__text{ font-size:46px; }
.title--lg .title__text{ font-size:62px; }
.title--xl .title__text{ font-size:78px; }

.title--sm .title__eyebrow{ min-height:20px; padding:4px 9px; font-size:8px; }
.title--md .title__eyebrow{ font-size:9px; }
.title--lg .title__eyebrow{ min-height:26px; padding:6px 13px; font-size:10px; }
.title--xl .title__eyebrow{ min-height:28px; padding:7px 15px; font-size:11px; }


/* ==========================================================
   COLOR VARIANTS
========================================================== */

.title--primary .title__text,
.title--primary .title__eyebrow{ color:var(--primary); }

.title--secondary .title__text{ color:var(--secondary); }
.title--secondary .title__eyebrow{ color:color-mix(in srgb, var(--secondary) 70%, var(--ink)); }

.title--success .title__text,
.title--success .title__eyebrow{ color:var(--success); }

.title--warning .title__text,
.title--warning .title__eyebrow{ color:var(--warning); }

.title--danger .title__text,
.title--danger .title__eyebrow{ color:var(--danger); }

/* Light, near-white text for titles placed over dark or busy
   scenery (e.g. a background scene's mid-tone band) where a
   color variant's saturated text would lose contrast. The ink
   text-shadow is unaffected, so it still reads as a solid,
   outlined mark rather than plain light-colored text. */
.title--inverse .title__text,
.title--inverse .title__subtitle{ color:var(--text-inverse); }


/* ==========================================================
   FLAT (no decorations)
========================================================== */

.title--flat::before,
.title--flat::after{ display:none; }


/* ==========================================================
   HERO
========================================================== */

.title--hero .title__text{

    font-size:84px;

    text-shadow:6px 6px 0 var(--ink);

}

.title--hero .title__eyebrow{ min-height:28px; padding:7px 16px; font-size:11px; }
.title--hero .title__subtitle{ font-size:15px; }


/* ==========================================================
   COMPACT
========================================================== */

.title--compact{ gap:2px; }
.title--compact .title__text{ margin-top:4px; }
.title--compact .title__subtitle{ margin-top:6px; }


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:600px){

    .title--hero .title__text{ font-size:60px; text-shadow:4px 4px 0 var(--ink); }
    .title--xl .title__text{ font-size:60px; }
    .title--lg .title__text{ font-size:48px; }

    .title::before{ left:-20px; }
    .title::after{ right:-20px; }

}

@media (max-width:480px){

    .title--hero .title__text{ font-size:48px; }
    .title--xl .title__text{ font-size:48px; }
    .title--lg .title__text{ font-size:40px; }

    .title::before,
    .title::after{ width:12px; height:12px; }

}