/* ==========================================================
   GAME TITLE
   Candy UI Kit
========================================================== */

/* ==========================================================
   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(--text);

  background: var(--surface);

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

  border-radius: 999px;

  box-shadow: 0 3px 0 var(--border);

  font-size: 10px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

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

.title__text {
  position: relative;

  z-index: 2;

  margin: 8px 0 0;

  color: var(--primary);

  font-family: inherit;

  font-size: 56px;

  font-weight: 900;

  line-height: 0.95;

  letter-spacing: -0.04em;

  text-align: center;

  text-transform: uppercase;

  -webkit-text-stroke: 3px var(--text);

  text-shadow:
    0 5px 0 var(--text),
    0 7px 0 rgba(0, 0, 0, 0.08);
}

/* ==========================================================
   HIGHLIGHT
========================================================== */

.title__text::after {
  content: "";

  position: absolute;

  top: 5%;

  left: 8%;

  width: 35%;

  height: 12%;

  background: rgba(255, 255, 255, 0.45);

  border-radius: 999px;

  transform: rotate(-3deg);

  pointer-events: none;
}

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

.title__subtitle {
  position: relative;

  z-index: 3;

  margin: 12px 0 0;

  color: var(--text-muted);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.4;

  text-align: center;
}

/* ==========================================================
   DECORATIONS
========================================================== */

.title::before,
.title::after {
  position: absolute;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--warning);

  font-size: 20px;

  font-weight: 900;

  line-height: 1;
}

.title::before {
  content: "✦";

  top: 34px;

  left: -32px;

  transform: rotate(-12deg);
}

.title::after {
  content: "✦";

  top: 52px;

  right: -32px;

  color: var(--secondary);

  transform: rotate(14deg);
}

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

.title--sm .title__text {
  font-size: 36px;

  -webkit-text-stroke: 2px var(--text);

  text-shadow:
    0 3px 0 var(--text),
    0 5px 0 rgba(0, 0, 0, 0.08);
}

.title--md .title__text {
  font-size: 48px;
}

.title--lg .title__text {
  font-size: 64px;
}

.title--xl .title__text {
  font-size: 80px;
}

.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;
}

/* ==========================================================
   PRIMARY
========================================================== */

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

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

/* ==========================================================
   SECONDARY
========================================================== */

.title--secondary .title__text {
  color: var(--secondary);
}

.title--secondary .title__eyebrow {
  color: var(--secondary);
}

/* ==========================================================
   SUCCESS
========================================================== */

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

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

/* ==========================================================
   WARNING
========================================================== */

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

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

/* ==========================================================
   DANGER
========================================================== */

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

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

/* ==========================================================
   FLAT
   Removes decorative stars for compact usage.
========================================================== */

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

/* ==========================================================
   HERO
   Stronger game title treatment.
========================================================== */

.title--hero .title__text {
  font-size: 88px;

  -webkit-text-stroke: 4px var(--text);

  text-shadow:
    0 6px 0 var(--text),
    0 9px 0 rgba(0, 0, 0, 0.08);
}

.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: 64px;

    -webkit-text-stroke: 3px var(--text);

    text-shadow:
      0 5px 0 var(--text),
      0 7px 0 rgba(0, 0, 0, 0.08);
  }

  .title--xl .title__text {
    font-size: 64px;
  }

  .title--lg .title__text {
    font-size: 52px;
  }

  .title::before {
    left: -22px;
  }

  .title::after {
    right: -22px;
  }
}

@media (max-width: 480px) {
  .title--hero .title__text {
    font-size: 52px;
  }

  .title--xl .title__text {
    font-size: 52px;
  }

  .title--lg .title__text {
    font-size: 44px;
  }

  .title::before,
  .title::after {
    font-size: 16px;
  }
}