/* Главная */
.hello { display: flex; align-items: center; gap: 26px; padding: 26px 30px; background: var(--white); }
.hello-m { position: relative; padding-top: 44px; flex: none; }
.hello-m .mascot { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.speech { position: absolute; top: 0; left: 50%; transform: translateX(-30%); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; background: var(--lemon); border: 3px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: 5px 14px; font: 800 15px var(--f-h); box-shadow: var(--sh-s); }
.hello-t .btn { margin-top: 18px; }

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats3 .card { padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 150px; }
.st-goal { background: var(--white); }
.st-streak { background: var(--tomato-l); } .st-sparks { background: var(--lemon-l); transition: transform .08s, box-shadow .08s; }
.st-sparks:active { transform: translateY(4px); box-shadow: 0 0 var(--ink); }
.st-tile b { font: 800 40px/1 var(--f-h); }
.st-ic { width: 44px; height: 44px; }
.st-l { font-weight: 700; font-size: 14px; color: var(--ink-2); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 300px; padding: 24px; border: var(--bd); border-radius: 28px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; transition: transform .1s, box-shadow .1s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.tile:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }
.t-dates { background: var(--tomato); } .t-memes { background: var(--lilac); }
.tile-k { font: 800 12px/1 var(--f-t); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.tile .h2 { font-size: clamp(26px, 3.4vw, 34px); }
.tile p { font-weight: 600; max-width: 26ch; }
.t-memes p { max-width: calc(100% - 150px); }
.tile-f { margin-top: auto; display: flex; align-items: center; gap: 6px; font-weight: 600; position: relative; z-index: 1; }
.tile-f b { font-weight: 800; }
.go { margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center; background: var(--white); border: var(--bd); border-radius: 50%; box-shadow: var(--sh-s); }
.pv-chat { display: flex; flex-direction: column; gap: 8px; width: 80%; margin: 6px 0 14px; }
.pv-chat .b { padding: 8px 12px; border: 2.5px solid var(--ink); font-weight: 700; font-size: 14px; line-height: 1.3; }
.b-him { background: var(--white); border-radius: 16px 16px 16px 4px; align-self: flex-start; transform: rotate(-2deg); }
.b-me { background: var(--lemon); border-radius: 16px 16px 4px 16px; align-self: flex-end; transform: rotate(1.5deg); }
.pv-meme { position: absolute; right: 22px; top: 70px; width: 138px; height: 150px; background: var(--lemon); border: var(--bd); border-radius: 18px; transform: rotate(6deg); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 6px; box-shadow: var(--sh); }
.pv-meme span { font: 800 13px var(--f-h); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.pv-meme i { font-style: normal; font-size: 62px; line-height: 1; }

.wod { display: flex; align-items: center; gap: 20px; background: var(--lemon); }
.wod-e { font-size: 64px; line-height: 1; width: 96px; height: 96px; display: grid; place-items: center; background: var(--white); border: var(--bd); border-radius: 50%; flex: none; }
.wod-b { flex: 1; min-width: 0; }
.wod .mk { background: linear-gradient(transparent 58%, var(--white) 58%, var(--white) 92%, transparent 92%); }
.wod-ru { margin-top: 6px; font-weight: 600; }
.wod .ex { background: var(--white); }
.wod .btn { flex: none; }

.mini-path { padding: 18px 22px 22px; }
.mp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
.mp-row { display: flex; align-items: center; }
.mp-n { width: 50px; height: 50px; flex: none; display: grid; place-items: center; font-size: 24px; border: var(--bd); border-radius: 50%; background: var(--lemon); box-shadow: var(--sh-s); }
.mp-n.done { background: var(--mint); } .mp-n.lock { background: var(--cream-2); color: var(--ink-2); }
.mp-n .ic { width: 22px; height: 22px; }
.mp-line { flex: 1; min-width: 6px; height: 0; border-top: 4px dashed var(--ink-2); opacity: .5; } .mp-line.on { border-top-style: solid; border-color: var(--ink); opacity: 1; }

@media (max-width: 700px) {
  .hello { flex-direction: column; text-align: center; padding: 22px 18px; gap: 6px; }
  .hello-m .mascot { width: 104px; } .speech { transform: translateX(-50%); max-width: calc(100vw - 80px); }
  .lead { margin-left: auto; margin-right: auto; }
  .hello-t .btn { width: 100%; }
  .stats3 { gap: 10px; } .stats3 .card { padding: 12px 6px; min-height: 130px; }
  .st-tile b { font-size: 30px; } .st-ic { width: 36px; height: 36px; }
  .tiles { grid-template-columns: 1fr; gap: 16px; } .tile { min-height: 220px; padding: 20px; }
  .pv-meme { width: 104px; height: 118px; top: 62px; } .t-memes p { max-width: calc(100% - 120px); } .pv-meme i { font-size: 48px; }
  .wod { flex-wrap: wrap; padding: 18px; gap: 14px; } .wod-e { width: 64px; height: 64px; font-size: 38px; } .wod-b { flex-basis: calc(100% - 80px); } .wod .btn { width: 100%; }
  .mp-n { width: 40px; height: 40px; font-size: 19px; }
}