:root {
  --bg: #071728;
  --panel: rgba(8, 23, 40, 0.82);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #f4fbff;
  --muted: #a8c1d6;
  --accent: #49d4ff;
  --blue-team: #062fb8;
  --white-team: #f8fbff;
  --danger: #ffcc66;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(73, 212, 255, .2), transparent 32rem),
    linear-gradient(135deg, #06111e, #0b2138 48%, #06111e);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

button, input { font: inherit; }
button {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color: var(--text);
  border-radius: 999px;
  padding: .72rem 1rem;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
button:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.32); }
button:disabled { opacity: .42; cursor: not-allowed; }
button:active { transform: scale(.97); }
.player:active { transform: translate(-50%, -50%); }

.app-shell {
  height: 100vh;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 1rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.eyebrow {
  margin: 0 0 .1rem;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}
h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1; }
.topbar-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.pencil-tools { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.pencil-palette {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .38rem;
  padding: .45rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(5, 18, 32, .9);
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.pencil-palette[hidden] { display: none; }
.color-choice {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .5rem .66rem;
  border-radius: 14px;
  font-size: .82rem;
  white-space: nowrap;
}
.color-choice::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--choice-color);
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 14px var(--choice-color);
}
.color-choice.white-choice::before { box-shadow: 0 0 12px rgba(255,255,255,.85); }
.color-choice.active {
  border-color: var(--choice-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--choice-color) 45%, transparent);
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(520px, 1fr) minmax(180px, 240px);
  gap: 1rem;
}

.panel {
  align-self: stretch;
  padding: 1rem;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  overflow: auto;
}
.panel h2 { margin: 0 0 .55rem; font-size: 1.05rem; }
.panel p, .hint { color: var(--muted); line-height: 1.45; font-size: .94rem; }

.legend { display: grid; gap: .55rem; margin: 1rem 0; }
.legend span { display: flex; align-items: center; gap: .55rem; color: #d9edf8; }
.dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid rgba(255,255,255,.45); }
.dot.blue { background: var(--blue-team); }
.dot.white { background: var(--white-team); }
.dot.keeper { background: var(--danger); }
.dot.ball { background: #ffd21f; box-shadow: inset 0 0 0 2px rgba(80,50,0,.28); }
.toggles { display: grid; gap: .75rem; color: var(--muted); }
.toggles label { display: flex; gap: .5rem; align-items: center; }

.board-wrap {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}
.board {
  position: relative;
  width: min(100%, calc((100vh - 8.5rem) * 1.185));
  aspect-ratio: 640 / 540;
  max-height: calc(100vh - 8.5rem);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(0,0,0,.44), inset 0 0 0 2px rgba(255,255,255,.18);
  user-select: none;
  touch-action: none;
}
.board.full-court {
  width: min(100%, calc((100vh - 8.5rem) * 1.47));
  aspect-ratio: 1000 / 680;
}
.pool-lines, .trail-layer, .annotation-layer, .players-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.trail-layer { pointer-events: none; }
.annotation-layer { pointer-events: none; z-index: 8; }
.players-layer { pointer-events: none; z-index: 10; }
.board.drawing { cursor: crosshair; }
.board.drawing .players-layer { pointer-events: none; }
#pencilButton.active {
  background: rgba(255, 210, 31, .22);
  border-color: rgba(255, 210, 31, .72);
}

