/* Экран панели. Внутренние координаты всегда 1080×1920; на любом устройстве экран целиком вписывается в окно. */
:root {
  --bej: #f3eee5; --bej-l: #faf9f5; --ink: #3c352c; --blue: #597597; --blue-d: #4a6a91; --line: #dfd8c8; --line-d: #cac4b6;
  --mute: #59534c; --red: #c64454; --gold: #eab64d; --white: #fffdf8; --green: #5f8a4e;
  --display: 'Prata', 'Lora', Georgia, 'Times New Roman', serif;
  --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html, body { height: 100%; margin: 0; }
body { background: var(--bej); color: var(--ink); font-family: var(--body); overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }
.screenBox { height: 100%; display: flex; align-items: center; justify-content: center; }
.scaler { position: relative; flex: none; overflow: hidden; background: var(--bej); box-shadow: 0 0 0 1px var(--line); }
button:focus-visible { outline: 5px solid var(--blue-d); outline-offset: 3px; }

/* ---------- экран панели: внутренние координаты 1080×1920 ---------- */
.stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; background: var(--bej); color: var(--ink); font-family: var(--body); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.stage * { box-sizing: border-box; }
.stage button { font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brandbar { position: absolute; left: 48px; right: 48px; top: 44px; display: flex; justify-content: space-between; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--mute); z-index: 1; }
.brandbar b { color: var(--blue); font-weight: 600; }
.stage:not(.is-home) .brandbar { display: none; }
#top { position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 6; }
.back { position: absolute; left: 40px; top: 34px; height: 92px; padding: 0 34px; border-radius: 999px; border: 3px solid var(--ink); background: var(--bej-l); font-size: 34px; font-weight: 600; }
.back:active { transform: translateY(3px); }
.htitle { position: absolute; left: 300px; right: 40px; top: 34px; height: 92px; display: flex; align-items: center; justify-content: flex-end; font-family: var(--display); font-size: 50px; text-align: right; }
#ui { position: absolute; inset: 0; z-index: 3; }
#fxl { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

.actor { position: absolute; z-index: 4; pointer-events: none; transition: left .55s cubic-bezier(.3, 1.2, .4, 1), top .55s cubic-bezier(.3, 1.2, .4, 1), width .55s cubic-bezier(.3, 1.2, .4, 1); }
.actor svg { display: block; width: 100%; height: auto; overflow: visible; }
.actor .seal { position: absolute; left: 0; top: 0; }
.actor.no-seal .seal { display: none; }
.actor.ghost svg { opacity: 0; }
.actor .actor-svg { position: relative; }
.bubble { position: absolute; background: #fff; border: 5px solid var(--ink); border-radius: 40px; padding: 30px 38px; font-weight: 600; font-size: 42px; line-height: 1.24; letter-spacing: -.01em; box-shadow: 10px 10px 0 var(--blue); opacity: 0; transform: scale(.86); transform-origin: 0 60%; transition: opacity .18s, transform .28s cubic-bezier(.3, 1.6, .5, 1); z-index: 4; }
.bubble.show { opacity: 1; transform: none; }
.bubble::after { content: ""; position: absolute; width: 34px; height: 34px; background: #fff; border-left: 5px solid var(--ink); border-bottom: 5px solid var(--ink); }
.bubble[data-tail="l"]::after { left: -22px; top: 56px; transform: rotate(45deg); }
.bubble[data-tail="r"]::after { right: -22px; top: 56px; transform: rotate(225deg); }
.bubble[data-tail="b"]::after { left: 90px; bottom: -22px; transform: rotate(-45deg); }
.bubble[data-tail="t"]::after { left: 90px; top: -22px; transform: rotate(135deg); }
.bubble[data-tail="l"] { transform-origin: 0 60px; } .bubble[data-tail="r"] { transform-origin: 100% 60px; }

/* ---------- общие элементы интерфейса панели ---------- */
.pane { position: absolute; left: 40px; right: 40px; display: flex; flex-direction: column; gap: 24px; }
.eyebrow { font-size: 26px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--blue); }
.h1 { font-family: var(--display); font-size: 68px; line-height: 1.12; text-wrap: balance; }
.h2 { font-family: var(--display); font-size: 52px; line-height: 1.15; text-wrap: balance; }
.txt { font-size: 38px; line-height: 1.36; font-weight: 300; }
.small { font-size: 30px; line-height: 1.35; font-weight: 400; color: var(--mute); }
.btn { width: 100%; min-height: 128px; padding: 0 44px; border-radius: 999px; border: 4px solid var(--ink); background: var(--ink); color: var(--bej-l) !important; font-size: 44px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 18px; transition: transform .08s; }
.btn:active { transform: translateY(4px) scale(.99); }
.btn.ghost { background: var(--bej-l); color: var(--ink) !important; }
.btn.blue { background: var(--blue-d); border-color: var(--ink); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.row { display: flex; gap: 22px; } .row > * { flex: 1 1 0; min-width: 0; }
.card { background: var(--bej-l); border: 3px solid var(--line-d); border-radius: 40px; padding: 40px; }
.card.strong { border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--blue); background: #fff; }
.opt { min-height: 150px; border-radius: 36px; border: 4px solid var(--ink); background: #fff; font-size: 40px; font-weight: 500; line-height: 1.22; text-align: left; padding: 22px 36px; display: flex; align-items: center; gap: 26px; box-shadow: 8px 8px 0 var(--line-d); transition: transform .08s, box-shadow .08s; }
.opt:active, .opt.picked { transform: translate(5px, 5px); box-shadow: 3px 3px 0 var(--blue); }
.opt .art { flex: none; }
.pop { animation: pop .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.88) translateY(24px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.qr { display: flex; align-items: center; gap: 26px; }
.qr svg { flex: none; background: #fff; border: 4px solid var(--ink); border-radius: 18px; padding: 10px; }
.qr b { display: block; font-size: 32px; font-weight: 600; } .qr span { display: block; font-size: 28px; line-height: 1.3; color: var(--mute); margin-top: 6px; }
.code { font-family: var(--display); font-size: 64px; letter-spacing: .06em; padding: 12px 34px; border: 4px dashed var(--ink); border-radius: 22px; background: var(--bej); display: inline-block; }
.demo { font-size: 26px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--blue); }
.dots { display: flex; gap: 14px; } .dots i { width: 64px; height: 12px; border-radius: 6px; background: var(--line-d); } .dots i.on { background: var(--ink); }

/* меню */
.tiles { position: absolute; left: 40px; right: 40px; top: 800px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile { height: 200px; border-radius: 36px; border: 3px solid var(--line-d); background: var(--bej-l); display: flex; align-items: center; gap: 20px; padding: 0 26px 0 20px; text-align: left; transition: transform .08s, border-color .1s; }
.tile:active { transform: scale(.97); border-color: var(--ink); }
.tile b { display: block; font-family: var(--display); font-weight: 400; font-size: 37px; line-height: 1.12; }
.tile span { display: block; font-size: 28px; line-height: 1.25; font-weight: 400; color: var(--mute); margin-top: 8px; }
.tile .art { flex: none; }
.menu-eyebrow { position: absolute; left: 48px; top: 744px; }

/* модальная карточка результата */
.veil { position: absolute; inset: 0; padding-top: 580px; background: rgba(60, 53, 44, .45); display: flex; align-items: center; justify-content: center; z-index: 7; animation: fade .2s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 920px; display: flex; flex-direction: column; gap: 28px; align-items: stretch; text-align: center; }
.modal .art { margin: 0 auto; }
.modal .qr { text-align: left; }

/* колесо */
.wheelbox { position: absolute; left: 110px; top: 690px; width: 860px; height: 860px; }
.wheelbox svg.wh { width: 860px; height: 860px; overflow: visible; }
.pointer { position: absolute; left: 380px; top: -34px; width: 100px; height: 110px; z-index: 2; }

/* тарелка */
.board { position: absolute; left: 60px; top: 610px; width: 960px; height: 500px; }
.slot { position: absolute; width: 230px; height: 230px; margin: -115px 0 0 -115px; display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; }
.tray { position: absolute; left: 40px; right: 40px; top: 1150px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tray button { height: 230px; border-radius: 30px; border: 3px solid var(--line-d); background: var(--bej-l); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 27px; font-weight: 500; padding: 0; }
.tray button.used { opacity: .32; }
.tray button:active { transform: scale(.95); }

/* фото */
.camframe { position: absolute; left: 100px; top: 170px; width: 880px; height: 1200px; border-radius: 40px; border: 6px solid var(--ink); background: #d9d2c4; overflow: hidden; box-shadow: 14px 14px 0 var(--blue); }
.camframe video, .camframe img.shot, .camframe canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camframe video { transform: scaleX(-1); }
.camframe.has-shot .tag { display: none; }
.camframe .tag { position: absolute; left: 32px; top: 30px; font-family: var(--display); font-size: 40px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); z-index: 2; }
.camframe .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 150px 70px 0; text-align: center; gap: 22px; }
.count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 420px; color: #fff; text-shadow: 0 8px 40px rgba(0, 0, 0, .55); z-index: 3; }
.flash { position: absolute; inset: 0; background: #fff; animation: flash .5s both; z-index: 9; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }

/* игра */
.field { position: absolute; left: 0; right: 0; top: 600px; bottom: 0; overflow: hidden; touch-action: none; }
.fall { position: absolute; left: 0; top: 0; will-change: transform; }
.basket { position: absolute; left: 0; top: 0; will-change: transform; }
.hud { position: absolute; right: 40px; top: 170px; width: 520px; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.score { font-family: var(--display); font-size: 120px; line-height: 1; }
.bar { width: 100%; height: 22px; border-radius: 11px; background: var(--line-d); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--blue-d); border-radius: 11px; }
.plus { position: absolute; font-family: var(--display); font-size: 70px; animation: plus .7s both; pointer-events: none; }
@keyframes plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-120px); } }

/* выдержка, дуэль */
.pair { display: flex; gap: 24px; } .pair > button { flex: 1 1 0; min-width: 0; border-radius: 40px; border: 5px solid var(--ink); background: #fff; padding: 30px 20px 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 10px 10px 0 var(--line-d); transition: transform .08s; }
.pair > button:active { transform: translate(4px, 4px); }
.pair > button.ok { border-color: var(--green); box-shadow: 10px 10px 0 var(--green); }
.pair > button.no { border-color: var(--red); box-shadow: 10px 10px 0 var(--red); }
.pair > button.mine { box-shadow: 10px 10px 0 var(--blue); }
.pair b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1.1; } .pair span { font-size: 28px; line-height: 1.3; color: var(--mute); min-height: 72px; }
.vbar { height: 34px; width: 100%; border-radius: 17px; background: var(--line); overflow: hidden; } .vbar i { display: block; height: 100%; width: 0; background: var(--blue-d); border-radius: 17px; transition: width 1s cubic-bezier(.2, .9, .3, 1); }
.pct { font-family: var(--display); font-size: 64px; }

/* предсказание, общий сыр */
.bigcheese { position: absolute; left: 190px; top: 760px; width: 700px; height: 700px; border: 0; background: none; padding: 0; }
.bigcheese svg { width: 100%; height: 100%; overflow: visible; }
.bigcheese.sm { left: 230px; top: 670px; width: 620px; height: 620px; }
.wob { animation: wob .45s both; }
@keyframes wob { 0% { transform: rotate(0); } 25% { transform: rotate(-5deg) scale(1.03); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } 100% { transform: none; } }
.half { transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); transform-box: fill-box; }
.note { position: absolute; left: 110px; right: 110px; top: 840px; background: #fff; border: 5px solid var(--ink); border-radius: 26px; padding: 54px 50px; text-align: center; font-family: var(--display); font-size: 52px; line-height: 1.28; box-shadow: 12px 12px 0 var(--blue); transform: rotate(-2deg); }
.dropfx { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; animation: dropfx .55s cubic-bezier(.5, 0, .9, .5) both; pointer-events: none; }
@keyframes dropfx { from { opacity: 1; transform: translateY(-260px) scale(1); } to { opacity: .2; transform: translateY(0) scale(.4); } }
.crumb { position: absolute; width: 26px; height: 26px; border-radius: 6px; border: 4px solid var(--ink); animation: crumb 1.6s cubic-bezier(.2, .7, .4, 1) both; }
@keyframes crumb { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop, .rise, .wob, .veil { animation: none; } .actor { transition: none; } }

/* подсказка «только на панели» и состояние «нет связи» */
.note-card { background: var(--bej-l); border: 3px dashed var(--line-d); border-radius: 32px; padding: 30px 36px; font-size: 34px; line-height: 1.36; }
.pair > button[disabled] { opacity: 1; cursor: default; box-shadow: 10px 10px 0 var(--line-d); }
.is-panel .stage { cursor: default; }