:root{
color-scheme:dark;

--bg:#0f172a;
--bg-grad-top:#111b33;

--surface:#162035;
--surface-alt:#1b2942;

--text:#e2e8f0;
--muted:#94a3b8;

--border:#2f3f5f;

--primary:#60a5fa;
--primary-dark:#3b82f6;

--success:#22c55e;
--danger:#f87171;
--warning:#fbbf24;

--score-bg:#1e3a5f;
--score-border:#315280;

--shadow:0 12px 28px rgba(2,6,23,.45);
--shadow-hover:0 16px 32px rgba(2,6,23,.58);
}

*{
box-sizing:border-box;
}

body{
font-family:'Inter','Segoe UI',Arial,sans-serif;
color:var(--text);
background:linear-gradient(180deg,var(--bg-grad-top) 0%,var(--bg) 320px);
max-width:1140px;
min-width:1140px;
margin:0 auto;
padding:24px;
position:relative;
z-index:1;
}

/* ========================= */
/* HEADER */
/* ========================= */

h1{margin:0;font-size:clamp(1.6rem,3vw,2.1rem);}
h2{margin:0;font-size:1.2rem;}
p{margin:0;color:var(--muted);}

.header{
margin-bottom:20px;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}

.brand-scene{
position:relative;
padding:6px 0 2px;
isolation:isolate;
flex:1;
display:grid;
grid-template-columns:100px minmax(0,auto) minmax(360px,450px);
column-gap:10px;
align-items:center;
}

.brand-scene::before{
content:'';
position:absolute;
inset:-14px -22px -10px -22px;
border-radius:18px;
background:radial-gradient(circle at 12% 40%,rgba(185,28,28,.18),transparent 34%);
opacity:0;
z-index:-1;
transition:opacity .4s ease;
}

.brand-title-row{
display:flex;
align-items:center;
gap:12px;
min-height:52px;
}

.brand-title-row h1{
font-size:2.25rem;
line-height:1;
font-weight:950;
letter-spacing:0;
text-transform:none;
text-shadow:0 8px 22px rgba(2,6,23,.42);
position:relative;
display:inline-block;
padding-bottom:8px;
}

.brand-accent{
color:#f8fafc;
}

.brand-title-row h1::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:5px;
border-radius:999px;
background:linear-gradient(90deg,#2563eb 0%,#60a5fa 18%,#ffffff 34%,#ef4444 50%,#f97316 66%,#ffffff 82%,#2563eb 100%);
background-size:220% 100%;
box-shadow:0 0 16px rgba(96,165,250,.32),0 0 22px rgba(239,68,68,.22);
animation:police-title-line 1.15s ease-in-out infinite alternate;
}

.brand-borsch-img{
grid-column:1;
grid-row:1;
width:112px;
height:auto;
align-self:center;
justify-self:start;
transform:translateX(-8px);
filter:drop-shadow(0 12px 22px rgba(2,6,23,.5));
transform-origin:50% 72%;
will-change:transform,filter;
animation:borsch-idle 4.8s ease-in-out infinite;
transition:filter .18s ease;
}

.brand-copy{
grid-column:2;
grid-row:1;
min-width:0;
}

.brand-joke{
display:inline-flex;
align-items:center;
padding:5px 10px;
border:1px solid rgba(250,204,21,.22);
border-radius:999px;
background:rgba(15,23,42,.42);
color:#fde68a;
font-size:.82rem;
font-weight:800;
letter-spacing:0;
}

.brand-meta-row{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}

.brand-subtitle-card{
grid-column:3;
grid-row:1;
justify-self:stretch;
margin:0;
padding:14px 18px;
border:1px solid rgba(96,165,250,.24);
border-radius:14px;
background:
  linear-gradient(135deg,rgba(59,130,246,.16),rgba(15,23,42,.34)),
  rgba(15,23,42,.36);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
color:#cbd5e1;
font-size:.95rem;
line-height:1.45;
max-width:450px;
}

.brand-scene:hover .brand-borsch-img,
.brand-borsch-img:hover{
animation:borsch-bubble .95s cubic-bezier(.22,.95,.22,1.05) both;
filter:drop-shadow(0 16px 28px rgba(2,6,23,.58)) drop-shadow(0 0 18px rgba(239,68,68,.24));
}

.brand-splash .brand-borsch-img{
animation:borsch-pop .95s cubic-bezier(.2,.9,.3,1.2) both, borsch-idle 4.8s ease-in-out 1s infinite;
}

