:root {
  --bg:#0f172a; --panel:#111827; --border:#293548; --text:#e5e7eb;
  --muted:#9ca3af; --blue:#2563eb; --blue-light:#93c5fd; --danger:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--blue-light);text-decoration:none}
button,input,select{font:inherit}
input,select{width:100%;background:#0b1220;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 10px}
.site-header{position:sticky;top:0;z-index:20;display:flex;gap:24px;align-items:center;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border)}
.site-header nav{display:flex;gap:14px;flex-wrap:wrap}
.brand{font-weight:700}
.container{max-width:1280px;margin:24px auto;padding:0 16px 40px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px}
.card.narrow{max-width:600px}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.muted{color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;width:auto;border:0;border-radius:8px;padding:9px 12px;background:var(--blue);color:white;cursor:pointer}
.button.secondary{background:#374151}.button.danger{background:var(--danger)}.button.small{padding:6px 9px;font-size:13px}
.button-row,.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.actions form{margin:0}
.stack{display:grid;gap:14px}.stack label,.form-grid label{display:grid;gap:6px}
.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
.status{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700}
.status.draft{background:rgba(245,158,11,.15);color:#fbbf24}.status.saved{background:rgba(16,185,129,.15);color:#6ee7b7}
.flash{border-radius:8px;padding:9px 11px;background:#065f46;margin-bottom:8px}
.absence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.check-card{display:flex;gap:8px;align-items:center;background:#0b1220;border:1px solid var(--border);border-radius:9px;padding:8px 10px}.check-card input{width:auto}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.playtime-panel{position:sticky;top:78px}
.playtime-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.playtime-pill{border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px}
.playtime-pill.ok{color:#6ee7b7}.playtime-pill.warn{color:#fbbf24}.playtime-pill.absent{color:var(--muted)}
.quarter-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.formation-title,.quarter-count,.save-status{color:var(--muted);font-size:14px}
.save-status.saving{color:#fbbf24}.save-status.saved{color:#6ee7b7}.save-status.error{color:#fca5a5}
.field-board{padding:12px;border-radius:14px;background:linear-gradient(#065f46,#064e3b)}
.field-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:8px}
.gk-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:4px}.goalkeeper{grid-column:3}
.field-cell,.bench-cell{min-height:76px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(17,24,39,.9);color:var(--text);padding:7px;cursor:pointer}
.read-only .field-cell{cursor:default}
.field-cell.selected,.bench-cell.selected{outline:2px solid var(--blue-light);border-color:var(--blue-light)}
.slot-label{display:block;color:var(--blue-light);font-size:10px;line-height:1.2;margin-bottom:7px}
.slot-player{display:block;font-size:12px;font-weight:650}
.bench-section{margin-top:12px}.bench-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.assignment-controls{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;gap:8px;align-items:center;margin-top:12px}
.position-tag{display:inline-block;background:#0b1220;border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px;margin:2px}
@media(max-width:900px){.editor-layout{grid-template-columns:1fr}.playtime-panel{position:static}.absence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.form-grid.two,.absence-grid{grid-template-columns:1fr}.assignment-controls{grid-template-columns:1fr}.field-cell,.bench-cell{min-height:66px;padding:4px}.slot-label{font-size:9px}.slot-player{font-size:10px}}


/* Add this to the END of app/static/app.css */

.pitch-433 {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 1.55 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.85);
  border-radius: 4px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.04) 12.5%,
      rgba(0,0,0,.04) 12.5%,
      rgba(0,0,0,.04) 25%,
      rgba(255,255,255,.04) 25%,
      rgba(255,255,255,.04) 37.5%,
      rgba(0,0,0,.04) 37.5%,
      rgba(0,0,0,.04) 50%,
      rgba(255,255,255,.04) 50%,
      rgba(255,255,255,.04) 62.5%,
      rgba(0,0,0,.04) 62.5%,
      rgba(0,0,0,.04) 75%,
      rgba(255,255,255,.04) 75%,
      rgba(255,255,255,.04) 87.5%,
      rgba(0,0,0,.04) 87.5%,
      rgba(0,0,0,.04) 100%
    ),
    #16803a;
}

.pitch-433::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: rgba(255,255,255,.9);
  transform: translateY(-50%);
}

.pitch-433::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16%;
  aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.pitch-box,
.goal-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid rgba(255,255,255,.9);
  z-index: 1;
  pointer-events: none;
}

.pitch-box {
  width: 46%;
  height: 17%;
}

.goal-box {
  width: 20%;
  height: 7%;
}

.pitch-box-top,
.goal-box-top {
  top: -3px;
}

.pitch-box-bottom,
.goal-box-bottom {
  bottom: -3px;
}

.player-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 72px;
  min-height: 72px;
  border: 0;
  background: transparent;
  color: white;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}

.player-spot:hover .player-disc,
.player-spot.selected .player-disc {
  outline: 3px solid #fde68a;
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
}

.player-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  background: #dc2626;
  border: 3px solid white;
  box-shadow: 0 3px 5px rgba(0,0,0,.35);
}

.goalkeeper-disc {
  background: #dc2626;
}

.player-number {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.pitch-433 .slot-player {
  display: none;
}

/* 4-3-3 placement */
.forward-left      { left: 30%; top: 22%; }
.forward-center    { left: 50%; top: 22%; }
.forward-right     { left: 70%; top: 22%; }

.mid-left-center   { left: 41%; top: 43%; }
.mid-center        { left: 50%; top: 58%; }
.mid-right-center  { left: 59%; top: 43%; }

.def-left          { left: 20%; top: 74%; }
.def-left-center   { left: 40%; top: 74%; }
.def-right-center  { left: 60%; top: 74%; }
.def-right         { left: 80%; top: 74%; }

.goalkeeper-spot   { left: 50%; top: 89%; }

.pitch-433.read-only .player-spot {
  cursor: default;
}

@media (max-width: 700px) {
  .player-spot {
    width: 50px;
    min-height: 50px;
  }

  .player-disc {
    width: 42px;
    height: 42px;
  }

  .player-number {
    font-size: 19px;
  }

  .pitch-433 .slot-player {
    font-size: 10px;
  }
}

/* ==================================================
   PRINTABLE GAME VIEW
   ================================================== */

.game-view-page {
  max-width: 1250px;
  margin: 0 auto;
}

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

.game-view-header h1 {
  margin: 0 0 4px;
}

.game-meta {
  display: flex;
  gap: 15px;
  font-size: 18px;
}

.game-view-actions {
  display: flex;
  gap: 8px;
}


/*
 * Four quarters:
 *
 * Q1 | Q2
 * -------
 * Q3 | Q4
 */

.print-quarter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


.print-quarter {
  min-width: 0;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 10px;
}


.print-quarter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px 7px;
}


.print-quarter-header h2 {
  margin: 0;
  font-size: 24px;
}


.print-quarter-header strong {
  font-size: 17px;
}


/* ==================================================
   MINI SOCCER FIELD
   ================================================== */

.print-pitch {
  position: relative;

  width: 100%;
  aspect-ratio: 1.55 / 1;

  overflow: hidden;

  border: 3px solid white;

  background:
    linear-gradient(
      to bottom,

      #18873f 0%,
      #18873f 12.5%,

      #147937 12.5%,
      #147937 25%,

      #18873f 25%,
      #18873f 37.5%,

      #147937 37.5%,
      #147937 50%,

      #18873f 50%,
      #18873f 62.5%,

      #147937 62.5%,
      #147937 75%,

      #18873f 75%,
      #18873f 87.5%,

      #147937 87.5%,
      #147937 100%
    );
}


/* Halfway line */

.print-pitch::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 50%;

  height: 2px;

  background: white;

  transform: translateY(-50%);
}


