:root{
  --court-bg: #ddd;        /* shown while texture loads */
  --line: #fff;            /* boundary + attack lines */
  --net: #111;
  --antenna: #e53935;
  --defender: #1e88e5;
  --attacker: #e67e22;
  --ok: #20bf6b;
  --near: #f1c40f;
  --miss: #e74c3c;
  --ui: #f7f7f7;
}

*{ box-sizing: border-box }
html, body{ height:100% }
body{
  margin:0;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#222;
  background:#fff;
}

/* Toolbar */
.toolbar{ padding:12px 16px; border-bottom:1px solid #eee; background:#fff; position:sticky; top:0; z-index:10 }
.toolbar .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
label{ display:inline-flex; gap:6px; align-items:center; font-size:14px }
select, input[type="checkbox"], button{ font-size:14px }
.btn{ padding:8px 12px; border:1px solid #ddd; background:#fafafa; border-radius:8px; cursor:pointer }
.btn:hover{ background:#f0f0f0 }
.btn.btn-primary{ background:#1e88e5; color:#fff; border-color:#1e88e5 }
.status{ margin-top:8px; font-size:14px; color:#333 }

/* Layout */
main{ padding:16px }
.court{
  position:relative;
  height: 75vh;                 /* always 75% of viewport height */
  width: calc(75vh / 2);        /* 2:1 (height:width) */
  max-width: 98vw;              /* don’t overflow narrow screens */
  margin:0 auto;
  background: var(--court-bg) url('/assets/court.png') center/cover no-repeat;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* Thick boundary lines (white) */
.court::before,
.court::after{
  content:"";
  position:absolute; left:0; right:0; height:6px; background:var(--line); z-index:2
}
.court::before{ top:0 }
.court::after{ bottom:0 }
.court .side-line{
  position:absolute; top:0; bottom:0; width:6px; background:var(--line); z-index:2
}
.court .side-line.left{ left:0 }
.court .side-line.right{ right:0 }

/* Net and antennas */
.net{
  position:absolute; left:0; right:0; top:50%; height:3px; background:var(--net); z-index:3
}
.antenna{
  position:absolute; top:calc(50% - 90px); width:4px; height:180px; background:var(--antenna); z-index:3
}
.antenna.left{ left:0 }
.antenna.right{ right:0 }

/* Attack lines (10 ft / 3 m) */
.ten{
  position:absolute; left:0; right:0; height:4px; background:var(--line); opacity:.9; z-index:2
}
.ten.top{ top:33.333% }     /* opponent 3 m */
.ten.bottom{ top:66.666% }  /* our 10 ft */

/* Layers */
.marker-layer, .ring-layer, .arrow-layer{ position:absolute; inset:0 }
.attack-arrow{ fill:none; stroke:#d35400; stroke-width:6 }

/* Markers */
.marker{
  position:absolute; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; user-select:none; cursor:grab;
  color:#fff; font-weight:800; font-size:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:4
}
.marker.dragging{ cursor:grabbing }
.marker.defender{ background:var(--defender) }
.marker.attacker{ background:var(--attacker) }
.marker.ok{ outline:3px solid var(--ok) }
.marker.near{ outline:3px dashed var(--near) }
.marker.miss{ outline:3px solid var(--miss) }
.badge{ pointer-events:none }

/* Targets */
.ring{ position:absolute; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:2 }
.ring.ok{ border:3px solid rgba(32,191,107,.85) }
.ring.near{ border:2px dashed rgba(241,196,15,.75) }

/* Bench */
.bench{
  width:min(96vw, 1100px);
  margin:12px auto 0;
  min-height:60px;
  background:var(--ui);
  border:1px solid #eee;
  border-radius:10px;
  display:flex; flex-wrap:wrap; gap:10px; padding:10px;
  align-items:center; justify-content:center;
}
.bench .marker{
  position:relative; transform:none; left:auto; top:auto;
  width:40px; height:40px;
}

/* Legend */
.legend{ max-width:min(96vw,1100px); margin:10px auto 0; color:#555; font-size:14px }

/* Mobile */
@media (max-width: 520px){
  .marker{ width:38px; height:38px; font-size:12px }
  .bench .marker{ width:36px; height:36px }
}


.zone-layer{
  position:absolute;
  left:0; right:0; bottom:0; top:50%;   /* our half only */
  display:grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap:0;
  z-index:1;
}
.zone-cell{
  display:grid; place-items:center;
  font-weight:700; color:rgba(255,255,255,.95);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  border: 1px dashed rgba(255,255,255,.25);
  pointer-events:none;
}


@media (max-aspect-ratio: 2/1){
  /* On very tall, narrow devices, keep width within viewport and scale height back down */
  .court{
    width: 98vw;
    height: calc(98vw * 2);     /* height = width * 2 (still 2:1) */
    max-height: 75vh;
  }
}