/* Layout: one narrow scoreboard column; hero with target rings, segmented disciplines, ranked rows with a "laťka Motoru" benchmark */
:root {
--bg:#020C30;
--panel:#0A1747;
--panel2:#10205C;
--line:#1E2F6E;
--fg:#F2F4FB;
--muted:#93A0CB;
--yellow:#FAD600;
--red:#FD0C12;
--blue:#1D4FB8;
--good:#43D69B;
--ink:#020C30;
--white:#FFFFFF;
--f-disp:"Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
--f-body:"Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color-scheme:dark;
}
* {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; padding-top:env(safe-area-inset-top, 0px);}
img {max-width:100%;}
#nl-badge-frame {display:none!important;}
[hidden] {display:none!important;}
.wrap {max-width:760px; margin:0 auto; padding-inline:16px; padding-block:12px 120px;}
button, input, select, textarea {font:inherit; color:inherit;}
button {cursor:pointer;}
:focus-visible {outline:2px solid var(--yellow); outline-offset:2px;}
a {color:var(--yellow);}

/* === HERO === */
.hero {position:relative; overflow:hidden; padding-block:20px 8px;}
.rings {position:absolute; right:-140px; top:-90px; width:420px; height:420px; border-radius:50%; pointer-events:none; opacity:.55;
 background:repeating-radial-gradient(circle, transparent 0 26px, var(--line) 26px 28px); -webkit-mask:radial-gradient(circle, #000 55%, transparent 72%); mask:radial-gradient(circle, #000 55%, transparent 72%);}
.rings::before, .rings::after {content:""; position:absolute; background:var(--line);}
.rings::before {left:50%; top:0; bottom:0; width:2px;}
.rings::after {top:50%; left:0; right:0; height:2px;}
.topbar {position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brands {display:flex; align-items:center; gap:14px;}
.lg-motor {height:58px; width:auto;}
.lg-cb {height:48px; width:auto;}
.brands .x {font-family:var(--f-disp); font-weight:700; font-size:22px; color:var(--muted);}
.eyebrow {position:relative; margin:22px 0 0; font-family:var(--f-disp); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);}
h1 {position:relative; margin:2px 0 0; font-family:var(--f-disp); font-style:italic; font-weight:800; font-size:clamp(56px, 16vw, 104px); line-height:.9; letter-spacing:-.01em; text-transform:uppercase; text-wrap:balance;}
h1 span {color:var(--red);}
.lead {position:relative; margin:14px 0 0; max-width:34em; color:var(--muted); font-size:17px;}
.lead b {color:var(--fg); font-weight:600;}
.prize {position:relative; margin-top:20px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:center; background:var(--yellow); color:var(--ink); border-radius:14px; padding:14px 16px;}
.prize .ic {grid-row:span 2; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-family:var(--f-disp); font-weight:800; font-size:22px;}
.prize .k {font-family:var(--f-disp); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.75;}
.prize .t {font-weight:700; font-size:17px; line-height:1.3; min-width:0; overflow-wrap:anywhere;}
.prize .d {grid-column:2; font-size:14px; font-weight:500;}
.stats {display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0 0; padding:0; list-style:none; color:var(--muted); font-size:14px;}
.stats b {color:var(--fg); font-family:var(--f-disp); font-size:20px; font-weight:700; margin-right:4px; font-variant-numeric:tabular-nums;}

.cta-row {position:relative; display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px;}

/* === DISCIPLINES === */
.tabs {position:sticky; top:0; z-index:5; margin-top:24px; padding-block:10px; background:var(--bg);}
.seg {display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:4px;}
.seg button {border:0; background:transparent; border-radius:10px; padding:10px 6px; font-family:var(--f-disp); font-weight:700; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); line-height:1.1;}
.seg button small {display:block; font-family:var(--f-body); font-weight:500; font-size:11px; letter-spacing:0; text-transform:none; opacity:.8;}
.seg button[aria-selected="true"] {background:var(--yellow); color:var(--ink);}
.bar {margin-top:14px; display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.bar .lab {font-family:var(--f-disp); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--red);}
.bar .val {font-family:var(--f-disp); font-weight:800; font-size:34px; line-height:1; font-variant-numeric:tabular-nums;}
.bar .val small {font-size:16px; color:var(--muted); font-weight:600;}
.bar .who {font-size:14px; color:var(--muted); min-width:0;}
.bar .who b {color:var(--fg);}
.bar .beat {grid-column:1 / -1; font-size:14px; color:var(--fg); border-top:1px solid var(--line); padding-top:10px;}
.bar .beat b {color:var(--yellow);}
.tools {display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center;}
.chip {border:1px solid var(--line); background:transparent; border-radius:999px; padding:6px 12px; font-size:14px; font-weight:600; color:var(--muted);}
.chip[aria-pressed="true"] {background:var(--fg); color:var(--ink); border-color:var(--fg);}
.search {flex:1 1 160px; min-width:0; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 14px; font-size:16px;}
.search::placeholder {color:var(--muted);}

/* === BOARD === */
.board {margin:12px 0 0; padding:0; list-style:none;}
.row {display:grid; grid-template-columns:44px 1fr auto; gap:6px 12px; align-items:center; padding-block:12px; border-bottom:1px solid var(--line); cursor:pointer;}
.row:hover {background:linear-gradient(90deg, transparent, var(--panel), transparent);}
.rank {font-family:var(--f-disp); font-style:italic; font-weight:800; font-size:30px; line-height:1; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums;}
.row.top .rank {color:var(--yellow);}
.who2 {min-width:0; display:flex; gap:10px; align-items:center;}
.av {flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 25%; border:2px solid var(--red); background:var(--panel2);}
.nmw {min-width:0;}
.nm {font-weight:700; font-size:17px; line-height:1.25; overflow-wrap:anywhere;}
.meta {margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:12.5px; color:var(--muted);}
.tag {display:inline-block; border-radius:5px; padding:1px 6px; font-family:var(--f-disp); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.tag.hrac {background:var(--red); color:var(--white);}
.tag.fan {background:var(--panel2); color:var(--fg);}
.tag.host {background:var(--blue); color:var(--white);}
.tag.win {background:var(--yellow); color:var(--ink);}
.row.hrac .nm {color:var(--yellow);}
.sc {text-align:right; min-width:74px;}
.sc .n {font-family:var(--f-disp); font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums;}
.sc .n small {font-size:14px; color:var(--muted); font-weight:600;}
.sc .xx {font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}
.hit {grid-column:2 / 4; height:4px; border-radius:2px; background:var(--panel2); overflow:hidden;}
.hit i {display:block; height:100%; background:var(--muted);}
.row.hrac .hit i {background:var(--red);}
.row.beat .hit i {background:var(--yellow);}
.divider {display:flex; align-items:center; gap:10px; padding-block:10px; font-family:var(--f-disp); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--red);}
.divider::before, .divider::after {content:""; flex:1; height:2px; background:var(--red);}
.empty {margin-top:14px; border:1px dashed var(--line); border-radius:14px; padding:26px 18px; text-align:center; color:var(--muted);}
.empty strong {display:block; color:var(--fg); font-family:var(--f-disp); font-size:24px; font-weight:700; text-transform:uppercase; margin-bottom:4px;}
.hint {margin:10px 0 0; font-size:13px; color:var(--muted);}

/* === JOIN AND RULES === */
h2 {margin:40px 0 12px; font-family:var(--f-disp); font-style:italic; font-weight:800; font-size:34px; line-height:1; text-transform:uppercase;}
.steps {margin:0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:s;}
.steps li {counter-increment:s; display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start;}
.steps li::before {content:counter(s); width:36px; height:36px; border-radius:50%; border:2px solid var(--yellow); color:var(--yellow); display:grid; place-items:center; font-family:var(--f-disp); font-weight:800; font-size:18px;}
.steps p {margin:6px 0 0; min-width:0;}
.steps b {color:var(--fg);}
details {margin-top:10px; border:1px solid var(--line); border-radius:12px; background:var(--panel);}
summary {cursor:pointer; padding:12px 16px; font-weight:700;}
details .in {padding:0 16px 14px; color:var(--muted); font-size:14.5px;}
details .in p {margin:8px 0 0;}
details .in ul {margin:8px 0 0; padding-left:18px;}
details .in b {color:var(--fg);}
.foot {margin-top:36px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:16px;}
.foot a {color:var(--muted);}

/* === SHARE SHEET === */
.sheet {position:fixed; inset:0; z-index:40; background:rgba(2,12,48,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center;}
.sheet .box {width:100%; max-width:520px; max-height:100%; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:22px 22px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));}
.sheet .hd {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.sheet h3 {margin:0; font-family:var(--f-disp); font-style:italic; font-weight:800; font-size:28px; text-transform:uppercase;}
.x-close {border:1px solid var(--line); background:transparent; border-radius:999px; width:40px; height:40px; font-size:22px; line-height:1; color:var(--muted);}
.preview {margin-top:14px; display:grid; place-items:center; background:var(--bg); border-radius:16px; padding:12px; min-height:200px;}
.preview canvas, .preview img {width:auto; max-width:100%; max-height:56vh; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45);}
.acts {margin-top:14px; display:grid; gap:10px;}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:13px 16px; font-weight:700; font-size:16px; background:var(--yellow); color:var(--ink); text-decoration:none;}
.btn.big {font-family:var(--f-disp); font-size:22px; letter-spacing:.04em; text-transform:uppercase; padding:14px 16px;}
.btn.ghost {background:transparent; color:var(--fg); border:1px solid var(--line);}
.btn.danger {background:var(--red); color:var(--white);}
.btn[disabled] {opacity:.55;}
.small {font-size:13px; color:var(--muted); margin:10px 0 0;}
.small b {color:var(--fg);}