/* Center circle */

.print-pitch::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 18%;
  aspect-ratio: 1;

  border: 2px solid white;
  border-radius: 50%;

  transform:
    translate(-50%, -50%);
}


/* ==================================================
   PLAYERS
   ================================================== */

.print-player {
  position: absolute;

  transform:
    translate(-50%, -50%);

  width: 95px;

  text-align: center;

  z-index: 2;
}


.print-shirt {
  display: flex;

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

  width: 44px;
  height: 44px;

  margin:
    0 auto 2px;

  border:
    2px solid white;

  border-radius: 50%;

  background:
    #dc2626;

  color:
    white;

  font-size:
    22px;

  font-weight:
    900;

  line-height:
    1;
}


.goalkeeper-shirt {
  background: #dc2626;
}


.print-player-name {
  display: none;
}


/* ==================================================
   4-3-3 PLAYER LOCATIONS
   ================================================== */

/* Forwards */

.print-forward-left {
  left: 30%;
  top: 22%;
}

.print-forward-center {
  left: 50%;
  top: 22%;
}

.print-forward-right {
  left: 70%;
  top: 22%;
}


/* Midfield */

.print-mid-left-center {
  left: 41%;
  top: 43%;
}

.print-mid-center {
  left: 50%;
  top: 58%;
}

