body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto;
  background: radial-gradient(circle at top,#1e293b,#020617);
  color:white;
  overflow:hidden; /* no scrolling */
}

.app{
  display:grid;
  grid-template-columns:260px 1fr 360px;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* LEFT SIDEBAR */
.controls{
  height:100vh;
  background:#0f172a;
  border-right:1px solid rgba(255,255,255,0.06);
  padding:22px;

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

  box-shadow:8px 0px 30px rgba(0,0,0,0.6);

  overflow-y:auto;   /* makes sidebar scrollable */
  overflow-x:hidden;
}

.sidebarHeader{
  font-size:18px;
  font-weight:700;
  color:#e5e7eb;
}

.toolSection{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sectionTitle{
  font-size:12px;
  font-weight:700;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.playerBench{
  display:flex;
  gap:14px;
}

.playerToken{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:grab;
  user-select:none;
  transition:.18s;
}

.playerToken:hover{
  transform:scale(1.08);
}

.playerToken.teamA{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.playerToken.teamB{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

.hintText{
  font-size:12px;
  color:#6b7280;
}

.dangerBtn{
  border:none;
  background:#7f1d1d;
  color:white;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  transition:.2s;
}

.dangerBtn:hover{
  background:#991b1b;
}

/* FORMATION SELECTOR */
.formationSelector{
  background:#1f2937;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  transition:.2s;
  position:relative;
  z-index:100;
}

.formationSelector:hover{
  background:#374151;
}

.formationArrow{
  opacity:.65;
}

/* CENTER BOARD */
.board{
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle,#0f172a,#020617);
  overflow:hidden;
  height:100vh;
  
  position:relative;
}

#soccerField{
  position:relative;
  border:4px solid white;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  border-radius:10px;
  margin:auto;
  max-height:78vh;
}

/* PLAYER CIRCLES */
.player{
  position:absolute;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:white;
  cursor:grab;
  user-select:none;
  z-index:10;
}
.player:hover{
  transform:scale(1.08);
}

.player:active{
  cursor:grabbing;
}

.teamA{
  background:#1e88e5;
}

.teamB{
  background:#e53935;
}

/* RIGHT AI PANEL */
.aiPanel{
  width:360px;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#0f172a;
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-10px 0px 30px rgba(0,0,0,0.6);
}

.aiHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:#111827;
}

.aiTitle{
  font-size:15px;
  font-weight:700;
  color:#e5e7eb;
}

.aiStatus{
  font-size:12px;
  color:#22c55e;
}

.aiChat{
  flex:1;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.aiInputContainer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
  background:#111827;
}

#aiInput{
  flex:1;
  border:none;
  outline:none;
  padding:12px 16px;
  border-radius:30px;
  background:#1f2937;
  color:white;
  font-size:14px;
}

#aiInput::placeholder{
  color:#9ca3af;
}

#aiSend{
  border:none;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:white;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}

#aiSend:hover{
  transform:scale(1.05);
}

/* FORMATION MODAL */
.formationModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
  z-index:2000;
}

.formationPanel{
  background:#0f172a;
  width:460px;
  max-height:560px;
  border-radius:14px;
  padding:22px;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 80px rgba(0,0,0,0.75);
  border:1px solid rgba(255,255,255,0.08);
}

.formationPanelHeader{
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
  color:#e5e7eb;
}

.formationList{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  padding-right:6px;
}