.brand-badge .brand-joke{
animation:badge-pulse 2.8s ease-in-out infinite;
}

.brand-secret:hover .brand-borsch-img{
animation:borsch-bubble .95s cubic-bezier(.22,.95,.22,1.05) both;
}

.brand-secret:hover .brand-joke::after{
content:' · партия подана';
color:#ffffff;
}

.brand-warm::before{
opacity:1;
animation:warm-glow 4.2s ease-in-out infinite;
}

.brand-warm .brand-title-row h1::after{
background:linear-gradient(90deg,#2563eb 0%,#ffffff 24%,#ef4444 50%,#facc15 76%,#2563eb 100%);
background-size:220% 100%;
}

@keyframes borsch-idle{
0%,100%{transform:translateX(-8px) translateY(0) rotate(0) scale(1);}
34%{transform:translateX(-6px) translateY(-1px) rotate(.7deg) scale(1.01);}
68%{transform:translateX(-10px) translateY(1px) rotate(-.55deg) scale(.997);}
}

@keyframes borsch-pop{
0%{transform:translateX(-8px) translateY(10px) scale(.88);opacity:0;}
70%{transform:translateX(-8px) translateY(-3px) scale(1.04);opacity:1;}
100%{transform:translateX(-8px) translateY(0) scale(1);}
}

@keyframes borsch-bubble{
0%{transform:translateX(-8px) translateY(0) rotate(0) scale(1);}
16%{transform:translateX(-20px) translateY(5px) rotate(-4deg) scale(.91);}
38%{transform:translateX(3px) translateY(-5px) rotate(3deg) scale(1.13);}
56%{transform:translateX(-13px) translateY(1px) rotate(-3deg) scale(1.04);}
74%{transform:translateX(-4px) translateY(-1px) rotate(2deg) scale(1.02);}
88%{transform:translateX(-10px) translateY(0) rotate(-1deg) scale(1.005);}
100%{transform:translateX(-8px) translateY(0) rotate(0) scale(1);}
}

@keyframes police-title-line{
0%{background-position:0% 50%;filter:saturate(1.2) brightness(1);}
100%{background-position:100% 50%;filter:saturate(1.45) brightness(1.15);}
}

@keyframes badge-pulse{
0%,100%{box-shadow:0 0 0 rgba(250,204,21,0);}
50%{box-shadow:0 0 24px rgba(250,204,21,.22);}
}

@keyframes bowl-wiggle{
0%,100%{transform:translateX(-8px) rotate(0);}
25%{transform:translateX(-8px) rotate(-5deg);}
55%{transform:translateX(-8px) rotate(4deg);}
78%{transform:translateX(-8px) rotate(-2deg);}
}

@keyframes warm-glow{
0%,100%{opacity:.35;}
50%{opacity:.8;}
}

.version-badge{
padding:4px 10px;
border-radius:10px;
border:1px solid rgba(96,165,250,.45);
background:rgba(80,140,255,.16);
color:#bfdbfe;
font-size:.82rem;
font-weight:700;
}

/* ========================= */
/* STATS */
/* ========================= */

.stats-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-bottom:18px;
}

.stat-card,
.panel{
background:var(--surface);
border:1px solid var(--border);
border-radius:16px;
box-shadow:var(--shadow);
width:100%;
overflow:hidden;
}

.stat-card{
padding:16px;
}

.stats-grid .stat-card{
border:2px solid #ffd700;
box-shadow:
0 0 15px rgba(255,215,0,0.3),
0 0 30px rgba(255,215,0,0.15),
inset 0 0 20px rgba(255,215,0,0.05);
animation:gold-pulse 2.5s ease-in-out infinite;
}

.panel{
padding:16px;
margin-bottom:18px;
}

.stat-card:hover,
.panel:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-hover);
}

.stats-grid .stat-card:hover{
box-shadow:
0 0 20px rgba(255,215,0,0.42),
0 0 42px rgba(255,215,0,0.22),
inset 0 0 25px rgba(255,215,0,0.08);
}

/* Chart panel layout & hover */
#teams-wins-panel{
min-height:280px;
transition:box-shadow 0.4s ease, border-color 0.4s ease;
}

#teams-wins-panel:hover{
border-color:rgba(59,130,246,0.5);
box-shadow:
  0 0 20px rgba(59,130,246,0.25),
  0 0 50px rgba(59,130,246,0.12),
  0 12px 28px rgba(2,6,23,0.45);
}

