/* Стена стенда: тёмная, крупная, читается с 3-5 метров */
body.wall { background: #1E0F66; }
.screen.dark { background: #2B168A; background-image: radial-gradient(ellipse at 30% 30%, #5B3BD6 0%, #3A1FB0 40%, #1A0B52 100%); color: #fff; }
.wall .screen-inner { padding: 1.1rem 1.6rem; height: 100%; min-height: 0; }
.logo-pill { display: inline-block; background: #fff; border-radius: 99rem; padding: .45rem 1.1rem; }
.logo-pill img { height: 1.6rem; width: auto; display: block; }

.w-head { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 1rem; }
.w-logos { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.w-x { font-size: 1.6rem; font-weight: 800; margin: 0 .7rem; opacity: .7; }
.w-title { text-align: center; -webkit-flex: 1 1 auto; flex: 1 1 auto; padding: 0 1rem; }
.w-kicker { font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; }
.w-prize { font-size: .95rem; font-weight: 700; color: #FFE58A; margin-top: .2rem; }
.w-totals { display: -webkit-box; display: -webkit-flex; display: flex; }
.w-totals div { text-align: right; margin-left: 1.4rem; }
.w-totals b { display: block; font-size: 2.2rem; line-height: 1; }
.w-totals span { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

.w-cols { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; -webkit-flex: 1 1 0; flex: 1 1 0; min-height: 0; }
.card-d { background: rgba(255, 255, 255, .09); border: .1rem solid rgba(255, 255, 255, .18); border-radius: 1.4rem; padding: 1.1rem 1.3rem; }
.w-col { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; margin: 0 .5rem; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.w-col:first-child { margin-left: 0; }
.w-col:last-child { margin-right: 0; }
.w-game { font-size: 1.5rem; font-weight: 800; }
.w-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .7); margin: .2rem 0 .6rem; }
.w-record b { font-size: 4.6rem; font-weight: 800; line-height: .95; color: #FFD23F; letter-spacing: -.03em; }
.w-record small { font-size: 1.3rem; font-weight: 800; margin-left: .5rem; text-transform: uppercase; opacity: .85; }
.w-holder { font-size: 1.4rem; font-weight: 800; margin: .2rem 0 .4rem; }
.w-lb { list-style: none; margin: 0; padding: 0; counter-reset: wlb 1; }
.w-lb li { counter-increment: wlb; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; padding: .22rem 0; border-top: .06rem solid rgba(255, 255, 255, .14); font-weight: 700; }
.w-lb li:before { content: counter(wlb); width: 1.6rem; opacity: .6; font-weight: 800; }
.w-lb li span { -webkit-flex: 1 1 auto; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-bottom { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; margin-top: .9rem; }
.w-qrs { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; margin-left: .9rem; background: rgba(255, 255, 255, .09); border: .1rem solid rgba(255, 255, 255, .18); border-radius: 1.4rem; padding: .7rem .6rem; }
.w-qr { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; margin: 0 .5rem; text-align: center; }
.w-qr > div { width: 5.6rem; height: 5.6rem; background: #fff; border-radius: .6rem; padding: .3rem; }
.w-qr svg { display: block; width: 100%; height: 100%; }
.w-qr span { margin-top: .4rem; font-size: .78rem; font-weight: 800; line-height: 1.25; }
.w-opinion { opacity: 0; -webkit-transform: translate3d(0, .6rem, 0); transform: translate3d(0, .6rem, 0); -webkit-transition: opacity .4s, -webkit-transform .4s; transition: opacity .4s, transform .4s; }
.w-opinion.in { opacity: 1; -webkit-transform: none; transform: none; }
.w-pct { font-size: 3.4rem; font-weight: 800; line-height: 1; color: #B9A3FF; }
.w-pct small { font-size: 1.1rem; margin-left: .4rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.w-statement { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: .5rem 0 .7rem; }
.w-bar { height: .7rem; border-radius: 1rem; background: rgba(255, 255, 255, .15); overflow: hidden; }
.w-bar i { display: block; height: 100%; background: #B9A3FF; width: 0; -webkit-transition: width 1s ease-out; transition: width 1s ease-out; }
.w-types { margin-top: 1rem; }
.w-type { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: .35rem 0; font-weight: 800; font-size: .95rem; }
.w-type span { width: 8.5rem; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.w-type i { display: block; height: .8rem; border-radius: 1rem; background: #8965FD; margin-right: .6rem; min-width: .3rem; }
.w-type.visioner i { background: #B9A3FF; }
.w-type.keeper i { background: #5EE0B0; }

.w-stats > div { padding: .45rem 0; border-top: .06rem solid rgba(255, 255, 255, .14); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.w-stats > div:first-child { border-top: 0; }
.w-stats b { font-size: 2.5rem; font-weight: 800; line-height: 1; width: 6.5rem; -webkit-flex: 0 0 auto; flex: 0 0 auto; color: #8FF0C9; }
.w-stats span { font-weight: 700; opacity: .85; }
.w-ecg { display: block; width: 100%; height: 3.2rem; margin-top: .5rem; }

.w-clinics { -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; background: rgba(255, 255, 255, .09); border: .1rem solid rgba(255, 255, 255, .18); border-radius: 1.4rem; padding: .8rem 1.3rem; }
.w-cl-list { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -.6rem; }
.w-cl { -webkit-flex: 1 1 18rem; flex: 1 1 18rem; margin: .2rem .6rem; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-weight: 800; }
.w-cl .nm { width: 11rem; -webkit-flex: 0 0 auto; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-cl i { display: block; height: .8rem; border-radius: 1rem; background: #FFD23F; margin: 0 .6rem; min-width: .3rem; }
.w-cl b { font-size: 1.2rem; }

/* вертикальный экран */
/* вертикальный экран: мнения на всю ширину сверху, рекорды и консилиумы рядом */
body.port .w-cols { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; align-content: flex-start; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
body.port .w-col { overflow: visible; }
body.port .w-col { -webkit-flex: 1 1 40%; flex: 1 1 40%; margin: 0 .45rem .9rem; }
body.port .w-col.g1col { -webkit-order: -1; order: -1; -webkit-flex: 1 1 100%; flex: 1 1 100%; }
body.port .w-head { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
body.port .w-title { -webkit-order: 3; order: 3; width: 100%; margin-top: .6rem; }
body.port .w-bottom { -webkit-flex-direction: column; flex-direction: column; }
body.port .w-qrs { margin: .9rem 0 0; -webkit-justify-content: space-around; justify-content: space-around; }
body.port .w-head { margin-bottom: .6rem; }
body.port .w-col { margin-bottom: .6rem; padding: .9rem 1.1rem; }
body.port .w-pct { font-size: 2.8rem; }
body.port .w-statement { font-size: 1.1rem; margin: .3rem 0 .5rem; }
body.port .w-types { margin-top: .6rem; }
body.port .w-record b { font-size: 3.8rem; }
body.port .w-stats b { font-size: 2.1rem; width: 5rem; }
body.port .w-stats > div { padding: .3rem 0; }
body.port .w-bottom { margin-top: .3rem; }
body.port .w-clinics { padding: .6rem 1.1rem; }
body.port .w-qrs { margin-top: .6rem; padding: .5rem; }
body.port .w-qr > div { width: 4.8rem; height: 4.8rem; }

/* «Домой» и плитки-ссылки - только когда стену открыли из игры (не ?kiosk=1) */
.w-home { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin-right: 1.2rem; padding: .5rem 1.1rem .5rem .85rem; border-radius: 99rem; background: rgba(255, 255, 255, .14); border: .1rem solid rgba(255, 255, 255, .32); color: #fff; font-weight: 800; font-size: 1rem; text-decoration: none; }
.w-home:hover, .w-home:active { background: rgba(255, 255, 255, .24); }
.w-home svg { width: 1.25rem; height: 1.25rem; margin-right: .45rem; }
a.w-qr { color: inherit; text-decoration: none; }
a.w-qr[href] { cursor: pointer; }
body.w-nav .w-totals span { white-space: nowrap; }
/* у посетителя экран любой формы (iPad 4:3, ноутбук): лучше прокрутка, чем обрезанные карточки; ТВ стенда как было */
body.wall.w-nav .screen-inner { height: auto; min-height: 100%; }
body.wall.w-nav .w-cols { -webkit-flex: 1 0 auto; flex: 1 0 auto; }
body.wall.w-nav .w-col { overflow: visible; }
body.w-nav .w-logos { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
body.w-nav .logo-pill { padding: .4rem .9rem; }
body.w-nav .logo-pill img { height: 1.35rem; }
/* стоя (планшет, вертикальный экран) с кнопкой: логотипы и «Домой» в ряд, цифры и заголовок ниже */
body.wall.port.w-nav .w-logos { -webkit-order: 1; order: 1; }
body.wall.port.w-nav .w-home { -webkit-order: 2; order: 2; margin: 0 0 0 auto; }
body.wall.port.w-nav .w-totals { -webkit-order: 3; order: 3; width: 100%; margin-top: .8rem; -webkit-justify-content: center; justify-content: center; }
body.wall.port.w-nav .w-totals div { text-align: center; margin: 0 1.2rem; }
body.wall.port.w-nav .w-title { -webkit-order: 4; order: 4; }

/* телефон: одна колонка с прокруткой; порядок - мнения, рекорды, консилиумы, клиники, игры */
body.wall.phone .screen-inner { height: auto; min-height: 100%; padding: .9rem .9rem 1.3rem; }
body.wall.phone .w-head { -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: .8rem; }
body.wall.phone .w-logos { -webkit-order: 1; order: 1; }
body.wall.phone .logo-pill { padding: .35rem .8rem; }
body.wall.phone .logo-pill img { height: 1.25rem; }
body.wall.phone .w-x { font-size: 1.2rem; margin: 0 .4rem; }
body.wall.phone .w-home { -webkit-order: 2; order: 2; margin: 0 0 0 auto; padding: .42rem .9rem .42rem .7rem; font-size: .95rem; }
body.wall.phone .w-totals { -webkit-order: 3; order: 3; width: 100%; margin-top: .8rem; -webkit-justify-content: center; justify-content: center; }
body.wall.phone .w-totals div { text-align: center; margin: 0 1.2rem; }
body.wall.phone .w-title { -webkit-order: 4; order: 4; width: 100%; margin-top: .5rem; padding: 0; }
body.wall.phone .w-kicker { font-size: 1.3rem; }
body.wall.phone .w-cols { -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
body.wall.phone .w-col, body.wall.phone .w-col.g1col { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 .7rem; padding: .9rem 1.1rem; overflow: visible; }
body.wall.phone .w-col.g1col { -webkit-order: -1; order: -1; }
body.wall.phone .w-bottom { -webkit-flex-direction: column; flex-direction: column; margin-top: 0; }
body.wall.phone .w-clinics { padding: .7rem 1.1rem; }
body.wall.phone .w-qrs { margin: .7rem 0 0; padding: .6rem .3rem; -webkit-justify-content: space-around; justify-content: space-around; }
body.wall.phone .w-qr { -webkit-flex: 1 1 0; flex: 1 1 0; margin: 0 .2rem; }
body.wall.phone .w-qr > div { width: 4.4rem; height: 4.4rem; }