/* ==================== ПРЕМИАЛЬНЫЕ ШРИФТЫ (офлайн, локально) ==================== */
/* Cinzel — логотип; Cormorant Garamond — заголовки; Montserrat — интерфейс */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cinzel-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-600-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Montserrat", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-ink: #0B111C;
  --theme-inkSoft: #111827;
  --theme-gold: #D6A85A;
  --theme-goldBright: #F2C777;
  --theme-tile: #F2E4C8;
  --theme-burgundy: #8B2E2E;
  --theme-jade: #4E7D4F;
  --theme-mist: #A7B1BE;
  --theme-cream: #FFF3DA;
  --glass: rgba(13, 20, 33, .72);
  --glass-strong: rgba(13, 20, 33, .9);
  --line: rgba(214, 168, 90, .34);
  --shadow: 0 24px 60px rgba(0, 0, 0, .42);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--theme-cream);
  font-family: var(--font-ui);
  background: #05070d;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Подсказка «поверните телефон» — только для узких экранов в альбомной */
.rotate-hint { display: none; }

@media (orientation: landscape) and (max-width: 940px) and (max-height: 560px) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    background: #07090f;
  }
  .rotate-ico { font-size: 3.4rem; animation: rotateNudge 2.2s ease-in-out infinite; }
  .rotate-hint p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.7rem; color: var(--theme-goldBright); }
  .rotate-hint span { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: rgba(255, 243, 218, .6); }
}

@keyframes rotateNudge { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }

/* ==================== ЖИВОЙ ФОН ЛОББИ ==================== */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.amb-art {
  position: absolute;
  inset: -6%;
  background: #0a0a12 url("assets/japanese-night.png") center 28% / cover no-repeat;
  transform: var(--par, translate(0, 0) scale(1.08));
  transition: transform .5s ease-out;
  animation: ambBreathe 26s ease-in-out infinite;
}

@keyframes ambBreathe {
  0%, 100% { filter: brightness(1) saturate(1.02); }
  50% { filter: brightness(1.08) saturate(1.08); }
}

.amb-mist {
  position: absolute;
  right: -20%;
  left: -20%;
  height: 240px;
  filter: blur(24px);
  background: radial-gradient(closest-side, rgba(150, 160, 180, .16), transparent 72%);
}

.amb-mist-1 { bottom: 6%; animation: ambMist 34s ease-in-out infinite; }
.amb-mist-2 { bottom: 20%; opacity: .6; animation: ambMist 46s ease-in-out infinite reverse; }

@keyframes ambMist {
  0%, 100% { transform: translateX(-6%); }
  50% { transform: translateX(6%); }
}

.amb-petals {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.amb-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(4, 5, 10, .55) 100%),
    linear-gradient(180deg, rgba(6, 8, 14, .3), transparent 26%, transparent 70%, rgba(6, 8, 14, .5));
}

@media (prefers-reduced-motion: reduce) {
  .amb-stars, .amb-cloud, .amb-lantern, .amb-lantern i, .amb-mist { animation: none; }
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: default;
  opacity: .62;
}

.app {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(10px, 2vw, 22px);
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(430px, 100%);
  height: min(880px, calc(100dvh - 20px));
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgba(214, 168, 90, .5);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(11, 14, 24, .28), rgba(9, 11, 20, .52) 60%, rgba(7, 9, 16, .68));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 90px rgba(0, 0, 0, .35);
  isolation: isolate;
  backdrop-filter: blur(2px);
}

.screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, transparent 0 44%, rgba(9, 11, 20, .55) 88%),
    radial-gradient(circle at 50% 6%, rgba(242, 199, 119, .12), transparent 30%);
}

/* Дом и игра — рисованный арт виден ярко, как в макете */
.home-screen {
  background:
    linear-gradient(180deg, rgba(10, 12, 22, .12) 0%, rgba(9, 11, 20, .28) 46%, rgba(7, 9, 16, .72) 82%, rgba(6, 8, 14, .9) 100%),
    url("assets/japanese-night.png") 32% 16% / cover;
}

.screen::after {
  position: absolute;
  inset: 12px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(214, 168, 90, .2);
  border-radius: 22px;
}

.glass-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent),
    var(--glass);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}

.topbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  margin: 14px 14px 0;
  border-radius: 16px;
  padding: 10px;
}

