/* Hotel view chrome shared by spectators and players: toolbar menu groups, the follow bar, Who's here,
   and the phone layout (bottom sheets, tab bar, safe areas). Loaded after player.css so it can
   override the toolbar and window rules there. Colours come from index.html's :root tokens. */

/* --- toolbar groups -------------------------------------------------------------------------- */
.tb-group { position: relative; display: flex; }
#toolbar .tb-grp { gap: 6px; }
#toolbar .tb-grp .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: .65; margin-left: -1px; }
#toolbar .tb-grp[aria-expanded="true"] { background: linear-gradient(#5f5f5f, #444); }
#toolbar .tb-grp[aria-expanded="true"] .caret { transform: rotate(180deg); }
#toolbar button:focus-visible, #toolbar a:focus-visible { outline: 2px solid var(--select); outline-offset: 1px; }
/* Group labels stay visible on desktop even while playing (the old one-button-per-window bar hid them). */
#toolbar.playing > button#btn-nav .lbl, #toolbar.playing .tb-grp .lbl { display: inline; }

/* --- menu popover (desktop) ------------------------------------------------------------------ */
#toolbar .tb-menu { position: fixed; bottom: calc(var(--bar-h) + 6px); z-index: 45; min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--bar-h) - 24px); overflow: auto; padding: 6px; background: #262626; border: 1px solid #000; border-radius: 8px; box-shadow: inset 0 1px 0 #3d3d3d, 0 4px 0 rgba(0,0,0,.35); color: #eee; }
#toolbar .tb-menu-title { padding: 2px 8px 6px; font: 700 12px Ubuntu, sans-serif; color: #9a9a9a; }
#toolbar .tb-items { display: grid; gap: 2px; }
#toolbar .tb-items > button, #toolbar .tb-items > a { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 38px; padding: 0 10px; background: none; border: 1px solid transparent; border-radius: 6px; color: #eee; font: 500 13px Ubuntu, sans-serif; text-align: left; }
#toolbar .tb-items > button:hover, #toolbar .tb-items > a:hover, #toolbar .tb-items > button:focus-visible, #toolbar .tb-items > a:focus-visible { background: #3a3a3a; }
#toolbar .tb-items > button:disabled { opacity: .45; cursor: default; background: none; }
#toolbar .tb-items .lbl { display: inline !important; white-space: nowrap; }
#toolbar .tb-items > .on { color: #a8e2a8; }
#toolbar .tb-items > .on::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
#toolbar .tb-items .badge { position: static; margin-left: auto; }
#toolbar .tb-items > .on .badge { margin-left: auto; }
#toolbar .tb-items > .on .badge + * { margin-left: 0; }
/* your own head (the imager's small head is 27x30): shown whole, centred */
#toolbar .head { width: 26px; height: 26px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; }
#toolbar .head img { margin: 2px 0 0; image-rendering: pixelated; }
#toolbar .tb-items .checkin { background: none; }
/* Hotel speed (operators): a segmented row inside the Hotel menu */
#toolbar .speed-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 4px; border-top: 1px solid #3a3a3a; margin-top: 4px; }
#toolbar .speed-row .speed-k { color: #9a9a9a; font-size: 12px; }
#toolbar .speed-row .speed { display: flex; gap: 2px; }
#toolbar .speed-row .speed button { height: 30px; padding: 0 8px; border-radius: 5px; }
@media (prefers-reduced-motion: no-preference) {
  #toolbar .tb-menu:not(.hidden) { animation: tb-pop .12s ease-out; }
  @keyframes tb-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --- follow bar -------------------------------------------------------------------------------- */
#followbar { position: fixed; z-index: 16; left: 50%; bottom: calc(var(--bar-h) + 10px); transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); display: flex; align-items: stretch; background: #2b2b2b; color: #f2f2f2; border: 1px solid #000; border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
#followbar .fb-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px 6px 7px; background: none; border: 0; border-radius: 10px 0 0 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#followbar .fb-who:hover { background: #333; }
#followbar button:focus-visible { outline: 2px solid var(--select); outline-offset: -2px; }
#followbar .fb-head { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #1d1d1d; box-shadow: 0 0 0 2px var(--select); }
#followbar .fb-head img { display: block; margin: -6px 0 0 -6px; image-rendering: pixelated; }
#followbar .fb-text { display: grid; min-width: 0; line-height: 1.3; }
#followbar .fb-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the yellow arrow is the same marker drawn over whoever is selected or followed */
#fb-name { font-size: 14px; }
#fb-name::before { content: ''; display: inline-block; vertical-align: 2px; margin-right: 6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--select); }
#fb-doing { font-size: 12px; color: #d6d6d6; }
#fb-mind { font-size: 11px; color: #9a9a9a; }
#fb-mind:empty { display: none; }
#followbar .fb-stop { flex: none; width: 52px; display: grid; place-items: center; background: #3a3a3a; border: 0; border-left: 1px solid #000; border-radius: 0 10px 10px 0; color: #fff; cursor: pointer; }
#followbar .fb-stop:hover { background: #4a4a4a; }
#followbar.invite .fb-stop { display: none; }
#followbar.invite .fb-who { border-radius: 10px; }
#followbar.invite .fb-head img { display: none; }
#followbar.invite .fb-head::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -35%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 13px solid var(--select); }
#followbar.invite #fb-name::before { display: none; }

/* --- who's here -------------------------------------------------------------------------------- */
#guests { right: 12px; top: 56px; width: 300px; }
#guests .guest-hint { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
#guestlist { display: grid; gap: 4px; }
.guest-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 8px 4px 4px; background: #fff; border: 1px solid #bdbdb3; border-radius: 4px; color: var(--ink); font: 13px Ubuntu, sans-serif; text-align: left; cursor: pointer; }
.guest-row:hover { background: #eef6fb; }
.guest-row:focus-visible { outline: 2px solid var(--win-title); outline-offset: 1px; }
.guest-row:disabled { cursor: default; opacity: .6; background: #fff; }
.guest-row.on { background: #fff8cf; border-color: #b58b00; box-shadow: inset 4px 0 0 var(--select); }
.guest-row .ghead { flex: none; width: 34px; height: 38px; overflow: hidden; display: grid; place-items: center; }
.guest-row .ghead img { image-rendering: pixelated; }
.guest-row .gname { flex: 1; min-width: 0; display: grid; }
.guest-row .gname > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest-row .gname small { color: var(--muted); font-size: 12px; }
.guest-row .gtag { flex: none; font-size: 11px; color: var(--muted); }
.guest-row.on .gtag { color: #6b5200; font-weight: 700; }
.empty-note { margin: 12px 4px; color: var(--muted); text-align: center; }
#infostand .follow-actions .btn.go { background: linear-gradient(#5fbf5f, #2f7a2f); }

/* --- touch: 44px targets --------------------------------------------------------------------- */
@media (pointer: coarse) {
  #toolbar > button, #toolbar .tb-grp, #toolbar #chatbar button, #toolbar #chatbar input { min-height: 44px; min-width: 44px; }
  #toolbar .tb-items > button, #toolbar .tb-items > a { height: 46px; }
  #toolbar .speed-row .speed button { height: 44px; min-width: 44px; }
  #zoombox button { width: 44px; height: 44px; font-size: 20px; }
  .btn, .btn.small { min-height: 44px; padding-left: 12px; padding-right: 12px; }
  .room-row { min-height: 52px; }
  .tabs button, #navigator .tabs button { min-height: 44px; }
  .win > header button { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); right: 2px; border: 0; background: transparent; font-size: 0; }
  .win > header button::before { content: '×'; display: grid; place-items: center; width: 26px; height: 26px; margin: auto; border-radius: 5px; border: 1px solid #000; background: #c0392b; color: #fff; font: 700 16px/1 Ubuntu, sans-serif; }
  .win > header { padding-top: 12px; padding-bottom: 12px; padding-right: 50px; }
}

/* --- phones: bottom sheets, tab bar ------------------------------------------------------------ */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  /* every window (navigator, info, Who's here, and the player's) is a sheet above the toolbar */
  .win { left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--bar-h) !important; width: auto !important; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; max-height: calc(100dvh - var(--bar-h) - 56px - var(--safe-t)); border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
  .win > header { flex: none; cursor: default; font-size: 15px; padding-left: 50px; padding-right: 50px; }
  .win .body, .pwin .body { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; padding: 10px 12px 14px; }
  #infostand { max-height: min(52dvh, calc(100dvh - var(--bar-h) - 56px - var(--safe-t))); }

  /* chrome over the room */
  #roominfo { max-width: calc(100% - 128px - var(--safe-l) - var(--safe-r)); }
  #roominfo b { font-size: 15px; }
  #status { display: none; }
  #zoombox { left: auto; right: calc(8px + var(--safe-r)); flex-direction: column; gap: 6px; }
  #followbar { left: calc(8px + var(--safe-l)); right: calc(62px + var(--safe-r)); width: auto; max-width: 460px; transform: none; }
  #roomtools { display: grid !important; top: calc(54px + var(--safe-t)); left: calc(12px + var(--safe-l)); max-width: 62vw; font-size: 12px; }
  #roomtools:empty { display: none !important; }
  #roomtools .desc { display: none; }
  #purse { top: calc(32px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
  #toasts { top: calc(64px + var(--safe-t)); }
  #placehint { top: calc(54px + var(--safe-t)); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }

  /* chat bubbles wrap to two lines instead of being cut off */
  .bubble { max-width: calc(100vw - 12px); white-space: normal; }
  .bubble .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }

  /* menus open as a sheet of big tiles */
  #toolbar .tb-menu { left: 0 !important; right: 0; bottom: var(--bar-h); max-width: none; max-height: calc(100dvh - var(--bar-h) - 56px); padding: 10px 12px 14px; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
  #toolbar .tb-menu-title { font-size: 13px; padding: 2px 2px 10px; color: #bdbdbd; }
  #toolbar .tb-items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  #toolbar .tb-items > button, #toolbar .tb-items > a { flex-direction: column; justify-content: center; gap: 6px; height: 76px; padding: 4px; background: #313131; border: 1px solid #000; border-radius: 10px; font-size: 12px; text-align: center; }
  #toolbar .tb-items .lbl { white-space: normal; line-height: 1.15; }
  #toolbar .tb-items .badge { position: absolute; top: 6px; right: 6px; margin: 0; }
  #toolbar .tb-items > .on { box-shadow: inset 0 0 0 2px var(--accent); }
  #toolbar .tb-items > .on::after { position: absolute; top: 8px; left: 8px; margin: 0; }
  #toolbar .tb-items .ico svg { width: 22px; height: 22px; }
  #toolbar .speed-row { grid-column: 1 / -1; flex-wrap: wrap; border-top: 0; margin: 0; padding: 4px 0 0; }
  #toolbar .speed-row .speed { flex: 1; }
  #toolbar .speed-row .speed button { flex: 1; }
}

/* phone portrait: the toolbar is a tab bar (and the chat box gets its own row while playing) */
@media (max-width: 640px) {
  #toolbar { flex-wrap: wrap; gap: 6px 2px; padding: 4px calc(4px + var(--safe-r)) calc(4px + var(--safe-b)) calc(4px + var(--safe-l)); }
  #toolbar .sp { display: none; }
  #toolbar > button, #toolbar > .tb-group { flex: 1 1 0; min-width: 0; }
  #toolbar > button, #toolbar .tb-grp { flex-direction: column; justify-content: center; gap: 3px; width: 100%; height: 54px; min-width: 0; padding: 0 2px; background: none; border: 0; border-radius: 8px; color: #d8d8d8; font-size: 11px; }
  #toolbar > button:hover, #toolbar .tb-grp:hover { background: #2a2a2a; }
  #toolbar > button .lbl, #toolbar .tb-grp .lbl, #toolbar.playing > button .lbl, #toolbar.playing .tb-grp .lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  #toolbar .tb-grp .caret { display: none; }
  #toolbar > button.on, #toolbar .tb-grp.on, #toolbar .tb-grp[aria-expanded="true"] { background: #2c2c2c; color: #fff; box-shadow: inset 0 3px 0 var(--accent); }
  #toolbar > button.checkin { background: linear-gradient(#5fbf5f, var(--ok-2)); color: #fff; border: 1px solid #000; }
  #toolbar .tb-grp .badge, #toolbar > button .badge { top: 3px; right: calc(50% - 22px); }
  #toolbar.playing #chatbar { order: -1; flex: 1 1 100%; max-width: none; min-width: 0; }
}

/* phone landscape while playing: icon-only groups so the chat box keeps its room */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  #toolbar.playing > button .lbl, #toolbar.playing > button#btn-nav .lbl, #toolbar.playing .tb-grp .lbl, #toolbar.playing .tb-grp .caret { display: none; }
  #toolbar.playing #chatbar { max-width: none; }
}