:root {
  --bg: #f5f7fa;
  --panel: #ffffff;
  --text: #10243e;
  --accent: #0b5ed7;
  --accent-strong: #0846a6;
  --danger: #c73636;
  --muted: #e3e8ef;
  --shadow: 0 6px 18px rgba(16, 36, 62, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  background-image:
    linear-gradient(135deg, rgba(9, 12, 18, 0.2), rgba(8, 10, 14, 0.45)),
    url("assets/fondecran6.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #1f2328;
  color: #f8fbff;
  padding: 0.9rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.topbar-logo {
  width: 210px;
  height: 82px;
  object-fit: contain;
  flex-shrink: 0;
  cursor: pointer;
}

.topbar-actions {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.topbar-actions .btn {
  background: #2b3138;
  color: #d7dee8;
  border: 1px solid #3a424c;
}

.topbar-actions .btn:hover {
  background: #353c45;
}

.topbar-actions .btn-danger {
  background: #4b2f33;
  border-color: #5c3a3f;
  color: #f0d9dc;
}

.topbar-actions .btn-danger:hover {
  background: #5a373c;
}

.header-menu {
  position: relative;
}

.header-menu summary {
  list-style: none;
}

.header-menu summary::-webkit-details-marker {
  display: none;
}

.header-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 220px;
  background: #1f2328;
  border: 1px solid #2d3440;
  border-radius: 10px;
  padding: 0.5rem;
  display: none;
  gap: 0.45rem;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.header-menu[open] .header-menu-panel {
  display: flex;
}

.header-menu-panel .btn {
  width: 100%;
  text-align: left;
  background: #2b3138;
  color: #d7dee8;
  border: 1px solid #3a424c;
}

.header-menu-panel .btn:hover {
  background: #353c45;
}

.header-menu-panel .btn.menu-icon-option {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.menu-option-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  flex: 0 0 auto;
}

.header-menu-separator {
  height: 1px;
  margin: 0.15rem 0;
  background: #3a424f;
}

.account-menu-panel {
  min-width: 280px;
}

.account-status-text {
  margin: 0;
  font-size: 0.86rem;
  color: #d9e1ec;
}

.account-plan-row {
  margin: 0;
  font-size: 0.82rem;
  color: #c5d0e0;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plan-badge.plan-free {
  background: #3a424f;
  color: #e8eef8;
}

.plan-badge.plan-paid {
  background: #0f7b35;
  color: #e7ffe8;
}

.account-message-text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #b6c5d9;
}

.account-menu-panel .btn.btn-primary {
  background: #0b5ed7;
  color: #ffffff;
  border-color: #0b5ed7;
}

.account-menu-panel .btn.btn-primary:hover:enabled {
  background: #0846a6;
}

@media (min-width: 768px) {
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: initial;
    background: rgba(248, 248, 251, 0.88);
    color: #1f2328;
    padding: 0.38rem 0.75rem;
    border-bottom: 1px solid #d4d8df;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }

  .topbar-brand {
    grid-column: 2;
    justify-self: center;
    min-width: auto;
  }

  .topbar-logo {
    width: 158px;
    height: 56px;
  }

  .topbar-actions {
    grid-column: 1;
    justify-self: start;
    position: static;
    transform: none;
    top: auto;
    right: auto;
    gap: 0.2rem;
    align-items: center;
  }

  .topbar-actions .header-menu > summary.btn {
    background: transparent;
    color: #1f2328;
    border: 1px solid transparent;
    border-radius: 7px;
    min-height: auto;
    padding: 0.3rem 0.58rem;
    font-size: 0.86rem;
    line-height: 1.15;
    font-weight: 500;
    box-shadow: none;
  }

  .topbar-actions .header-menu > summary.btn:hover {
    background: #e7ebf1;
    border-color: #d5dae3;
  }

  .topbar-actions .header-menu[open] > summary.btn {
    background: #dbe2ec;
    border-color: #cdd6e3;
  }

  .header-menu-panel {
    left: 0;
    right: auto;
    top: calc(100% + 0.2rem);
    min-width: 230px;
    border-radius: 10px;
    padding: 0.34rem;
    gap: 0.16rem;
    border: 1px solid #cfd5de;
    background: rgba(251, 252, 255, 0.97);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.14);
  }

  .header-menu-panel .btn {
    min-height: auto;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #1c2430;
    font-size: 0.84rem;
    padding: 0.38rem 0.56rem;
    box-shadow: none;
  }

  .header-menu-panel .btn:hover {
    background: #e8edf6;
    border-color: #d2daea;
  }

  .header-menu-panel .btn.btn-danger {
    color: #ad2430;
  }

  .header-menu-separator {
    margin: 0.2rem 0.05rem;
    background: #d8deea;
  }

  .account-status-text {
    color: #243247;
  }

  .account-plan-row {
    color: #32445e;
  }

  .account-message-text {
    color: #556884;
  }

  .account-menu-panel .btn.btn-primary {
    background: #0b5ed7;
    color: #ffffff;
    border-color: #084cb2;
  }

  .account-menu-panel .btn.btn-primary:hover:enabled {
    background: #0846a6;
    border-color: #063985;
  }
}

.video-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.video-analysis-header > div:first-child {
  flex: 1 1 auto;
}

.video-analysis-layout {

  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.video-stage-card,
.video-sidebar-card {
  border: 1px solid #d7e0ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  padding: 0.9rem;
}

.video-stage-card {
  position: relative;
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
}

.video-exit-fs-btn {
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  left: max(0.85rem, env(safe-area-inset-left));
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(24, 30, 38, 0.75);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.video-exit-fs-btn:hover:enabled {
  background: rgba(34, 40, 48, 0.9);
}

.video-fs-events-panel {
  --video-fs-panel-alpha: 0.34;
  --video-fs-panel-alpha-strong: 0.44;
  --video-fs-item-alpha: 0.46;
  position: absolute;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 5;
  width: min(430px, calc(100vw - 1.2rem));
  max-height: calc(100dvh - 2.2rem);
  padding: 0.55rem;
  border-radius: 14px;
  border: 1px solid rgba(168, 196, 230, 0.24);
  background: linear-gradient(
    160deg,
    rgb(10 16 24 / var(--video-fs-panel-alpha)),
    rgb(6 10 16 / var(--video-fs-panel-alpha-strong))
  );
  backdrop-filter: blur(13px) saturate(130%);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.video-fs-events-header {
  cursor: move;
  user-select: none;
}

.video-fs-events-panel .video-events-header h3 {
  color: #f4f7fb;
}

.video-fs-events-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.video-fs-events-tools .field {
  margin-bottom: 0;
}

.video-fs-events-tools .field span {
  color: #dbe4f1;
  font-size: 0.78rem;
}

.video-fs-events-tools .field select,
.video-fs-events-tools .field input[type="range"] {
  background: rgb(13 21 32 / 0.52);
  border: 1px solid rgb(168 196 230 / 0.24);
  color: #f1f7ff;
}

.video-fs-opacity-field {
  grid-column: 1 / -1;
}

.video-fs-events-panel .shot-hint {
  color: #dbe4f1;
}

.video-fs-events-panel .video-events-list {
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 0.1rem;
}

.video-fs-events-panel .video-event-item {
  background: rgb(9 15 23 / var(--video-fs-item-alpha));
  border: 1px solid rgba(169, 196, 228, 0.18);
}

.video-fs-events-panel .video-event-jump {
  color: #eaf1fb;
}

.video-fs-events-panel .video-event-jump small {
  color: #b9c8dc;
}

.video-fs-events-panel .video-event-jump strong {
  color: #8ac6ff;
}

.video-fs-events-panel .video-event-actions .btn {
  background: rgba(22, 30, 41, 0.72) !important;
  color: #f2f7ff !important;
  border: 1px solid rgba(162, 188, 218, 0.26) !important;
}

.video-fs-events-header .history-icon-btn {
  background: rgba(22, 30, 41, 0.72) !important;
  color: #f2f7ff !important;
  border: 1px solid rgba(162, 188, 218, 0.26) !important;
}

.video-fs-events-header .history-icon-btn:hover:enabled {
  background: rgba(31, 40, 53, 0.82) !important;
}

.video-fs-events-panel .video-event-actions .btn:hover:enabled {
  background: rgba(31, 40, 53, 0.82) !important;
}

.video-stage-card:not(:fullscreen):not(:-webkit-full-screen):not(.is-pseudo-fullscreen) .video-fs-events-panel {
  display: none !important;
}

body.video-pseudo-fullscreen {
  overflow: hidden;
}

.video-sidebar-card {
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
}

.video-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 14px;
  background: #11181f;
  min-height: 280px;
  min-width: 0;
}

.video-stage:fullscreen {
  border-radius: 0;
  padding: 0;
  background: #000;
}

.video-controls-bar {
  --video-controls-scale: 1;
  margin-top: 0.8rem;
}

.video-controls-seek {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.video-stage-card:fullscreen,
.video-stage-card:-webkit-full-screen {
  background: #000;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
}

.video-stage-card.is-pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border: none;
}

.video-stage-card:fullscreen .video-stage,
.video-stage-card:-webkit-full-screen .video-stage {
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
}

.video-stage-card.is-pseudo-fullscreen .video-stage {
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0;
}

.analysis-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(82vh, 1100px);
  object-fit: contain;
  background: #11181f;
}

.video-stage-card:fullscreen .analysis-video,
.video-stage-card:-webkit-full-screen .analysis-video {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

.video-stage-card.is-pseudo-fullscreen .analysis-video {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

.video-overlay-controls {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.video-stage-card:fullscreen .video-controls-bar,
.video-stage-card:-webkit-full-screen .video-controls-bar,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(700px, calc(100vw - 1.2rem));
  max-height: calc(100vh - 1.2rem);
  max-height: calc(100dvh - 1.2rem);
  margin-top: 0;
  padding: 0.35rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(8, 12, 18, 0.26);
  backdrop-filter: blur(8px);
  z-index: 3;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}

.video-stage-card:fullscreen .video-controls-bar.is-auto-hidden,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-auto-hidden,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-auto-hidden {
  opacity: 0;
  pointer-events: none;
}

.video-stage-card:fullscreen .video-controls-bar.is-resizing,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resizing,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resizing {
  cursor: ew-resize;
}

.video-stage-card:fullscreen .video-controls-bar.is-resize-hover,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resize-hover,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resize-hover {
  cursor: ew-resize;
  border-color: rgba(255, 255, 255, 0.42);
}

.video-stage-card:fullscreen .video-controls-bar.is-resizing *,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resizing *,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resizing *,
.video-stage-card:fullscreen .video-controls-bar.is-resize-hover *,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-resize-hover *,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-resize-hover * {
  cursor: ew-resize !important;
}

.video-stage-card:fullscreen .video-flow-status,
.video-stage-card:-webkit-full-screen .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-flow-status {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.video-stage-card:fullscreen .video-controls-bar.is-dragging .video-flow-status,
.video-stage-card:-webkit-full-screen .video-controls-bar.is-dragging .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-controls-bar.is-dragging .video-flow-status {
  cursor: grabbing;
}

.video-stage-card:fullscreen .video-controls-seek,
.video-stage-card:-webkit-full-screen .video-controls-seek,
.video-stage-card.is-pseudo-fullscreen .video-controls-seek {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(0.45rem * var(--video-controls-scale));
}

.video-stage-card:fullscreen .video-controls-seek .btn,
.video-stage-card:-webkit-full-screen .video-controls-seek .btn,
.video-stage-card.is-pseudo-fullscreen .video-controls-seek .btn,
.video-stage-card:fullscreen #videoFsBack5Btn,
.video-stage-card:fullscreen #videoFsForward5Btn,
.video-stage-card:fullscreen #videoFsLineupBtn,
.video-stage-card:-webkit-full-screen #videoFsBack5Btn,
.video-stage-card:-webkit-full-screen #videoFsForward5Btn,
.video-stage-card:-webkit-full-screen #videoFsLineupBtn,
.video-stage-card.is-pseudo-fullscreen #videoFsBack5Btn,
.video-stage-card.is-pseudo-fullscreen #videoFsForward5Btn,
.video-stage-card.is-pseudo-fullscreen #videoFsLineupBtn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: calc(0.4rem * var(--video-controls-scale)) calc(0.55rem * var(--video-controls-scale)) !important;
  font-size: calc(0.72rem * var(--video-controls-scale)) !important;
  border-radius: 9px;
  min-width: calc(52px * var(--video-controls-scale)) !important;
  min-height: calc(36px * var(--video-controls-scale)) !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.video-stage-card:fullscreen .video-overlay-controls,
.video-stage-card:-webkit-full-screen .video-overlay-controls,
.video-stage-card.is-pseudo-fullscreen .video-overlay-controls {
  width: 100%;
  max-width: none;
  gap: calc(0.45rem * var(--video-controls-scale));
  padding: calc(0.45rem * var(--video-controls-scale));
  border-radius: 12px;
  background: rgba(17, 24, 31, 0.78);
  backdrop-filter: blur(10px);
}

.video-stage-card:fullscreen .video-custom-actions,
.video-stage-card:-webkit-full-screen .video-custom-actions,
.video-stage-card.is-pseudo-fullscreen .video-custom-actions {
  width: 100%;
  max-width: none;
  gap: calc(0.45rem * var(--video-controls-scale));
  margin-top: calc(0.45rem * var(--video-controls-scale));
}

.video-stage-card:fullscreen .btn,
.video-stage-card:-webkit-full-screen .btn,
.video-stage-card.is-pseudo-fullscreen .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-stage-card:fullscreen .video-overlay-controls .btn,
.video-stage-card:fullscreen .video-custom-actions .btn,
.video-stage-card:-webkit-full-screen .video-overlay-controls .btn,
.video-stage-card:-webkit-full-screen .video-custom-actions .btn,
.video-stage-card.is-pseudo-fullscreen .video-overlay-controls .btn,
.video-stage-card.is-pseudo-fullscreen .video-custom-actions .btn {
  min-height: calc(46px * var(--video-controls-scale));
  padding: calc(0.65rem * var(--video-controls-scale)) calc(0.72rem * var(--video-controls-scale)) !important;
  font-size: calc(0.95rem * var(--video-controls-scale)) !important;
}

.video-stage-card:fullscreen .btn:hover:enabled,
.video-stage-card:-webkit-full-screen .btn:hover:enabled,
.video-stage-card.is-pseudo-fullscreen .btn:hover:enabled {
  background: #23272b !important;
}

.video-stage-card:fullscreen .video-flow-status,
.video-stage-card:-webkit-full-screen .video-flow-status,
.video-stage-card.is-pseudo-fullscreen .video-flow-status {
  width: 100%;
  max-width: none;
  margin: 0 auto calc(0.45rem * var(--video-controls-scale));
  font-weight: 700;
  color: #f4f7fb;
  background: rgba(8, 12, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: calc(0.42rem * var(--video-controls-scale)) calc(0.55rem * var(--video-controls-scale));
  font-size: calc(0.96rem * var(--video-controls-scale));
}


.video-overlay-controls .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-overlay-controls .btn:hover:enabled {
  background: #23272b !important;
}

.video-overlay-controls .btn.btn-primary {
  background: #1f2327 !important;
  color: #ffffff !important;
  border-color: #121518 !important;
}

.video-custom-actions {
  width: min(100%, 620px);
  margin: 0.45rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.video-custom-action-btn {
  font-weight: 700;
}

.video-standard-action-btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.video-standard-action-btn:hover:enabled {
  background: #23272b !important;
}

.video-overlay-controls.video-live-actions-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-overlay-controls.video-live-actions-layout .video-action-2pm {
  grid-column: 1;
  grid-row: 1;
}

.video-overlay-controls.video-live-actions-layout .video-action-3pm {
  grid-column: 2;
  grid-row: 1;
}

.video-overlay-controls.video-live-actions-layout .video-action-gain {
  grid-column: 1;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-foul {
  grid-column: 2;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-to {
  grid-column: 3;
  grid-row: 2;
}

.video-overlay-controls.video-live-actions-layout .video-action-conceded {
  grid-column: 1 / -1;
  grid-row: 3;
}

.video-stage-footer {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.video-stage-footer .field {
  flex: 1 1 220px;
  margin-bottom: 0;
}

.video-flow-panel {\n  display: none !important;\n}

.video-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.video-flow-header h3 {
  margin: 0;
}

.video-flow-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.45rem;
}

.video-quick-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.video-sidebar {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.video-sidebar-card h3 {
  margin-top: 0;
}

.video-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.video-events-header h3 {
  margin: 0;
}

.video-analysis-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.video-analysis-summary div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.video-analysis-summary span {
  font-size: 0.72rem;
  color: #5d6d84;
}

.video-events-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  max-height: 32vh;
  overflow: auto;
}

.video-event-item {
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.45rem 0.55rem;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.video-event-jump {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.video-event-jump span {
  font-weight: 600;
}

.video-event-jump small {
  display: block;
  margin-top: 0.1rem;
  color: #5d6d84;
}

.video-event-jump strong {
  color: var(--accent);
}



.video-event-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0;
}



@media (max-width: 760px) {
  .video-analysis-header,
  .video-stage-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .video-analysis-layout {
    grid-template-columns: 1fr;
  }

  .video-event-item {
    grid-template-columns: 1fr;
  }

  .video-event-actions {
    justify-content: flex-end;
  }

  .video-flow-actions {
    grid-template-columns: 1fr;
  }

  .video-overlay-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
  }

  .video-analysis-summary {
    grid-template-columns: 1fr;
  }


  .topbar {
    padding: 0.75rem;
  }

  .topbar-logo {
    width: 168px;
    height: 66px;
  }

  .header-menu-panel {
    right: auto;
    left: 0;
  }
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
  padding-bottom: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.app-grid.video-mode {
  max-width: min(1760px, calc(100vw - 1.2rem));
}

.app-grid.video-mode.video-wide-mode {
  max-width: calc(100vw - 0.6rem);
}

body.home-screen .app-footer {
  display: none;
}

body.home-screen {
  background: inherit;
}

.app-grid.home-mode {
  display: block;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

.app-grid.home-mode #homeCard {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1rem 2.2rem;
}


.card {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.card h2 {
  margin-top: 0;
}

.hidden {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.field input {
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 1rem;
}

.field input[type="color"] {
  padding: 0.2rem;
  height: 42px;
  min-width: 64px;
  background: #fff;
  cursor: pointer;
}

.field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.field input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.field select {
  border: 1px solid #cfd8e5;
  border-radius: 10px;
  padding: 0.75rem;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
}

.setup-section {
  margin-bottom: 0.8rem;
}

.setup-header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0.6rem;
}

.setup-header-row h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.field-label-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}

.field-checkbox span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.inline {
  display: flex;
  gap: 0.5rem;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--muted);
  color: var(--text);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: #1b1d21;
  color: #8e959f;
  border-color: #2a2e35;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-light {
  background: #eef3fb;
}

.players-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.player-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.video-custom-stats-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.video-custom-stat-item {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.video-custom-stat-item strong {
  display: block;
  margin-bottom: 0.18rem;
}

.video-custom-stat-item p {
  margin: 0;
  color: #4b5f79;
  font-size: 0.9rem;
}

.video-custom-stat-item input[type="color"] {
  width: 44px;
  height: 32px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  padding: 0.1rem;
  background: #fff;
  flex: 0 0 auto;
  cursor: pointer;
}

.video-custom-stat-meta {
  margin-top: 0.2rem !important;
  font-size: 0.82rem !important;
  color: #7b8ca3 !important;
}

.player-edit-btn {
  min-width: 34px;
  padding: 0.35rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
}

.live-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.8rem;
  text-align: center;
}

.live-header strong {
  display: block;
  font-size: 1.05rem;
  color: #0e2239;
  font-weight: 700;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  background: #f7fbff;
}

.score-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  padding: 0.25rem 0.45rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.score-side strong {
  font-size: 1.55rem;
}

.score-side.possession {
  background: #d8f3dc;
  color: #0f5132;
}

.score-sep {
  font-weight: 700;
  color: #5d6d84;
}

.bonus-badge {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: #d13b2f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.label {
  margin: 0;
  font-size: 0.78rem;
  color: #5d6d84;
}

.player-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 0.5rem;
}

.live-custom-stats-grid {
  margin-top: 0.5rem;
}

.action-btn {
  min-height: 56px;
  font-weight: 700;
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
}

.action-btn:hover:enabled {
  background: #23272b !important;
}

.action-btn.btn-primary {
  background: #1f2327 !important;
  color: #ffffff !important;
  border-color: #121518 !important;
}

.action-2pm {
  grid-column: 1;
  grid-row: 1;
}

.action-3pm {
  grid-column: 2;
  grid-row: 1;
}

.action-gain {
  grid-column: 1;
  grid-row: 2;
}

.action-foul {
  grid-column: 2;
  grid-row: 2;
}

.action-to {
  grid-column: 3;
  grid-row: 2;
}

.action-conceded {
  grid-column: 1 / -1;
  grid-row: 3;
}

.shot-zone {
  margin-top: 0.9rem;
}

.shot-hint {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #4f627e;
}

.shot-hint.pending {
  color: #0b5ed7;
  font-weight: 700;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 62, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 80;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(16, 36, 62, 0.28);
  padding: 1rem;
}

.modal-card-small {
  width: min(480px, 100%);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  position: relative;
  padding-left: 2rem;
}

.modal-header h3 {
  margin: 0;
}

.modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.45rem;
  height: 1.45rem;
  transform: translateY(-50%);
  border-radius: 6px;
  background-image: url("assets/lh-favicon.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-feedback-text {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
  font-size: 0.85rem;
  line-height: 1.35;
  background: #f2f7ff;
  border: 1px solid #d4e3fb;
  color: #1f3962;
}

.auth-feedback-text.is-error {
  background: #fff2f2;
  border-color: #f5d2d2;
  color: #962f2f;
}

.stats-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
}

.stats-tabs .btn.active {
  background: var(--accent);
  color: #fff;
}

.definitions-list {
  display: grid;
  gap: 0.5rem;
}

.definitions-list div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.definitions-list strong {
  color: #0b5ed7;
}

.help-text-content {
  max-height: 70vh;
  overflow: auto;
  display: grid;
  gap: 0.6rem;
  line-height: 1.45;
  color: #20344f;
}

.help-text-content h4 {
  margin: 0.2rem 0 0.1rem;
  color: #0b5ed7;
}

.help-text-content p {
  margin: 0;
}

.help-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 0.45rem;
}

.help-logo {
  width: 260px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.help-version {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #44566d;
}

.author-profile {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.author-photo {
  width: 140px;
  height: 210px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #d7e0ec;
  flex-shrink: 0;
}

.author-text {
  display: grid;
  gap: 0.5rem;
}

@media (max-width: 760px) {
  .author-photo {
    width: 100px;
    height: 150px;
  }
}

.court-board {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f2d6a2 0%, #efc68d 40%, #e8bb7f 100%);
  border: 2px solid #cc9c63;
  touch-action: manipulation;
}

.court-svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  margin: 0 auto;
}

.court-bg-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  margin: 0 auto;
}

.court-stroke {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
}

.court-stroke-thick {
  fill: none;
  stroke: #ffffff;
  stroke-width: 5.5;
}

.court-dash {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-dasharray: 10 8;
}

.court-markers {
  position: absolute;
  inset: 0;
}

.shot-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}

.shot-marker.made {
  background: #0b5ed7;
}

.shot-marker.miss {
  background: transparent;
  border: none;
}

.shot-marker.miss::before,
.shot-marker.miss::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #d13b2f;
}

.shot-marker.miss::before {
  transform: rotate(45deg);
}

.shot-marker.miss::after {
  transform: rotate(-45deg);
}

.result-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
}

.result-actions .btn:active,
.result-actions .btn:focus-visible {
  background: #1f2327;
  color: #fff;
}

.result-actions .btn,
.gain-actions .btn {
  background: #2b2f33 !important;
  color: #f4f7fb !important;
  border: 1px solid #1f2327 !important;
  font-weight: 700 !important;
}

.result-actions .btn:hover:enabled,
.gain-actions .btn:hover:enabled {
  background: #23272b !important;
}

.gain-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.conceded-def-players {
  margin-top: 0.7rem;
}

.rebound-players {
  margin-top: 0.7rem;
}

.video-lineup-grid {
  margin-top: 0.6rem;
  grid-template-columns: 1fr 1fr;
}

.video-lineup-grid .btn.btn-primary {
  background: #0b5ed7 !important;
  color: #ffffff !important;
  border-color: #0846a6 !important;
}

.video-lineup-grid .btn.btn-primary:hover:enabled {
  background: #0846a6 !important;
}

#turnoverResultModal .modal-card-small {
  width: min(560px, 100%);
}

#turnoverResultModal .result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  justify-content: stretch;
}

#turnoverResultModal .result-actions .btn {
  width: 100%;
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.player-stats-grid div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.player-stats-grid span {
  font-size: 0.74rem;
  color: #5d6d84;
}

.player-stats-grid strong {
  font-size: 1.05rem;
}

.player-stats-grid .stats-group-title {
  grid-column: 1 / -1;
  display: block;
  margin-top: 0.25rem;
  padding: 0.2rem 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0b5ed7;
  border-bottom: 1px solid #d7e0ec;
}

.individual-stats-layout {
  display: grid;
  gap: 0.8rem;
}

.collective-map-launch {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.possession-entry-chart {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.7rem;
  align-items: center;
}

.possession-pie-figure {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 0.25rem;
}

.possession-pie-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.possession-pie-donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  background: #fff;
  border-radius: 50%;
}

.possession-pie-figure figcaption {
  text-align: center;
}

.possession-pie-figure figcaption strong {
  font-size: 0.9rem;
  color: #10243e;
}

.possession-pie-figure figcaption span {
  display: block;
  font-size: 0.72rem;
  color: #5d6d84;
}

.possession-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.possession-pie-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.possession-pie-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.possession-pie-legend strong {
  font-size: 0.78rem;
  color: #20344f;
}

.possession-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  color: #5d6d84;
}

.top5-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}

