/* ==========================================================
   MATCHDAY — TACTICS LAB / REDESIGN
   Visual-only redesign. Existing markup + JS behavior kept.
========================================================== */

:root{
    --tl-bg:#060b16;
    --tl-bg-2:#0a1220;
    --tl-panel:#121b2a;
    --tl-panel-2:#0e1725;
    --tl-border:rgba(148,163,184,.20);
    --tl-border-strong:rgba(148,163,184,.30);
    --tl-text:#f4f7fb;
    --tl-muted:#9aa6b7;
    --tl-red:#e3273f;
    --tl-red-soft:rgba(227,39,63,.16);
    --tl-blue:#2e64c8;
    --tl-blue-soft:rgba(46,100,200,.18);
    --tl-green-1:#087a50;
    --tl-green-2:#0a8a59;
    --tl-green-3:#0c9560;
}

body:has(.tactics-hero){
    background:
        radial-gradient(circle at 72% 18%, rgba(34,74,140,.13), transparent 32%),
        radial-gradient(circle at 20% 65%, rgba(227,39,63,.07), transparent 30%),
        linear-gradient(180deg,#050a14 0%,#07101d 48%,#050a13 100%);
    color:var(--tl-text);
}

body:has(.tactics-hero) .header{
    padding:8px 0;
    background:rgba(4,9,18,.88);
    border-bottom:1px solid rgba(148,163,184,.12);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}
body:has(.tactics-hero) .header .container{max-width:1360px;gap:18px;}
body:has(.tactics-hero) .logo-icon{height:40px;}
body:has(.tactics-hero) .logo-tagline{display:none;}
body:has(.tactics-hero) .navigation ul{gap:18px;}
body:has(.tactics-hero) .navigation a{font-size:.68rem;letter-spacing:1.3px;color:#b7c0cf;}
body:has(.tactics-hero) .navigation a:hover{color:#fff;}
body:has(.tactics-hero) .live-badge{font-size:.66rem;}

.tactics-hero{
    position:relative;
    margin:76px auto 12px;
    width:min(1360px,calc(100% - 32px));
    padding:14px 18px 16px;
    text-align:left;
    overflow:hidden;
    border:1px solid var(--tl-border);
    border-radius:10px;
    background:linear-gradient(135deg,rgba(23,34,51,.92),rgba(11,20,34,.92));
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.tactics-hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 15% 50%,rgba(46,100,200,.12),transparent 42%),radial-gradient(circle at 85% 50%,rgba(227,39,63,.08),transparent 38%);
}
.tactics-hero .container{position:relative;z-index:1;max-width:none;padding:0;}
.tactics-hero .section-tag{display:block;margin-bottom:4px;color:#8996a9;font-size:.62rem;letter-spacing:.14em;}
.tactics-hero h1{margin:0 0 3px;font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;text-transform:none;color:#f8fafc;}
.tactics-hero p{margin:0;max-width:820px;color:#aab4c2;font-size:.76rem;line-height:1.5;}

.tactics-lab{padding:0 0 54px;}
.tactics-lab > .container{max-width:1360px;}

#exportArea{min-width:0;}
.lab-wrapper{
    display:grid;
    grid-template-columns:minmax(285px,310px) minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.lab-sidebar{
    position:sticky;
    top:66px;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    max-height:calc(100vh - 82px);
    overflow:hidden;
}

.club-card,.squad-block,.tactical-controls-panel,.lab-notes,.lab-controls{
    border:1px solid var(--tl-border);
    background:linear-gradient(180deg,rgba(20,31,47,.94),rgba(11,19,32,.94));
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    backdrop-filter:blur(14px);
}
.club-card{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:9px;}
.club-card:hover{transform:none;}
.club-card img{width:54px;height:54px;object-fit:contain;flex:0 0 54px;}
.club-card h2{margin:0;color:#f5f7fa;font-size:1.05rem;line-height:1.15;}
.club-card span{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:5px;background:var(--tl-red-soft);color:#ff7384;font-size:.63rem;font-weight:800;letter-spacing:.08em;}

.squad-block{padding:11px;border-radius:9px;min-height:0;}
.squad-block h3{margin:0 0 8px;color:#d9e1ec;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;}
#startingList,#benchList{list-style:none;margin:0;padding:0;}
#startingList{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:270px;overflow-y:auto;padding-right:3px;}
#benchList{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:190px;overflow-y:auto;padding-right:3px;}
#startingList li,#benchList .bench-card{
    min-width:0;margin:0;padding:7px 8px;border:1px solid rgba(148,163,184,.13);border-radius:6px;
    background:rgba(255,255,255,.035);color:#dce4ee;transition:.18s ease;
}
#startingList li{display:flex;align-items:center;gap:7px;font-size:.68rem;line-height:1.1;}
#startingList li:hover,#benchList .bench-card:hover{transform:translateY(-1px);border-color:rgba(46,100,200,.48);background:rgba(46,100,200,.09);}
#startingList strong,.bench-number{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:6px;background:rgba(227,39,63,.18);color:#ff7585;font-size:.62rem;font-weight:800;}
#benchList .bench-card{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:7px;cursor:grab;}
.bench-info{min-width:0;}
.bench-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;font-weight:700;color:#e4e9f1;}
.bench-position{margin-top:2px;color:#7f8da0;font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.bench-card.click-selected{border-color:rgba(227,39,63,.8)!important;box-shadow:0 0 0 2px rgba(227,39,63,.15)!important;transform:none;}

#startingList::-webkit-scrollbar,#benchList::-webkit-scrollbar{width:4px;}
#startingList::-webkit-scrollbar-thumb,#benchList::-webkit-scrollbar-thumb{background:rgba(148,163,184,.25);border-radius:99px;}

.pitch-wrapper{display:flex;justify-content:center;align-items:flex-start;min-width:0;position:sticky;top:66px;}
.pitch{
    position:relative;width:100%;height:auto;aspect-ratio:105/68;max-width:none;overflow:hidden;
    border:1px solid rgba(255,255,255,.34);border-radius:12px;
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 7.14%,transparent 7.14%,transparent 14.28%),
      linear-gradient(180deg,var(--tl-green-2),var(--tl-green-1));
    box-shadow:0 22px 45px rgba(0,0,0,.28),inset 0 0 70px rgba(0,0,0,.12);
}
.pitch::before{content:"";position:absolute;inset:0;opacity:.11;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:12px 12px;pointer-events:none;}
.pitch::after{content:"";position:absolute;inset:12px;border:2px solid rgba(255,255,255,.88);border-radius:5px;pointer-events:none;}
.half-line{position:absolute;left:50%;top:12px;bottom:12px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.88);z-index:2;}
.center-circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.9);border-radius:50%;z-index:2;}
.center-circle::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;}
.penalty-top,.penalty-bottom{position:absolute;top:50%;width:17%;height:47%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.88);z-index:2;}
.penalty-top{left:12px;border-left:0;}.penalty-bottom{right:12px;border-right:0;}
.goal-top,.goal-bottom{position:absolute;top:50%;width:7%;height:22%;transform:translateY(-50%);border:2px solid rgba(255,255,255,.8);z-index:2;}
.goal-top{left:-1px;border-left:0;}.goal-bottom{right:-1px;border-right:0;}
.penalty-top::after,.penalty-bottom::after{content:"";position:absolute;top:50%;width:6px;height:6px;transform:translateY(-50%);border-radius:50%;background:#fff;}
.penalty-top::after{right:25%;}.penalty-bottom::after{left:25%;}
.goal-top::before,.goal-bottom::before{content:"";position:absolute;top:50%;width:60%;height:14px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.65);}
.goal-top::before{right:-60%;}.goal-bottom::before{left:-60%;}
#pitchPlayers{position:absolute;inset:0;z-index:30;}
.player-marker{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;user-select:none;transition:transform .18s ease,filter .18s ease;z-index:50;}
.player-marker:hover{transform:translate(-50%,-50%) scale(1.06);filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));}
.player-marker.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.13);filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));z-index:500;}
.marker-number{position:relative;width:39px;height:39px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:#fff;background:radial-gradient(circle at 35% 30%,#ff6372,#d92038 62%,#9e1427);border:2px solid rgba(255,255,255,.92);box-shadow:0 5px 14px rgba(0,0,0,.38),inset 0 2px 4px rgba(255,255,255,.28);}
.marker-number::after{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);z-index:-1;}
.marker-name{margin-top:4px;padding:3px 6px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(4,9,16,.72);backdrop-filter:blur(6px);color:#fff;font-size:.58rem;font-weight:700;white-space:nowrap;box-shadow:0 5px 12px rgba(0,0,0,.24);}
.player-marker.goalkeeper .marker-number{background:radial-gradient(circle at 30% 30%,#ffe27d,#e8aa17 62%,#a87300);}
.player-marker.captain .marker-number{box-shadow:0 0 0 2px rgba(99,213,255,.22),0 5px 14px rgba(0,0,0,.38);}
.player-marker.click-target .marker-number{box-shadow:0 0 0 3px rgba(255,255,255,.78),0 0 18px rgba(227,39,63,.75)!important;}

.tactical-controls-panel{margin-top:10px;padding:13px;border-radius:9px;}
.tactical-controls-heading{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.tactical-controls-heading .section-tag{font-size:.58rem;color:#7f8da0;letter-spacing:.12em;}
.tactical-controls-heading h3{margin:0;font-size:.98rem;color:#f0f4f9;}
.tactical-controls-heading p{width:100%;margin:2px 0 10px;color:#7f8da0;font-size:.65rem;line-height:1.45;}
.tactical-controls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;}
.tactical-control{display:block;min-width:0;}
.tactical-control-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;color:#9aa6b7;font-size:.61rem;text-transform:uppercase;letter-spacing:.06em;}
.tactical-control-label strong{color:#d6dee9;font-weight:600;}
.tactical-control-label output{color:#fff;font-weight:800;}
.tactical-control input[type=range]{width:100%;height:4px;accent-color:var(--tl-red);cursor:pointer;}

.lab-notes{margin-top:10px;padding:13px;border-radius:9px;}
.lab-notes h3{margin:0 0 8px;font-size:.85rem;}
#coachNotes{width:100%;min-height:100px;resize:vertical;border:1px solid rgba(148,163,184,.18);border-radius:7px;background:#0a1220;color:#eef2f7;padding:10px;font:inherit;font-size:.74rem;outline:none;}
#coachNotes:focus{border-color:rgba(46,100,200,.65);box-shadow:0 0 0 3px rgba(46,100,200,.12);}

.lab-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;padding:10px;border-radius:9px;}
.tactic-name-input{flex:1 1 220px;min-width:180px;height:34px;padding:0 10px;border:1px solid rgba(148,163,184,.18);border-radius:6px;background:#0a1220;color:#eef2f7;outline:none;font:inherit;font-size:.68rem;}
.tactic-name-input:focus{border-color:rgba(46,100,200,.65);}
.lab-controls .btn{min-height:34px;padding:0 11px;border:1px solid rgba(148,163,184,.2);border-radius:6px;background:rgba(255,255,255,.055);color:#eaf0f7;font-size:.62rem;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:.18s ease;}
.lab-controls .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(148,163,184,.34);}
.lab-controls .btn-primary{background:rgba(46,100,200,.22);border-color:rgba(46,100,200,.45);}
.lab-controls .start-battle-btn{background:linear-gradient(135deg,#e3273f,#bb1c31);border-color:rgba(255,110,125,.5);box-shadow:0 7px 18px rgba(227,39,63,.18);}
.lab-controls .start-battle-btn:hover{background:linear-gradient(135deg,#f02e47,#ca2035);}
.lab-controls .btn-icon{width:34px;padding:0;display:grid;place-items:center;}
.lab-controls .btn-icon img{width:16px;height:16px;object-fit:contain;}

@media (max-width:1100px){
    .tactics-hero{margin-top:70px;}
    .lab-wrapper{grid-template-columns:1fr;}
    .lab-sidebar{position:static;max-height:none;display:grid;grid-template-columns:1fr 1.35fr;gap:8px;overflow:visible;}
    .club-card{grid-column:1/-1;}
    .pitch-wrapper{position:static;order:2;}
    .pitch{max-width:920px;}
}

@media (max-width:760px){
    body:has(.tactics-hero) .navigation{display:none;}
    body:has(.tactics-hero) .header .container{padding:0 12px;}
    body:has(.tactics-hero) .logo-icon{height:34px;}
    .tactics-hero{width:calc(100% - 20px);margin-top:64px;padding:12px 13px;}
    .tactics-hero h1{font-size:1.35rem;}
    .tactics-hero p{font-size:.68rem;}
    .tactics-lab > .container{padding:0 10px;}
    .lab-sidebar{display:flex;gap:7px;}
    .club-card{padding:10px 12px;}
    .club-card img{width:45px;height:45px;flex-basis:45px;}
    .squad-block{padding:9px;}
    #startingList{max-height:240px;}
    #benchList{max-height:155px;}
    .pitch-wrapper{margin-top:2px;}
    .pitch{aspect-ratio:68/105;border-radius:10px;}
    .pitch::after{inset:9px;}
    .half-line{left:9px;right:9px;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%);}
    .center-circle{width:24%;}
    .penalty-top,.penalty-bottom{left:50%;right:auto;top:auto;width:48%;height:18%;transform:translateX(-50%);}
    .penalty-top{top:9px;border-left:2px solid rgba(255,255,255,.88);border-right:2px solid rgba(255,255,255,.88);border-bottom:0;}
    .penalty-bottom{bottom:9px;border-left:2px solid rgba(255,255,255,.88);border-right:2px solid rgba(255,255,255,.88);border-top:0;}
    .goal-top,.goal-bottom{left:50%;right:auto;width:28%;height:7%;transform:translateX(-50%);}
    .goal-top{top:-1px;border-left:2px solid rgba(255,255,255,.8);border-right:2px solid rgba(255,255,255,.8);border-bottom:0;}
    .goal-bottom{bottom:-1px;border-left:2px solid rgba(255,255,255,.8);border-right:2px solid rgba(255,255,255,.8);border-top:0;}
    .penalty-top::after,.penalty-bottom::after{left:50%;right:auto;top:auto;width:5px;height:5px;transform:translateX(-50%);}
    .penalty-top::after{bottom:22%;}.penalty-bottom::after{top:22%;}
    .goal-top::before,.goal-bottom::before{left:50%;right:auto;width:55%;height:10px;transform:translateX(-50%);}
    .goal-top::before{top:-10px;}.goal-bottom::before{bottom:-10px;}
    .marker-number{width:31px;height:31px;font-size:.62rem;}
    .marker-name{font-size:.48rem;padding:2px 4px;margin-top:3px;}
    .tactical-controls-grid{grid-template-columns:1fr 1fr;gap:9px 12px;}
    .lab-controls{display:grid;grid-template-columns:1fr 1fr;}
    .tactic-name-input{grid-column:1/-1;width:100%;min-width:0;}
    .lab-controls .btn{width:100%;}
    .lab-controls .start-battle-btn{grid-column:1/-1;}
    .lab-notes{padding:10px;}
}

@media (max-width:430px){
    #startingList{grid-template-columns:1fr;max-height:300px;}
    #benchList{grid-template-columns:1fr 1fr;}
    .tactical-controls-grid{grid-template-columns:1fr;}
    .lab-controls{grid-template-columns:1fr 1fr;}
}