/* ============================================================ IGRAONICA — zajednička srž izgleda Sve što je isto u svakoj igri stoji ovdje: pozadina, sat, brojači, zaslon kraja, ljestvica, gumbi. Svaka igra dodaje samo svoju ploču. Boju igre postavlja . ============================================================ */ :root{ --bg:#0a0e16; --edge:rgba(255,255,255,.09); --txt:#eef3fb; --dim:#7d89a6; --ok:#4ade80; --bad:#ff5f6d; --a1:#4cc9f0; --a2:#ffc247; /* akcenti — mijenja ih data-boja */ } body[data-boja="ljubicasta"]{ --a1:#a78bfa; --a2:#3ee0c4; --bg:#0e0b18 } body[data-boja="plava"]{ --a1:#4cc9f0; --a2:#ffc247; --bg:#0a0e16 } body[data-boja="zelena"]{ --a1:#4ade80; --a2:#ffc247; --bg:#08130f } body[data-boja="crvena"]{ --a1:#ff6b6b; --a2:#ffc247; --bg:#140a0e } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ margin:0;color:var(--txt);overflow:hidden;user-select:none;touch-action:manipulation; font:600 16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); display:flex;flex-direction:column;align-items:center; padding:max(8px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); } body::before{ content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none; background:radial-gradient(40% 32% at 26% 16%,color-mix(in srgb,var(--a1) 26%,transparent),transparent 62%), radial-gradient(44% 36% at 78% 84%,color-mix(in srgb,var(--a2) 20%,transparent),transparent 64%), radial-gradient(54% 44% at 50% 50%,rgba(120,90,255,.10),transparent 70%); animation:aurora 26s ease-in-out infinite alternate; } @keyframes aurora{ 0%{transform:translate3d(-3%,-2%,0) scale(1)} 50%{transform:translate3d(3%,2%,0) scale(1.07)} 100%{transform:translate3d(-2%,3%,0) scale(1.03)} } #grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } #danger{ position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(120% 80% at 50% 50%,transparent 48%,rgba(255,50,80,.42) 100%); } #danger.on{opacity:1;animation:danger 1s ease-in-out infinite} @keyframes danger{50%{opacity:.45}} /* ---------- sat i brojači ---------- */ #top{width:100%;max-width:440px} #bar{height:11px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:8px; box-shadow:inset 0 1px 3px rgba(0,0,0,.5)} #fill{height:100%;width:100%;border-radius:99px; background:linear-gradient(90deg,var(--a1),#8b7cf6,var(--a1));background-size:220% 100%; animation:slide 2.6s linear infinite;box-shadow:0 0 14px color-mix(in srgb,var(--a1) 60%,transparent)} @keyframes slide{to{background-position:-220% 0}} #fill.low{background:linear-gradient(90deg,#ff9f43,#ff5f6d,#ff9f43);background-size:220% 100%; box-shadow:0 0 16px rgba(255,80,90,.75);animation:slide 1s linear infinite,pulse .55s infinite} @keyframes pulse{50%{opacity:.6}} #hud{display:flex;gap:8px} .st{flex:1;background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); border:1px solid var(--edge);border-radius:13px;padding:7px 4px;text-align:center;min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} .st b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15; font-variant-numeric:tabular-nums;transition:transform .12s} .st span{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:1px} .st.bump b{transform:scale(1.28)} .st.istaknuto{border-color:color-mix(in srgb,var(--a1) 50%,transparent); box-shadow:0 0 20px color-mix(in srgb,var(--a1) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.08)} .st.istaknuto b{color:var(--a1)} .st.blijedo b{color:var(--dim)} /* ---------- sredina ---------- */ #mid{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:12px} #hint{font-size:14px;color:var(--dim);text-align:center;min-height:20px;letter-spacing:.02em} #hint b{color:var(--txt)} /* ---------- kratka poruka preko ekrana ---------- */ #note{position:fixed;left:0;right:0;top:32%;text-align:center;pointer-events:none;z-index:4; opacity:0;transform:scale(.85);transition:opacity .16s,transform .16s} #note.on{opacity:1;transform:scale(1)} #note i{display:inline-block;font-style:normal;font-size:24px;font-weight:900;letter-spacing:-.02em; background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid rgba(255,255,255,.14); padding:14px 26px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.75)} #note small{display:block;font-size:13px;color:var(--dim);letter-spacing:.06em;margin-top:6px;font-weight:700} @media (prefers-reduced-motion:reduce){*{animation-duration:.01s !important;animation-iteration-count:1 !important}} /* ---------- zaslon kraja / početka ---------- */ #over{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(8px);z-index:5; display:none;flex-direction:column;align-items:center;justify-content:center; padding:24px;text-align:center;overflow-y:auto} #over.on{display:flex} #over h1{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:0 0 6px;font-weight:700} #over .score{font-size:60px;font-weight:900;letter-spacing:-.04em;line-height:1; background:linear-gradient(100deg,#fff 10%,var(--a1) 45%,var(--a2) 75%,#fff 95%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:shine 4s linear infinite} #over .score.malo{font-size:30px} @keyframes shine{to{background-position:-220% 0}} #over .sub{color:var(--dim);margin:8px 0 4px;font-size:15px;font-weight:600} #over .sub em{color:var(--a2);font-style:normal} #nameLbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:14px} #ime{background:rgba(255,255,255,.07);border:1px solid var(--edge);color:var(--txt); border-radius:13px;padding:13px 16px;font:700 16px system-ui;text-align:center; width:230px;margin:6px 0 14px;outline:none;transition:border-color .2s,box-shadow .2s} #ime:focus{border-color:color-mix(in srgb,var(--a1) 70%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 18%,transparent)} #ime::placeholder{color:var(--dim);font-weight:600} button{background:linear-gradient(135deg,var(--a1),var(--a2));color:#0d1420;border:0;border-radius:15px; padding:16px 44px;font:800 17px system-ui;cursor:pointer;letter-spacing:.02em; box-shadow:0 10px 30px color-mix(in srgb,var(--a1) 30%,transparent);transition:transform .14s,box-shadow .2s} button:hover{transform:translateY(-2px)} button:active{transform:translateY(1px) scale(.98)} button.ghost{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid var(--edge); padding:12px 22px;font-size:14px;font-weight:600;box-shadow:none} #gumbi{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center} #dodatno{width:100%;max-width:360px;margin-top:18px} #pravila{max-width:340px;color:var(--dim);font-size:14px;font-weight:500;line-height:1.6;text-align:left;margin-top:18px} #pravila b{color:var(--txt)} /* ---------- poziv prijatelju ---------- */ button.podijeli{margin-top:10px;border-color:color-mix(in srgb,var(--a2) 45%,transparent); color:var(--a2);background:color-mix(in srgb,var(--a2) 10%,transparent)} .izazov{ max-width:340px;margin:10px auto 0;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:700; background:color-mix(in srgb,var(--a2) 14%,transparent); border:1px solid color-mix(in srgb,var(--a2) 40%,transparent);color:var(--txt) } #iosUpute{ max-width:340px;margin:12px auto 0;padding:12px 14px;border-radius:12px;text-align:left; background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--dim); font-size:12.5px;font-weight:600;line-height:1.6 } #iosUpute b{color:var(--txt)} /* ---------- ljestvica ---------- */ #ljTabs{display:flex;gap:5px;margin-bottom:8px} #ljTabs .tab{ flex:1;background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--dim); border-radius:9px;padding:7px 2px;font:700 11.5px system-ui;cursor:pointer;box-shadow:none;letter-spacing:0 } #ljTabs .tab:hover{transform:none} #ljTabs .tab.aktivna{ background:color-mix(in srgb,var(--a1) 20%,transparent);color:var(--txt); border-color:color-mix(in srgb,var(--a1) 55%,transparent) } .prazno{color:var(--dim);font-size:12.5px;font-weight:600;padding:10px 4px;text-align:center;line-height:1.5} #lj{width:100%;max-width:340px;margin-top:16px} #lj h2,#dodatno h2{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim); margin:0 0 8px;font-weight:700} .red{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:11px; background:rgba(255,255,255,.04);border:1px solid transparent;font-size:14px} .red+.red{margin-top:4px} .red.ja{background:linear-gradient(100deg,color-mix(in srgb,var(--a1) 24%,transparent),color-mix(in srgb,var(--a2) 14%,transparent)); border-color:color-mix(in srgb,var(--a1) 50%,transparent)} .red .mj{width:18px;color:var(--dim);font-weight:800;text-align:right} .red .nm{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .red .dp{color:var(--dim);font-size:12px} .red .bd{font-weight:800;font-variant-numeric:tabular-nums;min-width:52px;text-align:right} @media (max-height:760px){ #over{padding:16px} #over .score{font-size:44px} #ime{padding:10px 16px;margin:5px 0 10px} #lj,#dodatno{margin-top:10px} .red{padding:6px 12px;font-size:13px} button{padding:13px 40px} #gumbi{margin-top:10px} }