*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#0a0e1a;--sidebar:#0d1220;--card:rgba(255,255,255,0.05);
  --blue:#003DA5;--gold:#C8A84B;--green:#22c55e;--yellow:#eab308;--red:#ef4444;
  --text:#e8eaf0;--muted:#8892a4;--border:rgba(255,255,255,0.08);
}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--text);display:flex;height:100vh;overflow:hidden}
h1,h2,h3,.stat-num{font-family:'Bebas Neue',sans-serif;letter-spacing:0.05em}

/* ==========================================================================
   INTRO ANIMATION
   ========================================================================== */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
}
.intro-overlay video {
  width: 95%;
  height: 95%;
  object-fit: cover;
  transform: scale(1); /* Fără zoom artificial, acoperă ecranul nativ */
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 1.2s ease, filter 1.2s ease;
  transform-origin: center center;
}
@media (max-width: 768px) {
  .intro-overlay video {
    object-fit: contain;
  }
}
.intro-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.intro-overlay.fade-out video {
  transform: scale(2.8) translateZ(0); /* Efect masiv de "Zoom/Warp" în față */
  opacity: 0;
  filter: blur(25px) brightness(2.5); /* Efect de lumină flash 3D */
}
.skip-intro-btn {
  position: absolute;
  bottom: 40px; right: 40px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; padding: 12px 28px; border-radius: 30px;
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.05em;
  cursor: pointer; backdrop-filter: blur(10px);
  transition: all 0.3s ease; z-index: 100000;
  display: flex; align-items: center; gap: 8px;
}
.skip-intro-btn:hover { background: rgba(255,255,255,0.25); transform: translateX(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.5); }