.top5-card {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: #fcfdff;
  height: 220px;
  display: flex;
  flex-direction: column;
}

.top5-card h4 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: #1d3e66;
}

.top5-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

.top5-card li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.top5-card strong {
  color: #1f2e40;
}

.btn-shot-map {
  background: #f08c00;
  color: #fff;
}

.btn-shot-map:hover {
  background: #d97900;
}

.player-court-board {
  max-width: 700px;
}

.individual-court-board {
  max-width: 430px;
}

.collective-map-wrap {
  margin-top: 0.9rem;
}

.collective-map-wrap h4 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: #24466f;
}

.stats-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.stats-header-row h2 {
  margin: 0;
}

.stats-inline-tabs {
  display: flex;
  gap: 0.45rem;
}

.stats-inline-tabs .btn.btn-opponent-active {
  background: #c73636;
  color: #fff;
}

#statsCard.opponent-theme .summary div,
#statsCard.opponent-theme .player-stats-grid div {
  border-color: #d86a6a;
  background: #fff6f6;
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.period-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.stats-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.period-tab-btn {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
}

.summary div {
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary span {
  font-size: 0.76rem;
  color: #5d6d84;
}

.summary strong {
  font-size: 1.1rem;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

th,
td {
  text-align: center;
  border-bottom: 1px solid #e5e9f0;
  padding: 0.55rem;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

.player-name-btn {
  border: none;
  background: transparent;
  color: #0b5ed7;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.foul-limit {
  background: #ffe6e6;
  color: #9f1f1f;
}

.foul-limit .player-name-btn {
  color: #9f1f1f;
}

.player-fouled-out {
  background: #d13b2f !important;
  color: #ffffff !important;
}

.player-team-btn {
  border: 2px dashed #8ca4c2;
}

.team-row {
  background: #eef3fb;
  font-weight: 700;
}

.player-shot-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
}

.player-shot-marker.made {
  background: #0b5ed7;
}

.player-shot-marker.miss {
  background: transparent;
  border: none;
}

.player-shot-marker.miss::before,
.player-shot-marker.miss::after {
  content: "";
  position: absolute;
  left: 6px;
  top: -1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #d13b2f;
}

.player-shot-marker.miss::before {
  transform: rotate(45deg);
}

.player-shot-marker.miss::after {
  transform: rotate(-45deg);
}

.event-log {
  margin: 0;
  margin-left: 0.2rem;
  padding-left: 1.5rem;
  max-height: 260px;
  overflow: auto;
}

.event-log li {
  margin-bottom: 0.35rem;
  padding-left: 0.1rem;
}

.event-row {
  cursor: pointer;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.log-header h2 {
  margin: 0;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.history-icon-btn {
  min-width: 2.15rem;
  padding: 0.55rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
}

.app-footer {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem 1rem;
  font-size: 0.68rem;
  color: #b7c2d3;
  text-align: center;
}

@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 15px;
  }

  .topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.75rem 0.75rem;
  }

  .topbar-actions {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .stats-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .stats-inline-tabs {
    justify-content: flex-end;
  }

  .app-footer {
    font-size: 0.62rem;
    gap: 0.45rem;
    text-align: center;
  }

  .app-grid {
    padding: 0.7rem;
    gap: 0.7rem;
    width: 100%;
    max-width: 100%;
  }

  .card {
    border-radius: 12px;
    padding: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .btn {
    min-height: 44px;
    padding: 0.62rem 0.75rem;
    font-size: 0.92rem;
  }

  .inline {
    flex-wrap: wrap;
  }

  .inline .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .scoreboard {
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
  }

  .score-side strong {
    font-size: 1.3rem;
  }

  .player-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .action-btn {
    min-height: 50px;
  }

  .period-controls {
    align-items: stretch;
  }

  .stats-period-tabs {
    width: 100%;
  }

  .period-controls > .btn {
    width: 100%;
  }

  .modal {
    padding: 0.5rem;
    align-items: flex-end;
  }

  .modal-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 14px 14px 10px 10px;
    padding: 0.8rem;
  }

  .modal-header h3 {
    font-size: 1rem;
  }

  .result-actions {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 0.5rem;
  }

  .result-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .gain-actions {
    grid-template-columns: 1fr;
  }

  .player-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-stats-grid strong {
    font-size: 1rem;
  }

  .table-wrap {
    overflow-x: hidden;
  }

  table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  th,
  td {
    padding: 0.28rem 0.15rem;
    font-size: 0.64rem;
    white-space: normal;
    word-break: break-word;
  }

  th:first-child,
  td:first-child {
    max-width: 72px;
  }

  .event-log {
    margin-left: 0.1rem;
    padding-left: 1.35rem;
  }
}

@media (min-width: 960px) {
  .app-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  .app-grid.match-mode {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  .app-grid.video-mode {
    grid-template-columns: minmax(0, 1200px);
    justify-content: center;
    column-gap: 1rem;
  }

  .app-grid.video-mode.video-wide-mode {
    grid-template-columns: minmax(0, calc(100vw - 1.2rem));
    justify-content: stretch;
  }

  .app-grid.video-mode #videoAnalysisCard {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
  }

  .app-grid.video-mode #liveCard,
  .app-grid.video-mode #statsCard,
  .app-grid.video-mode #logCard {
    display: none !important;
  }

  .app-grid:not(.match-mode):not(.home-mode):not(.video-mode) {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  .app-grid:not(.match-mode):not(.home-mode):not(.video-mode) #setupCard {
    grid-column: 1;
    justify-self: center;
    width: 100%;
  }

  #setupCard {
    grid-column: 1;
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  #liveCard,
  #statsCard,
  #logCard {
    grid-column: 2;
  }

  .app-grid.match-mode #liveCard,
  .app-grid.match-mode #statsCard,
  .app-grid.match-mode #logCard {
    grid-column: 1;
  }
}

