/* Engine stage: "Figma multiplayer" stavba ukážky. Všetko v px stage-u (nezväčšené), obsah Preview sa škáluje cez .eg-dev. */
.eg{--eg-ink:#f5f5f5;--eg-mute:#9a9a9a;--eg-card:#141414;--eg-card2:#1b1b1b;position:relative;display:block;width:100%;color:var(--eg-ink);font-family:var(--f-sans,"Geist",system-ui,-apple-system,sans-serif);font-size:12px;line-height:1.25;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.eg,.eg *,.eg *::before,.eg *::after{box-sizing:border-box}
.eg .mono{font-family:var(--f-mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace)}
.eg-st{position:relative;width:100%;overflow:hidden;contain:layout paint}
.eg-ph{position:absolute;touch-action:pan-y;cursor:pointer}
.eg-dev{position:absolute;left:0;top:0;width:413px;height:780px;transform-origin:0 0}
.eg-bz{width:413px;height:780px;padding:10px;background:#18181a;border-radius:56px;box-shadow:inset 0 0 0 2px #4a4a4e}
.eg-scr{position:relative;width:393px;height:760px;border-radius:46px;overflow:hidden;background-color:#0e0e10;background-image:radial-gradient(circle at 1px 1px,#26262a 1px,transparent 1.6px);background-size:16px 16px}
.eg-isl{position:absolute;left:50%;top:16px;width:64px;height:20px;margin-left:-32px;border-radius:14px;background:#000;z-index:4;pointer-events:none}
.eg-bgp{position:absolute;inset:0;clip-path:circle(0px at 90% 12%)}
.eg-blks{position:absolute;inset:0}
.eg-b{position:absolute;overflow:hidden;contain:layout style;pointer-events:none;font-family:var(--pf,Geist,system-ui,sans-serif);color:var(--ptx,#111);--bg:var(--pbg,#fff);--text:var(--ptx,#111);--primary:var(--ppr,#333);--accent:var(--pac,#777);--radius:var(--prd,12px)}
.eg-bp{position:absolute;inset:0}
.eg-bl{position:absolute;inset:0;overflow:hidden}
.eg-g{filter:grayscale(1) contrast(.94)}
.eg-c{clip-path:circle(0px at 50% 50%)}
.eg-bl img{max-width:none}
.eg-gh{visibility:hidden}
.eg-bs{position:absolute;inset:0}
.eg-sk{position:absolute;display:block;border-radius:4px;background:rgba(120,120,128,.36);opacity:0}
.eg-ski{display:grid;place-items:center;border-radius:8px;color:rgba(255,255,255,.55);background:rgba(120,120,128,.3)}

/* hore: prítomnosť a stav spustenia */
.eg-top{position:absolute;top:0;display:flex;align-items:center;gap:10px;padding:0 3px}
.egp-av{display:inline-flex;align-items:center}
.egp-av i{display:block;width:16px;height:16px;margin-left:-5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0a0a0a;opacity:0}
.egp-av i:first-child{margin-left:0}
.egp-av i.on{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent)}
.egp-st{position:relative;display:inline-block;min-width:80px}
.egp-pp{position:absolute;left:0;top:0;font-size:12px;font-weight:600;color:var(--eg-ink);letter-spacing:.01em;white-space:nowrap;opacity:0}
.egp-on{font-size:12px;font-weight:500;color:var(--eg-mute);letter-spacing:.01em;white-space:nowrap}
.egk{position:relative;margin-left:auto;flex:none;width:150px;height:28px;border-radius:999px;background:var(--eg-card2);font-size:12px;font-weight:600;color:var(--eg-ink)}
.egk>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;opacity:0}
.egk[data-s=a] .egk-a,.egk[data-s=b] .egk-b,.egk[data-s=c] .egk-c{opacity:1}
.egk[data-s=c]{background:#12261c;color:#b8f5d6}
.egk i{width:8px;height:8px;border-radius:50%;background:#3ddc97}
.egk-b i{background:transparent;border:2px solid #9a9a9a;border-top-color:#f5f5f5;animation:egspin .8s linear infinite}
@keyframes egspin{to{transform:rotate(360deg)}}
.rm .egk-b i{animation:none}

/* panely */
.egp{position:absolute;background:var(--eg-card);border-radius:14px;overflow:hidden;color:var(--eg-ink)}
.egp-h{position:absolute;left:10px;right:10px;top:0;display:flex;align-items:center;justify-content:space-between;height:var(--hh,24px);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--eg-mute);text-transform:uppercase}
.egp-c{font-family:var(--f-mono,"Geist Mono",monospace);font-weight:500}
.egp-vp{position:absolute;left:0;right:0;top:var(--hh,24px);bottom:2px;overflow:hidden}
.egl{position:relative;margin:0;padding:0;list-style:none;will-change:transform}
.egr{position:absolute;left:6px;right:6px;top:0;height:var(--rh,15px);visibility:hidden}
.egr-in{display:flex;align-items:center;gap:7px;height:100%;padding:0 6px;border-radius:6px}
.egr.on .egr-in{background:rgba(180,140,255,.22)}
.egr-i{flex:none;width:8px;height:8px;border-radius:2px;background:#6a6a6a}
.egr.on .egr-i{background:#b48cff}
.egr-t{min-width:0;margin-right:12px;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:15px;color:var(--eg-ink);white-space:nowrap}
.egr{overflow:hidden}
.egr-in{position:relative}
.egr-p{position:absolute;right:4px;top:50%;margin-top:-4px;display:flex;gap:3px}
.egr-p b{display:block;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--eg-card);opacity:0}
.egt{position:absolute;left:10px;top:24px;display:flex;flex-wrap:wrap;gap:var(--tg,5px)}
.egt-i{display:block;width:var(--th,30px);height:var(--th,30px);border-radius:7px;background:#242424 center/cover no-repeat}
.egt-e{background:#202020}
.egcr{position:absolute;left:10px;top:25px;display:flex;align-items:center;gap:8px}
.egs{display:flex;gap:var(--sg,5px)}
.egs i{display:block;width:var(--sw,18px);height:var(--sw,18px);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.egs i.on{box-shadow:0 0 0 2px #fff}
.egx{display:inline-block;min-width:58px;height:18px;padding:0 6px;border-radius:5px;background:#0a0a0a;font-size:12px;line-height:18px;color:var(--eg-ink);white-space:nowrap}
.egx.on{box-shadow:0 0 0 2px #ff7a59}
.egx.on::after{content:"";display:inline-block;width:1px;height:12px;margin-left:1px;vertical-align:-2px;background:#ff7a59}
.egp-props,.egp-code{display:none}
.eg-wide .egp-props,.eg-wide .egp-code{display:block}
.egpp,.egck{position:absolute;left:14px;right:14px;top:38px;display:grid;gap:10px;align-content:start}
.egpp-n{margin:0;font-size:14px;font-weight:600}
.egpp-g{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;color:var(--eg-mute);font-size:12px}
.egpp-g b{color:var(--eg-ink);font-weight:500}
.egpp-f{margin:0;display:flex;align-items:center;gap:8px;font-size:12px}
.egpp-f i{display:block;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.egpp-e{margin:0;color:var(--eg-mute)}
.egck{grid-auto-flow:row;gap:6px}
.egck-c{display:inline-block;width:max-content;padding:2px 9px;border-radius:5px;background:#0a0a0a;color:#b48cff;font-size:12px;line-height:18px;opacity:0}
.eg-wide .egp{font-size:13px}
.eg-wide .egp-h{left:14px;right:14px;letter-spacing:.05em}
.eg-wide .egt{left:14px;top:34px}
.eg-wide .egcr{left:14px;top:36px;flex-wrap:wrap;width:calc(100% - 28px);row-gap:8px}
.eg-wide .egr-t{font-size:13px;line-height:26px}
.eg-wide .egr-i{width:10px;height:10px}
.eg-wide .egx{height:24px;line-height:24px;min-width:108px;font-size:13px}
.eg-wide .egpp-g{font-size:13px}
/* pás panelov pod telefónom (phone layout): Layers, Fotky, Farby vedľa seba, ~90 px */
.eg-band .egp{border-radius:12px}
.eg-band .egp-h{left:10px;right:10px}
.eg-band .egr-t{line-height:13px}
.eg-band .egt{left:10px;top:22px}
.eg-band .egcr{left:10px;top:22px;flex-wrap:wrap;width:calc(100% - 20px);row-gap:6px}
.eg-band .egx{height:20px;line-height:20px;min-width:70px}
.eg-band .egs-sl{--dh:44px}
.eg-band .eg-ctl{gap:6px;margin-top:4px}
/* layout 'side' (úzky stĺpec): panely vpravo od telefónu */
.eg-side .egp-h{left:14px;right:14px}
.eg-side .egt{left:14px;top:34px}
.eg-side .egcr{left:14px;top:36px;flex-wrap:wrap;width:calc(100% - 28px);row-gap:8px}
.eg-side .egx{height:24px;line-height:24px;min-width:96px;font-size:13px}
.eg-ws{position:absolute;border-radius:20px;background-color:#0c0c0d;background-image:radial-gradient(circle at 1px 1px,#222225 1px,transparent 1.6px);background-size:18px 18px}

/* overlay: výbery, štítky, vodiace čiary, kurzory */
.eg-miss{position:absolute;left:12px;right:12px;bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;font-size:12px;line-height:15px;color:var(--eg-mute);opacity:0}
.eg-gf{position:absolute;display:block;opacity:0}
.eg-gl2{opacity:0}
.eg-ui,.eg-cu{position:absolute;left:0;top:0;pointer-events:none;overflow:hidden}
.egu-box{position:absolute;left:0;top:0;opacity:0}
.egu-e,.egu-eh,.egu-bf,.egu-gl,.egu-gap,.egu-hl,.egu-caret{position:absolute;left:0;top:0;transform-origin:0 0}
.egu-e{background:var(--c)}
.egu-e.egu-h{width:1px;height:2px}
.egu-e.egu-v{width:2px;height:1px}
.egu-eh{background:rgba(0,0,0,.42)}
.egu-eh.egu-h{width:1px;height:4px}
.egu-eh.egu-v{width:4px;height:1px}
.egu-bf{width:1px;height:1px;background:var(--c);opacity:0}
.egu-hd{position:absolute;left:0;top:0;width:8px;height:8px;box-sizing:border-box;border:2px solid var(--c);border-radius:2px;background:#fff}
.egu-tag{position:absolute;left:0;top:0;opacity:0;padding:0 7px;min-height:20px;border-radius:5px;background:var(--c);color:#0a0a0a;font:600 12px/20px var(--f-mono,"Geist Mono",monospace);white-space:nowrap}
.egu-dim{border-radius:6px}
.egu-gt{border-radius:999px;padding:0 8px}
.egu-cc{background:#141414;color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.egu-gl{background:var(--c);opacity:0}
.egu-gl.egu-v{width:1px;height:1px}
.egu-gl.egu-h{width:1px;height:1px}
.egu-gap{width:2px;height:1px;background:var(--c);opacity:0}
.egu-hl{width:1px;height:1px;background:var(--c);opacity:0}
.egu-caret{width:2px;height:1px;opacity:0}
.egu-caret::before{content:"";position:absolute;left:-1px;top:0;width:4px;height:100%;background:rgba(0,0,0,.45)}
.egu-caret::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;background:var(--c)}
.egu-ghost{position:absolute;left:0;top:0;border-radius:9px;background:#242424 center/cover no-repeat;opacity:0;box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 2px var(--c);transform-origin:50% 50%}
.egu-chip{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;opacity:0;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.5)}
.egc{position:absolute;left:0;top:0;width:22px;height:22px;color:var(--c);opacity:0;transform-origin:3px 3px;will-change:transform}
.egc svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.egc-l{position:absolute;left:0;top:0;height:20px;padding:0 9px;border-radius:999px;background:var(--c);color:#0a0a0a;font:600 12px/20px var(--f-sans,"Geist",system-ui,sans-serif);letter-spacing:.01em;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.egc-dot{position:absolute;left:12px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0a0a0a;opacity:0}
.egc-ring{position:absolute;left:3px;top:3px;width:30px;height:30px;border:2px solid var(--c);border-radius:50%;opacity:0;transform:translate(-50%,-50%)}

/* ovládanie dní pod plátnom */
.eg-ctl{display:grid;gap:8px;max-width:520px;margin:6px auto 0}
.egs-bar{display:flex;align-items:center;justify-content:center;gap:14px;min-height:30px}
.egs-status{margin:0;font:500 14px/1.2 var(--f-mono,"Geist Mono",monospace);letter-spacing:.04em;white-space:nowrap}
.egs-sep{color:var(--eg-mute)}
.egs-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin:-9px 0;padding:0 6px;border:0;background:transparent;color:var(--eg-ink);font-size:15px;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.egs-btn[hidden]{display:none}
.egs-sl{--p:1;--dh:56px;--pad:56px;position:relative;height:var(--dh);border-radius:28px;background:#1b1b1b;touch-action:pan-y;cursor:pointer;outline-offset:4px}
.egs-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--pad) + var(--dh) - 4px + var(--p) * (100% - 2 * var(--pad) - var(--dh) + 8px));border-radius:28px;background:#2a2a2a}
.egs-l,.egs-r{position:absolute;top:50%;margin-top:-9px;color:var(--eg-mute);font-size:12px;line-height:18px;letter-spacing:.03em;pointer-events:none}
.egs-l{left:12px}
.egs-r{right:10px}
.egs-th{position:absolute;top:4px;left:calc(var(--pad) + var(--p) * (100% - 2 * var(--pad) - var(--dh) + 8px));display:grid;place-items:center;width:calc(var(--dh) - 8px);height:calc(var(--dh) - 8px);border-radius:50%;background:var(--eg-ink);color:#0a0a0a;font:600 17px/1 var(--f-mono,"Geist Mono",monospace);box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* reduced motion: bez animácií, kurzory sa vôbec nevykresľujú (JS) */
.rm .egk-b i{animation:none}

/* bez JS: hotový obraz (fallbackMarkup). Mierka sa volí podľa šírky okna. */
.eg-static{--z:1}
@media (max-width:480px){.eg-static{--z:.92}}
@media (max-width:420px){.eg-static{--z:.84}}
@media (max-width:370px){.eg-static{--z:.76}}
.eg-fb{display:grid;justify-items:center;gap:10px}
.eg-fbtop{display:flex;align-items:center;gap:10px;width:calc(413px * var(--z));max-width:100%;min-height:28px}
.eg-fbtop .egp-av i{opacity:1}
.eg-fbph{position:relative;width:calc(413px * var(--z));height:calc(780px * var(--z))}
.eg-fb .eg-dev{transform:scale(var(--z))}
.eg-fb .eg-miss{position:static;width:calc(413px * var(--z));max-width:100%}
.eg-fb .egp-st{min-width:0}
.eg-fb .egp-pp{position:static}
.eg-fb .eg-bgp{clip-path:none}
.eg-fb .eg-c{clip-path:none}
.eg-fbdock{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:calc(413px * var(--z));max-width:100%}
.eg-fbdock .egp{position:relative;min-height:118px}
.eg-fbcol{display:grid;gap:6px}
.eg-fbcol .egp{min-height:56px}
.eg-fbdock .egl-s{position:absolute;left:0;right:0;top:24px}
.eg-fbdock .egl-s .egr{position:relative;left:auto;right:auto;display:block;visibility:visible}
.eg-fbdock .egt{display:flex}
.eg-fbdock .egs i{display:block}
.eg-fbdock .egt-i{background-size:cover}
.eg-fbdock .egcr{position:absolute}