/* SIDEBAR */
#sidebar{width:220px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.logo{padding:30px 20px 24px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;text-align:center;transition:all 0.3s ease;}
.logo:hover{background:rgba(255,255,255,0.03);}
.logo-crest{width:90px;height:90px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:3px solid var(--gold);box-shadow:0 8px 20px rgba(0,0,0,0.3);object-fit:contain;transition:all 0.3s ease;padding:4px;}
.logo:hover .logo-crest{transform:scale(1.08);box-shadow:0 10px 25px rgba(200,168,75,0.4);}
.logo h1{font-size:32px;color:#fff;line-height:1;transition:color 0.3s ease;}
.logo:hover h1{color:var(--gold);}
.logo p{font-size:12px;color:var(--muted);margin-top:6px}
nav{flex:1;padding:12px 0}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;cursor:pointer;font-size:13px;color:var(--muted);border-left:3px solid transparent;transition:all 0.2s}
.nav-item:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.nav-item.active{color:#fff;border-left-color:var(--blue);background:rgba(0,61,165,0.15)}
.nav-icon{font-size:16px;width:20px;text-align:center}
.api-box{padding:16px;border-top:1px solid var(--border)}
.api-box label{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}
#apiKeyInput{width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);font-size:12px;outline:none}
#apiKeyInput:focus{border-color:var(--blue)}
#apiStatus{font-size:11px;margin-top:5px;color:var(--muted)}
#apiStatus.ok{color:var(--green)}

/* MAIN */
#main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.topbar{padding:18px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.topbar h2{font-size:28px;color:#fff}
.phase-badge{font-size:11px;padding:4px 12px;border-radius:20px;font-weight:600}
.phase-reg{background:rgba(0,61,165,0.25);color:#7aa7ff;border:1px solid rgba(0,61,165,0.4)}
.phase-po{background:rgba(200,168,75,0.2);color:var(--gold);border:1px solid rgba(200,168,75,0.4)}
.content{flex:1;overflow-y:auto;padding:24px 28px}

/* TAB PANELS */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* SQUAD GRID */
.squad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.player-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative}
.player-card:hover{transform:translateY(-3px);border-color:rgba(0,61,165,0.5);box-shadow:0 8px 24px rgba(0,61,165,0.2)}
.player-card .card-photo{width:100%;height:140px;object-fit:cover;object-position:top;background:#1a2035}
.player-card .card-photo-placeholder{width:100%;height:140px;background:linear-gradient(135deg,#1a2035,#0d1631);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:40px;color:rgba(255,255,255,0.15)}
.card-info{padding:10px 12px}
.card-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-pos{font-size:11px;color:var(--muted);margin-top:1px}
.card-rating{position:absolute;top:8px;right:8px;background:var(--gold);color:#000;font-family:'Bebas Neue';font-size:18px;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.card-jersey{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.6);color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px}

/* MATCH REPORT */
.match-selector{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.match-selector select{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:8px;padding:9px 14px;color:var(--text);font-size:14px;outline:none;cursor:pointer}
.match-selector select:focus{border-color:var(--blue)}
.motm-card{background:linear-gradient(135deg,rgba(200,168,75,0.15),rgba(0,61,165,0.15));border:1px solid var(--gold);border-radius:12px;padding:20px;display:flex;align-items:center;gap:20px;margin-bottom:20px;animation:goldPulse 2s ease-in-out infinite}
@keyframes goldPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,0.3)}50%{box-shadow:0 0 20px 4px rgba(200,168,75,0.15)}}
.motm-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--gold);background:#1a2035}
.motm-info h3{font-size:24px;color:var(--gold)}
.motm-info p{font-size:13px;color:var(--muted)}
.motm-score{margin-left:auto;text-align:center}
.motm-score .stat-num{font-size:48px;color:var(--gold)}
.motm-score small{font-size:11px;color:var(--muted)}

.player-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border-radius:8px;margin-bottom:6px;border:1px solid var(--border)}
.player-row .p-name{flex:1;font-size:14px;font-weight:500}
.player-row .p-pos{font-size:11px;color:var(--muted);width:36px}
.player-row .p-bar-wrap{flex:2;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.player-row .p-bar{height:100%;border-radius:3px;transition:width 0.8s ease}
.score-gold{background:var(--gold)}
.score-green{background:var(--green)}
.score-yellow{background:var(--yellow)}
.score-red{background:var(--red)}
.score-badge{font-family:'Bebas Neue';font-size:20px;width:40px;text-align:right}

/* STATS ROW */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.stat-box .stat-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.stat-box .stat-num{font-size:28px;color:#fff}
.stat-box .stat-sub{font-size:11px;color:var(--muted)}

/* PROGRESSION */
.prog-header{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.prog-header select{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:13px;outline:none}
.chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
canvas{max-height:260px}

/* PROGRESSION PLAYER WRAPPER */
.prog-player-wrapper {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
}
.prog-player-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 5px 20px 5px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scroll-behavior: smooth;
  flex: 1;
}
.prog-player-grid::-webkit-scrollbar { 
  display: none; /* Safari and Chrome */
}
.prog-player-grid.dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grab;
}
.prog-player-grid.dragging:active { cursor: grabbing; }
.prog-scroll-overlay {
  position: absolute;
  top: 0; bottom: 10px; width: 80px;
  z-index: 10; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: opacity 0.3s; opacity: 0; pointer-events: none;
}
.prog-scroll-overlay.left {
  left: 0; padding-left: 5px; justify-content: flex-start;
  background: linear-gradient(to right, var(--navy) 40%, transparent);
}
.prog-scroll-overlay.right {
  right: 0; padding-right: 5px; justify-content: flex-end;
  background: linear-gradient(to left, var(--navy) 40%, transparent);
}
.prog-ctrl-btn {
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; pointer-events: auto;
  transition: transform 0.2s, color 0.2s; padding: 4px;
}
.prog-ctrl-btn:hover { color: var(--gold); transform: scale(1.2); }

/* WIDGETS PROGRESIE SEZON */
.prog-widget {
  position: relative;
  background: rgba(255, 255, 255, 0.08); /* Fundal ușor mai deschis */
  border-radius: 16px;
  padding: 20px 24px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  border-top: 4px solid transparent;
  z-index: 1;
}
.prog-widget-icon {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 110px;
  height: 110px;
  color: #fff;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}
.prog-widget-icon svg { width: 100%; height: 100%; }
.prog-widget-title {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 8px;
}
.prog-widget-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 42px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}
.prog-widget-context { font-size: 12px; font-weight: 500; opacity: 0.9; }

/* Culori Specifice Widget-urilor */
.prog-widget-green { border-top-color: var(--green); }
.prog-widget-green:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(34, 197, 94, 0.2); }
.prog-widget-green .prog-widget-context { color: var(--green); }
.prog-widget-yellow { border-top-color: var(--yellow); }
.prog-widget-yellow:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(234, 179, 8, 0.2); }
.prog-widget-yellow .prog-widget-context { color: var(--yellow); }
.prog-widget-red { border-top-color: var(--red); }
.prog-widget-red:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2); }
.prog-widget-red .prog-widget-context { color: var(--red); }
.prog-widget-gold { border-top-color: var(--gold); }
.prog-widget-gold:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(200, 168, 75, 0.2); }
.prog-widget-gold .prog-widget-context { color: var(--gold); }

