@charset "UTF-8";
/* VT323 (SIL Open Font License) – lokalno, bez slanja podataka Googleu */
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* 8 teletekst boja */
  --k:#000; --r:#ff2b2b; --g:#2bff3a; --y:#ffff2b; --b:#2433ff; --m:#ff3bff; --c:#2bffff; --w:#ffffff;
  --dim:#1a1a3a;
  --fs:clamp(17px,4.6vw,23px);
}
*{box-sizing:border-box}
html{background:#000}
body{margin:0;background:#000;color:var(--w);font-family:"VT323",ui-monospace,"Courier New",monospace;font-size:var(--fs);line-height:1.2;
  min-height:100vh;-webkit-font-smoothing:none;text-shadow:0 0 1px currentColor}
/* CRT linije */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.tv{max-width:600px;margin:0 auto;padding:10px 12px 28px}
.r{color:var(--r)} .g{color:var(--g)} .y{color:var(--y)} .b{color:var(--b)} .m{color:var(--m)} .c{color:var(--c)} .w{color:var(--w)}
.bgr{background:var(--r)} .bgg{background:var(--g)} .bgy{background:var(--y)} .bgb{background:var(--b)} .bgm{background:var(--m)} .bgc{background:var(--c)}
.line{white-space:pre-wrap;min-height:1.12em}
/* dvostruka visina, kao pravi teletekst */
.dh{display:block;height:2.24em;overflow:visible}
.dh>span{display:inline-block;transform:scaleY(2);transform-origin:top left;line-height:1.12}
.head{display:flex;gap:.6ch;white-space:nowrap;overflow:hidden}
.head #pg{color:var(--w)} .head .ttl{color:var(--y)} .head #clock{margin-left:auto;color:var(--y)}
.head.search #pg{color:var(--g)}
.banner{background:var(--b);padding:2px .6ch 0;margin:6px 0 0;position:relative}
.banner .sub{color:var(--c)}
.strip{height:.5em;background:linear-gradient(90deg,var(--r) 0 14.28%,var(--g) 0 28.57%,var(--y) 0 42.85%,var(--b) 0 57.14%,var(--m) 0 71.42%,var(--c) 0 85.71%,var(--w) 0);margin:0 0 10px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(1ch - 2px),transparent 0 1ch);mask:repeating-linear-gradient(90deg,#000 0 calc(1ch - 2px),transparent 0 1ch)}
.screen{display:none}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:1ch}
.sep{color:var(--b);overflow:hidden;white-space:nowrap;margin:4px 0}
.sep::before{content:"▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀"}
/* pokušaji */
.slots{margin:6px 0 10px}
.slot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#555}
.slot b{font-weight:400;color:var(--w);margin-right:1ch}
.slot.wrong{color:var(--r)} .slot.skip{color:var(--m)} .slot.right{color:var(--g)}
/* sviraj */
.play{display:flex;align-items:center;gap:1.2ch;margin:8px 0 6px}
.pbtn{font:inherit;font-size:calc(var(--fs)*1.6);line-height:1;background:var(--y);color:#000;border:0;padding:.18em .5em .1em;cursor:pointer;text-shadow:none}
.pbtn:active{background:var(--w)}
.pbtn.on{background:var(--g)}
.cliplen{line-height:1}
.cliplen .dh{margin-bottom:2px}
.bar{position:relative;height:.9em;background:#111;margin:8px 0 3px}
.bar .unlocked{position:absolute;inset:0 auto 0 0;background:var(--b)}
.bar .prog{position:absolute;inset:0 auto 0 0;background:var(--y);width:0}
.bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/32 - 3px),#000 0 calc(100%/32))}
.ticks{display:flex;justify-content:space-between;color:var(--c);font-size:.8em}
/* pretraga */
.search{position:relative;margin-top:12px}
.search label{color:var(--c)}
.search input{width:100%;margin-top:3px;padding:.15em .5ch;border:0;border-radius:0;background:var(--b);color:var(--w);font:inherit;outline:none;caret-color:var(--y)}
.search input::placeholder{color:#9aa3ff}
.search input:focus{background:#0010c0;box-shadow:0 0 0 2px var(--y)}
.sugg{position:absolute;left:0;right:0;bottom:calc(100% - 1.2em);background:#000;border:2px solid var(--c);max-height:11em;overflow:auto;display:none;z-index:5}
.sugg div{padding:.12em .6ch;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg div i{color:var(--c);font-style:normal}
.sugg div:hover,.sugg div.hl{background:var(--y);color:#000;text-shadow:none}
.sugg div:hover i,.sugg div.hl i{color:#000}
/* fastext gumbi */
.fast{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px}
.fast button,.fast a{font:inherit;border:0;border-radius:0;padding:.3em .3ch .2em;cursor:pointer;color:#000;text-shadow:none;text-align:center;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.fast .fr{background:var(--r);color:var(--w)} .fast .fg{background:var(--g)} .fast .fy{background:var(--y)} .fast .fc{background:var(--c)}
.fast button:active,.fast a:active{filter:brightness(1.4)}
.fast button:disabled{opacity:.35;cursor:default}
.fast .span2{grid-column:span 2}
/* otkrivanje */
.cover{display:block;width:100%;max-width:400px;aspect-ratio:16/9;margin:8px auto;image-rendering:pixelated;background:#000;filter:saturate(1.8) contrast(1.35)}
.pts{color:var(--y)}
/* rezultat */
.res-grid{display:flex;gap:.8ch;margin:6px 0 2px}
.res-grid i{display:block;width:2.2ch;height:1.6em}
.panel{border-top:3px solid var(--b);margin-top:12px;padding-top:6px}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{visibility:hidden}}
/* ljestvica županija (kao sportske stranice) */
.tbl{width:100%;border-collapse:collapse;margin-top:6px;table-layout:fixed}
.tbl th{font-weight:400;color:#000;background:var(--c);text-align:left;padding:.08em .4ch;text-shadow:none}
.tbl td{padding:.05em .4ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .p{width:4ch;text-align:right} .tbl .i{width:4.5ch;text-align:right} .tbl .a{width:5ch;text-align:right} .tbl .t{width:3ch;text-align:center}
.tbl th.p,.tbl th.i,.tbl th.a{text-align:right}
.tbl tbody tr:nth-child(odd) td{color:var(--w)} .tbl tbody tr:nth-child(even) td{color:var(--c)}
.tbl td.a{color:var(--y)!important}
.tbl tr.top td.p{color:var(--g)!important}
.tbl tr.none td{color:#555!important}
.tbl tr.me td{background:var(--b);color:var(--y)!important}
.tbl tr.me td.t{animation:blink 1s steps(1) infinite}
.tbl .up{color:var(--g)} .tbl .dn{color:var(--r)} .tbl .eq{color:#777}
.tbl.picking tbody tr{cursor:pointer}
.tbl.picking tbody tr:hover td{background:var(--y);color:#000!important;text-shadow:none}
.linkbtn{font:inherit;background:none;border:0;color:var(--m);cursor:pointer;padding:0;text-shadow:inherit}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--y);color:#000;text-shadow:none;padding:.2em 1ch;opacity:0;transition:opacity .15s;pointer-events:none;z-index:60;white-space:nowrap}
.toast.on{opacity:1}
.foot{color:#666;font-size:.75em;margin-top:18px;line-height:1.2}
.foot a{color:#888}
#ytwrap{position:fixed;right:0;bottom:0;width:200px;height:113px;opacity:0;pointer-events:none;z-index:-1}
/* preglednost */
body:not([data-page=rules]) .banner .sub{display:none}
.banner{padding-bottom:4px}
.tries{display:flex;gap:6px;margin:10px 0 2px}
.tries i{flex:1;height:.55em;background:#222}
.tries i.cur{background:var(--y)}
.tries i.skip{background:var(--m)} .tries i.wrong{background:var(--r)} .tries i.right{background:var(--g)}
.play{justify-content:flex-start;margin:16px 0 8px}
.slots{margin:10px 0 0;font-size:.9em}
.slots:empty{display:none}
.fast .span3{grid-column:span 3}
.hero{text-align:center;padding:6px 0 4px}
.hero .big{font-size:calc(var(--fs)*3.2);line-height:1;margin:4px 0 8px}
.hero .big .w{font-size:.45em;margin-left:.3ch}
.hero .res-grid{justify-content:center}
.ttlbadge{display:inline-block;margin-top:8px;padding:.1em 1ch;background:var(--b)}
.sec{margin-top:16px;border-top:3px solid var(--b);padding-top:8px}
.sech{color:#000;background:var(--y);display:inline-block;padding:0 1ch;margin-bottom:8px;text-shadow:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.stats>div{background:#0b0b2a;padding:6px 2px 4px}
.stats b{display:block;font-weight:400;font-size:calc(var(--fs)*1.6);line-height:1}
.stats span{color:var(--c);font-size:.8em}
.small{font-size:.85em;margin-top:8px}
.rules p{margin:.35em 0}
.rules b{font-weight:400}

/* stranice s tekstom (privatnost, o igri) */
.doc h2{font-weight:400;font-size:1em;color:#000;background:var(--c);display:inline-block;padding:0 1ch;margin:18px 0 4px;text-shadow:none}
.doc p{margin:.4em 0;line-height:1.3}
.doc a{color:var(--c)}
.doc .fast a{color:#000}
.foot a,.foot button{color:#888;font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.foot .links{margin-top:6px;display:flex;gap:1.5ch;flex-wrap:wrap}
/* oglas – uokviren kao teletekst stranica */
.adbox{display:none;margin-top:18px;border:2px solid var(--b);padding:4px}
.adbox.on{display:block}
.adbox .adlbl{font-size:.75em;color:var(--c);display:flex;justify-content:space-between;margin-bottom:4px}
.adbox ins{display:block;min-height:100px;background:#05051a}