/* Centralized MixLetters visual system.
   Screen CSS keeps layout-specific rules; shared shape, icon, logo and
   surface language lives here and is loaded last. */

.brand-logo {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.5vh, 12px);
  width: min(100%, 30rem);
  min-width: 0;
  margin-inline: auto;
  transform: rotate(-1deg);
  filter: drop-shadow(0 12px 16px rgba(60, 67, 96, .18));
}

.brand-logo__tiles {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(2px, .9vw, 5px);
  width: 100%;
  min-width: 0;
}

.brand-logo__tile {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: .86;
  border: 2px solid var(--brand-tile-border);
  border-radius: var(--radius-tile);
  background: var(--brand-tile-bg);
  box-shadow: var(--brand-tile-shadow);
  color: var(--brand-tile-text);
  font-family: var(--font-heading);
  font-size: clamp(16px, min(5.2vw, 4.1dvh), 34px);
  font-weight: 900;
  line-height: 1;
  text-shadow: var(--brand-tile-text-shadow);
}

.brand-logo__name {
  color: #1d2a41;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 4.2vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.45);
}

.brand-logo--compact {
  max-width: 24rem;
  gap: 7px;
}

.brand-logo--compact .brand-logo__tile {
  font-size: clamp(16px, min(4.7vw, 3.7dvh), 30px);
}

.brand-logo--splash {
  width: min(calc(100vw - clamp(32px, 6vw, 96px)), 52rem);
  margin-bottom: clamp(6px, 1.4dvh, 14px);
  transform: rotate(-.5deg);
  filter: drop-shadow(0 18px 24px rgba(60, 67, 96, .2));
}

.brand-logo--splash .brand-logo__tiles {
  gap: clamp(5px, .8vw, 9px);
}

.brand-logo--splash .brand-logo__tile {
  aspect-ratio: 1;
  border-width: clamp(2px, .25vw, 4px);
  border-radius: clamp(10px, 1.1vw, 16px);
  box-shadow:
    0 clamp(6px, .75vw, 10px) 0 var(--brand-tile-depth),
    0 clamp(11px, 1.2vw, 18px) clamp(12px, 1.8vw, 22px) rgba(47, 63, 93, .2),
    var(--brand-tile-highlight),
    inset 0 -5px 0 rgba(152, 62, 29, .18);
  font-size: clamp(1.35rem, min(4.4vw, 5.9dvh), 3.45rem);
  line-height: .86;
  overflow: hidden;
  padding-bottom: .06em;
  animation: tileBounceIn 400ms ease backwards;
}

.brand-logo--splash .brand-logo__tile:nth-child(1) { animation-delay: 0ms; }
.brand-logo--splash .brand-logo__tile:nth-child(2) { animation-delay: 80ms; }
.brand-logo--splash .brand-logo__tile:nth-child(3) { animation-delay: 160ms; }
.brand-logo--splash .brand-logo__tile:nth-child(4) { animation-delay: 240ms; }
.brand-logo--splash .brand-logo__tile:nth-child(5) { animation-delay: 320ms; }
.brand-logo--splash .brand-logo__tile:nth-child(6) { animation-delay: 400ms; }
.brand-logo--splash .brand-logo__tile:nth-child(7) { animation-delay: 480ms; }
.brand-logo--splash .brand-logo__tile:nth-child(8) { animation-delay: 560ms; }
.brand-logo--splash .brand-logo__tile:nth-child(9) { animation-delay: 640ms; }
.brand-logo--splash .brand-logo__tile:nth-child(10) { animation-delay: 720ms; }

.tile-title {
  --tile-title-size: 22px;
  --tile-title-height: 28px;
  --tile-title-gap: 3px;
  --tile-title-word-gap: 8px;
  --tile-title-font-size: .95rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px var(--tile-title-word-gap);
  max-width: 100%;
  min-width: 0;
  filter: drop-shadow(0 7px 9px rgba(60, 67, 96, .16));
}

.tile-title__word {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tile-title-gap);
  min-width: 0;
}

.tile-title__tile {
  display: grid;
  place-items: center;
  flex: 0 0 var(--tile-title-size);
  width: var(--tile-title-size);
  height: var(--tile-title-height);
  border: 2px solid var(--brand-tile-border);
  border-radius: 7px;
  background: var(--brand-tile-bg);
  box-shadow: 0 4px 0 var(--brand-tile-depth), 0 7px 9px rgba(47, 63, 93, .16), var(--brand-tile-highlight), inset 0 -4px 0 rgba(152, 62, 29, .16);
  color: var(--brand-tile-text);
  font-family: var(--font-heading);
  font-size: var(--tile-title-font-size);
  font-weight: 900;
  line-height: 1;
  text-shadow: var(--brand-tile-text-shadow);
}

.top-bar__tile-title {
  --tile-title-size: 25px;
  --tile-title-height: 33px;
  --tile-title-gap: 0px;
  --tile-title-word-gap: 7px;
  --tile-title-font-size: 1.05rem;
  width: 100%;
}

.top-bar__tile-title .tile-title__word { max-width: 100%; }

.top-bar__tile-title .tile-title__tile {
  flex-shrink: 1;
  min-width: 0;
}

