/* DartArena button system — phase 2
   One visual language across lobbies, match rooms, training games and stats pages.

   Roles:
   - primary: important CTA, filled cyan
   - secondary: normal action, dark with cyan edge glow
   - neutral: undo / low-priority utility
   - danger: destructive / reset / cancel
   - hit / miss: game feedback actions
   - compact / large: size variants only; role colors stay semantic
*/
:root{
  --da-btn-radius:12px;
  --da-btn-radius-compact:10px;
  --da-btn-radius-large:16px;
  --da-btn-height:44px;
  --da-btn-height-compact:36px;
  --da-btn-height-large:72px;

  --da-btn-bg:#0d191c;
  --da-btn-bg-top:#0f1d20;
  --da-btn-bg-hover:#112326;
  --da-btn-border:rgba(0,234,244,.52);
  --da-btn-border-hover:rgba(0,234,244,.86);
  --da-btn-text:#eefafa;
  --da-btn-cyan-glow:rgba(0,234,244,.10);

  --da-btn-neutral-bg:#10191b;
  --da-btn-neutral-border:#334348;
  --da-btn-neutral-text:#c1ccce;

  --da-btn-danger-bg:#211316;
  --da-btn-danger-border:#71323a;
  --da-btn-danger-text:#ffadb3;

  --da-btn-hit-bg:#102c24;
  --da-btn-hit-border:#2e8a69;
  --da-btn-hit-text:#73f2b4;

  --da-btn-miss-bg:#2b1519;
  --da-btn-miss-border:#873841;
  --da-btn-miss-text:#ff9fa7;
}

