/* Handball Tracker Cloud v1.28 revision 1
   Live score placement and independent offense/defense lineups. */

/* The live header is now only match identity + secondary controls. */
#gamePanel>.card.compact.topbar{
  grid-template-columns:minmax(180px,1fr) auto!important;
}
#gamePanel>.card.compact.topbar>.button-row{
  grid-column:2!important;
  justify-content:flex-end!important;
}

/* Keep score and clock directly between tracking options and the court. */
.live-court-status-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(140px,auto);
  gap:10px;
  align-items:stretch;
  margin:10px 0;
}
.live-court-status-row .live-score-board{
  width:100%;
  min-width:0!important;
  margin:0;
}
.live-court-status-row .match-clock-panel{
  margin:0;
  min-width:145px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
}
.live-court-status-row .match-clock-panel.hidden{display:none!important}
.live-court-status-row:has(.match-clock-panel.hidden){grid-template-columns:1fr}
.live-court-status-row .match-clock-panel .button-row{flex-wrap:nowrap}
.live-court-status-row .match-clock-panel button{min-height:34px;padding:6px 8px;font-size:10px}

/* Start-game lineup setup: offense and defense are visible and independent. */
.dual-lineup-setup{padding:14px!important}
.lineup-setup-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.lineup-setup-title-row h3{margin:0 0 3px!important}
.lineup-setup-title-row .hint{margin:0!important}
.compact-action{min-height:34px!important;padding:6px 9px!important;font-size:11px!important;white-space:nowrap}
.lineup-phase-setup{
  padding:11px;
  border:1px solid #24445c;
  border-radius:12px;
  background:#061522;
}
.lineup-phase-setup+.lineup-phase-setup{margin-top:9px}
.lineup-phase-setup h4{
  margin:0 0 8px;
  color:#dce7ee;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.lineup-phase-setup.defense-phase{background:#081a2a}
.lineup-setup-help{margin-top:4px!important;color:#9fb4c4!important}
.defense-lineup-setup-grid label{font-size:10px!important}

/* Both match lineups sit beside the court on desktop. */
.dual-live-lineup{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
}
.live-lineup-phase{
  padding:8px;
  border:1px solid #24445c;
  border-radius:12px;
  background:#061522;
}
.live-lineup-defense{background:#091b2b}
.live-lineup-phase-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  margin-bottom:7px;
}
.live-lineup-phase-heading strong{
  color:#6fe180;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.live-lineup-defense .live-lineup-phase-heading strong{color:#65a9ff}
.live-lineup-phase-heading span{color:#7891a5;font-size:8px;text-align:right}
.live-lineup-position-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
}
.dual-live-lineup .lineup-position-btn{
  display:flex!important;
  min-width:0;
  min-height:48px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:5px 3px!important;
  text-align:center!important;
}
.dual-live-lineup .lineup-position-btn .lineup-position{
  width:100%;
  overflow:hidden;
  color:#8fa6b8!important;
  font-size:8px!important;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dual-live-lineup .lineup-position-btn strong{
  color:#fff;
  font-size:15px;
  line-height:1;
}
.dual-live-lineup .lineup-attack-btn{border-top:2px solid rgba(111,225,128,.55)!important}
.dual-live-lineup .lineup-defense-btn{border-top:2px solid rgba(101,169,255,.55)!important}

@media(max-width:1100px){
  #gamePanel>.card.compact.topbar{grid-template-columns:minmax(150px,1fr) auto!important}
  #gamePanel>.card.compact.topbar>.button-row{grid-column:2!important;overflow-x:auto;flex-wrap:nowrap}
}

@media(max-width:900px){
  #gamePanel>.card.compact.topbar{grid-template-columns:1fr!important}
  #gamePanel>.card.compact.topbar>.button-row{grid-column:1!important;grid-row:auto!important;justify-content:flex-start!important}
  .live-court-status-row{grid-template-columns:minmax(0,1fr) minmax(118px,auto);margin:8px 0}
  .live-court-status-row .match-clock-panel{min-width:118px!important;flex-direction:column;justify-content:center}
  .live-court-status-row .match-clock-panel .button-row{justify-content:center}
  .tracking-stage-layout{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tracking-main-card{grid-column:1/-1!important;grid-row:1!important;order:initial!important}
  #homeLineupPanel{grid-column:1!important;grid-row:2!important;order:initial!important}
  #awayLineupPanel{grid-column:2!important;grid-row:2!important;order:initial!important}
  .lineup-panel{position:static!important;width:auto!important}
  .lineup-position-list{grid-template-columns:1fr!important}
  .live-lineup-position-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:620px){
  .lineup-setup-title-row{display:block}
  .lineup-setup-title-row .compact-action{width:100%;margin-top:8px}
  .lineup-phase-setup{padding:9px}
  .live-court-status-row{grid-template-columns:minmax(0,1fr) 104px;gap:6px}
  .live-court-status-row .live-score-board{padding:7px 8px!important}
  .live-court-status-row .score-side{min-width:0!important}
  .live-court-status-row .score-team-name{display:block;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .live-court-status-row .score-control-row{gap:4px!important}
  .live-court-status-row .score-control-row button{width:27px!important;height:27px!important;min-height:27px!important}
  .live-court-status-row .score-control-row strong{font-size:23px!important}
  .live-court-status-row .match-clock-panel{min-width:104px!important;padding:6px!important}
  .live-court-status-row .match-clock-panel button{padding:5px 4px;font-size:8px}
  #matchClockDisplay{font-size:21px!important}
  .tracking-stage-layout{grid-template-columns:1fr!important}
  #homeLineupPanel,#awayLineupPanel{grid-column:1!important;grid-row:auto!important}
  .live-lineup-position-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:390px){
  .live-court-status-row{grid-template-columns:1fr}
  .live-court-status-row .match-clock-panel{flex-direction:row;min-width:0!important}
}