.stat-label{
font-size:.82rem;
color:var(--muted);
}

.stat-value{
font-size:clamp(1.25rem,4vw,1.8rem);
font-weight:700;
margin-top:6px;
}

/* ========================= */
/* LEADER CARD - RAINBOW GLOW */
/* ========================= */

.stat-card-leader{
position:relative;
background:linear-gradient(135deg,#1e3a8a 0%,#7c3aed 50%,#be185d 100%);
border:2px solid transparent;
overflow:hidden;
}

.stat-card-leader::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:conic-gradient(
from 0deg,
#ff0000,
#ff8000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000
);
animation:rainbow-rotate 3s linear infinite;
opacity:0;
transition:opacity 0.3s ease;
z-index:0;
}

.stat-card-leader:hover::before{
opacity:1;
}

.stat-card-leader::after{
content:'';
position:absolute;
inset:3px;
background:linear-gradient(135deg,#1e3a8a 0%,#7c3aed 50%,#be185d 100%);
border-radius:14px;
z-index:1;
}

.stat-card-leader .stat-label,
.stat-card-leader .stat-value{
position:relative;
z-index:2;
}

.stat-card-leader:hover{
box-shadow:
0 0 20px rgba(255,0,0,0.6),
0 0 40px rgba(0,255,0,0.5),
0 0 60px rgba(0,0,255,0.5),
0 0 80px rgba(255,0,255,0.4);
transform:translateY(-4px) scale(1.02);
}

@keyframes rainbow-rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

/* ========================= */
/* BEST PLAYER CARD - GOLD GLOW */
/* ========================= */

.best-player-card{
position:relative;
background:linear-gradient(135deg, #1a1f2e 0%, #2d2a1f 50%, #1f2d2a 100%);
border:2px solid #ffd700;
overflow:hidden;
box-shadow:
0 0 15px rgba(255,215,0,0.3),
0 0 30px rgba(255,215,0,0.15),
inset 0 0 20px rgba(255,215,0,0.05);
animation:gold-pulse 2.5s ease-in-out infinite;
transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.best-player-card::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(
ellipse at center,
rgba(255,215,0,0.15) 0%,
rgba(255,215,0,0.08) 30%,
transparent 70%
);
animation:gold-shimmer 3s linear infinite;
z-index:0;
}

.best-player-card::after{
content:'';
position:absolute;
inset:2px;
background:linear-gradient(135deg, #1a1f2e 0%, #2d2a1f 50%, #1f2d2a 100%);
border-radius:14px;
z-index:1;
}

.best-player-card .stat-label,
.best-player-card .stat-value{
position:relative;
z-index:2;
}

.best-player-card:hover{
transform:scale(1.18) translateY(-4px);
border-color:#fff8b0;
box-shadow:
0 0 30px rgba(255,215,0,0.6),
0 0 60px rgba(255,215,0,0.4),
0 0 100px rgba(255,215,0,0.25),
0 0 140px rgba(255,215,0,0.15),
inset 0 0 40px rgba(255,215,0,0.12);
animation:gold-pulse-hover 0.8s ease-in-out infinite;
}

@keyframes gold-pulse{
0%, 100%{
box-shadow:
0 0 15px rgba(255,215,0,0.3),
0 0 30px rgba(255,215,0,0.15),
inset 0 0 20px rgba(255,215,0,0.05);
}
50%{
box-shadow:
0 0 20px rgba(255,215,0,0.4),
0 0 40px rgba(255,215,0,0.2),
inset 0 0 25px rgba(255,215,0,0.08);
}
}

@keyframes gold-shimmer{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

@keyframes gold-pulse-hover{
0%,100%{
box-shadow:
0 0 30px rgba(255,215,0,0.6),
0 0 60px rgba(255,215,0,0.4),
0 0 100px rgba(255,215,0,0.25),
0 0 140px rgba(255,215,0,0.15),
inset 0 0 40px rgba(255,215,0,0.12);
}
50%{
box-shadow:
0 0 40px rgba(255,215,0,0.75),
0 0 80px rgba(255,215,0,0.5),
0 0 120px rgba(255,215,0,0.35),
0 0 160px rgba(255,215,0,0.2),
inset 0 0 50px rgba(255,215,0,0.18);
}
}

.best-player-card:hover .stat-label{
text-shadow:0 0 12px rgba(255,215,0,0.6),0 0 24px rgba(255,215,0,0.3);
color:#ffd700;
transition:all 0.3s ease;
}

.best-player-card:hover .stat-value{
text-shadow:0 0 16px rgba(255,215,0,0.7),0 0 32px rgba(255,215,0,0.4);
color:#fff8dc;
transition:all 0.3s ease;
animation:winner-text-pulse 1s ease-in-out infinite;
}

@keyframes winner-text-pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}
}

/* ========================= */
/* LAYOUT */
/* ========================= */

.layout{
display:grid;
gap:18px;
grid-template-columns:minmax(280px,360px) 1fr;
position:relative;
z-index:2;
}

.secondary-layout{
grid-template-columns:1.35fr 1fr;
}

/* ========================= */
/* FORM */
/* ========================= */

form{
display:grid;
gap:10px;
grid-template-columns:1fr 1fr;
width:100%;
max-width:100%;
}

label{
display:flex;
flex-direction:column;
gap:6px;
font-size:.85rem;
font-weight:600;
min-width:0;
}

input{
font:inherit;
border:1px solid var(--border);
border-radius:10px;
padding:10px 12px;
background:var(--surface-alt);
color:var(--text);
width:100%;
}

input:focus{
border-color:var(--primary);
outline:3px solid color-mix(in srgb,var(--primary) 24%,transparent);
}

.full{
grid-column:1/-1;
}

.button-row{
display:flex;
gap:10px;
}

/* ========================= */
/* BUTTONS */
/* ========================= */

button{
font:inherit;
border-radius:10px;
padding:10px 14px;
cursor:pointer;
font-weight:700;
}

.btn-primary{
background:var(--primary);
color:#fff;
}

.btn-primary:hover{
background:var(--primary-dark);
}

.btn-secondary{
background:var(--surface-alt);
border:1px solid var(--border);
}

.btn-delete{
padding:7px 10px;
border-radius:8px;
background:rgba(248,113,113,.15);
color:var(--danger);
}

/* ========================= */
/* MATCH CARDS */
/* ========================= */

.cards-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
width:100%;
min-width:0;
}

.match-card{
border:1px solid var(--border);
border-radius:12px;
padding:10px 8px;
min-width:0;
max-width:100%;
overflow:hidden;

background:linear-gradient(
180deg,
color-mix(in srgb,var(--surface-alt) 70%,transparent),
var(--surface)
);

display:flex;
flex-direction:column;
gap:6px;

transition:all .2s ease;
}

.match-card:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.35);
}