.print-report-root {
  display: none;
}

.print-page {
  background: #fff;
  color: #0e2239;
  padding: 0.7mm 3mm;
  display: grid;
  gap: 1.4mm;
}

.print-page-header {
  display: grid;
  grid-template-columns: 22mm 1fr;
  align-items: center;
  gap: 3mm;
  border-bottom: 1px solid #d5deea;
  padding-bottom: 2mm;
}

.print-logo {
  width: 20mm;
  height: 20mm;
  object-fit: contain;
}

.print-page-header h2 {
  margin: 0;
  font-size: 10.5pt;
}

.print-page-header p {
  margin: 1mm 0 0;
  font-size: 8pt;
  color: #4d6078;
}

.print-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2mm;
  border: 1px solid #d6dfea;
  border-radius: 2mm;
  padding: 1.5mm;
}

.print-scoreboard > div {
  display: grid;
  justify-items: center;
  gap: 0.7mm;
}

.print-scoreboard span {
  font-size: 8.5pt;
  color: #4a5c72;
}

.print-scoreboard strong {
  font-size: 14pt;
  color: #0d2238;
}

.print-score-sep {
  font-size: 12pt;
  font-weight: 700;
  color: #5a6c83;
}

.print-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8mm;
}

.print-stats-card,
.print-top-card,
.print-player-card {
  border: 1px solid #d6dfea;
  border-radius: 2mm;
  padding: 1.2mm;
  background: #fff;
}

