/* PUMPAJ — style */
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Luckiest Guy";src:url("../fonts/luckiest-guy.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* boje */
  --paper:#EFEBE1;
  --ink:#000;
  --red:#E3191F;
  --red-deep:#A50E14;
  --blue:#0C4076;
  --white:#fff;
  --metal:#3B4047;
  --hose:#CDBEA2;

  /* tipografija */
  --f-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-hand:"Luckiest Guy","Manrope",Impact,"Arial Black",sans-serif;
  --t-label:11px;
  --t-num:clamp(20px,2.4vw,30px);

  /* razmaci */
  --pad-x:clamp(14px,3vw,32px);
  --pad-y:clamp(12px,2.2vh,24px);
  --gap:clamp(12px,2.4vw,36px);

  /* vreme */
  --t-fast:.12s;
  --t-med:.35s;
  --ease-out:cubic-bezier(.2,.9,.25,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}

.app{
  height:100vh;height:100dvh;
  max-width:1180px;margin:0 auto;
  padding:calc(var(--pad-y) + env(safe-area-inset-top,0px)) var(--pad-x) calc(var(--pad-y) * .7 + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
}

/* ---------- zaglavlje ---------- */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:16px}
.brand{justify-self:start}
.headline{
  margin:0;justify-self:center;text-align:center;
  font-weight:800;font-size:clamp(20px,2.8vw,34px);line-height:1;letter-spacing:.01em;
  white-space:nowrap;
}
.meter-btn{
  justify-self:end;display:grid;grid-template-columns:auto auto;align-items:center;justify-items:end;gap:5px 10px;
  border:0;background:none;padding:6px;margin:-6px;cursor:pointer;border-radius:8px;text-align:right;
}
.meter-btn:focus-visible{outline:2px dashed var(--ink)}
.meter-btn .gauge-read{grid-column:1 / -1}
.meter{display:flex;gap:3px}
.meter i{position:relative;display:block;width:18px;height:9px;border:2px solid var(--ink);border-radius:2px;background:#fff;overflow:hidden}
.meter i::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(var(--f,0));transform-origin:left}
.meter i.got{box-shadow:0 0 0 1.5px var(--red)}
.meter i.pop{animation:pop .5s var(--ease-back)}
@keyframes pop{40%{transform:scale(1.5)}}
.lvl-read{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.lvl-read b{font-variant-numeric:tabular-nums}
.brand{
  font-family:var(--f-hand);font-size:clamp(26px,3.4vw,40px);line-height:1;
  color:var(--red);letter-spacing:.01em;
  -webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--ink);
  transform:rotate(-2deg);transform-origin:left bottom;
}
.gauge-read{font-weight:800;font-size:12px;letter-spacing:.14em}
.gauge-read b{font-size:clamp(18px,2vw,22px);letter-spacing:0;font-variant-numeric:tabular-nums;display:inline-block;min-width:2.1ch;text-align:right}

/* ---------- scena ---------- */
.stage{position:relative;min-height:0;display:flex}
.rig{
  flex:1;min-width:0;min-height:0;display:block;
  margin:0;padding:0;border:0;background:none;
  cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  border-radius:24px;outline:none;
}
.rig:focus-visible{outline:3px dashed var(--ink);outline-offset:-6px}
.rig svg{display:block;width:100%;height:100%;overflow:visible}
.rig.is-locked{cursor:default}