/* ========================= */
/* NEW MATCH ROW LAYOUT */
/* ========================= */

.match-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
font-weight:700;
font-size:.85rem;
min-width:0;
}

.team1-row{
border-bottom:1px solid rgba(47,63,95,.5);
padding-bottom:4px;
margin-bottom:4px;
}

.team2-row{
padding-top:2px;
}

.match-row .team-name{
flex:1;
white-space:normal;
overflow:visible;
text-overflow:clip;
max-width:none;
}

.match-row .score-value{
flex-shrink:0;
min-width:28px;
text-align:right;
font-weight:800;
color:var(--primary);
border-radius:6px;
background:var(--score-bg);
border:1px solid var(--score-border);
padding:2px 8px;
}

.match-row .team-name.winner{
color:var(--success);
font-weight:800;
}

.match-row .team-name.loser{
color:var(--danger);
font-weight:700;
}

/* ========================= */
/* TEAMS */
/* ========================= */

.teams{
display:flex;
align-items:center;
justify-content:space-between;
gap:4px;
font-weight:700;
font-size:.85rem;
min-width:0;
}

.team-line{
display:flex;
align-items:center;
gap:4px;
max-width:42%;
overflow:hidden;
min-width:0;
}

.team-name{
display:inline-block;
white-space:normal;
max-width:100%;
overflow:visible;
text-overflow:clip;
animation:none !important;
transform:none !important;
}

.team-icon{
width:14px;
height:14px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:9px;
color:#fff;
font-weight:700;
flex-shrink:0;
}

.team-name.winner{
color:var(--success);
font-weight:800;
}

.winner-badge{
margin-left:6px;
padding:1px 4px;
border-radius:999px;
font-size:.6rem;
background:rgba(34,197,94,.2);
color:var(--success);
}

.match-card .score{
align-self:center;
font-size:.85rem;
font-weight:800;
color:var(--primary);
border-radius:999px;
border:1px solid var(--score-border);
background:var(--score-bg);
padding:2px 8px;
min-width:40px;
flex-shrink:0;
}

