/* HORO-BEAT sim: online play (site/ui/online.js): the Online choice of the play setup (the lobby), the opponent's
   link in its tag of the match bar, my own link's chip and the waiting row of the decision panel, the game-over
   footer of a room, the out-of-sync window.
   Owner: the online lane. Built from the setup screen's own parts (.hb-setup__*, .hb-deckpick: play.css) and the
   components (inputs, segments, pills); flat paint only. */

@layer hb-screens {
  /* ================================================================== the lobby */
  .hb-online { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .hb-online__me, .hb-online__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 14px; }
  .hb-online__me .hb-label, .hb-online__link .hb-label { margin: 0; }
  /* (a name is up to 16 characters: 16 full-width ones fit the field, 303 px of its 323) */
  .hb-online__me .hb-input { height: 68px; padding: 0 10px; font: 800 var(--hb-fs-18)/1.2 var(--hb-font-display); letter-spacing: .04em; }
  .hb-online__joinrow { display: flex; gap: 8px; min-width: 0; }
  .hb-online__joinrow .hb-btn { flex: none; }
  /* a room code is letters and figures (2-9): the title font, so its figures are the card numerals like every number */
  .hb-online__code { flex: 1 1 auto; min-width: 0; font: 800 var(--hb-fs-18)/1 var(--hb-font-display); letter-spacing: .26em; text-transform: uppercase; }
  .hb-online__code::placeholder { color: var(--hb-text-3); opacity: .45; }
  .hb-online__err { margin: -6px 0 0; color: var(--hb-danger-text); font: 500 var(--hb-fs-13)/1.4 var(--hb-font-ui); }
  .hb-online__room { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .hb-online__room .hb-label { margin: 0; }
  .hb-online__coderow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .hb-online__codeview { color: var(--hb-kin-hi); font: 800 32px/1.1 var(--hb-font-display); letter-spacing: .24em; user-select: all; }
  .hb-online__hint { margin: 0; color: var(--hb-text-3); font: 500 var(--hb-fs-13)/1.4 var(--hb-font-ui); }
  .hb-online__busy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 64px; color: var(--hb-text-2); font: 500 var(--hb-fs-14)/1.3 var(--hb-font-ui); }
  .hb-online__busy .hb-online__codeview { font-size: 20px; }
  /* a seat's name in the room: one line, a long one (16 full-width characters) gives way with an ellipsis, as in the
     match bar; its pill keeps its place */
  .hb-online .hb-setup__who { display: flex; align-items: center; gap: 10px; min-height: 24px; min-width: 0; }
  .hb-online__nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hb-online .hb-setup__who > .hb-pill { flex: none; }
  .hb-online .hb-setup__who.is-empty { color: var(--hb-text-3); font: 500 var(--hb-fs-14)/1.3 var(--hb-font-ui); letter-spacing: 0; }
  .hb-online .hb-deckpick[disabled] { cursor: default; box-shadow: inset 0 0 0 1px var(--hb-kin-line); }
  .hb-online__oppdeck { display: flex; align-items: center; justify-content: center; min-height: 64px; box-sizing: border-box; }
  .hb-online__oppdeck:hover { box-shadow: inset 0 0 0 1px var(--hb-line); }
  .hb-online__oppdeck.is-empty { background: none; box-shadow: inset 0 0 0 1px var(--hb-line); }
  .hb-online__oppdeck.is-empty .hb-online__back { opacity: .25; }
  .hb-online__back { width: 33px; flex: none; }
  .hb-online__foot { gap: 10px; }
  .hb-online__foot .hb-btn--ghost { min-width: 0; margin-right: auto; }
  .hb-online__foot .hb-btn[aria-pressed="true"] { --edge: var(--hb-kin); }

  /* ================================================================== the match */
  /* the other player's link: a dot before its name, in its tag of the match bar (beside its fan); away = a ring and
     the word, not only another colour */
  .hb-netdot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: var(--hb-ok); }
  .hb-netdot.is-off { background-color: transparent; box-shadow: inset 0 0 0 2px var(--hb-warn); }
  .hb-ptag__who .hb-netaway { flex: none; height: 17px; padding: 0 8px; font-size: 9px; letter-spacing: .08em; }
  /* my own link while it is down: a chip at the head of the bar's controls */
  .hb-netchip { display: inline-flex; align-items: center; gap: 7px; max-width: 170px; height: var(--hb-h-sm); padding: 0 9px; border-radius: var(--hb-r-ctl);
    box-shadow: inset 0 0 0 1px var(--hb-warn); color: var(--hb-warn); font: 700 var(--hb-fs-12)/1.4 var(--hb-font-ui); white-space: nowrap; }
  .hb-netchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hb-netchip .hb-spin { width: 11px; height: 11px; border-top-color: var(--hb-warn); }
  .hb-netrow__eta { flex: none; color: var(--hb-warn); font: 400 var(--hb-fs-16)/1 var(--hb-font-pownum); letter-spacing: .04em; }
  .hb-netrow .hb-btn { flex: none; }
  #g-decide.is-sent .hb-btn { opacity: .55; pointer-events: none; }
  /* the record holds both deck lists and the seed: no export while a room's game is on */
  #g-main.is-netlive ~ .hb-game__side [data-record] { display: none; }
  .hb-netover__note { min-width: 0; color: var(--hb-text-3); font: 500 var(--hb-fs-13)/1.3 var(--hb-font-ui); }
}

@layer hb-phone {
  @media (max-width: 760px) {
    .hb-online { gap: 14px; }
    .hb-online__me, .hb-online__link { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hb-online__me .hb-input { height: 48px; }
    .hb-online__codeview { font-size: 26px; }
    .hb-online__foot .hb-btn { min-width: 0; }
    .hb-netover__note { flex: 1 1 100%; order: -1; }
  }
  /* a phone: the chip is its spinner alone (the word is its tooltip and the decision panel's row) */
  .is-phone .hb-netchip { gap: 0; padding: 0 8px; }
  .is-phone .hb-netchip__name { display: none; }
  /* a crowded bar (.is-bar-xs, a play area under 1,080 px: play.js fit()): what the decision panel says anyway is left
     out of the bar, so the phase's name keeps its place in it: no chip of my own link (the panel's row has the spinner
     and "Reconnecting…"), and the other player's "Disconnected" is the ring before its name (the panel says the
     sentence and counts the wait) */
  .is-bar-xs .hb-netchip, .is-bar-xs .hb-ptag__who .hb-netaway { display: none; }
}