/* === ADMIN === */
.zad {border:1px solid var(--line); border-radius:14px; padding:12px; margin-top:10px; background:var(--bg);}
.zad-h {display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:18px;}
.zad-n {display:flex; gap:22px; margin-top:6px; font-family:var(--f-disp); font-weight:800; font-size:36px; line-height:1;}
.zad-n small {display:block; font-family:var(--f-body); font-weight:500; font-size:12px; color:var(--muted);}
.zad-n em {font-style:normal; font-family:var(--f-body); font-weight:600; font-size:14px; color:var(--muted); margin-left:6px;}
.zad-f {display:flex; gap:8px; margin-top:10px; overflow-x:auto;}
.zad-f img {width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line);}
.zad-b {display:grid; grid-template-columns:2fr 1fr; gap:8px; margin-top:10px;}
.admin section {margin-top:18px; border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--panel);}
.admin h3 {margin:0 0 10px; font-family:var(--f-disp); font-weight:800; font-size:22px; text-transform:uppercase; color:var(--yellow);}
.note {margin:0; font-size:13.5px; color:var(--muted);}
.grid {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
.grid .full {grid-column:1 / -1;}
.fld {display:flex; flex-direction:column; gap:4px; min-width:0;}
.fld label {font-size:12.5px; font-weight:600; color:var(--muted);}
.fld input, .fld select, .fld textarea {width:100%; border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:11px 12px; font-size:16px;}
.fld textarea {min-height:70px; resize:vertical;}
.pair {display:flex; gap:6px;}
.chk {display:flex; gap:10px; align-items:flex-start; font-size:14px;}
.chk input {width:22px; height:22px; margin-top:1px; flex:none; accent-color:var(--yellow);}
.msg {margin:10px 0 0; font-size:14px; color:var(--good);}
.msg.err {color:var(--red);}
.list {margin:0; padding:0; list-style:none;}
.list li {display:flex; gap:10px; align-items:center; justify-content:space-between; padding-block:9px; border-bottom:1px solid var(--line); font-size:14px;}
.list li > span {min-width:0; overflow-wrap:anywhere;}
.list .b {flex:none; border:1px solid var(--line); background:transparent; border-radius:8px; padding:6px 10px; font-size:13px; color:var(--muted);}
.list .b.sure {background:var(--red); border-color:var(--red); color:var(--white);}
.list .ph {display:flex; align-items:center; gap:10px; min-width:0;}
.list .ph img, .list .ph .noimg {width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 25%; flex:none; background:var(--panel2); border:2px solid var(--line);}
.upl {position:relative; overflow:hidden;}
.upl input {position:absolute; inset:0; opacity:0; cursor:pointer;}
.done {margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--bg); border:1px solid var(--yellow); border-radius:14px; padding:12px;}
.done .qr {background:var(--white); padding:8px; border-radius:10px; line-height:0;}
.done .qr img, .done .qr canvas {width:128px; height:128px;}
.done p {margin:0; font-size:14px;}
.done .u {font-size:12.5px; color:var(--muted); overflow-wrap:anywhere;}
.login {max-width:420px; margin:40px auto 0;}

/* === CREDIT CZMM === */
.czmm {display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; margin:30px auto 24px; color:var(--muted); font-size:12px; letter-spacing:.02em; text-decoration:none; opacity:.8; transition:opacity .2s;}
.czmm:hover, .czmm:focus-visible {opacity:1;}
.czmm img {display:block; width:78px; height:auto;}
@media (max-width:420px) {
 .grid {grid-template-columns:1fr;}
 .lg-motor {height:48px;}
 .lg-cb {height:40px;}
 .row {grid-template-columns:36px 1fr auto; gap:6px 10px;}
 .rank {font-size:26px;}
 .av {width:34px; height:34px;}
 .done {grid-template-columns:1fr;}
}
@media (min-width:640px) {
 .sheet {align-items:center;}
 .sheet .box {border-radius:22px;}
}
@media (prefers-reduced-motion:reduce) {
 * {transition:none!important; animation:none!important;}
}