.match-card .meta{
font-size:.65rem;
color:var(--muted);
text-align:center;
}

/* ========================= */
/* TABLE */
/* ========================= */

.table-wrap{
overflow-x:hidden;
border-radius:12px;
border:1px solid var(--border);
background:var(--surface);
}

.match-table-wrap{
max-height:320px;
overflow-y:auto;
padding:6px;
border-radius:14px;
background:color-mix(in srgb,var(--surface-alt) 64%,#0b1222);
}

table{
width:100%;
border-collapse:collapse;
table-layout:auto;
}

th,td{
padding:10px 8px;
text-align:left;
border-bottom:1px solid var(--border);
white-space:nowrap;
}

/* Leaderboard team name cell with crown space */
.team-cell{
position:relative;
padding-left:26px;
}

.leader-crown{
position:absolute;
left:5px;
top:50%;
transform:translateY(-50%);
font-size:0.9em;
line-height:1;
}

th{
background:var(--surface-alt);
color:var(--muted);
font-size:.75rem;
text-transform:uppercase;
}

tbody tr:hover{
background:rgba(255,255,255,.03);
}

.score-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:60px;
padding:4px 10px;
border-radius:999px;
background:var(--score-bg);
border:1px solid var(--score-border);
font-weight:800;
}

/* ============================= */
/* PLAYER BACKGROUND SYSTEM */
/* ============================= */

.player-bg{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);

width: 560px;
height: 760px;
max-width: 34vw;
max-height: 80vh;

background-size: 110% auto;
background-repeat: no-repeat;
background-position: center center;

opacity: 0;
transition: opacity 700ms cubic-bezier(.23,.93,.24,1), transform 700ms cubic-bezier(.23,.93,.24,1);
will-change: opacity, transform;
pointer-events: none;
z-index: -1;

filter: brightness(0.95) saturate(0.95);

-webkit-mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 14%,
rgba(0,0,0,0.96) 26%,
rgba(0,0,0,0.80) 42%,
rgba(0,0,0,0.58) 60%,
rgba(0,0,0,0.28) 78%,
rgba(0,0,0,0) 92%
);
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 14%,
rgba(0,0,0,0.96) 26%,
rgba(0,0,0,0.80) 42%,
rgba(0,0,0,0.58) 60%,
rgba(0,0,0,0.28) 78%,
rgba(0,0,0,0) 92%
);
}

.player-left{
left:40px;
right:auto;
transform:translateY(-50%) scale(1);
}

.player-right{
right:40px;
left:auto;
transform:translateY(-50%) scaleX(-1) scale(1);
}

.player-hidden{
opacity:0;
transform:translateY(-50%) scale(0.98);
}

.player-visible{
opacity:1 !important;
transform:translateY(-50%) scale(1.02);
}

/* ========================= */
/* ANALYTICS SECTIONS */
/* ========================= */

.panel-full{
width:100%;
margin-bottom:18px;
}

.analytics-layout{
grid-template-columns:1fr 1fr;
}

/* Tooltip layer — rendered above everything */
#tooltip-layer{
position:fixed;
top:0;
left:0;
width:0;
height:0;
z-index:2147483647;
pointer-events:none;
}

#tooltip-layer .tooltip-box{
pointer-events:auto;
}

/* Panels with tooltips */
#dominance-panel,
#elo-history-panel,
#prediction-panel{
overflow:visible;
}

.tooltip-box code{
display:inline-block;
background:rgba(255,255,255,0.07);
padding:2px 8px;
border-radius:6px;
font-family:'Consolas','Courier New',monospace;
font-size:.78rem;
color:var(--primary);
margin:4px 0;
}

.tooltip-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:50%;
background:var(--border);
color:var(--muted);
font-size:.75rem;
font-weight:700;
cursor:help;
position:relative;
vertical-align:middle;
margin-left:6px;
transition:background 0.2s, color 0.2s;
}

.tooltip-trigger:hover{
background:var(--primary);
color:#fff;
}

.tooltip-box{
display:none;
position:fixed;
width:420px;
max-height:520px;
overflow-y:auto;
padding:14px 16px;
background:var(--surface-alt);
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 12px 32px rgba(0,0,0,0.5);
font-size:.8rem;
font-weight:400;
line-height:1.5;
color:var(--text);
z-index:99999;
text-transform:none;
letter-spacing:normal;
white-space:normal;
}

.tooltip-box::-webkit-scrollbar{
width:5px;
}

.tooltip-box::-webkit-scrollbar-track{
background:transparent;
}

