/* Игра 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; }
.qr-code svg, .qr-code img { width: 5.2rem; height: 5.2rem; display: block; margin-right: .8rem; }
body.kiosk .qr-code svg, body.kiosk .qr-code img { width: 8rem; height: 8rem; }

/* ---------- заставка ---------- */
.hero { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.hero-text { -webkit-flex: 1 1 50%; flex: 1 1 50%; padding-right: 1rem; }
.hero-right { -webkit-flex: 1 1 50%; flex: 1 1 50%; -webkit-align-self: stretch; align-self: stretch; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-height: 16rem; }
/* картинка не должна растягивать колонку: абсолютное позиционирование внутри растущего блока */
.hero-art { -webkit-flex: 1 1 0; flex: 1 1 0; min-height: 10rem; position: relative; }
.hero-art img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-top: .6rem; }
.hero-row .opinion { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.hero-row .qr { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: .8rem; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: .6rem .7rem; text-align: center; }
.hero-row .qr .qr-code svg, .hero-row .qr .qr-code img { margin: 0 auto; }
.hero-row .qr .t-s { max-width: 8.5rem; margin-top: .35rem; font-size: .78rem; line-height: 1.25; }
.kicker { font-size: 2.3rem; font-weight: 800; margin-top: .4rem; 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.4rem; color: var(--ink-2); }
.g1 .prize-line { margin: .9rem 0 .5rem; }

/* карусель живых мнений */
.opinion { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: .9rem 1.2rem; min-height: 6.2rem;
  opacity: 0; -webkit-transform: translate3d(0, .5rem, 0); transform: translate3d(0, .5rem, 0); -webkit-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s; }
.opinion.in { opacity: 1; -webkit-transform: none; transform: none; }
.op-pct { font-size: 2.8rem; font-weight: 800; color: var(--brand); line-height: 1; margin-right: 1rem; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.op-cap { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-deep); }
.op-text { font-size: 1rem; font-weight: 700; line-height: 1.3; margin-top: .2rem; }

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-right { -webkit-flex: 1 1 auto; flex: 1 1 auto; width: 100%; max-height: 38rem; text-align: left; }
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-right { max-height: 22rem; min-height: 15rem; }
body.phone .op-pct { font-size: 2rem; }
body.phone .opinion { min-height: 0; padding: .7rem .9rem; }

/* ---------- колода прогнозов ---------- */
.deck-wrap { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 0 .5rem; }
.deck { position: relative; width: 100%; max-width: 50rem; height: 21rem; margin-bottom: 2.4rem; }
.deck-card { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 1.8rem; background: #fff; box-shadow: 0 1rem 2.6rem rgba(91, 59, 214, .16); }
.deck-card.back1 { -webkit-transform: translate3d(0, 1.1rem, 0) scale(.95); transform: translate3d(0, 1.1rem, 0) scale(.95); background: #F1ECFF; box-shadow: none; }
.deck-card.back2 { -webkit-transform: translate3d(0, 2.2rem, 0) scale(.9); transform: translate3d(0, 2.2rem, 0) scale(.9); background: #E4DBFE; box-shadow: none; }
.deck-card.front { z-index: 3; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 1.6rem 2.4rem; text-align: center; cursor: -webkit-grab; cursor: grab; touch-action: pan-y;
  -webkit-transition: -webkit-transform .28s cubic-bezier(.2, .8, .2, 1); transition: transform .28s cubic-bezier(.2, .8, .2, 1); -webkit-user-select: none; user-select: none; }
.deck-card.front.dragging { -webkit-transition: none; transition: none; cursor: -webkit-grabbing; cursor: grabbing; }
.deck-card.front.fly { -webkit-transition: -webkit-transform .3s ease-in, opacity .3s ease-in; transition: transform .3s ease-in, opacity .3s ease-in; opacity: 0; }
.deck-card.front.deal { -webkit-animation: deal .45s cubic-bezier(.2, .9, .3, 1) both; animation: deal .45s cubic-bezier(.2, .9, .3, 1) both; }
.deck-card.front.hint { -webkit-animation: deal .45s cubic-bezier(.2, .9, .3, 1) both, wiggle 1.3s ease-in-out 1.2s 1; animation: deal .45s cubic-bezier(.2, .9, .3, 1) both, wiggle 1.3s ease-in-out 1.2s 1; }
@-webkit-keyframes deal { 0% { opacity: .5; -webkit-transform: translate3d(0, 1.1rem, 0) scale(.95); } 100% { opacity: 1; -webkit-transform: none; } }
@keyframes deal { 0% { opacity: .5; transform: translate3d(0, 1.1rem, 0) scale(.95); } 100% { opacity: 1; transform: none; } }
@-webkit-keyframes wiggle { 0%, 100% { -webkit-transform: none; } 25% { -webkit-transform: translate3d(1.6rem, 0, 0) rotate(2.5deg); } 60% { -webkit-transform: translate3d(-1.4rem, 0, 0) rotate(-2.2deg); } 85% { -webkit-transform: translate3d(.3rem, 0, 0); } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: translate3d(1.6rem, 0, 0) rotate(2.5deg); } 60% { transform: translate3d(-1.4rem, 0, 0) rotate(-2.2deg); } 85% { transform: translate3d(.3rem, 0, 0); } }
.q-num { font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; }
.statement { font-size: 2.3rem; font-weight: 700; line-height: 1.22; max-width: 44rem; }
.swipe-hint { position: absolute; left: 0; right: 0; bottom: 1rem; font-size: .78rem; color: var(--muted); font-weight: 700; }
body.kiosk:not(.phone) .swipe-hint { display: none; }
.stamp { position: absolute; top: 1.3rem; border: .22rem solid; border-radius: .7rem; padding: .25rem .9rem; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: 0; background: rgba(255, 255, 255, .9); }
.stamp-yes { right: 1.4rem; color: #2E9E6A; -webkit-transform: rotate(10deg); transform: rotate(10deg); }
.stamp-no { left: 1.4rem; color: #D9622B; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }
.answers { text-align: center; }
.answers .btn { margin: .4rem .6rem; min-width: 14rem; }
.answers .arr { font-style: normal; display: inline-block; margin: 0 .5rem; font-weight: 800; }
.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 .5s; transition: width .5s; }
body.port:not(.phone) .deck { height: 26rem; }
body.port:not(.phone) .statement { font-size: 2.7rem; }
body.phone .deck { height: 17rem; margin-bottom: 2rem; }
body.phone .deck-card.front { padding: 1.2rem 1.2rem 2rem; }
body.phone .statement { font-size: 1.4rem; }
body.phone .stamp { font-size: .9rem; top: .8rem; }
body.phone .answers { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; }
body.phone .answers .btn { -webkit-flex: 1 1 50%; flex: 1 1 50%; min-width: 0; margin: 0 .3rem; padding-left: .6rem; padding-right: .6rem; font-size: 1rem; }
body.phone .answers .arr { margin: 0 .2rem; }

/* ---------- раскрытие ---------- */
.reveal { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.reveal-art { -webkit-flex: 0 0 34%; flex: 0 0 34%; -webkit-align-self: stretch; align-self: stretch; min-height: 12rem; }
.reveal-art { position: relative; }
.reveal-art img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.reveal-body { -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-left: 1.4rem; max-width: 46rem; }
.reveal-body > .btn { margin-top: 1.1rem; }
.you { display: inline-block; font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; padding: .35rem 1rem; border-radius: 99rem; margin-bottom: .6rem; }
.you.yes { background: #DDF5E8; color: #1E7A4C; }
.you.no { background: #FDE6D8; color: #A8461A; }
.rv-statement { font-weight: 700; margin-bottom: .8rem; }
.peers { padding: 1rem 1.2rem; }
.peers .first { font-size: 1rem; line-height: 1.45; }
.crowd { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -.15rem; }
.man { display: block; width: 10%; padding: .15rem; color: #E7E2F5; -webkit-transform: scale(.7); transform: scale(.7);
  -webkit-transition: color .3s ease, -webkit-transform .35s cubic-bezier(.2, 1.5, .4, 1); transition: color .3s ease, transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.man svg { display: block; width: 100%; height: 2.4rem; fill: currentColor; }
.crowd.go .man { -webkit-transform: none; transform: none; }
.crowd.go .man.a { color: var(--brand); }
.crowd.go .man.d { color: #F2B98E; }
.peers .legend { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: baseline; align-items: baseline; -webkit-flex-wrap: wrap; flex-wrap: wrap; font-size: .9rem; font-weight: 700; margin-top: .6rem; color: var(--ink-2); }
.peers .legend b { color: var(--brand-deep); font-size: 1.6rem; }
.peers .major { color: var(--brand-deep); font-weight: 800; }
.mp-say { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; margin-top: 1rem; background: var(--brand-tint); border-radius: 1.1rem; padding: .8rem 1rem; }
.mp-say img { width: 2.6rem; height: auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: .8rem; }
.mp-view { margin: .3rem 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: 20rem; -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: 8rem; min-height: 0; }
body.phone .reveal-body > .btn { width: 100%; }
body.phone .man svg { height: 1.7rem; }

/* ---------- итог ---------- */
.type-name { color: var(--brand); margin: .3rem 0 .5rem; }
body.phone .type-name { font-size: 2rem; }
.rarity { display: inline-block; background: #fff; border: .12rem solid var(--brand-soft); color: var(--brand-deep); font-weight: 800; border-radius: 99rem; padding: .35rem 1rem; margin: 0 0 .4rem; }
.summary { padding: .9rem 1.2rem; margin: .8rem 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; }
.done-wrap > .tc:last-child { margin-bottom: auto; }
