/* ============================================================
   Long Lost Gamers — UI styles
   ============================================================ */

.pixel-avatar {
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

.app {
  position: relative;
  z-index: 1;
  /* 100vh kept as a fallback; dvh tracks the *visible* viewport so short pages
     don't get a phantom scrollbar / below-the-fold footer while the mobile URL
     bar is showing. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app__main {
  flex: 1;
  width: 100%;
}

/* ---------------- Logo ---------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo__badge {
  width: var(--logo-size, 34px);
  height: var(--logo-size, 34px);
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--accent);
  border-radius: 28%;
  box-shadow: var(--shadow-sm);
}
.logo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--logo-size, 34px) * 0.5);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.logo__accent {
  color: var(--accent-bright);
}

/* ---------------- Top nav ---------------- */
#topnav {
  min-height: 71px;
}
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
}
.topnav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px 24px;
  min-height: 71px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.topnav--wide .topnav__inner {
  max-width: none;
}
.topnav--minimal {
  min-height: 0;
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 50;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  pointer-events: none;
}
.topnav--minimal .topnav__inner {
  margin: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.topnav__logo {
  --logo-size: 34px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.topnav__links {
  display: none;
  gap: 4px;
  margin-left: 12px;
  min-width: 260px;
}
.topnav__search {
  display: none;
  flex: 1;
  min-width: 240px;
}
.topnav:not(.topnav--minimal) .topnav__search {
  display: block;
  position: absolute;
  left: 50%;
  /* Stay centered without colliding with the logo (~250px) or the right group
     (196px): cap the width at viewport minus 2x the wider side. The old
     `- 620px` collapsed the box to ~100px on small tablets (~720-820px). */
  width: min(620px, calc(100vw - 500px));
  transform: translateX(-50%);
}
.navlink {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s;
  text-decoration: none;
}
.navlink:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.navlink.is-active {
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.topnav__me {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    box-shadow 0.16s,
    transform 0.16s;
}
.topnav__me:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.topnav__me-name {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

/* theme toggle */
.theme-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 17px;
  transition:
    color 0.14s,
    box-shadow 0.16s,
    transform 0.16s;
}
.theme-toggle[hidden] {
  display: none;
}
.theme-toggle:hover {
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.theme-toggle [data-theme-icon] {
  width: 1em;
  height: 1em;
  display: grid;
  place-items: center;
  line-height: 1;
}
.theme-toggle svg,
.account__item-icon svg {
  display: block;
}
.topnav__signin[hidden] {
  display: none;
}

/* ---------------- Screens ---------------- */
.screen {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}
.screen--search {
  padding-top: 0;
  padding-bottom: 0;
}
.screen--narrow {
  max-width: 760px;
}

/* ---------------- Hero / search ---------------- */
.hero {
  min-height: calc(100svh - 148px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 0 56px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 22px 0 0;
  color: var(--ink);
}
.hero__hl {
  color: var(--accent-bright);
  position: relative;
  white-space: nowrap;
}
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin: 30px auto 0;
  padding: 8px 8px 8px 18px;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.topnav__search .searchbar {
  width: 100%;
  max-width: 620px;
  margin: 0;
  padding: 6px 6px 6px 14px;
  box-shadow: var(--shadow-sm);
}
.topnav__search .searchbar--nav {
  max-width: none;
}
.topnav__search .searchbar .btn {
  font-size: 14.5px;
  padding: 10px 16px;
}
.searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.searchbar__icon {
  color: var(--ink-faint);
  font-size: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.searchbar .btn {
  flex: 0 0 auto;
}
.searchbar__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 17px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
}
.searchbar__input::placeholder {
  color: var(--ink-ghost);
  font-weight: 500;
}
.searchbar__input:disabled,
.searchbar__input:read-only {
  cursor: not-allowed;
}

/* ---------------- Results ---------------- */
.results {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* On the dedicated /search page the results lead the screen, so drop the
   margin and let the standard .screen top padding set the gap below the nav. */
.screen--results .results {
  margin-top: 0;
}
.results__head {
  padding: 0 4px 4px;
}
.results__count {
  font-size: 14px;
  color: var(--ink-faint);
}
.results__count strong {
  color: var(--ink);
}
.results__count em {
  font-style: normal;
  color: var(--accent-bright);
  font-family: var(--font-mono);
  /* The echoed query is user text — let a long single token break instead of
     pushing the count line past the screen edge. */
  overflow-wrap: anywhere;
}

.gamer-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    box-shadow 0.16s,
    transform 0.16s,
    border-color 0.16s;
}
.gamer-card:hover,
.gamer-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--line-strong);
  outline: none;
}
.gamer-card__avatar {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.gamer-card__main {
  flex: 1;
  min-width: 0;
}
.gamer-card__top {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Allow the row to shrink so a long gamertag wraps instead of overflowing the
     card (and forcing horizontal page scroll). */
  min-width: 0;
}
.gamer-card__alias {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gamer-card__alias:hover {
  color: var(--accent-bright);
}
.gamer-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 9px;
}
.gamer-card__aka {
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.45;
}
.gamer-card__aka-name {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.tag-pair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.gamer-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.14s;
  text-decoration: none;
}
.link-btn:hover {
  color: var(--accent-bright);
}
.link-btn svg {
  transition: transform 0.14s;
}
.link-btn:hover svg {
  transform: translateX(2px);
}

.empty-find {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--paper-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.empty-find__art {
  flex-shrink: 0;
  opacity: 0.8;
}
.empty-find__body {
  flex: 1;
  min-width: 0;
}
.empty-find__body h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.empty-find__body p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.empty-find__body strong {
  font-family: var(--font-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.watch-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: color-mix(in srgb, var(--paper) 54%, transparent);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.watch-prompt p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.watch-prompt strong {
  font-family: var(--font-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------------- Game tag chip ---------------- */
.game-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--c) 13%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.game-tag--md {
  font-size: 13.5px;
  padding: 4px 12px 4px 10px;
}
.game-tag--sm {
  font-size: 12.5px;
  padding: 3px 10px 3px 8px;
}
.game-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

/* ---------------- Years chip ---------------- */
.years-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: -0.02em;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.16s,
    background 0.16s,
    color 0.16s,
    border-color 0.16s;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled {
  cursor: default;
}
.btn__icon {
  display: grid;
  place-items: center;
  font-size: 1.08em;
}
.btn--sm {
  font-size: 13px;
  padding: 8px 15px;
}
.btn--md {
  font-size: 14.5px;
  padding: 10px 19px;
}
.btn--lg {
  font-size: 16px;
  padding: 13px 26px;
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--accent:hover {
  background: var(--accent-bright);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--paper);
  border-color: var(--ink-faint);
}
.btn--connect-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn--connect-ghost:hover {
  background: var(--ink-2);
  color: var(--bg);
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ---------------- Page head ---------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.page-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.03em;
  margin: 0;
}
.page-head__sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 52ch;
  text-wrap: pretty;
}
/* ---------------- Add-tag card / fields ---------------- */
.add-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.add-card--spaced {
  margin-top: 24px;
}
.form-actions {
  margin-top: 12px;
}
.add-card__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.9fr auto;
  gap: 14px;
  align-items: end;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field__input {
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.14s,
    box-shadow 0.14s;
  width: 100%;
}
.field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field__input.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}
.add-card__btn {
  height: 46px;
}

/* ---------------- Tag list (my tags) ---------------- */
.tag-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tag-row {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr auto auto;
  align-items: center;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.14s;
}
.tag-row:hover {
  border-color: var(--line-strong);
}
.tag-row__alias {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.tag-row__years {
  justify-self: start;
}

/* ---------------- Icon buttons ---------------- */
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  background: transparent;
  color: var(--ink-faint);
  font-size: 18px;
  transition: all 0.14s;
}
.icon-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.icon-btn--danger:hover {
  background: color-mix(in srgb, var(--red) 14%, var(--paper));
  color: var(--red-bright);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}

.muted-note {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 30px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
}

/* ---------------- Toasts ---------------- */
.toast-wrap {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 200;
  display: flex;
  width: min(calc(100vw - 32px), 520px);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transform: translateX(-50%);
}
.toast {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  animation: toast-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast__icon {
  display: grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  font-size: 16px;
}
.toast--error .toast__icon {
  color: var(--red);
}
.toast--info .toast__icon {
  color: var(--blue);
}
.toast--leaving {
  animation: toast-out 0.2s ease-in forwards;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* ---------------- Feedback dialogs ---------------- */
.feedback-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.feedback-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 48%, transparent);
  backdrop-filter: blur(3px);
}
.feedback-dialog__panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.feedback-dialog__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.2;
}
.feedback-dialog__message {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.feedback-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.btn--danger {
  background: var(--red);
  color: var(--accent-ink);
}
.btn--danger:hover {
  background: var(--red-bright);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation-duration: 0.01ms;
  }
}
.muted-note a {
  color: var(--accent-bright);
  font-weight: 700;
}
.muted-note a:hover {
  text-decoration: underline;
}
.message-note {
  text-align: center;
  color: var(--ink-soft);
}

/* ---------------- Watch list (lost friends) ---------------- */
.watch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.watch-row {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.14s;
}
.watch-row__status {
  width: 30px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.radar {
  color: var(--ink-ghost);
  font-size: 18px;
  display: grid;
  place-items: center;
}
.watch-row__main {
  flex: 1;
  min-width: 0;
}
.watch-row__alias {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.watch-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
}
.watch-row__since {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.waiting-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  padding: 0 4px;
}

/* ---------------- Profile ---------------- */
/* Add forms live in a native <dialog> (opened with showModal) so opening one
   doesn't shift the list below it. */
.add-modal {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  /* Cap to the visible viewport and scroll internally so the lower fields and
     the submit button stay reachable on short screens (landscape, or portrait
     with the keyboard open after autofocus). */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.add-modal::backdrop {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(2px);
}
.add-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.add-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.add-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s;
}
.add-modal__close:hover {
  background: var(--line);
  color: var(--ink);
}
.add-modal .add-card__grid {
  padding: 18px;
}
.add-games-modal {
  width: min(680px, calc(100vw - 32px));
}
.add-games-modal__identity {
  color: var(--accent);
}
.add-games-modal__body {
  padding: 18px;
}
.add-games-list {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.add-games-row {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr) minmax(0, 1fr) minmax(110px, 0.7fr)
    auto;
  gap: 12px;
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
}
.add-games-row legend {
  display: none;
}
.add-games-row + .add-games-row {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.add-games-row__remove[hidden] {
  display: none;
}
.add-games-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.profile-section + .profile-section {
  margin-top: 38px;
}
.profile-section--empty {
  display: none;
}
body.is-owner .profile-section--empty {
  display: block;
}
/* The aliases section hosts the Connect button, so it must stay visible to
   visitors even when empty — otherwise Connect is unreachable on a profile
   with no aliases. */
.profile-section--empty[data-profile-section="aliases"] {
  display: block;
}
.profile-section-bar {
  position: relative;
  margin: 34px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  padding-right: 76px;
}
/* First section sits under the screen's top padding already — drop the
   redundant top margin so ALIASES isn't pushed down by ~34px extra. */
.profile-section:first-child .profile-section-bar {
  margin-top: 0;
}
.profile-section-bar .section-label {
  margin: 0;
}
.profile-section-add,
.profile-connect {
  position: absolute;
  top: 0;
  right: 0;
}
/* .btn's display would override the hidden attribute — keep these hidden until JS reveals one. */
.profile-section-add[hidden],
.profile-connect[hidden] {
  display: none;
}
.section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 34px 0 14px;
}
.play-table {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
body.is-owner .play-table {
  overflow: visible;
}
.play-table__head,
.play-card {
  display: grid;
  /* Gamertag · game · years. The badge lives inside the game cell (paired with
     the name it represents), so this is a plain three-column grid. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr) minmax(0, 0.5fr);
  align-items: center;
  gap: 14px;
}
.play-table__head {
  padding: 13px 20px 12px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.play-table__head span:last-child {
  text-align: right;
}
.play-card {
  position: relative;
  padding: 14px 20px;
  transition: background 0.12s;
}
.play-card:hover {
  background: var(--paper-2);
}
.play-card:last-child {
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.play-card + .play-card {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.play-card__gamecell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.play-card__short {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, var(--paper));
  border-radius: var(--r-sm);
}
.play-card__game {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.play-card__alias {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  /* The gamertag is the key identifier — wrap long ones rather than hiding
     part of them behind an ellipsis. */
  overflow-wrap: anywhere;
}
/* Network sits under the alias as a subtitle, matching the aliases section. */
.play-card__alias .game-row__network {
  font-family: var(--font-body);
}
.source-marker {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 18px;
}
.source-marker__icon {
  display: block;
  width: 18px;
  height: auto;
}
.source-marker__check {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}
.source-marker--stale {
  filter: grayscale(1);
  opacity: 0.5;
}
.play-card__years {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  text-align: right;
}
.play-card__actions {
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transform: translate(calc(100% + 10px), -50%);
}
body.is-owner .play-card__actions {
  display: flex;
}
/* Two buttons that morph while editing: Edit→Cancel, Delete→Save. */
.play-card__actions .icon-cancel,
.play-card__actions .icon-save {
  display: none;
}
.play-card--editing .icon-edit,
.play-card--editing .icon-delete {
  display: none;
}
.play-card--editing .icon-cancel,
.play-card--editing .icon-save {
  display: block;
}
.profile-edit-input {
  min-width: 0;
  width: 100%;
  /* Match the 30px play-card badge (the tallest cell in view mode) so entering
     edit mode doesn't grow the row. */
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
}
.profile-edit-input.mono {
  font-family: var(--font-mono);
}
.profile-edit-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}
/* While editing, the Delete button acts as Save — hint green, not red. */
.play-card--editing [data-play-delete]:hover {
  background: color-mix(in srgb, var(--green) 14%, var(--paper));
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

@media (max-width: 920px) {
  .play-card__actions {
    right: 10px;
    transform: translateY(-50%);
  }
  .play-card__actions > .icon-btn,
  .game-row__actions > .icon-btn {
    display: none;
  }
  .play-card__actions .row-menu,
  .game-row__actions .row-menu {
    display: block;
  }
}

/* ---------------- Auth widget ---------------- */
#firebaseui-auth-container {
  max-width: 390px;
}

/* ---------------- Top-right group + account menu ---------------- */
.topnav__right {
  width: 196px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  pointer-events: auto;
}
.topnav__signin-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 65;
  animation: menu-in 0.14s ease-out;
}
.topnav__signin-panel[hidden] {
  display: none;
}
.topnav--minimal .topnav__right {
  width: auto;
}
.topnav--minimal .topnav__logo,
.topnav--minimal .topnav__links {
  display: none;
}
.account {
  position: relative;
}
.account[hidden] {
  display: none;
}
.account .topnav__me {
  margin-left: 0;
  gap: 8px;
}
.account .topnav__me.is-open {
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.account__caret {
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--ink-faint);
  transition: transform 0.16s;
}
.account .topnav__me.is-open .account__caret {
  transform: rotate(180deg);
}
.account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 224px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: menu-in 0.14s ease-out;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}
/* 3-dot trigger (mobile only — hidden on desktop) */
.row-menu {
  display: none;
}
/* Bottom action sheet */
.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.action-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fade-in 0.2s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.action-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 0 env(safe-area-inset-bottom, 0px);
  animation: sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}
.action-sheet__btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 24px;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.action-sheet__btn[hidden] {
  display: none;
}
.action-sheet__btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -3px;
}
.action-sheet__btn:active {
  background: var(--paper-2);
}
.action-sheet__btn--danger {
  color: var(--red-bright);
}
.action-sheet__btn--cancel {
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-weight: 400;
}
.account__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 11px;
}
.account__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.account__sep {
  height: 1px;
  background: var(--line);
  margin: 5px 6px;
}
.account__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  text-align: left;
  transition:
    background 0.12s,
    color 0.12s;
}
.account__item-icon {
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--ink-faint);
}
.account__item:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.account__item:hover .account__item-icon {
  color: var(--ink);
}
.account__item.is-active {
  background: var(--paper-2);
  color: var(--ink);
}
.account__item.is-active .account__item-icon {
  color: var(--accent-bright);
}
.account__item--danger:hover {
  background: color-mix(in srgb, var(--red) 12%, var(--paper));
  color: var(--red-bright);
}
.account__item--danger:hover .account__item-icon {
  color: var(--red-bright);
}

