/* Экран атриума: горизонтальный 16:9, медиафасад или экран у ёлки.
   Слева ёлка на всю высоту, справа счётчик, последние игрушки и QR. */
body.ekran { overflow: hidden; height: 100vh; }
.ebg { position: fixed; inset: 0; z-index: 0; background: var(--bg) url(../img/ekran-bg.webp) center / cover no-repeat; }
.ebg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 19, 26, .15), rgba(8, 19, 26, .35) 55%, rgba(8, 19, 26, .82)); }
.scr { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 34vw; height: 100vh; gap: 2vw; padding: 2.6vh 3vw; }
.scr__tree { position: relative; height: 100%; }
.scr__tree canvas { display: block; width: 100%; height: 100%; }
.scr__side { display: flex; flex-direction: column; gap: 2.2vh; padding: 1vh 0; min-width: 0; }
.scr__brand { display: flex; align-items: center; gap: 1.2vw; }
.scr__brand .brand__mark { width: 5.2vh; height: 5.2vh; font-size: 2.2vh; border-radius: 1.4vh; }
.scr__name { font: 800 3vh/1.1 var(--display); letter-spacing: -.01em; }
.scr__sub { font-size: 1.7vh; color: var(--ink-3); margin-top: .4vh; }
.scr__count b { display: block; font: 800 11vh/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.scr__count span { display: block; font-size: 2.2vh; color: var(--ink-2); margin-top: .6vh; }
.scr__today { display: inline-flex; align-items: center; gap: 1vw; padding: 1.4vh 1.6vw; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 2.1vh; color: var(--ink-2); align-self: flex-start; }
.scr__today b { color: var(--green); font-size: 2.6vh; }
.scr__today i { width: 1.3vh; height: 1.3vh; border-radius: 50%; background: var(--green); animation: live 1.8s ease-out infinite; }
.scr__label { font-size: 1.6vh; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 1vh; }
.recent { display: flex; gap: 1vw; min-height: 9vh; }
.recent canvas { width: 9vh; height: 9vh; border-radius: 50%; background: rgba(255, 255, 255, .04); animation: rise .5s var(--ease); filter: drop-shadow(0 .6vh 1vh rgba(0, 0, 0, .5)); }
.scr__qr { margin-top: auto; display: flex; gap: 1.4vw; align-items: center; padding: 2vh 1.6vw; border-radius: 2.4vh; background: var(--ink); color: #1c1306; }
.scr__qr img { width: 17vh; height: 17vh; flex: 0 0 auto; }
.scr__qr b { display: block; font: 800 2.6vh/1.15 var(--display); margin-bottom: .8vh; }
.scr__qr span { display: block; font-size: 1.9vh; line-height: 1.35; color: rgba(28, 19, 6, .78); }
.scr__qr em { font-style: normal; font-weight: 700; color: #1c1306; }
.scr__foot { font-size: 1.8vh; color: var(--ink-3); }
@media (max-aspect-ratio: 4/3) { .scr { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .scr__count b { font-size: 7vh; } .scr__qr img { width: 12vh; height: 12vh; } }