.version-badge, .scale-badge {
  position: absolute;
  z-index: 30;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(5, 18, 32, .62);
  color: rgba(244,251,255,.82);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.version-badge { left: .75rem; bottom: .65rem; }
.scale-badge { right: .75rem; bottom: .65rem; }

.two-meter-zone {
  fill: rgba(99, 219, 255, .42);
  stroke: rgba(255, 40, 40, .95);
  stroke-width: 4;
  stroke-dasharray: 8 7;
  vector-effect: non-scaling-stroke;
}
.two-meter-label { fill: rgba(255, 70, 70, .95); }
.field-line {
  stroke: rgba(255,255,255,.78);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.sideline {
  stroke: rgba(255,255,255,.62);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.field-line.thick { stroke-width: 7; }
.field-line.dashed { stroke-dasharray: 12 12; stroke: rgba(255, 50, 50, .92); }
.field-line.six-meter { stroke: rgba(255, 226, 64, .94); }
.field-line.midline { stroke: rgba(255,255,255,.9); stroke-width: 7; }
.line-label {
  fill: rgba(255,255,255,.82);
  font-size: 21px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(0,0,0,.35);
  stroke-width: 4px;
}
.line-label.goal-label { font-size: 18px; }
.goal-frame { fill: rgba(255,255,255,.12); stroke: #fff; stroke-width: 7; vector-effect: non-scaling-stroke; }
.goal-net { fill: rgba(255,255,255,.2); stroke: rgba(255,255,255,.7); stroke-width: 3; vector-effect: non-scaling-stroke; }
.goal-mouth { stroke: #fff; stroke-width: 8; vector-effect: non-scaling-stroke; }
.center-mark { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 4; stroke-dasharray: 10 12; vector-effect: non-scaling-stroke; }
.full-only { display: none; }
.half-view-labels { display: initial; }
.board:not(.full-court) #fieldGeometry .line-label { display: none; }
.board.full-court .full-only { display: initial; }
.board.full-court .half-only { display: none; }
.board.full-court .half-view-labels { display: none; }

.player {
  position: absolute;
  width: clamp(30px, 3.8vw, 48px);
  height: clamp(30px, 3.8vw, 48px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #06111e;
  font-weight: 900;
  font-size: clamp(.78rem, 1.25vw, 1.08rem);
  pointer-events: auto;
  z-index: 10; /* Z-index par défaut pour les joueurs non-ballon */
  touch-action: none;
  cursor: grab;
  box-shadow: 0 10px 24px rgba(0,0,0,.32), inset 0 0 0 3px rgba(255,255,255,.8);
  transition: box-shadow .12s ease, scale .12s ease;
}
.player.blue { background: radial-gradient(circle at 35% 28%, #5f87ff, var(--blue-team) 58%, #031b6f); color: white; }
.player.white { background: radial-gradient(circle at 35% 28%, #fff, #d8e7f5 65%); color: #0a213a; }
.player.keeper {
  background: radial-gradient(circle at 35% 28%, #ff9b9b, #e02121 64%, #920909);
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
  box-shadow: 0 10px 24px rgba(0,0,0,.32), inset 0 0 0 4px var(--keeper-cap, rgba(255,255,255,.9)), inset 0 0 0 8px rgba(255,255,255,.16);
}
.player.keeper.blue-cap { --keeper-cap: var(--blue-team); }
.player.keeper.white-cap { --keeper-cap: var(--white-team); }
.player.ball {
  width: clamp(26px, 3.2vw, 40px);
  height: clamp(26px, 3.2vw, 40px);
  background: radial-gradient(circle at 35% 28%, #fff4a8, #ffd21f 62%, #d68a00);
  color: #3c2400;
  z-index: 15; /* Le ballon doit être au-dessus des autres joueurs */
  font-size: clamp(.7rem, 1.1vw, .95rem);
  box-shadow: 0 10px 24px rgba(0,0,0,.32), inset 0 0 0 2px rgba(255,255,255,.72);
}
.player.dragging {
  cursor: grabbing;
  scale: 1.08;
  z-index: 20;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 7px rgba(73,212,255,.26), inset 0 0 0 3px rgba(255,255,255,.9);
}
.board.full-court .player {
  width: clamp(24px, 2.9vw, 38px);
  height: clamp(24px, 2.9vw, 38px);
  font-size: clamp(.68rem, 1.05vw, .9rem);
}
.board.full-court .player.ball {
  width: clamp(21px, 2.5vw, 32px);
  height: clamp(21px, 2.5vw, 32px);
}

.selection-card, .session-card {
  min-height: 72px;
  border-radius: 18px;
  padding: .9rem;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  color: #dceef8;
}
.session-card {
  min-height: auto;
  margin-bottom: .75rem;
  font-size: .88rem;
  color: var(--muted);
}
.session-card strong { color: var(--text); }
.quick-actions { display: grid; gap: .65rem; margin: 1rem 0; }
.quick-actions button { width: 100%; border-radius: 16px; }

@media (max-width: 980px) {
  body { overflow: auto; touch-action: auto; }
  .app-shell { height: auto; min-height: 100vh; }
  .workspace { grid-template-columns: 1fr; }
  .panel { display: none; }
  .board { width: 100%; max-height: none; }
}