:root{
  --bg:#0b0a08; --ink:#ecebe5; --muted:#8c8b84; --line:rgba(236,235,229,.16);
  --gold:#d9b46a; --champagne:#f2dcaa;
  --pad:clamp(20px,2.8vw,44px);
  --sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;cursor:default}
body.pointer{cursor:pointer}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* loader */
.loader{position:fixed;inset:0;z-index:20;display:grid;place-items:center;align-content:center;gap:28px;background:#0b0a08;color:#d9b46a;transition:opacity .7s ease,visibility .7s}
.loader.out{opacity:0;visibility:hidden}
.loader-frame{position:relative;width:190px;height:190px;display:grid;place-items:center}
.loader-hex{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loader-hex polygon{fill:none;stroke:rgba(217,180,106,.55);stroke-width:.6;stroke-dasharray:300;stroke-dashoffset:300;animation:hexdraw 1.4s ease-out forwards}
@keyframes hexdraw{to{stroke-dashoffset:0}}
.loader-m{font-weight:500;font-size:84px;letter-spacing:-.06em;line-height:1;animation:mpulse 1.4s ease-in-out infinite}
@keyframes mpulse{0%,100%{opacity:1;filter:blur(0)}50%{opacity:.55;filter:blur(1.5px)}}
.loader-tag{font-size:15px;font-weight:400;letter-spacing:.02em}
.loader-tag b{font-weight:400;opacity:.35;margin:0 10px}
.loader-count{position:fixed;bottom:56px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.3em}

/* hud */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:var(--pad)}
.brand{font-weight:500;font-size:14px;letter-spacing:.36em}
.brand .xt{color:var(--gold);letter-spacing:.08em;margin-left:-.18em;font-weight:400}
.replay{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(11,10,8,.72);
  border:1px solid var(--line);border-radius:99px;padding:13px 18px;cursor:pointer;transition:border-color .3s,background .3s}
.replay:hover,.replay:focus-visible{border-color:rgba(236,235,229,.5);background:rgba(236,235,229,.06);outline:none}
.replay span{display:inline-block;margin-left:8px;transition:transform .5s}
.replay:hover span{transform:rotate(-200deg)}

.headline{position:fixed;z-index:4;left:var(--pad);top:calc(var(--pad) + 64px);font-weight:300;font-size:clamp(34px,4.4vw,70px);line-height:.98;letter-spacing:-.045em;pointer-events:none}
.headline .line{display:block;white-space:nowrap}
.headline .ch{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.12em);transition:opacity .9s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.headline .ch.on{opacity:1;filter:blur(0);transform:none}
.headline .dot{color:var(--gold)}
.headline .sp{width:.26em}
/* druhý riadok menší: „Jedno M.“ je hlavná myšlienka, „Dva smery.“ ju dopĺňa */
.headline .line:nth-child(2){font-size:.75em;margin-top:.12em}

.meta-left{position:fixed;z-index:4;left:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;gap:7px;color:var(--muted);opacity:0;transition:opacity 1s}
.phase{position:fixed;z-index:4;right:var(--pad);bottom:calc(var(--pad) + 74px);list-style:none;display:flex;flex-direction:column;gap:14px;color:rgba(236,235,229,.5);text-align:right;opacity:0;transition:opacity 1s}
.phase li{transition:color .6s;position:relative;padding-right:30px}
.phase li::after{content:"";position:absolute;right:0;top:50%;width:18px;height:1px;background:currentColor;transform-origin:right;transform:scaleX(.35);transition:transform .6s}
.phase li b{font-weight:500;margin-right:8px}
.phase li.on{color:var(--ink)}.phase li.on::after{transform:scaleX(1)}

.intro-copy{position:fixed;z-index:4;right:var(--pad);bottom:var(--pad);display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right;white-space:nowrap;font-size:13px;line-height:14px;color:var(--muted);opacity:0;transform:translateY(10px);transition:opacity 1.2s,transform 1.2s}
.show{opacity:1!important;transform:none!important}

/* leaders + choices */
.leaders{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.leaders polyline{fill:none;stroke:rgba(236,235,229,.55);stroke-width:1}
.leaders circle{fill:var(--ink)}
.leaders circle[id^=ring]{fill:none;stroke:rgba(236,235,229,.45);stroke-width:1}

.choice{position:fixed;z-index:6;left:0;top:0;display:flex;flex-direction:column;gap:6px;padding:4px 0;opacity:0;pointer-events:none;will-change:transform;outline:none;text-shadow:0 0 12px #0b0a08,0 0 4px #0b0a08}
.choice.live{pointer-events:auto}
.choice.right{align-items:flex-end;text-align:right}
.c-idx{color:var(--muted)}
.c-title{font-weight:300;font-size:clamp(22px,2.1vw,32px);letter-spacing:-.03em;line-height:1.05;white-space:nowrap;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.c-title em{font-style:normal;transition:color .4s}
#choiceA .c-title em{color:var(--champagne)} #choiceB .c-title em{color:var(--gold)}
.c-sub{font-size:13.5px;color:#a9a79f;white-space:nowrap}
.choice:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
.c-cta{margin-top:6px;color:var(--ink);opacity:.55;transition:opacity .4s,letter-spacing .4s}
.choice.hot .c-cta,.choice:focus-visible .c-cta{opacity:1;letter-spacing:.22em}
.choice.hot .c-title,.choice:focus-visible .c-title{transform:translateX(6px)}
.choice.right.hot .c-title,.choice.right:focus-visible .c-title{transform:translateX(-6px)}
.choice.dim{opacity:.45!important}

.hint{position:fixed;z-index:4;left:0;right:0;bottom:var(--pad);text-align:center;color:var(--muted);opacity:0;transition:opacity 1s;pointer-events:none}
.hint i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:1px;box-shadow:0 0 12px var(--gold);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.fade{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none}

@media (max-aspect-ratio:4/5),(max-width:700px){
  .headline{font-size:clamp(30px,8.6vw,44px);top:calc(var(--pad) + 52px)}
  .phase,.intro-copy{display:none}
  .meta-left{display:none}
  .c-title{font-size:18px}
  .choice{padding:6px 0}
  .c-sub{font-size:12.5px}
}
@media (max-height:520px){.phase,.intro-copy,.meta-left,.hint{display:none}.headline{font-size:28px;top:70px}}

/* bez WebGL: statické odkazy namiesto scény */
body.static .headline .ch{opacity:1;filter:none;transform:none}
body.static .replay{display:none}
body.static .hint{opacity:1}
body.static .choice{opacity:1;pointer-events:auto;left:var(--pad);top:auto;bottom:calc(var(--pad) + 140px)}
body.static #choiceB{left:auto;right:var(--pad);bottom:calc(var(--pad) + 40px);align-items:flex-end;text-align:right}