.profile {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.avatar,
.legend-seal,
.icon-button,
.event-art {
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 199, 119, .52);
  color: var(--theme-goldBright);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 233, 181, .25), transparent 28%),
    linear-gradient(145deg, #8B2E2E, #32131A);
}

.avatar {
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  font-weight: 900;
}

.profile strong,
.profile span {
  display: block;
}

.profile strong {
  overflow: hidden;
  max-width: 96px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile span,
.screen-head span,
.world-meta,
.event-copy span,
.shop-row span,
.game-counters,
.section-kicker {
  color: rgba(255, 243, 218, .68);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.top-resources {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  border: 1px solid rgba(214, 168, 90, .24);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(4, 9, 16, .48);
  color: var(--theme-goldBright);
  font-size: .78rem;
  font-weight: 900;
}

.heart {
  color: #e47b83;
}

.icon-button,
.back-button {
  flex: 0 0 auto;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  font-weight: 900;
}

.icon-button .ic { width: 19px; height: 19px; }

.icon-button.large,
.back-button {
  width: 44px;
  font-size: 1.5rem;
}

.back-button {
  border: 1px solid rgba(214, 168, 90, .28);
  color: var(--theme-goldBright);
  background: rgba(5, 10, 18, .62);
}

.home-content {
  z-index: 2;
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  padding: 10px 20px 96px;
  overflow: auto;
  scrollbar-width: none;
}

.home-content::-webkit-scrollbar { display: none; }

/* На телефоне колонок нет: обёртки «растворяются», и дети остаются
   прямыми элементами сетки .home-content — вёрстка ровно как была. */
.home-brand,
.home-actions {
  display: contents;
}

/* Тост про авто-перемешивание. Лежит в body (render() переписывает #app),
   поэтому позиционируется от вьюпорта. */
.toast {
  z-index: 40;
  position: fixed;
  bottom: 104px;
  left: 50%;
  max-width: min(340px, calc(100vw - 40px));
  border: 1px solid rgba(242, 199, 119, .45);
  border-radius: 14px;
  padding: 10px 16px;
  color: #f6ead2;
  font-size: .85rem;
  line-height: 1.3;
  text-align: center;
  background: linear-gradient(135deg, rgba(32, 24, 19, .97), rgba(17, 14, 12, .97));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.name-input {
  width: 148px;
  border: 1px solid rgba(214, 168, 90, .4);
  border-radius: 12px;
  padding: 9px 12px;
  color: #f6ead2;
  font: inherit;
  font-size: .9rem;
  text-align: right;
  background: rgba(10, 13, 22, .6);
}

.name-input:focus {
  outline: none;
  border-color: rgba(242, 199, 119, .8);
}

.brand-hero {
  margin-top: 8px;
  text-align: center;
}

/* ---- Крупная золотая печать 東 ---- */
.hero-seal {
  position: relative;
  width: clamp(112px, 34vw, 148px);
  aspect-ratio: 1;
  margin: 16px auto 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* толстое золотое кольцо */
  background:
    conic-gradient(from 210deg, #f6d78a, #b9822f 20%, #ffe6a8 38%, #a86e28 55%, #ffdd92 72%, #9c6323 88%, #f6d78a);
  box-shadow:
    0 0 46px rgba(214, 168, 90, .55),
    0 18px 34px rgba(0, 0, 0, .55),
    inset 0 2px 3px rgba(255, 255, 255, .6);
  animation: sealFloat 6s ease-in-out infinite;
}

.hero-seal::before {
  /* внутренний тёмно-красный диск */
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 210, 150, .45), transparent 46%),
    radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .5), transparent 60%),
    linear-gradient(155deg, #b23a2d, #7a2320 52%, #3d1113);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 6px 14px rgba(0, 0, 0, .45);
}

.hero-seal span {
  position: relative;
  z-index: 1;
  color: #fbe6bf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 11vw, 4rem);
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6), 0 0 20px rgba(255, 210, 150, .35);
}

@keyframes sealFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.brand-hero h1 {
  margin: 0;
  color: #fff8ea;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 12vw, 3.9rem);
  letter-spacing: .04em;
  line-height: .96;
  padding: 0 6px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe9c4 55%, #e7b978 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
}