/* TACTICAL MAP */
.pitch-wrap{background:linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.05));border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:22px;margin-bottom:16px;box-shadow:0 22px 80px rgba(0,0,0,0.35)}
.pitch-controls{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pitch-btn{padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--muted);font-size:13px;cursor:pointer;transition:all 0.2s}
.pitch-btn:hover{background:rgba(0,61,165,0.12);}
.pitch-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
svg.pitch{width:100%;max-width:700px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,0.35));}
.pitch-logo{filter:drop-shadow(0 0 20px rgba(255,215,0,0.35));}
.pitch-label{font-family:'Bebas Neue',sans-serif;font-size:11px;fill:#f4e29a;letter-spacing:0.08em;}

/* AI CHAT */
.api-warning{background:rgba(200,168,75,0.1);border:1px solid rgba(200,168,75,0.3);border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:13px;color:var(--gold);display:none}
.api-warning.show{display:block}
.chat-container{display:flex;flex-direction:column;height:calc(100vh - 200px)}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px;margin-bottom:12px}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-track{background:transparent}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.msg{max-width:80%;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.6}
.msg.user{background:var(--blue);color:#fff;align-self:flex-end;border-radius:12px 12px 4px 12px}
.msg.ai{background:rgba(255,255,255,0.06);border:1px solid var(--border);align-self:flex-start;border-radius:12px 12px 12px 4px}
.msg.ai strong,.msg.ai b{color:var(--gold)}
.msg.loading{display:flex;gap:6px;align-items:center;padding:16px}
.dot{width:7px;height:7px;background:var(--muted);border-radius:50%;animation:bounce 1.2s infinite}
.dot:nth-child(2){animation-delay:0.2s}
.dot:nth-child(3){animation-delay:0.4s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{padding:7px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:20px;font-size:12px;cursor:pointer;color:var(--muted);transition:all 0.2s}
.chip:hover{background:rgba(0,61,165,0.2);border-color:rgba(0,61,165,0.5);color:#7aa7ff}
.chat-input-row{display:flex;gap:10px}
#chatInput{flex:1;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:10px;padding:11px 16px;color:var(--text);font-size:14px;outline:none;font-family:'DM Sans',sans-serif}
#chatInput:focus{border-color:var(--blue)}
#sendBtn{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:11px 20px;cursor:pointer;font-size:14px;font-family:'DM Sans',sans-serif;font-weight:600;transition:all 0.2s}
#sendBtn:hover{background:#0050d8}
#sendBtn:disabled{opacity:0.5;cursor:not-allowed}

/* SHADOW XI */
.shadow-btn{background:var(--gold);color:#000;border:none;border-radius:8px;padding:10px 20px;font-family:'Bebas Neue';font-size:18px;cursor:pointer;letter-spacing:0.05em;margin-bottom:20px;transition:all 0.2s}
.shadow-btn:hover{background:#d4b055}
.formation-pitch{position:relative;background:#1a3a2a;border-radius:12px;padding:20px;min-height:420px;border:1px solid rgba(255,255,255,0.1)}
.formation-lines{position:absolute;inset:0;pointer-events:none}
.player-node{position:absolute;transform:translate(-50%,-50%);text-align:center;transition:all 0.5s}
.player-node .node-circle{width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:16px;color:#fff;margin:0 auto 4px;transition:all 0.3s}
.player-node .node-name{font-size:10px;color:#fff;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,0.8)}
.player-node .node-score{font-size:9px;color:var(--gold)}
.node-high{background:rgba(200,168,75,0.3)}
.node-mid{background:rgba(0,61,165,0.4)}
.node-low{background:rgba(239,68,68,0.3)}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:#0f1628;border:1px solid var(--border);border-radius:16px;width:90%;max-width:540px;max-height:85vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--blue);background:#1a2035}
.modal-close{margin-left:auto;background:transparent;border:none;color:var(--muted);font-size:22px;cursor:pointer}
.modal-body{padding:20px 24px}
.modal-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.modal-stat{background:rgba(255,255,255,0.04);border-radius:8px;padding:10px;text-align:center}
.modal-stat .ms-val{font-family:'Bebas Neue';font-size:22px;color:var(--gold)}
.modal-stat .ms-lbl{font-size:11px;color:var(--muted)}
.injury-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-top:12px}
.inj-high{background:rgba(239,68,68,0.2);color:var(--red);border:1px solid rgba(239,68,68,0.3)}
.inj-mid{background:rgba(234,179,8,0.2);color:var(--yellow);border:1px solid rgba(234,179,8,0.3)}
.inj-low{background:rgba(34,197,94,0.2);color:var(--green);border:1px solid rgba(34,197,94,0.3)}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.tab-panel.active{animation:fadeIn 0.3s ease}
.player-card{animation:fadeIn 0.4s ease both}

/* ==========================================================================
   TAB: COGNITIVE DEGRADATION
   ========================================================================== */
.cog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.cog-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}
.cog-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  padding-right: 4px;
}
.cog-events-list::-webkit-scrollbar {
  width: 6px;
}
.cog-events-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.cog-events-list::-webkit-scrollbar-thumb {
  background: rgba(200, 168, 75, 0.5); /* Culoarea auriu-transparentă pentru a se potrivi cu tema */
  border-radius: 4px;
}
.cog-events-list::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 168, 75, 0.8);
}
.cog-events-list li {
  line-height: 1.4;
}
.cog-event-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(circle at top left, rgba(255, 196, 87, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(13, 18, 36, 0.96), rgba(10, 14, 28, 0.92));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  flex-shrink: 0; /* Previne turtirea cartonașelor când lista se umple */
}
.cog-event-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cog-event-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cog-event-minute {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 700;
}
.cog-event-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cog-event-swap {
  border-color: rgba(249, 168, 37, 0.3);
  background:
    linear-gradient(135deg, rgba(249, 168, 37, 0.16), rgba(10, 14, 28, 0.94)),
    radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 42%);
}
.cog-swap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.cog-sub-person {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  text-align: left;
  min-width: 0;
}
.cog-sub-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 54px;
  flex: 0 0 54px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cog-sub-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cog-sub-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(14, 18, 38, 0.96), rgba(22, 28, 55, 0.9));
}
.cog-sub-number {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.cog-sub-meta {
  width: 100%;
  min-width: 0;
}
.cog-sub-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cog-sub-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.04em;
  text-wrap: balance;
}
.cog-sub-role {
  margin-top: 2px;
  font-size: 9px;
  color: var(--muted);
}
.cog-sub-stats {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.cog-sub-stats span {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 8px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.cog-sub-arrow {
  font-size: 16px;
  color: var(--gold);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 196, 87, 0.35);
}
.cog-event-note {
  color: var(--text);
}
.cog-event-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word; /* Asigură-te că textul lung nu depășește lățimea */
}
.cog-event-summary {
  margin-bottom: 8px;
  color: var(--muted);
}
.cog-event-empty {
  color: var(--muted);
  text-align: center;
}
.cog-event-warn {
  border-color: rgba(239, 68, 68, 0.35);
}
.cog-event-info {
  border-color: rgba(59, 130, 246, 0.3);
}
#cogPlayersTbody td, #cogPlayersTbody th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
#cogPlayersTbody th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cog-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.cog-chart-head select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  padding: 8px 14px;
  outline: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.cog-chart-head select:focus {
  border-color: var(--blue);
}