.print-opponent-card {
  border-color: #efcaca;
}

.print-block h3,
.print-stats-card h4,
.print-top-card h4,
.print-player-card h3 {
  margin: 0 0 1mm;
  font-size: 8.6pt;
}

.print-subtitle {
  margin-top: 2mm !important;
}

.print-main-table,
.print-mini-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

.print-main-table {
  table-layout: fixed;
}

.print-main-table th,
.print-main-table td,
.print-mini-table th,
.print-mini-table td {
  border: 1px solid #d7dfea;
  padding: 0.55mm 0.6mm;
  font-size: 6.5pt;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.print-main-table thead th {
  background: #f2f5fa;
  font-weight: 700;
}

.print-main-table td:nth-child(n + 2),
.print-main-table th:nth-child(n + 2) {
  text-align: center;
}

.print-main-table th,
.print-main-table td {
  width: calc(100% / 14);
}

.print-team-row td {
  font-weight: 700;
  background: #fafcff;
}

.print-top-card ol {
  margin: 0;
  padding-left: 5mm;
  display: grid;
  gap: 0.8mm;
}

.print-top-card li {
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  font-size: 7pt;
}

.print-empty {
  margin: 0;
  font-size: 7pt;
  color: #5f7187;
}

.print-impact-summary {
  margin: 1mm 0 0;
  font-size: 7pt;
  color: #233950;
}

.print-shot-miss::before,
.print-shot-miss::after {
  content: none !important;
}

.print-miss-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #d13b2f;
  font-weight: 700;
  line-height: 1;
  font-size: 3.2mm;
}

