/* Phone-only control bar + players sheet for the host desk. Wider screens never see any of this. */
#m-dock, #m-advice { display: none; }
:root { --on-ac: #060f06; }

@media (max-width: 600px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* ---- the control bar ---- */
  #m-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px 84px; gap: 8px; align-items: stretch;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--hd); border-top: 2px solid var(--ac);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
  #m-dock button {
    min-height: 58px; padding: 0; border: 1px solid var(--bd); border-radius: 14px;
    background: var(--pn); color: var(--tx); font: 600 18px system-ui; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  #m-dock button:active { transform: scale(.97); }
  #m-dock button:disabled { opacity: .35; }
  #md-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--ac) !important; color: var(--on-ac) !important; border-color: var(--ac) !important; }
  #md-toggle #md-label { font: 700 13px/1 system-ui; letter-spacing: .06em; text-transform: uppercase; }
  #md-toggle #md-time { font: 700 26px/1.05 Georgia, serif; font-variant-numeric: tabular-nums; }
  #md-toggle #md-level { font: 600 11px/1 system-ui; opacity: .8; }
  #md-toggle.running { background: var(--pn) !important; color: var(--tx) !important; border-color: var(--ac) !important; box-shadow: inset 0 0 0 1px var(--ac); }
  #md-players { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  #md-players span { font: 600 12px/1 system-ui; letter-spacing: .04em; }
  #md-players b { font: 700 22px/1 Georgia, serif; }
  #md-players[data-locked]::after { content: "🔒"; position: absolute; top: 4px; right: 6px; font-size: 11px; margin: 0; }
  #md-alert { position: absolute; top: -7px; right: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 system-ui; font-style: normal; background: #d9480f; color: #fff; animation: md-pulse 1.6s ease-in-out infinite; }
  #md-alert[hidden] { display: none; }
  @keyframes md-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

  /* ---- the table-balancing advice strip, sitting on top of the bar ---- */
  #m-advice {
    position: fixed; left: 10px; right: 10px; z-index: 899; bottom: calc(86px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
    background: var(--pn); color: var(--tx); border: 1px solid var(--ac); border-left-width: 5px; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font: 600 14px/1.3 system-ui;
  }
  #m-advice[hidden] { display: none; }
  #m-advice #ma-text { flex: 1 1 100%; }
  #m-advice button { flex: 1 1 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--bd); background: transparent; color: var(--tx); font: 600 14px system-ui; }
  #m-advice #ma-apply { background: var(--ac); color: var(--on-ac); border-color: var(--ac); }
  #m-advice.flash { animation: md-flash 1.2s ease-out 1; }
  @keyframes md-flash { 0% { box-shadow: 0 0 0 0 var(--ac); } 40% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); } }
  body.m-advice-on { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  .g32-toast { bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* ---- the players sheet: rises from the bottom ---- */
  #m-sheet {
    position: fixed; margin: auto 0 0 0; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92dvh; height: auto;
    border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); overflow: hidden;
    border: 1px solid var(--bd); border-bottom: 0; display: none; flex-direction: column;
  }
  #m-sheet[open] { display: flex; animation: ms-up .22s ease-out; }
  @keyframes ms-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  .ms-head { display: flex; align-items: center; gap: 8px; }
  .ms-head h2 { margin: 0; flex: 1; font-size: 20px; }
  .ms-head button { min-height: 44px; padding: 0 16px; background: var(--pn); color: var(--tx); border: 1px solid var(--bd); border-radius: 10px; }
  .ms-summary { margin: 6px 0 2px; color: var(--muted); font-size: 14px; }
  .ms-tables { margin: 0 0 6px; font: 600 14px system-ui; color: var(--gold); }
  .ms-balance { margin: 6px 0; }
  .ms-balance .rebalance-alert, .ms-balance .rb-balanced { margin: 0; }
  .ms-balance .btn { min-height: 46px; width: 100%; }
  #ms-search { margin: 6px 0; min-height: 46px; width: 100%; border: 1px solid var(--bd); border-radius: 10px; padding: 0 12px; background: var(--alt); color: var(--tx); }
  .ms-list { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; overscroll-behavior: contain; }
  .ms-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; border-top: 1px solid var(--bd); }
  .ms-row.out .ms-who strong { text-decoration: line-through; opacity: .7; }
  .ms-who { display: flex; flex-direction: column; gap: 2px; }
  .ms-who strong { font-size: 17px; }
  .ms-who span { font-size: 13px; color: var(--muted); }
  .ms-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .ms-acts button { flex: 1 1 auto; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bd); background: var(--pn); color: var(--tx); font: 600 15px system-ui; }
  .ms-acts button:disabled { opacity: .35; }
  .ms-acts button.ghost { flex: 0 0 auto; background: transparent; color: var(--muted); }
  .ms-acts button.danger { color: #d9480f; border-color: currentColor; background: transparent; }
  .ms-acts button.danger.armed { background: #d9480f; color: #fff; border-color: #d9480f; }
  .ms-empty { padding: 20px 0; color: var(--muted); }
}

/* the light palette uses white on the accent */
html[data-mode="light"] { --on-ac: #ffffff; }