/* [together] Play together (public/together.js; README "Play together"): the HUD's Chat pill, the chat panel, the toasts, the
   invitation and the dialogs. game.css's tokens (--paper, --ink, --cream, --line, --muted, --gold), so the dark theme follows. No emoji. */

.tg-hud { display: none; position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); zoom: var(--ui, 1); }
body[data-screen="game"] .tg-hud.on { display: flex; }
body.watching .tg-hud { display: none; }
.tg-pill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 3px solid var(--ink);
  border-radius: 99px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow); font-size: 14px; font-weight: 900; }
.tg-count { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: 12px; text-align: center; }
.tg-count:empty { display: none; }
.tg-dot { position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--gold); }

.tg-panel { pointer-events: auto; position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(64px + var(--safe-b)); width: min(360px, calc(100vw - 24px - var(--safe-l) - var(--safe-r)));
  max-height: min(440px, 58vh); display: flex; flex-direction: column; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper);
  box-shadow: 0 5px 0 var(--shadow); zoom: var(--ui, 1); overflow: hidden; -webkit-user-select: text; user-select: text; }
body:not([data-screen="game"]) .tg-panel { display: none; }
.tg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 4px 14px; font-weight: 900; font-size: 14px; }
.tg-x { width: 32px; height: 32px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--cream); font-size: 18px; font-weight: 900; line-height: 1; }
.tg-tabs { display: flex; gap: 6px; padding: 0 10px 6px; }
.tg-tabs button { flex: 1; padding: 6px 8px; border: 2.5px solid var(--ink); border-radius: 10px; background: var(--cream); font-weight: 900; font-size: 13px; }
.tg-tabs button[aria-selected="true"] { background: var(--gold); color: #1D1A1F; }
.tg-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 10px 10px; }
.tg-log { flex: 1; min-height: 70px; max-height: 190px; overflow-y: auto; margin: 0 0 8px; padding: 6px 8px; list-style: none; border: 2px solid var(--line);
  border-radius: 12px; background: var(--cream); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.tg-log li { margin: 2px 0; }
.tg-log li.tg-mine b { color: var(--muted); }
.tg-log li.tg-sys { color: var(--muted); font-style: italic; font-size: 13px; }
.tg-quick, .tg-emotes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tg-chip { flex: none; padding: 5px 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper); font-size: 13px; font-weight: 800; white-space: nowrap; }
.tg-emote { background: var(--cream); }
.tg-form { display: flex; gap: 6px; }
.tg-form input { flex: 1; min-width: 0; padding: 8px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 700; }
.tg-form input:focus-visible, .tg-chip:focus-visible, .tg-act:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tg-send { padding: 0 14px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--gold); color: #1D1A1F; font-weight: 900; }
.tg-off { margin: 4px 0 8px; color: var(--muted); font-size: 14px; }
.tg-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; max-height: 300px; }
.tg-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 4px; border-bottom: 2px solid var(--line); font-size: 14px; }
.tg-who { font-weight: 900; overflow-wrap: anywhere; }
.tg-where { grid-column: 1; color: var(--muted); font-size: 12px; }
.tg-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.tg-act { padding: 4px 8px; border: 2px solid var(--ink); border-radius: 9px; background: var(--cream); font-size: 12px; font-weight: 800; }
.tg-rep { background: #F6D6D2; color: #1D1A1F; }
.tg-empty { color: var(--muted); }

.tg-toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 120px); transform: translateX(-50%); z-index: 60; max-width: min(340px, calc(100vw - 32px));
  padding: 8px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow); font-size: 14px; font-weight: 800;
  text-align: center; pointer-events: none; }
.tg-invite { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); z-index: 70; width: min(380px, calc(100vw - 32px)); padding: 14px;
  border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 5px 0 var(--shadow); }
.tg-invite p { margin: 0 0 10px; font-weight: 800; }

.tg-dialog { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 18px; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper);
  color: var(--ink); box-shadow: 0 6px 0 var(--shadow); font-family: var(--font); -webkit-user-select: text; user-select: text; }
.tg-dialog::backdrop { background: rgba(29, 26, 31, .55); }
.tg-dialog h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.15; }
.tg-dialog p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.tg-dialog a { color: inherit; font-weight: 800; }
.tg-small { color: var(--muted); }
.tg-dialog input[type="text"], .tg-dialog textarea { width: 100%; margin: 0 0 10px; padding: 9px 11px; border: 2px solid var(--ink); border-radius: 12px; background: var(--cream);
  color: var(--ink); font: 700 16px var(--font); }
.tg-dlg-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tg-dlg-btns .btn { flex: 1 1 140px; padding: 11px 12px; font-size: 15px; }
.tg-why { margin: 0 0 8px; padding: 0; border: 0; }
.tg-why legend { font-weight: 900; margin-bottom: 4px; }
.tg-radio, .tg-check { display: block; padding: 4px 0; font-size: 15px; font-weight: 700; }
.tg-note-l { display: block; margin: 6px 0 4px; font-weight: 800; font-size: 14px; }
@media (max-width: 520px) { .tg-panel { max-height: 52vh; } .tg-log { max-height: 130px; } }