.tooltip-box::-webkit-scrollbar-thumb{
background:var(--border);
border-radius:4px;
}

.tooltip-box.visible{
display:block;
}

/* H2H Matrix */
/* H2H Cards */
.h2h-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(430px,1fr));
gap:12px;
padding:4px 0;
}

.h2h-card{
background:var(--surface-alt);
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
display:flex;
flex-direction:column;
gap:8px;
transition:transform 0.2s, box-shadow 0.3s;
}

.h2h-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

.h2h-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}

.h2h-team{
font-weight:700;
font-size:.9rem;
flex:1;
}

.h2h-team.right{
text-align:right;
}

.h2h-vs{
font-size:.7rem;
color:var(--muted);
font-weight:800;
letter-spacing:1px;
}

.h2h-bar{
height:8px;
border-radius:4px;
overflow:hidden;
display:flex;
background:rgba(255,255,255,0.05);
}

.h2h-bar-fill{
height:100%;
transition:width 0.6s ease;
}

.h2h-bar-fill.left{
border-radius:4px 0 0 4px;
}

.h2h-bar-fill.right{
border-radius:0 4px 4px 0;
}

.h2h-scoreboard{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:2px;
}

.h2h-score-value{
font-weight:800;
font-size:1.45rem;
line-height:1;
}

.h2h-score-value.win{
color:#4ade80;
}

.h2h-score-value.loss{
color:#f87171;
}

.h2h-score-value.draw{
color:var(--muted);
}

.h2h-score-caption{
font-size:.72rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
}

.h2h-stats-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:2px;
}

.h2h-stat{
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
background:rgba(15,23,42,.28);
padding:8px 10px;
min-width:0;
position:relative;
}

.h2h-stat span,
.h2h-streak span{
display:block;
font-size:.72rem;
color:var(--muted);
margin-bottom:3px;
}

.h2h-stat strong,
.h2h-streak strong{
display:block;
font-size:.9rem;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.h2h-streak{
border:1px solid rgba(96,165,250,.22);
border-radius:8px;
background:linear-gradient(135deg,rgba(96,165,250,.12),rgba(250,204,21,.08));
padding:8px 10px;
position:relative;
cursor:help;
}

.h2h-help{
width:17px;
height:17px;
border:0;
border-radius:50%;
margin-left:4px;
padding:0;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(96,165,250,.75);
color:#ffffff;
font-size:.7rem;
font-weight:800;
line-height:1;
cursor:help;
vertical-align:middle;
}

.h2h-tooltip{
display:none;
position:absolute;
left:0;
bottom:calc(100% + 8px);
z-index:30;
width:320px;
padding:12px 14px;
border:1px solid rgba(148,163,184,.35);
border-radius:10px;
background:rgba(30,41,59,.98);
box-shadow:0 14px 32px rgba(2,6,23,.46);
color:var(--text);
font-size:.78rem;
line-height:1.45;
}

.h2h-points-stat:hover .h2h-tooltip,
.h2h-points-stat:focus-within .h2h-tooltip{
display:block;
}

.h2h-streak-tooltip{
display:none;
position:absolute;
left:0;
bottom:calc(100% + 8px);
z-index:35;
width:390px;
padding:12px 14px;
border:1px solid rgba(148,163,184,.35);
border-radius:10px;
background:rgba(30,41,59,.98);
box-shadow:0 14px 32px rgba(2,6,23,.46);
color:var(--text);
}

.h2h-streak:hover .h2h-streak-tooltip,
.h2h-streak:focus-within .h2h-streak-tooltip{
display:block;
}

.h2h-streak-title{
font-size:.82rem;
font-weight:800;
margin-bottom:8px;
color:#bfdbfe;
}

.h2h-streak-row{
display:grid;
grid-template-columns:110px 1fr;
gap:8px;
align-items:start;
padding:6px 0;
border-top:1px solid rgba(255,255,255,.08);
}

.h2h-streak-row span{
font-size:.75rem;
color:var(--muted);
margin:0;
}

.h2h-streak-row strong{
font-size:.8rem;
white-space:normal;
overflow:visible;
text-overflow:clip;
}

.h2h-streak-empty{
font-size:.78rem;
line-height:1.45;
color:var(--muted);
}

/* Club records */
.records-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}

.record-card{
display:flex;
align-items:flex-start;
gap:12px;
min-width:0;
padding:14px;
border:1px solid rgba(148,163,184,.22);
border-radius:12px;
background:
  radial-gradient(circle at top left,rgba(96,165,250,.16),transparent 38%),
  rgba(15,23,42,.34);
transition:transform .2s, border-color .2s, background .2s;
}