@supports (width: 1cqi) {
  .top-bar__tile-title .tile-title__tile {
    --fitted-tile-size: min(var(--tile-title-size), calc((100cqi - (var(--tile-word-letters) - 1) * var(--tile-title-gap)) / var(--tile-word-letters)));
    flex-basis: var(--fitted-tile-size);
    width: var(--fitted-tile-size);
    font-size: min(var(--tile-title-font-size), calc(var(--fitted-tile-size) * .7));
  }
}

.home-house-icon.app-icon {
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  font-size: 1.28rem;
  filter: drop-shadow(0 2px 0 rgba(75, 82, 113, .16));
}

.btn .home-house-icon.app-icon {
  width: 1.5em;
  height: 1.5em;
  font-size: 1.02em;
}

.top-bar__home,
.screen-home-button,
.nav__item,
.modal__close,
.toast__icon,
.empty-state__icon,
.auth__mail-icon,
.home__start-icon,
.home__menu-icon,
.home__quick-action-icon,
.home__mode-summary-icon,
.home__mode-summary-badge,
.home-mode-option__icon,
.home-mode-option__badge,
.settings__item-icon,
.shop__item-icon,
.achievements__summary-icon,
.achievement__icon,
.daily__today-icon,
.daily__day-icon,
.game-over__level-up-icon,
.game-over__reward-icon,
.game-over__achievement-icon,
.game-over__play-icon,
.game-over__secondary-icon,
.leaderboards__mode-select-icon,
.profile__rank-icon,
.profile__guest-banner-icon,
.pvp__icon,
.pvp__searching-icon {
  border-radius: var(--radius-icon-badge);
}

@media (min-width: 640px) {
  .tile-title {
    --tile-title-size: 26px;
    --tile-title-height: 32px;
    --tile-title-gap: 4px;
    --tile-title-word-gap: 10px;
    --tile-title-font-size: 1.08rem;
  }

  .top-bar__tile-title {
    --tile-title-size: 30px;
    --tile-title-height: 37px;
    --tile-title-gap: 3px;
    --tile-title-word-gap: 10px;
    --tile-title-font-size: 1.16rem;
  }
}

@media (max-width: 360px) {
  .top-bar__tile-title {
    --tile-title-size: 24px;
    --tile-title-height: 31px;
    --tile-title-gap: 1px;
    --tile-title-word-gap: 6px;
    --tile-title-font-size: .98rem;
  }
}

.top-bar__home,
.screen-home-button,
.nav__item,
.modal__close,
.toast__icon,
.empty-state__icon {
  background: var(--surface-icon);
  box-shadow: var(--shadow-icon-well);
}

.app-icon {
  color: currentColor;
}

.nav__item {
  color: #526079;
}

.nav__item--active {
  color: #fff;
  background: var(--gradient-primary);
}

.btn,
.auth__submit-btn,
.auth__secondary-btn,
.home__start-btn,
.home__quick-action,
.home__mode-summary,
.home__menu-btn,
.home-mode-option,
.home-language-option,
.home-profile-action,
.game-over__play-again,
.game-over__primary-btn,
.game-over__secondary-btn,
.replay__control-btn,
.settings__group {
  border-radius: var(--radius-control);
}

.home__play-panel,
.home-popup,
.game-over__score-card,
.game-over__achievement-card,
.settings__group,
.pvp__matchmaking {
  border-radius: var(--radius-panel);
  border: var(--surface-border);
  background: var(--surface-panel);
  box-shadow: var(--shadow-game-panel);
}

.home__play-panel {
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Keep the content behind a choice dialog from showing through its text. */
.home-popup,
.modal {
  background: linear-gradient(160deg, #f3fff7, #deeff8);
}

.card {
  border-radius: var(--radius-card);
}

.auth__submit-btn,
.home__start-btn,
.game-over__play-again,
.game-over__primary-btn,
.replay__control-btn--primary {
  background: var(--gradient-action);
}

.auth__secondary-btn,
.home-profile-action--secondary {
  background: var(--gradient-action-alt);
}

.btn--primary {
  background: var(--gradient-primary);
  box-shadow: 0 4px 14px rgba(27, 155, 215, .28);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(27, 155, 215, .34);
}

.btn--outline {
  background: rgba(255,255,255,.42);
}

.shop__item-icon,
.achievement__icon,
.achievements__summary-icon,
.daily__today-icon,
.daily__day-icon,
.game-over__reward-icon--coin,
.leaderboards__podium-rank {
  background: var(--gradient-action-alt);
  color: #734316;
}

.home__menu-btn--rank {
  background: var(--gradient-menu-gold);
  color: #4f3611;
}

.home__menu-btn--shop {
  background: var(--gradient-menu-blue);
}

.home__menu-btn--profile {
  background: var(--gradient-menu-green);
  color: #103e36;
}

.home__menu-btn--bonus {
  background: var(--gradient-secondary);
}

.home__menu-btn--settings {
  background: linear-gradient(135deg, #62728B 0%, #354259 100%);
}

@media (max-width: 24.375rem) {
  .brand-logo__tile {
    font-size: clamp(14px, 4.4vw, 21px);
  }
}