/* ══════════════════════════════════════════════════════════════
   ZLATÉ ČESKÉ RUČIČKY — odpočet pro modelářskou disciplínu
   Sourozenec kvízu, ale v hlíně: teplá terakota místo neonu.
   Primární formát: mobil NA ŠÍŘKU (screenshare na TV).
   ══════════════════════════════════════════════════════════════ */

:root{
  --void:#0b0705;          /* vypálená hlína ve tmě */
  --clay:#D2703F;          /* terakota */
  --clay-2:#F0B183;        /* světlý písek */
  --clay-3:#8C3F1F;        /* stín v hlíně */
  --pink:#E1296D;          /* brand — Šlajska */
  --cyan:#00ADEF;          /* brand — HOUSE */
  --hot:#FF4D3D;

  --accent:var(--clay);
  --accent-2:var(--clay-2);

  --f-disp:"Unbounded","Archivo Black",system-ui,sans-serif;
  --f-ui:"Chakra Petch","Segoe UI",system-ui,sans-serif;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--void)}

body{
  font-family:var(--f-ui);color:#fff;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;overscroll-behavior:none;
}

#stage{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  isolation:isolate;cursor:pointer;
}

/* ═══════════════ ATMOSFÉRA ═══════════════ */

.atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.atmo-warm{
  position:absolute;inset:-20%;
  background:
    radial-gradient(52% 58% at 50% 44%, color-mix(in srgb,var(--accent) 42%,transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 108%, color-mix(in srgb,var(--clay-3) 55%,transparent), transparent 72%);
  filter:blur(30px);
  transition:background .6s linear;
}

/* hrnčířský kruh — pomalu se točící deska za časomírou */
.atmo-wheel{
  position:absolute;left:50%;top:50%;
  width:150vmin;height:150vmin;margin:-75vmin 0 0 -75vmin;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.028) 0deg 1.6deg,
      transparent 1.6deg 5deg),
    radial-gradient(circle, transparent 28%, rgba(210,112,63,.10) 55%, transparent 74%);
  opacity:.5;
  animation:wheelSpin 90s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000 20%, transparent 62%);
  will-change:transform;
}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
body[data-phase="run"] .atmo-wheel{animation-duration:40s;opacity:.72}