@media (max-width: 760px) {
  .cog-swap-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cog-sub-arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .cog-sub-photo-wrap {
    max-width: 52px;
    flex-basis: 52px;
  }
}

/* PHYSICAL STATS */
.physical-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.physical-toolbar label {
  font-size: 13px;
  color: var(--muted);
}
.physical-toolbar select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  outline: none;
  min-width: 250px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
}
.physical-toolbar select:focus {
  border-color: var(--blue);
}
.physical-toolbar select option {
  background: #0f1628;
  color: #fff;
}
.physical-status {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
/* MATCH SELECTOR */
.match-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}
#matchSelect {
  flex: 1;
  min-width: 250px;
  background: #0f1628;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: 'DM Sans';
  outline: none;
  cursor: pointer;
}
#matchSelect:hover {
  border-color: rgba(0, 61, 165, 0.5);
}
#matchSelect:focus {
  border-color: var(--blue);
}

/* BUTOANE AI MAGIC */
.ai-magic-btn {
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
  letter-spacing: 0.5px;
}
.ai-magic-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6366f1, #60a5fa);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
}
.ai-magic-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.ai-magic-green {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.ai-magic-green:hover:not(:disabled) {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
}

/* Stilizare pentru output-ul Markdown al AI-ului in Modal (Tabele și Liste) */
#aiReportModalBody h2, #aiReportModalBody h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--gold);
  margin-top: 24px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  letter-spacing: 0.05em;
}
#aiReportModalBody p { margin-bottom: 8px; line-height: 1.6; word-wrap: break-word; }
#aiReportModalBody table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
#aiReportModalBody th, #aiReportModalBody td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
#aiReportModalBody th { background: rgba(0, 61, 165, 0.15); color: var(--gold); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
#aiReportModalBody tr:hover { background: rgba(255,255,255,0.02); }
#aiReportModalBody ul, #aiReportModalBody ol { margin-left: 20px; margin-bottom: 16px; }
#aiReportModalBody li { margin-bottom: 6px; }
#aiReportModalBody strong { color: #fff; }
#aiReportModalBody a { color: var(--blue); }