/* Every button starts from the same DartArena surface. More specific roles below override it. */
button{
  font:inherit;
  font-weight:850;
  border:1px solid var(--da-btn-border);
  border-radius:var(--da-btn-radius);
  color:var(--da-btn-text);
  background:linear-gradient(180deg,var(--da-btn-bg-top),#0a1517);
  box-shadow:inset 0 0 18px var(--da-btn-cyan-glow),inset 0 0 38px rgba(0,234,244,.035),0 8px 20px rgba(0,0,0,.14);
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .08s ease,opacity .14s ease,filter .14s ease;
}
button:hover:not(:disabled){
  border-color:var(--da-btn-border-hover);
  color:#fff;
  box-shadow:inset 0 0 24px rgba(0,234,244,.16),inset 0 0 48px rgba(0,234,244,.05),0 0 18px rgba(0,234,244,.09),0 10px 24px rgba(0,0,0,.16);
}
button:focus-visible{outline:2px solid rgba(0,234,244,.88);outline-offset:2px}
button:not(:disabled):active{transform:translateY(1px)}
button:disabled{opacity:.46!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}

/* Normal application controls. */
.da-btn,.primary,.outline,.danger,.availability,.jdc-hit-btn,.jdc-undo-btn,.jdc-restart-btn{
  min-height:var(--da-btn-height);
  padding:10px 16px;
  border-radius:var(--da-btn-radius)!important;
}

/* Compact utility controls. */
.da-btn-compact,.small-btn,.match-page .top-actions button,.quick button,.history-filter,.cricket-history-edit{
  min-height:var(--da-btn-height-compact);
  padding:8px 12px;
  border-radius:var(--da-btn-radius-compact)!important;
}

/* Large game actions. */
.da-btn-large,body .sixty-one-main-actions button,body .jdc-double-actions button{
  border-radius:var(--da-btn-radius-large)!important;
}

/* Secondary / standard action: dark with cyan edge glow. */
.da-btn-secondary,.outline,.small-btn,
body .jdc-hit-btn,
body .half-number-grid button,body .half-multiplier button,body .half-exact-option,
body .solo-exact-choices button,body .cricket-hit,.history-filter{
  background:linear-gradient(180deg,#0f1d20,#0a1517)!important;
  border-color:var(--da-btn-border)!important;
  color:var(--da-btn-text)!important;
  box-shadow:inset 0 0 18px var(--da-btn-cyan-glow),inset 0 0 38px rgba(0,234,244,.035),0 8px 20px rgba(0,0,0,.14)!important;
}
.da-btn-secondary:hover:not(:disabled),.outline:hover:not(:disabled),.small-btn:hover:not(:disabled),
body .jdc-hit-btn:hover:not(:disabled),
body .half-number-grid button:hover:not(:disabled),body .half-multiplier button:hover:not(:disabled),body .half-exact-option:hover:not(:disabled),
body .solo-exact-choices button:hover:not(:disabled),body .cricket-hit:hover:not(:disabled),.history-filter:hover:not(:disabled){
  background:linear-gradient(180deg,#12262a,#0b191c)!important;
  border-color:var(--da-btn-border-hover)!important;
  color:#fff!important;
  box-shadow:inset 0 0 24px rgba(0,234,244,.16),inset 0 0 48px rgba(0,234,244,.05),0 0 18px rgba(0,234,244,.09),0 10px 24px rgba(0,0,0,.16)!important;
}

/* Primary CTA: filled cyan, same radius and glow language. */
.da-btn-primary,.primary{
  background:linear-gradient(180deg,#32f1f9,#00eaf4)!important;
  border-color:#63f7fc!important;
  color:#031113!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(0,234,244,.12),0 8px 20px rgba(0,0,0,.14)!important;
}
.da-btn-primary:hover:not(:disabled),.primary:hover:not(:disabled){
  background:linear-gradient(180deg,#72faff,#16eef9)!important;
  border-color:#9afcff!important;
  color:#031113!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 24px rgba(0,234,244,.20),0 10px 24px rgba(0,0,0,.16)!important;
}

/* Neutral utility / undo. */
.da-btn-neutral,body .jdc-undo-btn,#halfUndoBtn,#soloUndoBtn,#cricketUndoBtn,.sixty-one-undo-row #undoBtn{
  background:var(--da-btn-neutral-bg)!important;
  border-color:var(--da-btn-neutral-border)!important;
  color:var(--da-btn-neutral-text)!important;
  box-shadow:inset 0 0 16px rgba(180,200,204,.04)!important;
}
.da-btn-neutral:hover:not(:disabled),body .jdc-undo-btn:hover:not(:disabled),#halfUndoBtn:hover:not(:disabled),#soloUndoBtn:hover:not(:disabled),#cricketUndoBtn:hover:not(:disabled),.sixty-one-undo-row #undoBtn:hover:not(:disabled){
  background:#172225!important;
  border-color:#4b6066!important;
  color:#f1f6f6!important;
}

/* Destructive / reset / cancel. */
.da-btn-danger,.danger,body .jdc-restart-btn,#leaveRoomBtn,#rejectProposalBtn{
  background:var(--da-btn-danger-bg)!important;
  border-color:var(--da-btn-danger-border)!important;
  color:var(--da-btn-danger-text)!important;
  box-shadow:inset 0 0 18px rgba(255,111,120,.07),0 0 14px rgba(255,111,120,.035)!important;
}
.da-btn-danger:hover:not(:disabled),.danger:hover:not(:disabled),body .jdc-restart-btn:hover:not(:disabled),#leaveRoomBtn:hover:not(:disabled),#rejectProposalBtn:hover:not(:disabled){
  background:#30191e!important;
  border-color:#95414b!important;
  color:#ffd1d4!important;
  box-shadow:inset 0 0 22px rgba(255,111,120,.11),0 0 18px rgba(255,111,120,.065)!important;
}

/* Game feedback roles. */
.da-btn-hit,body .sixty-one-hit,body .jdc-double-hit{
  background:var(--da-btn-hit-bg)!important;
  border-color:var(--da-btn-hit-border)!important;
  color:var(--da-btn-hit-text)!important;
  box-shadow:inset 0 0 26px rgba(83,227,157,.11),inset 0 0 56px rgba(83,227,157,.035),0 0 18px rgba(83,227,157,.075),0 10px 24px rgba(0,0,0,.16)!important;
}
.da-btn-miss,body .sixty-one-miss,body .jdc-double-miss,#halfMissBtn,#soloMissBtn,#cricketMissBtn{
  background:var(--da-btn-miss-bg)!important;
  border-color:var(--da-btn-miss-border)!important;
  color:var(--da-btn-miss-text)!important;
  box-shadow:inset 0 0 26px rgba(255,111,120,.10),inset 0 0 56px rgba(255,111,120,.03),0 0 18px rgba(255,111,120,.065),0 10px 24px rgba(0,0,0,.16)!important;
}
.da-btn-hit:hover:not(:disabled),body .sixty-one-hit:hover:not(:disabled),body .jdc-double-hit:hover:not(:disabled){box-shadow:inset 0 0 34px rgba(83,227,157,.16),inset 0 0 68px rgba(83,227,157,.05),0 0 22px rgba(83,227,157,.11),0 12px 28px rgba(0,0,0,.18)!important}
.da-btn-miss:hover:not(:disabled),body .sixty-one-miss:hover:not(:disabled),body .jdc-double-miss:hover:not(:disabled),#halfMissBtn:hover:not(:disabled),#soloMissBtn:hover:not(:disabled),#cricketMissBtn:hover:not(:disabled){box-shadow:inset 0 0 34px rgba(255,111,120,.14),inset 0 0 68px rgba(255,111,120,.045),0 0 22px rgba(255,111,120,.095),0 12px 28px rgba(0,0,0,.18)!important}

