:root {
  --bg: #0b2533;
  --toolbar: #102f40;
  --btn: #1b4258;
  --btn-hover: #24546f;
  --btn-active: #f0c419;
  --btn-active-text: #102f40;
  --text: #eef6fa;
  --muted: #9fbccb;
  --danger: #e5484d;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--toolbar);
  touch-action: manipulation;
  flex: none;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

#stage {
  flex: 1;
  min-height: 0;
  position: relative;
}

#board {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

@media (max-width: 700px) {
  .title { display: none; }
  .tools { margin-left: 0; }
}

/* Pitch */
.water { fill: #0f4c66; }
.pitch-area { fill: #1677a0; }
.line { stroke: #ffffff; stroke-width: 0.1; fill: none; }
.line.six { stroke: #ffd23f; stroke-dasharray: 0.5 0.3; }
.line.halfway { stroke-opacity: 0.9; }
.boundary { stroke-width: 0.15; }
.spot { fill: #ffffff; }
.goal-net { fill: rgba(255, 255, 255, 0.35); stroke: #ffffff; stroke-width: 0.04; }
.offview { fill: var(--bg); display: none; }
[data-court="half"] .offview { display: inline; }
.goal-bar { stroke: #ffffff; stroke-width: 0.2; stroke-linecap: round; }

/* Pieces */
.team-a { --team: #e63946; --team-dark: #8f1d26; }
.team-b { --team: #f4f4f4; --team-dark: #6b7a86; }
.hit { fill: transparent; }
.piece { cursor: grab; }
.hull-shape { fill: var(--team); stroke: var(--team-dark); stroke-width: 0.07; }
.cockpit { fill: #10232e; }
.bow-arrow { fill: #000000; stroke: #000000; stroke-width: 0.03; stroke-linejoin: round; }
.paddle-shaft { stroke: #1d1d1d; stroke-width: 0.07; }
.paddle-blade { fill: #1d1d1d; }
.helmet { fill: var(--team); stroke: #10232e; stroke-width: 0.06; }
.number {
  font-size: 0.52px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #10232e;
  pointer-events: none;
}
.team-a .number { fill: #ffffff; }
.select-ring { fill: none; stroke: none; stroke-width: 0.3; }
.handle, .handle-arm { display: none; }
.selected .select-ring { stroke: #f0c419; }
.selected .handle-arm { display: inline; stroke: #f0c419; stroke-width: 0.08; stroke-dasharray: 0.15 0.1; }
.selected .handle { display: inline; cursor: alias; }
.handle-bg { fill: #10232e; stroke: #f0c419; stroke-width: 0.07; }
.handle-icon { fill: none; stroke: #f0c419; stroke-width: 0.07; stroke-linecap: round; stroke-linejoin: round; }
.ball-body { fill: #ffd23f; stroke: #8a6a00; stroke-width: 0.04; }
.ball-seam { fill: none; stroke: #1f3b8a; stroke-width: 0.07; }

/* Buttons */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--btn);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn.active, .btn.primary { background: var(--btn-active); color: var(--btn-active-text); }
.btn.danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: 0.4; cursor: default; }

.segmented { display: inline-flex; }
.segmented .btn { border-radius: 0; }
.segmented .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segmented .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.segmented .btn + .btn { border-left: 1px solid var(--toolbar); }

/* Dialogs */
.modal {
  border: none;
  border-radius: 14px;
  padding: 20px;
  background: var(--toolbar);
  color: var(--text);
  min-width: min(360px, 90vw);
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.modal p { font-size: 18px; margin: 0 0 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Lines */
.stroke {
  fill: none;
  stroke: #ffd23f;
  stroke-width: 0.18;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.arrow-head { fill: #ffd23f; }
[data-mode="draw"] { cursor: crosshair; }
[data-mode="draw"] .piece { cursor: crosshair; }

/* Library dialog */
.library { width: min(560px, 94vw); max-height: 88dvh; display: flex; flex-direction: column; }
.library:not([open]) { display: none; }
.library-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.library-header h2 { margin: 0; font-size: 22px; }
.library-body { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.library h3 { margin: 16px 0 8px; font-size: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.save-row { display: flex; gap: 8px; margin-bottom: 10px; }
.save-row input {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--btn-hover);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}
.saved-list { list-style: none; margin: 0; padding: 0; }
.saved-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--btn); }
.saved-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.saved-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-name small { color: var(--muted); }
.btn.danger-outline { background: transparent; color: #ff8a8d; border: 1px solid #a8383c; }
.empty { color: var(--muted); font-size: 15px; margin: 4px 0; }
.library-status { min-height: 1.2em; font-size: 15px; color: var(--muted); margin: 10px 0; }
.library-footer { display: flex; gap: 8px; }

/* Animation bar */
#animbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 12px;
  background: var(--toolbar);
  touch-action: manipulation;
  flex: none;
}
#animbar[hidden] { display: none; }
.anim-transport, .anim-edit { display: flex; align-items: center; gap: 8px; }
.anim-edit { margin-left: auto; }
.anim-status { font-size: 15px; color: var(--muted); min-width: 10em; padding-left: 4px; }
.icon-btn { padding: 0; width: 52px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.speed {
  min-height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--btn);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.frame-strip {
  flex-basis: 100%;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.btn.chip { min-width: 44px; padding: 0 10px; border-radius: 22px; flex: none; }
.btn.chip:disabled { opacity: 1; }