.print-possession-chart {
  display: grid;
  grid-template-columns: 28mm 1fr;
  gap: 1.2mm;
  align-items: center;
}

.print-possession-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.8mm;
}

.print-possession-donut {
  width: 24mm;
  height: 24mm;
  display: block;
}

.print-possession-figure figcaption {
  display: grid;
  justify-items: center;
  font-size: 6.6pt;
  color: #4f6178;
  line-height: 1.1;
}

.print-possession-figure strong {
  font-size: 8.4pt;
  color: #142c46;
}

.print-possession-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6mm;
}

.print-possession-legend li {
  display: grid;
  grid-template-columns: 3mm 1fr auto;
  align-items: center;
  gap: 1mm;
  font-size: 6.4pt;
}

.print-possession-legend .dot {
  width: 2.4mm;
  height: 2.4mm;
  border-radius: 50%;
}

.print-court-board {
  width: 100%;
  max-width: none;
  margin: 0;
}

.print-collective-court-small {
  max-width: 80mm;
  margin: 0 auto;
}

.print-player-court {
  max-width: 52mm;
  margin: 0 auto;
}

.print-player-cards {
  display: grid;
  gap: 1.2mm;
}

.print-player-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;
  gap: 1.2mm;
  align-items: start;
}
@media print {
  @page {
    size: A4;
    margin: 6mm 10mm;
  }

  body {
    margin: 0;
    background: #fff;
    color: #111;
  }

  body.printing-report * {
    visibility: hidden;
  }

  body.printing-report .print-report-root,
  body.printing-report .print-report-root * {
    visibility: visible;
  }

  body.printing-report .print-report-root {
    display: block;
    position: relative;
  }

  body.printing-report .topbar,
  body.printing-report .app-grid,
  body.printing-report .app-footer,
  body.printing-report .modal {
    display: none !important;
  }

  body.printing-report .print-court-board {
    background: #f5e0bf !important;
    border-color: #87633d !important;
  }

  body.printing-report .print-court-board .court-stroke {
    stroke: #6f5230 !important;
  }

  body.printing-report .print-court-board .court-stroke-thick {
    stroke: #6f5230 !important;
  }

  body.printing-report .print-court-board .court-svg {
    position: relative;
    z-index: 1;
  }

  body.printing-report .print-court-board .court-markers {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
  }

  body.printing-report .print-court-board .player-shot-marker {
    width: 2.6mm !important;
    height: 2.6mm !important;
    display: block !important;
    border: 0.6mm solid #0b5ed7 !important;
    background: transparent !important;
  }

  body.printing-report .print-court-board .player-shot-marker.made {
    border-color: #0b5ed7 !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss::before,
  body.printing-report .print-court-board .player-shot-marker.miss::after {
    content: none !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss {
    border: none !important;
    background: transparent !important;
  }

  body.printing-report .print-court-board .player-shot-marker.miss::before {
    content: "×" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -52%) !important;
    color: #d13b2f !important;
    font-size: 3.4mm !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .topbar,
  .app-grid,
  .app-footer,
  .modal {
    visibility: visible;
  }

  .print-page {
    break-after: page;
    page-break-after: always;
  }

  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .print-player-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

.home-hero {
  text-align: center;
  margin-bottom: 0.8rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-tile {
  border: 1px solid #d7e0ec;
  border-radius: 16px;
  padding: 0.55rem;
  background: #f7fbff;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.home-tile-art {
  width: 100%;
  max-width: 185px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  pointer-events: none;
  margin: 0 auto;
}

.home-tile strong {
  font-size: 1rem;
  color: #10243e;
}

@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-tile {
    min-height: 240px;
  }

  .video-overlay-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Icon-only startup page */
.app-grid.home-mode {
  display: grid;
  place-items: center;
  max-width: none;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

.app-grid.home-mode #homeCard {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: 760px;
  width: 100%;
  padding: 0.75rem;
  margin: 0;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-tile {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  display: block;
}

.home-tile:hover,
.home-tile:focus-visible {
  background: transparent;
  outline: none;
}

.home-tile-art {
  width: min(100%, 280px);
  height: auto;
  max-width: 280px;
  display: block;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  margin: 0 auto;
}

@media (max-width: 700px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* Final responsive overrides: iPhone / iPad / Desktop + robust centering */
.app-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-grid.home-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  justify-content: center;
  align-content: start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.75rem 0.75rem 1rem;
}

.app-grid.home-mode #homeCard {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  padding: 0.5rem;
}

.home-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
  align-items: start;
}

.home-tile {
  width: 100%;
  display: flex;
  justify-content: center;
}

.home-tile-art {
  width: 100%;
  height: auto;
  max-width: 185px;
}

/* iPhone */
@media (max-width: 767px) {
  .app-grid {
    max-width: 100%;
    padding: 0.6rem;
    gap: 0.7rem;
  }

  .app-grid.home-mode {
    padding: 0.4rem 0.5rem 0.9rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 520px;
    padding: 0.25rem;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .home-tile-art {
    max-width: 120px;
  }
}

/* iPad */
@media (min-width: 768px) and (max-width: 1199px) {
  .app-grid {
    max-width: 980px;
    padding: 0.85rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 860px;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .home-tile-art {
    max-width: 165px;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .app-grid {
    max-width: 1240px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app-grid.home-mode #homeCard {
    max-width: 1160px;
  }

  .home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .home-tile-art {
    max-width: 155px;
  }
}

/* Startup screen overrides */
.app-grid.home-mode {
  max-width: none;
  width: 100%;
  min-height: calc(100vh - 82px);
  padding: 0;
  margin: 0;
}

.app-grid.home-mode #homeCard {
  display: block;
  width: 100%;
  min-height: calc(100vh - 82px);
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.startup-hero {
  width: 100%;
  min-height: calc(100vh - 82px);
  background-image:
    linear-gradient(135deg, rgba(9, 12, 18, 0.35), rgba(8, 10, 14, 0.62)),
    url("assets/fondecran2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: end center;
  position: relative;
}

.home-version-text {
  position: absolute;
  left: 50%;
  bottom: 0.65rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #f4f7fb;
  background: rgba(6, 10, 16, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.startup-overlay {
  width: min(980px, 96vw);
  padding: 1.1rem 0.8rem 1.6rem;
}

.app-grid.home-mode .home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
}

.app-grid.home-mode .home-tile {
  width: 100%;
  display: flex;
  justify-content: center;
  background: rgba(8, 12, 18, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 0.45rem;
  backdrop-filter: blur(2px);
}

.app-grid.home-mode .home-tile:hover,
.app-grid.home-mode .home-tile:focus-visible {
  background: rgba(8, 12, 18, 0.76);
  border-color: rgba(255, 255, 255, 0.38);
}

.app-grid.home-mode .home-tile-art {
  width: min(100%, 175px);
  max-width: 175px;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .app-grid.home-mode .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .app-grid.home-mode,
  .app-grid.home-mode #homeCard,
  .startup-hero {
    min-height: calc(100vh - 126px);
  }
}

/* Desktop alignment fixes for helper/justification texts */
@media (min-width: 961px) {
  .video-analysis-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }

  .video-stage-card,
  .video-sidebar-card {
    max-width: none;
  }

  .video-sidebar {
    width: 360px;
    align-self: start;
    position: sticky;
    top: 84px;
  }

  #shotHint,
  #videoLoadedLabel,
  #videoEventsEmpty,
  #videoLineupHint,
  .modal .shot-hint {
    text-align: center;
  }
}