.formationItem{
  background:#1f2937;
  border:1px solid rgba(255,255,255,0.06);
  padding:14px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.formationItem:hover{
  background:#374151;
  transform:translateY(-1px);
}

.formationTag{
  font-size:12px;
  color:#9ca3af;
}

/* nicer scrollbar */
.formationList::-webkit-scrollbar,
.aiChat::-webkit-scrollbar{
  width:6px;
}

.formationList::-webkit-scrollbar-thumb,
.aiChat::-webkit-scrollbar-thumb{
  background:#374151;
  border-radius:10px;
}

/* ============================= */
/* DRAW TOOL PALETTE */
/* ============================= */

.toolRow{
  display:flex;
  gap:10px;
}

.toolBtn{
  flex:1;
  background:#1f2937;
  border:1px solid rgba(255,255,255,0.08);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s;
  font-size:13px;
}

.toolBtn:hover{
  background:#374151;
  transform:translateY(-1px);
}

.toolBtn:active{
  transform:translateY(0px);
}

.toolBtn.isActive{
  outline:2px solid rgba(59,130,246,0.55);
  background:linear-gradient(135deg,#1f2937,#111827);
}

.toolGhost{
  background:transparent;
}

.toolGhost:hover{
  background:rgba(255,255,255,0.06);
}

.toolPrimary{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  border:none;
  color:white;
}

.toolPrimary:hover{
  filter:brightness(1.05);
}

.colorRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.colorSwatch{
  width:28px;
  height:28px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition:.18s;
}

.colorSwatch:hover{
  transform:scale(1.08);
}

.colorSwatch.isActive{
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 0 3px rgba(59,130,246,0.35);
}

.colorPicker{
  width:42px;
  height:30px;
  border:none;
  background:transparent;
  cursor:pointer;
}

/* Drawing canvas overlay */
#drawCanvas{
  position:absolute;
  inset:0;
  z-index:5; /* above pitch svg, below players (players are appended after canvas) */
}

.player{
  position:absolute;
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  color:white;
  cursor:grab;
  user-select:none;
}

.playerNumber{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:14px;
  font-weight:700;
  pointer-events:none;
}

.playerName{
  position:absolute;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  color:white;
  text-shadow:0 2px 4px rgba(0,0,0,0.6);
  pointer-events:none;
}

/* PLAYER EDITOR */

.playerEditor{
  position:fixed;
  z-index:4000;
  width:260px;
  padding:18px;
  border-radius:16px;
  background:#0f172a;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.playerEditor.hidden{
  display:none;
}

.playerEditorHeader{
  font-size:15px;
  font-weight:700;
  color:#e5e7eb;
  margin-bottom:4px;
}

.editorLabel{
  font-size:12px;
  font-weight:700;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.editorInput{
  border:none;
  outline:none;
  background:#1f2937;
  color:white;
  border-radius:12px;
  padding:11px 12px;
  font-size:14px;
  border:1px solid rgba(255,255,255,0.06);
}

.editorInput:focus{
  border-color:rgba(59,130,246,0.55);
  box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}

.editorActions{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.editorBtn{
  flex:1;
  border:none;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s;
}

.editorBtnGhost{
  background:#1f2937;
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,0.06);
}

.editorBtnGhost:hover{
  background:#374151;
}

.editorBtnPrimary{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:white;
}

.editorBtnPrimary:hover{
  filter:brightness(1.05);
}

/* ============================= */
/* EXPORT MENU */
/* ============================= */

/* Sidebar bottom actions */

.sidebarActions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:40px; /* prevents Windows taskbar overlap */
}

/* Export menu */

.exportContainer{
  position:relative;
  width:100%;
}
.exportContainer .toolBtn{
  width:100%;
}

.exportMenu{
  position:absolute;
  left:0;
  bottom:52px;
  width:100%;
  background:#0f172a;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:3000;
}

.exportMenu.open{
  display:flex;
}

.exportItem{
  background:none;
  border:none;
  color:white;
  text-align:left;
  padding:12px 14px;
  cursor:pointer;
  font-size:13px;
  transition:.15s;
}

.exportItem:hover{
  background:#1f2937;
}

#formationSelector{
  position:relative;
  z-index:50;
}

.controls::-webkit-scrollbar{
  width:6px;
}

.controls::-webkit-scrollbar-thumb{
  background:#374151;
  border-radius:10px;
}

.controls::-webkit-scrollbar-track{
  background:transparent;
}

.frameControls{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  
  display:flex;
  align-items:center;
  gap:20px;

  background:rgba(15,23,42,0.85);
  backdrop-filter:blur(10px);

  padding:10px 20px;
  border-radius:14px;

  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.frameArrow{
  background:#1f2937;
  border:none;
  color:white;
  font-size:18px;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}

.frameArrow:hover{
  background:#374151;
}

#frameIndicator{
  font-weight:600;
}

.ghostPlayer{
  opacity:0.25;
}


.frameControls{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:20px;
    background:rgba(15,23,42,0.9);
    backdrop-filter:blur(10px);
    padding:12px 20px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.frameArrow{
    background:#1f2937;
    border:none;
    color:white;
    font-size:18px;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
}

.frameArrow:hover{
    background:#374151;
}

.frameIndicator{
    font-weight:600;
}

/* FRAME VIEWPORT */

.frameViewport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

/* MAIN FIELD */

.frameMain{
  position:relative;
  border:4px solid white;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

/* GHOST FIELDS */

.frameGhost{
  width:320px;
  height:560px;

  opacity:.18;

  filter:blur(1px) grayscale(.3);

  transform:scale(.82);

  pointer-events:none;

  position:relative;
}

.frameGhost svg{
  opacity:.5;
}

/* CREATE FRAME BUTTON */

.createFrameBtn{
  position:absolute;
  right:80px;
  bottom:100px;

  width:60px;
  height:60px;

  border-radius:50%;
  border:none;

  font-size:32px;
  font-weight:700;

  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:white;

  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);

  display:none;
  align-items:center;
  justify-content:center;

  transition:.25s;
  z-index:50;
}

.createFrameBtn:hover{
  transform:scale(1.1);
}

.frameViewport{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:60px;

  width:1200px;

  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.frameRenameInput{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:white;

  padding:6px 10px;

  border-radius:8px;

  font-size:14px;
  font-weight:600;

  outline:none;

  text-align:center;

  width:140px;

  transition:.2s;
}

.frameRenameInput:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.25);
}