/* Portal shared clock — compact header (keep actions on screen)
 * Gomoku/Renju: [Телеграм] · clock · [кабинет] — UI_IMPORTANT_ABOVE / PORTAL_CLOCK_ROW
 */
.portal-clock-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.1;
  padding: 1px 10px 0;
  color: var(--title, #00ced1);
  font-family: var(
    --font-clock,
    "Segoe UI",
    ui-monospace,
    "Cascadia Mono",
    "Roboto Mono",
    monospace
  );
  box-sizing: border-box;
}
.portal-clock-tg {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: var(--clock-size, 0.95rem);
  font-weight: 700;
  color: var(--title, #00ced1);
  white-space: nowrap;
  opacity: 0.92;
  line-height: 1.15;
  align-self: center;
  min-width: 0;
}
.portal-clock-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.portal-clock-wrap #clock,
.portal-clock-wrap .portal-clock {
  font-size: var(--clock-size, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.portal-clock-wrap #weekday,
.portal-clock-wrap .portal-weekday {
  font-size: calc(var(--clock-size, 0.95rem) * 0.72);
  opacity: 0.9;
  text-transform: lowercase;
  line-height: 1.1;
}
.portal-clock-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 38%;
}
.portal-clock-actions button,
.portal-clock-actions .pab-clock-btn {
  font-family: inherit;
  font-size: var(--clock-size, 0.95rem);
  font-weight: 700;
  line-height: 1.15;
  padding: 1px 6px;
  margin: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(0, 206, 209, 0.45);
  border-radius: 6px;
  background: transparent;
  color: var(--title, #00ced1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-clock-actions button.primary,
.portal-clock-actions .pab-clock-btn.primary {
  background: rgba(201, 162, 39, 0.22);
  border-color: rgba(201, 162, 39, 0.55);
  color: #ffe08a;
}
/* Bot links live in page footer (not header) — see UI_IMPORTANT_ABOVE.md */
.portal-footer-bots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 10px 0 4px;
  font-size: 0.78rem;
  font-family: var(--font-ui, "Segoe UI", system-ui, sans-serif);
}
.portal-footer-bots a,
.portal-footer-bots a:link,
.portal-footer-bots a:visited,
.portal-footer-bots a:any-link,
.portal-footer-bots .portal-footer-link {
  /* No browser :visited purple — buttons + gold !important */
  color: #ffe08a !important;
  -webkit-text-fill-color: #ffe08a !important;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.portal-footer-bots a:hover,
.portal-footer-bots a:focus-visible,
.portal-footer-bots .portal-footer-link:hover,
.portal-footer-bots .portal-footer-link:focus-visible {
  text-decoration: underline;
  color: #fff3c4 !important;
  -webkit-text-fill-color: #fff3c4 !important;
}
.portal-footer-bots a:active,
.portal-footer-bots .portal-footer-link:active {
  color: #ffd54f !important;
  -webkit-text-fill-color: #ffd54f !important;
}
.portal-footer-bots .pab-sep {
  opacity: 0.55;
  color: var(--muted, #bdbdbd);
}
/* When actions live in the clock row, hide the bulky auth bar chrome */
#portal-auth-bar.pab-relocated {
  display: none !important;
}