.print-mid-right-center {
  left: 59%;
  top: 43%;
}


/* Defense */

.print-def-left {
  left: 20%;
  top: 74%;
}

.print-def-left-center {
  left: 40%;
  top: 74%;
}

.print-def-right-center {
  left: 60%;
  top: 74%;
}

.print-def-right {
  left: 80%;
  top: 74%;
}


/* Goalkeeper */

.print-goalkeeper {
  left: 50%;
  top: 89%;
}


/* ==================================================
   BENCH
   ================================================== */

.print-bench {
  display: grid;

  grid-template-columns:
    auto repeat(3, minmax(0, 1fr));

  align-items: center;

  gap: 5px;

  padding-top: 7px;

  font-size: 12px;
}


.print-bench-label {
  font-weight: 800;
}


.print-bench-player {
  overflow: hidden;

  padding: 4px 6px;

  border:
    1px solid #374151;

  border-radius:
    5px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


/* ==================================================
   PRINT
   ================================================== */

@media print {

  @page {
    size: letter landscape;
    margin: 0.25in;
  }


  html,
  body {
    margin: 0 !important;
    padding: 0 !important;

    background:
      white !important;

    color:
      black !important;
  }


  /*
   * Hide normal app navigation.
   */

  .site-header,
  .screen-only,
  .flash,
  nav {
    display:
      none !important;
  }


  .container {
    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  .game-view-page {
    width:
      100%;

    max-width:
      none;
  }


  /*
   * Compact print header.
   */

  .game-view-header {
    margin-bottom:
      5px;
  }


  .game-view-header h1 {
    font-size:
      20px;

    color:
      black;
  }


  .game-meta {
    font-size:
      13px;

    color:
      black;
  }


  /*
   * Force all four quarters
   * onto a single page.
   */

  .print-quarter-grid {
    grid-template-columns:
      repeat(2, 1fr);

    grid-template-rows:
      repeat(2, auto);

    gap:
      7px;
  }


  .print-quarter {
    break-inside:
      avoid;

    page-break-inside:
      avoid;

    padding:
      5px;

    border:
      1px solid #777;

    border-radius:
      4px;

    background:
      white;
  }


  .print-quarter-header {
    padding-bottom:
      3px;
  }


  .print-quarter-header h2 {
    color:
      black;

    font-size:
      17px;
  }


  .print-quarter-header strong {
    color:
      black;

    font-size:
      13px;
  }


  /*
   * Keep field colors when printing.
   */

  .print-pitch,
  .print-shirt {

    -webkit-print-color-adjust:
      exact !important;

    print-color-adjust:
      exact !important;
  }


  /*
   * Shorter fields allow four
   * quarters on one Letter page.
   */

  .print-pitch {
    aspect-ratio:
      2.05 / 1;

    border-width:
      2px;
  }


  /*
   * LARGE jersey numbers.
   */

  .print-shirt {
    width:
      36px;

    height:
      40px;

    font-size:
      20px;

    border-width:
      2px;
  }


  /*
   * Names are intentionally bold
   * for quick sideline reading.
   */

  .print-player-name {
    max-width:
      90px;

    color:
      white;

    font-size:
      10px;

    font-weight:
      900;
  }


  .print-player {
    width:
      90px;
  }


  /*
   * Bench stays readable but compact.
   */

  .print-bench {
    padding-top:
      3px;

    color:
      black;

    font-size:
      10px;
  }


  .print-bench-player {
    border-color:
      #999;

    padding:
      2px 4px;
  }

}