/* Stateful selectors share the same system while keeping their meaning. */
.tab,.format-btn,.time-chip,.calendar-day,.datetime-display,.availability{
  border-color:var(--da-btn-border)!important;
  color:var(--da-btn-text)!important;
  background:linear-gradient(180deg,#0f1d20,#0a1517)!important;
  box-shadow:inset 0 0 14px rgba(0,234,244,.06)!important;
}
.tab.active,.format-btn.active,.time-chip.selected,.calendar-day.selected,
body .sixty-one-time-grid button.active,body .sixty-one-lb-tabs button.active,
body .half-multiplier button.active,body .solo-exact-choices button.active{
  background:linear-gradient(180deg,#32f1f9,#00eaf4)!important;
  border-color:#63f7fc!important;
  color:#031113!important;
  box-shadow:0 0 18px rgba(0,234,244,.14)!important;
}
.availability.available{
  background:var(--da-btn-hit-bg)!important;
  border-color:var(--da-btn-hit-border)!important;
  color:var(--da-btn-hit-text)!important;
  box-shadow:inset 0 0 20px rgba(83,227,157,.09)!important;
}
.availability.unavailable{
  background:var(--da-btn-danger-bg)!important;
  border-color:var(--da-btn-danger-border)!important;
  color:var(--da-btn-danger-text)!important;
  box-shadow:inset 0 0 18px rgba(255,111,120,.06)!important;
}
.history-filter.active{
  background:linear-gradient(180deg,#133033,#0c2022)!important;
  border-color:var(--cyan)!important;
  color:#fff!important;
  box-shadow:inset 0 0 24px rgba(0,234,244,.15),0 0 16px rgba(0,234,244,.08)!important;
}
body .jdc-actions button.jdc-selected{
  background:linear-gradient(180deg,#133033,#0c2022)!important;
  border-color:var(--cyan)!important;
  color:#fff!important;
  box-shadow:inset 0 0 26px rgba(0,234,244,.22),inset 0 0 54px rgba(0,234,244,.065),0 0 20px rgba(0,234,244,.16)!important;
}

/* Intentionally circular controls stay circular. */
.calendar-nav{
  border-radius:50%!important;
  border-color:var(--da-btn-border)!important;
  background:linear-gradient(180deg,#0f1d20,#0a1517)!important;
  color:#00eaf4!important;
  box-shadow:inset 0 0 14px rgba(0,234,244,.07)!important;
}

/* Challenge semantics. */
.small-btn.accept,.challenge-actions .accept{
  background:linear-gradient(180deg,#32f1f9,#00eaf4)!important;
  border-color:#63f7fc!important;
  color:#031113!important;
}
.small-btn.decline,.challenge-actions .decline{
  background:var(--da-btn-danger-bg)!important;
  border-color:var(--da-btn-danger-border)!important;
  color:var(--da-btn-danger-text)!important;
}

/* Keyboard hint badge. */
.da-key{
  display:inline-grid;
  place-items:center;
  min-width:25px;
  height:23px;
  margin-left:8px;
  padding:0 6px;
  border:1px solid rgba(0,234,244,.30);
  border-radius:7px;
  background:rgba(0,234,244,.055);
  color:#83f6fb;
  font-size:10px;
  font-weight:950;
  line-height:1;
  letter-spacing:0;
}
.primary .da-key,.da-btn-primary .da-key{border-color:rgba(3,17,19,.24);background:rgba(3,17,19,.08);color:#031113}
.danger .da-key,.da-btn-danger .da-key,body .jdc-restart-btn .da-key{border-color:rgba(255,173,179,.32);background:rgba(255,111,120,.055);color:#ffc1c6}
.da-btn-hit .da-key,body .jdc-double-hit .da-key,body .sixty-one-hit .da-key{border-color:rgba(115,242,180,.32);background:rgba(83,227,157,.06);color:#9cf5c9}
.da-btn-miss .da-key,body .jdc-double-miss .da-key,body .sixty-one-miss .da-key{border-color:rgba(255,159,167,.32);background:rgba(255,111,120,.055);color:#ffc1c6}
.da-btn-neutral .da-key,body .jdc-undo-btn .da-key{border-color:rgba(193,204,206,.22);background:rgba(193,204,206,.04);color:#cbd5d7}

/* Async feedback without interfering with application-owned disabled state. */
button.ui-busy{opacity:.68!important;cursor:wait!important;pointer-events:none!important;transform:none!important}
button.ui-busy::after{content:' ';display:inline-block;width:.72em;height:.72em;margin-left:.55em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.06em;animation:da-spin .65s linear infinite}
@keyframes da-spin{to{transform:rotate(360deg)}}

/* Shared spacing and typography polish. */
.heading h2,.card>h2,.lobby-top h1,.match-head h1{line-height:1.12}
.heading{gap:14px}
.heading>div{min-width:0}
.heading button{flex:0 0 auto}
.status,.message,.muted.compact{line-height:1.4}
body:not(.match-page) .top-actions button{min-height:40px}
body:not(.match-page) .lobby-top{margin-bottom:22px}
body:not(.match-page) .heading{margin-bottom:14px}
body:not(.match-page) .player-row,body:not(.match-page) .challenge-row{min-height:58px}
#lobbyView>.lobby-grid{margin-bottom:20px}

@media(max-width:850px){
  #lobbyView>.lobby-grid{margin-bottom:16px}
  body:not(.match-page) .lobby-top{margin-bottom:18px}
}

/* Phase 3 — interaction, state, mobile and spacing polish. */
:root{
  --da-btn-height:46px;
  --da-btn-height-compact:40px;
  --da-btn-height-large:72px;
  --da-btn-gap:8px;
}

button{
  line-height:1.1;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
button:not(:disabled){cursor:pointer}
button:focus-visible{
  outline:2px solid rgba(0,234,244,.92);
  outline-offset:3px;
}
button:not(:disabled):active{
  transform:translateY(1px) scale(.99)!important;
  filter:brightness(.97);
}
button:disabled{
  opacity:.40!important;
  filter:saturate(.45) brightness(.86);
  cursor:not-allowed!important;
}

.da-btn,.primary,.outline,.danger,.availability,.jdc-hit-btn,.jdc-undo-btn,.jdc-restart-btn,
.small-btn,.history-filter,.format-btn,.tab,.time-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--da-btn-gap);
  line-height:1.1;
}

.da-btn,.primary,.outline,.danger,.availability,.jdc-hit-btn,.jdc-undo-btn,.jdc-restart-btn{
  min-height:var(--da-btn-height);
  padding:10px 16px!important;
}
.da-btn-compact,.small-btn,.match-page .top-actions button,.quick button,.history-filter,.cricket-history-edit{
  min-height:var(--da-btn-height-compact);
  padding:8px 12px!important;
}
.da-btn-large,body .sixty-one-main-actions button,body .jdc-double-actions button{
  min-height:var(--da-btn-height-large);
  padding:14px 18px!important;
}

/* Buttons that share a row should visually share a baseline and height. */
.top-actions,.challenge-actions,.camera-controls,.date-picker-actions,.room-actions,
.jdc-utility,.jdc-actions,.half-actions{
  align-items:stretch;
  gap:10px;
}
.top-actions>button,.challenge-actions>button,.camera-controls>button,.date-picker-actions>button,
.room-actions>button,.jdc-utility>button,.jdc-actions>button,.half-actions>button{
  align-self:stretch;
}

/* Active/selected state: clear, but less loud than a primary CTA. */
.tab.active,.format-btn.active,.time-chip.selected,.calendar-day.selected,
body .sixty-one-time-grid button.active,body .sixty-one-lb-tabs button.active,
body .half-multiplier button.active,body .solo-exact-choices button.active,
.history-filter.active,body .jdc-actions button.jdc-selected{
  transform:none!important;
  box-shadow:inset 0 0 18px rgba(3,17,19,.08),0 0 18px rgba(0,234,244,.16)!important;
}

/* Keep semantic disabled buttons readable instead of looking broken. */
.primary:disabled,.da-btn-primary:disabled{
  background:linear-gradient(180deg,#107f87,#0c636a)!important;
  border-color:#26939b!important;
  color:rgba(3,17,19,.72)!important;
}
.danger:disabled,.da-btn-danger:disabled,body .jdc-restart-btn:disabled{
  background:#1b1214!important;
  border-color:#4a2a2f!important;
  color:#9b7074!important;
}
.outline:disabled,.small-btn:disabled,.da-btn-secondary:disabled{
  background:#0c1517!important;
  border-color:#26383c!important;
  color:#708084!important;
}

/* Keyboard badges stay compact and vertically centred everywhere. */
.da-key{
  flex:0 0 auto;
  margin-left:2px;
  vertical-align:middle;
}

@media(hover:hover) and (pointer:fine){
  button:hover:not(:disabled){transform:translateY(-1px)}
  button:hover:not(:disabled):active{transform:translateY(1px) scale(.99)!important}
}

@media(max-width:700px){
  :root{
    --da-btn-height:48px;
    --da-btn-height-compact:42px;
    --da-btn-gap:7px;
  }
  .top-actions,.challenge-actions,.camera-controls,.date-picker-actions,.room-actions,
  .jdc-utility,.jdc-actions,.half-actions{gap:8px}
  .da-btn,.primary,.outline,.danger,.availability,.jdc-hit-btn,.jdc-undo-btn,.jdc-restart-btn{
    padding:10px 14px!important;
  }
  .da-key{
    min-width:23px;
    height:22px;
    padding:0 5px;
    font-size:9px;
  }
}

@media(max-width:480px){
  .top-actions,.challenge-actions,.date-picker-actions,.room-actions{gap:7px}
  .top-actions button,.challenge-actions button,.date-picker-actions button,.room-actions button{
    min-height:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  button{transition:none!important}
  button.ui-busy::after{animation-duration:1.2s}
}