.atmo-vignette{
  position:absolute;inset:0;
  background:radial-gradient(118% 88% at 50% 46%, transparent 36%, #000 100%);
}
.atmo-grain{
  position:absolute;inset:-50%;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

#fx{position:absolute;inset:0;z-index:6;pointer-events:none}

/* ═══════════════ TOP BAR ═══════════════ */

.topbar{
  position:relative;z-index:5;flex:0 0 auto;
  padding:calc(var(--safe-t) + 2.2vmin) 3.4vmin 0;
  display:flex;align-items:flex-start;justify-content:center;
}
.brand{display:block;line-height:0}
.brand img{
  width:min(40vw,250px);height:auto;display:block;opacity:.5;
  filter:drop-shadow(0 0 20px rgba(225,41,109,.35));
  transition:opacity .4s,width .5s,height .5s;
}
body[data-view="land"] .brand{opacity:0;pointer-events:none}

.tools{position:absolute;right:3vmin;top:calc(var(--safe-t) + 2.4vmin);display:flex;gap:1.4vmin;z-index:11}
.tool{
  width:9.5vmin;height:9.5vmin;max-width:44px;max-height:44px;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;
  background:rgba(255,255,255,.04);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;
  opacity:.3;transition:opacity .25s,border-color .25s,transform .15s;
}
.tool:active{transform:scale(.9)}
.tool svg{width:52%;height:52%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tool .spk,.tool .ic-pause,.tool .ic-play{fill:#fff;stroke:none}
.tool .off,.tool .ic-play{display:none}
body[data-muted="1"] .tool .on{display:none}
body[data-muted="1"] .tool .off{display:block}
body[data-muted="1"] #btnSound{opacity:.6;border-color:rgba(255,77,61,.5)}
body[data-paused="1"] .ic-pause{display:none}
body[data-paused="1"] .ic-play{display:block}
#btnPause{display:none}
body[data-phase="run"] #btnPause{display:grid;opacity:.55}

/* ═══════════════ SCREENS ═══════════════ */

.screen{
  position:relative;z-index:4;flex:1 1 auto;min-height:0;
  display:none;flex-direction:column;
  padding:1.4vmin 4vmin calc(var(--safe-b) + 11vmin);
}
body[data-view="land"] #scLand{display:flex}
body[data-view="pre"]  #scPre{display:flex}
body[data-view="run"]  #scRun{display:flex}
body[data-view="end"]  #scEnd{display:flex}

/* ═══════════════ LANDING ═══════════════ */

.land{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.8vmin;text-align:center;
}

.land-title{display:flex;flex-direction:column;align-items:center;gap:3.4vmin;line-height:.92}

/* horní řádka — dutá trubice, jako vypálený obrys */
.land-t1{
  font-family:var(--f-disp);font-weight:900;
  font-size:min(6.4vw,46px);letter-spacing:.3em;text-indent:.3em;
  color:transparent;
  -webkit-text-stroke:.05em var(--clay-2);
  filter:drop-shadow(0 0 5px var(--clay))
         drop-shadow(0 0 20px color-mix(in srgb,var(--clay) 70%,transparent));
  animation:tubeOn 1.4s .15s both, tubeIdle 8s 1.6s infinite;
}
@keyframes tubeOn{
  0%{opacity:0}12%{opacity:1}18%{opacity:.12}24%{opacity:1}
  30%{opacity:.28}36%{opacity:1}44%{opacity:.5}50%,100%{opacity:1}
}
@keyframes tubeIdle{0%,97%,100%{opacity:1}97.6%{opacity:.55}98.2%{opacity:1}}

/* hlavní titul — plný teplý neon */
.land-t2{
  font-family:var(--f-disp);font-weight:900;
  font-size:min(16vw,116px);letter-spacing:-.03em;color:#fff;
  text-shadow:
    0 0 4px #fff,
    0 0 18px var(--clay),
    0 0 48px var(--clay),
    0 0 110px color-mix(in srgb,var(--clay-3) 70%,transparent);
  animation:titleIn 1.1s .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes titleIn{
  from{opacity:0;transform:scale(1.22);filter:blur(20px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.land-sub{
  font-family:var(--f-disp);font-weight:600;
  font-size:min(3vw,15px);letter-spacing:.34em;text-indent:.34em;
  color:var(--clay-2);opacity:.72;
  text-shadow:0 0 16px color-mix(in srgb,var(--clay) 70%,transparent);
  animation:fadeUp .8s 1.15s both;
}

/* ── výběr délky ── */
.picker{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.4vmin;
  margin-top:1.6vmin;animation:fadeUp .8s 1.35s both;
}
.pick{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(10px,2vmin,15px);letter-spacing:.12em;
  padding:1vmin 2.6vmin;border-radius:99px;cursor:pointer;
  color:rgba(255,255,255,.5);
  border:1.5px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  transition:color .2s,border-color .2s,background .2s,box-shadow .25s,transform .15s;
}
.pick:active{transform:scale(.94)}
.pick.on{
  color:#fff;border-color:var(--clay);
  background:color-mix(in srgb,var(--clay) 20%,transparent);
  box-shadow:0 0 20px color-mix(in srgb,var(--clay) 55%,transparent);
  text-shadow:0 0 12px var(--clay);
}

/* ── mrak vtipů ── */
.land-foot{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:1.6vmin;
  padding-top:1.6vmin;animation:fadeUp 1s 1.55s both;
}
.tagcloud{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.8vmin 1vmin;
  max-width:min(94vw,900px);
}
.tag{
  font-family:var(--f-ui);font-weight:600;
  font-size:clamp(8px,1.6vmin,13px);letter-spacing:.06em;
  padding:.5vmin 1.6vmin;border-radius:99px;
  color:var(--clay-2);
  border:1px solid color-mix(in srgb,var(--clay) 32%,transparent);
  background:color-mix(in srgb,var(--clay) 8%,transparent);
  opacity:.75;white-space:nowrap;
  animation:tagFloat 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.37s);
}
@keyframes tagFloat{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-.5vmin);opacity:.95}
}

.land-rule{
  width:min(30vw,180px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
.land-logo{display:block;line-height:0}
.land-logo img{
  width:min(30vw,170px);height:auto;display:block;opacity:.5;
  filter:drop-shadow(0 0 14px rgba(225,41,109,.35));
}

/* ═══════════════ ODPOČET DO STARTU ═══════════════ */

#scPre{align-items:center;justify-content:center}
.pre{
  font-family:var(--f-disp);font-weight:900;
  font-size:min(46vmin,300px);line-height:.9;color:#fff;
  text-shadow:0 0 8px #fff,0 0 40px var(--clay),0 0 110px var(--clay);
  font-variant-numeric:tabular-nums;
}
.pre.beat{animation:preBeat .82s cubic-bezier(.2,1.4,.35,1)}
@keyframes preBeat{
  0%{transform:scale(1.9);opacity:0;filter:blur(14px)}
  22%{transform:scale(1);opacity:1;filter:blur(0)}
  100%{transform:scale(.94);opacity:.85;filter:blur(0)}
}
.pre.go{
  font-size:min(26vmin,190px);letter-spacing:-.02em;
  color:var(--clay-2);
  text-shadow:0 0 10px #fff,0 0 44px var(--clay),0 0 120px var(--clay);
  animation:preGo .9s cubic-bezier(.16,1,.3,1);
}
@keyframes preGo{
  0%{transform:scale(2.6) rotate(-4deg);opacity:0;filter:blur(22px)}
  30%{transform:scale(1) rotate(0);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:1}
}

/* ═══════════════ HLAVNÍ ČAS ═══════════════ */

.runmain{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2vmin;
}

/* ── hrouda hlíny ── */
.clay{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:.8vmin;
}
.clay-svg{
  height:min(26vh,190px);width:auto;display:block;
  overflow:visible;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.6));
}
.clay-table{
  fill:rgba(255,255,255,.05);
  stroke:rgba(240,177,131,.22);stroke-width:1;
}
.clay-body{
  fill:url(#clayG);
  stroke:rgba(255,226,200,.42);stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(210,112,63,.5));
}

.ball{
  fill:url(#clayG);
  stroke:rgba(255,226,200,.3);stroke-width:1.4;
  filter:brightness(.86) drop-shadow(0 0 8px rgba(210,112,63,.45));
}
/* koule se pohupují vlastním tempem, ať nejsou přilepené k hroudě */
.clay-balls{
  transform-box:view-box;transform-origin:60px 152px;
  animation:ballJiggle 2.3s ease-in-out infinite;
}
@keyframes ballJiggle{
  0%,100%{transform:translateY(0) scale(1,1)}
  30%    {transform:translateY(-1.6px) scale(.98,1.07)}
  62%    {transform:translateY(1.2px) scale(1.03,.95)}
}

/* Tři nezávislé rytmy (1,6 / 3,1 / 5,3 s) se nikdy nesejdou stejně,
   takže to působí živě, ne jako smyčka: přehmatávání tvaru, růst
   s odmáčknutím a pomalé kolébání. */
.clay-grow{
  transform-box:view-box;transform-origin:60px 150px;
  animation:clayGrow 3.1s ease-in-out infinite;
}
@keyframes clayGrow{
  0%  {transform:scale(1.00,.93)}
  26% {transform:scale(.94,1.12)}
  48% {transform:scale(1.06,.96)}
  72% {transform:scale(.96,1.16)}
  100%{transform:scale(1.00,.93)}
}
.clay-sway{
  transform-box:view-box;transform-origin:60px 150px;
  animation:claySway 5.3s ease-in-out infinite;
}
@keyframes claySway{
  0%,100%{transform:rotate(-4deg)}
  50%    {transform:rotate(4deg)}
}
.clay-cap{
  font-family:var(--f-ui);font-weight:700;
  font-size:clamp(10px,2vmin,16px);letter-spacing:.14em;
  color:var(--clay-2);opacity:.85;
  text-shadow:0 0 14px color-mix(in srgb,var(--clay) 70%,transparent);
}
.clay-cap.flip{animation:capFlip .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes capFlip{
  0%{opacity:0;transform:translateY(.8vmin) scale(.9)}
  100%{opacity:.85;transform:none}
}

body[data-paused="1"] .clay-grow,
body[data-paused="1"] .clay-sway,
body[data-paused="1"] .clay-balls{animation-play-state:paused}

.clock{
  flex:0 1 auto;min-height:0;position:relative;
  display:grid;place-items:center;
}
.clock{width:min(72vmin,420px);aspect-ratio:1}
.ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
  width:100%;height:100%;overflow:visible;
}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:rgba(255,255,255,.07)}
.ring-fg{
  stroke:var(--accent);
  stroke-dasharray:678.6;stroke-dashoffset:0;
  filter:drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 30px color-mix(in srgb,var(--accent) 55%,transparent));
  transition:stroke .6s linear;
}

.clock-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6vmin}
.clock-num{
  font-family:var(--f-disp);font-weight:900;
  font-size:min(20vmin,150px);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 8px #fff,0 0 34px var(--accent),0 0 90px var(--accent);
  transition:color .5s;
}
.clock-num.pulse{animation:numPulse 1s ease-out}
@keyframes numPulse{0%{transform:scale(1.09)}100%{transform:scale(1)}}
.clock-lbl{
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(9px,1.8vmin,15px);letter-spacing:.36em;text-indent:.36em;
  color:var(--accent-2);opacity:.8;
}

.paused{
  position:absolute;
  font-family:var(--f-disp);font-weight:900;
  font-size:min(9vmin,58px);letter-spacing:.1em;color:#fff;
  text-shadow:0 0 10px #fff,0 0 40px var(--hot);
  opacity:0;transform:scale(.8);pointer-events:none;
  transition:opacity .3s,transform .3s;
}
body[data-paused="1"] .paused{opacity:1;transform:scale(1);animation:pausedBlink 1.4s infinite}
body[data-paused="1"] .clock-in{opacity:.22;transition:opacity .3s}
@keyframes pausedBlink{0%,100%{opacity:1}50%{opacity:.45}}

/* poslední minuta / vteřiny */
body[data-warn="soon"]{--accent:#E8A317;--accent-2:#FFD98A}
body[data-warn="last"]{--accent:#FF4D3D;--accent-2:#FFB0A6}
#stage::after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 20vmin 4vmin var(--hot);
}
body[data-warn="last"]:not([data-paused="1"]) #stage::after{animation:danger 1s infinite}
@keyframes danger{0%,100%{opacity:0}50%{opacity:.42}}

/* ── běžící pás vtipů ── */
.ticker{
  flex:0 0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-run{
  display:flex;gap:2.4vmin;width:max-content;
  animation:tickerRun 46s linear infinite;
}
@keyframes tickerRun{to{transform:translateX(-50%)}}
.ticker .tag{animation:none;opacity:.6}

/* ═══════════════ KONEC ═══════════════ */

#scEnd{align-items:center;justify-content:center}
.endbox{display:flex;flex-direction:column;align-items:center;gap:2.4vmin;text-align:center}
.end-big{
  font-family:var(--f-disp);font-weight:900;
  font-size:min(30vmin,220px);line-height:.9;color:#fff;letter-spacing:-.02em;
  text-shadow:0 0 8px #fff,0 0 40px var(--hot),0 0 120px var(--hot);
  animation:endIn 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes endIn{
  0%{opacity:0;transform:scale(2.2) rotate(-3deg);filter:blur(24px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.end-sub{
  font-family:var(--f-disp);font-weight:600;
  font-size:min(3.4vw,18px);letter-spacing:.3em;
  color:var(--clay-2);text-shadow:0 0 18px var(--clay);
  animation:fadeUp .8s .45s both;
}

/* ═══════════════ HINT + TOAST ═══════════════ */

.hint{
  position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 3vmin);
  z-index:9;text-align:center;pointer-events:none;
}
.hint span{
  display:inline-block;
  font-family:var(--f-disp);font-weight:600;
  font-size:clamp(9px,1.75vmin,15px);letter-spacing:.34em;
  color:rgba(255,255,255,.55);
  padding:1.1vmin 3vmin;border-radius:99px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
  animation:hintPulse 2.1s ease-in-out infinite;white-space:nowrap;
}
@keyframes hintPulse{
  0%,100%{opacity:.42;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-3px)}
}
.hint.hide{opacity:0;transition:opacity .3s}

.toast{
  position:absolute;left:50%;top:calc(var(--safe-t) + 3vmin);
  z-index:10;transform:translate(-50%,-8px);
  font-family:var(--f-disp);font-weight:700;
  font-size:clamp(9px,1.6vmin,14px);letter-spacing:.28em;
  padding:1.2vmin 2.8vmin;border-radius:99px;
  background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes fadeUp{from{opacity:0;transform:translateY(1.6vmin)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE — hlavní formát (mobil na šířku / TV)
   ══════════════════════════════════════════════════════════════ */

@media (orientation:landscape){
  /* absolutní topbar musí sahat přes celou šířku, jinak se .tools
     ukotví k jeho smrsklé pravé hraně a skončí vlevo */
  .topbar{position:absolute;left:0;right:0;top:0;justify-content:flex-start;
          padding:calc(var(--safe-t) + 2.4vmin) 0 0 3vmin}
  .brand img{width:auto;height:min(11vh,56px)}

  .screen{padding:1.2vmin 3.2vmin calc(var(--safe-b) + 9vmin)}

  .land{gap:1.2vmin}
  .land-t1{font-size:min(4.6vw,10vh,50px)}
  .land-t2{font-size:min(11.5vw,25vh,150px)}
  .land-sub{font-size:min(1.8vw,3.8vh,16px)}
  .picker{margin-top:1.2vmin;gap:1.2vmin}
  .pick{font-size:min(1.6vw,3.2vh,15px);padding:.8vmin 2.2vmin}
  .land-foot{gap:1.2vmin;padding-top:1.2vmin}
  .tagcloud{gap:.6vmin .8vmin;max-width:min(88vw,1000px)}
  .tag{font-size:min(1.35vw,2.8vh,13px);padding:.4vmin 1.4vmin}
  .land-rule{width:min(18vw,200px)}
  .land-logo img{width:auto;height:min(8vh,46px)}

  /* na šířku vedle sebe: hrouda vlevo, čas vpravo */
  .runmain{flex-direction:row;gap:4vmin;justify-content:center}
  .clay-svg{height:min(58vh,290px)}
  .clay-cap{font-size:min(1.7vw,3.4vh,16px)}

  .clock{width:min(66vh,420px)}
  .clock-num{font-size:min(15vh,120px)}
  .clock-lbl{font-size:min(1.6vw,3.2vh,15px)}
  .paused{font-size:min(7vh,54px)}
  .pre{font-size:min(60vh,320px)}
  .pre.go{font-size:min(34vh,200px)}
  .end-big{font-size:min(40vh,240px)}
  .end-sub{font-size:min(2.2vw,4.4vh,19px)}
  .hint span{font-size:min(1.6vw,3.4vh,15px)}
}

@media (orientation:landscape) and (max-height:540px){
  .brand img{height:min(10vh,44px)}
  .screen{padding-bottom:calc(var(--safe-b) + 8vmin)}
  .hint{bottom:calc(var(--safe-b) + 2vmin)}
  .tool{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  .atmo-wheel,.atmo-grain,.ticker-run,.tag{animation:none}
}