.record-card:hover{
transform:translateY(-2px);
border-color:rgba(96,165,250,.42);
background:
  radial-gradient(circle at top left,rgba(96,165,250,.24),transparent 42%),
  rgba(15,23,42,.42);
}

.record-icon{
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(96,165,250,.18);
font-size:1.25rem;
flex:0 0 auto;
}

.record-copy{
min-width:0;
}

.record-label{
font-size:.76rem;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:5px;
}

.record-value{
font-size:1rem;
font-weight:900;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.record-meta{
margin-top:4px;
font-size:.78rem;
line-height:1.35;
color:var(--muted);
}

/* Prediction */
.prediction-controls{
display:flex;
align-items:center;
justify-content:center;
gap:16px;
margin:16px 0;
flex-wrap:wrap;
}

.prediction-controls select{
padding:10px 16px;
border-radius:10px;
border:1px solid var(--border);
background:var(--surface-alt);
color:var(--text);
font-size:1rem;
cursor:pointer;
min-width:160px;
outline:none;
transition:border-color 0.3s;
}

.prediction-controls select:focus{
border-color:var(--primary);
}

.vs-label{
font-size:1.2rem;
font-weight:800;
color:var(--muted);
letter-spacing:2px;
}

.prediction-result{
margin-top:8px;
}

.prediction-bar-wrap{
display:flex;
align-items:center;
gap:12px;
margin:12px 0;
}

.prediction-team-name{
font-weight:700;
font-size:.9rem;
min-width:90px;
}

.prediction-team-name.left{
text-align:right;
}

.prediction-team-name.right{
text-align:left;
}

.prediction-bar{
flex:1;
height:36px;
border-radius:18px;
overflow:hidden;
display:flex;
background:var(--surface-alt);
}

.prediction-bar-fill{
height:100%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:.85rem;
color:#fff;
transition:width 0.8s ease;
min-width:40px;
}

.prediction-bar-fill.team1{
background:linear-gradient(90deg,#3b82f6,#60a5fa);
border-radius:18px 0 0 18px;
}

.prediction-bar-fill.team2{
background:linear-gradient(90deg,#f97316,#fb923c);
border-radius:0 18px 18px 0;
}

.prediction-favorite{
text-align:center;
margin-top:10px;
font-size:.95rem;
color:var(--muted);
}

.prediction-favorite strong{
color:var(--accent);
}

/* Footer contacts */
.site-footer{
margin:0 0 26px;
padding:0 0 10px;
position:relative;
z-index:2;
}

.footer-contact{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:14px;
padding:14px 18px;
border:1px solid rgba(96,165,250,.24);
border-radius:16px;
background:
  linear-gradient(135deg,rgba(59,130,246,.14),rgba(15,23,42,.46)),
  rgba(15,23,42,.38);
box-shadow:var(--shadow);
}

.footer-contact-label{
font-size:.9rem;
font-weight:800;
color:var(--muted);
}

.telegram-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
border:1px solid rgba(96,165,250,.42);
border-radius:999px;
background:rgba(37,99,235,.16);
color:#dbeafe;
font-weight:800;
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.telegram-link:hover{
transform:translateY(-2px);
border-color:rgba(96,165,250,.72);
background:rgba(37,99,235,.26);
box-shadow:0 0 18px rgba(96,165,250,.26);
}

.telegram-link strong{
color:#ffffff;
}

.telegram-icon{
width:20px;
height:20px;
fill:#60a5fa;
flex:0 0 auto;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:960px){

.layout,
.secondary-layout,
.analytics-layout{
grid-template-columns:1fr;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

.cards-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.cards-grid{
grid-template-columns:1fr;
}

}

@media(max-width:720px){
.player-bg{display:none!important;}
}

/* ========================= */
/* AUTH MODAL                */
/* ========================= */

.auth-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  backdrop-filter:blur(4px);
}

.auth-modal{
  width:90%;
  max-width:380px;
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:auth-modal-enter 0.2s ease-out;
}

.auth-modal h3{
  margin:0;
  font-size:1.15rem;
  color:var(--text);
}

.auth-description{
  font-size:0.85rem;
  color:var(--muted);
  margin:0;
}

.auth-input{
  font:inherit;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  background:var(--surface-alt);
  color:var(--text);
  width:100%;
}

.auth-input:focus{
  border-color:var(--primary);
  outline:3px solid color-mix(in srgb,var(--primary) 24%,transparent);
}

.auth-error{
  font-size:0.82rem;
  color:var(--danger);
  min-height:1.2em;
}

.auth-buttons{
  display:flex;
  gap:10px;
}

.auth-buttons .btn-primary,
.auth-buttons .btn-secondary{
  flex:1;
}

@keyframes auth-modal-enter{
  from{
    opacity:0;
    transform:translateY(-10px) scale(0.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ========================= */
/* ПРЕДЛОЖЕНИЕ УСТАНОВИТЬ ПРИЛОЖЕНИЕ */
/* ========================= */

/* Затемнение на весь экран: предложение нельзя не заметить. */
#app-banner{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:24px 18px;
background:rgba(2,6,23,.78);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
animation:ab-fade .22s ease-out;
}

#app-banner[hidden]{display:none;}

/* Пока окно открыто, страница под ним не прокручивается. */
body.ab-open{overflow:hidden;}

#app-banner .ab-card{
position:relative;
width:100%;
max-width:360px;
/* Страница отдаётся с viewport width=1200 и на телефоне ужимается.
   Множитель ставит JS, чтобы окно выглядело нормального размера. */
transform:scale(var(--ui-scale,1));
transform-origin:center center;
text-align:center;
padding:30px 24px 22px;
border-radius:22px;
background:var(--surface);
border:1px solid var(--border);
box-shadow:0 26px 60px rgba(2,6,23,.7);
animation:ab-rise .26s cubic-bezier(.2,.9,.3,1.2);
}

#app-banner svg{
width:82px;
height:82px;
border-radius:20px;
margin-bottom:16px;
}

#app-banner .ab-card b{
display:block;
font-size:1.22rem;
line-height:1.3;
color:var(--text);
margin-bottom:10px;
}

#app-banner .ab-card span{
display:block;
font-size:.9rem;
line-height:1.55;
color:var(--muted);
margin-bottom:22px;
}

#app-banner .ab-go{
display:block;
background:var(--primary-dark);
color:#fff;
text-decoration:none;
border-radius:14px;
padding:15px;
font-size:1.02rem;
font-weight:700;
}

