:root{
  --bg:#eef0f6; --card:#fff; --ink:#0e1633; --muted:#66708f; --line:#e4e7f1;
  --navy:#0b1430; --navy2:#1a2b66; --orange:#ff6a1a; --orange2:#ff8a3d;
  --z1:#1f9d55; --z2:#e59a12; --z3:#8b93a7; --bad:#d33;
  --shadow:0 1px 2px rgba(14,22,51,.05),0 6px 20px rgba(14,22,51,.06);
  --shadow-lg:0 2px 4px rgba(14,22,51,.06),0 14px 34px rgba(14,22,51,.12);
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(900px 380px at 50% -120px,#dfe4f5,transparent) no-repeat,var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

/* ---------- zaglavlje ---------- */
header{position:relative;color:#fff;padding:28px 16px 30px;background:
  radial-gradient(520px 220px at 88% -30%,rgba(255,106,26,.55),transparent 70%),
  radial-gradient(420px 200px at 0% 120%,rgba(90,120,255,.35),transparent 70%),
  linear-gradient(135deg,var(--navy),var(--navy2));
  box-shadow:0 10px 30px rgba(11,20,48,.25)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--orange2),#ffc46b)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
header .wrap{display:flex;gap:16px;align-items:center;padding:0}
.hdr-logo-btn{display:flex;gap:16px;align-items:center;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:inherit;font:inherit;flex:1;min-width:0}
header img{height:68px;width:auto;background:#fff;border-radius:18px;padding:9px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
h1{margin:0;font-size:1.75rem;line-height:1.1;letter-spacing:-.3px;font-weight:800}
h2{font-size:1.15rem;margin:22px 0 10px}
header p{margin:6px 0 0;color:#c7d0f3;font-size:.96rem}
.hdr-auth-row{display:flex;justify-content:flex-end;padding:8px 16px 0}
.hdr-auth-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;font:inherit;font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .15s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-auth-btn:hover{background:rgba(255,255,255,.22)}
main{padding-top:0;padding-bottom:64px;margin-top:18px;position:relative}

/* ---------- kartice, polja ---------- */
.card{background:var(--card);border:1px solid rgba(228,231,241,.9);border-radius:18px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}

/* ---------- game-section: vizuelni okvir oko svih vidžeta jedne igre na Naslovnoj, sa naslovnom trakom ---------- */
.game-section{border:1px solid rgba(228,231,241,.9);border-radius:20px;margin-bottom:20px;background:#eef1fa;box-shadow:var(--shadow);overflow:hidden}
.game-section-head{display:flex;align-items:center;gap:8px;padding:13px 18px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-weight:800;font-size:.98rem;letter-spacing:.01em;border-bottom:3px solid var(--orange)}
.game-section-body{padding:16px}
.game-section-body .card:last-child{margin-bottom:0}
.game-section-body .widgets-grid:last-child{margin-bottom:0}
label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:#2a3357}
input[type=text],input[type=password],input[type=datetime-local],input[type=email]{width:100%;padding:12px 14px;font:inherit;border:1.5px solid var(--line);border-radius:12px;background:#f8f9fd;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
input:focus{outline:none;background:#fff;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,106,26,.16)}
input.err{border-color:var(--bad);box-shadow:0 0 0 4px rgba(221,51,51,.14)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- tabovi ---------- */
.tabs{position:sticky;top:8px;z-index:6;display:flex;gap:4px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px;border-radius:16px;margin-bottom:14px;box-shadow:var(--shadow-lg);border:1px solid rgba(228,231,241,.9)}
.tabs button{flex:1;padding:11px 6px;border:0;border-radius:12px;background:transparent;font:inherit;font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 4px 12px rgba(255,106,26,.35)}

/* ---------- baner, poruke ---------- */
.banner{border-radius:14px;padding:11px 15px;margin-bottom:14px;font-size:.92rem;background:linear-gradient(135deg,#fff4ea,#ffe9d6);border:1px solid #ffd5b5;color:#7a3208}
.banner.closed{background:#eceef6;border-color:var(--line);color:var(--muted)}
.msg{border-radius:14px;padding:12px 15px;margin-top:14px;font-size:.95rem}
.msg.ok{background:#e8f6ee;border:1px solid #bfe6cf;color:#155b34}
.msg.bad{background:#fdecec;border:1px solid #f6c4c4;color:#8a1f1f}

/* ---------- ime / slika ---------- */
.who-row{display:flex;gap:16px;align-items:flex-start}
.who-field{flex:1;min-width:0;display:grid;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-actions{display:grid;gap:10px;margin-top:12px}
.auth-actions .btn{justify-self:start;padding:11px 22px}
.profile{display:grid;gap:12px}
.signed{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
.me-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:-6px}
.me-name{margin:0;font-size:1.35rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.pbtns{display:flex;flex-wrap:wrap;gap:7px}
.pbtn{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#f6f7fc;color:var(--ink);font:inherit;font-size:.85rem;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pbtn:hover{border-color:var(--orange);color:var(--orange);background:#fff}
.pbtn.danger{color:var(--bad)}
.pbtn.danger:hover{border-color:var(--bad);color:var(--bad);background:#fff5f5}
.pbtn.out{margin-left:auto;background:var(--navy);border-color:var(--navy);color:#fff}
.pbtn.out:hover{background:var(--navy2);border-color:var(--navy2);color:#fff}
.avatar{flex:none;width:88px;height:88px;border-radius:50%;border:2px dashed #c3c9dc;background:#f4f6fc center/cover no-repeat;color:var(--muted);display:grid;place-items:center;font:inherit;font-size:.7rem;font-weight:600;line-height:1.15;cursor:pointer;padding:0;overflow:hidden;transition:border-color .15s,transform .15s}
.avatar svg{display:block;margin:0 auto 3px}
.avatar:hover,.avatar.drop{border-color:var(--orange);color:var(--orange);transform:scale(1.03)}
.avatar.has{border:3px solid #fff;box-shadow:0 0 0 3px var(--orange),0 8px 18px rgba(255,106,26,.3)}
.avatar.has span{display:none}
.note{margin:0;font-size:.8rem;color:var(--muted)}
.note button{background:none;border:0;padding:0;margin-left:6px;color:var(--orange);font:inherit;text-decoration:underline;cursor:pointer}
.linkbtn{background:none;border:0;padding:0;color:var(--orange);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

.note .linkbtn.danger{color:var(--bad)}
.hint{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--muted);margin:0 0 12px;font-weight:600}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--c)}

.mailbox{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.mb-title{margin:0;font-weight:800;font-size:.95rem}
.mb-desc{margin:0;font-size:.85rem;color:var(--muted)}
.mail-state{display:grid;gap:8px}
.mail-state p{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.mail-state .ok{color:#155b34;font-weight:700}
.rename{background:#f8f9fd;border:1px dashed #cfd5e6;border-radius:14px;padding:12px}
.rename-row{display:flex;gap:8px}
.rename-row input{flex:1;min-width:0}
.rename-row .btn{flex:none;padding:10px 14px}
@media (max-width:480px){.rename-row{flex-direction:column}}

/* ---------- lista ekipa ---------- */
.tlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.team{--zc:#c9cfe0;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--zc);border-radius:16px;padding:8px 10px 8px 10px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:0 1px 2px rgba(14,22,51,.04);transition:box-shadow .15s,transform .15s,border-color .15s}
.team.z1{--zc:var(--z1)} .team.z2{--zc:var(--z2)} .team.z3{--zc:var(--z3)}
.tlist.locked .team{cursor:default}
.team:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.tlist.locked .team:hover{transform:none}
.team.flash{box-shadow:0 0 0 3px rgba(255,106,26,.3)}
.sortable-ghost{opacity:.4;background:#fff3ea;border-style:dashed;border-color:var(--orange)}
.sortable-chosen{cursor:grabbing;box-shadow:var(--shadow-lg);transform:scale(1.01)}
.pos{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;background:var(--z3);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.pos.z1{background:var(--z1)} .pos.z2{background:var(--z2)} .pos.z3{background:var(--z3)}
.team img{flex:none;width:50px;height:50px;padding:5px;background:#f5f6fb;border-radius:14px;object-fit:contain;pointer-events:none}
.name{flex:1;min-width:0;font-weight:700;font-size:1.03rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arrows{display:flex;gap:4px}
.arrows button{width:34px;height:34px;border:1px solid var(--line);background:#f8f9fd;border-radius:10px;color:var(--muted);font-size:.78rem;cursor:pointer;padding:0;transition:background .12s,color .12s}
.arrows button:hover{background:#fff;color:var(--orange);border-color:#ffc9a6}
.arrows button:disabled{opacity:.3;cursor:default}
.tlist.locked .arrows,.tlist.locked .grip{display:none}
.grip{flex:none;color:#b3b9cc;font-size:1.2rem;letter-spacing:-3px;padding:0 2px}

/* ---------- dugmad ---------- */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:20px}
button.btn,a.btn{font:inherit;font-weight:700;padding:13px 16px;border-radius:14px;border:1.5px solid #cfd5e6;background:#fff;color:var(--navy);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
a.btn{display:inline-block;text-decoration:none;text-align:center}
button.btn:hover,a.btn:hover{background:#f4f6fc;transform:translateY(-1px)}
button.btn:disabled{opacity:.5;cursor:default;transform:none}
button.btn.primary,a.btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(255,106,26,.35)}
button.btn.primary:hover,a.btn.primary:hover{box-shadow:0 10px 26px rgba(255,106,26,.45)}
button.btn.primary:disabled{box-shadow:none}
button.btn.link{border-color:transparent;background:transparent;color:var(--muted);font-weight:600}
button.btn.danger{border-color:#f1b9b9;color:var(--bad)}

/* ---------- rang lista ---------- */
.board{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pl{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(14,22,51,.04)}
.pl.r1{border-color:#f0c24b;box-shadow:0 0 0 3px rgba(240,194,75,.28),var(--shadow)}
.pl-head{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:default}
.pl-head.click{cursor:pointer}
.pl-head.click:hover{background:#fafbfe}
.rank{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:var(--muted);background:#f1f3f9}
.pl.r1 .rank{background:linear-gradient(135deg,#ffd86b,#f0a800);color:#fff}
.pl.r2 .rank{background:linear-gradient(135deg,#d7dce8,#a5adc0);color:#fff}
.pl.r3 .rank{background:linear-gradient(135deg,#e6a878,#c07a3f);color:#fff}
.av{flex:none;width:44px;height:44px;border-radius:50%;background:#e3e7f5 center/cover no-repeat;display:grid;place-items:center;font-weight:800;color:var(--navy2);text-transform:uppercase;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.pl-name{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-sub{display:block;font-weight:500;font-size:.78rem;color:var(--muted)}
.pl-share{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;font-size:1rem;color:var(--muted);cursor:pointer}
.pl-share:hover{background:#fff1e6;color:var(--orange)}
.pl-share:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.stat{flex:none;text-align:right;line-height:1.05}
.stat b{font-size:1.4rem;font-weight:800;color:var(--navy2)}
.pl.r1 .stat b{color:#b47b00}
.stat small{display:block;font-size:.68rem;color:var(--muted);font-weight:600}
.chev{flex:none;color:#b3b9cc;font-size:1.3rem;transition:transform .2s}
.pl.open .chev{transform:rotate(90deg)}
.pl-detail{border-top:1px solid var(--line);padding:6px 14px 14px;background:#fbfcfe}
table.cmp{width:100%;border-collapse:collapse;font-size:.9rem}
table.cmp th{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:7px 4px;font-weight:700}
table.cmp td{padding:4px;border-top:1px solid #eef0f6;vertical-align:middle}
table.cmp td.c,table.cmp th.c{text-align:center}
table.cmp img{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin-right:8px}
.diff{display:inline-block;min-width:34px;padding:2px 8px;border-radius:999px;color:#fff;font-weight:800;font-size:.8rem;background:var(--z3)}
.diff.d0{background:var(--z1)} .diff.d1{background:#7fbf5f} .diff.d2{background:var(--z2)} .diff.d3{background:#d9534f}
.winner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#fff8e1,#ffe39a);border:1px solid #f0c24b;border-radius:18px;padding:16px 18px;margin-bottom:14px;box-shadow:0 10px 26px rgba(240,168,0,.25)}
.winner .av{width:68px;height:68px;font-size:1.5rem;box-shadow:0 0 0 3px #fff,0 0 0 5px #f0c24b}
.winner small{display:block;color:#7a5a00;text-transform:uppercase;letter-spacing:.7px;font-size:.72rem;font-weight:800}
.winner b{font-size:1.4rem;font-weight:800}
details.card summary{cursor:pointer;font-weight:800}
.rules{font-size:.82rem;color:var(--muted);margin:14px 0 0}
.empty{color:var(--muted);text-align:center;padding:26px 10px}

/* ---------- tabela uživo ---------- */
.embed{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);overflow:hidden;display:flex;justify-content:center}
.embed iframe{border:0;display:block}
.credit{font-size:12px;color:var(--muted);margin:10px 4px 0}
.credit a{color:var(--muted)}

/* ---------- admin ---------- */
.acts{white-space:nowrap}
tr.pdet td{background:#fbfcfe;padding:10px 6px}
ol.plist-pred{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(10,auto);gap:4px 18px}
ol.plist-pred li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;min-width:0}
ol.plist-pred li span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.plist-pred .pos{width:24px;height:24px;font-size:.75rem;flex:none}
ol.plist-pred img{width:22px;height:22px;object-fit:contain;flex:none}
@media (max-width:480px){ol.plist-pred{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}}
.admin-grid{display:grid;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.sp{justify-content:space-between}
table.plist{width:100%;border-collapse:collapse;font-size:.92rem}
table.plist td,table.plist th{padding:8px 6px;border-top:1px solid var(--line);text-align:left}
table.plist th{font-size:.75rem;color:var(--muted);text-transform:uppercase;border-top:0}
.chk{display:flex;gap:8px;align-items:center;font-weight:600}
.chk input{width:18px;height:18px}
.warn{background:#fff8e1;border:1px solid #f0c24b;color:#7a5a00;border-radius:12px;padding:10px 12px;font-size:.9rem}

#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:999px;font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center;z-index:20;box-shadow:var(--shadow-lg)}
#toast.show{opacity:1;transform:translateX(-50%)}


/* ---------- o igri (FAQ) ---------- */
.about{margin-top:8px;margin-bottom:8px}
.about h2{font-size:1.05rem;margin:0 0 10px}
.about details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:8px;box-shadow:0 1px 2px rgba(14,22,51,.04)}
.about summary{cursor:pointer;font-weight:700}
.about details p{margin:8px 0 0;color:var(--muted);font-size:.92rem}

/* ---------- podnožje ---------- */
main{padding-bottom:48px}
.actions{margin-bottom:40px}
.site-foot{margin-top:24px;padding:32px 16px 36px;text-align:center;color:#c7d0f3;font-size:.88rem;position:relative;background:
  radial-gradient(420px 180px at 12% 130%,rgba(255,106,26,.35),transparent 70%),
  linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 -8px 30px rgba(11,20,48,.12)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--orange2),#ffc46b)}
.site-foot img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;margin-bottom:8px}
.site-foot p{margin:0 0 6px}
.foot-title{color:#fff;font-weight:800;font-size:1rem}
.site-foot a{color:#ffb078;font-weight:700;text-decoration:none}
.foot-mail{font-size:.95rem;white-space:nowrap}
.site-foot a:hover{text-decoration:underline}
.site-foot .linkbtn{color:#ffb078;font-size:.88rem}
.foot-links{margin:10px 0 12px!important}
.foot-note{font-size:.76rem;color:#8e9ac6;max-width:520px;margin:0 auto 4px!important}

/* ---------- uputstvo (popup) ---------- */
.hdr-actions{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
.lang-switch{flex:none;font:inherit;font-size:.78rem;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 14px;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s,transform .1s;letter-spacing:.5px;line-height:1}
.lang-switch:hover{background:rgba(255,255,255,.26)}
.lang-switch:active{transform:scale(.95)}
.help-link{flex:none;font:inherit;font-size:.85rem;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 15px;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s}
.help-link:hover{background:rgba(255,255,255,.26)}
.help-link::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:50%;background:var(--orange);font-size:.75rem;line-height:1}
dialog#help,dialog#emailDlg,dialog#loginDlg,dialog#hdrLoginDlg,dialog#recoverDlg,dialog#statDlg,dialog#plDlg{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 40px);color:var(--ink);background:var(--card);box-shadow:0 24px 60px rgba(11,20,48,.45);overflow:hidden}
dialog#help[open],dialog#emailDlg[open],dialog#loginDlg[open],dialog#hdrLoginDlg[open],dialog#recoverDlg[open],dialog#statDlg[open],dialog#plDlg[open]{display:flex;flex-direction:column;animation:dlgin .18s ease-out}
dialog#help::backdrop,dialog#emailDlg::backdrop,dialog#loginDlg::backdrop,dialog#hdrLoginDlg::backdrop,dialog#recoverDlg::backdrop,dialog#statDlg::backdrop,dialog#plDlg::backdrop{background:rgba(11,20,48,.55);backdrop-filter:blur(3px)}
@keyframes dlgin{from{opacity:0;transform:translateY(10px) scale(.98)}}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy2));border-bottom:3px solid var(--orange)}
.dlg-head h2{margin:0;font-size:1.15rem}
.dlg-x{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:0}
.dlg-x:hover{background:rgba(255,255,255,.28)}
.dlg-body{padding:16px 20px 20px;overflow-y:auto;font-size:.95rem}
.dlg-body p{margin:0 0 12px}
.dlg-body label{display:block;margin-bottom:6px;font-weight:600}
#emailDlg .msg{margin-top:10px}
#emailDlg .actions{margin-top:16px}
.rules-sep{margin:26px 4px 12px;font-size:1.2rem}
.dlg-h{margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--line,#dfe3f0);font-size:1.02rem}
ol.steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
ol.steps li{counter-increment:st;position:relative;padding-left:40px;min-height:30px}
ol.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange2))}

/* ---------- tabela uživo ---------- */
.tbl-card{padding:8px 10px 14px}
.livegame{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 12px;border-radius:12px;background:#f3f5fb;font-size:.85rem;font-weight:700;color:var(--ink)}
.livegame b{font-weight:800}
.livegame.on{background:#fdeceb;color:#c0392b}
.livegame.on b{color:#e02020}
.livegame .dot{width:8px;height:8px;border-radius:50%;background:#e02020;animation:liveDot 1.4s ease-in-out infinite}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:.25}}
/* vise utakmica u toku: zaglavlje levo, spisak meceva desno (na uzem ekranu jedno ispod drugog) */
.livegame{flex-wrap:wrap;align-items:flex-start}
.livegame .lgh{display:flex;align-items:center;gap:8px;flex:none}
.livegame .lgt{font-weight:600;color:var(--muted)}
.livegame .lgl{display:flex;flex-direction:column;gap:2px;min-width:0}
.livegame .lgm{font-weight:700}
.livegame.on .lgm{color:#c0392b}
/* ekipa koja je trenutno na terenu */
table.standtbl tr.playing{background:#fdeceb}
table.standtbl tr.playing td.tn span{color:#c0392b}
.playdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e02020;margin-left:7px;vertical-align:middle;animation:liveDot 1.4s ease-in-out infinite}
table.standtbl{width:100%;border-collapse:collapse;font-size:.92rem}
table.standtbl th{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:8px 4px;font-weight:700}
table.standtbl th.c,table.standtbl td.c{text-align:center}
table.standtbl td{padding:6px 4px;border-top:1px solid #eef0f6;vertical-align:middle}
table.standtbl tr.cut td{border-bottom:2px dashed #cfd5e6}
table.standtbl .pos{width:28px;height:28px;font-size:.8rem;margin:0 auto}
table.standtbl td.tn{font-weight:700}
table.standtbl td.tn img{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-right:10px}
table.standtbl td.tn span{vertical-align:middle}
.plus{color:#157a45;font-weight:700} .minus{color:#b32a2a;font-weight:700}
@media (max-width:480px){table.standtbl{font-size:.86rem} table.standtbl td.tn img{width:24px;height:24px;margin-right:7px}}

/* ---------- bodovanje: dodaci ---------- */
.roundpick{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.roundpick label{margin:0}
.roundpick select{font:inherit;font-weight:700;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.live{display:inline-block;margin-right:8px;padding:1px 8px 1px 18px;border-radius:999px;background:#fdecec;color:#c62828;font-size:.68rem;font-weight:800;letter-spacing:.5px;position:relative}
.live::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e53935;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.mv{flex:none;min-width:34px;text-align:center;font-size:.72rem;font-weight:800;padding:2px 5px;border-radius:999px;background:#f1f3f9;color:var(--muted)}
.mv.up{background:#e8f6ee;color:#157a45} .mv.down{background:#fdecec;color:#b32a2a}
.you{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:800;vertical-align:1px}
.pl.me{box-shadow:0 0 0 2px rgba(255,106,26,.55),var(--shadow)}
.gauge{display:block;height:5px;border-radius:99px;background:#eceef6;margin-top:5px;overflow:hidden}
.gauge i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--orange),#ffc46b)}
.progress{margin:0 0 12px}
.pbar{height:8px;border-radius:99px;background:#dfe3f0;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--navy2),var(--orange))}
.progress small{display:block;margin-top:5px;color:var(--muted);font-weight:600;font-size:.78rem}
.brk{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--muted);padding:8px 0 4px}
.brk b{color:var(--ink)} .brk .tot{margin-left:auto;font-weight:700}
.chips{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 0 34px}
.chip{font-size:.66rem;font-weight:800;border-radius:999px;padding:1px 7px;background:#eef0f6;color:var(--muted)}
.chip.gold{background:#fff1c4;color:#8a6200} .chip.bold{background:#ffe6d3;color:#a34400}
.dd{color:var(--muted)}
.avg{flex:none;font-weight:800;color:var(--navy2);font-size:.9rem;padding-right:6px}
ol.rl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ol.rl li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem}
.pv{flex:none;min-width:44px;text-align:center;padding:3px 6px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-size:.9rem}
#viewRules .card p{line-height:1.5}
.stat small{white-space:nowrap}
@media (max-width:480px){
  .tabs button{font-size:.78rem}
  .pl-head{gap:8px;padding:10px}
  .mv{min-width:28px;font-size:.66rem}
  .pl-detail{padding:4px 8px 12px;overflow-x:auto}
  table.cmp{font-size:.84rem}
  table.cmp th{font-size:.6rem;letter-spacing:.2px;padding:7px 2px}
  table.cmp td{padding:4px 2px}
  table.cmp img{width:22px;height:22px;margin-right:6px}
  .chips{margin-left:0}
  .diff{min-width:28px;padding:2px 6px}
  .av{width:38px;height:38px}
}
@media (max-width:480px){
  h1{font-size:1.45rem} header img{height:54px}
  .hdr-actions{position:absolute;top:12px;right:14px;gap:6px}
  .lang-switch{width:34px;height:34px;padding:0;font-size:.66rem;display:grid;place-items:center}
  .help-link{width:34px;height:34px;padding:0;font-size:0;display:grid;place-items:center}
  .help-link::before{width:24px;height:24px;margin:0;font-size:.95rem}
  .hdr-logo-btn>div{padding-right:0}
  header{padding:22px 14px 40px}
  .arrows button{width:32px;height:32px}
  .team img{width:44px;height:44px}
  .name{font-size:.98rem;white-space:normal;line-height:1.15;overflow:visible;text-overflow:clip}
  .two{grid-template-columns:1fr}
  .pbtn.out{margin-left:0}
  .avatar{width:76px;height:76px}
  .tabs button{font-size:.84rem;padding:10px 2px}
}

/* ---------- tipovanje pobednika ---------- */
.tip-head{display:grid;gap:10px}
.roundnav{display:flex;align-items:center;gap:10px}
.rn-mid{flex:1;text-align:center;display:grid;line-height:1.2}
.rn-mid strong{font-size:1.15rem}
.rn-mid small{color:var(--muted);font-size:.8rem}
.rn-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#f6f7fc;font:inherit;font-size:1.4rem;line-height:1;font-weight:700;color:var(--ink);cursor:pointer}
.rn-btn:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.rn-btn:disabled{opacity:.35;cursor:default}
.tgames{display:grid;gap:10px;margin:12px 0}
.tgame{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 1px 2px rgba(14,22,51,.04)}
.tgame.picked{border-color:#ffd2b0}
.tteams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.tside{display:grid;justify-items:center;align-content:center;gap:2px;padding:10px 6px;border-radius:12px;border:2px solid var(--line);background:#fafbfe;font:inherit;color:var(--ink);cursor:pointer;text-align:center;min-height:118px;transition:border-color .15s,background .15s,transform .1s}
.tside:hover:not(:disabled){border-color:#ffb98a;background:#fff8f2}
.tside:active:not(:disabled){transform:scale(.98)}
.tside img{width:44px;height:44px;object-fit:contain}
.tside .tname{font-weight:800;font-size:.92rem;line-height:1.15;overflow-wrap:anywhere}
.tside .tlab{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.tside .tpts{margin-top:2px;font-size:.78rem;font-weight:800;color:var(--orange)}
.tside .tpts.flat{color:var(--muted);font-weight:700}
.tside .tpts.pending{font-style:italic;font-weight:600}
.tside.sel .tpts{color:var(--orange)}
.tside.sel .tpts.pending{color:var(--muted)}
.tside.sel{border-color:var(--orange);background:#fff2e8;box-shadow:0 0 0 2px rgba(255,106,26,.18)}
.tside:disabled{cursor:default;opacity:.92}
.tside.won{border-color:var(--z1);background:#e9f7ef}
.tside.lost{border-color:var(--bad);background:#fdeeee}
.tmid{display:grid;align-content:center;justify-items:center;text-align:center;min-width:64px;line-height:1.2}
.tmid b{font-size:1.05rem}
.tmid small{color:var(--muted);font-size:.72rem;max-width:86px}
.tmid.done b{font-size:1.2rem}
.tdist{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--muted)}
.tdist .bar{flex:1;height:8px;background:#e4e7f1;border-radius:999px;overflow:hidden}
.tdist .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--orange2))}
.tres{margin:8px 0 0;font-size:.85rem;font-weight:700;text-align:center}
.tres.ok{color:#155b34}.tres.bad{color:#8a1f1f}.tres.none{color:var(--muted);font-weight:600}
.segtabs{display:flex;gap:6px;margin:14px 0 8px}
.segtabs button{flex:1;padding:10px;border-radius:12px;border:1px solid var(--line);background:#f6f7fc;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer}
.segtabs button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.ttable{width:100%;border-collapse:collapse;font-size:.95rem}
.ttable th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.ttable td{padding:9px 8px;border-bottom:1px solid #f0f2f8}
.ttable th:nth-child(n+3),.ttable td:nth-child(n+3){text-align:right;white-space:nowrap}
.ttable .pn{display:flex;align-items:center;gap:8px;font-weight:650;overflow-wrap:anywhere}
/* ime sme da se prelomi (dugi nadimci), ali ne sme da se stisne u kolonu od jednog slova kad uz njega stoje ikonice */
.ttable .pn .nm{flex:0 1 auto;min-width:4.5em}
.tlogo{width:22px;height:22px;object-fit:contain;flex:none}
.pname{background:none;border:0;padding:0;font:inherit;font-weight:650;color:var(--ink);cursor:pointer;text-align:left}
.pname:hover{color:var(--orange);text-decoration:underline}
.pname:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
/* dugme koje izgleda kao link – "Zaboravio/la si ime ili PIN?" */
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--orange);font-weight:700;text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--orange2)}
.linklike:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
/* admin: prikaz jednokratnog linka za nov PIN */
.reset-link input{width:100%;padding:8px 10px;font:inherit;font-size:.85rem;border:1.5px solid #dfe3f0;border-radius:8px;background:#f8f9fd}

/* ---------- statistika igrača (klik na ime u rang listi Tipovanja) ---------- */
.shead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mini-av.big{width:46px;height:46px}
.sname{font-size:1.15rem;font-weight:800;line-height:1.2}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stile{background:#f8f9fd;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;min-width:0}
.stile .sv{font-size:1.25rem;font-weight:800;color:var(--orange);line-height:1.15;overflow-wrap:anywhere}
.stile .sl{font-size:.72rem;color:var(--muted);margin-top:2px;font-weight:700}
.stile .ss{font-size:.68rem;color:var(--muted);margin-top:3px;line-height:1.25}
.scard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.sct{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.schart{width:100%;height:46px;display:block}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #f2f4fa;font-size:.9rem}
.srow:last-child{border-bottom:0}
.srow .sk{color:var(--muted);flex:0 0 auto}
.srow .sva{text-align:right;min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .stile .sv{font-size:1.1rem}
  .srow{flex-direction:column;align-items:flex-start;gap:2px}
  .srow .sva{text-align:left}
}
.ttable .pts{font-weight:800;color:var(--orange)}
.ttable .you-row{background:#fff6ee}
.trank{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:.85rem;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.trank.g{background:#ffb703}
.trank.s{background:#c9ccd4}
.trank.b{background:#c78a4e}
.trank-n{color:var(--muted);font-weight:700}
.mini-av{flex:none;width:26px;height:26px;border-radius:50%;background:#e4e7f1 center/cover no-repeat}
.joker-badge{flex:none;display:inline-flex;align-items:center;color:#7b4fe0;cursor:default}
.bonus-badge{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:800;color:#a15c00;background:#fff1d6;border:1px solid #f0cf8f;border-radius:999px;padding:2px 7px;white-space:nowrap;vertical-align:middle;cursor:default}
/* ikonice osvojenih bonusa uz ime igrača u ukupnoj tabeli (zlato/srebro/bronza po visini bonusa) */
.bwrap{flex:none;display:inline-flex;align-items:center;gap:3px;margin-left:5px}
.bbadge{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:.66rem;font-weight:900;line-height:1;cursor:default;
  border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 2px rgba(14,22,51,.18);text-shadow:0 1px 0 rgba(255,255,255,.45)}
.bbadge.g{background:linear-gradient(145deg,#ffe07a,#f0b429);color:#6b4400;border-color:#d99b12}
.bbadge.s{background:linear-gradient(145deg,#f2f4f8,#c3cad6);color:#4a5163;border-color:#aeb6c4}
.bbadge.b{background:linear-gradient(145deg,#e8b48a,#c47b46);color:#5a3116;border-color:#b06f3c}
.bbadge.more{width:auto;min-width:18px;padding:0 5px;border-radius:999px;background:#eef0f6;color:#66708f;border-color:#dfe3ee;box-shadow:none;text-shadow:none;font-weight:800}
/* forma igrača (poslednjih 5 kola) i bedževi/dostignuća na kartici igrača */
.formwrap{display:flex;flex-wrap:wrap;gap:6px}
.formpill{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:800;border:1px solid;cursor:default}
.formpill.good{background:#eafbf1;border-color:#bfe9cf;color:#1f8a4c}
.formpill.bad{background:#fdecec;border-color:#f3c6c6;color:#c23b3b}
.achwrap{display:flex;flex-wrap:wrap;gap:6px}
.achbadge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#fff1e6;border:1px solid #ffd3ac;color:#a15c00;font-size:.78rem;font-weight:800;white-space:nowrap;cursor:default}
.achbadge.expert{background:#f1ecff;border-color:#cdbdfa;color:#5b3fb0}
.achbadge.bad{background:#fdecea;border-color:#f3b7ae;color:#a33025}
.hdr-badges{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.22);font-size:.72rem;font-weight:800;vertical-align:1px}
.achmini{flex:none;display:inline-flex;align-items:center;gap:2px;margin-left:5px}
.achmini-ic{font-size:.8rem;line-height:1;cursor:default}
.psum-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.psum-ach{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.psum-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#f1f2f6;font-size:1rem;filter:grayscale(1);opacity:.55;cursor:default}
.psum-ic.on{background:#fff1e6;filter:none;opacity:1}
@media (max-width:480px){.psum-tiles{grid-template-columns:repeat(2,1fr)}}
.hl-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f0f2f8}
.hl-row:last-child{border-bottom:0}
.hl-ic{flex:none;width:36px;height:36px;border-radius:50%;background:#f1f2f6;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.hl-txt{flex:1 1 auto;min-width:0}
.hl-txt b{display:block;font-size:.92rem}
.hl-desc{color:var(--muted);font-size:.8rem}
.hl-who{flex:0 1 auto;max-width:56%;text-align:right}
.hl-name-row{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.hl-logo{width:20px;height:20px;object-fit:contain;flex:none}
.hl-name{display:block;font-weight:700;font-size:.9rem}
.hl-val{display:block;color:var(--orange);font-weight:800;font-size:.85rem;white-space:normal;word-break:break-word}
@media (max-width:480px){.hl-row{flex-wrap:wrap}.hl-who{text-align:left;margin-left:48px}.hl-name-row{justify-content:flex-start}}
.hl-badge{background:#fff6ee;border-radius:10px;padding:9px 10px;margin-top:4px;border-bottom:0}
.hl-badge .hl-ic{background:#ffe4c7}
@media (max-width:480px){
  .tside{min-height:108px;padding:8px 4px}
  .tside .tname{font-size:.85rem}
  .tmid{min-width:52px}
  .tmid small{max-width:70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.tstatus{margin:10px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem;line-height:1.4;font-weight:600}
.tstatus.open{background:#e6f6ec;color:#12683a;border:1px solid #b9e3c9}
.tstatus.part{background:#fff4e0;color:#8a4b00;border:1px solid #f3d9a8}
.tstatus.shut{background:#eef0f6;color:#4a5578;border:1px solid #dfe3f0}
.tres.mine{color:#12683a}
.jokerinfo{margin:8px 0 0;padding:10px 12px;border-radius:10px;font-size:.85rem;line-height:1.4;font-weight:600;background:#f4eeff;color:#4b2e8a;border:1px solid #ddd0f7}
.jokerrow{display:flex;justify-content:flex-end;margin-bottom:8px}
.joker-ic{display:inline-flex;flex:none}
.joker-ic svg{display:block}
.jokerbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.78rem;font-weight:800;padding:7px 13px 7px 11px;border-radius:999px;border:1.5px solid #ddd0f7;background:#f4eeff;color:#5a3aa8;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.jokerbtn:hover:not(:disabled){background:#ebe0fd;border-color:#c6b3f2}
.jokerbtn:active:not(:disabled){transform:scale(.97)}
.jokerbtn.on{background:linear-gradient(135deg,#7b4fe0,#a179ef);border-color:transparent;color:#fff;box-shadow:0 4px 10px rgba(123,79,224,.35)}
.jokerbtn.on.locked{background:linear-gradient(135deg,#8f8296,#a89bb0);box-shadow:none}
.jokerbtn:disabled{cursor:default;opacity:.9}
.jokerbtn.disabled:not(.on){opacity:.55}
.jokerbtn-check{display:inline-flex;font-size:.85em}
.joker-stats{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.joker-item{position:relative;background:#f4eeff;border:1px solid #ddd0f7;border-radius:12px;padding:12px 14px;padding-right:40px}
.joker-item b{display:block;font-size:.78rem;color:#5a3aa8;margin-bottom:3px}
.joker-item span{font-size:.85rem;color:var(--ink)}
.joker-item-ic{position:absolute;top:12px;right:12px;color:#a684ee}
@media (max-width:520px){.joker-stats{grid-template-columns:1fr}}
.tabs-wrap{position:relative}
.tabs-burger{display:none}
@media (min-width:521px){
  #tabsBurgerLabel,.tabs-burger-ic{display:none}
}
@media (max-width:520px){
  .tabs-burger{
    display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
    position:sticky;top:8px;z-index:6;margin-bottom:14px;
    padding:11px 14px;border:1px solid rgba(228,231,241,.9);border-radius:16px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:var(--shadow-lg);font:inherit;font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;
  }
  .tabs-wrap.open .tabs-burger{border-color:var(--orange);color:var(--orange)}
  .tabs-burger-ic{flex:none;width:18px;height:2px;background:currentColor;position:relative}
  .tabs-burger-ic::before,.tabs-burger-ic::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
  .tabs-burger-ic::before{top:-6px}
  .tabs-burger-ic::after{top:6px}
  #tabsBurgerLabel{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs{
    display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:7;
    flex-direction:column;gap:2px;
    background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid rgba(228,231,241,.9);
    padding:6px;margin-bottom:0;
  }
  .tabs-wrap.open .tabs{display:flex}
  .tabs button{flex:none;width:100%;text-align:left;font-size:.9rem;padding:11px 12px;border-radius:10px}
  .tabs button[aria-selected=true]{box-shadow:none}
}

/* ---------- veliki ekrani: šira kolona ---------- */
@media (min-width:1100px){
  .wrap{max-width:960px}
  .tgames{grid-template-columns:1fr 1fr;gap:12px}
  /* Naslovna: widgets (Opšta statistika / Statistika po timovima / Mini rang lista) u 2 kolone */
  .widgets-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-bottom:14px}
  .widgets-grid .card{margin-bottom:0}
  .widgets-grid .widget-fill{display:flex;flex-direction:column}
  .widgets-grid .widget-fill-bottom{margin-top:auto;padding-top:10px}
}
@media (min-width:1500px){
  .wrap{max-width:1080px}
  /* na najširim ekranima ima mesta za sve tri kolone odjednom */
  .widgets-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1100px){
  .tlist{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(10,auto);gap:9px 14px}
}

/* ---------- napredak, bedževi, kalkulator ---------- */
.badgebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:14px;font-size:.85rem}
.bb-lab{color:var(--muted);font-weight:700}
.bb-item{display:inline-flex;align-items:center;gap:4px}
.badge-chip{display:inline-block;margin-left:5px;font-size:.95em;cursor:default}
.prog-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;margin:0 0 10px}
.prog-stats b{color:var(--ink)}
.muted-mini{color:var(--muted);font-size:.85rem}
.prog-chart{margin:4px 0 12px}
.prog-chart svg{width:100%;height:auto;display:block}
.pg-axis{stroke:var(--line);stroke-width:1.5}
.pg-lab{fill:var(--muted);font-size:11px;font-family:inherit}
.prog-cmp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem}
.prog-cmp label{margin:0;font-weight:700;font-size:.85rem}
.prog-cmp select{padding:7px 10px;border-radius:10px;border:1.5px solid var(--line);background:#f8f9fd;font:inherit}

/* ---------- javni profil igrača ---------- */
.profile-card{max-width:none;margin:0}
.profile-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.profile-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;background:#eef0f6}
.profile-photo.ph{display:grid;place-items:center;font-size:30px}
.profile-top h2{margin:0 0 2px;font-size:1.3rem}
.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin:0 0 8px}
.profile-stats .ps{background:#f8f9fd;border-radius:12px;padding:10px 4px}
.profile-stats .ps b{display:block;font-size:1.25rem;color:var(--orange)}
.profile-stats .ps small{color:var(--muted);font-size:.72rem}
.profile-badges{font-size:.9rem;margin:4px 0 0}
@media (max-width:480px){.profile-stats{grid-template-columns:repeat(2,1fr)} .profile-photo{width:60px;height:60px}}

/* ---------- zaglavlje profila, faze sezone, grafikon sa rivalima, rekordi ---------- */
.hero{background:linear-gradient(135deg,#0b1430,#1a2b66);color:#fff;border-radius:16px;padding:16px;margin-bottom:10px}
.hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-av{flex:none;width:64px;height:64px;border-radius:50%;background:#2b3a7a center/cover no-repeat;border:2px solid rgba(255,255,255,.35)}
.hero-id{flex:1 1 140px;min-width:0}
.hero-name{font-size:1.35rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.hero .note{color:rgba(255,255,255,.7)}
.hero-stats{display:flex;gap:6px;margin-left:auto}
.hero-stat{min-width:68px;text-align:center;background:rgba(255,255,255,.09);border-radius:12px;padding:8px 6px}
.hero-stat .hv{font-size:1.25rem;font-weight:800;color:#ff8a3d;line-height:1.15}
.hero-stat .hl{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.7);margin-top:2px}
.phase{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}
.phase-flags{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.phase-flag{width:38px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:rgba(255,255,255,.08);border-radius:4px 4px 14px 14px;filter:grayscale(1);opacity:.4}
.phase-flag.below{opacity:.75;filter:none}
.phase-flag.on{background:#f0b429;opacity:1;filter:none;box-shadow:0 0 0 2px rgba(240,180,41,.45)}
.phase-main{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.phase-cap{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.04em}
.phase-name{font-size:1.2rem;font-weight:800;color:#f0b429;line-height:1.2}
.phase-sub{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:2px}
.phase-ppp{text-align:right;font-size:.8rem;color:rgba(255,255,255,.7)}
.phase-ppp b{font-size:1.3rem;color:#fff}
.phase-next{font-size:.74rem;margin-top:2px}
.phase-next b{color:#7ee0d8}
.phase-bar{height:6px;background:rgba(255,255,255,.15);border-radius:99px;margin:10px 0 8px;overflow:hidden}
.phase-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff6a1a,#f0b429);border-radius:99px}
.phase .linklike{color:#ff8a3d}
.phase-list{margin-top:8px}
.phase-row{display:flex;gap:8px;justify-content:space-between;padding:6px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.phase-row.cur{color:#f0b429;font-weight:800}
.phase-row .pr-top{flex:1;text-align:right;color:rgba(255,255,255,.6);font-size:.74rem}
.phase-row.cur .pr-top{color:rgba(240,180,41,.8)}
.phase-row .pr-thr{min-width:44px;text-align:right;font-weight:800}
.phase-list .note{color:rgba(255,255,255,.65)}
.cum-sel{max-width:100%}
.cum-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:.8rem;font-weight:700}
.cum-legend .cl{display:inline-flex;align-items:center;gap:6px}
.cum-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.recgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rec{background:#f8f9fd;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;min-width:0}
.rec .rv{font-size:1.25rem;font-weight:800;color:var(--orange);line-height:1.15}
.rec .rl{font-size:.72rem;font-weight:700;color:var(--muted);margin-top:2px}
.rec .rs{font-size:.66rem;color:var(--muted);margin-top:3px;line-height:1.25;overflow-wrap:anywhere}
@media (max-width:560px){
  .hero-stats{margin-left:0;width:100%}
  .hero-stat{flex:1;min-width:0}
  .recgrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- navigacija: donja traka + bočni meni ---------- */
.tabs-wrap{display:none!important}
.hdr-actions .lang-switch,.hdr-actions .help-link{display:none}
body{padding-bottom:96px}
body.nav-lock{overflow:hidden}
.nav-burger{flex:none;width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s}
.nav-burger:hover{background:rgba(255,255,255,.26)}
.nav-burger svg{width:22px;height:22px}
.bnav{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:30;width:min(560px,calc(100vw - 16px));display:flex;align-items:flex-end;justify-content:space-between;background:rgba(11,20,48,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 10px 30px rgba(11,20,48,.35)}
.bn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border:0;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;border-radius:14px;transition:color .15s}
.bn-item:hover{color:#fff}
.bn-ic{display:grid;place-items:center;width:26px;height:26px}
.bn-ic svg{width:24px;height:24px}
.bn-lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1}
.bn-item.on,.bn-item.sheet-open{color:var(--orange2)}
.bn-item.center{flex:none;width:78px;margin-top:-26px}
.bn-item.center .bn-ic{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border:4px solid #0b1430;box-shadow:0 6px 16px rgba(255,106,26,.45)}
.bn-item.center .bn-ic svg{width:26px;height:26px}
.bn-item.center.on{color:var(--orange2)}
.bn-item.center:not(.on) .bn-ic{filter:saturate(.8)}
.bn-me{border-radius:50%;background:rgba(255,255,255,.12) center/cover no-repeat}
.bn-me.has svg{display:none}
.bn-item.on .bn-me{box-shadow:0 0 0 2px var(--orange2)}
.bsheet{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:29;width:min(380px,calc(100vw - 24px))}
.bsheet-in{background:#fff;border-radius:18px;padding:10px;box-shadow:var(--shadow-lg);border:1px solid var(--line);animation:dlgin .15s ease-out}
.bsheet-t{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:4px 8px 8px}
.bsheet-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:none;border-radius:12px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.bsheet-row:hover{background:#f4f6fb}
.bsheet-row.cur{background:#fff1e6;color:#a34400}
.bsheet-row .ic{font-size:1.25rem}
#toast{bottom:96px}
.ndrawer{position:fixed;inset:0;z-index:40}
.nd-bg{position:absolute;inset:0;background:rgba(11,20,48,.55);opacity:0;transition:opacity .2s}
.nd-panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);background:#10193a;color:#fff;overflow-y:auto;padding:16px 14px 24px;transform:translateX(100%);transition:transform .2s;box-shadow:-10px 0 30px rgba(0,0,0,.35)}
.ndrawer.open .nd-bg{opacity:1}
.ndrawer.open .nd-panel{transform:none}
.nd-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.nd-av{flex:none;width:46px;height:46px;border-radius:50%;background:#2b3a7a center/cover no-repeat;border:2px solid rgba(255,255,255,.3)}
.nd-who{flex:1;min-width:0}
.nd-name{font-size:1.1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nd-sub{font-size:.78rem;color:rgba(255,255,255,.6)}
.nd-x{flex:none;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.nd-x svg{width:20px;height:20px}
.nd-langs{display:inline-flex;gap:4px;background:rgba(255,255,255,.08);border-radius:12px;padding:4px;margin-bottom:12px}
.nd-lang{border:0;background:none;color:rgba(255,255,255,.7);font:inherit;font-weight:800;font-size:.8rem;padding:7px 16px;border-radius:9px;cursor:pointer}
.nd-lang.on{background:rgba(255,255,255,.18);color:#fff}
.nd-sec{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.45);padding:14px 10px 4px}
.nd-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border:0;background:none;color:#fff;font:inherit;font-weight:700;font-size:.95rem;border-radius:12px;cursor:pointer;text-align:left}
.nd-row:hover{background:rgba(255,255,255,.07)}
.nd-row.cur{background:rgba(255,106,26,.18)}
.nd-row .ic{flex:none;width:26px;text-align:center;font-size:1.1rem}
.nd-row .lb{flex:1;min-width:0}
.nd-row .chev{color:rgba(255,255,255,.4);font-size:1.2rem}
.nd-div{height:1px;background:rgba(255,255,255,.12);margin:10px 4px}
@media (max-width:480px){
  .nav-burger{width:38px;height:38px}
}
@media (min-width:1100px){
  .bnav{width:560px}
}

/* ---------- stranica utakmice (match.php) ---------- */
body.mp{padding-bottom:30px}
.mp-top{background:linear-gradient(135deg,#0b1430,#1a2b66);color:#fff;padding:10px 0;border-bottom:3px solid var(--orange)}
.mp-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mp-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;min-width:0}
.mp-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-topr{display:flex;gap:8px;flex:none}
.mp-play,.mp-lang{color:#fff;text-decoration:none;font-weight:800;font-size:.82rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.12)}
.mp-play{background:var(--orange);border-color:var(--orange)}
.mp-main{padding-top:0}
.mp-hero{background:linear-gradient(135deg,#0b1430,#1a2b66);color:#fff;border-radius:18px;padding:18px 14px;margin-bottom:12px;text-align:center}
.mp-meta{font-size:.82rem;color:rgba(255,255,255,.75);font-weight:700;margin-bottom:12px}
.mp-h1{margin:0;font-size:1.6rem}
.mp-teams{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mp-team{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.mp-team img{width:64px;height:64px;object-fit:contain}
.mp-team b{font-size:1.05rem;line-height:1.2;overflow-wrap:anywhere}
.mp-team small{color:rgba(255,255,255,.6);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.mp-mid{flex:none;min-width:96px}
.mp-score{font-size:2rem;font-weight:800;color:#ff8a3d;line-height:1.1}
.mp-score.vs{font-size:1.4rem;color:rgba(255,255,255,.5)}
.mp-status{font-size:.74rem;color:rgba(255,255,255,.7);margin-top:4px;font-weight:700}
.mp-main .card h2{margin:0 0 10px;font-size:1.05rem}
.mp-an{margin:0;line-height:1.55}
.mp-cap{margin:0 0 6px;font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mp-bar{display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:800}
.mp-bar .tdist{flex:1;margin:0}
.mp-bl{flex:none;max-width:34%;overflow-wrap:anywhere}
.mp-bl.r{text-align:right}
.mp-forms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mp-fh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mp-fl img{width:30px;height:30px;object-fit:contain;display:block}
.mp-pills{display:flex;gap:5px;margin-bottom:6px}
.mp-pill{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff}
.mp-pill.w{background:#1f9d55}.mp-pill.l{background:#d33}
.mp-games{list-style:none;margin:6px 0 0;padding:0;font-size:.86rem;display:grid;gap:4px}
.mp-games a{text-decoration:none}
.mp-cta{text-align:center}
.mp-cta p{margin:0 0 10px;font-weight:700}
.mp-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.84rem;font-weight:700;margin:8px 0}
.mp-nav a{color:var(--navy2);text-decoration:none}
.mp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mp-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;color:var(--ink);background:#f8f9fd;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.mp-list a:hover{border-color:var(--orange)}
.mp-lt{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.mp-lt.r{justify-content:flex-end;text-align:right}
.mp-lt img{width:34px;height:34px;object-fit:contain;flex:none}
.mp-lt b{font-size:.92rem;overflow-wrap:anywhere}
.mp-lm{flex:none;text-align:center;font-weight:800;min-width:74px}
.mp-lm small{display:block;font-size:.66rem;color:var(--muted);font-weight:600}
.mp-rounds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.mp-rounds a{min-width:34px;text-align:center;padding:6px 8px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:.82rem}
.mp-rounds a.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.mp-foot{padding:14px 0;text-align:center;color:var(--muted);font-size:.84rem}
.mp-foot a{color:var(--muted)}
.tmatch{display:inline-block;margin-top:8px;font-size:.78rem;font-weight:700;color:var(--navy2);text-decoration:none}
.tmatch:hover{color:var(--orange)}
@media (max-width:560px){.mp-forms{grid-template-columns:1fr}.mp-team img{width:52px;height:52px}.mp-mid{min-width:80px}}

/* ---------- duel 1 na 1 ---------- */
.duelcard{background:#f8f9fd;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.dr{font-weight:800;font-size:.9rem}
.dtag{font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px;background:#eef0f6;color:var(--muted)}
.dtag.open{background:#fff1c4;color:#8a6200}.dtag.active{background:#e0f0ff;color:#0b5aa8}.dtag.done{background:#eafbf1;color:#1f8a4c}.dtag.expired,.dtag.cancelled{background:#fdecec;color:#c23b3b}
.dvs{display:flex;align-items:center;justify-content:space-between;gap:6px}
.dside{flex:1;min-width:0;text-align:center;border-radius:12px;padding:8px 4px;border:2px solid transparent}
.dside.win{border-color:#f0b429;background:#fff8e1}
.dside.lose{opacity:.65}
.dside .mini-av.big{margin:0 auto 4px;width:44px;height:44px}
.dn{font-weight:800;font-size:.92rem;overflow-wrap:anywhere;line-height:1.2}
.dp{font-size:1.5rem;font-weight:800;color:var(--orange);line-height:1.2;margin-top:2px}
.dc{font-size:.7rem;color:var(--muted)}
.dx{flex:none;font-weight:800;color:var(--muted);font-size:.8rem}
.dres{margin:10px 0 0;font-weight:800;text-align:center}
.duel-invite{border:2px solid var(--orange)}
.rp-list{margin:0;padding-left:20px;display:grid;gap:8px;line-height:1.5}

/* Link ka izveštaju ("Analitičar kaže") */
a.hl-report{text-decoration:none;color:inherit}
a.hl-report .hl-val{color:var(--orange,#ff6a1a);font-weight:800}
a.nd-row{text-decoration:none;color:#fff}

/* Podmeni u bočnom meniju (strelica ga otvara bez zatvaranja menija) */
.nd-row .chev{padding:8px 10px;margin:-8px -6px -8px 0;transition:transform .15s}
.nd-row .chev.open{transform:rotate(90deg)}
.nd-sub2{margin:0 0 4px 34px;border-left:2px solid rgba(255,255,255,.12);padding-left:6px}
.nd-sub2[hidden]{display:none}
.nd-sub2 .nd-row{font-weight:600;font-size:.88rem;padding:9px 10px}

/* Javne stranice: donja traka kao na glavnoj igri */
body.mp{padding-bottom:96px}
.bsheet-row{text-decoration:none}

/* PWA / push kartica u profilu */
.pushbox{display:grid;gap:10px}
.pushbox .btn{justify-self:start}
.push-prefs{display:grid;gap:8px;margin:2px 0}
.push-pref{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.push-pref input{width:20px;height:20px;accent-color:var(--orange,#ff6a1a)}

/* broj obaveštenja (duel) */
.nbadge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:#e5322d;color:#fff;font-size:.72rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px rgba(11,20,48,.9)}
.nav-burger,.bn-item{position:relative}
.nav-burger>.nbadge,.bn-item>.nbadge{position:absolute;top:-4px;right:-4px;margin:0}
.bn-item>.nbadge{top:0;right:calc(50% - 24px)}
.nd-row>.nbadge{margin-left:auto;margin-right:6px}
.bsheet-row>.nbadge{margin-left:auto}

/* izbor igrača za duel */
.duel-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.duel-pick select{flex:1 1 180px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:inherit}

.ttable tr.unranked{opacity:.6}

/* javni izveštaj: linkovi na profile igrača + dugme ka analizi utakmice */
a.pl-link{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:2px}
a.pl-link:hover{color:var(--orange)}
.rp-more{margin:12px 0 0}
a.rp-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--navy2);font-weight:700;font-size:.85rem;text-decoration:none}
a.rp-btn:hover{border-color:var(--orange);color:var(--orange)}

/* maskota analitičara (pametna lopta sa naočarima) */
img.ana-ic{width:1.35em;height:1.35em;vertical-align:-.3em;display:inline-block}
.nd-row .ic img.ana-ic,.bsheet-row .ic img.ana-ic{width:24px;height:24px}
.mp-mascot{display:block;margin:0 auto 6px;width:64px;height:64px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}

/* lista igrača (/players) i naslov profila */
.pl-search{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);font:inherit;margin-bottom:12px;background:var(--card);color:var(--ink);box-sizing:border-box}
.pl-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pl-grid li[hidden]{display:none}
.pl-grid a{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.pl-grid a:hover{border-color:var(--orange)}
.pl-grid .rk{min-width:2.4em;text-align:center;font-weight:800;color:var(--orange)}
.pl-grid .nm{flex:1;font-weight:700;overflow-wrap:anywhere}
.pl-grid .pt{text-align:right;font-weight:800;font-size:1.05rem;line-height:1.1}
.pl-grid .pt small{display:block;font-weight:600;font-size:.72rem;color:var(--muted)}
.pf-h1{font-size:1.5rem;margin:6px 4px 12px}
#profileBody{margin-top:0}
.pf-head{display:flex;align-items:center;gap:12px;margin:0 4px 14px}
.pf-head .pf-h1{margin:0}
.pf-share{flex:none;width:42px;height:42px;display:grid;place-items:center;padding:0;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--navy2);cursor:pointer;box-shadow:var(--shadow)}
.pf-share:hover{border-color:var(--orange);color:var(--orange)}
.pf-share svg{width:20px;height:20px}

/* bodovi po kolima: uski stubići levo, bodovi iznad, broj kola ispod, bonus žuto */
.rbars{display:flex;align-items:flex-end;justify-content:flex-start;gap:8px;overflow-x:auto;padding:4px 2px 2px}
.rbar{flex:none;width:34px;display:flex;flex-direction:column;align-items:center;gap:3px}
.rb-v{font-size:.72rem;font-weight:800;color:var(--ink);line-height:1}
.rb-col{width:100%;display:flex;align-items:flex-end}
.rb-seg{width:100%;display:flex;flex-direction:column;border-radius:5px 5px 2px 2px;overflow:hidden}
.rb-bonus{display:block;background:#f0b429}
.rb-base{display:block;background:#ff6a1a}
.rb-r{font-size:.7rem;font-weight:700;color:var(--muted);line-height:1}

/* razmak između zaglavlja i sadržaja na svim stranicama */
main.wrap{margin-top:20px}
.formpill.now{background:#fff1e6;border-color:#ffd2b0;color:#a34400;margin-left:6px}
/* profil: grupe kartica po igri (okvir + naslov) */
.pf-game{display:grid;gap:12px;padding:10px;margin:0 0 20px;border:2px solid #ffd2b0;border-radius:24px;background:rgba(255,106,26,.04)}
.pf-game.board{border-color:#c7d0f3;background:rgba(26,43,102,.04)}
.pf-game-h{font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--orange);padding:4px 8px 0}
.pf-game.board .pf-game-h{color:var(--navy2)}
.pf-game > *{margin:0}

/* match: ko je profitirao */
.mp-prof{margin:6px 0 0;padding-left:1.3em}
.mp-prof li{margin:4px 0}
.mp-prof .chip{margin-left:4px}

/* PWA baner za instalaciju */
.pwa-ban{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;width:min(540px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;background:#fff;color:#0b1430;border:1px solid #dfe5f3;border-radius:16px;padding:12px;box-shadow:0 10px 30px rgba(11,20,48,.28)}
.pwa-ic{width:44px;height:44px;border-radius:10px;flex:none}
.pwa-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.8rem;line-height:1.3}
.pwa-tx b{font-size:.9rem}
.pwa-act{display:flex;flex-direction:column;gap:6px;flex:none}
.pwa-ok{background:#ff7a1a;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:800;cursor:pointer}
.pwa-no{background:transparent;color:inherit;opacity:.7;border:0;font-size:.75rem;cursor:pointer;padding:2px}
@media (min-width:720px){.pwa-ban{bottom:96px}}

/* Analiza utakmica – spisak na telefonu: logo iznad imena, bez lomljenja reči po slovu */
.mp-lt b{overflow-wrap:break-word;word-break:normal;hyphens:none}
@media (max-width:560px){
  .mp-list a{padding:10px 8px;gap:6px;align-items:center}
  .mp-lt,.mp-lt.r{flex:1 1 0;flex-direction:column;justify-content:center;text-align:center;gap:4px}
  .mp-lt.r{flex-direction:column-reverse}
  .mp-lt b{font-size:.82rem;line-height:1.2}
  .mp-lm{min-width:68px;font-size:.95rem}
}

/* Viber zajednica */
.viber-btn{display:inline-flex;align-items:center;gap:8px;background:#7360f2;color:#fff!important;text-decoration:none!important;font-weight:800;font-size:.86rem;border-radius:999px;padding:9px 16px;margin-top:8px;box-shadow:0 2px 8px rgba(115,96,242,.35)}
.viber-btn:hover{background:#5f4de0}
.viber-btn svg{flex:none}
.foot-viber{margin:4px 0 12px!important}

/* Uputstvo – odeljci po igri */
.help-sec{border:1px solid var(--line);border-radius:14px;margin:0 0 12px;background:var(--card)}
.help-sec>summary{cursor:pointer;list-style:none;font-weight:800;font-size:1rem;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.help-sec>summary::-webkit-details-marker{display:none}
.help-sec>summary::after{content:"▾";color:var(--orange);transition:transform .15s}
.help-sec[open]>summary::after{transform:rotate(180deg)}
.help-sec[open]>summary{border-bottom:1px solid var(--line)}
.help-sec-body{padding:12px 14px 4px}


a.rp-inline{display:inline-block;margin-left:4px;font-size:.8rem;font-weight:800;color:var(--navy2);text-decoration:none;background:#eef1fa;border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
a.rp-inline:hover{border-color:var(--orange);color:var(--orange)}

/* Info-balon umesto sistemskog title tooltipa (assets/tip.js) */
.tip-host{position:relative}
.tipi{position:absolute;top:-6px;right:-6px;width:14px;height:14px;padding:0;margin:0;border:0;border-radius:50%;background:var(--navy2);color:#fff;font:800 9px/14px Georgia,"Times New Roman",serif;font-style:italic;text-align:center;cursor:help;z-index:2;opacity:.9}
.tipi::after{content:"";position:absolute;inset:-9px}
.tipi:hover,.tipi:focus-visible,.tipi.tip-open{opacity:1;background:var(--orange)}
.tip-self{cursor:help}
.tip-self:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
.tip-pop{position:fixed;z-index:2147483000;max-width:min(260px,calc(100vw - 16px));box-sizing:border-box;background:#0b1430;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:8px 11px;font-size:.78rem;line-height:1.35;font-weight:600;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .12s}
.tip-pop.on{opacity:1}

/* Ko se slaže sa tobom */
.agr-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(60px,1fr) auto;align-items:center;gap:8px;padding:5px 0}
.agr-nm{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.agr-bar{height:10px;background:#e4e7f1;border-radius:999px;overflow:hidden}
.agr-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange2))}
.agr-row.opp .agr-bar i{background:linear-gradient(90deg,#6b7bd6,#8f9de8)}
.agr-v{font-size:.78rem;color:var(--muted);white-space:nowrap}
.agr-v b{color:var(--ink)}

/* izbor perioda iznad ukupne tabele + faze sezone */
.periodbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.periodbar select{flex:1;min-width:150px;max-width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:inherit}
.periodnote{margin:0 0 10px;font-weight:600}
.achbadge.gold{background:#fff4d6;color:#8a5a00;border-color:#f3c969}
.phase-card h2{margin:0 0 6px}
.phase-card .ph-win{margin:0 0 8px;font-size:1.02rem}
.phase-card .ph-meta{margin:0 0 8px;color:var(--muted,#6b7390);font-size:.9rem}