/* Estland 2 V60 — responsive sizing, compact engagement navigation and usability polish */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Engagement sub-navigation keeps the large feature set readable without showing everything at once. */
.id-engagement-subnav-v60 {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: -2px 0 16px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid rgba(147, 174, 205, .14);
  border-radius: 14px;
  background: rgba(8, 17, 29, .74);
  scrollbar-width: none;
}
.id-engagement-subnav-v60::-webkit-scrollbar { display: none; }
.id-engagement-subnav-v60 button {
  min-height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #8fa2b8;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.id-engagement-subnav-v60 button:hover {
  color: #edf5fd;
  background: rgba(255, 255, 255, .04);
}
.id-engagement-subnav-v60 button.is-active {
  border-color: rgba(244, 187, 85, .28);
  color: #fff4d4;
  background: linear-gradient(135deg, rgba(244, 187, 85, .18), rgba(244, 187, 85, .07));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.id-engagement-subnav-v60 button:active { transform: scale(.98); }
.id-engagement-subnav-v60 i { color: #f5c85e; font-style: normal; }

/* Existing dashboard cards become useful navigation without adding another visual block. */
.id-engagement-welcome[data-v60-target],
.id-engagement-stat[data-v60-target] {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.id-engagement-welcome[data-v60-target]:hover,
.id-engagement-stat[data-v60-target]:hover,
.id-engagement-welcome[data-v60-target]:focus-visible,
.id-engagement-stat[data-v60-target]:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244, 187, 85, .28);
  outline: none;
}
.id-engagement-welcome[data-v60-target]:focus-visible,
.id-engagement-stat[data-v60-target]:focus-visible {
  box-shadow: 0 0 0 3px rgba(244, 187, 85, .14);
}

/* Prevent long labels, translations and user content from forcing cards wider than their container. */
.id-dashboard,
.id-sidebar,
.id-dashboard-content,
.id-dashboard-head,
.id-dashboard-content > section,
.id-v57-grid,
.id-v57-card,
.id-v57-card-head,
.id-task,
.id-task-copy,
.id-task-meta,
.id-lucky-layout-v58,
.id-lucky-panel-v58,
.id-profile-editor-v57,
.id-profile-form-v57,
.id-profile-preview-v57,
.id-social-modal,
.id-chat-window {
  min-width: 0;
}
.id-v57-card-head > div,
.id-section-head > div,
.id-panel-head > div,
.id-social-modal-profile > div,
.id-person-copy,
.id-friend-copy {
  min-width: 0;
}
.id-v57-card h3,
.id-v57-card p,
.id-task strong,
.id-task small,
.id-feed-item strong,
.id-feed-item p,
.id-shop-copy strong,
.id-shop-copy p,
.id-social-profile-v57,
.id-person-copy,
.id-friend-copy {
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  /* Critical fix: 1fr used an automatic minimum based on the horizontally scrolling account nav. */
  .id-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .id-sidebar,
  .id-dashboard-content,
  .id-dashboard-head,
  .id-dashboard-content > section,
  .id-v57-grid,
  .id-v57-card {
    width: 100%;
    max-width: 100%;
  }
  .id-side-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
  }
  .id-side-nav button {
    min-height: 44px;
  }
  .id-presence-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .id-presence-control button {
    min-width: 0;
    padding-inline: 8px;
    font-size: .68rem;
    white-space: nowrap;
  }
  .id-v57-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .id-v57-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .id-dashboard {
    width: min(100% - 20px, 860px);
  }
  .id-sidebar { padding: 11px; }
  .id-profile-card { padding: 10px; }
  .id-dashboard-head { padding-inline: 2px; }
  .id-dashboard-head h1 { font-size: clamp(2rem, 10vw, 2.45rem); }
  .id-section-head h2 { font-size: clamp(1.65rem, 8vw, 2.15rem); line-height: 1.05; }
  .id-section-head p { font-size: .82rem; line-height: 1.5; }
  .id-engagement-subnav-v60 {
    width: 100%;
    margin-bottom: 13px;
  }
  .id-engagement-subnav-v60 button {
    min-height: 44px;
    flex: 1 0 auto;
    padding-inline: 12px;
  }
  .id-engagement-hero {
    gap: 8px;
  }
  .id-engagement-welcome,
  .id-engagement-stat {
    min-width: 0;
  }
  .id-engagement-welcome strong { font-size: 1rem; }
  .id-engagement-stat strong { font-size: 1rem; }
  .id-v57-card { border-radius: 17px; }
  .id-task-meta button,
  .id-season-claim,
  .id-shop-action,
  .id-profile-save-v57,
  .id-lucky-spin-v58,
  .id-week-tabs button,
  .id-shop-toolbar button {
    min-height: 44px;
  }
  .id-task-meta {
    gap: 10px;
    flex-wrap: wrap;
  }
  .id-task-meta button {
    margin-left: auto;
    padding-inline: 13px;
  }
  .id-week-tabs,
  .id-shop-toolbar {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .id-week-tabs::-webkit-scrollbar,
  .id-shop-toolbar::-webkit-scrollbar { display: none; }
  .id-week-tabs button,
  .id-shop-toolbar button { flex: 0 0 auto; }
  .id-lucky-status-v58 strong { font-size: .95rem; }
  .id-lucky-status-v58 span,
  .id-lucky-rule-v58 { font-size: .72rem; }
  .id-lucky-odds-v58 span { font-size: .68rem; }
  .id-lucky-odds-v58 b { font-size: .76rem; }
  .id-achievement-card small,
  .id-feed-item time,
  .id-season-goal span,
  .id-season-goal b,
  .id-profile-form-v57 small {
    font-size: .72rem;
    line-height: 1.45;
  }
  body:not(.page-admin) .mobile-nav-item {
    min-height: 54px;
    font-size: .66rem;
  }
}

@media (max-width: 430px) {
  .id-dashboard { width: calc(100% - 16px); }
  .id-sidebar { border-radius: 18px; }
  .id-profile-card strong,
  .id-profile-card span { max-width: calc(100vw - 120px); }
  .id-presence-control button {
    min-height: 42px;
    font-size: .62rem;
  }
  .id-presence-control button i { width: 8px; height: 8px; }
  .id-side-nav button {
    min-height: 42px;
    padding-inline: 11px;
    font-size: .75rem;
  }
  .id-engagement-subnav-v60 { gap: 4px; padding: 4px; }
  .id-engagement-subnav-v60 button {
    min-height: 42px;
    gap: 6px;
    padding-inline: 10px;
    font-size: .72rem;
  }
  .id-v57-card { padding: 14px !important; }
  .id-task { padding: 11px; }
  .id-task-meta {
    grid-column: 1 / -1 !important;
    margin-left: 46px;
  }
  .id-lucky-stage-v58 {
    width: min(276px, 100%) !important;
  }
  .id-lucky-wheel-v58 {
    width: min(244px, calc(100vw - 72px)) !important;
    height: min(244px, calc(100vw - 72px)) !important;
  }
  .id-lucky-hub-v58 { width: 78px; height: 78px; }
  .id-lucky-hub-v58 b { font-size: 12px; }
  .id-lucky-pointer-v58:before { font-size: 6.5px; }
  .id-coin-leaderboard-head,
  .id-panel-head {
    align-items: flex-start;
  }
  .id-coin-leaderboard-head button {
    min-width: 42px;
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .id-engagement-welcome[data-v60-target],
  .id-engagement-stat[data-v60-target] { transition: none; }
}
.id-lucky-pointer-v58:before { content: var(--v60-wheel-result-label, "TULEMUS") !important; }

/* Keep activity timestamps visually separate from the activity title. */
.id-feed-item time {
  display: block;
  margin-top: 4px;
}

@media (max-width: 360px) {
  /* Very narrow phones: keep the header readable instead of squeezing the brand letter-by-letter. */
  .portal-v9 .portal-header-inner,
  .portal-v11 .portal-header-inner {
    gap: 8px;
    padding-inline: 10px;
  }
  .portal-v9 .portal-brand,
  .portal-v11 .portal-brand {
    gap: 0;
    flex: 0 0 auto;
  }
  .portal-v9 .portal-brand-mark,
  .portal-v11 .portal-brand-mark {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }
  .portal-v9 .portal-brand > span:last-child,
  .portal-v11 .portal-brand > span:last-child {
    display: none;
  }
  .portal-v9 .portal-header-actions,
  .portal-v11 .portal-header-actions {
    gap: 6px;
  }
}