/* 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);
  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%;
}

.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(100% - 24px), 31rem);
  margin-bottom: var(--space-lg);
}

.brand-logo--splash .brand-logo__tile {
  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; }

.home-house-icon {
  position: relative;
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 0 rgba(75, 82, 113, .16));
}

.home-house-icon > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.home-house-icon__sun {
  right: 1px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd75e;
  box-shadow: 0 0 0 3px rgba(255, 215, 94, .28);
}

.home-house-icon__chimney {
  left: 8px;
  top: 6px;
  width: 5px;
  height: 10px;
  border-radius: 2px 2px 0 0;
  background: #8a5034;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2);
}

.home-house-icon__roof {
  left: 2px;
  top: 6px;
  width: 26px;
  height: 15px;
  background: linear-gradient(135deg, #ff7c48 0%, #e83f51 100%);
  clip-path: polygon(50% 0, 100% 80%, 88% 100%, 50% 40%, 12% 100%, 0 80%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.24);
}

.home-house-icon__body {
  left: 6px;
  top: 15px;
  width: 19px;
  height: 13px;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #fff1a8 0%, #ffc96d 100%);
  border: 2px solid rgba(130, 78, 22, .25);
  box-shadow: inset 0 -3px 0 rgba(167, 92, 20, .16);
}

.home-house-icon__door {
  left: 13px;
  top: 20px;
  width: 5px;
  height: 8px;
  border-radius: 3px 3px 1px 1px;
  background: #5b7fcb;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.28);
}

.home-house-icon__window {
  top: 18px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #57d6ef;
  box-shadow: inset 0 -1px 0 rgba(18, 95, 134, .22);
}

.home-house-icon__window--left { left: 9px; }
.home-house-icon__window--right { right: 8px; }

.home-house-icon__grass {
  left: 3px;
  right: 2px;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(90deg, #39c47e 0%, #79db73 100%);
  box-shadow: inset 0 -1px 0 rgba(32, 101, 50, .24);
}

.btn .home-house-icon {
  width: 1.5em;
  height: 1.5em;
}

.top-bar__home,
.screen-home-button,
.nav__item,
.modal__close,
.mode-picker__close,
.toast__icon,
.empty-state__icon,
.auth__mail-icon,
.home__start-icon,
.home__menu-icon,
.picker__mode-icon,
.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);
}

.top-bar__home,
.screen-home-button,
.nav__item,
.modal__close,
.mode-picker__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__mode-card,
.home__menu-btn,
.home-language-option,
.home-profile-action,
.picker__mode,
.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,
.mode-picker,
.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);
}

.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,
.picker__mode--attack {
  background: var(--gradient-menu-gold);
  color: #4f3611;
}

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

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

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

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

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