/* SVG ilustracija */
.floor-shadow{fill:rgba(0,0,0,.13)}
.hose-outline{fill:none;stroke:var(--ink);stroke-width:23;stroke-linecap:round}
.hose-body{fill:none;stroke:var(--hose);stroke-width:13;stroke-linecap:round}
.hose-shine{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round;stroke-dasharray:22 18}
.bubble{fill:#fff;stroke:var(--ink);stroke-width:2.5}

.heart-dark{fill:var(--red-deep)}
.heart-red{fill:var(--red)}
.heart-gloss{fill:#fff;opacity:.92}
.heart-gloss.soft{opacity:.35}
.heart-outline{fill:none;stroke:var(--ink);stroke-linejoin:round}
.heart-text{
  font-family:var(--f-hand);font-size:104px;letter-spacing:1px;
  fill:#fff;stroke:var(--ink);stroke-linejoin:round;paint-order:stroke fill;
}
.throbs path{fill:none;stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.throbs{opacity:0}

.arm-outline{fill:none;stroke:var(--ink);stroke-width:24;stroke-linecap:round}
.arm-fill{fill:none;stroke:var(--red);stroke-width:14;stroke-linecap:round}
.fist path:first-child{fill:var(--red);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.fist .crease{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}

.rod{fill:#9AA1A9;stroke:var(--ink);stroke-width:3}
.metal{fill:var(--metal);stroke:var(--ink);stroke-width:6}
.metal-dark{fill:#25292E;stroke:var(--ink);stroke-width:4}
.metal-shine{fill:rgba(255,255,255,.22)}
.metal-shade{fill:rgba(0,0,0,.28)}
.flag-line{fill:none;stroke:var(--ink);stroke-width:3.5}
.clamp{fill:#8B939C;stroke:var(--ink);stroke-width:3}
.base{fill:#1C1F23;stroke:var(--ink);stroke-width:4}
.bar{fill:#2A2E33;stroke:var(--ink);stroke-width:5}
.bar-shine{fill:rgba(255,255,255,.25)}
.gauge-face{fill:#fff;stroke:var(--ink);stroke-width:5}
.gauge-red{fill:none;stroke:var(--red);stroke-width:5}
.needle{stroke:var(--red);stroke-width:3.5;stroke-linecap:round}
.gauge-pin{fill:var(--ink)}

.spark{stroke:var(--ink);stroke-width:2.5}

.hint{transition:opacity .5s ease}
.hint.is-gone{opacity:0}
.hint-text{font-family:var(--f-ui);font-weight:800;font-size:21px;fill:var(--ink)}
.hint-arrow{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- otključan nivo ---------- */
.unlock{
  position:absolute;z-index:6;top:6px;left:50%;
  width:min(440px,calc(100% - 8px));
  background:#fff;border:3px solid var(--ink);border-radius:6px;
  box-shadow:6px 6px 0 var(--ink);
  padding:14px 44px 16px 16px;
  transform:translateX(-50%) rotate(-1deg);
  animation:drop .5s var(--ease-back) both;
}
.unlock[hidden]{display:none}
.unlock.is-out{animation:lift .25s ease-in forwards}
@keyframes drop{from{transform:translate(-50%,-30px) rotate(-5deg);opacity:0}}
@keyframes lift{to{transform:translate(-50%,-20px) rotate(-1deg);opacity:0}}
.unlock-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.unlock-title{font-family:var(--f-hand);font-size:clamp(24px,3vw,30px);line-height:1.05;margin-top:4px}
.unlock-text{margin:6px 0 12px;font-size:14px;line-height:1.4;font-weight:600;max-width:46ch}
.unlock-text:empty{display:none}
.btn-link,.unlock-link{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-weight:800;font-size:14px;letter-spacing:.04em;
  border:2.5px solid var(--ink);border-radius:999px;padding:9px 18px;
  box-shadow:0 4px 0 var(--ink);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.btn-link:active,.unlock-link:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn-link:focus-visible,.unlock-link:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}
.unlock-link[hidden]{display:none}
.unlock-close,.sheet-close{
  position:absolute;top:6px;right:6px;width:36px;height:36px;
  border:0;background:none;font-size:28px;line-height:1;cursor:pointer;border-radius:6px;font-weight:600;
}
.unlock-close:focus-visible,.sheet-close:focus-visible{outline:2px dashed var(--ink)}

/* ---------- lista nivoa ---------- */
.sheet{
  width:min(520px,calc(100vw - 24px));max-height:min(86dvh,720px);
  border:3px solid var(--ink);border-radius:8px;padding:20px 20px 22px;
  background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--ink);
  overflow:auto;
}
.sheet::backdrop{background:rgba(0,0,0,.45)}
.sheet[open]{animation:drop2 .35s var(--ease-back)}
@keyframes drop2{from{transform:translateY(24px);opacity:0}}
.sheet-head{position:relative}
.sheet h2{margin:0;font-family:var(--f-hand);font-weight:400;font-size:36px;line-height:1}
.sheet-close{top:-6px;right:-8px}
.sheet-sub{margin:6px 0 16px;font-size:14px;font-weight:600;opacity:.75}
.levels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.levels li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:12px;border:2.5px solid var(--ink);border-radius:6px;background:#fff}
.levels li.locked{background:transparent;border-style:dashed;opacity:.6}
.lv-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);background:var(--red);color:#fff;font-family:var(--f-hand);font-size:22px;padding-top:3px}
.locked .lv-n{background:#fff;color:var(--ink)}
.lv-title{font-weight:800;font-size:16px;line-height:1.25}
.lv-text{margin:3px 0 0;font-size:14px;line-height:1.4;font-weight:500}
.lv-lock{margin:3px 0 0;font-size:13px;font-weight:700}
.levels .btn-link{margin-top:10px;font-size:13px;padding:7px 14px}
.sheet-radio{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:2.5px solid var(--ink)}
.sheet-radio p{margin:0 6px 0 0;font-weight:800;font-size:14px;flex-basis:100%}
.btn-link.alt{background:#fff;color:var(--ink);font-size:13px;padding:7px 14px}

/* ---------- zaokruži 3 ---------- */
.done-text{display:flex;flex-direction:column;gap:2px}
.vote{margin:0;font-family:var(--f-hand);font-size:clamp(30px,4.6vw,50px);line-height:1.05;letter-spacing:.01em}
.three{position:relative;display:inline-block;padding:0 .18em;margin:0 .06em;color:var(--red)}
.three svg{position:absolute;left:-.12em;top:-.2em;width:calc(100% + .24em);height:calc(100% + .32em);overflow:visible;pointer-events:none}
.three path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.dock.is-done .three path{animation:draw .7s .45s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- donja traka ---------- */
.dock{border-top:3px solid var(--ink);padding-top:12px;min-height:76px}
.stats{display:grid;grid-template-columns:auto auto minmax(180px,1fr);gap:var(--gap);align-items:end}
.stat{display:flex;flex-direction:column;gap:4px;min-width:0}
.lbl{font-size:var(--t-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.num{font-size:var(--t-num);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-global .num{color:var(--red)}

.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#9a9a9a;margin-left:6px;vertical-align:1px}
.live.on{background:var(--red);animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.25}}

/* odometar */
.odo{display:inline-flex;overflow:hidden;height:1.05em}
.odo .d{display:inline-block;height:1.05em;overflow:hidden;position:relative;width:.62em;text-align:center}
.odo .d > span{display:flex;flex-direction:column;transition:transform .45s var(--ease-out)}
.odo .d > span > i{font-style:normal;height:1.05em;line-height:1.05em}
.odo .sep{display:inline-block;width:.28em;text-align:center}

.stat-goal .lbl b{font-weight:800;color:var(--red);letter-spacing:0;margin-left:4px}
.goal-bar{display:block;height:12px;border:2.5px solid var(--ink);border-radius:2px;background:#fff;overflow:hidden;margin-top:4px}
.goal-bar span{display:block;height:100%;width:0;background:var(--red);transition:width .6s var(--ease-out);
  background-image:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(0,0,0,.12) 6px 9px)}
.goal-sub{font-size:11px;font-weight:600;opacity:.7}

.done{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.done[hidden],.stats[hidden]{display:none}
.done-line{margin:0;font-weight:800;font-size:clamp(18px,2.4vw,28px);letter-spacing:.04em}
.again{
  border:3px solid var(--ink);background:var(--red);color:#fff;
  font-weight:800;letter-spacing:.08em;font-size:15px;
  padding:14px 26px;border-radius:999px;cursor:pointer;
  box-shadow:0 5px 0 var(--ink);transform:translateY(0);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.again:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.again:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.again[disabled]{opacity:.4;cursor:default}
.dock.is-done .done{animation:rise .45s var(--ease-back) both}
@keyframes rise{from{transform:translateY(14px);opacity:0}}

/* ---------- podnožje ---------- */
.foot{display:flex;align-items:center;gap:18px;padding-top:8px;font-size:12px;font-weight:600}
.slogan{opacity:.7;margin-right:auto}
.radio{display:flex;align-items:center;gap:12px}
.radio a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--red)}
.radio a:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
.radio-ico{font-size:14px}
.visits{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.visits:empty{display:none}
.sound{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;padding:8px;margin:-8px;border-radius:8px}
.sound:focus-visible{outline:2px dashed var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (hover:none){.kbd{display:none}}

/* ---------- mobilni ---------- */
@media (max-width:700px){
  .top{grid-template-columns:1fr auto;grid-template-areas:"h h" "b m";row-gap:10px}
  .headline{grid-area:h;font-size:clamp(22px,7.2vw,32px)}
  .brand{grid-area:b;font-size:24px}
  .meter-btn{grid-area:m}
  .meter i{width:14px;height:8px}
  .vote{text-align:center}
  .done-text{align-items:center}
  .unlock{padding:12px 42px 14px 14px}
  .unlock-text{font-size:13px;margin:4px 0 10px}
  .stats{grid-template-columns:1fr 1fr;row-gap:10px}
  .stat-goal{grid-column:1 / -1}
  .stat-goal{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
  .stat-goal .goal-bar{margin-top:0}
  .stat-goal .goal-sub{display:none}
  .lbl{font-size:10px;letter-spacing:.1em}
  .dock{padding-top:10px;min-height:0}
  .again{padding:12px 20px;font-size:14px;width:100%}
  .done{flex-direction:column;align-items:stretch;gap:10px}
  .done-line{text-align:center}
  .foot{font-size:11px;gap:12px}
  .slogan{display:none}
  .radio{gap:10px;margin-right:auto}
}
@media (max-height:560px){
  .goal-sub{display:none}
  .slogan{display:none}
}

@media (prefers-reduced-motion:reduce){
  .odo .d > span{transition:none}
  .live.on{animation:none}
  .dock.is-done .done{animation:none}
  .dock.is-done .three path{animation:none;stroke-dashoffset:0}
  .unlock,.unlock.is-out,.sheet[open]{animation:none}
}

/* niski ekrani: kartica nivoa bez opisa (opis je u listi nivoa) */
@media (max-height:680px){
  .unlock-text{display:none}
  .unlock-title{margin-bottom:10px}
}