/* Игра 1 «Ветеринария 2030» */
body.g1 { background: #ECE8F7; background-image: linear-gradient(135deg, #F6F4FB 0%, #E7E1F8 100%); }
.g1 .logo-sm { height: 1.5rem; }
.g1 .topbar .badge { -webkit-flex: 0 0 auto; flex: 0 0 auto; }

/* заставка */
.hero { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.hero-text { -webkit-flex: 1 1 52%; flex: 1 1 52%; padding-right: 1rem; }
.hero-art { -webkit-flex: 1 1 48%; flex: 1 1 48%; -webkit-align-self: stretch; align-self: stretch; min-height: 14rem; }
.kicker { font-size: 2.3rem; font-weight: 800; margin-top: 1rem; letter-spacing: -.01em; }
.year { font-size: 8.5rem; font-weight: 800; color: var(--brand); line-height: .9; letter-spacing: -.04em; margin-bottom: .6rem; }
.lead { max-width: 26rem; margin: 0 0 1.6rem; color: var(--ink-2); }
body.port .hero { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-justify-content: center; justify-content: center; text-align: center; }
body.port .hero-text { padding: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
body.port .hero-art { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 100%; max-height: 32rem; }
body.port .lead { margin-left: auto; margin-right: auto; }
body.phone .year { font-size: 5.5rem; }
body.phone .kicker { font-size: 1.7rem; }
body.phone .hero-art { max-height: 15rem; min-height: 11rem; }

/* утверждение */
.statement-wrap { padding: 0 1rem; }
.statement { font-size: 2.5rem; font-weight: 700; line-height: 1.2; text-align: center; max-width: 46rem; margin-bottom: 2.2rem; }
body.phone .statement { font-size: 1.6rem; }
.answers { text-align: center; }
.answers .btn { margin: .4rem .6rem; min-width: 13rem; }
body.phone .answers .btn { display: block; width: 100%; margin: .5rem 0; min-width: 0; }
.progress { height: .35rem; background: rgba(137, 101, 253, .18); border-radius: 1rem; overflow: hidden; margin-top: 1rem; }
.progress i { display: block; height: 100%; background: var(--brand); width: 0; -webkit-transition: width .4s; transition: width .4s; }

/* ответ МетаПетс */
.reveal { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.reveal-art { -webkit-flex: 0 0 36%; flex: 0 0 36%; -webkit-align-self: stretch; align-self: stretch; min-height: 12rem; }
.reveal-body { -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-left: 1.4rem; max-width: 44rem; }
.reveal-body > .btn { margin-top: 1.2rem; }
.rv-statement { font-weight: 700; margin-bottom: .8rem; }
.mp-view { margin: .5rem 0 0; color: var(--ink-2); }
body.port .reveal { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; }
body.port .reveal-art { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 24rem; -webkit-align-self: auto; align-self: auto; }
body.port .reveal-body { padding: 0; width: 100%; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
body.phone .reveal-art { height: 11rem; min-height: 0; }
body.phone .reveal-body > .btn { width: 100%; }

.peers { padding: 1rem 1.2rem; }
.peers .you { font-weight: 800; font-size: 1.05rem; margin-bottom: .55rem; }
.peers .bar { height: 1.6rem; border-radius: 1rem; background: #E9E5F6; overflow: hidden; position: relative; }
.peers .bar i { display: block; height: 100%; background: var(--brand); width: 0; -webkit-transition: width .9s ease-out; transition: width .9s ease-out; }
.peers .legend { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; font-size: .85rem; font-weight: 700; margin-top: .4rem; color: var(--ink-2); }
.peers .legend b { color: var(--brand-deep); }

/* итог */
.type-name { color: var(--brand); margin: .3rem 0 .5rem; }
body.phone .type-name { font-size: 2rem; }
.summary { padding: .9rem 1.2rem; margin: 1rem 0 0; }
.summary ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.summary li { margin: .2rem 0; }

/* финал */
.done-wrap { max-width: 40rem; margin: 0 auto; width: 100%; }
.done-wrap > * { margin-bottom: 1rem; }
.trend { padding: 1rem 1.2rem; }
.trend textarea { resize: none; min-height: 3.6rem; }
.trend .btn { margin-top: .6rem; }
.more-links .btn { margin: .3rem; }

/* вертикальный экран: крупнее текст, контент по центру */
body.port:not(.phone) .statement { font-size: 3rem; }
body.port:not(.phone) .reveal-body { font-size: 1.1rem; }
.done-wrap > .tc:last-child { margin-bottom: auto; }