/* SLIDESHOW STYLES & ANIMATIONS */
.ai-slideshow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}
.ai-slides-wrapper {
  position: relative;
  height: 460px; /* Inaltime fixa pentru a asigura spatiul de glisare in Modal */
  perspective: 1200px;
}
.ai-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top left, rgba(0, 61, 165, 0.2), transparent 70%),
              linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(20deg) translateX(50px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  overflow-y: auto;
}
.ai-slide.active {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg) translateX(0) scale(1);
  z-index: 10;
}
.ai-slide.prev {
  transform: rotateY(-20deg) translateX(-50px) scale(0.9);
}
.ai-slide.next {
  transform: rotateY(20deg) translateX(50px) scale(0.9);
}
.ai-slide-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--gold);
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transform: translateZ(30px);
}
.ai-slide-content {
  transform: translateZ(20px);
}
.ai-slide::-webkit-scrollbar { width: 6px; }
.ai-slide::-webkit-scrollbar-thumb { background: rgba(200, 168, 75, 0.5); border-radius: 4px; }
.ai-slides-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.05);
}
.ai-slide-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 61, 165, 0.4);
}
.ai-slide-btn:hover:not(:disabled) { background: #0050d8; transform: translateY(-2px); }
.ai-slide-btn:disabled { background: rgba(255,255,255,0.1); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.ai-slide-dots { display: flex; gap: 8px; }
.ai-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; }
.ai-dot.active { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 10px var(--gold); }

/* RESPONSIVE DESIGN */

@media (max-width: 768px) {
  body { flex-direction: column; height: auto; overflow: auto; }
  #sidebar { width: 100%; height: auto; position: static; order: -1; border-right: none; border-bottom: 1px solid var(--border); }
  .logo { padding: 16px 20px 12px; flex-direction: row; align-items: center; gap: 14px; text-align: left; }
  .logo-crest { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; }
  .logo h1 { font-size: 22px; line-height: 1.1; }
  .logo p { font-size: 11px; }
  nav { padding: 6px 0; display: flex; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .nav-item { flex-shrink: 0; padding: 10px 14px; border-left: none; border-bottom: 3px solid transparent; font-size: 12px; white-space: nowrap; }
  .nav-item.active { border-left-color: transparent; border-bottom-color: var(--blue); }
  #main { order: 1; overflow: visible; }
  .topbar { padding: 14px 16px; }
  .topbar h2 { font-size: 20px; }
  .content { padding: 14px 16px; }
  .squad-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .player-card .card-photo, .player-card .card-photo-placeholder { height: 110px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-box { padding: 10px 12px; }
  .stat-box .stat-num { font-size: 22px; }
  .match-selector { flex-direction: column; align-items: stretch; gap: 8px; }
  #matchSelect, .match-selector select { width: 100%; min-width: unset; }
  .ai-magic-btn { width: 100%; justify-content: center; }
  .motm-card { flex-direction: column; text-align: center; gap: 12px; }
  .motm-score { margin-left: 0; }
  .player-row { flex-wrap: wrap; gap: 6px; }
  .player-row .p-bar-wrap { width: 100%; flex: unset; }
  .chart-wrap { padding: 12px; }
  canvas { max-height: 200px; }
  .physical-toolbar { flex-direction: column; align-items: stretch; }
  .physical-toolbar select { min-width: unset; width: 100%; }
  .cog-chart-head { flex-direction: column; align-items: flex-start; }
  .cog-chart-head select { width: 100%; }
  .modal { width: 95%; max-width: none; }
  .modal-header { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .modal-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-slides-wrapper { height: auto; min-height: 380px; }
  .ai-slide { position: relative; opacity: 1; visibility: visible; transform: none !important; display: none; }
  .ai-slide.active { display: block; }
  .formation-pitch { min-height: 260px; }
  .prog-controls { flex-direction: column; }
  .prog-controls input, .prog-controls select { width: 100%; }
}