#app-banner .ab-later{
display:block;
width:100%;
margin-top:10px;
background:transparent;
border:none;
color:var(--muted);
font-size:.9rem;
padding:10px;
cursor:pointer;
}

#app-banner .ab-hint{
display:block;
margin-top:4px;
font-style:normal;
font-size:.78rem;
color:var(--muted);
opacity:.75;
}

#app-banner .ab-close{
position:absolute;
top:8px;
right:12px;
background:transparent;
border:none;
color:var(--muted);
font-size:1.6rem;
line-height:1;
padding:4px 6px;
cursor:pointer;
}

@keyframes ab-fade{from{opacity:0}to{opacity:1}}

/* Постоянный вход на страницу приложения — в одном ряду с контактами,
   той же таблеткой, что и ссылка на Telegram, и той же высоты.
   Множитель --ui-scale работает только на телефоне: там макет шириной
   1200px ужимается втрое, и без него ссылку было бы не разглядеть. */
.footer-app-link{
display:inline-flex;
align-items:center;
gap:calc(8px * var(--ui-scale,1));
padding:calc(9px * var(--ui-scale,1)) calc(13px * var(--ui-scale,1));
border:1px solid rgba(96,165,250,.42);
border-radius:999px;
background:rgba(37,99,235,.16);
color:#dbeafe;
font-size:calc(1rem * var(--ui-scale,1));
font-weight:800;
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.footer-app-link[hidden]{display:none;}

.footer-app-link svg{
width:calc(22px * var(--ui-scale,1));
height:calc(22px * var(--ui-scale,1));
border-radius:calc(6px * var(--ui-scale,1));
flex:0 0 auto;
}

.footer-app-link:hover{
transform:translateY(-1px);
border-color:rgba(96,165,250,.75);
background:rgba(37,99,235,.28);
box-shadow:0 8px 18px rgba(37,99,235,.25);
}
/* Множитель из --ab-scale нужно сохранить и внутри анимации,
   иначе на время появления карточка схлопывается до неудобного размера. */
@keyframes ab-rise{
from{opacity:0;transform:translateY(18px) scale(calc(var(--ui-scale,1) * .96))}
to{opacity:1;transform:translateY(0) scale(var(--ui-scale,1))}
}