/* Без змінних CSS і grid — щоб працювало й на старих движках */
*{box-sizing:border-box;margin:0;padding:0;cursor:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{height:100%;overflow:hidden;background:#000}
body{font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-font-smoothing:antialiased}

#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;
       transform-origin:0 0;background:#121418;color:#f2efe6}
body.light #stage{background:#f3f1ec;color:#1a1c20}

#head{position:absolute;left:54px;top:34px}
#brand{font-size:52px;line-height:1;font-weight:300;letter-spacing:.5px}
#bSuf{color:#afea3a}
body.light #bSuf{color:#68a410}
#tagline{margin-top:16px;font-size:23px;color:#7e848c}
body.light #tagline{color:#70747a}

/* ── сітка напоїв ── */
#grid{position:absolute;left:52px;top:164px;width:1226px;height:792px;
      display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.card{position:relative;width:290px;height:246px;margin:0 16px 18px 0;border-radius:14px;
      background:#1b1e23;overflow:hidden}
body.light .card{background:#fff}
.badge{position:absolute;right:12px;top:12px;width:62px;height:62px;border-radius:31px;
       background:#afea3a;color:#15181c;font-size:30px;font-weight:700;
       line-height:62px;text-align:center}
body.light .badge{background:#68a410;color:#fff}
.name{position:absolute;left:18px;bottom:44px;font-size:22px;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;width:250px}
.vol{position:absolute;left:18px;bottom:18px;font-size:18px;color:#7e848c}
body.light .vol{color:#70747a}

/* чашка малюється двома блоками, без картинок */
.cup{position:absolute;left:50%;top:26px;margin-left:-52px;width:104px;height:118px}
.body{position:absolute;left:0;top:8px;width:104px;height:110px;background:#f7f5f1;
      border-radius:4px 4px 26px 26px}
.liq{position:absolute;left:8px;top:20px;width:88px;height:88px;border-radius:2px 2px 22px 22px}
.foam{position:absolute;left:8px;top:16px;width:88px;height:16px;border-radius:8px;background:#eee2ce}
.rim{position:absolute;left:-2px;top:2px;width:108px;height:14px;border-radius:54px/7px;
     border:3px solid #d6d4cf}

/* ── права колонка ── */
#side{position:absolute;left:1330px;top:40px;width:544px;height:1000px;
      border-radius:18px;background:#1b1e23}
body.light #side{background:#fff}
#howto{margin:32px 26px 0;height:60px;line-height:60px;text-align:center;border-radius:10px;
       background:#afea3a;color:#15181c;font-size:31px;font-weight:700}
body.light #howto{background:#68a410;color:#fff}
.step{position:relative;margin:36px 0 0 34px;height:56px}
.step i{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:28px;
        border:3px solid #afea3a;color:#afea3a;font-style:normal;font-size:29px;
        font-weight:700;line-height:52px;text-align:center}
body.light .step i{border-color:#68a410;color:#68a410}
.step b{position:absolute;left:74px;top:12px;font-size:27px;font-weight:400}
.slabel{margin:52px 0 12px 34px;font-size:20px;color:#7e848c}
body.light .slabel{color:#70747a}
#pays{margin-left:34px;width:380px}
.pay{float:left;width:160px;height:44px;margin:0 20px 14px 0;border-radius:8px;
     border:2px solid #40444a;color:#7e848c;font-size:20px;line-height:40px;text-align:center}
body.light .pay{border-color:#cecbc6;color:#70747a}
#cash{clear:both;margin:14px 0 0 34px;font-size:19px;color:#7e848c}
body.light #cash{color:#70747a}
#qrbox{position:absolute;left:34px;bottom:44px}
#qr{background:#fff;border-radius:6px}
#qrtext{position:absolute;left:196px;top:36px;font-size:25px;line-height:34px;white-space:nowrap}
#qrtext .lime{color:#afea3a}
body.light #qrtext .lime{color:#68a410}
#qrtext .mut{font-size:19px;color:#7e848c}
body.light #qrtext .mut{color:#70747a}

/* індикатор втрати звʼязку */
#stale{position:absolute;right:22px;bottom:12px;font-size:15px;color:#b0682c;display:none}
body.stale #stale{display:block}