.brand-hero p {
  margin: 6px 0 0;
  color: var(--theme-goldBright);
  font-family: var(--font-ui);
  font-size: clamp(.9rem, 3.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ---- Кнопка Играть (доминанта) ---- */
.play-block {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.play-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  min-height: 62px;
  overflow: hidden;
  border: 1px solid rgba(255, 240, 200, .85);
  border-radius: 16px;
  padding: 10px 20px;
  color: #3a2408;
  background:
    linear-gradient(180deg, #ffe9b0 0%, #f2c777 44%, #d69f4c 78%, #b57a34 100%);
  box-shadow:
    0 16px 34px rgba(150, 96, 30, .5),
    0 3px 0 rgba(120, 74, 24, .6),
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -8px 16px rgba(150, 90, 30, .3);
  animation: playPulse 2.6s ease-in-out infinite;
}

.play-cta:active { transform: translateY(2px); box-shadow: 0 8px 18px rgba(150, 96, 30, .5), inset 0 2px 0 rgba(255, 255, 255, .7); }

@keyframes playPulse {
  0%, 100% { box-shadow: 0 16px 34px rgba(150, 96, 30, .45), 0 3px 0 rgba(120, 74, 24, .6), inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -8px 16px rgba(150, 90, 30, .3); }
  50% { box-shadow: 0 18px 44px rgba(242, 199, 119, .65), 0 3px 0 rgba(120, 74, 24, .6), inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -8px 16px rgba(150, 90, 30, .3); }
}

.play-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: playShine 3.6s ease-in-out infinite;
}

@keyframes playShine {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

.play-flower {
  display: grid;
  place-items: center;
  color: #4a2c08;
}

.play-flower .ic {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .5));
}

.play-sub {
  flex-basis: 100%;
  margin-top: -6px;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .82;
}

.play-main {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.journey-cta {
  min-height: 52px;
  border: 1px solid rgba(214, 168, 90, .45);
  border-radius: 14px;
  color: var(--theme-cream);
  background: rgba(10, 14, 24, .55);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .92rem;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.journey-cta:active { border-color: rgba(242, 199, 119, .7); }

/* ---- Ряд иконок-кнопок ---- */
.icon-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.icon-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 12px 4px 9px;
  border: 1px solid rgba(214, 168, 90, .26);
  border-radius: 16px;
  color: rgba(255, 243, 218, .9);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), rgba(9, 13, 22, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  transition: transform .12s ease, border-color .12s ease;
}

.icon-card:active { transform: translateY(2px) scale(.97); border-color: rgba(242, 199, 119, .6); }

.ic-glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(242, 199, 119, .4);
  background: radial-gradient(circle at 40% 28%, rgba(242, 199, 119, .3), transparent 62%), rgba(4, 9, 16, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .32);
  color: var(--theme-goldBright);
}

.ic-glyph .ic {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 3px rgba(180, 120, 40, .5));
}

.ic-glyph .ic-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  -webkit-user-select: none;
  user-select: none;
}

.ic-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 243, 218, .82);
}

/* ---- Сундук дня ---- */
.daily-chest {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 14px;
  border: 1px solid rgba(242, 199, 119, .42);
  border-radius: 16px;
  padding: 11px 12px;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(139, 46, 46, .3), rgba(214, 168, 90, .12)),
    rgba(10, 14, 24, .6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}

.chest-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(242, 199, 119, .4);
  background: radial-gradient(circle at 40% 28%, rgba(242, 199, 119, .3), transparent 62%), rgba(4, 9, 16, .6);
  color: var(--theme-goldBright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.chest-icon .ic { width: 24px; height: 24px; }

@keyframes chestWobble {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-8deg); }
  97% { transform: rotate(8deg); }
}

.chest-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e4433f;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(10, 14, 24, .8);
}