/* ---------------- Connected accounts ---------------- */
.accounts-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.accounts-dialog::backdrop {
  background: rgba(20, 18, 16, 0.58);
  backdrop-filter: blur(3px);
}
.accounts-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 28px 24px;
}
.accounts-dialog h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.025em;
}
.accounts-dialog__hint {
  margin: 6px 0 0;
  color: var(--ink-faint);
  font-size: 13px;
}
.accounts-dialog__close {
  flex: 0 0 auto;
  color: var(--ink-faint);
}
.accounts-feedback {
  margin: 0 28px 18px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--green) 13%, var(--paper));
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 600;
}
.accounts-feedback[data-kind="error"] {
  background: color-mix(in srgb, var(--red) 11%, var(--paper));
  color: var(--red-bright);
}
.provider-list {
  padding: 0 28px 28px;
}
.provider-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.provider-card:has(.provider-card__hit:not(:disabled)):hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.provider-card__hit {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.provider-card__hit:disabled {
  cursor: wait;
}
.provider-card__hit:focus-visible {
  outline: 3px solid color-mix(in srgb, #5865f2 55%, transparent);
  outline-offset: 3px;
}
.provider-card__logo {
  display: block;
  width: 132px;
  height: auto;
}
.provider-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.provider-card h3 {
  margin: 0;
}
.provider-card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.provider-status {
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.provider-status[data-state="active"] {
  background: #2e7d32;
  color: #fff;
}
.provider-status[data-state="warning"] {
  background: color-mix(in srgb, var(--yellow) 17%, var(--paper));
  color: var(--yellow-bright);
}
.provider-card__disconnect {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  pointer-events: auto;
}
.provider-card__disconnect:hover {
  color: var(--red-bright);
}
.provider-card__disconnect[hidden] {
  display: none;
}
.provider-card__username,
.provider-card__last-sync {
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: 12px;
  pointer-events: none;
}
.provider-card__username span {
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.provider-card__username.is-placeholder {
  visibility: hidden;
}
.provider-card__last-sync.is-placeholder {
  visibility: hidden;
}

@media (max-width: 560px) {
  .accounts-dialog__head {
    padding: 22px 20px 20px;
  }
  .accounts-feedback {
    margin: 0 20px 16px;
  }
  .provider-list {
    padding: 0 20px 20px;
  }
  .provider-card {
    padding: 16px;
  }
  .provider-card__heading {
    align-items: center;
  }
}

.hero__authnote {
  margin: 18px auto 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 520px;
  text-wrap: pretty;
}
.hero__authnote:empty {
  display: none;
}
.signin {
  max-width: 380px;
  margin: 0;
}
.topnav__signin-panel .authform {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.signin__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signin__btn {
  width: 100%;
}
.signin__btn .btn__icon {
  font-size: 1.25em;
}
.signin__legal {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}
.signin__legal a {
  color: var(--ink-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.signin__legal a:hover {
  color: var(--accent-bright);
  border-color: var(--accent);
}
.signin.is-pulse .signin__btn {
  animation: signin-nudge 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.signin.is-pulse .signin__btn:last-child {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
.topnav__signin.is-pulse {
  animation: signin-nudge 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
}
@keyframes signin-nudge {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Multi-step email auth card */
.signin--form {
  max-width: 408px;
}
.authform {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: authform-in 0.2s ease-out;
}
@keyframes authform-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.authform__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.authform__sub {
  margin: -6px 0 2px;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.authform__sub strong {
  font-family: var(--font-mono);
  color: var(--ink);
}
.authform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.authform__email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.14s;
}
.authform__email:hover {
  border-color: var(--line-strong);
}
.authform__email-val {
  font-size: 14px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.authform__email-edit {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.authform__trouble {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.authform__trouble:hover {
  color: var(--accent-bright);
}
.authform__error {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--red-bright);
}
.authform__error:empty {
  display: none;
}
.authform__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.authform__actions--single {
  justify-content: flex-end;
}
.authform__cancel {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-faint);
  border-radius: var(--r-sm);
  transition: color 0.14s;
}
.authform__cancel:hover {
  color: var(--ink);
}
[data-retro="on"] .authform {
  box-shadow: var(--shadow-hard);
  border-color: var(--ink);
  border-width: 1.5px;
}

/* ---------------- Prose (legal pages) ---------------- */
.prose {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px 26px 18px;
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}
.prose p,
.prose li {
  font-size: 15px;
}
.prose a {
  color: var(--accent-bright);
  font-weight: 600;
}
.prose a:hover {
  text-decoration: underline;
}

/* ---------------- Footer ---------------- */
.app__footer {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.app__footer-tag {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.app__footer-links {
  display: flex;
  gap: 18px;
}
.app__footer-links a {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-faint);
  transition: color 0.14s;
}
.app__footer-links a:hover {
  color: var(--accent-bright);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 720px) {
  .add-games-row {
    grid-template-columns: 1fr;
  }
  .add-games-row__remove {
    justify-self: end;
  }
  .field__input {
    font-size: 16px;
  }
  .topnav__me-name {
    display: none;
  }
  .topnav__inner {
    padding-inline: 16px;
    gap: 12px;
  }
  .topnav--minimal {
    top: 16px;
    right: 16px;
  }
  .topnav--minimal .topnav__inner {
    padding: 0;
    gap: 12px;
  }
  .topnav__search {
    min-width: 0;
  }
  .topnav:not(.topnav--minimal) .topnav__inner {
    flex-wrap: wrap;
  }
  .topnav:not(.topnav--minimal) .topnav__search {
    order: 3;
    position: static;
    flex-basis: 100%;
    width: auto;
    max-width: none;
    transform: none;
  }
  .topnav__search .searchbar {
    padding-left: 14px;
  }
  .topnav__right {
    width: auto;
  }
  .screen--search {
    padding-inline: 18px;
  }
  .hero {
    min-height: calc(100svh - 176px);
    padding-block: 72px 44px;
  }
  .app__footer {
    padding: 14px 24px;
  }
  .add-card__grid {
    grid-template-columns: 1fr 1fr;
  }
  .add-card__btn {
    grid-column: 1 / -1;
  }
  .profile-section-bar {
    flex-wrap: wrap;
    padding-right: 0;
  }
  .profile-section-add,
  .profile-connect {
    position: static;
    margin-left: auto;
  }
  .play-table__head {
    display: none;
  }
  /* Stack the three cells; the badge stays inline in the game cell. */
  .play-card {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .play-card__years {
    text-align: left;
  }
  /* Keep room for the owner action while centering it against the full card. */
  body.is-owner .play-card__alias {
    padding-right: calc(10px + 2 * 44px + 6px + 10px);
  }
  .play-card__actions {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  .profile-edit-input {
    height: 36px;
    /* 16px keeps iOS Safari from auto-zooming the page on focus. */
    font-size: 16px;
  }
  .gamer-card {
    flex-wrap: wrap;
  }
  .empty-find {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px 18px;
  }
  .empty-find .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .watch-prompt {
    align-items: flex-start;
    flex-direction: column;
  }
  .gamer-card__actions {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
  .tag-row {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }
  .tag-row__years {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .app__footer {
    padding-inline: 18px;
  }
}

/* ---------------- Handle table (aliases) ---------------- */
/* A handle = a name on an optional network with the games played under it.
   Handle, network, game, and years align across every grouped row. */
.handle-table {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
body.is-owner .handle-table {
  overflow: visible;
}
/* Shared column grid for the table header and game rows. */
.handle-table__head,
.game-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr) minmax(0, 0.5fr);
  align-items: center;
  gap: 14px;
}
.handle-table__head {
  padding: 13px 20px 12px;
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.handle-table__head span:last-child {
  text-align: right;
}

/* Separator between handle groups: heavier border above the first game row
   of every group after the first. */
.handle-group + .handle-group [data-game-list] > .game-row:first-child {
  border-top: 1px solid var(--line);
}

/* Identity cell: alias + network, populated only for the first game row of
   each handle group — network sits directly under the alias as a subtitle
   since together they form one identity, distinct from the games under it. */
.game-row__identity {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.is-owner .game-row__identity {
  padding-right: 36px;
}
/* Add-game control: belongs to the handle/network (adds a game to this
   alias), not to any one game, so it lives here rather than in the game
   column. Centered against the whole identity box (not just the alias
   line) so it lines up with the game column's own content — that column
   centers "ST"/"SBW"/"—" against the same whole-row height, and matching
   that reference frame (rather than the alias line specifically) is what
   keeps everything in a row looking level with each other. */
.game-row__add-game {
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.14s;
}
/* Its hover fill is a stronger tint than the row's own `.game-row:hover`
   background — since this button lives *inside* the row (unlike the
   pencil/trash, which float outside it via .game-row__actions), hovering it
   also triggers the row's hover; using the same --paper-2 for both would
   make the button's own hover state invisible against it. */
.game-row__add-game:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--ink);
}
body.is-owner .game-row__add-game {
  display: inline-flex;
}
body.is-owner .game-row__add-game[hidden] {
  display: none;
}
.game-row__alias {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.game-row__alias [data-handle-alias] {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-row__network {
  min-width: 0;
  color: var(--c, var(--ink-2));
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No network to show — hide the subtitle line rather than render a floating
   "—" under the alias (later rows in a group leave this empty too). */
.game-row__network:empty,
.game-row__network--empty {
  display: none;
}
.game-row__gamecell--empty {
  color: var(--ink-faint);
  font-size: 13px;
}
.network-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.network-badge[hidden] {
  display: none;
}
/* Later game rows leave the repeated handle and network cells empty. */
.game-row {
  position: relative;
  padding: 11px 20px;
  transition: background 0.12s;
}
.game-row:hover {
  background: var(--paper-2);
}
.handle-group:last-child [data-game-list] > .game-row:last-child {
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.game-row + .game-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.game-row__gamecell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.game-row__short {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, var(--paper));
  border-radius: var(--r-sm);
}
.game-row__game {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-row__years {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  text-align: right;
}
.game-row__actions {
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transform: translate(calc(100% + 10px), -50%);
}
body.is-owner .game-row__actions {
  display: flex;
}
.game-row__actions .icon-cancel,
.game-row__actions .icon-save {
  display: none;
}
.game-row--editing .icon-edit,
.game-row--editing .icon-delete {
  display: none;
}
.game-row--editing .icon-cancel,
.game-row--editing .icon-save {
  display: block;
}
.game-row--editing [data-play-delete]:hover {
  background: color-mix(in srgb, var(--green) 14%, var(--paper));
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}

/* Add-card grids stack vertically: one field per row so the assistive
   game → platform → network flow has room to breathe. */
.add-card__grid--handle,
.add-card__grid--lf {
  grid-template-columns: 1fr;
}
.add-card__grid--handle .add-card__btn,
.add-card__grid--lf .add-card__btn {
  justify-self: end;
  padding-inline: 22px;
}
/* Assisted fields share their label row with contextual Change / View all
   actions. The muted input communicates a default, not an immutable value. */
.field__labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 16px;
}
.field__input--locked {
  background: var(--paper-2);
  color: var(--ink-faint);
  cursor: default;
}
.field__input--locked:focus {
  border-color: var(--line-strong);
  box-shadow: none;
}
.field__hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.field__hint--warning {
  color: var(--warning, #9a5b12);
}

@media (max-width: 920px) {
  .handle-table__head {
    display: none;
  }
  .game-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    row-gap: 6px;
  }
  .game-row__identity {
    grid-column: 1 / -1;
  }
  .game-row__alias:empty {
    display: none;
  }
  body.is-owner .game-row {
    padding-right: 56px;
  }
  .game-row__actions {
    right: 10px;
    transform: translateY(-50%);
  }
}

@media (max-width: 720px) {
  .add-modal__close {
    width: 44px;
    height: 44px;
  }
  .add-modal__close {
    font-size: 24px;
  }
  body.is-owner .game-row {
    padding-right: calc(10px + 44px + 10px);
  }
  .play-card__game,
  .game-row__game {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  /* Let a long game title wrap inside its chip rather than stretch the search
     card wider than the viewport. */
  .game-tag {
    white-space: normal;
  }
  /* Grow the "Change / View all" tap area without moving the label row. */
  .link-btn {
    padding: 6px 4px;
    margin: -6px -4px;
  }
}