.chest-copy { flex: 1; min-width: 0; }
.chest-copy span { display: block; color: var(--theme-goldBright); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.chest-copy strong { display: block; margin-top: 2px; font-size: .95rem; color: #fff8ea; }

.chest-open {
  flex: 0 0 auto;
  border-radius: 10px;
  padding: 8px 14px;
  color: #26170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(120, 74, 24, .4);
}

/* ---- Меню-плитки ---- */
.home-menu {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.menu-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(214, 168, 90, .24);
  border-radius: 14px;
  padding: 11px 14px;
  color: inherit;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), rgba(9, 13, 22, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.menu-tile:active { transform: scale(.98); border-color: rgba(242, 199, 119, .6); }

.menu-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(242, 199, 119, .28);
  background: radial-gradient(circle at 40% 30%, rgba(242, 199, 119, .22), transparent 60%), rgba(4, 9, 16, .6);
  font-size: 1.4rem;
}

.menu-text { flex: 1; min-width: 0; }
.menu-text strong { display: block; font-size: .96rem; color: #fff8ea; }
.menu-text span { display: block; margin-top: 1px; color: rgba(255, 243, 218, .6); font-size: .72rem; font-weight: 700; }

.menu-arrow { flex: 0 0 auto; color: var(--theme-goldBright); font-size: 1.4rem; font-weight: 900; opacity: .7; }

.primary-button,
.ghost-button,
.mini-gold {
  min-height: 48px;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 900;
}

.primary-button {
  border: 1px solid rgba(255, 232, 180, .55);
  color: #24170d;
  background: linear-gradient(180deg, #ffe0a0, #D6A85A 48%, #a76d35);
  box-shadow: 0 12px 26px rgba(113, 70, 25, .38), inset 0 1px 0 rgba(255, 255, 255, .58);
  text-transform: uppercase;
}

.primary-button.compact,
.mini-gold {
  min-height: 38px;
  font-size: .78rem;
}

.ghost-button {
  border: 1px solid rgba(214, 168, 90, .34);
  color: var(--theme-goldBright);
  background: rgba(5, 10, 18, .54);
}

.mini-gold {
  border: 1px solid rgba(255, 232, 180, .45);
  color: #26170d;
  background: linear-gradient(180deg, #f4cd84, #b97839);
}

.daily-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  border-radius: 14px;
  padding: 12px;
}

.daily-strip span,
.offer-card span {
  color: var(--theme-goldBright);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-strip strong {
  display: block;
  margin-top: 3px;
  font-size: .9rem;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.feature-row article {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 82px;
  border: 1px solid rgba(214, 168, 90, .22);
  border-radius: 14px;
  padding: 12px 6px;
  background: rgba(7, 13, 22, .54);
  color: rgba(255, 243, 218, .82);
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
}

.feature-row i {
  color: var(--theme-goldBright);
  font-family: Georgia, serif;
  font-size: 1.55rem;
  font-style: normal;
}

.bottom-nav {
  z-index: 3;
  position: absolute;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  border-radius: 18px;
  padding: 6px;
}

.bottom-nav button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 54px;
  border-radius: 13px;
  color: rgba(255, 243, 218, .68);
  background: transparent;
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.bottom-nav button.active {
  color: #24170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
  box-shadow: 0 6px 14px rgba(120, 74, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.bottom-nav .ic {
  width: 23px;
  height: 23px;
}

/* ==================== ИКОНКИ (единый набор) ==================== */
.ic {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}

.screen-head {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
}

.screen-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: .01em;
}

.scroll-area {
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 18px 96px;
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

.event-list,
.collection-list,
.shop-list {
  display: grid;
  gap: 13px;
}

/* ---- Карта путешествия (тропа со стопами) ---- */
.journey-map {
  display: grid;
  gap: 0;
}

.map-stop {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 8px;
  padding-bottom: 16px;
}

.map-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

/* вертикальная пунктирная тропа между стопами */
.map-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -16px;
  width: 3px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(242, 199, 119, .75) 0 7px, transparent 7px 15px);
}

.map-stop:last-child .map-rail::before { bottom: 50%; }
.map-stop.locked .map-rail::before { background: repeating-linear-gradient(180deg, rgba(160, 170, 185, .3) 0 7px, transparent 7px 15px); }

.map-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 22px;
  border-radius: 50%;
  border: 2px solid rgba(242, 199, 119, .85);
  color: #2a1a08;
  background: radial-gradient(circle at 38% 30%, #ffe9b8, #e2b06a 65%, #b9812f);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 16px rgba(242, 199, 119, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: .9rem;
  font-weight: 900;
}

.map-stop.active .map-node {
  animation: nodePulse 1.8s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 14px rgba(242, 199, 119, .45), inset 0 1px 0 rgba(255, 255, 255, .7); }
  50% { box-shadow: 0 6px 14px rgba(0, 0, 0, .4), 0 0 26px rgba(242, 199, 119, .95), inset 0 1px 0 rgba(255, 255, 255, .7); }
}

.map-stop.done .map-node { background: radial-gradient(circle at 38% 30%, #cfeecb, #6fae70 65%, #3f7a45); border-color: rgba(120, 200, 130, .8); color: #10240f; }

.map-stop.locked .map-node {
  border-color: rgba(160, 170, 185, .5);
  color: #cfd6e0;
  background: radial-gradient(circle at 38% 30%, #4a5262, #2a3140 70%, #1b2029);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.world-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid rgba(214, 168, 90, .42);
  border-radius: 14px;
  padding: 14px;
  background: var(--cover) center / cover;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
}

.world-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(5, 10, 18, .08), rgba(5, 10, 18, .82));
}

.world-card > * {
  position: relative;
}

.world-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 199, 119, .48);
  border-radius: 50%;
  color: var(--theme-goldBright);
  background: rgba(5, 10, 18, .56);
}

.world-card h3,
.event-card h3,
.offer-card h3 {
  margin: 0 0 5px;
  color: #fff8ea;
  font-size: 1.04rem;
}

.world-card p,
.event-card p,
.offer-card p {
  margin: 0;
  color: rgba(255, 243, 218, .76);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

.world-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.world-meta strong {
  color: var(--theme-goldBright);
}

.progress {
  height: 8px;
  margin: 10px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 180, .22);
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6d48d, #d28a45);
}

.world-card.locked {
  filter: grayscale(.8) brightness(.74);
}

.event-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 13px;
  align-items: center;
  border-radius: 16px;
  padding: 13px;
}

.event-card .primary-button {
  grid-column: 1 / -1;
}

.event-art {
  width: 74px;
  aspect-ratio: 1;
  border-radius: 16px;
  box-shadow: inset 0 0 24px rgba(255, 230, 178, .12);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
}

.login-card,
.tile-showcase,
.shop-row,
.offer-card {
  border-radius: 16px;
  padding: 14px;
}

.reward-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.reward {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 86px;
  border: 1px solid rgba(214, 168, 90, .22);
  border-radius: 12px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, .045);
  text-align: center;
}

.reward.claimed {
  border-color: rgba(242, 199, 119, .62);
  box-shadow: inset 0 0 16px rgba(214, 168, 90, .14);
}

.reward i {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #24170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
  font-style: normal;
  font-weight: 900;
}

.reward span,
.reward strong {
  font-size: .62rem;
}

.tile-showcase {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Плитки — готовые PNG (Code Inferno, CC BY 3.0): контейнер прозрачный,
   картинка уже содержит тело плитки с фаской и объёмом. */
.sample-tile,
.mini-tile,
.tile {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}

.tile > img.tface,
.sample-tile > img.tface,
.mini-tile > img.tface {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.sample-tile {
  width: 100%;
  aspect-ratio: 128 / 178;
}

.mini-tile {
  width: 44px;
  aspect-ratio: 128 / 178;
}


.shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shop-row strong,
.shop-row span {
  display: block;
}

.toggle-switch {
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 38px;
  border: 1px solid rgba(214, 168, 90, .34);
  border-radius: 999px;
  background: rgba(5, 10, 18, .54);
  color: rgba(255, 243, 218, .68);
  font-size: .78rem;
  font-weight: 900;
}

.toggle-switch.on {
  border-color: rgba(255, 232, 180, .55);
  color: #24170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
}

.settings-note {
  margin: 10px 4px 0;
  color: rgba(255, 243, 218, .56);
  font-size: .76rem;
  line-height: 1.5;
}

.offer-card {
  min-height: 160px;
  background:
    linear-gradient(135deg, rgba(139, 46, 46, .28), rgba(214, 168, 90, .1)),
    var(--glass);
}

.offer-card p {
  margin: 8px 0 18px;
}

.game-screen {
  background:
    linear-gradient(180deg, rgba(9, 12, 22, .55), rgba(8, 10, 18, .78) 60%, rgba(6, 8, 14, .9)),
    url("assets/japanese-night.png") center 12% / cover;
}

.game-top {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 16px 8px;
}

.level-copy {
  min-width: 0;
  text-align: center;
}

.level-copy span,
.level-copy strong,
.level-copy i {
  display: block;
}

.level-copy span {
  overflow: hidden;
  max-width: 170px;
  color: rgba(255, 243, 218, .68);
  font-size: .66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.level-copy strong {
  margin-top: 2px;
  font-size: .9rem;
}

.level-copy i {
  margin-top: 2px;
  color: var(--theme-goldBright);
  font-style: normal;
  letter-spacing: .08em;
}

.timer-box {
  display: flex;
  align-items: center;
  gap: 7px;
}

.timer-box strong {
  min-width: 46px;
  text-align: right;
}

.board-wrap {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 0;
  margin: auto 8px;
  /* мягкое затемнение-подложка, чтобы плитки читались на арте, без рамки-«мата» */
  background: radial-gradient(78% 70% at 50% 50%, rgba(6, 9, 14, .55), transparent 72%);
}

.board {
  position: absolute;
  inset: 6px;
}

.tile {
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  border-radius: 15%/11%;
  font-size: clamp(1.15rem, 6.4vw, 2rem);
  transform: translate(var(--x), var(--y));
  transition: opacity .22s ease, transform .16s ease, filter .18s ease, box-shadow .18s ease;
}

.tile.locked {
  filter: saturate(.62) brightness(.68) drop-shadow(0 5px 7px rgba(0, 0, 0, .4));
}

.tile.free {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .48));
}

.tile.free:active {
  transform: translate(var(--x), calc(var(--y) + 4px)) scale(.97);
  filter: brightness(.96) drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}

.tile.selected {
  transform: translate(var(--x), calc(var(--y) - 4px)) scale(1.06);
  filter:
    brightness(1.12)
    drop-shadow(0 0 3px rgba(110, 205, 120, .95))
    drop-shadow(0 0 14px rgba(90, 190, 110, .8))
    drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}

.tile.hint {
  animation: hintPulse .72s ease-in-out infinite alternate;
}

/* появление плиток: падение сверху с пружиной */
.board.spawning .tile {
  animation: tileDrop .55s cubic-bezier(.34, 1.5, .5, 1) backwards;
  animation-delay: calc(var(--i, 0) * 16ms);
}

@keyframes tileDrop {
  0% { transform: translate(var(--x), calc(var(--y) - 70vh)) rotate(-6deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(0); opacity: 1; }
}

/* исчезновение пары: вспышка + рассыпание */
.tile.removing {
  z-index: 60 !important;
  animation: tileMatch .32s ease-out forwards;
}

@keyframes tileMatch {
  0% { filter: brightness(1); }
  35% { filter: brightness(2.2) saturate(1.4) drop-shadow(0 0 22px rgba(242, 199, 119, .95)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 16px)) scale(.7) rotate(4deg); filter: brightness(1.6) drop-shadow(0 0 10px rgba(242, 199, 119, .6)); }
}

.tile.removed { display: none; }

@keyframes hintPulse {
  from { filter: brightness(1.02) drop-shadow(0 0 4px rgba(242, 199, 119, .4)) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
  to { filter: brightness(1.16) drop-shadow(0 0 16px rgba(242, 199, 119, .95)) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
}

/* частицы совпадения */
.match-fx {
  position: absolute;
  z-index: 70;
  pointer-events: none;
  transform: translate(var(--fx-x), var(--fx-y));
}

.match-fx .spark {
  position: absolute;
  width: var(--s, 7px);
  height: var(--s, 7px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3cf, #f2c777 55%, #d69f4c);
  box-shadow: 0 0 8px 2px rgba(242, 199, 119, .8);
  animation: sparkFly .6s ease-out forwards;
}

@keyframes sparkFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

.match-fx .ring {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(242, 199, 119, .9);
  animation: ringPop .5s ease-out forwards;
}

@keyframes ringPop {
  0% { transform: scale(.2); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}

.no-moves {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 4;
  min-height: 46px;
  border: 1px solid rgba(242, 199, 119, .46);
  border-radius: 12px;
  color: #24170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
  font-weight: 900;
}

.hidden {
  display: none !important;
}

.booster-panel {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 14px 8px;
  border-radius: 16px;
  padding: 8px;
}

.booster-panel button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 62px;
  border: 1px solid rgba(214, 168, 90, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--theme-goldBright);
  font-size: .68rem;
  font-weight: 900;
}

.booster-panel i {
  display: grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #24170d;
  background: linear-gradient(180deg, #f5d28c, #b97839);
  font-style: normal;
  font-size: 1rem;
}

.booster-panel b {
  position: absolute;
  top: 5px;
  right: 8px;
  color: rgba(255, 243, 218, .78);
  font-size: .66rem;
}

.found-tray {
  z-index: 2;
  margin: 0 14px max(14px, env(safe-area-inset-bottom));
  border: 1px solid rgba(214, 168, 90, .32);
  border-radius: 16px;
  padding: 10px 12px 11px;
  /* плотный тёмный фон вместо мутного стекла */
  background: linear-gradient(180deg, #14110c, #0c0a08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: none;
}

#found-tiles {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 62px;
  gap: 8px;
  /* углублённая «полка» для собранных плиток */
  border-radius: 12px;
  padding: 6px 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .28)),
    repeating-linear-gradient(90deg, rgba(120, 90, 50, .12) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .04);
}

#found-tiles:empty::before {
  content: "Собранные пары";
  color: rgba(255, 243, 218, .32);
  font-size: .78rem;
  font-weight: 700;
}

.game-counters {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.game-counters span { color: rgba(255, 243, 218, .62); }
.game-counters strong { color: var(--theme-goldBright); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 12, .64);
  backdrop-filter: blur(14px);
}

.modal-panel {
  width: min(360px, 100%);
  border-radius: 18px;
  padding: 22px;
  text-align: center;
}

.modal-panel > span {
  color: var(--theme-goldBright);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.modal-panel h2 {
  margin: 6px 0 8px;
  color: #fff8ea;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: .01em;
}

.modal-panel p {
  margin: 0;
  color: rgba(255, 243, 218, .74);
  line-height: 1.45;
}

.modal-rewards {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 16px 0 0;
}

.modal-rewards i {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 199, 119, .48);
  border-radius: 12px;
  color: var(--theme-goldBright);
  background: rgba(255, 255, 255, .06);
  font-style: normal;
  font-weight: 900;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 460px) {
  .app {
    padding: 0;
  }

  .screen {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .screen::after {
    inset: 8px;
    border-radius: 0;
  }

  .topbar {
    margin-top: max(10px, env(safe-area-inset-top));
  }

  .profile strong {
    max-width: 72px;
  }

  .pill {
    padding-inline: 7px;
  }

  .home-content {
    padding-inline: 18px;
  }

  .brand-hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .sample-tile {
    min-height: 60px;
  }
}

@media (min-width: 820px) {
  .screen {
    width: min(1120px, calc(100vw - 32px));
    height: min(720px, calc(100dvh - 32px));
    min-height: 620px;
    border-radius: 20px;
  }

  /* Широкий экран — две настоящие колонки: слева бренд, справа действия.
     Раньше весь интерфейс жался в колонку 420px, а правая половина пустовала. */
  .home-brand,
  .home-actions {
    display: grid;
    align-content: center;
    gap: 0;
  }

  .home-screen .home-content {
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    gap: 0 48px;
    padding: 20px 46px 104px;
    overflow: hidden;
  }

  .home-brand {
    justify-items: center;
  }

  /* Навбар — одной центрированной полосой под обеими колонками,
     иначе низ разъезжается: награда слева, навигация справа. */
  .bottom-nav {
    right: 0;
    left: 0;
    width: min(620px, calc(100% - 92px));
    margin-inline: auto;
  }

  .world-list,
  .event-list,
  .collection-list,
  .shop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    padding-inline: 32px;
  }

  .world-card {
    min-height: 210px;
  }

  .game-screen {
    display: grid;
    grid-template-columns: 1fr 292px;
    grid-template-rows: auto 1fr auto;
  }

  .game-top {
    grid-column: 1 / -1;
  }

  .board-wrap {
    grid-row: 2 / 4;
    margin: 8px 20px 22px 30px;
  }

  .booster-panel,
  .found-tray {
    margin-right: 22px;
    margin-left: 0;
  }

  .booster-panel {
    align-self: end;
    grid-template-columns: 1fr;
  }
}